@react-spectrum/s2 1.4.0 → 1.5.1

package/dist/private/DropZone.css

@@ -1,245 +1,245 @@
 @layer _.a {
-  ._Pc131 {
+  ._Pc151 {
     position: relative;
   }
 
-  .uk131 {
+  .uk151 {
     font-family: var(--s2-font-family-sans, adobe-clean-spectrum-vf), adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
   }
 
-  .po131 {
+  .po151 {
     color: light-dark(#131313, #f2f2f2);
   }
 
-  ._ja131 {
+  ._ja151 {
     border-style: dashed;
   }
 
-  ._jf131 {
+  ._jf151 {
     border-style: solid;
   }
 
-  .g_e131 {
+  .g_e151 {
     background-color: light-dark(#e5f0fe, #0f1c52);
   }
 
-  ._kc131 {
+  ._kc151 {
     border-top-width: 2px;
   }
 
-  .hc131 {
+  .hc151 {
     border-bottom-width: 2px;
   }
 
-  .mc131 {
+  .mc151 {
     border-inline-start-width: 2px;
   }
 
-  .lc131 {
+  .lc151 {
     border-inline-end-width: 2px;
   }
 
-  .iq131 {
+  .iq151 {
     border-color: light-dark(#dadada, #393939);
   }
 
-  .ix131 {
+  .ix151 {
     border-color: light-dark(#4b75ff, #4069fd);
   }
 
-  .oc131 {
+  .oc151 {
     border-start-start-radius: .625rem;
   }
 
-  .nc131 {
+  .nc151 {
     border-start-end-radius: .625rem;
   }
 
-  .kc131 {
+  .kc151 {
     border-end-start-radius: .625rem;
   }
 
-  .jc131 {
+  .jc151 {
     border-end-end-radius: .625rem;
   }
 
-  .Th131 {
+  .Th151 {
     padding-top: 24px;
   }
 
-  .Qh131 {
+  .Qh151 {
     padding-bottom: 24px;
   }
 
-  .Sh131 {
+  .Sh151 {
     padding-inline-start: 24px;
   }
 
-  .Rh131 {
+  .Rh151 {
     padding-inline-end: 24px;
   }
 
-  ._oa131 {
+  ._oa151 {
     box-sizing: border-box;
   }
 
-  ._Pa131 {
+  ._Pa151 {
     position: absolute;
   }
 
-  ._Er131 {
+  ._Er151 {
     left: 0;
   }
 
-  ._Rr131 {
+  ._Rr151 {
     right: 0;
   }
 
-  .IM131 {
+  .IM151 {
     margin-inline-start: auto;
   }
 
-  .HM131 {
+  .HM151 {
     margin-inline-end: auto;
   }
 
-  .sd131 {
+  .sd151 {
     display: flex;
   }
 
-  .eb131 {
+  .eb151 {
     align-items: center;
   }
 
-  ._Ca131 {
+  ._Ca151 {
     justify-content: center;
   }
 
-  .MAyFGYc131 {
+  .MAyFGYc151 {
     min-height: var(--M);
   }
 
-  .ZJ131 {
+  .ZJ151 {
     width: fit-content;
   }
 
-  .Lf131 {
+  .Lf151 {
     max-width: calc(12rem * var(--s2-scale));
   }
 
-  .Le131 {
+  .Le151 {
     max-width: calc(10rem * var(--s2-scale));
   }
 
-  .Lg131 {
+  .Lg151 {
     max-width: calc(13rem * var(--s2-scale));
   }
 
-  .g2131 {
+  .g2151 {
     background-color: light-dark(#3b63fb, #4069fd);
   }
 
-  .ob131 {
+  .ob151 {
     border-start-start-radius: .5rem;
   }
 
-  .nb131 {
+  .nb151 {
     border-start-end-radius: .5rem;
   }
 
-  .kb131 {
+  .kb151 {
     border-end-start-radius: .5rem;
   }
 
-  .jb131 {
+  .jb151 {
     border-end-end-radius: .5rem;
   }
 
-  .px131 {
+  .px151 {
     color: #fff;
   }
 
-  .xd131 {
+  .xd151 {
     font-weight: 700;
   }
 
-  ._xa131 {
+  ._xa151 {
     font-synthesis-weight: none;
   }
 
-  .T85xBjb131 {
+  .T85xBjb151 {
     padding-top: calc((var(--M))/1.5);
   }
 
-  .Q85xBjb131 {
+  .Q85xBjb151 {
     padding-bottom: calc((var(--M))/1.5);
   }
 
-  .S85xBjb131 {
+  .S85xBjb151 {
     padding-inline-start: calc((var(--M))/1.5);
   }
 
-  .R85xBjb131 {
+  .R85xBjb151 {
     padding-inline-end: calc((var(--M))/1.5);
   }
 
-  .-M_-Mf131 {
+  .-M_-Mf151 {
     --M: calc(1.25rem * var(--s2-scale));
   }
 }
 
 @layer _.b {
-  .ucJ9TBTb131:lang(ar) {
+  .ucJ9TBTb151:lang(ar) {
     font-family: adobe-clean-arabic, myriad-arabic, ui-sans-serif, system-ui, sans-serif;
   }
 
-  .xX0cczbc131:is(:lang(ja), :lang(ko), :lang(zh)) {
+  .xX0cczbc151:is(:lang(ja), :lang(ko), :lang(zh)) {
     font-weight: 500;
   }
 
-  ._xX0cczba131:is(:lang(ja), :lang(ko), :lang(zh)) {
+  ._xX0cczba151:is(:lang(ja), :lang(ko), :lang(zh)) {
     font-synthesis-weight: none;
   }
 }
 
 @layer _.c {
-  .ud3Euai131:lang(he) {
+  .ud3Euai151:lang(he) {
     font-family: adobe-clean-hebrew, myriad-hebrew, ui-sans-serif, system-ui, sans-serif;
   }
 }
 
 @layer _.d {
-  .uea131:lang(ja) {
+  .uea151: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) {
+  .ugb151:lang(ko) {
     font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
   }
 }
 
 @layer _.f {
-  .uhd131:lang(zh) {
+  .uhd151:lang(zh) {
     font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.g {
-  .uje131:lang(zh-hant) {
+  .uje151: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) {
+  .u2NhKxcl151: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)) {
+  .uic151: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 += ' sd151';
+    rules += ' _Ca151';
+    rules += ' eb151';
+    if (!position) rules += ' _Pc151';
+    rules += ' uk151';
+    rules += ' ucJ9TBTb151';
+    rules += ' ud3Euai151';
+    rules += ' uea151';
+    rules += ' ugb151';
+    rules += ' uhd151';
+    rules += ' uje151';
+    rules += ' u2NhKxcl151';
+    rules += ' uic151';
+    rules += ' po151';
+    if (props.isDropTarget) rules += ' _jf151';
+    else rules += ' _ja151';
+    if (props.isDropTarget) rules += ' g_e151';
+    rules += ' _kc151';
+    rules += ' hc151';
+    rules += ' mc151';
+    rules += ' lc151';
+    if (props.isFocusVisible) rules += ' ix151';
+    else if (props.isDropTarget) rules += ' ix151';
+    else rules += ' iq151';
+    rules += ' oc151';
+    rules += ' nc151';
+    rules += ' kc151';
+    rules += ' jc151';
+    rules += ' Th151';
+    rules += ' Qh151';
+    rules += ' Sh151';
+    rules += ' Rh151';
+    rules += ' _oa151';
     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 += ' _Pa151';
+    rules += ' _Er151';
+    rules += ' _Rr151';
+    rules += ' IM151';
+    rules += ' HM151';
+    rules += ' sd151';
+    rules += ' eb151';
+    rules += ' _Ca151';
+    rules += ' MAyFGYc151';
+    rules += ' ZJ151';
+    if (props.size === "L") rules += ' Lg151';
+    else if (props.size === "S") rules += ' Le151';
+    else rules += ' Lf151';
+    rules += ' g2151';
+    rules += ' ob151';
+    rules += ' nb151';
+    rules += ' kb151';
+    rules += ' jb151';
+    rules += ' px151';
+    rules += ' xd151';
+    rules += ' _xa151';
+    rules += ' xX0cczbc151';
+    rules += ' _xX0cczba151';
+    rules += ' T85xBjb151';
+    rules += ' Q85xBjb151';
+    rules += ' S85xBjb151';
+    rules += ' R85xBjb151';
+    rules += ' -M_-Mf151';
     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"}