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

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

package/dist/components/Checkbox.js

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

package/dist/components/CheckboxGroup.js

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

package/dist/components/CircleBadge.js

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

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