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

package/dist/modern/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","isOpen","setIsOpen","Boolean","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":";AAAA,OAAOA,KAAP,IAAgBC,OAAhB,QAA+B,OAA/B;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,IAAP,MAAiB,MAAjB;AAEA,SAASC,UAAT,EAAqBC,QAArB,QAAqC,mBAArC;AACA,SACEC,OADF,EAEEC,OAFF,EAGEC,aAHF,EAIEC,aAJF,EAKEC,cALF,EAMEC,aANF,EAOEC,YAPF,EAQEC,WARF,EASEC,KATF,QAUO,kCAVP;AAWA,SAASC,QAAT,QAAyB,mCAAzB;AAEA,OAAOC,MAAP,MAAmB,UAAnB;AACA,OAAOC,MAAP,MAAmB,UAAnB;AACA,OAAOC,YAAP,MAAyB,gBAAzB;AAEA;AACA;AACA;AACA;;AACA,MAAMC,aAAa,GAAIC,KAAD,IAAW;EAC/B,MAAMC,KAAK,GAAGhB,QAAQ,EAAtB;EACA,MAAM;IACJiB,EADI;IAEJC,IAFI;IAIJC,QAAQ,GAAG,KAJP;IAKJC,QAAQ,GAAG,KALP;IAOJC,KAPI;IAQJ,cAAcC,SARV;IASJ,mBAAmBC,cATf;IAUJC,WAVI;IAWJ,oBAAoBC,eAXhB;IAYJC,SAZI;IAaJC,OAbI;IAcJC,KAdI;IAeJC,QAfI;IAgBJC,YAAY,GAAGd,KAAK,CAACe,EAAN,CAASC,OAAT,CAAiBC,MAAjB,CAAwBC,KAhBnC;IAkBJC,QAlBI;IAmBJC,eAAe,GAAG;EAnBd,IAoBFrB,KApBJ;EAsBA,MAAM,CAACsB,MAAD,EAASC,SAAT,IAAsBhC,aAAa,CAAC6B,QAAD,EAAWI,OAAO,CAACH,eAAD,CAAlB,CAAzC;EACA,MAAM,CAACI,KAAD,EAAQC,QAAR,IAAoBnC,aAAa,CAACsB,KAAD,EAAQE,YAAR,CAAvC;;EAEA,MAAMY,YAAY,GAAG,CAACC,IAAD,EAAOC,CAAP,KAAa;IAChCN,SAAS,CAACM,CAAD,CAAT;EACD,CAFD;;EAIA,MAAMC,YAAY,GAAIC,GAAD,IAAS;IAC5BjB,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAGiB,GAAG,CAACC,GAAP,CAAR;IACAN,QAAQ,CAACK,GAAG,CAACC,GAAL,CAAR;EACD,CAHD;;EAKA,MAAMC,SAAS,GAAGxC,WAAW,CAACS,EAAD,EAAK,YAAL,CAA7B;EAEA,MAAMgC,QAAQ,GAAG5B,KAAK,IAAI,IAA1B;EACA,MAAM6B,cAAc,GAAG1B,WAAW,IAAI,IAAtC;EAEA,MAAM2B,UAAU,GAAGvD,OAAO,CACxB,MAAM,CACJoB,KAAK,CAACe,EAAN,CAASC,OAAT,CAAiBoB,QAAjB,CAA0BC,KADtB,EAEJrC,KAAK,CAACe,EAAN,CAASC,OAAT,CAAiBoB,QAAjB,CAA0BE,KAFtB,EAGJ,SAHI,EAIJ,SAJI,EAKJtC,KAAK,CAACe,EAAN,CAASC,OAAT,CAAiBoB,QAAjB,CAA0BG,KALtB,EAMJvC,KAAK,CAACe,EAAN,CAASC,OAAT,CAAiBoB,QAAjB,CAA0BI,MANtB,EAOJ,SAPI,EAQJ,SARI,EASJxC,KAAK,CAACe,EAAN,CAASC,OAAT,CAAiBC,MAAjB,CAAwBwB,MATpB,EAUJ,SAVI,EAWJ,SAXI,EAYJ,SAZI,EAaJzC,KAAK,CAACe,EAAN,CAASC,OAAT,CAAiBoB,QAAjB,CAA0BM,KAbtB,EAcJ,SAdI,EAeJ1C,KAAK,CAACe,EAAN,CAASC,OAAT,CAAiB2B,UAAjB,CAA4BC,KAfxB,EAgBJ5C,KAAK,CAACe,EAAN,CAASC,OAAT,CAAiBC,MAAjB,CAAwBC,KAhBpB,CADkB,EAmBxB,CAAClB,KAAD,CAnBwB,CAA1B;;EAsBA,MAAM6C,iBAAiB,GAAIC,YAAD,IAAkB;IAC1C,MAAMC,MAAM,GAAGD,YAAH,aAAGA,YAAH,uBAAGA,YAAY,CAAEE,oBAAd,CAAmC,OAAnC,CAAf;;IACA,IAAI,CAAAD,MAAM,SAAN,IAAAA,MAAM,WAAN,YAAAA,MAAM,CAAEE,MAAR,IAAiB,CAArB,EAAwB;MACtBF,MAAM,CAAC,CAAD,CAAN,CAAUG,KAAV;IACD;EACF,CALD;;EAOA,oBACE,oBAAC,aAAD;IACE,EAAE,EAAEjD,EADN;IAEE,IAAI,EAAEC,IAFR;IAGE,QAAQ,EAAEE,QAHZ;IAIE,QAAQ,EAAED,QAJZ;IAKE,SAAS,EAAErB,IAAI,CAAC4B,SAAD,EAAYC,OAAO,CAACwC,IAApB;EALjB,GAOG,CAAClB,QAAQ,IAAIC,cAAb,kBACC;IAAK,SAAS,EAAEvB,OAAO,CAACyC;EAAxB,GACGnB,QAAQ,iBACP,oBAAC,OAAD;IAAS,EAAE,EAAExC,KAAK,CAACuC,SAAD,EAAY,OAAZ,CAAlB;IAAwC,KAAK,EAAE3B,KAA/C;IAAsD,SAAS,EAAEM,OAAO,CAACN;EAAzE,EAFJ,EAKG6B,cAAc,iBACb,oBAAC,aAAD;IAAe,EAAE,EAAEzC,KAAK,CAACuC,SAAD,EAAY,aAAZ,CAAxB;IAAoD,SAAS,EAAErB,OAAO,CAACH;EAAvE,GACGA,WADH,CANJ,CARJ,eAoBE,oBAAC,cAAD;IACE,SAAS,EAAEE,SADb;IAEE,QAAQ,EAAEW,MAFZ;IAGE,QAAQ,EAAEK,YAHZ;IAIE,mBAAmB,EAAEmB,iBAJvB;IAKE,WAAW,eACT,uDACE,oBAAC,QAAD;MAAU,SAAS,EAAElC,OAAO,CAAC0C,eAA7B;MAA8C,KAAK,EAAE,CAAC7B,KAAD;IAArD,EADF,eAEE,oBAAC,YAAD;MAAc,SAAS,EAAEb,OAAO,CAAC2C;IAAjC,GAAoD9B,KAApD,CAFF,CANJ;IAWE,cAAYlB,SAXd;IAYE,mBACE,CAACD,KAAK,IAAIZ,KAAK,CAACuC,SAAD,EAAY,OAAZ,CAAf,EAAqCzB,cAArC,EAAqDgD,IAArD,CAA0D,GAA1D,EAA+DC,IAA/D,MAAyEC,SAb7E;IAeE,oBACE,CAACjD,WAAW,IAAIf,KAAK,CAACuC,SAAD,EAAY,aAAZ,CAArB,EAAiDvB,eAAjD,EAAkE8C,IAAlE,CAAuE,GAAvE,EAA4EC,IAA5E,MACAC;EAjBJ,gBAoBE,oBAAC,OAAD;IAAS,SAAS,EAAE9C,OAAO,CAAC+C;EAA5B,gBACE;IAAK,SAAS,EAAE/C,OAAO,CAACgD;EAAxB,gBACE,oBAAC,MAAD;IAAQ,KAAK,EAAEnC,KAAf;IAAsB,QAAQ,EAAEK;EAAhC,EADF,eAEE,oBAAC,YAAD;IAAc,MAAM,EAAEM,UAAtB;IAAkC,OAAO,EAAEN;EAA3C,EAFF,CADF,CApBF,CApBF,CADF;AAkDD,CAxHD;;AA0HA,wCAAA/B,aAAa,CAAC8D,SAAd,GAA0B;EACxB;AACF;AACA;EACE3D,EAAE,EAAEpB,SAAS,CAACgF,MAJU;;EAMxB;AACF;AACA;EACE3D,IAAI,EAAErB,SAAS,CAACgF,MATQ;;EAWxB;AACF;AACA;AACA;AACA;AACA;EACExD,KAAK,EAAExB,SAAS,CAACiF,IAjBO;;EAkBxB;AACF;AACA;EACE,cAAcjF,SAAS,CAACgF,MArBA;;EAsBxB;AACF;AACA;EACE,mBAAmBhF,SAAS,CAACgF,MAzBL;;EA0BxB;AACF;AACA;EACErD,WAAW,EAAE3B,SAAS,CAACiF,IA7BC;;EA8BxB;AACF;AACA;EACE,oBAAoBjF,SAAS,CAACgF,MAjCN;;EAmCxB;AACF;AACA;EACEzD,QAAQ,EAAEvB,SAAS,CAACkF,IAtCI;;EAuCxB;AACF;AACA;EACE5D,QAAQ,EAAEtB,SAAS,CAACkF,IA1CI;;EA4CxB;AACF;AACA;EACErD,SAAS,EAAE7B,SAAS,CAACgF,MA/CG;;EAgDxB;AACF;AACA;EACElD,OAAO,EAAE9B,SAAS,CAACmF,KAAV,CAAgB;IACvBb,IAAI,EAAEtE,SAAS,CAACgF,MADO;IAEvBT,cAAc,EAAEvE,SAAS,CAACgF,MAFH;IAGvBxD,KAAK,EAAExB,SAAS,CAACgF,MAHM;IAIvBrD,WAAW,EAAE3B,SAAS,CAACgF,MAJA;IAKvBR,eAAe,EAAExE,SAAS,CAACgF,MALJ;IAMvBP,gBAAgB,EAAEzE,SAAS,CAACgF,MANL;IAOvBH,KAAK,EAAE7E,SAAS,CAACgF,MAPM;IAQvBF,WAAW,EAAE9E,SAAS,CAACgF;EARA,CAAhB,EASNI,UA5DqB;;EA8DxB;AACF;AACA;EACE9C,QAAQ,EAAEtC,SAAS,CAACkF,IAjEI;;EAkExB;AACF;AACA;EACE3C,eAAe,EAAEvC,SAAS,CAACkF,IArEH;;EAuExB;AACF;AACA;EACElD,QAAQ,EAAEhC,SAAS,CAACqF,IA1EI;;EA4ExB;AACF;AACA;EACEtD,KAAK,EAAE/B,SAAS,CAACgF,MA/EO;;EAiFxB;AACF;AACA;EACE/C,YAAY,EAAEjC,SAAS,CAACgF;AApFA,CAA1B;AAuFA,eAAe9E,UAAU,CAACY,MAAD,EAAS;EAAEO,IAAI,EAAE;AAAR,CAAT,CAAV,CAA8CJ,aAA9C,CAAf"}
+{"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","isOpen","setIsOpen","Boolean","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/modern/ColorPicker/Fields/Fields.js

@@ -9,6 +9,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 const Fields = ({
   onChange,
   rgb,
@@ -76,41 +78,42 @@ export const Fields = ({
     }, _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: () => setInternalHex(hex),
-    disableClear: true
-  }), /*#__PURE__*/React.createElement(HvInput, {
-    inputRef: redInputRef,
-    className: clsx(classes.single),
-    label: "R",
-    value: `${internalRed}`,
-    onChange: (_evt, value) => onChangeRbg(_evt, value, "r"),
-    onBlur: () => setInternalRed(rgb.r),
-    disableClear: true
-  }), /*#__PURE__*/React.createElement(HvInput, {
-    inputRef: greenInputRef,
-    className: clsx(classes.single),
-    label: "G",
-    value: `${internalGreen}`,
-    onChange: (_evt, value) => onChangeRbg(_evt, value, "g"),
-    onBlur: () => setInternalGreen(rgb.g),
-    disableClear: true
-  }), /*#__PURE__*/React.createElement(HvInput, {
-    inputRef: blueInputRef,
-    className: clsx(classes.single),
-    label: "B",
-    value: `${internalBlue}`,
-    onChange: (_evt, value) => onChangeRbg(_evt, value, "b"),
-    onBlur: () => 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: () => setInternalHex(hex),
+      disableClear: true
+    }), /*#__PURE__*/_jsx(HvInput, {
+      inputRef: redInputRef,
+      className: clsx(classes.single),
+      label: "R",
+      value: `${internalRed}`,
+      onChange: (_evt, value) => onChangeRbg(_evt, value, "r"),
+      onBlur: () => setInternalRed(rgb.r),
+      disableClear: true
+    }), /*#__PURE__*/_jsx(HvInput, {
+      inputRef: greenInputRef,
+      className: clsx(classes.single),
+      label: "G",
+      value: `${internalGreen}`,
+      onChange: (_evt, value) => onChangeRbg(_evt, value, "g"),
+      onBlur: () => setInternalGreen(rgb.g),
+      disableClear: true
+    }), /*#__PURE__*/_jsx(HvInput, {
+      inputRef: blueInputRef,
+      className: clsx(classes.single),
+      label: "B",
+      value: `${internalBlue}`,
+      onChange: (_evt, value) => onChangeRbg(_evt, value, "b"),
+      onBlur: () => setInternalBlue(rgb.b),
+      disableClear: true
+    })]
+  });
 };
 process.env.NODE_ENV !== "production" ? Fields.propTypes = {
   rgb: PropTypes.shape({

package/dist/modern/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","internalRed","setInternalRed","r","internalGreen","setInternalGreen","g","internalBlue","setInternalBlue","b","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","internalRed","setInternalRed","r","internalGreen","setInternalGreen","g","internalBlue","setInternalBlue","b","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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"}

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

@@ -1,4 +1,4 @@
-import { makeStyles } from "@material-ui/core";
+import { makeStyles } from "@mui/styles";
 const styles = makeStyles(() => ({
   fields: {
     width: "100%",

package/dist/modern/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,MAAMC,MAAM,GAAGD,UAAU,CAAC,OAAO;EAC/BE,MAAM,EAAE;IACNC,KAAK,EAAE,MADD;IAENC,OAAO,EAAE,MAFH;IAGNC,UAAU,EAAE,EAHN;IAINC,aAAa,EAAE,EAJT;IAKNC,WAAW,EAAE;EALP,CADuB;EAQ/BC,MAAM,EAAE;IACNL,KAAK,EAAE,EADD;IAENM,WAAW,EAAE,CAFP;IAGN,WAAW;MACTC,UAAU,EAAE,CADH;MAETH,WAAW,EAAE;IAFJ,CAHL;IAON,WAAW;MACTE,WAAW,EAAE;IADJ;EAPL,CARuB;EAmB/BE,MAAM,EAAE;IACNR,KAAK,EAAE,EADD;IAEN,WAAW;MACTS,aAAa,EAAE,WADN;MAETF,UAAU,EAAE,CAFH;MAGTH,WAAW,EAAE;IAHJ,CAFL;IAON,WAAW;MACTE,WAAW,EAAE;IADJ,CAPL;IAUNI,YAAY,EAAE;EAVR;AAnBuB,CAAP,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,MAAMC,MAAM,GAAGD,UAAU,CAAC,OAAO;EAC/BE,MAAM,EAAE;IACNC,KAAK,EAAE,MADD;IAENC,OAAO,EAAE,MAFH;IAGNC,UAAU,EAAE,EAHN;IAINC,aAAa,EAAE,EAJT;IAKNC,WAAW,EAAE;EALP,CADuB;EAQ/BC,MAAM,EAAE;IACNL,KAAK,EAAE,EADD;IAENM,WAAW,EAAE,CAFP;IAGN,WAAW;MACTC,UAAU,EAAE,CADH;MAETH,WAAW,EAAE;IAFJ,CAHL;IAON,WAAW;MACTE,WAAW,EAAE;IADJ;EAPL,CARuB;EAmB/BE,MAAM,EAAE;IACNR,KAAK,EAAE,EADD;IAEN,WAAW;MACTS,aAAa,EAAE,WADN;MAETF,UAAU,EAAE,CAFH;MAGTH,WAAW,EAAE;IAHJ,CAFL;IAON,WAAW;MACTE,WAAW,EAAE;IADJ,CAPL;IAUNI,YAAY,EAAE;EAVR;AAnBuB,CAAP,CAAD,CAAzB;AAiCA,eAAeZ,MAAf"}

package/dist/modern/ColorPicker/Picker/Picker.js

@@ -5,6 +5,10 @@ import { Saturation, ColorWrap, Hue } from "react-color/lib/components/common";
 import Fields from "../Fields";
 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";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+
 const Picker = ({
   onChange,
   rgb,
@@ -13,34 +17,39 @@ const Picker = ({
   hex
 }) => {
   const classes = useStyles();
-  const SaturationPointer = useCallback(() => /*#__PURE__*/React.createElement("div", {
+  const SaturationPointer = useCallback(() => /*#__PURE__*/_jsx("div", {
     className: clsx(classes.saturationPointer)
   }), [classes.saturationPointer]);
-  const HueSlider = useCallback(() => /*#__PURE__*/React.createElement("div", {
+  const HueSlider = useCallback(() => /*#__PURE__*/_jsx("div", {
     className: clsx(classes.hueSlider)
   }), [classes.hueSlider]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: clsx(classes.pickers)
-  }, /*#__PURE__*/React.createElement("div", {
-    className: clsx(classes.saturation)
-  }, /*#__PURE__*/React.createElement(Saturation, {
-    hsl: hsl,
-    hsv: hsv,
-    onChange: onChange,
-    pointer: SaturationPointer
-  })), /*#__PURE__*/React.createElement("div", {
-    className: clsx(classes.hue)
-  }, /*#__PURE__*/React.createElement(Hue, {
-    direction: "vertical",
-    hsl: hsl,
-    onChange: onChange,
-    pointer: HueSlider
-  }))), /*#__PURE__*/React.createElement(Fields, {
-    rgb: rgb,
-    hsl: hsl,
-    hex: hex,
-    onChange: onChange
-  }));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: clsx(classes.pickers),
+      children: [/*#__PURE__*/_jsx("div", {
+        className: clsx(classes.saturation),
+        children: /*#__PURE__*/_jsx(Saturation, {
+          hsl: hsl,
+          hsv: hsv,
+          onChange: onChange,
+          pointer: SaturationPointer
+        })
+      }), /*#__PURE__*/_jsx("div", {
+        className: clsx(classes.hue),
+        children: /*#__PURE__*/_jsx(Hue, {
+          direction: "vertical",
+          hsl: hsl,
+          onChange: onChange,
+          pointer: HueSlider
+        })
+      })]
+    }), /*#__PURE__*/_jsx(Fields, {
+      rgb: rgb,
+      hsl: hsl,
+      hex: hex,
+      onChange: onChange
+    })]
+  });
 };
 
 export default ColorWrap(Picker);

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

@@ -1 +1 @@
-{"version":3,"file":"Picker.js","names":["clsx","React","useCallback","Saturation","ColorWrap","Hue","Fields","useStyles","Picker","onChange","rgb","hsl","hsv","hex","classes","SaturationPointer","saturationPointer","HueSlider","hueSlider","pickers","saturation","hue"],"sources":["../../../../src/ColorPicker/Picker/Picker.js"],"sourcesContent":["/* eslint-disable no-param-reassign */\n\nimport clsx from \"clsx\";\nimport React, { useCallback } from \"react\";\nimport { Saturation, ColorWrap, Hue } from \"react-color/lib/components/common\";\n\nimport Fields from \"../Fields\";\nimport useStyles from \"./styles\";\n\n// eslint-disable-next-line react/prop-types\nconst Picker = ({ onChange, rgb, hsl, hsv, hex }) => {\n  const classes = useStyles();\n\n  const SaturationPointer = useCallback(\n    () => <div className={clsx(classes.saturationPointer)} />,\n    [classes.saturationPointer]\n  );\n  const HueSlider = useCallback(\n    () => <div className={clsx(classes.hueSlider)} />,\n    [classes.hueSlider]\n  );\n\n  return (\n    <>\n      <div className={clsx(classes.pickers)}>\n        <div className={clsx(classes.saturation)}>\n          <Saturation hsl={hsl} hsv={hsv} onChange={onChange} pointer={SaturationPointer} />\n        </div>\n        <div className={clsx(classes.hue)}>\n          <Hue direction=\"vertical\" hsl={hsl} onChange={onChange} pointer={HueSlider} />\n        </div>\n      </div>\n      <Fields rgb={rgb} hsl={hsl} hex={hex} onChange={onChange} />\n    </>\n  );\n};\n\nexport default ColorWrap(Picker);\n"],"mappings":"AAAA;AAEA,OAAOA,IAAP,MAAiB,MAAjB;AACA,OAAOC,KAAP,IAAgBC,WAAhB,QAAmC,OAAnC;AACA,SAASC,UAAT,EAAqBC,SAArB,EAAgCC,GAAhC,QAA2C,mCAA3C;AAEA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,SAAP,MAAsB,UAAtB,C,CAEA;;AACA,MAAMC,MAAM,GAAG,CAAC;EAAEC,QAAF;EAAYC,GAAZ;EAAiBC,GAAjB;EAAsBC,GAAtB;EAA2BC;AAA3B,CAAD,KAAsC;EACnD,MAAMC,OAAO,GAAGP,SAAS,EAAzB;EAEA,MAAMQ,iBAAiB,GAAGb,WAAW,CACnC,mBAAM;IAAK,SAAS,EAAEF,IAAI,CAACc,OAAO,CAACE,iBAAT;EAApB,EAD6B,EAEnC,CAACF,OAAO,CAACE,iBAAT,CAFmC,CAArC;EAIA,MAAMC,SAAS,GAAGf,WAAW,CAC3B,mBAAM;IAAK,SAAS,EAAEF,IAAI,CAACc,OAAO,CAACI,SAAT;EAApB,EADqB,EAE3B,CAACJ,OAAO,CAACI,SAAT,CAF2B,CAA7B;EAKA,oBACE,uDACE;IAAK,SAAS,EAAElB,IAAI,CAACc,OAAO,CAACK,OAAT;EAApB,gBACE;IAAK,SAAS,EAAEnB,IAAI,CAACc,OAAO,CAACM,UAAT;EAApB,gBACE,oBAAC,UAAD;IAAY,GAAG,EAAET,GAAjB;IAAsB,GAAG,EAAEC,GAA3B;IAAgC,QAAQ,EAAEH,QAA1C;IAAoD,OAAO,EAAEM;EAA7D,EADF,CADF,eAIE;IAAK,SAAS,EAAEf,IAAI,CAACc,OAAO,CAACO,GAAT;EAApB,gBACE,oBAAC,GAAD;IAAK,SAAS,EAAC,UAAf;IAA0B,GAAG,EAAEV,GAA/B;IAAoC,QAAQ,EAAEF,QAA9C;IAAwD,OAAO,EAAEQ;EAAjE,EADF,CAJF,CADF,eASE,oBAAC,MAAD;IAAQ,GAAG,EAAEP,GAAb;IAAkB,GAAG,EAAEC,GAAvB;IAA4B,GAAG,EAAEE,GAAjC;IAAsC,QAAQ,EAAEJ;EAAhD,EATF,CADF;AAaD,CAzBD;;AA2BA,eAAeL,SAAS,CAACI,MAAD,CAAxB"}
+{"version":3,"file":"Picker.js","names":["clsx","React","useCallback","Saturation","ColorWrap","Hue","Fields","useStyles","Picker","onChange","rgb","hsl","hsv","hex","classes","SaturationPointer","saturationPointer","HueSlider","hueSlider","pickers","saturation","hue"],"sources":["../../../../src/ColorPicker/Picker/Picker.js"],"sourcesContent":["/* eslint-disable no-param-reassign */\n\nimport clsx from \"clsx\";\nimport React, { useCallback } from \"react\";\nimport { Saturation, ColorWrap, Hue } from \"react-color/lib/components/common\";\n\nimport Fields from \"../Fields\";\nimport useStyles from \"./styles\";\n\n// eslint-disable-next-line react/prop-types\nconst Picker = ({ onChange, rgb, hsl, hsv, hex }) => {\n  const classes = useStyles();\n\n  const SaturationPointer = useCallback(\n    () => <div className={clsx(classes.saturationPointer)} />,\n    [classes.saturationPointer]\n  );\n  const HueSlider = useCallback(\n    () => <div className={clsx(classes.hueSlider)} />,\n    [classes.hueSlider]\n  );\n\n  return (\n    <>\n      <div className={clsx(classes.pickers)}>\n        <div className={clsx(classes.saturation)}>\n          <Saturation hsl={hsl} hsv={hsv} onChange={onChange} pointer={SaturationPointer} />\n        </div>\n        <div className={clsx(classes.hue)}>\n          <Hue direction=\"vertical\" hsl={hsl} onChange={onChange} pointer={HueSlider} />\n        </div>\n      </div>\n      <Fields rgb={rgb} hsl={hsl} hex={hex} onChange={onChange} />\n    </>\n  );\n};\n\nexport default ColorWrap(Picker);\n"],"mappings":"AAAA;AAEA,OAAOA,IAAP,MAAiB,MAAjB;AACA,OAAOC,KAAP,IAAgBC,WAAhB,QAAmC,OAAnC;AACA,SAASC,UAAT,EAAqBC,SAArB,EAAgCC,GAAhC,QAA2C,mCAA3C;AAEA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,SAAP,MAAsB,UAAtB,C,CAEA;;;;;;AACA,MAAMC,MAAM,GAAG,CAAC;EAAEC,QAAF;EAAYC,GAAZ;EAAiBC,GAAjB;EAAsBC,GAAtB;EAA2BC;AAA3B,CAAD,KAAsC;EACnD,MAAMC,OAAO,GAAGP,SAAS,EAAzB;EAEA,MAAMQ,iBAAiB,GAAGb,WAAW,CACnC,mBAAM;IAAK,SAAS,EAAEF,IAAI,CAACc,OAAO,CAACE,iBAAT;EAApB,EAD6B,EAEnC,CAACF,OAAO,CAACE,iBAAT,CAFmC,CAArC;EAIA,MAAMC,SAAS,GAAGf,WAAW,CAC3B,mBAAM;IAAK,SAAS,EAAEF,IAAI,CAACc,OAAO,CAACI,SAAT;EAApB,EADqB,EAE3B,CAACJ,OAAO,CAACI,SAAT,CAF2B,CAA7B;EAKA,oBACE;IAAA,wBACE;MAAK,SAAS,EAAElB,IAAI,CAACc,OAAO,CAACK,OAAT,CAApB;MAAA,wBACE;QAAK,SAAS,EAAEnB,IAAI,CAACc,OAAO,CAACM,UAAT,CAApB;QAAA,uBACE,KAAC,UAAD;UAAY,GAAG,EAAET,GAAjB;UAAsB,GAAG,EAAEC,GAA3B;UAAgC,QAAQ,EAAEH,QAA1C;UAAoD,OAAO,EAAEM;QAA7D;MADF,EADF,eAIE;QAAK,SAAS,EAAEf,IAAI,CAACc,OAAO,CAACO,GAAT,CAApB;QAAA,uBACE,KAAC,GAAD;UAAK,SAAS,EAAC,UAAf;UAA0B,GAAG,EAAEV,GAA/B;UAAoC,QAAQ,EAAEF,QAA9C;UAAwD,OAAO,EAAEQ;QAAjE;MADF,EAJF;IAAA,EADF,eASE,KAAC,MAAD;MAAQ,GAAG,EAAEP,GAAb;MAAkB,GAAG,EAAEC,GAAvB;MAA4B,GAAG,EAAEE,GAAjC;MAAsC,QAAQ,EAAEJ;IAAhD,EATF;EAAA,EADF;AAaD,CAzBD;;AA2BA,eAAeL,SAAS,CAACI,MAAD,CAAxB"}

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

@@ -1,4 +1,4 @@
-import { makeStyles } from "@material-ui/core";
+import { makeStyles } from "@mui/styles";
 const styles = makeStyles(() => ({
   pickers: {
     display: "flex"

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["makeStyles","styles","pickers","display","saturation","width","height","marginRight","position","overflow","saturationPointer","boxShadow","borderRadius","transform","sliders","padding","flex","hue","hueSlider","background","marginLeft","double"],"sources":["../../../../src/ColorPicker/Picker/styles.js"],"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"],"mappings":"AAAA,SAASA,UAAT,QAA2B,mBAA3B;AAEA,MAAMC,MAAM,GAAGD,UAAU,CAAC,OAAO;EAC/BE,OAAO,EAAE;IACPC,OAAO,EAAE;EADF,CADsB;EAI/BC,UAAU,EAAE;IACVC,KAAK,EAAE,GADG;IAEVC,MAAM,EAAE,GAFE;IAGVC,WAAW,EAAE,CAHH;IAIVC,QAAQ,EAAE,UAJA;IAKVC,QAAQ,EAAE;EALA,CAJmB;EAW/BC,iBAAiB,EAAE;IACjBL,KAAK,EAAE,KADU;IAEjBC,MAAM,EAAE,KAFS;IAGjBK,SAAS,EAAG;AAChB,uCAJqB;IAKjBC,YAAY,EAAE,KALG;IAMjBC,SAAS,EAAE;EANM,CAXY;EAmB/BC,OAAO,EAAE;IACPC,OAAO,EAAE,OADF;IAEPC,IAAI,EAAE;EAFC,CAnBsB;EAuB/BC,GAAG,EAAE;IACHZ,KAAK,EAAE,EADJ;IAEHG,QAAQ,EAAE,UAFP;IAGHC,QAAQ,EAAE;EAHP,CAvB0B;EA4B/BS,SAAS,EAAE;IACTb,KAAK,EAAE,EADE;IAETC,MAAM,EAAE,CAFC;IAGTa,UAAU,EAAE,MAHH;IAITR,SAAS,EAAE,0BAJF;IAKTS,UAAU,EAAE,CALH;IAMTR,YAAY,EAAE,KANL;IAOTC,SAAS,EAAE;EAPF,CA5BoB;EAqC/BQ,MAAM,EAAE;IACNL,IAAI,EAAE;EADA;AArCuB,CAAP,CAAD,CAAzB;AA0CA,eAAef,MAAf"}
+{"version":3,"file":"styles.js","names":["makeStyles","styles","pickers","display","saturation","width","height","marginRight","position","overflow","saturationPointer","boxShadow","borderRadius","transform","sliders","padding","flex","hue","hueSlider","background","marginLeft","double"],"sources":["../../../../src/ColorPicker/Picker/styles.js"],"sourcesContent":["import { makeStyles } from \"@mui/styles\";\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"],"mappings":"AAAA,SAASA,UAAT,QAA2B,aAA3B;AAEA,MAAMC,MAAM,GAAGD,UAAU,CAAC,OAAO;EAC/BE,OAAO,EAAE;IACPC,OAAO,EAAE;EADF,CADsB;EAI/BC,UAAU,EAAE;IACVC,KAAK,EAAE,GADG;IAEVC,MAAM,EAAE,GAFE;IAGVC,WAAW,EAAE,CAHH;IAIVC,QAAQ,EAAE,UAJA;IAKVC,QAAQ,EAAE;EALA,CAJmB;EAW/BC,iBAAiB,EAAE;IACjBL,KAAK,EAAE,KADU;IAEjBC,MAAM,EAAE,KAFS;IAGjBK,SAAS,EAAG;AAChB,uCAJqB;IAKjBC,YAAY,EAAE,KALG;IAMjBC,SAAS,EAAE;EANM,CAXY;EAmB/BC,OAAO,EAAE;IACPC,OAAO,EAAE,OADF;IAEPC,IAAI,EAAE;EAFC,CAnBsB;EAuB/BC,GAAG,EAAE;IACHZ,KAAK,EAAE,EADJ;IAEHG,QAAQ,EAAE,UAFP;IAGHC,QAAQ,EAAE;EAHP,CAvB0B;EA4B/BS,SAAS,EAAE;IACTb,KAAK,EAAE,EADE;IAETC,MAAM,EAAE,CAFC;IAGTa,UAAU,EAAE,MAHH;IAITR,SAAS,EAAE,0BAJF;IAKTS,UAAU,EAAE,CALH;IAMTR,YAAY,EAAE,KANL;IAOTC,SAAS,EAAE;EAPF,CA5BoB;EAqC/BQ,MAAM,EAAE;IACNL,IAAI,EAAE;EADA;AArCuB,CAAP,CAAD,CAAzB;AA0CA,eAAef,MAAf"}

package/dist/modern/ColorPicker/PresetColors/PresetColors.js

@@ -1,8 +1,14 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 import React from "react";
 import PropTypes from "prop-types";
 import { Swatch } from "react-color/lib/components/common";
 import useStyles from "./styles";
+import { jsx as _jsx } from "react/jsx-runtime";
 export const SketchPresetColors = ({
   colors,
   onClick = () => {}
@@ -16,24 +22,25 @@ export const SketchPresetColors = ({
     }, e);
   };
 
-  return /*#__PURE__*/React.createElement("div", {
-    className: classes.colors
-  }, colors.map(colorObjOrString => {
-    const c = typeof colorObjOrString === "string" ? {
-      color: colorObjOrString
-    } : colorObjOrString;
-    const key = `${c.color}${c.title || ""}`;
-    return /*#__PURE__*/React.createElement("div", {
-      key: key,
-      className: classes.swatchWrap
-    }, /*#__PURE__*/React.createElement(Swatch, _extends({}, c, {
-      className: classes.swatch,
-      onClick: handleClick,
-      focusStyle: {
-        boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${c.color}`
-      }
-    })));
-  }));
+  return /*#__PURE__*/_jsx("div", {
+    className: classes.colors,
+    children: colors.map(colorObjOrString => {
+      const c = typeof colorObjOrString === "string" ? {
+        color: colorObjOrString
+      } : colorObjOrString;
+      const key = `${c.color}${c.title || ""}`;
+      return /*#__PURE__*/_jsx("div", {
+        className: classes.swatchWrap,
+        children: /*#__PURE__*/_jsx(Swatch, _objectSpread(_objectSpread({}, c), {}, {
+          className: classes.swatch,
+          onClick: handleClick,
+          focusStyle: {
+            boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${c.color}`
+          }
+        }))
+      }, key);
+    })
+  });
 };
 process.env.NODE_ENV !== "production" ? SketchPresetColors.propTypes = {
   colors: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.shape({

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

@@ -1 +1 @@
-{"version":3,"file":"PresetColors.js","names":["React","PropTypes","Swatch","useStyles","SketchPresetColors","colors","onClick","classes","handleClick","hex","e","source","map","colorObjOrString","c","color","key","title","swatchWrap","swatch","boxShadow","propTypes","arrayOf","oneOfType","string","shape","isRequired","func"],"sources":["../../../../src/ColorPicker/PresetColors/PresetColors.js"],"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"],"mappings":";AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA,SAASC,MAAT,QAAuB,mCAAvB;AAEA,OAAOC,SAAP,MAAsB,UAAtB;AAEA,OAAO,MAAMC,kBAAkB,GAAG,CAAC;EAAEC,MAAF;EAAUC,OAAO,GAAG,MAAM,CAAE;AAA5B,CAAD,KAAoC;EACpE,MAAMC,OAAO,GAAGJ,SAAS,EAAzB;;EAEA,MAAMK,WAAW,GAAG,CAACC,GAAD,EAAMC,CAAN,KAAY;IAC9BJ,OAAO,CACL;MACEG,GADF;MAEEE,MAAM,EAAE;IAFV,CADK,EAKLD,CALK,CAAP;EAOD,CARD;;EAUA,oBACE;IAAK,SAAS,EAAEH,OAAO,CAACF;EAAxB,GACGA,MAAM,CAACO,GAAP,CAAYC,gBAAD,IAAsB;IAChC,MAAMC,CAAC,GACL,OAAOD,gBAAP,KAA4B,QAA5B,GAAuC;MAAEE,KAAK,EAAEF;IAAT,CAAvC,GAAqEA,gBADvE;IAEA,MAAMG,GAAG,GAAI,GAAEF,CAAC,CAACC,KAAM,GAAED,CAAC,CAACG,KAAF,IAAW,EAAG,EAAvC;IACA,oBACE;MAAK,GAAG,EAAED,GAAV;MAAe,SAAS,EAAET,OAAO,CAACW;IAAlC,gBACE,oBAAC,MAAD,eACMJ,CADN;MAEE,SAAS,EAAEP,OAAO,CAACY,MAFrB;MAGE,OAAO,EAAEX,WAHX;MAIE,UAAU,EAAE;QACVY,SAAS,EAAG,4CAA2CN,CAAC,CAACC,KAAM;MADrD;IAJd,GADF,CADF;EAYD,CAhBA,CADH,CADF;AAqBD,CAlCM;AAoCP,wCAAAX,kBAAkB,CAACiB,SAAnB,GAA+B;EAC7BhB,MAAM,EAAEJ,SAAS,CAACqB,OAAV,CACNrB,SAAS,CAACsB,SAAV,CAAoB,CAClBtB,SAAS,CAACuB,MADQ,EAElBvB,SAAS,CAACwB,KAAV,CAAgB;IACdV,KAAK,EAAEd,SAAS,CAACuB,MADH;IAEdP,KAAK,EAAEhB,SAAS,CAACuB;EAFH,CAAhB,CAFkB,CAApB,CADM,EAQNE,UAT2B;EAU7BpB,OAAO,EAAEL,SAAS,CAAC0B,IAAV,CAAeD;AAVK,CAA/B;AAaA,eAAetB,kBAAf"}
+{"version":3,"file":"PresetColors.js","names":["React","PropTypes","Swatch","useStyles","SketchPresetColors","colors","onClick","classes","handleClick","hex","e","source","map","colorObjOrString","c","color","key","title","swatchWrap","swatch","boxShadow","propTypes","arrayOf","oneOfType","string","shape","isRequired","func"],"sources":["../../../../src/ColorPicker/PresetColors/PresetColors.js"],"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"],"mappings":";;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA,SAASC,MAAT,QAAuB,mCAAvB;AAEA,OAAOC,SAAP,MAAsB,UAAtB;;AAEA,OAAO,MAAMC,kBAAkB,GAAG,CAAC;EAAEC,MAAF;EAAUC,OAAO,GAAG,MAAM,CAAE;AAA5B,CAAD,KAAoC;EACpE,MAAMC,OAAO,GAAGJ,SAAS,EAAzB;;EAEA,MAAMK,WAAW,GAAG,CAACC,GAAD,EAAMC,CAAN,KAAY;IAC9BJ,OAAO,CACL;MACEG,GADF;MAEEE,MAAM,EAAE;IAFV,CADK,EAKLD,CALK,CAAP;EAOD,CARD;;EAUA,oBACE;IAAK,SAAS,EAAEH,OAAO,CAACF,MAAxB;IAAA,UACGA,MAAM,CAACO,GAAP,CAAYC,gBAAD,IAAsB;MAChC,MAAMC,CAAC,GACL,OAAOD,gBAAP,KAA4B,QAA5B,GAAuC;QAAEE,KAAK,EAAEF;MAAT,CAAvC,GAAqEA,gBADvE;MAEA,MAAMG,GAAG,GAAI,GAAEF,CAAC,CAACC,KAAM,GAAED,CAAC,CAACG,KAAF,IAAW,EAAG,EAAvC;MACA,oBACE;QAAe,SAAS,EAAEV,OAAO,CAACW,UAAlC;QAAA,uBACE,KAAC,MAAD,kCACMJ,CADN;UAEE,SAAS,EAAEP,OAAO,CAACY,MAFrB;UAGE,OAAO,EAAEX,WAHX;UAIE,UAAU,EAAE;YACVY,SAAS,EAAG,4CAA2CN,CAAC,CAACC,KAAM;UADrD;QAJd;MADF,GAAUC,GAAV,CADF;IAYD,CAhBA;EADH,EADF;AAqBD,CAlCM;AAoCP,wCAAAZ,kBAAkB,CAACiB,SAAnB,GAA+B;EAC7BhB,MAAM,EAAEJ,SAAS,CAACqB,OAAV,CACNrB,SAAS,CAACsB,SAAV,CAAoB,CAClBtB,SAAS,CAACuB,MADQ,EAElBvB,SAAS,CAACwB,KAAV,CAAgB;IACdV,KAAK,EAAEd,SAAS,CAACuB,MADH;IAEdP,KAAK,EAAEhB,SAAS,CAACuB;EAFH,CAAhB,CAFkB,CAApB,CADM,EAQNE,UAT2B;EAU7BpB,OAAO,EAAEL,SAAS,CAAC0B,IAAV,CAAeD;AAVK,CAA/B;AAaA,eAAetB,kBAAf"}

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

@@ -1,4 +1,4 @@
-import { makeStyles } from "@material-ui/core";
+import { makeStyles } from "@mui/styles";
 const styles = makeStyles(() => ({
   colors: {
     display: "flex",

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["makeStyles","styles","colors","display","flexWrap","position","width","margin","padding","swatchWrap","height","swatch","borderRadius","boxShadow"],"sources":["../../../../src/ColorPicker/PresetColors/styles.js"],"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"],"mappings":"AAAA,SAASA,UAAT,QAA2B,mBAA3B;AAEA,MAAMC,MAAM,GAAGD,UAAU,CAAC,OAAO;EAC/BE,MAAM,EAAE;IACNC,OAAO,EAAE,MADH;IAENC,QAAQ,EAAE,MAFJ;IAGNC,QAAQ,EAAE,UAHJ;IAINC,KAAK,EAAE,kBAJD;IAKNC,MAAM,EAAE,WALF;IAMNC,OAAO,EAAE;EANH,CADuB;EAS/BC,UAAU,EAAE;IACVH,KAAK,EAAE,MADG;IAEVI,MAAM,EAAE,MAFE;IAGVH,MAAM,EAAE;EAHE,CATmB;EAc/BI,MAAM,EAAE;IACNC,YAAY,EAAE,KADR;IAENC,SAAS,EAAE;EAFL;AAduB,CAAP,CAAD,CAAzB;AAoBA,eAAeZ,MAAf"}
+{"version":3,"file":"styles.js","names":["makeStyles","styles","colors","display","flexWrap","position","width","margin","padding","swatchWrap","height","swatch","borderRadius","boxShadow"],"sources":["../../../../src/ColorPicker/PresetColors/styles.js"],"sourcesContent":["import { makeStyles } from \"@mui/styles\";\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"],"mappings":"AAAA,SAASA,UAAT,QAA2B,aAA3B;AAEA,MAAMC,MAAM,GAAGD,UAAU,CAAC,OAAO;EAC/BE,MAAM,EAAE;IACNC,OAAO,EAAE,MADH;IAENC,QAAQ,EAAE,MAFJ;IAGNC,QAAQ,EAAE,UAHJ;IAINC,KAAK,EAAE,kBAJD;IAKNC,MAAM,EAAE,WALF;IAMNC,OAAO,EAAE;EANH,CADuB;EAS/BC,UAAU,EAAE;IACVH,KAAK,EAAE,MADG;IAEVI,MAAM,EAAE,MAFE;IAGVH,MAAM,EAAE;EAHE,CATmB;EAc/BI,MAAM,EAAE;IACNC,YAAY,EAAE,KADR;IAENC,SAAS,EAAE;EAFL;AAduB,CAAP,CAAD,CAAzB;AAoBA,eAAeZ,MAAf"}

package/dist/modern/Drawer/Drawer.d.ts

@@ -1,4 +1,4 @@
-import { DrawerProps, StandardProps } from "@material-ui/core";
+import { DrawerProps, StandardProps } from "@mui/material";
 
 
 export type HvDrawerClassKey = "root" | "background" | "paper" | "closeButton";

package/dist/modern/Drawer/Drawer.js

@@ -1,13 +1,19 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 
 var _Close;
 
 const _excluded = ["className", "classes", "id", "children", "open", "onClose", "anchor", "buttonTitle"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 import React from "react";
 import clsx from "clsx";
 import PropTypes from "prop-types";
-import { Drawer, withStyles } from "@material-ui/core";
+import { Drawer } from "@mui/material";
+import { withStyles } from "@mui/styles";
 import { Close } from "@hitachivantara/uikit-react-icons";
 import { HvButton, withTooltip, setId } from "@hitachivantara/uikit-react-core";
 import styles from "./styles";
@@ -17,6 +23,9 @@ import styles from "./styles";
  * content can be customized.
  */
 
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
 const HvDrawer = _ref => {
   let {
     className,
@@ -30,12 +39,12 @@ const HvDrawer = _ref => {
   } = _ref,
       others = _objectWithoutProperties(_ref, _excluded);
 
-  const closeButtonDisplay = () => _Close || (_Close = /*#__PURE__*/React.createElement(Close, {
+  const closeButtonDisplay = () => _Close || (_Close = /*#__PURE__*/_jsx(Close, {
     role: "presentation"
   }));
 
   const CloseButtonTooltipWrapper = buttonTitle ? withTooltip(closeButtonDisplay, buttonTitle, "top") : closeButtonDisplay;
-  return /*#__PURE__*/React.createElement(Drawer, _extends({
+  return /*#__PURE__*/_jsxs(Drawer, _objectSpread(_objectSpread({
     className: clsx(classes.root, className),
     id: id,
     anchor: anchor,
@@ -51,13 +60,16 @@ const HvDrawer = _ref => {
       }
     },
     onClose: (event, reason) => onClose(event, reason)
-  }, others), /*#__PURE__*/React.createElement(HvButton, {
-    id: setId(id, "close"),
-    className: classes.closeButton,
-    category: "ghost",
-    onClick: onClose,
-    "aria-label": buttonTitle
-  }, /*#__PURE__*/React.createElement(CloseButtonTooltipWrapper, null)), children);
+  }, others), {}, {
+    children: [/*#__PURE__*/_jsx(HvButton, {
+      id: setId(id, "close"),
+      className: classes.closeButton,
+      category: "ghost",
+      onClick: onClose,
+      "aria-label": buttonTitle,
+      children: /*#__PURE__*/_jsx(CloseButtonTooltipWrapper, {})
+    }), children]
+  }));
 };
 
 process.env.NODE_ENV !== "production" ? HvDrawer.propTypes = {

package/dist/modern/Drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","names":["React","clsx","PropTypes","Drawer","withStyles","Close","HvButton","withTooltip","setId","styles","HvDrawer","className","classes","id","children","open","onClose","anchor","buttonTitle","others","closeButtonDisplay","CloseButtonTooltipWrapper","root","paper","background","event","reason","closeButton","propTypes","string","shape","isRequired","node","bool","func","oneOf","name"],"sources":["../../../src/Drawer/Drawer.js"],"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"],"mappings":"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"}
+{"version":3,"file":"Drawer.js","names":["React","clsx","PropTypes","Drawer","withStyles","Close","HvButton","withTooltip","setId","styles","HvDrawer","className","classes","id","children","open","onClose","anchor","buttonTitle","others","closeButtonDisplay","CloseButtonTooltipWrapper","root","paper","background","event","reason","closeButton","propTypes","string","shape","isRequired","node","bool","func","oneOf","name"],"sources":["../../../src/Drawer/Drawer.js"],"sourcesContent":["import React from \"react\";\nimport clsx from \"clsx\";\nimport PropTypes from \"prop-types\";\nimport { Drawer } from \"@mui/material\";\nimport { withStyles } from \"@mui/styles\";\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"],"mappings":"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"}

package/dist/modern/Drawer/styles.js

@@ -1,5 +1,4 @@
-import { hexToRgb } from "@material-ui/core";
-import { alpha } from "@material-ui/core/styles";
+import { hexToRgb, alpha } from "@mui/material";
 
 const styles = theme => ({
   background: {

package/dist/modern/Drawer/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["hexToRgb","alpha","styles","theme","background","hv","palette","atmosphere","atmo4","paper","atmo1","padding","overflow","boxShadow","shadows","closeButton","minWidth","position","top","hvSpacing","right"],"sources":["../../../src/Drawer/styles.js"],"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"],"mappings":"AAAA,SAASA,QAAT,QAAyB,mBAAzB;AACA,SAASC,KAAT,QAAsB,0BAAtB;;AAEA,MAAMC,MAAM,GAAIC,KAAD,KAAY;EACzBC,UAAU,EAAE;IACVA,UAAU,EAAEH,KAAK,CAACD,QAAQ,CAACG,KAAK,CAACE,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BC,KAA7B,CAAT,EAA8C,GAA9C;EADP,CADa;EAIzBC,KAAK,EAAE;IACLL,UAAU,EAAG,GAAED,KAAK,CAACE,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BG,KAAM,EAD5C;IAELC,OAAO,EAAE,KAFJ;IAGLC,QAAQ,EAAE,MAHL;IAILC,SAAS,EAAEV,KAAK,CAACE,EAAN,CAASS,OAAT,CAAiB,CAAjB;EAJN,CAJkB;EAUzBC,WAAW,EAAE;IACXJ,OAAO,EAAE,CADE;IAEXK,QAAQ,EAAE,SAFC;IAGXC,QAAQ,EAAE,UAHC;IAIXC,GAAG,EAAEf,KAAK,CAACgB,SAAN,CAAgB,IAAhB,CAJM;IAKXC,KAAK,EAAEjB,KAAK,CAACgB,SAAN,CAAgB,IAAhB;EALI;AAVY,CAAZ,CAAf;;AAmBA,eAAejB,MAAf"}
+{"version":3,"file":"styles.js","names":["hexToRgb","alpha","styles","theme","background","hv","palette","atmosphere","atmo4","paper","atmo1","padding","overflow","boxShadow","shadows","closeButton","minWidth","position","top","hvSpacing","right"],"sources":["../../../src/Drawer/styles.js"],"sourcesContent":["import { hexToRgb, alpha } from \"@mui/material\";\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"],"mappings":"AAAA,SAASA,QAAT,EAAmBC,KAAnB,QAAgC,eAAhC;;AAEA,MAAMC,MAAM,GAAIC,KAAD,KAAY;EACzBC,UAAU,EAAE;IACVA,UAAU,EAAEH,KAAK,CAACD,QAAQ,CAACG,KAAK,CAACE,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BC,KAA7B,CAAT,EAA8C,GAA9C;EADP,CADa;EAIzBC,KAAK,EAAE;IACLL,UAAU,EAAG,GAAED,KAAK,CAACE,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BG,KAAM,EAD5C;IAELC,OAAO,EAAE,KAFJ;IAGLC,QAAQ,EAAE,MAHL;IAILC,SAAS,EAAEV,KAAK,CAACE,EAAN,CAASS,OAAT,CAAiB,CAAjB;EAJN,CAJkB;EAUzBC,WAAW,EAAE;IACXJ,OAAO,EAAE,CADE;IAEXK,QAAQ,EAAE,SAFC;IAGXC,QAAQ,EAAE,UAHC;IAIXC,GAAG,EAAEf,KAAK,CAACgB,SAAN,CAAgB,IAAhB,CAJM;IAKXC,KAAK,EAAEjB,KAAK,CAACgB,SAAN,CAAgB,IAAhB;EALI;AAVY,CAAZ,CAAf;;AAmBA,eAAejB,MAAf"}

package/dist/modern/InlineEditor/InlineEditor.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { StandardProps } from "@material-ui/core";
+import { StandardProps } from "@mui/material";
 import {
   HvBaseInputProps,
   HvButtonProps,