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

package/dist/components/Header.js

@@ -1,44 +1,52 @@
-import { Box } from "./Box.js";
-import { Header } from "@primer/react";
-import { forwardRef } from "react";
-import { jsx } from "react/jsx-runtime";
+import { Header as Header$1 } from '@primer/react';
+import { forwardRef } from 'react';
+import Box from './Box.js';
+import { jsx } from 'react/jsx-runtime';
 
-//#region src/components/Header.tsx
-const StyledHeader = /* @__PURE__ */ forwardRef(function Header$2(props, ref) {
-	return /* @__PURE__ */ jsx(Box, {
-		as: Header,
-		ref,
-		...props
-	});
+const StyledHeader = /*#__PURE__*/forwardRef(function Header(props, ref) {
+  return /*#__PURE__*/jsx(Box, {
+    as: Header$1,
+    ref: ref,
+    ...props
+  });
 });
-const HeaderImpl = /* @__PURE__ */ forwardRef(({ as, ...props }, ref) => /* @__PURE__ */ jsx(StyledHeader, {
-	...props,
-	...as ? { forwardedAs: as } : {},
-	ref
+const HeaderImpl = /*#__PURE__*/forwardRef(({
+  as,
+  ...props
+}, ref) => /*#__PURE__*/jsx(StyledHeader, {
+  ...props,
+  ...(as ? {
+    forwardedAs: as
+  } : {}),
+  ref: ref
 }));
-const HeaderItem = /* @__PURE__ */ forwardRef(function HeaderItem$1(props, ref) {
-	return /* @__PURE__ */ jsx(Box, {
-		as: Header.Item,
-		ref,
-		...props
-	});
+const HeaderItem = /*#__PURE__*/forwardRef(function HeaderItem(props, ref) {
+  return /*#__PURE__*/jsx(Box, {
+    as: Header$1.Item,
+    ref: ref,
+    ...props
+  });
 });
-const StyledHeaderLink = /* @__PURE__ */ forwardRef(function HeaderLink$1(props, ref) {
-	return /* @__PURE__ */ jsx(Box, {
-		as: Header.Link,
-		ref,
-		...props
-	});
+const StyledHeaderLink = /*#__PURE__*/forwardRef(function HeaderLink(props, ref) {
+  return /*#__PURE__*/jsx(Box, {
+    as: Header$1.Link,
+    ref: ref,
+    ...props
+  });
 });
-const HeaderLink = /* @__PURE__ */ forwardRef(({ as, ...props }, ref) => /* @__PURE__ */ jsx(StyledHeaderLink, {
-	...props,
-	...as ? { forwardedAs: as } : {},
-	ref
+const HeaderLink = /*#__PURE__*/forwardRef(({
+  as,
+  ...props
+}, ref) => /*#__PURE__*/jsx(StyledHeaderLink, {
+  ...props,
+  ...(as ? {
+    forwardedAs: as
+  } : {}),
+  ref: ref
 }));
-const Header$1 = Object.assign(HeaderImpl, {
-	Item: HeaderItem,
-	Link: HeaderLink
+const Header = Object.assign(HeaderImpl, {
+  Item: HeaderItem,
+  Link: HeaderLink
 });
 
-//#endregion
-export { Header$1 as Header };
+export { Header };

package/dist/components/Heading.js

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

package/dist/components/IconButton.js

@@ -1,27 +1,40 @@
-import { sx } from "../sx.js";
-import { generateCustomSxProp } from "./Button.js";
-import styled from "styled-components";
-import { IconButton } from "@primer/react";
-import { forwardRef } from "react";
-import { jsx } from "react/jsx-runtime";
+import { IconButton as IconButton$1 } from '@primer/react';
+import { generateCustomSxProp } from './Button.js';
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import sx from '../sx.js';
+import { jsx } from 'react/jsx-runtime';
 
-//#region src/components/IconButton.tsx
-const StyledIconButton = styled(IconButton).withConfig({ shouldForwardProp: (prop) => prop !== "sx" }).withConfig({
-	displayName: "IconButton__StyledIconButton",
-	componentId: "sc-i53dt6-0"
+const StyledIconButton = styled(IconButton$1).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "IconButton__StyledIconButton",
+  componentId: "sc-i53dt6-0"
 })(["", ""], sx);
-const IconButton$1 = /* @__PURE__ */ forwardRef(({ as, sx: sx$1, ...props }, ref) => {
-	let sxStyles = sx$1;
-	const { size = "medium" } = props;
-	if (sx$1 !== null && sx$1 !== void 0 && Object.keys(sx$1).length > 0) sxStyles = generateCustomSxProp({ size }, sx$1);
-	return /* @__PURE__ */ jsx(StyledIconButton, {
-		sx: sxStyles,
-		...props,
-		...as ? { forwardedAs: as } : {},
-		ref
-	});
+const IconButton = /*#__PURE__*/forwardRef(({
+  as,
+  sx,
+  ...props
+}, ref) => {
+  let sxStyles = sx;
+  // grap the button props that have associated data attributes in the styles
+  const {
+    size = 'medium'
+  } = props;
+  if (sx !== null && sx !== undefined && Object.keys(sx).length > 0) {
+    sxStyles = generateCustomSxProp({
+      size
+    }, sx);
+  }
+  return /*#__PURE__*/jsx(StyledIconButton, {
+    sx: sxStyles,
+    ...props,
+    ...(as ? {
+      forwardedAs: as
+    } : {}),
+    ref: ref
+  });
 });
-IconButton$1.__SLOT__ = IconButton.__SLOT__;
+IconButton.__SLOT__ = IconButton$1.__SLOT__;
 
-//#endregion
-export { IconButton$1 as IconButton };
+export { IconButton };

package/dist/components/Label.js

@@ -1,21 +1,26 @@
-import { sx } from "../sx.js";
-import styled from "styled-components";
-import { Label } from "@primer/react";
-import { forwardRef } from "react";
-import { jsx } from "react/jsx-runtime";
+import { Label as Label$1 } from '@primer/react';
+import sx from '../sx.js';
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { jsx } from 'react/jsx-runtime';
 
-//#region src/components/Label.tsx
-const StyledLabel = styled(Label).withConfig({ shouldForwardProp: (prop) => prop !== "sx" }).withConfig({
-	displayName: "Label__StyledLabel",
-	componentId: "sc-1cpass9-0"
+const StyledLabel = styled(Label$1).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "Label__StyledLabel",
+  componentId: "sc-1cpass9-0"
 })(["", ""], sx);
-const Label$1 = /* @__PURE__ */ forwardRef(({ as, ...props }, ref) => {
-	return /* @__PURE__ */ jsx(StyledLabel, {
-		...props,
-		...as ? { forwardedAs: as } : {},
-		ref
-	});
+const Label = /*#__PURE__*/forwardRef(({
+  as,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/jsx(StyledLabel, {
+    ...props,
+    ...(as ? {
+      forwardedAs: as
+    } : {}),
+    ref: ref
+  });
 });
 
-//#endregion
-export { Label$1 as Label };
+export { Label };

package/dist/components/Link.js

@@ -1,21 +1,26 @@
-import { sx } from "../sx.js";
-import styled from "styled-components";
-import { Link } from "@primer/react";
-import { forwardRef } from "react";
-import { jsx } from "react/jsx-runtime";
+import { Link as Link$1 } from '@primer/react';
+import styled from 'styled-components';
+import sx from '../sx.js';
+import { forwardRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
 
-//#region src/components/Link.tsx
-const StyledLink = styled(Link).withConfig({ shouldForwardProp: (prop) => prop !== "sx" }).withConfig({
-	displayName: "Link__StyledLink",
-	componentId: "sc-1syctfj-0"
+const StyledLink = styled(Link$1).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "Link__StyledLink",
+  componentId: "sc-1syctfj-0"
 })(["", ""], sx);
-const Link$1 = /* @__PURE__ */ forwardRef(({ as, ...props }, ref) => {
-	return /* @__PURE__ */ jsx(StyledLink, {
-		...props,
-		...as ? { forwardedAs: as } : {},
-		ref
-	});
+const Link = /*#__PURE__*/forwardRef(({
+  as,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/jsx(StyledLink, {
+    ...props,
+    ...(as ? {
+      forwardedAs: as
+    } : {}),
+    ref: ref
+  });
 });
 
-//#endregion
-export { Link$1 as Link };
+export { Link };

package/dist/components/LinkButton.js

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

package/dist/components/NavList.js

@@ -1,55 +1,74 @@
-import { sx } from "../sx.js";
-import styled from "styled-components";
-import { NavList } from "@primer/react";
-import { forwardRef } from "react";
-import { jsx } from "react/jsx-runtime";
+import { NavList as NavList$1 } 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/NavList.tsx
-const StyledNavListImpl = styled(NavList).withConfig({ shouldForwardProp: (prop) => prop !== "sx" }).withConfig({
-	displayName: "NavList__StyledNavListImpl",
-	componentId: "sc-86jrwg-0"
+const StyledNavListImpl = styled(NavList$1).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "NavList__StyledNavListImpl",
+  componentId: "sc-86jrwg-0"
 })(["", ""], sx);
-const NavListImpl = /* @__PURE__ */ forwardRef(function NavList$2({ as, ...props }, ref) {
-	return /* @__PURE__ */ jsx(StyledNavListImpl, {
-		ref,
-		...as ? { forwardedAs: as } : {},
-		...props
-	});
+const NavListImpl = /*#__PURE__*/forwardRef(function NavList({
+  as,
+  ...props
+}, ref) {
+  return /*#__PURE__*/jsx(StyledNavListImpl, {
+    ref: ref,
+    ...(as ? {
+      forwardedAs: as
+    } : {}),
+    ...props
+  });
 });
-const StyledNavListItem = styled(NavList.Item).withConfig({ shouldForwardProp: (prop) => prop !== "sx" }).withConfig({
-	displayName: "NavList__StyledNavListItem",
-	componentId: "sc-86jrwg-1"
+const StyledNavListItem = styled(NavList$1.Item).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "NavList__StyledNavListItem",
+  componentId: "sc-86jrwg-1"
 })(["", ""], sx);
-const NavListItem = /* @__PURE__ */ forwardRef(({ as, ...props }, ref) => {
-	return /* @__PURE__ */ jsx(StyledNavListItem, {
-		...props,
-		...as ? { forwardedAs: as } : {},
-		ref
-	});
+const NavListItem = /*#__PURE__*/forwardRef(({
+  as,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/jsx(StyledNavListItem, {
+    ...props,
+    ...(as ? {
+      forwardedAs: as
+    } : {}),
+    ref: ref
+  });
 });
-const StyledNavListLeadingVisual = styled(NavList.LeadingVisual).withConfig({ shouldForwardProp: (prop) => prop !== "sx" }).withConfig({
-	displayName: "NavList__StyledNavListLeadingVisual",
-	componentId: "sc-86jrwg-2"
+const StyledNavListLeadingVisual = styled(NavList$1.LeadingVisual).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "NavList__StyledNavListLeadingVisual",
+  componentId: "sc-86jrwg-2"
 })(["", ""], sx);
-const NavListLeadingVisual = /* @__PURE__ */ forwardRef(({ as, ...props }, ref) => {
-	return /* @__PURE__ */ jsx(StyledNavListLeadingVisual, {
-		...props,
-		...as ? { forwardedAs: as } : {},
-		ref
-	});
+const NavListLeadingVisual = /*#__PURE__*/forwardRef(({
+  as,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/jsx(StyledNavListLeadingVisual, {
+    ...props,
+    ...(as ? {
+      forwardedAs: as
+    } : {}),
+    ref: ref
+  });
 });
-NavListLeadingVisual.__SLOT__ = NavList.LeadingVisual.__SLOT__;
-const NavList$1 = Object.assign(NavListImpl, {
-	Item: NavListItem,
-	Group: NavList.Group,
-	GroupHeading: NavList.GroupHeading,
-	LeadingVisual: NavListLeadingVisual,
-	SubNav: NavList.SubNav,
-	Divider: NavList.Divider,
-	TrailingVisual: NavList.TrailingVisual,
-	TrailingAction: NavList.TrailingAction,
-	GroupExpand: NavList.GroupExpand
+NavListLeadingVisual.__SLOT__ = NavList$1.LeadingVisual.__SLOT__;
+const NavList = Object.assign(NavListImpl, {
+  Item: NavListItem,
+  Group: NavList$1.Group,
+  GroupHeading: NavList$1.GroupHeading,
+  LeadingVisual: NavListLeadingVisual,
+  SubNav: NavList$1.SubNav,
+  Divider: NavList$1.Divider,
+  TrailingVisual: NavList$1.TrailingVisual,
+  TrailingAction: NavList$1.TrailingAction,
+  GroupExpand: NavList$1.GroupExpand
 });
 
-//#endregion
-export { NavList$1 as NavList };
+export { NavList };

package/dist/components/Overlay.js

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

package/dist/components/PageHeader.js

@@ -1,71 +1,109 @@
-import { sx } from "../sx.js";
-import { Box } from "./Box.js";
-import styled from "styled-components";
-import { PageHeader } from "@primer/react";
-import React from "react";
-import { jsx } from "react/jsx-runtime";
+import { PageHeader as PageHeader$1 } from '@primer/react';
+import styled from 'styled-components';
+import sx from '../sx.js';
+import Box from './Box.js';
+import React from 'react';
+import { jsx } from 'react/jsx-runtime';
 
-//#region src/components/PageHeader.tsx
-const StyledPageHeader = styled(PageHeader).withConfig({ shouldForwardProp: (prop) => prop !== "sx" }).withConfig({
-	displayName: "PageHeader__StyledPageHeader",
-	componentId: "sc-1g9symn-0"
+const StyledPageHeader = styled(PageHeader$1).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "PageHeader__StyledPageHeader",
+  componentId: "sc-1g9symn-0"
 })(["", ""], sx);
-const PageHeaderImpl = /* @__PURE__ */ React.forwardRef(({ as, ...props }, ref) => /* @__PURE__ */ jsx(StyledPageHeader, {
-	...props,
-	...as ? { forwardedAs: as } : {},
-	ref
+const PageHeaderImpl = /*#__PURE__*/React.forwardRef(({
+  as,
+  ...props
+}, ref) => /*#__PURE__*/jsx(StyledPageHeader, {
+  ...props,
+  ...(as ? {
+    forwardedAs: as
+  } : {}),
+  ref: ref
 }));
-function PageHeaderActions({ sx: sx$1, ...rest }) {
-	const style = {};
-	if (sx$1) {
-		const { height } = sx$1;
-		if (height) style["--custom-height"] = height;
-	}
-	return /* @__PURE__ */ jsx(Box, {
-		...rest,
-		as: PageHeader.Actions,
-		style,
-		sx: sx$1
-	});
+function PageHeaderActions({
+  sx,
+  ...rest
+}) {
+  const style = {};
+  if (sx) {
+    // @ts-ignore sx has height attribute
+    const {
+      height
+    } = sx;
+    if (height) {
+      style['--custom-height'] = height;
+    }
+  }
+
+  // @ts-expect-error type mismatch between Box usage here and PrimerPageHeader.Actions
+  return /*#__PURE__*/jsx(Box, {
+    ...rest,
+    as: PageHeader$1.Actions,
+    style: style,
+    sx: sx
+  });
 }
-function StyledPageHeaderTitle({ sx: sx$1, ...rest }) {
-	const style = {};
-	if (sx$1) {
-		const { fontSize, lineHeight, fontWeight } = sx$1;
-		if (fontSize) style["--custom-font-size"] = fontSize;
-		if (lineHeight) style["--custom-line-height"] = lineHeight;
-		if (fontWeight) style["--custom-font-weight"] = fontWeight;
-	}
-	return /* @__PURE__ */ jsx(Box, {
-		...rest,
-		as: PageHeader.Title,
-		style,
-		sx: sx$1
-	});
+function StyledPageHeaderTitle({
+  sx,
+  ...rest
+}) {
+  const style = {};
+  if (sx) {
+    // @ts-ignore sx can have color attribute
+    const {
+      fontSize,
+      lineHeight,
+      fontWeight
+    } = sx;
+    if (fontSize) {
+      style['--custom-font-size'] = fontSize;
+    }
+    if (lineHeight) {
+      style['--custom-line-height'] = lineHeight;
+    }
+    if (fontWeight) {
+      style['--custom-font-weight'] = fontWeight;
+    }
+  }
+
+  // @ts-expect-error type mismatch between Box usage here and PrimerPageHeader.Title
+  return /*#__PURE__*/jsx(Box, {
+    ...rest,
+    as: PageHeader$1.Title,
+    style: style,
+    sx: sx
+  });
 }
-const PageHeaderTitle = ({ as, ...props }) => /* @__PURE__ */ jsx(StyledPageHeaderTitle, {
-	...props,
-	...as ? { forwardedAs: as } : {}
+const PageHeaderTitle = ({
+  as,
+  ...props
+}) => /*#__PURE__*/jsx(StyledPageHeaderTitle, {
+  ...props,
+  ...(as ? {
+    forwardedAs: as
+  } : {})
 });
-const PageHeaderTitleArea = styled(PageHeader.TitleArea).withConfig({ shouldForwardProp: (prop) => prop !== "sx" }).withConfig({
-	displayName: "PageHeader__PageHeaderTitleArea",
-	componentId: "sc-1g9symn-1"
+const PageHeaderTitleArea = styled(PageHeader$1.TitleArea).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "PageHeader__PageHeaderTitleArea",
+  componentId: "sc-1g9symn-1"
 })(["", ""], sx);
-const PageHeader$1 = Object.assign(PageHeaderImpl, {
-	Actions: PageHeaderActions,
-	ContextArea: PageHeader.ContextArea,
-	ParentLink: PageHeader.ParentLink,
-	ContextBar: PageHeader.ContextBar,
-	TitleArea: PageHeaderTitleArea,
-	ContextAreaActions: PageHeader.ContextAreaActions,
-	LeadingAction: PageHeader.LeadingAction,
-	Breadcrumbs: PageHeader.Breadcrumbs,
-	LeadingVisual: PageHeader.LeadingVisual,
-	Title: PageHeaderTitle,
-	TrailingVisual: PageHeader.TrailingVisual,
-	Description: PageHeader.Description,
-	TrailingAction: PageHeader.TrailingAction
+const PageHeader = Object.assign(PageHeaderImpl, {
+  Actions: PageHeaderActions,
+  ContextArea: PageHeader$1.ContextArea,
+  ParentLink: PageHeader$1.ParentLink,
+  ContextBar: PageHeader$1.ContextBar,
+  TitleArea: PageHeaderTitleArea,
+  ContextAreaActions: PageHeader$1.ContextAreaActions,
+  LeadingAction: PageHeader$1.LeadingAction,
+  Breadcrumbs: PageHeader$1.Breadcrumbs,
+  LeadingVisual: PageHeader$1.LeadingVisual,
+  Title: PageHeaderTitle,
+  TrailingVisual: PageHeader$1.TrailingVisual,
+  Description: PageHeader$1.Description,
+  TrailingAction: PageHeader$1.TrailingAction
 });
 
-//#endregion
-export { PageHeader$1 as PageHeader };
+export { PageHeader };