styled-components 6.3.12 → 6.4.0-prerelease.0

package/native/dist/test/veryLargeUnionType.d.ts

@@ -0,0 +1 @@
+export type VeryLargeUnionType = 'add-clip' | 'add-column-left' | 'add-column-right' | 'add-location' | 'add-row-bottom' | 'add-row-top' | 'add-to-artifact' | 'add-to-folder' | 'add' | 'aimpoints-target' | 'airplane' | 'align-center' | 'align-justify' | 'align-left' | 'align-right' | 'alignment-bottom' | 'alignment-horizontal-center' | 'alignment-left' | 'alignment-right' | 'alignment-top' | 'alignment-vertical-center' | 'anchor' | 'annotation' | 'antenna' | 'app-header' | 'application' | 'applications' | 'archive' | 'area-of-interest' | 'array-boolean' | 'array-date' | 'array-floating-point' | 'array-numeric' | 'array-string' | 'array-timestamp' | 'array' | 'arrow-bottom-left' | 'arrow-bottom-right' | 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrow-top-left' | 'arrow-top-right' | 'arrow-up' | 'arrows-horizontal' | 'arrows-vertical' | 'asterisk' | 'at' | 'automatic-updates' | 'axle' | 'backlink' | 'badge' | 'ban-circle' | 'bank-account' | 'barcode' | 'blank' | 'blocked-person' | 'bold' | 'book' | 'bookmark' | 'box' | 'briefcase' | 'bring-data' | 'bug' | 'buggy' | 'build' | 'calculator' | 'calendar' | 'camera' | 'caret-down' | 'caret-left' | 'caret-right' | 'caret-up' | 'cargo-ship' | 'cell-tower' | 'changes' | 'chart' | 'chat' | 'chevron-backward' | 'chevron-down' | 'chevron-forward' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'circle-arrow-down' | 'circle-arrow-left' | 'circle-arrow-right' | 'circle-arrow-up' | 'circle' | 'citation' | 'clean' | 'clip' | 'clipboard' | 'cloud-download' | 'cloud-upload' | 'cloud' | 'code-block' | 'code' | 'cog' | 'collapse-all' | 'color-fill' | 'column-layout' | 'comment' | 'comparison' | 'compass' | 'compressed' | 'confirm' | 'console' | 'contrast' | 'control' | 'credit-card' | 'cross-circle' | 'cross' | 'crown' | 'cube-add' | 'cube-remove' | 'cube' | 'curved-range-chart' | 'cut' | 'cycle' | 'dashboard' | 'data-connection' | 'data-lineage' | 'database' | 'delete' | 'delta' | 'derive-column' | 'desktop' | 'diagnosis' | 'diagram-tree' | 'direction-left' | 'direction-right' | 'disable' | 'divide' | 'document-open' | 'document-share' | 'document' | 'dollar' | 'dot' | 'double-caret-horizontal' | 'double-caret-vertical' | 'double-chevron-down' | 'double-chevron-left' | 'double-chevron-right' | 'double-chevron-up' | 'doughnut-chart' | 'download' | 'drag-handle-horizontal' | 'drag-handle-vertical' | 'draw' | 'drawer-left-filled' | 'drawer-left' | 'drawer-right-filled' | 'drawer-right' | 'drive-time' | 'duplicate' | 'edit' | 'eject' | 'emoji' | 'endorsed' | 'envelope' | 'equals' | 'eraser' | 'error' | 'euro' | 'exchange' | 'exclude-row' | 'expand-all' | 'export' | 'eye-off' | 'eye-on' | 'eye-open' | 'fast-backward' | 'fast-forward' | 'feed-subscribed' | 'feed' | 'film' | 'filter-keep' | 'filter-list' | 'filter-open' | 'filter-remove' | 'filter' | 'flag' | 'flame' | 'flash' | 'floating-point' | 'floppy-disk' | 'flow-branch' | 'flow-end' | 'flow-linear' | 'flow-review-branch' | 'flow-review' | 'flows' | 'folder-close' | 'folder-new' | 'folder-open' | 'folder-shared-open' | 'folder-shared' | 'follower' | 'following' | 'font' | 'fork' | 'form' | 'fuel' | 'full-circle' | 'full-stacked-chart' | 'fullscreen' | 'function' | 'gantt-chart' | 'geofence' | 'geolocation' | 'geosearch' | 'git-branch' | 'git-commit' | 'git-merge' | 'git-new-branch' | 'git-pull' | 'git-push' | 'git-repo' | 'glass' | 'globe-network' | 'globe' | 'graph-remove' | 'graph' | 'greater-than-or-equal-to' | 'greater-than' | 'grid-view' | 'grid' | 'group-objects' | 'grouped-bar-chart' | 'hand-down' | 'hand-left' | 'hand-right' | 'hand-up' | 'hand' | 'hat' | 'header-one' | 'header-three' | 'header-two' | 'header' | 'headset' | 'heart-broken' | 'heart' | 'heat-grid' | 'heatmap' | 'helicopter' | 'help' | 'helper-management' | 'high-priority' | 'high-voltage-pole' | 'highlight' | 'history' | 'home' | 'horizontal-bar-chart-asc' | 'horizontal-bar-chart-desc' | 'horizontal-bar-chart' | 'horizontal-distribution' | 'horizontal-inbetween' | 'hurricane' | 'id-number' | 'image-rotate-left' | 'image-rotate-right' | 'import' | 'inbox-filtered' | 'inbox-geo' | 'inbox-search' | 'inbox-update' | 'inbox' | 'info-sign' | 'inheritance' | 'inherited-group' | 'inner-join' | 'insert' | 'intelligence' | 'intersection' | 'ip-address' | 'issue-closed' | 'issue-new' | 'issue' | 'italic' | 'join-table' | 'key-backspace' | 'key-command' | 'key-control' | 'key-delete' | 'key-enter' | 'key-escape' | 'key-option' | 'key-shift' | 'key-tab' | 'key' | 'known-vehicle' | 'lab-test' | 'label' | 'layer-outline' | 'layer' | 'layers' | 'layout-auto' | 'layout-balloon' | 'layout-circle' | 'layout-grid' | 'layout-group-by' | 'layout-hierarchy' | 'layout-linear' | 'layout-skew-grid' | 'layout-sorted-clusters' | 'layout' | 'learning' | 'left-join' | 'less-than-or-equal-to' | 'less-than' | 'lifesaver' | 'lightbulb' | 'lightning' | 'link' | 'list-columns' | 'list-detail-view' | 'list' | 'locate' | 'lock' | 'locomotive' | 'log-in' | 'log-out' | 'low-voltage-pole' | 'manual' | 'manually-entered-data' | 'many-to-many' | 'many-to-one' | 'map-create' | 'map-marker' | 'map' | 'maximize' | 'media' | 'menu-closed' | 'menu-open' | 'menu' | 'merge-columns' | 'merge-links' | 'minimize' | 'minus' | 'mobile-phone' | 'mobile-video' | 'modal-filled' | 'modal' | 'model' | 'moon' | 'more' | 'mountain' | 'move' | 'mugshot' | 'multi-select' | 'music' | 'nest' | 'new-drawing' | 'new-grid-item' | 'new-layer' | 'new-layers' | 'new-link' | 'new-object' | 'new-person' | 'new-prescription' | 'new-text-box' | 'ninja' | 'not-equal-to' | 'notifications-snooze' | 'notifications-updated' | 'notifications' | 'numbered-list' | 'numerical' | 'office' | 'offline' | 'oil-field' | 'one-column' | 'one-to-many' | 'one-to-one' | 'open-application' | 'outdated' | 'page-layout' | 'panel-stats' | 'panel-table' | 'paperclip' | 'paragraph' | 'path-search' | 'path' | 'pause' | 'people' | 'percentage' | 'person' | 'phone' | 'pie-chart' | 'pin' | 'pivot-table' | 'pivot' | 'play' | 'playbook' | 'plus' | 'polygon-filter' | 'power' | 'predictive-analysis' | 'prescription' | 'presentation' | 'print' | 'projects' | 'properties' | 'property' | 'publish-function' | 'pulse' | 'rain' | 'random' | 'record' | 'rect-height' | 'rect-width' | 'rectangle' | 'redo' | 'refresh' | 'regex' | 'regression-chart' | 'remove-column-left' | 'remove-column-right' | 'remove-column' | 'remove-row-bottom' | 'remove-row-top' | 'remove' | 'repeat' | 'reset' | 'resolve' | 'rig' | 'right-join' | 'ring' | 'rocket-slant' | 'rocket' | 'rotate-document' | 'rotate-page' | 'route' | 'satellite' | 'saved' | 'scatter-plot' | 'search-around' | 'search-template' | 'search-text' | 'search' | 'segmented-control' | 'select' | 'selection' | 'send-message' | 'send-to-graph' | 'send-to-map' | 'send-to' | 'sensor' | 'series-add' | 'series-configuration' | 'series-derived' | 'series-filtered' | 'series-search' | 'settings' | 'shapes' | 'share' | 'shared-filter' | 'shield' | 'ship' | 'shop' | 'shopping-cart' | 'signal-search' | 'sim-card' | 'slash' | 'small-cross' | 'small-info-sign' | 'small-minus' | 'small-plus' | 'small-square' | 'small-tick' | 'snowflake' | 'social-media' | 'sort-alphabetical-desc' | 'sort-alphabetical' | 'sort-asc' | 'sort-desc' | 'sort-numerical-desc' | 'sort-numerical' | 'sort' | 'split-columns' | 'square' | 'stacked-chart' | 'stadium-geometry' | 'star-empty' | 'star' | 'step-backward' | 'step-chart' | 'step-forward' | 'stop' | 'stopwatch' | 'strikethrough' | 'style' | 'subscript' | 'superscript' | 'swap-horizontal' | 'swap-vertical' | 'switch' | 'symbol-circle' | 'symbol-cross' | 'symbol-diamond' | 'symbol-rectangle' | 'symbol-square' | 'symbol-triangle-down' | 'symbol-triangle-up' | 'syringe' | 'tag' | 'take-action' | 'tank' | 'target' | 'taxi' | 'temperature' | 'text-highlight' | 'th-derived' | 'th-disconnect' | 'th-filtered' | 'th-list' | 'th' | 'third-party' | 'thumbs-down' | 'thumbs-up' | 'tick-circle' | 'tick' | 'time' | 'timeline-area-chart' | 'timeline-bar-chart' | 'timeline-events' | 'timeline-line-chart' | 'tint' | 'torch' | 'tractor' | 'train' | 'translate' | 'trash' | 'tree' | 'trending-down' | 'trending-up' | 'truck' | 'two-columns' | 'unarchive' | 'underline' | 'undo' | 'ungroup-objects' | 'unknown-vehicle' | 'unlock' | 'unpin' | 'unresolve' | 'updated' | 'upload' | 'user' | 'variable' | 'vertical-bar-chart-asc' | 'vertical-bar-chart-desc' | 'vertical-distribution' | 'vertical-inbetween' | 'video' | 'virus' | 'volume-down' | 'volume-off' | 'volume-up' | 'walk' | 'warning-sign' | 'waterfall-chart' | 'waves' | 'widget-button' | 'widget-footer' | 'widget-header' | 'widget' | 'wind' | 'wrench' | 'zoom-in' | 'zoom-out' | 'zoom-to-fit';

package/native/dist/types.d.ts

@@ -132,8 +132,11 @@ export type PolymorphicComponentProps<R extends Runtime, BaseProps extends BaseO
  * props from the given rendering target to get proper typing for
  * any specialized props in the target component.
  */
-export interface PolymorphicComponent<R extends Runtime, BaseProps extends BaseObject> extends React.ForwardRefExoticComponent<BaseProps> {
-    <AsTarget extends StyledTarget<R> | void = void, ForwardedAsTarget extends StyledTarget<R> | void = void>(props: PolymorphicComponentProps<R, BaseProps, AsTarget, ForwardedAsTarget>): React.JSX.Element;
+export interface PolymorphicComponent<R extends Runtime, BaseProps extends BaseObject> extends React.ForwardRefExoticComponent<BaseProps & {
+    as?: StyledTarget<R> | undefined;
+    forwardedAs?: StyledTarget<R> | undefined;
+}> {
+    <AsTarget extends StyledTarget<R> | void = void, ForwardedAsTarget extends StyledTarget<R> | void = void>(props: PolymorphicComponentProps<R, BaseProps, AsTarget, ForwardedAsTarget> & React.RefAttributes<any>): React.JSX.Element;
 }
 export interface IStyledComponentBase<R extends Runtime, Props extends BaseObject = BaseObject> extends PolymorphicComponent<R, Props>, IStyledStatics<R, Props>, StyledComponentBrand {
     defaultProps?: (ExecutionProps & Partial<Props>) | undefined;
@@ -210,6 +213,15 @@ export interface StyledObject<Props extends BaseObject = BaseObject> extends CSS
  * {@link DefaultTheme}.
  */
 export type CSSProp = Interpolation<any>;
+/**
+ * @deprecated Use the built-in NoInfer from TypeScript 5.4+ directly.
+ * Kept for backward compatibility.
+ */
 export type NoInfer<T> = [T][T extends any ? 0 : never];
-export type Substitute<A extends BaseObject, B extends BaseObject> = FastOmit<A, keyof B> & B;
+export type Substitute<A extends BaseObject, B extends BaseObject> = keyof B extends never ? A : FastOmit<A, keyof B> & B;
+/**
+ * Makes keys in K optional while keeping all others required.
+ * Used to make attrs-provided props optional on the final component.
+ */
+export type MakeAttrsOptional<P extends BaseObject, K extends keyof any> = keyof K extends never ? P : FastOmit<P, K & keyof P> & Partial<Pick<P, K & keyof P>>;
 export type InsertionTarget = HTMLElement | ShadowRoot;

package/native/dist/utils/nonce.d.ts

@@ -1 +1,3 @@
-export default function getNonce(): string | null;
+/** @internal Reset the nonce cache (for testing only). */
+export declare function resetNonceCache(): void;
+export default function getNonce(): string | undefined;

package/native/dist/utils/rawElement.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+/**
+ * Creates a React element as a raw object, bypassing React.createElement.
+ * ~60-120x faster than React.createElement for the same output.
+ *
+ * Compatibility: React 16.8+. The $$typeof symbol is auto-detected.
+ * - React 16-18: reads ref from element.ref
+ * - React 19: reads ref from element.props.ref
+ * Both are set correctly when ref is in props AND on the element.
+ */
+export declare function rawElement(type: any, props: any, ref?: any, key?: any): React.ReactElement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "styled-components",
-  "version": "6.3.12",
+  "version": "6.4.0-prerelease.0",
   "description": "CSS for the <Component> Age. Style components your way with speed, strong typing, and flexibility.",
   "publishConfig": {
     "access": "public"
@@ -14,6 +14,22 @@
     "./dist/styled-components.esm.js": "./dist/styled-components.browser.esm.js"
   },
   "sideEffects": false,
+  "scripts": {
+    "generateErrors": "node scripts/generateErrorMap.js",
+    "typecheck": "tsc --noEmit",
+    "prebuild": "rimraf dist && pnpm run generateErrors && pnpm run typecheck",
+    "build": "rollup -c",
+    "postbuild": "pnpm run size",
+    "pretest": "pnpm run generateErrors",
+    "test": "pnpm run test:web && pnpm run test:native && pnpm run test:types",
+    "test:types": "tsc --noEmit --project tsconfig.test-types.json",
+    "test:web": "jest -c jest.config.main.js",
+    "test:native": "jest -c jest.config.native.js --forceExit",
+    "size": "bundlewatch",
+    "prettier": "prettier src --write",
+    "prettier:check": "prettier src --check",
+    "prepublishOnly": "cp ../../README.md . && pnpm run build"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/styled-components/styled-components.git"
@@ -51,11 +67,15 @@
   },
   "peerDependencies": {
     "react": ">= 16.8.0",
-    "react-dom": ">= 16.8.0"
+    "react-dom": ">= 16.8.0",
+    "react-native": ">= 0.68.0"
   },
   "peerDependenciesMeta": {
     "react-dom": {
       "optional": true
+    },
+    "react-native": {
+      "optional": true
     }
   },
   "devDependencies": {
@@ -129,19 +149,5 @@
   },
   "engines": {
     "node": ">= 16"
-  },
-  "scripts": {
-    "generateErrors": "node scripts/generateErrorMap.js",
-    "typecheck": "tsc --noEmit",
-    "prebuild": "rimraf dist && pnpm run generateErrors && pnpm run typecheck",
-    "build": "rollup -c",
-    "postbuild": "pnpm run size",
-    "pretest": "pnpm run generateErrors",
-    "test": "pnpm run test:web && pnpm run test:native",
-    "test:web": "jest -c jest.config.main.js",
-    "test:native": "jest -c jest.config.native.js --forceExit",
-    "size": "bundlewatch",
-    "prettier": "prettier src --write",
-    "prettier:check": "prettier src --check"
   }
-}
+}