@hitachivantara/uikit-react-lab 3.52.0 → 4.0.1-next.0

package/dist/NotificationPanel/NotificationsIndicator/NotificationsIndicator.js

@@ -1,5 +1,19 @@
 "use strict";
 
+require("core-js/modules/es.object.keys.js");
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.array.filter.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+require("core-js/modules/web.dom-collections.for-each.js");
+
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
@@ -7,7 +21,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
@@ -19,32 +33,42 @@ var _clsx = _interopRequireDefault(require("clsx"));
 
 var _uikitReactCore = require("@hitachivantara/uikit-react-core");
 
-var _core = require("@material-ui/core");
+var _styles = require("@mui/styles");
+
+var _styles2 = _interopRequireDefault(require("./styles"));
 
-var _styles = _interopRequireDefault(require("./styles"));
+var _jsxRuntime = require("react/jsx-runtime");
 
 var _excluded = ["classes", "className", "labels", "onClick"];
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 var NotificationsIndicator = function NotificationsIndicator(_ref) {
   var classes = _ref.classes,
       className = _ref.className,
       labels = _ref.labels,
       onClick = _ref.onClick,
       others = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({
     className: (0, _clsx.default)(className, classes.root, classes.notificationsIndicator)
-  }, others), /*#__PURE__*/_react.default.createElement(_uikitReactCore.HvTypography, {
-    classes: {
-      normalText: classes.semanticColoring
-    }
-  }, labels.label), /*#__PURE__*/_react.default.createElement(_uikitReactCore.HvButton, {
-    category: "semantic",
-    className: classes.newNotificationsFocus,
-    classes: {
-      focusVisible: classes.newNotificationsFocus
-    },
-    onClick: onClick
-  }, labels.buttonLabel));
+  }, others), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_uikitReactCore.HvTypography, {
+      classes: {
+        normalText: classes.semanticColoring
+      },
+      children: labels.label
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikitReactCore.HvButton, {
+      category: "semantic",
+      className: classes.newNotificationsFocus,
+      classes: {
+        focusVisible: classes.newNotificationsFocus
+      },
+      onClick: onClick,
+      children: labels.buttonLabel
+    })]
+  }));
 };
 
 process.env.NODE_ENV !== "production" ? NotificationsIndicator.propTypes = {
@@ -99,7 +123,7 @@ process.env.NODE_ENV !== "production" ? NotificationsIndicator.propTypes = {
   onClick: _propTypes.default.func
 } : void 0;
 
-var _default = (0, _core.withStyles)(_styles.default, {
+var _default = (0, _styles.withStyles)(_styles2.default, {
   name: "HvNotificationsIndicator"
 })(NotificationsIndicator);
 

package/dist/NotificationPanel/NotificationsIndicator/NotificationsIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationsIndicator.js","names":["NotificationsIndicator","classes","className","labels","onClick","others","clsx","root","notificationsIndicator","normalText","semanticColoring","label","newNotificationsFocus","focusVisible","buttonLabel","propTypes","PropTypes","shape","string","isRequired","func","withStyles","styles","name"],"sources":["../../../src/NotificationPanel/NotificationsIndicator/NotificationsIndicator.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport { HvButton, HvTypography } from \"@hitachivantara/uikit-react-core\";\n\nimport { withStyles } from \"@material-ui/core\";\nimport styles from \"./styles\";\n\nconst NotificationsIndicator = ({ classes, className, labels, onClick, ...others }) => {\n  return (\n    <div className={clsx(className, classes.root, classes.notificationsIndicator)} {...others}>\n      <HvTypography classes={{ normalText: classes.semanticColoring }}>{labels.label}</HvTypography>\n      <HvButton\n        category=\"semantic\"\n        className={classes.newNotificationsFocus}\n        classes={{\n          focusVisible: classes.newNotificationsFocus,\n        }}\n        onClick={onClick}\n      >\n        {labels.buttonLabel}\n      </HvButton>\n    </div>\n  );\n};\n\nNotificationsIndicator.propTypes = {\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the root of the element.\n     */\n    root: PropTypes.string,\n    /**\n     * Styles applied to the NotificationsIndicator container.\n     */\n    notificationsIndicator: PropTypes.string,\n\n    /**\n     * Styles applied to the notification focus\n     */\n    newNotificationsFocus: PropTypes.string,\n    /**\n     * Override to text color for usage over semantic background in wicked\n     */\n    semanticColoring: PropTypes.string,\n  }).isRequired,\n\n  /**\n   * Class names to be applied to the accordion.\n   */\n  className: PropTypes.string,\n  /**\n   * Labels to apply to component\n   */\n  labels: PropTypes.shape({\n    /**\n     * Notification indicator label\n     */\n    label: PropTypes.string,\n    /**\n     * Label to apply to the button label\n     */\n    buttonLabel: PropTypes.string,\n  }).isRequired,\n  /**\n   * Function passed to the notification panel button\n   */\n  onClick: PropTypes.func,\n};\n\nexport default withStyles(styles, { name: \"HvNotificationsIndicator\" })(NotificationsIndicator);\n"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AACA;;;;AAEA,IAAMA,sBAAsB,GAAG,SAAzBA,sBAAyB,OAAwD;EAAA,IAArDC,OAAqD,QAArDA,OAAqD;EAAA,IAA5CC,SAA4C,QAA5CA,SAA4C;EAAA,IAAjCC,MAAiC,QAAjCA,MAAiC;EAAA,IAAzBC,OAAyB,QAAzBA,OAAyB;EAAA,IAAbC,MAAa;EACrF,oBACE;IAAK,SAAS,EAAE,IAAAC,aAAA,EAAKJ,SAAL,EAAgBD,OAAO,CAACM,IAAxB,EAA8BN,OAAO,CAACO,sBAAtC;EAAhB,GAAmFH,MAAnF,gBACE,6BAAC,4BAAD;IAAc,OAAO,EAAE;MAAEI,UAAU,EAAER,OAAO,CAACS;IAAtB;EAAvB,GAAkEP,MAAM,CAACQ,KAAzE,CADF,eAEE,6BAAC,wBAAD;IACE,QAAQ,EAAC,UADX;IAEE,SAAS,EAAEV,OAAO,CAACW,qBAFrB;IAGE,OAAO,EAAE;MACPC,YAAY,EAAEZ,OAAO,CAACW;IADf,CAHX;IAME,OAAO,EAAER;EANX,GAQGD,MAAM,CAACW,WARV,CAFF,CADF;AAeD,CAhBD;;AAkBA,wCAAAd,sBAAsB,CAACe,SAAvB,GAAmC;EACjC;AACF;AACA;EACEd,OAAO,EAAEe,kBAAA,CAAUC,KAAV,CAAgB;IACvB;AACJ;AACA;IACIV,IAAI,EAAES,kBAAA,CAAUE,MAJO;;IAKvB;AACJ;AACA;IACIV,sBAAsB,EAAEQ,kBAAA,CAAUE,MARX;;IAUvB;AACJ;AACA;IACIN,qBAAqB,EAAEI,kBAAA,CAAUE,MAbV;;IAcvB;AACJ;AACA;IACIR,gBAAgB,EAAEM,kBAAA,CAAUE;EAjBL,CAAhB,EAkBNC,UAtB8B;;EAwBjC;AACF;AACA;EACEjB,SAAS,EAAEc,kBAAA,CAAUE,MA3BY;;EA4BjC;AACF;AACA;EACEf,MAAM,EAAEa,kBAAA,CAAUC,KAAV,CAAgB;IACtB;AACJ;AACA;IACIN,KAAK,EAAEK,kBAAA,CAAUE,MAJK;;IAKtB;AACJ;AACA;IACIJ,WAAW,EAAEE,kBAAA,CAAUE;EARD,CAAhB,EASLC,UAxC8B;;EAyCjC;AACF;AACA;EACEf,OAAO,EAAEY,kBAAA,CAAUI;AA5Cc,CAAnC;;eA+Ce,IAAAC,gBAAA,EAAWC,eAAX,EAAmB;EAAEC,IAAI,EAAE;AAAR,CAAnB,EAAyDvB,sBAAzD,C"}
+{"version":3,"file":"NotificationsIndicator.js","names":["NotificationsIndicator","classes","className","labels","onClick","others","clsx","root","notificationsIndicator","normalText","semanticColoring","label","newNotificationsFocus","focusVisible","buttonLabel","propTypes","PropTypes","shape","string","isRequired","func","withStyles","styles","name"],"sources":["../../../src/NotificationPanel/NotificationsIndicator/NotificationsIndicator.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport { HvButton, HvTypography } from \"@hitachivantara/uikit-react-core\";\n\nimport { withStyles } from \"@mui/styles\";\nimport styles from \"./styles\";\n\nconst NotificationsIndicator = ({ classes, className, labels, onClick, ...others }) => {\n  return (\n    <div className={clsx(className, classes.root, classes.notificationsIndicator)} {...others}>\n      <HvTypography classes={{ normalText: classes.semanticColoring }}>{labels.label}</HvTypography>\n      <HvButton\n        category=\"semantic\"\n        className={classes.newNotificationsFocus}\n        classes={{\n          focusVisible: classes.newNotificationsFocus,\n        }}\n        onClick={onClick}\n      >\n        {labels.buttonLabel}\n      </HvButton>\n    </div>\n  );\n};\n\nNotificationsIndicator.propTypes = {\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the root of the element.\n     */\n    root: PropTypes.string,\n    /**\n     * Styles applied to the NotificationsIndicator container.\n     */\n    notificationsIndicator: PropTypes.string,\n\n    /**\n     * Styles applied to the notification focus\n     */\n    newNotificationsFocus: PropTypes.string,\n    /**\n     * Override to text color for usage over semantic background in wicked\n     */\n    semanticColoring: PropTypes.string,\n  }).isRequired,\n\n  /**\n   * Class names to be applied to the accordion.\n   */\n  className: PropTypes.string,\n  /**\n   * Labels to apply to component\n   */\n  labels: PropTypes.shape({\n    /**\n     * Notification indicator label\n     */\n    label: PropTypes.string,\n    /**\n     * Label to apply to the button label\n     */\n    buttonLabel: PropTypes.string,\n  }).isRequired,\n  /**\n   * Function passed to the notification panel button\n   */\n  onClick: PropTypes.func,\n};\n\nexport default withStyles(styles, { name: \"HvNotificationsIndicator\" })(NotificationsIndicator);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AACA;;;;;;;;;;AAEA,IAAMA,sBAAsB,GAAG,SAAzBA,sBAAyB,OAAwD;EAAA,IAArDC,OAAqD,QAArDA,OAAqD;EAAA,IAA5CC,SAA4C,QAA5CA,SAA4C;EAAA,IAAjCC,MAAiC,QAAjCA,MAAiC;EAAA,IAAzBC,OAAyB,QAAzBA,OAAyB;EAAA,IAAbC,MAAa;EACrF,oBACE;IAAK,SAAS,EAAE,IAAAC,aAAA,EAAKJ,SAAL,EAAgBD,OAAO,CAACM,IAAxB,EAA8BN,OAAO,CAACO,sBAAtC;EAAhB,GAAmFH,MAAnF;IAAA,wBACE,qBAAC,4BAAD;MAAc,OAAO,EAAE;QAAEI,UAAU,EAAER,OAAO,CAACS;MAAtB,CAAvB;MAAA,UAAkEP,MAAM,CAACQ;IAAzE,EADF,eAEE,qBAAC,wBAAD;MACE,QAAQ,EAAC,UADX;MAEE,SAAS,EAAEV,OAAO,CAACW,qBAFrB;MAGE,OAAO,EAAE;QACPC,YAAY,EAAEZ,OAAO,CAACW;MADf,CAHX;MAME,OAAO,EAAER,OANX;MAAA,UAQGD,MAAM,CAACW;IARV,EAFF;EAAA,GADF;AAeD,CAhBD;;AAkBA,wCAAAd,sBAAsB,CAACe,SAAvB,GAAmC;EACjC;AACF;AACA;EACEd,OAAO,EAAEe,kBAAA,CAAUC,KAAV,CAAgB;IACvB;AACJ;AACA;IACIV,IAAI,EAAES,kBAAA,CAAUE,MAJO;;IAKvB;AACJ;AACA;IACIV,sBAAsB,EAAEQ,kBAAA,CAAUE,MARX;;IAUvB;AACJ;AACA;IACIN,qBAAqB,EAAEI,kBAAA,CAAUE,MAbV;;IAcvB;AACJ;AACA;IACIR,gBAAgB,EAAEM,kBAAA,CAAUE;EAjBL,CAAhB,EAkBNC,UAtB8B;;EAwBjC;AACF;AACA;EACEjB,SAAS,EAAEc,kBAAA,CAAUE,MA3BY;;EA4BjC;AACF;AACA;EACEf,MAAM,EAAEa,kBAAA,CAAUC,KAAV,CAAgB;IACtB;AACJ;AACA;IACIN,KAAK,EAAEK,kBAAA,CAAUE,MAJK;;IAKtB;AACJ;AACA;IACIJ,WAAW,EAAEE,kBAAA,CAAUE;EARD,CAAhB,EASLC,UAxC8B;;EAyCjC;AACF;AACA;EACEf,OAAO,EAAEY,kBAAA,CAAUI;AA5Cc,CAAnC;;eA+Ce,IAAAC,kBAAA,EAAWC,gBAAX,EAAmB;EAAEC,IAAI,EAAE;AAAR,CAAnB,EAAyDvB,sBAAzD,C"}

package/dist/TimeAgo/TimeAgo.d.ts

@@ -1,4 +1,4 @@
-import { StandardProps } from "@material-ui/core";
+import { StandardProps } from "@mui/material";
 
 export type HvTimeAgoClassKey = "root";
 

package/dist/TimeAgo/TimeAgo.js

@@ -1,5 +1,19 @@
 "use strict";
 
+require("core-js/modules/es.object.keys.js");
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.array.filter.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+require("core-js/modules/web.dom-collections.for-each.js");
+
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
@@ -7,7 +21,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
@@ -15,16 +29,22 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _core = require("@material-ui/core");
+var _styles = require("@mui/styles");
 
 var _uikitReactCore = require("@hitachivantara/uikit-react-core");
 
 var _useTimeAgo = _interopRequireDefault(require("./useTimeAgo"));
 
-var _styles = _interopRequireDefault(require("./styles"));
+var _styles2 = _interopRequireDefault(require("./styles"));
+
+var _jsxRuntime = require("react/jsx-runtime");
 
 var _excluded = ["classes", "timestamp", "locale", "component", "emptyElement", "disableRefresh", "showSeconds", "justText"];
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 /**
  * The HvTimeAgo component implements the Design System relative time format guidelines.
  */
@@ -51,9 +71,11 @@ var HvTimeAgo = function HvTimeAgo(_ref) {
     showSeconds: showSeconds
   });
   if (justText && timestamp) return timeAgo;
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, _objectSpread(_objectSpread({
     className: classes.root
-  }, others), !timestamp ? emptyElement : timeAgo);
+  }, others), {}, {
+    children: !timestamp ? emptyElement : timeAgo
+  }));
 };
 
 process.env.NODE_ENV !== "production" ? HvTimeAgo.propTypes = {
@@ -107,7 +129,7 @@ process.env.NODE_ENV !== "production" ? HvTimeAgo.propTypes = {
   justText: _propTypes.default.bool
 } : void 0;
 
-var _default = (0, _core.withStyles)(_styles.default, {
+var _default = (0, _styles.withStyles)(_styles2.default, {
   name: "HvTimeAgo"
 })(HvTimeAgo);
 

package/dist/TimeAgo/TimeAgo.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimeAgo.js","names":["HvTimeAgo","classes","timestamp","localeProp","locale","component","Component","HvTypography","emptyElement","disableRefresh","showSeconds","justText","others","contextLocale","useLocale","timeAgo","useTimeAgo","root","propTypes","PropTypes","shape","string","number","elementType","node","bool","withStyles","styles","name"],"sources":["../../src/TimeAgo/TimeAgo.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@material-ui/core\";\nimport { HvTypography, useLocale } from \"@hitachivantara/uikit-react-core\";\nimport useTimeAgo from \"./useTimeAgo\";\nimport styles from \"./styles\";\n\n/**\n * The HvTimeAgo component implements the Design System relative time format guidelines.\n */\nconst HvTimeAgo = ({\n  classes,\n  timestamp,\n  locale: localeProp,\n  component: Component = HvTypography,\n  emptyElement = \"—\",\n  disableRefresh = false,\n  showSeconds = false,\n  justText = false,\n  ...others\n}) => {\n  const contextLocale = useLocale();\n  const locale = localeProp || contextLocale;\n  const timeAgo = useTimeAgo(timestamp, { locale, disableRefresh, showSeconds });\n\n  if (justText && timestamp) return timeAgo;\n\n  return (\n    <Component className={classes.root} {...others}>\n      {!timestamp ? emptyElement : timeAgo}\n    </Component>\n  );\n};\n\nHvTimeAgo.propTypes = {\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the component root class.\n     */\n    root: PropTypes.string,\n  }),\n  /**\n   * The timestamp to format, in seconds\n   */\n  timestamp: PropTypes.number,\n  /**\n   * The locale to be used. Should be on of the dayjs supported locales\n   * @see https://day.js.org/docs/en/i18n/i18n\n   */\n  locale: PropTypes.string,\n  /**\n   * The component used for the root node. Either a string to use a HTML element or a component.\n   * Defaults to `div`.\n   */\n  component: PropTypes.elementType,\n  /**\n   * The element to render when the timestamp is null or 0\n   * Defaults to `—` (Em Dash)\n   */\n  emptyElement: PropTypes.node,\n  /**\n   * Disables periodic date refreshes\n   */\n  disableRefresh: PropTypes.bool,\n  /**\n   * Whether to show seconds in the rendered time\n   */\n  showSeconds: PropTypes.bool,\n  /**\n   * Whether the component should render just the string\n   * Consider using `useTimeAgo` instead\n   */\n  justText: PropTypes.bool,\n};\n\nexport default withStyles(styles, { name: \"HvTimeAgo\" })(HvTimeAgo);\n"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA;AACA;AACA;AACA,IAAMA,SAAS,GAAG,SAAZA,SAAY,OAUZ;EAAA,IATJC,OASI,QATJA,OASI;EAAA,IARJC,SAQI,QARJA,SAQI;EAAA,IAPIC,UAOJ,QAPJC,MAOI;EAAA,0BANJC,SAMI;EAAA,IANOC,SAMP,+BANmBC,4BAMnB;EAAA,6BALJC,YAKI;EAAA,IALJA,YAKI,kCALW,GAKX;EAAA,+BAJJC,cAII;EAAA,IAJJA,cAII,oCAJa,KAIb;EAAA,4BAHJC,WAGI;EAAA,IAHJA,WAGI,iCAHU,KAGV;EAAA,yBAFJC,QAEI;EAAA,IAFJA,QAEI,8BAFO,KAEP;EAAA,IADDC,MACC;EACJ,IAAMC,aAAa,GAAG,IAAAC,yBAAA,GAAtB;EACA,IAAMV,MAAM,GAAGD,UAAU,IAAIU,aAA7B;EACA,IAAME,OAAO,GAAG,IAAAC,mBAAA,EAAWd,SAAX,EAAsB;IAAEE,MAAM,EAANA,MAAF;IAAUK,cAAc,EAAdA,cAAV;IAA0BC,WAAW,EAAXA;EAA1B,CAAtB,CAAhB;EAEA,IAAIC,QAAQ,IAAIT,SAAhB,EAA2B,OAAOa,OAAP;EAE3B,oBACE,6BAAC,SAAD;IAAW,SAAS,EAAEd,OAAO,CAACgB;EAA9B,GAAwCL,MAAxC,GACG,CAACV,SAAD,GAAaM,YAAb,GAA4BO,OAD/B,CADF;AAKD,CAtBD;;AAwBA,wCAAAf,SAAS,CAACkB,SAAV,GAAsB;EACpB;AACF;AACA;EACEjB,OAAO,EAAEkB,kBAAA,CAAUC,KAAV,CAAgB;IACvB;AACJ;AACA;IACIH,IAAI,EAAEE,kBAAA,CAAUE;EAJO,CAAhB,CAJW;;EAUpB;AACF;AACA;EACEnB,SAAS,EAAEiB,kBAAA,CAAUG,MAbD;;EAcpB;AACF;AACA;AACA;EACElB,MAAM,EAAEe,kBAAA,CAAUE,MAlBE;;EAmBpB;AACF;AACA;AACA;EACEhB,SAAS,EAAEc,kBAAA,CAAUI,WAvBD;;EAwBpB;AACF;AACA;AACA;EACEf,YAAY,EAAEW,kBAAA,CAAUK,IA5BJ;;EA6BpB;AACF;AACA;EACEf,cAAc,EAAEU,kBAAA,CAAUM,IAhCN;;EAiCpB;AACF;AACA;EACEf,WAAW,EAAES,kBAAA,CAAUM,IApCH;;EAqCpB;AACF;AACA;AACA;EACEd,QAAQ,EAAEQ,kBAAA,CAAUM;AAzCA,CAAtB;;eA4Ce,IAAAC,gBAAA,EAAWC,eAAX,EAAmB;EAAEC,IAAI,EAAE;AAAR,CAAnB,EAA0C5B,SAA1C,C"}
+{"version":3,"file":"TimeAgo.js","names":["HvTimeAgo","classes","timestamp","localeProp","locale","component","Component","HvTypography","emptyElement","disableRefresh","showSeconds","justText","others","contextLocale","useLocale","timeAgo","useTimeAgo","root","propTypes","PropTypes","shape","string","number","elementType","node","bool","withStyles","styles","name"],"sources":["../../src/TimeAgo/TimeAgo.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@mui/styles\";\nimport { HvTypography, useLocale } from \"@hitachivantara/uikit-react-core\";\nimport useTimeAgo from \"./useTimeAgo\";\nimport styles from \"./styles\";\n\n/**\n * The HvTimeAgo component implements the Design System relative time format guidelines.\n */\nconst HvTimeAgo = ({\n  classes,\n  timestamp,\n  locale: localeProp,\n  component: Component = HvTypography,\n  emptyElement = \"—\",\n  disableRefresh = false,\n  showSeconds = false,\n  justText = false,\n  ...others\n}) => {\n  const contextLocale = useLocale();\n  const locale = localeProp || contextLocale;\n  const timeAgo = useTimeAgo(timestamp, { locale, disableRefresh, showSeconds });\n\n  if (justText && timestamp) return timeAgo;\n\n  return (\n    <Component className={classes.root} {...others}>\n      {!timestamp ? emptyElement : timeAgo}\n    </Component>\n  );\n};\n\nHvTimeAgo.propTypes = {\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the component root class.\n     */\n    root: PropTypes.string,\n  }),\n  /**\n   * The timestamp to format, in seconds\n   */\n  timestamp: PropTypes.number,\n  /**\n   * The locale to be used. Should be on of the dayjs supported locales\n   * @see https://day.js.org/docs/en/i18n/i18n\n   */\n  locale: PropTypes.string,\n  /**\n   * The component used for the root node. Either a string to use a HTML element or a component.\n   * Defaults to `div`.\n   */\n  component: PropTypes.elementType,\n  /**\n   * The element to render when the timestamp is null or 0\n   * Defaults to `—` (Em Dash)\n   */\n  emptyElement: PropTypes.node,\n  /**\n   * Disables periodic date refreshes\n   */\n  disableRefresh: PropTypes.bool,\n  /**\n   * Whether to show seconds in the rendered time\n   */\n  showSeconds: PropTypes.bool,\n  /**\n   * Whether the component should render just the string\n   * Consider using `useTimeAgo` instead\n   */\n  justText: PropTypes.bool,\n};\n\nexport default withStyles(styles, { name: \"HvTimeAgo\" })(HvTimeAgo);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA;AACA;AACA;AACA,IAAMA,SAAS,GAAG,SAAZA,SAAY,OAUZ;EAAA,IATJC,OASI,QATJA,OASI;EAAA,IARJC,SAQI,QARJA,SAQI;EAAA,IAPIC,UAOJ,QAPJC,MAOI;EAAA,0BANJC,SAMI;EAAA,IANOC,SAMP,+BANmBC,4BAMnB;EAAA,6BALJC,YAKI;EAAA,IALJA,YAKI,kCALW,GAKX;EAAA,+BAJJC,cAII;EAAA,IAJJA,cAII,oCAJa,KAIb;EAAA,4BAHJC,WAGI;EAAA,IAHJA,WAGI,iCAHU,KAGV;EAAA,yBAFJC,QAEI;EAAA,IAFJA,QAEI,8BAFO,KAEP;EAAA,IADDC,MACC;EACJ,IAAMC,aAAa,GAAG,IAAAC,yBAAA,GAAtB;EACA,IAAMV,MAAM,GAAGD,UAAU,IAAIU,aAA7B;EACA,IAAME,OAAO,GAAG,IAAAC,mBAAA,EAAWd,SAAX,EAAsB;IAAEE,MAAM,EAANA,MAAF;IAAUK,cAAc,EAAdA,cAAV;IAA0BC,WAAW,EAAXA;EAA1B,CAAtB,CAAhB;EAEA,IAAIC,QAAQ,IAAIT,SAAhB,EAA2B,OAAOa,OAAP;EAE3B,oBACE,qBAAC,SAAD;IAAW,SAAS,EAAEd,OAAO,CAACgB;EAA9B,GAAwCL,MAAxC;IAAA,UACG,CAACV,SAAD,GAAaM,YAAb,GAA4BO;EAD/B,GADF;AAKD,CAtBD;;AAwBA,wCAAAf,SAAS,CAACkB,SAAV,GAAsB;EACpB;AACF;AACA;EACEjB,OAAO,EAAEkB,kBAAA,CAAUC,KAAV,CAAgB;IACvB;AACJ;AACA;IACIH,IAAI,EAAEE,kBAAA,CAAUE;EAJO,CAAhB,CAJW;;EAUpB;AACF;AACA;EACEnB,SAAS,EAAEiB,kBAAA,CAAUG,MAbD;;EAcpB;AACF;AACA;AACA;EACElB,MAAM,EAAEe,kBAAA,CAAUE,MAlBE;;EAmBpB;AACF;AACA;AACA;EACEhB,SAAS,EAAEc,kBAAA,CAAUI,WAvBD;;EAwBpB;AACF;AACA;AACA;EACEf,YAAY,EAAEW,kBAAA,CAAUK,IA5BJ;;EA6BpB;AACF;AACA;EACEf,cAAc,EAAEU,kBAAA,CAAUM,IAhCN;;EAiCpB;AACF;AACA;EACEf,WAAW,EAAES,kBAAA,CAAUM,IApCH;;EAqCpB;AACF;AACA;AACA;EACEd,QAAQ,EAAEQ,kBAAA,CAAUM;AAzCA,CAAtB;;eA4Ce,IAAAC,kBAAA,EAAWC,gBAAX,EAAmB;EAAEC,IAAI,EAAE;AAAR,CAAnB,EAA0C5B,SAA1C,C"}

package/dist/index.d.ts

@@ -1,8 +1,11 @@
-export { default as HvAppSwitcherPanel } from "./AppSwitcherPanel";
-export * from "./AppSwitcherPanel";
+export { default as HvColorPicker } from "./ColorPicker";
+export * from "./ColorPicker";
+
+export { default as HvDrawer } from "./Drawer";
+export * from "./Drawer";
 
-export { default as HvFormComposer } from "./FormComposer";
-export * from "./FormComposer";
+export { default as HvInlineEditor } from "./InlineEditor";
+export * from "./InlineEditor";
 
 export { default as HvNavigationAnchors } from "./NavigationAnchors";
 export * from "./NavigationAnchors";
@@ -10,38 +13,5 @@ export * from "./NavigationAnchors";
 export { default as HvNotificationPanel } from "./NotificationPanel";
 export * from "./NotificationPanel";
 
-export { default as HvSlider } from "./Slider";
-export * from "./Slider";
-
-export { default as HvTable } from "./Table";
-export * from "./Table";
-
 export { default as HvTimeAgo } from "./TimeAgo";
 export * from "./TimeAgo";
-
-export { default as HvTimePicker } from "./TimePicker";
-export * from "./TimePicker";
-
-export { default as HvTag } from "./Tag";
-export * from "./Tag";
-
-export { default as HvDrawer } from "./Drawer";
-export * from "./Drawer";
-
-export { default as HvColorPicker } from "./ColorPicker";
-export * from "./ColorPicker";
-
-export { default as HvQueryBuilder } from "./QueryBuilder";
-export * from "./QueryBuilder";
-
-export { default as HvInlineEditor } from "./InlineEditor";
-export * from "./InlineEditor";
-
-export { default as HvProgressBar } from "./ProgressBar";
-export * from "./ProgressBar";
-
-export { default as HvDotPagination } from "./DotPagination";
-export * from "./DotPagination";
-
-export { default as HvControls } from "./Controls";
-export * from "./Controls";

package/dist/index.js

@@ -24,59 +24,25 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
-  HvAppSwitcherPanel: true,
-  HvFormComposer: true,
-  HvNavigationAnchors: true,
-  HvNotificationPanel: true,
-  HvSlider: true,
-  HvTable: true,
-  HvTimeAgo: true,
-  HvTimePicker: true,
-  HvTag: true,
-  HvDrawer: true,
   HvColorPicker: true,
-  HvQueryBuilder: true,
-  HvControls: true,
+  HvDrawer: true,
   HvInlineEditor: true,
-  HvProgressBar: true,
-  HvDotPagination: true
+  HvNavigationAnchors: true,
+  HvNotificationPanel: true,
+  HvTimeAgo: 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, "HvInlineEditor", {
   enumerable: true,
   get: function get() {
@@ -95,85 +61,23 @@ 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, "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) {
@@ -188,48 +92,6 @@ 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"));
-
 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\";\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"}
+{"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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEA;;AAEA;;AAEA;;AAEA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

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 = {