{
  "id": "b5f797ed34250",
  "name": "module",
  "version": "0.0.3",
  "children": [
    {
      "label": "Color Picker",
      "is": "div",
      "style": {
        "padding": "10px",
        "box-sizing": "border-box",
        "display": "inline-block",
        "flex-direction": "column",
        "font-family": "Helvetica",
        "color": "grey",
        "position": "relative",
        "background": "white",
        "border-radius": "2px",
        "width": "300px"
      },
      "attributes": {},
      "id": "67e386c762",
      "name": "component",
      "children": [
        {
          "id": "41979411451593",
          "variant": [],
          "is": "41979411419193",
          "name": "component-instance",
          "attributes": {},
          "style": {
            "background": "rgba(0,0,0,0.05)",
            "position": "relative",
            "height": "180px",
            "width": "100%"
          },
          "children": [],
          "metadata": {},
          "label": "HSL"
        },
        {
          "id": "41979411464689",
          "variant": [],
          "is": "41979411419193",
          "name": "component-instance",
          "attributes": {},
          "style": {
            "background": "rgba(0,0,0,0.05)",
            "position": "relative",
            "height": "20px",
            "width": "100%",
            "top": "undefined",
            "margin-top": "8px"
          },
          "children": [
            {
              "id": "41979411527242",
              "propertyName": "style",
              "targetIdPath": [
                "41979411425672"
              ],
              "value": {
                "height": "100%",
                "transform": "translateX(-50%)",
                "border-radius": "2px",
                "left": "20%",
                "top": "0"
              },
              "name": "override",
              "children": []
            }
          ],
          "metadata": {},
          "label": "Spectrum"
        },
        {
          "id": "41979411490970",
          "variant": [],
          "is": "41979411419193",
          "name": "component-instance",
          "attributes": {},
          "style": {
            "background": "rgba(0,0,0,0.05)",
            "position": "relative",
            "height": "20px",
            "width": "100%",
            "top": "undefined",
            "margin-top": "8px"
          },
          "children": [
            {
              "id": "41979411514101",
              "propertyName": "style",
              "targetIdPath": [
                "41979411425672"
              ],
              "value": {
                "height": "100%",
                "transform": "translateX(-50%)",
                "border-radius": "2px",
                "left": "50%"
              },
              "name": "override",
              "children": []
            }
          ],
          "metadata": {},
          "label": "Opacity"
        },
        {
          "id": "d227ff68422144",
          "variant": [],
          "is": "d227ff68422143",
          "name": "component-instance",
          "attributes": {},
          "style": {
            "flex-shrink": "0",
            "margin-top": "10px",
            "display": "flex",
            "align-items": "center",
            "font-family": "Helvetica",
            "width": "100%"
          },
          "children": [],
          "metadata": {},
          "label": "RGBA Input"
        }
      ],
      "metadata": {
        "bounds": {
          "left": -736,
          "top": 887,
          "right": -305.775947540845,
          "bottom": 1243.984364557568
        },
        "mode": "preview"
      },
      "controllers": [
        "./picker-controller.tsx"
      ]
    },
    {
      "label": "RGBA Input",
      "is": "div",
      "style": {
        "flex-shrink": "0",
        "margin-top": "10px",
        "display": "flex",
        "align-items": "center",
        "font-family": "Helvetica"
      },
      "attributes": {},
      "id": "d227ff68422143",
      "name": "component",
      "children": [
        {
          "id": "d227ff68422138",
          "name": "text",
          "label": "Label",
          "value": "RGBA",
          "style": {
            "font-size": "0.8em",
            "margin-right": "8px"
          },
          "children": [],
          "metadata": {}
        },
        {
          "id": "d227ff68422139",
          "variant": [],
          "is": "7149f8199122",
          "name": "component-instance",
          "attributes": {},
          "style": {
            "width": "100%",
            "padding": "4px 8px",
            "border-radius": "2px",
            "border": "1px solid rgba(0,0,0,0.08)",
            "box-sizing": "border-box",
            "margin-right": "8px",
            "flex": "1"
          },
          "children": [],
          "metadata": {},
          "label": "R Input"
        },
        {
          "id": "d227ff68422140",
          "variant": [],
          "is": "7149f8199122",
          "name": "component-instance",
          "attributes": {},
          "style": {
            "width": "100%",
            "padding": "4px 8px",
            "border-radius": "2px",
            "border": "1px solid rgba(0,0,0,0.08)",
            "box-sizing": "border-box",
            "margin-right": "8px",
            "flex": "1"
          },
          "children": [],
          "metadata": {},
          "label": "G Input"
        },
        {
          "id": "d227ff68422141",
          "variant": [],
          "is": "7149f8199122",
          "name": "component-instance",
          "attributes": {},
          "style": {
            "width": "100%",
            "padding": "4px 8px",
            "border-radius": "2px",
            "border": "1px solid rgba(0,0,0,0.08)",
            "box-sizing": "border-box",
            "margin-right": "8px",
            "flex": "1"
          },
          "children": [],
          "metadata": {},
          "label": "B Input"
        },
        {
          "id": "d227ff68422142",
          "variant": [],
          "is": "7149f8199122",
          "name": "component-instance",
          "attributes": {},
          "style": {
            "width": "100%",
            "padding": "4px 8px",
            "border-radius": "2px",
            "border": "1px solid rgba(0,0,0,0.08)",
            "box-sizing": "border-box",
            "flex": "1"
          },
          "children": [],
          "metadata": {},
          "label": "A Input"
        }
      ],
      "metadata": {
        "bounds": {
          "left": 545,
          "top": 517,
          "right": 863.4505475827968,
          "bottom": 589.4821398220452
        }
      },
      "controllers": [
        "./rgba-input-controller.tsx"
      ]
    },
    {
      "label": "HSL Input",
      "is": "div",
      "style": {
        "flex-shrink": "0",
        "margin-top": "10px",
        "display": "flex",
        "align-items": "center",
        "font-family": "Helvetica"
      },
      "attributes": {},
      "id": "d227ff68507402",
      "name": "component",
      "children": [
        {
          "id": "d227ff68507398",
          "name": "text",
          "label": "Label",
          "value": "HSLA",
          "style": {
            "font-size": "0.8em",
            "margin-right": "8px"
          },
          "children": [],
          "metadata": {}
        },
        {
          "id": "d227ff68507399",
          "variant": [],
          "is": "7149f8199122",
          "name": "component-instance",
          "attributes": {},
          "style": {
            "width": "100%",
            "padding": "4px 8px",
            "border-radius": "2px",
            "border": "1px solid rgba(0,0,0,0.08)",
            "box-sizing": "border-box",
            "margin-right": "8px",
            "flex": "1"
          },
          "children": [],
          "metadata": {
            "bounds": {
              "left": 354.28125,
              "top": 91.5,
              "right": 416.71875,
              "bottom": 114.5
            }
          },
          "label": "R Input"
        },
        {
          "id": "d227ff68507400",
          "variant": [],
          "is": "7149f8199122",
          "name": "component-instance",
          "attributes": {},
          "style": {
            "width": "100%",
            "padding": "4px 8px",
            "border-radius": "2px",
            "border": "1px solid rgba(0,0,0,0.08)",
            "box-sizing": "border-box",
            "margin-right": "8px",
            "flex": "1"
          },
          "children": [],
          "metadata": {},
          "label": "G Input"
        },
        {
          "id": "d227ff68507401",
          "variant": [],
          "is": "7149f8199122",
          "name": "component-instance",
          "attributes": {},
          "style": {
            "width": "100%",
            "padding": "4px 8px",
            "border-radius": "2px",
            "border": "1px solid rgba(0,0,0,0.08)",
            "box-sizing": "border-box",
            "flex": "1"
          },
          "children": [],
          "metadata": {},
          "label": "A Input"
        },
        {
          "id": "d227ff68557441",
          "variant": [],
          "is": "7149f8199122",
          "name": "component-instance",
          "attributes": {},
          "style": {
            "width": "100%",
            "padding": "4px 8px",
            "border-radius": "2px",
            "border": "1px solid rgba(0,0,0,0.08)",
            "box-sizing": "border-box",
            "flex": "1"
          },
          "children": [],
          "metadata": {},
          "label": "A Input"
        }
      ],
      "metadata": {
        "bounds": {
          "left": 528,
          "top": 659,
          "right": 831.974934087616,
          "bottom": 759
        }
      }
    },
    {
      "label": "Hex Input",
      "is": "div",
      "style": {
        "flex-shrink": "0",
        "margin-top": "10px",
        "display": "flex",
        "align-items": "center",
        "font-family": "Helvetica"
      },
      "attributes": {},
      "id": "d227ff68554496",
      "name": "component",
      "children": [
        {
          "id": "d227ff68554494",
          "name": "text",
          "label": "Label",
          "value": "HEX",
          "style": {
            "font-size": "0.8em",
            "margin-right": "8px"
          },
          "children": [],
          "metadata": {
            "bounds": {
              "left": 302,
              "top": 230.5,
              "right": 326.90625,
              "bottom": 245.5
            }
          }
        },
        {
          "id": "d227ff68554495",
          "variant": [],
          "is": "7149f8199122",
          "name": "component-instance",
          "attributes": {},
          "style": {
            "width": "100%",
            "padding": "4px 8px",
            "border-radius": "2px",
            "border": "1px solid rgba(0,0,0,0.08)",
            "box-sizing": "border-box",
            "margin-right": "8px",
            "flex": "1"
          },
          "children": [],
          "metadata": {
            "bounds": {
              "left": 354.28125,
              "top": 91.5,
              "right": 416.71875,
              "bottom": 114.5
            }
          },
          "label": "R Input"
        }
      ],
      "metadata": {
        "bounds": {
          "left": 554,
          "top": 344,
          "right": 862.7382461427483,
          "bottom": 444
        }
      },
      "controllers": [
        "./hex-input-controller.tsx"
      ]
    },
    {
      "label": "Element",
      "is": "div",
      "style": {},
      "attributes": {},
      "id": "5c08964d18532",
      "name": "component",
      "children": [],
      "metadata": {
        "bounds": {
          "left": 105,
          "top": 616,
          "right": 393,
          "bottom": 666
        }
      }
    },
    {
      "label": "Grabber",
      "is": "5c08964d18532",
      "style": {
        "border": "1px solid rgba(0,0,0,0.5)",
        "width": "10px",
        "height": "10px",
        "position": "absolute",
        "box-sizing": "border-box",
        "background": "transparent",
        "transform": "translate(-50%, -50%)"
      },
      "attributes": {},
      "id": "5c08964d24625",
      "name": "component",
      "children": [],
      "metadata": {
        "bounds": {
          "left": 899,
          "top": 470,
          "right": 1187,
          "bottom": 520
        }
      }
    },
    {
      "label": "Slider",
      "is": "5c08964d24625",
      "style": {
        "border": "1px solid rgba(0,0,0,0.5)",
        "width": "10px",
        "height": "100%",
        "position": "absolute",
        "box-sizing": "border-box",
        "background": "transparent",
        "transform": "translateX(-50%)",
        "border-radius": "2px"
      },
      "attributes": {},
      "id": "5c08964d900983",
      "name": "component",
      "children": [],
      "metadata": {
        "bounds": {
          "left": 1193,
          "top": 471,
          "right": 1203,
          "bottom": 491
        }
      }
    },
    {
      "id": "236ecf1a47759",
      "label": "Preview",
      "is": "div",
      "name": "element",
      "attributes": {},
      "style": {
        "background": "grey"
      },
      "children": [
        {
          "id": "236ecf1a44568",
          "variant": [],
          "is": "67e386c762",
          "name": "component-instance",
          "attributes": {},
          "style": {
            "padding": "10px",
            "box-sizing": "border-box",
            "display": "inline-block",
            "flex-direction": "column",
            "font-family": "Helvetica",
            "color": "grey",
            "position": "relative",
            "background": "white",
            "top": "100px",
            "left": "100px"
          },
          "children": [
            {
              "id": "f4c968d148331",
              "propertyName": "style",
              "targetIdPath": [
                "f4c968d135444"
              ],
              "value": {},
              "name": "override",
              "children": []
            },
            {
              "id": "4197941155264",
              "propertyName": "style",
              "targetIdPath": [
                "4197941151996"
              ],
              "value": {},
              "name": "override",
              "children": []
            },
            {
              "id": "2477db583351",
              "propertyName": "style",
              "targetIdPath": [
                "41979411451593"
              ],
              "value": {
                "height": "140px"
              },
              "name": "override",
              "children": []
            }
          ],
          "metadata": {
            "bounds": {
              "left": 81,
              "top": 365,
              "right": 370.0470628523325,
              "bottom": 613.3866802446275
            }
          }
        }
      ],
      "metadata": {
        "bounds": {
          "left": -55,
          "top": 885,
          "right": 727.0920951245917,
          "bottom": 1455.5906702797574
        }
      }
    },
    {
      "label": "Picker",
      "is": "div",
      "style": {
        "background": "rgba(0,0,0,0.05)",
        "position": "relative",
        "height": "100px",
        "width": "100%"
      },
      "attributes": {},
      "id": "41979411419193",
      "name": "component",
      "children": [
        {
          "id": "41979411419192",
          "label": "canvas",
          "is": "canvas",
          "name": "element",
          "attributes": {},
          "style": {
            "width": "100%",
            "height": "100%"
          },
          "children": [],
          "metadata": {}
        },
        {
          "id": "41979411425672",
          "variant": [],
          "is": "5c08964d24625",
          "name": "component-instance",
          "attributes": {},
          "style": {
            "border": "1px solid rgba(0,0,0,0.5)",
            "width": "10px",
            "height": "10px",
            "position": "absolute",
            "box-sizing": "border-box",
            "background": "transparent",
            "transform": "translate(-50%, -50%)",
            "border-radius": "10px",
            "left": "10",
            "top": "0"
          },
          "children": [],
          "metadata": {},
          "label": "grabber"
        }
      ],
      "metadata": {
        "bounds": {
          "left": 524,
          "top": 157,
          "right": 624,
          "bottom": 257
        }
      },
      "controllers": [
        "./canvas-controller.tsx"
      ]
    },
    {
      "id": "65e6533276",
      "variant": [],
      "is": "97a34b151010442",
      "name": "component-instance",
      "attributes": {},
      "style": {},
      "children": [
        {
          "id": "65e6533277",
          "propertyName": "children",
          "targetIdPath": [
            "97a34b151010440"
          ],
          "name": "override",
          "children": [
            {
              "id": "65e6533278",
              "label": "Element",
              "is": "ul",
              "name": "element",
              "attributes": {},
              "style": {},
              "children": [
                {
                  "id": "65e6533279",
                  "label": "Element",
                  "is": "li",
                  "name": "element",
                  "attributes": {},
                  "style": {},
                  "children": [
                    {
                      "id": "65e6533280",
                      "name": "text",
                      "label": "Text",
                      "value": "Respect color type (hex, HSL, rgba)",
                      "style": {},
                      "children": [],
                      "metadata": {}
                    }
                  ],
                  "metadata": {}
                },
                {
                  "id": "65e65332236809",
                  "label": "Element",
                  "is": "li",
                  "name": "element",
                  "attributes": {},
                  "style": {},
                  "children": [
                    {
                      "id": "65e65332236810",
                      "name": "text",
                      "label": "Text",
                      "value": "HSL & Hex inputs",
                      "style": {},
                      "children": [],
                      "metadata": {}
                    }
                  ],
                  "metadata": {}
                }
              ],
              "metadata": {}
            }
          ],
          "metadata": {}
        },
        {
          "id": "65e6533281",
          "propertyName": "text",
          "targetIdPath": [
            "97a34b151010439"
          ],
          "value": " ",
          "name": "override",
          "children": []
        }
      ],
      "metadata": {
        "bounds": {
          "left": -333,
          "top": 427,
          "right": -39.34577295051213,
          "bottom": 627.7213373757045
        }
      },
      "label": "TODO"
    },
    {
      "id": "b471f07a92977",
      "name": "text",
      "label": "Text",
      "value": "Click to edit",
      "style": {},
      "children": [
        {
          "id": "b471f07a101416",
          "name": "text",
          "label": "Text",
          "value": "Click to edit",
          "style": {},
          "children": [],
          "metadata": {
            "bounds": {
              "left": -1089.7856533494144,
              "top": 566.6172932399484,
              "right": -989.7856533494144,
              "bottom": 666.6172932399484
            }
          }
        }
      ],
      "metadata": {
        "bounds": {
          "left": -1089.7856533494144,
          "top": 566.6172932399484,
          "right": -989.7856533494144,
          "bottom": 666.6172932399484
        }
      }
    },
    {
      "id": "832805368",
      "label": "Element",
      "is": "div",
      "name": "element",
      "attributes": {},
      "style": {
        "box-sizing": "border-box"
      },
      "children": [
        {
          "id": "83280538579",
          "name": "text",
          "label": "Text",
          "value": "Click to edit",
          "style": {},
          "children": [],
          "metadata": {
            "bounds": {
              "left": -1089.7856533494144,
              "top": 566.6172932399484,
              "right": -989.7856533494144,
              "bottom": 666.6172932399484
            }
          }
        }
      ],
      "metadata": {
        "bounds": {
          "left": -892.3919936899786,
          "top": 489.8733145492989,
          "right": -792.3919936899786,
          "bottom": 589.8733145492989
        }
      }
    },
    {
      "id": "b471f07a84538",
      "name": "text",
      "label": "Text",
      "value": "Click to edit",
      "style": {},
      "children": [],
      "metadata": {
        "bounds": {
          "left": -1089.7856533494144,
          "top": 566.6172932399484,
          "right": -989.7856533494144,
          "bottom": 666.6172932399484
        }
      }
    }
  ],
  "metadata": {}
}