@primer/styled-react 0.0.0-20251205154953 → 0.0.0-20251208025650

package/dist/components/ActionList.js

@@ -1,107 +1,163 @@
-import { sx } from "../sx.js";
-import styled from "styled-components";
-import { ActionList } from "@primer/react";
-import React from "react";
-import { jsx } from "react/jsx-runtime";
+import React from 'react';
+import styled from 'styled-components';
+import { ActionList as ActionList$1 } from '@primer/react';
+import sx from '../sx.js';
+import { jsx } from 'react/jsx-runtime';
 
-//#region src/components/ActionList.tsx
-const StyledActionList = styled(ActionList).withConfig({ shouldForwardProp: (prop) => prop !== "sx" }).withConfig({
-	displayName: "ActionList__StyledActionList",
-	componentId: "sc-hw2362-0"
+const StyledActionList = styled(ActionList$1).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "ActionList__StyledActionList",
+  componentId: "sc-hw2362-0"
 })(["", ""], sx);
-const ActionListImpl = /* @__PURE__ */ React.forwardRef(function ActionListImpl$1({ as, ...rest }, ref) {
-	return /* @__PURE__ */ jsx(StyledActionList, {
-		ref,
-		...rest,
-		...as ? { forwardedAs: as } : {}
-	});
+const ActionListImpl = /*#__PURE__*/React.forwardRef(function ActionListImpl({
+  as,
+  ...rest
+}, ref) {
+  return /*#__PURE__*/jsx(StyledActionList, {
+    ref: ref,
+    ...rest,
+    ...(as ? {
+      forwardedAs: as
+    } : {})
+  });
 });
-const StyledActionListLinkItem = styled(ActionList.LinkItem).withConfig({ shouldForwardProp: (prop) => prop !== "sx" }).withConfig({
-	displayName: "ActionList__StyledActionListLinkItem",
-	componentId: "sc-hw2362-1"
+const StyledActionListLinkItem = styled(ActionList$1.LinkItem).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "ActionList__StyledActionListLinkItem",
+  componentId: "sc-hw2362-1"
 })(["", ""], sx);
-const ActionListLinkItem = /* @__PURE__ */ React.forwardRef(({ children, as, ...props }, ref) => /* @__PURE__ */ jsx(StyledActionListLinkItem, {
-	ref,
-	...props,
-	...as ? { forwardedAs: as } : {},
-	children
+const ActionListLinkItem = /*#__PURE__*/React.forwardRef(({
+  children,
+  as,
+  ...props
+}, ref) => /*#__PURE__*/jsx(StyledActionListLinkItem, {
+  ref: ref,
+  ...props,
+  ...(as ? {
+    forwardedAs: as
+  } : {}),
+  children: children
 }));
-ActionListLinkItem.displayName = "ActionList.LinkItem";
-const StyledActionListTrailingAction = styled(ActionList.TrailingAction).withConfig({ shouldForwardProp: (prop) => prop !== "sx" }).withConfig({
-	displayName: "ActionList__StyledActionListTrailingAction",
-	componentId: "sc-hw2362-2"
+ActionListLinkItem.displayName = 'ActionList.LinkItem';
+const StyledActionListTrailingAction = styled(ActionList$1.TrailingAction).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "ActionList__StyledActionListTrailingAction",
+  componentId: "sc-hw2362-2"
 })(["", ""], sx);
-const ActionListTrailingAction = /* @__PURE__ */ React.forwardRef((props, ref) => {
-	const { as, ...rest } = props;
-	return /* @__PURE__ */ jsx(StyledActionListTrailingAction, {
-		...rest,
-		...as ? { forwardedAs: as } : {},
-		ref
-	});
+const ActionListTrailingAction = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    as,
+    ...rest
+  } = props;
+  return /*#__PURE__*/jsx(StyledActionListTrailingAction, {
+    ...rest,
+    ...(as ? {
+      forwardedAs: as
+    } : {}),
+    ref: ref
+  });
 });
-const StyledActionListItem = styled(ActionList.Item).withConfig({ shouldForwardProp: (prop) => prop !== "sx" }).withConfig({
-	displayName: "ActionList__StyledActionListItem",
-	componentId: "sc-hw2362-3"
+const StyledActionListItem = styled(ActionList$1.Item).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "ActionList__StyledActionListItem",
+  componentId: "sc-hw2362-3"
 })(["", ""], sx);
-const ActionListItem = /* @__PURE__ */ React.forwardRef(({ children, as, ...props }, ref) => /* @__PURE__ */ jsx(StyledActionListItem, {
-	ref,
-	...props,
-	...as ? { forwardedAs: as } : {},
-	children
+const ActionListItem = /*#__PURE__*/React.forwardRef(({
+  children,
+  as,
+  ...props
+}, ref) => /*#__PURE__*/jsx(StyledActionListItem, {
+  ref: ref,
+  ...props,
+  ...(as ? {
+    forwardedAs: as
+  } : {}),
+  children: children
 }));
-const StyledActionListGroup = styled(ActionList.Group).withConfig({ shouldForwardProp: (prop) => prop !== "sx" }).withConfig({
-	displayName: "ActionList__StyledActionListGroup",
-	componentId: "sc-hw2362-4"
+const StyledActionListGroup = styled(ActionList$1.Group).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "ActionList__StyledActionListGroup",
+  componentId: "sc-hw2362-4"
 })(["", ""], sx);
-const ActionListGroup = ({ children, as, ...props }) => /* @__PURE__ */ jsx(StyledActionListGroup, {
-	...props,
-	...as ? { forwardedAs: as } : {},
-	children
+const ActionListGroup = ({
+  children,
+  as,
+  ...props
+}) => /*#__PURE__*/jsx(StyledActionListGroup, {
+  ...props,
+  ...(as ? {
+    forwardedAs: as
+  } : {}),
+  children: children
 });
-ActionListGroup.displayName = "ActionList.Group";
-const ActionListDivider = styled(ActionList.Divider).withConfig({ shouldForwardProp: (prop) => prop !== "sx" }).withConfig({
-	displayName: "ActionList__ActionListDivider",
-	componentId: "sc-hw2362-5"
+ActionListGroup.displayName = 'ActionList.Group';
+const ActionListDivider = styled(ActionList$1.Divider).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "ActionList__ActionListDivider",
+  componentId: "sc-hw2362-5"
 })(["", ""], sx);
-const StyledActionListLeadingVisual = styled(ActionList.LeadingVisual).withConfig({ shouldForwardProp: (prop) => prop !== "sx" }).withConfig({
-	displayName: "ActionList__StyledActionListLeadingVisual",
-	componentId: "sc-hw2362-6"
+const StyledActionListLeadingVisual = styled(ActionList$1.LeadingVisual).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "ActionList__StyledActionListLeadingVisual",
+  componentId: "sc-hw2362-6"
 })(["", ""], sx);
-const ActionListLeadingVisual = ({ children, as, ...props }) => /* @__PURE__ */ jsx(StyledActionListLeadingVisual, {
-	...props,
-	...as ? { forwardedAs: as } : {},
-	children
+const ActionListLeadingVisual = ({
+  children,
+  as,
+  ...props
+}) => /*#__PURE__*/jsx(StyledActionListLeadingVisual, {
+  ...props,
+  ...(as ? {
+    forwardedAs: as
+  } : {}),
+  children: children
 });
-ActionListLeadingVisual.displayName = "ActionList.LeadingVisual";
-const StyledActionListTrailingVisual = styled(ActionList.TrailingVisual).withConfig({ shouldForwardProp: (prop) => prop !== "sx" }).withConfig({
-	displayName: "ActionList__StyledActionListTrailingVisual",
-	componentId: "sc-hw2362-7"
+ActionListLeadingVisual.displayName = 'ActionList.LeadingVisual';
+const StyledActionListTrailingVisual = styled(ActionList$1.TrailingVisual).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "ActionList__StyledActionListTrailingVisual",
+  componentId: "sc-hw2362-7"
 })(["", ""], sx);
-const ActionListTrailingVisual = ({ children, as, ...props }) => /* @__PURE__ */ jsx(StyledActionListTrailingVisual, {
-	...props,
-	...as ? { forwardedAs: as } : {},
-	children
+const ActionListTrailingVisual = ({
+  children,
+  as,
+  ...props
+}) => /*#__PURE__*/jsx(StyledActionListTrailingVisual, {
+  ...props,
+  ...(as ? {
+    forwardedAs: as
+  } : {}),
+  children: children
 });
-ActionListTrailingVisual.displayName = "ActionList.TrailingVisual";
-const ActionList$1 = Object.assign(ActionListImpl, {
-	Item: ActionListItem,
-	LinkItem: ActionListLinkItem,
-	Group: ActionListGroup,
-	GroupHeading: ActionList.GroupHeading,
-	Divider: ActionListDivider,
-	Description: ActionList.Description,
-	LeadingVisual: ActionListLeadingVisual,
-	TrailingVisual: ActionListTrailingVisual,
-	Heading: ActionList.Heading,
-	TrailingAction: ActionListTrailingAction
+ActionListTrailingVisual.displayName = 'ActionList.TrailingVisual';
+const ActionList = Object.assign(ActionListImpl, {
+  Item: ActionListItem,
+  LinkItem: ActionListLinkItem,
+  Group: ActionListGroup,
+  GroupHeading: ActionList$1.GroupHeading,
+  Divider: ActionListDivider,
+  Description: ActionList$1.Description,
+  LeadingVisual: ActionListLeadingVisual,
+  TrailingVisual: ActionListTrailingVisual,
+  Heading: ActionList$1.Heading,
+  TrailingAction: ActionListTrailingAction
 });
-ActionListItem.__SLOT__ = ActionList.Item.__SLOT__;
-ActionListLinkItem.__SLOT__ = ActionList.LinkItem.__SLOT__;
-ActionListGroup.__SLOT__ = ActionList.Group.__SLOT__;
-ActionListDivider.__SLOT__ = ActionList.Divider.__SLOT__;
-ActionListLeadingVisual.__SLOT__ = ActionList.LeadingVisual.__SLOT__;
-ActionListTrailingVisual.__SLOT__ = ActionList.TrailingVisual.__SLOT__;
-ActionListTrailingAction.__SLOT__ = ActionList.TrailingAction.__SLOT__;
 
-//#endregion
-export { ActionList$1 as ActionList };
+// Assign slot markers after component definitions
+ActionListItem.__SLOT__ = ActionList$1.Item.__SLOT__;
+ActionListLinkItem.__SLOT__ = ActionList$1.LinkItem.__SLOT__;
+ActionListGroup.__SLOT__ = ActionList$1.Group.__SLOT__;
+ActionListDivider.__SLOT__ = ActionList$1.Divider.__SLOT__;
+ActionListLeadingVisual.__SLOT__ = ActionList$1.LeadingVisual.__SLOT__;
+ActionListTrailingVisual.__SLOT__ = ActionList$1.TrailingVisual.__SLOT__;
+ActionListTrailingAction.__SLOT__ = ActionList$1.TrailingAction.__SLOT__;
+
+export { ActionList };

package/dist/components/ActionMenu.js

@@ -1,19 +1,19 @@
-import { sx } from "../sx.js";
-import styled from "styled-components";
-import { ActionMenu } from "@primer/react";
+import { ActionMenu as ActionMenu$1 } from '@primer/react';
+import sx from '../sx.js';
+import styled from 'styled-components';
 
-//#region src/components/ActionMenu.tsx
-const ActionMenuOverlay = styled(ActionMenu.Overlay).withConfig({ shouldForwardProp: (prop) => prop !== "sx" }).withConfig({
-	displayName: "ActionMenu__ActionMenuOverlay",
-	componentId: "sc-w5s60e-0"
+const ActionMenuOverlay = styled(ActionMenu$1.Overlay).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "ActionMenu__ActionMenuOverlay",
+  componentId: "sc-w5s60e-0"
 })(["", ""], sx);
-const ActionMenu$1 = Object.assign(ActionMenu, {
-	Button: ActionMenu.Button,
-	Anchor: ActionMenu.Anchor,
-	Overlay: ActionMenuOverlay,
-	Divider: ActionMenu.Divider
+const ActionMenu = Object.assign(ActionMenu$1, {
+  Button: ActionMenu$1.Button,
+  Anchor: ActionMenu$1.Anchor,
+  Overlay: ActionMenuOverlay,
+  Divider: ActionMenu$1.Divider
 });
-ActionMenuOverlay.__SLOT__ = ActionMenu.Overlay.__SLOT__;
+ActionMenuOverlay.__SLOT__ = ActionMenu$1.Overlay.__SLOT__;
 
-//#endregion
-export { ActionMenu$1 as ActionMenu };
+export { ActionMenu };

package/dist/components/Autocomplete.js

@@ -1,23 +1,25 @@
-import { sx } from "../sx.js";
-import styled from "styled-components";
-import { Autocomplete } from "@primer/react";
+import { Autocomplete as Autocomplete$1 } from '@primer/react';
+import sx from '../sx.js';
+import styled from 'styled-components';
 
-//#region src/components/Autocomplete.tsx
-const AutocompleteOverlay = styled(Autocomplete.Overlay).withConfig({ shouldForwardProp: (prop) => prop !== "sx" }).withConfig({
-	displayName: "Autocomplete__AutocompleteOverlay",
-	componentId: "sc-j8ax2e-0"
+const AutocompleteOverlay = styled(Autocomplete$1.Overlay).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "Autocomplete__AutocompleteOverlay",
+  componentId: "sc-j8ax2e-0"
 })(["", ""], sx);
-const AutocompleteInput = styled(Autocomplete.Input).withConfig({ shouldForwardProp: (prop) => prop !== "sx" }).withConfig({
-	displayName: "Autocomplete__AutocompleteInput",
-	componentId: "sc-j8ax2e-1"
+const AutocompleteInput = styled(Autocomplete$1.Input).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "Autocomplete__AutocompleteInput",
+  componentId: "sc-j8ax2e-1"
 })(["", ""], sx);
-const Autocomplete$1 = Object.assign(Autocomplete, {
-	Context: Autocomplete.Context,
-	Input: AutocompleteInput,
-	Menu: Autocomplete.Menu,
-	Overlay: AutocompleteOverlay
+const Autocomplete = Object.assign(Autocomplete$1, {
+  Context: Autocomplete$1.Context,
+  Input: AutocompleteInput,
+  Menu: Autocomplete$1.Menu,
+  Overlay: AutocompleteOverlay
 });
-AutocompleteOverlay.__SLOT__ = Autocomplete.Overlay.__SLOT__;
+AutocompleteOverlay.__SLOT__ = Autocomplete$1.Overlay.__SLOT__;
 
-//#endregion
-export { Autocomplete$1 as Autocomplete };
+export { Autocomplete };

package/dist/components/Avatar.js

@@ -1,16 +1,14 @@
-import { Box } from "./Box.js";
-import { Avatar } from "@primer/react";
-import { forwardRef } from "react";
-import { jsx } from "react/jsx-runtime";
+import { Avatar as Avatar$1 } from '@primer/react';
+import { forwardRef } from 'react';
+import Box from './Box.js';
+import { jsx } from 'react/jsx-runtime';
 
-//#region src/components/Avatar.tsx
-const Avatar$1 = /* @__PURE__ */ forwardRef(function Avatar$2(props, ref) {
-	return /* @__PURE__ */ jsx(Box, {
-		as: Avatar,
-		ref,
-		...props
-	});
+const Avatar = /*#__PURE__*/forwardRef(function Avatar(props, ref) {
+  return /*#__PURE__*/jsx(Box, {
+    as: Avatar$1,
+    ref: ref,
+    ...props
+  });
 });
 
-//#endregion
-export { Avatar$1 as Avatar };
+export { Avatar };

package/dist/components/BaseStyles.js

@@ -1,32 +1,51 @@
-import { useTheme } from "./ThemeProvider.js";
-import { createGlobalStyle } from "styled-components";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { clsx } from "clsx";
-import "focus-visible";
+import { clsx } from 'clsx';
+import { useTheme } from './ThemeProvider.js';
+import 'focus-visible';
+import { createGlobalStyle } from 'styled-components';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
-//#region src/components/BaseStyles.tsx
 const GlobalStyle = createGlobalStyle(["*{box-sizing:border-box;}body{margin:0;}table{border-collapse:collapse;}[data-color-mode='light'] input{color-scheme:light;}[data-color-mode='dark'] input{color-scheme:dark;}@media (prefers-color-scheme:light){[data-color-mode='auto'][data-light-theme*='light']{color-scheme:light;}}@media (prefers-color-scheme:dark){[data-color-mode='auto'][data-dark-theme*='dark']{color-scheme:dark;}}[role='button']:focus:not(:focus-visible):not(:global(.focus-visible)),[role='tabpanel'][tabindex='0']:focus:not(:focus-visible):not(:global(.focus-visible)),button:focus:not(:focus-visible):not(:global(.focus-visible)),summary:focus:not(:focus-visible):not(:global(.focus-visible)),a:focus:not(:focus-visible):not(:global(.focus-visible)){outline:none;box-shadow:none;}[tabindex='0']:focus:not(:focus-visible):not(:global(.focus-visible)),details-dialog:focus:not(:focus-visible):not(:global(.focus-visible)){outline:none;}.BaseStyles{font-family:var(--BaseStyles-fontFamily,var(--fontStack-system));line-height:var(--BaseStyles-lineHeight,1.5);color:var(--BaseStyles-fgColor,var(--fgColor-default));&:has([data-color-mode='light']){input &{color-scheme:light;}}&:has([data-color-mode='dark']){input &{color-scheme:dark;}}:where(a:not([class*='prc-']):not([class*='PRC-']):not([class*='Primer_Brand__'])){color:var(--fgColor-accent,var(--color-accent-fg));text-decoration:none;&:hover{text-decoration:underline;}}}"]);
-function BaseStyles({ children, color, fontFamily, lineHeight, className, as: Component = "div", style, ...rest }) {
-	const { colorMode, colorScheme, dayScheme, nightScheme } = useTheme();
-	const baseStyles = {
-		["--BaseStyles-fgColor"]: color,
-		["--BaseStyles-fontFamily"]: fontFamily,
-		["--BaseStyles-lineHeight"]: lineHeight
-	};
-	return /* @__PURE__ */ jsxs(Component, {
-		className: clsx("BaseStyles", className),
-		"data-portal-root": true,
-		"data-color-mode": colorMode === "auto" ? "auto" : colorScheme?.includes("dark") ? "dark" : "light",
-		"data-light-theme": dayScheme,
-		"data-dark-theme": nightScheme,
-		style: {
-			...baseStyles,
-			...style
-		},
-		...rest,
-		children: [/* @__PURE__ */ jsx(GlobalStyle, { colorScheme: colorScheme?.includes("dark") ? "dark" : "light" }), children]
-	});
+function BaseStyles({
+  children,
+  color,
+  fontFamily,
+  lineHeight,
+  className,
+  as: Component = 'div',
+  style,
+  ...rest
+}) {
+  const {
+    colorMode,
+    colorScheme,
+    dayScheme,
+    nightScheme
+  } = useTheme();
+  const baseStyles = {
+    ['--BaseStyles-fgColor']: color,
+    ['--BaseStyles-fontFamily']: fontFamily,
+    ['--BaseStyles-lineHeight']: lineHeight
+  };
+  return /*#__PURE__*/jsxs(Component, {
+    className: clsx('BaseStyles', className),
+    "data-portal-root": true
+    /**
+     * We need to map valid primer/react color modes onto valid color modes for primer/primitives
+     * valid color modes for primer/primitives: auto | light | dark
+     * valid color modes for primer/primer: auto | day | night | light | dark
+     */,
+    "data-color-mode": colorMode === 'auto' ? 'auto' : colorScheme?.includes('dark') ? 'dark' : 'light',
+    "data-light-theme": dayScheme,
+    "data-dark-theme": nightScheme,
+    style: {
+      ...baseStyles,
+      ...style
+    },
+    ...rest,
+    children: [/*#__PURE__*/jsx(GlobalStyle, {
+      colorScheme: colorScheme?.includes('dark') ? 'dark' : 'light'
+    }), children]
+  });
 }
 
-//#endregion
-export { BaseStyles };
+export { BaseStyles };

package/dist/components/Box.js

@@ -1,23 +1,15 @@
-import { sx } from "../sx.js";
-import styled from "styled-components";
-import { background, border, color, flexbox, grid, layout, position, shadow, space, typography } from "styled-system";
+import styled from 'styled-components';
+import { space, color, typography, layout, flexbox, grid, background, border, position, shadow } from 'styled-system';
+import sx from '../sx.js';
 
-//#region src/components/Box.tsx
 /**
-* @deprecated The Box component is deprecated. Replace with a `div` or
-* appropriate HTML element instead, with CSS modules for styling.
-* @see https://github.com/primer/react/blob/main/contributor-docs/migration-from-box.md
-*/
+ * @deprecated The Box component is deprecated. Replace with a `div` or
+ * appropriate HTML element instead, with CSS modules for styling.
+ * @see https://github.com/primer/react/blob/main/contributor-docs/migration-from-box.md
+ */
 const Box = styled.div.withConfig({
-	displayName: "Box",
-	componentId: "sc-62in7e-0"
+  displayName: "Box",
+  componentId: "sc-62in7e-0"
 })(space, color, typography, layout, flexbox, grid, background, border, position, shadow, sx);
-/**
-* @deprecated The Box component is deprecated. Replace with a `div` or
-* appropriate HTML element instead, with CSS modules for styling.
-* @see https://github.com/primer/react/blob/main/contributor-docs/migration-from-box.md
-*/
-var Box_default = Box;
 
-//#endregion
-export { Box, Box_default as default };
+export { Box, Box as default };

package/dist/components/Breadcrumbs.js

@@ -1,28 +1,38 @@
-import { sx } from "../sx.js";
-import styled from "styled-components";
-import { Breadcrumbs } from "@primer/react";
-import { jsx } from "react/jsx-runtime";
+import { Breadcrumbs as Breadcrumbs$1 } from '@primer/react';
+import sx from '../sx.js';
+import styled from 'styled-components';
+import { jsx } from 'react/jsx-runtime';
 
-//#region src/components/Breadcrumbs.tsx
-const BreadcrumbsImpl = styled(Breadcrumbs).withConfig({ shouldForwardProp: (prop) => prop !== "sx" }).withConfig({
-	displayName: "Breadcrumbs__BreadcrumbsImpl",
-	componentId: "sc-1qj8pw-0"
+const BreadcrumbsImpl = styled(Breadcrumbs$1).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "Breadcrumbs__BreadcrumbsImpl",
+  componentId: "sc-1qj8pw-0"
 })(["", ""], sx);
-const StyledBreadcrumbsItem = styled(Breadcrumbs.Item).withConfig({ shouldForwardProp: (prop) => prop !== "sx" }).withConfig({
-	displayName: "Breadcrumbs__StyledBreadcrumbsItem",
-	componentId: "sc-1qj8pw-1"
+const StyledBreadcrumbsItem = styled(Breadcrumbs$1.Item).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "Breadcrumbs__StyledBreadcrumbsItem",
+  componentId: "sc-1qj8pw-1"
 })(["", ""], sx);
-function BreadcrumbsItem({ as, ...props }) {
-	return /* @__PURE__ */ jsx(StyledBreadcrumbsItem, {
-		...props,
-		...as ? { forwardedAs: as } : {}
-	});
+function BreadcrumbsItem({
+  as,
+  ...props
+}) {
+  return /*#__PURE__*/jsx(StyledBreadcrumbsItem, {
+    ...props,
+    ...(as ? {
+      forwardedAs: as
+    } : {})
+  });
 }
-const Breadcrumbs$1 = Object.assign(BreadcrumbsImpl, { Item: BreadcrumbsItem });
+const Breadcrumbs = Object.assign(BreadcrumbsImpl, {
+  Item: BreadcrumbsItem
+});
+
 /**
-* @deprecated Use the `Breadcrumbs` component instead (i.e. `<Breadcrumb>` → `<Breadcrumbs>`)
-*/
-const Breadcrumb = Breadcrumbs$1;
+ * @deprecated Use the `Breadcrumbs` component instead (i.e. `<Breadcrumb>` → `<Breadcrumbs>`)
+ */
+const Breadcrumb = Breadcrumbs;
 
-//#endregion
-export { Breadcrumb, Breadcrumbs$1 as Breadcrumbs };
+export { Breadcrumb, Breadcrumbs };