react-aria-components 1.10.0 → 1.11.0

package/dist/ColorField.module.js

@@ -1,5 +1,6 @@
 import {ColorFieldContext as $4e85f108e88277b8$export$44644b8a16031b5b} from "./RSPContexts.module.js";
 import {FieldErrorContext as $ee014567cb39d3f0$export$ff05c3ac10437e03} from "./FieldError.module.js";
+import {GroupContext as $a049562f99e7db0e$export$f9c6924e160136d1} from "./Group.module.js";
 import {InputContext as $3985021b0ad6602f$export$37fb8590cf2c088c} from "./Input.module.js";
 import {LabelContext as $01b77f81d0f07f68$export$75b6ee27786ba447} from "./Label.module.js";
 import {Provider as $64fa3d84918910a7$export$2881499e37b75b9a, removeDataAttributes as $64fa3d84918910a7$export$ef03459518577ad4, useContextProps as $64fa3d84918910a7$export$29f1550f4b0d4415, useRenderProps as $64fa3d84918910a7$export$4d86445c2cf5e3, useSlot as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8} from "./utils.module.js";
@@ -29,6 +30,7 @@ import $kjuGe$react, {createContext as $kjuGe$createContext, forwardRef as $kjuG
 
 
 
+
 const $3ada01a82feafb94$export$96b6d32b05a1a8ed = /*#__PURE__*/ (0, $kjuGe$createContext)(null);
 const $3ada01a82feafb94$export$b865d4358897bb17 = /*#__PURE__*/ (0, $kjuGe$forwardRef)(function ColorField(props, ref) {
     [props, ref] = (0, $64fa3d84918910a7$export$29f1550f4b0d4415)(props, ref, (0, $4e85f108e88277b8$export$44644b8a16031b5b));
@@ -59,6 +61,7 @@ function $3ada01a82feafb94$var$ColorChannelField(props) {
     return /*#__PURE__*/ (0, $kjuGe$react).createElement((0, $kjuGe$react).Fragment, null, $3ada01a82feafb94$var$useChildren(props, state, props.forwardedRef, inputProps, inputRef, labelProps, labelRef, descriptionProps, errorMessageProps, validation), props.name && /*#__PURE__*/ (0, $kjuGe$react).createElement("input", {
         type: "hidden",
         name: props.name,
+        form: props.form,
         value: isNaN(state.numberValue) ? '' : state.numberValue
     }));
 }
@@ -89,7 +92,9 @@ function $3ada01a82feafb94$var$useChildren(props, state, ref, inputProps, inputR
         },
         defaultClassName: 'react-aria-ColorField'
     });
-    let DOMProps = (0, $kjuGe$filterDOMProps)(props);
+    let DOMProps = (0, $kjuGe$filterDOMProps)(props, {
+        global: true
+    });
     delete DOMProps.id;
     return /*#__PURE__*/ (0, $kjuGe$react).createElement((0, $64fa3d84918910a7$export$2881499e37b75b9a), {
         values: [
@@ -111,6 +116,14 @@ function $3ada01a82feafb94$var$useChildren(props, state, ref, inputProps, inputR
                     ref: labelRef
                 }
             ],
+            [
+                (0, $a049562f99e7db0e$export$f9c6924e160136d1),
+                {
+                    role: 'presentation',
+                    isInvalid: validation.isInvalid,
+                    isDisabled: props.isDisabled || false
+                }
+            ],
             [
                 (0, $514c0188e459b4c0$export$9afb8bc826b033ea),
                 {

package/dist/ColorField.module.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/react-aria-components/src/ColorField.tsx"],"sourcesContent":["/*\n * Copyright 2022 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 {AriaColorFieldProps, useColorChannelField, useColorField, useLocale} from 'react-aria';\nimport {ColorChannel, ColorFieldState, ColorSpace, useColorChannelFieldState, useColorFieldState} from 'react-stately';\nimport {ColorFieldContext} from './RSPContexts';\nimport {FieldErrorContext} from './FieldError';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {InputContext} from './Input';\nimport {InputDOMProps, ValidationResult} from '@react-types/shared';\nimport {LabelContext} from './Label';\nimport {Provider, RACValidation, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';\nimport React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes, Ref, useRef} from 'react';\nimport {TextContext} from './Text';\n\nexport interface ColorFieldRenderProps {\n  /**\n   * Whether the color field is disabled.\n   * @selector [data-disabled]\n   */\n  isDisabled: boolean,\n  /**\n   * Whether the color field is invalid.\n   * @selector [data-invalid]\n   */\n  isInvalid: boolean,\n  /**\n   * The color channel that this field edits, or \"hex\" if no `channel` prop is set.\n   * @selector [data-channel=\"hex | hue | saturation | ...\"]\n   */\n  channel: ColorChannel | 'hex',\n  /**\n   * State of the color field.\n   */\n  state: ColorFieldState\n}\n\nexport interface ColorFieldProps extends Omit<AriaColorFieldProps, 'label' | 'placeholder' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, InputDOMProps, RenderProps<ColorFieldRenderProps>, SlotProps {\n  /**\n   * The color channel that this field edits. If not provided, \n   * the color is edited as a hex value.\n   */\n  channel?: ColorChannel,\n  /**\n   * The color space that the color field operates in if a `channel` prop is provided.\n   * If no `channel` is provided, the color field always displays the color as an RGB hex value.\n   */\n  colorSpace?: ColorSpace\n}\n\nexport const ColorFieldStateContext = createContext<ColorFieldState | null>(null);\n\n/**\n * A color field allows users to edit a hex color or individual color channel value.\n */\nexport const ColorField = forwardRef(function ColorField(props: ColorFieldProps, ref: ForwardedRef<HTMLDivElement>) {\n  [props, ref] = useContextProps(props, ref, ColorFieldContext);\n  if (props.channel) {\n    return <ColorChannelField {...props} channel={props.channel} forwardedRef={ref} />;\n  } else {\n    return <HexColorField {...props} forwardedRef={ref} />;\n  }\n});\n\ninterface ColorChannelFieldProps extends Omit<ColorFieldProps, 'channel'> {\n  channel: ColorChannel,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n}\n\nfunction ColorChannelField(props: ColorChannelFieldProps) {\n  let {locale} = useLocale();\n  let state = useColorChannelFieldState({\n    ...props,\n    locale\n  });\n\n  let inputRef = useRef<HTMLInputElement>(null);\n  let [labelRef, label] = useSlot(\n    !props['aria-label'] && !props['aria-labelledby']\n  );\n  let {\n    labelProps,\n    inputProps,\n    descriptionProps,\n    errorMessageProps,\n    ...validation\n  } = useColorChannelField({\n    ...removeDataAttributes(props),\n    label,\n    validationBehavior: props.validationBehavior ?? 'native'\n  }, state, inputRef);\n\n  return (\n    <>\n      {useChildren(\n        props,\n        state,\n        props.forwardedRef,\n        inputProps,\n        inputRef,\n        labelProps,\n        labelRef,\n        descriptionProps,\n        errorMessageProps,\n        validation\n      )}\n      {props.name && <input type=\"hidden\" name={props.name} value={isNaN(state.numberValue) ? '' : state.numberValue} />}\n    </>\n  );\n}\n\ninterface HexColorFieldProps extends ColorFieldProps {\n  forwardedRef: ForwardedRef<HTMLDivElement>\n}\n\nfunction HexColorField(props: HexColorFieldProps) {\n  let state = useColorFieldState({\n    ...props,\n    validationBehavior: props.validationBehavior ?? 'native'\n  });\n\n  let inputRef = useRef<HTMLInputElement>(null);\n  let [labelRef, label] = useSlot(\n    !props['aria-label'] && !props['aria-labelledby']\n  );\n  let {\n    labelProps,\n    inputProps,\n    descriptionProps,\n    errorMessageProps,\n    ...validation\n  } = useColorField({\n    ...removeDataAttributes(props),\n    label,\n    validationBehavior: props.validationBehavior ?? 'native'\n  }, state, inputRef);\n\n  return useChildren(\n    props,\n    state,\n    props.forwardedRef,\n    inputProps,\n    inputRef,\n    labelProps,\n    labelRef,\n    descriptionProps,\n    errorMessageProps,\n    validation\n  );\n}\n\nfunction useChildren(\n  props: ColorFieldProps,\n  state: ColorFieldState,\n  ref: ForwardedRef<HTMLDivElement>,\n  inputProps: InputHTMLAttributes<HTMLElement>,\n  inputRef: Ref<HTMLInputElement>,\n  labelProps: LabelHTMLAttributes<HTMLLabelElement>,\n  labelRef: Ref<HTMLLabelElement>,\n  descriptionProps: HTMLAttributes<HTMLElement>,\n  errorMessageProps: HTMLAttributes<HTMLElement>,\n  validation: ValidationResult\n) {\n  let renderProps = useRenderProps({\n    ...props,\n    values: {\n      state,\n      channel: props.channel || 'hex',\n      isDisabled: props.isDisabled || false,\n      isInvalid: validation.isInvalid || false\n    },\n    defaultClassName: 'react-aria-ColorField'\n  });\n\n  let DOMProps = filterDOMProps(props);\n  delete DOMProps.id;\n\n  return (\n    <Provider\n      values={[\n        [ColorFieldStateContext, state],\n        [InputContext, {...inputProps, ref: inputRef}],\n        [LabelContext, {...labelProps, ref: labelRef}],\n        [TextContext, {\n          slots: {\n            description: descriptionProps,\n            errorMessage: errorMessageProps\n          }\n        }],\n        [FieldErrorContext, validation]\n      ]}>\n      <div\n        {...DOMProps}\n        {...renderProps}\n        ref={ref}\n        slot={props.slot || undefined}\n        data-channel={props.channel || 'hex'}\n        data-disabled={props.isDisabled || undefined}\n        data-invalid={validation.isInvalid || undefined} />\n    </Provider>\n  );\n}\n"],"names":[],"version":3,"file":"ColorField.module.js.map"}
+{"mappings":"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","sources":["packages/react-aria-components/src/ColorField.tsx"],"sourcesContent":["/*\n * Copyright 2022 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 {AriaColorFieldProps, useColorChannelField, useColorField, useLocale} from 'react-aria';\nimport {ColorChannel, ColorFieldState, ColorSpace, useColorChannelFieldState, useColorFieldState} from 'react-stately';\nimport {ColorFieldContext} from './RSPContexts';\nimport {FieldErrorContext} from './FieldError';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {GlobalDOMAttributes, InputDOMProps, ValidationResult} from '@react-types/shared';\nimport {GroupContext} from './Group';\nimport {InputContext} from './Input';\nimport {LabelContext} from './Label';\nimport {Provider, RACValidation, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';\nimport React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes, Ref, useRef} from 'react';\nimport {TextContext} from './Text';\n\nexport interface ColorFieldRenderProps {\n  /**\n   * Whether the color field is disabled.\n   * @selector [data-disabled]\n   */\n  isDisabled: boolean,\n  /**\n   * Whether the color field is invalid.\n   * @selector [data-invalid]\n   */\n  isInvalid: boolean,\n  /**\n   * The color channel that this field edits, or \"hex\" if no `channel` prop is set.\n   * @selector [data-channel=\"hex | hue | saturation | ...\"]\n   */\n  channel: ColorChannel | 'hex',\n  /**\n   * State of the color field.\n   */\n  state: ColorFieldState\n}\n\nexport interface ColorFieldProps extends Omit<AriaColorFieldProps, 'label' | 'placeholder' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, InputDOMProps, RenderProps<ColorFieldRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {\n  /**\n   * The color channel that this field edits. If not provided, \n   * the color is edited as a hex value.\n   */\n  channel?: ColorChannel,\n  /**\n   * The color space that the color field operates in if a `channel` prop is provided.\n   * If no `channel` is provided, the color field always displays the color as an RGB hex value.\n   */\n  colorSpace?: ColorSpace\n}\n\nexport const ColorFieldStateContext = createContext<ColorFieldState | null>(null);\n\n/**\n * A color field allows users to edit a hex color or individual color channel value.\n */\nexport const ColorField = forwardRef(function ColorField(props: ColorFieldProps, ref: ForwardedRef<HTMLDivElement>) {\n  [props, ref] = useContextProps(props, ref, ColorFieldContext);\n  if (props.channel) {\n    return <ColorChannelField {...props} channel={props.channel} forwardedRef={ref} />;\n  } else {\n    return <HexColorField {...props} forwardedRef={ref} />;\n  }\n});\n\ninterface ColorChannelFieldProps extends Omit<ColorFieldProps, 'channel'> {\n  channel: ColorChannel,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n}\n\nfunction ColorChannelField(props: ColorChannelFieldProps) {\n  let {locale} = useLocale();\n  let state = useColorChannelFieldState({\n    ...props,\n    locale\n  });\n\n  let inputRef = useRef<HTMLInputElement>(null);\n  let [labelRef, label] = useSlot(\n    !props['aria-label'] && !props['aria-labelledby']\n  );\n  let {\n    labelProps,\n    inputProps,\n    descriptionProps,\n    errorMessageProps,\n    ...validation\n  } = useColorChannelField({\n    ...removeDataAttributes(props),\n    label,\n    validationBehavior: props.validationBehavior ?? 'native'\n  }, state, inputRef);\n\n  return (\n    <>\n      {useChildren(\n        props,\n        state,\n        props.forwardedRef,\n        inputProps,\n        inputRef,\n        labelProps,\n        labelRef,\n        descriptionProps,\n        errorMessageProps,\n        validation\n      )}\n      {props.name && <input type=\"hidden\" name={props.name} form={props.form} value={isNaN(state.numberValue) ? '' : state.numberValue} />}\n    </>\n  );\n}\n\ninterface HexColorFieldProps extends ColorFieldProps {\n  forwardedRef: ForwardedRef<HTMLDivElement>\n}\n\nfunction HexColorField(props: HexColorFieldProps) {\n  let state = useColorFieldState({\n    ...props,\n    validationBehavior: props.validationBehavior ?? 'native'\n  });\n\n  let inputRef = useRef<HTMLInputElement>(null);\n  let [labelRef, label] = useSlot(\n    !props['aria-label'] && !props['aria-labelledby']\n  );\n  let {\n    labelProps,\n    inputProps,\n    descriptionProps,\n    errorMessageProps,\n    ...validation\n  } = useColorField({\n    ...removeDataAttributes(props),\n    label,\n    validationBehavior: props.validationBehavior ?? 'native'\n  }, state, inputRef);\n\n  return useChildren(\n    props,\n    state,\n    props.forwardedRef,\n    inputProps,\n    inputRef,\n    labelProps,\n    labelRef,\n    descriptionProps,\n    errorMessageProps,\n    validation\n  );\n}\n\nfunction useChildren(\n  props: ColorFieldProps,\n  state: ColorFieldState,\n  ref: ForwardedRef<HTMLDivElement>,\n  inputProps: InputHTMLAttributes<HTMLElement>,\n  inputRef: Ref<HTMLInputElement>,\n  labelProps: LabelHTMLAttributes<HTMLLabelElement>,\n  labelRef: Ref<HTMLLabelElement>,\n  descriptionProps: HTMLAttributes<HTMLElement>,\n  errorMessageProps: HTMLAttributes<HTMLElement>,\n  validation: ValidationResult\n) {\n  let renderProps = useRenderProps({\n    ...props,\n    values: {\n      state,\n      channel: props.channel || 'hex',\n      isDisabled: props.isDisabled || false,\n      isInvalid: validation.isInvalid || false\n    },\n    defaultClassName: 'react-aria-ColorField'\n  });\n\n  let DOMProps = filterDOMProps(props, {global: true});\n  delete DOMProps.id;\n\n  return (\n    <Provider\n      values={[\n        [ColorFieldStateContext, state],\n        [InputContext, {...inputProps, ref: inputRef}],\n        [LabelContext, {...labelProps, ref: labelRef}],\n        [GroupContext, {role: 'presentation', isInvalid: validation.isInvalid, isDisabled: props.isDisabled || false}],\n        [TextContext, {\n          slots: {\n            description: descriptionProps,\n            errorMessage: errorMessageProps\n          }\n        }],\n        [FieldErrorContext, validation]\n      ]}>\n      <div\n        {...DOMProps}\n        {...renderProps}\n        ref={ref}\n        slot={props.slot || undefined}\n        data-channel={props.channel || 'hex'}\n        data-disabled={props.isDisabled || undefined}\n        data-invalid={validation.isInvalid || undefined} />\n    </Provider>\n  );\n}\n"],"names":[],"version":3,"file":"ColorField.module.js.map"}

package/dist/ColorSlider.main.js

@@ -54,7 +54,9 @@ const $037f8448dff48149$export$44fd664bcca5b6fb = /*#__PURE__*/ (0, $cPSMR$react
         },
         defaultClassName: 'react-aria-ColorSlider'
     });
-    let DOMProps = (0, $cPSMR$reactariautils.filterDOMProps)(props);
+    let DOMProps = (0, $cPSMR$reactariautils.filterDOMProps)(props, {
+        global: true
+    });
     delete DOMProps.id;
     return /*#__PURE__*/ (0, ($parcel$interopDefault($cPSMR$react))).createElement((0, $c5ccf687772c0422$exports.Provider), {
         values: [

package/dist/ColorSlider.main.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BO,MAAM,0DAA0B,CAAA,GAAA,0BAAY,EAA2B;AAKvE,MAAM,0DAAc,CAAA,GAAA,uBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAAiC;IACnH,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAc,EAAE,OAAO,KAAK,CAAA,GAAA,4CAAiB;IAC5D,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,0BAAQ;IACvB,IAAI,QAAQ,CAAA,GAAA,uCAAkB,EAAE;QAAC,GAAG,KAAK;gBAAE;IAAM;IACjD,IAAI,WAAW,CAAA,GAAA,sCAAI,EAAE,MAAM,CAAC;IAC5B,IAAI,WAAW,CAAA,GAAA,sCAAI,EAAE,MAAM,CAAC;IAE5B,IAAI,CAAC,UAAU,MAAM,GAAG,CAAA,GAAA,iCAAM,EAC5B,CAAC,KAAK,CAAC,aAAa,IAAI,CAAC,KAAK,CAAC,kBAAkB;IAEnD,IAAI,cACF,UAAU,cACV,UAAU,cACV,UAAU,cACV,UAAU,eACV,WAAW,EACZ,GAAG,CAAA,GAAA,+BAAa,EAAE;QACjB,GAAG,KAAK;eACR;kBACA;kBACA;IACF,GAAG;IAEH,IAAI,cAAc,CAAA,GAAA,wCAAa,EAAE;QAC/B,GAAG,KAAK;QACR,QAAQ;YACN,aAAa,MAAM,WAAW;YAC9B,YAAY,MAAM,UAAU;mBAC5B;QACF;QACA,kBAAkB;IACpB;IAEA,IAAI,WAAW,CAAA,GAAA,oCAAa,EAAE;IAC9B,OAAO,SAAS,EAAE;IAElB,qBACE,0DAAC,CAAA,GAAA,kCAAO;QACN,QAAQ;YACN;gBAAC;gBAAyB;aAAM;YAChC;gBAAC,CAAA,GAAA,4CAAiB;gBAAG;aAAM;YAC3B;gBAAC,CAAA,GAAA,4CAAiB;gBAAG;oBAAC,GAAG,UAAU;oBAAE,KAAK;gBAAQ;aAAE;YACpD;gBAAC,CAAA,GAAA,6CAAkB;gBAAG;aAAY;YAClC;gBAAC,CAAA,GAAA,sCAAW;gBAAG;oBACb,GAAG,UAAU;oBACb,KAAK;oBACL,UAAU,MAAM,KAAK,CAAC,cAAc,CAAC,MAAM,OAAO,EAAE;gBACtD;aAAE;YACF;gBAAC,CAAA,GAAA,mDAAwB;gBAAG;2BAAC;gCAAO;oBAAY,WAAW;oBAAU,aAAa;oBAAY,YAAY,MAAM,UAAU;gBAAA;aAAE;SAC7H;qBACD,0DAAC;QACE,GAAG,QAAQ;QACX,GAAG,WAAW;QACf,KAAK;QACL,MAAM,MAAM,IAAI,IAAI;QACpB,oBAAkB,MAAM,WAAW;QACnC,iBAAe,MAAM,UAAU,IAAI;;AAG3C","sources":["packages/react-aria-components/src/ColorSlider.tsx"],"sourcesContent":["import {AriaColorSliderProps, Orientation, useColorSlider, useLocale} from 'react-aria';\nimport {ColorSliderContext} from './RSPContexts';\nimport {ColorSliderState, useColorSliderState} from 'react-stately';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {InternalColorThumbContext} from './ColorThumb';\nimport {LabelContext} from './Label';\nimport {Provider, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';\nimport React, {createContext, ForwardedRef, forwardRef} from 'react';\nimport {SliderOutputContext, SliderStateContext, SliderTrackContext} from './Slider';\n\nexport interface ColorSliderRenderProps {\n  /**\n   * The orientation of the color slider.\n   * @selector [data-orientation=\"horizontal | vertical\"]\n   */\n  orientation: Orientation,\n  /**\n   * Whether the color slider is disabled.\n   * @selector [data-disabled]\n   */\n  isDisabled: boolean,\n  /**\n   * State of the color slider.\n   */\n  state: ColorSliderState\n}\n\nexport interface ColorSliderProps extends Omit<AriaColorSliderProps, 'label'>, RenderProps<ColorSliderRenderProps>, SlotProps {}\n\nexport const ColorSliderStateContext = createContext<ColorSliderState | null>(null);\n\n/**\n * A color slider allows users to adjust an individual channel of a color value.\n */\nexport const ColorSlider = forwardRef(function ColorSlider(props: ColorSliderProps, ref: ForwardedRef<HTMLDivElement>) {\n  [props, ref] = useContextProps(props, ref, ColorSliderContext);\n  let {locale} = useLocale();\n  let state = useColorSliderState({...props, locale});\n  let trackRef = React.useRef(null);\n  let inputRef = React.useRef(null);\n\n  let [labelRef, label] = useSlot(\n    !props['aria-label'] && !props['aria-labelledby']\n  );\n  let {\n    trackProps,\n    thumbProps,\n    inputProps,\n    labelProps,\n    outputProps\n  } = useColorSlider({\n    ...props,\n    label,\n    trackRef,\n    inputRef\n  }, state);\n\n  let renderProps = useRenderProps({\n    ...props,\n    values: {\n      orientation: state.orientation,\n      isDisabled: state.isDisabled,\n      state\n    },\n    defaultClassName: 'react-aria-ColorSlider'\n  });\n\n  let DOMProps = filterDOMProps(props);\n  delete DOMProps.id;\n\n  return (\n    <Provider\n      values={[\n        [ColorSliderStateContext, state],\n        [SliderStateContext, state],\n        [SliderTrackContext, {...trackProps, ref: trackRef}],\n        [SliderOutputContext, outputProps],\n        [LabelContext, {\n          ...labelProps,\n          ref: labelRef,\n          children: state.value.getChannelName(props.channel, locale)\n        }],\n        [InternalColorThumbContext, {state, thumbProps, inputXRef: inputRef, xInputProps: inputProps, isDisabled: props.isDisabled}]\n      ]}>\n      <div\n        {...DOMProps}\n        {...renderProps}\n        ref={ref}\n        slot={props.slot || undefined}\n        data-orientation={state.orientation}\n        data-disabled={state.isDisabled || undefined} />\n    </Provider>\n  );\n});\n"],"names":[],"version":3,"file":"ColorSlider.main.js.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BO,MAAM,0DAA0B,CAAA,GAAA,0BAAY,EAA2B;AAKvE,MAAM,0DAAc,CAAA,GAAA,uBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAAiC;IACnH,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAc,EAAE,OAAO,KAAK,CAAA,GAAA,4CAAiB;IAC5D,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,0BAAQ;IACvB,IAAI,QAAQ,CAAA,GAAA,uCAAkB,EAAE;QAAC,GAAG,KAAK;gBAAE;IAAM;IACjD,IAAI,WAAW,CAAA,GAAA,sCAAI,EAAE,MAAM,CAAC;IAC5B,IAAI,WAAW,CAAA,GAAA,sCAAI,EAAE,MAAM,CAAC;IAE5B,IAAI,CAAC,UAAU,MAAM,GAAG,CAAA,GAAA,iCAAM,EAC5B,CAAC,KAAK,CAAC,aAAa,IAAI,CAAC,KAAK,CAAC,kBAAkB;IAEnD,IAAI,cACF,UAAU,cACV,UAAU,cACV,UAAU,cACV,UAAU,eACV,WAAW,EACZ,GAAG,CAAA,GAAA,+BAAa,EAAE;QACjB,GAAG,KAAK;eACR;kBACA;kBACA;IACF,GAAG;IAEH,IAAI,cAAc,CAAA,GAAA,wCAAa,EAAE;QAC/B,GAAG,KAAK;QACR,QAAQ;YACN,aAAa,MAAM,WAAW;YAC9B,YAAY,MAAM,UAAU;mBAC5B;QACF;QACA,kBAAkB;IACpB;IAEA,IAAI,WAAW,CAAA,GAAA,oCAAa,EAAE,OAAO;QAAC,QAAQ;IAAI;IAClD,OAAO,SAAS,EAAE;IAElB,qBACE,0DAAC,CAAA,GAAA,kCAAO;QACN,QAAQ;YACN;gBAAC;gBAAyB;aAAM;YAChC;gBAAC,CAAA,GAAA,4CAAiB;gBAAG;aAAM;YAC3B;gBAAC,CAAA,GAAA,4CAAiB;gBAAG;oBAAC,GAAG,UAAU;oBAAE,KAAK;gBAAQ;aAAE;YACpD;gBAAC,CAAA,GAAA,6CAAkB;gBAAG;aAAY;YAClC;gBAAC,CAAA,GAAA,sCAAW;gBAAG;oBACb,GAAG,UAAU;oBACb,KAAK;oBACL,UAAU,MAAM,KAAK,CAAC,cAAc,CAAC,MAAM,OAAO,EAAE;gBACtD;aAAE;YACF;gBAAC,CAAA,GAAA,mDAAwB;gBAAG;2BAAC;gCAAO;oBAAY,WAAW;oBAAU,aAAa;oBAAY,YAAY,MAAM,UAAU;gBAAA;aAAE;SAC7H;qBACD,0DAAC;QACE,GAAG,QAAQ;QACX,GAAG,WAAW;QACf,KAAK;QACL,MAAM,MAAM,IAAI,IAAI;QACpB,oBAAkB,MAAM,WAAW;QACnC,iBAAe,MAAM,UAAU,IAAI;;AAG3C","sources":["packages/react-aria-components/src/ColorSlider.tsx"],"sourcesContent":["import {AriaColorSliderProps, Orientation, useColorSlider, useLocale} from 'react-aria';\nimport {ColorSliderContext} from './RSPContexts';\nimport {ColorSliderState, useColorSliderState} from 'react-stately';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {GlobalDOMAttributes} from '@react-types/shared';\nimport {InternalColorThumbContext} from './ColorThumb';\nimport {LabelContext} from './Label';\nimport {Provider, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';\nimport React, {createContext, ForwardedRef, forwardRef} from 'react';\nimport {SliderOutputContext, SliderStateContext, SliderTrackContext} from './Slider';\n\nexport interface ColorSliderRenderProps {\n  /**\n   * The orientation of the color slider.\n   * @selector [data-orientation=\"horizontal | vertical\"]\n   */\n  orientation: Orientation,\n  /**\n   * Whether the color slider is disabled.\n   * @selector [data-disabled]\n   */\n  isDisabled: boolean,\n  /**\n   * State of the color slider.\n   */\n  state: ColorSliderState\n}\n\nexport interface ColorSliderProps extends Omit<AriaColorSliderProps, 'label'>, RenderProps<ColorSliderRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {}\n\nexport const ColorSliderStateContext = createContext<ColorSliderState | null>(null);\n\n/**\n * A color slider allows users to adjust an individual channel of a color value.\n */\nexport const ColorSlider = forwardRef(function ColorSlider(props: ColorSliderProps, ref: ForwardedRef<HTMLDivElement>) {\n  [props, ref] = useContextProps(props, ref, ColorSliderContext);\n  let {locale} = useLocale();\n  let state = useColorSliderState({...props, locale});\n  let trackRef = React.useRef(null);\n  let inputRef = React.useRef(null);\n\n  let [labelRef, label] = useSlot(\n    !props['aria-label'] && !props['aria-labelledby']\n  );\n  let {\n    trackProps,\n    thumbProps,\n    inputProps,\n    labelProps,\n    outputProps\n  } = useColorSlider({\n    ...props,\n    label,\n    trackRef,\n    inputRef\n  }, state);\n\n  let renderProps = useRenderProps({\n    ...props,\n    values: {\n      orientation: state.orientation,\n      isDisabled: state.isDisabled,\n      state\n    },\n    defaultClassName: 'react-aria-ColorSlider'\n  });\n\n  let DOMProps = filterDOMProps(props, {global: true});\n  delete DOMProps.id;\n\n  return (\n    <Provider\n      values={[\n        [ColorSliderStateContext, state],\n        [SliderStateContext, state],\n        [SliderTrackContext, {...trackProps, ref: trackRef}],\n        [SliderOutputContext, outputProps],\n        [LabelContext, {\n          ...labelProps,\n          ref: labelRef,\n          children: state.value.getChannelName(props.channel, locale)\n        }],\n        [InternalColorThumbContext, {state, thumbProps, inputXRef: inputRef, xInputProps: inputProps, isDisabled: props.isDisabled}]\n      ]}>\n      <div\n        {...DOMProps}\n        {...renderProps}\n        ref={ref}\n        slot={props.slot || undefined}\n        data-orientation={state.orientation}\n        data-disabled={state.isDisabled || undefined} />\n    </Provider>\n  );\n});\n"],"names":[],"version":3,"file":"ColorSlider.main.js.map"}

package/dist/ColorSlider.mjs

@@ -43,7 +43,9 @@ const $1cca5300a3c2e7f9$export$44fd664bcca5b6fb = /*#__PURE__*/ (0, $bYfIo$forwa
         },
         defaultClassName: 'react-aria-ColorSlider'
     });
-    let DOMProps = (0, $bYfIo$filterDOMProps)(props);
+    let DOMProps = (0, $bYfIo$filterDOMProps)(props, {
+        global: true
+    });
     delete DOMProps.id;
     return /*#__PURE__*/ (0, $bYfIo$react).createElement((0, $64fa3d84918910a7$export$2881499e37b75b9a), {
         values: [

package/dist/ColorSlider.module.js

@@ -43,7 +43,9 @@ const $1cca5300a3c2e7f9$export$44fd664bcca5b6fb = /*#__PURE__*/ (0, $bYfIo$forwa
         },
         defaultClassName: 'react-aria-ColorSlider'
     });
-    let DOMProps = (0, $bYfIo$filterDOMProps)(props);
+    let DOMProps = (0, $bYfIo$filterDOMProps)(props, {
+        global: true
+    });
     delete DOMProps.id;
     return /*#__PURE__*/ (0, $bYfIo$react).createElement((0, $64fa3d84918910a7$export$2881499e37b75b9a), {
         values: [

package/dist/ColorSlider.module.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;AA6BO,MAAM,0DAA0B,CAAA,GAAA,oBAAY,EAA2B;AAKvE,MAAM,0DAAc,CAAA,GAAA,iBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAAiC;IACnH,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAc,EAAE,OAAO,KAAK,CAAA,GAAA,yCAAiB;IAC5D,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,gBAAQ;IACvB,IAAI,QAAQ,CAAA,GAAA,0BAAkB,EAAE;QAAC,GAAG,KAAK;gBAAE;IAAM;IACjD,IAAI,WAAW,CAAA,GAAA,YAAI,EAAE,MAAM,CAAC;IAC5B,IAAI,WAAW,CAAA,GAAA,YAAI,EAAE,MAAM,CAAC;IAE5B,IAAI,CAAC,UAAU,MAAM,GAAG,CAAA,GAAA,yCAAM,EAC5B,CAAC,KAAK,CAAC,aAAa,IAAI,CAAC,KAAK,CAAC,kBAAkB;IAEnD,IAAI,cACF,UAAU,cACV,UAAU,cACV,UAAU,cACV,UAAU,eACV,WAAW,EACZ,GAAG,CAAA,GAAA,qBAAa,EAAE;QACjB,GAAG,KAAK;eACR;kBACA;kBACA;IACF,GAAG;IAEH,IAAI,cAAc,CAAA,GAAA,uCAAa,EAAE;QAC/B,GAAG,KAAK;QACR,QAAQ;YACN,aAAa,MAAM,WAAW;YAC9B,YAAY,MAAM,UAAU;mBAC5B;QACF;QACA,kBAAkB;IACpB;IAEA,IAAI,WAAW,CAAA,GAAA,qBAAa,EAAE;IAC9B,OAAO,SAAS,EAAE;IAElB,qBACE,gCAAC,CAAA,GAAA,yCAAO;QACN,QAAQ;YACN;gBAAC;gBAAyB;aAAM;YAChC;gBAAC,CAAA,GAAA,yCAAiB;gBAAG;aAAM;YAC3B;gBAAC,CAAA,GAAA,yCAAiB;gBAAG;oBAAC,GAAG,UAAU;oBAAE,KAAK;gBAAQ;aAAE;YACpD;gBAAC,CAAA,GAAA,yCAAkB;gBAAG;aAAY;YAClC;gBAAC,CAAA,GAAA,yCAAW;gBAAG;oBACb,GAAG,UAAU;oBACb,KAAK;oBACL,UAAU,MAAM,KAAK,CAAC,cAAc,CAAC,MAAM,OAAO,EAAE;gBACtD;aAAE;YACF;gBAAC,CAAA,GAAA,yCAAwB;gBAAG;2BAAC;gCAAO;oBAAY,WAAW;oBAAU,aAAa;oBAAY,YAAY,MAAM,UAAU;gBAAA;aAAE;SAC7H;qBACD,gCAAC;QACE,GAAG,QAAQ;QACX,GAAG,WAAW;QACf,KAAK;QACL,MAAM,MAAM,IAAI,IAAI;QACpB,oBAAkB,MAAM,WAAW;QACnC,iBAAe,MAAM,UAAU,IAAI;;AAG3C","sources":["packages/react-aria-components/src/ColorSlider.tsx"],"sourcesContent":["import {AriaColorSliderProps, Orientation, useColorSlider, useLocale} from 'react-aria';\nimport {ColorSliderContext} from './RSPContexts';\nimport {ColorSliderState, useColorSliderState} from 'react-stately';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {InternalColorThumbContext} from './ColorThumb';\nimport {LabelContext} from './Label';\nimport {Provider, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';\nimport React, {createContext, ForwardedRef, forwardRef} from 'react';\nimport {SliderOutputContext, SliderStateContext, SliderTrackContext} from './Slider';\n\nexport interface ColorSliderRenderProps {\n  /**\n   * The orientation of the color slider.\n   * @selector [data-orientation=\"horizontal | vertical\"]\n   */\n  orientation: Orientation,\n  /**\n   * Whether the color slider is disabled.\n   * @selector [data-disabled]\n   */\n  isDisabled: boolean,\n  /**\n   * State of the color slider.\n   */\n  state: ColorSliderState\n}\n\nexport interface ColorSliderProps extends Omit<AriaColorSliderProps, 'label'>, RenderProps<ColorSliderRenderProps>, SlotProps {}\n\nexport const ColorSliderStateContext = createContext<ColorSliderState | null>(null);\n\n/**\n * A color slider allows users to adjust an individual channel of a color value.\n */\nexport const ColorSlider = forwardRef(function ColorSlider(props: ColorSliderProps, ref: ForwardedRef<HTMLDivElement>) {\n  [props, ref] = useContextProps(props, ref, ColorSliderContext);\n  let {locale} = useLocale();\n  let state = useColorSliderState({...props, locale});\n  let trackRef = React.useRef(null);\n  let inputRef = React.useRef(null);\n\n  let [labelRef, label] = useSlot(\n    !props['aria-label'] && !props['aria-labelledby']\n  );\n  let {\n    trackProps,\n    thumbProps,\n    inputProps,\n    labelProps,\n    outputProps\n  } = useColorSlider({\n    ...props,\n    label,\n    trackRef,\n    inputRef\n  }, state);\n\n  let renderProps = useRenderProps({\n    ...props,\n    values: {\n      orientation: state.orientation,\n      isDisabled: state.isDisabled,\n      state\n    },\n    defaultClassName: 'react-aria-ColorSlider'\n  });\n\n  let DOMProps = filterDOMProps(props);\n  delete DOMProps.id;\n\n  return (\n    <Provider\n      values={[\n        [ColorSliderStateContext, state],\n        [SliderStateContext, state],\n        [SliderTrackContext, {...trackProps, ref: trackRef}],\n        [SliderOutputContext, outputProps],\n        [LabelContext, {\n          ...labelProps,\n          ref: labelRef,\n          children: state.value.getChannelName(props.channel, locale)\n        }],\n        [InternalColorThumbContext, {state, thumbProps, inputXRef: inputRef, xInputProps: inputProps, isDisabled: props.isDisabled}]\n      ]}>\n      <div\n        {...DOMProps}\n        {...renderProps}\n        ref={ref}\n        slot={props.slot || undefined}\n        data-orientation={state.orientation}\n        data-disabled={state.isDisabled || undefined} />\n    </Provider>\n  );\n});\n"],"names":[],"version":3,"file":"ColorSlider.module.js.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;AA8BO,MAAM,0DAA0B,CAAA,GAAA,oBAAY,EAA2B;AAKvE,MAAM,0DAAc,CAAA,GAAA,iBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAAiC;IACnH,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAc,EAAE,OAAO,KAAK,CAAA,GAAA,yCAAiB;IAC5D,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,gBAAQ;IACvB,IAAI,QAAQ,CAAA,GAAA,0BAAkB,EAAE;QAAC,GAAG,KAAK;gBAAE;IAAM;IACjD,IAAI,WAAW,CAAA,GAAA,YAAI,EAAE,MAAM,CAAC;IAC5B,IAAI,WAAW,CAAA,GAAA,YAAI,EAAE,MAAM,CAAC;IAE5B,IAAI,CAAC,UAAU,MAAM,GAAG,CAAA,GAAA,yCAAM,EAC5B,CAAC,KAAK,CAAC,aAAa,IAAI,CAAC,KAAK,CAAC,kBAAkB;IAEnD,IAAI,cACF,UAAU,cACV,UAAU,cACV,UAAU,cACV,UAAU,eACV,WAAW,EACZ,GAAG,CAAA,GAAA,qBAAa,EAAE;QACjB,GAAG,KAAK;eACR;kBACA;kBACA;IACF,GAAG;IAEH,IAAI,cAAc,CAAA,GAAA,uCAAa,EAAE;QAC/B,GAAG,KAAK;QACR,QAAQ;YACN,aAAa,MAAM,WAAW;YAC9B,YAAY,MAAM,UAAU;mBAC5B;QACF;QACA,kBAAkB;IACpB;IAEA,IAAI,WAAW,CAAA,GAAA,qBAAa,EAAE,OAAO;QAAC,QAAQ;IAAI;IAClD,OAAO,SAAS,EAAE;IAElB,qBACE,gCAAC,CAAA,GAAA,yCAAO;QACN,QAAQ;YACN;gBAAC;gBAAyB;aAAM;YAChC;gBAAC,CAAA,GAAA,yCAAiB;gBAAG;aAAM;YAC3B;gBAAC,CAAA,GAAA,yCAAiB;gBAAG;oBAAC,GAAG,UAAU;oBAAE,KAAK;gBAAQ;aAAE;YACpD;gBAAC,CAAA,GAAA,yCAAkB;gBAAG;aAAY;YAClC;gBAAC,CAAA,GAAA,yCAAW;gBAAG;oBACb,GAAG,UAAU;oBACb,KAAK;oBACL,UAAU,MAAM,KAAK,CAAC,cAAc,CAAC,MAAM,OAAO,EAAE;gBACtD;aAAE;YACF;gBAAC,CAAA,GAAA,yCAAwB;gBAAG;2BAAC;gCAAO;oBAAY,WAAW;oBAAU,aAAa;oBAAY,YAAY,MAAM,UAAU;gBAAA;aAAE;SAC7H;qBACD,gCAAC;QACE,GAAG,QAAQ;QACX,GAAG,WAAW;QACf,KAAK;QACL,MAAM,MAAM,IAAI,IAAI;QACpB,oBAAkB,MAAM,WAAW;QACnC,iBAAe,MAAM,UAAU,IAAI;;AAG3C","sources":["packages/react-aria-components/src/ColorSlider.tsx"],"sourcesContent":["import {AriaColorSliderProps, Orientation, useColorSlider, useLocale} from 'react-aria';\nimport {ColorSliderContext} from './RSPContexts';\nimport {ColorSliderState, useColorSliderState} from 'react-stately';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {GlobalDOMAttributes} from '@react-types/shared';\nimport {InternalColorThumbContext} from './ColorThumb';\nimport {LabelContext} from './Label';\nimport {Provider, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';\nimport React, {createContext, ForwardedRef, forwardRef} from 'react';\nimport {SliderOutputContext, SliderStateContext, SliderTrackContext} from './Slider';\n\nexport interface ColorSliderRenderProps {\n  /**\n   * The orientation of the color slider.\n   * @selector [data-orientation=\"horizontal | vertical\"]\n   */\n  orientation: Orientation,\n  /**\n   * Whether the color slider is disabled.\n   * @selector [data-disabled]\n   */\n  isDisabled: boolean,\n  /**\n   * State of the color slider.\n   */\n  state: ColorSliderState\n}\n\nexport interface ColorSliderProps extends Omit<AriaColorSliderProps, 'label'>, RenderProps<ColorSliderRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {}\n\nexport const ColorSliderStateContext = createContext<ColorSliderState | null>(null);\n\n/**\n * A color slider allows users to adjust an individual channel of a color value.\n */\nexport const ColorSlider = forwardRef(function ColorSlider(props: ColorSliderProps, ref: ForwardedRef<HTMLDivElement>) {\n  [props, ref] = useContextProps(props, ref, ColorSliderContext);\n  let {locale} = useLocale();\n  let state = useColorSliderState({...props, locale});\n  let trackRef = React.useRef(null);\n  let inputRef = React.useRef(null);\n\n  let [labelRef, label] = useSlot(\n    !props['aria-label'] && !props['aria-labelledby']\n  );\n  let {\n    trackProps,\n    thumbProps,\n    inputProps,\n    labelProps,\n    outputProps\n  } = useColorSlider({\n    ...props,\n    label,\n    trackRef,\n    inputRef\n  }, state);\n\n  let renderProps = useRenderProps({\n    ...props,\n    values: {\n      orientation: state.orientation,\n      isDisabled: state.isDisabled,\n      state\n    },\n    defaultClassName: 'react-aria-ColorSlider'\n  });\n\n  let DOMProps = filterDOMProps(props, {global: true});\n  delete DOMProps.id;\n\n  return (\n    <Provider\n      values={[\n        [ColorSliderStateContext, state],\n        [SliderStateContext, state],\n        [SliderTrackContext, {...trackProps, ref: trackRef}],\n        [SliderOutputContext, outputProps],\n        [LabelContext, {\n          ...labelProps,\n          ref: labelRef,\n          children: state.value.getChannelName(props.channel, locale)\n        }],\n        [InternalColorThumbContext, {state, thumbProps, inputXRef: inputRef, xInputProps: inputProps, isDisabled: props.isDisabled}]\n      ]}>\n      <div\n        {...DOMProps}\n        {...renderProps}\n        ref={ref}\n        slot={props.slot || undefined}\n        data-orientation={state.orientation}\n        data-disabled={state.isDisabled || undefined} />\n    </Provider>\n  );\n});\n"],"names":[],"version":3,"file":"ColorSlider.module.js.map"}

package/dist/ColorSwatch.main.js

@@ -1,5 +1,6 @@
 var $c5ccf687772c0422$exports = require("./utils.main.js");
 var $8RzkX$reactaria = require("react-aria");
+var $8RzkX$reactariautils = require("@react-aria/utils");
 var $8RzkX$react = require("react");
 
 
@@ -16,6 +17,7 @@ $parcel$export(module.exports, "ColorSwatch", () => $804cfb3beb27b520$export$cae
 
 
 
+
 const $804cfb3beb27b520$export$83cc445538396800 = /*#__PURE__*/ (0, $8RzkX$react.createContext)(null);
 const $804cfb3beb27b520$export$cae13e90592f246a = /*#__PURE__*/ (0, $8RzkX$react.forwardRef)(function ColorSwatch(props, ref) {
     [props, ref] = (0, $c5ccf687772c0422$exports.useContextProps)(props, ref, $804cfb3beb27b520$export$83cc445538396800);
@@ -28,9 +30,11 @@ const $804cfb3beb27b520$export$cae13e90592f246a = /*#__PURE__*/ (0, $8RzkX$react
             color: color
         }
     });
+    let DOMProps = (0, $8RzkX$reactariautils.filterDOMProps)(props, {
+        global: true
+    });
     return /*#__PURE__*/ (0, ($parcel$interopDefault($8RzkX$react))).createElement("div", {
-        ...colorSwatchProps,
-        ...renderProps,
+        ...(0, $8RzkX$reactariautils.mergeProps)(DOMProps, colorSwatchProps, renderProps),
         slot: props.slot || undefined,
         ref: ref
     });

package/dist/ColorSwatch.main.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;AAYO,MAAM,0DAAqB,CAAA,GAAA,0BAAY,EAAkD;AAKzF,MAAM,0DAAc,CAAA,GAAA,uBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAAiC;IACnH,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAc,EAAE,OAAO,KAAK;IAC3C,IAAI,oBAAC,gBAAgB,SAAE,KAAK,EAAC,GAAG,CAAA,GAAA,+BAAa,EAAE;IAC/C,IAAI,cAAc,CAAA,GAAA,wCAAa,EAAE;QAC/B,GAAG,KAAK;QACR,kBAAkB;QAClB,cAAc,iBAAiB,KAAK;QACpC,QAAQ;mBACN;QACF;IACF;IAEA,qBACE,0DAAC;QACE,GAAG,gBAAgB;QACnB,GAAG,WAAW;QACf,MAAM,MAAM,IAAI,IAAI;QACpB,KAAK;;AAEX","sources":["packages/react-aria-components/src/ColorSwatch.tsx"],"sourcesContent":["import {AriaColorSwatchProps, useColorSwatch} from 'react-aria';\nimport {Color} from 'react-stately';\nimport {ContextValue, SlotProps, StyleRenderProps, useContextProps, useRenderProps} from './utils';\nimport React, {createContext, ForwardedRef, forwardRef} from 'react';\n\nexport interface ColorSwatchRenderProps {\n  /** The color of the swatch. */\n  color: Color\n}\n\nexport interface ColorSwatchProps extends AriaColorSwatchProps, StyleRenderProps<ColorSwatchRenderProps>, SlotProps {}\n\nexport const ColorSwatchContext = createContext<ContextValue<ColorSwatchProps, HTMLDivElement>>(null);\n\n/**\n * A ColorSwatch displays a preview of a selected color.\n */\nexport const ColorSwatch = forwardRef(function ColorSwatch(props: ColorSwatchProps, ref: ForwardedRef<HTMLDivElement>) {\n  [props, ref] = useContextProps(props, ref, ColorSwatchContext);\n  let {colorSwatchProps, color} = useColorSwatch(props);\n  let renderProps = useRenderProps({\n    ...props,\n    defaultClassName: 'react-aria-ColorSwatch',\n    defaultStyle: colorSwatchProps.style,\n    values: {\n      color\n    }\n  });\n  \n  return (\n    <div\n      {...colorSwatchProps}\n      {...renderProps}\n      slot={props.slot || undefined}\n      ref={ref} />\n  );\n});\n"],"names":[],"version":3,"file":"ColorSwatch.main.js.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;AAcO,MAAM,0DAAqB,CAAA,GAAA,0BAAY,EAAkD;AAKzF,MAAM,0DAAc,CAAA,GAAA,uBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAAiC;IACnH,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAc,EAAE,OAAO,KAAK;IAC3C,IAAI,oBAAC,gBAAgB,SAAE,KAAK,EAAC,GAAG,CAAA,GAAA,+BAAa,EAAE;IAC/C,IAAI,cAAc,CAAA,GAAA,wCAAa,EAAE;QAC/B,GAAG,KAAK;QACR,kBAAkB;QAClB,cAAc,iBAAiB,KAAK;QACpC,QAAQ;mBACN;QACF;IACF;IAEA,IAAI,WAAW,CAAA,GAAA,oCAAa,EAAE,OAAO;QAAC,QAAQ;IAAI;IAElD,qBACE,0DAAC;QACE,GAAG,CAAA,GAAA,gCAAS,EAAE,UAAU,kBAAkB,YAAY;QACvD,MAAM,MAAM,IAAI,IAAI;QACpB,KAAK;;AAEX","sources":["packages/react-aria-components/src/ColorSwatch.tsx"],"sourcesContent":["import {AriaColorSwatchProps, useColorSwatch} from 'react-aria';\nimport {Color} from 'react-stately';\nimport {ContextValue, SlotProps, StyleRenderProps, useContextProps, useRenderProps} from './utils';\nimport {filterDOMProps, mergeProps} from '@react-aria/utils';\nimport {GlobalDOMAttributes} from '@react-types/shared';\nimport React, {createContext, ForwardedRef, forwardRef} from 'react';\n\nexport interface ColorSwatchRenderProps {\n  /** The color of the swatch. */\n  color: Color\n}\n\nexport interface ColorSwatchProps extends AriaColorSwatchProps, StyleRenderProps<ColorSwatchRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {}\n\nexport const ColorSwatchContext = createContext<ContextValue<ColorSwatchProps, HTMLDivElement>>(null);\n\n/**\n * A ColorSwatch displays a preview of a selected color.\n */\nexport const ColorSwatch = forwardRef(function ColorSwatch(props: ColorSwatchProps, ref: ForwardedRef<HTMLDivElement>) {\n  [props, ref] = useContextProps(props, ref, ColorSwatchContext);\n  let {colorSwatchProps, color} = useColorSwatch(props);\n  let renderProps = useRenderProps({\n    ...props,\n    defaultClassName: 'react-aria-ColorSwatch',\n    defaultStyle: colorSwatchProps.style,\n    values: {\n      color\n    }\n  });\n\n  let DOMProps = filterDOMProps(props, {global: true});\n  \n  return (\n    <div\n      {...mergeProps(DOMProps, colorSwatchProps, renderProps)}\n      slot={props.slot || undefined}\n      ref={ref} />\n  );\n});\n"],"names":[],"version":3,"file":"ColorSwatch.main.js.map"}

package/dist/ColorSwatch.mjs

@@ -1,10 +1,12 @@
 import {useContextProps as $64fa3d84918910a7$export$29f1550f4b0d4415, useRenderProps as $64fa3d84918910a7$export$4d86445c2cf5e3} from "./utils.mjs";
 import {useColorSwatch as $dfXrE$useColorSwatch} from "react-aria";
+import {filterDOMProps as $dfXrE$filterDOMProps, mergeProps as $dfXrE$mergeProps} from "@react-aria/utils";
 import $dfXrE$react, {createContext as $dfXrE$createContext, forwardRef as $dfXrE$forwardRef} from "react";
 
 
 
 
+
 const $251c695a52d94a8d$export$83cc445538396800 = /*#__PURE__*/ (0, $dfXrE$createContext)(null);
 const $251c695a52d94a8d$export$cae13e90592f246a = /*#__PURE__*/ (0, $dfXrE$forwardRef)(function ColorSwatch(props, ref) {
     [props, ref] = (0, $64fa3d84918910a7$export$29f1550f4b0d4415)(props, ref, $251c695a52d94a8d$export$83cc445538396800);
@@ -17,9 +19,11 @@ const $251c695a52d94a8d$export$cae13e90592f246a = /*#__PURE__*/ (0, $dfXrE$forwa
             color: color
         }
     });
+    let DOMProps = (0, $dfXrE$filterDOMProps)(props, {
+        global: true
+    });
     return /*#__PURE__*/ (0, $dfXrE$react).createElement("div", {
-        ...colorSwatchProps,
-        ...renderProps,
+        ...(0, $dfXrE$mergeProps)(DOMProps, colorSwatchProps, renderProps),
         slot: props.slot || undefined,
         ref: ref
     });

package/dist/ColorSwatch.module.js

@@ -1,10 +1,12 @@
 import {useContextProps as $64fa3d84918910a7$export$29f1550f4b0d4415, useRenderProps as $64fa3d84918910a7$export$4d86445c2cf5e3} from "./utils.module.js";
 import {useColorSwatch as $dfXrE$useColorSwatch} from "react-aria";
+import {filterDOMProps as $dfXrE$filterDOMProps, mergeProps as $dfXrE$mergeProps} from "@react-aria/utils";
 import $dfXrE$react, {createContext as $dfXrE$createContext, forwardRef as $dfXrE$forwardRef} from "react";
 
 
 
 
+
 const $251c695a52d94a8d$export$83cc445538396800 = /*#__PURE__*/ (0, $dfXrE$createContext)(null);
 const $251c695a52d94a8d$export$cae13e90592f246a = /*#__PURE__*/ (0, $dfXrE$forwardRef)(function ColorSwatch(props, ref) {
     [props, ref] = (0, $64fa3d84918910a7$export$29f1550f4b0d4415)(props, ref, $251c695a52d94a8d$export$83cc445538396800);
@@ -17,9 +19,11 @@ const $251c695a52d94a8d$export$cae13e90592f246a = /*#__PURE__*/ (0, $dfXrE$forwa
             color: color
         }
     });
+    let DOMProps = (0, $dfXrE$filterDOMProps)(props, {
+        global: true
+    });
     return /*#__PURE__*/ (0, $dfXrE$react).createElement("div", {
-        ...colorSwatchProps,
-        ...renderProps,
+        ...(0, $dfXrE$mergeProps)(DOMProps, colorSwatchProps, renderProps),
         slot: props.slot || undefined,
         ref: ref
     });

package/dist/ColorSwatch.module.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;AAYO,MAAM,0DAAqB,CAAA,GAAA,oBAAY,EAAkD;AAKzF,MAAM,0DAAc,CAAA,GAAA,iBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAAiC;IACnH,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAc,EAAE,OAAO,KAAK;IAC3C,IAAI,oBAAC,gBAAgB,SAAE,KAAK,EAAC,GAAG,CAAA,GAAA,qBAAa,EAAE;IAC/C,IAAI,cAAc,CAAA,GAAA,uCAAa,EAAE;QAC/B,GAAG,KAAK;QACR,kBAAkB;QAClB,cAAc,iBAAiB,KAAK;QACpC,QAAQ;mBACN;QACF;IACF;IAEA,qBACE,gCAAC;QACE,GAAG,gBAAgB;QACnB,GAAG,WAAW;QACf,MAAM,MAAM,IAAI,IAAI;QACpB,KAAK;;AAEX","sources":["packages/react-aria-components/src/ColorSwatch.tsx"],"sourcesContent":["import {AriaColorSwatchProps, useColorSwatch} from 'react-aria';\nimport {Color} from 'react-stately';\nimport {ContextValue, SlotProps, StyleRenderProps, useContextProps, useRenderProps} from './utils';\nimport React, {createContext, ForwardedRef, forwardRef} from 'react';\n\nexport interface ColorSwatchRenderProps {\n  /** The color of the swatch. */\n  color: Color\n}\n\nexport interface ColorSwatchProps extends AriaColorSwatchProps, StyleRenderProps<ColorSwatchRenderProps>, SlotProps {}\n\nexport const ColorSwatchContext = createContext<ContextValue<ColorSwatchProps, HTMLDivElement>>(null);\n\n/**\n * A ColorSwatch displays a preview of a selected color.\n */\nexport const ColorSwatch = forwardRef(function ColorSwatch(props: ColorSwatchProps, ref: ForwardedRef<HTMLDivElement>) {\n  [props, ref] = useContextProps(props, ref, ColorSwatchContext);\n  let {colorSwatchProps, color} = useColorSwatch(props);\n  let renderProps = useRenderProps({\n    ...props,\n    defaultClassName: 'react-aria-ColorSwatch',\n    defaultStyle: colorSwatchProps.style,\n    values: {\n      color\n    }\n  });\n  \n  return (\n    <div\n      {...colorSwatchProps}\n      {...renderProps}\n      slot={props.slot || undefined}\n      ref={ref} />\n  );\n});\n"],"names":[],"version":3,"file":"ColorSwatch.module.js.map"}
+{"mappings":";;;;;;;;;AAcO,MAAM,0DAAqB,CAAA,GAAA,oBAAY,EAAkD;AAKzF,MAAM,0DAAc,CAAA,GAAA,iBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAAiC;IACnH,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAc,EAAE,OAAO,KAAK;IAC3C,IAAI,oBAAC,gBAAgB,SAAE,KAAK,EAAC,GAAG,CAAA,GAAA,qBAAa,EAAE;IAC/C,IAAI,cAAc,CAAA,GAAA,uCAAa,EAAE;QAC/B,GAAG,KAAK;QACR,kBAAkB;QAClB,cAAc,iBAAiB,KAAK;QACpC,QAAQ;mBACN;QACF;IACF;IAEA,IAAI,WAAW,CAAA,GAAA,qBAAa,EAAE,OAAO;QAAC,QAAQ;IAAI;IAElD,qBACE,gCAAC;QACE,GAAG,CAAA,GAAA,iBAAS,EAAE,UAAU,kBAAkB,YAAY;QACvD,MAAM,MAAM,IAAI,IAAI;QACpB,KAAK;;AAEX","sources":["packages/react-aria-components/src/ColorSwatch.tsx"],"sourcesContent":["import {AriaColorSwatchProps, useColorSwatch} from 'react-aria';\nimport {Color} from 'react-stately';\nimport {ContextValue, SlotProps, StyleRenderProps, useContextProps, useRenderProps} from './utils';\nimport {filterDOMProps, mergeProps} from '@react-aria/utils';\nimport {GlobalDOMAttributes} from '@react-types/shared';\nimport React, {createContext, ForwardedRef, forwardRef} from 'react';\n\nexport interface ColorSwatchRenderProps {\n  /** The color of the swatch. */\n  color: Color\n}\n\nexport interface ColorSwatchProps extends AriaColorSwatchProps, StyleRenderProps<ColorSwatchRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {}\n\nexport const ColorSwatchContext = createContext<ContextValue<ColorSwatchProps, HTMLDivElement>>(null);\n\n/**\n * A ColorSwatch displays a preview of a selected color.\n */\nexport const ColorSwatch = forwardRef(function ColorSwatch(props: ColorSwatchProps, ref: ForwardedRef<HTMLDivElement>) {\n  [props, ref] = useContextProps(props, ref, ColorSwatchContext);\n  let {colorSwatchProps, color} = useColorSwatch(props);\n  let renderProps = useRenderProps({\n    ...props,\n    defaultClassName: 'react-aria-ColorSwatch',\n    defaultStyle: colorSwatchProps.style,\n    values: {\n      color\n    }\n  });\n\n  let DOMProps = filterDOMProps(props, {global: true});\n  \n  return (\n    <div\n      {...mergeProps(DOMProps, colorSwatchProps, renderProps)}\n      slot={props.slot || undefined}\n      ref={ref} />\n  );\n});\n"],"names":[],"version":3,"file":"ColorSwatch.module.js.map"}

package/dist/ColorSwatchPicker.main.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBO,MAAM,0DAA2B,CAAA,GAAA,0BAAY,EAAwD;AAC5G,MAAM,sDAAkB,CAAA,GAAA,0BAAY,EAA6B;AAK1D,MAAM,0DAAoB,CAAA,GAAA,uBAAS,EAAE,SAAS,kBAAkB,KAA6B,EAAE,GAAiC;IACrI,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAc,EAAE,OAAO,KAAK;IAC3C,IAAI,QAAQ,CAAA,GAAA,uCAAkB,EAAE;IAChC,IAAI,WAAW,CAAA,GAAA,oBAAM,EAAE,IAAM,IAAI,OAAO,EAAE;IAC1C,IAAI,YAAY,CAAA,GAAA,4CAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAE1D,qBACE,0DAAC,CAAA,GAAA,iCAAM;QACJ,GAAG,CAAA,GAAA,oCAAa,EAAE,OAAO;YAAC,WAAW;QAAI,EAAE;QAC5C,KAAK;QACL,WAAW,MAAM,SAAS,IAAI;QAC9B,OAAO,MAAM,KAAK;QAClB,cAAY,KAAK,CAAC,aAAa,IAAK,CAAA,CAAC,KAAK,CAAC,kBAAkB,GAAG,UAAU,MAAM,CAAC,uBAAuB,SAAQ;QAChH,QAAQ,MAAM,MAAM,IAAI;QACxB,eAAc;QACd,cAAc;YAAC,MAAM,KAAK,CAAC,QAAQ,CAAC;SAAQ;QAC5C,mBAAmB,CAAC;YAClB,yDAAyD;YACzD,IAAI,SAAS,OACX,MAAM,QAAQ,CAAC,SAAS,GAAG,CAAC;mBAAI;aAAK,CAAC,EAAE;QAE5C;QACA,wBAAA;qBACA,0DAAC,sCAAgB,QAAQ;QAAC,OAAO;OAC9B,MAAM,QAAQ;AAIvB;AAcO,MAAM,0DAAwB,CAAA,GAAA,uBAAS,EAAE,SAAS,sBAAsB,KAAiC,EAAE,GAAiC;IACjJ,IAAI,YAAY,MAAM,KAAK,IAAI;IAC/B,IAAI,QAAQ,CAAA,GAAA,oBAAM,EAAE,IAAM,OAAO,cAAc,WAAW,CAAA,GAAA,8BAAS,EAAE,aAAa,WAAW;QAAC;KAAU;IACxG,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,0BAAQ;IACvB,IAAI,MAAM,CAAA,GAAA,uBAAS,EAAE;IACrB,CAAA,GAAA,sBAAQ,EAAE;QACR,IAAI,MAAM,MAAM,QAAQ,CAAC;QACzB,IAAI,GAAG,CAAC,KAAK;QACb,OAAO;YACL,IAAI,MAAM,CAAC;QACb;IACF,GAAG;QAAC;QAAO;KAAI;IAEf,IAAI,OAAO,CAAC;QACV,IAAI,OAAO,MAAM,YACf,OAAO,CAAC,cAAgB,EAAE;gBAAC,GAAG,WAAW;uBAAE;YAAK;QAElD,OAAO;IACT;IAEA,qBACE,0DAAC,CAAA,GAAA,qCAAU;QACR,GAAG,KAAK;QACT,KAAK;QACL,IAAI,MAAM,QAAQ,CAAC;QACnB,WAAW,MAAM,YAAY,CAAC;QAC9B,WAAW,KAAK,MAAM,SAAS,IAAI;QACnC,OAAO,KAAK,MAAM,KAAK;OACtB,CAAA,GAAA,4CAAiB,EAAE,KAAK,MAAM,QAAQ,GAAG,CAAA,yBACxC,0DAAC,CAAA,GAAA,4CAAiB,EAAE,QAAQ;YAAC,OAAO;uBAAC;YAAK;WACvC;AAKX","sources":["packages/react-aria-components/src/ColorSwatchPicker.tsx"],"sourcesContent":["import {AriaLabelingProps, HoverEvents, ValueBase} from '@react-types/shared';\nimport {Color, parseColor, useColorPickerState} from 'react-stately';\nimport {ColorSwatchContext} from './ColorSwatch';\nimport {composeRenderProps, ContextValue, RenderProps, StyleRenderProps, useContextProps} from './utils';\nimport {filterDOMProps} from '@react-aria/utils';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {ListBox, ListBoxItem, ListBoxItemRenderProps, ListBoxRenderProps} from './ListBox';\nimport React, {createContext, ForwardedRef, forwardRef, ReactNode, useContext, useEffect, useMemo} from 'react';\nimport {useLocale, useLocalizedStringFormatter} from 'react-aria';\n\nexport interface ColorSwatchPickerRenderProps extends Omit<ListBoxRenderProps, 'isDropTarget'> {}\nexport interface ColorSwatchPickerProps extends ValueBase<string | Color, Color>, AriaLabelingProps, StyleRenderProps<ColorSwatchPickerRenderProps> {\n  /** The children of the ColorSwatchPicker. */\n  children?: ReactNode,\n  /**\n   * Whether the items are arranged in a stack or grid.\n   * @default 'grid'\n   */\n  layout?: 'grid' | 'stack'\n}\n\nexport const ColorSwatchPickerContext = createContext<ContextValue<ColorSwatchPickerProps, HTMLDivElement>>(null);\nconst ColorMapContext = createContext<Map<string, Color> | null>(null);\n\n/**\n * A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.\n */\nexport const ColorSwatchPicker = forwardRef(function ColorSwatchPicker(props: ColorSwatchPickerProps, ref: ForwardedRef<HTMLDivElement>) {\n  [props, ref] = useContextProps(props, ref, ColorSwatchPickerContext);\n  let state = useColorPickerState(props);\n  let colorMap = useMemo(() => new Map(), []);\n  let formatter = useLocalizedStringFormatter(intlMessages, 'react-aria-components');\n\n  return (\n    <ListBox\n      {...filterDOMProps(props, {labelable: true})}\n      ref={ref}\n      className={props.className || 'react-aria-ColorSwatchPicker'}\n      style={props.style}\n      aria-label={props['aria-label'] || (!props['aria-labelledby'] ? formatter.format('colorSwatchPicker') : undefined)}\n      layout={props.layout || 'grid'}\n      selectionMode=\"single\"\n      selectedKeys={[state.color.toString('hexa')]}\n      onSelectionChange={(keys) => {\n        // single select, 'all' cannot occur. appease typescript.\n        if (keys !== 'all') {\n          state.setColor(colorMap.get([...keys][0]));\n        }\n      }}\n      disallowEmptySelection>\n      <ColorMapContext.Provider value={colorMap}>\n        {props.children}\n      </ColorMapContext.Provider>\n    </ListBox>\n  );\n});\n\nexport interface ColorSwatchPickerItemRenderProps extends Omit<ListBoxItemRenderProps, 'selectionMode' | 'selectionBehavior'> {\n  /** The color of the swatch. */\n  color: Color\n}\n\nexport interface ColorSwatchPickerItemProps extends RenderProps<ColorSwatchPickerItemRenderProps>, HoverEvents {\n  /** The color of the swatch. */\n  color: string | Color,\n  /** Whether the color swatch is disabled. */\n  isDisabled?: boolean\n}\n\nexport const ColorSwatchPickerItem = forwardRef(function ColorSwatchPickerItem(props: ColorSwatchPickerItemProps, ref: ForwardedRef<HTMLDivElement>) {\n  let propColor = props.color || '#0000';\n  let color = useMemo(() => typeof propColor === 'string' ? parseColor(propColor) : propColor, [propColor]);\n  let {locale} = useLocale();\n  let map = useContext(ColorMapContext)!;\n  useEffect(() => {\n    let key = color.toString('hexa');\n    map.set(key, color);\n    return () => {\n      map.delete(key);\n    };\n  }, [color, map]);\n\n  let wrap = (v) => {\n    if (typeof v === 'function') {\n      return (renderProps) => v({...renderProps, color});\n    }\n    return v;\n  };\n\n  return (\n    <ListBoxItem\n      {...props}\n      ref={ref}\n      id={color.toString('hexa')}\n      textValue={color.getColorName(locale)}\n      className={wrap(props.className || 'react-aria-ColorSwatchPickerItem')}\n      style={wrap(props.style)}>\n      {composeRenderProps(wrap(props.children), children => (\n        <ColorSwatchContext.Provider value={{color}}>\n          {children}\n        </ColorSwatchContext.Provider>\n      ))}\n    </ListBoxItem>\n  );\n});\n"],"names":[],"version":3,"file":"ColorSwatchPicker.main.js.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBO,MAAM,0DAA2B,CAAA,GAAA,0BAAY,EAAwD;AAC5G,MAAM,sDAAkB,CAAA,GAAA,0BAAY,EAA6B;AAK1D,MAAM,0DAAoB,CAAA,GAAA,uBAAS,EAAE,SAAS,kBAAkB,KAA6B,EAAE,GAAiC;IACrI,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAc,EAAE,OAAO,KAAK;IAC3C,IAAI,QAAQ,CAAA,GAAA,uCAAkB,EAAE;IAChC,IAAI,WAAW,CAAA,GAAA,oBAAM,EAAE,IAAM,IAAI,OAAO,EAAE;IAC1C,IAAI,YAAY,CAAA,GAAA,4CAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAE1D,qBACE,0DAAC,CAAA,GAAA,iCAAM;QACJ,GAAG,CAAA,GAAA,oCAAa,EAAE,OAAO;YAAC,WAAW;QAAI,EAAE;QAC5C,KAAK;QACL,WAAW,MAAM,SAAS,IAAI;QAC9B,OAAO,MAAM,KAAK;QAClB,cAAY,KAAK,CAAC,aAAa,IAAK,CAAA,CAAC,KAAK,CAAC,kBAAkB,GAAG,UAAU,MAAM,CAAC,uBAAuB,SAAQ;QAChH,QAAQ,MAAM,MAAM,IAAI;QACxB,eAAc;QACd,cAAc;YAAC,MAAM,KAAK,CAAC,QAAQ,CAAC;SAAQ;QAC5C,mBAAmB,CAAC;YAClB,yDAAyD;YACzD,IAAI,SAAS,OACX,MAAM,QAAQ,CAAC,SAAS,GAAG,CAAC;mBAAI;aAAK,CAAC,EAAE;QAE5C;QACA,wBAAA;qBACA,0DAAC,sCAAgB,QAAQ;QAAC,OAAO;OAC9B,MAAM,QAAQ;AAIvB;AAcO,MAAM,0DAAwB,CAAA,GAAA,uBAAS,EAAE,SAAS,sBAAsB,KAAiC,EAAE,GAAiC;IACjJ,IAAI,YAAY,MAAM,KAAK,IAAI;IAC/B,IAAI,QAAQ,CAAA,GAAA,oBAAM,EAAE,IAAM,OAAO,cAAc,WAAW,CAAA,GAAA,8BAAS,EAAE,aAAa,WAAW;QAAC;KAAU;IACxG,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,0BAAQ;IACvB,IAAI,MAAM,CAAA,GAAA,uBAAS,EAAE;IACrB,CAAA,GAAA,sBAAQ,EAAE;QACR,IAAI,MAAM,MAAM,QAAQ,CAAC;QACzB,IAAI,GAAG,CAAC,KAAK;QACb,OAAO;YACL,IAAI,MAAM,CAAC;QACb;IACF,GAAG;QAAC;QAAO;KAAI;IAEf,IAAI,OAAO,CAAC;QACV,IAAI,OAAO,MAAM,YACf,OAAO,CAAC,cAAgB,EAAE;gBAAC,GAAG,WAAW;uBAAE;YAAK;QAElD,OAAO;IACT;IAEA,qBACE,0DAAC,CAAA,GAAA,qCAAU;QACR,GAAG,KAAK;QACT,KAAK;QACL,IAAI,MAAM,QAAQ,CAAC;QACnB,WAAW,MAAM,YAAY,CAAC;QAC9B,WAAW,KAAK,MAAM,SAAS,IAAI;QACnC,OAAO,KAAK,MAAM,KAAK;OACtB,CAAA,GAAA,4CAAiB,EAAE,KAAK,MAAM,QAAQ,GAAG,CAAA,yBACxC,0DAAC,CAAA,GAAA,4CAAiB,EAAE,QAAQ;YAAC,OAAO;uBAAC;YAAK;WACvC;AAKX","sources":["packages/react-aria-components/src/ColorSwatchPicker.tsx"],"sourcesContent":["import {AriaLabelingProps, GlobalDOMAttributes, HoverEvents, PressEvents, ValueBase} from '@react-types/shared';\nimport {Color, parseColor, useColorPickerState} from 'react-stately';\nimport {ColorSwatchContext} from './ColorSwatch';\nimport {composeRenderProps, ContextValue, RenderProps, StyleRenderProps, useContextProps} from './utils';\nimport {filterDOMProps} from '@react-aria/utils';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {ListBox, ListBoxItem, ListBoxItemRenderProps, ListBoxRenderProps} from './ListBox';\nimport React, {createContext, ForwardedRef, forwardRef, ReactNode, useContext, useEffect, useMemo} from 'react';\nimport {useLocale, useLocalizedStringFormatter} from 'react-aria';\n\nexport interface ColorSwatchPickerRenderProps extends Omit<ListBoxRenderProps, 'isDropTarget'> {}\nexport interface ColorSwatchPickerProps extends ValueBase<string | Color, Color>, AriaLabelingProps, StyleRenderProps<ColorSwatchPickerRenderProps>, GlobalDOMAttributes<HTMLDivElement> {\n  /** The children of the ColorSwatchPicker. */\n  children?: ReactNode,\n  /**\n   * Whether the items are arranged in a stack or grid.\n   * @default 'grid'\n   */\n  layout?: 'grid' | 'stack'\n}\n\nexport const ColorSwatchPickerContext = createContext<ContextValue<ColorSwatchPickerProps, HTMLDivElement>>(null);\nconst ColorMapContext = createContext<Map<string, Color> | null>(null);\n\n/**\n * A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.\n */\nexport const ColorSwatchPicker = forwardRef(function ColorSwatchPicker(props: ColorSwatchPickerProps, ref: ForwardedRef<HTMLDivElement>) {\n  [props, ref] = useContextProps(props, ref, ColorSwatchPickerContext);\n  let state = useColorPickerState(props);\n  let colorMap = useMemo(() => new Map(), []);\n  let formatter = useLocalizedStringFormatter(intlMessages, 'react-aria-components');\n\n  return (\n    <ListBox\n      {...filterDOMProps(props, {labelable: true})}\n      ref={ref}\n      className={props.className || 'react-aria-ColorSwatchPicker'}\n      style={props.style}\n      aria-label={props['aria-label'] || (!props['aria-labelledby'] ? formatter.format('colorSwatchPicker') : undefined)}\n      layout={props.layout || 'grid'}\n      selectionMode=\"single\"\n      selectedKeys={[state.color.toString('hexa')]}\n      onSelectionChange={(keys) => {\n        // single select, 'all' cannot occur. appease typescript.\n        if (keys !== 'all') {\n          state.setColor(colorMap.get([...keys][0]));\n        }\n      }}\n      disallowEmptySelection>\n      <ColorMapContext.Provider value={colorMap}>\n        {props.children}\n      </ColorMapContext.Provider>\n    </ListBox>\n  );\n});\n\nexport interface ColorSwatchPickerItemRenderProps extends Omit<ListBoxItemRenderProps, 'selectionMode' | 'selectionBehavior'> {\n  /** The color of the swatch. */\n  color: Color\n}\n\nexport interface ColorSwatchPickerItemProps extends RenderProps<ColorSwatchPickerItemRenderProps>, HoverEvents, PressEvents, Omit<GlobalDOMAttributes<HTMLDivElement>, 'onClick'> {\n  /** The color of the swatch. */\n  color: string | Color,\n  /** Whether the color swatch is disabled. */\n  isDisabled?: boolean\n}\n\nexport const ColorSwatchPickerItem = forwardRef(function ColorSwatchPickerItem(props: ColorSwatchPickerItemProps, ref: ForwardedRef<HTMLDivElement>) {\n  let propColor = props.color || '#0000';\n  let color = useMemo(() => typeof propColor === 'string' ? parseColor(propColor) : propColor, [propColor]);\n  let {locale} = useLocale();\n  let map = useContext(ColorMapContext)!;\n  useEffect(() => {\n    let key = color.toString('hexa');\n    map.set(key, color);\n    return () => {\n      map.delete(key);\n    };\n  }, [color, map]);\n\n  let wrap = (v) => {\n    if (typeof v === 'function') {\n      return (renderProps) => v({...renderProps, color});\n    }\n    return v;\n  };\n\n  return (\n    <ListBoxItem\n      {...props}\n      ref={ref}\n      id={color.toString('hexa')}\n      textValue={color.getColorName(locale)}\n      className={wrap(props.className || 'react-aria-ColorSwatchPickerItem')}\n      style={wrap(props.style)}>\n      {composeRenderProps(wrap(props.children), children => (\n        <ColorSwatchContext.Provider value={{color}}>\n          {children}\n        </ColorSwatchContext.Provider>\n      ))}\n    </ListBoxItem>\n  );\n});\n"],"names":[],"version":3,"file":"ColorSwatchPicker.main.js.map"}

package/dist/ColorSwatchPicker.module.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;AAsBO,MAAM,0DAA2B,CAAA,GAAA,oBAAY,EAAwD;AAC5G,MAAM,sDAAkB,CAAA,GAAA,oBAAY,EAA6B;AAK1D,MAAM,0DAAoB,CAAA,GAAA,iBAAS,EAAE,SAAS,kBAAkB,KAA6B,EAAE,GAAiC;IACrI,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAc,EAAE,OAAO,KAAK;IAC3C,IAAI,QAAQ,CAAA,GAAA,0BAAkB,EAAE;IAChC,IAAI,WAAW,CAAA,GAAA,cAAM,EAAE,IAAM,IAAI,OAAO,EAAE;IAC1C,IAAI,YAAY,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,oDAAW,GAAG;IAE1D,qBACE,gCAAC,CAAA,GAAA,yCAAM;QACJ,GAAG,CAAA,GAAA,qBAAa,EAAE,OAAO;YAAC,WAAW;QAAI,EAAE;QAC5C,KAAK;QACL,WAAW,MAAM,SAAS,IAAI;QAC9B,OAAO,MAAM,KAAK;QAClB,cAAY,KAAK,CAAC,aAAa,IAAK,CAAA,CAAC,KAAK,CAAC,kBAAkB,GAAG,UAAU,MAAM,CAAC,uBAAuB,SAAQ;QAChH,QAAQ,MAAM,MAAM,IAAI;QACxB,eAAc;QACd,cAAc;YAAC,MAAM,KAAK,CAAC,QAAQ,CAAC;SAAQ;QAC5C,mBAAmB,CAAC;YAClB,yDAAyD;YACzD,IAAI,SAAS,OACX,MAAM,QAAQ,CAAC,SAAS,GAAG,CAAC;mBAAI;aAAK,CAAC,EAAE;QAE5C;QACA,wBAAA;qBACA,gCAAC,sCAAgB,QAAQ;QAAC,OAAO;OAC9B,MAAM,QAAQ;AAIvB;AAcO,MAAM,0DAAwB,CAAA,GAAA,iBAAS,EAAE,SAAS,sBAAsB,KAAiC,EAAE,GAAiC;IACjJ,IAAI,YAAY,MAAM,KAAK,IAAI;IAC/B,IAAI,QAAQ,CAAA,GAAA,cAAM,EAAE,IAAM,OAAO,cAAc,WAAW,CAAA,GAAA,iBAAS,EAAE,aAAa,WAAW;QAAC;KAAU;IACxG,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,gBAAQ;IACvB,IAAI,MAAM,CAAA,GAAA,iBAAS,EAAE;IACrB,CAAA,GAAA,gBAAQ,EAAE;QACR,IAAI,MAAM,MAAM,QAAQ,CAAC;QACzB,IAAI,GAAG,CAAC,KAAK;QACb,OAAO;YACL,IAAI,MAAM,CAAC;QACb;IACF,GAAG;QAAC;QAAO;KAAI;IAEf,IAAI,OAAO,CAAC;QACV,IAAI,OAAO,MAAM,YACf,OAAO,CAAC,cAAgB,EAAE;gBAAC,GAAG,WAAW;uBAAE;YAAK;QAElD,OAAO;IACT;IAEA,qBACE,gCAAC,CAAA,GAAA,wCAAU;QACR,GAAG,KAAK;QACT,KAAK;QACL,IAAI,MAAM,QAAQ,CAAC;QACnB,WAAW,MAAM,YAAY,CAAC;QAC9B,WAAW,KAAK,MAAM,SAAS,IAAI;QACnC,OAAO,KAAK,MAAM,KAAK;OACtB,CAAA,GAAA,yCAAiB,EAAE,KAAK,MAAM,QAAQ,GAAG,CAAA,yBACxC,gCAAC,CAAA,GAAA,yCAAiB,EAAE,QAAQ;YAAC,OAAO;uBAAC;YAAK;WACvC;AAKX","sources":["packages/react-aria-components/src/ColorSwatchPicker.tsx"],"sourcesContent":["import {AriaLabelingProps, HoverEvents, ValueBase} from '@react-types/shared';\nimport {Color, parseColor, useColorPickerState} from 'react-stately';\nimport {ColorSwatchContext} from './ColorSwatch';\nimport {composeRenderProps, ContextValue, RenderProps, StyleRenderProps, useContextProps} from './utils';\nimport {filterDOMProps} from '@react-aria/utils';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {ListBox, ListBoxItem, ListBoxItemRenderProps, ListBoxRenderProps} from './ListBox';\nimport React, {createContext, ForwardedRef, forwardRef, ReactNode, useContext, useEffect, useMemo} from 'react';\nimport {useLocale, useLocalizedStringFormatter} from 'react-aria';\n\nexport interface ColorSwatchPickerRenderProps extends Omit<ListBoxRenderProps, 'isDropTarget'> {}\nexport interface ColorSwatchPickerProps extends ValueBase<string | Color, Color>, AriaLabelingProps, StyleRenderProps<ColorSwatchPickerRenderProps> {\n  /** The children of the ColorSwatchPicker. */\n  children?: ReactNode,\n  /**\n   * Whether the items are arranged in a stack or grid.\n   * @default 'grid'\n   */\n  layout?: 'grid' | 'stack'\n}\n\nexport const ColorSwatchPickerContext = createContext<ContextValue<ColorSwatchPickerProps, HTMLDivElement>>(null);\nconst ColorMapContext = createContext<Map<string, Color> | null>(null);\n\n/**\n * A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.\n */\nexport const ColorSwatchPicker = forwardRef(function ColorSwatchPicker(props: ColorSwatchPickerProps, ref: ForwardedRef<HTMLDivElement>) {\n  [props, ref] = useContextProps(props, ref, ColorSwatchPickerContext);\n  let state = useColorPickerState(props);\n  let colorMap = useMemo(() => new Map(), []);\n  let formatter = useLocalizedStringFormatter(intlMessages, 'react-aria-components');\n\n  return (\n    <ListBox\n      {...filterDOMProps(props, {labelable: true})}\n      ref={ref}\n      className={props.className || 'react-aria-ColorSwatchPicker'}\n      style={props.style}\n      aria-label={props['aria-label'] || (!props['aria-labelledby'] ? formatter.format('colorSwatchPicker') : undefined)}\n      layout={props.layout || 'grid'}\n      selectionMode=\"single\"\n      selectedKeys={[state.color.toString('hexa')]}\n      onSelectionChange={(keys) => {\n        // single select, 'all' cannot occur. appease typescript.\n        if (keys !== 'all') {\n          state.setColor(colorMap.get([...keys][0]));\n        }\n      }}\n      disallowEmptySelection>\n      <ColorMapContext.Provider value={colorMap}>\n        {props.children}\n      </ColorMapContext.Provider>\n    </ListBox>\n  );\n});\n\nexport interface ColorSwatchPickerItemRenderProps extends Omit<ListBoxItemRenderProps, 'selectionMode' | 'selectionBehavior'> {\n  /** The color of the swatch. */\n  color: Color\n}\n\nexport interface ColorSwatchPickerItemProps extends RenderProps<ColorSwatchPickerItemRenderProps>, HoverEvents {\n  /** The color of the swatch. */\n  color: string | Color,\n  /** Whether the color swatch is disabled. */\n  isDisabled?: boolean\n}\n\nexport const ColorSwatchPickerItem = forwardRef(function ColorSwatchPickerItem(props: ColorSwatchPickerItemProps, ref: ForwardedRef<HTMLDivElement>) {\n  let propColor = props.color || '#0000';\n  let color = useMemo(() => typeof propColor === 'string' ? parseColor(propColor) : propColor, [propColor]);\n  let {locale} = useLocale();\n  let map = useContext(ColorMapContext)!;\n  useEffect(() => {\n    let key = color.toString('hexa');\n    map.set(key, color);\n    return () => {\n      map.delete(key);\n    };\n  }, [color, map]);\n\n  let wrap = (v) => {\n    if (typeof v === 'function') {\n      return (renderProps) => v({...renderProps, color});\n    }\n    return v;\n  };\n\n  return (\n    <ListBoxItem\n      {...props}\n      ref={ref}\n      id={color.toString('hexa')}\n      textValue={color.getColorName(locale)}\n      className={wrap(props.className || 'react-aria-ColorSwatchPickerItem')}\n      style={wrap(props.style)}>\n      {composeRenderProps(wrap(props.children), children => (\n        <ColorSwatchContext.Provider value={{color}}>\n          {children}\n        </ColorSwatchContext.Provider>\n      ))}\n    </ListBoxItem>\n  );\n});\n"],"names":[],"version":3,"file":"ColorSwatchPicker.module.js.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;AAsBO,MAAM,0DAA2B,CAAA,GAAA,oBAAY,EAAwD;AAC5G,MAAM,sDAAkB,CAAA,GAAA,oBAAY,EAA6B;AAK1D,MAAM,0DAAoB,CAAA,GAAA,iBAAS,EAAE,SAAS,kBAAkB,KAA6B,EAAE,GAAiC;IACrI,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAc,EAAE,OAAO,KAAK;IAC3C,IAAI,QAAQ,CAAA,GAAA,0BAAkB,EAAE;IAChC,IAAI,WAAW,CAAA,GAAA,cAAM,EAAE,IAAM,IAAI,OAAO,EAAE;IAC1C,IAAI,YAAY,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,oDAAW,GAAG;IAE1D,qBACE,gCAAC,CAAA,GAAA,yCAAM;QACJ,GAAG,CAAA,GAAA,qBAAa,EAAE,OAAO;YAAC,WAAW;QAAI,EAAE;QAC5C,KAAK;QACL,WAAW,MAAM,SAAS,IAAI;QAC9B,OAAO,MAAM,KAAK;QAClB,cAAY,KAAK,CAAC,aAAa,IAAK,CAAA,CAAC,KAAK,CAAC,kBAAkB,GAAG,UAAU,MAAM,CAAC,uBAAuB,SAAQ;QAChH,QAAQ,MAAM,MAAM,IAAI;QACxB,eAAc;QACd,cAAc;YAAC,MAAM,KAAK,CAAC,QAAQ,CAAC;SAAQ;QAC5C,mBAAmB,CAAC;YAClB,yDAAyD;YACzD,IAAI,SAAS,OACX,MAAM,QAAQ,CAAC,SAAS,GAAG,CAAC;mBAAI;aAAK,CAAC,EAAE;QAE5C;QACA,wBAAA;qBACA,gCAAC,sCAAgB,QAAQ;QAAC,OAAO;OAC9B,MAAM,QAAQ;AAIvB;AAcO,MAAM,0DAAwB,CAAA,GAAA,iBAAS,EAAE,SAAS,sBAAsB,KAAiC,EAAE,GAAiC;IACjJ,IAAI,YAAY,MAAM,KAAK,IAAI;IAC/B,IAAI,QAAQ,CAAA,GAAA,cAAM,EAAE,IAAM,OAAO,cAAc,WAAW,CAAA,GAAA,iBAAS,EAAE,aAAa,WAAW;QAAC;KAAU;IACxG,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,gBAAQ;IACvB,IAAI,MAAM,CAAA,GAAA,iBAAS,EAAE;IACrB,CAAA,GAAA,gBAAQ,EAAE;QACR,IAAI,MAAM,MAAM,QAAQ,CAAC;QACzB,IAAI,GAAG,CAAC,KAAK;QACb,OAAO;YACL,IAAI,MAAM,CAAC;QACb;IACF,GAAG;QAAC;QAAO;KAAI;IAEf,IAAI,OAAO,CAAC;QACV,IAAI,OAAO,MAAM,YACf,OAAO,CAAC,cAAgB,EAAE;gBAAC,GAAG,WAAW;uBAAE;YAAK;QAElD,OAAO;IACT;IAEA,qBACE,gCAAC,CAAA,GAAA,wCAAU;QACR,GAAG,KAAK;QACT,KAAK;QACL,IAAI,MAAM,QAAQ,CAAC;QACnB,WAAW,MAAM,YAAY,CAAC;QAC9B,WAAW,KAAK,MAAM,SAAS,IAAI;QACnC,OAAO,KAAK,MAAM,KAAK;OACtB,CAAA,GAAA,yCAAiB,EAAE,KAAK,MAAM,QAAQ,GAAG,CAAA,yBACxC,gCAAC,CAAA,GAAA,yCAAiB,EAAE,QAAQ;YAAC,OAAO;uBAAC;YAAK;WACvC;AAKX","sources":["packages/react-aria-components/src/ColorSwatchPicker.tsx"],"sourcesContent":["import {AriaLabelingProps, GlobalDOMAttributes, HoverEvents, PressEvents, ValueBase} from '@react-types/shared';\nimport {Color, parseColor, useColorPickerState} from 'react-stately';\nimport {ColorSwatchContext} from './ColorSwatch';\nimport {composeRenderProps, ContextValue, RenderProps, StyleRenderProps, useContextProps} from './utils';\nimport {filterDOMProps} from '@react-aria/utils';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {ListBox, ListBoxItem, ListBoxItemRenderProps, ListBoxRenderProps} from './ListBox';\nimport React, {createContext, ForwardedRef, forwardRef, ReactNode, useContext, useEffect, useMemo} from 'react';\nimport {useLocale, useLocalizedStringFormatter} from 'react-aria';\n\nexport interface ColorSwatchPickerRenderProps extends Omit<ListBoxRenderProps, 'isDropTarget'> {}\nexport interface ColorSwatchPickerProps extends ValueBase<string | Color, Color>, AriaLabelingProps, StyleRenderProps<ColorSwatchPickerRenderProps>, GlobalDOMAttributes<HTMLDivElement> {\n  /** The children of the ColorSwatchPicker. */\n  children?: ReactNode,\n  /**\n   * Whether the items are arranged in a stack or grid.\n   * @default 'grid'\n   */\n  layout?: 'grid' | 'stack'\n}\n\nexport const ColorSwatchPickerContext = createContext<ContextValue<ColorSwatchPickerProps, HTMLDivElement>>(null);\nconst ColorMapContext = createContext<Map<string, Color> | null>(null);\n\n/**\n * A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.\n */\nexport const ColorSwatchPicker = forwardRef(function ColorSwatchPicker(props: ColorSwatchPickerProps, ref: ForwardedRef<HTMLDivElement>) {\n  [props, ref] = useContextProps(props, ref, ColorSwatchPickerContext);\n  let state = useColorPickerState(props);\n  let colorMap = useMemo(() => new Map(), []);\n  let formatter = useLocalizedStringFormatter(intlMessages, 'react-aria-components');\n\n  return (\n    <ListBox\n      {...filterDOMProps(props, {labelable: true})}\n      ref={ref}\n      className={props.className || 'react-aria-ColorSwatchPicker'}\n      style={props.style}\n      aria-label={props['aria-label'] || (!props['aria-labelledby'] ? formatter.format('colorSwatchPicker') : undefined)}\n      layout={props.layout || 'grid'}\n      selectionMode=\"single\"\n      selectedKeys={[state.color.toString('hexa')]}\n      onSelectionChange={(keys) => {\n        // single select, 'all' cannot occur. appease typescript.\n        if (keys !== 'all') {\n          state.setColor(colorMap.get([...keys][0]));\n        }\n      }}\n      disallowEmptySelection>\n      <ColorMapContext.Provider value={colorMap}>\n        {props.children}\n      </ColorMapContext.Provider>\n    </ListBox>\n  );\n});\n\nexport interface ColorSwatchPickerItemRenderProps extends Omit<ListBoxItemRenderProps, 'selectionMode' | 'selectionBehavior'> {\n  /** The color of the swatch. */\n  color: Color\n}\n\nexport interface ColorSwatchPickerItemProps extends RenderProps<ColorSwatchPickerItemRenderProps>, HoverEvents, PressEvents, Omit<GlobalDOMAttributes<HTMLDivElement>, 'onClick'> {\n  /** The color of the swatch. */\n  color: string | Color,\n  /** Whether the color swatch is disabled. */\n  isDisabled?: boolean\n}\n\nexport const ColorSwatchPickerItem = forwardRef(function ColorSwatchPickerItem(props: ColorSwatchPickerItemProps, ref: ForwardedRef<HTMLDivElement>) {\n  let propColor = props.color || '#0000';\n  let color = useMemo(() => typeof propColor === 'string' ? parseColor(propColor) : propColor, [propColor]);\n  let {locale} = useLocale();\n  let map = useContext(ColorMapContext)!;\n  useEffect(() => {\n    let key = color.toString('hexa');\n    map.set(key, color);\n    return () => {\n      map.delete(key);\n    };\n  }, [color, map]);\n\n  let wrap = (v) => {\n    if (typeof v === 'function') {\n      return (renderProps) => v({...renderProps, color});\n    }\n    return v;\n  };\n\n  return (\n    <ListBoxItem\n      {...props}\n      ref={ref}\n      id={color.toString('hexa')}\n      textValue={color.getColorName(locale)}\n      className={wrap(props.className || 'react-aria-ColorSwatchPickerItem')}\n      style={wrap(props.style)}>\n      {composeRenderProps(wrap(props.children), children => (\n        <ColorSwatchContext.Provider value={{color}}>\n          {children}\n        </ColorSwatchContext.Provider>\n      ))}\n    </ListBoxItem>\n  );\n});\n"],"names":[],"version":3,"file":"ColorSwatchPicker.module.js.map"}

package/dist/ColorThumb.main.js

@@ -39,7 +39,9 @@ const $9775047c98afa2ef$export$a3cc47cee1c1ccc = /*#__PURE__*/ (0, $3jWEE$react.
             isDisabled: isDisabled
         }
     });
-    let DOMProps = (0, $3jWEE$reactariautils.filterDOMProps)(props);
+    let DOMProps = (0, $3jWEE$reactariautils.filterDOMProps)(props, {
+        global: true
+    });
     delete DOMProps.id;
     return /*#__PURE__*/ (0, ($parcel$interopDefault($3jWEE$react))).createElement("div", {
         ...(0, $3jWEE$reactaria.mergeProps)(thumbProps, hoverProps, DOMProps),

package/dist/ColorThumb.main.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;AAsBO,MAAM,0DAA4B,CAAA,GAAA,0BAAY,EAAyC;AAuCvF,MAAM,yDAAa,CAAA,GAAA,uBAAS,EAAE,SAAS,WAAW,KAAsB,EAAE,GAAiC;IAChH,IAAI,SAAC,KAAK,cAAE,UAAU,aAAE,SAAS,aAAE,SAAS,eAAE,WAAW,eAAE,WAAW,cAAE,aAAa,OAAM,GAAG,CAAA,GAAA,uBAAS,EAAE;IACzG,IAAI,cAAC,UAAU,aAAE,SAAS,kBAAE,cAAc,EAAC,GAAG,CAAA,GAAA,6BAAW;IACzD,IAAI,cAAC,UAAU,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,yBAAO,EAAE;IAEvC,IAAI,cAAc,CAAA,GAAA,wCAAa,EAAE;QAC/B,GAAG,KAAK;QACR,kBAAkB;QAClB,cAAc;YACZ,GAAG,WAAW,KAAK;YACnB,iBAAiB,MAAM,eAAe,GAAG,QAAQ;QACnD;QACA,QAAQ;YACN,OAAO,MAAM,eAAe;uBAC5B;YACA,YAAY,MAAM,UAAU;uBAC5B;4BACA;wBACA;QACF;IACF;IAEA,IAAI,WAAW,CAAA,GAAA,oCAAa,EAAE;IAC9B,OAAO,SAAS,EAAE;IAElB,qBACE,0DAAC;QACE,GAAG,CAAA,GAAA,2BAAS,EAAE,YAAY,YAAY,SAAS;QAC/C,GAAG,WAAW;QACf,KAAK;QACL,gBAAc,aAAa;QAC3B,iBAAe,MAAM,UAAU,IAAI;QACnC,gBAAc,aAAa;QAC3B,sBAAoB,kBAAkB;QACtC,iBAAe,cAAc;qBAC7B,0DAAC;QAAM,KAAK;QAAY,GAAG,WAAW;QAAG,GAAG,UAAU;QACrD,6BAAe,0DAAC;QAAM,KAAK;QAAY,GAAG,WAAW;QAAG,GAAG,UAAU;QACrE,YAAY,QAAQ;AAG3B","sources":["packages/react-aria-components/src/ColorThumb.tsx"],"sourcesContent":["import {Color} from 'react-stately';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {HoverEvents, RefObject} from '@react-types/shared';\nimport {mergeProps, useFocusRing, useHover} from 'react-aria';\nimport React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, InputHTMLAttributes, useContext} from 'react';\nimport {RenderProps, useRenderProps} from './utils';\n\ninterface ColorState {\n  getDisplayColor(): Color,\n  isDragging: boolean\n}\n\ninterface InternalColorThumbContextValue {\n  state: ColorState,\n  thumbProps: HTMLAttributes<HTMLElement>,\n  inputXRef: RefObject<HTMLInputElement | null>,\n  inputYRef?: RefObject<HTMLInputElement | null>,\n  xInputProps: InputHTMLAttributes<HTMLInputElement>,\n  yInputProps?: InputHTMLAttributes<HTMLInputElement>,\n  isDisabled?: boolean\n}\n\nexport const InternalColorThumbContext = createContext<InternalColorThumbContextValue | null>(null);\n\nexport interface ColorThumbRenderProps {\n  /**\n   * The selected color, excluding the alpha channel.\n   */\n  color: Color,\n  /**\n   * Whether this thumb is currently being dragged.\n   * @selector [data-dragging]\n   */\n  isDragging: boolean,\n  /**\n   * Whether the thumb is currently hovered with a mouse.\n   * @selector [data-hovered]\n   */\n  isHovered: boolean,\n  /**\n   * Whether the thumb is currently focused.\n   * @selector [data-focused]\n   */\n  isFocused: boolean,\n  /**\n   * Whether the thumb is keyboard focused.\n   * @selector [data-focus-visible]\n   */\n  isFocusVisible: boolean,\n  /**\n   * Whether the thumb is disabled.\n   * @selector [data-disabled]\n   */\n  isDisabled: boolean\n}\n\nexport interface ColorThumbProps extends HoverEvents, RenderProps<ColorThumbRenderProps> {}\n\n/**\n * A color thumb appears within a ColorArea, ColorSlider, or ColorWheel and allows a user to drag to adjust the color value.\n */\nexport const ColorThumb = forwardRef(function ColorThumb(props: ColorThumbProps, ref: ForwardedRef<HTMLDivElement>) {\n  let {state, thumbProps, inputXRef, inputYRef, xInputProps, yInputProps, isDisabled = false} = useContext(InternalColorThumbContext)!;\n  let {focusProps, isFocused, isFocusVisible} = useFocusRing();\n  let {hoverProps, isHovered} = useHover(props);\n\n  let renderProps = useRenderProps({\n    ...props,\n    defaultClassName: 'react-aria-ColorThumb',\n    defaultStyle: {\n      ...thumbProps.style,\n      backgroundColor: state.getDisplayColor().toString()\n    },\n    values: {\n      color: state.getDisplayColor(),\n      isHovered,\n      isDragging: state.isDragging,\n      isFocused,\n      isFocusVisible,\n      isDisabled\n    }\n  });\n\n  let DOMProps = filterDOMProps(props as any);\n  delete DOMProps.id;\n\n  return (\n    <div\n      {...mergeProps(thumbProps, hoverProps, DOMProps)}\n      {...renderProps}\n      ref={ref}\n      data-hovered={isHovered || undefined}\n      data-dragging={state.isDragging || undefined}\n      data-focused={isFocused || undefined}\n      data-focus-visible={isFocusVisible || undefined}\n      data-disabled={isDisabled || undefined}>\n      <input ref={inputXRef} {...xInputProps} {...focusProps} />\n      {yInputProps && <input ref={inputYRef} {...yInputProps} {...focusProps} />}\n      {renderProps.children}\n    </div>\n  );\n});\n"],"names":[],"version":3,"file":"ColorThumb.main.js.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;AAsBO,MAAM,0DAA4B,CAAA,GAAA,0BAAY,EAAyC;AAuCvF,MAAM,yDAAa,CAAA,GAAA,uBAAS,EAAE,SAAS,WAAW,KAAsB,EAAE,GAAiC;IAChH,IAAI,SAAC,KAAK,cAAE,UAAU,aAAE,SAAS,aAAE,SAAS,eAAE,WAAW,eAAE,WAAW,cAAE,aAAa,OAAM,GAAG,CAAA,GAAA,uBAAS,EAAE;IACzG,IAAI,cAAC,UAAU,aAAE,SAAS,kBAAE,cAAc,EAAC,GAAG,CAAA,GAAA,6BAAW;IACzD,IAAI,cAAC,UAAU,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,yBAAO,EAAE;IAEvC,IAAI,cAAc,CAAA,GAAA,wCAAa,EAAE;QAC/B,GAAG,KAAK;QACR,kBAAkB;QAClB,cAAc;YACZ,GAAG,WAAW,KAAK;YACnB,iBAAiB,MAAM,eAAe,GAAG,QAAQ;QACnD;QACA,QAAQ;YACN,OAAO,MAAM,eAAe;uBAC5B;YACA,YAAY,MAAM,UAAU;uBAC5B;4BACA;wBACA;QACF;IACF;IAEA,IAAI,WAAW,CAAA,GAAA,oCAAa,EAAE,OAAO;QAAC,QAAQ;IAAI;IAClD,OAAO,SAAS,EAAE;IAElB,qBACE,0DAAC;QACE,GAAG,CAAA,GAAA,2BAAS,EAAE,YAAY,YAAY,SAAS;QAC/C,GAAG,WAAW;QACf,KAAK;QACL,gBAAc,aAAa;QAC3B,iBAAe,MAAM,UAAU,IAAI;QACnC,gBAAc,aAAa;QAC3B,sBAAoB,kBAAkB;QACtC,iBAAe,cAAc;qBAC7B,0DAAC;QAAM,KAAK;QAAY,GAAG,WAAW;QAAG,GAAG,UAAU;QACrD,6BAAe,0DAAC;QAAM,KAAK;QAAY,GAAG,WAAW;QAAG,GAAG,UAAU;QACrE,YAAY,QAAQ;AAG3B","sources":["packages/react-aria-components/src/ColorThumb.tsx"],"sourcesContent":["import {Color} from 'react-stately';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {GlobalDOMAttributes, HoverEvents, RefObject} from '@react-types/shared';\nimport {mergeProps, useFocusRing, useHover} from 'react-aria';\nimport React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, InputHTMLAttributes, useContext} from 'react';\nimport {RenderProps, useRenderProps} from './utils';\n\ninterface ColorState {\n  getDisplayColor(): Color,\n  isDragging: boolean\n}\n\ninterface InternalColorThumbContextValue {\n  state: ColorState,\n  thumbProps: HTMLAttributes<HTMLElement>,\n  inputXRef: RefObject<HTMLInputElement | null>,\n  inputYRef?: RefObject<HTMLInputElement | null>,\n  xInputProps: InputHTMLAttributes<HTMLInputElement>,\n  yInputProps?: InputHTMLAttributes<HTMLInputElement>,\n  isDisabled?: boolean\n}\n\nexport const InternalColorThumbContext = createContext<InternalColorThumbContextValue | null>(null);\n\nexport interface ColorThumbRenderProps {\n  /**\n   * The selected color, excluding the alpha channel.\n   */\n  color: Color,\n  /**\n   * Whether this thumb is currently being dragged.\n   * @selector [data-dragging]\n   */\n  isDragging: boolean,\n  /**\n   * Whether the thumb is currently hovered with a mouse.\n   * @selector [data-hovered]\n   */\n  isHovered: boolean,\n  /**\n   * Whether the thumb is currently focused.\n   * @selector [data-focused]\n   */\n  isFocused: boolean,\n  /**\n   * Whether the thumb is keyboard focused.\n   * @selector [data-focus-visible]\n   */\n  isFocusVisible: boolean,\n  /**\n   * Whether the thumb is disabled.\n   * @selector [data-disabled]\n   */\n  isDisabled: boolean\n}\n\nexport interface ColorThumbProps extends HoverEvents, RenderProps<ColorThumbRenderProps>, GlobalDOMAttributes<HTMLDivElement> {}\n\n/**\n * A color thumb appears within a ColorArea, ColorSlider, or ColorWheel and allows a user to drag to adjust the color value.\n */\nexport const ColorThumb = forwardRef(function ColorThumb(props: ColorThumbProps, ref: ForwardedRef<HTMLDivElement>) {\n  let {state, thumbProps, inputXRef, inputYRef, xInputProps, yInputProps, isDisabled = false} = useContext(InternalColorThumbContext)!;\n  let {focusProps, isFocused, isFocusVisible} = useFocusRing();\n  let {hoverProps, isHovered} = useHover(props);\n\n  let renderProps = useRenderProps({\n    ...props,\n    defaultClassName: 'react-aria-ColorThumb',\n    defaultStyle: {\n      ...thumbProps.style,\n      backgroundColor: state.getDisplayColor().toString()\n    },\n    values: {\n      color: state.getDisplayColor(),\n      isHovered,\n      isDragging: state.isDragging,\n      isFocused,\n      isFocusVisible,\n      isDisabled\n    }\n  });\n\n  let DOMProps = filterDOMProps(props, {global: true});\n  delete DOMProps.id;\n\n  return (\n    <div\n      {...mergeProps(thumbProps, hoverProps, DOMProps)}\n      {...renderProps}\n      ref={ref}\n      data-hovered={isHovered || undefined}\n      data-dragging={state.isDragging || undefined}\n      data-focused={isFocused || undefined}\n      data-focus-visible={isFocusVisible || undefined}\n      data-disabled={isDisabled || undefined}>\n      <input ref={inputXRef} {...xInputProps} {...focusProps} />\n      {yInputProps && <input ref={inputYRef} {...yInputProps} {...focusProps} />}\n      {renderProps.children}\n    </div>\n  );\n});\n"],"names":[],"version":3,"file":"ColorThumb.main.js.map"}

package/dist/ColorThumb.mjs

@@ -28,7 +28,9 @@ const $e2b71ec1d6016406$export$a3cc47cee1c1ccc = /*#__PURE__*/ (0, $1Ipl1$forwar
             isDisabled: isDisabled
         }
     });
-    let DOMProps = (0, $1Ipl1$filterDOMProps)(props);
+    let DOMProps = (0, $1Ipl1$filterDOMProps)(props, {
+        global: true
+    });
     delete DOMProps.id;
     return /*#__PURE__*/ (0, $1Ipl1$react).createElement("div", {
         ...(0, $1Ipl1$mergeProps)(thumbProps, hoverProps, DOMProps),

package/dist/ColorThumb.module.js

@@ -28,7 +28,9 @@ const $e2b71ec1d6016406$export$a3cc47cee1c1ccc = /*#__PURE__*/ (0, $1Ipl1$forwar
             isDisabled: isDisabled
         }
     });
-    let DOMProps = (0, $1Ipl1$filterDOMProps)(props);
+    let DOMProps = (0, $1Ipl1$filterDOMProps)(props, {
+        global: true
+    });
     delete DOMProps.id;
     return /*#__PURE__*/ (0, $1Ipl1$react).createElement("div", {
         ...(0, $1Ipl1$mergeProps)(thumbProps, hoverProps, DOMProps),

package/dist/ColorThumb.module.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;AAsBO,MAAM,0DAA4B,CAAA,GAAA,oBAAY,EAAyC;AAuCvF,MAAM,yDAAa,CAAA,GAAA,iBAAS,EAAE,SAAS,WAAW,KAAsB,EAAE,GAAiC;IAChH,IAAI,SAAC,KAAK,cAAE,UAAU,aAAE,SAAS,aAAE,SAAS,eAAE,WAAW,eAAE,WAAW,cAAE,aAAa,OAAM,GAAG,CAAA,GAAA,iBAAS,EAAE;IACzG,IAAI,cAAC,UAAU,aAAE,SAAS,kBAAE,cAAc,EAAC,GAAG,CAAA,GAAA,mBAAW;IACzD,IAAI,cAAC,UAAU,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,eAAO,EAAE;IAEvC,IAAI,cAAc,CAAA,GAAA,uCAAa,EAAE;QAC/B,GAAG,KAAK;QACR,kBAAkB;QAClB,cAAc;YACZ,GAAG,WAAW,KAAK;YACnB,iBAAiB,MAAM,eAAe,GAAG,QAAQ;QACnD;QACA,QAAQ;YACN,OAAO,MAAM,eAAe;uBAC5B;YACA,YAAY,MAAM,UAAU;uBAC5B;4BACA;wBACA;QACF;IACF;IAEA,IAAI,WAAW,CAAA,GAAA,qBAAa,EAAE;IAC9B,OAAO,SAAS,EAAE;IAElB,qBACE,gCAAC;QACE,GAAG,CAAA,GAAA,iBAAS,EAAE,YAAY,YAAY,SAAS;QAC/C,GAAG,WAAW;QACf,KAAK;QACL,gBAAc,aAAa;QAC3B,iBAAe,MAAM,UAAU,IAAI;QACnC,gBAAc,aAAa;QAC3B,sBAAoB,kBAAkB;QACtC,iBAAe,cAAc;qBAC7B,gCAAC;QAAM,KAAK;QAAY,GAAG,WAAW;QAAG,GAAG,UAAU;QACrD,6BAAe,gCAAC;QAAM,KAAK;QAAY,GAAG,WAAW;QAAG,GAAG,UAAU;QACrE,YAAY,QAAQ;AAG3B","sources":["packages/react-aria-components/src/ColorThumb.tsx"],"sourcesContent":["import {Color} from 'react-stately';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {HoverEvents, RefObject} from '@react-types/shared';\nimport {mergeProps, useFocusRing, useHover} from 'react-aria';\nimport React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, InputHTMLAttributes, useContext} from 'react';\nimport {RenderProps, useRenderProps} from './utils';\n\ninterface ColorState {\n  getDisplayColor(): Color,\n  isDragging: boolean\n}\n\ninterface InternalColorThumbContextValue {\n  state: ColorState,\n  thumbProps: HTMLAttributes<HTMLElement>,\n  inputXRef: RefObject<HTMLInputElement | null>,\n  inputYRef?: RefObject<HTMLInputElement | null>,\n  xInputProps: InputHTMLAttributes<HTMLInputElement>,\n  yInputProps?: InputHTMLAttributes<HTMLInputElement>,\n  isDisabled?: boolean\n}\n\nexport const InternalColorThumbContext = createContext<InternalColorThumbContextValue | null>(null);\n\nexport interface ColorThumbRenderProps {\n  /**\n   * The selected color, excluding the alpha channel.\n   */\n  color: Color,\n  /**\n   * Whether this thumb is currently being dragged.\n   * @selector [data-dragging]\n   */\n  isDragging: boolean,\n  /**\n   * Whether the thumb is currently hovered with a mouse.\n   * @selector [data-hovered]\n   */\n  isHovered: boolean,\n  /**\n   * Whether the thumb is currently focused.\n   * @selector [data-focused]\n   */\n  isFocused: boolean,\n  /**\n   * Whether the thumb is keyboard focused.\n   * @selector [data-focus-visible]\n   */\n  isFocusVisible: boolean,\n  /**\n   * Whether the thumb is disabled.\n   * @selector [data-disabled]\n   */\n  isDisabled: boolean\n}\n\nexport interface ColorThumbProps extends HoverEvents, RenderProps<ColorThumbRenderProps> {}\n\n/**\n * A color thumb appears within a ColorArea, ColorSlider, or ColorWheel and allows a user to drag to adjust the color value.\n */\nexport const ColorThumb = forwardRef(function ColorThumb(props: ColorThumbProps, ref: ForwardedRef<HTMLDivElement>) {\n  let {state, thumbProps, inputXRef, inputYRef, xInputProps, yInputProps, isDisabled = false} = useContext(InternalColorThumbContext)!;\n  let {focusProps, isFocused, isFocusVisible} = useFocusRing();\n  let {hoverProps, isHovered} = useHover(props);\n\n  let renderProps = useRenderProps({\n    ...props,\n    defaultClassName: 'react-aria-ColorThumb',\n    defaultStyle: {\n      ...thumbProps.style,\n      backgroundColor: state.getDisplayColor().toString()\n    },\n    values: {\n      color: state.getDisplayColor(),\n      isHovered,\n      isDragging: state.isDragging,\n      isFocused,\n      isFocusVisible,\n      isDisabled\n    }\n  });\n\n  let DOMProps = filterDOMProps(props as any);\n  delete DOMProps.id;\n\n  return (\n    <div\n      {...mergeProps(thumbProps, hoverProps, DOMProps)}\n      {...renderProps}\n      ref={ref}\n      data-hovered={isHovered || undefined}\n      data-dragging={state.isDragging || undefined}\n      data-focused={isFocused || undefined}\n      data-focus-visible={isFocusVisible || undefined}\n      data-disabled={isDisabled || undefined}>\n      <input ref={inputXRef} {...xInputProps} {...focusProps} />\n      {yInputProps && <input ref={inputYRef} {...yInputProps} {...focusProps} />}\n      {renderProps.children}\n    </div>\n  );\n});\n"],"names":[],"version":3,"file":"ColorThumb.module.js.map"}
+{"mappings":";;;;;;;;;AAsBO,MAAM,0DAA4B,CAAA,GAAA,oBAAY,EAAyC;AAuCvF,MAAM,yDAAa,CAAA,GAAA,iBAAS,EAAE,SAAS,WAAW,KAAsB,EAAE,GAAiC;IAChH,IAAI,SAAC,KAAK,cAAE,UAAU,aAAE,SAAS,aAAE,SAAS,eAAE,WAAW,eAAE,WAAW,cAAE,aAAa,OAAM,GAAG,CAAA,GAAA,iBAAS,EAAE;IACzG,IAAI,cAAC,UAAU,aAAE,SAAS,kBAAE,cAAc,EAAC,GAAG,CAAA,GAAA,mBAAW;IACzD,IAAI,cAAC,UAAU,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,eAAO,EAAE;IAEvC,IAAI,cAAc,CAAA,GAAA,uCAAa,EAAE;QAC/B,GAAG,KAAK;QACR,kBAAkB;QAClB,cAAc;YACZ,GAAG,WAAW,KAAK;YACnB,iBAAiB,MAAM,eAAe,GAAG,QAAQ;QACnD;QACA,QAAQ;YACN,OAAO,MAAM,eAAe;uBAC5B;YACA,YAAY,MAAM,UAAU;uBAC5B;4BACA;wBACA;QACF;IACF;IAEA,IAAI,WAAW,CAAA,GAAA,qBAAa,EAAE,OAAO;QAAC,QAAQ;IAAI;IAClD,OAAO,SAAS,EAAE;IAElB,qBACE,gCAAC;QACE,GAAG,CAAA,GAAA,iBAAS,EAAE,YAAY,YAAY,SAAS;QAC/C,GAAG,WAAW;QACf,KAAK;QACL,gBAAc,aAAa;QAC3B,iBAAe,MAAM,UAAU,IAAI;QACnC,gBAAc,aAAa;QAC3B,sBAAoB,kBAAkB;QACtC,iBAAe,cAAc;qBAC7B,gCAAC;QAAM,KAAK;QAAY,GAAG,WAAW;QAAG,GAAG,UAAU;QACrD,6BAAe,gCAAC;QAAM,KAAK;QAAY,GAAG,WAAW;QAAG,GAAG,UAAU;QACrE,YAAY,QAAQ;AAG3B","sources":["packages/react-aria-components/src/ColorThumb.tsx"],"sourcesContent":["import {Color} from 'react-stately';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {GlobalDOMAttributes, HoverEvents, RefObject} from '@react-types/shared';\nimport {mergeProps, useFocusRing, useHover} from 'react-aria';\nimport React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, InputHTMLAttributes, useContext} from 'react';\nimport {RenderProps, useRenderProps} from './utils';\n\ninterface ColorState {\n  getDisplayColor(): Color,\n  isDragging: boolean\n}\n\ninterface InternalColorThumbContextValue {\n  state: ColorState,\n  thumbProps: HTMLAttributes<HTMLElement>,\n  inputXRef: RefObject<HTMLInputElement | null>,\n  inputYRef?: RefObject<HTMLInputElement | null>,\n  xInputProps: InputHTMLAttributes<HTMLInputElement>,\n  yInputProps?: InputHTMLAttributes<HTMLInputElement>,\n  isDisabled?: boolean\n}\n\nexport const InternalColorThumbContext = createContext<InternalColorThumbContextValue | null>(null);\n\nexport interface ColorThumbRenderProps {\n  /**\n   * The selected color, excluding the alpha channel.\n   */\n  color: Color,\n  /**\n   * Whether this thumb is currently being dragged.\n   * @selector [data-dragging]\n   */\n  isDragging: boolean,\n  /**\n   * Whether the thumb is currently hovered with a mouse.\n   * @selector [data-hovered]\n   */\n  isHovered: boolean,\n  /**\n   * Whether the thumb is currently focused.\n   * @selector [data-focused]\n   */\n  isFocused: boolean,\n  /**\n   * Whether the thumb is keyboard focused.\n   * @selector [data-focus-visible]\n   */\n  isFocusVisible: boolean,\n  /**\n   * Whether the thumb is disabled.\n   * @selector [data-disabled]\n   */\n  isDisabled: boolean\n}\n\nexport interface ColorThumbProps extends HoverEvents, RenderProps<ColorThumbRenderProps>, GlobalDOMAttributes<HTMLDivElement> {}\n\n/**\n * A color thumb appears within a ColorArea, ColorSlider, or ColorWheel and allows a user to drag to adjust the color value.\n */\nexport const ColorThumb = forwardRef(function ColorThumb(props: ColorThumbProps, ref: ForwardedRef<HTMLDivElement>) {\n  let {state, thumbProps, inputXRef, inputYRef, xInputProps, yInputProps, isDisabled = false} = useContext(InternalColorThumbContext)!;\n  let {focusProps, isFocused, isFocusVisible} = useFocusRing();\n  let {hoverProps, isHovered} = useHover(props);\n\n  let renderProps = useRenderProps({\n    ...props,\n    defaultClassName: 'react-aria-ColorThumb',\n    defaultStyle: {\n      ...thumbProps.style,\n      backgroundColor: state.getDisplayColor().toString()\n    },\n    values: {\n      color: state.getDisplayColor(),\n      isHovered,\n      isDragging: state.isDragging,\n      isFocused,\n      isFocusVisible,\n      isDisabled\n    }\n  });\n\n  let DOMProps = filterDOMProps(props, {global: true});\n  delete DOMProps.id;\n\n  return (\n    <div\n      {...mergeProps(thumbProps, hoverProps, DOMProps)}\n      {...renderProps}\n      ref={ref}\n      data-hovered={isHovered || undefined}\n      data-dragging={state.isDragging || undefined}\n      data-focused={isFocused || undefined}\n      data-focus-visible={isFocusVisible || undefined}\n      data-disabled={isDisabled || undefined}>\n      <input ref={inputXRef} {...xInputProps} {...focusProps} />\n      {yInputProps && <input ref={inputYRef} {...yInputProps} {...focusProps} />}\n      {renderProps.children}\n    </div>\n  );\n});\n"],"names":[],"version":3,"file":"ColorThumb.module.js.map"}

package/dist/ColorWheel.main.js

@@ -43,7 +43,9 @@ const $85ae22f3b2559b04$export$f80663f808113381 = /*#__PURE__*/ (0, $k1tmY$react
             position: 'relative'
         }
     });
-    let DOMProps = (0, $k1tmY$reactariautils.filterDOMProps)(props);
+    let DOMProps = (0, $k1tmY$reactariautils.filterDOMProps)(props, {
+        global: true
+    });
     delete DOMProps.id;
     return /*#__PURE__*/ (0, ($parcel$interopDefault($k1tmY$react))).createElement("div", {
         ...DOMProps,

package/dist/ColorWheel.main.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBO,MAAM,0DAAyB,CAAA,GAAA,0BAAY,EAA0B;AAKrE,MAAM,0DAAa,CAAA,GAAA,uBAAS,EAAE,SAAS,WAAW,KAAsB,EAAE,GAAiC;IAChH,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAc,EAAE,OAAO,KAAK,CAAA,GAAA,2CAAgB;IAC3D,IAAI,QAAQ,CAAA,GAAA,sCAAiB,EAAE;IAC/B,IAAI,WAAW,CAAA,GAAA,mBAAK,EAAE;IACtB,IAAI,cAAC,UAAU,cAAE,UAAU,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,8BAAY,EAAE,OAAO,OAAO;IAEvE,IAAI,cAAc,CAAA,GAAA,wCAAa,EAAE;QAC/B,GAAG,KAAK;QACR,QAAQ;mBACN;YACA,YAAY,MAAM,UAAU,IAAI;QAClC;QACA,kBAAkB;QAClB,cAAc;YACZ,UAAU;QACZ;IACF;IAEA,IAAI,WAAW,CAAA,GAAA,oCAAa,EAAE;IAC9B,OAAO,SAAS,EAAE;IAElB,qBACE,0DAAC;QACE,GAAG,QAAQ;QACX,GAAG,WAAW;QACf,KAAK;QACL,MAAM,MAAM,IAAI,IAAI;QACpB,iBAAe,MAAM,UAAU,IAAI;qBACnC,0DAAC,CAAA,GAAA,kCAAO;QACN,QAAQ;YACN;gBAAC;gBAAwB;aAAM;YAC/B;gBAAC;gBAAwB;aAAW;YACpC;gBAAC,CAAA,GAAA,mDAAwB;gBAAG;2BAAC;gCAAO;oBAAY,WAAW;oBAAU,aAAa;oBAAY,YAAY,MAAM,UAAU;gBAAA;aAAE;SAC7H;OACA,YAAY,QAAQ;AAI7B;AAMO,MAAM,0DAAyB,CAAA,GAAA,0BAAY,EAA6D;AAKxG,MAAM,0DAAkB,CAAA,GAAA,uBAAS,EAAE,SAAS,gBAAgB,KAA2B,EAAE,GAAiC;IAC/H,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAc,EAAE,OAAO,KAAK;IAC3C,IAAI,QAAQ,CAAA,GAAA,uBAAS,EAAE;IACvB,6DAA6D;IAC7D,IAAI,aAAC,SAAS,SAAE,KAAK,EAAE,GAAG,MAAK,GAAG;IAElC,IAAI,cAAc,CAAA,GAAA,wCAAa,EAAE;QAC/B,GAAG,KAAK;QACR,kBAAkB;QAClB,QAAQ;YACN,YAAY,MAAM,UAAU;mBAC5B;QACF;IACF;IAEA,qBACE,0DAAC;QACE,GAAG,IAAI;QACP,GAAG,WAAW;QACf,KAAK;QACL,iBAAe,MAAM,UAAU,IAAI;;AAEzC","sources":["packages/react-aria-components/src/ColorWheel.tsx"],"sourcesContent":["import {AriaColorWheelOptions, useColorWheel} from 'react-aria';\nimport {ColorWheelContext} from './RSPContexts';\nimport {ColorWheelState, useColorWheelState} from 'react-stately';\nimport {ContextValue, Provider, RenderProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps} from './utils';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {InternalColorThumbContext} from './ColorThumb';\nimport React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, useContext, useRef} from 'react';\n\nexport interface ColorWheelRenderProps {\n  /**\n   * Whether the color wheel is disabled.\n   * @selector [data-disabled]\n   */\n  isDisabled: boolean,\n  /**\n   * State of the color color wheel.\n   */\n  state: ColorWheelState\n}\n\nexport interface ColorWheelProps extends AriaColorWheelOptions, RenderProps<ColorWheelRenderProps>, SlotProps {}\n\nexport const ColorWheelStateContext = createContext<ColorWheelState | null>(null);\n\n/**\n * A color wheel allows users to adjust the hue of an HSL or HSB color value on a circular track.\n */\nexport const ColorWheel = forwardRef(function ColorWheel(props: ColorWheelProps, ref: ForwardedRef<HTMLDivElement>) {\n  [props, ref] = useContextProps(props, ref, ColorWheelContext);\n  let state = useColorWheelState(props);\n  let inputRef = useRef(null);\n  let {trackProps, inputProps, thumbProps} = useColorWheel(props, state, inputRef);\n\n  let renderProps = useRenderProps({\n    ...props,\n    values: {\n      state,\n      isDisabled: props.isDisabled || false\n    },\n    defaultClassName: 'react-aria-ColorWheel',\n    defaultStyle: {\n      position: 'relative'\n    }\n  });\n\n  let DOMProps = filterDOMProps(props);\n  delete DOMProps.id;\n\n  return (\n    <div\n      {...DOMProps}\n      {...renderProps}\n      ref={ref}\n      slot={props.slot || undefined}\n      data-disabled={props.isDisabled || undefined}>\n      <Provider\n        values={[\n          [ColorWheelStateContext, state],\n          [ColorWheelTrackContext, trackProps],\n          [InternalColorThumbContext, {state, thumbProps, inputXRef: inputRef, xInputProps: inputProps, isDisabled: props.isDisabled}]\n        ]}>\n        {renderProps.children}\n      </Provider>\n    </div>\n  );\n});\n\nexport interface ColorWheelTrackRenderProps extends ColorWheelRenderProps {}\nexport interface ColorWheelTrackProps extends StyleRenderProps<ColorWheelTrackRenderProps> {}\ninterface ColorWheelTrackContextValue extends Omit<HTMLAttributes<HTMLElement>, 'children' | 'className' | 'style'>, ColorWheelTrackProps {}\n\nexport const ColorWheelTrackContext = createContext<ContextValue<ColorWheelTrackContextValue, HTMLDivElement>>(null);\n\n/**\n * A color wheel track renders a circular gradient track.\n */\nexport const ColorWheelTrack = forwardRef(function ColorWheelTrack(props: ColorWheelTrackProps, ref: ForwardedRef<HTMLDivElement>) {\n  [props, ref] = useContextProps(props, ref, ColorWheelTrackContext);\n  let state = useContext(ColorWheelStateContext)!;\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  let {className, style, ...rest} = props;\n\n  let renderProps = useRenderProps({\n    ...props,\n    defaultClassName: 'react-aria-ColorWheelTrack',\n    values: {\n      isDisabled: state.isDisabled,\n      state\n    }\n  });\n\n  return (\n    <div\n      {...rest}\n      {...renderProps}\n      ref={ref}\n      data-disabled={state.isDisabled || undefined} />\n  );\n});\n"],"names":[],"version":3,"file":"ColorWheel.main.js.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBO,MAAM,0DAAyB,CAAA,GAAA,0BAAY,EAA0B;AAKrE,MAAM,0DAAa,CAAA,GAAA,uBAAS,EAAE,SAAS,WAAW,KAAsB,EAAE,GAAiC;IAChH,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAc,EAAE,OAAO,KAAK,CAAA,GAAA,2CAAgB;IAC3D,IAAI,QAAQ,CAAA,GAAA,sCAAiB,EAAE;IAC/B,IAAI,WAAW,CAAA,GAAA,mBAAK,EAAE;IACtB,IAAI,cAAC,UAAU,cAAE,UAAU,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,8BAAY,EAAE,OAAO,OAAO;IAEvE,IAAI,cAAc,CAAA,GAAA,wCAAa,EAAE;QAC/B,GAAG,KAAK;QACR,QAAQ;mBACN;YACA,YAAY,MAAM,UAAU,IAAI;QAClC;QACA,kBAAkB;QAClB,cAAc;YACZ,UAAU;QACZ;IACF;IAEA,IAAI,WAAW,CAAA,GAAA,oCAAa,EAAE,OAAO;QAAC,QAAQ;IAAI;IAClD,OAAO,SAAS,EAAE;IAElB,qBACE,0DAAC;QACE,GAAG,QAAQ;QACX,GAAG,WAAW;QACf,KAAK;QACL,MAAM,MAAM,IAAI,IAAI;QACpB,iBAAe,MAAM,UAAU,IAAI;qBACnC,0DAAC,CAAA,GAAA,kCAAO;QACN,QAAQ;YACN;gBAAC;gBAAwB;aAAM;YAC/B;gBAAC;gBAAwB;aAAW;YACpC;gBAAC,CAAA,GAAA,mDAAwB;gBAAG;2BAAC;gCAAO;oBAAY,WAAW;oBAAU,aAAa;oBAAY,YAAY,MAAM,UAAU;gBAAA;aAAE;SAC7H;OACA,YAAY,QAAQ;AAI7B;AAMO,MAAM,0DAAyB,CAAA,GAAA,0BAAY,EAA6D;AAKxG,MAAM,0DAAkB,CAAA,GAAA,uBAAS,EAAE,SAAS,gBAAgB,KAA2B,EAAE,GAAiC;IAC/H,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAc,EAAE,OAAO,KAAK;IAC3C,IAAI,QAAQ,CAAA,GAAA,uBAAS,EAAE;IACvB,6DAA6D;IAC7D,IAAI,aAAC,SAAS,SAAE,KAAK,EAAE,GAAG,MAAK,GAAG;IAElC,IAAI,cAAc,CAAA,GAAA,wCAAa,EAAE;QAC/B,GAAG,KAAK;QACR,kBAAkB;QAClB,QAAQ;YACN,YAAY,MAAM,UAAU;mBAC5B;QACF;IACF;IAEA,qBACE,0DAAC;QACE,GAAG,IAAI;QACP,GAAG,WAAW;QACf,KAAK;QACL,iBAAe,MAAM,UAAU,IAAI;;AAEzC","sources":["packages/react-aria-components/src/ColorWheel.tsx"],"sourcesContent":["import {AriaColorWheelOptions, useColorWheel} from 'react-aria';\nimport {ColorWheelContext} from './RSPContexts';\nimport {ColorWheelState, useColorWheelState} from 'react-stately';\nimport {ContextValue, Provider, RenderProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps} from './utils';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {GlobalDOMAttributes} from '@react-types/shared';\nimport {InternalColorThumbContext} from './ColorThumb';\nimport React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, useContext, useRef} from 'react';\n\nexport interface ColorWheelRenderProps {\n  /**\n   * Whether the color wheel is disabled.\n   * @selector [data-disabled]\n   */\n  isDisabled: boolean,\n  /**\n   * State of the color wheel.\n   */\n  state: ColorWheelState\n}\n\nexport interface ColorWheelProps extends AriaColorWheelOptions, RenderProps<ColorWheelRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {}\n\nexport const ColorWheelStateContext = createContext<ColorWheelState | null>(null);\n\n/**\n * A color wheel allows users to adjust the hue of an HSL or HSB color value on a circular track.\n */\nexport const ColorWheel = forwardRef(function ColorWheel(props: ColorWheelProps, ref: ForwardedRef<HTMLDivElement>) {\n  [props, ref] = useContextProps(props, ref, ColorWheelContext);\n  let state = useColorWheelState(props);\n  let inputRef = useRef(null);\n  let {trackProps, inputProps, thumbProps} = useColorWheel(props, state, inputRef);\n\n  let renderProps = useRenderProps({\n    ...props,\n    values: {\n      state,\n      isDisabled: props.isDisabled || false\n    },\n    defaultClassName: 'react-aria-ColorWheel',\n    defaultStyle: {\n      position: 'relative'\n    }\n  });\n\n  let DOMProps = filterDOMProps(props, {global: true});\n  delete DOMProps.id;\n\n  return (\n    <div\n      {...DOMProps}\n      {...renderProps}\n      ref={ref}\n      slot={props.slot || undefined}\n      data-disabled={props.isDisabled || undefined}>\n      <Provider\n        values={[\n          [ColorWheelStateContext, state],\n          [ColorWheelTrackContext, trackProps],\n          [InternalColorThumbContext, {state, thumbProps, inputXRef: inputRef, xInputProps: inputProps, isDisabled: props.isDisabled}]\n        ]}>\n        {renderProps.children}\n      </Provider>\n    </div>\n  );\n});\n\nexport interface ColorWheelTrackRenderProps extends ColorWheelRenderProps {}\nexport interface ColorWheelTrackProps extends StyleRenderProps<ColorWheelTrackRenderProps>, GlobalDOMAttributes<HTMLDivElement> {}\ninterface ColorWheelTrackContextValue extends Omit<HTMLAttributes<HTMLElement>, 'children' | 'className' | 'style'>, StyleRenderProps<ColorWheelTrackRenderProps> {}\n\nexport const ColorWheelTrackContext = createContext<ContextValue<ColorWheelTrackContextValue, HTMLDivElement>>(null);\n\n/**\n * A color wheel track renders a circular gradient track.\n */\nexport const ColorWheelTrack = forwardRef(function ColorWheelTrack(props: ColorWheelTrackProps, ref: ForwardedRef<HTMLDivElement>) {\n  [props, ref] = useContextProps(props, ref, ColorWheelTrackContext);\n  let state = useContext(ColorWheelStateContext)!;\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  let {className, style, ...rest} = props;\n\n  let renderProps = useRenderProps({\n    ...props,\n    defaultClassName: 'react-aria-ColorWheelTrack',\n    values: {\n      isDisabled: state.isDisabled,\n      state\n    }\n  });\n\n  return (\n    <div\n      {...rest}\n      {...renderProps}\n      ref={ref}\n      data-disabled={state.isDisabled || undefined} />\n  );\n});\n"],"names":[],"version":3,"file":"ColorWheel.main.js.map"}

package/dist/ColorWheel.mjs

@@ -30,7 +30,9 @@ const $66beab92e74e495f$export$f80663f808113381 = /*#__PURE__*/ (0, $fp8U1$forwa
             position: 'relative'
         }
     });
-    let DOMProps = (0, $fp8U1$filterDOMProps)(props);
+    let DOMProps = (0, $fp8U1$filterDOMProps)(props, {
+        global: true
+    });
     delete DOMProps.id;
     return /*#__PURE__*/ (0, $fp8U1$react).createElement("div", {
         ...DOMProps,

package/dist/ColorWheel.module.js

@@ -30,7 +30,9 @@ const $66beab92e74e495f$export$f80663f808113381 = /*#__PURE__*/ (0, $fp8U1$forwa
             position: 'relative'
         }
     });
-    let DOMProps = (0, $fp8U1$filterDOMProps)(props);
+    let DOMProps = (0, $fp8U1$filterDOMProps)(props, {
+        global: true
+    });
     delete DOMProps.id;
     return /*#__PURE__*/ (0, $fp8U1$react).createElement("div", {
         ...DOMProps,

package/dist/ColorWheel.module.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;AAsBO,MAAM,0DAAyB,CAAA,GAAA,oBAAY,EAA0B;AAKrE,MAAM,0DAAa,CAAA,GAAA,iBAAS,EAAE,SAAS,WAAW,KAAsB,EAAE,GAAiC;IAChH,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAc,EAAE,OAAO,KAAK,CAAA,GAAA,yCAAgB;IAC3D,IAAI,QAAQ,CAAA,GAAA,yBAAiB,EAAE;IAC/B,IAAI,WAAW,CAAA,GAAA,aAAK,EAAE;IACtB,IAAI,cAAC,UAAU,cAAE,UAAU,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,oBAAY,EAAE,OAAO,OAAO;IAEvE,IAAI,cAAc,CAAA,GAAA,uCAAa,EAAE;QAC/B,GAAG,KAAK;QACR,QAAQ;mBACN;YACA,YAAY,MAAM,UAAU,IAAI;QAClC;QACA,kBAAkB;QAClB,cAAc;YACZ,UAAU;QACZ;IACF;IAEA,IAAI,WAAW,CAAA,GAAA,qBAAa,EAAE;IAC9B,OAAO,SAAS,EAAE;IAElB,qBACE,gCAAC;QACE,GAAG,QAAQ;QACX,GAAG,WAAW;QACf,KAAK;QACL,MAAM,MAAM,IAAI,IAAI;QACpB,iBAAe,MAAM,UAAU,IAAI;qBACnC,gCAAC,CAAA,GAAA,yCAAO;QACN,QAAQ;YACN;gBAAC;gBAAwB;aAAM;YAC/B;gBAAC;gBAAwB;aAAW;YACpC;gBAAC,CAAA,GAAA,yCAAwB;gBAAG;2BAAC;gCAAO;oBAAY,WAAW;oBAAU,aAAa;oBAAY,YAAY,MAAM,UAAU;gBAAA;aAAE;SAC7H;OACA,YAAY,QAAQ;AAI7B;AAMO,MAAM,0DAAyB,CAAA,GAAA,oBAAY,EAA6D;AAKxG,MAAM,0DAAkB,CAAA,GAAA,iBAAS,EAAE,SAAS,gBAAgB,KAA2B,EAAE,GAAiC;IAC/H,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAc,EAAE,OAAO,KAAK;IAC3C,IAAI,QAAQ,CAAA,GAAA,iBAAS,EAAE;IACvB,6DAA6D;IAC7D,IAAI,aAAC,SAAS,SAAE,KAAK,EAAE,GAAG,MAAK,GAAG;IAElC,IAAI,cAAc,CAAA,GAAA,uCAAa,EAAE;QAC/B,GAAG,KAAK;QACR,kBAAkB;QAClB,QAAQ;YACN,YAAY,MAAM,UAAU;mBAC5B;QACF;IACF;IAEA,qBACE,gCAAC;QACE,GAAG,IAAI;QACP,GAAG,WAAW;QACf,KAAK;QACL,iBAAe,MAAM,UAAU,IAAI;;AAEzC","sources":["packages/react-aria-components/src/ColorWheel.tsx"],"sourcesContent":["import {AriaColorWheelOptions, useColorWheel} from 'react-aria';\nimport {ColorWheelContext} from './RSPContexts';\nimport {ColorWheelState, useColorWheelState} from 'react-stately';\nimport {ContextValue, Provider, RenderProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps} from './utils';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {InternalColorThumbContext} from './ColorThumb';\nimport React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, useContext, useRef} from 'react';\n\nexport interface ColorWheelRenderProps {\n  /**\n   * Whether the color wheel is disabled.\n   * @selector [data-disabled]\n   */\n  isDisabled: boolean,\n  /**\n   * State of the color color wheel.\n   */\n  state: ColorWheelState\n}\n\nexport interface ColorWheelProps extends AriaColorWheelOptions, RenderProps<ColorWheelRenderProps>, SlotProps {}\n\nexport const ColorWheelStateContext = createContext<ColorWheelState | null>(null);\n\n/**\n * A color wheel allows users to adjust the hue of an HSL or HSB color value on a circular track.\n */\nexport const ColorWheel = forwardRef(function ColorWheel(props: ColorWheelProps, ref: ForwardedRef<HTMLDivElement>) {\n  [props, ref] = useContextProps(props, ref, ColorWheelContext);\n  let state = useColorWheelState(props);\n  let inputRef = useRef(null);\n  let {trackProps, inputProps, thumbProps} = useColorWheel(props, state, inputRef);\n\n  let renderProps = useRenderProps({\n    ...props,\n    values: {\n      state,\n      isDisabled: props.isDisabled || false\n    },\n    defaultClassName: 'react-aria-ColorWheel',\n    defaultStyle: {\n      position: 'relative'\n    }\n  });\n\n  let DOMProps = filterDOMProps(props);\n  delete DOMProps.id;\n\n  return (\n    <div\n      {...DOMProps}\n      {...renderProps}\n      ref={ref}\n      slot={props.slot || undefined}\n      data-disabled={props.isDisabled || undefined}>\n      <Provider\n        values={[\n          [ColorWheelStateContext, state],\n          [ColorWheelTrackContext, trackProps],\n          [InternalColorThumbContext, {state, thumbProps, inputXRef: inputRef, xInputProps: inputProps, isDisabled: props.isDisabled}]\n        ]}>\n        {renderProps.children}\n      </Provider>\n    </div>\n  );\n});\n\nexport interface ColorWheelTrackRenderProps extends ColorWheelRenderProps {}\nexport interface ColorWheelTrackProps extends StyleRenderProps<ColorWheelTrackRenderProps> {}\ninterface ColorWheelTrackContextValue extends Omit<HTMLAttributes<HTMLElement>, 'children' | 'className' | 'style'>, ColorWheelTrackProps {}\n\nexport const ColorWheelTrackContext = createContext<ContextValue<ColorWheelTrackContextValue, HTMLDivElement>>(null);\n\n/**\n * A color wheel track renders a circular gradient track.\n */\nexport const ColorWheelTrack = forwardRef(function ColorWheelTrack(props: ColorWheelTrackProps, ref: ForwardedRef<HTMLDivElement>) {\n  [props, ref] = useContextProps(props, ref, ColorWheelTrackContext);\n  let state = useContext(ColorWheelStateContext)!;\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  let {className, style, ...rest} = props;\n\n  let renderProps = useRenderProps({\n    ...props,\n    defaultClassName: 'react-aria-ColorWheelTrack',\n    values: {\n      isDisabled: state.isDisabled,\n      state\n    }\n  });\n\n  return (\n    <div\n      {...rest}\n      {...renderProps}\n      ref={ref}\n      data-disabled={state.isDisabled || undefined} />\n  );\n});\n"],"names":[],"version":3,"file":"ColorWheel.module.js.map"}
+{"mappings":";;;;;;;;;;;;;;;AAuBO,MAAM,0DAAyB,CAAA,GAAA,oBAAY,EAA0B;AAKrE,MAAM,0DAAa,CAAA,GAAA,iBAAS,EAAE,SAAS,WAAW,KAAsB,EAAE,GAAiC;IAChH,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAc,EAAE,OAAO,KAAK,CAAA,GAAA,yCAAgB;IAC3D,IAAI,QAAQ,CAAA,GAAA,yBAAiB,EAAE;IAC/B,IAAI,WAAW,CAAA,GAAA,aAAK,EAAE;IACtB,IAAI,cAAC,UAAU,cAAE,UAAU,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,oBAAY,EAAE,OAAO,OAAO;IAEvE,IAAI,cAAc,CAAA,GAAA,uCAAa,EAAE;QAC/B,GAAG,KAAK;QACR,QAAQ;mBACN;YACA,YAAY,MAAM,UAAU,IAAI;QAClC;QACA,kBAAkB;QAClB,cAAc;YACZ,UAAU;QACZ;IACF;IAEA,IAAI,WAAW,CAAA,GAAA,qBAAa,EAAE,OAAO;QAAC,QAAQ;IAAI;IAClD,OAAO,SAAS,EAAE;IAElB,qBACE,gCAAC;QACE,GAAG,QAAQ;QACX,GAAG,WAAW;QACf,KAAK;QACL,MAAM,MAAM,IAAI,IAAI;QACpB,iBAAe,MAAM,UAAU,IAAI;qBACnC,gCAAC,CAAA,GAAA,yCAAO;QACN,QAAQ;YACN;gBAAC;gBAAwB;aAAM;YAC/B;gBAAC;gBAAwB;aAAW;YACpC;gBAAC,CAAA,GAAA,yCAAwB;gBAAG;2BAAC;gCAAO;oBAAY,WAAW;oBAAU,aAAa;oBAAY,YAAY,MAAM,UAAU;gBAAA;aAAE;SAC7H;OACA,YAAY,QAAQ;AAI7B;AAMO,MAAM,0DAAyB,CAAA,GAAA,oBAAY,EAA6D;AAKxG,MAAM,0DAAkB,CAAA,GAAA,iBAAS,EAAE,SAAS,gBAAgB,KAA2B,EAAE,GAAiC;IAC/H,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAc,EAAE,OAAO,KAAK;IAC3C,IAAI,QAAQ,CAAA,GAAA,iBAAS,EAAE;IACvB,6DAA6D;IAC7D,IAAI,aAAC,SAAS,SAAE,KAAK,EAAE,GAAG,MAAK,GAAG;IAElC,IAAI,cAAc,CAAA,GAAA,uCAAa,EAAE;QAC/B,GAAG,KAAK;QACR,kBAAkB;QAClB,QAAQ;YACN,YAAY,MAAM,UAAU;mBAC5B;QACF;IACF;IAEA,qBACE,gCAAC;QACE,GAAG,IAAI;QACP,GAAG,WAAW;QACf,KAAK;QACL,iBAAe,MAAM,UAAU,IAAI;;AAEzC","sources":["packages/react-aria-components/src/ColorWheel.tsx"],"sourcesContent":["import {AriaColorWheelOptions, useColorWheel} from 'react-aria';\nimport {ColorWheelContext} from './RSPContexts';\nimport {ColorWheelState, useColorWheelState} from 'react-stately';\nimport {ContextValue, Provider, RenderProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps} from './utils';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {GlobalDOMAttributes} from '@react-types/shared';\nimport {InternalColorThumbContext} from './ColorThumb';\nimport React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, useContext, useRef} from 'react';\n\nexport interface ColorWheelRenderProps {\n  /**\n   * Whether the color wheel is disabled.\n   * @selector [data-disabled]\n   */\n  isDisabled: boolean,\n  /**\n   * State of the color wheel.\n   */\n  state: ColorWheelState\n}\n\nexport interface ColorWheelProps extends AriaColorWheelOptions, RenderProps<ColorWheelRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {}\n\nexport const ColorWheelStateContext = createContext<ColorWheelState | null>(null);\n\n/**\n * A color wheel allows users to adjust the hue of an HSL or HSB color value on a circular track.\n */\nexport const ColorWheel = forwardRef(function ColorWheel(props: ColorWheelProps, ref: ForwardedRef<HTMLDivElement>) {\n  [props, ref] = useContextProps(props, ref, ColorWheelContext);\n  let state = useColorWheelState(props);\n  let inputRef = useRef(null);\n  let {trackProps, inputProps, thumbProps} = useColorWheel(props, state, inputRef);\n\n  let renderProps = useRenderProps({\n    ...props,\n    values: {\n      state,\n      isDisabled: props.isDisabled || false\n    },\n    defaultClassName: 'react-aria-ColorWheel',\n    defaultStyle: {\n      position: 'relative'\n    }\n  });\n\n  let DOMProps = filterDOMProps(props, {global: true});\n  delete DOMProps.id;\n\n  return (\n    <div\n      {...DOMProps}\n      {...renderProps}\n      ref={ref}\n      slot={props.slot || undefined}\n      data-disabled={props.isDisabled || undefined}>\n      <Provider\n        values={[\n          [ColorWheelStateContext, state],\n          [ColorWheelTrackContext, trackProps],\n          [InternalColorThumbContext, {state, thumbProps, inputXRef: inputRef, xInputProps: inputProps, isDisabled: props.isDisabled}]\n        ]}>\n        {renderProps.children}\n      </Provider>\n    </div>\n  );\n});\n\nexport interface ColorWheelTrackRenderProps extends ColorWheelRenderProps {}\nexport interface ColorWheelTrackProps extends StyleRenderProps<ColorWheelTrackRenderProps>, GlobalDOMAttributes<HTMLDivElement> {}\ninterface ColorWheelTrackContextValue extends Omit<HTMLAttributes<HTMLElement>, 'children' | 'className' | 'style'>, StyleRenderProps<ColorWheelTrackRenderProps> {}\n\nexport const ColorWheelTrackContext = createContext<ContextValue<ColorWheelTrackContextValue, HTMLDivElement>>(null);\n\n/**\n * A color wheel track renders a circular gradient track.\n */\nexport const ColorWheelTrack = forwardRef(function ColorWheelTrack(props: ColorWheelTrackProps, ref: ForwardedRef<HTMLDivElement>) {\n  [props, ref] = useContextProps(props, ref, ColorWheelTrackContext);\n  let state = useContext(ColorWheelStateContext)!;\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  let {className, style, ...rest} = props;\n\n  let renderProps = useRenderProps({\n    ...props,\n    defaultClassName: 'react-aria-ColorWheelTrack',\n    values: {\n      isDisabled: state.isDisabled,\n      state\n    }\n  });\n\n  return (\n    <div\n      {...rest}\n      {...renderProps}\n      ref={ref}\n      data-disabled={state.isDisabled || undefined} />\n  );\n});\n"],"names":[],"version":3,"file":"ColorWheel.module.js.map"}

package/dist/ComboBox.main.js

@@ -165,7 +165,9 @@ function $1d716ce69f118fad$var$ComboBoxInner({ props: props, collection: collect
         values: renderPropsState,
         defaultClassName: 'react-aria-ComboBox'
     });
-    let DOMProps = (0, $9obPC$reactariautils.filterDOMProps)(props);
+    let DOMProps = (0, $9obPC$reactariautils.filterDOMProps)(props, {
+        global: true
+    });
     delete DOMProps.id;
     var _state_selectedKey;
     return /*#__PURE__*/ (0, ($parcel$interopDefault($9obPC$react))).createElement((0, $c5ccf687772c0422$exports.Provider), {
@@ -260,6 +262,7 @@ function $1d716ce69f118fad$var$ComboBoxInner({ props: props, collection: collect
     }), name && formValue === 'key' && /*#__PURE__*/ (0, ($parcel$interopDefault($9obPC$react))).createElement("input", {
         type: "hidden",
         name: name,
+        form: props.form,
         value: (_state_selectedKey = state.selectedKey) !== null && _state_selectedKey !== void 0 ? _state_selectedKey : ''
     }));
 }