@react-spectrum/s2 1.4.0 → 1.5.0

package/dist/private/DropZone.css

@@ -1,245 +1,245 @@
 @layer _.a {
-  ._Pc131 {
+  ._Pc15 {
     position: relative;
   }
 
-  .uk131 {
+  .uk15 {
     font-family: var(--s2-font-family-sans, adobe-clean-spectrum-vf), adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
   }
 
-  .po131 {
+  .po15 {
     color: light-dark(#131313, #f2f2f2);
   }
 
-  ._ja131 {
+  ._ja15 {
     border-style: dashed;
   }
 
-  ._jf131 {
+  ._jf15 {
     border-style: solid;
   }
 
-  .g_e131 {
+  .g_e15 {
     background-color: light-dark(#e5f0fe, #0f1c52);
   }
 
-  ._kc131 {
+  ._kc15 {
     border-top-width: 2px;
   }
 
-  .hc131 {
+  .hc15 {
     border-bottom-width: 2px;
   }
 
-  .mc131 {
+  .mc15 {
     border-inline-start-width: 2px;
   }
 
-  .lc131 {
+  .lc15 {
     border-inline-end-width: 2px;
   }
 
-  .iq131 {
+  .iq15 {
     border-color: light-dark(#dadada, #393939);
   }
 
-  .ix131 {
+  .ix15 {
     border-color: light-dark(#4b75ff, #4069fd);
   }
 
-  .oc131 {
+  .oc15 {
     border-start-start-radius: .625rem;
   }
 
-  .nc131 {
+  .nc15 {
     border-start-end-radius: .625rem;
   }
 
-  .kc131 {
+  .kc15 {
     border-end-start-radius: .625rem;
   }
 
-  .jc131 {
+  .jc15 {
     border-end-end-radius: .625rem;
   }
 
-  .Th131 {
+  .Th15 {
     padding-top: 24px;
   }
 
-  .Qh131 {
+  .Qh15 {
     padding-bottom: 24px;
   }
 
-  .Sh131 {
+  .Sh15 {
     padding-inline-start: 24px;
   }
 
-  .Rh131 {
+  .Rh15 {
     padding-inline-end: 24px;
   }
 
-  ._oa131 {
+  ._oa15 {
     box-sizing: border-box;
   }
 
-  ._Pa131 {
+  ._Pa15 {
     position: absolute;
   }
 
-  ._Er131 {
+  ._Er15 {
     left: 0;
   }
 
-  ._Rr131 {
+  ._Rr15 {
     right: 0;
   }
 
-  .IM131 {
+  .IM15 {
     margin-inline-start: auto;
   }
 
-  .HM131 {
+  .HM15 {
     margin-inline-end: auto;
   }
 
-  .sd131 {
+  .sd15 {
     display: flex;
   }
 
-  .eb131 {
+  .eb15 {
     align-items: center;
   }
 
-  ._Ca131 {
+  ._Ca15 {
     justify-content: center;
   }
 
-  .MAyFGYc131 {
+  .MAyFGYc15 {
     min-height: var(--M);
   }
 
-  .ZJ131 {
+  .ZJ15 {
     width: fit-content;
   }
 
-  .Lf131 {
+  .Lf15 {
     max-width: calc(12rem * var(--s2-scale));
   }
 
-  .Le131 {
+  .Le15 {
     max-width: calc(10rem * var(--s2-scale));
   }
 
-  .Lg131 {
+  .Lg15 {
     max-width: calc(13rem * var(--s2-scale));
   }
 
-  .g2131 {
+  .g215 {
     background-color: light-dark(#3b63fb, #4069fd);
   }
 
-  .ob131 {
+  .ob15 {
     border-start-start-radius: .5rem;
   }
 
-  .nb131 {
+  .nb15 {
     border-start-end-radius: .5rem;
   }
 
-  .kb131 {
+  .kb15 {
     border-end-start-radius: .5rem;
   }
 
-  .jb131 {
+  .jb15 {
     border-end-end-radius: .5rem;
   }
 
-  .px131 {
+  .px15 {
     color: #fff;
   }
 
-  .xd131 {
+  .xd15 {
     font-weight: 700;
   }
 
-  ._xa131 {
+  ._xa15 {
     font-synthesis-weight: none;
   }
 
-  .T85xBjb131 {
+  .T85xBjb15 {
     padding-top: calc((var(--M))/1.5);
   }
 
-  .Q85xBjb131 {
+  .Q85xBjb15 {
     padding-bottom: calc((var(--M))/1.5);
   }
 
-  .S85xBjb131 {
+  .S85xBjb15 {
     padding-inline-start: calc((var(--M))/1.5);
   }
 
-  .R85xBjb131 {
+  .R85xBjb15 {
     padding-inline-end: calc((var(--M))/1.5);
   }
 
-  .-M_-Mf131 {
+  .-M_-Mf15 {
     --M: calc(1.25rem * var(--s2-scale));
   }
 }
 
 @layer _.b {
-  .ucJ9TBTb131:lang(ar) {
+  .ucJ9TBTb15:lang(ar) {
     font-family: adobe-clean-arabic, myriad-arabic, ui-sans-serif, system-ui, sans-serif;
   }
 
-  .xX0cczbc131:is(:lang(ja), :lang(ko), :lang(zh)) {
+  .xX0cczbc15:is(:lang(ja), :lang(ko), :lang(zh)) {
     font-weight: 500;
   }
 
-  ._xX0cczba131:is(:lang(ja), :lang(ko), :lang(zh)) {
+  ._xX0cczba15:is(:lang(ja), :lang(ko), :lang(zh)) {
     font-synthesis-weight: none;
   }
 }
 
 @layer _.c {
-  .ud3Euai131:lang(he) {
+  .ud3Euai15:lang(he) {
     font-family: adobe-clean-hebrew, myriad-hebrew, ui-sans-serif, system-ui, sans-serif;
   }
 }
 
 @layer _.d {
-  .uea131:lang(ja) {
+  .uea15: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 {
-  .ugb131:lang(ko) {
+  .ugb15:lang(ko) {
     font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
   }
 }
 
 @layer _.f {
-  .uhd131:lang(zh) {
+  .uhd15:lang(zh) {
     font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.g {
-  .uje131:lang(zh-hant) {
+  .uje15: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 {
-  .u2NhKxcl131:lang(zh-HK) {
+  .u2NhKxcl15: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 {
-  .uic131:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  .uic15: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/private/DropZone.css.map

@@ -1 +1 @@
-{"mappings":"AC2EiB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA4BF;;;;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;;;;;AA5BE;EAAA;;;;EA4BF;;;;EAAA;;;;;AA5BE;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} from 'react-aria-components/slots';\n\nimport {createContext, forwardRef, ReactNode} from 'react';\n\nimport {DOMProps, DOMRef, DOMRefValue, GlobalDOMAttributes} from '@react-types/shared';\nimport {\n  DropZoneRenderProps,\n  DropZone as RACDropZone,\n  DropZoneProps as RACDropZoneProps\n} from 'react-aria-components/DropZone';\nimport {\n  getAllowedOverrides,\n  StylesPropWithHeight,\n  UnsafeStyles\n} 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 './useDOMRef';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface DropZoneProps\n  extends\n    Omit<\n      RACDropZoneProps,\n      | 'className'\n      | 'style'\n      | 'render'\n      | 'children'\n      | 'isDisabled'\n      | 'onHover'\n      | 'onHoverStart'\n      | 'onHoverEnd'\n      | 'onHoverChange'\n      | keyof GlobalDOMAttributes\n    >,\n    UnsafeStyles,\n    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   *\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 =\n  createContext<ContextValue<Partial<DropZoneProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst dropzone = style<DropZoneRenderProps>(\n  {\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    boxSizing: 'border-box'\n  },\n  getAllowedOverrides({height: true})\n);\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(\n  props: DropZoneProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  [props, ref] = useSpectrumContextProps(props, ref, DropZoneContext);\n  let {size = 'M'} = props;\n  let domRef = useDOMRef(ref);\n\n  return (\n    <RACDropZone\n      {...props}\n      ref={domRef}\n      style={props.UNSAFE_style}\n      className={renderProps =>\n        (props.UNSAFE_className || '') + dropzone(renderProps, props.styles)\n      }>\n      {renderProps => (\n        <>\n          <IllustratedMessageContext.Provider\n            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\n                  ? props.replaceMessage\n                  : stringFormatter.format('dropzone.replaceMessage')}\n              </span>\n            </div>\n          )}\n        </>\n      )}\n    </RACDropZone>\n  );\n});\n"],"names":[],"version":3,"file":"DropZone.css.map"}
+{"mappings":"AC0EiB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA4BF;;;;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;;;;;AA5BE;EAAA;;;;EA4BF;;;;EAAA;;;;;AA5BE;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} from 'react-aria-components/slots';\n\nimport {createContext, forwardRef, ReactNode} from 'react';\n\nimport {DOMProps, DOMRef, DOMRefValue, GlobalDOMAttributes} from '@react-types/shared';\nimport {\n  DropZoneRenderProps,\n  DropZone as RACDropZone,\n  DropZoneProps as RACDropZoneProps\n} from 'react-aria-components/DropZone';\nimport {\n  getAllowedOverrides,\n  StylesPropWithHeight,\n  UnsafeStyles\n} from './style-utils' with {type: 'macro'};\nimport {IllustratedMessageContext} from './IllustratedMessage';\nimport intlMessages from '../intl/*.json';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from './useDOMRef';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface DropZoneProps\n  extends\n    Omit<\n      RACDropZoneProps,\n      | 'className'\n      | 'style'\n      | 'render'\n      | 'children'\n      | 'isDisabled'\n      | 'onHover'\n      | 'onHoverStart'\n      | 'onHoverEnd'\n      | 'onHoverChange'\n      | keyof GlobalDOMAttributes\n    >,\n    UnsafeStyles,\n    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   *\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 =\n  createContext<ContextValue<Partial<DropZoneProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst dropzone = style<DropZoneRenderProps>(\n  {\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    boxSizing: 'border-box'\n  },\n  getAllowedOverrides({height: true})\n);\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(\n  props: DropZoneProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  [props, ref] = useSpectrumContextProps(props, ref, DropZoneContext);\n  let {size = 'M'} = props;\n  let domRef = useDOMRef(ref);\n\n  return (\n    <RACDropZone\n      {...props}\n      ref={domRef}\n      style={props.UNSAFE_style}\n      className={renderProps =>\n        (props.UNSAFE_className || '') + dropzone(renderProps, props.styles)\n      }>\n      {renderProps => (\n        <>\n          <IllustratedMessageContext.Provider\n            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\n                  ? props.replaceMessage\n                  : stringFormatter.format('dropzone.replaceMessage')}\n              </span>\n            </div>\n          )}\n        </>\n      )}\n    </RACDropZone>\n  );\n});\n"],"names":[],"version":3,"file":"DropZone.css.map"}

package/dist/private/DropZone.mjs

@@ -39,71 +39,71 @@ const $fb6e45fba2483f65$var$dropzone = function anonymous(props, overrides) {
         if (p[1] === "_P") position = true;
         rules += p[0];
     }
-    rules += ' sd131';
-    rules += ' _Ca131';
-    rules += ' eb131';
-    if (!position) rules += ' _Pc131';
-    rules += ' uk131';
-    rules += ' ucJ9TBTb131';
-    rules += ' ud3Euai131';
-    rules += ' uea131';
-    rules += ' ugb131';
-    rules += ' uhd131';
-    rules += ' uje131';
-    rules += ' u2NhKxcl131';
-    rules += ' uic131';
-    rules += ' po131';
-    if (props.isDropTarget) rules += ' _jf131';
-    else rules += ' _ja131';
-    if (props.isDropTarget) rules += ' g_e131';
-    rules += ' _kc131';
-    rules += ' hc131';
-    rules += ' mc131';
-    rules += ' lc131';
-    if (props.isFocusVisible) rules += ' ix131';
-    else if (props.isDropTarget) rules += ' ix131';
-    else rules += ' iq131';
-    rules += ' oc131';
-    rules += ' nc131';
-    rules += ' kc131';
-    rules += ' jc131';
-    rules += ' Th131';
-    rules += ' Qh131';
-    rules += ' Sh131';
-    rules += ' Rh131';
-    rules += ' _oa131';
+    rules += ' sd15';
+    rules += ' _Ca15';
+    rules += ' eb15';
+    if (!position) rules += ' _Pc15';
+    rules += ' uk15';
+    rules += ' ucJ9TBTb15';
+    rules += ' ud3Euai15';
+    rules += ' uea15';
+    rules += ' ugb15';
+    rules += ' uhd15';
+    rules += ' uje15';
+    rules += ' u2NhKxcl15';
+    rules += ' uic15';
+    rules += ' po15';
+    if (props.isDropTarget) rules += ' _jf15';
+    else rules += ' _ja15';
+    if (props.isDropTarget) rules += ' g_e15';
+    rules += ' _kc15';
+    rules += ' hc15';
+    rules += ' mc15';
+    rules += ' lc15';
+    if (props.isFocusVisible) rules += ' ix15';
+    else if (props.isDropTarget) rules += ' ix15';
+    else rules += ' iq15';
+    rules += ' oc15';
+    rules += ' nc15';
+    rules += ' kc15';
+    rules += ' jc15';
+    rules += ' Th15';
+    rules += ' Qh15';
+    rules += ' Sh15';
+    rules += ' Rh15';
+    rules += ' _oa15';
     return rules;
 };
 const $fb6e45fba2483f65$var$banner = function anonymous(props) {
     let rules = " ";
-    rules += ' _Pa131';
-    rules += ' _Er131';
-    rules += ' _Rr131';
-    rules += ' IM131';
-    rules += ' HM131';
-    rules += ' sd131';
-    rules += ' eb131';
-    rules += ' _Ca131';
-    rules += ' MAyFGYc131';
-    rules += ' ZJ131';
-    if (props.size === "L") rules += ' Lg131';
-    else if (props.size === "S") rules += ' Le131';
-    else rules += ' Lf131';
-    rules += ' g2131';
-    rules += ' ob131';
-    rules += ' nb131';
-    rules += ' kb131';
-    rules += ' jb131';
-    rules += ' px131';
-    rules += ' xd131';
-    rules += ' _xa131';
-    rules += ' xX0cczbc131';
-    rules += ' _xX0cczba131';
-    rules += ' T85xBjb131';
-    rules += ' Q85xBjb131';
-    rules += ' S85xBjb131';
-    rules += ' R85xBjb131';
-    rules += ' -M_-Mf131';
+    rules += ' _Pa15';
+    rules += ' _Er15';
+    rules += ' _Rr15';
+    rules += ' IM15';
+    rules += ' HM15';
+    rules += ' sd15';
+    rules += ' eb15';
+    rules += ' _Ca15';
+    rules += ' MAyFGYc15';
+    rules += ' ZJ15';
+    if (props.size === "L") rules += ' Lg15';
+    else if (props.size === "S") rules += ' Le15';
+    else rules += ' Lf15';
+    rules += ' g215';
+    rules += ' ob15';
+    rules += ' nb15';
+    rules += ' kb15';
+    rules += ' jb15';
+    rules += ' px15';
+    rules += ' xd15';
+    rules += ' _xa15';
+    rules += ' xX0cczbc15';
+    rules += ' _xX0cczba15';
+    rules += ' T85xBjb15';
+    rules += ' Q85xBjb15';
+    rules += ' S85xBjb15';
+    rules += ' R85xBjb15';
+    rules += ' -M_-Mf15';
     return rules;
 };
 const $fb6e45fba2483f65$export$3c6489d84dc98b6 = /*#__PURE__*/ (0, $4h9kk$forwardRef)(function DropZone(props, ref) {

package/dist/private/DropZone.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AA8DM,MAAM,0DACX,CAAA,GAAA,oBAAY,EAAqE;AAEnF,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BC,MAAM,2CAAW,WAAW,GAAG,CAAA,GAAA,iBAAS,EAAE,SAAS,SACxD,KAAoB,EACpB,GAA2B;IAE3B,IAAI,kBAAkB,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,+CAAW,GAAG;IAChE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,QAAC,OAAO,KAAI,GAAG;IACnB,IAAI,SAAS,CAAA,GAAA,yCAAQ,EAAE;IAEvB,qBACE,gBAAC,CAAA,GAAA,eAAU;QACR,GAAG,KAAK;QACT,KAAK;QACL,OAAO,MAAM,YAAY;QACzB,WAAW,CAAA,cACT,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,+BAAS,aAAa,MAAM,MAAM;kBAEpE,CAAA,4BACC;;kCACE,gBAAC,CAAA,GAAA,yCAAwB,EAAE,QAAQ;wBACjC,OAAO;4BAAC,cAAc;4BAAM,cAAc,YAAY,YAAY;kCAAE;wBAAI;kCACvE,MAAM,QAAQ;;oBAEhB,YAAY,YAAY,IAAI,MAAM,QAAQ,kBACzC,gBAAC;wBAAI,WAAW,6BAAO;kCAAC;wBAAI;kCAC1B,cAAA,gBAAC;sCACE,MAAM,cAAc,GACjB,MAAM,cAAc,GACpB,gBAAgB,MAAM,CAAC;;;;;;AAQ3C","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} from 'react-aria-components/slots';\n\nimport {createContext, forwardRef, ReactNode} from 'react';\n\nimport {DOMProps, DOMRef, DOMRefValue, GlobalDOMAttributes} from '@react-types/shared';\nimport {\n  DropZoneRenderProps,\n  DropZone as RACDropZone,\n  DropZoneProps as RACDropZoneProps\n} from 'react-aria-components/DropZone';\nimport {\n  getAllowedOverrides,\n  StylesPropWithHeight,\n  UnsafeStyles\n} 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 './useDOMRef';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface DropZoneProps\n  extends\n    Omit<\n      RACDropZoneProps,\n      | 'className'\n      | 'style'\n      | 'render'\n      | 'children'\n      | 'isDisabled'\n      | 'onHover'\n      | 'onHoverStart'\n      | 'onHoverEnd'\n      | 'onHoverChange'\n      | keyof GlobalDOMAttributes\n    >,\n    UnsafeStyles,\n    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   *\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 =\n  createContext<ContextValue<Partial<DropZoneProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst dropzone = style<DropZoneRenderProps>(\n  {\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    boxSizing: 'border-box'\n  },\n  getAllowedOverrides({height: true})\n);\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(\n  props: DropZoneProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  [props, ref] = useSpectrumContextProps(props, ref, DropZoneContext);\n  let {size = 'M'} = props;\n  let domRef = useDOMRef(ref);\n\n  return (\n    <RACDropZone\n      {...props}\n      ref={domRef}\n      style={props.UNSAFE_style}\n      className={renderProps =>\n        (props.UNSAFE_className || '') + dropzone(renderProps, props.styles)\n      }>\n      {renderProps => (\n        <>\n          <IllustratedMessageContext.Provider\n            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\n                  ? props.replaceMessage\n                  : stringFormatter.format('dropzone.replaceMessage')}\n              </span>\n            </div>\n          )}\n        </>\n      )}\n    </RACDropZone>\n  );\n});\n"],"names":[],"version":3,"file":"DropZone.mjs.map"}
+{"mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AA6DM,MAAM,0DACX,CAAA,GAAA,oBAAY,EAAqE;AAEnF,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BC,MAAM,2CAAW,WAAW,GAAG,CAAA,GAAA,iBAAS,EAAE,SAAS,SACxD,KAAoB,EACpB,GAA2B;IAE3B,IAAI,kBAAkB,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,+CAAW,GAAG;IAChE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,QAAC,OAAO,KAAI,GAAG;IACnB,IAAI,SAAS,CAAA,GAAA,yCAAQ,EAAE;IAEvB,qBACE,gBAAC,CAAA,GAAA,eAAU;QACR,GAAG,KAAK;QACT,KAAK;QACL,OAAO,MAAM,YAAY;QACzB,WAAW,CAAA,cACT,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,+BAAS,aAAa,MAAM,MAAM;kBAEpE,CAAA,4BACC;;kCACE,gBAAC,CAAA,GAAA,yCAAwB,EAAE,QAAQ;wBACjC,OAAO;4BAAC,cAAc;4BAAM,cAAc,YAAY,YAAY;kCAAE;wBAAI;kCACvE,MAAM,QAAQ;;oBAEhB,YAAY,YAAY,IAAI,MAAM,QAAQ,kBACzC,gBAAC;wBAAI,WAAW,6BAAO;kCAAC;wBAAI;kCAC1B,cAAA,gBAAC;sCACE,MAAM,cAAc,GACjB,MAAM,cAAc,GACpB,gBAAgB,MAAM,CAAC;;;;;;AAQ3C","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} from 'react-aria-components/slots';\n\nimport {createContext, forwardRef, ReactNode} from 'react';\n\nimport {DOMProps, DOMRef, DOMRefValue, GlobalDOMAttributes} from '@react-types/shared';\nimport {\n  DropZoneRenderProps,\n  DropZone as RACDropZone,\n  DropZoneProps as RACDropZoneProps\n} from 'react-aria-components/DropZone';\nimport {\n  getAllowedOverrides,\n  StylesPropWithHeight,\n  UnsafeStyles\n} from './style-utils' with {type: 'macro'};\nimport {IllustratedMessageContext} from './IllustratedMessage';\nimport intlMessages from '../intl/*.json';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from './useDOMRef';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface DropZoneProps\n  extends\n    Omit<\n      RACDropZoneProps,\n      | 'className'\n      | 'style'\n      | 'render'\n      | 'children'\n      | 'isDisabled'\n      | 'onHover'\n      | 'onHoverStart'\n      | 'onHoverEnd'\n      | 'onHoverChange'\n      | keyof GlobalDOMAttributes\n    >,\n    UnsafeStyles,\n    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   *\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 =\n  createContext<ContextValue<Partial<DropZoneProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst dropzone = style<DropZoneRenderProps>(\n  {\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    boxSizing: 'border-box'\n  },\n  getAllowedOverrides({height: true})\n);\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(\n  props: DropZoneProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  [props, ref] = useSpectrumContextProps(props, ref, DropZoneContext);\n  let {size = 'M'} = props;\n  let domRef = useDOMRef(ref);\n\n  return (\n    <RACDropZone\n      {...props}\n      ref={domRef}\n      style={props.UNSAFE_style}\n      className={renderProps =>\n        (props.UNSAFE_className || '') + dropzone(renderProps, props.styles)\n      }>\n      {renderProps => (\n        <>\n          <IllustratedMessageContext.Provider\n            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\n                  ? props.replaceMessage\n                  : stringFormatter.format('dropzone.replaceMessage')}\n              </span>\n            </div>\n          )}\n        </>\n      )}\n    </RACDropZone>\n  );\n});\n"],"names":[],"version":3,"file":"DropZone.mjs.map"}