@primer/styled-react 0.0.0-20251210204724 → 0.0.0-20260203041651

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/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 };

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 };

package/dist/components/Button.js

@@ -1,48 +1,112 @@
-import { sx } from "../sx.js";
-import styled from "styled-components";
-import { Button } from "@primer/react";
-import { forwardRef } from "react";
-import { jsx } from "react/jsx-runtime";
+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';
 
-//#region src/components/Button.tsx
-const StyledButtonComponent = styled(Button).withConfig({ shouldForwardProp: (prop) => prop !== "sx" }).withConfig({
-	displayName: "Button__StyledButtonComponent",
-	componentId: "sc-vqy3e4-0"
+const StyledButtonComponent = styled(Button).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "Button__StyledButtonComponent",
+  componentId: "sc-vqy3e4-0"
 })(["", ""], sx);
-const ButtonComponent = /* @__PURE__ */ forwardRef(({ as, sx: sx$1, style: propStyle, ...props }, ref) => {
-	const { block, size = "medium", leadingVisual, trailingVisual, trailingAction } = props;
-	let sxStyles = {};
-	const style = { ...propStyle || {} };
-	if (sx$1 !== null && Object.keys(sx$1 || {}).length > 0) {
-		sxStyles = generateCustomSxProp({
-			block,
-			size,
-			leadingVisual,
-			trailingVisual,
-			trailingAction
-		}, sx$1);
-		const { color } = sx$1;
-		if (color) style["--button-color"] = color;
-	}
-	return /* @__PURE__ */ jsx(StyledButtonComponent, {
-		style,
-		sx: sxStyles,
-		ref,
-		...props,
-		...as ? { forwardedAs: as } : {}
-	});
+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) {
-	const cssSelector = `&${`[data-size="${props.size}"]`}${props.block ? `[data-block="block"]` : ""}${props.leadingVisual || props.trailingVisual || props.trailingAction ? "" : "[data-no-visuals]"}`;
-	const customSxProp = {};
-	if (!providedSx) return customSxProp;
-	else {
-		customSxProp[cssSelector] = providedSx;
-		return customSxProp;
-	}
+  // 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.displayName = 'Button';
 ButtonComponent.__SLOT__ = Button.__SLOT__;
 
-//#endregion
-export { ButtonComponent, generateCustomSxProp };
+export { ButtonComponent, generateCustomSxProp };