@primer/styled-react 0.0.0-20251202220556 → 0.0.0-20251203021724

package/dist/components/ActionList.js

@@ -0,0 +1,163 @@
+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';
+
+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({
+  as,
+  ...rest
+}, ref) {
+  return /*#__PURE__*/jsx(StyledActionList, {
+    ref: ref,
+    ...rest,
+    ...(as ? {
+      forwardedAs: as
+    } : {})
+  });
+});
+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: ref,
+  ...props,
+  ...(as ? {
+    forwardedAs: as
+  } : {}),
+  children: children
+}));
+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: ref
+  });
+});
+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: ref,
+  ...props,
+  ...(as ? {
+    forwardedAs: as
+  } : {}),
+  children: children
+}));
+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: children
+});
+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$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: children
+});
+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: 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
+});
+
+// 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

@@ -0,0 +1,19 @@
+import { ActionMenu as ActionMenu$1 } from '@primer/react';
+import sx from '../sx.js';
+import styled from 'styled-components';
+
+const ActionMenuOverlay = styled(ActionMenu$1.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
+});
+ActionMenuOverlay.__SLOT__ = ActionMenu$1.Overlay.__SLOT__;
+
+export { ActionMenu };

package/dist/components/Autocomplete.js

@@ -0,0 +1,25 @@
+import { Autocomplete as Autocomplete$1 } from '@primer/react';
+import sx from '../sx.js';
+import styled from 'styled-components';
+
+const AutocompleteOverlay = styled(Autocomplete$1.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"
+})(["", ""], sx);
+const Autocomplete = Object.assign(Autocomplete$1, {
+  Context: Autocomplete$1.Context,
+  Input: AutocompleteInput,
+  Menu: Autocomplete$1.Menu,
+  Overlay: AutocompleteOverlay
+});
+AutocompleteOverlay.__SLOT__ = Autocomplete$1.Overlay.__SLOT__;
+
+export { Autocomplete };

package/dist/components/Avatar.js

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

package/dist/{packages/styled-react/src/components → components}/BaseStyles.js

@@ -1,33 +1,51 @@
-import { useTheme } from "./ThemeProvider.js";
-import { clsx } from "../../../../node_modules/clsx/dist/clsx.js";
-import { require_focus_visible } from "../../../../node_modules/focus-visible/dist/focus-visible.js";
-import { createGlobalStyle } from "styled-components";
-import { jsx, jsxs } from "react/jsx-runtime";
+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
-var import_focus_visible = require_focus_visible();
 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

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

package/dist/components/Breadcrumbs.js

@@ -0,0 +1,38 @@
+import { Breadcrumbs as Breadcrumbs$1 } from '@primer/react';
+import sx from '../sx.js';
+import styled from 'styled-components';
+import { jsx } from 'react/jsx-runtime';
+
+const BreadcrumbsImpl = styled(Breadcrumbs$1).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"
+})(["", ""], sx);
+function BreadcrumbsItem({
+  as,
+  ...props
+}) {
+  return /*#__PURE__*/jsx(StyledBreadcrumbsItem, {
+    ...props,
+    ...(as ? {
+      forwardedAs: as
+    } : {})
+  });
+}
+const Breadcrumbs = Object.assign(BreadcrumbsImpl, {
+  Item: BreadcrumbsItem
+});
+
+/**
+ * @deprecated Use the `Breadcrumbs` component instead (i.e. `<Breadcrumb>` → `<Breadcrumbs>`)
+ */
+const Breadcrumb = Breadcrumbs;
+
+export { Breadcrumb, Breadcrumbs };

package/dist/components/Button.js

@@ -0,0 +1,112 @@
+import { Button } from '@primer/react';
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import sx from '../sx.js';
+import { jsx } from 'react/jsx-runtime';
+
+const StyledButtonComponent = styled(Button).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "Button__StyledButtonComponent",
+  componentId: "sc-vqy3e4-0"
+})(["", ""], sx);
+const ButtonComponent = /*#__PURE__*/forwardRef(({
+  as,
+  sx,
+  style: propStyle,
+  ...props
+}, ref) => {
+  const {
+    block,
+    size = 'medium',
+    leadingVisual,
+    trailingVisual,
+    trailingAction
+  } = props;
+  let sxStyles = {};
+  const style = {
+    ...(propStyle || {})
+  };
+  if (sx !== null && Object.keys(sx || {}).length > 0) {
+    sxStyles = generateCustomSxProp({
+      block,
+      size,
+      leadingVisual,
+      trailingVisual,
+      trailingAction
+    }, sx);
+    const {
+      color
+    } = sx;
+    if (color) style['--button-color'] = color;
+  }
+  return /*#__PURE__*/jsx(StyledButtonComponent, {
+    style: style,
+    sx: sxStyles,
+    ref: ref,
+    ...props,
+    ...(as ? {
+      forwardedAs: as
+    } : {})
+  });
+});
+
+// This function is used to generate a custom cssSelector for the sxProp
+
+// The usual sx prop can like this:
+// sx={{
+//   [`@media (max-width: 768px)`]: {
+//     '& > ul': {
+//       backgroundColor: 'deeppink',
+//     },
+//     '&:hover': {
+//       backgroundColor: 'yellow',
+//     },
+//   },
+//  '&:hover': {
+//     backgroundColor: 'yellow',
+//   },
+//  '&': {
+//  width : 320px
+// }
+// }}
+//*
+/* What we want for Button styles is this:
+sx={{
+//   [`@media (max-width: 768px)`]: {
+//     '&[data-attribute="something"] > ul': {
+//       backgroundColor: 'deeppink',
+//     },
+//     '&[data-attribute="something"]:hover': {
+//       backgroundColor: 'yellow',
+//     },
+//   },
+//  '&[data-attribute="something"]:hover': {
+//     backgroundColor: 'yellow',
+//   },
+//  '&[data-attribute="something"]': {
+//     width : 320px
+//  }
+// }}
+
+// We need to make sure we append the customCSSSelector to the original class selector. i.e & - > &[data-attribute="Icon"][data-size="small"]
+*/
+function generateCustomSxProp(props, providedSx) {
+  // Possible data attributes: data-size, data-block, data-no-visuals
+  const size = `[data-size="${props.size}"]`;
+  const block = props.block ? `[data-block="block"]` : '';
+  const noVisuals = props.leadingVisual || props.trailingVisual || props.trailingAction ? '' : '[data-no-visuals]';
+
+  // this is a custom selector. We need to make sure we add the data attributes to the base css class (& -> &[data-attributename="value"]])
+  const cssSelector = `&${size}${block}${noVisuals}`; // &[data-size="small"][data-block="block"][data-no-visuals]
+
+  const customSxProp = {};
+  if (!providedSx) return customSxProp;else {
+    customSxProp[cssSelector] = providedSx;
+    return customSxProp;
+  }
+}
+ButtonComponent.displayName = 'Button';
+ButtonComponent.__SLOT__ = Button.__SLOT__;
+
+export { ButtonComponent, generateCustomSxProp };

package/dist/components/Checkbox.js

@@ -0,0 +1,15 @@
+import { Checkbox as Checkbox$1 } from '@primer/react';
+import Box from './Box.js';
+import { forwardRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+const Checkbox = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
+  return /*#__PURE__*/jsx(Box, {
+    as: Checkbox$1,
+    ref: ref,
+    ...props
+  });
+});
+Checkbox.__SLOT__ = Checkbox$1.__SLOT__;
+
+export { Checkbox };

package/dist/components/CheckboxGroup.js

@@ -0,0 +1,43 @@
+import { CheckboxGroup as CheckboxGroup$1 } from '@primer/react';
+import 'react';
+import Box from './Box.js';
+import { jsx } from 'react/jsx-runtime';
+
+const CheckboxGroupImpl = props => {
+  return /*#__PURE__*/jsx(Box, {
+    as: CheckboxGroup$1,
+    ...props
+  });
+};
+
+// Define local types based on the internal component props
+
+const CheckboxOrRadioGroupLabel = props => {
+  return /*#__PURE__*/jsx(Box, {
+    as: CheckboxGroup$1.Label,
+    ...props
+  });
+};
+const CheckboxOrRadioGroupCaption = props => {
+  return /*#__PURE__*/jsx(Box, {
+    as: CheckboxGroup$1.Caption,
+    ...props
+  });
+};
+const CheckboxOrRadioGroupValidation = props => {
+  return /*#__PURE__*/jsx(Box, {
+    as: CheckboxGroup$1.Validation,
+    ...props
+  });
+};
+const CheckboxGroup = Object.assign(CheckboxGroupImpl, {
+  Label: CheckboxOrRadioGroupLabel,
+  Caption: CheckboxOrRadioGroupCaption,
+  Validation: CheckboxOrRadioGroupValidation
+});
+CheckboxGroupImpl.__SLOT__ = CheckboxGroup$1.__SLOT__;
+CheckboxOrRadioGroupLabel.__SLOT__ = CheckboxGroup$1.Label.__SLOT__;
+CheckboxOrRadioGroupCaption.__SLOT__ = CheckboxGroup$1.Caption.__SLOT__;
+CheckboxOrRadioGroupValidation.__SLOT__ = CheckboxGroup$1.Validation.__SLOT__;
+
+export { CheckboxGroup };

package/dist/components/CircleBadge.js

@@ -0,0 +1,12 @@
+import { CircleBadge as CircleBadge$1 } from '@primer/react';
+import styled from 'styled-components';
+import sx from '../sx.js';
+
+const CircleBadge = styled(CircleBadge$1).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "CircleBadge",
+  componentId: "sc-1u7lp3v-0"
+})(["", ""], sx);
+
+export { CircleBadge };

package/dist/components/CounterLabel.js

@@ -0,0 +1,14 @@
+import { CounterLabel as CounterLabel$1 } from '@primer/react';
+import Box from './Box.js';
+import { forwardRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+const CounterLabel = /*#__PURE__*/forwardRef(function CounterLabel(props, ref) {
+  return /*#__PURE__*/jsx(Box, {
+    as: CounterLabel$1,
+    ref: ref,
+    ...props
+  });
+});
+
+export { CounterLabel };

package/dist/components/DataTable.js

@@ -0,0 +1,32 @@
+import { Table as Table$1 } from '@primer/react/experimental';
+import sx from '../sx.js';
+import styled from 'styled-components';
+import { jsx } from 'react/jsx-runtime';
+
+const {
+  Container: PrimerDataTableContainer,
+  ...rest
+} = Table$1;
+const StyleDataTableContainer = styled(PrimerDataTableContainer).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "DataTable__StyleDataTableContainer",
+  componentId: "sc-qy1ey2-0"
+})(["", ""], sx);
+function DataTableContainer({
+  as,
+  ...rest
+}) {
+  return /*#__PURE__*/jsx(StyleDataTableContainer, {
+    ...rest,
+    ...(as ? {
+      forwardedAs: as
+    } : {})
+  });
+}
+const Table = Object.assign(Table$1, {
+  Container: DataTableContainer,
+  ...rest
+});
+
+export { Table };

package/dist/components/Dialog.js

@@ -0,0 +1,90 @@
+import { Dialog as Dialog$1 } from '@primer/react';
+import sx from '../sx.js';
+import styled from 'styled-components';
+import { forwardRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+const StyledDialog = styled(Dialog$1).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "Dialog__StyledDialog",
+  componentId: "sc-19zph8h-0"
+})(["", ""], sx);
+const DialogImpl = /*#__PURE__*/forwardRef(function Dialog({
+  as,
+  ...props
+}, ref) {
+  return /*#__PURE__*/jsx(StyledDialog, {
+    ref: ref,
+    ...(as ? {
+      forwardedAs: as
+    } : {}),
+    ...props
+  });
+});
+const StyledDialogHeader = styled(Dialog$1.Header).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "Dialog__StyledDialogHeader",
+  componentId: "sc-19zph8h-1"
+})(["", ""], sx);
+const DialogHeader = /*#__PURE__*/forwardRef(function DialogHeader({
+  as,
+  ...props
+}, ref) {
+  return /*#__PURE__*/jsx(StyledDialogHeader, {
+    ref: ref,
+    ...(as ? {
+      forwardedAs: as
+    } : {}),
+    ...props
+  });
+});
+const StyledDialogBody = styled(Dialog$1.Body).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "Dialog__StyledDialogBody",
+  componentId: "sc-19zph8h-2"
+})(["", ""], sx);
+const DialogBody = /*#__PURE__*/forwardRef(function DialogBody({
+  as,
+  ...props
+}, ref) {
+  return /*#__PURE__*/jsx(StyledDialogBody, {
+    ref: ref,
+    ...(as ? {
+      forwardedAs: as
+    } : {}),
+    ...props
+  });
+});
+const StyledDialogFooter = styled(Dialog$1.Footer).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "Dialog__StyledDialogFooter",
+  componentId: "sc-19zph8h-3"
+})(["", ""], sx);
+const DialogFooter = /*#__PURE__*/forwardRef(function DialogFooter({
+  as,
+  ...props
+}, ref) {
+  return /*#__PURE__*/jsx(StyledDialogFooter, {
+    ref: ref,
+    ...(as ? {
+      forwardedAs: as
+    } : {}),
+    ...props
+  });
+});
+DialogHeader.__SLOT__ = Dialog$1.Header.__SLOT__;
+DialogBody.__SLOT__ = Dialog$1.Body.__SLOT__;
+DialogFooter.__SLOT__ = Dialog$1.Footer.__SLOT__;
+const Dialog = Object.assign(DialogImpl, {
+  __SLOT__: Dialog$1['__SLOT__'],
+  Buttons: Dialog$1.Buttons,
+  Header: DialogHeader,
+  Body: DialogBody,
+  Footer: DialogFooter
+});
+
+export { Dialog };