@sproutsocial/seeds-react-breadcrumb 1.1.9 → 1.1.11

package/.turbo/turbo-build.log

@@ -1,5 +1,23 @@
 yarn run v1.22.22
-$ tsup --dts
+$ tsup --dts && cp src/breadcrumb.css dist/breadcrumb.css
+▲ [WARNING] The condition "types" here will never be used as it comes after both "import" and "require" [package.json]
+
+    package.json:14:6:
+      14 │       "types": "./dist/index.d.ts"
+         ╵       ~~~~~~~
+
+  The "import" condition comes earlier and will be used for all "import" statements:
+
+    package.json:12:6:
+      12 │       "import": "./dist/esm/index.js",
+         ╵       ~~~~~~~~
+
+  The "require" condition comes earlier and will be used for all "require" calls:
+
+    package.json:13:6:
+      13 │       "require": "./dist/index.js",
+         ╵       ~~~~~~~~~
+
 CLI Building entry: src/index.ts
 CLI Using tsconfig: tsconfig.json
 CLI tsup v8.5.0
@@ -8,14 +26,52 @@ $ tsup --dts
 CLI Cleaning output folder
 CJS Build start
 ESM Build start
-CJS dist/index.js     4.27 KB
-CJS dist/index.js.map 4.95 KB
-CJS ⚡️ Build success in 41ms
-ESM dist/esm/index.js     2.38 KB
-ESM dist/esm/index.js.map 4.89 KB
-ESM ⚡️ Build success in 42ms
+[warn] ▲ [WARNING] The condition "types" here will never be used as it comes after both "import" and "require" [package.json]
+
+    package.json:14:6:
+      14 │       "types": "./dist/index.d.ts"
+         ╵       ~~~~~~~
+
+  The "import" condition comes earlier and will be used for all "import" statements:
+
+    package.json:12:6:
+      12 │       "import": "./dist/esm/index.js",
+         ╵       ~~~~~~~~
+
+  The "require" condition comes earlier and will be used for all "require" calls:
+
+    package.json:13:6:
+      13 │       "require": "./dist/index.js",
+         ╵       ~~~~~~~~~
+
+
+[warn] ▲ [WARNING] The condition "types" here will never be used as it comes after both "import" and "require" [package.json]
+
+    package.json:14:6:
+      14 │       "types": "./dist/index.d.ts"
+         ╵       ~~~~~~~
+
+  The "import" condition comes earlier and will be used for all "import" statements:
+
+    package.json:12:6:
+      12 │       "import": "./dist/esm/index.js",
+         ╵       ~~~~~~~~
+
+  The "require" condition comes earlier and will be used for all "require" calls:
+
+    package.json:13:6:
+      13 │       "require": "./dist/index.js",
+         ╵       ~~~~~~~~~
+
+
+CJS dist/index.js     6.09 KB
+CJS dist/index.js.map 9.22 KB
+CJS ⚡️ Build success in 20ms
+ESM dist/esm/index.js     3.97 KB
+ESM dist/esm/index.js.map 9.12 KB
+ESM ⚡️ Build success in 21ms
 DTS Build start
-DTS ⚡️ Build success in 1721ms
-DTS dist/index.d.ts  1.21 KB
-DTS dist/index.d.mts 1.21 KB
-Done in 2.46s.
+DTS ⚡️ Build success in 1719ms
+DTS dist/index.d.ts  1.43 KB
+DTS dist/index.d.mts 1.43 KB
+Done in 2.48s.

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @sproutsocial/seeds-react-breadcrumb
 
+## 1.1.11
+
+### Patch Changes
+
+- Updated dependencies [d21ae54]
+  - @sproutsocial/seeds-react-theme@4.2.1
+  - @sproutsocial/seeds-react-link@1.1.17
+
+## 1.1.10
+
+### Patch Changes
+
+- Updated dependencies [6611f6a]
+  - @sproutsocial/seeds-react-system-props@3.1.2
+  - @sproutsocial/seeds-react-link@1.1.16
+
 ## 1.1.9
 
 ### Patch Changes

package/dist/breadcrumb.css

@@ -0,0 +1,53 @@
+/**
+ * Seeds Breadcrumb component classes
+ * Use these instead of writing out individual Tailwind utility classes.
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
+ * CSS variable definitions and dark mode support.
+ *
+ * All rules are wrapped in `@layer components` so that consumer Tailwind
+ * utilities (unlayered) win the cascade over these styles.
+ */
+
+@layer components {
+  .seeds-breadcrumb ol {
+    font-size: var(--font-size-200);
+    line-height: var(--line-height-200);
+    margin: 0;
+    font-family: var(--font-family);
+    padding: 0;
+    display: flex;
+  }
+
+  .seeds-breadcrumb li {
+    margin-right: var(--space-200);
+    display: flex;
+  }
+
+  .seeds-breadcrumb a,
+  .seeds-breadcrumb button {
+    font-size: var(--font-size-200);
+    line-height: var(--line-height-200);
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .seeds-breadcrumb ol > div + li::before {
+    content: "/";
+    margin-right: var(--space-200);
+  }
+
+  .seeds-breadcrumb li:last-child a,
+  .seeds-breadcrumb li:last-child button {
+    color: var(--color-text-body);
+    font-weight: bold;
+  }
+
+  .seeds-breadcrumb li:not(:last-child)::after {
+    content: "/";
+    color: var(--color-text-body);
+    margin-left: var(--space-200);
+  }
+}

package/dist/esm/index.js

@@ -1,6 +1,8 @@
 // src/Breadcrumb.tsx
-import * as React from "react";
-import Link from "@sproutsocial/seeds-react-link";
+import "react";
+
+// src/BreadcrumbHybrid.tsx
+import "react";
 
 // src/styles.ts
 import styled from "styled-components";
@@ -46,7 +48,12 @@ var Nav = styled.nav`
 `;
 var styles_default = Nav;
 
-// src/Breadcrumb.tsx
+// src/BreadcrumbTailwind.tsx
+import "react";
+
+// src/BreadcrumbList.tsx
+import * as React from "react";
+import Link from "@sproutsocial/seeds-react-link";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var BreadcrumbItem = ({
   children,
@@ -55,15 +62,14 @@ var BreadcrumbItem = ({
 }) => {
   return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Link, { href, ...rest, children }) });
 };
-var Breadcrumb = ({
-  ariaLabel,
+BreadcrumbItem.displayName = "Breadcrumb.Item";
+var BreadcrumbList = ({
   overflow,
-  children,
-  ...rest
+  children
 }) => {
   const listItems = React.Children.toArray(children);
   const lastItem = listItems[listItems.length - 1];
-  return /* @__PURE__ */ jsx(styles_default, { "aria-label": ariaLabel, "data-qa-breadcrumb": ariaLabel, ...rest, children: /* @__PURE__ */ jsxs("ol", { children: [
+  return /* @__PURE__ */ jsxs("ol", { children: [
     overflow && /* @__PURE__ */ jsxs(Fragment, { children: [
       overflow.rootItem,
       /* @__PURE__ */ jsx("li", { children: overflow.menu })
@@ -75,9 +81,66 @@ var Breadcrumb = ({
         "aria-current": listItems[i] === lastItem ? "page" : void 0
       });
     })
-  ] }) });
+  ] });
 };
-BreadcrumbItem.displayName = "Breadcrumb.Item";
+
+// src/BreadcrumbTailwind.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function cn(...inputs) {
+  const classes = [];
+  for (const input of inputs) {
+    if (!input) continue;
+    if (typeof input === "string") {
+      classes.push(input);
+    } else if (typeof input === "object") {
+      for (const [key, value] of Object.entries(input)) {
+        if (value) {
+          classes.push(key);
+        }
+      }
+    }
+  }
+  return classes.join(" ");
+}
+var BreadcrumbTailwind = ({
+  ariaLabel,
+  overflow,
+  children,
+  className,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx2(
+    "nav",
+    {
+      className: cn("seeds-breadcrumb", className),
+      "aria-label": ariaLabel,
+      "data-qa-breadcrumb": ariaLabel,
+      ...rest,
+      children: /* @__PURE__ */ jsx2(BreadcrumbList, { overflow, children })
+    }
+  );
+};
+BreadcrumbTailwind.displayName = "BreadcrumbTailwind";
+
+// src/BreadcrumbHybrid.tsx
+import { hasStyledProps } from "@sproutsocial/seeds-react-system-props";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var BreadcrumbHybrid = ({
+  ariaLabel,
+  overflow,
+  children,
+  ...rest
+}) => {
+  if (hasStyledProps(rest)) {
+    return /* @__PURE__ */ jsx3(styles_default, { "aria-label": ariaLabel, "data-qa-breadcrumb": ariaLabel, ...rest, children: /* @__PURE__ */ jsx3(BreadcrumbList, { overflow, children }) });
+  }
+  return /* @__PURE__ */ jsx3(BreadcrumbTailwind, { ariaLabel, overflow, ...rest, children });
+};
+var BreadcrumbHybrid_default = BreadcrumbHybrid;
+
+// src/Breadcrumb.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Breadcrumb = (props) => /* @__PURE__ */ jsx4(BreadcrumbHybrid_default, { ...props });
 Breadcrumb.Item = BreadcrumbItem;
 var Breadcrumb_default = Breadcrumb;
 

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Breadcrumb.tsx","../../src/styles.ts","../../src/BreadcrumbTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport Link from \"@sproutsocial/seeds-react-link\";\nimport Nav from \"./styles\";\nimport type {\n  TypeBreadcrumbProps,\n  TypeBreadcrumbItemProps,\n} from \"./BreadcrumbTypes\";\n\nconst BreadcrumbItem = ({\n  children,\n  href,\n  ...rest\n}: TypeBreadcrumbItemProps) => {\n  return (\n    <li>\n      <Link href={href} {...rest}>\n        {children}\n      </Link>\n    </li>\n  );\n};\n\nconst Breadcrumb = ({\n  ariaLabel,\n  overflow,\n  children,\n  ...rest\n}: TypeBreadcrumbProps) => {\n  const listItems = React.Children.toArray(children);\n  const lastItem = listItems[listItems.length - 1];\n  return (\n    <Nav aria-label={ariaLabel} data-qa-breadcrumb={ariaLabel} {...rest}>\n      <ol>\n        {overflow && (\n          <>\n            {overflow.rootItem}\n            <li>{overflow.menu}</li>\n          </>\n        )}\n        {listItems.map((item, i) => {\n          // @ts-notes - item is a childNode which can be a string or number but `cloneElement` requires props\n          const itemElem =\n            typeof item === \"object\" && \"props\" in item ? (\n              item\n            ) : (\n              <span>item</span>\n            );\n          return React.cloneElement(itemElem, {\n            ...itemElem.props,\n            \"aria-current\": listItems[i] === lastItem ? \"page\" : undefined,\n          });\n        })}\n      </ol>\n    </Nav>\n  );\n};\n\nBreadcrumbItem.displayName = \"Breadcrumb.Item\";\nBreadcrumb.Item = BreadcrumbItem;\n\nexport default Breadcrumb;\n","import styled from \"styled-components\";\n\nconst Nav = styled.nav`\n  ol {\n    ${(props) => props.theme.typography[200]};\n    margin: 0;\n    font-family: ${(props) => props.theme.fontFamily};\n    padding: 0;\n    display: flex;\n  }\n\n  li {\n    margin-right: ${(props) => props.theme.space[200]};\n    display: flex;\n  }\n\n  a,\n  button {\n    ${(props) => props.theme.typography[200]};\n    max-width: 200px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  ol > div + li::before {\n    content: \"/\";\n    margin-right: ${(props) => props.theme.space[200]};\n  }\n\n  li:last-child a,\n  li:last-child button {\n    color: ${(props) => props.theme.colors.text.body};\n    font-weight: bold;\n  }\n\n  li:not(:last-child)::after {\n    content: \"/\";\n    color: ${(props) => props.theme.colors.text.body};\n    margin-left: ${(props) => props.theme.space[200]};\n  }\n`;\n\nexport default Nav;\n","import * as React from \"react\";\nimport type {\n  TypeStyledComponentsCommonProps,\n  TypeSystemCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nexport type { TypeLinkProps as TypeBreadcrumbItemProps } from \"@sproutsocial/seeds-react-link\";\n\nexport interface TypeBreadcrumbProps\n  extends TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    Omit<React.ComponentPropsWithoutRef<\"nav\">, \"color\"> {\n  children: React.ReactNode;\n\n  /** Description of the type of navigation being provided by the breadcrumb (i.e. \"Asset library breadcrumb\") */\n  ariaLabel: string;\n\n  /** optional */\n  overflow?: {\n    label: string;\n    menu: React.ReactNode;\n    /** Optional item rendered before the overflow menu (e.g. the root/home crumb) */\n    rootItem?: React.ReactNode;\n  };\n}\n","import Breadcrumb from \"./Breadcrumb\";\n\nexport default Breadcrumb;\nexport { Breadcrumb };\nexport * from \"./BreadcrumbTypes\";\n"],"mappings":";AAAA,YAAY,WAAW;AACvB,OAAO,UAAU;;;ACDjB,OAAO,YAAY;AAEnB,IAAM,MAAM,OAAO;AAAA;AAAA,MAEb,CAAC,UAAU,MAAM,MAAM,WAAW,GAAG,CAAC;AAAA;AAAA,mBAEzB,CAAC,UAAU,MAAM,MAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAMhC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAM/C,CAAC,UAAU,MAAM,MAAM,WAAW,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBASxB,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,aAKxC,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAMvC,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,IAAI;AAAA,mBACjC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAIpD,IAAO,iBAAQ;;;AD5BT,SAmBI,UAnBJ,KAmBI,YAnBJ;AAPN,IAAM,iBAAiB,CAAC;AAAA,EACtB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA+B;AAC7B,SACE,oBAAC,QACC,8BAAC,QAAK,MAAa,GAAG,MACnB,UACH,GACF;AAEJ;AAEA,IAAM,aAAa,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA2B;AACzB,QAAM,YAAkB,eAAS,QAAQ,QAAQ;AACjD,QAAM,WAAW,UAAU,UAAU,SAAS,CAAC;AAC/C,SACE,oBAAC,kBAAI,cAAY,WAAW,sBAAoB,WAAY,GAAG,MAC7D,+BAAC,QACE;AAAA,gBACC,iCACG;AAAA,eAAS;AAAA,MACV,oBAAC,QAAI,mBAAS,MAAK;AAAA,OACrB;AAAA,IAED,UAAU,IAAI,CAAC,MAAM,MAAM;AAE1B,YAAM,WACJ,OAAO,SAAS,YAAY,WAAW,OACrC,OAEA,oBAAC,UAAK,kBAAI;AAEd,aAAa,mBAAa,UAAU;AAAA,QAClC,GAAG,SAAS;AAAA,QACZ,gBAAgB,UAAU,CAAC,MAAM,WAAW,SAAS;AAAA,MACvD,CAAC;AAAA,IACH,CAAC;AAAA,KACH,GACF;AAEJ;AAEA,eAAe,cAAc;AAC7B,WAAW,OAAO;AAElB,IAAO,qBAAQ;;;AE5Df,OAAuB;;;ACEvB,IAAO,gBAAQ;","names":[]}
+{"version":3,"sources":["../../src/Breadcrumb.tsx","../../src/BreadcrumbHybrid.tsx","../../src/styles.ts","../../src/BreadcrumbTailwind.tsx","../../src/BreadcrumbList.tsx","../../src/BreadcrumbTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport BreadcrumbHybrid from \"./BreadcrumbHybrid\";\nimport { BreadcrumbItem } from \"./BreadcrumbList\";\nimport type { TypeBreadcrumbProps } from \"./BreadcrumbTypes\";\n\n/**\n * Breadcrumb component. Automatically routes between the Tailwind\n * implementation (preferred) and the styled-components implementation (for\n * consumers using system props or styled() extension).\n */\nconst Breadcrumb = (props: TypeBreadcrumbProps) => (\n  <BreadcrumbHybrid {...props} />\n);\n\nBreadcrumb.Item = BreadcrumbItem;\n\nexport default Breadcrumb;\n","/**\n * Hybrid Breadcrumb Component\n * Automatically chooses between Tailwind and styled-components based on props\n */\n\nimport * as React from \"react\";\nimport Nav from \"./styles\"; // Styled-components version\nimport { BreadcrumbTailwind } from \"./BreadcrumbTailwind\"; // Tailwind version\nimport { BreadcrumbList } from \"./BreadcrumbList\";\nimport { hasStyledProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeBreadcrumbProps } from \"./BreadcrumbTypes\";\n\nconst BreadcrumbHybrid = ({\n  ariaLabel,\n  overflow,\n  children,\n  ...rest\n}: TypeBreadcrumbProps) => {\n  if (hasStyledProps(rest)) {\n    return (\n      <Nav aria-label={ariaLabel} data-qa-breadcrumb={ariaLabel} {...rest}>\n        <BreadcrumbList overflow={overflow}>{children}</BreadcrumbList>\n      </Nav>\n    );\n  }\n\n  // Use Tailwind version (preferred - better performance)\n  return (\n    <BreadcrumbTailwind ariaLabel={ariaLabel} overflow={overflow} {...rest}>\n      {children}\n    </BreadcrumbTailwind>\n  );\n};\n\nexport default BreadcrumbHybrid;\n","import styled from \"styled-components\";\n\nconst Nav = styled.nav`\n  ol {\n    ${(props) => props.theme.typography[200]};\n    margin: 0;\n    font-family: ${(props) => props.theme.fontFamily};\n    padding: 0;\n    display: flex;\n  }\n\n  li {\n    margin-right: ${(props) => props.theme.space[200]};\n    display: flex;\n  }\n\n  a,\n  button {\n    ${(props) => props.theme.typography[200]};\n    max-width: 200px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  ol > div + li::before {\n    content: \"/\";\n    margin-right: ${(props) => props.theme.space[200]};\n  }\n\n  li:last-child a,\n  li:last-child button {\n    color: ${(props) => props.theme.colors.text.body};\n    font-weight: bold;\n  }\n\n  li:not(:last-child)::after {\n    content: \"/\";\n    color: ${(props) => props.theme.colors.text.body};\n    margin-left: ${(props) => props.theme.space[200]};\n  }\n`;\n\nexport default Nav;\n","/**\n * Tailwind CSS implementation of Breadcrumb component\n * Uses Seeds breadcrumb CSS classes from breadcrumb.css\n */\n\nimport * as React from \"react\";\nimport { BreadcrumbList } from \"./BreadcrumbList\";\nimport type { TypeBreadcrumbProps } from \"./BreadcrumbTypes\";\n\n// Utility for merging class names properly\nfunction cn(\n  ...inputs: (string | undefined | null | false | Record<string, boolean>)[]\n): string {\n  const classes: string[] = [];\n\n  for (const input of inputs) {\n    if (!input) continue;\n\n    if (typeof input === \"string\") {\n      classes.push(input);\n    } else if (typeof input === \"object\") {\n      for (const [key, value] of Object.entries(input)) {\n        if (value) {\n          classes.push(key);\n        }\n      }\n    }\n  }\n\n  return classes.join(\" \");\n}\n\nexport const BreadcrumbTailwind = ({\n  ariaLabel,\n  overflow,\n  children,\n  className,\n  ...rest\n}: TypeBreadcrumbProps) => {\n  return (\n    <nav\n      className={cn(\"seeds-breadcrumb\", className)}\n      aria-label={ariaLabel}\n      data-qa-breadcrumb={ariaLabel}\n      {...(rest as React.ComponentPropsWithoutRef<\"nav\">)}\n    >\n      <BreadcrumbList overflow={overflow}>{children}</BreadcrumbList>\n    </nav>\n  );\n};\n\nBreadcrumbTailwind.displayName = \"BreadcrumbTailwind\";\n","/**\n * Shared building blocks for Breadcrumb.\n *\n * BreadcrumbItem is the static `Breadcrumb.Item` subcomponent, and\n * BreadcrumbList produces the processed <ol> subtree (overflow block +\n * aria-current on the last item). Both the styled-components and Tailwind\n * paths render this exact same list — only the root <nav> wrapper differs — so\n * the child-processing logic lives here once and is never forked.\n */\n\nimport * as React from \"react\";\nimport Link from \"@sproutsocial/seeds-react-link\";\nimport type {\n  TypeBreadcrumbProps,\n  TypeBreadcrumbItemProps,\n} from \"./BreadcrumbTypes\";\n\nexport const BreadcrumbItem = ({\n  children,\n  href,\n  ...rest\n}: TypeBreadcrumbItemProps) => {\n  return (\n    <li>\n      <Link href={href} {...rest}>\n        {children}\n      </Link>\n    </li>\n  );\n};\n\nBreadcrumbItem.displayName = \"Breadcrumb.Item\";\n\nexport const BreadcrumbList = ({\n  overflow,\n  children,\n}: Pick<TypeBreadcrumbProps, \"overflow\" | \"children\">) => {\n  const listItems = React.Children.toArray(children);\n  const lastItem = listItems[listItems.length - 1];\n  return (\n    <ol>\n      {overflow && (\n        <>\n          {overflow.rootItem}\n          <li>{overflow.menu}</li>\n        </>\n      )}\n      {listItems.map((item, i) => {\n        // @ts-notes - item is a childNode which can be a string or number but `cloneElement` requires props\n        const itemElem =\n          typeof item === \"object\" && \"props\" in item ? (\n            item\n          ) : (\n            <span>item</span>\n          );\n        return React.cloneElement(itemElem, {\n          ...itemElem.props,\n          \"aria-current\": listItems[i] === lastItem ? \"page\" : undefined,\n        });\n      })}\n    </ol>\n  );\n};\n","import * as React from \"react\";\nimport type {\n  TypeStyledComponentsCommonProps,\n  TypeSystemCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nexport type { TypeLinkProps as TypeBreadcrumbItemProps } from \"@sproutsocial/seeds-react-link\";\n\nexport interface TypeBreadcrumbProps\n  extends TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    Omit<React.ComponentPropsWithoutRef<\"nav\">, \"color\"> {\n  children: React.ReactNode;\n\n  /** Description of the type of navigation being provided by the breadcrumb (i.e. \"Asset library breadcrumb\") */\n  ariaLabel: string;\n\n  /** optional */\n  overflow?: {\n    label: string;\n    menu: React.ReactNode;\n    /** Optional item rendered before the overflow menu (e.g. the root/home crumb) */\n    rootItem?: React.ReactNode;\n  };\n}\n","import Breadcrumb from \"./Breadcrumb\";\n\nexport default Breadcrumb;\nexport { Breadcrumb };\nexport * from \"./BreadcrumbTypes\";\n"],"mappings":";AAAA,OAAuB;;;ACKvB,OAAuB;;;ACLvB,OAAO,YAAY;AAEnB,IAAM,MAAM,OAAO;AAAA;AAAA,MAEb,CAAC,UAAU,MAAM,MAAM,WAAW,GAAG,CAAC;AAAA;AAAA,mBAEzB,CAAC,UAAU,MAAM,MAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAMhC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAM/C,CAAC,UAAU,MAAM,MAAM,WAAW,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBASxB,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,aAKxC,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAMvC,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,IAAI;AAAA,mBACjC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAIpD,IAAO,iBAAQ;;;ACtCf,OAAuB;;;ACKvB,YAAY,WAAW;AACvB,OAAO,UAAU;AAaX,SAkBE,UAlBF,KAkBE,YAlBF;AAPC,IAAM,iBAAiB,CAAC;AAAA,EAC7B;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA+B;AAC7B,SACE,oBAAC,QACC,8BAAC,QAAK,MAAa,GAAG,MACnB,UACH,GACF;AAEJ;AAEA,eAAe,cAAc;AAEtB,IAAM,iBAAiB,CAAC;AAAA,EAC7B;AAAA,EACA;AACF,MAA0D;AACxD,QAAM,YAAkB,eAAS,QAAQ,QAAQ;AACjD,QAAM,WAAW,UAAU,UAAU,SAAS,CAAC;AAC/C,SACE,qBAAC,QACE;AAAA,gBACC,iCACG;AAAA,eAAS;AAAA,MACV,oBAAC,QAAI,mBAAS,MAAK;AAAA,OACrB;AAAA,IAED,UAAU,IAAI,CAAC,MAAM,MAAM;AAE1B,YAAM,WACJ,OAAO,SAAS,YAAY,WAAW,OACrC,OAEA,oBAAC,UAAK,kBAAI;AAEd,aAAa,mBAAa,UAAU;AAAA,QAClC,GAAG,SAAS;AAAA,QACZ,gBAAgB,UAAU,CAAC,MAAM,WAAW,SAAS;AAAA,MACvD,CAAC;AAAA,IACH,CAAC;AAAA,KACH;AAEJ;;;ADhBM,gBAAAA,YAAA;AApCN,SAAS,MACJ,QACK;AACR,QAAM,UAAoB,CAAC;AAE3B,aAAW,SAAS,QAAQ;AAC1B,QAAI,CAAC,MAAO;AAEZ,QAAI,OAAO,UAAU,UAAU;AAC7B,cAAQ,KAAK,KAAK;AAAA,IACpB,WAAW,OAAO,UAAU,UAAU;AACpC,iBAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,KAAK,GAAG;AAChD,YAAI,OAAO;AACT,kBAAQ,KAAK,GAAG;AAAA,QAClB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,SAAO,QAAQ,KAAK,GAAG;AACzB;AAEO,IAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA2B;AACzB,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,oBAAoB,SAAS;AAAA,MAC3C,cAAY;AAAA,MACZ,sBAAoB;AAAA,MACnB,GAAI;AAAA,MAEL,0BAAAA,KAAC,kBAAe,UAAqB,UAAS;AAAA;AAAA,EAChD;AAEJ;AAEA,mBAAmB,cAAc;;;AF1CjC,SAAS,sBAAsB;AAYvB,gBAAAC,YAAA;AATR,IAAM,mBAAmB,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA2B;AACzB,MAAI,eAAe,IAAI,GAAG;AACxB,WACE,gBAAAA,KAAC,kBAAI,cAAY,WAAW,sBAAoB,WAAY,GAAG,MAC7D,0BAAAA,KAAC,kBAAe,UAAqB,UAAS,GAChD;AAAA,EAEJ;AAGA,SACE,gBAAAA,KAAC,sBAAmB,WAAsB,UAAqB,GAAG,MAC/D,UACH;AAEJ;AAEA,IAAO,2BAAQ;;;ADvBb,gBAAAC,YAAA;AADF,IAAM,aAAa,CAAC,UAClB,gBAAAA,KAAC,4BAAkB,GAAG,OAAO;AAG/B,WAAW,OAAO;AAElB,IAAO,qBAAQ;;;AKhBf,OAAuB;;;ACEvB,IAAO,gBAAQ;","names":["jsx","jsx","jsx"]}

package/dist/index.d.mts

@@ -1,8 +1,8 @@
+import * as _sproutsocial_seeds_react_link from '@sproutsocial/seeds-react-link';
+export { TypeLinkProps as TypeBreadcrumbItemProps } from '@sproutsocial/seeds-react-link';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { TypeStyledComponentsCommonProps, TypeSystemCommonProps } from '@sproutsocial/seeds-react-system-props';
-import { TypeLinkProps } from '@sproutsocial/seeds-react-link';
-export { TypeLinkProps as TypeBreadcrumbItemProps } from '@sproutsocial/seeds-react-link';
 
 interface TypeBreadcrumbProps extends TypeStyledComponentsCommonProps, TypeSystemCommonProps, Omit<React.ComponentPropsWithoutRef<"nav">, "color"> {
     children: React.ReactNode;
@@ -17,10 +17,15 @@ interface TypeBreadcrumbProps extends TypeStyledComponentsCommonProps, TypeSyste
     };
 }
 
+/**
+ * Breadcrumb component. Automatically routes between the Tailwind
+ * implementation (preferred) and the styled-components implementation (for
+ * consumers using system props or styled() extension).
+ */
 declare const Breadcrumb: {
-    ({ ariaLabel, overflow, children, ...rest }: TypeBreadcrumbProps): react_jsx_runtime.JSX.Element;
+    (props: TypeBreadcrumbProps): react_jsx_runtime.JSX.Element;
     Item: {
-        ({ children, href, ...rest }: TypeLinkProps): react_jsx_runtime.JSX.Element;
+        ({ children, href, ...rest }: _sproutsocial_seeds_react_link.TypeLinkProps): react_jsx_runtime.JSX.Element;
         displayName: string;
     };
 };

package/dist/index.d.ts

@@ -1,8 +1,8 @@
+import * as _sproutsocial_seeds_react_link from '@sproutsocial/seeds-react-link';
+export { TypeLinkProps as TypeBreadcrumbItemProps } from '@sproutsocial/seeds-react-link';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { TypeStyledComponentsCommonProps, TypeSystemCommonProps } from '@sproutsocial/seeds-react-system-props';
-import { TypeLinkProps } from '@sproutsocial/seeds-react-link';
-export { TypeLinkProps as TypeBreadcrumbItemProps } from '@sproutsocial/seeds-react-link';
 
 interface TypeBreadcrumbProps extends TypeStyledComponentsCommonProps, TypeSystemCommonProps, Omit<React.ComponentPropsWithoutRef<"nav">, "color"> {
     children: React.ReactNode;
@@ -17,10 +17,15 @@ interface TypeBreadcrumbProps extends TypeStyledComponentsCommonProps, TypeSyste
     };
 }
 
+/**
+ * Breadcrumb component. Automatically routes between the Tailwind
+ * implementation (preferred) and the styled-components implementation (for
+ * consumers using system props or styled() extension).
+ */
 declare const Breadcrumb: {
-    ({ ariaLabel, overflow, children, ...rest }: TypeBreadcrumbProps): react_jsx_runtime.JSX.Element;
+    (props: TypeBreadcrumbProps): react_jsx_runtime.JSX.Element;
     Item: {
-        ({ children, href, ...rest }: TypeLinkProps): react_jsx_runtime.JSX.Element;
+        ({ children, href, ...rest }: _sproutsocial_seeds_react_link.TypeLinkProps): react_jsx_runtime.JSX.Element;
         displayName: string;
     };
 };

package/dist/index.js

@@ -36,8 +36,10 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/Breadcrumb.tsx
-var React = __toESM(require("react"));
-var import_seeds_react_link = __toESM(require("@sproutsocial/seeds-react-link"));
+var React4 = require("react");
+
+// src/BreadcrumbHybrid.tsx
+var React3 = require("react");
 
 // src/styles.ts
 var import_styled_components = __toESM(require("styled-components"));
@@ -83,7 +85,12 @@ var Nav = import_styled_components.default.nav`
 `;
 var styles_default = Nav;
 
-// src/Breadcrumb.tsx
+// src/BreadcrumbTailwind.tsx
+var React2 = require("react");
+
+// src/BreadcrumbList.tsx
+var React = __toESM(require("react"));
+var import_seeds_react_link = __toESM(require("@sproutsocial/seeds-react-link"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var BreadcrumbItem = ({
   children,
@@ -92,15 +99,14 @@ var BreadcrumbItem = ({
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_link.default, { href, ...rest, children }) });
 };
-var Breadcrumb = ({
-  ariaLabel,
+BreadcrumbItem.displayName = "Breadcrumb.Item";
+var BreadcrumbList = ({
   overflow,
-  children,
-  ...rest
+  children
 }) => {
   const listItems = React.Children.toArray(children);
   const lastItem = listItems[listItems.length - 1];
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(styles_default, { "aria-label": ariaLabel, "data-qa-breadcrumb": ariaLabel, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("ol", { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("ol", { children: [
     overflow && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
       overflow.rootItem,
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: overflow.menu })
@@ -112,14 +118,71 @@ var Breadcrumb = ({
         "aria-current": listItems[i] === lastItem ? "page" : void 0
       });
     })
-  ] }) });
+  ] });
 };
-BreadcrumbItem.displayName = "Breadcrumb.Item";
+
+// src/BreadcrumbTailwind.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function cn(...inputs) {
+  const classes = [];
+  for (const input of inputs) {
+    if (!input) continue;
+    if (typeof input === "string") {
+      classes.push(input);
+    } else if (typeof input === "object") {
+      for (const [key, value] of Object.entries(input)) {
+        if (value) {
+          classes.push(key);
+        }
+      }
+    }
+  }
+  return classes.join(" ");
+}
+var BreadcrumbTailwind = ({
+  ariaLabel,
+  overflow,
+  children,
+  className,
+  ...rest
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "nav",
+    {
+      className: cn("seeds-breadcrumb", className),
+      "aria-label": ariaLabel,
+      "data-qa-breadcrumb": ariaLabel,
+      ...rest,
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BreadcrumbList, { overflow, children })
+    }
+  );
+};
+BreadcrumbTailwind.displayName = "BreadcrumbTailwind";
+
+// src/BreadcrumbHybrid.tsx
+var import_seeds_react_system_props = require("@sproutsocial/seeds-react-system-props");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var BreadcrumbHybrid = ({
+  ariaLabel,
+  overflow,
+  children,
+  ...rest
+}) => {
+  if ((0, import_seeds_react_system_props.hasStyledProps)(rest)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(styles_default, { "aria-label": ariaLabel, "data-qa-breadcrumb": ariaLabel, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(BreadcrumbList, { overflow, children }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(BreadcrumbTailwind, { ariaLabel, overflow, ...rest, children });
+};
+var BreadcrumbHybrid_default = BreadcrumbHybrid;
+
+// src/Breadcrumb.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Breadcrumb = (props) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BreadcrumbHybrid_default, { ...props });
 Breadcrumb.Item = BreadcrumbItem;
 var Breadcrumb_default = Breadcrumb;
 
 // src/BreadcrumbTypes.ts
-var React2 = require("react");
+var React5 = require("react");
 
 // src/index.ts
 var index_default = Breadcrumb_default;

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/Breadcrumb.tsx","../src/styles.ts","../src/BreadcrumbTypes.ts"],"sourcesContent":["import Breadcrumb from \"./Breadcrumb\";\n\nexport default Breadcrumb;\nexport { Breadcrumb };\nexport * from \"./BreadcrumbTypes\";\n","import * as React from \"react\";\nimport Link from \"@sproutsocial/seeds-react-link\";\nimport Nav from \"./styles\";\nimport type {\n  TypeBreadcrumbProps,\n  TypeBreadcrumbItemProps,\n} from \"./BreadcrumbTypes\";\n\nconst BreadcrumbItem = ({\n  children,\n  href,\n  ...rest\n}: TypeBreadcrumbItemProps) => {\n  return (\n    <li>\n      <Link href={href} {...rest}>\n        {children}\n      </Link>\n    </li>\n  );\n};\n\nconst Breadcrumb = ({\n  ariaLabel,\n  overflow,\n  children,\n  ...rest\n}: TypeBreadcrumbProps) => {\n  const listItems = React.Children.toArray(children);\n  const lastItem = listItems[listItems.length - 1];\n  return (\n    <Nav aria-label={ariaLabel} data-qa-breadcrumb={ariaLabel} {...rest}>\n      <ol>\n        {overflow && (\n          <>\n            {overflow.rootItem}\n            <li>{overflow.menu}</li>\n          </>\n        )}\n        {listItems.map((item, i) => {\n          // @ts-notes - item is a childNode which can be a string or number but `cloneElement` requires props\n          const itemElem =\n            typeof item === \"object\" && \"props\" in item ? (\n              item\n            ) : (\n              <span>item</span>\n            );\n          return React.cloneElement(itemElem, {\n            ...itemElem.props,\n            \"aria-current\": listItems[i] === lastItem ? \"page\" : undefined,\n          });\n        })}\n      </ol>\n    </Nav>\n  );\n};\n\nBreadcrumbItem.displayName = \"Breadcrumb.Item\";\nBreadcrumb.Item = BreadcrumbItem;\n\nexport default Breadcrumb;\n","import styled from \"styled-components\";\n\nconst Nav = styled.nav`\n  ol {\n    ${(props) => props.theme.typography[200]};\n    margin: 0;\n    font-family: ${(props) => props.theme.fontFamily};\n    padding: 0;\n    display: flex;\n  }\n\n  li {\n    margin-right: ${(props) => props.theme.space[200]};\n    display: flex;\n  }\n\n  a,\n  button {\n    ${(props) => props.theme.typography[200]};\n    max-width: 200px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  ol > div + li::before {\n    content: \"/\";\n    margin-right: ${(props) => props.theme.space[200]};\n  }\n\n  li:last-child a,\n  li:last-child button {\n    color: ${(props) => props.theme.colors.text.body};\n    font-weight: bold;\n  }\n\n  li:not(:last-child)::after {\n    content: \"/\";\n    color: ${(props) => props.theme.colors.text.body};\n    margin-left: ${(props) => props.theme.space[200]};\n  }\n`;\n\nexport default Nav;\n","import * as React from \"react\";\nimport type {\n  TypeStyledComponentsCommonProps,\n  TypeSystemCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nexport type { TypeLinkProps as TypeBreadcrumbItemProps } from \"@sproutsocial/seeds-react-link\";\n\nexport interface TypeBreadcrumbProps\n  extends TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    Omit<React.ComponentPropsWithoutRef<\"nav\">, \"color\"> {\n  children: React.ReactNode;\n\n  /** Description of the type of navigation being provided by the breadcrumb (i.e. \"Asset library breadcrumb\") */\n  ariaLabel: string;\n\n  /** optional */\n  overflow?: {\n    label: string;\n    menu: React.ReactNode;\n    /** Optional item rendered before the overflow menu (e.g. the root/home crumb) */\n    rootItem?: React.ReactNode;\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;AACvB,8BAAiB;;;ACDjB,+BAAmB;AAEnB,IAAM,MAAM,yBAAAA,QAAO;AAAA;AAAA,MAEb,CAAC,UAAU,MAAM,MAAM,WAAW,GAAG,CAAC;AAAA;AAAA,mBAEzB,CAAC,UAAU,MAAM,MAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAMhC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAM/C,CAAC,UAAU,MAAM,MAAM,WAAW,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBASxB,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,aAKxC,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAMvC,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,IAAI;AAAA,mBACjC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAIpD,IAAO,iBAAQ;;;AD5BT;AAPN,IAAM,iBAAiB,CAAC;AAAA,EACtB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA+B;AAC7B,SACE,4CAAC,QACC,sDAAC,wBAAAC,SAAA,EAAK,MAAa,GAAG,MACnB,UACH,GACF;AAEJ;AAEA,IAAM,aAAa,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA2B;AACzB,QAAM,YAAkB,eAAS,QAAQ,QAAQ;AACjD,QAAM,WAAW,UAAU,UAAU,SAAS,CAAC;AAC/C,SACE,4CAAC,kBAAI,cAAY,WAAW,sBAAoB,WAAY,GAAG,MAC7D,uDAAC,QACE;AAAA,gBACC,4EACG;AAAA,eAAS;AAAA,MACV,4CAAC,QAAI,mBAAS,MAAK;AAAA,OACrB;AAAA,IAED,UAAU,IAAI,CAAC,MAAM,MAAM;AAE1B,YAAM,WACJ,OAAO,SAAS,YAAY,WAAW,OACrC,OAEA,4CAAC,UAAK,kBAAI;AAEd,aAAa,mBAAa,UAAU;AAAA,QAClC,GAAG,SAAS;AAAA,QACZ,gBAAgB,UAAU,CAAC,MAAM,WAAW,SAAS;AAAA,MACvD,CAAC;AAAA,IACH,CAAC;AAAA,KACH,GACF;AAEJ;AAEA,eAAe,cAAc;AAC7B,WAAW,OAAO;AAElB,IAAO,qBAAQ;;;AE5Df,IAAAC,SAAuB;;;AHEvB,IAAO,gBAAQ;","names":["styled","Link","React"]}
+{"version":3,"sources":["../src/index.ts","../src/Breadcrumb.tsx","../src/BreadcrumbHybrid.tsx","../src/styles.ts","../src/BreadcrumbTailwind.tsx","../src/BreadcrumbList.tsx","../src/BreadcrumbTypes.ts"],"sourcesContent":["import Breadcrumb from \"./Breadcrumb\";\n\nexport default Breadcrumb;\nexport { Breadcrumb };\nexport * from \"./BreadcrumbTypes\";\n","import * as React from \"react\";\nimport BreadcrumbHybrid from \"./BreadcrumbHybrid\";\nimport { BreadcrumbItem } from \"./BreadcrumbList\";\nimport type { TypeBreadcrumbProps } from \"./BreadcrumbTypes\";\n\n/**\n * Breadcrumb component. Automatically routes between the Tailwind\n * implementation (preferred) and the styled-components implementation (for\n * consumers using system props or styled() extension).\n */\nconst Breadcrumb = (props: TypeBreadcrumbProps) => (\n  <BreadcrumbHybrid {...props} />\n);\n\nBreadcrumb.Item = BreadcrumbItem;\n\nexport default Breadcrumb;\n","/**\n * Hybrid Breadcrumb Component\n * Automatically chooses between Tailwind and styled-components based on props\n */\n\nimport * as React from \"react\";\nimport Nav from \"./styles\"; // Styled-components version\nimport { BreadcrumbTailwind } from \"./BreadcrumbTailwind\"; // Tailwind version\nimport { BreadcrumbList } from \"./BreadcrumbList\";\nimport { hasStyledProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeBreadcrumbProps } from \"./BreadcrumbTypes\";\n\nconst BreadcrumbHybrid = ({\n  ariaLabel,\n  overflow,\n  children,\n  ...rest\n}: TypeBreadcrumbProps) => {\n  if (hasStyledProps(rest)) {\n    return (\n      <Nav aria-label={ariaLabel} data-qa-breadcrumb={ariaLabel} {...rest}>\n        <BreadcrumbList overflow={overflow}>{children}</BreadcrumbList>\n      </Nav>\n    );\n  }\n\n  // Use Tailwind version (preferred - better performance)\n  return (\n    <BreadcrumbTailwind ariaLabel={ariaLabel} overflow={overflow} {...rest}>\n      {children}\n    </BreadcrumbTailwind>\n  );\n};\n\nexport default BreadcrumbHybrid;\n","import styled from \"styled-components\";\n\nconst Nav = styled.nav`\n  ol {\n    ${(props) => props.theme.typography[200]};\n    margin: 0;\n    font-family: ${(props) => props.theme.fontFamily};\n    padding: 0;\n    display: flex;\n  }\n\n  li {\n    margin-right: ${(props) => props.theme.space[200]};\n    display: flex;\n  }\n\n  a,\n  button {\n    ${(props) => props.theme.typography[200]};\n    max-width: 200px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  ol > div + li::before {\n    content: \"/\";\n    margin-right: ${(props) => props.theme.space[200]};\n  }\n\n  li:last-child a,\n  li:last-child button {\n    color: ${(props) => props.theme.colors.text.body};\n    font-weight: bold;\n  }\n\n  li:not(:last-child)::after {\n    content: \"/\";\n    color: ${(props) => props.theme.colors.text.body};\n    margin-left: ${(props) => props.theme.space[200]};\n  }\n`;\n\nexport default Nav;\n","/**\n * Tailwind CSS implementation of Breadcrumb component\n * Uses Seeds breadcrumb CSS classes from breadcrumb.css\n */\n\nimport * as React from \"react\";\nimport { BreadcrumbList } from \"./BreadcrumbList\";\nimport type { TypeBreadcrumbProps } from \"./BreadcrumbTypes\";\n\n// Utility for merging class names properly\nfunction cn(\n  ...inputs: (string | undefined | null | false | Record<string, boolean>)[]\n): string {\n  const classes: string[] = [];\n\n  for (const input of inputs) {\n    if (!input) continue;\n\n    if (typeof input === \"string\") {\n      classes.push(input);\n    } else if (typeof input === \"object\") {\n      for (const [key, value] of Object.entries(input)) {\n        if (value) {\n          classes.push(key);\n        }\n      }\n    }\n  }\n\n  return classes.join(\" \");\n}\n\nexport const BreadcrumbTailwind = ({\n  ariaLabel,\n  overflow,\n  children,\n  className,\n  ...rest\n}: TypeBreadcrumbProps) => {\n  return (\n    <nav\n      className={cn(\"seeds-breadcrumb\", className)}\n      aria-label={ariaLabel}\n      data-qa-breadcrumb={ariaLabel}\n      {...(rest as React.ComponentPropsWithoutRef<\"nav\">)}\n    >\n      <BreadcrumbList overflow={overflow}>{children}</BreadcrumbList>\n    </nav>\n  );\n};\n\nBreadcrumbTailwind.displayName = \"BreadcrumbTailwind\";\n","/**\n * Shared building blocks for Breadcrumb.\n *\n * BreadcrumbItem is the static `Breadcrumb.Item` subcomponent, and\n * BreadcrumbList produces the processed <ol> subtree (overflow block +\n * aria-current on the last item). Both the styled-components and Tailwind\n * paths render this exact same list — only the root <nav> wrapper differs — so\n * the child-processing logic lives here once and is never forked.\n */\n\nimport * as React from \"react\";\nimport Link from \"@sproutsocial/seeds-react-link\";\nimport type {\n  TypeBreadcrumbProps,\n  TypeBreadcrumbItemProps,\n} from \"./BreadcrumbTypes\";\n\nexport const BreadcrumbItem = ({\n  children,\n  href,\n  ...rest\n}: TypeBreadcrumbItemProps) => {\n  return (\n    <li>\n      <Link href={href} {...rest}>\n        {children}\n      </Link>\n    </li>\n  );\n};\n\nBreadcrumbItem.displayName = \"Breadcrumb.Item\";\n\nexport const BreadcrumbList = ({\n  overflow,\n  children,\n}: Pick<TypeBreadcrumbProps, \"overflow\" | \"children\">) => {\n  const listItems = React.Children.toArray(children);\n  const lastItem = listItems[listItems.length - 1];\n  return (\n    <ol>\n      {overflow && (\n        <>\n          {overflow.rootItem}\n          <li>{overflow.menu}</li>\n        </>\n      )}\n      {listItems.map((item, i) => {\n        // @ts-notes - item is a childNode which can be a string or number but `cloneElement` requires props\n        const itemElem =\n          typeof item === \"object\" && \"props\" in item ? (\n            item\n          ) : (\n            <span>item</span>\n          );\n        return React.cloneElement(itemElem, {\n          ...itemElem.props,\n          \"aria-current\": listItems[i] === lastItem ? \"page\" : undefined,\n        });\n      })}\n    </ol>\n  );\n};\n","import * as React from \"react\";\nimport type {\n  TypeStyledComponentsCommonProps,\n  TypeSystemCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nexport type { TypeLinkProps as TypeBreadcrumbItemProps } from \"@sproutsocial/seeds-react-link\";\n\nexport interface TypeBreadcrumbProps\n  extends TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    Omit<React.ComponentPropsWithoutRef<\"nav\">, \"color\"> {\n  children: React.ReactNode;\n\n  /** Description of the type of navigation being provided by the breadcrumb (i.e. \"Asset library breadcrumb\") */\n  ariaLabel: string;\n\n  /** optional */\n  overflow?: {\n    label: string;\n    menu: React.ReactNode;\n    /** Optional item rendered before the overflow menu (e.g. the root/home crumb) */\n    rootItem?: React.ReactNode;\n  };\n}\n"],"mappings":"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","names":["React","React","styled","React","Link","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","React"]}

package/package.json

@@ -1,15 +1,23 @@
 {
   "name": "@sproutsocial/seeds-react-breadcrumb",
-  "version": "1.1.9",
+  "version": "1.1.11",
   "description": "Seeds React Breadcrumb",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./dist/breadcrumb.css": "./dist/breadcrumb.css"
+  },
   "scripts": {
-    "build": "tsup --dts",
-    "build:debug": "tsup --dts --metafile",
+    "build": "tsup --dts && cp src/breadcrumb.css dist/breadcrumb.css",
+    "build:debug": "tsup --dts --metafile && cp src/breadcrumb.css dist/breadcrumb.css",
     "dev": "tsup --watch --dts",
     "clean": "rm -rf .turbo dist",
     "clean:modules": "rm -rf node_modules",
@@ -18,9 +26,9 @@
     "test:watch": "jest --watch --coverage=false"
   },
   "dependencies": {
-    "@sproutsocial/seeds-react-theme": "^4.2.0",
-    "@sproutsocial/seeds-react-system-props": "^3.1.1",
-    "@sproutsocial/seeds-react-link": "^1.1.15"
+    "@sproutsocial/seeds-react-theme": "^4.2.1",
+    "@sproutsocial/seeds-react-system-props": "^3.1.2",
+    "@sproutsocial/seeds-react-link": "^1.1.17"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",

package/src/Breadcrumb.tsx

@@ -1,61 +1,17 @@
 import * as React from "react";
-import Link from "@sproutsocial/seeds-react-link";
-import Nav from "./styles";
-import type {
-  TypeBreadcrumbProps,
-  TypeBreadcrumbItemProps,
-} from "./BreadcrumbTypes";
+import BreadcrumbHybrid from "./BreadcrumbHybrid";
+import { BreadcrumbItem } from "./BreadcrumbList";
+import type { TypeBreadcrumbProps } from "./BreadcrumbTypes";
 
-const BreadcrumbItem = ({
-  children,
-  href,
-  ...rest
-}: TypeBreadcrumbItemProps) => {
-  return (
-    <li>
-      <Link href={href} {...rest}>
-        {children}
-      </Link>
-    </li>
-  );
-};
+/**
+ * Breadcrumb component. Automatically routes between the Tailwind
+ * implementation (preferred) and the styled-components implementation (for
+ * consumers using system props or styled() extension).
+ */
+const Breadcrumb = (props: TypeBreadcrumbProps) => (
+  <BreadcrumbHybrid {...props} />
+);
 
-const Breadcrumb = ({
-  ariaLabel,
-  overflow,
-  children,
-  ...rest
-}: TypeBreadcrumbProps) => {
-  const listItems = React.Children.toArray(children);
-  const lastItem = listItems[listItems.length - 1];
-  return (
-    <Nav aria-label={ariaLabel} data-qa-breadcrumb={ariaLabel} {...rest}>
-      <ol>
-        {overflow && (
-          <>
-            {overflow.rootItem}
-            <li>{overflow.menu}</li>
-          </>
-        )}
-        {listItems.map((item, i) => {
-          // @ts-notes - item is a childNode which can be a string or number but `cloneElement` requires props
-          const itemElem =
-            typeof item === "object" && "props" in item ? (
-              item
-            ) : (
-              <span>item</span>
-            );
-          return React.cloneElement(itemElem, {
-            ...itemElem.props,
-            "aria-current": listItems[i] === lastItem ? "page" : undefined,
-          });
-        })}
-      </ol>
-    </Nav>
-  );
-};
-
-BreadcrumbItem.displayName = "Breadcrumb.Item";
 Breadcrumb.Item = BreadcrumbItem;
 
 export default Breadcrumb;

package/src/BreadcrumbHybrid.tsx

@@ -0,0 +1,35 @@
+/**
+ * Hybrid Breadcrumb Component
+ * Automatically chooses between Tailwind and styled-components based on props
+ */
+
+import * as React from "react";
+import Nav from "./styles"; // Styled-components version
+import { BreadcrumbTailwind } from "./BreadcrumbTailwind"; // Tailwind version
+import { BreadcrumbList } from "./BreadcrumbList";
+import { hasStyledProps } from "@sproutsocial/seeds-react-system-props";
+import type { TypeBreadcrumbProps } from "./BreadcrumbTypes";
+
+const BreadcrumbHybrid = ({
+  ariaLabel,
+  overflow,
+  children,
+  ...rest
+}: TypeBreadcrumbProps) => {
+  if (hasStyledProps(rest)) {
+    return (
+      <Nav aria-label={ariaLabel} data-qa-breadcrumb={ariaLabel} {...rest}>
+        <BreadcrumbList overflow={overflow}>{children}</BreadcrumbList>
+      </Nav>
+    );
+  }
+
+  // Use Tailwind version (preferred - better performance)
+  return (
+    <BreadcrumbTailwind ariaLabel={ariaLabel} overflow={overflow} {...rest}>
+      {children}
+    </BreadcrumbTailwind>
+  );
+};
+
+export default BreadcrumbHybrid;

package/src/BreadcrumbList.tsx

@@ -0,0 +1,63 @@
+/**
+ * Shared building blocks for Breadcrumb.
+ *
+ * BreadcrumbItem is the static `Breadcrumb.Item` subcomponent, and
+ * BreadcrumbList produces the processed <ol> subtree (overflow block +
+ * aria-current on the last item). Both the styled-components and Tailwind
+ * paths render this exact same list — only the root <nav> wrapper differs — so
+ * the child-processing logic lives here once and is never forked.
+ */
+
+import * as React from "react";
+import Link from "@sproutsocial/seeds-react-link";
+import type {
+  TypeBreadcrumbProps,
+  TypeBreadcrumbItemProps,
+} from "./BreadcrumbTypes";
+
+export const BreadcrumbItem = ({
+  children,
+  href,
+  ...rest
+}: TypeBreadcrumbItemProps) => {
+  return (
+    <li>
+      <Link href={href} {...rest}>
+        {children}
+      </Link>
+    </li>
+  );
+};
+
+BreadcrumbItem.displayName = "Breadcrumb.Item";
+
+export const BreadcrumbList = ({
+  overflow,
+  children,
+}: Pick<TypeBreadcrumbProps, "overflow" | "children">) => {
+  const listItems = React.Children.toArray(children);
+  const lastItem = listItems[listItems.length - 1];
+  return (
+    <ol>
+      {overflow && (
+        <>
+          {overflow.rootItem}
+          <li>{overflow.menu}</li>
+        </>
+      )}
+      {listItems.map((item, i) => {
+        // @ts-notes - item is a childNode which can be a string or number but `cloneElement` requires props
+        const itemElem =
+          typeof item === "object" && "props" in item ? (
+            item
+          ) : (
+            <span>item</span>
+          );
+        return React.cloneElement(itemElem, {
+          ...itemElem.props,
+          "aria-current": listItems[i] === lastItem ? "page" : undefined,
+        });
+      })}
+    </ol>
+  );
+};

package/src/BreadcrumbTailwind.tsx

@@ -0,0 +1,52 @@
+/**
+ * Tailwind CSS implementation of Breadcrumb component
+ * Uses Seeds breadcrumb CSS classes from breadcrumb.css
+ */
+
+import * as React from "react";
+import { BreadcrumbList } from "./BreadcrumbList";
+import type { TypeBreadcrumbProps } from "./BreadcrumbTypes";
+
+// Utility for merging class names properly
+function cn(
+  ...inputs: (string | undefined | null | false | Record<string, boolean>)[]
+): string {
+  const classes: string[] = [];
+
+  for (const input of inputs) {
+    if (!input) continue;
+
+    if (typeof input === "string") {
+      classes.push(input);
+    } else if (typeof input === "object") {
+      for (const [key, value] of Object.entries(input)) {
+        if (value) {
+          classes.push(key);
+        }
+      }
+    }
+  }
+
+  return classes.join(" ");
+}
+
+export const BreadcrumbTailwind = ({
+  ariaLabel,
+  overflow,
+  children,
+  className,
+  ...rest
+}: TypeBreadcrumbProps) => {
+  return (
+    <nav
+      className={cn("seeds-breadcrumb", className)}
+      aria-label={ariaLabel}
+      data-qa-breadcrumb={ariaLabel}
+      {...(rest as React.ComponentPropsWithoutRef<"nav">)}
+    >
+      <BreadcrumbList overflow={overflow}>{children}</BreadcrumbList>
+    </nav>
+  );
+};
+
+BreadcrumbTailwind.displayName = "BreadcrumbTailwind";

package/src/__tests__/breadcrumb.test.tsx

@@ -69,6 +69,44 @@ describe("Breadcrumb", () => {
     );
   });
 
+  it("renders the Tailwind path with the seeds-breadcrumb class", () => {
+    render(
+      <Breadcrumb ariaLabel="breadcrumb">
+        <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
+        <Breadcrumb.Item href="/level-two">Level Two</Breadcrumb.Item>
+      </Breadcrumb>
+    );
+    expect(
+      screen.getByDataQaLabel({ breadcrumb: "breadcrumb" })
+    ).toHaveClass("seeds-breadcrumb");
+  });
+
+  it("merges a consumer className on the Tailwind path (styled() contract)", () => {
+    render(
+      <Breadcrumb ariaLabel="breadcrumb" className="custom">
+        <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
+        <Breadcrumb.Item href="/level-two">Level Two</Breadcrumb.Item>
+      </Breadcrumb>
+    );
+    const nav = screen.getByDataQaLabel({ breadcrumb: "breadcrumb" });
+    expect(nav).toHaveClass("seeds-breadcrumb");
+    expect(nav).toHaveClass("custom");
+  });
+
+  it("routes through the styled-components path when a system prop is present", () => {
+    // mt is a system prop, which routes Breadcrumb through the styled-components path
+    render(
+      <Breadcrumb ariaLabel="breadcrumb" mt={200}>
+        <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
+        <Breadcrumb.Item href="/level-two">Level Two</Breadcrumb.Item>
+      </Breadcrumb>
+    );
+    expect(screen.getByText("Level Two")).toHaveAttribute(
+      "aria-current",
+      "page"
+    );
+  });
+
   describe("overflow", () => {
     const OverflowMenu = () => <button>overflow</button>;
 

package/src/breadcrumb.css

@@ -0,0 +1,53 @@
+/**
+ * Seeds Breadcrumb component classes
+ * Use these instead of writing out individual Tailwind utility classes.
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
+ * CSS variable definitions and dark mode support.
+ *
+ * All rules are wrapped in `@layer components` so that consumer Tailwind
+ * utilities (unlayered) win the cascade over these styles.
+ */
+
+@layer components {
+  .seeds-breadcrumb ol {
+    font-size: var(--font-size-200);
+    line-height: var(--line-height-200);
+    margin: 0;
+    font-family: var(--font-family);
+    padding: 0;
+    display: flex;
+  }
+
+  .seeds-breadcrumb li {
+    margin-right: var(--space-200);
+    display: flex;
+  }
+
+  .seeds-breadcrumb a,
+  .seeds-breadcrumb button {
+    font-size: var(--font-size-200);
+    line-height: var(--line-height-200);
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .seeds-breadcrumb ol > div + li::before {
+    content: "/";
+    margin-right: var(--space-200);
+  }
+
+  .seeds-breadcrumb li:last-child a,
+  .seeds-breadcrumb li:last-child button {
+    color: var(--color-text-body);
+    font-weight: bold;
+  }
+
+  .seeds-breadcrumb li:not(:last-child)::after {
+    content: "/";
+    color: var(--color-text-body);
+    margin-left: var(--space-200);
+  }
+}