@elliemae/ds-breadcrumb 3.16.0 → 3.16.1-rc.10

package/dist/cjs/DSBreadcrumb.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
@@ -34,9 +38,9 @@ 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_DSBreadcrumbItem = __toESM(require("./DSBreadcrumbItem"));
-var import_useKeyboardNavigation = require("./hooks/useKeyboardNavigation");
-var import_styles = require("./styles");
+var import_DSBreadcrumbItem = __toESM(require("./DSBreadcrumbItem.js"));
+var import_useKeyboardNavigation = require("./hooks/useKeyboardNavigation.js");
+var import_styles = require("./styles.js");
 const htmlElements = ["nav", "div", "header", "footer", "main"];
 const DSBreadcrumb = ({
   containerProps = {},
@@ -76,14 +80,27 @@ const DSBreadcrumb = ({
 };
 DSBreadcrumb.Item = import_DSBreadcrumbItem.default;
 const props = {
+  /** props injected to breadcrumb wrapper */
   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'
+   */
   as: import_ds_props_helpers.PropTypes.string.description(
     "Type of element you want the main container to be: 'nav', 'div', 'header', 'footer', 'main'"
   ),
+  /**
+   * Whether to show the last element of the breadcrumb as a title
+   * Also removes trailing slash to show last element as title
+   */
   isTitle: import_ds_props_helpers.PropTypes.bool.description(
     "Whether to show the last element of the breadcrumb as a title. Also removes trailing slash to show last element as title"
   ),
+  /** breadcrumb label */
   label: import_ds_props_helpers.PropTypes.string.description("breadcrumb label"),
+  /**
+   * Container items to wrap
+   */
   children: import_ds_props_helpers.PropTypes.arrayOf(import_ds_props_helpers.PropTypes.element).isRequired.description("Container items to wrap")
 };
 DSBreadcrumb.propTypes = props;

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, { cloneElement, useMemo } from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport DSBreadcrumbItem from './DSBreadcrumbItem';\nimport { useKeyboardNavigation } from './hooks/useKeyboardNavigation';\nimport type { DSBreadcrumbPropsT } from './index.d';\nimport { StyledContainer, StyledList } from './styles';\n\nconst htmlElements = ['nav', 'div', 'header', 'footer', 'main'] as const;\n\nconst DSBreadcrumb = ({\n  containerProps = {},\n  as = 'nav',\n  label = 'Breadcrumb',\n  isTitle = false,\n  children,\n  trailingSlash = true,\n  ...rest\n}: DSBreadcrumbPropsT): React.ReactElement => {\n  const [addRef, onKeyDown] = useKeyboardNavigation();\n\n  const safeElement = useMemo(() => (htmlElements.indexOf(as) > -1 ? as : 'nav'), [as]);\n\n  return (\n    <StyledContainer\n      aria-label={label}\n      data-testid=\"breadcrumb-nav-container\"\n      {...rest}\n      {...containerProps}\n      as={safeElement}\n    >\n      <StyledList 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.propTypes = props;\nDSBreadcrumb.displayName = 'DSBreadcrumb';\n\nconst DSBreadcrumbWithSchema = describe(DSBreadcrumb);\nDSBreadcrumbWithSchema.propTypes = props;\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;AD8BjB;AA9BN,mBAA6C;AAC7C,8BAAoC;AACpC,8BAA6B;AAC7B,mCAAsC;AAEtC,oBAA4C;AAE5C,MAAM,eAAe,CAAC,OAAO,OAAO,UAAU,UAAU,MAAM;AAE9D,MAAM,eAAe,CAAC;AAAA,EACpB,iBAAiB,CAAC;AAAA,EAClB,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,UAAU;AAAA,EACV;AAAA,EACA,gBAAgB;AAAA,KACb;AACL,MAA8C;AAC5C,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,cAAY;AAAA,MACZ,eAAY;AAAA,MACX,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,IAAI;AAAA,MAEJ,sDAAC,4BAAW,eAAY,kBACrB,uBAAAA,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,EAEZ,gBAAgB,kCAAU,OAAO,YAAY,sCAAsC;AAAA,EAKnF,IAAI,kCAAU,OAAO;AAAA,IACnB;AAAA,EACF;AAAA,EAKA,SAAS,kCAAU,KAAK;AAAA,IACtB;AAAA,EACF;AAAA,EAEA,OAAO,kCAAU,OAAO,YAAY,kBAAkB;AAAA,EAItD,UAAU,kCAAU,QAAQ,kCAAU,OAAO,EAAE,WAAW,YAAY,yBAAyB;AACjG;AAEA,aAAa,YAAY;AACzB,aAAa,cAAc;AAE3B,MAAM,6BAAyB,kCAAS,YAAY;AACpD,uBAAuB,YAAY;AAGnC,IAAO,uBAAQ;",
+  "sourcesContent": ["import React, { cloneElement, useMemo } from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport DSBreadcrumbItem from './DSBreadcrumbItem.js';\nimport { useKeyboardNavigation } from './hooks/useKeyboardNavigation.js';\nimport type { DSBreadcrumbPropsT } from './index.d';\nimport { StyledContainer, StyledList } from './styles.js';\n\nconst htmlElements = ['nav', 'div', 'header', 'footer', 'main'] as const;\n\nconst DSBreadcrumb = ({\n  containerProps = {},\n  as = 'nav',\n  label = 'Breadcrumb',\n  isTitle = false,\n  children,\n  trailingSlash = true,\n  ...rest\n}: DSBreadcrumbPropsT): React.ReactElement => {\n  const [addRef, onKeyDown] = useKeyboardNavigation();\n\n  const safeElement = useMemo(() => (htmlElements.indexOf(as) > -1 ? as : 'nav'), [as]);\n\n  return (\n    <StyledContainer\n      aria-label={label}\n      data-testid=\"breadcrumb-nav-container\"\n      {...rest}\n      {...containerProps}\n      as={safeElement}\n    >\n      <StyledList 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.propTypes = props;\nDSBreadcrumb.displayName = 'DSBreadcrumb';\n\nconst DSBreadcrumbWithSchema = describe(DSBreadcrumb);\nDSBreadcrumbWithSchema.propTypes = props;\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;AD8BjB;AA9BN,mBAA6C;AAC7C,8BAAoC;AACpC,8BAA6B;AAC7B,mCAAsC;AAEtC,oBAA4C;AAE5C,MAAM,eAAe,CAAC,OAAO,OAAO,UAAU,UAAU,MAAM;AAE9D,MAAM,eAAe,CAAC;AAAA,EACpB,iBAAiB,CAAC;AAAA,EAClB,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,UAAU;AAAA,EACV;AAAA,EACA,gBAAgB;AAAA,EAChB,GAAG;AACL,MAA8C;AAC5C,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,cAAY;AAAA,MACZ,eAAY;AAAA,MACX,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,IAAI;AAAA,MAEJ,sDAAC,4BAAW,eAAY,kBACrB,uBAAAA,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,YAAY;AACzB,aAAa,cAAc;AAE3B,MAAM,6BAAyB,kCAAS,YAAY;AACpD,uBAAuB,YAAY;AAGnC,IAAO,uBAAQ;",
   "names": ["React", "DSBreadcrumbItem"]
 }

package/dist/cjs/DSBreadcrumbItem.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
@@ -32,7 +36,7 @@ module.exports = __toCommonJS(DSBreadcrumbItem_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
-var import_styles = require("./styles");
+var import_styles = require("./styles.js");
 const DSBreadcrumbItem = ({
   active = false,
   as = "a",
@@ -73,14 +77,23 @@ const DSBreadcrumbItem = ({
   }
 );
 const props = {
+  /** inject props to wrapper */
   containerComponent: import_ds_props_helpers.PropTypes.string.description("inject props to wrapper"),
+  /** render as any html node */
   as: import_ds_props_helpers.PropTypes.string.description("render as any html node"),
+  /** active item */
   active: import_ds_props_helpers.PropTypes.bool.description("active item"),
+  /** 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"),
+  /** 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"),
+  /** item label */
   label: import_ds_props_helpers.PropTypes.string.description("item label"),
+  /** link color */
   color: import_ds_props_helpers.PropTypes.string.description("link color")
 };
 DSBreadcrumbItem.propTypes = props;

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 from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport type { DSBreadcrumbItemPropsT } from './index.d';\nimport { StyledLink, StyledCrumbWrapper } from './styles';\n\nconst DSBreadcrumbItem = ({\n  active = false,\n  as = 'a',\n  href = undefined,\n  isTitle,\n  onClick = () => null,\n  label = '',\n  color = null,\n  addRef,\n  childIndex,\n  trailingSlash,\n  onKeyDown = () => null,\n  ...rest\n}: DSBreadcrumbItemPropsT): React.ReactElement => (\n  <StyledCrumbWrapper\n    aria-current={active ? 'page' : undefined}\n    data-testid=\"breadcrumb-item-container\"\n    isTitle={isTitle}\n    trailingSlash={trailingSlash}\n    {...rest}\n  >\n    <StyledLink\n      variant=\"link\"\n      component={as}\n      href={href}\n      onClick={onClick}\n      tabIndex={0}\n      isActive={active}\n      onKeyDown={(e: React.KeyboardEvent) => onKeyDown(e, childIndex, onClick)}\n      isTitle={isTitle}\n      color={color}\n      innerRef={addRef}\n    >\n      {label}\n    </StyledLink>\n  </StyledCrumbWrapper>\n);\n\nconst props = {\n  /** inject props to wrapper */\n  containerComponent: PropTypes.string.description('inject props to wrapper'),\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.propTypes = props;\nDSBreadcrumbItem.displayName = 'DSBreadcrumbItem';\n\nconst DSBreadcrumbItemWithSchema = describe(DSBreadcrumbItem);\nDSBreadcrumbItemWithSchema.propTypes = props;\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;AD0BnB;AAzBJ,8BAAoC;AAEpC,oBAA+C;AAE/C,MAAM,mBAAmB,CAAC;AAAA,EACxB,SAAS;AAAA,EACT,KAAK;AAAA,EACL,OAAO;AAAA,EACP;AAAA,EACA,UAAU,MAAM;AAAA,EAChB,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY,MAAM;AAAA,KACf;AACL,MACE;AAAA,EAAC;AAAA;AAAA,IACC,gBAAc,SAAS,SAAS;AAAA,IAChC,eAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACC,GAAG;AAAA,IAEJ;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,WAAW;AAAA,QACX;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV,UAAU;AAAA,QACV,WAAW,CAAC,MAA2B,UAAU,GAAG,YAAY,OAAO;AAAA,QACvE;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QAET;AAAA;AAAA,IACH;AAAA;AACF;AAGF,MAAM,QAAQ;AAAA,EAEZ,oBAAoB,kCAAU,OAAO,YAAY,yBAAyB;AAAA,EAE1E,IAAI,kCAAU,OAAO,YAAY,yBAAyB;AAAA,EAE1D,QAAQ,kCAAU,KAAK,YAAY,aAAa;AAAA,EAEhD,MAAM,kCAAU,OAAO,YAAY,WAAW;AAAA,EAE9C,SAAS,kCAAU,KAAK,YAAY,kBAAkB;AAAA,EAEtD,SAAS,kCAAU,KAAK,YAAY,qBAAqB;AAAA,EAEzD,eAAe,kCAAU,KAAK,YAAY,oBAAoB;AAAA,EAE9D,OAAO,kCAAU,OAAO,YAAY,YAAY;AAAA,EAEhD,OAAO,kCAAU,OAAO,YAAY,YAAY;AAClD;AAEA,iBAAiB,YAAY;AAC7B,iBAAiB,cAAc;AAE/B,MAAM,iCAA6B,kCAAS,gBAAgB;AAC5D,2BAA2B,YAAY;AAGvC,IAAO,2BAAQ;",
+  "sourcesContent": ["import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport type { DSBreadcrumbItemPropsT } from './index.d';\nimport { StyledLink, StyledCrumbWrapper } from './styles.js';\n\nconst DSBreadcrumbItem = ({\n  active = false,\n  as = 'a',\n  href = undefined,\n  isTitle,\n  onClick = () => null,\n  label = '',\n  color = null,\n  addRef,\n  childIndex,\n  trailingSlash,\n  onKeyDown = () => null,\n  ...rest\n}: DSBreadcrumbItemPropsT): React.ReactElement => (\n  <StyledCrumbWrapper\n    aria-current={active ? 'page' : undefined}\n    data-testid=\"breadcrumb-item-container\"\n    isTitle={isTitle}\n    trailingSlash={trailingSlash}\n    {...rest}\n  >\n    <StyledLink\n      variant=\"link\"\n      component={as}\n      href={href}\n      onClick={onClick}\n      tabIndex={0}\n      isActive={active}\n      onKeyDown={(e: React.KeyboardEvent) => onKeyDown(e, childIndex, onClick)}\n      isTitle={isTitle}\n      color={color}\n      innerRef={addRef}\n    >\n      {label}\n    </StyledLink>\n  </StyledCrumbWrapper>\n);\n\nconst props = {\n  /** inject props to wrapper */\n  containerComponent: PropTypes.string.description('inject props to wrapper'),\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.propTypes = props;\nDSBreadcrumbItem.displayName = 'DSBreadcrumbItem';\n\nconst DSBreadcrumbItemWithSchema = describe(DSBreadcrumbItem);\nDSBreadcrumbItemWithSchema.propTypes = props;\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;AD0BnB;AAzBJ,8BAAoC;AAEpC,oBAA+C;AAE/C,MAAM,mBAAmB,CAAC;AAAA,EACxB,SAAS;AAAA,EACT,KAAK;AAAA,EACL,OAAO;AAAA,EACP;AAAA,EACA,UAAU,MAAM;AAAA,EAChB,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY,MAAM;AAAA,EAClB,GAAG;AACL,MACE;AAAA,EAAC;AAAA;AAAA,IACC,gBAAc,SAAS,SAAS;AAAA,IAChC,eAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACC,GAAG;AAAA,IAEJ;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,WAAW;AAAA,QACX;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV,UAAU;AAAA,QACV,WAAW,CAAC,MAA2B,UAAU,GAAG,YAAY,OAAO;AAAA,QACvE;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QAET;AAAA;AAAA,IACH;AAAA;AACF;AAGF,MAAM,QAAQ;AAAA;AAAA,EAEZ,oBAAoB,kCAAU,OAAO,YAAY,yBAAyB;AAAA;AAAA,EAE1E,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,YAAY;AAC7B,iBAAiB,cAAc;AAE/B,MAAM,iCAA6B,kCAAS,gBAAgB;AAC5D,2BAA2B,YAAY;AAGvC,IAAO,2BAAQ;",
   "names": []
 }

package/dist/cjs/hooks/useKeyboardNavigation.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));

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

@@ -2,6 +2,6 @@
   "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, callback) => {\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,mBAAmB,aAAa;AACrF,QAAI,EAAE,QAAQ,eAAe,cAAc,QAAQ,oBAAoB,IAAI;AACzE,oBAAc,QAAQ,oBAAoB,GAAG,MAAM;AACnD,QAAE,eAAe;AAAA,IACnB,WAAW,EAAE,QAAQ,aAAa,sBAAsB,GAAG;AACzD,oBAAc,QAAQ,oBAAoB,GAAG,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;",
+  "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,mBAAmB,aAAa;AACrF,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;",
   "names": []
 }

package/dist/cjs/index.d.js

@@ -14,6 +14,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));

package/dist/cjs/index.d.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.d.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type React from 'react';\nimport type { htmlElements } from './DSBreadcrumb';\n\ntype SafeComponentsT = (typeof htmlElements)[number];\n\ntype SafeItemComponentT = 'a' | 'button' | 'div' | 'span' | 'p';\n\ninterface DSBreadcrumbPropsT {\n  containerProps?: unknown;\n  as?: SafeComponentsT;\n  label?: string;\n  isTitle?: boolean;\n  trailingSlash?: boolean;\n  children: React.ReactElement[];\n}\n\ninterface DSBreadcrumbItemPropsT {\n  active?: boolean;\n  isActive?: boolean;\n  as?: SafeItemComponentT;\n  href?: string;\n  isTitle?: boolean;\n  trailingSlash?: boolean;\n  addRef: (ref: HTMLElement) => void;\n  onKeyDown: (e: React.KeyboardEvent, componentRefIndex: number, onClick: () => void) => void;\n  onClick?: () => void;\n  label?: string;\n  childIndex: number;\n  color?: string | null;\n}\n\nexport type { DSBreadcrumbPropsT, DSBreadcrumbItemPropsT, SafeComponentsT, SafeItemComponentT };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;",
+  "sourcesContent": ["import type React from 'react';\nimport type { htmlElements } from './DSBreadcrumb.js';\n\ntype SafeComponentsT = (typeof htmlElements)[number];\n\ntype SafeItemComponentT = 'a' | 'button' | 'div' | 'span' | 'p';\n\ninterface DSBreadcrumbPropsT {\n  containerProps?: unknown;\n  as?: SafeComponentsT;\n  label?: string;\n  isTitle?: boolean;\n  trailingSlash?: boolean;\n  children: React.ReactElement[];\n}\n\ninterface DSBreadcrumbItemPropsT {\n  active?: boolean;\n  isActive?: boolean;\n  as?: SafeItemComponentT;\n  href?: string;\n  isTitle?: boolean;\n  trailingSlash?: boolean;\n  addRef: (ref: HTMLElement) => void;\n  onKeyDown: (e: React.KeyboardEvent, componentRefIndex: number, onClick: () => void) => void;\n  onClick?: () => void;\n  label?: string;\n  childIndex: number;\n  color?: string | null;\n}\n\nexport type { DSBreadcrumbPropsT, DSBreadcrumbItemPropsT, SafeComponentsT, SafeItemComponentT };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;",
   "names": []
 }

package/dist/cjs/index.js

@@ -19,6 +19,10 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
@@ -29,7 +33,7 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 var React = __toESM(require("react"));
-__reExport(src_exports, require("./DSBreadcrumb"), module.exports);
-__reExport(src_exports, require("./DSBreadcrumbItem"), module.exports);
-var import_DSBreadcrumb = __toESM(require("./DSBreadcrumb"));
+__reExport(src_exports, require("./DSBreadcrumb.js"), module.exports);
+__reExport(src_exports, require("./DSBreadcrumbItem.js"), module.exports);
+var import_DSBreadcrumb = __toESM(require("./DSBreadcrumb.js"));
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export * from './DSBreadcrumb';\nexport * from './DSBreadcrumbItem';\nexport { default } from './DSBreadcrumb';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc,2BAAd;AACA,wBAAc,+BADd;AAEA,0BAAwB;",
+  "sourcesContent": ["export * from './DSBreadcrumb.js';\nexport * from './DSBreadcrumbItem.js';\nexport { default } from './DSBreadcrumb.js';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc,8BAAd;AACA,wBAAc,kCADd;AAEA,0BAAwB;",
   "names": []
 }

package/dist/cjs/package.json

@@ -0,0 +1,7 @@
+{
+  "type": "commonjs",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ]
+}

package/dist/cjs/styles.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));

package/dist/cjs/styles.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/styles.tsx", "../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import type { Theme } from '@elliemae/pui-theme';\nimport { styled } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport type { DSBreadcrumbItemPropsT } from './index.d';\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<DSBreadcrumbItemPropsT>>`\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  &: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<DSBreadcrumbItemPropsT>>`\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: 20px;\n  font-weight: ${({ theme }) => theme.fontWeights.regular};\n  color: ${({ theme, isActive, color = '', isTitle }) => handleColor(theme, !!isActive, 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;ADCvB,uBAAuB;AACvB,2BAA6B;AAG7B,MAAM,cAAc,CAAC,OAAc,UAAmB,OAAe,YAA6B;AAChG,MAAI;AAAU,WAAO,MAAM,OAAO,QAAQ;AAC1C,MAAI;AAAO,WAAO;AAClB,MAAI;AAAS,WAAO,MAAM,OAAO,QAAQ;AACzC,SAAO,MAAM,OAAO,MAAM;AAC5B;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,IAU9B,CAAC,EAAE,OAAO,SAAS,cAAc,MACjC,WAAW,CAAC,gBACR;AAAA;AAAA;AAAA,aAGK,MAAM,OAAO,QAAQ;AAAA;AAAA,MAG1B;AAAA;AAAA;AAAA,aAGK,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAKlC,MAAM,kBAAkB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAM/B,MAAM,iBAAa,yBAAO,iCAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAUrB,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,WACvC,CAAC,EAAE,OAAO,UAAU,QAAQ,IAAI,QAAQ,MAAM,YAAY,OAAO,CAAC,CAAC,UAAU,OAAO,CAAC,CAAC,OAAO;AAAA;AAAA,aAE3F,CAAC,EAAE,OAAO,MAAM,MAAM,SAAS,MAAM,OAAO,MAAM;AAAA;AAAA,MAEzD,CAAC,EAAE,OAAO,MAAM,MAAM,8BAA8B,SAAS,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA,MAGhF,CAAC,EAAE,MAAM,MAAM,qBAAqB,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAAuB;AACvB,2BAA6B;AAG7B,MAAM,cAAc,CAAC,OAAc,UAAmB,OAAe,YAA6B;AAChG,MAAI;AAAU,WAAO,MAAM,OAAO,QAAQ,GAAG;AAC7C,MAAI;AAAO,WAAO;AAClB,MAAI;AAAS,WAAO,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,IAU9B,CAAC,EAAE,OAAO,SAAS,cAAc,MACjC,WAAW,CAAC,gBACR;AAAA;AAAA;AAAA,aAGK,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA,MAG7B;AAAA;AAAA;AAAA,aAGK,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA;AAKrC,MAAM,kBAAkB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAM/B,MAAM,iBAAa,yBAAO,iCAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAUrB,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,WACvC,CAAC,EAAE,OAAO,UAAU,QAAQ,IAAI,QAAQ,MAAM,YAAY,OAAO,CAAC,CAAC,UAAU,OAAO,CAAC,CAAC,OAAO;AAAA;AAAA,aAE3F,CAAC,EAAE,OAAO,MAAM,MAAM,SAAS,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA,MAE5D,CAAC,EAAE,OAAO,MAAM,MAAM,8BAA8B,SAAS,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA,MAGnF,CAAC,EAAE,MAAM,MAAM,qBAAqB,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/esm/DSBreadcrumb.js

@@ -2,9 +2,9 @@ import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import React2, { cloneElement, useMemo } from "react";
 import { PropTypes, describe } from "@elliemae/ds-props-helpers";
-import DSBreadcrumbItem from "./DSBreadcrumbItem";
-import { useKeyboardNavigation } from "./hooks/useKeyboardNavigation";
-import { StyledContainer, StyledList } from "./styles";
+import DSBreadcrumbItem from "./DSBreadcrumbItem.js";
+import { useKeyboardNavigation } from "./hooks/useKeyboardNavigation.js";
+import { StyledContainer, StyledList } from "./styles.js";
 const htmlElements = ["nav", "div", "header", "footer", "main"];
 const DSBreadcrumb = ({
   containerProps = {},
@@ -44,14 +44,27 @@ const DSBreadcrumb = ({
 };
 DSBreadcrumb.Item = DSBreadcrumbItem;
 const props = {
+  /** props injected to breadcrumb wrapper */
   containerProps: PropTypes.object.description("props injected to breadcrumb wrapper"),
+  /**
+   * Type of element you want the main container to be:
+   * 'nav', 'div', 'header', 'footer', 'main'
+   */
   as: PropTypes.string.description(
     "Type of element you want the main container to be: 'nav', 'div', 'header', 'footer', 'main'"
   ),
+  /**
+   * Whether to show the last element of the breadcrumb as a title
+   * Also removes trailing slash to show last element as title
+   */
   isTitle: PropTypes.bool.description(
     "Whether to show the last element of the breadcrumb as a title. Also removes trailing slash to show last element as title"
   ),
+  /** breadcrumb label */
   label: PropTypes.string.description("breadcrumb label"),
+  /**
+   * Container items to wrap
+   */
   children: PropTypes.arrayOf(PropTypes.element).isRequired.description("Container items to wrap")
 };
 DSBreadcrumb.propTypes = props;

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, { cloneElement, useMemo } from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport DSBreadcrumbItem from './DSBreadcrumbItem';\nimport { useKeyboardNavigation } from './hooks/useKeyboardNavigation';\nimport type { DSBreadcrumbPropsT } from './index.d';\nimport { StyledContainer, StyledList } from './styles';\n\nconst htmlElements = ['nav', 'div', 'header', 'footer', 'main'] as const;\n\nconst DSBreadcrumb = ({\n  containerProps = {},\n  as = 'nav',\n  label = 'Breadcrumb',\n  isTitle = false,\n  children,\n  trailingSlash = true,\n  ...rest\n}: DSBreadcrumbPropsT): React.ReactElement => {\n  const [addRef, onKeyDown] = useKeyboardNavigation();\n\n  const safeElement = useMemo(() => (htmlElements.indexOf(as) > -1 ? as : 'nav'), [as]);\n\n  return (\n    <StyledContainer\n      aria-label={label}\n      data-testid=\"breadcrumb-nav-container\"\n      {...rest}\n      {...containerProps}\n      as={safeElement}\n    >\n      <StyledList 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.propTypes = props;\nDSBreadcrumb.displayName = 'DSBreadcrumb';\n\nconst DSBreadcrumbWithSchema = describe(DSBreadcrumb);\nDSBreadcrumbWithSchema.propTypes = props;\n\nexport { DSBreadcrumb, DSBreadcrumbWithSchema, htmlElements };\nexport default DSBreadcrumb;\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC8BjB;AA9BN,OAAOA,UAAS,cAAc,eAAe;AAC7C,SAAS,WAAW,gBAAgB;AACpC,OAAO,sBAAsB;AAC7B,SAAS,6BAA6B;AAEtC,SAAS,iBAAiB,kBAAkB;AAE5C,MAAM,eAAe,CAAC,OAAO,OAAO,UAAU,UAAU,MAAM;AAE9D,MAAM,eAAe,CAAC;AAAA,EACpB,iBAAiB,CAAC;AAAA,EAClB,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,UAAU;AAAA,EACV;AAAA,EACA,gBAAgB;AAAA,KACb;AACL,MAA8C;AAC5C,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,cAAY;AAAA,MACZ,eAAY;AAAA,MACX,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,IAAI;AAAA,MAEJ,8BAAC,cAAW,eAAY,kBACrB,UAAAA,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,EAEZ,gBAAgB,UAAU,OAAO,YAAY,sCAAsC;AAAA,EAKnF,IAAI,UAAU,OAAO;AAAA,IACnB;AAAA,EACF;AAAA,EAKA,SAAS,UAAU,KAAK;AAAA,IACtB;AAAA,EACF;AAAA,EAEA,OAAO,UAAU,OAAO,YAAY,kBAAkB;AAAA,EAItD,UAAU,UAAU,QAAQ,UAAU,OAAO,EAAE,WAAW,YAAY,yBAAyB;AACjG;AAEA,aAAa,YAAY;AACzB,aAAa,cAAc;AAE3B,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 } from '@elliemae/ds-props-helpers';\nimport DSBreadcrumbItem from './DSBreadcrumbItem.js';\nimport { useKeyboardNavigation } from './hooks/useKeyboardNavigation.js';\nimport type { DSBreadcrumbPropsT } from './index.d';\nimport { StyledContainer, StyledList } from './styles.js';\n\nconst htmlElements = ['nav', 'div', 'header', 'footer', 'main'] as const;\n\nconst DSBreadcrumb = ({\n  containerProps = {},\n  as = 'nav',\n  label = 'Breadcrumb',\n  isTitle = false,\n  children,\n  trailingSlash = true,\n  ...rest\n}: DSBreadcrumbPropsT): React.ReactElement => {\n  const [addRef, onKeyDown] = useKeyboardNavigation();\n\n  const safeElement = useMemo(() => (htmlElements.indexOf(as) > -1 ? as : 'nav'), [as]);\n\n  return (\n    <StyledContainer\n      aria-label={label}\n      data-testid=\"breadcrumb-nav-container\"\n      {...rest}\n      {...containerProps}\n      as={safeElement}\n    >\n      <StyledList 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.propTypes = props;\nDSBreadcrumb.displayName = 'DSBreadcrumb';\n\nconst DSBreadcrumbWithSchema = describe(DSBreadcrumb);\nDSBreadcrumbWithSchema.propTypes = props;\n\nexport { DSBreadcrumb, DSBreadcrumbWithSchema, htmlElements };\nexport default DSBreadcrumb;\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC8BjB;AA9BN,OAAOA,UAAS,cAAc,eAAe;AAC7C,SAAS,WAAW,gBAAgB;AACpC,OAAO,sBAAsB;AAC7B,SAAS,6BAA6B;AAEtC,SAAS,iBAAiB,kBAAkB;AAE5C,MAAM,eAAe,CAAC,OAAO,OAAO,UAAU,UAAU,MAAM;AAE9D,MAAM,eAAe,CAAC;AAAA,EACpB,iBAAiB,CAAC;AAAA,EAClB,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,UAAU;AAAA,EACV;AAAA,EACA,gBAAgB;AAAA,EAChB,GAAG;AACL,MAA8C;AAC5C,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,cAAY;AAAA,MACZ,eAAY;AAAA,MACX,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,IAAI;AAAA,MAEJ,8BAAC,cAAW,eAAY,kBACrB,UAAAA,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,YAAY;AACzB,aAAa,cAAc;AAE3B,MAAM,yBAAyB,SAAS,YAAY;AACpD,uBAAuB,YAAY;AAGnC,IAAO,uBAAQ;",
   "names": ["React"]
 }

package/dist/esm/DSBreadcrumbItem.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { PropTypes, describe } from "@elliemae/ds-props-helpers";
-import { StyledLink, StyledCrumbWrapper } from "./styles";
+import { StyledLink, StyledCrumbWrapper } from "./styles.js";
 const DSBreadcrumbItem = ({
   active = false,
   as = "a",
@@ -42,14 +42,23 @@ const DSBreadcrumbItem = ({
   }
 );
 const props = {
+  /** inject props to wrapper */
   containerComponent: PropTypes.string.description("inject props to wrapper"),
+  /** render as any html node */
   as: PropTypes.string.description("render as any html node"),
+  /** active item */
   active: PropTypes.bool.description("active item"),
+  /** href link */
   href: PropTypes.string.description("href link"),
+  /** on click handler */
   onClick: PropTypes.func.description("on click handler"),
+  /** style item as title */
   isTitle: PropTypes.bool.description("style item as title"),
+  /** add trailing slash */
   trailingSlash: PropTypes.bool.description("add trailing slash"),
+  /** item label */
   label: PropTypes.string.description("item label"),
+  /** link color */
   color: PropTypes.string.description("link color")
 };
 DSBreadcrumbItem.propTypes = props;

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 from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport type { DSBreadcrumbItemPropsT } from './index.d';\nimport { StyledLink, StyledCrumbWrapper } from './styles';\n\nconst DSBreadcrumbItem = ({\n  active = false,\n  as = 'a',\n  href = undefined,\n  isTitle,\n  onClick = () => null,\n  label = '',\n  color = null,\n  addRef,\n  childIndex,\n  trailingSlash,\n  onKeyDown = () => null,\n  ...rest\n}: DSBreadcrumbItemPropsT): React.ReactElement => (\n  <StyledCrumbWrapper\n    aria-current={active ? 'page' : undefined}\n    data-testid=\"breadcrumb-item-container\"\n    isTitle={isTitle}\n    trailingSlash={trailingSlash}\n    {...rest}\n  >\n    <StyledLink\n      variant=\"link\"\n      component={as}\n      href={href}\n      onClick={onClick}\n      tabIndex={0}\n      isActive={active}\n      onKeyDown={(e: React.KeyboardEvent) => onKeyDown(e, childIndex, onClick)}\n      isTitle={isTitle}\n      color={color}\n      innerRef={addRef}\n    >\n      {label}\n    </StyledLink>\n  </StyledCrumbWrapper>\n);\n\nconst props = {\n  /** inject props to wrapper */\n  containerComponent: PropTypes.string.description('inject props to wrapper'),\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.propTypes = props;\nDSBreadcrumbItem.displayName = 'DSBreadcrumbItem';\n\nconst DSBreadcrumbItemWithSchema = describe(DSBreadcrumbItem);\nDSBreadcrumbItemWithSchema.propTypes = props;\n\nexport { DSBreadcrumbItem, DSBreadcrumbItemWithSchema };\nexport default DSBreadcrumbItem;\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC0BnB;AAzBJ,SAAS,WAAW,gBAAgB;AAEpC,SAAS,YAAY,0BAA0B;AAE/C,MAAM,mBAAmB,CAAC;AAAA,EACxB,SAAS;AAAA,EACT,KAAK;AAAA,EACL,OAAO;AAAA,EACP;AAAA,EACA,UAAU,MAAM;AAAA,EAChB,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY,MAAM;AAAA,KACf;AACL,MACE;AAAA,EAAC;AAAA;AAAA,IACC,gBAAc,SAAS,SAAS;AAAA,IAChC,eAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACC,GAAG;AAAA,IAEJ;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,WAAW;AAAA,QACX;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV,UAAU;AAAA,QACV,WAAW,CAAC,MAA2B,UAAU,GAAG,YAAY,OAAO;AAAA,QACvE;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QAET;AAAA;AAAA,IACH;AAAA;AACF;AAGF,MAAM,QAAQ;AAAA,EAEZ,oBAAoB,UAAU,OAAO,YAAY,yBAAyB;AAAA,EAE1E,IAAI,UAAU,OAAO,YAAY,yBAAyB;AAAA,EAE1D,QAAQ,UAAU,KAAK,YAAY,aAAa;AAAA,EAEhD,MAAM,UAAU,OAAO,YAAY,WAAW;AAAA,EAE9C,SAAS,UAAU,KAAK,YAAY,kBAAkB;AAAA,EAEtD,SAAS,UAAU,KAAK,YAAY,qBAAqB;AAAA,EAEzD,eAAe,UAAU,KAAK,YAAY,oBAAoB;AAAA,EAE9D,OAAO,UAAU,OAAO,YAAY,YAAY;AAAA,EAEhD,OAAO,UAAU,OAAO,YAAY,YAAY;AAClD;AAEA,iBAAiB,YAAY;AAC7B,iBAAiB,cAAc;AAE/B,MAAM,6BAA6B,SAAS,gBAAgB;AAC5D,2BAA2B,YAAY;AAGvC,IAAO,2BAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport type { DSBreadcrumbItemPropsT } from './index.d';\nimport { StyledLink, StyledCrumbWrapper } from './styles.js';\n\nconst DSBreadcrumbItem = ({\n  active = false,\n  as = 'a',\n  href = undefined,\n  isTitle,\n  onClick = () => null,\n  label = '',\n  color = null,\n  addRef,\n  childIndex,\n  trailingSlash,\n  onKeyDown = () => null,\n  ...rest\n}: DSBreadcrumbItemPropsT): React.ReactElement => (\n  <StyledCrumbWrapper\n    aria-current={active ? 'page' : undefined}\n    data-testid=\"breadcrumb-item-container\"\n    isTitle={isTitle}\n    trailingSlash={trailingSlash}\n    {...rest}\n  >\n    <StyledLink\n      variant=\"link\"\n      component={as}\n      href={href}\n      onClick={onClick}\n      tabIndex={0}\n      isActive={active}\n      onKeyDown={(e: React.KeyboardEvent) => onKeyDown(e, childIndex, onClick)}\n      isTitle={isTitle}\n      color={color}\n      innerRef={addRef}\n    >\n      {label}\n    </StyledLink>\n  </StyledCrumbWrapper>\n);\n\nconst props = {\n  /** inject props to wrapper */\n  containerComponent: PropTypes.string.description('inject props to wrapper'),\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.propTypes = props;\nDSBreadcrumbItem.displayName = 'DSBreadcrumbItem';\n\nconst DSBreadcrumbItemWithSchema = describe(DSBreadcrumbItem);\nDSBreadcrumbItemWithSchema.propTypes = props;\n\nexport { DSBreadcrumbItem, DSBreadcrumbItemWithSchema };\nexport default DSBreadcrumbItem;\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC0BnB;AAzBJ,SAAS,WAAW,gBAAgB;AAEpC,SAAS,YAAY,0BAA0B;AAE/C,MAAM,mBAAmB,CAAC;AAAA,EACxB,SAAS;AAAA,EACT,KAAK;AAAA,EACL,OAAO;AAAA,EACP;AAAA,EACA,UAAU,MAAM;AAAA,EAChB,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY,MAAM;AAAA,EAClB,GAAG;AACL,MACE;AAAA,EAAC;AAAA;AAAA,IACC,gBAAc,SAAS,SAAS;AAAA,IAChC,eAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACC,GAAG;AAAA,IAEJ;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,WAAW;AAAA,QACX;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV,UAAU;AAAA,QACV,WAAW,CAAC,MAA2B,UAAU,GAAG,YAAY,OAAO;AAAA,QACvE;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QAET;AAAA;AAAA,IACH;AAAA;AACF;AAGF,MAAM,QAAQ;AAAA;AAAA,EAEZ,oBAAoB,UAAU,OAAO,YAAY,yBAAyB;AAAA;AAAA,EAE1E,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,YAAY;AAC7B,iBAAiB,cAAc;AAE/B,MAAM,6BAA6B,SAAS,gBAAgB;AAC5D,2BAA2B,YAAY;AAGvC,IAAO,2BAAQ;",
   "names": []
 }

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

@@ -2,6 +2,6 @@
   "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, callback) => {\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,mBAAmB,aAAa;AACrF,QAAI,EAAE,QAAQ,eAAe,cAAc,QAAQ,oBAAoB,IAAI;AACzE,oBAAc,QAAQ,oBAAoB,GAAG,MAAM;AACnD,QAAE,eAAe;AAAA,IACnB,WAAW,EAAE,QAAQ,aAAa,sBAAsB,GAAG;AACzD,oBAAc,QAAQ,oBAAoB,GAAG,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;",
+  "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,mBAAmB,aAAa;AACrF,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;",
   "names": []
 }

package/dist/esm/index.js

@@ -1,7 +1,7 @@
 import * as React from "react";
-export * from "./DSBreadcrumb";
-export * from "./DSBreadcrumbItem";
-import { default as default2 } from "./DSBreadcrumb";
+export * from "./DSBreadcrumb.js";
+export * from "./DSBreadcrumbItem.js";
+import { default as default2 } from "./DSBreadcrumb.js";
 export {
   default2 as default
 };

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './DSBreadcrumb';\nexport * from './DSBreadcrumbItem';\nexport { default } from './DSBreadcrumb';\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './DSBreadcrumb.js';\nexport * from './DSBreadcrumbItem.js';\nexport { default } from './DSBreadcrumb.js';\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,cAAc;AACd,SAAS,WAAAA,gBAAe;",
   "names": ["default"]
 }

package/dist/esm/package.json

@@ -0,0 +1,7 @@
+{
+  "type": "module",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ]
+}

package/dist/esm/styles.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { Theme } from '@elliemae/pui-theme';\nimport { styled } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport type { DSBreadcrumbItemPropsT } from './index.d';\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<DSBreadcrumbItemPropsT>>`\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  &: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<DSBreadcrumbItemPropsT>>`\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: 20px;\n  font-weight: ${({ theme }) => theme.fontWeights.regular};\n  color: ${({ theme, isActive, color = '', isTitle }) => handleColor(theme, !!isActive, 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;ACCvB,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAG7B,MAAM,cAAc,CAAC,OAAc,UAAmB,OAAe,YAA6B;AAChG,MAAI;AAAU,WAAO,MAAM,OAAO,QAAQ;AAC1C,MAAI;AAAO,WAAO;AAClB,MAAI;AAAS,WAAO,MAAM,OAAO,QAAQ;AACzC,SAAO,MAAM,OAAO,MAAM;AAC5B;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,IAU9B,CAAC,EAAE,OAAO,SAAS,cAAc,MACjC,WAAW,CAAC,gBACR;AAAA;AAAA;AAAA,aAGK,MAAM,OAAO,QAAQ;AAAA;AAAA,MAG1B;AAAA;AAAA;AAAA,aAGK,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAKlC,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA;AAAA;AAM/B,MAAM,aAAa,OAAO,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAUrB,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,WACvC,CAAC,EAAE,OAAO,UAAU,QAAQ,IAAI,QAAQ,MAAM,YAAY,OAAO,CAAC,CAAC,UAAU,OAAO,CAAC,CAAC,OAAO;AAAA;AAAA,aAE3F,CAAC,EAAE,OAAO,MAAM,MAAM,SAAS,MAAM,OAAO,MAAM;AAAA;AAAA,MAEzD,CAAC,EAAE,OAAO,MAAM,MAAM,8BAA8B,SAAS,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA,MAGhF,CAAC,EAAE,MAAM,MAAM,qBAAqB,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;",
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAG7B,MAAM,cAAc,CAAC,OAAc,UAAmB,OAAe,YAA6B;AAChG,MAAI;AAAU,WAAO,MAAM,OAAO,QAAQ,GAAG;AAC7C,MAAI;AAAO,WAAO;AAClB,MAAI;AAAS,WAAO,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,IAU9B,CAAC,EAAE,OAAO,SAAS,cAAc,MACjC,WAAW,CAAC,gBACR;AAAA;AAAA;AAAA,aAGK,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA,MAG7B;AAAA;AAAA;AAAA,aAGK,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA;AAKrC,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA;AAAA;AAM/B,MAAM,aAAa,OAAO,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAUrB,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,WACvC,CAAC,EAAE,OAAO,UAAU,QAAQ,IAAI,QAAQ,MAAM,YAAY,OAAO,CAAC,CAAC,UAAU,OAAO,CAAC,CAAC,OAAO;AAAA;AAAA,aAE3F,CAAC,EAAE,OAAO,MAAM,MAAM,SAAS,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA,MAE5D,CAAC,EAAE,OAAO,MAAM,MAAM,8BAA8B,SAAS,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA,MAGnF,CAAC,EAAE,MAAM,MAAM,qBAAqB,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/types/DSBreadcrumb.d.ts

@@ -6,40 +6,40 @@ declare const DSBreadcrumb: {
     Item: {
         ({ active, as, href, isTitle, onClick, label, color, addRef, childIndex, trailingSlash, onKeyDown, ...rest }: import("./index.d").DSBreadcrumbItemPropsT): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
         propTypes: {
-            containerComponent: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
-            as: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
-            active: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
-            href: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
-            onClick: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
-            isTitle: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
-            trailingSlash: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
-            label: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
-            color: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
+            containerComponent: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+            as: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+            active: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+            href: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+            onClick: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+            isTitle: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+            trailingSlash: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+            label: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+            color: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
         };
         displayName: string;
     };
     propTypes: {
         /** props injected to breadcrumb wrapper */
-        containerProps: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
+        containerProps: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
         /**
          * Type of element you want the main container to be:
          * 'nav', 'div', 'header', 'footer', 'main'
          */
-        as: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
+        as: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
         /**
          * Whether to show the last element of the breadcrumb as a title
          * Also removes trailing slash to show last element as title
          */
-        isTitle: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
+        isTitle: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
         /** breadcrumb label */
-        label: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
+        label: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
         /**
          * Container items to wrap
          */
-        children: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
+        children: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
     };
     displayName: string;
 };
-declare const DSBreadcrumbWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").DocumentedReactComponent<DSBreadcrumbPropsT>;
+declare const DSBreadcrumbWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<DSBreadcrumbPropsT>;
 export { DSBreadcrumb, DSBreadcrumbWithSchema, htmlElements };
 export default DSBreadcrumb;

package/dist/types/index.d.d.ts

@@ -1,5 +1,5 @@
 import type React from 'react';
-import type { htmlElements } from './DSBreadcrumb';
+import type { htmlElements } from './DSBreadcrumb.js';
 type SafeComponentsT = (typeof htmlElements)[number];
 type SafeItemComponentT = 'a' | 'button' | 'div' | 'span' | 'p';
 interface DSBreadcrumbPropsT {

package/dist/types/index.d.ts

@@ -1,3 +1,3 @@
-export * from './DSBreadcrumb';
-export * from './DSBreadcrumbItem';
-export { default } from './DSBreadcrumb';
+export * from './DSBreadcrumb.js';
+export * from './DSBreadcrumbItem.js';
+export { default } from './DSBreadcrumb.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-breadcrumb",
-  "version": "3.16.0",
+  "version": "3.16.1-rc.10",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Breadcrumb",
   "files": [
@@ -51,17 +51,17 @@
     "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-props-helpers": "3.16.0",
-    "@elliemae/ds-system": "3.16.0",
-    "@elliemae/ds-typography": "3.16.0",
-    "@elliemae/ds-utilities": "3.16.0"
+    "@elliemae/ds-props-helpers": "3.16.1-rc.10",
+    "@elliemae/ds-system": "3.16.1-rc.10",
+    "@elliemae/ds-typography": "3.16.1-rc.10",
+    "@elliemae/ds-utilities": "3.16.1-rc.10"
   },
   "devDependencies": {
-    "@elliemae/pui-theme": "~2.6.0",
-    "@testing-library/jest-dom": "~5.16.4",
+    "@elliemae/pui-theme": "~2.7.0",
+    "@testing-library/jest-dom": "~5.16.5",
     "@testing-library/react": "~12.1.3",
     "@testing-library/user-event": "~13.5.0",
-    "styled-components": "~5.3.6"
+    "styled-components": "~5.3.9"
   },
   "peerDependencies": {
     "@elliemae/pui-theme": "^2.6.0",