@react-spectrum/s2 1.4.0 → 1.5.0

package/style/dist/style-utils.cjs

@@ -1,12 +1,12 @@
-var $53f7a8c49f8c6ec9$exports = require("./spectrum-theme.cjs");
+var $f4755549bfd6a7d9$exports = require("./spectrum-theme.cjs");
 
 
 function $parcel$export(e, n, v, s) {
   Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
 }
 
-$parcel$export(module.exports, "centerPadding", () => $247833060df99ecf$export$dc7aad089b8f5c30);
-$parcel$export(module.exports, "setColorScheme", () => $247833060df99ecf$export$f2d00fe8ce80fd84);
+$parcel$export(module.exports, "centerPadding", () => $173789cf89bf6810$export$dc7aad089b8f5c30);
+$parcel$export(module.exports, "setColorScheme", () => $173789cf89bf6810$export$f2d00fe8ce80fd84);
 /*
  * Copyright 2024 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -18,13 +18,13 @@ $parcel$export(module.exports, "setColorScheme", () => $247833060df99ecf$export$
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */ 
-function $247833060df99ecf$export$dc7aad089b8f5c30(minHeight = 'self(minHeight)') {
+function $173789cf89bf6810$export$dc7aad089b8f5c30(minHeight = 'self(minHeight)') {
     return `[calc((${minHeight} - self(borderTopWidth, 0px) - self(borderBottomWidth, 0px) - 1lh) / 2)]`;
 }
-function $247833060df99ecf$var$fontRelative(base, baseFontSize = 14) {
-    return `[${(0, $53f7a8c49f8c6ec9$exports.fontRelative)(base, baseFontSize)}]`;
+function $173789cf89bf6810$var$fontRelative(base, baseFontSize = 14) {
+    return `[${(0, $f4755549bfd6a7d9$exports.fontRelative)(base, baseFontSize)}]`;
 }
-const $247833060df99ecf$export$e0f35d825088c098 = ()=>({
+const $173789cf89bf6810$export$e0f35d825088c098 = ()=>({
         display: 'grid',
         gridColumnStart: {
             isInForm: 1
@@ -76,12 +76,12 @@ const $247833060df99ecf$export$e0f35d825088c098 = ()=>({
                 ]
             }
         },
-        fontSize: $247833060df99ecf$export$78327973879c938a(),
+        fontSize: $173789cf89bf6810$export$78327973879c938a(),
         alignItems: 'baseline',
         lineHeight: 'ui',
         '--field-height': {
             type: 'height',
-            value: $247833060df99ecf$export$28c38c60b8df41e1()
+            value: $173789cf89bf6810$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.
@@ -90,13 +90,13 @@ const $247833060df99ecf$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: $247833060df99ecf$export$dc7aad089b8f5c30('var(--field-height)')
+            value: $173789cf89bf6810$export$dc7aad089b8f5c30('var(--field-height)')
         },
         columnGap: 12,
         disableTapHighlight: true
     });
-const $247833060df99ecf$export$48db87e3f4768880 = ()=>({
-        font: $247833060df99ecf$export$78327973879c938a(),
+const $173789cf89bf6810$export$48db87e3f4768880 = ()=>({
+        font: $173789cf89bf6810$export$78327973879c938a(),
         cursor: 'default',
         color: {
             default: 'neutral-subdued',
@@ -105,9 +105,9 @@ const $247833060df99ecf$export$48db87e3f4768880 = ()=>({
             forcedColors: 'ButtonText'
         }
     });
-const $247833060df99ecf$export$62d8db6a307a015a = ()=>({
+const $173789cf89bf6810$export$62d8db6a307a015a = ()=>({
         gridArea: 'input',
-        minWidth: $247833060df99ecf$export$28c38c60b8df41e1(),
+        minWidth: $173789cf89bf6810$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.
@@ -128,7 +128,7 @@ const $247833060df99ecf$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 $247833060df99ecf$export$f2d00fe8ce80fd84 = ()=>({
+const $173789cf89bf6810$export$f2d00fe8ce80fd84 = ()=>({
         '--s2-color-scheme': {
             type: 'colorScheme',
             value: {
@@ -170,7 +170,7 @@ const $247833060df99ecf$export$f2d00fe8ce80fd84 = ()=>({
             }
         }
     });
-function $247833060df99ecf$export$1750a8f222a9157d() {
+function $173789cf89bf6810$export$1750a8f222a9157d() {
     return {
         '--s2-container-bg': {
             type: 'backgroundColor',
@@ -183,7 +183,7 @@ function $247833060df99ecf$export$1750a8f222a9157d() {
         }
     };
 }
-const $247833060df99ecf$export$78327973879c938a = ()=>({
+const $173789cf89bf6810$export$78327973879c938a = ()=>({
         default: 'ui',
         size: {
             XS: 'ui-xs',
@@ -192,8 +192,8 @@ const $247833060df99ecf$export$78327973879c938a = ()=>({
             XL: 'ui-xl'
         }
     });
-const $247833060df99ecf$export$28c38c60b8df41e1 = (size = 'md')=>size === 'sm' ? $247833060df99ecf$var$controlSizeS : $247833060df99ecf$var$controlSizeM;
-const $247833060df99ecf$var$controlSizeM = {
+const $173789cf89bf6810$export$28c38c60b8df41e1 = (size = 'md')=>size === 'sm' ? $173789cf89bf6810$var$controlSizeS : $173789cf89bf6810$var$controlSizeM;
+const $173789cf89bf6810$var$controlSizeM = {
     default: 32,
     size: {
         XS: 20,
@@ -202,7 +202,7 @@ const $247833060df99ecf$var$controlSizeM = {
         XL: 48
     }
 };
-const $247833060df99ecf$var$controlSizeS = {
+const $173789cf89bf6810$var$controlSizeS = {
     default: 16,
     size: {
         S: 14,
@@ -210,7 +210,7 @@ const $247833060df99ecf$var$controlSizeS = {
         XL: 20
     }
 };
-const $247833060df99ecf$export$6565fa6b916ade8 = (size = 'default')=>({
+const $173789cf89bf6810$export$6565fa6b916ade8 = (size = 'default')=>({
         '--size': {
             type: 'order',
             value: {
@@ -229,50 +229,50 @@ const $247833060df99ecf$export$6565fa6b916ade8 = (size = 'default')=>({
         },
         borderRadius: 'round(var(--radius) * var(--size), 1px)'
     });
-const $247833060df99ecf$var$iconOnly = ':has([slot=icon]):not(:has([data-rsp-slot=text]))';
-function $247833060df99ecf$export$b5cde1de278b4330(options) {
+const $173789cf89bf6810$var$iconOnly = ':has([slot=icon]):not(:has([data-rsp-slot=text]))';
+function $173789cf89bf6810$export$b5cde1de278b4330(options) {
     let paddingX = options.shape === 'pill' ? 'pill' : 'edge-to-text';
     let result = {
-        font: $247833060df99ecf$export$78327973879c938a(),
+        font: $173789cf89bf6810$export$78327973879c938a(),
         display: 'flex',
         alignItems: 'center',
         boxSizing: 'border-box',
         paddingX: paddingX,
-        minWidth: $247833060df99ecf$export$28c38c60b8df41e1()
+        minWidth: $173789cf89bf6810$export$28c38c60b8df41e1()
     };
     if (options.shape === 'pill') result.borderRadius = 'pill';
-    else Object.assign(result, $247833060df99ecf$export$6565fa6b916ade8());
+    else Object.assign(result, $173789cf89bf6810$export$6565fa6b916ade8());
     if (options.icon) {
         result.columnGap = 'text-to-visual';
         result.paddingX = {
             default: paddingX,
-            [$247833060df99ecf$var$iconOnly]: 0
+            [$173789cf89bf6810$var$iconOnly]: 0
         };
         result['--iconMargin'] = {
             type: 'marginStart',
             value: {
-                default: $247833060df99ecf$var$fontRelative(-2),
-                [$247833060df99ecf$var$iconOnly]: 0
+                default: $173789cf89bf6810$var$fontRelative(-2),
+                [$173789cf89bf6810$var$iconOnly]: 0
             }
         };
     }
     if (options.wrap) {
-        result.minHeight = $247833060df99ecf$export$28c38c60b8df41e1();
+        result.minHeight = $173789cf89bf6810$export$28c38c60b8df41e1();
         if (options.icon) {
             result.paddingY = 0;
             result['--labelPadding'] = {
                 type: 'paddingTop',
-                value: $247833060df99ecf$export$dc7aad089b8f5c30()
+                value: $173789cf89bf6810$export$dc7aad089b8f5c30()
             };
             result.alignItems = {
                 default: 'baseline',
-                [$247833060df99ecf$var$iconOnly]: 'center'
+                [$173789cf89bf6810$var$iconOnly]: 'center'
             };
-        } else result.paddingY = $247833060df99ecf$export$dc7aad089b8f5c30();
-    } else result.height = $247833060df99ecf$export$28c38c60b8df41e1();
+        } else result.paddingY = $173789cf89bf6810$export$dc7aad089b8f5c30();
+    } else result.height = $173789cf89bf6810$export$28c38c60b8df41e1();
     return result;
 }
-const $247833060df99ecf$var$allowedOverrides = [
+const $173789cf89bf6810$var$allowedOverrides = [
     'margin',
     'marginStart',
     'marginEnd',
@@ -302,19 +302,31 @@ const $247833060df99ecf$var$allowedOverrides = [
     'insetEnd',
     'visibility'
 ];
-const $247833060df99ecf$export$c79e0499b545f2e4 = [
+const $173789cf89bf6810$export$c79e0499b545f2e4 = [
     'width',
     'minWidth',
     'maxWidth'
 ];
-const $247833060df99ecf$export$dc00e1c899b7e80d = [
+const $173789cf89bf6810$export$dc00e1c899b7e80d = [
     'size',
     'height',
     'minHeight',
     'maxHeight'
 ];
-function $247833060df99ecf$export$6c84136e3de2766e({ width: width = true, height: height = false } = {}) {
-    return $247833060df99ecf$var$allowedOverrides.concat(width ? $247833060df99ecf$export$c79e0499b545f2e4 : []).concat(height ? $247833060df99ecf$export$dc00e1c899b7e80d : []);
+const $173789cf89bf6810$export$7950b8a4437e5013 = [
+    'font',
+    'fontFamily',
+    'fontWeight',
+    'lineHeight',
+    'fontSize'
+];
+function $173789cf89bf6810$export$6c84136e3de2766e({ width: width = true, height: height = false, font: font = false } = {}) {
+    return $173789cf89bf6810$var$allowedOverrides.concat(width ? $173789cf89bf6810$export$c79e0499b545f2e4 : []).concat(height ? $173789cf89bf6810$export$dc00e1c899b7e80d : []).concat(font ? [
+        'fontFamily',
+        'fontWeight',
+        'lineHeight',
+        'fontSize'
+    ] : []);
 }
 
 

package/style/dist/style-utils.cjs.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. 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 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]>;\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} = {}): string[] {\n  return (allowedOverrides as unknown as string[])\n    .concat(width ? widthProperties : [])\n    .concat(height ? heightProperties : []);\n}\n"],"names":[],"version":3,"file":"style-utils.cjs.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.cjs.map","sourceRoot":"../../../../../"}

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. 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 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]>;\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} = {}): string[] {\n  return (allowedOverrides as unknown as string[])\n    .concat(width ? widthProperties : [])\n    .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":"../../../../../"}