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

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

@@ -1,11 +1,10 @@
 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";
+import { clsx } from "clsx";
+import "focus-visible";
 
 //#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();

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

@@ -1,13 +1,11 @@
-import { __toESM } from "../../../../_virtual/rolldown_runtime.js";
-import { require_cjs } from "../../../../node_modules/deepmerge/dist/cjs.js";
 import { ThemeProvider } from "styled-components";
+import deepmerge from "deepmerge";
 import { theme, useId, useSyncedState } from "@primer/react";
 import React from "react";
 import ReactDOM from "react-dom";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/ThemeProvider.tsx
-var import_cjs = /* @__PURE__ */ __toESM(require_cjs());
 const defaultColorMode = "day";
 const defaultDayScheme = "light";
 const defaultNightScheme = "dark";
@@ -138,12 +136,12 @@ function applyColorScheme(theme$1, colorScheme) {
 		console.error(`\`${colorScheme}\` scheme not defined in \`theme.colorSchemes\``);
 		const defaultColorScheme = Object.keys(theme$1.colorSchemes)[0];
 		return {
-			resolvedTheme: (0, import_cjs.default)(theme$1, theme$1.colorSchemes[defaultColorScheme]),
+			resolvedTheme: deepmerge(theme$1, theme$1.colorSchemes[defaultColorScheme]),
 			resolvedColorScheme: defaultColorScheme
 		};
 	}
 	return {
-		resolvedTheme: (0, import_cjs.default)(theme$1, theme$1.colorSchemes[colorScheme]),
+		resolvedTheme: deepmerge(theme$1, theme$1.colorSchemes[colorScheme]),
 		resolvedColorScheme: colorScheme
 	};
 }

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

@@ -1,7 +1,6 @@
-"use client";
 'use client';
 
-import { import_cjs, sx } from "./sx.js";
+import { merge, sx } from "./sx.js";
 import { Box } from "./components/Box.js";
 import { ThemeProvider, useColorSchemeVar, useTheme } from "./components/ThemeProvider.js";
 import { BaseStyles } from "./components/BaseStyles.js";
@@ -46,5 +45,4 @@ import { Truncate } from "./components/Truncate.js";
 import { UnderlineNav } from "./components/UnderlineNav.js";
 import { Details, ProgressBar, theme } from "@primer/react";
 
-var merge = import_cjs.default;
 export { ActionList, ActionMenu, Autocomplete, Avatar, BaseStyles, Box, Breadcrumb, Breadcrumbs, ButtonComponent as Button, Checkbox, CheckboxGroup, CircleBadge, CounterLabel, Details, Dialog, Flash, FormControl, Header, Heading, IconButton, Label, Link, LinkButton, NavList, Overlay, PageHeader, ProgressBar, RadioGroup, RelativeTime, SegmentedControl, Select, Spinner, StateLabel, SubNav, Text, TextInput, Textarea, ThemeProvider, Timeline, ToggleSwitch, Token, Tooltip, Truncate, UnderlineNav, merge, sx, theme, get as themeGet, useColorSchemeVar, useTheme };

package/dist/sx.js

@@ -0,0 +1,9 @@
+import css from "@styled-system/css";
+import merge from "deepmerge";
+
+//#region src/sx.ts
+const sx = (props) => css(props.sx);
+var sx_default = sx;
+
+//#endregion
+export { sx_default as default, merge, sx };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/styled-react",
-  "version": "0.0.0-20251202220556",
+  "version": "0.0.0-20251202222316",
   "type": "module",
   "exports": {
     ".": {
@@ -38,12 +38,15 @@
     "@types/styled-system": "^5.1.23",
     "@types/styled-system__css": "^5.0.16",
     "@types/styled-system__theme-get": "^5.0.1",
+    "clsx": "^2.1.1",
+    "deepmerge": "^4.3.1",
+    "focus-visible": "^5.2.1",
     "styled-system": "^5.1.5"
   },
   "devDependencies": {
     "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.28.5",
-    "@primer/react": "0.0.0-20251202220556",
+    "@primer/react": "0.0.0-20251202222316",
     "@rollup/plugin-babel": "^6.1.0",
     "@types/react": "18.3.11",
     "@types/react-dom": "18.3.1",
@@ -60,7 +63,7 @@
     "typescript": "^5.9.2"
   },
   "peerDependencies": {
-    "@primer/react": "0.0.0-20251202220556",
+    "@primer/react": "0.0.0-20251202222316",
     "@types/react": "18.x || 19.x",
     "@types/react-dom": "18.x || 19.x",
     "@types/react-is": "18.x || 19.x",

package/dist/_virtual/rolldown_runtime.js

@@ -1,29 +0,0 @@
-//#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

@@ -1,17 +0,0 @@
-//#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

@@ -1,88 +0,0 @@
-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

@@ -1,212 +0,0 @@
-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/sx.js

@@ -1,11 +0,0 @@
-import { __toESM } from "../../../_virtual/rolldown_runtime.js";
-import { require_cjs } from "../../../node_modules/deepmerge/dist/cjs.js";
-import css from "@styled-system/css";
-
-//#region src/sx.ts
-var import_cjs = /* @__PURE__ */ __toESM(require_cjs());
-const sx = (props) => css(props.sx);
-var sx_default = sx;
-
-//#endregion
-export { sx_default as default, import_cjs, sx };