@hitachivantara/uikit-react-lab 3.38.0

package/dist/ColorPicker/Picker/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _Picker.default;
+  }
+});
+
+var _Picker = _interopRequireDefault(require("./Picker"));
+//# sourceMappingURL=index.js.map

package/dist/ColorPicker/Picker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ColorPicker/Picker/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA","sourcesContent":["export { default } from \"./Picker\";\n"],"file":"index.js"}

package/dist/ColorPicker/Picker/styles.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _core = require("@material-ui/core");
+
+var styles = (0, _core.makeStyles)(function () {
+  return {
+    pickers: {
+      display: "flex"
+    },
+    saturation: {
+      width: 180,
+      height: 180,
+      marginRight: 5,
+      position: "relative",
+      overflow: "visible"
+    },
+    saturationPointer: {
+      width: "6px",
+      height: "6px",
+      boxShadow: "0 0 0 2px #fff, inset 0 0 1px 1px rgba(0,0,0,.3),\n            0 0 1px 2px rgba(0,0,0,.4)",
+      borderRadius: "50%",
+      transform: "translate(-3px, -3px)"
+    },
+    sliders: {
+      padding: "4px 0",
+      flex: "1"
+    },
+    hue: {
+      width: 15,
+      position: "relative",
+      overflow: "visible"
+    },
+    hueSlider: {
+      width: 12,
+      height: 6,
+      background: "#fff",
+      boxShadow: "0 0 2px rgb(0 0 0 / 60%)",
+      marginLeft: 1,
+      borderRadius: "1px",
+      transform: "translate(0, -2px)"
+    },
+    double: {
+      flex: "2"
+    }
+  };
+});
+var _default = styles;
+exports.default = _default;
+//# sourceMappingURL=styles.js.map

package/dist/ColorPicker/Picker/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ColorPicker/Picker/styles.js"],"names":["styles","pickers","display","saturation","width","height","marginRight","position","overflow","saturationPointer","boxShadow","borderRadius","transform","sliders","padding","flex","hue","hueSlider","background","marginLeft","double"],"mappings":";;;;;;;AAAA;;AAEA,IAAMA,MAAM,GAAG,sBAAW;AAAA,SAAO;AAC/BC,IAAAA,OAAO,EAAE;AACPC,MAAAA,OAAO,EAAE;AADF,KADsB;AAI/BC,IAAAA,UAAU,EAAE;AACVC,MAAAA,KAAK,EAAE,GADG;AAEVC,MAAAA,MAAM,EAAE,GAFE;AAGVC,MAAAA,WAAW,EAAE,CAHH;AAIVC,MAAAA,QAAQ,EAAE,UAJA;AAKVC,MAAAA,QAAQ,EAAE;AALA,KAJmB;AAW/BC,IAAAA,iBAAiB,EAAE;AACjBL,MAAAA,KAAK,EAAE,KADU;AAEjBC,MAAAA,MAAM,EAAE,KAFS;AAGjBK,MAAAA,SAAS,6FAHQ;AAKjBC,MAAAA,YAAY,EAAE,KALG;AAMjBC,MAAAA,SAAS,EAAE;AANM,KAXY;AAmB/BC,IAAAA,OAAO,EAAE;AACPC,MAAAA,OAAO,EAAE,OADF;AAEPC,MAAAA,IAAI,EAAE;AAFC,KAnBsB;AAuB/BC,IAAAA,GAAG,EAAE;AACHZ,MAAAA,KAAK,EAAE,EADJ;AAEHG,MAAAA,QAAQ,EAAE,UAFP;AAGHC,MAAAA,QAAQ,EAAE;AAHP,KAvB0B;AA4B/BS,IAAAA,SAAS,EAAE;AACTb,MAAAA,KAAK,EAAE,EADE;AAETC,MAAAA,MAAM,EAAE,CAFC;AAGTa,MAAAA,UAAU,EAAE,MAHH;AAITR,MAAAA,SAAS,EAAE,0BAJF;AAKTS,MAAAA,UAAU,EAAE,CALH;AAMTR,MAAAA,YAAY,EAAE,KANL;AAOTC,MAAAA,SAAS,EAAE;AAPF,KA5BoB;AAqC/BQ,IAAAA,MAAM,EAAE;AACNL,MAAAA,IAAI,EAAE;AADA;AArCuB,GAAP;AAAA,CAAX,CAAf;eA0Cef,M","sourcesContent":["import { makeStyles } from \"@material-ui/core\";\n\nconst styles = makeStyles(() => ({\n  pickers: {\n    display: \"flex\",\n  },\n  saturation: {\n    width: 180,\n    height: 180,\n    marginRight: 5,\n    position: \"relative\",\n    overflow: \"visible\",\n  },\n  saturationPointer: {\n    width: \"6px\",\n    height: \"6px\",\n    boxShadow: `0 0 0 2px #fff, inset 0 0 1px 1px rgba(0,0,0,.3),\n            0 0 1px 2px rgba(0,0,0,.4)`,\n    borderRadius: \"50%\",\n    transform: \"translate(-3px, -3px)\",\n  },\n  sliders: {\n    padding: \"4px 0\",\n    flex: \"1\",\n  },\n  hue: {\n    width: 15,\n    position: \"relative\",\n    overflow: \"visible\",\n  },\n  hueSlider: {\n    width: 12,\n    height: 6,\n    background: \"#fff\",\n    boxShadow: \"0 0 2px rgb(0 0 0 / 60%)\",\n    marginLeft: 1,\n    borderRadius: \"1px\",\n    transform: \"translate(0, -2px)\",\n  },\n  double: {\n    flex: \"2\",\n  },\n}));\n\nexport default styles;\n"],"file":"styles.js"}

package/dist/ColorPicker/PresetColors/PresetColors.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SketchPresetColors = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+require("core-js/modules/es.array.map.js");
+
+require("core-js/modules/es.array.concat.js");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _common = require("react-color/lib/components/common");
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+var SketchPresetColors = function SketchPresetColors(_ref) {
+  var colors = _ref.colors,
+      _ref$onClick = _ref.onClick,
+      onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick;
+  var classes = (0, _styles.default)();
+
+  var handleClick = function handleClick(hex, e) {
+    onClick({
+      hex: hex,
+      source: "hex"
+    }, e);
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.colors
+  }, colors.map(function (colorObjOrString) {
+    var c = typeof colorObjOrString === "string" ? {
+      color: colorObjOrString
+    } : colorObjOrString;
+    var key = "".concat(c.color).concat(c.title || "");
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: key,
+      className: classes.swatchWrap
+    }, /*#__PURE__*/_react.default.createElement(_common.Swatch, (0, _extends2.default)({}, c, {
+      className: classes.swatch,
+      onClick: handleClick,
+      focusStyle: {
+        boxShadow: "inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ".concat(c.color)
+      }
+    })));
+  }));
+};
+
+exports.SketchPresetColors = SketchPresetColors;
+SketchPresetColors.propTypes = {
+  colors: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.shape({
+    color: _propTypes.default.string,
+    title: _propTypes.default.string
+  })])).isRequired,
+  onClick: _propTypes.default.func.isRequired
+};
+var _default = SketchPresetColors;
+exports.default = _default;
+//# sourceMappingURL=PresetColors.js.map

package/dist/ColorPicker/PresetColors/PresetColors.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ColorPicker/PresetColors/PresetColors.js"],"names":["SketchPresetColors","colors","onClick","classes","handleClick","hex","e","source","map","colorObjOrString","c","color","key","title","swatchWrap","swatch","boxShadow","propTypes","PropTypes","arrayOf","oneOfType","string","shape","isRequired","func"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AAEA;;AAEA;;AAEO,IAAMA,kBAAkB,GAAG,SAArBA,kBAAqB,OAAoC;AAAA,MAAjCC,MAAiC,QAAjCA,MAAiC;AAAA,0BAAzBC,OAAyB;AAAA,MAAzBA,OAAyB,6BAAf,YAAM,CAAE,CAAO;AACpE,MAAMC,OAAO,GAAG,sBAAhB;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc,CAACC,GAAD,EAAMC,CAAN,EAAY;AAC9BJ,IAAAA,OAAO,CACL;AACEG,MAAAA,GAAG,EAAHA,GADF;AAEEE,MAAAA,MAAM,EAAE;AAFV,KADK,EAKLD,CALK,CAAP;AAOD,GARD;;AAUA,sBACE;AAAK,IAAA,SAAS,EAAEH,OAAO,CAACF;AAAxB,KACGA,MAAM,CAACO,GAAP,CAAW,UAACC,gBAAD,EAAsB;AAChC,QAAMC,CAAC,GACL,OAAOD,gBAAP,KAA4B,QAA5B,GAAuC;AAAEE,MAAAA,KAAK,EAAEF;AAAT,KAAvC,GAAqEA,gBADvE;AAEA,QAAMG,GAAG,aAAMF,CAAC,CAACC,KAAR,SAAgBD,CAAC,CAACG,KAAF,IAAW,EAA3B,CAAT;AACA,wBACE;AAAK,MAAA,GAAG,EAAED,GAAV;AAAe,MAAA,SAAS,EAAET,OAAO,CAACW;AAAlC,oBACE,6BAAC,cAAD,6BACMJ,CADN;AAEE,MAAA,SAAS,EAAEP,OAAO,CAACY,MAFrB;AAGE,MAAA,OAAO,EAAEX,WAHX;AAIE,MAAA,UAAU,EAAE;AACVY,QAAAA,SAAS,qDAA8CN,CAAC,CAACC,KAAhD;AADC;AAJd,OADF,CADF;AAYD,GAhBA,CADH,CADF;AAqBD,CAlCM;;;AAoCPX,kBAAkB,CAACiB,SAAnB,GAA+B;AAC7BhB,EAAAA,MAAM,EAAEiB,mBAAUC,OAAV,CACND,mBAAUE,SAAV,CAAoB,CAClBF,mBAAUG,MADQ,EAElBH,mBAAUI,KAAV,CAAgB;AACdX,IAAAA,KAAK,EAAEO,mBAAUG,MADH;AAEdR,IAAAA,KAAK,EAAEK,mBAAUG;AAFH,GAAhB,CAFkB,CAApB,CADM,EAQNE,UAT2B;AAU7BrB,EAAAA,OAAO,EAAEgB,mBAAUM,IAAV,CAAeD;AAVK,CAA/B;eAaevB,kB","sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nimport { Swatch } from \"react-color/lib/components/common\";\n\nimport useStyles from \"./styles\";\n\nexport const SketchPresetColors = ({ colors, onClick = () => {} }) => {\n  const classes = useStyles();\n\n  const handleClick = (hex, e) => {\n    onClick(\n      {\n        hex,\n        source: \"hex\",\n      },\n      e\n    );\n  };\n\n  return (\n    <div className={classes.colors}>\n      {colors.map((colorObjOrString) => {\n        const c =\n          typeof colorObjOrString === \"string\" ? { color: colorObjOrString } : colorObjOrString;\n        const key = `${c.color}${c.title || \"\"}`;\n        return (\n          <div key={key} className={classes.swatchWrap}>\n            <Swatch\n              {...c}\n              className={classes.swatch}\n              onClick={handleClick}\n              focusStyle={{\n                boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${c.color}`,\n              }}\n            />\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n\nSketchPresetColors.propTypes = {\n  colors: PropTypes.arrayOf(\n    PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.shape({\n        color: PropTypes.string,\n        title: PropTypes.string,\n      }),\n    ])\n  ).isRequired,\n  onClick: PropTypes.func.isRequired,\n};\n\nexport default SketchPresetColors;\n"],"file":"PresetColors.js"}

package/dist/ColorPicker/PresetColors/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _PresetColors.default;
+  }
+});
+
+var _PresetColors = _interopRequireDefault(require("./PresetColors"));
+//# sourceMappingURL=index.js.map

package/dist/ColorPicker/PresetColors/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ColorPicker/PresetColors/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA","sourcesContent":["export { default } from \"./PresetColors\";\n"],"file":"index.js"}

package/dist/ColorPicker/PresetColors/styles.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _core = require("@material-ui/core");
+
+var styles = (0, _core.makeStyles)(function () {
+  return {
+    colors: {
+      display: "flex",
+      flexWrap: "wrap",
+      position: "relative",
+      width: "calc(100% + 5px)",
+      margin: "-5px -3px",
+      padding: 0
+    },
+    swatchWrap: {
+      width: "16px",
+      height: "16px",
+      margin: 5
+    },
+    swatch: {
+      borderRadius: "3px",
+      boxShadow: "inset 0 0 0 1px rgba(0,0,0,.15)"
+    }
+  };
+});
+var _default = styles;
+exports.default = _default;
+//# sourceMappingURL=styles.js.map

package/dist/ColorPicker/PresetColors/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ColorPicker/PresetColors/styles.js"],"names":["styles","colors","display","flexWrap","position","width","margin","padding","swatchWrap","height","swatch","borderRadius","boxShadow"],"mappings":";;;;;;;AAAA;;AAEA,IAAMA,MAAM,GAAG,sBAAW;AAAA,SAAO;AAC/BC,IAAAA,MAAM,EAAE;AACNC,MAAAA,OAAO,EAAE,MADH;AAENC,MAAAA,QAAQ,EAAE,MAFJ;AAGNC,MAAAA,QAAQ,EAAE,UAHJ;AAINC,MAAAA,KAAK,EAAE,kBAJD;AAKNC,MAAAA,MAAM,EAAE,WALF;AAMNC,MAAAA,OAAO,EAAE;AANH,KADuB;AAS/BC,IAAAA,UAAU,EAAE;AACVH,MAAAA,KAAK,EAAE,MADG;AAEVI,MAAAA,MAAM,EAAE,MAFE;AAGVH,MAAAA,MAAM,EAAE;AAHE,KATmB;AAc/BI,IAAAA,MAAM,EAAE;AACNC,MAAAA,YAAY,EAAE,KADR;AAENC,MAAAA,SAAS,EAAE;AAFL;AAduB,GAAP;AAAA,CAAX,CAAf;eAoBeZ,M","sourcesContent":["import { makeStyles } from \"@material-ui/core\";\n\nconst styles = makeStyles(() => ({\n  colors: {\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    position: \"relative\",\n    width: \"calc(100% + 5px)\",\n    margin: \"-5px -3px\",\n    padding: 0,\n  },\n  swatchWrap: {\n    width: \"16px\",\n    height: \"16px\",\n    margin: 5,\n  },\n  swatch: {\n    borderRadius: \"3px\",\n    boxShadow: \"inset 0 0 0 1px rgba(0,0,0,.15)\",\n  },\n}));\n\nexport default styles;\n"],"file":"styles.js"}

package/dist/ColorPicker/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./ColorPicker";
+export * from "./ColorPicker";

package/dist/ColorPicker/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _ColorPicker.default;
+  }
+});
+
+var _ColorPicker = _interopRequireDefault(require("./ColorPicker"));
+//# sourceMappingURL=index.js.map

package/dist/ColorPicker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ColorPicker/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA","sourcesContent":["export { default } from \"./ColorPicker\";\n"],"file":"index.js"}

package/dist/ColorPicker/styles.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var styles = function styles() {
+  return {
+    headerColorValue: {
+      textTransform: "uppercase"
+    },
+    headerColorIcon: {
+      width: 24,
+      "& svg": {
+        marginLeft: 0
+      }
+    },
+    panel: {
+      width: "100%",
+      minWidth: 240,
+      display: "flex",
+      justifyContent: "center",
+      padding: "20px 15px 20px 20px"
+    },
+    colorPicker: {
+      width: 205
+    },
+    presetColors: {
+      borderTop: "none !important"
+    },
+    labelContainer: {
+      display: "flex",
+      alignItems: "flex-start"
+    },
+    label: {
+      paddingBottom: "6px",
+      display: "block"
+    },
+    description: {}
+  };
+};
+
+var _default = styles;
+exports.default = _default;
+//# sourceMappingURL=styles.js.map

package/dist/ColorPicker/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ColorPicker/styles.js"],"names":["styles","headerColorValue","textTransform","headerColorIcon","width","marginLeft","panel","minWidth","display","justifyContent","padding","colorPicker","presetColors","borderTop","labelContainer","alignItems","label","paddingBottom","description"],"mappings":";;;;;;;AAAA,IAAMA,MAAM,GAAG,SAATA,MAAS;AAAA,SAAO;AACpBC,IAAAA,gBAAgB,EAAE;AAChBC,MAAAA,aAAa,EAAE;AADC,KADE;AAIpBC,IAAAA,eAAe,EAAE;AACfC,MAAAA,KAAK,EAAE,EADQ;AAEf,eAAS;AACPC,QAAAA,UAAU,EAAE;AADL;AAFM,KAJG;AAUpBC,IAAAA,KAAK,EAAE;AACLF,MAAAA,KAAK,EAAE,MADF;AAELG,MAAAA,QAAQ,EAAE,GAFL;AAGLC,MAAAA,OAAO,EAAE,MAHJ;AAILC,MAAAA,cAAc,EAAE,QAJX;AAKLC,MAAAA,OAAO,EAAE;AALJ,KAVa;AAiBpBC,IAAAA,WAAW,EAAE;AACXP,MAAAA,KAAK,EAAE;AADI,KAjBO;AAoBpBQ,IAAAA,YAAY,EAAE;AACZC,MAAAA,SAAS,EAAE;AADC,KApBM;AAuBpBC,IAAAA,cAAc,EAAE;AACdN,MAAAA,OAAO,EAAE,MADK;AAEdO,MAAAA,UAAU,EAAE;AAFE,KAvBI;AA2BpBC,IAAAA,KAAK,EAAE;AACLC,MAAAA,aAAa,EAAE,KADV;AAELT,MAAAA,OAAO,EAAE;AAFJ,KA3Ba;AA+BpBU,IAAAA,WAAW,EAAE;AA/BO,GAAP;AAAA,CAAf;;eAkCelB,M","sourcesContent":["const styles = () => ({\n  headerColorValue: {\n    textTransform: \"uppercase\",\n  },\n  headerColorIcon: {\n    width: 24,\n    \"& svg\": {\n      marginLeft: 0,\n    },\n  },\n  panel: {\n    width: \"100%\",\n    minWidth: 240,\n    display: \"flex\",\n    justifyContent: \"center\",\n    padding: \"20px 15px 20px 20px\",\n  },\n  colorPicker: {\n    width: 205,\n  },\n  presetColors: {\n    borderTop: \"none !important\",\n  },\n  labelContainer: {\n    display: \"flex\",\n    alignItems: \"flex-start\",\n  },\n  label: {\n    paddingBottom: \"6px\",\n    display: \"block\",\n  },\n  description: {},\n});\n\nexport default styles;\n"],"file":"styles.js"}

package/dist/Drawer/Drawer.d.ts

@@ -0,0 +1,13 @@
+import { DrawerProps, StandardProps } from "@material-ui/core";
+
+
+export type HvDrawerClassKey = "root" | "background" | "paper" | "closeButton";
+
+export interface HvDrawerProps extends StandardProps<DrawerProps, HvDrawerClassKey> {
+    /**
+   * Title for the button close.
+   */
+     buttonTitle?: string;
+}
+
+export default function HvDrawer(props: HvDrawerProps): JSX.Element | null;

package/dist/Drawer/Drawer.js

@@ -0,0 +1,155 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("core-js/modules/es.string.anchor.js");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _core = require("@material-ui/core");
+
+var _uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+
+var _uikitReactCore = require("@hitachivantara/uikit-react-core");
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+var _excluded = ["className", "classes", "id", "children", "open", "onClose", "anchor", "buttonTitle"];
+
+/**
+ * The Drawer component provides a foundation to create a sliding pane.
+ * It only provides the pane with a close button, the rest of the
+ * content can be customized.
+ */
+var HvDrawer = function HvDrawer(_ref) {
+  var className = _ref.className,
+      classes = _ref.classes,
+      id = _ref.id,
+      children = _ref.children,
+      open = _ref.open,
+      _onClose = _ref.onClose,
+      _ref$anchor = _ref.anchor,
+      anchor = _ref$anchor === void 0 ? "right" : _ref$anchor,
+      _ref$buttonTitle = _ref.buttonTitle,
+      buttonTitle = _ref$buttonTitle === void 0 ? "Close" : _ref$buttonTitle,
+      others = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var closeButtonDisplay = function closeButtonDisplay() {
+    return /*#__PURE__*/_react.default.createElement(_uikitReactIcons.Close, {
+      role: "presentation"
+    });
+  };
+
+  var CloseButtonTooltipWrapper = buttonTitle ? (0, _uikitReactCore.withTooltip)(closeButtonDisplay, buttonTitle, "top") : closeButtonDisplay;
+  return /*#__PURE__*/_react.default.createElement(_core.Drawer, (0, _extends2.default)({
+    className: (0, _clsx.default)(classes.root, className),
+    id: id,
+    anchor: anchor,
+    open: open,
+    PaperProps: {
+      classes: {
+        root: classes.paper
+      }
+    },
+    BackdropProps: {
+      classes: {
+        root: classes.background
+      }
+    },
+    onClose: function onClose(event, reason) {
+      return _onClose(event, reason);
+    }
+  }, others), /*#__PURE__*/_react.default.createElement(_uikitReactCore.HvButton, {
+    id: (0, _uikitReactCore.setId)(id, "close"),
+    className: classes.closeButton,
+    category: "ghost",
+    onClick: _onClose,
+    "aria-label": buttonTitle
+  }, /*#__PURE__*/_react.default.createElement(CloseButtonTooltipWrapper, null)), children);
+};
+
+HvDrawer.propTypes = {
+  /**
+   * Class names to be applied.
+   */
+  className: _propTypes.default.string,
+
+  /**
+   * Id to be applied to the root node.
+   */
+  id: _propTypes.default.string,
+
+  /**
+   * A Jss Object used to override or extend the styles applied.
+   */
+  classes: _propTypes.default.shape({
+    /**
+     * Style applied to the root of the component.
+     */
+    root: _propTypes.default.string,
+
+    /**
+     * Style applied to the background (outside) of the component.
+     */
+    background: _propTypes.default.string,
+
+    /**
+     * Style applied to the component (root).
+     */
+    paper: _propTypes.default.string,
+
+    /**
+     * Style applied to the close button.
+     */
+    closeButton: _propTypes.default.string
+  }).isRequired,
+
+  /**
+   * Components of the Drawer.
+   */
+  children: _propTypes.default.node.isRequired,
+
+  /**
+   * Current state of the Drawer.
+   */
+  open: _propTypes.default.bool.isRequired,
+
+  /**
+   * Function executed on close.
+   * Extended from Modal from material-ui
+   *
+   * @param {object} event The event source of the callback.
+   * @param {string} reason Can be: `"escapeKeyDown"`, `"backdropClick"`.
+   */
+  onClose: _propTypes.default.func.isRequired,
+
+  /**
+   * The side the drawer opens from.
+   */
+  anchor: _propTypes.default.oneOf(["left", "top", "right", "bottom"]),
+
+  /**
+   * Title for the button close.
+   */
+  buttonTitle: _propTypes.default.string
+};
+
+var _default = (0, _core.withStyles)(_styles.default, {
+  name: "HvDrawer"
+})(HvDrawer);
+
+exports.default = _default;
+//# sourceMappingURL=Drawer.js.map

package/dist/Drawer/Drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Drawer/Drawer.js"],"names":["HvDrawer","className","classes","id","children","open","onClose","anchor","buttonTitle","others","closeButtonDisplay","CloseButtonTooltipWrapper","root","paper","background","event","reason","closeButton","propTypes","PropTypes","string","shape","isRequired","node","bool","func","oneOf","styles","name"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport clsx from \"clsx\";\nimport PropTypes from \"prop-types\";\nimport { Drawer, withStyles } from \"@material-ui/core\";\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\nimport { HvButton, withTooltip, setId } from \"@hitachivantara/uikit-react-core\";\nimport styles from \"./styles\";\n\n/**\n * The Drawer component provides a foundation to create a sliding pane.\n * It only provides the pane with a close button, the rest of the\n * content can be customized.\n */\nconst HvDrawer = ({\n  className,\n  classes,\n  id,\n  children,\n  open,\n  onClose,\n  anchor = \"right\",\n  buttonTitle = \"Close\",\n  ...others\n}) => {\n  const closeButtonDisplay = () => <Close role=\"presentation\" />;\n\n  const CloseButtonTooltipWrapper = buttonTitle\n    ? withTooltip(closeButtonDisplay, buttonTitle, \"top\")\n    : closeButtonDisplay;\n\n  return (\n    <Drawer\n      className={clsx(classes.root, className)}\n      id={id}\n      anchor={anchor}\n      open={open}\n      PaperProps={{\n        classes: {\n          root: classes.paper,\n        },\n      }}\n      BackdropProps={{\n        classes: {\n          root: classes.background,\n        },\n      }}\n      onClose={(event, reason) => onClose(event, reason)}\n      {...others}\n    >\n      <HvButton\n        id={setId(id, \"close\")}\n        className={classes.closeButton}\n        category=\"ghost\"\n        onClick={onClose}\n        aria-label={buttonTitle}\n      >\n        <CloseButtonTooltipWrapper />\n      </HvButton>\n      {children}\n    </Drawer>\n  );\n};\n\nHvDrawer.propTypes = {\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * Id to be applied to the root node.\n   */\n  id: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Style applied to the root of the component.\n     */\n    root: PropTypes.string,\n    /**\n     * Style applied to the background (outside) of the component.\n     */\n    background: PropTypes.string,\n    /**\n     * Style applied to the component (root).\n     */\n    paper: PropTypes.string,\n    /**\n     * Style applied to the close button.\n     */\n    closeButton: PropTypes.string,\n  }).isRequired,\n  /**\n   * Components of the Drawer.\n   */\n  children: PropTypes.node.isRequired,\n  /**\n   * Current state of the Drawer.\n   */\n  open: PropTypes.bool.isRequired,\n  /**\n   * Function executed on close.\n   * Extended from Modal from material-ui\n   *\n   * @param {object} event The event source of the callback.\n   * @param {string} reason Can be: `\"escapeKeyDown\"`, `\"backdropClick\"`.\n   */\n  onClose: PropTypes.func.isRequired,\n  /**\n   * The side the drawer opens from.\n   */\n  anchor: PropTypes.oneOf([\"left\", \"top\", \"right\", \"bottom\"]),\n  /**\n   * Title for the button close.\n   */\n  buttonTitle: PropTypes.string,\n};\n\nexport default withStyles(styles, { name: \"HvDrawer\" })(HvDrawer);\n"],"file":"Drawer.js"}

package/dist/Drawer/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Drawer";
+export * from "./Drawer";

package/dist/Drawer/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _Drawer.default;
+  }
+});
+
+var _Drawer = _interopRequireDefault(require("./Drawer"));
+//# sourceMappingURL=index.js.map

package/dist/Drawer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Drawer/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA","sourcesContent":["export { default } from \"./Drawer\";\n"],"file":"index.js"}

package/dist/Drawer/styles.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _core = require("@material-ui/core");
+
+var _styles = require("@material-ui/core/styles");
+
+var styles = function styles(theme) {
+  return {
+    background: {
+      background: (0, _styles.alpha)((0, _core.hexToRgb)(theme.hv.palette.atmosphere.atmo4), 0.8)
+    },
+    paper: {
+      background: "".concat(theme.hv.palette.atmosphere.atmo1),
+      padding: "0px",
+      overflow: "auto",
+      boxShadow: theme.hv.shadows[1]
+    },
+    closeButton: {
+      padding: 0,
+      minWidth: "inherit",
+      position: "absolute",
+      top: theme.hvSpacing("sm"),
+      right: theme.hvSpacing("sm")
+    }
+  };
+};
+
+var _default = styles;
+exports.default = _default;
+//# sourceMappingURL=styles.js.map

package/dist/Drawer/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Drawer/styles.js"],"names":["styles","theme","background","hv","palette","atmosphere","atmo4","paper","atmo1","padding","overflow","boxShadow","shadows","closeButton","minWidth","position","top","hvSpacing","right"],"mappings":";;;;;;;AAAA;;AACA;;AAEA,IAAMA,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD;AAAA,SAAY;AACzBC,IAAAA,UAAU,EAAE;AACVA,MAAAA,UAAU,EAAE,mBAAM,oBAASD,KAAK,CAACE,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BC,KAArC,CAAN,EAAmD,GAAnD;AADF,KADa;AAIzBC,IAAAA,KAAK,EAAE;AACLL,MAAAA,UAAU,YAAKD,KAAK,CAACE,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BG,KAAjC,CADL;AAELC,MAAAA,OAAO,EAAE,KAFJ;AAGLC,MAAAA,QAAQ,EAAE,MAHL;AAILC,MAAAA,SAAS,EAAEV,KAAK,CAACE,EAAN,CAASS,OAAT,CAAiB,CAAjB;AAJN,KAJkB;AAUzBC,IAAAA,WAAW,EAAE;AACXJ,MAAAA,OAAO,EAAE,CADE;AAEXK,MAAAA,QAAQ,EAAE,SAFC;AAGXC,MAAAA,QAAQ,EAAE,UAHC;AAIXC,MAAAA,GAAG,EAAEf,KAAK,CAACgB,SAAN,CAAgB,IAAhB,CAJM;AAKXC,MAAAA,KAAK,EAAEjB,KAAK,CAACgB,SAAN,CAAgB,IAAhB;AALI;AAVY,GAAZ;AAAA,CAAf;;eAmBejB,M","sourcesContent":["import { hexToRgb } from \"@material-ui/core\";\nimport { alpha } from \"@material-ui/core/styles\";\n\nconst styles = (theme) => ({\n  background: {\n    background: alpha(hexToRgb(theme.hv.palette.atmosphere.atmo4), 0.8),\n  },\n  paper: {\n    background: `${theme.hv.palette.atmosphere.atmo1}`,\n    padding: \"0px\",\n    overflow: \"auto\",\n    boxShadow: theme.hv.shadows[1],\n  },\n  closeButton: {\n    padding: 0,\n    minWidth: \"inherit\",\n    position: \"absolute\",\n    top: theme.hvSpacing(\"sm\"),\n    right: theme.hvSpacing(\"sm\"),\n  },\n});\n\nexport default styles;\n"],"file":"styles.js"}

package/dist/FormComposer/FormComposer.d.ts

@@ -0,0 +1,41 @@
+import * as React from "react";
+import { StandardProps } from "@material-ui/core";
+
+interface FormGroup {
+  title: string;
+  children: React.ReactNode;
+}
+
+export type HvFormComposerClassKey =
+  | "root"
+  | "title"
+  | "mainContainer"
+  | "navContainer"
+  | "componentContainer"
+  | "footer";
+
+export interface HvFormComposerProps
+  extends StandardProps<React.HTMLAttributes<HTMLDivElement>, HvFormComposerClassKey> {
+  /**
+   * Main title to be displayed.
+   */
+  mainTitle?: string;
+  /**
+   * The group of component that will be added to the Form composer.
+   */
+  groups: FormGroup[];
+  /**
+   * Shows navigation bar.
+   */
+  hasNavigation?: boolean;
+  /**
+   * Shows footer.
+   */
+  hasFooter?: boolean;
+  /**
+   * Content to be shown on the footer.
+   */
+  footerContent?: React.ReactNode;
+}
+
+export default function HvFormComposer(props: HvFormComposerProps): JSX.Element | null;