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

package/dist/components/ActionList.js

@@ -1,163 +1,107 @@
-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';
+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";
 
-const StyledActionList = styled(ActionList$1).withConfig({
-  shouldForwardProp: prop => prop !== 'sx'
-}).withConfig({
-  displayName: "ActionList__StyledActionList",
-  componentId: "sc-hw2362-0"
+//#region src/components/ActionList.tsx
+const StyledActionList = styled(ActionList).withConfig({ shouldForwardProp: (prop) => prop !== "sx" }).withConfig({
+	displayName: "ActionList__StyledActionList",
+	componentId: "sc-hw2362-0"
 })(["", ""], sx);
-const ActionListImpl = /*#__PURE__*/React.forwardRef(function ActionListImpl({
-  as,
-  ...rest
-}, ref) {
-  return /*#__PURE__*/jsx(StyledActionList, {
-    ref: ref,
-    ...rest,
-    ...(as ? {
-      forwardedAs: as
-    } : {})
-  });
+const ActionListImpl = /* @__PURE__ */ React.forwardRef(function ActionListImpl$1({ as, ...rest }, ref) {
+	return /* @__PURE__ */ jsx(StyledActionList, {
+		ref,
+		...rest,
+		...as ? { forwardedAs: as } : {}
+	});
 });
-const StyledActionListLinkItem = styled(ActionList$1.LinkItem).withConfig({
-  shouldForwardProp: prop => prop !== 'sx'
-}).withConfig({
-  displayName: "ActionList__StyledActionListLinkItem",
-  componentId: "sc-hw2362-1"
+const StyledActionListLinkItem = styled(ActionList.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: ref,
-  ...props,
-  ...(as ? {
-    forwardedAs: as
-  } : {}),
-  children: children
+const ActionListLinkItem = /* @__PURE__ */ React.forwardRef(({ children, as, ...props }, ref) => /* @__PURE__ */ jsx(StyledActionListLinkItem, {
+	ref,
+	...props,
+	...as ? { forwardedAs: as } : {},
+	children
 }));
-ActionListLinkItem.displayName = 'ActionList.LinkItem';
-const StyledActionListTrailingAction = styled(ActionList$1.TrailingAction).withConfig({
-  shouldForwardProp: prop => prop !== 'sx'
-}).withConfig({
-  displayName: "ActionList__StyledActionListTrailingAction",
-  componentId: "sc-hw2362-2"
+ActionListLinkItem.displayName = "ActionList.LinkItem";
+const StyledActionListTrailingAction = styled(ActionList.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: ref
-  });
+const ActionListTrailingAction = /* @__PURE__ */ React.forwardRef((props, ref) => {
+	const { as, ...rest } = props;
+	return /* @__PURE__ */ jsx(StyledActionListTrailingAction, {
+		...rest,
+		...as ? { forwardedAs: as } : {},
+		ref
+	});
 });
-const StyledActionListItem = styled(ActionList$1.Item).withConfig({
-  shouldForwardProp: prop => prop !== 'sx'
-}).withConfig({
-  displayName: "ActionList__StyledActionListItem",
-  componentId: "sc-hw2362-3"
+const StyledActionListItem = styled(ActionList.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: ref,
-  ...props,
-  ...(as ? {
-    forwardedAs: as
-  } : {}),
-  children: children
+const ActionListItem = /* @__PURE__ */ React.forwardRef(({ children, as, ...props }, ref) => /* @__PURE__ */ jsx(StyledActionListItem, {
+	ref,
+	...props,
+	...as ? { forwardedAs: as } : {},
+	children
 }));
-const StyledActionListGroup = styled(ActionList$1.Group).withConfig({
-  shouldForwardProp: prop => prop !== 'sx'
-}).withConfig({
-  displayName: "ActionList__StyledActionListGroup",
-  componentId: "sc-hw2362-4"
+const StyledActionListGroup = styled(ActionList.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: children
+const ActionListGroup = ({ children, as, ...props }) => /* @__PURE__ */ jsx(StyledActionListGroup, {
+	...props,
+	...as ? { forwardedAs: as } : {},
+	children
 });
-ActionListGroup.displayName = 'ActionList.Group';
-const ActionListDivider = styled(ActionList$1.Divider).withConfig({
-  shouldForwardProp: prop => prop !== 'sx'
-}).withConfig({
-  displayName: "ActionList__ActionListDivider",
-  componentId: "sc-hw2362-5"
+ActionListGroup.displayName = "ActionList.Group";
+const ActionListDivider = styled(ActionList.Divider).withConfig({ shouldForwardProp: (prop) => prop !== "sx" }).withConfig({
+	displayName: "ActionList__ActionListDivider",
+	componentId: "sc-hw2362-5"
 })(["", ""], sx);
-const StyledActionListLeadingVisual = styled(ActionList$1.LeadingVisual).withConfig({
-  shouldForwardProp: prop => prop !== 'sx'
-}).withConfig({
-  displayName: "ActionList__StyledActionListLeadingVisual",
-  componentId: "sc-hw2362-6"
+const StyledActionListLeadingVisual = styled(ActionList.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: children
+const ActionListLeadingVisual = ({ children, as, ...props }) => /* @__PURE__ */ jsx(StyledActionListLeadingVisual, {
+	...props,
+	...as ? { forwardedAs: as } : {},
+	children
 });
-ActionListLeadingVisual.displayName = 'ActionList.LeadingVisual';
-const StyledActionListTrailingVisual = styled(ActionList$1.TrailingVisual).withConfig({
-  shouldForwardProp: prop => prop !== 'sx'
-}).withConfig({
-  displayName: "ActionList__StyledActionListTrailingVisual",
-  componentId: "sc-hw2362-7"
+ActionListLeadingVisual.displayName = "ActionList.LeadingVisual";
+const StyledActionListTrailingVisual = styled(ActionList.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: children
+const ActionListTrailingVisual = ({ children, as, ...props }) => /* @__PURE__ */ jsx(StyledActionListTrailingVisual, {
+	...props,
+	...as ? { forwardedAs: as } : {},
+	children
 });
-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
+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
 });
+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__;
 
-// 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 };
+//#endregion
+export { ActionList$1 as ActionList };

package/dist/components/ActionMenu.js

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

package/dist/components/Autocomplete.js

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

package/dist/components/Avatar.js

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

package/dist/components/BaseStyles.js

@@ -1,51 +1,32 @@
-import { clsx } from 'clsx';
-import { useTheme } from './ThemeProvider.js';
-import 'focus-visible';
-import { createGlobalStyle } from 'styled-components';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { useTheme } from "./ThemeProvider.js";
+import { createGlobalStyle } from "styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import "focus-visible";
 
+//#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
-    /**
-     * 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]
-  });
+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]
+	});
 }
 
-export { BaseStyles };
+//#endregion
+export { BaseStyles };

package/dist/components/Box.js

@@ -1,15 +1,23 @@
-import styled from 'styled-components';
-import { space, color, typography, layout, flexbox, grid, background, border, position, shadow } from 'styled-system';
-import sx from '../sx.js';
+import { sx } from "../sx.js";
+import styled from "styled-components";
+import { background, border, color, flexbox, grid, layout, position, shadow, space, typography } from "styled-system";
 
+//#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;
 
-export { Box, Box as default };
+//#endregion
+export { Box, Box_default as default };

package/dist/components/Breadcrumbs.js

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