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

package/dist/components/Button.js

@@ -1,112 +1,48 @@
-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';
+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";
 
-const StyledButtonComponent = styled(Button).withConfig({
-  shouldForwardProp: prop => prop !== 'sx'
-}).withConfig({
-  displayName: "Button__StyledButtonComponent",
-  componentId: "sc-vqy3e4-0"
+//#region src/components/Button.tsx
+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
-    } : {})
-  });
+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 } : {}
+	});
 });
-
-// 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;
-  }
+	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;
+	}
 }
-ButtonComponent.displayName = 'Button';
+ButtonComponent.displayName = "Button";
 ButtonComponent.__SLOT__ = Button.__SLOT__;
 
-export { ButtonComponent, generateCustomSxProp };
+//#endregion
+export { ButtonComponent, generateCustomSxProp };

package/dist/components/Checkbox.js

@@ -1,15 +1,17 @@
-import { Checkbox as Checkbox$1 } from '@primer/react';
-import Box from './Box.js';
-import { forwardRef } from 'react';
-import { jsx } from 'react/jsx-runtime';
+import { Box } from "./Box.js";
+import { Checkbox } from "@primer/react";
+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
-  });
+//#region src/components/Checkbox.tsx
+const Checkbox$1 = /* @__PURE__ */ forwardRef(function Checkbox$2(props, ref) {
+	return /* @__PURE__ */ jsx(Box, {
+		as: Checkbox,
+		ref,
+		...props
+	});
 });
-Checkbox.__SLOT__ = Checkbox$1.__SLOT__;
+Checkbox$1.__SLOT__ = Checkbox.__SLOT__;
 
-export { Checkbox };
+//#endregion
+export { Checkbox$1 as Checkbox };

package/dist/components/CheckboxGroup.js

@@ -1,43 +1,41 @@
-import { CheckboxGroup as CheckboxGroup$1 } from '@primer/react';
-import 'react';
-import Box from './Box.js';
-import { jsx } from 'react/jsx-runtime';
+import Box_default from "./Box.js";
+import { CheckboxGroup } from "@primer/react";
+import { jsx } from "react/jsx-runtime";
 
-const CheckboxGroupImpl = props => {
-  return /*#__PURE__*/jsx(Box, {
-    as: CheckboxGroup$1,
-    ...props
-  });
+//#region src/components/CheckboxGroup.tsx
+const CheckboxGroupImpl = (props) => {
+	return /* @__PURE__ */ jsx(Box_default, {
+		as: CheckboxGroup,
+		...props
+	});
 };
-
-// Define local types based on the internal component props
-
-const CheckboxOrRadioGroupLabel = props => {
-  return /*#__PURE__*/jsx(Box, {
-    as: CheckboxGroup$1.Label,
-    ...props
-  });
+const CheckboxOrRadioGroupLabel = (props) => {
+	return /* @__PURE__ */ jsx(Box_default, {
+		as: CheckboxGroup.Label,
+		...props
+	});
 };
-const CheckboxOrRadioGroupCaption = props => {
-  return /*#__PURE__*/jsx(Box, {
-    as: CheckboxGroup$1.Caption,
-    ...props
-  });
+const CheckboxOrRadioGroupCaption = (props) => {
+	return /* @__PURE__ */ jsx(Box_default, {
+		as: CheckboxGroup.Caption,
+		...props
+	});
 };
-const CheckboxOrRadioGroupValidation = props => {
-  return /*#__PURE__*/jsx(Box, {
-    as: CheckboxGroup$1.Validation,
-    ...props
-  });
+const CheckboxOrRadioGroupValidation = (props) => {
+	return /* @__PURE__ */ jsx(Box_default, {
+		as: CheckboxGroup.Validation,
+		...props
+	});
 };
-const CheckboxGroup = Object.assign(CheckboxGroupImpl, {
-  Label: CheckboxOrRadioGroupLabel,
-  Caption: CheckboxOrRadioGroupCaption,
-  Validation: CheckboxOrRadioGroupValidation
+const CheckboxGroup$1 = 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__;
+CheckboxGroupImpl.__SLOT__ = CheckboxGroup.__SLOT__;
+CheckboxOrRadioGroupLabel.__SLOT__ = CheckboxGroup.Label.__SLOT__;
+CheckboxOrRadioGroupCaption.__SLOT__ = CheckboxGroup.Caption.__SLOT__;
+CheckboxOrRadioGroupValidation.__SLOT__ = CheckboxGroup.Validation.__SLOT__;
 
-export { CheckboxGroup };
+//#endregion
+export { CheckboxGroup$1 as CheckboxGroup };

package/dist/components/CircleBadge.js

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

package/dist/components/CounterLabel.js

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

package/dist/components/DataTable.js

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

package/dist/components/Dialog.js

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

package/dist/components/Flash.js

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

package/dist/components/FormControl.js

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