@nualang/nualang-ui-components 0.1.1399 → 0.2.0

package/dist/Dialogs/AvatarDialog/AvatarDialog.js

@@ -1,585 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-import AvatarMod, { Piece } from "@nualang/avatars";
-import AvatarSwitcher from "../../Misc/AvatarSwitcher/AvatarSwitcher";
-import Box from "@mui/material/Box";
-import Button from "@mui/material/Button";
-import CheckIcon from "@mui/icons-material/Check";
-import CloseIcon from "@mui/icons-material/Close";
-import CloudUploadIcon from "@mui/icons-material/CloudUpload";
-import Dialog from "@mui/material/Dialog";
-import DialogActions from "@mui/material/DialogActions";
-import DialogContent from "@mui/material/DialogContent";
-import DialogTitle from "@mui/material/DialogTitle";
-import Grid from "@mui/material/Grid";
-import ShuffleIcon from "@mui/icons-material/Shuffle";
-import Tab from "@mui/material/Tab";
-import Tabs from "@mui/material/Tabs";
-import Typography from "@mui/material/Typography";
-import useMediaQuery from "@mui/material/useMediaQuery";
-import { useTheme } from "@mui/material/styles";
-import DefaultButton from "../../Misc/DefaultColourButton/DefaultColourButton";
-import { makeStyles } from "tss-react/mui";
-import { map, sample } from "lodash";
-import options from "./options";
-import PropTypes from "prop-types";
-import { useDropzone } from "react-dropzone";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const Avatar = AvatarMod.default || AvatarMod;
-const getColor = (props, theme) => {
-  if (props.isDragAccept) {
-    return theme.palette.success.main;
-  }
-  if (props.isDragReject) {
-    return theme.palette.error.main;
-  }
-  if (props.isDragActive) {
-    return theme.palette.primary.main;
-  }
-  return theme.palette.grey[300];
-};
-const useStyles = makeStyles()((theme, isDragActive, isDragAccept, isDragReject) => ({
-  avatarOption: {
-    textAlign: "center",
-    borderRadius: theme.shape.borderRadius,
-    border: `2px solid ${theme.palette.divider}`,
-    padding: theme.spacing(2),
-    "&:hover": {
-      cursor: "pointer",
-      opacity: 0.8
-    }
-  },
-  avatar: {
-    marginBottom: theme.spacing(2)
-  },
-  dropzoneContainer: {
-    textAlign: "center",
-    flex: 1,
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "center",
-    alignItems: "center",
-    flexWrap: "wrap",
-    padding: "20px",
-    borderWidth: "2px",
-    borderRadius: theme.shape.borderRadius,
-    borderColor: getColor({
-      isDragActive,
-      isDragAccept,
-      isDragReject
-    }, theme),
-    borderStyle: "dashed",
-    backgroundColor: theme.palette.background.paper,
-    color: theme.palette.text.primary,
-    outline: "none",
-    transition: "border .24s ease-in-out",
-    "&:hover": {
-      cursor: "pointer",
-      opacity: 0.8
-    }
-  },
-  imageUploadIcon: {
-    width: "100%",
-    height: "auto",
-    maxWidth: 170,
-    color: "rgb(150, 150, 150)"
-  },
-  paper: {
-    paddingTop: `env(safe-area-inset-top)`,
-    paddingBottom: `env(safe-area-inset-bottom)`,
-    paddingLeft: `env(safe-area-inset-left)`,
-    paddingRight: `env(safe-area-inset-right)`
-  },
-  buttons: {
-    marginTop: theme.spacing()
-  },
-  button: {
-    marginBottom: theme.spacing(),
-    marginRight: theme.spacing(),
-    maxWidth: 300,
-    height: 36.5
-  },
-  root: {
-    flexGrow: 1
-  },
-  tabs: {
-    borderBottom: `1px solid ${theme.palette.divider}`
-  },
-  piece: {
-    display: "inline-block",
-    borderRadius: theme.shape.borderRadius,
-    border: `2px solid ${theme.palette.divider}`,
-    padding: theme.spacing(2),
-    margin: theme.spacing(1),
-    "&:hover": {
-      cursor: "pointer",
-      opacity: 0.5
-    }
-  },
-  colorContainer: {
-    display: "flex",
-    alignItems: "center",
-    justifyItems: "center",
-    flexWrap: "wrap",
-    alignContent: "center",
-    justifyContent: "center",
-    marginBottom: theme.spacing(1)
-  },
-  color: {
-    display: "inline-block",
-    height: "30px",
-    width: "30px",
-    "&:hover": {
-      cursor: "pointer",
-      opacity: 0.9
-    }
-  },
-  previewContainer: {
-    textAlign: "center"
-  },
-  noneIcon: {
-    width: 50,
-    height: 50
-  }
-}));
-function TabPanel(props) {
-  const {
-    children,
-    value,
-    index,
-    ...other
-  } = props;
-  return /*#__PURE__*/_jsx("div", {
-    role: "tabpanel",
-    hidden: value !== index,
-    id: `vertical-tabpanel-${index}`,
-    "aria-labelledby": `vertical-tab-${index}`,
-    ...other,
-    children: value === index && /*#__PURE__*/_jsx(Box, {
-      sx: {
-        p: 2,
-        textAlign: "center"
-      },
-      children: /*#__PURE__*/_jsx(Typography, {
-        children: children
-      })
-    })
-  });
-}
-TabPanel.propTypes = {
-  children: PropTypes.node,
-  index: PropTypes.any.isRequired,
-  value: PropTypes.any.isRequired
-};
-function a11yProps(index) {
-  return {
-    id: `vertical-tab-${index}`,
-    "aria-controls": `vertical-tabpanel-${index}`
-  };
-}
-function AttributeTabs(props) {
-  const {
-    classes
-  } = useStyles();
-  const [selectedTab, setSelectedTab] = useState(0);
-  const handleTabChange = (event, newValue) => {
-    setSelectedTab(newValue);
-  };
-  const pieceClicked = (attr, val) => {
-    const newAttributes = {
-      ...props.attributes,
-      [attr]: val
-    };
-    if (props.onAttributesChange) {
-      props.onAttributesChange(newAttributes);
-    }
-  };
-  return /*#__PURE__*/_jsxs("div", {
-    className: classes.root,
-    children: [/*#__PURE__*/_jsx(Tabs, {
-      variant: "scrollable",
-      value: selectedTab,
-      onChange: handleTabChange,
-      "aria-label": "Attribute tabs",
-      className: classes.tabs,
-      children: options.map((option, i) => {
-        return /*#__PURE__*/_jsx(Tab, {
-          label: option.label,
-          ...a11yProps(i)
-        }, i);
-      })
-    }), map(options, (option, i) => {
-      return /*#__PURE__*/_jsxs(TabPanel, {
-        value: selectedTab,
-        index: i,
-        children: [/*#__PURE__*/_jsxs("div", {
-          className: classes.colorContainer,
-          children: [option.colors && props.attributes && (option.type !== "top" || option.hats.indexOf(props.attributes.topType) === -1) && props.attributes.topType !== "Eyepatch" && props.attributes.topType !== "LongHairShavedSides" && props.attributes.topType !== "LongHairFrida" && map(option.colors, (color, colorName) => {
-            return /*#__PURE__*/_jsx("div", {
-              className: classes.color,
-              style: {
-                backgroundColor: color,
-                border: color === "#FFFFFF" ? "1px solid #ccc" : "1px solid " + color
-              },
-              onClick: () => pieceClicked(option.colorAttribute, colorName)
-            });
-          }), option.hatColors && props.attributes && option.hats.indexOf(props.attributes.topType) !== -1 && props.attributes.topType !== "Hat" && map(option.hatColors, (color, colorName) => {
-            return /*#__PURE__*/_jsx("div", {
-              className: classes.color,
-              style: {
-                backgroundColor: color,
-                border: color === "#FFFFFF" ? "1px solid #ccc" : "1px solid " + color
-              },
-              onClick: () => pieceClicked("hatColor", colorName)
-            });
-          })]
-        }), map(option.values, val => {
-          var attr = {};
-          attr[option.attribute] = val;
-          if (option.transform) {
-            attr.style = {
-              transform: option.transform
-            };
-          }
-          return /*#__PURE__*/_jsx("div", {
-            className: classes.piece,
-            onClick: () => pieceClicked(option.attribute, val),
-            children: val === "Blank" || val === "NoHair" ? /*#__PURE__*/_jsx(CloseIcon, {
-              className: classes.noneIcon
-            }) : /*#__PURE__*/_jsx(Piece, {
-              pieceSize: "50",
-              pieceType: option.type,
-              ...attr
-            })
-          });
-        })]
-      });
-    })]
-  });
-}
-export default function AvatarDialog({
-  t = text => text,
-  open,
-  handleClose,
-  dialogTitle,
-  handleChange,
-  name,
-  initialAvatarAttributes,
-  saveAvatarToDynamo,
-  userRole,
-  avatarOptionSelected,
-  setAvatarOptionClicked
-}) {
-  const onChange = useCallback(value => {
-    handleChange({
-      target: {
-        name,
-        value
-      }
-    });
-  }, [handleChange, name]);
-  const onDrop = useCallback(acceptedFiles => {
-    const file = acceptedFiles[0];
-    const reader = new FileReader();
-    if (file) {
-      reader.readAsDataURL(file);
-      reader.addEventListener("load", () => {
-        onChange(reader.result);
-      }, false);
-    }
-  }, [onChange]);
-  const {
-    getRootProps,
-    getInputProps,
-    isDragActive,
-    isDragAccept,
-    isDragReject
-  } = useDropzone({
-    accept: "image/*",
-    multiple: false,
-    onDrop
-  });
-  const {
-    classes
-  } = useStyles({
-    isDragActive,
-    isDragAccept,
-    isDragReject
-  });
-  const theme = useTheme();
-  useEffect(() => {
-    if (setAvatarOptionClicked && userRole !== "teach" && !avatarOptionSelected) {
-      setAvatarOptionClicked(true);
-    }
-  }, [userRole, avatarOptionSelected, setAvatarOptionClicked]);
-  const fullScreen = useMediaQuery(theme.breakpoints.down("md"));
-  const isLargeScreen = useMediaQuery(theme.breakpoints.up("md"));
-  const avatarRef = useRef(null);
-  const canvasRef = useRef(null);
-  const [attributes, setAttributes] = useState(initialAvatarAttributes && JSON.stringify(initialAvatarAttributes) !== "{}" ? initialAvatarAttributes : {
-    topType: sample(options[0].values),
-    hairColor: sample(Object.keys(options[0].colors)),
-    facialHairType: sample(options[1].values),
-    accessoriesType: sample(options[2].values),
-    eyebrowType: sample(options[3].values),
-    eyeType: sample(options[4].values),
-    noseType: sample(options[5].values),
-    mouthType: sample(options[6].values),
-    clotheType: sample(options[7].values),
-    clotheColor: sample(Object.keys(options[7].colors)),
-    skinColor: sample(Object.keys(options[8].colors))
-  });
-  const onAttributesChange = updatedAttributes => {
-    setAttributes(prevState => ({
-      ...prevState,
-      ...updatedAttributes
-    }));
-  };
-  const random = () => {
-    setAttributes(prevState => ({
-      ...prevState,
-      topType: sample(options[0].values),
-      hairColor: sample(Object.keys(options[0].colors)),
-      facialHairType: sample(options[1].values),
-      accessoriesType: sample(options[2].values),
-      eyebrowType: sample(options[3].values),
-      eyeType: sample(options[4].values),
-      noseType: sample(options[5].values),
-      mouthType: sample(options[6].values),
-      clotheType: sample(options[7].values),
-      clotheColor: sample(Object.keys(options[7].colors)),
-      skinColor: sample(Object.keys(options[8].colors))
-    }));
-  };
-  const handleComplete = () => {
-    // eslint-disable-next-line react/no-find-dom-node
-    const svgNode = avatarRef.current;
-    if (!svgNode) {
-      console.error("Avatar ref is not attached to a DOM node.");
-      return;
-    }
-    /*
-      We should switch this but we need to 
-      have the Avatar component pass the ref to DOM
-      so we can grab the outerHTML
-      const svgNode = avatarRef.current;
-    */
-    const canvas = canvasRef.current;
-    const ctx = canvas.getContext("2d");
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-    const anyWindow = window;
-    const DOMURL = anyWindow.URL || anyWindow.webkitURL || window;
-    const data = svgNode.outerHTML;
-    const img = new Image();
-    const svg = new Blob([data], {
-      type: "image/svg+xml"
-    });
-    const url = DOMURL.createObjectURL(svg);
-    const reader = new FileReader();
-    img.onload = () => {
-      ctx.save();
-      ctx.scale(2, 2);
-      ctx.drawImage(img, 0, 0);
-      ctx.restore();
-      DOMURL.revokeObjectURL(url);
-      canvasRef.current.toBlob(imageBlob => {
-        reader.readAsDataURL(imageBlob);
-        reader.addEventListener("load", () => {
-          handleChange({
-            target: {
-              name,
-              value: reader.result
-            }
-          });
-        }, false);
-      });
-    };
-    img.src = url;
-    saveAvatarToDynamo(attributes);
-    setTimeout(() => {
-      handleClose();
-      setAvatarOptionClicked(false);
-    }, 1000);
-  };
-  const handleGoBack = () => {
-    setAvatarOptionClicked(false);
-    setAttributes(initialAvatarAttributes);
-  };
-  const handleClick = () => {
-    setAvatarOptionClicked(false);
-    handleClose();
-  };
-  return /*#__PURE__*/_jsxs(Dialog, {
-    open: open,
-    onClose: handleClose,
-    maxWidth: "lg",
-    fullScreen: fullScreen,
-    fullWidth: true,
-    "aria-label": dialogTitle,
-    classes: {
-      paper: classes.paper
-    },
-    children: [dialogTitle && /*#__PURE__*/_jsx(DialogTitle, {
-      children: dialogTitle
-    }), /*#__PURE__*/_jsxs(DialogContent, {
-      children: [!avatarOptionSelected && userRole === "teach" && /*#__PURE__*/_jsxs(Grid, {
-        container: true,
-        sx: {
-          width: "100%"
-        },
-        spacing: 2,
-        children: [/*#__PURE__*/_jsx(Grid, {
-          size: {
-            xs: 12,
-            md: 6
-          },
-          children: /*#__PURE__*/_jsxs("div", {
-            className: classes.avatarOption,
-            onClick: () => {
-              setAvatarOptionClicked(true);
-            },
-            children: [/*#__PURE__*/_jsx("div", {
-              className: classes.avatar,
-              children: initialAvatarAttributes && JSON.stringify(initialAvatarAttributes) !== "{}" ? /*#__PURE__*/_jsx(Avatar, {
-                style: {
-                  width: "100%",
-                  height: "auto",
-                  maxWidth: 150
-                },
-                ...initialAvatarAttributes
-              }) : /*#__PURE__*/_jsx(AvatarSwitcher, {
-                style: {
-                  width: "100%",
-                  height: "auto",
-                  maxWidth: 150
-                }
-              })
-            }), /*#__PURE__*/_jsx(Typography, {
-              variant: "h5",
-              gutterBottom: true,
-              children: initialAvatarAttributes && JSON.stringify(initialAvatarAttributes) !== "{}" ? t("update_avatar") : t("avatar_generator")
-            }), /*#__PURE__*/_jsx(Typography, {
-              variant: "body1",
-              gutterBottom: true,
-              children: initialAvatarAttributes && JSON.stringify(initialAvatarAttributes) !== "{}" ? t("update_avatar_desc") : t("avatar_generator_desc")
-            })]
-          })
-        }), /*#__PURE__*/_jsx(Grid, {
-          size: {
-            xs: 12,
-            md: 6
-          },
-          children: /*#__PURE__*/_jsxs("div", {
-            ...getRootProps({
-              className: classes.dropzoneContainer
-            }),
-            children: [/*#__PURE__*/_jsx("input", {
-              ...getInputProps()
-            }), /*#__PURE__*/_jsx(CloudUploadIcon, {
-              className: classes.imageUploadIcon
-            }), /*#__PURE__*/_jsx(Typography, {
-              variant: "h5",
-              gutterBottom: true,
-              children: t("upload_image")
-            }), /*#__PURE__*/_jsx(Typography, {
-              variant: "body1",
-              gutterBottom: true,
-              children: t("upload_image_desc")
-            })]
-          })
-        })]
-      }), avatarOptionSelected && /*#__PURE__*/_jsx(_Fragment, {
-        children: /*#__PURE__*/_jsxs(Grid, {
-          container: true,
-          sx: {
-            width: "100%"
-          },
-          spacing: 2,
-          children: [/*#__PURE__*/_jsxs(Grid, {
-            className: classes.previewContainer,
-            size: {
-              xs: 12,
-              md: 3
-            },
-            children: [/*#__PURE__*/_jsx("canvas", {
-              style: {
-                display: "none"
-              },
-              width: "528",
-              height: "560",
-              ref: canvasRef
-            }), /*#__PURE__*/_jsx(Avatar, {
-              ref: avatarRef,
-              style: {
-                width: "100%",
-                height: "auto",
-                maxWidth: isLargeScreen ? 300 : 200
-              },
-              ...attributes
-            }), /*#__PURE__*/_jsx("div", {
-              className: classes.buttons,
-              children: /*#__PURE__*/_jsx(DefaultButton, {
-                className: classes.button,
-                variant: "outlined",
-                startIcon: /*#__PURE__*/_jsx(ShuffleIcon, {}),
-                onClick: random,
-                fullWidth: true,
-                children: t("random")
-              })
-            })]
-          }), /*#__PURE__*/_jsx(Grid, {
-            size: {
-              xs: 12,
-              md: 9
-            },
-            children: /*#__PURE__*/_jsx(AttributeTabs, {
-              attributes: attributes,
-              onAttributesChange: onAttributesChange
-            })
-          })]
-        })
-      })]
-    }), /*#__PURE__*/_jsxs(DialogActions, {
-      children: [userRole === "teach" && /*#__PURE__*/_jsx(_Fragment, {
-        children: avatarOptionSelected ? /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx(Button, {
-            className: classes.button,
-            onClick: handleGoBack,
-            color: "primary",
-            variant: "outlined",
-            children: t("go_back")
-          }), /*#__PURE__*/_jsx(Button, {
-            className: classes.button,
-            variant: "contained",
-            color: "primary",
-            endIcon: /*#__PURE__*/_jsx(CheckIcon, {}),
-            onClick: handleComplete,
-            children: t("update")
-          })]
-        }) : /*#__PURE__*/_jsx(Button, {
-          className: classes.button,
-          onClick: handleClick,
-          color: "primary",
-          endIcon: /*#__PURE__*/_jsx(CloseIcon, {}),
-          variant: "outlined",
-          children: t("cancel")
-        })
-      }), userRole !== "teach" && /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(Button, {
-          className: classes.button,
-          onClick: handleClose,
-          color: "primary",
-          endIcon: /*#__PURE__*/_jsx(CloseIcon, {}),
-          variant: "outlined",
-          children: t("cancel")
-        }), /*#__PURE__*/_jsx(Button, {
-          className: classes.button,
-          variant: "contained",
-          color: "primary",
-          endIcon: /*#__PURE__*/_jsx(CheckIcon, {}),
-          onClick: handleComplete,
-          children: t("update")
-        })]
-      })]
-    })]
-  });
-}

package/dist/Dialogs/AvatarDialog/options.js

@@ -1,120 +0,0 @@
-const options = [{
-  label: "👤 Head",
-  type: "top",
-  attribute: "topType",
-  values: ["NoHair", "Eyepatch", "Hat", "Hijab", "Turban", "WinterHat1", "WinterHat2", "WinterHat3", "WinterHat4", "LongHairBigHair", "LongHairBob", "LongHairBun", "LongHairCurly", "LongHairCurvy", "LongHairDreads", "LongHairFrida", "LongHairFro", "LongHairFroBand", "LongHairNotTooLong", "LongHairShavedSides", "LongHairMiaWallace", "LongHairStraight", "LongHairStraight2", "LongHairStraightStrand", "ShortHairDreads01", "ShortHairDreads02", "ShortHairFrizzle", "ShortHairShaggyMullet", "ShortHairShortCurly", "ShortHairShortFlat", "ShortHairShortRound", "ShortHairShortWaved", "ShortHairSides", "ShortHairTheCaesar", "ShortHairTheCaesarSidePart"],
-  colorAttribute: "hairColor",
-  colors: {
-    Auburn: "#A55728",
-    Black: "#2C1B18",
-    Blonde: "#B58143",
-    BlondeGolden: "#D6B370",
-    Brown: "#724133",
-    BrownDark: "#4A312C",
-    PastelPink: "#F59797",
-    Platinum: "#ECDCBF",
-    Red: "#C93305",
-    SilverGray: "#E8E1E1"
-  },
-  hats: ["Hat", "Hijab", "Turban", "WinterHat1", "WinterHat2", "WinterHat3", "WinterHat4"],
-  hatColors: {
-    Black: "#262E33",
-    Blue01: "#65C9FF",
-    Blue02: "#5199E4",
-    Blue03: "#25557C",
-    Gray01: "#E6E6E6",
-    Gray02: "#929598",
-    Heather: "#3C4F5C",
-    PastelBlue: "#B1E2FF",
-    PastelGreen: "#A7FFC4",
-    PastelOrange: "#FFDEB5",
-    PastelRed: "#FFAFB9",
-    PastelYellow: "#FFFFB1",
-    Pink: "#FF488E",
-    Red: "#FF5C5C",
-    White: "#FFFFFF"
-  }
-}, {
-  label: "🧔 Facial Hair",
-  type: "facialHair",
-  attribute: "facialHairType",
-  values: ["Blank", "BeardMedium", "BeardLight", "BeardMajestic", "MoustacheFancy", "MoustacheMagnum"],
-  colorAttribute: "facialHairColor",
-  colors: {
-    Auburn: "#A55728",
-    Black: "#2C1B18",
-    Blonde: "#B58143",
-    BlondeGolden: "#D6B370",
-    Brown: "#724133",
-    BrownDark: "#4A312C",
-    Platinum: "#ECDCBF",
-    Red: "#C93305"
-  }
-}, {
-  label: "👓 Accessories",
-  type: "accessories",
-  attribute: "accessoriesType",
-  values: ["Blank", "Kurt", "Prescription01", "Prescription02", "Round", "Sunglasses", "Wayfarers"]
-}, {
-  label: "🤨 Eyebrows",
-  type: "eyebrows",
-  attribute: "eyebrowType",
-  transform: "scale(2) translate(13px,18px)",
-  values: ["Angry", "AngryNatural", "Default", "DefaultNatural", "FlatNatural", "RaisedExcited", "RaisedExcitedNatural", "SadConcerned", "SadConcernedNatural", "UnibrowNatural", "UpDown", "UpDownNatural"]
-}, {
-  label: "👁 Eyes",
-  type: "eyes",
-  attribute: "eyeType",
-  transform: "scale(2) translate(14px,16px)",
-  values: ["Close", "Cry", "Default", "Dizzy", "EyeRoll", "Happy", "Hearts", "Side", "Squint", "Surprised", "Wink", "WinkWacky"]
-}, {
-  label: "👃 Nose",
-  type: "nose",
-  attribute: "noseType",
-  values: ["Blank", "Default"]
-}, {
-  label: "👄 Mouth",
-  type: "mouth",
-  attribute: "mouthType",
-  transform: "scale(2.5) translate(14px,12px)",
-  values: ["Concerned", "Default", "Disbelief", "Eating", "Grimace", "Sad", "ScreamOpen", "Serious", "Smile", "Tongue", "Twinkle", "Vomit"]
-}, {
-  label: "👔 Clothes",
-  type: "clothe",
-  attribute: "clotheType",
-  values: ["BlazerShirt", "BlazerSweater", "CollarSweater", "GraphicShirt", "Hoodie", "Overall", "ShirtCrewNeck", "ShirtScoopNeck", "ShirtVNeck"],
-  colorAttribute: "clotheColor",
-  colors: {
-    Black: "#262E33",
-    Blue01: "#65C9FF",
-    Blue02: "#5199E4",
-    Blue03: "#25557C",
-    Gray01: "#E6E6E6",
-    Gray02: "#929598",
-    Heather: "#3C4F5C",
-    PastelBlue: "#B1E2FF",
-    PastelGreen: "#A7FFC4",
-    PastelOrange: "#FFDEB5",
-    PastelRed: "#FFAFB9",
-    PastelYellow: "#FFFFB1",
-    Pink: "#FF488E",
-    Red: "#FF5C5C",
-    White: "#FFFFFF"
-  }
-}, {
-  label: "🎨 Skin",
-  type: "skinColor",
-  attribute: "skinColor",
-  values: [],
-  colorAttribute: "skinColor",
-  colors: {
-    Tanned: "#FD9841",
-    Yellow: "#F8D25C",
-    Pale: "#FFDBB4",
-    Light: "#EDB98A",
-    Brown: "#D08B5B",
-    DarkBrown: "#AE5D29",
-    Black: "#614335"
-  }
-}];
-export default options;