@comet/admin-color-picker 8.0.0-canary-20240731111743 → 8.0.0-canary-20240910091753

package/lib/ColorField.d.ts

@@ -1,5 +1,5 @@
+/// <reference types="react" />
 import { FieldProps } from "@comet/admin";
-import * as React from "react";
 export type ColorFieldProps = FieldProps<string, HTMLInputElement>;
-export declare const ColorField: ({ ...restProps }: ColorFieldProps) => React.ReactElement;
+export declare const ColorField: ({ ...restProps }: ColorFieldProps) => JSX.Element;
 //# sourceMappingURL=ColorField.d.ts.map

package/lib/ColorField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorField.d.ts","sourceRoot":"","sources":["../src/ColorField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,UAAU,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,MAAM,eAAe,GAAG,UAAU,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;AAEnE,eAAO,MAAM,UAAU,qBAAsB,eAAe,KAAG,MAAM,YAEpE,CAAC"}
+{"version":3,"file":"ColorField.d.ts","sourceRoot":"","sources":["../src/ColorField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAS,UAAU,EAAE,MAAM,cAAc,CAAC;AAIjD,MAAM,MAAM,eAAe,GAAG,UAAU,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;AAEnE,eAAO,MAAM,UAAU,qBAAsB,eAAe,gBAE3D,CAAC"}

package/lib/ColorField.js

@@ -6,15 +6,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ColorField = void 0;
 var _admin = require("@comet/admin");
-var React = _interopRequireWildcard(require("react"));
 var _FinalFormColorPicker = require("./FinalFormColorPicker");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _jsxRuntime = require("react/jsx-runtime");
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("Cannot destructure " + obj); }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 var ColorField = function ColorField(_ref) {
   var restProps = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
-  return /*#__PURE__*/React.createElement(_admin.Field, _extends({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_admin.Field, _objectSpread({
     component: _FinalFormColorPicker.FinalFormColorPicker
   }, restProps));
 };

package/lib/ColorPicker.d.ts

@@ -1,16 +1,16 @@
 import { InputWithPopperComponents, InputWithPopperProps } from "@comet/admin";
 import { ComponentsOverrides, InputBaseProps } from "@mui/material";
 import { Theme } from "@mui/material/styles";
-import * as React from "react";
+import { ComponentType, HTMLAttributes, ReactNode } from "react";
 import { ColorPickerClassKey, PreviewIndicatorColorProps, PreviewIndicatorEmptyOrInvalidProps, SlotProps } from "./ColorPicker.slots";
-export interface ColorPickerColorPreviewProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "color">, PreviewIndicatorColorProps {
+export interface ColorPickerColorPreviewProps extends Omit<HTMLAttributes<HTMLDivElement>, "color">, PreviewIndicatorColorProps {
 }
-export interface ColorPickerNoColorPreviewProps extends React.HTMLAttributes<HTMLDivElement>, PreviewIndicatorEmptyOrInvalidProps {
+export interface ColorPickerNoColorPreviewProps extends HTMLAttributes<HTMLDivElement>, PreviewIndicatorEmptyOrInvalidProps {
 }
 export interface ColorPickerPropsComponents extends InputWithPopperComponents {
-    ColorPickerColorPreview?: React.ComponentType<ColorPickerColorPreviewProps>;
-    ColorPickerInvalidPreview?: React.ComponentType<ColorPickerNoColorPreviewProps>;
-    ColorPickerEmptyPreview?: React.ComponentType<ColorPickerNoColorPreviewProps>;
+    ColorPickerColorPreview?: ComponentType<ColorPickerColorPreviewProps>;
+    ColorPickerInvalidPreview?: ComponentType<ColorPickerNoColorPreviewProps>;
+    ColorPickerEmptyPreview?: ComponentType<ColorPickerNoColorPreviewProps>;
 }
 export interface ColorPickerProps extends Omit<InputWithPopperProps, "children" | "onChange" | "value" | "components" | "slotProps"> {
     value?: string | null;
@@ -25,8 +25,8 @@ export interface ColorPickerProps extends Omit<InputWithPopperProps, "children"
     endAdornment?: InputBaseProps["endAdornment"];
     invalidIndicatorCharacter?: string;
     required?: boolean;
-    titleText?: React.ReactNode;
-    clearButtonText?: React.ReactNode;
+    titleText?: ReactNode;
+    clearButtonText?: ReactNode;
     components?: ColorPickerPropsComponents;
     slotProps?: SlotProps;
 }

package/lib/ColorPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../src/ColorPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,yBAAyB,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAEpG,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAc,MAAM,eAAe,CAAC;AAChF,OAAO,EAAE,KAAK,EAAiB,MAAM,sBAAsB,CAAC;AAC5D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAGH,mBAAmB,EAYnB,0BAA0B,EAC1B,mCAAmC,EAGnC,SAAS,EACZ,MAAM,qBAAqB,CAAC;AAE7B,MAAM,WAAW,4BAA6B,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EAAE,0BAA0B;CAAG;AACxI,MAAM,WAAW,8BAA+B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,mCAAmC;CAAG;AAEpI,MAAM,WAAW,0BAA2B,SAAQ,yBAAyB;IACzE,uBAAuB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,4BAA4B,CAAC,CAAC;IAC5E,yBAAyB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,8BAA8B,CAAC,CAAC;IAChF,uBAAuB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,8BAA8B,CAAC,CAAC;CACjF;AAUD,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,UAAU,GAAG,UAAU,GAAG,OAAO,GAAG,YAAY,GAAG,WAAW,CAAC;IAChI,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,WAAW,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAC;IAClD,YAAY,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;IAC9C,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,UAAU,CAAC,EAAE,0BAA0B,CAAC;IACxC,SAAS,CAAC,EAAE,SAAS,CAAC;CACzB;AAED,eAAO,MAAM,WAAW,YAAa,gBAAgB,gBAoKpD,CAAC;AAEF,OAAO,QAAQ,sBAAsB,CAAC;IAClC,UAAU,uBAAuB;QAC7B,qBAAqB,EAAE,mBAAmB,CAAC;KAC9C;IAED,UAAU,mBAAmB;QACzB,qBAAqB,EAAE,gBAAgB,CAAC;KAC3C;IAED,UAAU,UAAU;QAChB,qBAAqB,CAAC,EAAE;YACpB,YAAY,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,uBAAuB,CAAC,CAAC,CAAC;YACrE,cAAc,CAAC,EAAE,mBAAmB,CAAC,KAAK,CAAC,CAAC,uBAAuB,CAAC,CAAC;SACxE,CAAC;KACL;CACJ"}
+{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../src/ColorPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,yBAAyB,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAEpG,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAc,MAAM,eAAe,CAAC;AAChF,OAAO,EAAE,KAAK,EAAiB,MAAM,sBAAsB,CAAC;AAC5D,OAAO,EAAe,aAAa,EAAc,cAAc,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AAK/G,OAAO,EAGH,mBAAmB,EAYnB,0BAA0B,EAC1B,mCAAmC,EAGnC,SAAS,EACZ,MAAM,qBAAqB,CAAC;AAE7B,MAAM,WAAW,4BAA6B,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EAAE,0BAA0B;CAAG;AAClI,MAAM,WAAW,8BAA+B,SAAQ,cAAc,CAAC,cAAc,CAAC,EAAE,mCAAmC;CAAG;AAE9H,MAAM,WAAW,0BAA2B,SAAQ,yBAAyB;IACzE,uBAAuB,CAAC,EAAE,aAAa,CAAC,4BAA4B,CAAC,CAAC;IACtE,yBAAyB,CAAC,EAAE,aAAa,CAAC,8BAA8B,CAAC,CAAC;IAC1E,uBAAuB,CAAC,EAAE,aAAa,CAAC,8BAA8B,CAAC,CAAC;CAC3E;AAUD,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,UAAU,GAAG,UAAU,GAAG,OAAO,GAAG,YAAY,GAAG,WAAW,CAAC;IAChI,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,WAAW,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAC;IAClD,YAAY,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;IAC9C,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,UAAU,CAAC,EAAE,0BAA0B,CAAC;IACxC,SAAS,CAAC,EAAE,SAAS,CAAC;CACzB;AAED,eAAO,MAAM,WAAW,YAAa,gBAAgB,gBAoKpD,CAAC;AAEF,OAAO,QAAQ,sBAAsB,CAAC;IAClC,UAAU,uBAAuB;QAC7B,qBAAqB,EAAE,mBAAmB,CAAC;KAC9C;IAED,UAAU,mBAAmB;QACzB,qBAAqB,EAAE,gBAAgB,CAAC;KAC3C;IAED,UAAU,UAAU;QAChB,qBAAqB,CAAC,EAAE;YACpB,YAAY,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,uBAAuB,CAAC,CAAC,CAAC;YACrE,cAAc,CAAC,EAAE,mBAAmB,CAAC,KAAK,CAAC,CAAC,uBAAuB,CAAC,CAAC;SACxE,CAAC;KACL;CACJ"}

package/lib/ColorPicker.js

@@ -9,17 +9,20 @@ var _admin = require("@comet/admin");
 var _adminIcons = require("@comet/admin-icons");
 var _material = require("@mui/material");
 var _styles = require("@mui/material/styles");
-var React = _interopRequireWildcard(require("react"));
+var _react = require("react");
 var _reactIntl = require("react-intl");
 var _tinycolor = _interopRequireDefault(require("tinycolor2"));
 var _useDebounce = require("use-debounce");
 var _ColorPicker = require("./ColorPicker.slots");
+var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["classes", "value", "colorFormat", "hidePicker", "hideHeader", "hideFooter", "colorPalette", "onChange", "startAdornment", "endAdornment", "onBlur", "required", "titleText", "clearButtonText", "components", "slotProps"],
   _excluded2 = ["ColorPickerColorPreview", "ColorPickerInvalidPreview", "ColorPickerEmptyPreview"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -31,7 +34,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var DefaultColorPreviewIndicator = function DefaultColorPreviewIndicator(_ref) {
   var type = _ref.type,
     color = _ref.color;
-  return /*#__PURE__*/React.createElement(_ColorPicker.PreviewIndicator, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ColorPicker.PreviewIndicator, {
     ownerState: {
       type: type,
       color: color
@@ -40,7 +43,7 @@ var DefaultColorPreviewIndicator = function DefaultColorPreviewIndicator(_ref) {
 };
 var DefaultNoColorPreviewIndicator = function DefaultNoColorPreviewIndicator(_ref2) {
   var type = _ref2.type;
-  return /*#__PURE__*/React.createElement(_ColorPicker.PreviewIndicator, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ColorPicker.PreviewIndicator, {
     ownerState: {
       type: type
     }
@@ -65,12 +68,12 @@ var ColorPicker = function ColorPicker(inProps) {
     _onBlur = _useThemeProps.onBlur,
     required = _useThemeProps.required,
     _useThemeProps$titleT = _useThemeProps.titleText,
-    titleText = _useThemeProps$titleT === void 0 ? /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, {
+    titleText = _useThemeProps$titleT === void 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
       id: "comet.colorPicker.title",
       defaultMessage: "Choose a color"
     }) : _useThemeProps$titleT,
     _useThemeProps$clearB = _useThemeProps.clearButtonText,
-    clearButtonText = _useThemeProps$clearB === void 0 ? /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, {
+    clearButtonText = _useThemeProps$clearB === void 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
       id: "comet.colorPicker.clearButton",
       defaultMessage: "clear color"
     }) : _useThemeProps$clearB,
@@ -85,12 +88,12 @@ var ColorPicker = function ColorPicker(inProps) {
     _components$ColorPick3 = components.ColorPickerEmptyPreview,
     EmptyPreview = _components$ColorPick3 === void 0 ? DefaultNoColorPreviewIndicator : _components$ColorPick3,
     inputWithPopperComponents = _objectWithoutProperties(components, _excluded2);
-  var _React$useState = React.useState(value !== null && value !== void 0 ? value : ""),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    displayValue = _React$useState2[0],
-    setDisplayValue = _React$useState2[1];
+  var _useState = (0, _react.useState)(value !== null && value !== void 0 ? value : ""),
+    _useState2 = _slicedToArray(_useState, 2),
+    displayValue = _useState2[0],
+    setDisplayValue = _useState2[1];
   var previewColor = displayValue ? (0, _tinycolor["default"])(displayValue) : null;
-  React.useEffect(function () {
+  (0, _react.useEffect)(function () {
     setDisplayValue(value !== null && value !== void 0 ? value : "");
   }, [value, setDisplayValue]);
 
@@ -112,26 +115,34 @@ var ColorPicker = function ColorPicker(inProps) {
       setDisplayValue("");
     }
   };
-  return /*#__PURE__*/React.createElement(_ColorPicker.Root, _extends({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ColorPicker.Root, _objectSpread(_objectSpread(_objectSpread({
     required: required,
-    startAdornment: startAdornment ? startAdornment : /*#__PURE__*/React.createElement(_ColorPicker.InputAdornment, _extends({
+    startAdornment: startAdornment ? startAdornment : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ColorPicker.InputAdornment, _objectSpread(_objectSpread({
       position: "start",
       disablePointerEvents: true
-    }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.inputAdornment), /*#__PURE__*/React.createElement(_ColorPicker.Preview, null, previewColor ? previewColor.isValid() ? /*#__PURE__*/React.createElement(ColorPreview, _extends({
-      type: "color",
-      color: previewColor.toRgbString()
-    }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.previewIndicator, slotProps === null || slotProps === void 0 ? void 0 : slotProps.previewIndicatorColor)) : /*#__PURE__*/React.createElement(InvalidPreview, _extends({
-      type: "invalid"
-    }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.previewIndicator, slotProps === null || slotProps === void 0 ? void 0 : slotProps.previewIndicatorInvalid), "?") : /*#__PURE__*/React.createElement(EmptyPreview, _extends({
-      type: "empty"
-    }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.previewIndicator, slotProps === null || slotProps === void 0 ? void 0 : slotProps.previewIndicatorEmpty)))),
-    endAdornment: !required ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_admin.ClearInputAdornment, {
-      position: "end",
-      hasClearableContent: Boolean(value),
-      onClick: function onClick() {
-        return onChange === null || onChange === void 0 ? void 0 : onChange(undefined);
-      }
-    }), endAdornment) : endAdornment,
+    }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.inputAdornment), {}, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ColorPicker.Preview, {
+        children: previewColor ? previewColor.isValid() ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ColorPreview, _objectSpread(_objectSpread({
+          type: "color",
+          color: previewColor.toRgbString()
+        }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.previewIndicator), slotProps === null || slotProps === void 0 ? void 0 : slotProps.previewIndicatorColor)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(InvalidPreview, _objectSpread(_objectSpread(_objectSpread({
+          type: "invalid"
+        }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.previewIndicator), slotProps === null || slotProps === void 0 ? void 0 : slotProps.previewIndicatorInvalid), {}, {
+          children: "?"
+        })) : /*#__PURE__*/(0, _jsxRuntime.jsx)(EmptyPreview, _objectSpread(_objectSpread({
+          type: "empty"
+        }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.previewIndicator), slotProps === null || slotProps === void 0 ? void 0 : slotProps.previewIndicatorEmpty))
+      })
+    })),
+    endAdornment: !required ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_admin.ClearInputAdornment, {
+        position: "end",
+        hasClearableContent: Boolean(value),
+        onClick: function onClick() {
+          return onChange === null || onChange === void 0 ? void 0 : onChange(undefined);
+        }
+      }), endAdornment]
+    }) : endAdornment,
     value: displayValue,
     onChange: function onChange(e) {
       setDisplayValue(e.currentTarget.value);
@@ -141,36 +152,56 @@ var ColorPicker = function ColorPicker(inProps) {
       onChangeColor(displayValue);
     },
     components: inputWithPopperComponents
-  }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.root, restProps), function (closePopper) {
-    return /*#__PURE__*/React.createElement(_ColorPicker.PopperRoot, slotProps === null || slotProps === void 0 ? void 0 : slotProps.popperRoot, !hideHeader && /*#__PURE__*/React.createElement(_ColorPicker.Header, slotProps === null || slotProps === void 0 ? void 0 : slotProps.header, /*#__PURE__*/React.createElement(_ColorPicker.HeaderTitleText, slotProps === null || slotProps === void 0 ? void 0 : slotProps.headerTitleText, titleText), /*#__PURE__*/React.createElement(_ColorPicker.HeaderCloseButton, _extends({
-      onClick: function onClick() {
-        return closePopper(true);
-      }
-    }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.headerCloseButton), /*#__PURE__*/React.createElement(_adminIcons.Close, null))), !hidePicker && /*#__PURE__*/React.createElement(_ColorPicker.ColorPickerWrapper, slotProps === null || slotProps === void 0 ? void 0 : slotProps.colorPickerWrapper, colorFormat === "hex" && /*#__PURE__*/React.createElement(_ColorPicker.HexColorPicker, _extends({
-      color: value !== null && value !== void 0 ? value : "",
-      onChange: onChangeColor
-    }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.hexColorPicker)), colorFormat === "rgba" && /*#__PURE__*/React.createElement(_ColorPicker.RgbaStringColorPicker, _extends({
-      color: value !== null && value !== void 0 ? value : "",
-      onChange: onChangeColor
-    }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.rgbaStringColorPicker))), (colorPalette === null || colorPalette === void 0 ? void 0 : colorPalette.length) && /*#__PURE__*/React.createElement(_ColorPicker.ColorPalette, slotProps === null || slotProps === void 0 ? void 0 : slotProps.colorPalette, colorPalette.map(function (color, index) {
-      return /*#__PURE__*/React.createElement(_ColorPicker.ColorPaletteItem, _extends({
-        key: "".concat(index, "_").concat(color),
-        onClick: function onClick() {
-          onChangeColor(color);
-          closePopper(true);
-        },
-        ownerState: {
-          colorValue: color
-        }
-      }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.colorPaletteItem));
-    })), !hideFooter && /*#__PURE__*/React.createElement(_ColorPicker.Footer, slotProps === null || slotProps === void 0 ? void 0 : slotProps.footer, /*#__PURE__*/React.createElement(_ColorPicker.FooterClearButton, _extends({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.footerClearButton, {
-      onClick: function onClick() {
-        onChangeColor("");
-        closePopper(true);
-      }
-    }), /*#__PURE__*/React.createElement(_ColorPicker.Preview, slotProps === null || slotProps === void 0 ? void 0 : slotProps.preview, /*#__PURE__*/React.createElement(EmptyPreview, _extends({
-      type: "empty"
-    }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.previewIndicator, slotProps === null || slotProps === void 0 ? void 0 : slotProps.previewIndicatorEmpty))), /*#__PURE__*/React.createElement(_material.Typography, null, clearButtonText))));
-  });
+  }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.root), restProps), {}, {
+    children: function children(closePopper) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ColorPicker.PopperRoot, _objectSpread(_objectSpread({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.popperRoot), {}, {
+        children: [!hideHeader && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ColorPicker.Header, _objectSpread(_objectSpread({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.header), {}, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ColorPicker.HeaderTitleText, _objectSpread(_objectSpread({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.headerTitleText), {}, {
+            children: titleText
+          })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ColorPicker.HeaderCloseButton, _objectSpread(_objectSpread({
+            onClick: function onClick() {
+              return closePopper(true);
+            }
+          }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.headerCloseButton), {}, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_adminIcons.Close, {})
+          }))]
+        })), !hidePicker && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ColorPicker.ColorPickerWrapper, _objectSpread(_objectSpread({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.colorPickerWrapper), {}, {
+          children: [colorFormat === "hex" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ColorPicker.HexColorPicker, _objectSpread({
+            color: value !== null && value !== void 0 ? value : "",
+            onChange: onChangeColor
+          }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.hexColorPicker)), colorFormat === "rgba" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ColorPicker.RgbaStringColorPicker, _objectSpread({
+            color: value !== null && value !== void 0 ? value : "",
+            onChange: onChangeColor
+          }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.rgbaStringColorPicker))]
+        })), (colorPalette === null || colorPalette === void 0 ? void 0 : colorPalette.length) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ColorPicker.ColorPalette, _objectSpread(_objectSpread({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.colorPalette), {}, {
+          children: colorPalette.map(function (color, index) {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ColorPicker.ColorPaletteItem, _objectSpread({
+              onClick: function onClick() {
+                onChangeColor(color);
+                closePopper(true);
+              },
+              ownerState: {
+                colorValue: color
+              }
+            }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.colorPaletteItem), "".concat(index, "_").concat(color));
+          })
+        })), !hideFooter && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ColorPicker.Footer, _objectSpread(_objectSpread({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.footer), {}, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ColorPicker.FooterClearButton, _objectSpread(_objectSpread({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.footerClearButton), {}, {
+            onClick: function onClick() {
+              onChangeColor("");
+              closePopper(true);
+            },
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ColorPicker.Preview, _objectSpread(_objectSpread({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.preview), {}, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(EmptyPreview, _objectSpread(_objectSpread({
+                type: "empty"
+              }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.previewIndicator), slotProps === null || slotProps === void 0 ? void 0 : slotProps.previewIndicatorEmpty))
+            })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+              children: clearButtonText
+            })]
+          }))
+        }))]
+      }));
+    }
+  }));
 };
 exports.ColorPicker = ColorPicker;

package/lib/FinalFormColorPicker.d.ts

@@ -1,6 +1,6 @@
-import * as React from "react";
+/// <reference types="react" />
 import { FieldRenderProps } from "react-final-form";
 import { ColorPickerProps } from "./ColorPicker";
 export type FinalFormColorPickerProps = ColorPickerProps & FieldRenderProps<string, HTMLInputElement | HTMLTextAreaElement>;
-export declare const FinalFormColorPicker: ({ meta, input, ...restProps }: FinalFormColorPickerProps) => React.ReactElement;
+export declare const FinalFormColorPicker: ({ meta, input, ...restProps }: FinalFormColorPickerProps) => JSX.Element;
 //# sourceMappingURL=FinalFormColorPicker.d.ts.map

package/lib/FinalFormColorPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FinalFormColorPicker.d.ts","sourceRoot":"","sources":["../src/FinalFormColorPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAEpD,OAAO,EAAe,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAE9D,MAAM,MAAM,yBAAyB,GAAG,gBAAgB,GAAG,gBAAgB,CAAC,MAAM,EAAE,gBAAgB,GAAG,mBAAmB,CAAC,CAAC;AAE5H,eAAO,MAAM,oBAAoB,kCAAmC,yBAAyB,KAAG,MAAM,YAErG,CAAC"}
+{"version":3,"file":"FinalFormColorPicker.d.ts","sourceRoot":"","sources":["../src/FinalFormColorPicker.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAEpD,OAAO,EAAe,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAE9D,MAAM,MAAM,yBAAyB,GAAG,gBAAgB,GAAG,gBAAgB,CAAC,MAAM,EAAE,gBAAgB,GAAG,mBAAmB,CAAC,CAAC;AAE5H,eAAO,MAAM,oBAAoB,kCAAmC,yBAAyB,gBAE5F,CAAC"}

package/lib/FinalFormColorPicker.js

@@ -5,18 +5,20 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FinalFormColorPicker = void 0;
-var React = _interopRequireWildcard(require("react"));
 var _ColorPicker = require("./ColorPicker");
+var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["meta", "input"];
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var FinalFormColorPicker = function FinalFormColorPicker(_ref) {
   var meta = _ref.meta,
     input = _ref.input,
     restProps = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(_ColorPicker.ColorPicker, _extends({}, input, restProps));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ColorPicker.ColorPicker, _objectSpread(_objectSpread({}, input), restProps));
 };
 exports.FinalFormColorPicker = FinalFormColorPicker;

package/lib/index.d.ts

@@ -1,5 +1,13 @@
 export { ColorField, ColorFieldProps } from "./ColorField";
 export { ColorPicker, ColorPickerColorPreviewProps, ColorPickerProps, ColorPickerPropsComponents } from "./ColorPicker";
 export { ColorPickerClassKey } from "./ColorPicker.slots";
-export { FinalFormColorPicker, FinalFormColorPickerProps } from "./FinalFormColorPicker";
+export { 
+/**
+ * @deprecated Use `<ColorField />` instead of `<Field component={FinalFormColorPicker} />`
+ */
+FinalFormColorPicker, 
+/**
+ * @deprecated Use `<ColorField />` instead of `<Field component={FinalFormColorPicker} />`
+ */
+FinalFormColorPickerProps, } from "./FinalFormColorPicker";
 //# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,4BAA4B,EAAE,gBAAgB,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAC;AACxH,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,oBAAoB,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,4BAA4B,EAAE,gBAAgB,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAC;AACxH,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO;AACH;;GAEG;AACH,oBAAoB;AACpB;;GAEG;AACH,yBAAyB,GAC5B,MAAM,wBAAwB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comet/admin-color-picker",
-  "version": "8.0.0-canary-20240731111743",
+  "version": "8.0.0-canary-20240910091753",
   "repository": {
     "type": "git",
     "url": "https://github.com/vivid-planet/comet",
@@ -13,8 +13,8 @@
     "lib"
   ],
   "dependencies": {
-    "@comet/admin": "8.0.0-canary-20240731111743",
-    "@comet/admin-icons": "8.0.0-canary-20240731111743",
+    "@comet/admin": "8.0.0-canary-20240910091753",
+    "@comet/admin-icons": "8.0.0-canary-20240910091753",
     "clsx": "^1.1.1",
     "react-colorful": "^5.5.1",
     "tinycolor2": "^1.4.1",
@@ -23,8 +23,8 @@
   "devDependencies": {
     "@babel/cli": "^7.17.6",
     "@babel/core": "^7.20.12",
-    "@comet/admin-babel-preset": "8.0.0-canary-20240731111743",
-    "@comet/eslint-config": "8.0.0-canary-20240731111743",
+    "@comet/admin-babel-preset": "8.0.0-canary-20240910091753",
+    "@comet/eslint-config": "8.0.0-canary-20240910091753",
     "@mui/material": "^5.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",