@sanity/color-input 6.0.10 → 6.0.12

package/dist/_chunks-es/ColorInput.js

@@ -1,790 +0,0 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { c } from "react/compiler-runtime";
-import { AddIcon } from "@sanity/icons/Add";
-import { TrashIcon } from "@sanity/icons/Trash";
-import { Flex, useTheme, Box, Button, Stack, Text, Inline, Card } from "@sanity/ui";
-import { Component, PureComponent, useOptimistic, useRef, startTransition } from "react";
-import { unset, set, setIfMissing } from "sanity";
-import { styled } from "styled-components";
-import tinycolor from "tinycolor2";
-import throttle from "lodash-es/throttle";
-const ColorListWrap = /* @__PURE__ */ styled(Flex).withConfig({
-  displayName: "ColorListWrap",
-  componentId: "sc-nrr1l2-0"
-})(["gap:0.25em;"]), ColorBoxContainer = /* @__PURE__ */ styled.div.withConfig({
-  displayName: "ColorBoxContainer",
-  componentId: "sc-nrr1l2-1"
-})(["width:2.1em;height:2.1em;cursor:pointer;position:relative;overflow:hidden;border-radius:3px;background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=') left center #fff;"]), ColorBox$1 = /* @__PURE__ */ styled.div.withConfig({
-  displayName: "ColorBox",
-  componentId: "sc-nrr1l2-2"
-})(["border-radius:inherit;box-shadow:inset 0 0 0 1px var(--card-shadow-outline-color);content:'';position:absolute;inset:0;z-index:1;"]), validateColors = (colors) => {
-  const seen = /* @__PURE__ */ new Set();
-  return colors.reduce((cls, c2) => {
-    const color = c2.hex ? tinycolor(c2.hex) : tinycolor(c2);
-    if (color.isValid()) {
-      const backgroundColor = color.toRgbString(), key = JSON.stringify({
-        color: c2,
-        backgroundColor
-      });
-      seen.has(key) || (seen.add(key), cls.push({
-        key,
-        color: c2,
-        backgroundColor
-      }));
-    }
-    return cls;
-  }, []);
-};
-function ColorList(t0) {
-  const $ = c(7), {
-    colors,
-    onChange
-  } = t0;
-  if (!colors)
-    return null;
-  let t1;
-  if ($[0] !== colors || $[1] !== onChange) {
-    let t22;
-    $[3] !== onChange ? (t22 = (t3) => {
-      const {
-        key,
-        color,
-        backgroundColor
-      } = t3;
-      return /* @__PURE__ */ jsx(ColorBoxContainer, { onClick: () => {
-        onChange(color);
-      }, children: /* @__PURE__ */ jsx(ColorBox$1, { style: {
-        background: backgroundColor
-      } }) }, key);
-    }, $[3] = onChange, $[4] = t22) : t22 = $[4], t1 = validateColors(colors).map(t22), $[0] = colors, $[1] = onChange, $[2] = t1;
-  } else
-    t1 = $[2];
-  let t2;
-  return $[5] !== t1 ? (t2 = /* @__PURE__ */ jsx(ColorListWrap, { wrap: "wrap", children: t1 }), $[5] = t1, $[6] = t2) : t2 = $[6], t2;
-}
-const checkboardCache = {};
-function render(c1, c2, size, serverCanvas) {
-  if (typeof document > "u" && !serverCanvas)
-    return null;
-  const canvas = serverCanvas ? new serverCanvas() : document.createElement("canvas");
-  canvas.width = size * 2, canvas.height = size * 2;
-  const ctx = canvas.getContext("2d");
-  return ctx ? (ctx.fillStyle = c1, ctx.fillRect(0, 0, canvas.width, canvas.height), ctx.fillStyle = c2, ctx.fillRect(0, 0, size, size), ctx.translate(size, size), ctx.fillRect(0, 0, size, size), canvas.toDataURL()) : null;
-}
-function get(c1, c2, size, serverCanvas) {
-  const key = `${c1}-${c2}-${size}${serverCanvas ? "-server" : ""}`, cached = checkboardCache[key];
-  if (cached)
-    return cached;
-  const checkboard = render(c1, c2, size, serverCanvas);
-  return checkboardCache[key] = checkboard, checkboard;
-}
-const EMPTY_RENDERERS = {};
-function Checkboard(t0) {
-  const $ = c(9), {
-    white: t1,
-    grey: t2,
-    size: t3,
-    renderers: t4,
-    borderRadius,
-    boxShadow
-  } = t0, white = t1 === void 0 ? "transparent" : t1, grey = t2 === void 0 ? "rgba(0,0,0,.08)" : t2, size = t3 === void 0 ? 8 : t3, renderers = t4 === void 0 ? EMPTY_RENDERERS : t4;
-  let t5;
-  $[0] !== grey || $[1] !== renderers.canvas || $[2] !== size || $[3] !== white ? (t5 = get(white, grey, size, renderers.canvas), $[0] = grey, $[1] = renderers.canvas, $[2] = size, $[3] = white, $[4] = t5) : t5 = $[4];
-  const background = t5, t6 = background ? `url(${background}) center left` : void 0;
-  let t7;
-  return $[5] !== borderRadius || $[6] !== boxShadow || $[7] !== t6 ? (t7 = /* @__PURE__ */ jsx("div", { style: {
-    borderRadius,
-    boxShadow,
-    position: "absolute",
-    inset: 0,
-    background: t6
-  } }), $[5] = borderRadius, $[6] = boxShadow, $[7] = t6, $[8] = t7) : t7 = $[8], t7;
-}
-function calculateChange$2(e, hsl, direction, initialA, container) {
-  const containerWidth = container.clientWidth, containerHeight = container.clientHeight, x = "touches" in e ? e.touches[0]?.pageX ?? 0 : e.pageX, y = "touches" in e ? e.touches[0]?.pageY ?? 0 : e.pageY, left = x - (container.getBoundingClientRect().left + window.scrollX), top = y - (container.getBoundingClientRect().top + window.scrollY);
-  if (direction === "vertical") {
-    let a2;
-    return top < 0 ? a2 = 0 : top > containerHeight ? a2 = 1 : a2 = Math.round(top * 100 / containerHeight) / 100, hsl.a !== a2 ? {
-      h: hsl.h,
-      s: hsl.s,
-      l: hsl.l,
-      a: a2,
-      source: "rgb"
-    } : null;
-  }
-  let a;
-  return left < 0 ? a = 0 : left > containerWidth ? a = 1 : a = Math.round(left * 100 / containerWidth) / 100, initialA !== a ? {
-    h: hsl.h,
-    s: hsl.s,
-    l: hsl.l,
-    a,
-    source: "rgb"
-  } : null;
-}
-class Alpha extends Component {
-  container = null;
-  componentWillUnmount() {
-    this.unbindEventListeners();
-  }
-  setContainerRef = (node) => {
-    this.container = node;
-  };
-  handleChange = (event) => {
-    if (!this.container)
-      return;
-    const change = calculateChange$2(event, this.props.hsl, this.props.direction, this.props.a, this.container);
-    change && typeof this.props.onChange == "function" && this.props.onChange(change);
-  };
-  handleMouseDown = (event) => {
-    this.handleChange(event.nativeEvent), window.addEventListener("mousemove", this.handleChange), window.addEventListener("mouseup", this.handleMouseUp);
-  };
-  handleMouseUp = () => {
-    this.unbindEventListeners();
-  };
-  unbindEventListeners = () => {
-    window.removeEventListener("mousemove", this.handleChange), window.removeEventListener("mouseup", this.handleMouseUp);
-  };
-  render() {
-    const {
-      rgb,
-      direction,
-      radius,
-      shadow,
-      renderers
-    } = this.props, alphaValue = rgb.a ?? 1, gradient = direction === "vertical" ? `linear-gradient(to bottom, rgba(${rgb.r},${rgb.g},${rgb.b}, 0) 0%, rgba(${rgb.r},${rgb.g},${rgb.b}, 1) 100%)` : `linear-gradient(to right, rgba(${rgb.r},${rgb.g},${rgb.b}, 0) 0%, rgba(${rgb.r},${rgb.g},${rgb.b}, 1) 100%)`, pointerStyle = direction === "vertical" ? {
-      position: "absolute",
-      left: 0,
-      top: `${alphaValue * 100}%`
-    } : {
-      position: "absolute",
-      left: `${alphaValue * 100}%`
-    };
-    return /* @__PURE__ */ jsxs("div", { style: {
-      position: "absolute",
-      inset: 0,
-      borderRadius: radius
-    }, children: [
-      /* @__PURE__ */ jsx("div", { style: {
-        position: "absolute",
-        inset: 0,
-        overflow: "hidden",
-        borderRadius: radius
-      }, children: /* @__PURE__ */ jsx(Checkboard, { renderers }) }),
-      /* @__PURE__ */ jsx("div", { style: {
-        position: "absolute",
-        inset: 0,
-        background: gradient,
-        boxShadow: shadow,
-        borderRadius: radius
-      } }),
-      /* @__PURE__ */ jsx("div", { style: {
-        position: "relative",
-        height: "100%",
-        margin: "0 3px"
-      }, ref: this.setContainerRef, onMouseDown: this.handleMouseDown, onTouchMove: this.handleChange, onTouchStart: this.handleChange, children: /* @__PURE__ */ jsx("div", { style: pointerStyle, children: /* @__PURE__ */ jsx("div", { style: {
-        width: "4px",
-        borderRadius: "1px",
-        height: "8px",
-        boxShadow: "0 0 2px rgba(0, 0, 0, .6)",
-        background: "#fff",
-        marginTop: "1px",
-        transform: "translateX(-2px)"
-      } }) }) })
-    ] });
-  }
-}
-const VALIDATION_KEYS = /* @__PURE__ */ new Set(["r", "g", "b", "a", "h", "s", "l", "v"]), PERCENT_PATTERN = /^\d+%$/;
-function simpleCheckForValidColor(data) {
-  if (typeof data == "string")
-    return data;
-  let checked = 0, passed = 0;
-  for (const [key, value] of Object.entries(data))
-    !VALIDATION_KEYS.has(key) || !value || (checked += 1, Number.isNaN(Number(value)) || (passed += 1), (key === "s" || key === "l") && PERCENT_PATTERN.test(String(value)) && (passed += 1));
-  return checked === passed ? data : !1;
-}
-function toState(data, oldHue) {
-  const instance = typeof data == "string" ? tinycolor(data) : "hex" in data ? tinycolor(data.hex) : tinycolor(data), hsl = instance.toHsl(), hsv = instance.toHsv(), rgb = instance.toRgb(), hex = instance.toHex();
-  hsl.s === 0 && (hsl.h = oldHue ?? 0, hsv.h = oldHue ?? 0);
-  const transparent = hex === "000000" && rgb.a === 0, incomingHue = typeof data == "string" ? void 0 : "h" in data ? data.h : void 0, source = typeof data == "string" ? void 0 : data.source;
-  return {
-    hsl,
-    hex: transparent ? "transparent" : `#${hex}`,
-    rgb,
-    hsv,
-    oldHue: incomingHue || oldHue || hsl.h,
-    source: source ?? ""
-  };
-}
-function isValidHex(hex) {
-  if (hex === "transparent")
-    return !0;
-  const lh = hex.charAt(0) === "#" ? 1 : 0;
-  return hex.length !== 4 + lh && hex.length < 7 + lh && tinycolor(hex).isValid();
-}
-const DEFAULT_COLOR$1 = {
-  h: 250,
-  s: 0.5,
-  l: 0.2,
-  a: 1
-};
-function CustomPicker(Picker) {
-  class ColorPicker2 extends PureComponent {
-    static getDerivedStateFromProps(nextProps, state) {
-      return {
-        ...toState(nextProps.color ?? DEFAULT_COLOR$1, state.oldHue)
-      };
-    }
-    constructor(props) {
-      super(props), this.state = {
-        ...toState(props.color ?? DEFAULT_COLOR$1, 0)
-      };
-    }
-    handleChange = (data) => {
-      if (!simpleCheckForValidColor(data))
-        return;
-      const incomingHue = typeof data == "string" ? void 0 : "h" in data ? data.h : void 0, colors = toState(data, incomingHue || this.state.oldHue);
-      this.setState(colors), this.props.onChange?.(colors);
-    };
-    render() {
-      const injected = {
-        hsl: this.state.hsl,
-        hsv: this.state.hsv,
-        rgb: this.state.rgb,
-        hex: this.state.hex,
-        oldHue: this.state.oldHue,
-        source: this.state.source,
-        onChange: this.handleChange
-      }, pickerProps = {
-        ...this.props,
-        ...injected
-      };
-      return /* @__PURE__ */ jsx(Picker, { ...pickerProps });
-    }
-  }
-  return ColorPicker2;
-}
-const DEFAULT_ARROW_OFFSET = 1, getNumberValue = (value) => Number(String(value).replace(/%/g, ""));
-let idCounter = 1;
-class EditableInput extends Component {
-  input = null;
-  constructor(props) {
-    super(props);
-    const initialValue = String(props.value ?? "").toUpperCase();
-    this.state = {
-      value: initialValue,
-      blurValue: initialValue
-    }, this.inputId = `rc-editable-input-${idCounter++}`;
-  }
-  componentDidUpdate(prevProps, prevState) {
-    if (this.props.value !== this.state.value && (prevProps.value !== this.props.value || prevState.value !== this.state.value)) {
-      const nextValue = String(this.props.value ?? "").toUpperCase(), isFocused = this.input === document.activeElement;
-      this.setState(isFocused ? {
-        blurValue: nextValue
-      } : {
-        value: nextValue,
-        blurValue: this.state.blurValue ? "" : nextValue
-      });
-    }
-  }
-  componentWillUnmount() {
-    this.unbindEventListeners();
-  }
-  setInputRef = (input) => {
-    this.input = input;
-  };
-  getValueObjectWithLabel = (value) => ({
-    [this.props.label]: String(value)
-  });
-  getArrowOffset = () => this.props.arrowOffset ?? DEFAULT_ARROW_OFFSET;
-  setUpdatedValue = (value, event) => {
-    this.props.onChange?.(this.getValueObjectWithLabel(value), event), this.setState({
-      value: String(value)
-    });
-  };
-  handleBlur = () => {
-    this.state.blurValue && this.setState({
-      value: this.state.blurValue,
-      blurValue: ""
-    });
-  };
-  handleChange = (event) => {
-    this.setUpdatedValue(event.target.value, event);
-  };
-  handleKeyDown = (event) => {
-    const value = getNumberValue(event.currentTarget.value), isUp = event.key === "ArrowUp", isDown = event.key === "ArrowDown";
-    if (!Number.isNaN(value) && (isUp || isDown)) {
-      const offset = this.getArrowOffset(), updatedValue = isUp ? value + offset : value - offset;
-      this.setUpdatedValue(updatedValue, event);
-    }
-  };
-  handleDrag = (event) => {
-    if (!this.props.dragLabel)
-      return;
-    const {
-      dragMax,
-      value
-    } = this.props, numericValue = typeof value == "number" ? value : Number(value), newValue = Math.round(numericValue + event.movementX);
-    dragMax !== void 0 && newValue >= 0 && newValue <= dragMax && this.props.onChange?.(this.getValueObjectWithLabel(newValue), event);
-  };
-  handleMouseDown = (event) => {
-    this.props.dragLabel && (event.preventDefault(), this.handleDrag(event.nativeEvent), window.addEventListener("mousemove", this.handleDrag), window.addEventListener("mouseup", this.handleMouseUp));
-  };
-  handleMouseUp = () => {
-    this.unbindEventListeners();
-  };
-  unbindEventListeners = () => {
-    window.removeEventListener("mousemove", this.handleDrag), window.removeEventListener("mouseup", this.handleMouseUp);
-  };
-  render() {
-    const style = this.props.style ?? {}, wrapStyle = {
-      position: "relative",
-      ...style.wrap
-    }, inputStyle = {
-      ...style.input
-    }, labelStyle = {
-      ...style.label,
-      ...this.props.dragLabel ? {
-        cursor: "ew-resize"
-      } : null
-    };
-    return /* @__PURE__ */ jsxs("div", { style: wrapStyle, children: [
-      /* @__PURE__ */ jsx("input", { id: this.inputId, style: inputStyle, ref: this.setInputRef, value: this.state.value, onKeyDown: this.handleKeyDown, onChange: this.handleChange, onBlur: this.handleBlur, placeholder: this.props.placeholder, spellCheck: "false" }),
-      this.props.label && !this.props.hideLabel ? (
-        // oxlint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- the label is a drag affordance using pointer coordinates; the input also supports arrow-key stepping
-        /* @__PURE__ */ jsx("label", { htmlFor: this.inputId, style: labelStyle, onMouseDown: this.handleMouseDown, children: this.props.label })
-      ) : null
-    ] });
-  }
-}
-function calculateChange$1(e, direction, hsl, container) {
-  const containerWidth = container.clientWidth, containerHeight = container.clientHeight, x = "touches" in e ? e.touches[0]?.pageX ?? 0 : e.pageX, y = "touches" in e ? e.touches[0]?.pageY ?? 0 : e.pageY, left = x - (container.getBoundingClientRect().left + window.scrollX), top = y - (container.getBoundingClientRect().top + window.scrollY);
-  if (direction === "vertical") {
-    let h2;
-    return top < 0 ? h2 = 359 : top > containerHeight ? h2 = 0 : h2 = 360 * (-(top * 100 / containerHeight) + 100) / 100, hsl.h !== h2 ? {
-      h: h2,
-      s: hsl.s,
-      l: hsl.l,
-      a: hsl.a ?? 1,
-      source: "hsl"
-    } : null;
-  }
-  let h;
-  return left < 0 ? h = 0 : left > containerWidth ? h = 359 : h = 360 * (left * 100 / containerWidth) / 100, hsl.h !== h ? {
-    h,
-    s: hsl.s,
-    l: hsl.l,
-    a: hsl.a ?? 1,
-    source: "hsl"
-  } : null;
-}
-const HueGradient = /* @__PURE__ */ styled.div.withConfig({
-  displayName: "HueGradient",
-  componentId: "sc-9dykdk-0"
-})(["background:", ";"], ({
-  $direction
-}) => $direction === "vertical" ? "linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)" : "linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)");
-class Hue extends Component {
-  container = null;
-  componentWillUnmount() {
-    this.unbindEventListeners();
-  }
-  setContainerRef = (node) => {
-    this.container = node;
-  };
-  handleChange = (event) => {
-    if (!this.container)
-      return;
-    const change = calculateChange$1(event, this.props.direction, this.props.hsl, this.container);
-    change && typeof this.props.onChange == "function" && this.props.onChange(change);
-  };
-  handleMouseDown = (event) => {
-    this.handleChange(event.nativeEvent), window.addEventListener("mousemove", this.handleChange), window.addEventListener("mouseup", this.handleMouseUp);
-  };
-  handleMouseUp = () => {
-    this.unbindEventListeners();
-  };
-  unbindEventListeners = () => {
-    window.removeEventListener("mousemove", this.handleChange), window.removeEventListener("mouseup", this.handleMouseUp);
-  };
-  render() {
-    const {
-      hsl,
-      direction = "horizontal",
-      radius,
-      shadow
-    } = this.props, pointerStyle = direction === "vertical" ? {
-      position: "absolute",
-      left: "0px",
-      top: `${-(hsl.h * 100 / 360) + 100}%`
-    } : {
-      position: "absolute",
-      left: `${hsl.h * 100 / 360}%`
-    };
-    return /* @__PURE__ */ jsx("div", { style: {
-      position: "absolute",
-      inset: 0,
-      borderRadius: radius,
-      boxShadow: shadow
-    }, children: /* @__PURE__ */ jsx(HueGradient, { $direction: direction, style: {
-      padding: "0 2px",
-      position: "relative",
-      height: "100%",
-      borderRadius: radius
-    }, ref: this.setContainerRef, onMouseDown: this.handleMouseDown, onTouchMove: this.handleChange, onTouchStart: this.handleChange, children: /* @__PURE__ */ jsx("div", { style: pointerStyle, children: /* @__PURE__ */ jsx("div", { style: {
-      marginTop: "1px",
-      width: "4px",
-      borderRadius: "1px",
-      height: "8px",
-      boxShadow: "0 0 2px rgba(0, 0, 0, .6)",
-      background: "#fff",
-      transform: "translateX(-2px)"
-    } }) }) }) });
-  }
-}
-function calculateChange(e, hsl, container) {
-  const {
-    width: containerWidth,
-    height: containerHeight
-  } = container.getBoundingClientRect(), x = "touches" in e ? e.touches[0]?.pageX ?? 0 : e.pageX, y = "touches" in e ? e.touches[0]?.pageY ?? 0 : e.pageY;
-  let left = x - (container.getBoundingClientRect().left + window.scrollX), top = y - (container.getBoundingClientRect().top + window.scrollY);
-  left < 0 ? left = 0 : left > containerWidth && (left = containerWidth), top < 0 ? top = 0 : top > containerHeight && (top = containerHeight);
-  const saturation = left / containerWidth, bright = 1 - top / containerHeight;
-  return {
-    h: hsl.h,
-    s: saturation,
-    v: bright,
-    a: hsl.a ?? 1,
-    source: "hsv"
-  };
-}
-const SaturationWhite = /* @__PURE__ */ styled.div.withConfig({
-  displayName: "SaturationWhite",
-  componentId: "sc-21ffrq-0"
-})(["background:linear-gradient(to right,#fff,rgba(255,255,255,0));"]), SaturationBlack = /* @__PURE__ */ styled.div.withConfig({
-  displayName: "SaturationBlack",
-  componentId: "sc-21ffrq-1"
-})(["background:linear-gradient(to top,#000,rgba(0,0,0,0));"]);
-class Saturation extends Component {
-  container = null;
-  throttle = throttle((handler, data) => {
-    handler(data);
-  }, 50);
-  componentWillUnmount() {
-    this.throttle.cancel(), this.unbindEventListeners();
-  }
-  setContainerRef = (node) => {
-    this.container = node;
-  };
-  getContainerRenderWindow() {
-    const {
-      container
-    } = this;
-    let renderWindow = window;
-    for (; !renderWindow.document.contains(container) && renderWindow.parent !== renderWindow; )
-      renderWindow = renderWindow.parent;
-    return renderWindow;
-  }
-  handleChange = (event) => {
-    !this.container || typeof this.props.onChange != "function" || this.throttle(this.props.onChange, calculateChange(event, this.props.hsl, this.container));
-  };
-  handleMouseDown = (event) => {
-    this.handleChange(event.nativeEvent);
-    const renderWindow = this.getContainerRenderWindow();
-    renderWindow.addEventListener("mousemove", this.handleChange), renderWindow.addEventListener("mouseup", this.handleMouseUp);
-  };
-  handleMouseUp = () => {
-    this.unbindEventListeners();
-  };
-  unbindEventListeners = () => {
-    const renderWindow = this.getContainerRenderWindow();
-    renderWindow.removeEventListener("mousemove", this.handleChange), renderWindow.removeEventListener("mouseup", this.handleMouseUp);
-  };
-  render() {
-    const {
-      hsl,
-      hsv,
-      radius,
-      shadow
-    } = this.props, pointerStyle = {
-      position: "absolute",
-      top: `${-(hsv.v * 100) + 100}%`,
-      left: `${hsv.s * 100}%`,
-      cursor: "default"
-    };
-    return (
-      // oxlint-disable-next-line jsx-a11y/no-static-element-interactions -- the picker surface is dragged via pointer coordinates, which have no keyboard equivalent
-      /* @__PURE__ */ jsx("div", { style: {
-        position: "absolute",
-        inset: 0,
-        background: `hsl(${hsl.h},100%, 50%)`,
-        borderRadius: radius
-      }, ref: this.setContainerRef, onMouseDown: this.handleMouseDown, onTouchMove: this.handleChange, onTouchStart: this.handleChange, children: /* @__PURE__ */ jsxs(SaturationWhite, { style: {
-        position: "absolute",
-        inset: 0,
-        borderRadius: radius
-      }, children: [
-        /* @__PURE__ */ jsx(SaturationBlack, { style: {
-          position: "absolute",
-          inset: 0,
-          boxShadow: shadow,
-          borderRadius: radius
-        } }),
-        /* @__PURE__ */ jsx("div", { style: pointerStyle, children: /* @__PURE__ */ jsx("div", { style: {
-          width: "4px",
-          height: "4px",
-          boxShadow: "0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,.3), 0 0 1px 2px rgba(0,0,0,.4)",
-          borderRadius: "50%",
-          cursor: "pointer",
-          transform: "translate(-2px, -2px)"
-        } }) })
-      ] }) })
-    );
-  }
-}
-const ColorPickerFields = (t0) => {
-  const $ = c(44), {
-    onChange,
-    rgb,
-    hsl,
-    hex,
-    disableAlpha
-  } = t0, {
-    sanity
-  } = useTheme(), t1 = `inset 0 0 0 1px ${sanity.color.input.default.enabled.border}`, t2 = sanity.fonts.text.sizes[0]?.fontSize;
-  let t3;
-  $[0] !== sanity.color.input.default.enabled.bg || $[1] !== sanity.color.input.default.enabled.fg || $[2] !== t1 || $[3] !== t2 ? (t3 = {
-    width: "80%",
-    padding: "4px 10% 3px",
-    border: "none",
-    boxShadow: t1,
-    color: sanity.color.input.default.enabled.fg,
-    backgroundColor: sanity.color.input.default.enabled.bg,
-    fontSize: t2,
-    textAlign: "center"
-  }, $[0] = sanity.color.input.default.enabled.bg, $[1] = sanity.color.input.default.enabled.fg, $[2] = t1, $[3] = t2, $[4] = t3) : t3 = $[4];
-  const t4 = sanity.fonts.label.sizes[0]?.fontSize;
-  let t5;
-  $[5] !== sanity.color.base.fg || $[6] !== t4 ? (t5 = {
-    display: "block",
-    textAlign: "center",
-    fontSize: t4,
-    color: sanity.color.base.fg,
-    paddingTop: "3px",
-    paddingBottom: "4px",
-    textTransform: "capitalize"
-  }, $[5] = sanity.color.base.fg, $[6] = t4, $[7] = t5) : t5 = $[7];
-  let t6;
-  $[8] !== t3 || $[9] !== t5 ? (t6 = {
-    input: t3,
-    label: t5
-  }, $[8] = t3, $[9] = t5, $[10] = t6) : t6 = $[10];
-  const inputStyles = t6;
-  let t7;
-  $[11] !== hsl || $[12] !== onChange || $[13] !== rgb ? (t7 = (data) => {
-    if ("hex" in data && data.hex && isValidHex(data.hex))
-      onChange({
-        hex: data.hex,
-        source: "hex"
-      });
-    else if (rgb && ("r" in data && data.r || "g" in data && data.g || "b" in data && data.b))
-      onChange({
-        r: Number(data.r) || rgb.r,
-        g: Number(data.g) || rgb.g,
-        b: Number(data.b) || rgb.b,
-        a: rgb.a,
-        source: "rgb"
-      });
-    else if (hsl && "a" in data && data.a) {
-      let alpha = Number(data.a);
-      alpha < 0 ? alpha = 0 : alpha > 100 && (alpha = 100), alpha = alpha / 100, onChange({
-        h: hsl.h,
-        s: hsl.s,
-        l: hsl.l,
-        a: alpha,
-        source: "hsl"
-      });
-    }
-  }, $[11] = hsl, $[12] = onChange, $[13] = rgb, $[14] = t7) : t7 = $[14];
-  const handleChange = t7;
-  let t8;
-  $[15] !== hex ? (t8 = hex?.replace("#", ""), $[15] = hex, $[16] = t8) : t8 = $[16];
-  let t9;
-  $[17] !== handleChange || $[18] !== inputStyles || $[19] !== t8 ? (t9 = /* @__PURE__ */ jsx(Box, { flex: 2, marginRight: 1, children: /* @__PURE__ */ jsx(EditableInput, { style: inputStyles, label: "hex", value: t8, onChange: handleChange }) }), $[17] = handleChange, $[18] = inputStyles, $[19] = t8, $[20] = t9) : t9 = $[20];
-  const t10 = rgb?.r;
-  let t11;
-  $[21] !== handleChange || $[22] !== inputStyles || $[23] !== t10 ? (t11 = /* @__PURE__ */ jsx(Box, { flex: 1, marginRight: 1, children: /* @__PURE__ */ jsx(EditableInput, { style: inputStyles, label: "r", value: t10, onChange: handleChange, dragLabel: !0, dragMax: 255 }) }), $[21] = handleChange, $[22] = inputStyles, $[23] = t10, $[24] = t11) : t11 = $[24];
-  const t12 = rgb?.g;
-  let t13;
-  $[25] !== handleChange || $[26] !== inputStyles || $[27] !== t12 ? (t13 = /* @__PURE__ */ jsx(Box, { flex: 1, marginRight: 1, children: /* @__PURE__ */ jsx(EditableInput, { style: inputStyles, label: "g", value: t12, onChange: handleChange, dragLabel: !0, dragMax: 255 }) }), $[25] = handleChange, $[26] = inputStyles, $[27] = t12, $[28] = t13) : t13 = $[28];
-  const t14 = rgb?.b;
-  let t15;
-  $[29] !== handleChange || $[30] !== inputStyles || $[31] !== t14 ? (t15 = /* @__PURE__ */ jsx(Box, { flex: 1, marginRight: 1, children: /* @__PURE__ */ jsx(EditableInput, { style: inputStyles, label: "b", value: t14, onChange: handleChange, dragLabel: !0, dragMax: 255 }) }), $[29] = handleChange, $[30] = inputStyles, $[31] = t14, $[32] = t15) : t15 = $[32];
-  let t16;
-  $[33] !== disableAlpha || $[34] !== handleChange || $[35] !== inputStyles || $[36] !== rgb?.a ? (t16 = !disableAlpha && /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsx(EditableInput, { style: inputStyles, label: "a", value: Math.round((rgb?.a ?? 1) * 100), onChange: handleChange, dragLabel: !0, dragMax: 100 }) }), $[33] = disableAlpha, $[34] = handleChange, $[35] = inputStyles, $[36] = rgb?.a, $[37] = t16) : t16 = $[37];
-  let t17;
-  return $[38] !== t11 || $[39] !== t13 || $[40] !== t15 || $[41] !== t16 || $[42] !== t9 ? (t17 = /* @__PURE__ */ jsxs(Flex, { children: [
-    t9,
-    t11,
-    t13,
-    t15,
-    t16
-  ] }), $[38] = t11, $[39] = t13, $[40] = t15, $[41] = t16, $[42] = t9, $[43] = t17) : t17 = $[43], t17;
-}, ColorBox = /* @__PURE__ */ styled(Box).withConfig({
-  displayName: "ColorBox",
-  componentId: "sc-13q7kbw-0"
-})(["position:absolute;top:0;left:0;width:100%;height:100%;"]), ReadOnlyContainer = /* @__PURE__ */ styled(Flex).withConfig({
-  displayName: "ReadOnlyContainer",
-  componentId: "sc-13q7kbw-1"
-})(["margin-top:6rem;background-color:var(--card-bg-color);position:relative;width:100%;"]), ColorPickerInner = (props) => {
-  const $ = c(46), {
-    width,
-    color: t0,
-    onChange,
-    onUnset,
-    disableAlpha,
-    colorList,
-    readOnly
-  } = props, {
-    rgb,
-    hex,
-    hsv,
-    hsl
-  } = t0;
-  if (!hsl || !hsv)
-    return null;
-  let t1;
-  $[0] !== width ? (t1 = {
-    width
-  }, $[0] = width, $[1] = t1) : t1 = $[1];
-  let t2;
-  $[2] !== disableAlpha || $[3] !== hsl || $[4] !== hsv || $[5] !== onChange || $[6] !== readOnly || $[7] !== rgb ? (t2 = !readOnly && /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Card, { overflow: "hidden", style: {
-      position: "relative",
-      height: "5em"
-    }, children: /* @__PURE__ */ jsx(Saturation, { onChange, hsl, hsv }) }),
-    /* @__PURE__ */ jsx(Card, { shadow: 1, radius: 3, overflow: "hidden", style: {
-      position: "relative",
-      height: "10px"
-    }, children: /* @__PURE__ */ jsx(Hue, { hsl, onChange: !readOnly && onChange }) }),
-    !disableAlpha && /* @__PURE__ */ jsx(Card, { shadow: 1, radius: 3, overflow: "hidden", style: {
-      position: "relative",
-      height: "10px",
-      background: "#fff"
-    }, children: /* @__PURE__ */ jsx(Alpha, { rgb, hsl, onChange }) })
-  ] }), $[2] = disableAlpha, $[3] = hsl, $[4] = hsv, $[5] = onChange, $[6] = readOnly, $[7] = rgb, $[8] = t2) : t2 = $[8];
-  let t3, t4;
-  $[9] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t3 = {
-    position: "relative",
-    minWidth: "4em",
-    background: "#fff"
-  }, t4 = /* @__PURE__ */ jsx(Checkboard, { size: 8, white: "transparent", grey: "rgba(0,0,0,.08)" }), $[9] = t3, $[10] = t4) : (t3 = $[9], t4 = $[10]);
-  const t5 = `rgba(${rgb?.r},${rgb?.g},${rgb?.b},${rgb?.a})`;
-  let t6;
-  $[11] !== t5 ? (t6 = /* @__PURE__ */ jsx(ColorBox, { style: {
-    backgroundColor: t5
-  } }), $[11] = t5, $[12] = t6) : t6 = $[12];
-  let t7;
-  $[13] !== hex || $[14] !== hsl?.h || $[15] !== hsl?.l || $[16] !== hsl?.s || $[17] !== readOnly || $[18] !== rgb?.b || $[19] !== rgb?.g || $[20] !== rgb?.r ? (t7 = readOnly && /* @__PURE__ */ jsx(ReadOnlyContainer, { padding: 2, paddingBottom: 1, sizing: "border", justify: "space-between", children: /* @__PURE__ */ jsxs(Stack, { gap: 3, marginTop: 1, children: [
-    /* @__PURE__ */ jsx(Text, { size: 3, weight: "bold", children: hex }),
-    /* @__PURE__ */ jsxs(Inline, { gap: 3, children: [
-      /* @__PURE__ */ jsxs(Text, { size: 1, children: [
-        /* @__PURE__ */ jsx("strong", { children: "RGB: " }),
-        rgb?.r,
-        " ",
-        rgb?.g,
-        " ",
-        rgb?.b
-      ] }),
-      /* @__PURE__ */ jsxs(Text, { size: 1, children: [
-        /* @__PURE__ */ jsx("strong", { children: "HSL: " }),
-        " ",
-        Math.round(hsl?.h ?? 0),
-        " ",
-        Math.round((hsl?.s ?? 0) * 100),
-        "% ",
-        Math.round((hsl?.l ?? 0) * 100),
-        "%"
-      ] })
-    ] })
-  ] }) }), $[13] = hex, $[14] = hsl?.h, $[15] = hsl?.l, $[16] = hsl?.s, $[17] = readOnly, $[18] = rgb?.b, $[19] = rgb?.g, $[20] = rgb?.r, $[21] = t7) : t7 = $[21];
-  let t8;
-  $[22] !== t6 || $[23] !== t7 ? (t8 = /* @__PURE__ */ jsxs(Card, { flex: 1, radius: 2, overflow: "hidden", style: t3, children: [
-    t4,
-    t6,
-    t7
-  ] }), $[22] = t6, $[23] = t7, $[24] = t8) : t8 = $[24];
-  let t9;
-  $[25] !== disableAlpha || $[26] !== hex || $[27] !== hsl || $[28] !== onChange || $[29] !== onUnset || $[30] !== readOnly || $[31] !== rgb ? (t9 = !readOnly && /* @__PURE__ */ jsxs(Flex, { align: "flex-start", marginLeft: 2, children: [
-    /* @__PURE__ */ jsx(Box, { style: {
-      width: 200
-    }, children: /* @__PURE__ */ jsx(ColorPickerFields, { rgb, hsl, hex, onChange, disableAlpha }) }),
-    /* @__PURE__ */ jsx(Box, { marginLeft: 2, children: /* @__PURE__ */ jsx(Button, { onClick: onUnset, title: "Delete color", icon: TrashIcon, tone: "critical" }) })
-  ] }), $[25] = disableAlpha, $[26] = hex, $[27] = hsl, $[28] = onChange, $[29] = onUnset, $[30] = readOnly, $[31] = rgb, $[32] = t9) : t9 = $[32];
-  let t10;
-  $[33] !== t8 || $[34] !== t9 ? (t10 = /* @__PURE__ */ jsxs(Flex, { children: [
-    t8,
-    t9
-  ] }), $[33] = t8, $[34] = t9, $[35] = t10) : t10 = $[35];
-  let t11;
-  $[36] !== colorList || $[37] !== onChange ? (t11 = colorList && /* @__PURE__ */ jsx(ColorList, { colors: colorList, onChange }), $[36] = colorList, $[37] = onChange, $[38] = t11) : t11 = $[38];
-  let t12;
-  $[39] !== t10 || $[40] !== t11 || $[41] !== t2 ? (t12 = /* @__PURE__ */ jsx(Card, { padding: 1, border: !0, radius: 1, children: /* @__PURE__ */ jsxs(Stack, { gap: 2, children: [
-    t2,
-    t10,
-    t11
-  ] }) }), $[39] = t10, $[40] = t11, $[41] = t2, $[42] = t12) : t12 = $[42];
-  let t13;
-  return $[43] !== t1 || $[44] !== t12 ? (t13 = /* @__PURE__ */ jsx("div", { style: t1, children: t12 }), $[43] = t1, $[44] = t12, $[45] = t13) : t13 = $[45], t13;
-}, ColorPicker = CustomPicker(ColorPickerInner), DEFAULT_COLOR = {
-  hex: "#24a3e3",
-  hsl: {
-    h: 200,
-    s: 0.7732,
-    l: 0.5156,
-    a: 1
-  },
-  hsv: {
-    h: 200,
-    s: 0.8414,
-    v: 0.8901,
-    a: 1
-  },
-  rgb: {
-    r: 46,
-    g: 163,
-    b: 227,
-    a: 1
-  },
-  source: "hex"
-};
-function ColorInput(props) {
-  const $ = c(10), {
-    onChange,
-    readOnly
-  } = props, _value = props.value, [value, setColorOptimistic] = useOptimistic(_value), type = props.schemaType, focusRef = useRef(null);
-  let t0;
-  $[0] !== onChange || $[1] !== type ? (t0 = function(nextColor) {
-    const fieldPatches = type.fields.filter((field) => field.name in nextColor).map((field_0) => {
-      const nextFieldValue = nextColor[field_0.name], isObject = field_0.type.jsonType === "object";
-      return set(isObject ? Object.assign({
-        _type: field_0.type.name
-      }, nextFieldValue) : nextFieldValue, [field_0.name]);
-    });
-    onChange([setIfMissing({
-      _type: type.name
-    }), set(type.name, ["_type"]), set(nextColor.rgb?.a, ["alpha"]), ...fieldPatches]);
-  }, $[0] = onChange, $[1] = type, $[2] = t0) : t0 = $[2];
-  const handleChange = t0;
-  let t1;
-  return $[3] !== handleChange || $[4] !== onChange || $[5] !== readOnly || $[6] !== setColorOptimistic || $[7] !== type || $[8] !== value ? (t1 = /* @__PURE__ */ jsx(Fragment, { children: value && value.hex ? /* @__PURE__ */ jsx(ColorPicker, { color: value, onChange: (nextColor_0) => startTransition(() => {
-    setColorOptimistic(nextColor_0), handleChange(nextColor_0);
-  }), readOnly: readOnly || typeof type.readOnly == "boolean" && type.readOnly, disableAlpha: !!type.options?.disableAlpha, colorList: type.options?.colorList, onUnset: () => startTransition(() => {
-    setColorOptimistic(void 0), onChange(unset());
-  }) }) : /* @__PURE__ */ jsx(Button, { icon: AddIcon, mode: "ghost", text: "Create color", ref: focusRef, disabled: !!readOnly, onClick: () => startTransition(() => {
-    setColorOptimistic(DEFAULT_COLOR), handleChange(DEFAULT_COLOR);
-  }) }) }), $[3] = handleChange, $[4] = onChange, $[5] = readOnly, $[6] = setColorOptimistic, $[7] = type, $[8] = value, $[9] = t1) : t1 = $[9], t1;
-}
-export {
-  ColorInput as default
-};
-//# sourceMappingURL=ColorInput.js.map