@primer/styled-react 0.0.0-20251008034312 → 0.0.0-20251008035349

package/dist/components/Label.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../src/components/Label.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,UAAU,IAAI,gBAAgB,EAAuB,MAAM,eAAe,CAAA;AACvF,OAAO,EAAK,KAAK,MAAM,EAAC,MAAM,OAAO,CAAA;AAErC,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,gBAAgB,CAAA;AAGvD,KAAK,UAAU,GAAG,gBAAgB,GAAG,MAAM,GAAG;IAAC,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;CAAC,CAAA;AAQtE,QAAA,MAAM,KAAK,EAEL,mBAAmB,CAAC,MAAM,EAAE,UAAU,CAAC,CAAA;AAE7C,OAAO,EAAC,KAAK,EAAE,KAAK,UAAU,EAAC,CAAA"}
+{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../src/components/Label.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,UAAU,IAAI,gBAAgB,EAA4B,MAAM,eAAe,CAAA;AAC5F,OAAO,EAAC,KAAK,MAAM,EAAC,MAAM,OAAO,CAAA;AAEjC,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,gBAAgB,CAAA;AAEvD,KAAK,UAAU,GAAG,gBAAgB,GAAG,MAAM,GAAG;IAAC,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;CAAC,CAAA;AAMtE,QAAA,MAAM,KAAK,EAEL,mBAAmB,CAAC,MAAM,EAAE,UAAU,CAAC,CAAA;AAE7C,OAAO,EAAC,KAAK,EAAE,KAAK,UAAU,EAAC,CAAA"}

package/dist/components/Spinner.d.ts

@@ -1,5 +1,6 @@
-import { Spinner as PrimerSpinner, type SpinnerProps as PrimerSpinnerProps } from '@primer/react';
-import { type SxProp } from '../sx';
+import { type SpinnerProps as PrimerSpinnerProps } from '@primer/react';
+import React from 'react';
+import type { SxProp } from '../sx';
 export type SpinnerProps = PrimerSpinnerProps & SxProp;
-export declare const Spinner: import("styled-components").StyledComponent<typeof PrimerSpinner, any, SpinnerProps, never>;
+export declare function Spinner(props: SpinnerProps): React.JSX.Element;
 //# sourceMappingURL=Spinner.d.ts.map

package/dist/components/Spinner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../src/components/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,IAAI,aAAa,EAAE,KAAK,YAAY,IAAI,kBAAkB,EAAC,MAAM,eAAe,CAAA;AAC/F,OAAO,EAAK,KAAK,MAAM,EAAC,MAAM,OAAO,CAAA;AAGrC,MAAM,MAAM,YAAY,GAAG,kBAAkB,GAAG,MAAM,CAAA;AAEtD,eAAO,MAAM,OAAO,6FAInB,CAAA"}
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../src/components/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgC,KAAK,YAAY,IAAI,kBAAkB,EAAC,MAAM,eAAe,CAAA;AACpG,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,OAAO,CAAA;AAEjC,MAAM,MAAM,YAAY,GAAG,kBAAkB,GAAG,MAAM,CAAA;AAEtD,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,qBAE1C"}

package/dist/components/Token.d.ts

@@ -1,8 +1,7 @@
-import { type TokenProps as PrimerTokenProps } from '@primer/react';
-import { type SxProp } from '../sx';
+import { type TokenProps as PrimerTokenProps, type SxProp } from '@primer/react';
 import type { ForwardRefComponent } from '../polymorphic';
 import type { PropsWithChildren } from 'react';
 type TokenProps = PropsWithChildren<PrimerTokenProps> & SxProp;
-declare const Token: ForwardRefComponent<"a" | "button" | "span", TokenProps>;
+declare const Token: ForwardRefComponent<'a' | 'button' | 'span', TokenProps>;
 export { Token, type TokenProps };
 //# sourceMappingURL=Token.d.ts.map

package/dist/components/Token.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Token.d.ts","sourceRoot":"","sources":["../../src/components/Token.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,KAAK,UAAU,IAAI,gBAAgB,EAAuB,MAAM,eAAe,CAAA;AACvF,OAAO,EAAK,KAAK,MAAM,EAAC,MAAM,OAAO,CAAA;AACrC,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,gBAAgB,CAAA;AACvD,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAG5C,KAAK,UAAU,GAAG,iBAAiB,CAAC,gBAAgB,CAAC,GAAG,MAAM,CAAA;AAQ9D,QAAA,MAAM,KAAK,EAEL,mBAAmB,CAAC,GAAG,GAAG,QAAQ,GAAG,MAAM,EAAE,UAAU,CAAC,CAAA;AAE9D,OAAO,EAAC,KAAK,EAAE,KAAK,UAAU,EAAC,CAAA"}
+{"version":3,"file":"Token.d.ts","sourceRoot":"","sources":["../../src/components/Token.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,UAAU,IAAI,gBAAgB,EACnC,KAAK,MAAM,EAIZ,MAAM,eAAe,CAAA;AAEtB,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,gBAAgB,CAAA;AACvD,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAE5C,KAAK,UAAU,GAAG,iBAAiB,CAAC,gBAAgB,CAAC,GAAG,MAAM,CAAA;AAE9D,QAAA,MAAM,KAAK,EAAE,mBAAmB,CAAC,GAAG,GAAG,QAAQ,GAAG,MAAM,EAAE,UAAU,CAgBP,CAAA;AAE7D,OAAO,EAAC,KAAK,EAAE,KAAK,UAAU,EAAC,CAAA"}

package/dist/index.js

@@ -1,9 +1,10 @@
-import { ActionList as ActionList$1, sx, ActionMenu as ActionMenu$1, Autocomplete as Autocomplete$1, Box, Avatar as Avatar$1, Breadcrumbs as Breadcrumbs$1, Checkbox as Checkbox$1, CheckboxGroup as CheckboxGroup$1, CircleBadge as CircleBadge$1, CounterLabel as CounterLabel$1, Flash as Flash$1, Header as Header$1, Heading as Heading$1, Label as Label$1, Link as Link$1, LinkButton as LinkButton$1, NavList as NavList$1, Overlay as Overlay$1, PageLayout as PageLayout$1, RadioGroup as RadioGroup$1, RelativeTime as RelativeTime$1, SegmentedControl as SegmentedControl$1, Spinner as Spinner$1, StateLabel as StateLabel$1, SubNav as SubNav$1, Text as Text$1, Timeline as Timeline$1, ToggleSwitch as ToggleSwitch$1, Token as Token$1, Truncate as Truncate$1, UnderlineNav as UnderlineNav$1 } from '@primer/react';
+import { ActionList as ActionList$1, sx, ActionMenu as ActionMenu$1, Autocomplete as Autocomplete$1, Box, Avatar as Avatar$1, Breadcrumbs as Breadcrumbs$1, Checkbox as Checkbox$1, CheckboxGroup as CheckboxGroup$1, CircleBadge as CircleBadge$1, CounterLabel as CounterLabel$1, Flash as Flash$1, Header as Header$1, Heading as Heading$1, Label as Label$1, Link as Link$1, LinkButton as LinkButton$1, NavList as NavList$1, Overlay as Overlay$1, PageLayout as PageLayout$1, RadioGroup as RadioGroup$1, RelativeTime as RelativeTime$1, SegmentedControl as SegmentedControl$1, Spinner as Spinner$1, StateLabel as StateLabel$1, SubNav as SubNav$1, Text as Text$1, Timeline as Timeline$1, ToggleSwitch as ToggleSwitch$1, useTheme, theme, Token as Token$1, Truncate as Truncate$1, UnderlineNav as UnderlineNav$1 } from '@primer/react';
 export { Box, Button, Details, FormControl, IconButton, ProgressBar, Select, TextInput, Textarea, ThemeProvider, merge, sx, theme, themeGet, useColorSchemeVar, useTheme } from '@primer/react';
 import React, { forwardRef } from 'react';
 import styled from 'styled-components';
 import { jsx } from 'react/jsx-runtime';
 export { D as Dialog, P as PageHeader, T as Tooltip } from './Tooltip-DIHgr01r.js';
+import css from '@styled-system/css';
 
 const StyledActionList = styled(ActionList$1).withConfig({
   shouldForwardProp: prop => prop !== 'sx'
@@ -285,12 +286,13 @@ const Heading = styled(Heading$1).withConfig({
   componentId: "sc-1vc165i-0"
 })(["", ""], sx);
 
-const StyledLabel = styled(Label$1).withConfig({
-  shouldForwardProp: prop => prop !== 'sx'
-}).withConfig({
-  displayName: "Label__StyledLabel",
-  componentId: "sc-1cpass9-0"
-})(["", ""], sx);
+const StyledLabel = /*#__PURE__*/forwardRef(function Label(props, ref) {
+  return /*#__PURE__*/jsx(Box, {
+    as: Label$1,
+    ref: ref,
+    ...props
+  });
+});
 const Label = /*#__PURE__*/forwardRef(({
   as,
   ...props
@@ -485,12 +487,12 @@ const SegmentedControl = Object.assign(SegmentedControlImpl, {
   IconButton: SegmentedControlIconButton
 });
 
-const Spinner = styled(Spinner$1).withConfig({
-  shouldForwardProp: prop => prop !== 'sx'
-}).withConfig({
-  displayName: "Spinner",
-  componentId: "sc-jbw2a0-0"
-})(["", ""], sx);
+function Spinner(props) {
+  return /*#__PURE__*/jsx(Box, {
+    as: Spinner$1,
+    ...props
+  });
+}
 
 const StateLabel = /*#__PURE__*/forwardRef(function StateLabel(props, ref) {
   return /*#__PURE__*/jsx(Box, {
@@ -587,21 +589,32 @@ const ToggleSwitch = /*#__PURE__*/forwardRef(function ToggleSwitch(props, ref) {
   });
 });
 
-const StyledToken = styled(Token$1).withConfig({
-  shouldForwardProp: prop => prop !== 'sx'
-}).withConfig({
-  displayName: "Token__StyledToken",
-  componentId: "sc-ldn0r8-0"
-})(["", ""], sx);
-const Token = /*#__PURE__*/forwardRef(({
-  as,
-  ...props
+const Token = /*#__PURE__*/React.forwardRef(({
+  sx: sxProp,
+  style,
+  ...rest
 }, ref) => {
-  return /*#__PURE__*/jsx(StyledToken, {
-    ...props,
-    ...(as ? {
-      forwardedAs: as
-    } : {}),
+  const contextTheme = useTheme();
+  const theme$1 = contextTheme.theme || theme;
+
+  // If no sx prop is provided, just return PrimerToken directly
+  if (!sxProp) {
+    return /*#__PURE__*/jsx(Token$1, {
+      ...rest,
+      style: style,
+      ref: ref
+    });
+  }
+
+  // Convert sx to CSS styles using the theme context
+  const sxStyles = css(sxProp)(theme$1);
+  const mergedStyle = {
+    ...sxStyles,
+    ...style
+  };
+  return /*#__PURE__*/jsx(Token$1, {
+    ...rest,
+    style: mergedStyle,
     ref: ref
   });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/styled-react",
-  "version": "0.0.0-20251008034312",
+  "version": "0.0.0-20251008035349",
   "type": "module",
   "exports": {
     ".": {
@@ -30,7 +30,7 @@
   "devDependencies": {
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
-    "@primer/react": "0.0.0-20251008034312",
+    "@primer/react": "0.0.0-20251008035349",
     "@rollup/plugin-babel": "^6.0.4",
     "@types/react": "18.3.11",
     "@types/react-dom": "18.3.1",
@@ -46,7 +46,7 @@
     "typescript": "^5.9.2"
   },
   "peerDependencies": {
-    "@primer/react": "0.0.0-20251008034312",
+    "@primer/react": "0.0.0-20251008035349",
     "@types/react": "18.x || 19.x",
     "@types/react-dom": "18.x || 19.x",
     "@types/react-is": "18.x || 19.x",