@wavemaker-ai/react-runtime 1.0.0-rc.647502 → 1.0.0-rc.647565

package/components/input/color-picker/index.js

@@ -1,73 +1,78 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.WmColorPicker = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireWildcard(require("react"));
-var _reactColor = require("react-color");
-var _clsx = _interopRequireDefault(require("clsx"));
-var _Box = _interopRequireDefault(require("@mui/material/Box"));
-var _styles = require("@mui/material/styles");
-var _input = require("@base-ui-components/react/input");
-var _withBaseWrapper = require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper");
-var _withFormController = _interopRequireDefault(require("@wavemaker-ai/react-runtime/components/data/form/form-controller/withFormController"));
-var _reactDom = require("react-dom");
-var _withStandalone = _interopRequireDefault(require("@wavemaker-ai/react-runtime/higherOrder/withStandalone"));
-var _excluded = ["datavalue", "placeholder", "readonly", "disabled", "required", "name", "shortcutkey", "tabindex", "className", "autoclose", "arialabel", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onFocus", "onBlur", "onClick", "onKeydown", "onKeyup", "onChange", "listener"];
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
-var __jsx = _react["default"].createElement;
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-// Constants
-var AUTOCLOSE_TYPE = {
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useRef, useCallback, useState, useEffect } from "react";
+import { ChromePicker } from "react-color";
+import clsx from "clsx";
+import Box from "@mui/material/Box";
+import { useTheme } from "@mui/material/styles";
+import { Input } from "@base-ui-components/react/input";
+import { withBaseWrapper } from "../../../higherOrder/withBaseWrapper";
+import withFormController from "../../data/form/form-controller/withFormController";
+import { createPortal } from "react-dom";
+import withStandalone from "../../../higherOrder/withStandalone";
+const AUTOCLOSE_TYPE = {
   ALWAYS: "always",
   OUTSIDECLICK: "outsideClick",
   NEVER: "disabled"
 };
-var DEFAULT_CLASS = "input-group app-colorpicker";
-var PICKER_HEIGHT = 320;
-var POSITION_DELAY = 100;
-
-// Utility Functions
-var isValidHexColor = function isValidHexColor(hex) {
+const DEFAULT_CLASS = "input-group app-colorpicker";
+const PICKER_HEIGHT = 320;
+const POSITION_DELAY = 100;
+const isValidHexColor = (hex) => {
   return /^#([0-9A-F]{3}){1,2}$/i.test(hex);
 };
-var isValidRgbaColor = function isValidRgbaColor(rgba) {
+const isValidRgbaColor = (rgba) => {
   return /^rgba\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*,\s*[\d.]+\s*\)$/.test(rgba);
 };
-var isValidRgbColor = function isValidRgbColor(rgb) {
+const isValidRgbColor = (rgb) => {
   return /^rgb\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*\)$/.test(rgb);
 };
-var isValidNamedColor = function isValidNamedColor(color) {
-  var tempElem = document.createElement("div");
+const isValidNamedColor = (color) => {
+  const tempElem = document.createElement("div");
   tempElem.style.color = "";
   document.body.appendChild(tempElem);
-  var defaultColor = getComputedStyle(tempElem).color;
+  const defaultColor = getComputedStyle(tempElem).color;
   tempElem.style.color = color;
-  var computedColor = getComputedStyle(tempElem).color;
+  const computedColor = getComputedStyle(tempElem).color;
   document.body.removeChild(tempElem);
-
-  // If color didn’t change, it's invalid
   return computedColor !== defaultColor;
 };
-var hexToRgba = function hexToRgba(colorString) {
-  var defaultColor = {
-    r: 0,
-    g: 0,
-    b: 0,
-    a: 0
-  };
+const hexToRgba = (colorString) => {
+  const defaultColor = { r: 0, g: 0, b: 0, a: 0 };
   if (!colorString || colorString === "") {
     return defaultColor;
   }
-
-  //Handle RGB format
-  var rgbMatch = colorString.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+  const rgbMatch = colorString.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
   if (rgbMatch) {
     return {
       r: parseInt(rgbMatch[1], 10),
@@ -75,9 +80,7 @@ var hexToRgba = function hexToRgba(colorString) {
       b: parseInt(rgbMatch[3], 10)
     };
   }
-
-  // Handle RGBA format
-  var rgbaMatch = colorString.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*([\d.]+)\)/);
+  const rgbaMatch = colorString.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*([\d.]+)\)/);
   if (rgbaMatch) {
     return {
       r: parseInt(rgbaMatch[1], 10),
@@ -89,13 +92,8 @@ var hexToRgba = function hexToRgba(colorString) {
   if (isValidNamedColor(colorString)) {
     return getNamedColorRgba(colorString) || defaultColor;
   }
-
-  // Handle HEX format
-  var hex = colorString.replace("#", "");
-  var r = 0,
-    g = 0,
-    b = 0,
-    a = 1;
+  let hex = colorString.replace("#", "");
+  let r = 0, g = 0, b = 0, a = 1;
   if (hex.length === 3) {
     r = parseInt(hex.charAt(0).repeat(2), 16);
     g = parseInt(hex.charAt(1).repeat(2), 16);
@@ -108,582 +106,526 @@ var hexToRgba = function hexToRgba(colorString) {
       a = parseInt(hex.substring(6, 8), 16) / 255;
     }
   }
-  return {
-    r: r,
-    g: g,
-    b: b,
-    a: a
-  };
+  return { r, g, b, a };
 };
-var rgbaToHex = function rgbaToHex(color) {
-  var toHex = function toHex(value) {
-    return Math.round(value).toString(16).padStart(2, "0");
-  };
-  var r = toHex(color.r);
-  var g = toHex(color.g);
-  var b = toHex(color.b);
+const rgbaToHex = (color) => {
+  const toHex = (value) => Math.round(value).toString(16).padStart(2, "0");
+  const r = toHex(color.r);
+  const g = toHex(color.g);
+  const b = toHex(color.b);
   if (color.a === 1) {
-    return "#".concat(r).concat(g).concat(b);
+    return `#${r}${g}${b}`;
   }
-  var a = toHex(color.a ? color.a * 255 : 255);
-  return "#".concat(r).concat(g).concat(b).concat(a);
+  const a = toHex(color.a ? color.a * 255 : 255);
+  return `#${r}${g}${b}${a}`;
 };
-var rgbaToString = function rgbaToString(color) {
-  if (color.a === undefined) {
-    return "rgba(".concat(color.r, ",").concat(color.g, ",").concat(color.b, ",1)");
+const rgbaToString = (color) => {
+  if (color.a === void 0) {
+    return `rgba(${color.r},${color.g},${color.b},1)`;
   }
-  return "rgba(".concat(color.r, ",").concat(color.g, ",").concat(color.b, ",").concat(color.a, ")");
+  return `rgba(${color.r},${color.g},${color.b},${color.a})`;
 };
-var rgbToString = function rgbToString(color) {
-  return "rgb(".concat(color.r, ",").concat(color.g, ",").concat(color.b, ")");
+const rgbToString = (color) => {
+  return `rgb(${color.r},${color.g},${color.b})`;
 };
-
-// get RGBA value from named color
-var getNamedColorRgba = function getNamedColorRgba(colorName) {
-  var tempElem = document.createElement("div");
-  tempElem.style.display = "none"; // hide element
+const getNamedColorRgba = (colorName) => {
+  const tempElem = document.createElement("div");
+  tempElem.style.display = "none";
   document.body.appendChild(tempElem);
-
-  // Get default computed color before setting the name
-  var defaultColor = getComputedStyle(tempElem).color;
+  const defaultColor = getComputedStyle(tempElem).color;
   tempElem.style.color = colorName;
-  var computedColor = getComputedStyle(tempElem).color;
+  const computedColor = getComputedStyle(tempElem).color;
   document.body.removeChild(tempElem);
-
-  // If color didn’t change, it's invalid
   if (computedColor === defaultColor) {
     return null;
   }
-
-  // Parse the valid computed color
-  var rgbaMatch = computedColor.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
+  const rgbaMatch = computedColor.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
   if (rgbaMatch) {
     return {
       r: parseInt(rgbaMatch[1], 10),
       g: parseInt(rgbaMatch[2], 10),
       b: parseInt(rgbaMatch[3], 10),
-      a: rgbaMatch[4] !== undefined ? parseFloat(rgbaMatch[4]) : 1
+      a: rgbaMatch[4] !== void 0 ? parseFloat(rgbaMatch[4]) : 1
     };
   }
-  return {
-    r: 255,
-    g: 255,
-    b: 255,
-    a: 1
-  };
+  return { r: 255, g: 255, b: 255, a: 1 };
 };
-
-// Custom Hooks
-var useColorValue = function useColorValue(initialValue) {
-  var _useState = (0, _react.useState)(function () {
-      return initialValue ? hexToRgba(initialValue) : {
-        r: 255,
-        g: 255,
-        b: 255,
-        a: 1
-      };
-    }),
-    colorValue = _useState[0],
-    setColorValue = _useState[1];
-  var _useState2 = (0, _react.useState)(initialValue || ""),
-    inputValue = _useState2[0],
-    setInputValue = _useState2[1];
+const useColorValue = (initialValue) => {
+  const [colorValue, setColorValue] = useState(
+    () => initialValue ? hexToRgba(initialValue) : { r: 255, g: 255, b: 255, a: 1 }
+  );
+  const [inputValue, setInputValue] = useState(initialValue || "");
   return {
-    colorValue: colorValue,
-    setColorValue: setColorValue,
-    inputValue: inputValue,
-    setInputValue: setInputValue
+    colorValue,
+    setColorValue,
+    inputValue,
+    setInputValue
   };
 };
-var usePickerPosition = function usePickerPosition() {
-  var _useState3 = (0, _react.useState)({
-      top: 0,
-      left: 0,
-      direction: "down"
-    }),
-    position = _useState3[0],
-    setPosition = _useState3[1];
-  var calculatePosition = (0, _react.useCallback)(function (containerElement) {
+const usePickerPosition = () => {
+  const [position, setPosition] = useState({ top: 0, left: 0, direction: "down" });
+  const calculatePosition = useCallback((containerElement) => {
     if (!containerElement) {
-      return {
-        top: 0,
-        left: 0,
-        direction: "down"
-      };
+      return { top: 0, left: 0, direction: "down" };
     }
-    var rect = containerElement.getBoundingClientRect();
-    var viewportHeight = window.innerHeight;
-    var spaceBelow = viewportHeight - rect.bottom;
-
-    // Calculate absolute position using fixed positioning (for portal)
-    var openUpward = spaceBelow < PICKER_HEIGHT;
-    var top = openUpward ? rect.top - PICKER_HEIGHT + 50 // Position above if not enough space below
-    : rect.bottom + 8; // Position below with 8px gap
-
+    const rect = containerElement.getBoundingClientRect();
+    const viewportHeight = window.innerHeight;
+    const spaceBelow = viewportHeight - rect.bottom;
+    const openUpward = spaceBelow < PICKER_HEIGHT;
+    const top = openUpward ? rect.top - PICKER_HEIGHT + 50 : rect.bottom + 8;
     return {
-      top: top,
+      top,
       left: rect.left,
       direction: openUpward ? "up" : "down"
     };
   }, []);
-  return {
-    position: position,
-    setPosition: setPosition,
-    calculatePosition: calculatePosition
-  };
+  return { position, setPosition, calculatePosition };
 };
-
-// Main Component
-var WmColorPicker = /*#__PURE__*/(0, _react.memo)(function (props) {
-  var theme = (0, _styles.useTheme)();
-  var datavalue = props.datavalue,
-    _props$placeholder = props.placeholder,
-    placeholder = _props$placeholder === void 0 ? "Select Color" : _props$placeholder,
-    _props$readonly = props.readonly,
-    readonly = _props$readonly === void 0 ? false : _props$readonly,
-    _props$disabled = props.disabled,
-    disabled = _props$disabled === void 0 ? false : _props$disabled,
-    _props$required = props.required,
-    required = _props$required === void 0 ? false : _props$required,
-    name = props.name,
-    shortcutkey = props.shortcutkey,
-    _props$tabindex = props.tabindex,
-    tabindex = _props$tabindex === void 0 ? 0 : _props$tabindex,
-    className = props.className,
-    _props$autoclose = props.autoclose,
-    autoclose = _props$autoclose === void 0 ? AUTOCLOSE_TYPE.OUTSIDECLICK : _props$autoclose,
-    arialabel = props.arialabel,
-    onDoubleClick = props.onDoubleClick,
-    _onMouseEnter = props.onMouseEnter,
-    _onMouseLeave = props.onMouseLeave,
-    onFocus = props.onFocus,
-    onBlur = props.onBlur,
-    onClick = props.onClick,
-    onKeydown = props.onKeydown,
-    onKeyup = props.onKeyup,
-    onChange = props.onChange,
-    listener = props.listener,
-    restProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
-
-  // Refs
-  var inputRef = (0, _react.useRef)(null);
-  var pickerRef = (0, _react.useRef)(null);
-  var containerRef = (0, _react.useRef)(null);
-
-  // State
-  var _useState4 = (0, _react.useState)(false),
-    isOpen = _useState4[0],
-    setIsOpen = _useState4[1];
-  var _useState5 = (0, _react.useState)(false),
-    isInteractingWithPicker = _useState5[0],
-    setIsInteractingWithPicker = _useState5[1];
-  var _useState6 = (0, _react.useState)(""),
-    prevValue = _useState6[0],
-    setPrevValue = _useState6[1];
-  var _useState7 = (0, _react.useState)(placeholder),
-    getPlaceholder = _useState7[0],
-    setPlaceholder = _useState7[1];
-
-  // Custom hooks
-  var _useColorValue = useColorValue(datavalue),
-    colorValue = _useColorValue.colorValue,
-    setColorValue = _useColorValue.setColorValue,
-    inputValue = _useColorValue.inputValue,
-    setInputValue = _useColorValue.setInputValue;
-  var _usePickerPosition = usePickerPosition(),
-    pickerPosition = _usePickerPosition.position,
-    setPickerPosition = _usePickerPosition.setPosition,
-    calculatePosition = _usePickerPosition.calculatePosition;
-
-  // Computed values
-  var shouldCloseOnOutsideClick = autoclose === AUTOCLOSE_TYPE.OUTSIDECLICK || autoclose === AUTOCLOSE_TYPE.ALWAYS;
-  var isReadonlyOrDisabled = readonly || disabled;
-  var openPicker = (0, _react.useCallback)(function () {
-    if (!isReadonlyOrDisabled && !isOpen) {
-      setPickerPosition(calculatePosition(containerRef.current));
-      setIsOpen(true);
-    }
-  }, [isReadonlyOrDisabled, isOpen, calculatePosition, setPickerPosition]);
-  var closePicker = (0, _react.useCallback)(function () {
-    if (isOpen && !isInteractingWithPicker) {
-      setIsOpen(false);
-    }
-  }, [isOpen, isInteractingWithPicker]);
-
-  // Register widget methods (open/close) with listener
-  (0, _react.useEffect)(function () {
-    if (listener !== null && listener !== void 0 && listener.onChange) {
-      listener.onChange(props.fieldName || name, {
-        open: openPicker,
-        close: closePicker
-      });
-    }
-  }, [openPicker, closePicker]);
-  var validateAndSetColor = (0, _react.useCallback)(function (value) {
-    if (!value.trim()) {
-      setColorValue({
-        r: 255,
-        g: 255,
-        b: 255,
-        a: 1
-      });
-      return "";
-    }
-    if (isValidRgbaColor(value)) {
-      var color = hexToRgba(value);
-      setColorValue(color);
-      return rgbaToString(color);
-    }
-    if (isValidHexColor(value)) {
-      var _color = hexToRgba(value);
-      setColorValue(_color);
-      return value;
-    }
-    if (isValidRgbColor(value)) {
-      var _color2 = hexToRgba(value);
-      setColorValue(_color2);
-      return rgbToString(_color2);
-    }
-    var namedColor = isValidNamedColor(value);
-    if (namedColor) {
-      var namedColorValue = getNamedColorRgba(value);
-      setColorValue(namedColorValue);
-      return rgbaToString(namedColorValue);
-    }
-
-    // Invalid format
-    setColorValue({
-      r: 255,
-      g: 255,
-      b: 255,
-      a: 1
-    });
-    return "";
-  }, [setColorValue]);
-  var handleInputChange = (0, _react.useCallback)(function (event) {
-    var newValue = event.target.value;
-    setInputValue(newValue);
-    if (newValue === "") {
-      setPlaceholder(placeholder);
-    }
-    // Update color value for valid inputs
-    if (newValue && (isValidHexColor(newValue) || isValidRgbaColor(newValue) || isValidRgbColor(newValue) || isValidNamedColor(newValue))) {
-      setColorValue(hexToRgba(newValue));
-    } else if (!newValue) {
-      setColorValue({
-        r: 255,
-        g: 255,
-        b: 255,
-        a: 1
-      });
-    }
-    if (onChange && name) {
-      onChange(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name], newValue, colorValue);
-    }
-  }, [setInputValue, setColorValue]);
-  var handleInputBlur = (0, _react.useCallback)(function (event) {
-    // Close picker logic
-    if (autoclose !== AUTOCLOSE_TYPE.NEVER && !isInteractingWithPicker && pickerRef.current && !pickerRef.current.contains(event.relatedTarget)) {
-      setIsOpen(false);
-      handleFloatingLabel("close");
-    }
-
-    // Validate and correct input value
-    if (inputValue) {
-      var validatedValue = validateAndSetColor(inputValue);
-      // Check for named color equivalence
-      var namedColor = getNamedColorRgba(inputValue);
-      if (validatedValue !== inputValue && !(namedColor && validatedValue === rgbaToString(namedColor))) {
-        setInputValue(validatedValue);
-      }
-    }
-
-    // Call blur handlers
-    if (onBlur) {
-      onBlur(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name]);
-    }
-  }, [autoclose, isInteractingWithPicker, inputValue, validateAndSetColor, setInputValue, onBlur]);
-  var handleInputFocus = (0, _react.useCallback)(function (event) {
-    if (onFocus) {
-      onFocus(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name]);
-    }
-    openPicker();
-    handleFloatingLabel("open");
-  }, [onFocus, openPicker]);
-  var handleInputClick = (0, _react.useCallback)(function (event) {
-    event.stopPropagation();
-    if (!isReadonlyOrDisabled) {
-      if (onClick && name) {
-        onClick(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name]);
+const WmColorPicker = memo(
+  (props) => {
+    const theme = useTheme();
+    const _a = props, {
+      datavalue,
+      placeholder = "Select Color",
+      readonly = false,
+      disabled = false,
+      required = false,
+      name,
+      shortcutkey,
+      tabindex = 0,
+      className,
+      autoclose = AUTOCLOSE_TYPE.OUTSIDECLICK,
+      arialabel,
+      onDoubleClick: onDoubleClick,
+      onMouseEnter,
+      onMouseLeave,
+      onFocus,
+      onBlur,
+      onClick,
+      onKeydown,
+      onKeyup,
+      onChange,
+      listener
+    } = _a, restProps = __objRest(_a, [
+      "datavalue",
+      "placeholder",
+      "readonly",
+      "disabled",
+      "required",
+      "name",
+      "shortcutkey",
+      "tabindex",
+      "className",
+      "autoclose",
+      "arialabel",
+      // Event handlers
+      "onDoubleClick",
+      "onMouseEnter",
+      "onMouseLeave",
+      "onFocus",
+      "onBlur",
+      "onClick",
+      "onKeydown",
+      "onKeyup",
+      "onChange",
+      "listener"
+    ]);
+    const inputRef = useRef(null);
+    const pickerRef = useRef(null);
+    const containerRef = useRef(null);
+    const [isOpen, setIsOpen] = useState(false);
+    const [isInteractingWithPicker, setIsInteractingWithPicker] = useState(false);
+    const [prevValue, setPrevValue] = useState("");
+    const [getPlaceholder, setPlaceholder] = useState(placeholder);
+    const { colorValue, setColorValue, inputValue, setInputValue } = useColorValue(datavalue);
+    const {
+      position: pickerPosition,
+      setPosition: setPickerPosition,
+      calculatePosition
+    } = usePickerPosition();
+    const shouldCloseOnOutsideClick = autoclose === AUTOCLOSE_TYPE.OUTSIDECLICK || autoclose === AUTOCLOSE_TYPE.ALWAYS;
+    const isReadonlyOrDisabled = readonly || disabled;
+    const openPicker = useCallback(() => {
+      if (!isReadonlyOrDisabled && !isOpen) {
+        setPickerPosition(calculatePosition(containerRef.current));
+        setIsOpen(true);
       }
-      openPicker();
-      handleFloatingLabel("open");
-    }
-  }, [isReadonlyOrDisabled, onClick, openPicker]);
-  var handleColorBoxClick = (0, _react.useCallback)(function (event) {
-    event.stopPropagation();
-    if (!isReadonlyOrDisabled) {
-      isOpen ? closePicker() : openPicker();
-    }
-  }, [isReadonlyOrDisabled, isOpen, closePicker, openPicker]);
-  var handleColorChange = (0, _react.useCallback)(function (color, event) {
-    var _color$rgb = color.rgb,
-      r = _color$rgb.r,
-      g = _color$rgb.g,
-      b = _color$rgb.b,
-      a = _color$rgb.a;
-    var rgbaColor = {
-      r: r,
-      g: g,
-      b: b,
-      a: a
-    };
-    setColorValue(rgbaColor);
-    var newValue = a !== 1 ? rgbaToString(rgbaColor) : rgbaToHex(rgbaColor);
-    if (inputRef.current) {
-      inputRef.current.value = newValue;
-    }
-    if (listener !== null && listener !== void 0 && listener.Widgets[(props === null || props === void 0 ? void 0 : props.fieldName) || name]) {
-      listener.Widgets[name].datavalue = newValue;
-      listener.Widgets[name].displayValue = newValue;
-    }
-    setInputValue(newValue);
-    if (listener !== null && listener !== void 0 && listener.onChange) {
-      listener.onChange((props === null || props === void 0 ? void 0 : props.fieldName) || name, {
-        datavalue: newValue
-      });
-    }
-    var customEvent = _objectSpread(_objectSpread({}, event), {}, {
-      type: "change"
-    });
-    if (onChange) {
-      onChange(customEvent, listener === null || listener === void 0 ? void 0 : listener.Widgets[name], newValue, inputValue);
-    }
-    if (autoclose === AUTOCLOSE_TYPE.ALWAYS && !isInteractingWithPicker) {
-      setTimeout(function () {
-        return setIsOpen(false);
-      }, POSITION_DELAY);
-    }
-  }, [setColorValue, setInputValue, autoclose, isInteractingWithPicker]);
-  var handleKeyDown = (0, _react.useCallback)(function (event) {
-    if (event.key === "Enter") {
-      setIsOpen(false);
-      var newValue = event.target.value;
-      setInputValue(newValue);
-      if (newValue === "") {
-        setPlaceholder(placeholder);
+    }, [isReadonlyOrDisabled, isOpen, calculatePosition, setPickerPosition]);
+    const closePicker = useCallback(() => {
+      if (isOpen && !isInteractingWithPicker) {
+        setIsOpen(false);
       }
-      // Update color value for valid inputs
-      if (newValue && (isValidHexColor(newValue) || isValidRgbaColor(newValue) || isValidRgbColor(newValue) || isValidNamedColor(newValue))) {
-        setColorValue(hexToRgba(newValue));
-      } else if (!newValue) {
-        setColorValue({
-          r: 255,
-          g: 255,
-          b: 255,
-          a: 1
+    }, [isOpen, isInteractingWithPicker]);
+    useEffect(() => {
+      if (listener == null ? void 0 : listener.onChange) {
+        listener.onChange(props.fieldName || name, {
+          open: openPicker,
+          close: closePicker
         });
       }
-    }
-    if (onKeydown) {
-      onKeydown(event);
-    }
-  }, [onKeydown]);
-
-  // Picker interaction handlers
-  var handlePickerMouseDown = (0, _react.useCallback)(function () {
-    setIsInteractingWithPicker(true);
-  }, []);
-  var handlePickerMouseUp = (0, _react.useCallback)(function () {
-    setTimeout(function () {
-      return setIsInteractingWithPicker(false);
-    }, POSITION_DELAY);
-  }, []);
-  var handleFloatingLabel = (0, _react.useCallback)(function (action, currentValue) {
-    var _containerRef$current;
-    var captionEl = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.closest(".app-composite-widget.caption-floating");
-    if (!captionEl) return;
-    if (action === "open") {
-      // On click/focus - show placeholder and activate floating
-      captionEl.classList.add("float-active");
-      setPlaceholder(placeholder);
-    } else if (action === "close" && (!inputValue || currentValue === "")) {
-      // On blur - hide placeholder if no value
-      captionEl.classList.remove("float-active");
-      setPlaceholder("");
-    }
-  }, [inputValue]);
-
-  // Effects
-  (0, _react.useEffect)(function () {
-    if (datavalue !== prevValue) {
-      setPrevValue(datavalue);
-      if (datavalue) {
-        try {
-          handleFloatingLabel("open");
-          var color = hexToRgba(datavalue);
+    }, [openPicker, closePicker]);
+    const validateAndSetColor = useCallback(
+      (value) => {
+        if (!value.trim()) {
+          setColorValue({ r: 255, g: 255, b: 255, a: 1 });
+          return "";
+        }
+        if (isValidRgbaColor(value)) {
+          const color = hexToRgba(value);
           setColorValue(color);
-          var formattedValue = datavalue.startsWith("rgba(") ? datavalue : datavalue.startsWith("#") ? datavalue : "#".concat(datavalue);
-          setInputValue(formattedValue);
-        } catch (error) {
-          console.error("Invalid color format:", error);
-          setColorValue({
-            r: 255,
-            g: 255,
-            b: 255,
-            a: 1
+          return rgbaToString(color);
+        }
+        if (isValidHexColor(value)) {
+          const color = hexToRgba(value);
+          setColorValue(color);
+          return value;
+        }
+        if (isValidRgbColor(value)) {
+          const color = hexToRgba(value);
+          setColorValue(color);
+          return rgbToString(color);
+        }
+        const namedColor = isValidNamedColor(value);
+        if (namedColor) {
+          const namedColorValue = getNamedColorRgba(value);
+          setColorValue(namedColorValue);
+          return rgbaToString(namedColorValue);
+        }
+        setColorValue({ r: 255, g: 255, b: 255, a: 1 });
+        return "";
+      },
+      [setColorValue]
+    );
+    const handleInputChange = useCallback(
+      (event) => {
+        const newValue = event.target.value;
+        setInputValue(newValue);
+        if (newValue === "") {
+          setPlaceholder(placeholder);
+        }
+        if (newValue && (isValidHexColor(newValue) || isValidRgbaColor(newValue) || isValidRgbColor(newValue) || isValidNamedColor(newValue))) {
+          setColorValue(hexToRgba(newValue));
+        } else if (!newValue) {
+          setColorValue({ r: 255, g: 255, b: 255, a: 1 });
+        }
+        if (onChange && name) {
+          onChange(
+            event,
+            listener == null ? void 0 : listener.Widgets[name],
+            newValue,
+            colorValue
+          );
+        }
+      },
+      [setInputValue, setColorValue]
+    );
+    const handleInputBlur = useCallback(
+      (event) => {
+        if (autoclose !== AUTOCLOSE_TYPE.NEVER && !isInteractingWithPicker && pickerRef.current && !pickerRef.current.contains(event.relatedTarget)) {
+          setIsOpen(false);
+          handleFloatingLabel("close");
+        }
+        if (inputValue) {
+          const validatedValue = validateAndSetColor(inputValue);
+          const namedColor = getNamedColorRgba(inputValue);
+          if (validatedValue !== inputValue && !(namedColor && validatedValue === rgbaToString(namedColor))) {
+            setInputValue(validatedValue);
+          }
+        }
+        if (onBlur) {
+          onBlur(event, listener == null ? void 0 : listener.Widgets[name]);
+        }
+      },
+      [autoclose, isInteractingWithPicker, inputValue, validateAndSetColor, setInputValue, onBlur]
+    );
+    const handleInputFocus = useCallback(
+      (event) => {
+        if (onFocus) {
+          onFocus(event, listener == null ? void 0 : listener.Widgets[name]);
+        }
+        openPicker();
+        handleFloatingLabel("open");
+      },
+      [onFocus, openPicker]
+    );
+    const handleInputClick = useCallback(
+      (event) => {
+        event.stopPropagation();
+        if (!isReadonlyOrDisabled) {
+          if (onClick && name) {
+            onClick(event, listener == null ? void 0 : listener.Widgets[name]);
+          }
+          openPicker();
+          handleFloatingLabel("open");
+        }
+      },
+      [isReadonlyOrDisabled, onClick, openPicker]
+    );
+    const handleColorBoxClick = useCallback(
+      (event) => {
+        event.stopPropagation();
+        if (!isReadonlyOrDisabled) {
+          isOpen ? closePicker() : openPicker();
+        }
+      },
+      [isReadonlyOrDisabled, isOpen, closePicker, openPicker]
+    );
+    const handleColorChange = useCallback(
+      (color, event) => {
+        const { r, g, b, a } = color.rgb;
+        const rgbaColor = { r, g, b, a };
+        setColorValue(rgbaColor);
+        const newValue = a !== 1 ? rgbaToString(rgbaColor) : rgbaToHex(rgbaColor);
+        if (inputRef.current) {
+          inputRef.current.value = newValue;
+        }
+        if (listener == null ? void 0 : listener.Widgets[(props == null ? void 0 : props.fieldName) || name]) {
+          listener.Widgets[name].datavalue = newValue;
+          listener.Widgets[name].displayValue = newValue;
+        }
+        setInputValue(newValue);
+        if (listener == null ? void 0 : listener.onChange) {
+          listener.onChange((props == null ? void 0 : props.fieldName) || name, {
+            datavalue: newValue
           });
-          setInputValue("");
         }
-      } else {
-        setColorValue({
-          r: 255,
-          g: 255,
-          b: 255,
-          a: 1
+        const customEvent = __spreadProps(__spreadValues({}, event), {
+          type: "change"
         });
-        setInputValue("");
-      }
-    }
-  }, [datavalue, prevValue, setColorValue, setInputValue]);
-
-  // Outside click handler
-  (0, _react.useEffect)(function () {
-    if (!isOpen || !shouldCloseOnOutsideClick) return;
-    var handleClickOutside = function handleClickOutside(event) {
-      var target = event.target;
-      if (!isInteractingWithPicker && pickerRef.current && !pickerRef.current.contains(target) && containerRef.current && !containerRef.current.contains(target)) {
-        var _inputRef$current;
-        setIsOpen(false);
-        var currentValue = ((_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value) || "";
-        if (currentValue === "") {
+        if (onChange) {
+          onChange(
+            customEvent,
+            listener == null ? void 0 : listener.Widgets[name],
+            newValue,
+            inputValue
+          );
+        }
+        if (autoclose === AUTOCLOSE_TYPE.ALWAYS && !isInteractingWithPicker) {
+          setTimeout(() => setIsOpen(false), POSITION_DELAY);
+        }
+      },
+      [setColorValue, setInputValue, autoclose, isInteractingWithPicker]
+    );
+    const handleKeyDown = useCallback(
+      (event) => {
+        if (event.key === "Enter") {
+          setIsOpen(false);
+          const newValue = event.target.value;
+          setInputValue(newValue);
+          if (newValue === "") {
+            setPlaceholder(placeholder);
+          }
+          if (newValue && (isValidHexColor(newValue) || isValidRgbaColor(newValue) || isValidRgbColor(newValue) || isValidNamedColor(newValue))) {
+            setColorValue(hexToRgba(newValue));
+          } else if (!newValue) {
+            setColorValue({ r: 255, g: 255, b: 255, a: 1 });
+          }
+        }
+        if (onKeydown) {
+          onKeydown(event);
+        }
+      },
+      [onKeydown]
+    );
+    const handlePickerMouseDown = useCallback(() => {
+      setIsInteractingWithPicker(true);
+    }, []);
+    const handlePickerMouseUp = useCallback(() => {
+      setTimeout(() => setIsInteractingWithPicker(false), POSITION_DELAY);
+    }, []);
+    const handleFloatingLabel = useCallback(
+      (action, currentValue) => {
+        var _a2;
+        const captionEl = (_a2 = containerRef.current) == null ? void 0 : _a2.closest(".app-composite-widget.caption-floating");
+        if (!captionEl) return;
+        if (action === "open") {
+          captionEl.classList.add("float-active");
+          setPlaceholder(placeholder);
+        } else if (action === "close" && (!inputValue || currentValue === "")) {
+          captionEl.classList.remove("float-active");
+          setPlaceholder("");
+        }
+      },
+      [inputValue]
+    );
+    useEffect(() => {
+      if (datavalue !== prevValue) {
+        setPrevValue(datavalue);
+        if (datavalue) {
+          try {
+            handleFloatingLabel("open");
+            const color = hexToRgba(datavalue);
+            setColorValue(color);
+            const formattedValue = datavalue.startsWith("rgba(") ? datavalue : datavalue.startsWith("#") ? datavalue : `#${datavalue}`;
+            setInputValue(formattedValue);
+          } catch (error) {
+            console.error("Invalid color format:", error);
+            setColorValue({ r: 255, g: 255, b: 255, a: 1 });
+            setInputValue("");
+          }
+        } else {
+          setColorValue({ r: 255, g: 255, b: 255, a: 1 });
           setInputValue("");
-          handleFloatingLabel("close", currentValue);
         }
       }
+    }, [datavalue, prevValue, setColorValue, setInputValue]);
+    useEffect(() => {
+      if (!isOpen || !shouldCloseOnOutsideClick) return;
+      const handleClickOutside = (event) => {
+        var _a2;
+        const target = event.target;
+        if (!isInteractingWithPicker && pickerRef.current && !pickerRef.current.contains(target) && containerRef.current && !containerRef.current.contains(target)) {
+          setIsOpen(false);
+          const currentValue = ((_a2 = inputRef.current) == null ? void 0 : _a2.value) || "";
+          if (currentValue === "") {
+            setInputValue("");
+            handleFloatingLabel("close", currentValue);
+          }
+        }
+      };
+      document.addEventListener("mousedown", handleClickOutside, true);
+      return () => document.removeEventListener("mousedown", handleClickOutside, true);
+    }, [isOpen, shouldCloseOnOutsideClick, isInteractingWithPicker]);
+    useEffect(() => {
+      if (!isOpen) return;
+      const handleEscape = (event) => {
+        if (event.key === "Escape" || event.key === "Esc") {
+          setIsOpen(false);
+        }
+      };
+      window.addEventListener("keydown", handleEscape);
+      return () => window.removeEventListener("keydown", handleEscape);
+    }, [isOpen]);
+    useEffect(() => {
+      if (!isOpen) return;
+      const updatePosition = () => {
+        setPickerPosition(calculatePosition(containerRef.current));
+      };
+      window.addEventListener("scroll", updatePosition, true);
+      window.addEventListener("resize", updatePosition);
+      return () => {
+        window.removeEventListener("scroll", updatePosition, true);
+        window.removeEventListener("resize", updatePosition);
+      };
+    }, [isOpen, calculatePosition, setPickerPosition]);
+    const checkPlaceholder = () => {
+      setTimeout(() => {
+        var _a2;
+        const captionEl = (_a2 = containerRef.current) == null ? void 0 : _a2.closest(".app-composite-widget.caption-floating");
+        if (captionEl && !captionEl.classList.contains("float-active")) {
+          setPlaceholder("");
+        } else {
+          setPlaceholder(placeholder);
+        }
+      }, 100);
     };
-    document.addEventListener("mousedown", handleClickOutside, true);
-    return function () {
-      return document.removeEventListener("mousedown", handleClickOutside, true);
-    };
-  }, [isOpen, shouldCloseOnOutsideClick, isInteractingWithPicker]);
-
-  // Escape key handler
-  (0, _react.useEffect)(function () {
-    if (!isOpen) return;
-    var handleEscape = function handleEscape(event) {
-      if (event.key === "Escape" || event.key === "Esc") {
-        setIsOpen(false);
-      }
-    };
-    window.addEventListener("keydown", handleEscape);
-    return function () {
-      return window.removeEventListener("keydown", handleEscape);
-    };
-  }, [isOpen]);
-
-  // Update picker position on scroll or resize
-  (0, _react.useEffect)(function () {
-    if (!isOpen) return;
-    var updatePosition = function updatePosition() {
-      setPickerPosition(calculatePosition(containerRef.current));
-    };
-    window.addEventListener("scroll", updatePosition, true);
-    window.addEventListener("resize", updatePosition);
-    return function () {
-      window.removeEventListener("scroll", updatePosition, true);
-      window.removeEventListener("resize", updatePosition);
-    };
-  }, [isOpen, calculatePosition, setPickerPosition]);
-  var checkPlaceholder = function checkPlaceholder() {
-    setTimeout(function () {
-      var _containerRef$current2;
-      var captionEl = (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.closest(".app-composite-widget.caption-floating");
-      // For floating labels: show placeholder only when user has interacted and no value
-      if (captionEl && !captionEl.classList.contains("float-active")) {
-        setPlaceholder("");
-      } else {
-        setPlaceholder(placeholder);
+    useEffect(() => {
+      checkPlaceholder();
+    }, [inputValue, isInteractingWithPicker]);
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        className: clsx(DEFAULT_CLASS, "wm-colorpicker-root", className),
+        tabIndex: tabindex,
+        onKeyDown: handleKeyDown,
+        ref: containerRef,
+        name,
+        children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              ref: inputRef,
+              type: "text",
+              className: "form-control app-textbox",
+              name,
+              value: inputValue,
+              placeholder: getPlaceholder,
+              disabled: disabled || readonly,
+              required,
+              tabIndex: tabindex,
+              accessKey: shortcutkey,
+              onChange: handleInputChange,
+              onBlur: handleInputBlur,
+              onFocus: handleInputFocus,
+              onClick: handleInputClick,
+              onMouseEnter: (event) => onMouseEnter && onMouseEnter(event, listener == null ? void 0 : listener.Widgets[name]),
+              onMouseLeave: (event) => onMouseLeave && onMouseLeave(event, listener == null ? void 0 : listener.Widgets[name]),
+              "aria-label": arialabel,
+              "aria-readonly": readonly
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              component: "span",
+              className: clsx(
+                "input-group-addon colorpicker-container",
+                isReadonlyOrDisabled ? "wm-colorpicker-addon-disabled" : "wm-colorpicker-addon-enabled"
+              ),
+              onClick: handleColorBoxClick,
+              children: /* @__PURE__ */ jsx(
+                Box,
+                {
+                  component: "i",
+                  className: "colored-box wm-colorpicker-swatch",
+                  style: {
+                    "--colorpicker-swatch-bg": inputValue ? rgbaToString(colorValue) : "transparent"
+                  }
+                }
+              )
+            }
+          ),
+          isOpen && createPortal(
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                className: clsx(
+                  "color-picker",
+                  "wm-colorpicker-popup",
+                  pickerPosition.direction === "down" ? "wm-colorpicker-popup-direction-down" : "wm-colorpicker-popup-direction-up"
+                ),
+                ref: pickerRef,
+                style: {
+                  "--colorpicker-popup-top": `${pickerPosition.top}px`,
+                  "--colorpicker-popup-left": `${pickerPosition.left}px`,
+                  "--colorpicker-popup-margin-top": theme.spacing(1)
+                },
+                onClick: (e) => e.stopPropagation(),
+                onMouseDown: handlePickerMouseDown,
+                onMouseUp: handlePickerMouseUp,
+                children: /* @__PURE__ */ jsx(ChromePicker, { color: colorValue, onChange: handleColorChange })
+              }
+            ),
+            document.body
+          )
+        ]
       }
-    }, 100);
-  };
-  (0, _react.useEffect)(function () {
-    checkPlaceholder();
-  }, [inputValue, isInteractingWithPicker]);
-
-  // Render
-  return __jsx(_Box["default"], {
-    className: (0, _clsx["default"])(DEFAULT_CLASS, "wm-colorpicker-root", className),
-    tabIndex: tabindex,
-    onKeyDown: handleKeyDown,
-    ref: containerRef,
-    name: name
-  }, __jsx(_input.Input, {
-    ref: inputRef,
-    type: "text",
-    className: "form-control app-textbox",
-    name: name,
-    value: inputValue,
-    placeholder: getPlaceholder,
-    disabled: disabled || readonly,
-    required: required,
-    tabIndex: tabindex,
-    accessKey: shortcutkey,
-    onChange: handleInputChange,
-    onBlur: handleInputBlur,
-    onFocus: handleInputFocus,
-    onClick: handleInputClick,
-    onMouseEnter: function onMouseEnter(event) {
-      return _onMouseEnter && _onMouseEnter(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name]);
-    },
-    onMouseLeave: function onMouseLeave(event) {
-      return _onMouseLeave && _onMouseLeave(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name]);
-    },
-    "aria-label": arialabel,
-    "aria-readonly": readonly
-  }), __jsx(_Box["default"], {
-    component: "span",
-    className: (0, _clsx["default"])("input-group-addon colorpicker-container", isReadonlyOrDisabled ? "wm-colorpicker-addon-disabled" : "wm-colorpicker-addon-enabled"),
-    onClick: handleColorBoxClick
-  }, __jsx(_Box["default"], {
-    component: "i",
-    className: "colored-box wm-colorpicker-swatch",
-    style: {
-      "--colorpicker-swatch-bg": inputValue ? rgbaToString(colorValue) : "transparent"
-    }
-  })), isOpen && /*#__PURE__*/(0, _reactDom.createPortal)(__jsx(_Box["default"], {
-    className: (0, _clsx["default"])("color-picker", "wm-colorpicker-popup", pickerPosition.direction === "down" ? "wm-colorpicker-popup-direction-down" : "wm-colorpicker-popup-direction-up"),
-    ref: pickerRef,
-    style: {
-      "--colorpicker-popup-top": "".concat(pickerPosition.top, "px"),
-      "--colorpicker-popup-left": "".concat(pickerPosition.left, "px"),
-      "--colorpicker-popup-margin-top": theme.spacing(1)
-    },
-    onClick: function onClick(e) {
-      return e.stopPropagation();
-    },
-    onMouseDown: handlePickerMouseDown,
-    onMouseUp: handlePickerMouseUp
-  }, __jsx(_reactColor.ChromePicker, {
-    color: colorValue,
-    onChange: handleColorChange
-  })), document.body));
-}, function (prevProps, nextProps) {
-  var keysToCompare = ["datavalue", "placeholder", "readonly", "disabled", "required", "name", "shortcutkey", "show", "tabindex", "autoclose", "arialabel", "hidden", "show"];
-  return keysToCompare.every(function (key) {
-    return prevProps[key] === nextProps[key];
-  });
-});
+    );
+  },
+  (prevProps, nextProps) => {
+    const keysToCompare = [
+      "datavalue",
+      "placeholder",
+      "readonly",
+      "disabled",
+      "required",
+      "name",
+      "shortcutkey",
+      "show",
+      "tabindex",
+      "autoclose",
+      "arialabel",
+      "hidden",
+      "show"
+    ];
+    return keysToCompare.every((key) => prevProps[key] === nextProps[key]);
+  }
+);
 WmColorPicker.displayName = "WmColorPicker";
-var WithFormController = (0, _withFormController["default"])(WmColorPicker);
-var WmColorPickerStandalone = exports.WmColorPicker = (0, _withStandalone["default"])(WithFormController);
-/**
- * The WmColorPicker component provides a color picker input with a popover palette.
- *
- * - [Playground](https://react-components.wavemaker.ai/?path=/story/input-colorpicker--showcase)
- *
- * - [Docs](https://react-components.wavemaker.ai/?path=/story/input-colorpicker--docs)
- *
- * @param props - {@link WmColorPickerProps}
- */
-var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(WithFormController);
+const WithFormController = withFormController(WmColorPicker);
+const WmColorPickerStandalone = withStandalone(WithFormController);
+var color_picker_default = withBaseWrapper(WithFormController);
+export {
+  WmColorPickerStandalone as WmColorPicker,
+  color_picker_default as default
+};