@elliemae/ds-breadcrumb 2.3.0-alpha.9 → 2.3.0-next.0

package/cjs/DSBreadcrumb.js

@@ -0,0 +1,102 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var React = require('react');
+var reactDesc = require('react-desc');
+var DSBreadcrumbItem = require('./DSBreadcrumbItem.js');
+var useKeyboardNavigation = require('./hooks/useKeyboardNavigation.js');
+var styles = require('./styles.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const _excluded = ["containerProps", "as", "label", "isTitle", "children", "trailingSlash"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const htmlElements = ['nav', 'div', 'header', 'footer', 'main'];
+
+const DSBreadcrumb = _ref => {
+  let {
+    containerProps = {},
+    as = 'nav',
+    label = 'Breadcrumb',
+    isTitle = false,
+    children,
+    trailingSlash = true
+  } = _ref,
+      rest = _objectWithoutProperties__default["default"](_ref, _excluded);
+
+  const [addRef, onKeyDown] = useKeyboardNavigation.useKeyboardNavigation();
+  const safeElement = React.useMemo(() => htmlElements.indexOf(as) > -1 ? as : 'nav', [as]);
+  return /*#__PURE__*/jsxRuntime.jsx(styles.StyledContainer, _objectSpread(_objectSpread(_objectSpread({
+    "aria-label": label,
+    "data-testid": "breadcrumb-nav-container"
+  }, rest), containerProps), {}, {
+    as: safeElement,
+    children: /*#__PURE__*/_jsx__default["default"](styles.StyledList, {
+      "data-testid": "list-container"
+    }, void 0, React__default["default"].Children.map(children, (child, childIndex) => childIndex < children.length - 1 ? /*#__PURE__*/React.cloneElement(child, {
+      childIndex,
+      addRef,
+      onKeyDown
+    }) : /*#__PURE__*/React.cloneElement(child, {
+      childIndex,
+      addRef,
+      onKeyDown,
+      trailingSlash,
+      isTitle
+    })))
+  }));
+};
+
+DSBreadcrumb.Item = DSBreadcrumbItem.DSBreadcrumbItem;
+const props = {
+  /** props injected to breadcrumb wrapper */
+  containerProps: reactDesc.PropTypes.object.description('props injected to breadcrumb wrapper'),
+
+  /**
+   * Type of element you want the main container to be:
+   * 'nav', 'div', 'header', 'footer', 'main'
+   */
+  as: reactDesc.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: reactDesc.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: reactDesc.PropTypes.string.description('breadcrumb label'),
+
+  /**
+   * Container items to wrap
+   */
+  children: reactDesc.PropTypes.arrayOf(DSBreadcrumbItem.DSBreadcrumbItem).isRequired.description('Container items to wrap')
+};
+const DSBreadcrumbWithSchema = reactDesc.describe(DSBreadcrumb);
+DSBreadcrumbWithSchema.propTypes = props;
+
+exports.DSBreadcrumb = DSBreadcrumb;
+exports.DSBreadcrumbWithSchema = DSBreadcrumbWithSchema;
+exports["default"] = DSBreadcrumb;
+exports.htmlElements = htmlElements;

package/cjs/DSBreadcrumbItem.js

@@ -0,0 +1,98 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+require('react');
+var reactDesc = require('react-desc');
+var styles = require('./styles.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+
+const _excluded = ["active", "as", "href", "isTitle", "onClick", "label", "color", "addRef", "childIndex", "trailingSlash", "onKeyDown"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function DSBreadcrumbItem(_ref) {
+  let {
+    active = false,
+    as = 'a',
+    href = undefined,
+    isTitle,
+    onClick = () => null,
+    label = '',
+    color = null,
+    addRef,
+    childIndex,
+    trailingSlash,
+    onKeyDown = () => null
+  } = _ref,
+      rest = _objectWithoutProperties__default["default"](_ref, _excluded);
+
+  return /*#__PURE__*/jsxRuntime.jsx(styles.StyledCrumbWrapper, _objectSpread(_objectSpread({
+    "aria-current": active ? 'page' : undefined,
+    "data-testid": "breadcrumb-item-container",
+    isTitle: isTitle,
+    trailingSlash: trailingSlash
+  }, rest), {}, {
+    children: /*#__PURE__*/jsxRuntime.jsx(styles.StyledLink, {
+      as: as,
+      href: href,
+      onClick: onClick,
+      ref: addRef,
+      tabIndex: 0,
+      isActive: active,
+      onKeyDown: e => onKeyDown(e, childIndex, onClick),
+      isTitle: isTitle,
+      color: color,
+      children: label
+    })
+  }));
+}
+
+const props = {
+  /** inject props to wrapper */
+  containerComponent: reactDesc.PropTypes.string.description('inject props to wrapper'),
+
+  /** render as any html node */
+  as: reactDesc.PropTypes.string.description('render as any html node'),
+
+  /** active item */
+  active: reactDesc.PropTypes.bool.description('active item'),
+
+  /** href link */
+  href: reactDesc.PropTypes.string.description('href link'),
+
+  /** on click handler */
+  onClick: reactDesc.PropTypes.func.description('on click handler'),
+
+  /** style item as title */
+  isTitle: reactDesc.PropTypes.bool.description('style item as title'),
+
+  /** add trailing slash */
+  trailingSlash: reactDesc.PropTypes.bool.description('add trailing slash'),
+
+  /** item label */
+  label: reactDesc.PropTypes.string.description('item label'),
+
+  /** link color */
+  color: reactDesc.PropTypes.string.description('link color')
+};
+const DSBreadcrumbItemWithSchema = reactDesc.describe(DSBreadcrumbItem);
+DSBreadcrumbItemWithSchema.propTypes = props;
+
+exports.DSBreadcrumbItem = DSBreadcrumbItem;
+exports.DSBreadcrumbItemWithSchema = DSBreadcrumbItemWithSchema;
+exports["default"] = DSBreadcrumbItem;

package/cjs/hooks/useKeyboardNavigation.js

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+const useKeyboardNavigation = () => {
+  const componentsRef = React.useRef([]);
+  const addRef = React.useCallback(ref => {
+    if (ref && !componentsRef.current.includes(ref)) {
+      componentsRef.current.push(ref);
+    }
+  }, []);
+  const onKeyDown = 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') {
+      callback();
+    } else if (e.ctrlKey && e.altKey && e.key === ' ') {
+      componentsRef.current[componentRefIndex].click();
+    }
+  }, []);
+  return [addRef, onKeyDown];
+};
+
+exports.useKeyboardNavigation = useKeyboardNavigation;

package/cjs/index.d.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/cjs/index.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var DSBreadcrumb = require('./DSBreadcrumb.js');
+var DSBreadcrumbItem = require('./DSBreadcrumbItem.js');
+
+
+
+exports.DSBreadcrumb = DSBreadcrumb.DSBreadcrumb;
+exports.DSBreadcrumbWithSchema = DSBreadcrumb.DSBreadcrumbWithSchema;
+exports["default"] = DSBreadcrumb.DSBreadcrumb;
+exports.htmlElements = DSBreadcrumb.htmlElements;
+exports.DSBreadcrumbItem = DSBreadcrumbItem.DSBreadcrumbItem;
+exports.DSBreadcrumbItemWithSchema = DSBreadcrumbItem.DSBreadcrumbItemWithSchema;

package/cjs/styles.js

@@ -0,0 +1,68 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const handleColor = (theme, isActive, color, isTitle) => {
+  if (isActive) return theme.colors.neutral[800];else if (color) return color;else if (isTitle) return theme.colors.neutral[700];else return theme.colors.brand[600];
+};
+
+const StyledList = /*#__PURE__*/styled__default["default"].ol.withConfig({
+  componentId: "sc-12gvmg4-0"
+})(["width:100%;list-style:none;display:flex;padding:0;margin:0;li:first-child *{margin-left:0;}"]);
+const StyledCrumbWrapper = /*#__PURE__*/styled__default["default"].li.withConfig({
+  componentId: "sc-12gvmg4-1"
+})(["display:inline-flex;align-items:center;flex-shrink:20;transition:flex-shrink 0.1s cubic-bezier(0.64,0,0.35,1);height:16px;min-width:10px;&:hover{flex-shrink:0;}", ""], _ref => {
+  let {
+    theme,
+    isTitle,
+    trailingSlash
+  } = _ref;
+  return isTitle || !trailingSlash ? "&:not(:last-child):after {\n    display: inline-block;\n    content: '/';\n    color: ".concat(theme.colors.neutral[700], ";\n  }\n  ") : "&:after {\n    display: inline-block;\n    content: '/';\n    color: ".concat(theme.colors.neutral[700], ";\n  }\n  ");
+});
+const StyledContainer = /*#__PURE__*/styled__default["default"].nav.withConfig({
+  componentId: "sc-12gvmg4-2"
+})(["display:flex;align-items:center;padding:0;"]);
+const StyledLink = /*#__PURE__*/styled__default["default"].a.withConfig({
+  componentId: "sc-12gvmg4-3"
+})(["white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;font-size:12px;outline:none;margin:0 2px;border:2px solid transparent;-webkit-text-stroke:0.4px transparent;font-weight:", ";color:", ";&:hover{color:", ";cursor:pointer;", ";}&:focus{", " border-radius:2px;}"], _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.fontWeights.regular;
+}, _ref3 => {
+  let {
+    theme,
+    isActive,
+    color,
+    isTitle
+  } = _ref3;
+  return handleColor(theme, isActive, color, isTitle);
+}, _ref4 => {
+  let {
+    theme,
+    color
+  } = _ref4;
+  return color ? color : theme.colors.brand[800];
+}, _ref5 => {
+  let {
+    theme,
+    color
+  } = _ref5;
+  return "-webkit-text-stroke: 0.4px ".concat(color ? color : theme.colors.brand[800]);
+}, _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return "border: 2px solid ".concat(theme.colors.brand[700], ";");
+});
+
+exports.StyledContainer = StyledContainer;
+exports.StyledCrumbWrapper = StyledCrumbWrapper;
+exports.StyledLink = StyledLink;
+exports.StyledList = StyledList;

package/esm/DSBreadcrumb.js

@@ -0,0 +1,88 @@
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import React, { useMemo, cloneElement } from 'react';
+import { PropTypes, describe } from 'react-desc';
+import { DSBreadcrumbItem } from './DSBreadcrumbItem.js';
+import { useKeyboardNavigation } from './hooks/useKeyboardNavigation.js';
+import { StyledContainer, StyledList } from './styles.js';
+import { jsx } from 'react/jsx-runtime';
+
+const _excluded = ["containerProps", "as", "label", "isTitle", "children", "trailingSlash"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const htmlElements = ['nav', 'div', 'header', 'footer', 'main'];
+
+const DSBreadcrumb = _ref => {
+  let {
+    containerProps = {},
+    as = 'nav',
+    label = 'Breadcrumb',
+    isTitle = false,
+    children,
+    trailingSlash = true
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  const [addRef, onKeyDown] = useKeyboardNavigation();
+  const safeElement = useMemo(() => htmlElements.indexOf(as) > -1 ? as : 'nav', [as]);
+  return /*#__PURE__*/jsx(StyledContainer, _objectSpread(_objectSpread(_objectSpread({
+    "aria-label": label,
+    "data-testid": "breadcrumb-nav-container"
+  }, rest), containerProps), {}, {
+    as: safeElement,
+    children: /*#__PURE__*/_jsx(StyledList, {
+      "data-testid": "list-container"
+    }, void 0, React.Children.map(children, (child, childIndex) => childIndex < children.length - 1 ? /*#__PURE__*/cloneElement(child, {
+      childIndex,
+      addRef,
+      onKeyDown
+    }) : /*#__PURE__*/cloneElement(child, {
+      childIndex,
+      addRef,
+      onKeyDown,
+      trailingSlash,
+      isTitle
+    })))
+  }));
+};
+
+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(DSBreadcrumbItem).isRequired.description('Container items to wrap')
+};
+const DSBreadcrumbWithSchema = describe(DSBreadcrumb);
+DSBreadcrumbWithSchema.propTypes = props;
+
+export { DSBreadcrumb, DSBreadcrumbWithSchema, DSBreadcrumb as default, htmlElements };

package/esm/DSBreadcrumbItem.js

@@ -0,0 +1,87 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'react';
+import { PropTypes, describe } from 'react-desc';
+import { StyledCrumbWrapper, StyledLink } from './styles.js';
+import { jsx } from 'react/jsx-runtime';
+
+const _excluded = ["active", "as", "href", "isTitle", "onClick", "label", "color", "addRef", "childIndex", "trailingSlash", "onKeyDown"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function DSBreadcrumbItem(_ref) {
+  let {
+    active = false,
+    as = 'a',
+    href = undefined,
+    isTitle,
+    onClick = () => null,
+    label = '',
+    color = null,
+    addRef,
+    childIndex,
+    trailingSlash,
+    onKeyDown = () => null
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/jsx(StyledCrumbWrapper, _objectSpread(_objectSpread({
+    "aria-current": active ? 'page' : undefined,
+    "data-testid": "breadcrumb-item-container",
+    isTitle: isTitle,
+    trailingSlash: trailingSlash
+  }, rest), {}, {
+    children: /*#__PURE__*/jsx(StyledLink, {
+      as: as,
+      href: href,
+      onClick: onClick,
+      ref: addRef,
+      tabIndex: 0,
+      isActive: active,
+      onKeyDown: e => onKeyDown(e, childIndex, onClick),
+      isTitle: isTitle,
+      color: color,
+      children: label
+    })
+  }));
+}
+
+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')
+};
+const DSBreadcrumbItemWithSchema = describe(DSBreadcrumbItem);
+DSBreadcrumbItemWithSchema.propTypes = props;
+
+export { DSBreadcrumbItem, DSBreadcrumbItemWithSchema, DSBreadcrumbItem as default };

package/{dist/esm → esm}/hooks/useKeyboardNavigation.js

@@ -1,28 +1,26 @@
-import * as React from "react";
-import { useRef, useCallback } from "react";
+import { useRef, useCallback } from 'react';
+
 const useKeyboardNavigation = () => {
   const componentsRef = useRef([]);
-  const addRef = useCallback((ref) => {
+  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]) {
+    if (e.key === 'ArrowDown' && componentsRef.current[componentRefIndex + 1]) {
       componentsRef.current[componentRefIndex + 1].focus();
       e.preventDefault();
-    } else if (e.key === "ArrowUp" && componentRefIndex !== 0) {
+    } else if (e.key === 'ArrowUp' && componentRefIndex !== 0) {
       componentsRef.current[componentRefIndex - 1].focus();
       e.preventDefault();
-    } else if (e.key === "Enter") {
+    } else if (e.key === 'Enter') {
       callback();
-    } else if (e.ctrlKey && e.altKey && e.key === " ") {
+    } else if (e.ctrlKey && e.altKey && e.key === ' ') {
       componentsRef.current[componentRefIndex].click();
     }
   }, []);
   return [addRef, onKeyDown];
 };
-export {
-  useKeyboardNavigation
-};
-//# sourceMappingURL=useKeyboardNavigation.js.map
+
+export { useKeyboardNavigation };

package/esm/index.d.js

@@ -0,0 +1 @@
+

package/esm/index.js

@@ -0,0 +1,2 @@
+export { DSBreadcrumb, DSBreadcrumbWithSchema, DSBreadcrumb as default, htmlElements } from './DSBreadcrumb.js';
+export { DSBreadcrumbItem, DSBreadcrumbItemWithSchema } from './DSBreadcrumbItem.js';

package/esm/styles.js

@@ -0,0 +1,57 @@
+import styled from 'styled-components';
+
+const handleColor = (theme, isActive, color, isTitle) => {
+  if (isActive) return theme.colors.neutral[800];else if (color) return color;else if (isTitle) return theme.colors.neutral[700];else return theme.colors.brand[600];
+};
+
+const StyledList = /*#__PURE__*/styled.ol.withConfig({
+  componentId: "sc-12gvmg4-0"
+})(["width:100%;list-style:none;display:flex;padding:0;margin:0;li:first-child *{margin-left:0;}"]);
+const StyledCrumbWrapper = /*#__PURE__*/styled.li.withConfig({
+  componentId: "sc-12gvmg4-1"
+})(["display:inline-flex;align-items:center;flex-shrink:20;transition:flex-shrink 0.1s cubic-bezier(0.64,0,0.35,1);height:16px;min-width:10px;&:hover{flex-shrink:0;}", ""], _ref => {
+  let {
+    theme,
+    isTitle,
+    trailingSlash
+  } = _ref;
+  return isTitle || !trailingSlash ? "&:not(:last-child):after {\n    display: inline-block;\n    content: '/';\n    color: ".concat(theme.colors.neutral[700], ";\n  }\n  ") : "&:after {\n    display: inline-block;\n    content: '/';\n    color: ".concat(theme.colors.neutral[700], ";\n  }\n  ");
+});
+const StyledContainer = /*#__PURE__*/styled.nav.withConfig({
+  componentId: "sc-12gvmg4-2"
+})(["display:flex;align-items:center;padding:0;"]);
+const StyledLink = /*#__PURE__*/styled.a.withConfig({
+  componentId: "sc-12gvmg4-3"
+})(["white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;font-size:12px;outline:none;margin:0 2px;border:2px solid transparent;-webkit-text-stroke:0.4px transparent;font-weight:", ";color:", ";&:hover{color:", ";cursor:pointer;", ";}&:focus{", " border-radius:2px;}"], _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.fontWeights.regular;
+}, _ref3 => {
+  let {
+    theme,
+    isActive,
+    color,
+    isTitle
+  } = _ref3;
+  return handleColor(theme, isActive, color, isTitle);
+}, _ref4 => {
+  let {
+    theme,
+    color
+  } = _ref4;
+  return color ? color : theme.colors.brand[800];
+}, _ref5 => {
+  let {
+    theme,
+    color
+  } = _ref5;
+  return "-webkit-text-stroke: 0.4px ".concat(color ? color : theme.colors.brand[800]);
+}, _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return "border: 2px solid ".concat(theme.colors.brand[700], ";");
+});
+
+export { StyledContainer, StyledCrumbWrapper, StyledLink, StyledList };