@primer/styled-react 0.0.0-20251202210025 → 0.0.0-20251202220556

package/dist/_virtual/rolldown_runtime.js

@@ -0,0 +1,29 @@
+//#region rolldown:runtime
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __commonJSMin = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+			key = keys[i];
+			if (!__hasOwnProp.call(to, key) && key !== except) {
+				__defProp(to, key, {
+					get: ((k) => from[k]).bind(null, key),
+					enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+				});
+			}
+		}
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+
+//#endregion
+export { __commonJSMin, __toESM };

package/dist/node_modules/clsx/dist/clsx.js

@@ -0,0 +1,17 @@
+//#region ../../node_modules/clsx/dist/clsx.mjs
+function r(e) {
+	var t, f, n = "";
+	if ("string" == typeof e || "number" == typeof e) n += e;
+	else if ("object" == typeof e) if (Array.isArray(e)) {
+		var o = e.length;
+		for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+	} else for (f in e) e[f] && (n && (n += " "), n += f);
+	return n;
+}
+function clsx() {
+	for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+	return n;
+}
+
+//#endregion
+export { clsx };

package/dist/node_modules/deepmerge/dist/cjs.js

@@ -0,0 +1,88 @@
+import { __commonJSMin } from "../../../_virtual/rolldown_runtime.js";
+
+//#region ../../node_modules/deepmerge/dist/cjs.js
+var require_cjs = /* @__PURE__ */ __commonJSMin(((exports, module) => {
+	var isMergeableObject = function isMergeableObject$1(value) {
+		return isNonNullObject(value) && !isSpecial(value);
+	};
+	function isNonNullObject(value) {
+		return !!value && typeof value === "object";
+	}
+	function isSpecial(value) {
+		var stringValue = Object.prototype.toString.call(value);
+		return stringValue === "[object RegExp]" || stringValue === "[object Date]" || isReactElement(value);
+	}
+	var REACT_ELEMENT_TYPE = typeof Symbol === "function" && Symbol.for ? Symbol.for("react.element") : 60103;
+	function isReactElement(value) {
+		return value.$$typeof === REACT_ELEMENT_TYPE;
+	}
+	function emptyTarget(val) {
+		return Array.isArray(val) ? [] : {};
+	}
+	function cloneUnlessOtherwiseSpecified(value, options) {
+		return options.clone !== false && options.isMergeableObject(value) ? deepmerge(emptyTarget(value), value, options) : value;
+	}
+	function defaultArrayMerge(target, source, options) {
+		return target.concat(source).map(function(element) {
+			return cloneUnlessOtherwiseSpecified(element, options);
+		});
+	}
+	function getMergeFunction(key, options) {
+		if (!options.customMerge) return deepmerge;
+		var customMerge = options.customMerge(key);
+		return typeof customMerge === "function" ? customMerge : deepmerge;
+	}
+	function getEnumerableOwnPropertySymbols(target) {
+		return Object.getOwnPropertySymbols ? Object.getOwnPropertySymbols(target).filter(function(symbol) {
+			return Object.propertyIsEnumerable.call(target, symbol);
+		}) : [];
+	}
+	function getKeys(target) {
+		return Object.keys(target).concat(getEnumerableOwnPropertySymbols(target));
+	}
+	function propertyIsOnObject(object, property) {
+		try {
+			return property in object;
+		} catch (_) {
+			return false;
+		}
+	}
+	function propertyIsUnsafe(target, key) {
+		return propertyIsOnObject(target, key) && !(Object.hasOwnProperty.call(target, key) && Object.propertyIsEnumerable.call(target, key));
+	}
+	function mergeObject(target, source, options) {
+		var destination = {};
+		if (options.isMergeableObject(target)) getKeys(target).forEach(function(key) {
+			destination[key] = cloneUnlessOtherwiseSpecified(target[key], options);
+		});
+		getKeys(source).forEach(function(key) {
+			if (propertyIsUnsafe(target, key)) return;
+			if (propertyIsOnObject(target, key) && options.isMergeableObject(source[key])) destination[key] = getMergeFunction(key, options)(target[key], source[key], options);
+			else destination[key] = cloneUnlessOtherwiseSpecified(source[key], options);
+		});
+		return destination;
+	}
+	function deepmerge(target, source, options) {
+		options = options || {};
+		options.arrayMerge = options.arrayMerge || defaultArrayMerge;
+		options.isMergeableObject = options.isMergeableObject || isMergeableObject;
+		options.cloneUnlessOtherwiseSpecified = cloneUnlessOtherwiseSpecified;
+		var sourceIsArray = Array.isArray(source);
+		if (!(sourceIsArray === Array.isArray(target))) return cloneUnlessOtherwiseSpecified(source, options);
+		else if (sourceIsArray) return options.arrayMerge(target, source, options);
+		else return mergeObject(target, source, options);
+	}
+	deepmerge.all = function deepmergeAll(array, options) {
+		if (!Array.isArray(array)) throw new Error("first argument should be an array");
+		return array.reduce(function(prev, next) {
+			return deepmerge(prev, next, options);
+		}, {});
+	};
+	var deepmerge_1 = deepmerge;
+	module.exports = deepmerge_1;
+}));
+
+//#endregion
+export default require_cjs();
+
+export { require_cjs };

package/dist/node_modules/focus-visible/dist/focus-visible.js

@@ -0,0 +1,212 @@
+import { __commonJSMin } from "../../../_virtual/rolldown_runtime.js";
+
+//#region ../../node_modules/focus-visible/dist/focus-visible.js
+var require_focus_visible = /* @__PURE__ */ __commonJSMin(((exports, module) => {
+	(function(global, factory) {
+		typeof exports === "object" && typeof module !== "undefined" ? factory() : typeof define === "function" && define.amd ? define(factory) : factory();
+	})(exports, (function() {
+		"use strict";
+		/**
+		* Applies the :focus-visible polyfill at the given scope.
+		* A scope in this case is either the top-level Document or a Shadow Root.
+		*
+		* @param {(Document|ShadowRoot)} scope
+		* @see https://github.com/WICG/focus-visible
+		*/
+		function applyFocusVisiblePolyfill(scope) {
+			var hadKeyboardEvent = true;
+			var hadFocusVisibleRecently = false;
+			var hadFocusVisibleRecentlyTimeout = null;
+			var inputTypesAllowlist = {
+				text: true,
+				search: true,
+				url: true,
+				tel: true,
+				email: true,
+				password: true,
+				number: true,
+				date: true,
+				month: true,
+				week: true,
+				time: true,
+				datetime: true,
+				"datetime-local": true
+			};
+			/**
+			* Helper function for legacy browsers and iframes which sometimes focus
+			* elements like document, body, and non-interactive SVG.
+			* @param {Element} el
+			*/
+			function isValidFocusTarget(el) {
+				if (el && el !== document && el.nodeName !== "HTML" && el.nodeName !== "BODY" && "classList" in el && "contains" in el.classList) return true;
+				return false;
+			}
+			/**
+			* Computes whether the given element should automatically trigger the
+			* `focus-visible` class being added, i.e. whether it should always match
+			* `:focus-visible` when focused.
+			* @param {Element} el
+			* @return {boolean}
+			*/
+			function focusTriggersKeyboardModality(el) {
+				var type = el.type;
+				var tagName = el.tagName;
+				if (tagName === "INPUT" && inputTypesAllowlist[type] && !el.readOnly) return true;
+				if (tagName === "TEXTAREA" && !el.readOnly) return true;
+				if (el.isContentEditable) return true;
+				return false;
+			}
+			/**
+			* Add the `focus-visible` class to the given element if it was not added by
+			* the author.
+			* @param {Element} el
+			*/
+			function addFocusVisibleClass(el) {
+				if (el.classList.contains("focus-visible")) return;
+				el.classList.add("focus-visible");
+				el.setAttribute("data-focus-visible-added", "");
+			}
+			/**
+			* Remove the `focus-visible` class from the given element if it was not
+			* originally added by the author.
+			* @param {Element} el
+			*/
+			function removeFocusVisibleClass(el) {
+				if (!el.hasAttribute("data-focus-visible-added")) return;
+				el.classList.remove("focus-visible");
+				el.removeAttribute("data-focus-visible-added");
+			}
+			/**
+			* If the most recent user interaction was via the keyboard;
+			* and the key press did not include a meta, alt/option, or control key;
+			* then the modality is keyboard. Otherwise, the modality is not keyboard.
+			* Apply `focus-visible` to any current active element and keep track
+			* of our keyboard modality state with `hadKeyboardEvent`.
+			* @param {KeyboardEvent} e
+			*/
+			function onKeyDown(e) {
+				if (e.metaKey || e.altKey || e.ctrlKey) return;
+				if (isValidFocusTarget(scope.activeElement)) addFocusVisibleClass(scope.activeElement);
+				hadKeyboardEvent = true;
+			}
+			/**
+			* If at any point a user clicks with a pointing device, ensure that we change
+			* the modality away from keyboard.
+			* This avoids the situation where a user presses a key on an already focused
+			* element, and then clicks on a different element, focusing it with a
+			* pointing device, while we still think we're in keyboard modality.
+			* @param {Event} e
+			*/
+			function onPointerDown(e) {
+				hadKeyboardEvent = false;
+			}
+			/**
+			* On `focus`, add the `focus-visible` class to the target if:
+			* - the target received focus as a result of keyboard navigation, or
+			* - the event target is an element that will likely require interaction
+			*   via the keyboard (e.g. a text box)
+			* @param {Event} e
+			*/
+			function onFocus(e) {
+				if (!isValidFocusTarget(e.target)) return;
+				if (hadKeyboardEvent || focusTriggersKeyboardModality(e.target)) addFocusVisibleClass(e.target);
+			}
+			/**
+			* On `blur`, remove the `focus-visible` class from the target.
+			* @param {Event} e
+			*/
+			function onBlur(e) {
+				if (!isValidFocusTarget(e.target)) return;
+				if (e.target.classList.contains("focus-visible") || e.target.hasAttribute("data-focus-visible-added")) {
+					hadFocusVisibleRecently = true;
+					window.clearTimeout(hadFocusVisibleRecentlyTimeout);
+					hadFocusVisibleRecentlyTimeout = window.setTimeout(function() {
+						hadFocusVisibleRecently = false;
+					}, 100);
+					removeFocusVisibleClass(e.target);
+				}
+			}
+			/**
+			* If the user changes tabs, keep track of whether or not the previously
+			* focused element had .focus-visible.
+			* @param {Event} e
+			*/
+			function onVisibilityChange(e) {
+				if (document.visibilityState === "hidden") {
+					if (hadFocusVisibleRecently) hadKeyboardEvent = true;
+					addInitialPointerMoveListeners();
+				}
+			}
+			/**
+			* Add a group of listeners to detect usage of any pointing devices.
+			* These listeners will be added when the polyfill first loads, and anytime
+			* the window is blurred, so that they are active when the window regains
+			* focus.
+			*/
+			function addInitialPointerMoveListeners() {
+				document.addEventListener("mousemove", onInitialPointerMove);
+				document.addEventListener("mousedown", onInitialPointerMove);
+				document.addEventListener("mouseup", onInitialPointerMove);
+				document.addEventListener("pointermove", onInitialPointerMove);
+				document.addEventListener("pointerdown", onInitialPointerMove);
+				document.addEventListener("pointerup", onInitialPointerMove);
+				document.addEventListener("touchmove", onInitialPointerMove);
+				document.addEventListener("touchstart", onInitialPointerMove);
+				document.addEventListener("touchend", onInitialPointerMove);
+			}
+			function removeInitialPointerMoveListeners() {
+				document.removeEventListener("mousemove", onInitialPointerMove);
+				document.removeEventListener("mousedown", onInitialPointerMove);
+				document.removeEventListener("mouseup", onInitialPointerMove);
+				document.removeEventListener("pointermove", onInitialPointerMove);
+				document.removeEventListener("pointerdown", onInitialPointerMove);
+				document.removeEventListener("pointerup", onInitialPointerMove);
+				document.removeEventListener("touchmove", onInitialPointerMove);
+				document.removeEventListener("touchstart", onInitialPointerMove);
+				document.removeEventListener("touchend", onInitialPointerMove);
+			}
+			/**
+			* When the polfyill first loads, assume the user is in keyboard modality.
+			* If any event is received from a pointing device (e.g. mouse, pointer,
+			* touch), turn off keyboard modality.
+			* This accounts for situations where focus enters the page from the URL bar.
+			* @param {Event} e
+			*/
+			function onInitialPointerMove(e) {
+				if (e.target.nodeName && e.target.nodeName.toLowerCase() === "html") return;
+				hadKeyboardEvent = false;
+				removeInitialPointerMoveListeners();
+			}
+			document.addEventListener("keydown", onKeyDown, true);
+			document.addEventListener("mousedown", onPointerDown, true);
+			document.addEventListener("pointerdown", onPointerDown, true);
+			document.addEventListener("touchstart", onPointerDown, true);
+			document.addEventListener("visibilitychange", onVisibilityChange, true);
+			addInitialPointerMoveListeners();
+			scope.addEventListener("focus", onFocus, true);
+			scope.addEventListener("blur", onBlur, true);
+			if (scope.nodeType === Node.DOCUMENT_FRAGMENT_NODE && scope.host) scope.host.setAttribute("data-js-focus-visible", "");
+			else if (scope.nodeType === Node.DOCUMENT_NODE) {
+				document.documentElement.classList.add("js-focus-visible");
+				document.documentElement.setAttribute("data-js-focus-visible", "");
+			}
+		}
+		if (typeof window !== "undefined" && typeof document !== "undefined") {
+			window.applyFocusVisiblePolyfill = applyFocusVisiblePolyfill;
+			var event;
+			try {
+				event = new CustomEvent("focus-visible-polyfill-ready");
+			} catch (error) {
+				event = document.createEvent("CustomEvent");
+				event.initCustomEvent("focus-visible-polyfill-ready", false, false, {});
+			}
+			window.dispatchEvent(event);
+		}
+		if (typeof document !== "undefined") applyFocusVisiblePolyfill(document);
+	}));
+}));
+
+//#endregion
+export default require_focus_visible();
+
+export { require_focus_visible };

package/dist/packages/styled-react/src/components/ActionList.js

@@ -0,0 +1,107 @@
+import { sx } from "../sx.js";
+import styled from "styled-components";
+import { ActionList } from "@primer/react";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/ActionList.tsx
+const StyledActionList = styled(ActionList).withConfig({ shouldForwardProp: (prop) => prop !== "sx" }).withConfig({
+	displayName: "ActionList__StyledActionList",
+	componentId: "sc-hw2362-0"
+})(["", ""], sx);
+const ActionListImpl = /* @__PURE__ */ React.forwardRef(function ActionListImpl$1({ as, ...rest }, ref) {
+	return /* @__PURE__ */ jsx(StyledActionList, {
+		ref,
+		...rest,
+		...as ? { forwardedAs: as } : {}
+	});
+});
+const StyledActionListLinkItem = styled(ActionList.LinkItem).withConfig({ shouldForwardProp: (prop) => prop !== "sx" }).withConfig({
+	displayName: "ActionList__StyledActionListLinkItem",
+	componentId: "sc-hw2362-1"
+})(["", ""], sx);
+const ActionListLinkItem = /* @__PURE__ */ React.forwardRef(({ children, as, ...props }, ref) => /* @__PURE__ */ jsx(StyledActionListLinkItem, {
+	ref,
+	...props,
+	...as ? { forwardedAs: as } : {},
+	children
+}));
+ActionListLinkItem.displayName = "ActionList.LinkItem";
+const StyledActionListTrailingAction = styled(ActionList.TrailingAction).withConfig({ shouldForwardProp: (prop) => prop !== "sx" }).withConfig({
+	displayName: "ActionList__StyledActionListTrailingAction",
+	componentId: "sc-hw2362-2"
+})(["", ""], sx);
+const ActionListTrailingAction = /* @__PURE__ */ React.forwardRef((props, ref) => {
+	const { as, ...rest } = props;
+	return /* @__PURE__ */ jsx(StyledActionListTrailingAction, {
+		...rest,
+		...as ? { forwardedAs: as } : {},
+		ref
+	});
+});
+const StyledActionListItem = styled(ActionList.Item).withConfig({ shouldForwardProp: (prop) => prop !== "sx" }).withConfig({
+	displayName: "ActionList__StyledActionListItem",
+	componentId: "sc-hw2362-3"
+})(["", ""], sx);
+const ActionListItem = /* @__PURE__ */ React.forwardRef(({ children, as, ...props }, ref) => /* @__PURE__ */ jsx(StyledActionListItem, {
+	ref,
+	...props,
+	...as ? { forwardedAs: as } : {},
+	children
+}));
+const StyledActionListGroup = styled(ActionList.Group).withConfig({ shouldForwardProp: (prop) => prop !== "sx" }).withConfig({
+	displayName: "ActionList__StyledActionListGroup",
+	componentId: "sc-hw2362-4"
+})(["", ""], sx);
+const ActionListGroup = ({ children, as, ...props }) => /* @__PURE__ */ jsx(StyledActionListGroup, {
+	...props,
+	...as ? { forwardedAs: as } : {},
+	children
+});
+ActionListGroup.displayName = "ActionList.Group";
+const ActionListDivider = styled(ActionList.Divider).withConfig({ shouldForwardProp: (prop) => prop !== "sx" }).withConfig({
+	displayName: "ActionList__ActionListDivider",
+	componentId: "sc-hw2362-5"
+})(["", ""], sx);
+const StyledActionListLeadingVisual = styled(ActionList.LeadingVisual).withConfig({ shouldForwardProp: (prop) => prop !== "sx" }).withConfig({
+	displayName: "ActionList__StyledActionListLeadingVisual",
+	componentId: "sc-hw2362-6"
+})(["", ""], sx);
+const ActionListLeadingVisual = ({ children, as, ...props }) => /* @__PURE__ */ jsx(StyledActionListLeadingVisual, {
+	...props,
+	...as ? { forwardedAs: as } : {},
+	children
+});
+ActionListLeadingVisual.displayName = "ActionList.LeadingVisual";
+const StyledActionListTrailingVisual = styled(ActionList.TrailingVisual).withConfig({ shouldForwardProp: (prop) => prop !== "sx" }).withConfig({
+	displayName: "ActionList__StyledActionListTrailingVisual",
+	componentId: "sc-hw2362-7"
+})(["", ""], sx);
+const ActionListTrailingVisual = ({ children, as, ...props }) => /* @__PURE__ */ jsx(StyledActionListTrailingVisual, {
+	...props,
+	...as ? { forwardedAs: as } : {},
+	children
+});
+ActionListTrailingVisual.displayName = "ActionList.TrailingVisual";
+const ActionList$1 = Object.assign(ActionListImpl, {
+	Item: ActionListItem,
+	LinkItem: ActionListLinkItem,
+	Group: ActionListGroup,
+	GroupHeading: ActionList.GroupHeading,
+	Divider: ActionListDivider,
+	Description: ActionList.Description,
+	LeadingVisual: ActionListLeadingVisual,
+	TrailingVisual: ActionListTrailingVisual,
+	Heading: ActionList.Heading,
+	TrailingAction: ActionListTrailingAction
+});
+ActionListItem.__SLOT__ = ActionList.Item.__SLOT__;
+ActionListLinkItem.__SLOT__ = ActionList.LinkItem.__SLOT__;
+ActionListGroup.__SLOT__ = ActionList.Group.__SLOT__;
+ActionListDivider.__SLOT__ = ActionList.Divider.__SLOT__;
+ActionListLeadingVisual.__SLOT__ = ActionList.LeadingVisual.__SLOT__;
+ActionListTrailingVisual.__SLOT__ = ActionList.TrailingVisual.__SLOT__;
+ActionListTrailingAction.__SLOT__ = ActionList.TrailingAction.__SLOT__;
+
+//#endregion
+export { ActionList$1 as ActionList };

package/dist/packages/styled-react/src/components/ActionMenu.js

@@ -0,0 +1,19 @@
+import { sx } from "../sx.js";
+import styled from "styled-components";
+import { ActionMenu } from "@primer/react";
+
+//#region src/components/ActionMenu.tsx
+const ActionMenuOverlay = styled(ActionMenu.Overlay).withConfig({ shouldForwardProp: (prop) => prop !== "sx" }).withConfig({
+	displayName: "ActionMenu__ActionMenuOverlay",
+	componentId: "sc-w5s60e-0"
+})(["", ""], sx);
+const ActionMenu$1 = Object.assign(ActionMenu, {
+	Button: ActionMenu.Button,
+	Anchor: ActionMenu.Anchor,
+	Overlay: ActionMenuOverlay,
+	Divider: ActionMenu.Divider
+});
+ActionMenuOverlay.__SLOT__ = ActionMenu.Overlay.__SLOT__;
+
+//#endregion
+export { ActionMenu$1 as ActionMenu };

package/dist/packages/styled-react/src/components/Autocomplete.js

@@ -0,0 +1,23 @@
+import { sx } from "../sx.js";
+import styled from "styled-components";
+import { Autocomplete } from "@primer/react";
+
+//#region src/components/Autocomplete.tsx
+const AutocompleteOverlay = styled(Autocomplete.Overlay).withConfig({ shouldForwardProp: (prop) => prop !== "sx" }).withConfig({
+	displayName: "Autocomplete__AutocompleteOverlay",
+	componentId: "sc-j8ax2e-0"
+})(["", ""], sx);
+const AutocompleteInput = styled(Autocomplete.Input).withConfig({ shouldForwardProp: (prop) => prop !== "sx" }).withConfig({
+	displayName: "Autocomplete__AutocompleteInput",
+	componentId: "sc-j8ax2e-1"
+})(["", ""], sx);
+const Autocomplete$1 = Object.assign(Autocomplete, {
+	Context: Autocomplete.Context,
+	Input: AutocompleteInput,
+	Menu: Autocomplete.Menu,
+	Overlay: AutocompleteOverlay
+});
+AutocompleteOverlay.__SLOT__ = Autocomplete.Overlay.__SLOT__;
+
+//#endregion
+export { Autocomplete$1 as Autocomplete };

package/dist/packages/styled-react/src/components/Avatar.js

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

package/dist/{components → packages/styled-react/src/components}/BaseStyles.js

@@ -1,51 +1,33 @@
-import { clsx } from 'clsx';
-import { useTheme } from './ThemeProvider.js';
-import 'focus-visible';
-import { createGlobalStyle } from 'styled-components';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { useTheme } from "./ThemeProvider.js";
+import { clsx } from "../../../../node_modules/clsx/dist/clsx.js";
+import { require_focus_visible } from "../../../../node_modules/focus-visible/dist/focus-visible.js";
+import { createGlobalStyle } from "styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
 
+//#region src/components/BaseStyles.tsx
+var import_focus_visible = require_focus_visible();
 const GlobalStyle = createGlobalStyle(["*{box-sizing:border-box;}body{margin:0;}table{border-collapse:collapse;}[data-color-mode='light'] input{color-scheme:light;}[data-color-mode='dark'] input{color-scheme:dark;}@media (prefers-color-scheme:light){[data-color-mode='auto'][data-light-theme*='light']{color-scheme:light;}}@media (prefers-color-scheme:dark){[data-color-mode='auto'][data-dark-theme*='dark']{color-scheme:dark;}}[role='button']:focus:not(:focus-visible):not(:global(.focus-visible)),[role='tabpanel'][tabindex='0']:focus:not(:focus-visible):not(:global(.focus-visible)),button:focus:not(:focus-visible):not(:global(.focus-visible)),summary:focus:not(:focus-visible):not(:global(.focus-visible)),a:focus:not(:focus-visible):not(:global(.focus-visible)){outline:none;box-shadow:none;}[tabindex='0']:focus:not(:focus-visible):not(:global(.focus-visible)),details-dialog:focus:not(:focus-visible):not(:global(.focus-visible)){outline:none;}.BaseStyles{font-family:var(--BaseStyles-fontFamily,var(--fontStack-system));line-height:var(--BaseStyles-lineHeight,1.5);color:var(--BaseStyles-fgColor,var(--fgColor-default));&:has([data-color-mode='light']){input &{color-scheme:light;}}&:has([data-color-mode='dark']){input &{color-scheme:dark;}}:where(a:not([class*='prc-']):not([class*='PRC-']):not([class*='Primer_Brand__'])){color:var(--fgColor-accent,var(--color-accent-fg));text-decoration:none;&:hover{text-decoration:underline;}}}"]);
-function BaseStyles({
-  children,
-  color,
-  fontFamily,
-  lineHeight,
-  className,
-  as: Component = 'div',
-  style,
-  ...rest
-}) {
-  const {
-    colorMode,
-    colorScheme,
-    dayScheme,
-    nightScheme
-  } = useTheme();
-  const baseStyles = {
-    ['--BaseStyles-fgColor']: color,
-    ['--BaseStyles-fontFamily']: fontFamily,
-    ['--BaseStyles-lineHeight']: lineHeight
-  };
-  return /*#__PURE__*/jsxs(Component, {
-    className: clsx('BaseStyles', className),
-    "data-portal-root": true
-    /**
-     * We need to map valid primer/react color modes onto valid color modes for primer/primitives
-     * valid color modes for primer/primitives: auto | light | dark
-     * valid color modes for primer/primer: auto | day | night | light | dark
-     */,
-    "data-color-mode": colorMode === 'auto' ? 'auto' : colorScheme?.includes('dark') ? 'dark' : 'light',
-    "data-light-theme": dayScheme,
-    "data-dark-theme": nightScheme,
-    style: {
-      ...baseStyles,
-      ...style
-    },
-    ...rest,
-    children: [/*#__PURE__*/jsx(GlobalStyle, {
-      colorScheme: colorScheme?.includes('dark') ? 'dark' : 'light'
-    }), children]
-  });
+function BaseStyles({ children, color, fontFamily, lineHeight, className, as: Component = "div", style, ...rest }) {
+	const { colorMode, colorScheme, dayScheme, nightScheme } = useTheme();
+	const baseStyles = {
+		["--BaseStyles-fgColor"]: color,
+		["--BaseStyles-fontFamily"]: fontFamily,
+		["--BaseStyles-lineHeight"]: lineHeight
+	};
+	return /* @__PURE__ */ jsxs(Component, {
+		className: clsx("BaseStyles", className),
+		"data-portal-root": true,
+		"data-color-mode": colorMode === "auto" ? "auto" : colorScheme?.includes("dark") ? "dark" : "light",
+		"data-light-theme": dayScheme,
+		"data-dark-theme": nightScheme,
+		style: {
+			...baseStyles,
+			...style
+		},
+		...rest,
+		children: [/* @__PURE__ */ jsx(GlobalStyle, { colorScheme: colorScheme?.includes("dark") ? "dark" : "light" }), children]
+	});
 }
 
-export { BaseStyles };
+//#endregion
+export { BaseStyles };

package/dist/packages/styled-react/src/components/Box.js

@@ -0,0 +1,23 @@
+import { sx } from "../sx.js";
+import styled from "styled-components";
+import { background, border, color, flexbox, grid, layout, position, shadow, space, typography } from "styled-system";
+
+//#region src/components/Box.tsx
+/**
+* @deprecated The Box component is deprecated. Replace with a `div` or
+* appropriate HTML element instead, with CSS modules for styling.
+* @see https://github.com/primer/react/blob/main/contributor-docs/migration-from-box.md
+*/
+const Box = styled.div.withConfig({
+	displayName: "Box",
+	componentId: "sc-62in7e-0"
+})(space, color, typography, layout, flexbox, grid, background, border, position, shadow, sx);
+/**
+* @deprecated The Box component is deprecated. Replace with a `div` or
+* appropriate HTML element instead, with CSS modules for styling.
+* @see https://github.com/primer/react/blob/main/contributor-docs/migration-from-box.md
+*/
+var Box_default = Box;
+
+//#endregion
+export { Box, Box_default as default };

package/dist/packages/styled-react/src/components/Breadcrumbs.js

@@ -0,0 +1,28 @@
+import { sx } from "../sx.js";
+import styled from "styled-components";
+import { Breadcrumbs } from "@primer/react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Breadcrumbs.tsx
+const BreadcrumbsImpl = styled(Breadcrumbs).withConfig({ shouldForwardProp: (prop) => prop !== "sx" }).withConfig({
+	displayName: "Breadcrumbs__BreadcrumbsImpl",
+	componentId: "sc-1qj8pw-0"
+})(["", ""], sx);
+const StyledBreadcrumbsItem = styled(Breadcrumbs.Item).withConfig({ shouldForwardProp: (prop) => prop !== "sx" }).withConfig({
+	displayName: "Breadcrumbs__StyledBreadcrumbsItem",
+	componentId: "sc-1qj8pw-1"
+})(["", ""], sx);
+function BreadcrumbsItem({ as, ...props }) {
+	return /* @__PURE__ */ jsx(StyledBreadcrumbsItem, {
+		...props,
+		...as ? { forwardedAs: as } : {}
+	});
+}
+const Breadcrumbs$1 = Object.assign(BreadcrumbsImpl, { Item: BreadcrumbsItem });
+/**
+* @deprecated Use the `Breadcrumbs` component instead (i.e. `<Breadcrumb>` → `<Breadcrumbs>`)
+*/
+const Breadcrumb = Breadcrumbs$1;
+
+//#endregion
+export { Breadcrumb, Breadcrumbs$1 as Breadcrumbs };