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

package/dist/components/Button.stories.d.ts

@@ -0,0 +1,8 @@
+declare const _default: {
+    title: string;
+    component: import("../polymorphic").ForwardRefComponent<"button", import("./Button").ButtonComponentProps> & import("@primer/react").SlotMarker;
+};
+export default _default;
+export declare const WithColor: () => import("react").JSX.Element;
+export declare const WithFontSize: () => import("react").JSX.Element;
+//# sourceMappingURL=Button.stories.d.ts.map

package/dist/components/Button.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../src/components/Button.stories.tsx"],"names":[],"mappings":";;;;AAEA,wBAGC;AAED,eAAO,MAAM,SAAS,mCAAgE,CAAA;AAEtF,eAAO,MAAM,YAAY,mCAA0D,CAAA"}

package/dist/components/CounterLabel.js

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

package/dist/components/DataTable.js

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

package/dist/components/Dialog.js

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

package/dist/components/Flash.js

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

package/dist/components/FormControl.js

@@ -1,19 +1,19 @@
-import { sx } from "../sx.js";
-import styled from "styled-components";
-import { FormControl } from "@primer/react";
+import { FormControl as FormControl$1 } from '@primer/react';
+import styled from 'styled-components';
+import { sx } from '../sx.js';
 
-//#region src/components/FormControl.tsx
-const FormControlImpl = styled(FormControl).withConfig({ shouldForwardProp: (prop) => prop !== "sx" }).withConfig({
-	displayName: "FormControl__FormControlImpl",
-	componentId: "sc-1642wfe-0"
+const FormControlImpl = styled(FormControl$1).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "FormControl__FormControlImpl",
+  componentId: "sc-1642wfe-0"
 })(["", ""], sx);
-const FormControl$1 = Object.assign(FormControlImpl, {
-	__SLOT__: FormControl.__SLOT__,
-	Caption: FormControl.Caption,
-	LeadingVisual: FormControl.LeadingVisual,
-	Validation: FormControl.Validation,
-	Label: FormControl.Label
+const FormControl = Object.assign(FormControlImpl, {
+  __SLOT__: FormControl$1.__SLOT__,
+  Caption: FormControl$1.Caption,
+  LeadingVisual: FormControl$1.LeadingVisual,
+  Validation: FormControl$1.Validation,
+  Label: FormControl$1.Label
 });
 
-//#endregion
-export { FormControl$1 as FormControl };
+export { FormControl };

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