@pyreon/unistyle 0.24.5 → 0.24.6

package/src/index.ts

@@ -1,91 +0,0 @@
-import type { TProvider } from './context'
-import Provider, { context } from './context'
-import type { PyreonTheme } from './enrichTheme'
-import { enrichTheme } from './enrichTheme'
-import type {
-  Breakpoints,
-  CreateMediaQueries,
-  MakeItResponsive,
-  MakeItResponsiveStyles,
-  NormalizeTheme,
-  SortBreakpoints,
-  TransformTheme,
-} from './responsive'
-import {
-  breakpoints,
-  createMediaQueries,
-  makeItResponsive,
-  normalizeTheme,
-  sortBreakpoints,
-  transformTheme,
-} from './responsive'
-import type {
-  AlignContent,
-  AlignContentAlignXKeys,
-  AlignContentAlignYKeys,
-  AlignContentDirectionKeys,
-  ExtendCss,
-  ITheme,
-  Styles,
-  StylesTheme,
-} from './styles'
-import {
-  ALIGN_CONTENT_DIRECTION,
-  ALIGN_CONTENT_MAP_X,
-  ALIGN_CONTENT_MAP_Y,
-  alignContent,
-  extendCss,
-  styles,
-} from './styles'
-import type { BrowserColors, Color, Defaults, PropertyValue, UnitValue } from './types'
-import type { StripUnit, Value, Values } from './units'
-import { stripUnit, value, values } from './units'
-
-export type {
-  AlignContent,
-  AlignContentAlignXKeys,
-  AlignContentAlignYKeys,
-  AlignContentDirectionKeys,
-  Breakpoints,
-  BrowserColors,
-  Color,
-  CreateMediaQueries,
-  Defaults,
-  ExtendCss,
-  ITheme,
-  MakeItResponsive,
-  MakeItResponsiveStyles,
-  NormalizeTheme,
-  PropertyValue,
-  PyreonTheme,
-  SortBreakpoints,
-  StripUnit,
-  Styles,
-  StylesTheme,
-  TProvider,
-  TransformTheme,
-  UnitValue,
-  Value,
-  Values,
-}
-
-export {
-  ALIGN_CONTENT_DIRECTION,
-  ALIGN_CONTENT_MAP_X,
-  ALIGN_CONTENT_MAP_Y,
-  alignContent,
-  breakpoints,
-  context,
-  createMediaQueries,
-  enrichTheme,
-  extendCss,
-  makeItResponsive,
-  normalizeTheme,
-  Provider,
-  sortBreakpoints,
-  stripUnit,
-  styles,
-  transformTheme,
-  value,
-  values,
-}

package/src/manifest.ts

@@ -1,197 +0,0 @@
-import { defineManifest } from '@pyreon/manifest'
-
-export default defineManifest({
-  name: '@pyreon/unistyle',
-  title: 'Responsive CSS Utilities',
-  tagline:
-    'Responsive breakpoints, CSS property mappings, unit utilities, theme enrichment',
-  description:
-    'Foundational responsive-style layer that powers every visual package above it (`elements`, `rocketstyle`, `coolgrid`, `kinetic`). `enrichTheme()` merges a partial user theme with the default breakpoints / spacing / unit utilities so the rest of the system has a complete theme to read. `makeItResponsive()` turns a value or per-breakpoint map into the right CSS for the current screen. `createMediaQueries()` builds breakpoint-keyed media queries; `styles()` generates CSS from a theme; `alignContent()` resolves alignment shorthand to flex / grid CSS. The package is the single source of truth for responsive prop semantics across the UI system.',
-  category: 'browser',
-  features: [
-    'enrichTheme(theme) — merge a partial theme with default breakpoints / spacing / units',
-    'breakpoints() — default responsive breakpoint set',
-    'createMediaQueries(breakpoints) — build breakpoint-keyed media query strings',
-    'makeItResponsive() — resolve a value / array / breakpoint object to CSS for the current screen',
-    'styles(theme) — generate CSS from a theme',
-    'alignContent() — resolve alignX / alignY / direction to flex CSS',
-    'extendCss() — extend a CSS definition with overrides',
-    'stripUnit / value / values — unit-utility helpers',
-    'Provider / context — React-style provider for the theme (used internally by PyreonUI)',
-  ],
-  longExample: `import { enrichTheme, makeItResponsive, createMediaQueries, alignContent } from '@pyreon/unistyle'
-
-// 1. Enrich a partial user theme with defaults — required before passing to PyreonUI
-const theme = enrichTheme({
-  colors: { primary: '#3b82f6', secondary: '#6366f1' },
-  fonts: { body: 'Inter, sans-serif' },
-})
-
-// 2. Build media queries keyed by breakpoint name
-const queries = createMediaQueries(theme.breakpoints)
-// → { xs: '@media (min-width: 0)', sm: '@media (min-width: 640px)', md: '...', ... }
-
-// 3. Responsive props — single value, mobile-first array, or breakpoint object
-const padding = makeItResponsive({ value: [8, 12, 16], property: 'padding', theme })
-// → 'padding: 8px; @media (...) { padding: 12px } @media (...) { padding: 16px }'
-
-const padding2 = makeItResponsive({
-  value: { xs: 8, md: 16, xl: 24 },
-  property: 'padding',
-  theme,
-})
-
-// 4. alignContent maps shorthand to flex CSS
-const flexCss = alignContent({ alignX: 'center', alignY: 'start', direction: 'row' })
-// → 'justify-content: center; align-items: flex-start;'`,
-  api: [
-    {
-      name: 'enrichTheme',
-      kind: 'function',
-      signature: 'enrichTheme(theme: PartialTheme): Theme',
-      summary:
-        'Merge a partial theme with the full default theme (breakpoints, spacing, unit utilities, fallback colors). Always call this before passing a user theme to `PyreonUI` — raw theme objects miss the default breakpoints and spacing scale that the rest of the UI system reads from. Idempotent: enriching an already-enriched theme is a no-op.',
-      example: `import { enrichTheme } from "@pyreon/unistyle"
-
-const theme = enrichTheme({
-  colors: { primary: "#3b82f6", secondary: "#6366f1" },
-  fonts: { body: "Inter, sans-serif" },
-})
-
-// Merges user overrides with default breakpoints, spacing, and units`,
-      mistakes: [
-        'Passing the raw partial theme to `<PyreonUI theme={...}>` without enriching — `theme.breakpoints` is undefined and every responsive prop falls back to the desktop value',
-        'Mutating the theme after passing it to `PyreonUI` — the styler resolver caches off the theme identity; clone + re-enrich for whole-theme swaps',
-      ],
-      seeAlso: ['breakpoints', 'createMediaQueries'],
-    },
-    {
-      name: 'breakpoints',
-      kind: 'function',
-      signature: 'breakpoints(): Breakpoints',
-      summary:
-        'Return the default breakpoint set keyed by name (`xs`, `sm`, `md`, `lg`, `xl`, `xxl`) with min-width values in pixels. The same map is folded into `enrichTheme()` output, so most consumers read `theme.breakpoints` rather than calling this directly. Use it when you need the defaults outside a theme context (e.g. building a custom theme programmatically).',
-      example: `import { breakpoints } from '@pyreon/unistyle'
-
-const bp = breakpoints()
-// { xs: 0, sm: 640, md: 768, lg: 1024, xl: 1280, xxl: 1536 }`,
-      seeAlso: ['enrichTheme', 'createMediaQueries'],
-    },
-    {
-      name: 'createMediaQueries',
-      kind: 'function',
-      signature: 'createMediaQueries(breakpoints: Breakpoints): Record<string, string>',
-      summary:
-        'Build a record of media-query strings keyed by breakpoint name. Each value is a `min-width` query — `xs` is `(min-width: 0)`, `sm` becomes `(min-width: 640px)`, and so on. Used internally by `makeItResponsive()`; expose to consumers when they need to compose custom CSS-in-JS rules outside the responsive-prop pipeline.',
-      example: `import { createMediaQueries, breakpoints } from '@pyreon/unistyle'
-
-const queries = createMediaQueries(breakpoints())
-// { xs: '@media (min-width: 0)', sm: '@media (min-width: 640px)', md: '@media (min-width: 768px)', ... }`,
-      seeAlso: ['breakpoints', 'makeItResponsive'],
-    },
-    {
-      name: 'makeItResponsive',
-      kind: 'function',
-      signature:
-        'makeItResponsive<T>(options: { value: T | T[] | Record<string, T>; property: string; theme: Theme }): string',
-      summary:
-        'Resolve a responsive prop value to CSS for the current screen. Accepts three input shapes: single value (applies at all breakpoints), mobile-first array `[xs, sm, md, lg]` (each entry maps to the next breakpoint), or breakpoint object `{ xs: ..., md: ..., xl: ... }` (named keys map directly). The output is a CSS string with media queries already embedded; insert into a styled component template literal.',
-      example: `import { makeItResponsive } from '@pyreon/unistyle'
-
-makeItResponsive({ value: 16, property: 'padding', theme })
-// → 'padding: 16px;'
-
-makeItResponsive({ value: [8, 12, 16], property: 'padding', theme })
-// → 'padding: 8px; @media (min-width: 640px) { padding: 12px } @media (min-width: 768px) { padding: 16px }'
-
-makeItResponsive({ value: { xs: 8, md: 16, xl: 24 }, property: 'padding', theme })
-// → '@media (min-width: 0) { padding: 8px } @media (min-width: 768px) { padding: 16px } @media (min-width: 1280px) { padding: 24px }'`,
-      mistakes: [
-        'Passing CSS-spec property names (`borderTopWidth`) — unistyle uses property-first naming (`borderWidthTop`); the responsive transformer expects the unistyle convention',
-        'Forgetting to pass an enriched theme — without `theme.breakpoints`, the array form falls back to the first value at every breakpoint',
-      ],
-      seeAlso: ['createMediaQueries', 'styles'],
-    },
-    {
-      name: 'styles',
-      kind: 'function',
-      signature: 'styles(theme: Theme): string',
-      summary:
-        'Generate the CSS string for a complete theme — colors, spacing, fonts, breakpoints, the works. Used to produce the cascade of CSS variables / global declarations that backs every styled component. Most consumers don\\\'t call this directly; the `PyreonUI` provider invokes it internally on theme mount.',
-      example: `import { styles, enrichTheme } from '@pyreon/unistyle'
-
-const theme = enrichTheme({ colors: { primary: '#3b82f6' } })
-const css = styles(theme)
-// → ':root { --color-primary: #3b82f6; --spacing-xs: 4px; ... }'`,
-      seeAlso: ['enrichTheme', 'extendCss'],
-    },
-    {
-      name: 'alignContent',
-      kind: 'function',
-      signature:
-        "alignContent(options: { alignX?: AlignXKey; alignY?: AlignYKey; direction?: 'row' | 'column' | 'inline' | 'rows' }): string",
-      summary:
-        'Resolve `alignX` / `alignY` / `direction` shorthand to the matching flex / grid CSS (`justify-content`, `align-items`). The Element / Row / Column primitives use this internally — it\\\'s exposed for custom layout components that want the same alignment semantics. `direction: "inline"` maps to `row`; `direction: "rows"` maps to `column`.',
-      example: `import { alignContent } from '@pyreon/unistyle'
-
-alignContent({ alignX: 'center', alignY: 'start', direction: 'row' })
-// → 'justify-content: center; align-items: flex-start;'
-
-alignContent({ alignX: 'spaceBetween', direction: 'inline' })
-// → 'justify-content: space-between;'`,
-      seeAlso: ['makeItResponsive'],
-    },
-    {
-      name: 'extendCss',
-      kind: 'function',
-      signature: 'extendCss(base: ExtendCss, override?: ExtendCss): ExtendCss',
-      summary:
-        'Extend a CSS definition (theme block, style descriptor) with overrides — deep-merges nested objects without losing the base. Used by rocketstyle dimension chains to layer dimension-specific CSS over a baseline. The base is not mutated; the result is a new object.',
-      example: `import { extendCss } from '@pyreon/unistyle'
-
-const base = { color: 'red', hover: { color: 'darkred' } }
-const extended = extendCss(base, { hover: { background: 'pink' } })
-// → { color: 'red', hover: { color: 'darkred', background: 'pink' } }`,
-      seeAlso: ['styles'],
-    },
-    {
-      name: 'stripUnit',
-      kind: 'function',
-      signature: 'stripUnit(value: string | number): number',
-      summary:
-        'Strip the unit suffix from a CSS value and return the numeric part (`"16px"` → `16`, `"1.5rem"` → `1.5`). Returns the input unchanged when already a number. Useful for arithmetic on theme values declared as strings (`"16px"`) without manually parsing.',
-      example: `import { stripUnit } from '@pyreon/unistyle'
-
-stripUnit('16px')   // → 16
-stripUnit('1.5rem') // → 1.5
-stripUnit(16)       // → 16`,
-      seeAlso: ['value', 'values'],
-    },
-    {
-      name: 'value',
-      kind: 'function',
-      signature: 'value(input: PropertyValue, fallback?: PropertyValue): UnitValue',
-      summary:
-        'Parse and validate a single property value into a `UnitValue` shape (`{ value, unit }`). Accepts numbers (treated as pixels), strings with units (`"16px"`, `"1rem"`, `"50%"`), or objects already in `UnitValue` form. Optional `fallback` is returned when the input is invalid. The companion `values()` does the same over an array.',
-      example: `import { value } from '@pyreon/unistyle'
-
-value(16)         // → { value: 16, unit: 'px' }
-value('1.5rem')   // → { value: 1.5, unit: 'rem' }
-value('50%')      // → { value: 50, unit: '%' }
-value('garbage', 0) // → { value: 0, unit: 'px' }`,
-      seeAlso: ['stripUnit', 'values'],
-    },
-  ],
-  gotchas: [
-    {
-      label: 'Single source for responsive semantics',
-      note:
-        'Every visual package (`elements`, `rocketstyle`, `coolgrid`, `kinetic`) reads breakpoints / spacing / unit conventions from this package. Override defaults via `enrichTheme()` once at the app root rather than per-component.',
-    },
-    {
-      label: 'CSS property naming',
-      note:
-        'Unistyle uses property-first naming (`borderWidthTop`, `borderColorLeft`) rather than CSS-spec order (`borderTopWidth`, `borderLeftColor`). Stick to the unistyle convention when authoring components — the responsive transformer expects it.',
-    },
-  ],
-})

package/src/responsive/breakpoints.ts

@@ -1,15 +0,0 @@
-const breakpoints = {
-  rootSize: 16,
-  breakpoints: {
-    xs: 0,
-    sm: 576,
-    md: 768,
-    lg: 992,
-    xl: 1200,
-    xxl: 1440,
-  },
-} as const
-
-export type Breakpoints = typeof breakpoints
-
-export default breakpoints

package/src/responsive/createMediaQueries.ts

@@ -1,43 +0,0 @@
-type Css = (strings: TemplateStringsArray, ...values: any[]) => any
-
-export type CreateMediaQueries = <
-  B extends Record<string, number>,
-  R extends number,
-  C extends Css,
->(props: {
-  breakpoints: B
-  rootSize: R
-  css: C
-}) => Record<keyof B, (...args: any[]) => string>
-
-// Implementation uses Record<string, ...> which is widened from Record<keyof B, ...>;
-// the generic constraint on CreateMediaQueries ensures callers get the narrower type.
-const createMediaQueries: CreateMediaQueries = ((props: {
-  breakpoints: Record<string, number>
-  rootSize: number
-  css: Css
-}) => {
-  const { breakpoints, rootSize, css } = props
-
-  // Direct for-in + mutation. The prior `Object.keys.reduce` allocated the
-  // keys array and paid reduce-callback overhead per iteration. Hot at
-  // PyreonUI mount and on any theme/rootSize change. Ported from
-  // vitus-labs `e573e6c4`; measured upstream: +15.9%.
-  const acc: Record<string, (...args: [TemplateStringsArray, ...any[]]) => string> = {}
-  for (const key in breakpoints) {
-    const breakpointValue = breakpoints[key]
-    if (breakpointValue === 0) {
-      acc[key] = (...args: [TemplateStringsArray, ...any[]]) => css(...args)
-    } else if (breakpointValue != null) {
-      const emSize = breakpointValue / rootSize
-      acc[key] = (...args: [TemplateStringsArray, ...any[]]) => css`
-        @media only screen and (min-width: ${emSize}em) {
-          ${css(...args)};
-        }
-      `
-    }
-  }
-  return acc
-}) as CreateMediaQueries
-
-export default createMediaQueries

package/src/responsive/index.ts

@@ -1,15 +0,0 @@
-export type { Breakpoints } from './breakpoints'
-export { default as breakpoints } from './breakpoints'
-export type { CreateMediaQueries } from './createMediaQueries'
-export { default as createMediaQueries } from './createMediaQueries'
-export type { MakeItResponsive, MakeItResponsiveStyles } from './makeItResponsive'
-export { default as makeItResponsive } from './makeItResponsive'
-export type { NormalizeTheme } from './normalizeTheme'
-export { default as normalizeTheme } from './normalizeTheme'
-export { default as optimizeBreakpointDeltas } from './optimizeBreakpointDeltas'
-export type { OptimizeTheme } from './optimizeTheme'
-export { default as optimizeTheme } from './optimizeTheme'
-export type { SortBreakpoints } from './sortBreakpoints'
-export { default as sortBreakpoints } from './sortBreakpoints'
-export type { TransformTheme } from './transformTheme'
-export { default as transformTheme } from './transformTheme'

package/src/responsive/makeItResponsive.ts

@@ -1,223 +0,0 @@
-import { isEmpty } from '@pyreon/ui-core'
-import type createMediaQueries from './createMediaQueries'
-import normalizeTheme from './normalizeTheme'
-import optimizeBreakpointDeltas from './optimizeBreakpointDeltas'
-import optimizeTheme from './optimizeTheme'
-import type sortBreakpoints from './sortBreakpoints'
-import transformTheme from './transformTheme'
-
-type Css = (strings: TemplateStringsArray, ...values: any[]) => any
-
-/**
- * Coerce a styles-callback result to a CSS string for delta optimization.
- * Returns null when the engine's result type can't be stringified cleanly
- * (e.g. styled-components / Emotion objects whose default toString() yields
- * "[object Object]") — caller falls back to the unoptimized path.
- *
- * Styler's CSSResult provides toString() that resolves with empty props,
- * so any function interpolation that needs render-time props must come from
- * the styles-callback closure (theme is destructured at call time, not
- * resolved later). Verified across the project's styles callbacks.
- */
-const stringifyResult = (result: unknown): string | null => {
-  if (result == null) return ''
-  if (typeof result === 'string') return result
-  // CSSResult duck-type fast path: has `strings` (TemplateStringsArray) and
-  // `values`. We know its toString() resolves to clean CSS, so we can skip
-  // the "[object Foo]" validation for the common path.
-  if (typeof result === 'object' && 'strings' in result && 'values' in result) {
-    return String(result)
-  }
-  // Foreign engine result — coerce and validate. Default
-  // Object.prototype.toString → "[object Foo]" → bail out so caller can fall
-  // back to the unoptimized path.
-  const text = String(result)
-  return text.includes('[object ') ? null : text
-}
-
-type CustomTheme = Record<string, unknown>
-
-type Theme = Partial<{
-  rootSize: number
-  breakpoints: Record<string, number>
-  __PYREON__: Partial<{
-    media: ReturnType<typeof createMediaQueries>
-    sortedBreakpoints: ReturnType<typeof sortBreakpoints>
-  }>
-}> &
-  CustomTheme
-
-export type MakeItResponsiveStyles<T extends Partial<Record<string, any>> = any> = ({
-  theme,
-  css,
-  rootSize,
-  globalTheme,
-}: {
-  theme: T
-  css: Css
-  rootSize?: number | undefined
-  globalTheme?: Record<string, any> | undefined
-}) => ReturnType<typeof css> | string | any
-
-export type MakeItResponsive = ({
-  theme,
-  key,
-  css,
-  styles,
-  normalize,
-}: {
-  theme?: CustomTheme
-  key?: string
-  css: any
-  styles: MakeItResponsiveStyles
-  normalize?: boolean
-}) => (props: { theme?: Theme; [prop: string]: any }) => any
-
-/**
- * Per-internal-theme cache:
- *  - `optimized`: the per-breakpoint theme object (`{ xs: {...}, md: {...} }`)
- *    after `normalize → transform → optimize`. Reused as long as the same
- *    `sortedBreakpoints` reference is passed in.
- *  - `rendered`: memoized FINAL output (array of media-wrapped CSSResults),
- *    keyed by the outer `theme` reference. Hit when the same internal theme
- *    AND the same outer theme render again — which is the common case when
- *    the provider value is stable. Avoids re-running renderStyles +
- *    optimizeBreakpointDeltas on every parent re-render.
- */
-interface ThemeCacheEntry {
-  breakpoints: unknown
-  optimized: Record<string, Record<string, unknown>>
-  rendered?: WeakMap<object, unknown[]> | undefined
-}
-
-const themeCache = new WeakMap<object, ThemeCacheEntry>()
-
-/**
- * Core responsive engine used by every styled component in the system.
- *
- * Returns a styled-components interpolation function that:
- * 1. Reads the component's theme prop (via `key` or direct `theme`)
- * 2. Without breakpoints → renders plain CSS
- * 3. With breakpoints → normalizes, transforms (property-per-breakpoint →
- *    breakpoint-per-property), optimizes (deduplicates identical breakpoints),
- *    deltas the per-breakpoint output against the mobile-first cascade
- *    (drops re-emitted unchanged declarations), and wraps each non-empty
- *    breakpoint's deltas in the appropriate `@media` query. Falls back to
- *    the unoptimized path if any breakpoint's render result can't be
- *    cleanly stringified.
- */
-const makeItResponsive: MakeItResponsive =
-  ({ theme: customTheme, key = '', css, styles, normalize = true }) =>
-  ({ theme = {}, ...props }) => {
-    const internalTheme = customTheme || props[key]
-
-    // if no theme is defined, return empty object
-    if (isEmpty(internalTheme)) return ''
-
-    const { rootSize, breakpoints, __PYREON__, ...restTheme } = theme as Theme
-
-    const renderStyles = (styleTheme: Record<string, unknown>): ReturnType<typeof styles> =>
-      styles({ theme: styleTheme, css, rootSize, globalTheme: restTheme })
-
-    // if there are no breakpoints, return just standard css
-    if (isEmpty(breakpoints) || isEmpty(__PYREON__)) {
-      return css`
-        ${renderStyles(internalTheme)}
-      `
-    }
-
-    // isEmpty guard above ensures __PYREON__ is defined here
-    const { media, sortedBreakpoints } = __PYREON__ as NonNullable<typeof __PYREON__>
-
-    let optimizedTheme: Record<string, Record<string, unknown>>
-    const entry = themeCache.get(internalTheme)
-    const breakpointsMatch = entry?.breakpoints === sortedBreakpoints
-
-    // Full-render cache: same internal theme + same outer theme → return
-    // the previous render's output verbatim. CSSResult instances are
-    // immutable so reusing them is safe.
-    if (entry && breakpointsMatch && entry.rendered) {
-      const memoized = entry.rendered.get(theme as object)
-      if (memoized) return memoized
-    }
-
-    if (entry && breakpointsMatch) {
-      optimizedTheme = entry.optimized
-    } else {
-      let helperTheme = internalTheme
-
-      if (normalize) {
-        helperTheme = normalizeTheme({
-          theme: internalTheme,
-          breakpoints: sortedBreakpoints ?? [],
-        })
-      }
-
-      const transformedTheme = transformTheme({
-        theme: helperTheme,
-        breakpoints: sortedBreakpoints ?? [],
-      })
-
-      optimizedTheme = optimizeTheme({
-        theme: transformedTheme,
-        breakpoints: sortedBreakpoints ?? [],
-      })
-
-      themeCache.set(internalTheme, {
-        breakpoints: sortedBreakpoints,
-        optimized: optimizedTheme,
-        // Preserve any pre-existing rendered cache when re-entering with a
-        // changed sortedBreakpoints reference — usually unreachable because
-        // breakpoints come from a stable provider value, but the explicit
-        // handling avoids a memory cliff in tests / HMR.
-        rendered: entry?.rendered,
-      })
-    }
-
-    const bps = sortedBreakpoints ?? []
-
-    // Resolve each per-breakpoint render to a string so the delta optimizer
-    // can diff at the property level. If any breakpoint's result can't be
-    // cleanly stringified (foreign engine result), fall back to the original
-    // unoptimized path that lets the engine resolve interpolations itself.
-    const renderedTexts: (string | null)[] = bps.map((item: string) => {
-      const breakpointTheme = optimizedTheme[item]
-      if (!breakpointTheme || !media) return ''
-      return stringifyResult(renderStyles(breakpointTheme))
-    })
-
-    const canOptimize = renderedTexts.every((t) => t !== null)
-    let result: unknown[]
-    if (canOptimize) {
-      const deltas = optimizeBreakpointDeltas(renderedTexts as string[])
-      result = bps.map((item: string, i: number) => {
-        const cssText = deltas[i]
-        if (!cssText || !media) return ''
-        return (media as Record<string, any>)[item]`${cssText}`
-      })
-    } else {
-      result = bps.map((item: string) => {
-        const breakpointTheme = optimizedTheme[item]
-        if (!breakpointTheme || !media) return ''
-        const r = renderStyles(breakpointTheme)
-        return (media as Record<string, any>)[item]`
-          ${r};
-        `
-      })
-    }
-
-    // Memoize the final rendered output by outer theme reference. Stable
-    // theme + stable internal theme → future renders return immediately.
-    // Invariant: by this point themeCache always has an entry for
-    // internalTheme — earlier paths either hit the rendered-cache and
-    // returned, or wrote one via themeCache.set above.
-    const cacheEntry = themeCache.get(internalTheme)
-    if (cacheEntry) {
-      if (!cacheEntry.rendered) cacheEntry.rendered = new WeakMap()
-      cacheEntry.rendered.set(theme as object, result)
-    }
-
-    return result
-  }
-
-export default makeItResponsive

package/src/responsive/normalizeTheme.ts

@@ -1,79 +0,0 @@
-type AssignToBreakpointKey = (
-  breakpoints: string[],
-) => (
-  valueFn: (breakpoint: string, i: number, bps: string[], result: Record<string, unknown>) => void,
-) => Record<string, unknown>
-
-const assignToBreakpointKey: AssignToBreakpointKey = (breakpoints) => (valueFn) => {
-  const result: Record<string, unknown> = {}
-  breakpoints.forEach((item, i) => {
-    result[item] = valueFn(item, i, breakpoints, result)
-  })
-  return result
-}
-
-const handleArrayCb = (arr: (string | number)[]) => (_: unknown, i: number) => {
-  const currentValue = arr[i]
-  const lastValue = arr[arr.length - 1]
-  return currentValue ?? lastValue
-}
-
-const handleObjectCb =
-  (obj: Record<string, unknown>) =>
-  (bp: string, i: number, bps: string[], res: Record<string, unknown>) => {
-    const currentValue = obj[bp]
-    const prevBp = bps[i - 1]
-    const previousValue = prevBp != null ? res[prevBp] : undefined
-    if (currentValue != null) return currentValue
-    return previousValue
-  }
-
-const handleValueCb = (value: unknown) => () => value
-
-// for-in early-exit avoids the `Object.values(props)` array allocation
-// that the prior `.some()` paid on every theme normalization decision.
-// Fires once per per-breakpoint theme transform; the early `return true`
-// is hit by any responsive token, so most calls bail out quickly. Ported
-// from vitus-labs `e573e6c4`; measured upstream: +20.3%.
-const shouldNormalize = (props: Record<string, any>) => {
-  for (const key in props) {
-    const item = props[key]
-    if (typeof item === 'object' || Array.isArray(item)) return true
-  }
-  return false
-}
-
-export type NormalizeTheme = ({
-  theme,
-  breakpoints,
-}: {
-  theme: Record<string, unknown>
-  breakpoints: string[]
-}) => Record<string, unknown>
-
-const normalizeTheme: NormalizeTheme = ({ theme, breakpoints }) => {
-  if (!shouldNormalize(theme)) return theme
-
-  const getBpValues = assignToBreakpointKey(breakpoints)
-  const result: Record<string, unknown> = {}
-
-  // for-in instead of Object.entries.forEach — avoids the entries-tuple
-  // array allocation per theme normalization (one outer alloc + one inner
-  // [k,v] tuple per property dropped). Ported from vitus-labs `e573e6c4`.
-  for (const key in theme) {
-    const value = theme[key]
-    if (value == null) continue
-
-    if (Array.isArray(value)) {
-      result[key] = getBpValues(handleArrayCb(value as (string | number)[]))
-    } else if (typeof value === 'object') {
-      result[key] = getBpValues(handleObjectCb(value as Record<string, any>))
-    } else {
-      result[key] = getBpValues(handleValueCb(value))
-    }
-  }
-
-  return result
-}
-
-export default normalizeTheme