@react-spectrum/s2 0.11.1 → 0.12.0

package/dist/Divider.mjs

@@ -31,7 +31,7 @@ const $bdf52657dac0f070$export$e8c9778bf415dd08 = function anonymous(props, over
     let flexGrow = false;
     let flexShrink = false;
     let width = false;
-    let matches = (overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|Z|N|L)[^\s]+/g);
+    let matches = (overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L)[^\s]+/g);
     for (let p of matches){
         if (p[1] === "_d") alignSelf = true;
         if (p[1] === "J") marginTop = true;
@@ -43,37 +43,37 @@ const $bdf52657dac0f070$export$e8c9778bf415dd08 = function anonymous(props, over
         if (p[1] === "Z") width = true;
         rules += p[0];
     }
-    if (props.staticColor === "white") rules += ' -Ovbhqd-gcwrnr11';
-    else if (props.staticColor === "black") rules += ' -Ovbhqd-g4hn3s11';
-    if (!alignSelf) rules += ' _df11';
+    if (props.staticColor === "white") rules += ' -Ovbhqd-gcwrnr12';
+    else if (props.staticColor === "black") rules += ' -Ovbhqd-g4hn3s12';
+    if (!alignSelf) rules += ' _df12';
     if (props.isStaticColor) {
-        if (props.size === "L") rules += ' gi11';
-        else rules += ' gg11';
-    } else if (props.size === "L") rules += ' g011';
-    else rules += ' gF11';
-    rules += ' gl_a11';
-    rules += ' _je11';
-    rules += ' og11';
-    rules += ' ng11';
-    rules += ' kg11';
-    rules += ' jg11';
-    if (!marginTop) rules += ' Jy11';
-    if (!marginBottom) rules += ' Gy11';
-    if (!marginInlineStart) rules += ' Iy11';
-    if (!marginInlineEnd) rules += ' Hy11';
-    if (!flexGrow) rules += ' _ua11';
-    if (!flexShrink) rules += ' _va11';
+        if (props.size === "L") rules += ' gi12';
+        else rules += ' gg12';
+    } else if (props.size === "L") rules += ' g012';
+    else rules += ' gF12';
+    rules += ' gl_a12';
+    rules += ' _je12';
+    rules += ' og12';
+    rules += ' ng12';
+    rules += ' kg12';
+    rules += ' jg12';
+    if (!marginTop) rules += ' Jy12';
+    if (!marginBottom) rules += ' Gy12';
+    if (!marginInlineStart) rules += ' Iy12';
+    if (!marginInlineEnd) rules += ' Hy12';
+    if (!flexGrow) rules += ' _ua12';
+    if (!flexShrink) rules += ' _va12';
     if (props.orientation === "horizontal") {
-        if (props.size === "L") rules += ' FT4Nfn11';
-        else if (props.size === "S") rules += ' FceNfn11';
-        else rules += ' FLvNfn11';
+        if (props.size === "L") rules += ' FT4Nfn12';
+        else if (props.size === "S") rules += ' FceNfn12';
+        else rules += ' FLvNfn12';
     }
     if (props.orientation === "vertical") {
         if (props.size === "L") {
-            if (!width) rules += ' ZT4Nfn11';
+            if (!width) rules += ' ZT4Nfn12';
         } else if (props.size === "S") {
-            if (!width) rules += ' ZceNfn11';
-        } else if (!width) rules += ' ZLvNfn11';
+            if (!width) rules += ' ZceNfn12';
+        } else if (!width) rules += ' ZLvNfn12';
     }
     return rules;
 };

package/dist/DropZone.cjs

@@ -41,77 +41,77 @@ const $797cda10ca96fc86$export$14a72053295ff9a6 = /*#__PURE__*/ (0, $faaBC$react
 const $797cda10ca96fc86$var$dropzone = function anonymous(props, overrides) {
     let rules = " ";
     let position = false;
-    let matches = (overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|Z|N|L|F|M|K)[^\s]+/g);
+    let matches = (overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L|F|M|K)[^\s]+/g);
     for (let p of matches){
         if (p[1] === "_P") position = true;
         rules += p[0];
     }
-    rules += ' sd11';
-    rules += ' _Ca11';
-    rules += ' eb11';
-    if (!position) rules += ' _Pc11';
-    rules += ' uk11';
-    rules += ' uch11';
-    rules += ' udi11';
-    rules += ' uea11';
-    rules += ' ugb11';
-    rules += ' uhd11';
-    rules += ' uje11';
-    rules += ' u2NhKxcl11';
-    rules += ' uic11';
-    rules += ' po11';
-    if (props.isDropTarget) rules += ' _jf11';
-    else rules += ' _ja11';
-    if (props.isDropTarget) rules += ' g_e11';
-    rules += ' _kc11';
-    rules += ' hc11';
-    rules += ' mc11';
-    rules += ' lc11';
-    if (props.isFocusVisible) rules += ' ix11';
-    else if (props.isDropTarget) rules += ' ix11';
-    else rules += ' iq11';
-    rules += ' oc11';
-    rules += ' nc11';
-    rules += ' kc11';
-    rules += ' jc11';
-    rules += ' Th11';
-    rules += ' Qh11';
-    rules += ' Sh11';
-    rules += ' Rh11';
+    rules += ' sd12';
+    rules += ' _Ca12';
+    rules += ' eb12';
+    if (!position) rules += ' _Pc12';
+    rules += ' uk12';
+    rules += ' uch12';
+    rules += ' udi12';
+    rules += ' uea12';
+    rules += ' ugb12';
+    rules += ' uhd12';
+    rules += ' uje12';
+    rules += ' u2NhKxcl12';
+    rules += ' uic12';
+    rules += ' po12';
+    if (props.isDropTarget) rules += ' _jf12';
+    else rules += ' _ja12';
+    if (props.isDropTarget) rules += ' g_e12';
+    rules += ' _kc12';
+    rules += ' hc12';
+    rules += ' mc12';
+    rules += ' lc12';
+    if (props.isFocusVisible) rules += ' ix12';
+    else if (props.isDropTarget) rules += ' ix12';
+    else rules += ' iq12';
+    rules += ' oc12';
+    rules += ' nc12';
+    rules += ' kc12';
+    rules += ' jc12';
+    rules += ' Th12';
+    rules += ' Qh12';
+    rules += ' Sh12';
+    rules += ' Rh12';
     return rules;
 };
 const $797cda10ca96fc86$var$banner = function anonymous(props) {
     let rules = " ";
-    rules += ' _Pa11';
-    rules += ' _Er11';
-    rules += ' _Rr11';
-    rules += ' IM11';
-    rules += ' HM11';
-    rules += ' sd11';
-    rules += ' eb11';
-    rules += ' _Ca11';
-    rules += ' MAyFGYc11';
-    rules += ' ZJ11';
-    if (props.size === "L") rules += ' Lg11';
-    else if (props.size === "S") rules += ' Le11';
-    else rules += ' Lf11';
-    rules += ' g211';
-    rules += ' ob11';
-    rules += ' nb11';
-    rules += ' kb11';
-    rules += ' jb11';
-    rules += ' px11';
-    rules += ' wd11';
-    rules += ' xd11';
-    rules += ' _xa11';
-    rules += ' wX0cczbc11';
-    rules += ' xX0cczbc11';
-    rules += ' _xX0cczba11';
-    rules += ' T85xBjb11';
-    rules += ' Q85xBjb11';
-    rules += ' S85xBjb11';
-    rules += ' R85xBjb11';
-    rules += ' -M_-Mf11';
+    rules += ' _Pa12';
+    rules += ' _Er12';
+    rules += ' _Rr12';
+    rules += ' IM12';
+    rules += ' HM12';
+    rules += ' sd12';
+    rules += ' eb12';
+    rules += ' _Ca12';
+    rules += ' MAyFGYc12';
+    rules += ' ZJ12';
+    if (props.size === "L") rules += ' Lg12';
+    else if (props.size === "S") rules += ' Le12';
+    else rules += ' Lf12';
+    rules += ' g212';
+    rules += ' ob12';
+    rules += ' nb12';
+    rules += ' kb12';
+    rules += ' jb12';
+    rules += ' px12';
+    rules += ' wd12';
+    rules += ' xd12';
+    rules += ' _xa12';
+    rules += ' wX0cczbc12';
+    rules += ' xX0cczbc12';
+    rules += ' _xX0cczba12';
+    rules += ' T85xBjb12';
+    rules += ' Q85xBjb12';
+    rules += ' S85xBjb12';
+    rules += ' R85xBjb12';
+    rules += ' -M_-Mf12';
     return rules;
 };
 const $797cda10ca96fc86$export$3c6489d84dc98b6 = /*#__PURE__*/ (0, $faaBC$react.forwardRef)(function DropZone(props, ref) {

package/dist/DropZone.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AA+BM,MAAM,0DAAkB,CAAA,GAAA,0BAAY,EAAqE;AAEhH,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BC,MAAM,2CAAW,WAAW,GAAG,CAAA,GAAA,uBAAS,EAAE,SAAS,SAAS,KAAoB,EAAE,GAA2B;IAClH,IAAI,kBAAkB,CAAA,GAAA,gDAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAChE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,QACF,OAAO,KACR,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IAEvB,qBACE,gCAAC,CAAA,GAAA,mCAAU;QACR,GAAG,KAAK;QACT,KAAK;QACL,OAAO,MAAM,YAAY;QACzB,WAAW,CAAA,cAAe,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,+BAAS,aAAa,MAAM,MAAM;kBAC5F,CAAA,4BACC;;kCACE,gCAAC,CAAA,GAAA,mDAAwB,EAAE,QAAQ;wBAAC,OAAO;4BAAC,cAAc;4BAAM,cAAc,YAAY,YAAY;kCAAE;wBAAI;kCACzG,MAAM,QAAQ;;oBAEf,YAAY,YAAY,IAAI,MAAM,QAAQ,kBAC1C,gCAAC;wBAAI,WAAW,6BAAO;kCAAC;wBAAI;kCAC1B,cAAA,gCAAC;sCACE,MAAM,cAAc,GAAG,MAAM,cAAc,GAAG,gBAAgB,MAAM,CAAC;;;;;;AAQtF","sources":["packages/@react-spectrum/s2/src/DropZone.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 {ContextValue, DropZoneRenderProps, DropZone as RACDropZone, DropZoneProps as RACDropZoneProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMProps, DOMRef, DOMRefValue, GlobalDOMAttributes} from '@react-types/shared';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {IllustratedMessageContext} from './IllustratedMessage';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface DropZoneProps extends Omit<RACDropZoneProps, 'className' | 'style' | 'children' | 'isDisabled' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | keyof GlobalDOMAttributes>, UnsafeStyles, DOMProps {\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithHeight,\n  /** The content to display in the drop zone. */\n  children: ReactNode,\n  /** Whether the drop zone has been filled. */\n  isFilled?: boolean,\n  /** The message to replace the default banner message that is shown when the drop zone is filled. */\n  replaceMessage?: string,\n  /**\n   * The size of the DropZone.\n   *\n   * @default 'M'\n   */\n    size?: 'S' | 'M' | 'L'\n}\n\nexport const DropZoneContext = createContext<ContextValue<Partial<DropZoneProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst dropzone = style<DropZoneRenderProps>({\n  display: 'flex',\n  justifyContent: 'center',\n  alignItems: 'center',\n  position: 'relative',\n  fontFamily: 'sans',\n  color: 'gray-900',\n  borderStyle: {\n    default: 'dashed',\n    isDropTarget: 'solid'\n  },\n  backgroundColor: {\n    isDropTarget: 'blue-200'\n  },\n  borderWidth: 2,\n  borderColor: {\n    default: 'gray-300',\n    isDropTarget: 'blue-800',\n    isFocusVisible: 'blue-800'\n  },\n  borderRadius: 'lg',\n  padding: 24\n}, getAllowedOverrides({height: true}));\n\nconst banner = style({\n  position: 'absolute',\n  left: 0,\n  right: 0,\n  marginX: 'auto',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  minHeight: 20,\n  width: 'fit',\n  maxWidth: {\n    default: 192,\n    size: {\n      S: 160,\n      L: 208\n    }\n  },\n  backgroundColor: 'accent',\n  borderRadius: 'default',\n  color: 'white',\n  fontWeight: 'bold',\n  padding: 'calc((self(minHeight))/1.5)'\n});\n\n/**\n * A drop zone is an area into which one or multiple objects can be dragged and dropped.\n */\nexport const DropZone = /*#__PURE__*/ forwardRef(function DropZone(props: DropZoneProps, ref: DOMRef<HTMLDivElement>) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  [props, ref] = useSpectrumContextProps(props, ref, DropZoneContext);\n  let {\n    size = 'M'\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  return (\n    <RACDropZone\n      {...props}\n      ref={domRef}\n      style={props.UNSAFE_style}\n      className={renderProps => (props.UNSAFE_className || '') + dropzone(renderProps, props.styles)}>\n      {renderProps => (\n        <>\n          <IllustratedMessageContext.Provider value={{isInDropZone: true, isDropTarget: renderProps.isDropTarget, size}}>\n            {props.children}\n          </IllustratedMessageContext.Provider>\n          {(renderProps.isDropTarget && props.isFilled) &&\n            <div className={banner({size})}>\n              <span>\n                {props.replaceMessage ? props.replaceMessage : stringFormatter.format('dropzone.replaceMessage')}\n              </span>\n            </div>\n          }\n        </>\n      )}\n    </RACDropZone>\n  );\n});\n"],"names":[],"version":3,"file":"DropZone.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAkCM,MAAM,0DAAkB,CAAA,GAAA,0BAAY,EAAqE;AAEhH,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BC,MAAM,2CAAW,WAAW,GAAG,CAAA,GAAA,uBAAS,EAAE,SAAS,SAAS,KAAoB,EAAE,GAA2B;IAClH,IAAI,kBAAkB,CAAA,GAAA,gDAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAChE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,QACF,OAAO,KACR,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IAEvB,qBACE,gCAAC,CAAA,GAAA,mCAAU;QACR,GAAG,KAAK;QACT,KAAK;QACL,OAAO,MAAM,YAAY;QACzB,WAAW,CAAA,cAAe,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,+BAAS,aAAa,MAAM,MAAM;kBAC5F,CAAA,4BACC;;kCACE,gCAAC,CAAA,GAAA,mDAAwB,EAAE,QAAQ;wBAAC,OAAO;4BAAC,cAAc;4BAAM,cAAc,YAAY,YAAY;kCAAE;wBAAI;kCACzG,MAAM,QAAQ;;oBAEf,YAAY,YAAY,IAAI,MAAM,QAAQ,kBAC1C,gCAAC;wBAAI,WAAW,6BAAO;kCAAC;wBAAI;kCAC1B,cAAA,gCAAC;sCACE,MAAM,cAAc,GAAG,MAAM,cAAc,GAAG,gBAAgB,MAAM,CAAC;;;;;;AAQtF","sources":["packages/@react-spectrum/s2/src/DropZone.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 {ContextValue, DropZoneRenderProps, DropZone as RACDropZone, DropZoneProps as RACDropZoneProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMProps, DOMRef, DOMRefValue, GlobalDOMAttributes} from '@react-types/shared';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {IllustratedMessageContext} from './IllustratedMessage';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface DropZoneProps extends Omit<RACDropZoneProps, 'className' | 'style' | 'children' | 'isDisabled' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | keyof GlobalDOMAttributes>, UnsafeStyles, DOMProps {\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithHeight,\n  /** The content to display in the drop zone. */\n  children: ReactNode,\n  /** Whether the drop zone has been filled. */\n  isFilled?: boolean,\n  /**\n   * The message to replace the default banner message that is shown when the drop zone is filled.\n   * @default 'Drop file to replace'\n   */\n  replaceMessage?: string,\n  /**\n   * The size of the DropZone.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L'\n}\n\nexport const DropZoneContext = createContext<ContextValue<Partial<DropZoneProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst dropzone = style<DropZoneRenderProps>({\n  display: 'flex',\n  justifyContent: 'center',\n  alignItems: 'center',\n  position: 'relative',\n  fontFamily: 'sans',\n  color: 'gray-900',\n  borderStyle: {\n    default: 'dashed',\n    isDropTarget: 'solid'\n  },\n  backgroundColor: {\n    isDropTarget: 'blue-200'\n  },\n  borderWidth: 2,\n  borderColor: {\n    default: 'gray-300',\n    isDropTarget: 'blue-800',\n    isFocusVisible: 'blue-800'\n  },\n  borderRadius: 'lg',\n  padding: 24\n}, getAllowedOverrides({height: true}));\n\nconst banner = style({\n  position: 'absolute',\n  left: 0,\n  right: 0,\n  marginX: 'auto',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  minHeight: 20,\n  width: 'fit',\n  maxWidth: {\n    default: 192,\n    size: {\n      S: 160,\n      L: 208\n    }\n  },\n  backgroundColor: 'accent',\n  borderRadius: 'default',\n  color: 'white',\n  fontWeight: 'bold',\n  padding: 'calc((self(minHeight))/1.5)'\n});\n\n/**\n * A drop zone is an area into which one or multiple objects can be dragged and dropped.\n */\nexport const DropZone = /*#__PURE__*/ forwardRef(function DropZone(props: DropZoneProps, ref: DOMRef<HTMLDivElement>) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  [props, ref] = useSpectrumContextProps(props, ref, DropZoneContext);\n  let {\n    size = 'M'\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  return (\n    <RACDropZone\n      {...props}\n      ref={domRef}\n      style={props.UNSAFE_style}\n      className={renderProps => (props.UNSAFE_className || '') + dropzone(renderProps, props.styles)}>\n      {renderProps => (\n        <>\n          <IllustratedMessageContext.Provider value={{isInDropZone: true, isDropTarget: renderProps.isDropTarget, size}}>\n            {props.children}\n          </IllustratedMessageContext.Provider>\n          {(renderProps.isDropTarget && props.isFilled) &&\n            <div className={banner({size})}>\n              <span>\n                {props.replaceMessage ? props.replaceMessage : stringFormatter.format('dropzone.replaceMessage')}\n              </span>\n            </div>\n          }\n        </>\n      )}\n    </RACDropZone>\n  );\n});\n"],"names":[],"version":3,"file":"DropZone.cjs.map"}

package/dist/DropZone.css

@@ -1,249 +1,249 @@
 @layer _.a {
-  ._Pc11 {
+  ._Pc12 {
     position: relative;
   }
 
-  .uk11 {
+  .uk12 {
     font-family: var(--s2-font-family-sans, adobe-clean-spectrum-vf), adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
   }
 
-  .po11 {
+  .po12 {
     color: var(--lightningcss-light, #131313) var(--lightningcss-dark, #f2f2f2);
   }
 
-  ._ja11 {
+  ._ja12 {
     border-style: dashed;
   }
 
-  ._jf11 {
+  ._jf12 {
     border-style: solid;
   }
 
-  .g_e11 {
+  .g_e12 {
     background-color: var(--lightningcss-light, #e5f0fe) var(--lightningcss-dark, #0f1c52);
   }
 
-  ._kc11 {
+  ._kc12 {
     border-top-width: 2px;
   }
 
-  .hc11 {
+  .hc12 {
     border-bottom-width: 2px;
   }
 
-  .mc11 {
+  .mc12 {
     border-inline-start-width: 2px;
   }
 
-  .lc11 {
+  .lc12 {
     border-inline-end-width: 2px;
   }
 
-  .iq11 {
+  .iq12 {
     border-color: var(--lightningcss-light, #dadada) var(--lightningcss-dark, #393939);
   }
 
-  .ix11 {
+  .ix12 {
     border-color: var(--lightningcss-light, #4b75ff) var(--lightningcss-dark, #4069fd);
   }
 
-  .oc11 {
+  .oc12 {
     border-start-start-radius: .625rem;
   }
 
-  .nc11 {
+  .nc12 {
     border-start-end-radius: .625rem;
   }
 
-  .kc11 {
+  .kc12 {
     border-end-start-radius: .625rem;
   }
 
-  .jc11 {
+  .jc12 {
     border-end-end-radius: .625rem;
   }
 
-  .Th11 {
+  .Th12 {
     padding-top: 24px;
   }
 
-  .Qh11 {
+  .Qh12 {
     padding-bottom: 24px;
   }
 
-  .Sh11 {
+  .Sh12 {
     padding-inline-start: 24px;
   }
 
-  .Rh11 {
+  .Rh12 {
     padding-inline-end: 24px;
   }
 
-  ._Pa11 {
+  ._Pa12 {
     position: absolute;
   }
 
-  ._Er11 {
+  ._Er12 {
     left: 0;
   }
 
-  ._Rr11 {
+  ._Rr12 {
     right: 0;
   }
 
-  .IM11 {
+  .IM12 {
     margin-inline-start: auto;
   }
 
-  .HM11 {
+  .HM12 {
     margin-inline-end: auto;
   }
 
-  .sd11 {
+  .sd12 {
     display: flex;
   }
 
-  .eb11 {
+  .eb12 {
     align-items: center;
   }
 
-  ._Ca11 {
+  ._Ca12 {
     justify-content: center;
   }
 
-  .MAyFGYc11 {
+  .MAyFGYc12 {
     min-height: var(--M);
   }
 
-  .ZJ11 {
+  .ZJ12 {
     width: fit-content;
   }
 
-  .Lf11 {
+  .Lf12 {
     max-width: calc(12rem * var(--s2-scale));
   }
 
-  .Le11 {
+  .Le12 {
     max-width: calc(10rem * var(--s2-scale));
   }
 
-  .Lg11 {
+  .Lg12 {
     max-width: calc(13rem * var(--s2-scale));
   }
 
-  .g211 {
+  .g212 {
     background-color: var(--lightningcss-light, #3b63fb) var(--lightningcss-dark, #4069fd);
   }
 
-  .ob11 {
+  .ob12 {
     border-start-start-radius: .5rem;
   }
 
-  .nb11 {
+  .nb12 {
     border-start-end-radius: .5rem;
   }
 
-  .kb11 {
+  .kb12 {
     border-end-start-radius: .5rem;
   }
 
-  .jb11 {
+  .jb12 {
     border-end-end-radius: .5rem;
   }
 
-  .px11 {
+  .px12 {
     color: #fff;
   }
 
-  .wd11 {
+  .wd12 {
     font-variation-settings: "wght" 700;
   }
 
-  .xd11 {
+  .xd12 {
     font-weight: 700;
   }
 
-  ._xa11 {
+  ._xa12 {
     font-synthesis-weight: none;
   }
 
-  .T85xBjb11 {
+  .T85xBjb12 {
     padding-top: calc((var(--M)) / 1.5);
   }
 
-  .Q85xBjb11 {
+  .Q85xBjb12 {
     padding-bottom: calc((var(--M)) / 1.5);
   }
 
-  .S85xBjb11 {
+  .S85xBjb12 {
     padding-inline-start: calc((var(--M)) / 1.5);
   }
 
-  .R85xBjb11 {
+  .R85xBjb12 {
     padding-inline-end: calc((var(--M)) / 1.5);
   }
 
-  .-M_-Mf11 {
+  .-M_-Mf12 {
     --M: calc(1.25rem * var(--s2-scale));
   }
 }
 
 @layer _.b {
-  .uch11:lang(ar) {
+  .uch12:lang(ar) {
     font-family: myriad-arabic, ui-sans-serif, system-ui, sans-serif;
   }
 
-  .wX0cczbc11:is(:lang(ja), :lang(ko), :lang(zh)) {
+  .wX0cczbc12:is(:lang(ja), :lang(ko), :lang(zh)) {
     font-variation-settings: "wght" 500;
   }
 
-  .xX0cczbc11:is(:lang(ja), :lang(ko), :lang(zh)) {
+  .xX0cczbc12:is(:lang(ja), :lang(ko), :lang(zh)) {
     font-weight: 500;
   }
 
-  ._xX0cczba11:is(:lang(ja), :lang(ko), :lang(zh)) {
+  ._xX0cczba12:is(:lang(ja), :lang(ko), :lang(zh)) {
     font-synthesis-weight: none;
   }
 }
 
 @layer _.c {
-  .udi11:lang(he) {
+  .udi12:lang(he) {
     font-family: myriad-hebrew, ui-sans-serif, system-ui, sans-serif;
   }
 }
 
 @layer _.d {
-  .uea11:lang(ja) {
+  .uea12:lang(ja) {
     font-family: adobe-clean-han-japanese, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Osaka, YuGothic, Yu Gothic, メイリオ, Meiryo, ＭＳ Ｐゴシック, MS PGothic, sans-serif;
   }
 }
 
 @layer _.e {
-  .ugb11:lang(ko) {
+  .ugb12:lang(ko) {
     font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
   }
 }
 
 @layer _.f {
-  .uhd11:lang(zh) {
+  .uhd12:lang(zh) {
     font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.g {
-  .uje11:lang(zh-hant) {
+  .uje12:lang(zh-hant) {
     font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.h {
-  .u2NhKxcl11:lang(zh-HK) {
+  .u2NhKxcl12:lang(zh-HK) {
     font-family: adobe-clean-han-hong-kong, source-han-hong-kong, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.i {
-  .uic11:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  .uic12:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
     font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
   }
 }

package/dist/DropZone.css.map

@@ -1 +1 @@
-{"mappings":"AC2CiB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAwBF;;;;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;;;;;AAxBE;EAAA;;;;EAwBF;;;;EAAA;;;;EAAA;;;;;AAxBE;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA","sources":["1c1855bb3a6aeea4","packages/@react-spectrum/s2/src/DropZone.tsx"],"sourcesContent":["@import \"ab564bdb126b567b\";\n@import \"d5049ba06c2da1c6\";\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 {ContextValue, DropZoneRenderProps, DropZone as RACDropZone, DropZoneProps as RACDropZoneProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMProps, DOMRef, DOMRefValue, GlobalDOMAttributes} from '@react-types/shared';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {IllustratedMessageContext} from './IllustratedMessage';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface DropZoneProps extends Omit<RACDropZoneProps, 'className' | 'style' | 'children' | 'isDisabled' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | keyof GlobalDOMAttributes>, UnsafeStyles, DOMProps {\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithHeight,\n  /** The content to display in the drop zone. */\n  children: ReactNode,\n  /** Whether the drop zone has been filled. */\n  isFilled?: boolean,\n  /** The message to replace the default banner message that is shown when the drop zone is filled. */\n  replaceMessage?: string,\n  /**\n   * The size of the DropZone.\n   *\n   * @default 'M'\n   */\n    size?: 'S' | 'M' | 'L'\n}\n\nexport const DropZoneContext = createContext<ContextValue<Partial<DropZoneProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst dropzone = style<DropZoneRenderProps>({\n  display: 'flex',\n  justifyContent: 'center',\n  alignItems: 'center',\n  position: 'relative',\n  fontFamily: 'sans',\n  color: 'gray-900',\n  borderStyle: {\n    default: 'dashed',\n    isDropTarget: 'solid'\n  },\n  backgroundColor: {\n    isDropTarget: 'blue-200'\n  },\n  borderWidth: 2,\n  borderColor: {\n    default: 'gray-300',\n    isDropTarget: 'blue-800',\n    isFocusVisible: 'blue-800'\n  },\n  borderRadius: 'lg',\n  padding: 24\n}, getAllowedOverrides({height: true}));\n\nconst banner = style({\n  position: 'absolute',\n  left: 0,\n  right: 0,\n  marginX: 'auto',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  minHeight: 20,\n  width: 'fit',\n  maxWidth: {\n    default: 192,\n    size: {\n      S: 160,\n      L: 208\n    }\n  },\n  backgroundColor: 'accent',\n  borderRadius: 'default',\n  color: 'white',\n  fontWeight: 'bold',\n  padding: 'calc((self(minHeight))/1.5)'\n});\n\n/**\n * A drop zone is an area into which one or multiple objects can be dragged and dropped.\n */\nexport const DropZone = /*#__PURE__*/ forwardRef(function DropZone(props: DropZoneProps, ref: DOMRef<HTMLDivElement>) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  [props, ref] = useSpectrumContextProps(props, ref, DropZoneContext);\n  let {\n    size = 'M'\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  return (\n    <RACDropZone\n      {...props}\n      ref={domRef}\n      style={props.UNSAFE_style}\n      className={renderProps => (props.UNSAFE_className || '') + dropzone(renderProps, props.styles)}>\n      {renderProps => (\n        <>\n          <IllustratedMessageContext.Provider value={{isInDropZone: true, isDropTarget: renderProps.isDropTarget, size}}>\n            {props.children}\n          </IllustratedMessageContext.Provider>\n          {(renderProps.isDropTarget && props.isFilled) &&\n            <div className={banner({size})}>\n              <span>\n                {props.replaceMessage ? props.replaceMessage : stringFormatter.format('dropzone.replaceMessage')}\n              </span>\n            </div>\n          }\n        </>\n      )}\n    </RACDropZone>\n  );\n});\n"],"names":[],"version":3,"file":"DropZone.css.map"}
+{"mappings":"AC8CiB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAwBF;;;;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;;;;;AAxBE;EAAA;;;;EAwBF;;;;EAAA;;;;EAAA;;;;;AAxBE;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA","sources":["1c1855bb3a6aeea4","packages/@react-spectrum/s2/src/DropZone.tsx"],"sourcesContent":["@import \"ab564bdb126b567b\";\n@import \"d5049ba06c2da1c6\";\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 {ContextValue, DropZoneRenderProps, DropZone as RACDropZone, DropZoneProps as RACDropZoneProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMProps, DOMRef, DOMRefValue, GlobalDOMAttributes} from '@react-types/shared';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {IllustratedMessageContext} from './IllustratedMessage';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface DropZoneProps extends Omit<RACDropZoneProps, 'className' | 'style' | 'children' | 'isDisabled' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | keyof GlobalDOMAttributes>, UnsafeStyles, DOMProps {\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithHeight,\n  /** The content to display in the drop zone. */\n  children: ReactNode,\n  /** Whether the drop zone has been filled. */\n  isFilled?: boolean,\n  /**\n   * The message to replace the default banner message that is shown when the drop zone is filled.\n   * @default 'Drop file to replace'\n   */\n  replaceMessage?: string,\n  /**\n   * The size of the DropZone.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L'\n}\n\nexport const DropZoneContext = createContext<ContextValue<Partial<DropZoneProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst dropzone = style<DropZoneRenderProps>({\n  display: 'flex',\n  justifyContent: 'center',\n  alignItems: 'center',\n  position: 'relative',\n  fontFamily: 'sans',\n  color: 'gray-900',\n  borderStyle: {\n    default: 'dashed',\n    isDropTarget: 'solid'\n  },\n  backgroundColor: {\n    isDropTarget: 'blue-200'\n  },\n  borderWidth: 2,\n  borderColor: {\n    default: 'gray-300',\n    isDropTarget: 'blue-800',\n    isFocusVisible: 'blue-800'\n  },\n  borderRadius: 'lg',\n  padding: 24\n}, getAllowedOverrides({height: true}));\n\nconst banner = style({\n  position: 'absolute',\n  left: 0,\n  right: 0,\n  marginX: 'auto',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  minHeight: 20,\n  width: 'fit',\n  maxWidth: {\n    default: 192,\n    size: {\n      S: 160,\n      L: 208\n    }\n  },\n  backgroundColor: 'accent',\n  borderRadius: 'default',\n  color: 'white',\n  fontWeight: 'bold',\n  padding: 'calc((self(minHeight))/1.5)'\n});\n\n/**\n * A drop zone is an area into which one or multiple objects can be dragged and dropped.\n */\nexport const DropZone = /*#__PURE__*/ forwardRef(function DropZone(props: DropZoneProps, ref: DOMRef<HTMLDivElement>) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  [props, ref] = useSpectrumContextProps(props, ref, DropZoneContext);\n  let {\n    size = 'M'\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  return (\n    <RACDropZone\n      {...props}\n      ref={domRef}\n      style={props.UNSAFE_style}\n      className={renderProps => (props.UNSAFE_className || '') + dropzone(renderProps, props.styles)}>\n      {renderProps => (\n        <>\n          <IllustratedMessageContext.Provider value={{isInDropZone: true, isDropTarget: renderProps.isDropTarget, size}}>\n            {props.children}\n          </IllustratedMessageContext.Provider>\n          {(renderProps.isDropTarget && props.isFilled) &&\n            <div className={banner({size})}>\n              <span>\n                {props.replaceMessage ? props.replaceMessage : stringFormatter.format('dropzone.replaceMessage')}\n              </span>\n            </div>\n          }\n        </>\n      )}\n    </RACDropZone>\n  );\n});\n"],"names":[],"version":3,"file":"DropZone.css.map"}