@react-spectrum/s2 0.9.2 → 0.10.0

package/dist/Divider.mjs

@@ -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-gcwrnr91';
-    else if (props.staticColor === "black") rules += ' -Ovbhqd-g4hn3s91';
-    if (!alignSelf) rules += ' _df91';
+    if (props.staticColor === "white") rules += ' -Ovbhqd-gcwrnr1';
+    else if (props.staticColor === "black") rules += ' -Ovbhqd-g4hn3s1';
+    if (!alignSelf) rules += ' _df1';
     if (props.isStaticColor) {
-        if (props.size === "L") rules += ' gi91';
-        else rules += ' gg91';
-    } else if (props.size === "L") rules += ' g091';
-    else rules += ' gF91';
-    rules += ' gl_a91';
-    rules += ' _je91';
-    rules += ' og91';
-    rules += ' ng91';
-    rules += ' kg91';
-    rules += ' jg91';
-    if (!marginTop) rules += ' Jy91';
-    if (!marginBottom) rules += ' Gy91';
-    if (!marginInlineStart) rules += ' Iy91';
-    if (!marginInlineEnd) rules += ' Hy91';
-    if (!flexGrow) rules += ' _ua91';
-    if (!flexShrink) rules += ' _va91';
+        if (props.size === "L") rules += ' gi1';
+        else rules += ' gg1';
+    } else if (props.size === "L") rules += ' g01';
+    else rules += ' gF1';
+    rules += ' gl_a1';
+    rules += ' _je1';
+    rules += ' og1';
+    rules += ' ng1';
+    rules += ' kg1';
+    rules += ' jg1';
+    if (!marginTop) rules += ' Jy1';
+    if (!marginBottom) rules += ' Gy1';
+    if (!marginInlineStart) rules += ' Iy1';
+    if (!marginInlineEnd) rules += ' Hy1';
+    if (!flexGrow) rules += ' _ua1';
+    if (!flexShrink) rules += ' _va1';
     if (props.orientation === "horizontal") {
-        if (props.size === "L") rules += ' FT4Nfn91';
-        else if (props.size === "S") rules += ' FceNfn91';
-        else rules += ' FLvNfn91';
+        if (props.size === "L") rules += ' FT4Nfn1';
+        else if (props.size === "S") rules += ' FceNfn1';
+        else rules += ' FLvNfn1';
     }
     if (props.orientation === "vertical") {
         if (props.size === "L") {
-            if (!width) rules += ' ZT4Nfn91';
+            if (!width) rules += ' ZT4Nfn1';
         } else if (props.size === "S") {
-            if (!width) rules += ' ZceNfn91';
-        } else if (!width) rules += ' ZLvNfn91';
+            if (!width) rules += ' ZceNfn1';
+        } else if (!width) rules += ' ZLvNfn1';
     }
     return rules;
 };

package/dist/Divider.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAgCM,MAAM,0DAAiB,CAAA,GAAA,oBAAY,EAAoD;AAEvF,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDN,MAAM,4CAAU,WAAW,GAAG,CAAA,GAAA,iBAAS,EAAE,SAAS,QAAQ,KAAmB,EAAE,GAAW;IAC/F,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IAEvB,qBACE,gBAAC,CAAA,GAAA,gBAAW;QACT,GAAG,KAAK;QACT,KAAK;QACL,OAAO,MAAM,YAAY;QACzB,WAAW,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,0CAAQ;YAClD,MAAM,MAAM,IAAI,IAAI;YACpB,aAAa,MAAM,WAAW,IAAI;YAClC,aAAa,MAAM,WAAW;YAC9B,eAAe,CAAC,CAAC,MAAM,WAAW;QACpC,GAAG,MAAM,MAAM;;AAErB","sources":["packages/@react-spectrum/s2/src/Divider.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, Separator as RACSeparator, SeparatorProps as RACSeparatorProps} from 'react-aria-components';\nimport {createContext, forwardRef} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n/*\n * Adding as it's own type to deal with size being a part of the theme so we\n * can type style() and it's parameters.\n */\ninterface DividerSpectrumProps {\n  /**\n   * How thick the Divider should be.\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L',\n  /**\n   * How thick the Divider should be.\n   * @default 'horizontal'\n   */\n  orientation?: 'horizontal' | 'vertical',\n  /** The static color style to apply. Useful when the Divider appears over a color background. */\n  staticColor?: 'white' | 'black' | 'auto'\n}\n\n// TODO: allow overriding height (only when orientation is vertical)??\nexport interface DividerProps extends DividerSpectrumProps, Omit<RACSeparatorProps, 'className' | 'style' | 'elementType'>, StyleProps {}\n\nexport const DividerContext = createContext<ContextValue<Partial<DividerProps>, DOMRefValue>>(null);\n\nexport const divider = style<DividerSpectrumProps & {isStaticColor: boolean}>({\n  ...staticColor(),\n  alignSelf: 'stretch',\n  backgroundColor: {\n    default: 'gray-200',\n    size: {\n      L: 'gray-800'\n    },\n    isStaticColor: {\n      default: 'transparent-overlay-200',\n      size: {\n        L: 'transparent-overlay-800'\n      }\n    },\n    forcedColors: 'ButtonBorder'\n  },\n  borderStyle: 'none',\n  borderRadius: 'full',\n  margin: 0,\n  flexGrow: 0,\n  flexShrink: 0,\n  height: {\n    orientation: {\n      horizontal: {\n        // These should be px not rems, because we're emulating a border.\n        default: '[2px]',\n        size: {\n          S: '[1px]',\n          L: '[4px]'\n        }\n      }\n    }\n  },\n  width: {\n    orientation: {\n      vertical: {\n        default: '[2px]',\n        size: {\n          S: '[1px]',\n          L: '[4px]'\n        }\n      }\n    }\n  }\n}, getAllowedOverrides());\n\n/**\n * Dividers bring clarity to a layout by grouping and dividing content in close proximity.\n * They can also be used to establish rhythm and hierarchy.\n */\nexport const Divider = /*#__PURE__*/ forwardRef(function Divider(props: DividerProps, ref: DOMRef) {\n  [props, ref] = useSpectrumContextProps(props, ref, DividerContext);\n  let domRef = useDOMRef(ref);\n\n  return (\n    <RACSeparator\n      {...props}\n      ref={domRef}\n      style={props.UNSAFE_style}\n      className={(props.UNSAFE_className || '') + divider({\n        size: props.size || 'M',\n        orientation: props.orientation || 'horizontal',\n        staticColor: props.staticColor,\n        isStaticColor: !!props.staticColor\n      }, props.styles)} />\n  );\n});\n"],"names":[],"version":3,"file":"Divider.mjs.map"}
+{"mappings":";;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAgCM,MAAM,0DAAiB,CAAA,GAAA,oBAAY,EAAoD;AAEvF,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDN,MAAM,4CAAU,WAAW,GAAG,CAAA,GAAA,iBAAS,EAAE,SAAS,QAAQ,KAAmB,EAAE,GAAW;IAC/F,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IAEvB,qBACE,gBAAC,CAAA,GAAA,gBAAW;QACT,GAAG,KAAK;QACT,KAAK;QACL,OAAO,MAAM,YAAY;QACzB,WAAW,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,0CAAQ;YAClD,MAAM,MAAM,IAAI,IAAI;YACpB,aAAa,MAAM,WAAW,IAAI;YAClC,aAAa,MAAM,WAAW;YAC9B,eAAe,CAAC,CAAC,MAAM,WAAW;QACpC,GAAG,MAAM,MAAM;;AAErB","sources":["packages/@react-spectrum/s2/src/Divider.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, Separator as RACSeparator, SeparatorProps as RACSeparatorProps} from 'react-aria-components';\nimport {createContext, forwardRef} from 'react';\nimport {DOMRef, DOMRefValue, GlobalDOMAttributes} from '@react-types/shared';\nimport {getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n/*\n * Adding as it's own type to deal with size being a part of the theme so we\n * can type style() and it's parameters.\n */\ninterface DividerSpectrumProps {\n  /**\n   * How thick the Divider should be.\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L',\n  /**\n   * How thick the Divider should be.\n   * @default 'horizontal'\n   */\n  orientation?: 'horizontal' | 'vertical',\n  /** The static color style to apply. Useful when the Divider appears over a color background. */\n  staticColor?: 'white' | 'black' | 'auto'\n}\n\n// TODO: allow overriding height (only when orientation is vertical)??\nexport interface DividerProps extends DividerSpectrumProps, Omit<RACSeparatorProps, 'className' | 'style' | 'elementType' | keyof GlobalDOMAttributes>, StyleProps {}\n\nexport const DividerContext = createContext<ContextValue<Partial<DividerProps>, DOMRefValue>>(null);\n\nexport const divider = style<DividerSpectrumProps & {isStaticColor: boolean}>({\n  ...staticColor(),\n  alignSelf: 'stretch',\n  backgroundColor: {\n    default: 'gray-200',\n    size: {\n      L: 'gray-800'\n    },\n    isStaticColor: {\n      default: 'transparent-overlay-200',\n      size: {\n        L: 'transparent-overlay-800'\n      }\n    },\n    forcedColors: 'ButtonBorder'\n  },\n  borderStyle: 'none',\n  borderRadius: 'full',\n  margin: 0,\n  flexGrow: 0,\n  flexShrink: 0,\n  height: {\n    orientation: {\n      horizontal: {\n        // These should be px not rems, because we're emulating a border.\n        default: '[2px]',\n        size: {\n          S: '[1px]',\n          L: '[4px]'\n        }\n      }\n    }\n  },\n  width: {\n    orientation: {\n      vertical: {\n        default: '[2px]',\n        size: {\n          S: '[1px]',\n          L: '[4px]'\n        }\n      }\n    }\n  }\n}, getAllowedOverrides());\n\n/**\n * Dividers bring clarity to a layout by grouping and dividing content in close proximity.\n * They can also be used to establish rhythm and hierarchy.\n */\nexport const Divider = /*#__PURE__*/ forwardRef(function Divider(props: DividerProps, ref: DOMRef) {\n  [props, ref] = useSpectrumContextProps(props, ref, DividerContext);\n  let domRef = useDOMRef(ref);\n\n  return (\n    <RACSeparator\n      {...props}\n      ref={domRef}\n      style={props.UNSAFE_style}\n      className={(props.UNSAFE_className || '') + divider({\n        size: props.size || 'M',\n        orientation: props.orientation || 'horizontal',\n        staticColor: props.staticColor,\n        isStaticColor: !!props.staticColor\n      }, props.styles)} />\n  );\n});\n"],"names":[],"version":3,"file":"Divider.mjs.map"}

package/dist/DropZone.cjs

@@ -46,68 +46,72 @@ const $797cda10ca96fc86$var$dropzone = function anonymous(props, overrides) {
         if (p[1] === "_P") position = true;
         rules += p[0];
     }
-    rules += ' sd91';
-    rules += ' _Ca91';
-    rules += ' eb91';
-    if (!position) rules += ' _Pc91';
-    rules += ' ug91';
-    rules += ' uch91';
-    rules += ' udi91';
-    rules += ' uea91';
-    rules += ' ugb91';
-    rules += ' uhd91';
-    rules += ' uje91';
-    rules += ' uic91';
-    rules += ' po91';
-    if (props.isDropTarget) rules += ' _jf91';
-    else rules += ' _ja91';
-    if (props.isDropTarget) rules += ' g_e91';
-    rules += ' _kc91';
-    rules += ' hc91';
-    rules += ' mc91';
-    rules += ' lc91';
-    if (props.isFocusVisible) rules += ' ix91';
-    else if (props.isDropTarget) rules += ' ix91';
-    else rules += ' iq91';
-    rules += ' oc91';
-    rules += ' nc91';
-    rules += ' kc91';
-    rules += ' jc91';
-    rules += ' Th91';
-    rules += ' Qh91';
-    rules += ' Sh91';
-    rules += ' Rh91';
+    rules += ' sd1';
+    rules += ' _Ca1';
+    rules += ' eb1';
+    if (!position) rules += ' _Pc1';
+    rules += ' uk1';
+    rules += ' uch1';
+    rules += ' udi1';
+    rules += ' uea1';
+    rules += ' ugb1';
+    rules += ' uhd1';
+    rules += ' uje1';
+    rules += ' u2NhKxcl1';
+    rules += ' uic1';
+    rules += ' po1';
+    if (props.isDropTarget) rules += ' _jf1';
+    else rules += ' _ja1';
+    if (props.isDropTarget) rules += ' g_e1';
+    rules += ' _kc1';
+    rules += ' hc1';
+    rules += ' mc1';
+    rules += ' lc1';
+    if (props.isFocusVisible) rules += ' ix1';
+    else if (props.isDropTarget) rules += ' ix1';
+    else rules += ' iq1';
+    rules += ' oc1';
+    rules += ' nc1';
+    rules += ' kc1';
+    rules += ' jc1';
+    rules += ' Th1';
+    rules += ' Qh1';
+    rules += ' Sh1';
+    rules += ' Rh1';
     return rules;
 };
 const $797cda10ca96fc86$var$banner = function anonymous(props) {
     let rules = " ";
-    rules += ' _Pa91';
-    rules += ' _Er91';
-    rules += ' _Rr91';
-    rules += ' IM91';
-    rules += ' HM91';
-    rules += ' sd91';
-    rules += ' eb91';
-    rules += ' _Ca91';
-    rules += ' MAyFGYc91';
-    rules += ' ZJ91';
-    if (props.size === "L") rules += ' Lg91';
-    else if (props.size === "S") rules += ' Le91';
-    else rules += ' Lf91';
-    rules += ' g291';
-    rules += ' ob91';
-    rules += ' nb91';
-    rules += ' kb91';
-    rules += ' jb91';
-    rules += ' px91';
-    rules += ' wd91';
-    rules += ' xd91';
-    rules += ' _xa91';
-    rules += ' T85xBjb91';
-    rules += ' Q85xBjb91';
-    rules += ' S85xBjb91';
-    rules += ' R85xBjb91';
-    rules += ' -M_-Mf91';
+    rules += ' _Pa1';
+    rules += ' _Er1';
+    rules += ' _Rr1';
+    rules += ' IM1';
+    rules += ' HM1';
+    rules += ' sd1';
+    rules += ' eb1';
+    rules += ' _Ca1';
+    rules += ' MAyFGYc1';
+    rules += ' ZJ1';
+    if (props.size === "L") rules += ' Lg1';
+    else if (props.size === "S") rules += ' Le1';
+    else rules += ' Lf1';
+    rules += ' g21';
+    rules += ' ob1';
+    rules += ' nb1';
+    rules += ' kb1';
+    rules += ' jb1';
+    rules += ' px1';
+    rules += ' wd1';
+    rules += ' xd1';
+    rules += ' _xa1';
+    rules += ' wX0cczbc1';
+    rules += ' xX0cczbc1';
+    rules += ' _xX0cczba1';
+    rules += ' T85xBjb1';
+    rules += ' Q85xBjb1';
+    rules += ' S85xBjb1';
+    rules += ' R85xBjb1';
+    rules += ' -M_-Mf1';
     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} 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'>, 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;;;;;;;;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"}

package/dist/DropZone.css

@@ -1,231 +1,249 @@
 @layer _.a {
-  ._Pc91 {
+  ._Pc1 {
     position: relative;
   }
 
-  .ug91 {
-    font-family: adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
+  .uk1 {
+    font-family: var(--s2-font-family-sans, adobe-clean-spectrum-vf), adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
   }
 
-  .po91 {
+  .po1 {
     color: var(--lightningcss-light, #131313) var(--lightningcss-dark, #f2f2f2);
   }
 
-  ._ja91 {
+  ._ja1 {
     border-style: dashed;
   }
 
-  ._jf91 {
+  ._jf1 {
     border-style: solid;
   }
 
-  .g_e91 {
+  .g_e1 {
     background-color: var(--lightningcss-light, #e5f0fe) var(--lightningcss-dark, #0f1c52);
   }
 
-  ._kc91 {
+  ._kc1 {
     border-top-width: 2px;
   }
 
-  .hc91 {
+  .hc1 {
     border-bottom-width: 2px;
   }
 
-  .mc91 {
+  .mc1 {
     border-inline-start-width: 2px;
   }
 
-  .lc91 {
+  .lc1 {
     border-inline-end-width: 2px;
   }
 
-  .iq91 {
+  .iq1 {
     border-color: var(--lightningcss-light, #dadada) var(--lightningcss-dark, #393939);
   }
 
-  .ix91 {
+  .ix1 {
     border-color: var(--lightningcss-light, #4b75ff) var(--lightningcss-dark, #4069fd);
   }
 
-  .oc91 {
+  .oc1 {
     border-start-start-radius: .625rem;
   }
 
-  .nc91 {
+  .nc1 {
     border-start-end-radius: .625rem;
   }
 
-  .kc91 {
+  .kc1 {
     border-end-start-radius: .625rem;
   }
 
-  .jc91 {
+  .jc1 {
     border-end-end-radius: .625rem;
   }
 
-  .Th91 {
+  .Th1 {
     padding-top: 24px;
   }
 
-  .Qh91 {
+  .Qh1 {
     padding-bottom: 24px;
   }
 
-  .Sh91 {
+  .Sh1 {
     padding-inline-start: 24px;
   }
 
-  .Rh91 {
+  .Rh1 {
     padding-inline-end: 24px;
   }
 
-  ._Pa91 {
+  ._Pa1 {
     position: absolute;
   }
 
-  ._Er91 {
+  ._Er1 {
     left: 0;
   }
 
-  ._Rr91 {
+  ._Rr1 {
     right: 0;
   }
 
-  .IM91 {
+  .IM1 {
     margin-inline-start: auto;
   }
 
-  .HM91 {
+  .HM1 {
     margin-inline-end: auto;
   }
 
-  .sd91 {
+  .sd1 {
     display: flex;
   }
 
-  .eb91 {
+  .eb1 {
     align-items: center;
   }
 
-  ._Ca91 {
+  ._Ca1 {
     justify-content: center;
   }
 
-  .MAyFGYc91 {
+  .MAyFGYc1 {
     min-height: var(--M);
   }
 
-  .ZJ91 {
+  .ZJ1 {
     width: fit-content;
   }
 
-  .Lf91 {
+  .Lf1 {
     max-width: calc(12rem * var(--s2-scale));
   }
 
-  .Le91 {
+  .Le1 {
     max-width: calc(10rem * var(--s2-scale));
   }
 
-  .Lg91 {
+  .Lg1 {
     max-width: calc(13rem * var(--s2-scale));
   }
 
-  .g291 {
+  .g21 {
     background-color: var(--lightningcss-light, #3b63fb) var(--lightningcss-dark, #4069fd);
   }
 
-  .ob91 {
+  .ob1 {
     border-start-start-radius: .5rem;
   }
 
-  .nb91 {
+  .nb1 {
     border-start-end-radius: .5rem;
   }
 
-  .kb91 {
+  .kb1 {
     border-end-start-radius: .5rem;
   }
 
-  .jb91 {
+  .jb1 {
     border-end-end-radius: .5rem;
   }
 
-  .px91 {
+  .px1 {
     color: #fff;
   }
 
-  .wd91 {
+  .wd1 {
     font-variation-settings: "wght" 700;
   }
 
-  .xd91 {
+  .xd1 {
     font-weight: 700;
   }
 
-  ._xa91 {
+  ._xa1 {
     font-synthesis-weight: none;
   }
 
-  .T85xBjb91 {
+  .T85xBjb1 {
     padding-top: calc((var(--M)) / 1.5);
   }
 
-  .Q85xBjb91 {
+  .Q85xBjb1 {
     padding-bottom: calc((var(--M)) / 1.5);
   }
 
-  .S85xBjb91 {
+  .S85xBjb1 {
     padding-inline-start: calc((var(--M)) / 1.5);
   }
 
-  .R85xBjb91 {
+  .R85xBjb1 {
     padding-inline-end: calc((var(--M)) / 1.5);
   }
 
-  .-M_-Mf91 {
+  .-M_-Mf1 {
     --M: calc(1.25rem * var(--s2-scale));
   }
 }
 
 @layer _.b {
-  .uch91:lang(ar) {
+  .uch1:lang(ar) {
     font-family: myriad-arabic, ui-sans-serif, system-ui, sans-serif;
   }
+
+  .wX0cczbc1:is(:lang(ja), :lang(ko), :lang(zh)) {
+    font-variation-settings: "wght" 500;
+  }
+
+  .xX0cczbc1:is(:lang(ja), :lang(ko), :lang(zh)) {
+    font-weight: 500;
+  }
+
+  ._xX0cczba1:is(:lang(ja), :lang(ko), :lang(zh)) {
+    font-synthesis-weight: none;
+  }
 }
 
 @layer _.c {
-  .udi91:lang(he) {
+  .udi1:lang(he) {
     font-family: myriad-hebrew, ui-sans-serif, system-ui, sans-serif;
   }
 }
 
 @layer _.d {
-  .uea91:lang(ja) {
+  .uea1: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 {
-  .ugb91:lang(ko) {
+  .ugb1:lang(ko) {
     font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
   }
 }
 
 @layer _.f {
-  .uhd91:lang(zh) {
+  .uhd1:lang(zh) {
     font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.g {
-  .uje91:lang(zh-hant) {
+  .uje1: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 {
-  .uic91:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  .u2NhKxcl1: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 {
+  .uic1: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;;;;;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} 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'>, 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":"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"}