fitbit-squared/settings/index.jsx

function Squared(props) {
  return (
    <Page>
      <Section
        title={<Text bold>Color Settings</Text>}>
        <Select
          label={`Digit Color`}
          settingsKey="digitColor"
          options={[
            {name:"Black Marble", value:"blackMarble", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkBAMAAACCzIhnAAAAFVBMVEUxLTE6OToxMTEpKCkpJCEpLSkxLSkJSerLAAAAUklEQVR4AWJAAEEsQAkOjAHt1KERADEMA8HmvoVvIf2XEGaRAGPNHvWsoCcEaSDI9yjnkMwUEARB1k8igw0EQZDtk0gNBEGQ9E9nyjUzCIIUkAvkduff9+hePgAAAABJRU5ErkJggg=="},
            {name:"White Marble", value:"whiteMarble", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAM1BMVEWtqq2toqWlpqWtpqW9srW9ur3Fvr3W19bFvsXW0tbFxsW9vr3Oxs7e39739/f////v7++ZeDKyAAAAV0lEQVR4Ae3NxQGFAAwFsK+47D8tDIC7pbfay/s1st4LZvsjEAgEAoFAfmPlSyEQCAQCgUDC8c8QCAQCgUAuhGS3RCAQCAQCgZQtw2rZ7HgEAoFAIBBIDZ3YVCVeA/QNAAAAAElFTkSuQmCC"},
            {name:"Orange Jelly", value:"orangeJello", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkBAMAAACCzIhnAAAAHlBMVEX/fQj/WQD/dQDmUQDWZQDvcQD/ZQj/ggj3dQD/YQik+4HRAAAAW0lEQVR4AWJAAEE4UIIDYzhwgQNA+3JMBTAMQzEQgymUgimUQiiEQiiEQtl202QE/+n2s1gsCWWhsHEGCcVisVw0Ch8KCcVisTQuzmAjoVgslsLCi8aDgGKxWH4BzWWMn+sDSwAAAABJRU5ErkJggg=="},
            {name:"Lava", value:"lava", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAOVBMVEXm0hnv20L/5ynvwiH30jr/6xn/0jH/ogD/mgD/4wDm1yH/qjr/qgD/6zH3ngjmZRn/TQD/RSnveUImK5OiAAAAV0lEQVR4AWJkwAIYAe3NAQYAIAxA0SAI0f0PWxcYYMbyPuDDS371CAQCgUAgkAmBQCAQCORLZASt9ggEAoFAIJAdzfYIBAKBQCCQE8yb++oRCAQCgUAgD1HRVNlIfSgpAAAAAElFTkSuQmCC"},
            {name:"Citrus", value:"citrus", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAM1BMVEXv31rvxkL324Tv10L346X366X354zvykLv42Pv20LvwmP315Tv21r331r376X353Pv0kJqeV04AAAAZ0lEQVR4Ae3NNwECARRAMXpv/tVi4E1w96fEQDZlG3ZhG/ZBIpFIJBLJfHIIx3AKx3AOEolEIpFI5pNLuIZzuIV7kEgkEolEMp9swyM8wyu8g0QikUgkkvnkE15/+ASJRCKRSCTjyRcAC0UQZL14mwAAAABJRU5ErkJggg=="},
            {name:"Salad", value:"salad", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkBAMAAACCzIhnAAAALVBMVEX392v39yne8xC98wje8wjF8wi99zHm81Lm7xDm6xDm7yHW6xDW70Lm7yne7ylt9AkdAAAASElEQVR4AWJkgANBQDt1UAIACARR1HB2spPlrGCBQTwPb08Dn3fdz4UgDQSZz3zCQhCkieSMIEgrGeFWfiEIghSRnTOCdBPkAqEboZH2xVF1AAAAAElFTkSuQmCC"},
            {name:"Forest", value:"forest", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAM1BMVEUZ5yl72xljshBaohBjuhAQqiEQtiEZzikZ4zEh3zEh3ykx3yFrvhkQmiEZ0jEZyiFCphl456u0AAAAXUlEQVR4Ae3NAQaAUBRE0b5ESvvfaQC1gQeM8nxnAJdxxhJsBA0CgXyLQCAQyBqcIZC+CAQCgUD2KREIBAKBQCBXcL6LdrZAIBAIBAKBbEU8ivYE7XcEAoFAIBDIC1HkVDmvkMAnAAAAAElFTkSuQmCC"},
            {name:"Mint", value:"mint", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkBAMAAACCzIhnAAAAIVBMVEW1+5z3//f////W+8W9+6Xv/+bF96W9+5zF+6X3/++1+6XoAIbdAAAAU0lEQVR4Ae3LMRWAMBAFwVg4C2chFmIhFrCABSxgAZV0S4OC/3b6GZ9CY2IhoVgsloWNAxupxWKxTDQKAwnFYrGcaFzoHwnFYrHceNAoRBWLxfICzAaeRfo19vcAAAAASUVORK5CYII="},
            {name:"Electric", value:"electric", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkBAMAAACCzIhnAAAALVBMVEUQ/3MI+2sQ+/8I+/8Z+3MQ+2sZ/3MA72MA59YA4+YA9/cA++YA6+8A7+8A45SSunamAAAAWUlEQVRYw+3WMQ0AIAxEUZCAhYrDExrQggSwgAW2sjSE+fI7XZq+zpeTT3mmOxkCgQgQ82jB4YZAIKKkBsvuqQZvIBCIAmmfVWFBIBApMp8FYQRFAgKBCJADohaViafomEQAAAAASUVORK5CYII="},
            {name:"Frost", value:"frost", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAM1BMVEX///+tzv+tyv+cwv+cxv+10v+91//e7//O6/+czv+lyv+lyvfv9/+lzvel1/el2/fe8/+FHV4hAAAAaElEQVR4Ae3NsRUBQQBAweUAsPqvVgM/EO27YKaBGf86hBGOQbI+kUgkEolkC6dwDpewBYlEIpFIJPtIruEWRrgHiUQikUgk65NHqHiEZ3gFiUQikUgk65N3+IQZvmGG5YlEIpFIJJIf7zv6AVp4kJcAAAAASUVORK5CYII="},
            {name:"Spotty Ice", value:"spottyIce", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAOVBMVEWlyvelwvelzvel1/djtvcQnu+l2/97xvdKnu9jru8IKFpKku8IQWMIRXMQouYxou8IQVoIRVoIWZRMFe9xAAAAYUlEQVR4Ae3YAQaAQBCF4RZRCLr/RRPqAgPseBbfAH68D4AZW3GjuUEgeQQCgUAge/PguwQCgUAgEAjknBh8inYsgUAgEAgEArkCz4I8AoFAIBAI5C7i19vyCAQCgUAgkB8sFnxNbAzCbwAAAABJRU5ErkJggg=="},
            {name:"Clear Water", value:"clearWater", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAPFBMVEVjXf9rgvdzafeMdfdrafdjivdSlvdSafdaffdamv9Saf9Siv9Kkv9jef9rYf9ajv9jnv9rmv9jgv97bf90pYKvAAAAXUlEQVR4Ae3NAQaAYAzH0b4IQuj+d10XGMYyyRvgZ39vbcmtl9s8AoFAIBAI5IBAIBAIBPJL5GyMI2k7BAKBQCCQTyBXZ1xs8wgEAoFAIJC7+BiNNo5AIBAIBAJ5AA31aQGn5Q7DAAAAAElFTkSuQmCC"},
            {name:"Cloud Cover", value:"cloudCover", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAANlBMVEXFsu/WzvfFuu/e2/fWyvfe0ve9su+tnubOxu/Wyu/e1/fOwu/m2/e9tua1pualjt6tot6lktYpVHzuAAAAZklEQVR4Ae3NNQEDARRAsaMy+zdbA2/+U2IgS1nDFvawhflEIpFIJBLJGio+SjgFiUQikUgk88kRzuESrmEP84lEIpFIJJJbuIc9PMIzzCcSiUQikUhe4R0+4Rt+QSKRSCQSyXjyBy5SCbDqRZu3AAAAAElFTkSuQmCC"},
            {name:"Amethyst", value:"amethyst", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAM1BMVEW9FO+9EO+lDM6MDL2cDMWcEOatHO+lKO+1EPe1EO/FGPfOJPetJPeMGPdzDN6EEPeUKO+QxRsXAAAAYElEQVR4Ae3OAQaAYBCE0bY/RN3/tFEXGKDKxhvAB29qCqt3GwQCgUAgkA+QEeJ85yEEAoFAIJAWyJoiBAKBQCC/RyDbw0hBIBAIBAJpgewhLqEdoY3QTggEAoFAIB2QCw+GLGHIj3WsAAAAAElFTkSuQmCC"},
            {name:"Void", value:"void", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkBAMAAACCzIhnAAAALVBMVEVSAGtjBHtrAIRzAIxzAJRrCIRzBJR7CJSEBKV7BJx7AJSMAK2cAL2UBLWMBLW7TliIAAAAUklEQVRYw+3UMREAIAwEQSIBT1jAAqKwgiewQJc0DJP65766ItvGiq9+K2YQCESAtCSpEAhEinTPwPNxOCAQiBRZnif7LiAQiADZD/IvCAQiQC4cwbLV6IRp0gAAAABJRU5ErkJggg=="},
            {name:"Orchid", value:"orchid", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAPFBMVEVzPYx7PYxrQZRzQYyERZSMQYyMPYyMQZycQZSUQYyUQXucSXulSYytTaWtVZS1WZy1Ya21cb2lab21Yb02zd0GAAAAYElEQVR4Ae3NAQaAQBiE0X4WQtD9r1p1gcGyWS1vAJ/h1RZWA+0ObT4CgUAgEAikfYzULxAIBAKBQCB7iFdobSkEAoFAIBDI0XuEQCAQCASyFHJ2Hp+BBoFAIBAIZDryAvysaJ0B2r8hAAAAAElFTkSuQmCC"},
            {name:"Peach", value:"peach", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkBAMAAACCzIhnAAAAKlBMVEXvipzvkpzvfXvvYXvvZWvvcYTvaYzvhqXvgoTvaYTvYXPvaZTvdZz3gpwxmHJ4AAAATklEQVRYw+3LMQ0AIAxEUZBQC3hCC1rwhAYsYIHtJkI6X36nn15eLbpIVoVAIAakK4+qQSAQezK/MwQCcSVLeZIFgUAcyHg8tyogEIgnuZkl0YkUM5s8AAAAAElFTkSuQmCC"},
            {name:"Rose", value:"rose", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAPFBMVEXmTXvmUXveNUrOJCHFICHePTrmUWPmSXPeQXPeNWveJELFICnFIELWIFrmRXPmUWveOTrmTVLmSXvmTWPMDo4dAAAAX0lEQVR4Ae3WAQaAAAyG0YYSBN3/pIW6wDCYJW+Az88DWCzJRX9rRiAQCAQCgazF4Z20LWnXJxAIBAKBQCB7wyMxj0AgEAgEAjl+iUAgEAgEAjmLw6fe5hEIBAKBQCAvrDxoTTe8DTYAAAAASUVORK5CYII="},
            {name:"Ruby", value:"ruby", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAP1BMVEWtEAitCAjFEAitHAi9HAjeIAjvKAjmIAjOJAj3LRnvLRnOFBDvICHvMSHvRSnWLRCtJBDFKBDmMRnvRTHvMTEmSGP4AAAAXElEQVR4AWJkwAIYKRADtDcXBQACABDAcLf+ZSEC7nufbFzYg0AgEAgEci6ytJjsgCEQCAQCgVyP5HvGEAgEAoFAHos0O8YBBAKBQCCQxyLDDiSEQCAQCATyVGQCskwsnQlcdKQAAAAASUVORK5CYII="},
            {name:"Sand", value:"sand", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAM1BMVEXWupTWspTeunvetoTWplq1ikrOjjHeqmPOpmveomvWklLFlmvmtoS1fUrWmlrOgjHFmlLNbQHKAAAAZ0lEQVR4Ae3NwRUBMABAMYUCxf7TWuCf+xySBXIoIxzDKZzD/kQikUgkEsklzHANtzDC/kQikUgkEsk9PMIzjPAfiUQikUgkkldY4R0+YYb9iUQikUgkkhW+YYUZKt6eSCQSiUQi+QHbkywQRzo7IQAAAABJRU5ErkJggg=="},
          ]}
          renderItem={
            (option) =>
              <TextImageRow
                label={option.name}
                //sublabel="Sub-Label"
                icon={option.icon}
              />
          }
          onSelection={(selection) => console.log(selection)}
        />
        <Select
          label={`Ornament Color`}
          settingsKey="ornamentColor"
          options={[
            {name:"Black Marble", value:"blackMarble", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkBAMAAACCzIhnAAAAFVBMVEUxLTE6OToxMTEpKCkpJCEpLSkxLSkJSerLAAAAUklEQVR4AWJAAEEsQAkOjAHt1KERADEMA8HmvoVvIf2XEGaRAGPNHvWsoCcEaSDI9yjnkMwUEARB1k8igw0EQZDtk0gNBEGQ9E9nyjUzCIIUkAvkduff9+hePgAAAABJRU5ErkJggg=="},
            {name:"White Marble", value:"whiteMarble", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAM1BMVEWtqq2toqWlpqWtpqW9srW9ur3Fvr3W19bFvsXW0tbFxsW9vr3Oxs7e39739/f////v7++ZeDKyAAAAV0lEQVR4Ae3NxQGFAAwFsK+47D8tDIC7pbfay/s1st4LZvsjEAgEAoFAfmPlSyEQCAQCgUDC8c8QCAQCgUAuhGS3RCAQCAQCgZQtw2rZ7HgEAoFAIBBIDZ3YVCVeA/QNAAAAAElFTkSuQmCC"},
            {name:"Orange Jelly", value:"orangeJello", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkBAMAAACCzIhnAAAAHlBMVEX/fQj/WQD/dQDmUQDWZQDvcQD/ZQj/ggj3dQD/YQik+4HRAAAAW0lEQVR4AWJAAEE4UIIDYzhwgQNA+3JMBTAMQzEQgymUgimUQiiEQiiEQtl202QE/+n2s1gsCWWhsHEGCcVisVw0Ch8KCcVisTQuzmAjoVgslsLCi8aDgGKxWH4BzWWMn+sDSwAAAABJRU5ErkJggg=="},
            {name:"Lava", value:"lava", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAOVBMVEXm0hnv20L/5ynvwiH30jr/6xn/0jH/ogD/mgD/4wDm1yH/qjr/qgD/6zH3ngjmZRn/TQD/RSnveUImK5OiAAAAV0lEQVR4AWJkwAIYAe3NAQYAIAxA0SAI0f0PWxcYYMbyPuDDS371CAQCgUAgkAmBQCAQCORLZASt9ggEAoFAIJAdzfYIBAKBQCCQE8yb++oRCAQCgUAgD1HRVNlIfSgpAAAAAElFTkSuQmCC"},
            {name:"Citrus", value:"citrus", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAM1BMVEXv31rvxkL324Tv10L346X366X354zvykLv42Pv20LvwmP315Tv21r331r376X353Pv0kJqeV04AAAAZ0lEQVR4Ae3NNwECARRAMXpv/tVi4E1w96fEQDZlG3ZhG/ZBIpFIJBLJfHIIx3AKx3AOEolEIpFI5pNLuIZzuIV7kEgkEolEMp9swyM8wyu8g0QikUgkkvnkE15/+ASJRCKRSCTjyRcAC0UQZL14mwAAAABJRU5ErkJggg=="},
            {name:"Salad", value:"salad", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkBAMAAACCzIhnAAAALVBMVEX392v39yne8xC98wje8wjF8wi99zHm81Lm7xDm6xDm7yHW6xDW70Lm7yne7ylt9AkdAAAASElEQVR4AWJkgANBQDt1UAIACARR1HB2spPlrGCBQTwPb08Dn3fdz4UgDQSZz3zCQhCkieSMIEgrGeFWfiEIghSRnTOCdBPkAqEboZH2xVF1AAAAAElFTkSuQmCC"},
            {name:"Forest", value:"forest", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAM1BMVEUZ5yl72xljshBaohBjuhAQqiEQtiEZzikZ4zEh3zEh3ykx3yFrvhkQmiEZ0jEZyiFCphl456u0AAAAXUlEQVR4Ae3NAQaAUBRE0b5ESvvfaQC1gQeM8nxnAJdxxhJsBA0CgXyLQCAQyBqcIZC+CAQCgUD2KREIBAKBQCBXcL6LdrZAIBAIBAKBbEU8ivYE7XcEAoFAIBDIC1HkVDmvkMAnAAAAAElFTkSuQmCC"},
            {name:"Mint", value:"mint", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkBAMAAACCzIhnAAAAIVBMVEW1+5z3//f////W+8W9+6Xv/+bF96W9+5zF+6X3/++1+6XoAIbdAAAAU0lEQVR4Ae3LMRWAMBAFwVg4C2chFmIhFrCABSxgAZV0S4OC/3b6GZ9CY2IhoVgsloWNAxupxWKxTDQKAwnFYrGcaFzoHwnFYrHceNAoRBWLxfICzAaeRfo19vcAAAAASUVORK5CYII="},
            {name:"Electric", value:"electric", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkBAMAAACCzIhnAAAALVBMVEUQ/3MI+2sQ+/8I+/8Z+3MQ+2sZ/3MA72MA59YA4+YA9/cA++YA6+8A7+8A45SSunamAAAAWUlEQVRYw+3WMQ0AIAxEUZCAhYrDExrQggSwgAW2sjSE+fI7XZq+zpeTT3mmOxkCgQgQ82jB4YZAIKKkBsvuqQZvIBCIAmmfVWFBIBApMp8FYQRFAgKBCJADohaViafomEQAAAAASUVORK5CYII="},
            {name:"Frost", value:"frost", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAM1BMVEX///+tzv+tyv+cwv+cxv+10v+91//e7//O6/+czv+lyv+lyvfv9/+lzvel1/el2/fe8/+FHV4hAAAAaElEQVR4Ae3NsRUBQQBAweUAsPqvVgM/EO27YKaBGf86hBGOQbI+kUgkEolkC6dwDpewBYlEIpFIJPtIruEWRrgHiUQikUgk65NHqHiEZ3gFiUQikUgk65N3+IQZvmGG5YlEIpFIJJIf7zv6AVp4kJcAAAAASUVORK5CYII="},
            {name:"Spotty Ice", value:"spottyIce", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAOVBMVEWlyvelwvelzvel1/djtvcQnu+l2/97xvdKnu9jru8IKFpKku8IQWMIRXMQouYxou8IQVoIRVoIWZRMFe9xAAAAYUlEQVR4Ae3YAQaAQBCF4RZRCLr/RRPqAgPseBbfAH68D4AZW3GjuUEgeQQCgUAge/PguwQCgUAgEAjknBh8inYsgUAgEAgEArkCz4I8AoFAIBAI5C7i19vyCAQCgUAgkB8sFnxNbAzCbwAAAABJRU5ErkJggg=="},
            {name:"Clear Water", value:"clearWater", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAPFBMVEVjXf9rgvdzafeMdfdrafdjivdSlvdSafdaffdamv9Saf9Siv9Kkv9jef9rYf9ajv9jnv9rmv9jgv97bf90pYKvAAAAXUlEQVR4Ae3NAQaAYAzH0b4IQuj+d10XGMYyyRvgZ39vbcmtl9s8AoFAIBAI5IBAIBAIBPJL5GyMI2k7BAKBQCCQTyBXZ1xs8wgEAoFAIJC7+BiNNo5AIBAIBAJ5AA31aQGn5Q7DAAAAAElFTkSuQmCC"},
            {name:"Cloud Cover", value:"cloudCover", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAANlBMVEXFsu/WzvfFuu/e2/fWyvfe0ve9su+tnubOxu/Wyu/e1/fOwu/m2/e9tua1pualjt6tot6lktYpVHzuAAAAZklEQVR4Ae3NNQEDARRAsaMy+zdbA2/+U2IgS1nDFvawhflEIpFIJBLJGio+SjgFiUQikUgk88kRzuESrmEP84lEIpFIJJJbuIc9PMIzzCcSiUQikUhe4R0+4Rt+QSKRSCQSyXjyBy5SCbDqRZu3AAAAAElFTkSuQmCC"},
            {name:"Amethyst", value:"amethyst", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAM1BMVEW9FO+9EO+lDM6MDL2cDMWcEOatHO+lKO+1EPe1EO/FGPfOJPetJPeMGPdzDN6EEPeUKO+QxRsXAAAAYElEQVR4Ae3OAQaAYBCE0bY/RN3/tFEXGKDKxhvAB29qCqt3GwQCgUAgkA+QEeJ85yEEAoFAIJAWyJoiBAKBQCC/RyDbw0hBIBAIBAJpgewhLqEdoY3QTggEAoFAIB2QCw+GLGHIj3WsAAAAAElFTkSuQmCC"},
            {name:"Void", value:"void", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkBAMAAACCzIhnAAAALVBMVEVSAGtjBHtrAIRzAIxzAJRrCIRzBJR7CJSEBKV7BJx7AJSMAK2cAL2UBLWMBLW7TliIAAAAUklEQVRYw+3UMREAIAwEQSIBT1jAAqKwgiewQJc0DJP65766ItvGiq9+K2YQCESAtCSpEAhEinTPwPNxOCAQiBRZnif7LiAQiADZD/IvCAQiQC4cwbLV6IRp0gAAAABJRU5ErkJggg=="},
            {name:"Orchid", value:"orchid", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAPFBMVEVzPYx7PYxrQZRzQYyERZSMQYyMPYyMQZycQZSUQYyUQXucSXulSYytTaWtVZS1WZy1Ya21cb2lab21Yb02zd0GAAAAYElEQVR4Ae3NAQaAQBiE0X4WQtD9r1p1gcGyWS1vAJ/h1RZWA+0ObT4CgUAgEAikfYzULxAIBAKBQCB7iFdobSkEAoFAIBDI0XuEQCAQCASyFHJ2Hp+BBoFAIBAIZDryAvysaJ0B2r8hAAAAAElFTkSuQmCC"},
            {name:"Peach", value:"peach", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkBAMAAACCzIhnAAAAKlBMVEXvipzvkpzvfXvvYXvvZWvvcYTvaYzvhqXvgoTvaYTvYXPvaZTvdZz3gpwxmHJ4AAAATklEQVRYw+3LMQ0AIAxEUZBQC3hCC1rwhAYsYIHtJkI6X36nn15eLbpIVoVAIAakK4+qQSAQezK/MwQCcSVLeZIFgUAcyHg8tyogEIgnuZkl0YkUM5s8AAAAAElFTkSuQmCC"},
            {name:"Rose", value:"rose", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAPFBMVEXmTXvmUXveNUrOJCHFICHePTrmUWPmSXPeQXPeNWveJELFICnFIELWIFrmRXPmUWveOTrmTVLmSXvmTWPMDo4dAAAAX0lEQVR4Ae3WAQaAAAyG0YYSBN3/pIW6wDCYJW+Az88DWCzJRX9rRiAQCAQCgazF4Z20LWnXJxAIBAKBQCB7wyMxj0AgEAgEAjl+iUAgEAgEAjmLw6fe5hEIBAKBQCAvrDxoTTe8DTYAAAAASUVORK5CYII="},
            {name:"Ruby", value:"ruby", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAP1BMVEWtEAitCAjFEAitHAi9HAjeIAjvKAjmIAjOJAj3LRnvLRnOFBDvICHvMSHvRSnWLRCtJBDFKBDmMRnvRTHvMTEmSGP4AAAAXElEQVR4AWJkwAIYKRADtDcXBQACABDAcLf+ZSEC7nufbFzYg0AgEAgEci6ytJjsgCEQCAQCgVyP5HvGEAgEAoFAHos0O8YBBAKBQCCQxyLDDiSEQCAQCATyVGQCskwsnQlcdKQAAAAASUVORK5CYII="},
            {name:"Sand", value:"sand", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAM1BMVEXWupTWspTeunvetoTWplq1ikrOjjHeqmPOpmveomvWklLFlmvmtoS1fUrWmlrOgjHFmlLNbQHKAAAAZ0lEQVR4Ae3NwRUBMABAMYUCxf7TWuCf+xySBXIoIxzDKZzD/kQikUgkEsklzHANtzDC/kQikUgkEsk9PMIzjPAfiUQikUgkkldY4R0+YYb9iUQikUgkkhW+YYUZKt6eSCQSiUQi+QHbkywQRzo7IQAAAABJRU5ErkJggg=="},
          ]}
          renderItem={
            (option) =>
              <TextImageRow
                label={option.name}
                //sublabel="Sub-Label"
                icon={option.icon}
              />
          }
          onSelection={(selection) => console.log(selection)}
        />
      </Section>
      <Section
        title={<Text bold>Display Elements</Text>}>
        <AdditiveList
          settingsKey="elements"
          minItems="4"
          maxItems="4"
          addAction={
              <Select
              label="Add Item"
              options={[
                { name: 'Hours', required: true, value: 'hr' },
                { name: 'Minutes', required: true, value: 'min' },
                { name: 'Day', required: true, value: 'day' },
                { name: 'Month', required: true, value: 'mon' },
                { name: 'Day of the Week', required: true, value: 'wkd' }
              ]}
            />
          }
        />
      </Section>
    </Page>
  );
}

registerSettingsPage(Squared);