@react-spectrum/s2 0.5.0 → 0.7.0

package/dist/Meter.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AA6CM,MAAM,0DAAe,CAAA,GAAA,oBAAY,EAAyD;AAEjG,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaN,MAAM;;;;;;;;;;;;;;;;;AAwBN,SAAS,4BAAM,KAAiB,EAAE,GAA2B;IAC3D,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IAEvB,IAAI,SACF,KAAK,QACL,OAAO,kBACP,WAAW,UACX,MAAM,oBACN,mBAAmB,kBACnB,YAAY,WACZ,UAAU,8BACV,gBAAgB,OAChB,GAAG,YACJ,GAAG;IAEJ,qBACE,gBAAC,CAAA,GAAA,YAAQ;QACN,GAAG,UAAU;QACd,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB,8BAAQ;kBACpC;qBACA;yBACA;2BACA;QACF,GAAG;kBACF,CAAC,cAAC,UAAU,aAAE,SAAS,EAAC,iBACvB;;oBACG,uBAAS,gBAAC,CAAA,GAAA,yCAAS;wBAAE,MAAM;wBAAM,YAAW;wBAAQ,eAAe;wBAAe,aAAa;kCAAc;;oBAC7G,uBAAS,gBAAC,CAAA,GAAA,yCAAG;wBAAE,QAAQ,kCAAY;kCAAC;4BAAM,YAAY;yCAAO;wBAAW;kCAAK;;kCAC9E,gBAAC,CAAA,GAAA,yCAAc;kCACb,cAAA,gBAAC;4BAAI,WAAW,kCAAY;6CAAC;sCAAa;4BAAI;sCAC5C,cAAA,gBAAC;gCAAI,WAAW,iCAAW;iDAAC;6CAAa;gCAAO;gCAAI,OAAO;oCAAC,OAAO,aAAa;gCAAG;;;;;;;AAOjG;AAEA;;;CAGC,GACD,IAAI,0DAAS,CAAA,GAAA,iBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/Meter.tsx"],"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 {\n  Meter as AriaMeter,\n  MeterProps as AriaMeterProps,\n  ContextValue\n} from 'react-aria-components';\nimport {bar, track} from './bar-utils'  with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMRef, DOMRefValue, LabelPosition} from '@react-types/shared';\nimport {FieldLabel} from './Field';\nimport {fieldLabel, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {lightDark, style} from '../style' with {type: 'macro'};\nimport {SkeletonWrapper} from './Skeleton';\nimport {Text} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface MeterStyleProps {\n  /** The [visual style](https://spectrum.adobe.com/page/meter/#-Options) of the Meter.\n   * @default 'informative'\n   */\n  variant?: 'informative' | 'positive' | 'notice' | 'negative',\n  /**\n   * The size of the Meter.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /**\n   * The static color style to apply. Useful when the button appears over a color background.\n   */\n  staticColor?: 'white' | 'black',\n  /**\n   * The label's overall position relative to the element it is labeling.\n   * @default 'top'\n   */\n  labelPosition?: LabelPosition\n}\n\nexport interface MeterProps extends Omit<AriaMeterProps, 'children' | 'className' | 'style'>, MeterStyleProps, StyleProps {\n  /** The content to display as the label. */\n  label?: ReactNode\n}\n\nexport const MeterContext = createContext<ContextValue<MeterProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst wrapper = style({\n  ...bar()\n}, getAllowedOverrides());\n\nconst valueStyles = style({\n  ...fieldLabel(),\n  gridArea: 'value'\n});\n\nconst trackStyles = style({\n  ...track(),\n  height: {\n    default: 6,\n    size: {\n      S: 4, // progress-bar-thickness-small\n      M: 6, // progress-bar-thickness-medium\n      L: 8, // progress-bar-thickness-large\n      XL: 10 // progress-bar-thickness-extra-large\n    }\n  }\n});\n\nconst fillStyles = style<MeterStyleProps>({\n  height: 'full',\n  borderStyle: 'none',\n  borderRadius: 'full',\n  backgroundColor: {\n    default: lightDark('informative-800', 'informative-900'), // 'informative-visual',\n    variant: {\n      positive: lightDark('positive-800', 'positive-900'), // 'positive-visual',\n      notice: lightDark('notice-800', 'notice-900'), // 'notice-visual',\n      negative: lightDark('negative-800', 'negative-900') // 'negative-visual'\n    },\n    staticColor: {\n      white: {\n        default: 'transparent-white-900'\n      },\n      // TODO: Is there a black static color in S2?\n      black: {\n        default: 'transparent-black-900'\n      }\n    },\n    forcedColors: 'ButtonText'\n  }\n});\n\nfunction Meter(props: MeterProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, MeterContext);\n  let domRef = useDOMRef(ref);\n\n  let {\n    label,\n    size = 'M',\n    staticColor,\n    styles,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    variant = 'informative',\n    labelPosition = 'top',\n    ...groupProps\n  } = props;\n\n  return (\n    <AriaMeter\n      {...groupProps}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + wrapper({\n        size,\n        variant,\n        staticColor,\n        labelPosition\n      }, styles)}>\n      {({percentage, valueText}) => (\n        <>\n          {label && <FieldLabel size={size} labelAlign=\"start\" labelPosition={labelPosition} staticColor={staticColor}>{label}</FieldLabel>}\n          {label && <Text styles={valueStyles({size, labelAlign: 'end', staticColor})}>{valueText}</Text>}\n          <SkeletonWrapper>\n            <div className={trackStyles({staticColor, size})}>\n              <div className={fillStyles({staticColor, variant})} style={{width: percentage + '%'}} />\n            </div>\n          </SkeletonWrapper>\n        </>\n      )}\n    </AriaMeter>\n  );\n}\n\n/**\n * Meters are visual representations of a quantity or an achievement.\n * Their progress is determined by user actions, rather than system actions.\n */\nlet _Meter = forwardRef(Meter);\nexport {_Meter as Meter};\n"],"names":[],"version":3,"file":"Meter.mjs.map"}
+{"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AA6CM,MAAM,0DAAe,CAAA,GAAA,oBAAY,EAAkE;AAE1G,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaN,MAAM;;;;;;;;;;;;;;;;AAoBC,MAAM,0DAAQ,CAAA,GAAA,iBAAS,EAAE,SAAS,MAAM,KAAiB,EAAE,GAA2B;IAC3F,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IAEvB,IAAI,SACF,KAAK,QACL,OAAO,kBACP,WAAW,UACX,MAAM,oBACN,mBAAmB,kBACnB,YAAY,WACZ,UAAU,8BACV,gBAAgB,OAChB,GAAG,YACJ,GAAG;IACJ,IAAI,gBAAgB,CAAC,CAAC;IAEtB,qBACE,gBAAC,CAAA,GAAA,YAAQ;QACN,GAAG,UAAU;QACd,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB,8BAAQ;kBACpC;qBACA;yBACA;2BACA;QACF,GAAG;kBACF,CAAC,cAAC,UAAU,aAAE,SAAS,EAAC,iBACvB;;oBACG,uBAAS,gBAAC,CAAA,GAAA,yCAAS;wBAAE,MAAM;wBAAM,YAAW;wBAAQ,eAAe;wBAAe,aAAa;kCAAc;;oBAC7G,uBAAS,gBAAC,CAAA,GAAA,yCAAG;wBAAE,QAAQ,kCAAY;kCAAC;4BAAM,YAAY;2CAAO;wBAAa;kCAAK;;kCAChF,gBAAC,CAAA,GAAA,yCAAc;kCACb,cAAA,gBAAC;4BAAI,WAAW,kCAAY;+CAAC;sCAAe;4BAAI;sCAC9C,cAAA,gBAAC;gCAAI,WAAW,iCAAW;mDAAC;6CAAe;gCAAO;gCAAI,OAAO;oCAAC,OAAO,aAAa;gCAAG;;;;;;;AAOnG","sources":["packages/@react-spectrum/s2/src/Meter.tsx"],"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 {\n  Meter as AriaMeter,\n  MeterProps as AriaMeterProps,\n  ContextValue\n} from 'react-aria-components';\nimport {bar, track} from './bar-utils'  with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMRef, DOMRefValue, LabelPosition} from '@react-types/shared';\nimport {FieldLabel} from './Field';\nimport {fieldLabel, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {lightDark, style} from '../style' with {type: 'macro'};\nimport {SkeletonWrapper} from './Skeleton';\nimport {Text} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface MeterStyleProps {\n  /** The [visual style](https://spectrum.adobe.com/page/meter/#-Options) of the Meter.\n   * @default 'informative'\n   */\n  variant?: 'informative' | 'positive' | 'notice' | 'negative',\n  /**\n   * The size of the Meter.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /**\n   * The static color style to apply. Useful when the button appears over a color background.\n   */\n  staticColor?: 'white' | 'black' | 'auto',\n  /**\n   * The label's overall position relative to the element it is labeling.\n   * @default 'top'\n   */\n  labelPosition?: LabelPosition\n}\n\nexport interface MeterProps extends Omit<AriaMeterProps, 'children' | 'className' | 'style'>, MeterStyleProps, StyleProps {\n  /** The content to display as the label. */\n  label?: ReactNode\n}\n\nexport const MeterContext = createContext<ContextValue<Partial<MeterProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst wrapper = style({\n  ...bar()\n}, getAllowedOverrides());\n\nconst valueStyles = style({\n  ...fieldLabel(),\n  gridArea: 'value'\n});\n\nconst trackStyles = style({\n  ...track(),\n  height: {\n    default: 6,\n    size: {\n      S: 4, // progress-bar-thickness-small\n      M: 6, // progress-bar-thickness-medium\n      L: 8, // progress-bar-thickness-large\n      XL: 10 // progress-bar-thickness-extra-large\n    }\n  }\n});\n\nconst fillStyles = style<MeterStyleProps & {isStaticColor: boolean}>({\n  height: 'full',\n  borderStyle: 'none',\n  borderRadius: 'full',\n  backgroundColor: {\n    default: lightDark('informative-800', 'informative-900'), // 'informative-visual',\n    variant: {\n      positive: lightDark('positive-800', 'positive-900'), // 'positive-visual',\n      notice: lightDark('notice-800', 'notice-900'), // 'notice-visual',\n      negative: lightDark('negative-800', 'negative-900') // 'negative-visual'\n    },\n    isStaticColor: 'transparent-overlay-900',\n    forcedColors: 'ButtonText'\n  }\n});\n\n/**\n * Meters are visual representations of a quantity or an achievement.\n * Their progress is determined by user actions, rather than system actions.\n */\nexport const Meter = forwardRef(function Meter(props: MeterProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, MeterContext);\n  let domRef = useDOMRef(ref);\n\n  let {\n    label,\n    size = 'M',\n    staticColor,\n    styles,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    variant = 'informative',\n    labelPosition = 'top',\n    ...groupProps\n  } = props;\n  let isStaticColor = !!staticColor;\n\n  return (\n    <AriaMeter\n      {...groupProps}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + wrapper({\n        size,\n        variant,\n        staticColor,\n        labelPosition\n      }, styles)}>\n      {({percentage, valueText}) => (\n        <>\n          {label && <FieldLabel size={size} labelAlign=\"start\" labelPosition={labelPosition} staticColor={staticColor}>{label}</FieldLabel>}\n          {label && <Text styles={valueStyles({size, labelAlign: 'end', isStaticColor})}>{valueText}</Text>}\n          <SkeletonWrapper>\n            <div className={trackStyles({isStaticColor, size})}>\n              <div className={fillStyles({isStaticColor, variant})} style={{width: percentage + '%'}} />\n            </div>\n          </SkeletonWrapper>\n        </>\n      )}\n    </AriaMeter>\n  );\n});\n"],"names":[],"version":3,"file":"Meter.mjs.map"}

package/dist/Modal.cjs

@@ -26,35 +26,31 @@ $parcel$export(module.exports, "Modal", () => $8e678305a8c10028$export$2b77a92f1
 
 
 
-const $8e678305a8c10028$var$fade = "-_1llqja1";
-const $8e678305a8c10028$var$fadeAndSlide = "-_1mhijd";
 const $8e678305a8c10028$var$modalOverlayStyles = function anonymous(props) {
     let rules = " .";
-    if (props.colorScheme === "dark") rules += ' _Ab';
-    else if (props.colorScheme === "light") rules += ' _Aa';
-    else if (props.colorScheme === "light dark") rules += ' _Ac';
-    else rules += ' _A-10jn6wd';
-    rules += ' Ub';
-    rules += ' Xa';
-    rules += ' Za';
-    rules += ' Va';
+    if (props.colorScheme === "dark") rules += ' _Bb';
+    else if (props.colorScheme === "light") rules += ' _Ba';
+    else if (props.colorScheme === "light dark") rules += ' _Bc';
+    else rules += ' _B-10jn6wd';
+    rules += ' Vb';
+    rules += ' Ya';
+    rules += ' _aa';
     rules += ' Wa';
-    rules += ' __Fa';
+    rules += ' Xa';
+    rules += ' __Ga';
     rules += ' b_____o';
-    rules += ' _Zd';
-    rules += ' _1c';
-    rules += ' _2d';
-    if (props.isExiting) rules += ' _S-1nys8p3';
-    else if (props.isEntering) rules += ' _S-1nys8p3';
-    if (props.isExiting) rules += ' _T-375x5l';
-    else if (props.isEntering) rules += ' _T-375y1o';
-    if (props.isExiting) rules += ' _Ya';
-    else if (props.isEntering) rules += ' _Ya';
-    if (props.isExiting) rules += ' _Vb';
-    else if (props.isEntering) rules += ' _Va';
+    rules += ' _0d';
+    rules += ' _2c';
+    rules += ' _3d';
+    if (props.isExiting) rules += ' _L-3t1x';
+    else if (props.isEntering) rules += ' _L-3t1x';
+    rules += ' _Pc';
+    if (props.isExiting) rules += ' _R-375x5l';
+    else rules += ' _R-375y1o';
+    rules += ' _Sa';
     return rules;
 };
-function $8e678305a8c10028$var$Modal(props1, ref) {
+const $8e678305a8c10028$export$2b77a92f1a5ad772 = /*#__PURE__*/ (0, $j6TWk$react.forwardRef)(function Modal(props1, ref) {
     let domRef = (0, $j6TWk$reactspectrumutils.useDOMRef)(ref);
     let colorScheme = (0, $j6TWk$react.useContext)((0, $914a06b3a1c679bc$exports.ColorSchemeContext));
     let { locale: locale, direction: direction } = (0, $j6TWk$reactariacomponents.useLocale)();
@@ -81,16 +77,16 @@ function $8e678305a8c10028$var$Modal(props1, ref) {
             ref: modalRef,
             className: (renderProps)=>(function anonymous(props) {
                     let rules = " .";
-                    rules += ' _Zd';
-                    rules += ' _6b';
-                    if (props.size === "fullscreenTakeover") rules += ' _va';
-                    else rules += ' _ve';
+                    rules += ' _0d';
+                    rules += ' _7b';
                     if (props.size === "fullscreenTakeover") rules += ' _wa';
                     else rules += ' _we';
                     if (props.size === "fullscreenTakeover") rules += ' _xa';
                     else rules += ' _xe';
                     if (props.size === "fullscreenTakeover") rules += ' _ya';
                     else rules += ' _ye';
+                    if (props.size === "fullscreenTakeover") rules += ' _za';
+                    else rules += ' _ze';
                     if (props.size === "fullscreenTakeover") rules += ' lb';
                     else if (props.size === "fullscreen") rules += ' l-tp2nko';
                     else if (props.size === "L") rules += ' l_________G';
@@ -104,21 +100,19 @@ function $8e678305a8c10028$var$Modal(props1, ref) {
                     if (props.size === "fullscreenTakeover") rules += ' po';
                     else if (props.size === "fullscreen") rules += ' po';
                     else rules += ' p-yjhhbg';
-                    rules += ' -_1de2x0q_b-______k';
+                    rules += ' -_1de2x0q_b-______x';
                     rules += ' b-1de2x0q';
-                    if (props.isExiting) rules += ' _S-1nys8p3';
-                    else if (props.isEntering) rules += ' _S-3zirke';
-                    if (props.isExiting) rules += ' _T-375x5l';
-                    else if (props.isEntering) rules += ' _T-375y1o';
-                    if (props.isExiting) rules += ' _Ya';
-                    else if (props.isEntering) rules += ' _Ya';
-                    if (props.isExiting) rules += ' _U-3t1x';
-                    else if (props.isEntering) rules += ' _U-375x8c';
-                    if (props.isExiting) rules += ' _Vb';
-                    else if (props.isEntering) rules += ' _Va';
-                    rules += ' _Wd';
-                    rules += ' _Lb';
-                    rules += ' _Nb';
+                    if (props.isExiting) rules += ' _L-3t1x';
+                    else if (props.isEntering) rules += ' _L-3t1x';
+                    if (props.isEntering) rules += ' Qg';
+                    rules += ' _P-19n5zko';
+                    if (props.isExiting) rules += ' _R-375x5l';
+                    else rules += ' _R-375y1o';
+                    rules += ' _Sa';
+                    if (props.isExiting) rules += ' _Q-3t1x';
+                    else rules += ' _Q-375x8c';
+                    rules += ' _Mb';
+                    rules += ' _Ob';
                     rules += ' da';
                     return rules;
                 })({
@@ -127,10 +121,7 @@ function $8e678305a8c10028$var$Modal(props1, ref) {
                 })
         })
     });
-}
-/**
- * A modal is an overlay element which blocks interaction with elements outside it.
- */ let $8e678305a8c10028$export$2b77a92f1a5ad772 = /*#__PURE__*/ (0, $j6TWk$react.forwardRef)($8e678305a8c10028$var$Modal);
+});
 
 
 //# sourceMappingURL=Modal.cjs.map

package/dist/Modal.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAoBD,MAAM;AAUN,MAAM;AAYN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBN,SAAS,4BAAM,MAAiB,EAAE,GAA2B;IAC3D,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,cAAc,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,4CAAiB;IAC9C,IAAI,UAAC,MAAM,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,oCAAQ;IAElC,0DAA0D;IAC1D,IAAI,WAAW,CAAA,GAAA,wBAAU,EAAE,CAAC;QACzB,OAA4C,OAAO,GAAG;QACvD,IAAI,IAAI;YACN,GAAG,IAAI,GAAG;YACV,GAAG,GAAG,GAAG;QACX;IACF,GAAG;QAAC;QAAQ;QAAW;KAAO;IAE9B,qBACE,gCAAC,CAAA,GAAA,uCAAW;QACT,GAAG,MAAK;QACT,WAAW,CAAA,cAAe,yCAAmB;gBAAC,GAAG,WAAW;6BAAE;YAAW;kBACzE,cAAA,gCAAC,CAAA,GAAA,gCAAO;YACL,GAAG,MAAK;YACT,KAAK;YACL,WAAW,CAAA,cAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAiEvB;oBAAC,GAAG,WAAW;oBAAE,MAAM,OAAM,IAAI;gBAAA;;;AAG5C;AAEA;;CAEC,GACD,IAAI,0DAAS,CAAA,GAAA,uBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/Modal.tsx"],"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 {colorScheme} from './style-utils' with {type: 'macro'};\nimport {ColorSchemeContext} from './Provider';\nimport {DOMRef} from '@react-types/shared';\nimport {forwardRef, MutableRefObject, useCallback, useContext} from 'react';\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {ModalOverlay, ModalOverlayProps, Modal as RACModal, useLocale} from 'react-aria-components';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\ninterface ModalProps extends ModalOverlayProps {\n  /**\n   * The size of the Modal.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'fullscreen' | 'fullscreenTakeover'\n}\n\nconst fade = keyframes(`\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n`);\n\nconst fadeAndSlide = keyframes(`\n  from {\n    opacity: 0;\n    transform: translateY(20px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`);\n\nconst modalOverlayStyles = style({\n  ...colorScheme(),\n  position: 'fixed',\n  inset: 0,\n  isolation: 'isolate',\n  backgroundColor: 'transparent-black-500',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  animation: {\n    isEntering: fade,\n    isExiting: fade\n  },\n  animationDuration: {\n    isEntering: 250,\n    isExiting: 130\n  },\n  animationDirection: {\n    isEntering: 'normal',\n    isExiting: 'reverse'\n  }\n});\n\nfunction Modal(props: ModalProps, ref: DOMRef<HTMLDivElement>) {\n  let domRef = useDOMRef(ref);\n  let colorScheme = useContext(ColorSchemeContext);\n  let {locale, direction} = useLocale();\n\n  // TODO: should we pass through lang and dir props in RAC?\n  let modalRef = useCallback((el: HTMLDivElement) => {\n    (domRef as MutableRefObject<HTMLDivElement>).current = el;\n    if (el) {\n      el.lang = locale;\n      el.dir = direction;\n    }\n  }, [locale, direction, domRef]);\n\n  return (\n    <ModalOverlay\n      {...props}\n      className={renderProps => modalOverlayStyles({...renderProps, colorScheme})}>\n      <RACModal\n        {...props}\n        ref={modalRef}\n        className={renderProps => style({\n          display: 'flex',\n          flexDirection: 'column',\n          borderRadius: {\n            default: 'xl',\n            size: {\n              fullscreenTakeover: 'none'\n            }\n          },\n          width: {\n            size: {\n              // Copied from designs, not sure if correct.\n              S: 336,\n              M: 416,\n              L: 576,\n              fullscreen: '[calc(100% - 40px)]',\n              fullscreenTakeover: 'full'\n            }\n          },\n          height: {\n            size: {\n              fullscreen: '[calc(100% - 40px)]',\n              fullscreenTakeover: 'full'\n            }\n          },\n          maxWidth: {\n            default: '[90vw]',\n            size: {\n              fullscreen: 'none',\n              fullscreenTakeover: 'none'\n            }\n          },\n          maxHeight: {\n            default: '[90vh]',\n            size: {\n              fullscreen: 'none',\n              fullscreenTakeover: 'none'\n            }\n          },\n          '--s2-container-bg': {\n            type: 'backgroundColor',\n            value: 'layer-2'\n          },\n          backgroundColor: '--s2-container-bg',\n          animation: {\n            isEntering: fadeAndSlide,\n            isExiting: fade\n          },\n          animationDuration: {\n            isEntering: 250,\n            isExiting: 130\n          },\n          animationDelay: {\n            isEntering: 160,\n            isExiting: 0\n          },\n          animationDirection: {\n            isEntering: 'normal',\n            isExiting: 'reverse'\n          },\n          animationFillMode: 'both',\n          // Transparent outline for WHCM.\n          outlineStyle: 'solid',\n          outlineWidth: 1,\n          outlineColor: 'transparent'\n        })({...renderProps, size: props.size})} />\n    </ModalOverlay>\n  );\n}\n\n/**\n * A modal is an overlay element which blocks interaction with elements outside it.\n */\nlet _Modal = forwardRef(Modal);\nexport {_Modal as Modal};\n"],"names":[],"version":3,"file":"Modal.cjs.map"}
+{"mappings":";;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAmBD,MAAM;;;;;;;;;;;;;;;;;;;;;;;;AAuBC,MAAM,0DAAQ,CAAA,GAAA,uBAAS,EAAE,SAAS,MAAM,MAAiB,EAAE,GAA2B;IAC3F,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,cAAc,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,4CAAiB;IAC9C,IAAI,UAAC,MAAM,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,oCAAQ;IAElC,0DAA0D;IAC1D,IAAI,WAAW,CAAA,GAAA,wBAAU,EAAE,CAAC;QACzB,OAA4C,OAAO,GAAG;QACvD,IAAI,IAAI;YACN,GAAG,IAAI,GAAG;YACV,GAAG,GAAG,GAAG;QACX;IACF,GAAG;QAAC;QAAQ;QAAW;KAAO;IAE9B,qBACE,gCAAC,CAAA,GAAA,uCAAW;QACT,GAAG,MAAK;QACT,WAAW,CAAA,cAAe,yCAAmB;gBAAC,GAAG,WAAW;6BAAE;YAAW;kBACzE,cAAA,gCAAC,CAAA,GAAA,gCAAO;YACL,GAAG,MAAK;YACT,KAAK;YACL,WAAW,CAAA,cAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAgEvB;oBAAC,GAAG,WAAW;oBAAE,MAAM,OAAM,IAAI;gBAAA;;;AAG5C","sources":["packages/@react-spectrum/s2/src/Modal.tsx"],"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 {colorScheme} from './style-utils' with {type: 'macro'};\nimport {ColorSchemeContext} from './Provider';\nimport {DOMRef} from '@react-types/shared';\nimport {forwardRef, MutableRefObject, useCallback, useContext} from 'react';\nimport {ModalOverlay, ModalOverlayProps, Modal as RACModal, useLocale} from 'react-aria-components';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\ninterface ModalProps extends ModalOverlayProps {\n  /**\n   * The size of the Modal.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'fullscreen' | 'fullscreenTakeover'\n}\n\nconst modalOverlayStyles = style({\n  ...colorScheme(),\n  position: 'fixed',\n  inset: 0,\n  isolation: 'isolate',\n  backgroundColor: 'transparent-black-500',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  opacity: {\n    isEntering: 0,\n    isExiting: 0\n  },\n  transition: 'opacity',\n  transitionDuration: {\n    default: 250,\n    isExiting: 130\n  }\n});\n\n/**\n * A modal is an overlay element which blocks interaction with elements outside it.\n */\nexport const Modal = forwardRef(function Modal(props: ModalProps, ref: DOMRef<HTMLDivElement>) {\n  let domRef = useDOMRef(ref);\n  let colorScheme = useContext(ColorSchemeContext);\n  let {locale, direction} = useLocale();\n\n  // TODO: should we pass through lang and dir props in RAC?\n  let modalRef = useCallback((el: HTMLDivElement) => {\n    (domRef as MutableRefObject<HTMLDivElement>).current = el;\n    if (el) {\n      el.lang = locale;\n      el.dir = direction;\n    }\n  }, [locale, direction, domRef]);\n\n  return (\n    <ModalOverlay\n      {...props}\n      className={renderProps => modalOverlayStyles({...renderProps, colorScheme})}>\n      <RACModal\n        {...props}\n        ref={modalRef}\n        className={renderProps => style({\n          display: 'flex',\n          flexDirection: 'column',\n          borderRadius: {\n            default: 'xl',\n            size: {\n              fullscreenTakeover: 'none'\n            }\n          },\n          width: {\n            size: {\n              // Copied from designs, not sure if correct.\n              S: 336,\n              M: 416,\n              L: 576,\n              fullscreen: '[calc(100% - 40px)]',\n              fullscreenTakeover: 'full'\n            }\n          },\n          height: {\n            size: {\n              fullscreen: '[calc(100% - 40px)]',\n              fullscreenTakeover: 'full'\n            }\n          },\n          maxWidth: {\n            default: '[90vw]',\n            size: {\n              fullscreen: 'none',\n              fullscreenTakeover: 'none'\n            }\n          },\n          maxHeight: {\n            default: '[90vh]',\n            size: {\n              fullscreen: 'none',\n              fullscreenTakeover: 'none'\n            }\n          },\n          '--s2-container-bg': {\n            type: 'backgroundColor',\n            value: 'layer-2'\n          },\n          backgroundColor: '--s2-container-bg',\n          opacity: {\n            isEntering: 0,\n            isExiting: 0\n          },\n          translateY: {\n            isEntering: 20\n          },\n          transition: '[opacity, translate]',\n          transitionDuration: {\n            default: 250,\n            isExiting: 130\n          },\n          transitionDelay: {\n            default: 160,\n            isExiting: 0\n          },\n          // Transparent outline for WHCM.\n          outlineStyle: 'solid',\n          outlineWidth: 1,\n          outlineColor: 'transparent'\n        })({...renderProps, size: props.size})} />\n    </ModalOverlay>\n  );\n});\n"],"names":[],"version":3,"file":"Modal.cjs.map"}

package/dist/Modal.css

@@ -1,76 +1,54 @@
-@keyframes -_1llqja1 {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes -_1mhijd {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
 @layer _.a {
-  ._A-10jn6wd {
+  ._B-10jn6wd {
     color-scheme: var(--lightningcss-light, light) var(--lightningcss-dark, dark);
   }
 
-  ._Ac {
+  ._Bc {
     --lightningcss-light: initial;
     --lightningcss-dark: ;
     color-scheme: light dark;
   }
 
   @media (prefers-color-scheme: dark) {
-    ._Ac {
+    ._Bc {
       --lightningcss-light: ;
       --lightningcss-dark: initial;
     }
   }
 
-  ._Aa {
+  ._Ba {
     --lightningcss-light: initial;
     --lightningcss-dark: ;
     color-scheme: light;
   }
 
-  ._Ab {
+  ._Bb {
     --lightningcss-light: ;
     --lightningcss-dark: initial;
     color-scheme: dark;
   }
 
-  .Ub {
+  .Vb {
     position: fixed;
   }
 
-  .Xa {
+  .Ya {
     top: 0;
   }
 
-  .Za {
+  ._aa {
     bottom: 0;
   }
 
-  .Va {
+  .Wa {
     inset-inline-start: 0;
   }
 
-  .Wa {
+  .Xa {
     inset-inline-end: 0;
   }
 
-  .__Fa {
+  .__Ga {
     isolation: isolate;
   }
 
@@ -78,51 +56,55 @@
     background-color: #00000070;
   }
 
-  ._1c {
+  ._2c {
     align-items: center;
   }
 
-  ._2d {
+  ._3d {
     justify-content: center;
   }
 
-  ._Zd {
+  ._Pc {
+    transition-property: opacity;
+  }
+
+  ._0d {
     display: flex;
   }
 
-  ._6b {
+  ._7b {
     flex-direction: column;
   }
 
-  ._ve {
+  ._we {
     border-start-start-radius: 1rem;
   }
 
-  ._va {
+  ._wa {
     border-start-start-radius: 0;
   }
 
-  ._we {
+  ._xe {
     border-start-end-radius: 1rem;
   }
 
-  ._wa {
+  ._xa {
     border-start-end-radius: 0;
   }
 
-  ._xe {
+  ._ye {
     border-end-start-radius: 1rem;
   }
 
-  ._xa {
+  ._ya {
     border-end-start-radius: 0;
   }
 
-  ._ye {
+  ._ze {
     border-end-end-radius: 1rem;
   }
 
-  ._ya {
+  ._za {
     border-end-end-radius: 0;
   }
 
@@ -170,7 +152,7 @@
     max-height: none;
   }
 
-  .-_1de2x0q_b-______k {
+  .-_1de2x0q_b-______x {
     --s2-container-bg: var(--lightningcss-light, #fff) var(--lightningcss-dark, #222);
   }
 
@@ -178,51 +160,45 @@
     background-color: var(--s2-container-bg);
   }
 
-  ._S-3zirke {
-    animation-name: -_1mhijd;
-  }
-
-  ._S-1nys8p3 {
-    animation-name: -_1llqja1;
-  }
-
-  ._T-375y1o {
-    animation-duration: .25s;
+  ._L-3t1x {
+    opacity: 0;
+    opacity: 0;
   }
 
-  ._T-375x5l {
-    animation-duration: .13s;
+  .Qg {
+    --translateY: 1.25rem;
+    translate: var(--translateX, 0) var(--translateY, 0);
   }
 
-  ._Ya {
-    animation-timing-function: cubic-bezier(.45, 0, .4, 1);
+  ._P-19n5zko {
+    transition-property: opacity, translate;
   }
 
-  ._U-375x8c {
-    animation-delay: .16s;
+  ._R-375y1o {
+    transition-duration: .25s;
   }
 
-  ._U-3t1x {
-    animation-delay: 0s;
+  ._R-375x5l {
+    transition-duration: .13s;
   }
 
-  ._Va {
-    animation-direction: normal;
+  ._Sa {
+    transition-timing-function: cubic-bezier(.45, 0, .4, 1);
   }
 
-  ._Vb {
-    animation-direction: reverse;
+  ._Q-375x8c {
+    transition-delay: .16s;
   }
 
-  ._Wd {
-    animation-fill-mode: both;
+  ._Q-3t1x {
+    transition-delay: 0s;
   }
 
-  ._Lb {
+  ._Mb {
     outline-style: solid;
   }
 
-  ._Nb {
+  ._Ob {
     outline-width: 1px;
   }
 
@@ -231,9 +207,5 @@
   }
 }
 
-@layer _.b, UNSAFE_overrides;
-
-.\.:not(#a#b) {
-  all: revert-layer;
-}
+@layer _.b;
 /*# sourceMappingURL=Modal.css.map */

package/dist/Modal.css.map

@@ -1 +1 @@
-{"mappings":"AC8Ba;;;;;;;;;;AAUQ;;;;;;;;;;;;AAYM;EAAA;;;;EAAA;;;;;;EAAA;IAAA;;;;;;EAAA;;;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA4CO;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA5CP;;AA4CO","sources":["be2ce4448c91abb5","packages/@react-spectrum/s2/src/Modal.tsx"],"sourcesContent":["@import \"003d01b6d2f33501\";\n@import \"15edcb25b251bc58\";\n@import \"1ef8b667afb08263\";\n@import \"3b2472fc4486ca92\";\n","/*\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 {colorScheme} from './style-utils' with {type: 'macro'};\nimport {ColorSchemeContext} from './Provider';\nimport {DOMRef} from '@react-types/shared';\nimport {forwardRef, MutableRefObject, useCallback, useContext} from 'react';\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {ModalOverlay, ModalOverlayProps, Modal as RACModal, useLocale} from 'react-aria-components';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\ninterface ModalProps extends ModalOverlayProps {\n  /**\n   * The size of the Modal.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'fullscreen' | 'fullscreenTakeover'\n}\n\nconst fade = keyframes(`\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n`);\n\nconst fadeAndSlide = keyframes(`\n  from {\n    opacity: 0;\n    transform: translateY(20px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`);\n\nconst modalOverlayStyles = style({\n  ...colorScheme(),\n  position: 'fixed',\n  inset: 0,\n  isolation: 'isolate',\n  backgroundColor: 'transparent-black-500',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  animation: {\n    isEntering: fade,\n    isExiting: fade\n  },\n  animationDuration: {\n    isEntering: 250,\n    isExiting: 130\n  },\n  animationDirection: {\n    isEntering: 'normal',\n    isExiting: 'reverse'\n  }\n});\n\nfunction Modal(props: ModalProps, ref: DOMRef<HTMLDivElement>) {\n  let domRef = useDOMRef(ref);\n  let colorScheme = useContext(ColorSchemeContext);\n  let {locale, direction} = useLocale();\n\n  // TODO: should we pass through lang and dir props in RAC?\n  let modalRef = useCallback((el: HTMLDivElement) => {\n    (domRef as MutableRefObject<HTMLDivElement>).current = el;\n    if (el) {\n      el.lang = locale;\n      el.dir = direction;\n    }\n  }, [locale, direction, domRef]);\n\n  return (\n    <ModalOverlay\n      {...props}\n      className={renderProps => modalOverlayStyles({...renderProps, colorScheme})}>\n      <RACModal\n        {...props}\n        ref={modalRef}\n        className={renderProps => style({\n          display: 'flex',\n          flexDirection: 'column',\n          borderRadius: {\n            default: 'xl',\n            size: {\n              fullscreenTakeover: 'none'\n            }\n          },\n          width: {\n            size: {\n              // Copied from designs, not sure if correct.\n              S: 336,\n              M: 416,\n              L: 576,\n              fullscreen: '[calc(100% - 40px)]',\n              fullscreenTakeover: 'full'\n            }\n          },\n          height: {\n            size: {\n              fullscreen: '[calc(100% - 40px)]',\n              fullscreenTakeover: 'full'\n            }\n          },\n          maxWidth: {\n            default: '[90vw]',\n            size: {\n              fullscreen: 'none',\n              fullscreenTakeover: 'none'\n            }\n          },\n          maxHeight: {\n            default: '[90vh]',\n            size: {\n              fullscreen: 'none',\n              fullscreenTakeover: 'none'\n            }\n          },\n          '--s2-container-bg': {\n            type: 'backgroundColor',\n            value: 'layer-2'\n          },\n          backgroundColor: '--s2-container-bg',\n          animation: {\n            isEntering: fadeAndSlide,\n            isExiting: fade\n          },\n          animationDuration: {\n            isEntering: 250,\n            isExiting: 130\n          },\n          animationDelay: {\n            isEntering: 160,\n            isExiting: 0\n          },\n          animationDirection: {\n            isEntering: 'normal',\n            isExiting: 'reverse'\n          },\n          animationFillMode: 'both',\n          // Transparent outline for WHCM.\n          outlineStyle: 'solid',\n          outlineWidth: 1,\n          outlineColor: 'transparent'\n        })({...renderProps, size: props.size})} />\n    </ModalOverlay>\n  );\n}\n\n/**\n * A modal is an overlay element which blocks interaction with elements outside it.\n */\nlet _Modal = forwardRef(Modal);\nexport {_Modal as Modal};\n"],"names":[],"version":3,"file":"Modal.css.map"}
+{"mappings":"AC6B2B;EAAA;;;;EAAA;;;;;;EAAA;IAAA;;;;;;EAAA;;;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA4CO;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA5CP","sources":["be2ce4448c91abb5","packages/@react-spectrum/s2/src/Modal.tsx"],"sourcesContent":["@import \"003d01b6d2f33501\";\n@import \"15edcb25b251bc58\";\n","/*\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 {colorScheme} from './style-utils' with {type: 'macro'};\nimport {ColorSchemeContext} from './Provider';\nimport {DOMRef} from '@react-types/shared';\nimport {forwardRef, MutableRefObject, useCallback, useContext} from 'react';\nimport {ModalOverlay, ModalOverlayProps, Modal as RACModal, useLocale} from 'react-aria-components';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\ninterface ModalProps extends ModalOverlayProps {\n  /**\n   * The size of the Modal.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'fullscreen' | 'fullscreenTakeover'\n}\n\nconst modalOverlayStyles = style({\n  ...colorScheme(),\n  position: 'fixed',\n  inset: 0,\n  isolation: 'isolate',\n  backgroundColor: 'transparent-black-500',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  opacity: {\n    isEntering: 0,\n    isExiting: 0\n  },\n  transition: 'opacity',\n  transitionDuration: {\n    default: 250,\n    isExiting: 130\n  }\n});\n\n/**\n * A modal is an overlay element which blocks interaction with elements outside it.\n */\nexport const Modal = forwardRef(function Modal(props: ModalProps, ref: DOMRef<HTMLDivElement>) {\n  let domRef = useDOMRef(ref);\n  let colorScheme = useContext(ColorSchemeContext);\n  let {locale, direction} = useLocale();\n\n  // TODO: should we pass through lang and dir props in RAC?\n  let modalRef = useCallback((el: HTMLDivElement) => {\n    (domRef as MutableRefObject<HTMLDivElement>).current = el;\n    if (el) {\n      el.lang = locale;\n      el.dir = direction;\n    }\n  }, [locale, direction, domRef]);\n\n  return (\n    <ModalOverlay\n      {...props}\n      className={renderProps => modalOverlayStyles({...renderProps, colorScheme})}>\n      <RACModal\n        {...props}\n        ref={modalRef}\n        className={renderProps => style({\n          display: 'flex',\n          flexDirection: 'column',\n          borderRadius: {\n            default: 'xl',\n            size: {\n              fullscreenTakeover: 'none'\n            }\n          },\n          width: {\n            size: {\n              // Copied from designs, not sure if correct.\n              S: 336,\n              M: 416,\n              L: 576,\n              fullscreen: '[calc(100% - 40px)]',\n              fullscreenTakeover: 'full'\n            }\n          },\n          height: {\n            size: {\n              fullscreen: '[calc(100% - 40px)]',\n              fullscreenTakeover: 'full'\n            }\n          },\n          maxWidth: {\n            default: '[90vw]',\n            size: {\n              fullscreen: 'none',\n              fullscreenTakeover: 'none'\n            }\n          },\n          maxHeight: {\n            default: '[90vh]',\n            size: {\n              fullscreen: 'none',\n              fullscreenTakeover: 'none'\n            }\n          },\n          '--s2-container-bg': {\n            type: 'backgroundColor',\n            value: 'layer-2'\n          },\n          backgroundColor: '--s2-container-bg',\n          opacity: {\n            isEntering: 0,\n            isExiting: 0\n          },\n          translateY: {\n            isEntering: 20\n          },\n          transition: '[opacity, translate]',\n          transitionDuration: {\n            default: 250,\n            isExiting: 130\n          },\n          transitionDelay: {\n            default: 160,\n            isExiting: 0\n          },\n          // Transparent outline for WHCM.\n          outlineStyle: 'solid',\n          outlineWidth: 1,\n          outlineColor: 'transparent'\n        })({...renderProps, size: props.size})} />\n    </ModalOverlay>\n  );\n});\n"],"names":[],"version":3,"file":"Modal.css.map"}

package/dist/Modal.mjs

@@ -1,7 +1,7 @@
 import "./Modal.css";
 import {ColorSchemeContext as $9affbfa4e13b9582$export$374e0245597d19a3} from "./Provider.mjs";
 import {jsx as $fdAcL$jsx} from "react/jsx-runtime";
-import {useContext as $fdAcL$useContext, useCallback as $fdAcL$useCallback, forwardRef as $fdAcL$forwardRef} from "react";
+import {forwardRef as $fdAcL$forwardRef, useContext as $fdAcL$useContext, useCallback as $fdAcL$useCallback} from "react";
 import {useLocale as $fdAcL$useLocale, ModalOverlay as $fdAcL$ModalOverlay, Modal as $fdAcL$Modal} from "react-aria-components";
 import {useDOMRef as $fdAcL$useDOMRef} from "@react-spectrum/utils";
 
@@ -20,35 +20,31 @@ import {useDOMRef as $fdAcL$useDOMRef} from "@react-spectrum/utils";
 
 
 
-const $c46d159bd615e407$var$fade = "-_1llqja1";
-const $c46d159bd615e407$var$fadeAndSlide = "-_1mhijd";
 const $c46d159bd615e407$var$modalOverlayStyles = function anonymous(props) {
     let rules = " .";
-    if (props.colorScheme === "dark") rules += ' _Ab';
-    else if (props.colorScheme === "light") rules += ' _Aa';
-    else if (props.colorScheme === "light dark") rules += ' _Ac';
-    else rules += ' _A-10jn6wd';
-    rules += ' Ub';
-    rules += ' Xa';
-    rules += ' Za';
-    rules += ' Va';
+    if (props.colorScheme === "dark") rules += ' _Bb';
+    else if (props.colorScheme === "light") rules += ' _Ba';
+    else if (props.colorScheme === "light dark") rules += ' _Bc';
+    else rules += ' _B-10jn6wd';
+    rules += ' Vb';
+    rules += ' Ya';
+    rules += ' _aa';
     rules += ' Wa';
-    rules += ' __Fa';
+    rules += ' Xa';
+    rules += ' __Ga';
     rules += ' b_____o';
-    rules += ' _Zd';
-    rules += ' _1c';
-    rules += ' _2d';
-    if (props.isExiting) rules += ' _S-1nys8p3';
-    else if (props.isEntering) rules += ' _S-1nys8p3';
-    if (props.isExiting) rules += ' _T-375x5l';
-    else if (props.isEntering) rules += ' _T-375y1o';
-    if (props.isExiting) rules += ' _Ya';
-    else if (props.isEntering) rules += ' _Ya';
-    if (props.isExiting) rules += ' _Vb';
-    else if (props.isEntering) rules += ' _Va';
+    rules += ' _0d';
+    rules += ' _2c';
+    rules += ' _3d';
+    if (props.isExiting) rules += ' _L-3t1x';
+    else if (props.isEntering) rules += ' _L-3t1x';
+    rules += ' _Pc';
+    if (props.isExiting) rules += ' _R-375x5l';
+    else rules += ' _R-375y1o';
+    rules += ' _Sa';
     return rules;
 };
-function $c46d159bd615e407$var$Modal(props1, ref) {
+const $c46d159bd615e407$export$2b77a92f1a5ad772 = /*#__PURE__*/ (0, $fdAcL$forwardRef)(function Modal(props1, ref) {
     let domRef = (0, $fdAcL$useDOMRef)(ref);
     let colorScheme = (0, $fdAcL$useContext)((0, $9affbfa4e13b9582$export$374e0245597d19a3));
     let { locale: locale, direction: direction } = (0, $fdAcL$useLocale)();
@@ -75,16 +71,16 @@ function $c46d159bd615e407$var$Modal(props1, ref) {
             ref: modalRef,
             className: (renderProps)=>(function anonymous(props) {
                     let rules = " .";
-                    rules += ' _Zd';
-                    rules += ' _6b';
-                    if (props.size === "fullscreenTakeover") rules += ' _va';
-                    else rules += ' _ve';
+                    rules += ' _0d';
+                    rules += ' _7b';
                     if (props.size === "fullscreenTakeover") rules += ' _wa';
                     else rules += ' _we';
                     if (props.size === "fullscreenTakeover") rules += ' _xa';
                     else rules += ' _xe';
                     if (props.size === "fullscreenTakeover") rules += ' _ya';
                     else rules += ' _ye';
+                    if (props.size === "fullscreenTakeover") rules += ' _za';
+                    else rules += ' _ze';
                     if (props.size === "fullscreenTakeover") rules += ' lb';
                     else if (props.size === "fullscreen") rules += ' l-tp2nko';
                     else if (props.size === "L") rules += ' l_________G';
@@ -98,21 +94,19 @@ function $c46d159bd615e407$var$Modal(props1, ref) {
                     if (props.size === "fullscreenTakeover") rules += ' po';
                     else if (props.size === "fullscreen") rules += ' po';
                     else rules += ' p-yjhhbg';
-                    rules += ' -_1de2x0q_b-______k';
+                    rules += ' -_1de2x0q_b-______x';
                     rules += ' b-1de2x0q';
-                    if (props.isExiting) rules += ' _S-1nys8p3';
-                    else if (props.isEntering) rules += ' _S-3zirke';
-                    if (props.isExiting) rules += ' _T-375x5l';
-                    else if (props.isEntering) rules += ' _T-375y1o';
-                    if (props.isExiting) rules += ' _Ya';
-                    else if (props.isEntering) rules += ' _Ya';
-                    if (props.isExiting) rules += ' _U-3t1x';
-                    else if (props.isEntering) rules += ' _U-375x8c';
-                    if (props.isExiting) rules += ' _Vb';
-                    else if (props.isEntering) rules += ' _Va';
-                    rules += ' _Wd';
-                    rules += ' _Lb';
-                    rules += ' _Nb';
+                    if (props.isExiting) rules += ' _L-3t1x';
+                    else if (props.isEntering) rules += ' _L-3t1x';
+                    if (props.isEntering) rules += ' Qg';
+                    rules += ' _P-19n5zko';
+                    if (props.isExiting) rules += ' _R-375x5l';
+                    else rules += ' _R-375y1o';
+                    rules += ' _Sa';
+                    if (props.isExiting) rules += ' _Q-3t1x';
+                    else rules += ' _Q-375x8c';
+                    rules += ' _Mb';
+                    rules += ' _Ob';
                     rules += ' da';
                     return rules;
                 })({
@@ -121,10 +115,7 @@ function $c46d159bd615e407$var$Modal(props1, ref) {
                 })
         })
     });
-}
-/**
- * A modal is an overlay element which blocks interaction with elements outside it.
- */ let $c46d159bd615e407$export$2b77a92f1a5ad772 = /*#__PURE__*/ (0, $fdAcL$forwardRef)($c46d159bd615e407$var$Modal);
+});
 
 
 export {$c46d159bd615e407$export$2b77a92f1a5ad772 as Modal};

package/dist/Modal.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAoBD,MAAM;AAUN,MAAM;AAYN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBN,SAAS,4BAAM,MAAiB,EAAE,GAA2B;IAC3D,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,cAAc,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,yCAAiB;IAC9C,IAAI,UAAC,MAAM,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,gBAAQ;IAElC,0DAA0D;IAC1D,IAAI,WAAW,CAAA,GAAA,kBAAU,EAAE,CAAC;QACzB,OAA4C,OAAO,GAAG;QACvD,IAAI,IAAI;YACN,GAAG,IAAI,GAAG;YACV,GAAG,GAAG,GAAG;QACX;IACF,GAAG;QAAC;QAAQ;QAAW;KAAO;IAE9B,qBACE,gBAAC,CAAA,GAAA,mBAAW;QACT,GAAG,MAAK;QACT,WAAW,CAAA,cAAe,yCAAmB;gBAAC,GAAG,WAAW;6BAAE;YAAW;kBACzE,cAAA,gBAAC,CAAA,GAAA,YAAO;YACL,GAAG,MAAK;YACT,KAAK;YACL,WAAW,CAAA,cAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAiEvB;oBAAC,GAAG,WAAW;oBAAE,MAAM,OAAM,IAAI;gBAAA;;;AAG5C;AAEA;;CAEC,GACD,IAAI,0DAAS,CAAA,GAAA,iBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/Modal.tsx"],"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 {colorScheme} from './style-utils' with {type: 'macro'};\nimport {ColorSchemeContext} from './Provider';\nimport {DOMRef} from '@react-types/shared';\nimport {forwardRef, MutableRefObject, useCallback, useContext} from 'react';\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {ModalOverlay, ModalOverlayProps, Modal as RACModal, useLocale} from 'react-aria-components';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\ninterface ModalProps extends ModalOverlayProps {\n  /**\n   * The size of the Modal.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'fullscreen' | 'fullscreenTakeover'\n}\n\nconst fade = keyframes(`\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n`);\n\nconst fadeAndSlide = keyframes(`\n  from {\n    opacity: 0;\n    transform: translateY(20px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`);\n\nconst modalOverlayStyles = style({\n  ...colorScheme(),\n  position: 'fixed',\n  inset: 0,\n  isolation: 'isolate',\n  backgroundColor: 'transparent-black-500',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  animation: {\n    isEntering: fade,\n    isExiting: fade\n  },\n  animationDuration: {\n    isEntering: 250,\n    isExiting: 130\n  },\n  animationDirection: {\n    isEntering: 'normal',\n    isExiting: 'reverse'\n  }\n});\n\nfunction Modal(props: ModalProps, ref: DOMRef<HTMLDivElement>) {\n  let domRef = useDOMRef(ref);\n  let colorScheme = useContext(ColorSchemeContext);\n  let {locale, direction} = useLocale();\n\n  // TODO: should we pass through lang and dir props in RAC?\n  let modalRef = useCallback((el: HTMLDivElement) => {\n    (domRef as MutableRefObject<HTMLDivElement>).current = el;\n    if (el) {\n      el.lang = locale;\n      el.dir = direction;\n    }\n  }, [locale, direction, domRef]);\n\n  return (\n    <ModalOverlay\n      {...props}\n      className={renderProps => modalOverlayStyles({...renderProps, colorScheme})}>\n      <RACModal\n        {...props}\n        ref={modalRef}\n        className={renderProps => style({\n          display: 'flex',\n          flexDirection: 'column',\n          borderRadius: {\n            default: 'xl',\n            size: {\n              fullscreenTakeover: 'none'\n            }\n          },\n          width: {\n            size: {\n              // Copied from designs, not sure if correct.\n              S: 336,\n              M: 416,\n              L: 576,\n              fullscreen: '[calc(100% - 40px)]',\n              fullscreenTakeover: 'full'\n            }\n          },\n          height: {\n            size: {\n              fullscreen: '[calc(100% - 40px)]',\n              fullscreenTakeover: 'full'\n            }\n          },\n          maxWidth: {\n            default: '[90vw]',\n            size: {\n              fullscreen: 'none',\n              fullscreenTakeover: 'none'\n            }\n          },\n          maxHeight: {\n            default: '[90vh]',\n            size: {\n              fullscreen: 'none',\n              fullscreenTakeover: 'none'\n            }\n          },\n          '--s2-container-bg': {\n            type: 'backgroundColor',\n            value: 'layer-2'\n          },\n          backgroundColor: '--s2-container-bg',\n          animation: {\n            isEntering: fadeAndSlide,\n            isExiting: fade\n          },\n          animationDuration: {\n            isEntering: 250,\n            isExiting: 130\n          },\n          animationDelay: {\n            isEntering: 160,\n            isExiting: 0\n          },\n          animationDirection: {\n            isEntering: 'normal',\n            isExiting: 'reverse'\n          },\n          animationFillMode: 'both',\n          // Transparent outline for WHCM.\n          outlineStyle: 'solid',\n          outlineWidth: 1,\n          outlineColor: 'transparent'\n        })({...renderProps, size: props.size})} />\n    </ModalOverlay>\n  );\n}\n\n/**\n * A modal is an overlay element which blocks interaction with elements outside it.\n */\nlet _Modal = forwardRef(Modal);\nexport {_Modal as Modal};\n"],"names":[],"version":3,"file":"Modal.mjs.map"}
+{"mappings":";;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAmBD,MAAM;;;;;;;;;;;;;;;;;;;;;;;;AAuBC,MAAM,0DAAQ,CAAA,GAAA,iBAAS,EAAE,SAAS,MAAM,MAAiB,EAAE,GAA2B;IAC3F,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,cAAc,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,yCAAiB;IAC9C,IAAI,UAAC,MAAM,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,gBAAQ;IAElC,0DAA0D;IAC1D,IAAI,WAAW,CAAA,GAAA,kBAAU,EAAE,CAAC;QACzB,OAA4C,OAAO,GAAG;QACvD,IAAI,IAAI;YACN,GAAG,IAAI,GAAG;YACV,GAAG,GAAG,GAAG;QACX;IACF,GAAG;QAAC;QAAQ;QAAW;KAAO;IAE9B,qBACE,gBAAC,CAAA,GAAA,mBAAW;QACT,GAAG,MAAK;QACT,WAAW,CAAA,cAAe,yCAAmB;gBAAC,GAAG,WAAW;6BAAE;YAAW;kBACzE,cAAA,gBAAC,CAAA,GAAA,YAAO;YACL,GAAG,MAAK;YACT,KAAK;YACL,WAAW,CAAA,cAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAgEvB;oBAAC,GAAG,WAAW;oBAAE,MAAM,OAAM,IAAI;gBAAA;;;AAG5C","sources":["packages/@react-spectrum/s2/src/Modal.tsx"],"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 {colorScheme} from './style-utils' with {type: 'macro'};\nimport {ColorSchemeContext} from './Provider';\nimport {DOMRef} from '@react-types/shared';\nimport {forwardRef, MutableRefObject, useCallback, useContext} from 'react';\nimport {ModalOverlay, ModalOverlayProps, Modal as RACModal, useLocale} from 'react-aria-components';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\ninterface ModalProps extends ModalOverlayProps {\n  /**\n   * The size of the Modal.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'fullscreen' | 'fullscreenTakeover'\n}\n\nconst modalOverlayStyles = style({\n  ...colorScheme(),\n  position: 'fixed',\n  inset: 0,\n  isolation: 'isolate',\n  backgroundColor: 'transparent-black-500',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  opacity: {\n    isEntering: 0,\n    isExiting: 0\n  },\n  transition: 'opacity',\n  transitionDuration: {\n    default: 250,\n    isExiting: 130\n  }\n});\n\n/**\n * A modal is an overlay element which blocks interaction with elements outside it.\n */\nexport const Modal = forwardRef(function Modal(props: ModalProps, ref: DOMRef<HTMLDivElement>) {\n  let domRef = useDOMRef(ref);\n  let colorScheme = useContext(ColorSchemeContext);\n  let {locale, direction} = useLocale();\n\n  // TODO: should we pass through lang and dir props in RAC?\n  let modalRef = useCallback((el: HTMLDivElement) => {\n    (domRef as MutableRefObject<HTMLDivElement>).current = el;\n    if (el) {\n      el.lang = locale;\n      el.dir = direction;\n    }\n  }, [locale, direction, domRef]);\n\n  return (\n    <ModalOverlay\n      {...props}\n      className={renderProps => modalOverlayStyles({...renderProps, colorScheme})}>\n      <RACModal\n        {...props}\n        ref={modalRef}\n        className={renderProps => style({\n          display: 'flex',\n          flexDirection: 'column',\n          borderRadius: {\n            default: 'xl',\n            size: {\n              fullscreenTakeover: 'none'\n            }\n          },\n          width: {\n            size: {\n              // Copied from designs, not sure if correct.\n              S: 336,\n              M: 416,\n              L: 576,\n              fullscreen: '[calc(100% - 40px)]',\n              fullscreenTakeover: 'full'\n            }\n          },\n          height: {\n            size: {\n              fullscreen: '[calc(100% - 40px)]',\n              fullscreenTakeover: 'full'\n            }\n          },\n          maxWidth: {\n            default: '[90vw]',\n            size: {\n              fullscreen: 'none',\n              fullscreenTakeover: 'none'\n            }\n          },\n          maxHeight: {\n            default: '[90vh]',\n            size: {\n              fullscreen: 'none',\n              fullscreenTakeover: 'none'\n            }\n          },\n          '--s2-container-bg': {\n            type: 'backgroundColor',\n            value: 'layer-2'\n          },\n          backgroundColor: '--s2-container-bg',\n          opacity: {\n            isEntering: 0,\n            isExiting: 0\n          },\n          translateY: {\n            isEntering: 20\n          },\n          transition: '[opacity, translate]',\n          transitionDuration: {\n            default: 250,\n            isExiting: 130\n          },\n          transitionDelay: {\n            default: 160,\n            isExiting: 0\n          },\n          // Transparent outline for WHCM.\n          outlineStyle: 'solid',\n          outlineWidth: 1,\n          outlineColor: 'transparent'\n        })({...renderProps, size: props.size})} />\n    </ModalOverlay>\n  );\n});\n"],"names":[],"version":3,"file":"Modal.mjs.map"}