@dextinity/admin-color-picker 2.0.0-canary-20260729062014

package/LICENSE

@@ -0,0 +1,24 @@
+BSD 2-Clause License
+
+Copyright (c) 2023, Vivid Planet Software GmbH
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/lib/ColorField.d.ts

@@ -0,0 +1,5 @@
+import { type FieldProps } from "@dextinity/admin";
+import { type FinalFormColorPickerProps } from "./FinalFormColorPicker";
+export type ColorFieldProps = FieldProps<string, HTMLInputElement> & FinalFormColorPickerProps;
+export declare const ColorField: ({ ...restProps }: ColorFieldProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ColorField.d.ts.map

package/lib/ColorField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorField.d.ts","sourceRoot":"","sources":["../src/ColorField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE1D,OAAO,EAAwB,KAAK,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAE9F,MAAM,MAAM,eAAe,GAAG,UAAU,CAAC,MAAM,EAAE,gBAAgB,CAAC,GAAG,yBAAyB,CAAC;AAE/F,eAAO,MAAM,UAAU,GAAI,kBAAkB,eAAe,4CAE3D,CAAC"}

package/lib/ColorField.js

@@ -0,0 +1,17 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+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) { _defineProperty(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; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectDestructuringEmpty(t) { if (null == t) throw new TypeError("Cannot destructure " + t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import { Field } from "@dextinity/admin";
+import { FinalFormColorPicker } from "./FinalFormColorPicker";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var ColorField = function ColorField(_ref) {
+  var restProps = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
+  return /*#__PURE__*/_jsx(Field, _objectSpread({
+    component: FinalFormColorPicker
+  }, restProps));
+};

package/lib/ColorPicker.d.ts

@@ -0,0 +1,47 @@
+import { type InputWithPopperComponents, type InputWithPopperProps } from "@dextinity/admin";
+import { type ComponentsOverrides, type InputBaseProps } from "@mui/material";
+import { type Theme } from "@mui/material/styles";
+import { type ComponentType, type HTMLAttributes, type ReactNode } from "react";
+import { type ColorPickerClassKey, type PreviewIndicatorColorProps, type PreviewIndicatorEmptyOrInvalidProps, type SlotProps } from "./ColorPicker.slots";
+export interface ColorPickerColorPreviewProps extends Omit<HTMLAttributes<HTMLDivElement>, "color">, PreviewIndicatorColorProps {
+}
+export interface ColorPickerNoColorPreviewProps extends HTMLAttributes<HTMLDivElement>, PreviewIndicatorEmptyOrInvalidProps {
+}
+export interface ColorPickerPropsComponents extends InputWithPopperComponents {
+    ColorPickerColorPreview?: ComponentType<ColorPickerColorPreviewProps>;
+    ColorPickerInvalidPreview?: ComponentType<ColorPickerNoColorPreviewProps>;
+    ColorPickerEmptyPreview?: ComponentType<ColorPickerNoColorPreviewProps>;
+}
+export interface ColorPickerProps extends Omit<InputWithPopperProps, "children" | "onChange" | "value" | "components" | "slotProps"> {
+    value?: string | null;
+    onChange?: (color?: string) => void;
+    colorFormat?: "hex" | "rgba";
+    colorPalette?: string[];
+    hidePicker?: boolean;
+    hideHeader?: boolean;
+    hideFooter?: boolean;
+    fullWidth?: boolean;
+    startAdornment?: InputBaseProps["startAdornment"];
+    endAdornment?: InputBaseProps["endAdornment"];
+    required?: boolean;
+    titleText?: ReactNode;
+    clearButtonText?: ReactNode;
+    components?: ColorPickerPropsComponents;
+    slotProps?: SlotProps;
+}
+export declare const ColorPicker: (inProps: ColorPickerProps) => import("react/jsx-runtime").JSX.Element;
+declare module "@mui/material/styles" {
+    interface ComponentNameToClassKey {
+        CometAdminColorPicker: ColorPickerClassKey;
+    }
+    interface ComponentsPropsList {
+        CometAdminColorPicker: ColorPickerProps;
+    }
+    interface Components {
+        CometAdminColorPicker?: {
+            defaultProps?: Partial<ComponentsPropsList["CometAdminColorPicker"]>;
+            styleOverrides?: ComponentsOverrides<Theme>["CometAdminColorPicker"];
+        };
+    }
+}
+//# sourceMappingURL=ColorPicker.d.ts.map

package/lib/ColorPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../src/ColorPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,KAAK,yBAAyB,EAAE,KAAK,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAElH,OAAO,EAAE,KAAK,mBAAmB,EAAE,KAAK,cAAc,EAAc,MAAM,eAAe,CAAC;AAC1F,OAAO,EAAE,KAAK,KAAK,EAAiB,MAAM,sBAAsB,CAAC;AACjE,OAAO,EAAoB,KAAK,aAAa,EAAmB,KAAK,cAAc,EAAE,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AAKxI,OAAO,EAGH,KAAK,mBAAmB,EAYxB,KAAK,0BAA0B,EAC/B,KAAK,mCAAmC,EAGxC,KAAK,SAAS,EACjB,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,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,GAAI,SAAS,gBAAgB,4CAoKpD,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

@@ -0,0 +1,198 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["classes", "value", "colorFormat", "hidePicker", "hideHeader", "hideFooter", "colorPalette", "onChange", "startAdornment", "endAdornment", "onBlur", "required", "titleText", "clearButtonText", "components", "slotProps"],
+  _excluded2 = ["ColorPickerColorPreview", "ColorPickerInvalidPreview", "ColorPickerEmptyPreview"];
+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) { _defineProperty(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; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { ClearInputAdornment } from "@dextinity/admin";
+import { Close } from "@dextinity/admin-icons";
+import { Typography } from "@mui/material";
+import { useThemeProps } from "@mui/material/styles";
+import { useEffect, useState } from "react";
+import { FormattedMessage } from "react-intl";
+import tinycolor from "tinycolor2";
+import { useDebouncedCallback } from "use-debounce";
+import { ColorPalette, ColorPaletteItem, ColorPickerWrapper, Footer, FooterClearButton, Header, HeaderCloseButton, HeaderTitleText, HexColorPicker, InputAdornment, PopperRoot, Preview, PreviewIndicator, RgbaStringColorPicker, Root } from "./ColorPicker.slots";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+var DefaultColorPreviewIndicator = function DefaultColorPreviewIndicator(_ref) {
+  var type = _ref.type,
+    color = _ref.color;
+  return /*#__PURE__*/_jsx(PreviewIndicator, {
+    ownerState: {
+      type: type,
+      color: color
+    }
+  });
+};
+var DefaultNoColorPreviewIndicator = function DefaultNoColorPreviewIndicator(_ref2) {
+  var type = _ref2.type;
+  return /*#__PURE__*/_jsx(PreviewIndicator, {
+    ownerState: {
+      type: type
+    }
+  });
+};
+export var ColorPicker = function ColorPicker(inProps) {
+  var _useThemeProps = useThemeProps({
+      props: inProps,
+      name: "CometAdminColorPicker"
+    }),
+    classes = _useThemeProps.classes,
+    value = _useThemeProps.value,
+    _useThemeProps$colorF = _useThemeProps.colorFormat,
+    colorFormat = _useThemeProps$colorF === void 0 ? "hex" : _useThemeProps$colorF,
+    hidePicker = _useThemeProps.hidePicker,
+    hideHeader = _useThemeProps.hideHeader,
+    hideFooter = _useThemeProps.hideFooter,
+    colorPalette = _useThemeProps.colorPalette,
+    onChange = _useThemeProps.onChange,
+    startAdornment = _useThemeProps.startAdornment,
+    endAdornment = _useThemeProps.endAdornment,
+    _onBlur = _useThemeProps.onBlur,
+    required = _useThemeProps.required,
+    _useThemeProps$titleT = _useThemeProps.titleText,
+    titleText = _useThemeProps$titleT === void 0 ? /*#__PURE__*/_jsx(FormattedMessage, {
+      id: "comet.colorPicker.title",
+      defaultMessage: "Choose a color"
+    }) : _useThemeProps$titleT,
+    _useThemeProps$clearB = _useThemeProps.clearButtonText,
+    clearButtonText = _useThemeProps$clearB === void 0 ? /*#__PURE__*/_jsx(FormattedMessage, {
+      id: "comet.colorPicker.clearButton",
+      defaultMessage: "clear color"
+    }) : _useThemeProps$clearB,
+    _useThemeProps$compon = _useThemeProps.components,
+    components = _useThemeProps$compon === void 0 ? {} : _useThemeProps$compon,
+    slotProps = _useThemeProps.slotProps,
+    restProps = _objectWithoutProperties(_useThemeProps, _excluded);
+  var _components$ColorPick = components.ColorPickerColorPreview,
+    ColorPreview = _components$ColorPick === void 0 ? DefaultColorPreviewIndicator : _components$ColorPick,
+    _components$ColorPick2 = components.ColorPickerInvalidPreview,
+    InvalidPreview = _components$ColorPick2 === void 0 ? DefaultNoColorPreviewIndicator : _components$ColorPick2,
+    _components$ColorPick3 = components.ColorPickerEmptyPreview,
+    EmptyPreview = _components$ColorPick3 === void 0 ? DefaultNoColorPreviewIndicator : _components$ColorPick3,
+    inputWithPopperComponents = _objectWithoutProperties(components, _excluded2);
+  var _useState = useState(value !== null && value !== void 0 ? value : ""),
+    _useState2 = _slicedToArray(_useState, 2),
+    displayValue = _useState2[0],
+    setDisplayValue = _useState2[1];
+  var previewColor = displayValue ? tinycolor(displayValue) : null;
+  useEffect(function () {
+    setDisplayValue(value !== null && value !== void 0 ? value : "");
+  }, [value, setDisplayValue]);
+
+  /**
+   * When quickly sliding in the color-picker, multiple `onChange` events would be triggered every second.
+   * Debouncing those events ensures the picker is always responsive and prevents it from sometimes crashing.
+   */
+  var debouncedOnChange = useDebouncedCallback(function (color) {
+    onChange === null || onChange === void 0 || onChange(color);
+  }, 250);
+  var onChangeColor = function onChangeColor(color) {
+    var colorValue = tinycolor(color);
+    if (colorValue.isValid()) {
+      var stringValue = colorFormat === "rgba" ? colorValue.toRgbString() : colorValue.toHexString();
+      debouncedOnChange(stringValue);
+      setDisplayValue(stringValue);
+    } else {
+      debouncedOnChange(null);
+      setDisplayValue("");
+    }
+  };
+  return /*#__PURE__*/_jsx(Root, _objectSpread(_objectSpread(_objectSpread({
+    required: required,
+    startAdornment: startAdornment ? startAdornment : /*#__PURE__*/_jsx(InputAdornment, _objectSpread(_objectSpread({
+      position: "start",
+      disablePointerEvents: true
+    }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.inputAdornment), {}, {
+      children: /*#__PURE__*/_jsx(Preview, {
+        children: previewColor ? previewColor.isValid() ? /*#__PURE__*/_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__*/_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__*/_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 && value ? /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(ClearInputAdornment, {
+        position: "end",
+        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);
+    },
+    onBlur: function onBlur(e) {
+      _onBlur === null || _onBlur === void 0 || _onBlur(e);
+      onChangeColor(displayValue);
+    },
+    components: inputWithPopperComponents
+  }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.root), restProps), {}, {
+    children: function children(closePopper) {
+      return /*#__PURE__*/_jsxs(PopperRoot, _objectSpread(_objectSpread({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.popperRoot), {}, {
+        children: [!hideHeader && /*#__PURE__*/_jsxs(Header, _objectSpread(_objectSpread({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.header), {}, {
+          children: [/*#__PURE__*/_jsx(HeaderTitleText, _objectSpread(_objectSpread({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.headerTitleText), {}, {
+            children: titleText
+          })), /*#__PURE__*/_jsx(HeaderCloseButton, _objectSpread(_objectSpread({
+            onClick: function onClick() {
+              return closePopper(true);
+            }
+          }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.headerCloseButton), {}, {
+            children: /*#__PURE__*/_jsx(Close, {})
+          }))]
+        })), !hidePicker && /*#__PURE__*/_jsxs(ColorPickerWrapper, _objectSpread(_objectSpread({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.colorPickerWrapper), {}, {
+          children: [colorFormat === "hex" && /*#__PURE__*/_jsx(HexColorPicker, _objectSpread({
+            color: value !== null && value !== void 0 ? value : "",
+            onChange: onChangeColor
+          }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.hexColorPicker)), colorFormat === "rgba" && /*#__PURE__*/_jsx(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__*/_jsx(ColorPalette, _objectSpread(_objectSpread({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.colorPalette), {}, {
+          children: colorPalette.map(function (color, index) {
+            return /*#__PURE__*/_jsx(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__*/_jsx(Footer, _objectSpread(_objectSpread({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.footer), {}, {
+          children: /*#__PURE__*/_jsxs(FooterClearButton, _objectSpread(_objectSpread({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.footerClearButton), {}, {
+            onClick: function onClick() {
+              onChangeColor("");
+              closePopper(true);
+            },
+            children: [/*#__PURE__*/_jsx(Preview, _objectSpread(_objectSpread({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.preview), {}, {
+              children: /*#__PURE__*/_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__*/_jsx(Typography, {
+              children: clearButtonText
+            })]
+          }))
+        }))]
+      }));
+    }
+  }));
+};

package/lib/ColorPicker.slots.d.ts

@@ -0,0 +1,123 @@
+import { InputWithPopper, type ThemedComponentBaseProps } from "@dextinity/admin";
+import { Box, ButtonBase, IconButton, Typography } from "@mui/material";
+import { type Theme } from "@mui/material/styles";
+import type { ComponentProps, ComponentType } from "react";
+import { HexColorPicker as HexColorPickerBase, RgbaStringColorPicker as RgbaStringColorPickerBase } from "react-colorful";
+export type ColorPickerClassKey = "root" | "inputAdornment" | "popperRoot" | "popperSection" | "header" | "headerTitleText" | "headerCloseButton" | "colorPickerWrapper" | "colorPalette" | "colorPaletteItem" | "footer" | "footerClearButton" | "preview" | "previewIndicator" | "previewIndicatorColor" | "previewIndicatorEmpty" | "previewIndicatorInvalid" | "hexColorPicker" | "rgbaStringColorPicker";
+export type SlotProps = ThemedComponentBaseProps<{
+    root: typeof InputWithPopper;
+    inputAdornment: typeof InputAdornment;
+    popperRoot: "div";
+    header: "div";
+    headerTitleText: typeof Typography;
+    headerCloseButton: typeof IconButton;
+    colorPickerWrapper: "div";
+    colorPalette: "div";
+    colorPaletteItem: typeof Box;
+    footer: "div";
+    footerClearButton: typeof ButtonBase;
+    preview: "div";
+    previewIndicator: "div";
+    previewIndicatorColor: "div";
+    previewIndicatorEmpty: "div";
+    previewIndicatorInvalid: "div";
+    hexColorPicker: typeof HexColorPickerBase;
+    rgbaStringColorPicker: typeof RgbaStringColorPickerBase;
+}>["slotProps"];
+export declare const Root: import("react").ForwardRefExoticComponent<Omit<Pick<import("@dextinity/admin").InputWithPopperProps, keyof import("@dextinity/admin").InputWithPopperProps> & import("@mui/system").MUIStyledCommonProps<Theme> & {
+    ownerState?: undefined;
+} & {
+    className?: string;
+    ownerState?: object;
+}, "ref"> & import("react").RefAttributes<unknown>>;
+export declare const InputAdornment: import("react").ForwardRefExoticComponent<Omit<Pick<import("@mui/material").InputAdornmentOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "className" | "classes" | "children" | "disablePointerEvents" | "disableTypography" | "position" | "sx" | "variant">, "slot" | "style" | "title" | "className" | "classes" | "ref" | "children" | "disablePointerEvents" | "disableTypography" | "position" | "sx" | "variant" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture"> & import("@mui/system").MUIStyledCommonProps<Theme> & {
+    ownerState?: undefined;
+} & {
+    className?: string;
+    ownerState?: object;
+}, "ref"> & import("react").RefAttributes<unknown>>;
+export declare const PopperRoot: import("react").ForwardRefExoticComponent<Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>> & import("@mui/system").MUIStyledCommonProps<Theme> & {
+    ownerState?: undefined;
+} & {
+    className?: string;
+    ownerState?: object;
+}, "ref"> & import("react").RefAttributes<unknown>>;
+export declare const Header: import("react").ForwardRefExoticComponent<Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>> & import("@mui/system").MUIStyledCommonProps<Theme> & {
+    ownerState?: undefined;
+} & {
+    className?: string;
+    ownerState?: object;
+}, "ref"> & import("react").RefAttributes<unknown>>;
+export declare const HeaderTitleText: import("react").ForwardRefExoticComponent<Omit<Pick<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "p" | "style" | "className" | "classes" | "children" | "position" | "sx" | "variant" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping">, "p" | "slot" | "style" | "title" | "className" | "classes" | "ref" | "children" | "position" | "sx" | "variant" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<Theme> & {
+    ownerState?: undefined;
+} & {
+    className?: string;
+    ownerState?: object;
+}, "ref"> & import("react").RefAttributes<unknown>>;
+export declare const HeaderCloseButton: import("react").ForwardRefExoticComponent<Omit<Pick<import("@mui/material").IconButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style" | "className" | "classes" | "children" | "sx" | "tabIndex" | "color" | "disabled" | "size" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "loading" | "loadingIndicator">, "form" | "slot" | "style" | "title" | "className" | "classes" | "ref" | "children" | "sx" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "disabled" | "name" | "size" | "type" | "value" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "loading" | "loadingIndicator" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget"> & import("@mui/system").MUIStyledCommonProps<Theme> & {
+    ownerState?: undefined;
+} & {
+    className?: string;
+    ownerState?: object;
+}, "ref"> & import("react").RefAttributes<unknown>>;
+export declare const ColorPickerWrapper: import("react").ForwardRefExoticComponent<Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>> & import("@mui/system").MUIStyledCommonProps<Theme> & {
+    ownerState?: undefined;
+} & {
+    className?: string;
+    ownerState?: object;
+}, "ref"> & import("react").RefAttributes<unknown>>;
+export declare const ColorPalette: import("react").ForwardRefExoticComponent<Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>> & import("@mui/system").MUIStyledCommonProps<Theme> & {
+    ownerState?: undefined;
+} & {
+    className?: string;
+    ownerState?: object;
+}, "ref"> & import("react").RefAttributes<unknown>>;
+type ColorPaletteItemProps = {
+    colorValue: string;
+};
+export declare const ColorPaletteItem: import("react").ForwardRefExoticComponent<Omit<Pick<import("@mui/system").BoxOwnProps<Theme> & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("@mui/system").BoxOwnProps<Theme>>, "slot" | "style" | "title" | "className" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme> & {
+    ownerState: ColorPaletteItemProps;
+} & {
+    className?: string;
+    ownerState?: object;
+}, "ref"> & import("react").RefAttributes<unknown>>;
+export declare const Footer: import("react").ForwardRefExoticComponent<Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>> & import("@mui/system").MUIStyledCommonProps<Theme> & {
+    ownerState?: undefined;
+} & {
+    className?: string;
+    ownerState?: object;
+}, "ref"> & import("react").RefAttributes<unknown>>;
+export declare const FooterClearButton: import("react").ForwardRefExoticComponent<Omit<Pick<import("@mui/material").ButtonBaseOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style" | "className" | "classes" | "children" | "sx" | "tabIndex" | "disabled" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef">, "form" | "slot" | "style" | "title" | "className" | "classes" | "ref" | "children" | "sx" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "disabled" | "name" | "type" | "value" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget"> & import("@mui/system").MUIStyledCommonProps<Theme> & {
+    ownerState?: undefined;
+} & {
+    className?: string;
+    ownerState?: object;
+}, "ref"> & import("react").RefAttributes<unknown>>;
+export declare const Preview: import("react").ForwardRefExoticComponent<Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>> & import("@mui/system").MUIStyledCommonProps<Theme> & {
+    ownerState?: undefined;
+} & {
+    className?: string;
+    ownerState?: object;
+}, "ref"> & import("react").RefAttributes<unknown>>;
+export type PreviewIndicatorEmptyOrInvalidProps = {
+    type: "empty" | "invalid";
+};
+export type PreviewIndicatorColorProps = {
+    type: "color";
+    color: string;
+};
+export declare const PreviewIndicator: import("react").ForwardRefExoticComponent<(Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>> & import("@mui/system").MUIStyledCommonProps<Theme> & {
+    ownerState: PreviewIndicatorEmptyOrInvalidProps;
+} & {
+    className?: string;
+    ownerState?: object;
+}, "ref"> | Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>> & import("@mui/system").MUIStyledCommonProps<Theme> & {
+    ownerState: PreviewIndicatorColorProps;
+} & {
+    className?: string;
+    ownerState?: object;
+}, "ref">) & import("react").RefAttributes<unknown>>;
+export declare const HexColorPicker: ComponentType<ComponentProps<typeof HexColorPickerBase>>;
+export declare const RgbaStringColorPicker: ComponentType<ComponentProps<typeof RgbaStringColorPickerBase>>;
+export {};
+//# sourceMappingURL=ColorPicker.slots.d.ts.map

package/lib/ColorPicker.slots.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.slots.d.ts","sourceRoot":"","sources":["../src/ColorPicker.slots.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,eAAe,EAAE,KAAK,wBAAwB,EAAE,MAAM,kBAAkB,CAAC;AACvG,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,UAAU,EAAuC,UAAU,EAAE,MAAM,eAAe,CAAC;AAC7G,OAAO,EAAO,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAE,cAAc,IAAI,kBAAkB,EAAE,qBAAqB,IAAI,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAE1H,MAAM,MAAM,mBAAmB,GACzB,MAAM,GACN,gBAAgB,GAChB,YAAY,GACZ,eAAe,GACf,QAAQ,GACR,iBAAiB,GACjB,mBAAmB,GACnB,oBAAoB,GACpB,cAAc,GACd,kBAAkB,GAClB,QAAQ,GACR,mBAAmB,GACnB,SAAS,GACT,kBAAkB,GAClB,uBAAuB,GACvB,uBAAuB,GACvB,yBAAyB,GACzB,gBAAgB,GAChB,uBAAuB,CAAC;AAE9B,MAAM,MAAM,SAAS,GAAG,wBAAwB,CAAC;IAC7C,IAAI,EAAE,OAAO,eAAe,CAAC;IAC7B,cAAc,EAAE,OAAO,cAAc,CAAC;IACtC,UAAU,EAAE,KAAK,CAAC;IAClB,MAAM,EAAE,KAAK,CAAC;IACd,eAAe,EAAE,OAAO,UAAU,CAAC;IACnC,iBAAiB,EAAE,OAAO,UAAU,CAAC;IACrC,kBAAkB,EAAE,KAAK,CAAC;IAC1B,YAAY,EAAE,KAAK,CAAC;IACpB,gBAAgB,EAAE,OAAO,GAAG,CAAC;IAC7B,MAAM,EAAE,KAAK,CAAC;IACd,iBAAiB,EAAE,OAAO,UAAU,CAAC;IACrC,OAAO,EAAE,KAAK,CAAC;IACf,gBAAgB,EAAE,KAAK,CAAC;IACxB,qBAAqB,EAAE,KAAK,CAAC;IAC7B,qBAAqB,EAAE,KAAK,CAAC;IAC7B,uBAAuB,EAAE,KAAK,CAAC;IAC/B,cAAc,EAAE,OAAO,kBAAkB,CAAC;IAC1C,qBAAqB,EAAE,OAAO,yBAAyB,CAAC;CAC3D,CAAC,CAAC,WAAW,CAAC,CAAC;AAUhB,eAAO,MAAM,IAAI;;;;;mDAGb,CAAC;AAEL,eAAO,MAAM,cAAc;;;;;mDAGvB,CAAC;AAEL,eAAO,MAAM,UAAU;;;;;mDAKrB,CAAC;AAEH,eAAO,MAAM,MAAM;;;;;mDASlB,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;mDAO3B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;mDAU7B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;;mDA4C9B,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;mDAaxB,CAAC;AAEF,KAAK,qBAAqB,GAAG;IACzB,UAAU,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;mDAc5B,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;mDAWlB,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;mDAS7B,CAAC;AAEF,eAAO,MAAM,OAAO;;;;;mDAQlB,CAAC;AAIH,MAAM,MAAM,mCAAmC,GAAG;IAC9C,IAAI,EAAE,OAAO,GAAG,SAAS,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACrC,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;oDAkD5B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,aAAa,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,CAGhF,CAAC;AAEL,eAAO,MAAM,qBAAqB,EAAE,aAAa,CAAC,cAAc,CAAC,OAAO,yBAAyB,CAAC,CAK9F,CAAC"}

package/lib/ColorPicker.slots.js

@@ -0,0 +1,111 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import { createComponentSlot, InputWithPopper } from "@dextinity/admin";
+import { Box, ButtonBase, IconButton, InputAdornment as MuiInputAdornment, Typography } from "@mui/material";
+import { css } from "@mui/material/styles";
+import { HexColorPicker as HexColorPickerBase, RgbaStringColorPicker as RgbaStringColorPickerBase } from "react-colorful";
+var getPopperSectionStyles = function getPopperSectionStyles(theme) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    padding: ", ";\n\n    &:not(:last-child) {\n        border-bottom: thin solid ", ";\n    }\n"])), theme.spacing(3), theme.palette.grey[100]);
+};
+export var Root = createComponentSlot(InputWithPopper)({
+  componentName: "ColorPicker",
+  slotName: "root"
+})();
+export var InputAdornment = createComponentSlot(MuiInputAdornment)({
+  componentName: "ColorPicker",
+  slotName: "inputAdornment"
+})();
+export var PopperRoot = createComponentSlot("div")({
+  componentName: "ColorPicker",
+  slotName: "popperRoot"
+})(css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: 300px;\n"]))));
+export var Header = createComponentSlot("div")({
+  componentName: "ColorPicker",
+  slotName: "header"
+})(function (_ref) {
+  var theme = _ref.theme;
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        ", "\n        position: relative;\n        padding-right: 40px;\n    "])), getPopperSectionStyles(theme));
+});
+export var HeaderTitleText = createComponentSlot(Typography)({
+  componentName: "ColorPicker",
+  slotName: "headerTitleText"
+})(function (_ref2) {
+  var theme = _ref2.theme;
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        font-weight: ", ";\n    "])), theme.typography.fontWeightBold);
+});
+export var HeaderCloseButton = createComponentSlot(IconButton)({
+  componentName: "ColorPicker",
+  slotName: "headerCloseButton"
+})(function (_ref3) {
+  var theme = _ref3.theme;
+  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        position: absolute;\n        top: 50%;\n        transform: translateY(-50%);\n        right: ", ";\n    "])), theme.spacing(2));
+});
+export var ColorPickerWrapper = createComponentSlot("div")({
+  componentName: "ColorPicker",
+  slotName: "colorPickerWrapper",
+  classesResolver: function classesResolver() {
+    return ["popperSection"];
+  }
+})(function (_ref4) {
+  var theme = _ref4.theme;
+  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        ", "\n\n        .react-colorful {\n            width: 100%;\n            height: auto;\n\n            &__pointer {\n                width: 30px;\n                height: 30px;\n            }\n\n            &__saturation,\n            &__hue,\n            &__alpha {\n                border-radius: 0;\n\n                &:not(:last-child) {\n                    margin-bottom: ", ";\n                }\n            }\n\n            &__saturation {\n                border-bottom: none;\n                height: 270px;\n            }\n\n            &__hue,\n            &__alpha {\n                height: 20px;\n            }\n\n            &__alpha-gradient {\n                box-shadow: none;\n            }\n        }\n    "])), getPopperSectionStyles(theme), theme.spacing(3));
+});
+export var ColorPalette = createComponentSlot("div")({
+  componentName: "ColorPicker",
+  slotName: "colorPalette",
+  classesResolver: function classesResolver() {
+    return ["popperSection"];
+  }
+})(function (_ref5) {
+  var theme = _ref5.theme;
+  return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        ", "\n        display: flex;\n        flex-wrap: wrap;\n        gap: ", ";\n    "])), getPopperSectionStyles(theme), theme.spacing(1));
+});
+export var ColorPaletteItem = createComponentSlot(Box)({
+  componentName: "ColorPicker",
+  slotName: "colorPaletteItem"
+})(function (_ref6) {
+  var theme = _ref6.theme,
+    ownerState = _ref6.ownerState;
+  return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        cursor: pointer;\n        width: 24px;\n        height: 24px;\n        flex-shrink: 0;\n        border: thin solid ", ";\n        border-radius: ", ";\n        box-sizing: border-box;\n        background-color: ", ";\n    "])), theme.palette.grey[100], theme.shape.borderRadius, ownerState.colorValue);
+});
+export var Footer = createComponentSlot("div")({
+  componentName: "ColorPicker",
+  slotName: "footer",
+  classesResolver: function classesResolver() {
+    return ["popperSection"];
+  }
+})(function (_ref7) {
+  var theme = _ref7.theme;
+  return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n        ", "\n        padding: ", ";\n    "])), getPopperSectionStyles(theme), theme.spacing(1));
+});
+export var FooterClearButton = createComponentSlot(ButtonBase)({
+  componentName: "ColorPicker",
+  slotName: "footerClearButton"
+})(function (_ref8) {
+  var theme = _ref8.theme;
+  return css(_templateObject0 || (_templateObject0 = _taggedTemplateLiteral(["\n        padding: ", ";\n        border-radius: ", ";\n        gap: 8px;\n    "])), theme.spacing(2), theme.shape.borderRadius);
+});
+export var Preview = createComponentSlot("div")({
+  componentName: "ColorPicker",
+  slotName: "preview"
+})(css(_templateObject1 || (_templateObject1 = _taggedTemplateLiteral(["\n    position: relative;\n    overflow: hidden;\n    width: 24px;\n    height: 24px;\n"]))));
+export var PreviewIndicator = createComponentSlot("div")({
+  componentName: "ColorPicker",
+  slotName: "previewIndicator",
+  classesResolver: function classesResolver(_ref9) {
+    var type = _ref9.type;
+    return [type === "color" && "previewIndicatorColor", type === "empty" && "previewIndicatorEmpty", type === "invalid" && "previewIndicatorInvalid"];
+  }
+})(function (_ref0) {
+  var theme = _ref0.theme,
+    ownerState = _ref0.ownerState;
+  return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n        position: absolute;\n        left: 0;\n        right: 0;\n        top: 0;\n        bottom: 0;\n        border: thin solid ", ";\n        border-radius: ", ";\n\n        ", "\n\n        ", "\n\n        ", "\n    "])), theme.palette.divider, theme.shape.borderRadius, ownerState.type === "color" && css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n            background-color: ", ";\n        "])), ownerState.color), ownerState.type === "empty" && css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n            display: flex;\n            align-items: center;\n            justify-content: center;\n\n            &:before {\n                content: \"\";\n                display: block;\n                background-color: #f62929;\n                width: 1px;\n                height: calc(100% - 4px);\n                transform: rotate(45deg);\n            }\n        "]))), ownerState.type === "invalid" && css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n            font-size: 16px;\n            line-height: 24px;\n            font-weight: ", ";\n            color: ", ";\n            text-align: center;\n        "])), theme.typography.fontWeightBold, theme.palette.text.secondary));
+});
+export var HexColorPicker = createComponentSlot(HexColorPickerBase)({
+  componentName: "ColorPicker",
+  slotName: "hexColorPicker"
+})();
+export var RgbaStringColorPicker = createComponentSlot(RgbaStringColorPickerBase)({
+  componentName: "ColorPicker",
+  slotName: "rgbaStringColorPicker"
+})();

package/lib/FinalFormColorPicker.d.ts

@@ -0,0 +1,12 @@
+import type { FieldRenderProps } from "react-final-form";
+import { type ColorPickerProps } from "./ColorPicker";
+export type FinalFormColorPickerProps = ColorPickerProps;
+type FinalFormColorPickerInternalProps = FieldRenderProps<string, HTMLInputElement | HTMLTextAreaElement>;
+/**
+ * Final Form-compatible ColorPicker component.
+ *
+ * @see {@link ColorField} – preferred for typical form use. Use this only if no Field wrapper is needed.
+ */
+export declare const FinalFormColorPicker: ({ meta, input, ...restProps }: FinalFormColorPickerProps & FinalFormColorPickerInternalProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=FinalFormColorPicker.d.ts.map

package/lib/FinalFormColorPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FinalFormColorPicker.d.ts","sourceRoot":"","sources":["../src/FinalFormColorPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAEzD,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEnE,MAAM,MAAM,yBAAyB,GAAG,gBAAgB,CAAC;AAEzD,KAAK,iCAAiC,GAAG,gBAAgB,CAAC,MAAM,EAAE,gBAAgB,GAAG,mBAAmB,CAAC,CAAC;AAC1G;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,GAAI,+BAA+B,yBAAyB,GAAG,iCAAiC,4CAEhI,CAAC"}

package/lib/FinalFormColorPicker.js

@@ -0,0 +1,22 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["meta", "input"];
+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) { _defineProperty(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; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { ColorPicker } from "./ColorPicker";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Final Form-compatible ColorPicker component.
+ *
+ * @see {@link ColorField} – preferred for typical form use. Use this only if no Field wrapper is needed.
+ */
+export var FinalFormColorPicker = function FinalFormColorPicker(_ref) {
+  var meta = _ref.meta,
+    input = _ref.input,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx(ColorPicker, _objectSpread(_objectSpread({}, input), restProps));
+};

package/lib/index.d.ts

@@ -0,0 +1,6 @@
+export { ColorField, type ColorFieldProps } from "./ColorField";
+export type { ColorPickerNoColorPreviewProps } from "./ColorPicker";
+export { ColorPicker, type ColorPickerColorPreviewProps, type ColorPickerProps, type ColorPickerPropsComponents } from "./ColorPicker";
+export type { ColorPickerClassKey } from "./ColorPicker.slots";
+export { FinalFormColorPicker, type FinalFormColorPickerProps } from "./FinalFormColorPicker";
+//# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAChE,YAAY,EAAE,8BAA8B,EAAE,MAAM,eAAe,CAAC;AACpE,OAAO,EAAE,WAAW,EAAE,KAAK,4BAA4B,EAAE,KAAK,gBAAgB,EAAE,KAAK,0BAA0B,EAAE,MAAM,eAAe,CAAC;AACvI,YAAY,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAE,oBAAoB,EAAE,KAAK,yBAAyB,EAAE,MAAM,wBAAwB,CAAC"}

package/lib/index.js

@@ -0,0 +1,3 @@
+export { ColorField } from "./ColorField";
+export { ColorPicker } from "./ColorPicker";
+export { FinalFormColorPicker } from "./FinalFormColorPicker";

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@dextinity/admin-color-picker",
+  "version": "2.0.0-canary-20260729062014",
+  "description": "Comet Admin Color Picker component",
+  "repository": {
+    "directory": "packages/admin/admin-color-picker",
+    "type": "git",
+    "url": "https://github.com/vivid-planet/comet"
+  },
+  "license": "BSD-2-Clause",
+  "sideEffects": false,
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./lib/index.js",
+      "types": "./lib/index.d.ts"
+    }
+  },
+  "files": [
+    "lib"
+  ],
+  "dependencies": {
+    "react-colorful": "^5.6.1",
+    "tinycolor2": "^1.6.0",
+    "use-debounce": "^10.0.6",
+    "@dextinity/admin": "2.0.0-canary-20260729062014",
+    "@dextinity/admin-icons": "2.0.0-canary-20260729062014"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.29.7",
+    "@babel/core": "^7.29.7",
+    "@mui/material": "^7.3.11",
+    "@types/react": "^19.2.15",
+    "@types/react-dom": "^19.2.3",
+    "@types/tinycolor2": "^1.4.6",
+    "eslint": "^9.39.4",
+    "final-form": "^4.20.10",
+    "npm-run-all2": "^8.0.4",
+    "prettier": "^3.6.2",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "react-final-form": "^6.5.9",
+    "react-intl": "^7.1.11",
+    "rimraf": "^6.1.2",
+    "typescript": "^5.9.3",
+    "@dextinity/admin-babel-preset": "2.0.0-canary-20260729062014",
+    "@dextinity/eslint-config": "2.0.0-canary-20260729062014"
+  },
+  "peerDependencies": {
+    "@mui/material": "^7.0.0",
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-final-form": "^6.3.1",
+    "react-intl": "^5.0.0 || ^6.0.0 || ^7.0.0"
+  },
+  "engines": {
+    "node": ">=22.0.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "scripts": {
+    "build": "pnpm run clean && run-p build:babel build:types",
+    "build:babel": "pnpm exec babel ./src -x \".ts,.tsx\" -d lib",
+    "build:types": "tsc --project ./tsconfig.json --emitDeclarationOnly",
+    "clean": "rimraf lib",
+    "lint": "run-p lint:prettier lint:eslint lint:tsc",
+    "lint:ci": "pnpm run lint",
+    "lint:eslint": "eslint --max-warnings 0 src/ '**/*.json' --no-warn-ignored",
+    "lint:fix": "run-p lint:fix:eslint lint:fix:prettier",
+    "lint:fix:eslint": "pnpm run lint:eslint --fix",
+    "lint:fix:prettier": "pnpm run lint:prettier --write",
+    "lint:prettier": "pnpm exec prettier --check '*.{ts,js,json,md,yml,yaml}'",
+    "lint:tsc": "tsc --noEmit",
+    "start": "run-p start:babel start:types",
+    "start:babel": "pnpm exec babel ./src -x \".ts,.tsx\" -d lib -w",
+    "start:types": "tsc --project ./tsconfig.json --emitDeclarationOnly --watch --preserveWatchOutput"
+  }
+}