REBOL []

svvc/field: svvc/field-select: :white

radio.png: 64#{
iVBORw0KGgoAAAANSUhEUgAAAA0AAABOCAMAAADM+WyMAAAAYFBMVEXm6tgAAADl
lwD4tDX5vkv6x2H80nr+35omfAgAmQAiwCAAM2YcUYAAZplkh9yLqeW7mVVveWes
qJm5tanHxbLJx7rV0MTX1Mrk4tnp6OHw8Or09PD6+vj///////////8ZfvgJAAAA
AXRSTlMAQObYZgAAABR0RVh0QXV0aG9yAHJvc3MtZ2lsbC5jb23+kkarAAABC0lE
QVR42q2SwY6FIAxFTUCLNAESeUGe+v+/ObQUMK5mJrLy5Mb2pLnTRA8Rp/YQvfeN
0e97zl+PN/gejChwHMiRwFlC9A2EBIgmbHDyFC/QVtzg4fLw/L+1tXZYW7uuplsX
WE23psgMa0PwsrVzrlu7GOPn4/AGKTGiQEpYI4Z9L2EhgUoNMv2IDTJPcQJtRRrw
cHnNutx6WPOtuzXfulvzrYe1IXjZOmyhW4cMCywBG6is9MyIJ3BdZk0qoSRUWKVL
iNsiVVZEJatA2YSL5lIoxVPCPKvyrdoKrZUWYJcQfmkdt9it4926AFwwrC/qdbWO
AHxrEOur9pqtKaNbQ7emXutuDSfov1n/AKEtLeiUQklgAAAAAElFTkSuQmCC
}

arrow.png: 64#{
iVBORw0KGgoAAAANSUhEUgAAAA0AAAAaBAMAAACeFstsAAAAMFBMVEX09PB4n+yW
tu+lvO6sxPK2yfG7zfXF1PXQ2/X///////////////////////////+VljhEAAAA
AXRSTlMAQObYZgAAABR0RVh0QXV0aG9yAHJvc3MtZ2lsbC5jb23+kkarAAAAbUlE
QVR42oXNqxGAMBCE4bVIJDYDFQSB5wRYJqECSAmkBMCFGQzdsrxi+c03Z/aAgwUg
EdYC+zJ7NwTqp1uezlD/6R4nKpSMr/2tNVKGuPftxz8py4CtU0o1AVthRapL8yqP
+Y+11pomC1vjnxM2ZkI8rWYGrAAAAABJRU5ErkJggg==
}

check.png: 64#{
iVBORw0KGgoAAAANSUhEUgAAAA0AAABOCAMAAADM+WyMAAAAYFBMVEXm6tgAAADl
lwD4tDX5vkv6x2H80nr+35omfAgAmQAiwCAAM2YcUYAAZplkh9yLqeW7mVVveWes
qJm5tanHxbLJx7rV0MTX1Mrk4tnp6OHw8Or09PD6+vj///////////8ZfvgJAAAA
AXRSTlMAQObYZgAAABR0RVh0QXV0aG9yAHJvc3MtZ2lsbC5jb23+kkarAAAA10lE
QVR42q3S0QqDMBBEUTGJZsHHisb2/7+z2dnZ1T6KDVI4CvUKMyzXMyw7TmvH8XYB
LgNFfCAHFFCdgAKqE1BAdUL123m/Wq7VIqwWQFgtYrBqEQOrCa+Wx9UvO+u6bSFF
CHAZdhPQvwVyQI6mCrSmCqjwbwC1n3paXa/VtbK6ApXV/TZg1bUCXm2I6vq4ep6n
fkq/soroP3jGubhsO9A0c70uG+yUIa43J9XEHSRVKdxBGrty1pfllKhcSsc4pj9U
y7VahJ3ctct2zWru2qtt11Ett6u/gxtEmLrFaPMAAAAASUVORK5CYII=
}

arrow-dark.png: 64#{
iVBORw0KGgoAAAANSUhEUgAAAA0AAAAaBAMAAACeFstsAAAAMFBMVEXm6tgzRGYz
VXc8XoJEZo5Nb5lVd6RegLBmiLv///////////////////////////+QuG1wAAAA
AXRSTlMAQObYZgAAABR0RVh0QXV0aG9yAHJvc3MtZ2lsbC5jb23+kkarAAAAbUlE
QVR42oXNqxGAMBCE4bVIJDYDFQSB5wRYJqECSAmkBMCFGQzdsrxi+c03Z/aAgwUg
EdYC+zJ7NwTqp1uezlD/6R4nKpSMr/2tNVKGuPftxz8py4CtU0o1AVthRapL8yqP
+Y+11pomC1vjnxM2ZkI8rWYGrAAAAABJRU5ErkJggg==
}

button-highlight.png: 64#{
iVBORw0KGgoAAAANSUhEUgAAAAkAAABMCAMAAACI2m39AAAASFBMVEXs6dgAAAD/
//8cUYDllwD4tDX5vkv6x2H80nr+35pNn+ForOiCue+dxvW30/zS7P/V0MTX1Mrg
3Mnk4tnp6OHw8Or09PD6+vjq73EdAAAAA3RSTlMA/5nggRJMAAAAFHRFWHRBdXRo
b3IAcm9zcy1naWxsLmNvbf6SRqsAAAC8SURBVHjapdDbDoMgEEVRIgWhXA0M/P+f
dmaQB2lMTbqfVoyYg0IIiQlKdkxOILdTbarBFFRSw36oTNVTAEMA36pYYRUsZ5SQ
OQ+MpQyxYULMZwP83gQfkcdRSuUtiL9U7sVcTuA9+B+Myz1ZbzFebw1m6SvW9L7K
kAxrb21ftJP2O2kNoPVVSgEoNVTrFMXrX9iT9Qnj9Sliib6SYu+rIimyQmthUSCF
O3kP4P1VzgE4N1TrFMXr39jN+g/kThocD7rqLwAAAABJRU5ErkJggg==
}

button.png: 64#{
eJzrDPBz5+WS4mJgYOD19HAJAtLsQOzBwQwSaZKPAFIJAT4hrm9e3gAy////LxPY
8HQ6w48tpj/3ef86nvjnUtW/+7N85z/MWPOiaef7uce+br/859Kb/1cvHLl+5dSD
OyefPLr58sXDDx9effny4devHww4gNUCuYdAirEkyC+YweHZjTQgR6TENaLEsbQk
I7+IoSi/uFg3PTMnRy85P/ffJLfVQPkVni6OIRW3pp6/yXVEgYc14OCuq1tnvPj/
/6VKlJXYnPaPT2M6JkgrtkwJujB5b7nlQ4Ocy23BLJu2frts1arJJ3ifySE1e+3S
D4eMKqpsak8ZP1NYv5rp/c5X96+tlblWz1BzXGPX28dzHm/cfC1I4be3d9Q1k81Z
HpsDs69UBWqGZHFs7xL9ZNGXO3+OcX+xVyfTzXg1o40bj171ONarmMDRfW/xd+cd
X9dMeF5Z97uGYedZkY7A5XeegDzq6ernss4poQkAAeerq3oBAAA=
}

stylize/master [
    BTN: BTN -1x22 font-size 11 with [
        clipping: [size 9x19 default 0x0 down 0x19 hover 0x38]
        feel: make svvf/button [
            over: func [face over? offset][
                face/effect/crop: either over? [
                    face/clipping/hover
                ][
                    either face/state [face/clipping/down][face/clipping/default]
                ]
                show face
            ]
            engage: func [face action event /local do-it down-it][
                switch action [
                    time [if not face/state [face/blinker: not face/blinker]]
                    down [face/state: on face/effect/crop: face/clipping/down]
                    alt-down [face/state: on face/effect/crop: face/clipping/down]
                    up   [if face/state [do-face face face/text] face/state: off face/effect/crop: face/clipping/default]
                    alt-up [if face/state [do-face-alt face face/text] face/state: off face/effect/crop: face/clipping/default]
                    over [face/state: on]
                    away [face/state: off]
                ]
                cue face action
                show face
            ]
        ]

        init: [
            if size/x = -1 [
                either text [
                    size/x: 1000
                    state: size-text self
                    size/x: either state [state/x + font/offset/x][50]
                    state: none
                ][
                    size/x: 50
                ]
            ]
            if font/colors [font/color: first font/colors]
            if not any [images image][
                image: load button-highlight.png
                if not any [colors color][color: 220.220.220]
            ]
            if colors [color: colors/1]
            if all [image not effect] [
                effect: reduce ['crop clipping/default clipping/size 'extend 'anti-alias]
                if color []
            ]
            color: none
        ]
    ]

    BTN-ENTER: BTN "Enter" with [clipping/default: 0x57]

    BTN-CANCEL: BTN "Cancel"

    BTN-HELP: BTN bold "?" 22x22 with [keycode: 'f1] [notify "Help is not available."]

    FIELD: FIELD 200x24 with [
        color: white
        colors: reduce [svvc/field svvc/field-select]
        edge: [size: 1x1 color: 127.157.185 effect: none]
        init: [
            if color [colors: reduce [color colors/2]]
            if not string? text [text: either text [form text][copy ""]]
            if not flag-face? self hide [data: text]
        ]
    ]
]