@react-spectrum/s2 1.3.0 → 1.3.1

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.\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} 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.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.\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.cjs.map","sourceRoot":"../../../../../"}

package/style/dist/style-utils.mjs

@@ -132,7 +132,36 @@ const $fec05d0b605a7a01$export$f2d00fe8ce80fd84 = ()=>({
                 }
             }
         },
-        colorScheme: '--s2-color-scheme'
+        colorScheme: '--s2-color-scheme',
+        // For backward compatibility in two cases:
+        // 1. When a component compiled with an earlier version of S2 is embedded in a newer provider.
+        // 2. When S2 CSS is compiled with lightningcss, setting color-scheme via a variable does not work.
+        '--lightningcss-light': {
+            type: 'transform',
+            value: {
+                colorScheme: {
+                    'light dark': {
+                        default: 'initial',
+                        '@media (prefers-color-scheme: dark)': ' '
+                    },
+                    light: 'initial',
+                    dark: ' '
+                }
+            }
+        },
+        '--lightningcss-dark': {
+            type: 'transform',
+            value: {
+                colorScheme: {
+                    'light dark': {
+                        default: ' ',
+                        '@media (prefers-color-scheme: dark)': 'initial'
+                    },
+                    light: ' ',
+                    dark: 'initial'
+                }
+            }
+        }
     });
 function $fec05d0b605a7a01$export$1750a8f222a9157d() {
     return {

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} 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.\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":"../../../../../"}