@react-spectrum/s2 0.2.1-nightly.4979

package/dist/CloseButton.css

@@ -0,0 +1,240 @@
+.\.:not(#a#b) {
+  all: revert-layer;
+}
+
+@layer _.a {
+  ._La {
+    outline-style: none;
+  }
+
+  ._Lb {
+    outline-style: solid;
+  }
+
+  .dx {
+    outline-color: var(--lightningcss-light, #4b75ff) var(--lightningcss-dark, #456efe);
+  }
+
+  .dc {
+    outline-color: #fff;
+  }
+
+  .db {
+    outline-color: #000;
+  }
+
+  ._Nc {
+    outline-width: 2px;
+  }
+
+  ._M-3t1z {
+    outline-offset: 2px;
+  }
+
+  ._Zd {
+    display: flex;
+  }
+
+  ._1c {
+    align-items: center;
+  }
+
+  ._2d {
+    justify-content: center;
+  }
+
+  .lo {
+    width: 2rem;
+  }
+
+  .li {
+    width: 1.25rem;
+  }
+
+  .lk {
+    width: 1.5rem;
+  }
+
+  .lp {
+    width: 2.5rem;
+  }
+
+  .lv {
+    width: 3rem;
+  }
+
+  .ko {
+    height: 2rem;
+  }
+
+  .ki {
+    height: 1.25rem;
+  }
+
+  .kk {
+    height: 1.5rem;
+  }
+
+  .kp {
+    height: 2.5rem;
+  }
+
+  .kv {
+    height: 3rem;
+  }
+
+  ._vf {
+    border-start-start-radius: 9999px;
+  }
+
+  ._wf {
+    border-start-end-radius: 9999px;
+  }
+
+  ._xf {
+    border-end-start-radius: 9999px;
+  }
+
+  ._yf {
+    border-end-end-radius: 9999px;
+  }
+
+  .Ea {
+    padding-top: 0;
+  }
+
+  .Fa {
+    padding-bottom: 0;
+  }
+
+  .Ca {
+    padding-inline-start: 0;
+  }
+
+  .Da {
+    padding-inline-end: 0;
+  }
+
+  .wf {
+    border-style: none;
+  }
+
+  ._Oa {
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
+  }
+
+  ._Q-375x7f {
+    transition-duration: .15s;
+  }
+
+  ._Ra {
+    transition-timing-function: cubic-bezier(.45, 0, .4, 1);
+  }
+
+  .ba {
+    background-color: #0000;
+  }
+
+  .bg {
+    background-color: var(--lightningcss-light, #e9e9e9) var(--lightningcss-dark, #2c2c2c);
+  }
+
+  .b____7 {
+    background-color: #ffffff1c;
+  }
+
+  .b_____k {
+    background-color: #00000017;
+  }
+
+  .-rwx0fg_a-n {
+    --iconPrimary: var(--lightningcss-light, #292929) var(--lightningcss-dark, #dbdbdb);
+  }
+
+  .-rwx0fg_a-o {
+    --iconPrimary: var(--lightningcss-light, #131313) var(--lightningcss-dark, #f2f2f2);
+  }
+
+  .-rwx0fg_a-j {
+    --iconPrimary: var(--lightningcss-light, #c6c6c6) var(--lightningcss-dark, #444);
+  }
+
+  .-rwx0fg_a-_____e {
+    --iconPrimary: #ffffffd9;
+  }
+
+  .-rwx0fg_a-_____f {
+    --iconPrimary: #fffffff0;
+  }
+
+  .-rwx0fg_a-_____a {
+    --iconPrimary: #ffffff36;
+  }
+
+  .-rwx0fg_a-_____r {
+    --iconPrimary: #000000d6;
+  }
+
+  .-rwx0fg_a-_____s {
+    --iconPrimary: #000000ed;
+  }
+
+  .-rwx0fg_a-_____n {
+    --iconPrimary: #00000038;
+  }
+}
+
+@layer _.b, UNSAFE_overrides;
+
+@layer _.b.a {
+  @media (forced-colors: active) {
+    .da_____z {
+      outline-color: highlight;
+    }
+  }
+}
+
+@layer _.b.b {
+  @media not ((hover: hover) and (pointer: fine)) {
+    .lbp {
+      width: 2.5rem;
+    }
+
+    .lbj {
+      width: 1.5625rem;
+    }
+
+    .lbl {
+      width: 1.875rem;
+    }
+
+    .lbs {
+      width: 3.125rem;
+    }
+
+    .lbw {
+      width: 3.75rem;
+    }
+
+    .kbp {
+      height: 2.5rem;
+    }
+
+    .kbj {
+      height: 1.5625rem;
+    }
+
+    .kbl {
+      height: 1.875rem;
+    }
+
+    .kbs {
+      height: 3.125rem;
+    }
+
+    .kbw {
+      height: 3.75rem;
+    }
+  }
+}
+/*# sourceMappingURL=CloseButton.css.map */

package/dist/CloseButton.css.map

@@ -0,0 +1 @@
+{"mappings":"AAwCe;;;;AAAA;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA;;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA","sources":["packages/@react-spectrum/s2/src/CloseButton.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 {baseColor, style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {Button, ButtonProps} from 'react-aria-components';\nimport CrossIcon from '../ui-icons/Cross';\nimport {FocusableRef} from '@react-types/shared';\nimport {focusRing, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {forwardRef} from 'react';\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from '@react-spectrum/utils';\n\ninterface CloseButtonProps extends Omit<ButtonProps, 'className' | 'style' | 'children'>, StyleProps {\n  /**\n   * The size of the CloseButton.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /** The static color style to apply. Useful when the Button appears over a color background. */\n  staticColor?: 'white' | 'black'\n}\n\nconst hoverBackground = {\n  default: 'gray-100',\n  staticColor: {\n    white: 'transparent-white-100',\n    black: 'transparent-black-100'\n  }\n} as const;\n\nconst styles = style({\n  ...focusRing(),\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  size: 'control',\n  borderRadius: 'full',\n  padding: 0,\n  borderStyle: 'none',\n  transition: 'default',\n  backgroundColor: {\n    default: 'transparent',\n    isHovered: hoverBackground,\n    isFocusVisible: hoverBackground,\n    isPressed: hoverBackground\n  },\n  '--iconPrimary': {\n    type: 'color',\n    value: {\n      default: 'neutral',\n      isDisabled: 'disabled',\n      staticColor: {\n        white: {\n          default: baseColor('transparent-white-800'),\n          isDisabled: 'transparent-white-400'\n        },\n        black: {\n          default: baseColor('transparent-black-800'),\n          isDisabled: 'transparent-black-400'\n        }\n      }\n    }\n  },\n  outlineColor: {\n    default: 'focus-ring',\n    staticColor: {\n      white: 'white',\n      black: 'black'\n    },\n    forcedColors: 'Highlight'\n  }\n}, getAllowedOverrides());\n\nfunction CloseButton(props: CloseButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n  let {UNSAFE_style, UNSAFE_className = ''} = props;\n  let domRef = useFocusableRef(ref);\n  return (\n    <Button\n      {...props}\n      ref={domRef}\n      style={pressScale(domRef, UNSAFE_style)}\n      className={renderProps => UNSAFE_className + styles(renderProps, props.styles)}>\n      <CrossIcon size={({S: 'L', M: 'XL', L: 'XXL', XL: 'XXXL'} as const)[props.size || 'M']} />\n    </Button>\n  );\n}\n\nlet _CloseButton = forwardRef(CloseButton);\nexport {_CloseButton as CloseButton};\n"],"names":[],"version":3,"file":"CloseButton.css.map"}

package/dist/CloseButton.mjs

@@ -0,0 +1,155 @@
+import "./CloseButton.css";
+import $bd983341bd35d639$export$2e2bcd8739ae039 from "./Cross.mjs";
+import {pressScale as $10ea7662e51a285b$export$56e8cba416805d8d} from "./pressScale.mjs";
+import {jsx as $5wH0g$jsx} from "react/jsx-runtime";
+import {Button as $5wH0g$Button} from "react-aria-components";
+import {forwardRef as $5wH0g$forwardRef} from "react";
+import {useFocusableRef as $5wH0g$useFocusableRef} from "@react-spectrum/utils";
+
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+
+
+const $a9cda54c4f47ce52$var$hoverBackground = {
+    default: 'gray-100',
+    staticColor: {
+        white: 'transparent-white-100',
+        black: 'transparent-black-100'
+    }
+};
+const $a9cda54c4f47ce52$var$styles = function anonymous(props, overrides) {
+    let rules = " .";
+    let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|l|q|r|_9|_8|h|_5|_4|__A|__c|__d|__a|__b|U|__Q|X|Z|V|W)[^\s]+/g) || [];
+    rules += matches.join('');
+    let $l = false;
+    for (let p of matches)if (/^\s*l/.test(p)) $l = true;
+    if (props.isFocusVisible) rules += ' _Lb';
+    else rules += ' _La';
+    rules += ' da_____z';
+    if (props.staticColor === "black") rules += ' db';
+    else if (props.staticColor === "white") rules += ' dc';
+    else rules += ' dx';
+    rules += ' _Nc';
+    rules += ' _M-3t1z';
+    rules += ' _Zd';
+    rules += ' _1c';
+    rules += ' _2d';
+    if (!$l) {
+        if (props.size === "XL") {
+            rules += ' lbw';
+            rules += ' lv';
+        } else if (props.size === "L") {
+            rules += ' lbs';
+            rules += ' lp';
+        } else if (props.size === "S") {
+            rules += ' lbl';
+            rules += ' lk';
+        } else if (props.size === "XS") {
+            rules += ' lbj';
+            rules += ' li';
+        } else {
+            rules += ' lbp';
+            rules += ' lo';
+        }
+    }
+    if (props.size === "XL") {
+        rules += ' kbw';
+        rules += ' kv';
+    } else if (props.size === "L") {
+        rules += ' kbs';
+        rules += ' kp';
+    } else if (props.size === "S") {
+        rules += ' kbl';
+        rules += ' kk';
+    } else if (props.size === "XS") {
+        rules += ' kbj';
+        rules += ' ki';
+    } else {
+        rules += ' kbp';
+        rules += ' ko';
+    }
+    rules += ' _vf';
+    rules += ' _wf';
+    rules += ' _xf';
+    rules += ' _yf';
+    rules += ' Ea';
+    rules += ' Fa';
+    rules += ' Ca';
+    rules += ' Da';
+    rules += ' wf';
+    rules += ' _Oa';
+    rules += ' _Q-375x7f';
+    rules += ' _Ra';
+    if (props.isPressed) {
+        if (props.staticColor === "black") rules += ' b_____k';
+        else if (props.staticColor === "white") rules += ' b____7';
+        else rules += ' bg';
+    } else if (props.isFocusVisible) {
+        if (props.staticColor === "black") rules += ' b_____k';
+        else if (props.staticColor === "white") rules += ' b____7';
+        else rules += ' bg';
+    } else if (props.isHovered) {
+        if (props.staticColor === "black") rules += ' b_____k';
+        else if (props.staticColor === "white") rules += ' b____7';
+        else rules += ' bg';
+    } else rules += ' ba';
+    if (props.staticColor === "black") {
+        if (props.isDisabled) rules += ' -rwx0fg_a-_____n';
+        else {
+            if (props.isPressed) rules += ' -rwx0fg_a-_____s';
+            else if (props.isFocusVisible) rules += ' -rwx0fg_a-_____s';
+            else if (props.isHovered) rules += ' -rwx0fg_a-_____s';
+            else rules += ' -rwx0fg_a-_____r';
+        }
+    } else if (props.staticColor === "white") {
+        if (props.isDisabled) rules += ' -rwx0fg_a-_____a';
+        else {
+            if (props.isPressed) rules += ' -rwx0fg_a-_____f';
+            else if (props.isFocusVisible) rules += ' -rwx0fg_a-_____f';
+            else if (props.isHovered) rules += ' -rwx0fg_a-_____f';
+            else rules += ' -rwx0fg_a-_____e';
+        }
+    } else if (props.isDisabled) rules += ' -rwx0fg_a-j';
+    else {
+        if (props.isPressed) rules += ' -rwx0fg_a-o';
+        else if (props.isFocusVisible) rules += ' -rwx0fg_a-o';
+        else if (props.isHovered) rules += ' -rwx0fg_a-o';
+        else rules += ' -rwx0fg_a-n';
+    }
+    return rules;
+};
+function $a9cda54c4f47ce52$var$CloseButton(props, ref) {
+    let { UNSAFE_style: UNSAFE_style, UNSAFE_className: UNSAFE_className = '' } = props;
+    let domRef = (0, $5wH0g$useFocusableRef)(ref);
+    return /*#__PURE__*/ (0, $5wH0g$jsx)((0, $5wH0g$Button), {
+        ...props,
+        ref: domRef,
+        style: (0, $10ea7662e51a285b$export$56e8cba416805d8d)(domRef, UNSAFE_style),
+        className: (renderProps)=>UNSAFE_className + $a9cda54c4f47ce52$var$styles(renderProps, props.styles),
+        children: /*#__PURE__*/ (0, $5wH0g$jsx)((0, $bd983341bd35d639$export$2e2bcd8739ae039), {
+            size: {
+                S: 'L',
+                M: 'XL',
+                L: 'XXL',
+                XL: 'XXXL'
+            }[props.size || 'M']
+        })
+    });
+}
+let $a9cda54c4f47ce52$export$de65de8213222d10 = /*#__PURE__*/ (0, $5wH0g$forwardRef)($a9cda54c4f47ce52$var$CloseButton);
+
+
+export {$a9cda54c4f47ce52$export$de65de8213222d10 as CloseButton};
+//# sourceMappingURL=CloseButton.mjs.map

package/dist/CloseButton.mjs.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAsBD,MAAM,wCAAkB;IACtB,SAAS;IACT,aAAa;QACX,OAAO;QACP,OAAO;IACT;AACF;AAEA,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CN,SAAS,kCAAY,KAAuB,EAAE,GAAoC;IAChF,IAAI,gBAAC,YAAY,oBAAE,mBAAmB,IAAG,GAAG;IAC5C,IAAI,SAAS,CAAA,GAAA,sBAAc,EAAE;IAC7B,qBACE,gBAAC,CAAA,GAAA,aAAK;QACH,GAAG,KAAK;QACT,KAAK;QACL,OAAO,CAAA,GAAA,yCAAS,EAAE,QAAQ;QAC1B,WAAW,CAAA,cAAe,mBAAmB,6BAAO,aAAa,MAAM,MAAM;kBAC7E,cAAA,gBAAC,CAAA,GAAA,wCAAQ;YAAE,MAAM,AAAC;gBAAC,GAAG;gBAAK,GAAG;gBAAM,GAAG;gBAAO,IAAI;YAAM,CAAW,CAAC,MAAM,IAAI,IAAI,IAAI;;;AAG5F;AAEA,IAAI,0DAAe,CAAA,GAAA,iBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/CloseButton.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 {baseColor, style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {Button, ButtonProps} from 'react-aria-components';\nimport CrossIcon from '../ui-icons/Cross';\nimport {FocusableRef} from '@react-types/shared';\nimport {focusRing, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {forwardRef} from 'react';\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from '@react-spectrum/utils';\n\ninterface CloseButtonProps extends Omit<ButtonProps, 'className' | 'style' | 'children'>, StyleProps {\n  /**\n   * The size of the CloseButton.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /** The static color style to apply. Useful when the Button appears over a color background. */\n  staticColor?: 'white' | 'black'\n}\n\nconst hoverBackground = {\n  default: 'gray-100',\n  staticColor: {\n    white: 'transparent-white-100',\n    black: 'transparent-black-100'\n  }\n} as const;\n\nconst styles = style({\n  ...focusRing(),\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  size: 'control',\n  borderRadius: 'full',\n  padding: 0,\n  borderStyle: 'none',\n  transition: 'default',\n  backgroundColor: {\n    default: 'transparent',\n    isHovered: hoverBackground,\n    isFocusVisible: hoverBackground,\n    isPressed: hoverBackground\n  },\n  '--iconPrimary': {\n    type: 'color',\n    value: {\n      default: 'neutral',\n      isDisabled: 'disabled',\n      staticColor: {\n        white: {\n          default: baseColor('transparent-white-800'),\n          isDisabled: 'transparent-white-400'\n        },\n        black: {\n          default: baseColor('transparent-black-800'),\n          isDisabled: 'transparent-black-400'\n        }\n      }\n    }\n  },\n  outlineColor: {\n    default: 'focus-ring',\n    staticColor: {\n      white: 'white',\n      black: 'black'\n    },\n    forcedColors: 'Highlight'\n  }\n}, getAllowedOverrides());\n\nfunction CloseButton(props: CloseButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n  let {UNSAFE_style, UNSAFE_className = ''} = props;\n  let domRef = useFocusableRef(ref);\n  return (\n    <Button\n      {...props}\n      ref={domRef}\n      style={pressScale(domRef, UNSAFE_style)}\n      className={renderProps => UNSAFE_className + styles(renderProps, props.styles)}>\n      <CrossIcon size={({S: 'L', M: 'XL', L: 'XXL', XL: 'XXXL'} as const)[props.size || 'M']} />\n    </Button>\n  );\n}\n\nlet _CloseButton = forwardRef(CloseButton);\nexport {_CloseButton as CloseButton};\n"],"names":[],"version":3,"file":"CloseButton.mjs.map"}

package/dist/ColorArea.cjs

@@ -0,0 +1,99 @@
+require("./ColorArea.css");
+var $5b07976eb9e358fe$exports = require("./ColorHandle.cjs");
+var $lfrPf$reactjsxruntime = require("react/jsx-runtime");
+var $lfrPf$reactariacomponents = require("react-aria-components");
+var $lfrPf$react = require("react");
+var $lfrPf$reactspectrumutils = require("@react-spectrum/utils");
+
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$export(module.exports, "ColorArea", () => $4c6639e34959fe36$export$b2103f68a961418e);
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+
+function $4c6639e34959fe36$var$ColorArea(props, ref) {
+    let { UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style, styles: styles } = props;
+    let containerRef = (0, $lfrPf$reactspectrumutils.useDOMRef)(ref);
+    return /*#__PURE__*/ (0, $lfrPf$reactjsxruntime.jsx)((0, $lfrPf$reactariacomponents.ColorArea), {
+        ...props,
+        ref: containerRef,
+        style: ({ defaultStyle: defaultStyle, isDisabled: isDisabled })=>({
+                ...defaultStyle,
+                background: isDisabled ? undefined : defaultStyle.background,
+                // Move position: relative to style macro so it can be overridden.
+                position: undefined,
+                ...UNSAFE_style
+            }),
+        className: (renderProps)=>UNSAFE_className + function anonymous(props, overrides) {
+                let rules = " .";
+                let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|l|q|r|_9|_8|h|_5|_4|__A|__c|__d|__a|__b|U|__Q|X|Z|V|W|k|o|p)[^\s]+/g) || [];
+                rules += matches.join('');
+                let $U = false;
+                let $l = false;
+                let $k = false;
+                let $q = false;
+                let $o = false;
+                for (let p of matches){
+                    if (/^\s*U/.test(p)) $U = true;
+                    if (/^\s*l/.test(p)) $l = true;
+                    if (/^\s*k/.test(p)) $k = true;
+                    if (/^\s*q/.test(p)) $q = true;
+                    if (/^\s*o/.test(p)) $o = true;
+                }
+                if (!$U) rules += ' Uc';
+                if (!$l) {
+                    rules += ' lbO';
+                    rules += ' lN';
+                }
+                if (!$k) {
+                    rules += ' kbO';
+                    rules += ' kN';
+                }
+                if (!$q) {
+                    rules += ' qbA';
+                    rules += ' qz';
+                }
+                if (!$o) {
+                    rules += ' obA';
+                    rules += ' oz';
+                }
+                rules += ' _vc';
+                rules += ' _wc';
+                rules += ' _xc';
+                rules += ' _yc';
+                rules += ' da_____v';
+                rules += ' dp10';
+                rules += ' _Nb';
+                rules += ' _M-3hmpv';
+                if (props.isDisabled) rules += ' _La';
+                else rules += ' _Lb';
+                if (props.isDisabled) rules += ' bg';
+                return rules;
+            }(renderProps, styles),
+        children: ({ state: state })=>/*#__PURE__*/ (0, $lfrPf$reactjsxruntime.jsx)((0, $5b07976eb9e358fe$exports.ColorHandle), {
+                containerRef: containerRef,
+                getPosition: ()=>state.getThumbPosition()
+            })
+    });
+}
+/**
+ * A ColorArea allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.
+ */ let $4c6639e34959fe36$export$b2103f68a961418e = /*#__PURE__*/ (0, $lfrPf$react.forwardRef)($4c6639e34959fe36$var$ColorArea);
+
+
+//# sourceMappingURL=ColorArea.cjs.map

package/dist/ColorArea.cjs.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAeD,SAAS,gCAAU,KAAqB,EAAE,GAA2B;IACnE,IAAI,oBAAC,mBAAmB,kBAAI,YAAY,UAAE,MAAM,EAAC,GAAG;IACpD,IAAI,eAAe,CAAA,GAAA,mCAAQ,EAAE;IAC7B,qBACE,gCAAC,CAAA,GAAA,oCAAY;QACV,GAAG,KAAK;QACT,KAAK;QACL,OAAO,CAAC,gBAAC,YAAY,cAAE,UAAU,EAAC,GAAM,CAAA;gBACtC,GAAG,YAAY;gBACf,YAAY,aAAa,YAAY,aAAa,UAAU;gBAC5D,kEAAkE;gBAClE,UAAU;gBACV,GAAG,YAAY;YACjB,CAAA;QACA,WAAW,CAAA,cAAe,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAkBL,aAAa;kBACpD,CAAC,SAAC,KAAK,EAAC,iBACN,gCAAC,CAAA,GAAA,qCAAU;gBACV,cAAc;gBACd,aAAa,IAAM,MAAM,gBAAgB;;;AAInD;AAEA;;CAEC,GACD,IAAI,0DAAa,CAAA,GAAA,uBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/ColorArea.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  ColorArea as AriaColorArea,\n  ColorAreaProps as AriaColorAreaProps\n} from 'react-aria-components';\nimport {ColorHandle} from './ColorHandle';\nimport {DOMRef} from '@react-types/shared';\nimport {forwardRef} from 'react';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\nexport interface ColorAreaProps extends Omit<AriaColorAreaProps, 'children' | 'className' | 'style'>, StyleProps {}\n\nfunction ColorArea(props: ColorAreaProps, ref: DOMRef<HTMLDivElement>) {\n  let {UNSAFE_className = '', UNSAFE_style, styles} = props;\n  let containerRef = useDOMRef(ref);\n  return (\n    <AriaColorArea\n      {...props}\n      ref={containerRef}\n      style={({defaultStyle, isDisabled}) => ({\n        ...defaultStyle,\n        background: isDisabled ? undefined : defaultStyle.background,\n        // Move position: relative to style macro so it can be overridden.\n        position: undefined,\n        ...UNSAFE_style\n      })}\n      className={renderProps => UNSAFE_className + style({\n        position: 'relative',\n        size: 192,\n        minSize: 64,\n        borderRadius: 'default',\n        outlineColor: {\n          default: 'gray-1000/10',\n          forcedColors: 'ButtonBorder'\n        },\n        outlineWidth: 1,\n        outlineOffset: -1,\n        outlineStyle: {\n          default: 'solid',\n          isDisabled: 'none'\n        },\n        backgroundColor: {\n          isDisabled: 'disabled'\n        }\n      }, getAllowedOverrides({height: true}))(renderProps, styles)}>\n      {({state}) =>\n        (<ColorHandle\n          containerRef={containerRef}\n          getPosition={() => state.getThumbPosition()} />)\n      }\n    </AriaColorArea>\n  );\n}\n\n/**\n * A ColorArea allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.\n */\nlet _ColorArea = forwardRef(ColorArea);\nexport {_ColorArea as ColorArea};\n"],"names":[],"version":3,"file":"ColorArea.cjs.map"}

package/dist/ColorArea.css

@@ -0,0 +1,96 @@
+.\.:not(#a#b) {
+  all: revert-layer;
+}
+
+@layer _.a {
+  .Uc {
+    position: relative;
+  }
+
+  .lN {
+    width: 12rem;
+  }
+
+  .kN {
+    height: 12rem;
+  }
+
+  .qz {
+    min-width: 4rem;
+  }
+
+  .oz {
+    min-height: 4rem;
+  }
+
+  ._vc {
+    border-start-start-radius: .5rem;
+  }
+
+  ._wc {
+    border-start-end-radius: .5rem;
+  }
+
+  ._xc {
+    border-end-start-radius: .5rem;
+  }
+
+  ._yc {
+    border-end-end-radius: .5rem;
+  }
+
+  .dp10 {
+    outline-color: var(--lightningcss-light, #0000001a) var(--lightningcss-dark, #ffffff1a);
+  }
+
+  ._Nb {
+    outline-width: 1px;
+  }
+
+  ._M-3hmpv {
+    outline-offset: -1px;
+  }
+
+  ._Lb {
+    outline-style: solid;
+  }
+
+  ._La {
+    outline-style: none;
+  }
+
+  .bg {
+    background-color: var(--lightningcss-light, #e9e9e9) var(--lightningcss-dark, #2c2c2c);
+  }
+}
+
+@layer _.b, UNSAFE_overrides;
+
+@layer _.b.b {
+  @media not ((hover: hover) and (pointer: fine)) {
+    .lbO {
+      width: 15rem;
+    }
+
+    .kbO {
+      height: 15rem;
+    }
+
+    .qbA {
+      min-width: 5rem;
+    }
+
+    .obA {
+      min-height: 5rem;
+    }
+  }
+}
+
+@layer _.b.a {
+  @media (forced-colors: active) {
+    .da_____v {
+      outline-color: buttonborder;
+    }
+  }
+}
+/*# sourceMappingURL=ColorArea.css.map */

package/dist/ColorArea.css.map

@@ -0,0 +1 @@
+{"mappings":"AAuCmD;;;;AAAA;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAAA;EAAA;IAAA","sources":["packages/@react-spectrum/s2/src/ColorArea.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  ColorArea as AriaColorArea,\n  ColorAreaProps as AriaColorAreaProps\n} from 'react-aria-components';\nimport {ColorHandle} from './ColorHandle';\nimport {DOMRef} from '@react-types/shared';\nimport {forwardRef} from 'react';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\nexport interface ColorAreaProps extends Omit<AriaColorAreaProps, 'children' | 'className' | 'style'>, StyleProps {}\n\nfunction ColorArea(props: ColorAreaProps, ref: DOMRef<HTMLDivElement>) {\n  let {UNSAFE_className = '', UNSAFE_style, styles} = props;\n  let containerRef = useDOMRef(ref);\n  return (\n    <AriaColorArea\n      {...props}\n      ref={containerRef}\n      style={({defaultStyle, isDisabled}) => ({\n        ...defaultStyle,\n        background: isDisabled ? undefined : defaultStyle.background,\n        // Move position: relative to style macro so it can be overridden.\n        position: undefined,\n        ...UNSAFE_style\n      })}\n      className={renderProps => UNSAFE_className + style({\n        position: 'relative',\n        size: 192,\n        minSize: 64,\n        borderRadius: 'default',\n        outlineColor: {\n          default: 'gray-1000/10',\n          forcedColors: 'ButtonBorder'\n        },\n        outlineWidth: 1,\n        outlineOffset: -1,\n        outlineStyle: {\n          default: 'solid',\n          isDisabled: 'none'\n        },\n        backgroundColor: {\n          isDisabled: 'disabled'\n        }\n      }, getAllowedOverrides({height: true}))(renderProps, styles)}>\n      {({state}) =>\n        (<ColorHandle\n          containerRef={containerRef}\n          getPosition={() => state.getThumbPosition()} />)\n      }\n    </AriaColorArea>\n  );\n}\n\n/**\n * A ColorArea allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.\n */\nlet _ColorArea = forwardRef(ColorArea);\nexport {_ColorArea as ColorArea};\n"],"names":[],"version":3,"file":"ColorArea.css.map"}