@hitachivantara/uikit-react-lab 3.38.0

package/dist/modern/ColorPicker/ColorPicker.js

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ColorPicker/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"],"mappings":"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","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"],"file":"ColorPicker.js"}

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

@@ -0,0 +1,123 @@
+import "core-js/modules/web.dom-collections.iterator.js";
+import "core-js/modules/es.string.replace.js";
+
+/* eslint-disable no-param-reassign */
+import React, { useEffect, useRef, useState } from "react";
+import PropTypes from "prop-types";
+import clsx from "clsx";
+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
+
+export const Fields = ({
+  onChange,
+  rgb,
+  hex
+}) => {
+  const classes = useStyles();
+  const [internalHex, setInternalHex] = useState(hex);
+  const [internalRed, setInternalRed] = useState(rgb.r);
+  const [internalGreen, setInternalGreen] = useState(rgb.g);
+  const [internalBlue, setInternalBlue] = useState(rgb.b);
+  const hexInputRef = useRef();
+  const redInputRef = useRef();
+  const greenInputRef = useRef();
+  const blueInputRef = useRef();
+  useEffect(() => {
+    if (document.activeElement !== hexInputRef.current) {
+      setInternalHex(hex);
+    }
+  }, [hex]);
+  useEffect(() => {
+    if (document.activeElement !== redInputRef.current) {
+      setInternalRed(rgb.r);
+    }
+
+    if (document.activeElement !== greenInputRef.current) {
+      setInternalGreen(rgb.g);
+    }
+
+    if (document.activeElement !== blueInputRef.current) {
+      setInternalBlue(rgb.b);
+    }
+  }, [rgb]);
+
+  const handleChange = (data, e) => {
+    if (data.hex && color.isValidHex(data.hex)) {
+      onChange({
+        hex: data.hex,
+        source: "hex"
+      }, e);
+    } else if (data.r || data.g || data.b) {
+      onChange({
+        r: data.r || rgb.r,
+        g: data.g || rgb.g,
+        b: data.b || rgb.b,
+        source: "rgb"
+      }, e);
+    }
+  };
+
+  const onChangeHex = (_evt, value) => {
+    setInternalHex(value);
+    handleChange({
+      hex: value
+    }, _evt);
+  };
+
+  const onChangeRbg = (_evt, value, colorPart) => {
+    if (colorPart === "r") setInternalRed(value);
+    if (colorPart === "g") setInternalGreen(value);
+    if (colorPart === "b") setInternalBlue(value);
+    handleChange({
+      r: colorPart === "r" ? value : rgb.r,
+      g: colorPart === "g" ? value : rgb.g,
+      b: colorPart === "b" ? value : rgb.b
+    }, _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
+  }));
+};
+Fields.propTypes = {
+  rgb: PropTypes.shape({
+    r: PropTypes.number,
+    g: PropTypes.number,
+    b: PropTypes.number
+  }).isRequired
+};
+export default Fields;
+//# sourceMappingURL=Fields.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/ColorPicker/Fields/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"],"mappings":"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","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"],"file":"Fields.js"}

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

@@ -0,0 +1,2 @@
+export { default } from "./Fields";
+//# sourceMappingURL=index.js.map

package/dist/modern/ColorPicker/Fields/index.js.map

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

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

@@ -0,0 +1,35 @@
+import { makeStyles } from "@material-ui/core";
+const styles = makeStyles(() => ({
+  fields: {
+    width: "100%",
+    display: "flex",
+    paddingTop: 10,
+    paddingBottom: 20,
+    marginRight: 5
+  },
+  single: {
+    width: 40,
+    paddingLeft: 5,
+    "& input": {
+      marginLeft: 5,
+      marginRight: 5
+    },
+    "& label": {
+      paddingLeft: 5
+    }
+  },
+  double: {
+    width: 80,
+    "& input": {
+      textTransform: "uppercase",
+      marginLeft: 5,
+      marginRight: 5
+    },
+    "& label": {
+      paddingLeft: 5
+    },
+    paddingRight: 20
+  }
+}));
+export default styles;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/ColorPicker/Fields/styles.js"],"names":["makeStyles","styles","fields","width","display","paddingTop","paddingBottom","marginRight","single","paddingLeft","marginLeft","double","textTransform","paddingRight"],"mappings":"AAAA,SAASA,UAAT,QAA2B,mBAA3B;AAEA,MAAMC,MAAM,GAAGD,UAAU,CAAC,OAAO;AAC/BE,EAAAA,MAAM,EAAE;AACNC,IAAAA,KAAK,EAAE,MADD;AAENC,IAAAA,OAAO,EAAE,MAFH;AAGNC,IAAAA,UAAU,EAAE,EAHN;AAINC,IAAAA,aAAa,EAAE,EAJT;AAKNC,IAAAA,WAAW,EAAE;AALP,GADuB;AAQ/BC,EAAAA,MAAM,EAAE;AACNL,IAAAA,KAAK,EAAE,EADD;AAENM,IAAAA,WAAW,EAAE,CAFP;AAGN,eAAW;AACTC,MAAAA,UAAU,EAAE,CADH;AAETH,MAAAA,WAAW,EAAE;AAFJ,KAHL;AAON,eAAW;AACTE,MAAAA,WAAW,EAAE;AADJ;AAPL,GARuB;AAmB/BE,EAAAA,MAAM,EAAE;AACNR,IAAAA,KAAK,EAAE,EADD;AAEN,eAAW;AACTS,MAAAA,aAAa,EAAE,WADN;AAETF,MAAAA,UAAU,EAAE,CAFH;AAGTH,MAAAA,WAAW,EAAE;AAHJ,KAFL;AAON,eAAW;AACTE,MAAAA,WAAW,EAAE;AADJ,KAPL;AAUNI,IAAAA,YAAY,EAAE;AAVR;AAnBuB,CAAP,CAAD,CAAzB;AAiCA,eAAeZ,MAAf","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"],"file":"styles.js"}

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

@@ -0,0 +1,47 @@
+/* eslint-disable no-param-reassign */
+import clsx from "clsx";
+import React, { useCallback } from "react";
+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
+
+const Picker = ({
+  onChange,
+  rgb,
+  hsl,
+  hsv,
+  hex
+}) => {
+  const classes = useStyles();
+  const SaturationPointer = useCallback(() => /*#__PURE__*/React.createElement("div", {
+    className: clsx(classes.saturationPointer)
+  }), [classes.saturationPointer]);
+  const HueSlider = useCallback(() => /*#__PURE__*/React.createElement("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
+  }));
+};
+
+export default ColorWrap(Picker);
+//# sourceMappingURL=Picker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/ColorPicker/Picker/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"],"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;AAAEC,EAAAA,QAAF;AAAYC,EAAAA,GAAZ;AAAiBC,EAAAA,GAAjB;AAAsBC,EAAAA,GAAtB;AAA2BC,EAAAA;AAA3B,CAAD,KAAsC;AACnD,QAAMC,OAAO,GAAGP,SAAS,EAAzB;AAEA,QAAMQ,iBAAiB,GAAGb,WAAW,CACnC,mBAAM;AAAK,IAAA,SAAS,EAAEF,IAAI,CAACc,OAAO,CAACE,iBAAT;AAApB,IAD6B,EAEnC,CAACF,OAAO,CAACE,iBAAT,CAFmC,CAArC;AAIA,QAAMC,SAAS,GAAGf,WAAW,CAC3B,mBAAM;AAAK,IAAA,SAAS,EAAEF,IAAI,CAACc,OAAO,CAACI,SAAT;AAApB,IADqB,EAE3B,CAACJ,OAAO,CAACI,SAAT,CAF2B,CAA7B;AAKA,sBACE,uDACE;AAAK,IAAA,SAAS,EAAElB,IAAI,CAACc,OAAO,CAACK,OAAT;AAApB,kBACE;AAAK,IAAA,SAAS,EAAEnB,IAAI,CAACc,OAAO,CAACM,UAAT;AAApB,kBACE,oBAAC,UAAD;AAAY,IAAA,GAAG,EAAET,GAAjB;AAAsB,IAAA,GAAG,EAAEC,GAA3B;AAAgC,IAAA,QAAQ,EAAEH,QAA1C;AAAoD,IAAA,OAAO,EAAEM;AAA7D,IADF,CADF,eAIE;AAAK,IAAA,SAAS,EAAEf,IAAI,CAACc,OAAO,CAACO,GAAT;AAApB,kBACE,oBAAC,GAAD;AAAK,IAAA,SAAS,EAAC,UAAf;AAA0B,IAAA,GAAG,EAAEV,GAA/B;AAAoC,IAAA,QAAQ,EAAEF,QAA9C;AAAwD,IAAA,OAAO,EAAEQ;AAAjE,IADF,CAJF,CADF,eASE,oBAAC,MAAD;AAAQ,IAAA,GAAG,EAAEP,GAAb;AAAkB,IAAA,GAAG,EAAEC,GAAvB;AAA4B,IAAA,GAAG,EAAEE,GAAjC;AAAsC,IAAA,QAAQ,EAAEJ;AAAhD,IATF,CADF;AAaD,CAzBD;;AA2BA,eAAeL,SAAS,CAACI,MAAD,CAAxB","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"],"file":"Picker.js"}

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

@@ -0,0 +1,2 @@
+export { default } from "./Picker";
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,44 @@
+import { makeStyles } from "@material-ui/core";
+const styles = makeStyles(() => ({
+  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),
+            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"
+  }
+}));
+export default styles;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/ColorPicker/Picker/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"],"mappings":"AAAA,SAASA,UAAT,QAA2B,mBAA3B;AAEA,MAAMC,MAAM,GAAGD,UAAU,CAAC,OAAO;AAC/BE,EAAAA,OAAO,EAAE;AACPC,IAAAA,OAAO,EAAE;AADF,GADsB;AAI/BC,EAAAA,UAAU,EAAE;AACVC,IAAAA,KAAK,EAAE,GADG;AAEVC,IAAAA,MAAM,EAAE,GAFE;AAGVC,IAAAA,WAAW,EAAE,CAHH;AAIVC,IAAAA,QAAQ,EAAE,UAJA;AAKVC,IAAAA,QAAQ,EAAE;AALA,GAJmB;AAW/BC,EAAAA,iBAAiB,EAAE;AACjBL,IAAAA,KAAK,EAAE,KADU;AAEjBC,IAAAA,MAAM,EAAE,KAFS;AAGjBK,IAAAA,SAAS,EAAG;AAChB,uCAJqB;AAKjBC,IAAAA,YAAY,EAAE,KALG;AAMjBC,IAAAA,SAAS,EAAE;AANM,GAXY;AAmB/BC,EAAAA,OAAO,EAAE;AACPC,IAAAA,OAAO,EAAE,OADF;AAEPC,IAAAA,IAAI,EAAE;AAFC,GAnBsB;AAuB/BC,EAAAA,GAAG,EAAE;AACHZ,IAAAA,KAAK,EAAE,EADJ;AAEHG,IAAAA,QAAQ,EAAE,UAFP;AAGHC,IAAAA,QAAQ,EAAE;AAHP,GAvB0B;AA4B/BS,EAAAA,SAAS,EAAE;AACTb,IAAAA,KAAK,EAAE,EADE;AAETC,IAAAA,MAAM,EAAE,CAFC;AAGTa,IAAAA,UAAU,EAAE,MAHH;AAITR,IAAAA,SAAS,EAAE,0BAJF;AAKTS,IAAAA,UAAU,EAAE,CALH;AAMTR,IAAAA,YAAY,EAAE,KANL;AAOTC,IAAAA,SAAS,EAAE;AAPF,GA5BoB;AAqC/BQ,EAAAA,MAAM,EAAE;AACNL,IAAAA,IAAI,EAAE;AADA;AArCuB,CAAP,CAAD,CAAzB;AA0CA,eAAef,MAAf","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/modern/ColorPicker/PresetColors/PresetColors.js

@@ -0,0 +1,46 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React from "react";
+import PropTypes from "prop-types";
+import { Swatch } from "react-color/lib/components/common";
+import useStyles from "./styles";
+export const SketchPresetColors = ({
+  colors,
+  onClick = () => {}
+}) => {
+  const classes = useStyles();
+
+  const handleClick = (hex, e) => {
+    onClick({
+      hex,
+      source: "hex"
+    }, 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}`
+      }
+    })));
+  }));
+};
+SketchPresetColors.propTypes = {
+  colors: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
+    color: PropTypes.string,
+    title: PropTypes.string
+  })])).isRequired,
+  onClick: PropTypes.func.isRequired
+};
+export default SketchPresetColors;
+//# sourceMappingURL=PresetColors.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/ColorPicker/PresetColors/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"],"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;AAAEC,EAAAA,MAAF;AAAUC,EAAAA,OAAO,GAAG,MAAM,CAAE;AAA5B,CAAD,KAAoC;AACpE,QAAMC,OAAO,GAAGJ,SAAS,EAAzB;;AAEA,QAAMK,WAAW,GAAG,CAACC,GAAD,EAAMC,CAAN,KAAY;AAC9BJ,IAAAA,OAAO,CACL;AACEG,MAAAA,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,CAAYC,gBAAD,IAAsB;AAChC,UAAMC,CAAC,GACL,OAAOD,gBAAP,KAA4B,QAA5B,GAAuC;AAAEE,MAAAA,KAAK,EAAEF;AAAT,KAAvC,GAAqEA,gBADvE;AAEA,UAAMG,GAAG,GAAI,GAAEF,CAAC,CAACC,KAAM,GAAED,CAAC,CAACG,KAAF,IAAW,EAAG,EAAvC;AACA,wBACE;AAAK,MAAA,GAAG,EAAED,GAAV;AAAe,MAAA,SAAS,EAAET,OAAO,CAACW;AAAlC,oBACE,oBAAC,MAAD,eACMJ,CADN;AAEE,MAAA,SAAS,EAAEP,OAAO,CAACY,MAFrB;AAGE,MAAA,OAAO,EAAEX,WAHX;AAIE,MAAA,UAAU,EAAE;AACVY,QAAAA,SAAS,EAAG,4CAA2CN,CAAC,CAACC,KAAM;AADrD;AAJd,OADF,CADF;AAYD,GAhBA,CADH,CADF;AAqBD,CAlCM;AAoCPX,kBAAkB,CAACiB,SAAnB,GAA+B;AAC7BhB,EAAAA,MAAM,EAAEJ,SAAS,CAACqB,OAAV,CACNrB,SAAS,CAACsB,SAAV,CAAoB,CAClBtB,SAAS,CAACuB,MADQ,EAElBvB,SAAS,CAACwB,KAAV,CAAgB;AACdV,IAAAA,KAAK,EAAEd,SAAS,CAACuB,MADH;AAEdP,IAAAA,KAAK,EAAEhB,SAAS,CAACuB;AAFH,GAAhB,CAFkB,CAApB,CADM,EAQNE,UAT2B;AAU7BpB,EAAAA,OAAO,EAAEL,SAAS,CAAC0B,IAAV,CAAeD;AAVK,CAA/B;AAaA,eAAetB,kBAAf","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/modern/ColorPicker/PresetColors/index.js

@@ -0,0 +1,2 @@
+export { default } from "./PresetColors";
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,22 @@
+import { makeStyles } from "@material-ui/core";
+const styles = makeStyles(() => ({
+  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)"
+  }
+}));
+export default styles;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/ColorPicker/PresetColors/styles.js"],"names":["makeStyles","styles","colors","display","flexWrap","position","width","margin","padding","swatchWrap","height","swatch","borderRadius","boxShadow"],"mappings":"AAAA,SAASA,UAAT,QAA2B,mBAA3B;AAEA,MAAMC,MAAM,GAAGD,UAAU,CAAC,OAAO;AAC/BE,EAAAA,MAAM,EAAE;AACNC,IAAAA,OAAO,EAAE,MADH;AAENC,IAAAA,QAAQ,EAAE,MAFJ;AAGNC,IAAAA,QAAQ,EAAE,UAHJ;AAINC,IAAAA,KAAK,EAAE,kBAJD;AAKNC,IAAAA,MAAM,EAAE,WALF;AAMNC,IAAAA,OAAO,EAAE;AANH,GADuB;AAS/BC,EAAAA,UAAU,EAAE;AACVH,IAAAA,KAAK,EAAE,MADG;AAEVI,IAAAA,MAAM,EAAE,MAFE;AAGVH,IAAAA,MAAM,EAAE;AAHE,GATmB;AAc/BI,EAAAA,MAAM,EAAE;AACNC,IAAAA,YAAY,EAAE,KADR;AAENC,IAAAA,SAAS,EAAE;AAFL;AAduB,CAAP,CAAD,CAAzB;AAoBA,eAAeZ,MAAf","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/modern/ColorPicker/index.d.ts

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

package/dist/modern/ColorPicker/index.js

@@ -0,0 +1,2 @@
+export { default } from "./ColorPicker";
+//# sourceMappingURL=index.js.map

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

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