@react-spectrum/s2 1.3.1 → 1.5.0

package/style/dist/style-utils.mjs

@@ -1,4 +1,4 @@
-import {fontRelative as $9440fa3fdd7adbfe$export$ba024f4caf693d15} from "./spectrum-theme.mjs";
+import {fontRelative as $03477f2c57e5e829$export$ba024f4caf693d15} from "./spectrum-theme.mjs";
 
 /*
  * Copyright 2024 Adobe. All rights reserved.
@@ -11,13 +11,13 @@ import {fontRelative as $9440fa3fdd7adbfe$export$ba024f4caf693d15} from "./spect
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */ 
-function $fec05d0b605a7a01$export$dc7aad089b8f5c30(minHeight = 'self(minHeight)') {
+function $5b246d8b7927dc0b$export$dc7aad089b8f5c30(minHeight = 'self(minHeight)') {
     return `[calc((${minHeight} - self(borderTopWidth, 0px) - self(borderBottomWidth, 0px) - 1lh) / 2)]`;
 }
-function $fec05d0b605a7a01$var$fontRelative(base, baseFontSize = 14) {
-    return `[${(0, $9440fa3fdd7adbfe$export$ba024f4caf693d15)(base, baseFontSize)}]`;
+function $5b246d8b7927dc0b$var$fontRelative(base, baseFontSize = 14) {
+    return `[${(0, $03477f2c57e5e829$export$ba024f4caf693d15)(base, baseFontSize)}]`;
 }
-const $fec05d0b605a7a01$export$e0f35d825088c098 = ()=>({
+const $5b246d8b7927dc0b$export$e0f35d825088c098 = ()=>({
         display: 'grid',
         gridColumnStart: {
             isInForm: 1
@@ -69,12 +69,12 @@ const $fec05d0b605a7a01$export$e0f35d825088c098 = ()=>({
                 ]
             }
         },
-        fontSize: $fec05d0b605a7a01$export$78327973879c938a(),
+        fontSize: $5b246d8b7927dc0b$export$78327973879c938a(),
         alignItems: 'baseline',
         lineHeight: 'ui',
         '--field-height': {
             type: 'height',
-            value: $fec05d0b605a7a01$export$28c38c60b8df41e1()
+            value: $5b246d8b7927dc0b$export$28c38c60b8df41e1()
         },
         // Spectrum defines the field label/help text with a (minimum) height, with text centered inside.
         // Calculate what the gap should be based on the height and line height.
@@ -83,13 +83,13 @@ const $fec05d0b605a7a01$export$e0f35d825088c098 = ()=>({
         // Eventually this may be possible to do in pure CSS: https://github.com/w3c/csswg-drafts/issues/5813
         '--field-gap': {
             type: 'rowGap',
-            value: $fec05d0b605a7a01$export$dc7aad089b8f5c30('var(--field-height)')
+            value: $5b246d8b7927dc0b$export$dc7aad089b8f5c30('var(--field-height)')
         },
         columnGap: 12,
         disableTapHighlight: true
     });
-const $fec05d0b605a7a01$export$48db87e3f4768880 = ()=>({
-        font: $fec05d0b605a7a01$export$78327973879c938a(),
+const $5b246d8b7927dc0b$export$48db87e3f4768880 = ()=>({
+        font: $5b246d8b7927dc0b$export$78327973879c938a(),
         cursor: 'default',
         color: {
             default: 'neutral-subdued',
@@ -98,9 +98,9 @@ const $fec05d0b605a7a01$export$48db87e3f4768880 = ()=>({
             forcedColors: 'ButtonText'
         }
     });
-const $fec05d0b605a7a01$export$62d8db6a307a015a = ()=>({
+const $5b246d8b7927dc0b$export$62d8db6a307a015a = ()=>({
         gridArea: 'input',
-        minWidth: $fec05d0b605a7a01$export$28c38c60b8df41e1(),
+        minWidth: $5b246d8b7927dc0b$export$28c38c60b8df41e1(),
         contain: {
             // Only apply size containment if contain-intrinsic-width is supported.
             // In older browsers, this will fall back to the default browser intrinsic width.
@@ -121,7 +121,7 @@ const $fec05d0b605a7a01$export$62d8db6a307a015a = ()=>({
         // contain-intrinsic-width only includes the width of children, not the padding or borders.
         containIntrinsicWidth: 'calc(var(--defaultWidth) - self(paddingStart, 0px) - self(paddingEnd, 0px) - self(borderStartWidth, 0px) - self(borderEndWidth, 0px))'
     });
-const $fec05d0b605a7a01$export$f2d00fe8ce80fd84 = ()=>({
+const $5b246d8b7927dc0b$export$f2d00fe8ce80fd84 = ()=>({
         '--s2-color-scheme': {
             type: 'colorScheme',
             value: {
@@ -163,7 +163,7 @@ const $fec05d0b605a7a01$export$f2d00fe8ce80fd84 = ()=>({
             }
         }
     });
-function $fec05d0b605a7a01$export$1750a8f222a9157d() {
+function $5b246d8b7927dc0b$export$1750a8f222a9157d() {
     return {
         '--s2-container-bg': {
             type: 'backgroundColor',
@@ -176,7 +176,7 @@ function $fec05d0b605a7a01$export$1750a8f222a9157d() {
         }
     };
 }
-const $fec05d0b605a7a01$export$78327973879c938a = ()=>({
+const $5b246d8b7927dc0b$export$78327973879c938a = ()=>({
         default: 'ui',
         size: {
             XS: 'ui-xs',
@@ -185,8 +185,8 @@ const $fec05d0b605a7a01$export$78327973879c938a = ()=>({
             XL: 'ui-xl'
         }
     });
-const $fec05d0b605a7a01$export$28c38c60b8df41e1 = (size = 'md')=>size === 'sm' ? $fec05d0b605a7a01$var$controlSizeS : $fec05d0b605a7a01$var$controlSizeM;
-const $fec05d0b605a7a01$var$controlSizeM = {
+const $5b246d8b7927dc0b$export$28c38c60b8df41e1 = (size = 'md')=>size === 'sm' ? $5b246d8b7927dc0b$var$controlSizeS : $5b246d8b7927dc0b$var$controlSizeM;
+const $5b246d8b7927dc0b$var$controlSizeM = {
     default: 32,
     size: {
         XS: 20,
@@ -195,7 +195,7 @@ const $fec05d0b605a7a01$var$controlSizeM = {
         XL: 48
     }
 };
-const $fec05d0b605a7a01$var$controlSizeS = {
+const $5b246d8b7927dc0b$var$controlSizeS = {
     default: 16,
     size: {
         S: 14,
@@ -203,7 +203,7 @@ const $fec05d0b605a7a01$var$controlSizeS = {
         XL: 20
     }
 };
-const $fec05d0b605a7a01$export$6565fa6b916ade8 = (size = 'default')=>({
+const $5b246d8b7927dc0b$export$6565fa6b916ade8 = (size = 'default')=>({
         '--size': {
             type: 'order',
             value: {
@@ -222,50 +222,50 @@ const $fec05d0b605a7a01$export$6565fa6b916ade8 = (size = 'default')=>({
         },
         borderRadius: 'round(var(--radius) * var(--size), 1px)'
     });
-const $fec05d0b605a7a01$var$iconOnly = ':has([slot=icon]):not(:has([data-rsp-slot=text]))';
-function $fec05d0b605a7a01$export$b5cde1de278b4330(options) {
+const $5b246d8b7927dc0b$var$iconOnly = ':has([slot=icon]):not(:has([data-rsp-slot=text]))';
+function $5b246d8b7927dc0b$export$b5cde1de278b4330(options) {
     let paddingX = options.shape === 'pill' ? 'pill' : 'edge-to-text';
     let result = {
-        font: $fec05d0b605a7a01$export$78327973879c938a(),
+        font: $5b246d8b7927dc0b$export$78327973879c938a(),
         display: 'flex',
         alignItems: 'center',
         boxSizing: 'border-box',
         paddingX: paddingX,
-        minWidth: $fec05d0b605a7a01$export$28c38c60b8df41e1()
+        minWidth: $5b246d8b7927dc0b$export$28c38c60b8df41e1()
     };
     if (options.shape === 'pill') result.borderRadius = 'pill';
-    else Object.assign(result, $fec05d0b605a7a01$export$6565fa6b916ade8());
+    else Object.assign(result, $5b246d8b7927dc0b$export$6565fa6b916ade8());
     if (options.icon) {
         result.columnGap = 'text-to-visual';
         result.paddingX = {
             default: paddingX,
-            [$fec05d0b605a7a01$var$iconOnly]: 0
+            [$5b246d8b7927dc0b$var$iconOnly]: 0
         };
         result['--iconMargin'] = {
             type: 'marginStart',
             value: {
-                default: $fec05d0b605a7a01$var$fontRelative(-2),
-                [$fec05d0b605a7a01$var$iconOnly]: 0
+                default: $5b246d8b7927dc0b$var$fontRelative(-2),
+                [$5b246d8b7927dc0b$var$iconOnly]: 0
             }
         };
     }
     if (options.wrap) {
-        result.minHeight = $fec05d0b605a7a01$export$28c38c60b8df41e1();
+        result.minHeight = $5b246d8b7927dc0b$export$28c38c60b8df41e1();
         if (options.icon) {
             result.paddingY = 0;
             result['--labelPadding'] = {
                 type: 'paddingTop',
-                value: $fec05d0b605a7a01$export$dc7aad089b8f5c30()
+                value: $5b246d8b7927dc0b$export$dc7aad089b8f5c30()
             };
             result.alignItems = {
                 default: 'baseline',
-                [$fec05d0b605a7a01$var$iconOnly]: 'center'
+                [$5b246d8b7927dc0b$var$iconOnly]: 'center'
             };
-        } else result.paddingY = $fec05d0b605a7a01$export$dc7aad089b8f5c30();
-    } else result.height = $fec05d0b605a7a01$export$28c38c60b8df41e1();
+        } else result.paddingY = $5b246d8b7927dc0b$export$dc7aad089b8f5c30();
+    } else result.height = $5b246d8b7927dc0b$export$28c38c60b8df41e1();
     return result;
 }
-const $fec05d0b605a7a01$var$allowedOverrides = [
+const $5b246d8b7927dc0b$var$allowedOverrides = [
     'margin',
     'marginStart',
     'marginEnd',
@@ -295,21 +295,33 @@ const $fec05d0b605a7a01$var$allowedOverrides = [
     'insetEnd',
     'visibility'
 ];
-const $fec05d0b605a7a01$export$c79e0499b545f2e4 = [
+const $5b246d8b7927dc0b$export$c79e0499b545f2e4 = [
     'width',
     'minWidth',
     'maxWidth'
 ];
-const $fec05d0b605a7a01$export$dc00e1c899b7e80d = [
+const $5b246d8b7927dc0b$export$dc00e1c899b7e80d = [
     'size',
     'height',
     'minHeight',
     'maxHeight'
 ];
-function $fec05d0b605a7a01$export$6c84136e3de2766e({ width: width = true, height: height = false } = {}) {
-    return $fec05d0b605a7a01$var$allowedOverrides.concat(width ? $fec05d0b605a7a01$export$c79e0499b545f2e4 : []).concat(height ? $fec05d0b605a7a01$export$dc00e1c899b7e80d : []);
+const $5b246d8b7927dc0b$export$7950b8a4437e5013 = [
+    'font',
+    'fontFamily',
+    'fontWeight',
+    'lineHeight',
+    'fontSize'
+];
+function $5b246d8b7927dc0b$export$6c84136e3de2766e({ width: width = true, height: height = false, font: font = false } = {}) {
+    return $5b246d8b7927dc0b$var$allowedOverrides.concat(width ? $5b246d8b7927dc0b$export$c79e0499b545f2e4 : []).concat(height ? $5b246d8b7927dc0b$export$dc00e1c899b7e80d : []).concat(font ? [
+        'fontFamily',
+        'fontWeight',
+        'lineHeight',
+        'fontSize'
+    ] : []);
 }
 
 
-export {$fec05d0b605a7a01$export$dc7aad089b8f5c30 as centerPadding, $fec05d0b605a7a01$export$e0f35d825088c098 as field, $fec05d0b605a7a01$export$78327973879c938a as controlFont, $fec05d0b605a7a01$export$28c38c60b8df41e1 as controlSize, $fec05d0b605a7a01$export$48db87e3f4768880 as fieldLabel, $fec05d0b605a7a01$export$62d8db6a307a015a as fieldInput, $fec05d0b605a7a01$export$f2d00fe8ce80fd84 as setColorScheme, $fec05d0b605a7a01$export$1750a8f222a9157d as staticColor, $fec05d0b605a7a01$export$6565fa6b916ade8 as controlBorderRadius, $fec05d0b605a7a01$export$b5cde1de278b4330 as control, $fec05d0b605a7a01$export$c79e0499b545f2e4 as widthProperties, $fec05d0b605a7a01$export$dc00e1c899b7e80d as heightProperties, $fec05d0b605a7a01$export$6c84136e3de2766e as getAllowedOverrides};
+export {$5b246d8b7927dc0b$export$dc7aad089b8f5c30 as centerPadding, $5b246d8b7927dc0b$export$e0f35d825088c098 as field, $5b246d8b7927dc0b$export$78327973879c938a as controlFont, $5b246d8b7927dc0b$export$28c38c60b8df41e1 as controlSize, $5b246d8b7927dc0b$export$48db87e3f4768880 as fieldLabel, $5b246d8b7927dc0b$export$62d8db6a307a015a as fieldInput, $5b246d8b7927dc0b$export$f2d00fe8ce80fd84 as setColorScheme, $5b246d8b7927dc0b$export$1750a8f222a9157d as staticColor, $5b246d8b7927dc0b$export$6565fa6b916ade8 as controlBorderRadius, $5b246d8b7927dc0b$export$b5cde1de278b4330 as control, $5b246d8b7927dc0b$export$c79e0499b545f2e4 as widthProperties, $5b246d8b7927dc0b$export$dc00e1c899b7e80d as heightProperties, $5b246d8b7927dc0b$export$7950b8a4437e5013 as fontProperties, $5b246d8b7927dc0b$export$6c84136e3de2766e as getAllowedOverrides};
 //# sourceMappingURL=style-utils.mjs.map

package/style/dist/style-utils.mjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/s2/src/style-utils.ts"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {CSSProperties} from 'react';\nimport {fontRelative as internalFontRelative} from '../style/spectrum-theme';\nimport {StyleString} from '../style/types';\n\n/**\n * Calculates vertical padding to center a single line of text within a container.\n * Uses the CSS `self()` function and `1lh` unit to compute the padding based on\n * the container's minimum height and border widths.\n * This is useful for precise vertical centering without introducing a flex/grid layout to the container.\n *\n * @param minHeight - A CSS expression for the minimum height to center within. Defaults to `'self(minHeight)'`.\n * @returns A CSS `calc()` expression wrapped as an arbitrary style value.\n *\n * @example\n * ```tsx\n * import {centerPadding, style} from '@react-spectrum/s2/style' with {type: 'macro'};\n *\n * const styles = style({\n *   paddingY: centerPadding()\n * });\n * ```\n */\nexport function centerPadding(minHeight: string = 'self(minHeight)'): `[${string}]` {\n  return `[calc((${minHeight} - self(borderTopWidth, 0px) - self(borderBottomWidth, 0px) - 1lh) / 2)]`;\n}\n\nfunction fontRelative(base: number, baseFontSize = 14): `[${string}]` {\n  return `[${internalFontRelative(base, baseFontSize)}]`;\n}\n\nexport const field = () => ({\n  display: 'grid',\n  gridColumnStart: {\n    isInForm: 1\n  },\n  gridColumnEnd: {\n    isInForm: {\n      labelPosition: {\n        side: 'span 2'\n      }\n    }\n  },\n  gridTemplateColumns: {\n    default: {\n      labelPosition: {\n        top: ['1fr'],\n        side: ['auto', '1fr']\n      }\n    },\n    isInForm: 'subgrid'\n  },\n  gridTemplateRows: {\n    labelPosition: {\n      top: ['auto', '1fr', 'auto'],\n      side: ['auto', '1fr']\n    }\n  },\n  gridTemplateAreas: {\n    labelPosition: {\n      top: [\n        'label',\n        'input',\n        'helptext'\n      ],\n      side: [\n        'label input',\n        'label helptext'\n      ]\n    }\n  },\n  fontSize: controlFont(),\n  alignItems: 'baseline',\n  lineHeight: 'ui',\n  '--field-height': {\n    type: 'height',\n    value: controlSize()\n  },\n  // Spectrum defines the field label/help text with a (minimum) height, with text centered inside.\n  // Calculate what the gap should be based on the height and line height.\n  // Use a variable here rather than rowGap since it is applied to the children as padding.\n  // This allows the gap to collapse when the label/help text is not present.\n  // Eventually this may be possible to do in pure CSS: https://github.com/w3c/csswg-drafts/issues/5813\n  '--field-gap': {\n    type: 'rowGap',\n    value: centerPadding('var(--field-height)')\n  },\n  columnGap: 12,\n  disableTapHighlight: true\n} as const);\n\nexport const fieldLabel = () => ({\n  font: controlFont(),\n  cursor: 'default',\n  color: {\n    default: 'neutral-subdued',\n    isDisabled: 'disabled',\n    isStaticColor: 'transparent-overlay-1000',\n    forcedColors: 'ButtonText'\n  }\n} as const);\n\nexport const fieldInput = () => ({\n  gridArea: 'input',\n  minWidth: controlSize(),\n  contain: {\n    // Only apply size containment if contain-intrinsic-width is supported.\n    // In older browsers, this will fall back to the default browser intrinsic width.\n    '@supports (contain-intrinsic-width: 1px)': 'inline-size',\n    isQuiet: 'none'\n  },\n  '--defaultWidth': {\n    type: 'width',\n    value: {\n      default: 208,\n      size: {\n        S: 192,\n        L: 224,\n        XL: 240\n      }\n    }\n  },\n  // contain-intrinsic-width only includes the width of children, not the padding or borders.\n  containIntrinsicWidth: 'calc(var(--defaultWidth) - self(paddingStart, 0px) - self(paddingEnd, 0px) - self(borderStartWidth, 0px) - self(borderEndWidth, 0px))'\n} as const);\n\n/**\n * Returns style properties that set the CSS `color-scheme` for a component.\n * Defaults to the page's color scheme and supports `'light'`, `'dark'`, and `'light dark'` values\n * via the `colorScheme` render prop condition.\n * Intended for root containers (e.g. providers, modals, and popovers), and not needed for individual components.\n *\n * @example\n * ```tsx\n * import {setColorScheme, style} from '@react-spectrum/s2/style' with {type: 'macro'};\n *\n * const styles = style({\n *   ...setColorScheme(),\n *   backgroundColor: 'layer-1'\n * });\n * ```\n */\nexport const setColorScheme = () => ({\n  '--s2-color-scheme': {\n    type: 'colorScheme',\n    value: {\n      colorScheme: {\n        'light dark': 'light dark',\n        light: 'light',\n        dark: 'dark'\n      }\n    }\n  },\n  colorScheme: '--s2-color-scheme',\n  // For backward compatibility in two cases:\n  // 1. When a component compiled with an earlier version of S2 is embedded in a newer provider.\n  // 2. When S2 CSS is compiled with lightningcss, setting color-scheme via a variable does not work.\n  '--lightningcss-light': {\n    type: 'transform', // arbitrary string\n    value: {\n      colorScheme: {\n        'light dark': {\n          default: 'initial',\n          '@media (prefers-color-scheme: dark)': ' '\n        },\n        light: 'initial',\n        dark: ' '\n      }\n    }\n  },\n  '--lightningcss-dark': {\n    type: 'transform', // arbitrary string\n    value: {\n      colorScheme: {\n        'light dark': {\n          default: ' ',\n          '@media (prefers-color-scheme: dark)': 'initial'\n        },\n        light: ' ',\n        dark: 'initial'\n      }\n    }\n  }\n} as const);\n\nexport function staticColor(): Record<string, any> {\n  return {\n    '--s2-container-bg': {\n      type: 'backgroundColor',\n      value: {\n        staticColor: {\n          black: 'white',\n          white: 'black'\n        }\n      }\n    }\n  } as const;\n}\n\nexport const controlFont = () => ({\n  default: 'ui',\n  size: {\n    XS: 'ui-xs',\n    S: 'ui-sm',\n    L: 'ui-lg',\n    XL: 'ui-xl'\n  }\n} as const);\n\nexport const controlSize = (size: 'sm' | 'md' = 'md'): typeof controlSizeM | typeof controlSizeS => (\n  size === 'sm' ? controlSizeS : controlSizeM\n);\n\nconst controlSizeM = {\n  default: 32,\n  size: {\n    XS: 20,\n    S: 24,\n    L: 40,\n    XL: 48\n  }\n} as const;\n\nconst controlSizeS = {\n  default: 16,\n  size: {\n    S: 14,\n    L: 18,\n    XL: 20\n  }\n} as const;\n\n// This generates the border radius for t-shirt sizes using the\n// Major Second logarithmic scale.\nexport const controlBorderRadius = (size: 'default' | 'sm' = 'default') => ({\n  '--size': {\n    type: 'order',\n    value: {\n      default: 1,\n      size: {\n        XS: Math.pow(1.125, -2),\n        S: Math.pow(1.125, -1),\n        L: Math.pow(1.125, 1),\n        XL: Math.pow(1.125, 2)\n      }\n    }\n  },\n  '--radius': {\n    type: 'borderTopStartRadius',\n    value: size\n  },\n  borderRadius: 'round(var(--radius) * var(--size), 1px)'\n} as const);\n\ninterface ControlOptions {\n  shape?: 'default' | 'pill',\n  wrap?: boolean,\n  icon?: boolean\n}\n\ninterface ControlResult {\n  font: ReturnType<typeof controlFont>,\n  boxSizing?: 'border-box',\n  borderRadius?: 'pill' | `[${string}]`,\n  minWidth?: ReturnType<typeof controlSize>,\n  minHeight?: ReturnType<typeof controlSize>,\n  height?: ReturnType<typeof controlSize>,\n  display?: 'flex',\n  alignItems?: 'center' | {default: 'baseline', [iconOnly]: 'center'},\n  columnGap?: 'text-to-visual',\n  paddingX?: 'pill' | 'edge-to-text' | {default: 'pill' | 'edge-to-text', [iconOnly]: 0},\n  paddingY?: 0 | `[${string}]`\n}\n\nconst iconOnly = ':has([slot=icon]):not(:has([data-rsp-slot=text]))';\n\n/**\n * Common styles for a pill or round rect shaped container with text and icon slots.\n * The text can optionally wrap, aligning the icon with the first line of text.\n */\nexport function control(options: ControlOptions): ControlResult {\n  let paddingX = options.shape === 'pill' ? 'pill' as const : 'edge-to-text' as const;\n  let result: ControlResult = {\n    font: controlFont(),\n    display: 'flex',\n    alignItems: 'center',\n    boxSizing: 'border-box',\n    paddingX: paddingX,\n    minWidth: controlSize()\n  };\n\n  if (options.shape === 'pill') {\n    result.borderRadius = 'pill';\n  } else {\n    Object.assign(result, controlBorderRadius());\n  }\n\n  if (options.icon) {\n    result.columnGap = 'text-to-visual';\n    result.paddingX = {\n      default: paddingX,\n      [iconOnly]: 0\n    };\n    result['--iconMargin'] = {\n      type: 'marginStart',\n      value: {\n        default: fontRelative(-2),\n        [iconOnly]: 0\n      }\n    };\n  }\n\n  if (options.wrap) {\n    result.minHeight = controlSize();\n\n    if (options.icon) {\n      result.paddingY = 0;\n      result['--labelPadding'] = {\n        type: 'paddingTop',\n        value: centerPadding()\n      };\n      result.alignItems = {\n        default: 'baseline',\n        [iconOnly]: 'center'\n      };\n    } else {\n      result.paddingY = centerPadding();\n    }\n  } else {\n    result.height = controlSize();\n  }\n\n  return result;\n}\n\nconst allowedOverrides = [\n  'margin',\n  'marginStart',\n  'marginEnd',\n  'marginTop',\n  'marginBottom',\n  'marginX',\n  'marginY',\n  'flexGrow',\n  'flexShrink',\n  'flexBasis',\n  'justifySelf',\n  'alignSelf',\n  'order',\n  'gridArea',\n  'gridRowStart',\n  'gridRowEnd',\n  'gridColumnStart',\n  'gridColumnEnd',\n  'position',\n  'zIndex',\n  'top',\n  'bottom',\n  'inset',\n  'insetX',\n  'insetY',\n  'insetStart',\n  'insetEnd',\n  'visibility'\n] as const;\n\nexport const widthProperties = [\n  'width',\n  'minWidth',\n  'maxWidth'\n] as const;\n\nexport const heightProperties = [\n  'size',\n  'height',\n  'minHeight',\n  'maxHeight'\n] as const;\n\nexport type StylesProp = StyleString<(typeof allowedOverrides)[number] | (typeof widthProperties)[number]>;\nexport type StylesPropWithHeight = StyleString<(typeof allowedOverrides)[number] | (typeof widthProperties)[number] | (typeof heightProperties)[number]>;\nexport type StylesPropWithoutWidth = StyleString<(typeof allowedOverrides)[number]>;\nexport type UnsafeClassName = string & {properties?: never};\nexport interface UnsafeStyles {\n  /** Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. */\n  UNSAFE_className?: UnsafeClassName,\n  /** Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. */\n  UNSAFE_style?: CSSProperties\n}\n\nexport interface StyleProps extends UnsafeStyles {\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesProp\n}\n\nexport function getAllowedOverrides({width = true, height = false} = {}): string[] {\n  return (allowedOverrides as unknown as string[]).concat(width ? widthProperties : []).concat(height ? heightProperties : []);\n}\n"],"names":[],"version":3,"file":"style-utils.mjs.map","sourceRoot":"../../../../../"}
+{"mappings":"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","sources":["packages/@react-spectrum/s2/src/style-utils.ts"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {CSSProperties} from 'react';\nimport {fontRelative as internalFontRelative} from '../style/spectrum-theme';\nimport {StyleString} from '../style/types';\n\n/**\n * Calculates vertical padding to center a single line of text within a container. Uses the CSS\n * `self()` function and `1lh` unit to compute the padding based on the container's minimum height\n * and border widths. This is useful for precise vertical centering without introducing a flex/grid\n * layout to the container.\n *\n * @example\n *   import {centerPadding, style} from '@react-spectrum/s2/style' with {type: 'macro'};\n *\n *   const styles = style({\n *     paddingY: centerPadding()\n *   });\n *\n * @param minHeight - A CSS expression for the minimum height to center within. Defaults to\n *   `'self(minHeight)'`.\n * @returns A CSS `calc()` expression wrapped as an arbitrary style value.\n */\nexport function centerPadding(minHeight: string = 'self(minHeight)'): `[${string}]` {\n  return `[calc((${minHeight} - self(borderTopWidth, 0px) - self(borderBottomWidth, 0px) - 1lh) / 2)]`;\n}\n\nfunction fontRelative(base: number, baseFontSize = 14): `[${string}]` {\n  return `[${internalFontRelative(base, baseFontSize)}]`;\n}\n\nexport const field = () =>\n  ({\n    display: 'grid',\n    gridColumnStart: {\n      isInForm: 1\n    },\n    gridColumnEnd: {\n      isInForm: {\n        labelPosition: {\n          side: 'span 2'\n        }\n      }\n    },\n    gridTemplateColumns: {\n      default: {\n        labelPosition: {\n          top: ['1fr'],\n          side: ['auto', '1fr']\n        }\n      },\n      isInForm: 'subgrid'\n    },\n    gridTemplateRows: {\n      labelPosition: {\n        top: ['auto', '1fr', 'auto'],\n        side: ['auto', '1fr']\n      }\n    },\n    gridTemplateAreas: {\n      labelPosition: {\n        top: ['label', 'input', 'helptext'],\n        side: ['label input', 'label helptext']\n      }\n    },\n    fontSize: controlFont(),\n    alignItems: 'baseline',\n    lineHeight: 'ui',\n    '--field-height': {\n      type: 'height',\n      value: controlSize()\n    },\n    // Spectrum defines the field label/help text with a (minimum) height, with text centered inside.\n    // Calculate what the gap should be based on the height and line height.\n    // Use a variable here rather than rowGap since it is applied to the children as padding.\n    // This allows the gap to collapse when the label/help text is not present.\n    // Eventually this may be possible to do in pure CSS: https://github.com/w3c/csswg-drafts/issues/5813\n    '--field-gap': {\n      type: 'rowGap',\n      value: centerPadding('var(--field-height)')\n    },\n    columnGap: 12,\n    disableTapHighlight: true\n  }) as const;\n\nexport const fieldLabel = () =>\n  ({\n    font: controlFont(),\n    cursor: 'default',\n    color: {\n      default: 'neutral-subdued',\n      isDisabled: 'disabled',\n      isStaticColor: 'transparent-overlay-1000',\n      forcedColors: 'ButtonText'\n    }\n  }) as const;\n\nexport const fieldInput = () =>\n  ({\n    gridArea: 'input',\n    minWidth: controlSize(),\n    contain: {\n      // Only apply size containment if contain-intrinsic-width is supported.\n      // In older browsers, this will fall back to the default browser intrinsic width.\n      '@supports (contain-intrinsic-width: 1px)': 'inline-size',\n      isQuiet: 'none'\n    },\n    '--defaultWidth': {\n      type: 'width',\n      value: {\n        default: 208,\n        size: {\n          S: 192,\n          L: 224,\n          XL: 240\n        }\n      }\n    },\n    // contain-intrinsic-width only includes the width of children, not the padding or borders.\n    containIntrinsicWidth:\n      'calc(var(--defaultWidth) - self(paddingStart, 0px) - self(paddingEnd, 0px) - self(borderStartWidth, 0px) - self(borderEndWidth, 0px))'\n  }) as const;\n\n/**\n * Returns style properties that set the CSS `color-scheme` for a component. Defaults to the page's\n * color scheme and supports `'light'`, `'dark'`, and `'light dark'` values via the `colorScheme`\n * render prop condition. Intended for root containers (e.g. providers, modals, and popovers), and\n * not needed for individual components.\n *\n * @example\n *   import {setColorScheme, style} from '@react-spectrum/s2/style' with {type: 'macro'};\n *\n *   const styles = style({\n *     ...setColorScheme(),\n *     backgroundColor: 'layer-1'\n *   });\n */\nexport const setColorScheme = () =>\n  ({\n    '--s2-color-scheme': {\n      type: 'colorScheme',\n      value: {\n        colorScheme: {\n          'light dark': 'light dark',\n          light: 'light',\n          dark: 'dark'\n        }\n      }\n    },\n    colorScheme: '--s2-color-scheme',\n    // For backward compatibility in two cases:\n    // 1. When a component compiled with an earlier version of S2 is embedded in a newer provider.\n    // 2. When S2 CSS is compiled with lightningcss, setting color-scheme via a variable does not work.\n    '--lightningcss-light': {\n      type: 'transform', // arbitrary string\n      value: {\n        colorScheme: {\n          'light dark': {\n            default: 'initial',\n            '@media (prefers-color-scheme: dark)': ' '\n          },\n          light: 'initial',\n          dark: ' '\n        }\n      }\n    },\n    '--lightningcss-dark': {\n      type: 'transform', // arbitrary string\n      value: {\n        colorScheme: {\n          'light dark': {\n            default: ' ',\n            '@media (prefers-color-scheme: dark)': 'initial'\n          },\n          light: ' ',\n          dark: 'initial'\n        }\n      }\n    }\n  }) as const;\n\nexport function staticColor(): Record<string, any> {\n  return {\n    '--s2-container-bg': {\n      type: 'backgroundColor',\n      value: {\n        staticColor: {\n          black: 'white',\n          white: 'black'\n        }\n      }\n    }\n  } as const;\n}\n\nexport const controlFont = () =>\n  ({\n    default: 'ui',\n    size: {\n      XS: 'ui-xs',\n      S: 'ui-sm',\n      L: 'ui-lg',\n      XL: 'ui-xl'\n    }\n  }) as const;\n\nexport const controlSize = (size: 'sm' | 'md' = 'md'): typeof controlSizeM | typeof controlSizeS =>\n  size === 'sm' ? controlSizeS : controlSizeM;\n\nconst controlSizeM = {\n  default: 32,\n  size: {\n    XS: 20,\n    S: 24,\n    L: 40,\n    XL: 48\n  }\n} as const;\n\nconst controlSizeS = {\n  default: 16,\n  size: {\n    S: 14,\n    L: 18,\n    XL: 20\n  }\n} as const;\n\n// This generates the border radius for t-shirt sizes using the\n// Major Second logarithmic scale.\nexport const controlBorderRadius = (size: 'default' | 'sm' = 'default') =>\n  ({\n    '--size': {\n      type: 'order',\n      value: {\n        default: 1,\n        size: {\n          XS: Math.pow(1.125, -2),\n          S: Math.pow(1.125, -1),\n          L: Math.pow(1.125, 1),\n          XL: Math.pow(1.125, 2)\n        }\n      }\n    },\n    '--radius': {\n      type: 'borderTopStartRadius',\n      value: size\n    },\n    borderRadius: 'round(var(--radius) * var(--size), 1px)'\n  }) as const;\n\ninterface ControlOptions {\n  shape?: 'default' | 'pill';\n  wrap?: boolean;\n  icon?: boolean;\n}\n\ninterface ControlResult {\n  font: ReturnType<typeof controlFont>;\n  boxSizing?: 'border-box';\n  borderRadius?: 'pill' | `[${string}]`;\n  minWidth?: ReturnType<typeof controlSize>;\n  minHeight?: ReturnType<typeof controlSize>;\n  height?: ReturnType<typeof controlSize>;\n  display?: 'flex';\n  alignItems?: 'center' | {default: 'baseline'; [iconOnly]: 'center'};\n  columnGap?: 'text-to-visual';\n  paddingX?: 'pill' | 'edge-to-text' | {default: 'pill' | 'edge-to-text'; [iconOnly]: 0};\n  paddingY?: 0 | `[${string}]`;\n}\n\nconst iconOnly = ':has([slot=icon]):not(:has([data-rsp-slot=text]))';\n\n/**\n * Common styles for a pill or round rect shaped container with text and icon slots.\n * The text can optionally wrap, aligning the icon with the first line of text.\n */\nexport function control(options: ControlOptions): ControlResult {\n  let paddingX = options.shape === 'pill' ? ('pill' as const) : ('edge-to-text' as const);\n  let result: ControlResult = {\n    font: controlFont(),\n    display: 'flex',\n    alignItems: 'center',\n    boxSizing: 'border-box',\n    paddingX: paddingX,\n    minWidth: controlSize()\n  };\n\n  if (options.shape === 'pill') {\n    result.borderRadius = 'pill';\n  } else {\n    Object.assign(result, controlBorderRadius());\n  }\n\n  if (options.icon) {\n    result.columnGap = 'text-to-visual';\n    result.paddingX = {\n      default: paddingX,\n      [iconOnly]: 0\n    };\n    result['--iconMargin'] = {\n      type: 'marginStart',\n      value: {\n        default: fontRelative(-2),\n        [iconOnly]: 0\n      }\n    };\n  }\n\n  if (options.wrap) {\n    result.minHeight = controlSize();\n\n    if (options.icon) {\n      result.paddingY = 0;\n      result['--labelPadding'] = {\n        type: 'paddingTop',\n        value: centerPadding()\n      };\n      result.alignItems = {\n        default: 'baseline',\n        [iconOnly]: 'center'\n      };\n    } else {\n      result.paddingY = centerPadding();\n    }\n  } else {\n    result.height = controlSize();\n  }\n\n  return result;\n}\n\nconst allowedOverrides = [\n  'margin',\n  'marginStart',\n  'marginEnd',\n  'marginTop',\n  'marginBottom',\n  'marginX',\n  'marginY',\n  'flexGrow',\n  'flexShrink',\n  'flexBasis',\n  'justifySelf',\n  'alignSelf',\n  'order',\n  'gridArea',\n  'gridRowStart',\n  'gridRowEnd',\n  'gridColumnStart',\n  'gridColumnEnd',\n  'position',\n  'zIndex',\n  'top',\n  'bottom',\n  'inset',\n  'insetX',\n  'insetY',\n  'insetStart',\n  'insetEnd',\n  'visibility'\n] as const;\n\nexport const widthProperties = ['width', 'minWidth', 'maxWidth'] as const;\n\nexport const heightProperties = ['size', 'height', 'minHeight', 'maxHeight'] as const;\n\nexport const fontProperties = [\n  'font',\n  'fontFamily',\n  'fontWeight',\n  'lineHeight',\n  'fontSize'\n] as const;\n\nexport type StylesProp = StyleString<\n  (typeof allowedOverrides)[number] | (typeof widthProperties)[number]\n>;\nexport type StylesPropWithHeight = StyleString<\n  | (typeof allowedOverrides)[number]\n  | (typeof widthProperties)[number]\n  | (typeof heightProperties)[number]\n>;\nexport type StylesPropWithoutWidth = StyleString<(typeof allowedOverrides)[number]>;\n\nexport type StylesPropWithFont = StyleString<(typeof fontProperties)[number]>;\nexport type UnsafeClassName = string & {properties?: never};\nexport interface UnsafeStyles {\n  /**\n   * Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className)\n   * for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop\n   * instead.\n   */\n  UNSAFE_className?: UnsafeClassName;\n  /**\n   * Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the\n   * element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead.\n   */\n  UNSAFE_style?: CSSProperties;\n}\n\nexport interface StyleProps extends UnsafeStyles {\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesProp;\n}\n\nexport function getAllowedOverrides({width = true, height = false, font = false} = {}): string[] {\n  return (allowedOverrides as unknown as string[])\n    .concat(width ? widthProperties : [])\n    .concat(height ? heightProperties : [])\n    .concat(font ? ['fontFamily', 'fontWeight', 'lineHeight', 'fontSize'] : []);\n}\n"],"names":[],"version":3,"file":"style-utils.mjs.map","sourceRoot":"../../../../../"}

package/style/index.ts

@@ -11,7 +11,13 @@
  */
 
 import type * as CSS from 'csstype';
-import {Inset, fontRelative as internalFontRelative, space as internalSpace, Spacing, style} from './spectrum-theme';
+import {
+  Inset,
+  fontRelative as internalFontRelative,
+  space as internalSpace,
+  Spacing,
+  style
+} from './spectrum-theme';
 import type {MacroContext} from '@parcel/macros';
 import {StyleString} from './types';
 
@@ -23,17 +29,15 @@ export type {StyleString} from './types';
 /**
  * Converts a pixel value to a Spectrum spacing token in `rem` units.
  *
- * @param px - The spacing in pixels.
- * @returns A `rem` value wrapped as an arbitrary style value.
- *
  * @example
- * ```tsx
- * import {space, style} from '@react-spectrum/s2/style' with {type: 'macro'};
+ *   import {space, style} from '@react-spectrum/s2/style' with {type: 'macro'};
  *
- * const styles = style({
- *   gap: space(12) // 12/16 = 0.75rem
- * });
- * ```
+ *   const styles = style({
+ *     gap: space(12) // 12/16 = 0.75rem
+ *   });
+ *
+ * @param px - The spacing in pixels.
+ * @returns A `rem` value wrapped as an arbitrary style value.
  */
 export function space(px: number): `[${string}]` {
   return `[${internalSpace(px)}]`;
@@ -43,18 +47,16 @@ export function space(px: number): `[${string}]` {
  * Converts a pixel value to a font-relative `em` length. Useful for sizing elements
  * relative to the current font size. Defaults to a 14px base.
  *
+ * @example
+ *   import {fontRelative, style} from '@react-spectrum/s2/style' with {type: 'macro'};
+ *
+ *   const styles = style({
+ *     gap: fontRelative(2) // 2/14 = ~0.143em
+ *   });
+ *
  * @param base - The pixel value to convert.
  * @param baseFontSize - The base font size in pixels to divide by. Defaults to `14`.
  * @returns A CSS `em` value wrapped as an arbitrary style value.
- *
- * @example
- * ```tsx
- * import {fontRelative, style} from '@react-spectrum/s2/style' with {type: 'macro'};
- *
- * const styles = style({
- *   gap: fontRelative(2)  // 2/14 = ~0.143em
- * });
- * ```
  */
 export function fontRelative(base: number, baseFontSize = 14): `[${string}]` {
   return `[${internalFontRelative(base, baseFontSize)}]`;
@@ -63,57 +65,85 @@ export function fontRelative(base: number, baseFontSize = 14): `[${string}]` {
 /**
  * Returns consistent Spectrum focus ring outline styles for interactive components.
  *
+ * Note: Requires `isFocusVisible` to be passed into the style call that uses this.
+ *
  * @example
- * ```tsx
- * import {focusRing, style} from '@react-spectrum/s2/style' with {type: 'macro'};
+ *   import {focusRing, style} from '@react-spectrum/s2/style' with {type: 'macro'};
  *
- * const styles = style({
- *   ...focusRing(),
- *   borderRadius: 'lg'
- * });
- * ```
+ *   const styles = style({
+ *     ...focusRing(),
+ *     borderRadius: 'lg'
+ *   });
  */
-export const focusRing = () => ({
-  outlineStyle: {
-    default: 'none',
-    isFocusVisible: 'solid'
-  },
-  outlineColor: {
-    default: 'focus-ring',
-    forcedColors: 'Highlight'
-  },
-  outlineWidth: 2,
-  outlineOffset: 2
-} as const);
+export const focusRing = () =>
+  ({
+    outlineStyle: {
+      default: 'none',
+      isFocusVisible: 'solid'
+    },
+    outlineColor: {
+      default: 'focus-ring',
+      forcedColors: 'Highlight'
+    },
+    outlineWidth: 2,
+    outlineOffset: 2
+  }) as const;
 
 export interface IconStyle {
-  size?: 'XS' | 'S' | 'M' | 'L' |'XL',
-  color?: 'white' | 'black' | 'accent' | 'neutral' | 'negative' | 'informative' | 'positive' | 'notice' | 'gray' | 'red' | 'orange' | 'yellow' | 'chartreuse' | 'celery' | 'green' | 'seafoam' | 'cyan' | 'blue' | 'indigo' | 'purple' | 'fuchsia' | 'magenta' | 'pink' | 'turquoise' | 'cinnamon' | 'brown' | 'silver',
-  margin?: Spacing,
-  marginStart?: Spacing,
-  marginEnd?: Spacing,
-  marginTop?: Spacing,
-  marginBottom?: Spacing,
-  marginX?: Spacing,
-  marginY?: Spacing,
-  alignSelf?: 'auto' | 'start' | 'end' | 'center' | 'stretch' | 'baseline',
-  justifySelf?: 'auto' | 'start' | 'end' | 'center' | 'stretch',
-  order?: number,
-  gridArea?: CSS.Property.GridArea,
-  gridColumnStart?: CSS.Property.GridColumnStart,
-  gridColumnEnd?: CSS.Property.GridColumnEnd,
-  gridRowStart?: CSS.Property.GridRowStart,
-  gridRowEnd?: CSS.Property.GridRowStart,
-  position?: 'absolute' | 'fixed' | 'relative' | 'sticky' | 'static',
-  zIndex?: number,
-  top?: Inset,
-  bottom?: Inset,
-  inset?: Inset,
-  insetX?: Inset,
-  insetY?: Inset,
-  insetStart?: Inset,
-  insetEnd?: Inset,
-  rotate?: number | `${number}deg` | `${number}rad` | `${number}grad` | `${number}turn`
+  size?: 'XS' | 'S' | 'M' | 'L' | 'XL';
+  color?:
+    | 'white'
+    | 'black'
+    | 'accent'
+    | 'neutral'
+    | 'negative'
+    | 'informative'
+    | 'positive'
+    | 'notice'
+    | 'gray'
+    | 'red'
+    | 'orange'
+    | 'yellow'
+    | 'chartreuse'
+    | 'celery'
+    | 'green'
+    | 'seafoam'
+    | 'cyan'
+    | 'blue'
+    | 'indigo'
+    | 'purple'
+    | 'fuchsia'
+    | 'magenta'
+    | 'pink'
+    | 'turquoise'
+    | 'cinnamon'
+    | 'brown'
+    | 'silver';
+  margin?: Spacing;
+  marginStart?: Spacing;
+  marginEnd?: Spacing;
+  marginTop?: Spacing;
+  marginBottom?: Spacing;
+  marginX?: Spacing;
+  marginY?: Spacing;
+  alignSelf?: 'auto' | 'start' | 'end' | 'center' | 'stretch' | 'baseline';
+  justifySelf?: 'auto' | 'start' | 'end' | 'center' | 'stretch';
+  order?: number;
+  gridArea?: CSS.Property.GridArea;
+  gridColumnStart?: CSS.Property.GridColumnStart;
+  gridColumnEnd?: CSS.Property.GridColumnEnd;
+  gridRowStart?: CSS.Property.GridRowStart;
+  gridRowEnd?: CSS.Property.GridRowStart;
+  position?: 'absolute' | 'fixed' | 'relative' | 'sticky' | 'static';
+  zIndex?: number;
+  top?: Inset;
+  bottom?: Inset;
+  inset?: Inset;
+  insetX?: Inset;
+  insetY?: Inset;
+  insetStart?: Inset;
+  insetEnd?: Inset;
+  rotate?: number | `${number}deg` | `${number}rad` | `${number}grad` | `${number}turn`;
 }
 
 const iconSizes = {
@@ -128,18 +158,19 @@ const iconSizes = {
  * Generates styles for an icon element with the given size, color, and layout options.
  * Must be imported with `{type: 'macro'}`.
  *
- * @param options - Icon styling options including `size` (XS–XL), `color`, and layout properties.
- * @returns A `StyleString` that can be applied to an icon element.
- *
  * @example
- * ```tsx
- * import {iconStyle} from '@react-spectrum/s2/style' with {type: 'macro'};
- * import Edit from '@react-spectrum/s2/icons/Edit';
+ *   import {iconStyle} from '@react-spectrum/s2/style' with {type: 'macro'};
+ *   import Edit from '@react-spectrum/s2/icons/Edit';
+ *
+ *   <Edit styles={iconStyle({size: 'XL', color: 'positive'})} />;
  *
- * <Edit styles={iconStyle({size: 'XL', color: 'positive'})} />
- * ```
+ * @param options - Icon styling options including `size` (XS–XL), `color`, and layout properties.
+ * @returns A `StyleString` that can be applied to an icon element.
  */
-export function iconStyle(this: MacroContext | void, options: IconStyle): StyleString<Exclude<keyof IconStyle, 'color' | 'size'>> {
+export function iconStyle(
+  this: MacroContext | void,
+  options: IconStyle
+): StyleString<Exclude<keyof IconStyle, 'color' | 'size'>> {
   let {size = 'M', color, ...styles} = options;
 
   if (color) {

package/style/package.json

@@ -1,5 +1,5 @@
 {
-  "types": "../dist/types/style/index.d.ts",
+  "main": "./dist/main.cjs",
   "module": "./dist/module.mjs",
-  "main": "./dist/main.cjs"
+  "types": "../dist/types/style/index.d.ts"
 }

package/style/runtime.ts

@@ -42,15 +42,13 @@ import {StyleString} from './types';
  * Useful for composing styles from multiple `style()` macro calls.
  *
  * @example
- * ```tsx
- * import {mergeStyles} from '@react-spectrum/s2';
- * import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+ *   import {mergeStyles} from '@react-spectrum/s2';
+ *   import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
  *
- * const baseStyles = style({padding: 8});
- * const overrideStyles = style({padding: 16, color: 'heading'});
- * const merged = mergeStyles(baseStyles, overrideStyles);
- * // merged has `padding: 16` and `color: heading`.
- * ```
+ *   const baseStyles = style({padding: 8});
+ *   const overrideStyles = style({padding: 16, color: 'heading'});
+ *   const merged = mergeStyles(baseStyles, overrideStyles);
+ *   // merged has `padding: 16` and `color: heading`.
  */
 export function mergeStyles(...styles: (StyleString | null | undefined)[]): StyleString {
   let definedStyles = styles.filter(Boolean) as StyleString[];