@react-spectrum/color 3.0.0-beta.6 → 3.0.0-beta.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/main.css +1 -2
  2. package/dist/main.js +583 -396
  3. package/dist/main.js.map +1 -1
  4. package/dist/module.js +565 -337
  5. package/dist/module.js.map +1 -1
  6. package/dist/types.d.ts +6 -2
  7. package/dist/types.d.ts.map +1 -1
  8. package/package.json +19 -19
  9. package/src/ColorArea.tsx +202 -0
  10. package/src/index.ts +1 -0
  11. package/dist/main.css.map +0 -1
package/dist/main.css CHANGED
@@ -1,2 +1 @@
1
- ._spectrum-ColorHandle_90b59._focus-ring_90b59,._spectrum-ColorHandle_90b59._is-focused_90b59{width:calc(var(--spectrum-global-dimension-size-200) * 2);height:calc(var(--spectrum-global-dimension-size-200) * 2);margin-left:calc(-1 * var(--spectrum-global-dimension-size-200));margin-top:calc(-1 * var(--spectrum-global-dimension-size-200))}._spectrum-ColorHandle_90b59{display:block;position:absolute;z-index:1;box-sizing:border-box;width:var(--spectrum-global-dimension-size-200);height:var(--spectrum-global-dimension-size-200);margin-left:calc(-1 * var(--spectrum-global-dimension-size-200) / 2);margin-top:calc(-1 * var(--spectrum-global-dimension-size-200) / 2);border-width:var(--spectrum-global-dimension-static-size-25,2px);border-style:solid;background-size:16px 16px;background-position:-2px -2px,-2px 6px,6px -10px,-10px -2px;transition:width .13s ease-in-out,height .13s ease-in-out,border-width .13s ease-in-out,margin-left .13s ease-in-out,margin-top .13s ease-in-out}._spectrum-ColorHandle_90b59,._spectrum-ColorHandle_90b59:after{border-radius:100%}._spectrum-ColorHandle_90b59:after{content:"";left:calc(50% - var(--spectrum-global-dimension-size-300) / 2);top:calc(50% - var(--spectrum-global-dimension-size-300) / 2);position:absolute;display:block;width:var(--spectrum-global-dimension-size-300);height:var(--spectrum-global-dimension-size-300)}._spectrum-ColorHandle_90b59._is-disabled_90b59{pointer-events:none}._spectrum-ColorHandle-color_90b59{border-radius:100%;width:100%;height:100%}._spectrum-ColorHandle_90b59{border-color:var(--spectrum-global-color-static-white,#fff);box-shadow:0 0 0 var(--spectrum-global-dimension-static-size-10,1px) rgba(0,0,0,.42);background-color:#fff;background-image:linear-gradient(-45deg,transparent 75.5%,#bcbcbc 0),linear-gradient(45deg,transparent 75.5%,#bcbcbc 0),linear-gradient(-45deg,#bcbcbc 25.5%,transparent 0),linear-gradient(45deg,#bcbcbc 25.5%,transparent 0)}._spectrum-ColorHandle_90b59._is-disabled_90b59{border-color:var(--spectrum-global-color-gray-400);background:var(--spectrum-global-color-gray-300);box-shadow:none}._spectrum-ColorHandle_90b59._is-disabled_90b59 ._spectrum-ColorHandle-color_90b59{display:none}._spectrum-ColorHandle-color_90b59{box-shadow:inset 0 0 0 var(--spectrum-global-dimension-static-size-10,1px) rgba(0,0,0,.42)}._spectrum-ColorLoupe_b3834{width:calc(var(--spectrum-global-dimension-static-size-600, 48px) + var(--spectrum-global-dimension-static-size-25, 2px) * 2);height:calc(var(--spectrum-global-dimension-static-size-800, 64px) + var(--spectrum-global-dimension-static-size-25, 2px) * 2);position:absolute;transform:translateY(8px);opacity:0;transform-origin:bottom center;bottom:calc(50% + 16px);left:calc(50% - (var(--spectrum-global-dimension-static-size-600, 48px) + var(--spectrum-global-dimension-static-size-25, 2px) * 2) / 2);transition:transform .1s ease-in-out,opacity 125ms ease-in-out;pointer-events:none}._spectrum-ColorLoupe_b3834._is-open_b3834{transform:translate(0);opacity:1}._spectrum-ColorLoupe-outer_b3834{stroke-width:var(--spectrum-global-dimension-static-size-10,1px);fill:var(--spectrum-global-color-static-white,#fff);stroke:rgba(50,50,50,.1)}._spectrum-ColorLoupe-inner-background_b3834{fill:#fff}._spectrum-ColorLoupe-inner-checker_b3834{fill:#bcbcbc}._spectrum-ColorWheel_58477._is-focused_58477 ._spectrum-ColorWheel-handle_58477{width:calc(var(--spectrum-global-dimension-size-200) * 2);height:calc(var(--spectrum-global-dimension-size-200) * 2);margin-left:calc(-1 * var(--spectrum-global-dimension-size-200));margin-top:calc(-1 * var(--spectrum-global-dimension-size-200))}._spectrum-ColorWheel-slider_58477{opacity:.0001;position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;margin:0;pointer-events:none}._spectrum-ColorWheel_58477{position:relative;display:block;width:calc(var(--spectrum-global-dimension-size-125) * 16);height:calc(var(--spectrum-global-dimension-size-125) * 16);--spectrum-colorwheel-track-thickness:var(--spectrum-global-dimension-size-300);border-radius:100%;-webkit-user-select:none;-ms-user-select:none;user-select:none;-ms-touch-action:none;touch-action:none;cursor:default}._spectrum-ColorWheel_58477 ._spectrum-ColorWheel-handle_58477{margin:0}._spectrum-ColorWheel_58477._is-focused_58477{z-index:2}._spectrum-ColorWheel_58477._is-disabled_58477{pointer-events:none}._spectrum-ColorWheel_58477._is-dragged_58477{z-index:2}._spectrum-ColorWheel-gradient_58477{position:relative;z-index:0;width:calc(var(--spectrum-global-dimension-size-125) * 16);height:calc(var(--spectrum-global-dimension-size-125) * 16)}._spectrum-ColorWheel-gradient_58477:after,._spectrum-ColorWheel-gradient_58477:before{content:"";position:absolute;border-radius:100%;border-width:var(--spectrum-alias-border-size-thin,var(--spectrum-global-dimension-static-size-10));border-style:solid}._spectrum-ColorWheel-gradient_58477:before{top:0;left:0;bottom:0;right:0}._spectrum-ColorWheel-gradient_58477:after{top:calc(var(--spectrum-global-dimension-size-300) - var(--spectrum-alias-border-size-thin, var(--spectrum-global-dimension-static-size-10)));left:calc(var(--spectrum-global-dimension-size-300) - var(--spectrum-alias-border-size-thin, var(--spectrum-global-dimension-static-size-10)));bottom:calc(var(--spectrum-global-dimension-size-300) - var(--spectrum-alias-border-size-thin, var(--spectrum-global-dimension-static-size-10)));right:calc(var(--spectrum-global-dimension-size-300) - var(--spectrum-alias-border-size-thin, var(--spectrum-global-dimension-static-size-10)))}._spectrum-ColorWheel_58477._is-disabled_58477 ._spectrum-ColorWheel-gradient_58477{background:var(--spectrum-global-color-gray-300)!important}._spectrum-ColorWheel_58477._is-disabled_58477 ._spectrum-ColorWheel-gradient_58477:after,._spectrum-ColorWheel_58477._is-disabled_58477 ._spectrum-ColorWheel-gradient_58477:before{border-color:var(--spectrum-global-color-gray-300)}._spectrum-ColorWheel_58477._is-disabled_58477 ._spectrum-ColorWheel-segment_58477{display:none}._spectrum-ColorWheel-gradient_58477:after,._spectrum-ColorWheel-gradient_58477:before{border-color:var(--spectrum-colorarea-border-color)}._spectrum-ColorSlider_d5afb._is-focused_d5afb ._spectrum-ColorSlider-handle_d5afb{width:calc(var(--spectrum-global-dimension-size-200) * 2);height:calc(var(--spectrum-global-dimension-size-200) * 2);margin-left:calc(-1 * var(--spectrum-global-dimension-size-200));margin-top:calc(-1 * var(--spectrum-global-dimension-size-200))}._spectrum-ColorSlider-slider_d5afb{opacity:.0001;position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;margin:0;pointer-events:none}._spectrum-ColorSlider-container--horizontal_d5afb{width:var(--spectrum-global-dimension-size-2400)}._spectrum-ColorSlider-container--vertical_d5afb{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:var(--spectrum-global-dimension-size-2400)}._spectrum-ColorSlider_d5afb{position:relative;display:block;width:100%;height:var(--spectrum-global-dimension-size-300);-webkit-user-select:none;-ms-user-select:none;user-select:none;-ms-touch-action:none;touch-action:none;cursor:default}._spectrum-ColorSlider_d5afb,._spectrum-ColorSlider_d5afb:before{border-radius:var(--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50))}._spectrum-ColorSlider_d5afb:before{content:"";z-index:-1;position:absolute;top:0;left:0;bottom:0;right:0;background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}._spectrum-ColorSlider_d5afb._is-focused_d5afb{z-index:2}._spectrum-ColorSlider_d5afb._is-disabled_d5afb{pointer-events:none}._spectrum-ColorSlider--vertical_d5afb{display:inline-block;width:var(--spectrum-global-dimension-size-300);-ms-flex:1;flex:1}._spectrum-ColorSlider--vertical_d5afb ._spectrum-ColorSlider-handle_d5afb{left:50%;top:0}._spectrum-ColorSlider-handle_d5afb{left:0;top:50%}._spectrum-ColorSlider-handle_d5afb:after{border-radius:0;width:var(--spectrum-global-dimension-size-300);height:var(--spectrum-global-dimension-size-300)}._spectrum-ColorSlider_d5afb{background-color:#fff;box-shadow:inset 0 0 0 var(--spectrum-alias-border-size-thin,var(--spectrum-global-dimension-static-size-10)) var(--spectrum-colorarea-border-color)}._spectrum-ColorSlider_d5afb:before{background-image:linear-gradient(-45deg,transparent 75.5%,#bcbcbc 0),linear-gradient(45deg,transparent 75.5%,#bcbcbc 0),linear-gradient(-45deg,#bcbcbc 25.5%,transparent 0),linear-gradient(45deg,#bcbcbc 25.5%,transparent 0)}._spectrum-ColorSlider_d5afb._is-disabled_d5afb{background:var(--spectrum-global-color-gray-300)!important;box-shadow:inset 0 0 0 var(--spectrum-alias-border-size-thin,var(--spectrum-global-dimension-static-size-10)) var(--spectrum-global-color-gray-300)}._spectrum-ColorSlider_d5afb ._spectrum-ColorSlider-handle_d5afb{margin:0}[dir=ltr] ._react-spectrum-ColorField-input_86851{text-align:left}[dir=rtl] ._react-spectrum-ColorField-input_86851{text-align:right}._react-spectrum-ColorField-input_86851{direction:ltr}
2
- /*# sourceMappingURL=main.css.map */
1
+ .spectrum-ColorHandle_5a9f41.is-focused_5a9f41,.spectrum-ColorHandle_5a9f41.focus-ring_5a9f41{width:calc(var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200))*2);height:calc(var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200))*2);margin-left:calc(-1*var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200)));margin-top:calc(-1*var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200)))}.spectrum-ColorHandle_5a9f41{z-index:1;box-sizing:border-box;width:var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200));height:var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200));margin-left:calc(-1*var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200))/2);margin-top:calc(-1*var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200))/2);border-width:var(--spectrum-colorhandle-inner-border-size,var(--spectrum-global-dimension-static-size-25));background-size:var(--spectrum-global-dimension-static-size-200,16px)var(--spectrum-global-dimension-static-size-200,16px);background-position:calc(-1*var(--spectrum-global-dimension-static-size-25,2px))calc(-1*var(--spectrum-global-dimension-static-size-25,2px)),calc(-1*var(--spectrum-global-dimension-static-size-25,2px))calc(var(--spectrum-global-dimension-static-size-100,8px) + -1*var(--spectrum-global-dimension-static-size-25,2px)),calc(var(--spectrum-global-dimension-static-size-100,8px) + -1*var(--spectrum-global-dimension-static-size-25,2px))calc(-1*var(--spectrum-global-dimension-static-size-100,8px) + -1*var(--spectrum-global-dimension-static-size-25,2px)),calc(-1*var(--spectrum-global-dimension-static-size-100,8px) + -1*var(--spectrum-global-dimension-static-size-25,2px))calc(-1*var(--spectrum-global-dimension-static-size-25,2px));transition:width var(--spectrum-global-animation-duration-100,130ms)ease-in-out,height var(--spectrum-global-animation-duration-100,130ms)ease-in-out,border-width var(--spectrum-global-animation-duration-100,130ms)ease-in-out,margin-left var(--spectrum-global-animation-duration-100,130ms)ease-in-out,margin-top var(--spectrum-global-animation-duration-100,130ms)ease-in-out;border-style:solid;display:block;position:absolute}.spectrum-ColorHandle_5a9f41,.spectrum-ColorHandle_5a9f41:after{border-radius:100%}.spectrum-ColorHandle_5a9f41:after{content:"";left:calc(50% - var(--spectrum-global-dimension-size-300)/2);top:calc(50% - var(--spectrum-global-dimension-size-300)/2);width:var(--spectrum-global-dimension-size-300);height:var(--spectrum-global-dimension-size-300);display:block;position:absolute}.spectrum-ColorHandle_5a9f41.is-disabled_5a9f41{pointer-events:none}.spectrum-ColorHandle-color_5a9f41{width:100%;height:100%;border-radius:100%}.spectrum-ColorHandle_5a9f41{border-color:var(--spectrum-colorhandle-inner-border-color,var(--spectrum-global-color-static-white));box-shadow:0 0 0 var(--spectrum-colorhandle-outer-border-size,var(--spectrum-global-dimension-static-size-10))#0000006b;background-color:var(--spectrum-global-color-static-white,#fff);background-image:linear-gradient(-45deg,transparent 75.5%,var(--spectrum-global-color-static-gray-500,#bcbcbc)75.5%),linear-gradient(45deg,transparent 75.5%,var(--spectrum-global-color-static-gray-500,#bcbcbc)75.5%),linear-gradient(-45deg,var(--spectrum-global-color-static-gray-500,#bcbcbc)25.5%,transparent 25.5%),linear-gradient(45deg,var(--spectrum-global-color-static-gray-500,#bcbcbc)25.5%,transparent 25.5%)}.spectrum-ColorHandle_5a9f41.is-disabled_5a9f41{border-color:var(--spectrum-colorhandle-inner-border-color-disabled,var(--spectrum-global-color-gray-400));background:var(--spectrum-colorhandle-fill-color-disabled,var(--spectrum-global-color-gray-300));box-shadow:none}.spectrum-ColorHandle_5a9f41.is-disabled_5a9f41 .spectrum-ColorHandle-color_5a9f41{display:none}.spectrum-ColorHandle-color_5a9f41{box-shadow:inset 0 0 0 var(--spectrum-colorhandle-outer-border-size,var(--spectrum-global-dimension-static-size-10))#0000006b}.spectrum-ColorLoupe_c818a8{width:calc(var(--spectrum-colorloupe-width,var(--spectrum-global-dimension-static-size-600)) + var(--spectrum-colorhandle-inner-border-size,var(--spectrum-global-dimension-static-size-25))*2);height:calc(var(--spectrum-colorloupe-height,var(--spectrum-global-dimension-static-size-800)) + var(--spectrum-colorhandle-inner-border-size,var(--spectrum-global-dimension-static-size-25))*2);transform:translate(0,var(--spectrum-global-dimension-static-size-100,8px));opacity:0;transform-origin:bottom;bottom:calc(50% + var(--spectrum-global-dimension-static-size-200,16px));left:calc(50% - (var(--spectrum-colorloupe-width,var(--spectrum-global-dimension-static-size-600)) + var(--spectrum-colorhandle-inner-border-size,var(--spectrum-global-dimension-static-size-25))*2)/2);pointer-events:none;transition:transform .1s ease-in-out,opacity .125s ease-in-out;position:absolute}.spectrum-ColorLoupe_c818a8.is-open_c818a8{opacity:1;transform:translate(0)}.spectrum-ColorLoupe-outer_c818a8{stroke-width:var(--spectrum-colorloupe-outer-border-size,var(--spectrum-global-dimension-static-size-10));fill:var(--spectrum-colorloupe-inner-border-color,var(--spectrum-global-color-static-white));stroke:var(--spectrum-colorloupe-outer-border-color,#3232321a)}.spectrum-ColorLoupe-inner-background_c818a8{fill:var(--spectrum-global-color-static-white,#fff)}.spectrum-ColorLoupe-inner-checker_c818a8{fill:var(--spectrum-global-color-static-gray-500,#bcbcbc)}.spectrum-ColorArea_35e2c0{width:var(--spectrum-colorarea-default-width,var(--spectrum-global-dimension-size-2400));height:var(--spectrum-colorarea-default-height,var(--spectrum-global-dimension-size-2400));min-width:var(--spectrum-colorarea-min-width,var(--spectrum-global-dimension-size-800));min-height:var(--spectrum-colorarea-min-height,var(--spectrum-global-dimension-size-800));border-radius:var(--spectrum-colorarea-border-radius,var(--spectrum-alias-border-radius-regular));cursor:default;-webkit-user-select:none;user-select:none;display:inline-block;position:relative}.spectrum-ColorArea_35e2c0.is-focused_35e2c0,.spectrum-ColorArea_35e2c0.focus-ring_35e2c0{z-index:2}.spectrum-ColorArea_35e2c0.is-focused_35e2c0 .spectrum-ColorArea-handle_35e2c0,.spectrum-ColorArea_35e2c0.focus-ring_35e2c0 .spectrum-ColorArea-handle_35e2c0{width:calc(var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200))*2);height:calc(var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200))*2);margin-left:calc(-1*var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200)));margin-top:calc(-1*var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200)))}.spectrum-ColorArea_35e2c0:focus-within{z-index:2}.spectrum-ColorArea_35e2c0.is-disabled_35e2c0{pointer-events:none}.spectrum-ColorArea_35e2c0:before{content:"";z-index:1;border-radius:var(--spectrum-colorarea-border-radius,var(--spectrum-alias-border-radius-regular));position:absolute;top:0;bottom:0;left:0;right:0}.spectrum-ColorArea-handle_35e2c0{top:0;left:0}.spectrum-ColorArea-gradient_35e2c0{width:100%;height:100%;border-radius:var(--spectrum-colorarea-border-radius,var(--spectrum-alias-border-radius-regular))}.spectrum-ColorArea-slider_35e2c0{opacity:.0001;width:100%;height:100%;z-index:0;pointer-events:none;margin:0;position:absolute;top:0;left:0}.spectrum-ColorArea_35e2c0:before{box-shadow:inset 0 0 0 var(--spectrum-colorarea-border-size,var(--spectrum-alias-border-size-thin))var(--spectrum-colorarea-border-color)}.spectrum-ColorArea-gradient_35e2c0,.spectrum-ColorHandle-color_35e2c0{forced-color-adjust:none}.spectrum-ColorArea_35e2c0.is-disabled_35e2c0{background:var(--spectrum-colorarea-fill-color-disabled,var(--spectrum-global-color-gray-300))}.spectrum-ColorArea_35e2c0.is-disabled_35e2c0:before{box-shadow:inset 0 0 0 var(--spectrum-colorarea-border-size,var(--spectrum-alias-border-size-thin))var(--spectrum-colorarea-border-color-disabled,var(--spectrum-global-color-gray-300))}.spectrum-ColorArea_35e2c0.is-disabled_35e2c0 .spectrum-ColorArea-gradient_35e2c0{display:none}@media (forced-colors:active){.spectrum-ColorArea_35e2c0{--spectrum-colorarea-fill-color-disabled:GrayText}.spectrum-ColorArea_35e2c0.is-disabled_35e2c0{forced-color-adjust:none}}.spectrum-ColorWheel_31462a.is-focused_31462a .spectrum-ColorWheel-handle_31462a{width:calc(var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200))*2);height:calc(var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200))*2);margin-left:calc(-1*var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200)));margin-top:calc(-1*var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200)))}.spectrum-ColorWheel-slider_31462a{opacity:.0001;width:100%;height:100%;z-index:0;pointer-events:none;margin:0;position:absolute;top:0;left:0}.spectrum-ColorWheel_31462a{width:calc(var(--spectrum-global-dimension-size-125)*16);height:calc(var(--spectrum-global-dimension-size-125)*16);--spectrum-colorwheel-track-thickness:var(--spectrum-colorwheel-track-width,var(--spectrum-global-dimension-size-300));-webkit-user-select:none;user-select:none;-ms-touch-action:none;touch-action:none;cursor:default;border-radius:100%;display:block;position:relative}.spectrum-ColorWheel_31462a .spectrum-ColorWheel-handle_31462a{margin:0}.spectrum-ColorWheel_31462a.is-focused_31462a{z-index:2}.spectrum-ColorWheel_31462a.is-disabled_31462a{pointer-events:none}.spectrum-ColorWheel_31462a.is-dragged_31462a{z-index:2}.spectrum-ColorWheel-gradient_31462a{z-index:0;width:calc(var(--spectrum-global-dimension-size-125)*16);height:calc(var(--spectrum-global-dimension-size-125)*16);position:relative}.spectrum-ColorWheel-gradient_31462a:before,.spectrum-ColorWheel-gradient_31462a:after{content:"";border-width:var(--spectrum-colorwheel-border-size,var(--spectrum-alias-border-size-thin));border-radius:100%;border-style:solid;position:absolute}.spectrum-ColorWheel-gradient_31462a:before{top:0;bottom:0;left:0;right:0}.spectrum-ColorWheel-gradient_31462a:after{top:calc(var(--spectrum-colorwheel-track-width,var(--spectrum-global-dimension-size-300)) - var(--spectrum-colorwheel-border-size,var(--spectrum-alias-border-size-thin)));left:calc(var(--spectrum-colorwheel-track-width,var(--spectrum-global-dimension-size-300)) - var(--spectrum-colorwheel-border-size,var(--spectrum-alias-border-size-thin)));bottom:calc(var(--spectrum-colorwheel-track-width,var(--spectrum-global-dimension-size-300)) - var(--spectrum-colorwheel-border-size,var(--spectrum-alias-border-size-thin)));right:calc(var(--spectrum-colorwheel-track-width,var(--spectrum-global-dimension-size-300)) - var(--spectrum-colorwheel-border-size,var(--spectrum-alias-border-size-thin)))}.spectrum-ColorWheel_31462a.is-disabled_31462a .spectrum-ColorWheel-gradient_31462a{background:var(--spectrum-colorwheel-fill-color-disabled,var(--spectrum-global-color-gray-300))!important}.spectrum-ColorWheel_31462a.is-disabled_31462a .spectrum-ColorWheel-gradient_31462a:before,.spectrum-ColorWheel_31462a.is-disabled_31462a .spectrum-ColorWheel-gradient_31462a:after{border-color:var(--spectrum-colorwheel-border-color-disabled,var(--spectrum-global-color-gray-300))}.spectrum-ColorWheel_31462a.is-disabled_31462a .spectrum-ColorWheel-segment_31462a{display:none}.spectrum-ColorWheel-gradient_31462a:before,.spectrum-ColorWheel-gradient_31462a:after{border-color:var(--spectrum-colorarea-border-color)}.spectrum-ColorSlider_a5bb06.is-focused_a5bb06 .spectrum-ColorSlider-handle_a5bb06{width:calc(var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200))*2);height:calc(var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200))*2);margin-left:calc(-1*var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200)));margin-top:calc(-1*var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200)))}.spectrum-ColorSlider-slider_a5bb06{opacity:.0001;width:100%;height:100%;z-index:0;pointer-events:none;margin:0;position:absolute;top:0;left:0}.spectrum-ColorSlider-container--horizontal_a5bb06{width:var(--spectrum-colorslider-default-length,var(--spectrum-global-dimension-size-2400))}.spectrum-ColorSlider-container--vertical_a5bb06{height:var(--spectrum-colorslider-default-length,var(--spectrum-global-dimension-size-2400));flex-direction:column;display:flex}.spectrum-ColorSlider_a5bb06{width:100%;height:var(--spectrum-colorslider-height,var(--spectrum-global-dimension-size-300));border-radius:var(--spectrum-colorslider-border-radius,var(--spectrum-alias-border-radius-regular));-webkit-user-select:none;user-select:none;-ms-touch-action:none;touch-action:none;cursor:default;display:block;position:relative}.spectrum-ColorSlider_a5bb06:before{content:"";z-index:-1;border-radius:var(--spectrum-colorslider-border-radius,var(--spectrum-alias-border-radius-regular));background-size:var(--spectrum-global-dimension-static-size-200,16px)var(--spectrum-global-dimension-static-size-200,16px);background-position:0 0,0 var(--spectrum-global-dimension-static-size-100,8px),var(--spectrum-global-dimension-static-size-100,8px)calc(-1*var(--spectrum-global-dimension-static-size-100,8px)),calc(-1*var(--spectrum-global-dimension-static-size-100,8px))0;position:absolute;top:0;bottom:0;left:0;right:0}.spectrum-ColorSlider_a5bb06.is-focused_a5bb06{z-index:2}.spectrum-ColorSlider_a5bb06.is-disabled_a5bb06{pointer-events:none}.spectrum-ColorSlider--vertical_a5bb06{width:var(--spectrum-colorslider-vertical-width,var(--spectrum-global-dimension-size-300));flex:1;display:inline-block}.spectrum-ColorSlider--vertical_a5bb06 .spectrum-ColorSlider-handle_a5bb06{top:0;left:50%}.spectrum-ColorSlider-handle_a5bb06{top:50%;left:0}.spectrum-ColorSlider-handle_a5bb06:after{width:var(--spectrum-global-dimension-size-300);height:var(--spectrum-global-dimension-size-300);border-radius:0%}.spectrum-ColorSlider_a5bb06{background-color:var(--spectrum-global-color-static-white,#fff);box-shadow:inset 0 0 0 var(--spectrum-colorslider-border-size,var(--spectrum-alias-border-size-thin))var(--spectrum-colorarea-border-color)}.spectrum-ColorSlider_a5bb06:before{background-image:linear-gradient(-45deg,transparent 75.5%,var(--spectrum-global-color-static-gray-500,#bcbcbc)75.5%),linear-gradient(45deg,transparent 75.5%,var(--spectrum-global-color-static-gray-500,#bcbcbc)75.5%),linear-gradient(-45deg,var(--spectrum-global-color-static-gray-500,#bcbcbc)25.5%,transparent 25.5%),linear-gradient(45deg,var(--spectrum-global-color-static-gray-500,#bcbcbc)25.5%,transparent 25.5%)}.spectrum-ColorSlider_a5bb06.is-disabled_a5bb06{box-shadow:inset 0 0 0 var(--spectrum-colorslider-border-size,var(--spectrum-alias-border-size-thin))var(--spectrum-colorslider-border-color-disabled,var(--spectrum-global-color-gray-300));background:var(--spectrum-colorslider-fill-color-disabled,var(--spectrum-global-color-gray-300))!important}.spectrum-ColorSlider_a5bb06 .spectrum-ColorSlider-handle_a5bb06{margin:0}[dir=ltr] .react-spectrum-ColorField-input_7bde3a{text-align:left}[dir=rtl] .react-spectrum-ColorField-input_7bde3a{text-align:right}.react-spectrum-ColorField-input_7bde3a{direction:ltr}