@hitachivantara/uikit-react-lab 3.55.0 → 4.0.1-next.2

package/dist/index.js

@@ -24,61 +24,27 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
-  HvAppSwitcherPanel: true,
-  HvFormComposer: true,
+  HvColorPicker: true,
+  HvDrawer: true,
+  HvInlineEditor: true,
   HvNavigationAnchors: true,
   HvNotificationPanel: true,
-  HvSlider: true,
-  HvTable: true,
   HvTimeAgo: true,
-  HvTimePicker: true,
-  HvTag: true,
-  HvDrawer: true,
-  HvColorPicker: true,
-  HvQueryBuilder: true,
-  HvControls: true,
-  HvInlineEditor: true,
-  HvProgressBar: true,
-  HvDotPagination: true,
-  HvStepNavigation: true,
-  HvImageCarousel: true
+  HvImageCarousel: true,
+  HvStepNavigation: true
 };
-Object.defineProperty(exports, "HvAppSwitcherPanel", {
-  enumerable: true,
-  get: function get() {
-    return _AppSwitcherPanel.default;
-  }
-});
 Object.defineProperty(exports, "HvColorPicker", {
   enumerable: true,
   get: function get() {
     return _ColorPicker.default;
   }
 });
-Object.defineProperty(exports, "HvControls", {
-  enumerable: true,
-  get: function get() {
-    return _Controls.default;
-  }
-});
-Object.defineProperty(exports, "HvDotPagination", {
-  enumerable: true,
-  get: function get() {
-    return _DotPagination.default;
-  }
-});
 Object.defineProperty(exports, "HvDrawer", {
   enumerable: true,
   get: function get() {
     return _Drawer.default;
   }
 });
-Object.defineProperty(exports, "HvFormComposer", {
-  enumerable: true,
-  get: function get() {
-    return _FormComposer.default;
-  }
-});
 Object.defineProperty(exports, "HvImageCarousel", {
   enumerable: true,
   get: function get() {
@@ -103,91 +69,29 @@ Object.defineProperty(exports, "HvNotificationPanel", {
     return _NotificationPanel.default;
   }
 });
-Object.defineProperty(exports, "HvProgressBar", {
-  enumerable: true,
-  get: function get() {
-    return _ProgressBar.default;
-  }
-});
-Object.defineProperty(exports, "HvQueryBuilder", {
-  enumerable: true,
-  get: function get() {
-    return _QueryBuilder.default;
-  }
-});
-Object.defineProperty(exports, "HvSlider", {
-  enumerable: true,
-  get: function get() {
-    return _Slider.default;
-  }
-});
 Object.defineProperty(exports, "HvStepNavigation", {
   enumerable: true,
   get: function get() {
     return _StepNavigation.default;
   }
 });
-Object.defineProperty(exports, "HvTable", {
-  enumerable: true,
-  get: function get() {
-    return _Table.default;
-  }
-});
-Object.defineProperty(exports, "HvTag", {
-  enumerable: true,
-  get: function get() {
-    return _Tag.default;
-  }
-});
 Object.defineProperty(exports, "HvTimeAgo", {
   enumerable: true,
   get: function get() {
     return _TimeAgo.default;
   }
 });
-Object.defineProperty(exports, "HvTimePicker", {
-  enumerable: true,
-  get: function get() {
-    return _TimePicker.default;
-  }
-});
 
-var _AppSwitcherPanel = _interopRequireWildcard(require("./AppSwitcherPanel"));
+var _ColorPicker = _interopRequireDefault(require("./ColorPicker"));
 
-Object.keys(_AppSwitcherPanel).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _AppSwitcherPanel[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _AppSwitcherPanel[key];
-    }
-  });
-});
+var _Drawer = _interopRequireDefault(require("./Drawer"));
 
-var _FormComposer = _interopRequireDefault(require("./FormComposer"));
+var _InlineEditor = _interopRequireDefault(require("./InlineEditor"));
 
 var _NavigationAnchors = _interopRequireDefault(require("./NavigationAnchors"));
 
 var _NotificationPanel = _interopRequireDefault(require("./NotificationPanel"));
 
-var _Slider = _interopRequireDefault(require("./Slider"));
-
-var _Table = _interopRequireWildcard(require("./Table"));
-
-Object.keys(_Table).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _Table[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _Table[key];
-    }
-  });
-});
-
 var _TimeAgo = _interopRequireWildcard(require("./TimeAgo"));
 
 Object.keys(_TimeAgo).forEach(function (key) {
@@ -202,52 +106,10 @@ Object.keys(_TimeAgo).forEach(function (key) {
   });
 });
 
-var _TimePicker = _interopRequireDefault(require("./TimePicker"));
-
-var _Tag = _interopRequireDefault(require("./Tag"));
-
-var _Drawer = _interopRequireDefault(require("./Drawer"));
-
-var _ColorPicker = _interopRequireDefault(require("./ColorPicker"));
-
-var _QueryBuilder = _interopRequireWildcard(require("./QueryBuilder"));
-
-Object.keys(_QueryBuilder).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _QueryBuilder[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _QueryBuilder[key];
-    }
-  });
-});
-
-var _Controls = _interopRequireWildcard(require("./Controls"));
-
-Object.keys(_Controls).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _Controls[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _Controls[key];
-    }
-  });
-});
-
-var _InlineEditor = _interopRequireDefault(require("./InlineEditor"));
-
-var _ProgressBar = _interopRequireDefault(require("./ProgressBar"));
-
-var _DotPagination = _interopRequireDefault(require("./DotPagination"));
+var _ImageCarousel = _interopRequireDefault(require("./ImageCarousel"));
 
 var _StepNavigation = _interopRequireDefault(require("./StepNavigation"));
 
-var _ImageCarousel = _interopRequireDefault(require("./ImageCarousel"));
-
 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; }

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../src/index.js"],"sourcesContent":["// components\nexport { default as HvAppSwitcherPanel } from \"./AppSwitcherPanel\";\nexport * from \"./AppSwitcherPanel\";\nexport { default as HvFormComposer } from \"./FormComposer\";\nexport { default as HvNavigationAnchors } from \"./NavigationAnchors\";\nexport { default as HvNotificationPanel } from \"./NotificationPanel\";\nexport { default as HvSlider } from \"./Slider\";\nexport { default as HvTable } from \"./Table\";\nexport * from \"./Table\";\nexport { default as HvTimeAgo } from \"./TimeAgo\";\nexport * from \"./TimeAgo\";\nexport { default as HvTimePicker } from \"./TimePicker\";\nexport { default as HvTag } from \"./Tag\";\nexport { default as HvDrawer } from \"./Drawer\";\nexport { default as HvColorPicker } from \"./ColorPicker\";\nexport { default as HvQueryBuilder } from \"./QueryBuilder\";\nexport { default as HvControls } from \"./Controls\";\nexport * from \"./Controls\";\nexport * from \"./QueryBuilder\";\nexport { default as HvInlineEditor } from \"./InlineEditor\";\nexport { default as HvProgressBar } from \"./ProgressBar\";\nexport { default as HvDotPagination } from \"./DotPagination\";\nexport { default as HvStepNavigation } from \"./StepNavigation\";\nexport { default as HvImageCarousel } from \"./ImageCarousel\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAGA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAFA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;;AACA;;AACA;;AACA"}
+{"version":3,"file":"index.js","names":[],"sources":["../src/index.js"],"sourcesContent":["export { default as HvColorPicker } from \"./ColorPicker\";\n\nexport { default as HvDrawer } from \"./Drawer\";\n\nexport { default as HvInlineEditor } from \"./InlineEditor\";\n\nexport { default as HvNavigationAnchors } from \"./NavigationAnchors\";\n\nexport { default as HvNotificationPanel } from \"./NotificationPanel\";\n\nexport { default as HvTimeAgo } from \"./TimeAgo\";\nexport * from \"./TimeAgo\";\n\nexport { default as HvImageCarousel } from \"./ImageCarousel\";\n\nexport { default as HvStepNavigation } from \"./StepNavigation\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEA;;AAEA;;AAEA;;AAEA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AAEA"}

package/dist/legacy/ColorPicker/ColorPicker.d.ts

@@ -1,4 +1,4 @@
-import { StandardProps } from "@material-ui/core";
+import { StandardProps } from "@mui/material";
 import { HvFormElementProps } from "@hitachivantara/uikit-react-core";
 
 export type HvColorPickerClassKey = "root";

package/dist/legacy/ColorPicker/ColorPicker.js

@@ -7,7 +7,7 @@ import "core-js/modules/es.array.join.js";
 import React, { useMemo } from "react";
 import PropTypes from "prop-types";
 import clsx from "clsx";
-import { withStyles, useTheme } from "@material-ui/core";
+import { withStyles, useTheme } from "@mui/styles";
 import { HvPanel, HvLabel, HvInfoMessage, HvFormElement, HvBaseDropdown, useControlled, HvTypography, useUniqueId, setId } from "@hitachivantara/uikit-react-core";
 import { Checkbox } from "@hitachivantara/uikit-react-icons";
 import styles from "./styles";
@@ -18,6 +18,10 @@ import PresetColors from "./PresetColors";
  * It receives a color string in HEX format and outputs an HEX formatted color.
  */
 
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+
 var HvColorPicker = function HvColorPicker(props) {
   var theme = useTheme();
   var id = props.id,
@@ -75,46 +79,55 @@ var HvColorPicker = function HvColorPicker(props) {
     }
   };
 
-  return /*#__PURE__*/React.createElement(HvFormElement, {
+  return /*#__PURE__*/_jsxs(HvFormElement, {
     id: id,
     name: name,
     disabled: disabled,
     required: required,
-    className: clsx(className, classes.root)
-  }, (hasLabel || hasDescription) && /*#__PURE__*/React.createElement("div", {
-    className: classes.labelContainer
-  }, hasLabel && /*#__PURE__*/React.createElement(HvLabel, {
-    id: setId(elementId, "label"),
-    label: label,
-    className: classes.label
-  }), hasDescription && /*#__PURE__*/React.createElement(HvInfoMessage, {
-    id: setId(elementId, "description"),
-    className: classes.description
-  }, description)), /*#__PURE__*/React.createElement(HvBaseDropdown, {
-    className: className,
-    expanded: isOpen,
-    onToggle: handleToggle,
-    onContainerCreation: setFocusToContent,
-    placeholder: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Checkbox, {
-      className: classes.headerColorIcon,
-      color: [color]
-    }), /*#__PURE__*/React.createElement(HvTypography, {
-      className: classes.headerColorValue
-    }, color)),
-    "aria-label": ariaLabel,
-    "aria-labelledby": [label && setId(elementId, "label"), ariaLabelledBy].join(" ").trim() || undefined,
-    "aria-describedby": [description && setId(elementId, "description"), ariaDescribedBy].join(" ").trim() || undefined
-  }, /*#__PURE__*/React.createElement(HvPanel, {
-    className: classes.panel
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classes.colorPicker
-  }, /*#__PURE__*/React.createElement(Picker, {
-    color: color,
-    onChange: handleSelect
-  }), /*#__PURE__*/React.createElement(PresetColors, {
-    colors: colorArray,
-    onClick: handleSelect
-  })))));
+    className: clsx(className, classes.root),
+    children: [(hasLabel || hasDescription) && /*#__PURE__*/_jsxs("div", {
+      className: classes.labelContainer,
+      children: [hasLabel && /*#__PURE__*/_jsx(HvLabel, {
+        id: setId(elementId, "label"),
+        label: label,
+        className: classes.label
+      }), hasDescription && /*#__PURE__*/_jsx(HvInfoMessage, {
+        id: setId(elementId, "description"),
+        className: classes.description,
+        children: description
+      })]
+    }), /*#__PURE__*/_jsx(HvBaseDropdown, {
+      className: className,
+      expanded: isOpen,
+      onToggle: handleToggle,
+      onContainerCreation: setFocusToContent,
+      placeholder: /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Checkbox, {
+          className: classes.headerColorIcon,
+          color: [color]
+        }), /*#__PURE__*/_jsx(HvTypography, {
+          className: classes.headerColorValue,
+          children: color
+        })]
+      }),
+      "aria-label": ariaLabel,
+      "aria-labelledby": [label && setId(elementId, "label"), ariaLabelledBy].join(" ").trim() || undefined,
+      "aria-describedby": [description && setId(elementId, "description"), ariaDescribedBy].join(" ").trim() || undefined,
+      children: /*#__PURE__*/_jsx(HvPanel, {
+        className: classes.panel,
+        children: /*#__PURE__*/_jsxs("div", {
+          className: classes.colorPicker,
+          children: [/*#__PURE__*/_jsx(Picker, {
+            color: color,
+            onChange: handleSelect
+          }), /*#__PURE__*/_jsx(PresetColors, {
+            colors: colorArray,
+            onClick: handleSelect
+          })]
+        })
+      })
+    })]
+  });
 };
 
 process.env.NODE_ENV !== "production" ? HvColorPicker.propTypes = {

package/dist/legacy/ColorPicker/ColorPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.js","names":["React","useMemo","PropTypes","clsx","withStyles","useTheme","HvPanel","HvLabel","HvInfoMessage","HvFormElement","HvBaseDropdown","useControlled","HvTypography","useUniqueId","setId","Checkbox","styles","Picker","PresetColors","HvColorPicker","props","theme","id","name","required","disabled","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","className","classes","value","onChange","defaultValue","hv","palette","accent","acce1","expanded","defaultExpanded","Boolean","isOpen","setIsOpen","color","setColor","handleToggle","_evt","s","handleSelect","val","hex","elementId","hasLabel","hasDescription","colorArray","semantic","sema4","sema3","sema1","sema19","acce2h","sema6","atmosphere","atmo5","setFocusToContent","containerRef","inputs","getElementsByTagName","length","focus","root","labelContainer","headerColorIcon","headerColorValue","join","trim","undefined","panel","colorPicker","propTypes","string","node","bool","shape","isRequired","func"],"sources":["../../../src/ColorPicker/ColorPicker.js"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\n\nimport { withStyles, useTheme } from \"@material-ui/core\";\nimport {\n  HvPanel,\n  HvLabel,\n  HvInfoMessage,\n  HvFormElement,\n  HvBaseDropdown,\n  useControlled,\n  HvTypography,\n  useUniqueId,\n  setId,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Checkbox } from \"@hitachivantara/uikit-react-icons\";\n\nimport styles from \"./styles\";\nimport Picker from \"./Picker\";\nimport PresetColors from \"./PresetColors\";\n\n/**\n * A color picker component which allows the user to select a color from a list of pre-defined colors or freely select one color via the Hue and Saturation.\n * It receives a color string in HEX format and outputs an HEX formatted color.\n */\nconst HvColorPicker = (props) => {\n  const theme = useTheme();\n  const {\n    id,\n    name,\n\n    required = false,\n    disabled = false,\n\n    label,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n    className,\n    classes,\n    value,\n    onChange,\n    defaultValue = theme.hv.palette.accent.acce1,\n\n    expanded,\n    defaultExpanded = false,\n  } = props;\n\n  const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n  const [color, setColor] = useControlled(value, defaultValue);\n\n  const handleToggle = (_evt, s) => {\n    setIsOpen(s);\n  };\n\n  const handleSelect = (val) => {\n    onChange?.(val.hex);\n    setColor(val.hex);\n  };\n\n  const elementId = useUniqueId(id, \"hvdropdown\");\n\n  const hasLabel = label != null;\n  const hasDescription = description != null;\n\n  const colorArray = useMemo(\n    () => [\n      theme.hv.palette.semantic.sema4,\n      theme.hv.palette.semantic.sema3,\n      \"#F6941E\",\n      \"#8DC63D\",\n      theme.hv.palette.semantic.sema1,\n      theme.hv.palette.semantic.sema19,\n      \"#05A99C\",\n      \"#01ADEF\",\n      theme.hv.palette.accent.acce2h,\n      \"#0155A5\",\n      \"#2E3192\",\n      \"#652C90\",\n      theme.hv.palette.semantic.sema6,\n      \"#EC018B\",\n      theme.hv.palette.atmosphere.atmo5,\n      theme.hv.palette.accent.acce1,\n    ],\n    [theme]\n  );\n\n  const setFocusToContent = (containerRef) => {\n    const inputs = containerRef?.getElementsByTagName(\"input\");\n    if (inputs?.length > 0) {\n      inputs[0].focus();\n    }\n  };\n\n  return (\n    <HvFormElement\n      id={id}\n      name={name}\n      disabled={disabled}\n      required={required}\n      className={clsx(className, classes.root)}\n    >\n      {(hasLabel || hasDescription) && (\n        <div className={classes.labelContainer}>\n          {hasLabel && (\n            <HvLabel id={setId(elementId, \"label\")} label={label} className={classes.label} />\n          )}\n\n          {hasDescription && (\n            <HvInfoMessage id={setId(elementId, \"description\")} className={classes.description}>\n              {description}\n            </HvInfoMessage>\n          )}\n        </div>\n      )}\n      <HvBaseDropdown\n        className={className}\n        expanded={isOpen}\n        onToggle={handleToggle}\n        onContainerCreation={setFocusToContent}\n        placeholder={\n          <>\n            <Checkbox className={classes.headerColorIcon} color={[color]} />\n            <HvTypography className={classes.headerColorValue}>{color}</HvTypography>\n          </>\n        }\n        aria-label={ariaLabel}\n        aria-labelledby={\n          [label && setId(elementId, \"label\"), ariaLabelledBy].join(\" \").trim() || undefined\n        }\n        aria-describedby={\n          [description && setId(elementId, \"description\"), ariaDescribedBy].join(\" \").trim() ||\n          undefined\n        }\n      >\n        <HvPanel className={classes.panel}>\n          <div className={classes.colorPicker}>\n            <Picker color={color} onChange={handleSelect} />\n            <PresetColors colors={colorArray} onClick={handleSelect} />\n          </div>\n        </HvPanel>\n      </HvBaseDropdown>\n    </HvFormElement>\n  );\n};\n\nHvColorPicker.propTypes = {\n  /**\n   * Id to be applied to the form element root node.\n   */\n  id: PropTypes.string,\n\n  /**\n   * The form element name.\n   */\n  name: PropTypes.string,\n\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label: PropTypes.node,\n  /**\n   * @ignore\n   */\n  \"aria-label\": PropTypes.string,\n  /**\n   * @ignore\n   */\n  \"aria-labelledby\": PropTypes.string,\n  /**\n   * Provide additional descriptive text for the form element.\n   */\n  description: PropTypes.node,\n  /**\n   * @ignore\n   */\n  \"aria-describedby\": PropTypes.string,\n\n  /**\n   * Indicates that the form element is disabled.\n   */\n  disabled: PropTypes.bool,\n  /**\n   * Indicates that user input is required on the form element.\n   */\n  required: PropTypes.bool,\n\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    root: PropTypes.string,\n    labelContainer: PropTypes.string,\n    label: PropTypes.string,\n    description: PropTypes.string,\n    headerColorIcon: PropTypes.string,\n    headerColorValue: PropTypes.string,\n    panel: PropTypes.string,\n    colorPicker: PropTypes.string,\n  }).isRequired,\n\n  /**\n   * If `true` the color picker starts opened if `false` it starts closed.\n   */\n  expanded: PropTypes.bool,\n  /**\n   * When uncontrolled, defines the initial expanded state.\n   */\n  defaultExpanded: PropTypes.bool,\n\n  /**\n   * The callback fired when the value changes.\n   */\n  onChange: PropTypes.func,\n\n  /**\n   * The value color, in HEX format.\n   */\n  value: PropTypes.string,\n\n  /**\n   * When uncontrolled, defines the initial value state.\n   */\n  defaultValue: PropTypes.string,\n};\n\nexport default withStyles(styles, { name: \"HvColorPicker\" })(HvColorPicker);\n"],"mappings":"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"}
+{"version":3,"file":"ColorPicker.js","names":["React","useMemo","PropTypes","clsx","withStyles","useTheme","HvPanel","HvLabel","HvInfoMessage","HvFormElement","HvBaseDropdown","useControlled","HvTypography","useUniqueId","setId","Checkbox","styles","Picker","PresetColors","HvColorPicker","props","theme","id","name","required","disabled","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","className","classes","value","onChange","defaultValue","hv","palette","accent","acce1","expanded","defaultExpanded","Boolean","isOpen","setIsOpen","color","setColor","handleToggle","_evt","s","handleSelect","val","hex","elementId","hasLabel","hasDescription","colorArray","semantic","sema4","sema3","sema1","sema19","acce2h","sema6","atmosphere","atmo5","setFocusToContent","containerRef","inputs","getElementsByTagName","length","focus","root","labelContainer","headerColorIcon","headerColorValue","join","trim","undefined","panel","colorPicker","propTypes","string","node","bool","shape","isRequired","func"],"sources":["../../../src/ColorPicker/ColorPicker.js"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport { withStyles, useTheme } from \"@mui/styles\";\n\nimport {\n  HvPanel,\n  HvLabel,\n  HvInfoMessage,\n  HvFormElement,\n  HvBaseDropdown,\n  useControlled,\n  HvTypography,\n  useUniqueId,\n  setId,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Checkbox } from \"@hitachivantara/uikit-react-icons\";\n\nimport styles from \"./styles\";\nimport Picker from \"./Picker\";\nimport PresetColors from \"./PresetColors\";\n\n/**\n * A color picker component which allows the user to select a color from a list of pre-defined colors or freely select one color via the Hue and Saturation.\n * It receives a color string in HEX format and outputs an HEX formatted color.\n */\nconst HvColorPicker = (props) => {\n  const theme = useTheme();\n  const {\n    id,\n    name,\n\n    required = false,\n    disabled = false,\n\n    label,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n    className,\n    classes,\n    value,\n    onChange,\n    defaultValue = theme.hv.palette.accent.acce1,\n\n    expanded,\n    defaultExpanded = false,\n  } = props;\n\n  const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n  const [color, setColor] = useControlled(value, defaultValue);\n\n  const handleToggle = (_evt, s) => {\n    setIsOpen(s);\n  };\n\n  const handleSelect = (val) => {\n    onChange?.(val.hex);\n    setColor(val.hex);\n  };\n\n  const elementId = useUniqueId(id, \"hvdropdown\");\n\n  const hasLabel = label != null;\n  const hasDescription = description != null;\n\n  const colorArray = useMemo(\n    () => [\n      theme.hv.palette.semantic.sema4,\n      theme.hv.palette.semantic.sema3,\n      \"#F6941E\",\n      \"#8DC63D\",\n      theme.hv.palette.semantic.sema1,\n      theme.hv.palette.semantic.sema19,\n      \"#05A99C\",\n      \"#01ADEF\",\n      theme.hv.palette.accent.acce2h,\n      \"#0155A5\",\n      \"#2E3192\",\n      \"#652C90\",\n      theme.hv.palette.semantic.sema6,\n      \"#EC018B\",\n      theme.hv.palette.atmosphere.atmo5,\n      theme.hv.palette.accent.acce1,\n    ],\n    [theme]\n  );\n\n  const setFocusToContent = (containerRef) => {\n    const inputs = containerRef?.getElementsByTagName(\"input\");\n    if (inputs?.length > 0) {\n      inputs[0].focus();\n    }\n  };\n\n  return (\n    <HvFormElement\n      id={id}\n      name={name}\n      disabled={disabled}\n      required={required}\n      className={clsx(className, classes.root)}\n    >\n      {(hasLabel || hasDescription) && (\n        <div className={classes.labelContainer}>\n          {hasLabel && (\n            <HvLabel id={setId(elementId, \"label\")} label={label} className={classes.label} />\n          )}\n\n          {hasDescription && (\n            <HvInfoMessage id={setId(elementId, \"description\")} className={classes.description}>\n              {description}\n            </HvInfoMessage>\n          )}\n        </div>\n      )}\n      <HvBaseDropdown\n        className={className}\n        expanded={isOpen}\n        onToggle={handleToggle}\n        onContainerCreation={setFocusToContent}\n        placeholder={\n          <>\n            <Checkbox className={classes.headerColorIcon} color={[color]} />\n            <HvTypography className={classes.headerColorValue}>{color}</HvTypography>\n          </>\n        }\n        aria-label={ariaLabel}\n        aria-labelledby={\n          [label && setId(elementId, \"label\"), ariaLabelledBy].join(\" \").trim() || undefined\n        }\n        aria-describedby={\n          [description && setId(elementId, \"description\"), ariaDescribedBy].join(\" \").trim() ||\n          undefined\n        }\n      >\n        <HvPanel className={classes.panel}>\n          <div className={classes.colorPicker}>\n            <Picker color={color} onChange={handleSelect} />\n            <PresetColors colors={colorArray} onClick={handleSelect} />\n          </div>\n        </HvPanel>\n      </HvBaseDropdown>\n    </HvFormElement>\n  );\n};\n\nHvColorPicker.propTypes = {\n  /**\n   * Id to be applied to the form element root node.\n   */\n  id: PropTypes.string,\n\n  /**\n   * The form element name.\n   */\n  name: PropTypes.string,\n\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label: PropTypes.node,\n  /**\n   * @ignore\n   */\n  \"aria-label\": PropTypes.string,\n  /**\n   * @ignore\n   */\n  \"aria-labelledby\": PropTypes.string,\n  /**\n   * Provide additional descriptive text for the form element.\n   */\n  description: PropTypes.node,\n  /**\n   * @ignore\n   */\n  \"aria-describedby\": PropTypes.string,\n\n  /**\n   * Indicates that the form element is disabled.\n   */\n  disabled: PropTypes.bool,\n  /**\n   * Indicates that user input is required on the form element.\n   */\n  required: PropTypes.bool,\n\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    root: PropTypes.string,\n    labelContainer: PropTypes.string,\n    label: PropTypes.string,\n    description: PropTypes.string,\n    headerColorIcon: PropTypes.string,\n    headerColorValue: PropTypes.string,\n    panel: PropTypes.string,\n    colorPicker: PropTypes.string,\n  }).isRequired,\n\n  /**\n   * If `true` the color picker starts opened if `false` it starts closed.\n   */\n  expanded: PropTypes.bool,\n  /**\n   * When uncontrolled, defines the initial expanded state.\n   */\n  defaultExpanded: PropTypes.bool,\n\n  /**\n   * The callback fired when the value changes.\n   */\n  onChange: PropTypes.func,\n\n  /**\n   * The value color, in HEX format.\n   */\n  value: PropTypes.string,\n\n  /**\n   * When uncontrolled, defines the initial value state.\n   */\n  defaultValue: PropTypes.string,\n};\n\nexport default withStyles(styles, { name: \"HvColorPicker\" })(HvColorPicker);\n"],"mappings":"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"}

package/dist/legacy/ColorPicker/Fields/Fields.js

@@ -10,6 +10,8 @@ import * as color from "react-color/lib/helpers/color";
 import { HvInput } from "@hitachivantara/uikit-react-core";
 import useStyles from "./styles"; // eslint-disable-next-line react/prop-types
 
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 export var Fields = function Fields(_ref) {
   var onChange = _ref.onChange,
       rgb = _ref.rgb,
@@ -93,55 +95,56 @@ export var Fields = function Fields(_ref) {
     }, _evt);
   };
 
-  return /*#__PURE__*/React.createElement("div", {
-    className: clsx(classes.fields)
-  }, /*#__PURE__*/React.createElement(HvInput, {
-    inputRef: hexInputRef,
-    className: clsx(classes.double),
-    label: "HEX",
-    value: internalHex.replace("#", ""),
-    onChange: onChangeHex,
-    onBlur: function onBlur() {
-      return setInternalHex(hex);
-    },
-    disableClear: true
-  }), /*#__PURE__*/React.createElement(HvInput, {
-    inputRef: redInputRef,
-    className: clsx(classes.single),
-    label: "R",
-    value: "".concat(internalRed),
-    onChange: function onChange(_evt, value) {
-      return onChangeRbg(_evt, value, "r");
-    },
-    onBlur: function onBlur() {
-      return setInternalRed(rgb.r);
-    },
-    disableClear: true
-  }), /*#__PURE__*/React.createElement(HvInput, {
-    inputRef: greenInputRef,
-    className: clsx(classes.single),
-    label: "G",
-    value: "".concat(internalGreen),
-    onChange: function onChange(_evt, value) {
-      return onChangeRbg(_evt, value, "g");
-    },
-    onBlur: function onBlur() {
-      return setInternalGreen(rgb.g);
-    },
-    disableClear: true
-  }), /*#__PURE__*/React.createElement(HvInput, {
-    inputRef: blueInputRef,
-    className: clsx(classes.single),
-    label: "B",
-    value: "".concat(internalBlue),
-    onChange: function onChange(_evt, value) {
-      return onChangeRbg(_evt, value, "b");
-    },
-    onBlur: function onBlur() {
-      return setInternalBlue(rgb.b);
-    },
-    disableClear: true
-  }));
+  return /*#__PURE__*/_jsxs("div", {
+    className: clsx(classes.fields),
+    children: [/*#__PURE__*/_jsx(HvInput, {
+      inputRef: hexInputRef,
+      className: clsx(classes.double),
+      label: "HEX",
+      value: internalHex.replace("#", ""),
+      onChange: onChangeHex,
+      onBlur: function onBlur() {
+        return setInternalHex(hex);
+      },
+      disableClear: true
+    }), /*#__PURE__*/_jsx(HvInput, {
+      inputRef: redInputRef,
+      className: clsx(classes.single),
+      label: "R",
+      value: "".concat(internalRed),
+      onChange: function onChange(_evt, value) {
+        return onChangeRbg(_evt, value, "r");
+      },
+      onBlur: function onBlur() {
+        return setInternalRed(rgb.r);
+      },
+      disableClear: true
+    }), /*#__PURE__*/_jsx(HvInput, {
+      inputRef: greenInputRef,
+      className: clsx(classes.single),
+      label: "G",
+      value: "".concat(internalGreen),
+      onChange: function onChange(_evt, value) {
+        return onChangeRbg(_evt, value, "g");
+      },
+      onBlur: function onBlur() {
+        return setInternalGreen(rgb.g);
+      },
+      disableClear: true
+    }), /*#__PURE__*/_jsx(HvInput, {
+      inputRef: blueInputRef,
+      className: clsx(classes.single),
+      label: "B",
+      value: "".concat(internalBlue),
+      onChange: function onChange(_evt, value) {
+        return onChangeRbg(_evt, value, "b");
+      },
+      onBlur: function onBlur() {
+        return setInternalBlue(rgb.b);
+      },
+      disableClear: true
+    })]
+  });
 };
 process.env.NODE_ENV !== "production" ? Fields.propTypes = {
   rgb: PropTypes.shape({

package/dist/legacy/ColorPicker/Fields/Fields.js.map

@@ -1 +1 @@
-{"version":3,"file":"Fields.js","names":["React","useEffect","useRef","useState","PropTypes","clsx","color","HvInput","useStyles","Fields","onChange","rgb","hex","classes","internalHex","setInternalHex","r","internalRed","setInternalRed","g","internalGreen","setInternalGreen","b","internalBlue","setInternalBlue","hexInputRef","redInputRef","greenInputRef","blueInputRef","document","activeElement","current","handleChange","data","e","isValidHex","source","onChangeHex","_evt","value","onChangeRbg","colorPart","fields","double","replace","single","propTypes","shape","number","isRequired"],"sources":["../../../../src/ColorPicker/Fields/Fields.js"],"sourcesContent":["/* eslint-disable no-param-reassign */\n\nimport React, { useEffect, useRef, useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport * as color from \"react-color/lib/helpers/color\";\n\nimport { HvInput } from \"@hitachivantara/uikit-react-core\";\n\nimport useStyles from \"./styles\";\n\n// eslint-disable-next-line react/prop-types\nexport const Fields = ({ onChange, rgb, hex }) => {\n  const classes = useStyles();\n  const [internalHex, setInternalHex] = useState(hex);\n  const [internalRed, setInternalRed] = useState(rgb.r);\n  const [internalGreen, setInternalGreen] = useState(rgb.g);\n  const [internalBlue, setInternalBlue] = useState(rgb.b);\n\n  const hexInputRef = useRef();\n  const redInputRef = useRef();\n  const greenInputRef = useRef();\n  const blueInputRef = useRef();\n\n  useEffect(() => {\n    if (document.activeElement !== hexInputRef.current) {\n      setInternalHex(hex);\n    }\n  }, [hex]);\n\n  useEffect(() => {\n    if (document.activeElement !== redInputRef.current) {\n      setInternalRed(rgb.r);\n    }\n\n    if (document.activeElement !== greenInputRef.current) {\n      setInternalGreen(rgb.g);\n    }\n\n    if (document.activeElement !== blueInputRef.current) {\n      setInternalBlue(rgb.b);\n    }\n  }, [rgb]);\n\n  const handleChange = (data, e) => {\n    if (data.hex && color.isValidHex(data.hex)) {\n      onChange(\n        {\n          hex: data.hex,\n          source: \"hex\",\n        },\n        e\n      );\n    } else if (data.r || data.g || data.b) {\n      onChange(\n        {\n          r: data.r || rgb.r,\n          g: data.g || rgb.g,\n          b: data.b || rgb.b,\n          source: \"rgb\",\n        },\n        e\n      );\n    }\n  };\n\n  const onChangeHex = (_evt, value) => {\n    setInternalHex(value);\n    handleChange({ hex: value }, _evt);\n  };\n\n  const onChangeRbg = (_evt, value, colorPart) => {\n    if (colorPart === \"r\") setInternalRed(value);\n    if (colorPart === \"g\") setInternalGreen(value);\n    if (colorPart === \"b\") setInternalBlue(value);\n    handleChange(\n      {\n        r: colorPart === \"r\" ? value : rgb.r,\n        g: colorPart === \"g\" ? value : rgb.g,\n        b: colorPart === \"b\" ? value : rgb.b,\n      },\n      _evt\n    );\n  };\n\n  return (\n    <div className={clsx(classes.fields)}>\n      <HvInput\n        inputRef={hexInputRef}\n        className={clsx(classes.double)}\n        label=\"HEX\"\n        value={internalHex.replace(\"#\", \"\")}\n        onChange={onChangeHex}\n        onBlur={() => setInternalHex(hex)}\n        disableClear\n      />\n      <HvInput\n        inputRef={redInputRef}\n        className={clsx(classes.single)}\n        label=\"R\"\n        value={`${internalRed}`}\n        onChange={(_evt, value) => onChangeRbg(_evt, value, \"r\")}\n        onBlur={() => setInternalRed(rgb.r)}\n        disableClear\n      />\n      <HvInput\n        inputRef={greenInputRef}\n        className={clsx(classes.single)}\n        label=\"G\"\n        value={`${internalGreen}`}\n        onChange={(_evt, value) => onChangeRbg(_evt, value, \"g\")}\n        onBlur={() => setInternalGreen(rgb.g)}\n        disableClear\n      />\n      <HvInput\n        inputRef={blueInputRef}\n        className={clsx(classes.single)}\n        label=\"B\"\n        value={`${internalBlue}`}\n        onChange={(_evt, value) => onChangeRbg(_evt, value, \"b\")}\n        onBlur={() => setInternalBlue(rgb.b)}\n        disableClear\n      />\n    </div>\n  );\n};\n\nFields.propTypes = {\n  rgb: PropTypes.shape({\n    r: PropTypes.number,\n    g: PropTypes.number,\n    b: PropTypes.number,\n  }).isRequired,\n};\n\nexport default Fields;\n"],"mappings":"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"}
+{"version":3,"file":"Fields.js","names":["React","useEffect","useRef","useState","PropTypes","clsx","color","HvInput","useStyles","Fields","onChange","rgb","hex","classes","internalHex","setInternalHex","r","internalRed","setInternalRed","g","internalGreen","setInternalGreen","b","internalBlue","setInternalBlue","hexInputRef","redInputRef","greenInputRef","blueInputRef","document","activeElement","current","handleChange","data","e","isValidHex","source","onChangeHex","_evt","value","onChangeRbg","colorPart","fields","double","replace","single","propTypes","shape","number","isRequired"],"sources":["../../../../src/ColorPicker/Fields/Fields.js"],"sourcesContent":["/* eslint-disable no-param-reassign */\n\nimport React, { useEffect, useRef, useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport * as color from \"react-color/lib/helpers/color\";\n\nimport { HvInput } from \"@hitachivantara/uikit-react-core\";\n\nimport useStyles from \"./styles\";\n\n// eslint-disable-next-line react/prop-types\nexport const Fields = ({ onChange, rgb, hex }) => {\n  const classes = useStyles();\n  const [internalHex, setInternalHex] = useState(hex);\n  const [internalRed, setInternalRed] = useState(rgb.r);\n  const [internalGreen, setInternalGreen] = useState(rgb.g);\n  const [internalBlue, setInternalBlue] = useState(rgb.b);\n\n  const hexInputRef = useRef();\n  const redInputRef = useRef();\n  const greenInputRef = useRef();\n  const blueInputRef = useRef();\n\n  useEffect(() => {\n    if (document.activeElement !== hexInputRef.current) {\n      setInternalHex(hex);\n    }\n  }, [hex]);\n\n  useEffect(() => {\n    if (document.activeElement !== redInputRef.current) {\n      setInternalRed(rgb.r);\n    }\n\n    if (document.activeElement !== greenInputRef.current) {\n      setInternalGreen(rgb.g);\n    }\n\n    if (document.activeElement !== blueInputRef.current) {\n      setInternalBlue(rgb.b);\n    }\n  }, [rgb]);\n\n  const handleChange = (data, e) => {\n    if (data.hex && color.isValidHex(data.hex)) {\n      onChange(\n        {\n          hex: data.hex,\n          source: \"hex\",\n        },\n        e\n      );\n    } else if (data.r || data.g || data.b) {\n      onChange(\n        {\n          r: data.r || rgb.r,\n          g: data.g || rgb.g,\n          b: data.b || rgb.b,\n          source: \"rgb\",\n        },\n        e\n      );\n    }\n  };\n\n  const onChangeHex = (_evt, value) => {\n    setInternalHex(value);\n    handleChange({ hex: value }, _evt);\n  };\n\n  const onChangeRbg = (_evt, value, colorPart) => {\n    if (colorPart === \"r\") setInternalRed(value);\n    if (colorPart === \"g\") setInternalGreen(value);\n    if (colorPart === \"b\") setInternalBlue(value);\n    handleChange(\n      {\n        r: colorPart === \"r\" ? value : rgb.r,\n        g: colorPart === \"g\" ? value : rgb.g,\n        b: colorPart === \"b\" ? value : rgb.b,\n      },\n      _evt\n    );\n  };\n\n  return (\n    <div className={clsx(classes.fields)}>\n      <HvInput\n        inputRef={hexInputRef}\n        className={clsx(classes.double)}\n        label=\"HEX\"\n        value={internalHex.replace(\"#\", \"\")}\n        onChange={onChangeHex}\n        onBlur={() => setInternalHex(hex)}\n        disableClear\n      />\n      <HvInput\n        inputRef={redInputRef}\n        className={clsx(classes.single)}\n        label=\"R\"\n        value={`${internalRed}`}\n        onChange={(_evt, value) => onChangeRbg(_evt, value, \"r\")}\n        onBlur={() => setInternalRed(rgb.r)}\n        disableClear\n      />\n      <HvInput\n        inputRef={greenInputRef}\n        className={clsx(classes.single)}\n        label=\"G\"\n        value={`${internalGreen}`}\n        onChange={(_evt, value) => onChangeRbg(_evt, value, \"g\")}\n        onBlur={() => setInternalGreen(rgb.g)}\n        disableClear\n      />\n      <HvInput\n        inputRef={blueInputRef}\n        className={clsx(classes.single)}\n        label=\"B\"\n        value={`${internalBlue}`}\n        onChange={(_evt, value) => onChangeRbg(_evt, value, \"b\")}\n        onBlur={() => setInternalBlue(rgb.b)}\n        disableClear\n      />\n    </div>\n  );\n};\n\nFields.propTypes = {\n  rgb: PropTypes.shape({\n    r: PropTypes.number,\n    g: PropTypes.number,\n    b: PropTypes.number,\n  }).isRequired,\n};\n\nexport default Fields;\n"],"mappings":";;;;AAAA;AAEA,OAAOA,KAAP,IAAgBC,SAAhB,EAA2BC,MAA3B,EAAmCC,QAAnC,QAAmD,OAAnD;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,IAAP,MAAiB,MAAjB;AACA,OAAO,KAAKC,KAAZ,MAAuB,+BAAvB;AAEA,SAASC,OAAT,QAAwB,kCAAxB;AAEA,OAAOC,SAAP,MAAsB,UAAtB,C,CAEA;;;;AACA,OAAO,IAAMC,MAAM,GAAG,SAATA,MAAS,OAA4B;EAAA,IAAzBC,QAAyB,QAAzBA,QAAyB;EAAA,IAAfC,GAAe,QAAfA,GAAe;EAAA,IAAVC,GAAU,QAAVA,GAAU;EAChD,IAAMC,OAAO,GAAGL,SAAS,EAAzB;;EACA,gBAAsCL,QAAQ,CAACS,GAAD,CAA9C;EAAA;EAAA,IAAOE,WAAP;EAAA,IAAoBC,cAApB;;EACA,iBAAsCZ,QAAQ,CAACQ,GAAG,CAACK,CAAL,CAA9C;EAAA;EAAA,IAAOC,WAAP;EAAA,IAAoBC,cAApB;;EACA,iBAA0Cf,QAAQ,CAACQ,GAAG,CAACQ,CAAL,CAAlD;EAAA;EAAA,IAAOC,aAAP;EAAA,IAAsBC,gBAAtB;;EACA,iBAAwClB,QAAQ,CAACQ,GAAG,CAACW,CAAL,CAAhD;EAAA;EAAA,IAAOC,YAAP;EAAA,IAAqBC,eAArB;;EAEA,IAAMC,WAAW,GAAGvB,MAAM,EAA1B;EACA,IAAMwB,WAAW,GAAGxB,MAAM,EAA1B;EACA,IAAMyB,aAAa,GAAGzB,MAAM,EAA5B;EACA,IAAM0B,YAAY,GAAG1B,MAAM,EAA3B;EAEAD,SAAS,CAAC,YAAM;IACd,IAAI4B,QAAQ,CAACC,aAAT,KAA2BL,WAAW,CAACM,OAA3C,EAAoD;MAClDhB,cAAc,CAACH,GAAD,CAAd;IACD;EACF,CAJQ,EAIN,CAACA,GAAD,CAJM,CAAT;EAMAX,SAAS,CAAC,YAAM;IACd,IAAI4B,QAAQ,CAACC,aAAT,KAA2BJ,WAAW,CAACK,OAA3C,EAAoD;MAClDb,cAAc,CAACP,GAAG,CAACK,CAAL,CAAd;IACD;;IAED,IAAIa,QAAQ,CAACC,aAAT,KAA2BH,aAAa,CAACI,OAA7C,EAAsD;MACpDV,gBAAgB,CAACV,GAAG,CAACQ,CAAL,CAAhB;IACD;;IAED,IAAIU,QAAQ,CAACC,aAAT,KAA2BF,YAAY,CAACG,OAA5C,EAAqD;MACnDP,eAAe,CAACb,GAAG,CAACW,CAAL,CAAf;IACD;EACF,CAZQ,EAYN,CAACX,GAAD,CAZM,CAAT;;EAcA,IAAMqB,YAAY,GAAG,SAAfA,YAAe,CAACC,IAAD,EAAOC,CAAP,EAAa;IAChC,IAAID,IAAI,CAACrB,GAAL,IAAYN,KAAK,CAAC6B,UAAN,CAAiBF,IAAI,CAACrB,GAAtB,CAAhB,EAA4C;MAC1CF,QAAQ,CACN;QACEE,GAAG,EAAEqB,IAAI,CAACrB,GADZ;QAEEwB,MAAM,EAAE;MAFV,CADM,EAKNF,CALM,CAAR;IAOD,CARD,MAQO,IAAID,IAAI,CAACjB,CAAL,IAAUiB,IAAI,CAACd,CAAf,IAAoBc,IAAI,CAACX,CAA7B,EAAgC;MACrCZ,QAAQ,CACN;QACEM,CAAC,EAAEiB,IAAI,CAACjB,CAAL,IAAUL,GAAG,CAACK,CADnB;QAEEG,CAAC,EAAEc,IAAI,CAACd,CAAL,IAAUR,GAAG,CAACQ,CAFnB;QAGEG,CAAC,EAAEW,IAAI,CAACX,CAAL,IAAUX,GAAG,CAACW,CAHnB;QAIEc,MAAM,EAAE;MAJV,CADM,EAONF,CAPM,CAAR;IASD;EACF,CApBD;;EAsBA,IAAMG,WAAW,GAAG,SAAdA,WAAc,CAACC,IAAD,EAAOC,KAAP,EAAiB;IACnCxB,cAAc,CAACwB,KAAD,CAAd;IACAP,YAAY,CAAC;MAAEpB,GAAG,EAAE2B;IAAP,CAAD,EAAiBD,IAAjB,CAAZ;EACD,CAHD;;EAKA,IAAME,WAAW,GAAG,SAAdA,WAAc,CAACF,IAAD,EAAOC,KAAP,EAAcE,SAAd,EAA4B;IAC9C,IAAIA,SAAS,KAAK,GAAlB,EAAuBvB,cAAc,CAACqB,KAAD,CAAd;IACvB,IAAIE,SAAS,KAAK,GAAlB,EAAuBpB,gBAAgB,CAACkB,KAAD,CAAhB;IACvB,IAAIE,SAAS,KAAK,GAAlB,EAAuBjB,eAAe,CAACe,KAAD,CAAf;IACvBP,YAAY,CACV;MACEhB,CAAC,EAAEyB,SAAS,KAAK,GAAd,GAAoBF,KAApB,GAA4B5B,GAAG,CAACK,CADrC;MAEEG,CAAC,EAAEsB,SAAS,KAAK,GAAd,GAAoBF,KAApB,GAA4B5B,GAAG,CAACQ,CAFrC;MAGEG,CAAC,EAAEmB,SAAS,KAAK,GAAd,GAAoBF,KAApB,GAA4B5B,GAAG,CAACW;IAHrC,CADU,EAMVgB,IANU,CAAZ;EAQD,CAZD;;EAcA,oBACE;IAAK,SAAS,EAAEjC,IAAI,CAACQ,OAAO,CAAC6B,MAAT,CAApB;IAAA,wBACE,KAAC,OAAD;MACE,QAAQ,EAAEjB,WADZ;MAEE,SAAS,EAAEpB,IAAI,CAACQ,OAAO,CAAC8B,MAAT,CAFjB;MAGE,KAAK,EAAC,KAHR;MAIE,KAAK,EAAE7B,WAAW,CAAC8B,OAAZ,CAAoB,GAApB,EAAyB,EAAzB,CAJT;MAKE,QAAQ,EAAEP,WALZ;MAME,MAAM,EAAE;QAAA,OAAMtB,cAAc,CAACH,GAAD,CAApB;MAAA,CANV;MAOE,YAAY;IAPd,EADF,eAUE,KAAC,OAAD;MACE,QAAQ,EAAEc,WADZ;MAEE,SAAS,EAAErB,IAAI,CAACQ,OAAO,CAACgC,MAAT,CAFjB;MAGE,KAAK,EAAC,GAHR;MAIE,KAAK,YAAK5B,WAAL,CAJP;MAKE,QAAQ,EAAE,kBAACqB,IAAD,EAAOC,KAAP;QAAA,OAAiBC,WAAW,CAACF,IAAD,EAAOC,KAAP,EAAc,GAAd,CAA5B;MAAA,CALZ;MAME,MAAM,EAAE;QAAA,OAAMrB,cAAc,CAACP,GAAG,CAACK,CAAL,CAApB;MAAA,CANV;MAOE,YAAY;IAPd,EAVF,eAmBE,KAAC,OAAD;MACE,QAAQ,EAAEW,aADZ;MAEE,SAAS,EAAEtB,IAAI,CAACQ,OAAO,CAACgC,MAAT,CAFjB;MAGE,KAAK,EAAC,GAHR;MAIE,KAAK,YAAKzB,aAAL,CAJP;MAKE,QAAQ,EAAE,kBAACkB,IAAD,EAAOC,KAAP;QAAA,OAAiBC,WAAW,CAACF,IAAD,EAAOC,KAAP,EAAc,GAAd,CAA5B;MAAA,CALZ;MAME,MAAM,EAAE;QAAA,OAAMlB,gBAAgB,CAACV,GAAG,CAACQ,CAAL,CAAtB;MAAA,CANV;MAOE,YAAY;IAPd,EAnBF,eA4BE,KAAC,OAAD;MACE,QAAQ,EAAES,YADZ;MAEE,SAAS,EAAEvB,IAAI,CAACQ,OAAO,CAACgC,MAAT,CAFjB;MAGE,KAAK,EAAC,GAHR;MAIE,KAAK,YAAKtB,YAAL,CAJP;MAKE,QAAQ,EAAE,kBAACe,IAAD,EAAOC,KAAP;QAAA,OAAiBC,WAAW,CAACF,IAAD,EAAOC,KAAP,EAAc,GAAd,CAA5B;MAAA,CALZ;MAME,MAAM,EAAE;QAAA,OAAMf,eAAe,CAACb,GAAG,CAACW,CAAL,CAArB;MAAA,CANV;MAOE,YAAY;IAPd,EA5BF;EAAA,EADF;AAwCD,CAjHM;AAmHP,wCAAAb,MAAM,CAACqC,SAAP,GAAmB;EACjBnC,GAAG,EAAEP,SAAS,CAAC2C,KAAV,CAAgB;IACnB/B,CAAC,EAAEZ,SAAS,CAAC4C,MADM;IAEnB7B,CAAC,EAAEf,SAAS,CAAC4C,MAFM;IAGnB1B,CAAC,EAAElB,SAAS,CAAC4C;EAHM,CAAhB,EAIFC;AALc,CAAnB;AAQA,eAAexC,MAAf"}

package/dist/legacy/ColorPicker/Fields/styles.js

@@ -1,4 +1,4 @@
-import { makeStyles } from "@material-ui/core";
+import { makeStyles } from "@mui/styles";
 var styles = makeStyles(function () {
   return {
     fields: {

package/dist/legacy/ColorPicker/Fields/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["makeStyles","styles","fields","width","display","paddingTop","paddingBottom","marginRight","single","paddingLeft","marginLeft","double","textTransform","paddingRight"],"sources":["../../../../src/ColorPicker/Fields/styles.js"],"sourcesContent":["import { makeStyles } from \"@material-ui/core\";\n\nconst styles = makeStyles(() => ({\n  fields: {\n    width: \"100%\",\n    display: \"flex\",\n    paddingTop: 10,\n    paddingBottom: 20,\n    marginRight: 5,\n  },\n  single: {\n    width: 40,\n    paddingLeft: 5,\n    \"& input\": {\n      marginLeft: 5,\n      marginRight: 5,\n    },\n    \"& label\": {\n      paddingLeft: 5,\n    },\n  },\n  double: {\n    width: 80,\n    \"& input\": {\n      textTransform: \"uppercase\",\n      marginLeft: 5,\n      marginRight: 5,\n    },\n    \"& label\": {\n      paddingLeft: 5,\n    },\n    paddingRight: 20,\n  },\n}));\n\nexport default styles;\n"],"mappings":"AAAA,SAASA,UAAT,QAA2B,mBAA3B;AAEA,IAAMC,MAAM,GAAGD,UAAU,CAAC;EAAA,OAAO;IAC/BE,MAAM,EAAE;MACNC,KAAK,EAAE,MADD;MAENC,OAAO,EAAE,MAFH;MAGNC,UAAU,EAAE,EAHN;MAINC,aAAa,EAAE,EAJT;MAKNC,WAAW,EAAE;IALP,CADuB;IAQ/BC,MAAM,EAAE;MACNL,KAAK,EAAE,EADD;MAENM,WAAW,EAAE,CAFP;MAGN,WAAW;QACTC,UAAU,EAAE,CADH;QAETH,WAAW,EAAE;MAFJ,CAHL;MAON,WAAW;QACTE,WAAW,EAAE;MADJ;IAPL,CARuB;IAmB/BE,MAAM,EAAE;MACNR,KAAK,EAAE,EADD;MAEN,WAAW;QACTS,aAAa,EAAE,WADN;QAETF,UAAU,EAAE,CAFH;QAGTH,WAAW,EAAE;MAHJ,CAFL;MAON,WAAW;QACTE,WAAW,EAAE;MADJ,CAPL;MAUNI,YAAY,EAAE;IAVR;EAnBuB,CAAP;AAAA,CAAD,CAAzB;AAiCA,eAAeZ,MAAf"}
+{"version":3,"file":"styles.js","names":["makeStyles","styles","fields","width","display","paddingTop","paddingBottom","marginRight","single","paddingLeft","marginLeft","double","textTransform","paddingRight"],"sources":["../../../../src/ColorPicker/Fields/styles.js"],"sourcesContent":["import { makeStyles } from \"@mui/styles\";\n\nconst styles = makeStyles(() => ({\n  fields: {\n    width: \"100%\",\n    display: \"flex\",\n    paddingTop: 10,\n    paddingBottom: 20,\n    marginRight: 5,\n  },\n  single: {\n    width: 40,\n    paddingLeft: 5,\n    \"& input\": {\n      marginLeft: 5,\n      marginRight: 5,\n    },\n    \"& label\": {\n      paddingLeft: 5,\n    },\n  },\n  double: {\n    width: 80,\n    \"& input\": {\n      textTransform: \"uppercase\",\n      marginLeft: 5,\n      marginRight: 5,\n    },\n    \"& label\": {\n      paddingLeft: 5,\n    },\n    paddingRight: 20,\n  },\n}));\n\nexport default styles;\n"],"mappings":"AAAA,SAASA,UAAT,QAA2B,aAA3B;AAEA,IAAMC,MAAM,GAAGD,UAAU,CAAC;EAAA,OAAO;IAC/BE,MAAM,EAAE;MACNC,KAAK,EAAE,MADD;MAENC,OAAO,EAAE,MAFH;MAGNC,UAAU,EAAE,EAHN;MAINC,aAAa,EAAE,EAJT;MAKNC,WAAW,EAAE;IALP,CADuB;IAQ/BC,MAAM,EAAE;MACNL,KAAK,EAAE,EADD;MAENM,WAAW,EAAE,CAFP;MAGN,WAAW;QACTC,UAAU,EAAE,CADH;QAETH,WAAW,EAAE;MAFJ,CAHL;MAON,WAAW;QACTE,WAAW,EAAE;MADJ;IAPL,CARuB;IAmB/BE,MAAM,EAAE;MACNR,KAAK,EAAE,EADD;MAEN,WAAW;QACTS,aAAa,EAAE,WADN;QAETF,UAAU,EAAE,CAFH;QAGTH,WAAW,EAAE;MAHJ,CAFL;MAON,WAAW;QACTE,WAAW,EAAE;MADJ,CAPL;MAUNI,YAAY,EAAE;IAVR;EAnBuB,CAAP;AAAA,CAAD,CAAzB;AAiCA,eAAeZ,MAAf"}