@epam/uui 5.5.2 → 5.5.4

package/components/pickers/__tests__/__snapshots__/PickerModal.test.tsx.snap

@@ -1,2062 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`PickerModal should be rendered correctly 1`] = `
-<div
-  className="container modalBlocker"
-  style={
-    Object {
-      "zIndex": 1,
-    }
-  }
->
-  <div
-    aria-label="Click to close a modal"
-    className="uui-modal-blocker"
-    onClick={[Function]}
-  />
-  <div
-    aria-modal={true}
-    className="uui-modal-window root modal container"
-    role="dialog"
-    style={
-      Object {
-        "height": "700px",
-        "width": "600px",
-      }
-    }
-  >
-    <div
-      className="uui-flex-row root size-36 padding-24 vPadding-12 spacing-12 root modalHeader container align-items-center"
-      style={
-        Object {
-          "columnGap": undefined,
-          "rowGap": undefined,
-        }
-      }
-    >
-      <div
-        className="root uui-text uui-color-primary uui-font-weight-600 uui-font-style-normal uui-typography line-height-24 font-size-18 v-padding-12 container"
-      >
-        Please select
-      </div>
-      <div
-        className="flexSpacer"
-      />
-      <div
-        className="flexCell"
-        style={
-          Object {
-            "alignSelf": undefined,
-            "flexBasis": "auto",
-            "flexGrow": undefined,
-            "flexShrink": 0,
-            "minWidth": 0,
-            "textAlign": undefined,
-          }
-        }
-      >
-        <button
-          aria-label="Close modal"
-          className="container uui-button-box uui-enabled -clickable uui-icon_button uui-color-neutral root"
-          onClick={[Function]}
-          tabIndex={0}
-          type="button"
-        >
-          <div
-            className="container uui-icon uui-enabled"
-            style={Object {}}
-          >
-            <svg
-              className=""
-            />
-          </div>
-        </button>
-      </div>
-    </div>
-    <div
-      className="flexCell subHeaderWrapper"
-      style={
-        Object {
-          "alignSelf": undefined,
-          "flexBasis": "0",
-          "flexGrow": undefined,
-          "flexShrink": undefined,
-          "minWidth": 0,
-          "textAlign": undefined,
-        }
-      }
-    >
-      <div
-        className="uui-flex-row root size-36 vPadding-24 container align-items-center"
-        style={
-          Object {
-            "columnGap": undefined,
-            "rowGap": undefined,
-          }
-        }
-      >
-        <div
-          className="container uui-input-box -clickable root size-36 mode-form"
-          onFocus={[Function]}
-          tabIndex={-1}
-        >
-          <div
-            className="container uui-icon uui-enabled"
-            style={Object {}}
-          >
-            <svg
-              className=""
-            />
-          </div>
-          <input
-            aria-invalid={false}
-            autoFocus={true}
-            className="uui-input"
-            inputMode="search"
-            onBlur={[Function]}
-            onChange={[Function]}
-            onFocus={[Function]}
-            onKeyDown={[Function]}
-            placeholder="Type text for quick search"
-            tabIndex={0}
-            type="search"
-            value=""
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="uui-flex-row root size-36 body modal undefined container align-items-center"
-      style={
-        Object {
-          "columnGap": undefined,
-          "maxHeight": undefined,
-          "maxWidth": undefined,
-          "rowGap": undefined,
-        }
-      }
-    >
-      <div
-        className="root root uui-scroll-bars uui-shadow-top uui-shadow-bottom scrollContainer"
-        style={
-          Object {
-            "display": "flex",
-            "height": "100%",
-            "overflow": "hidden",
-            "position": "relative",
-            "width": "100%",
-          }
-        }
-      >
-        <div
-          style={
-            Object {
-              "WebkitOverflowScrolling": "touch",
-              "bottom": 0,
-              "display": "flex",
-              "flex": "1 1 auto",
-              "flexDirection": "column",
-              "left": 0,
-              "marginBottom": 0,
-              "marginRight": 0,
-              "overflow": "scroll",
-              "position": "relative",
-              "right": 0,
-              "top": 0,
-            }
-          }
-        >
-          <div
-            className="listContainer"
-            style={
-              Object {
-                "minHeight": "0px",
-              }
-            }
-          >
-            <div
-              style={
-                Object {
-                  "marginTop": 0,
-                }
-              }
-            >
-              <div
-                aria-posinset={1}
-                aria-selected={false}
-                className="uui-flex-row pickerRow container -clickable align-items-center"
-                onClick={[Function]}
-                role="option"
-                style={
-                  Object {
-                    "columnGap": undefined,
-                    "rowGap": undefined,
-                  }
-                }
-              >
-                <div
-                  className="flexCell cell data-picker-cell size-36 padding-24 padding-left-24 align-widgets-top"
-                  role="cell"
-                  style={
-                    Object {
-                      "alignSelf": undefined,
-                      "flexBasis": "0",
-                      "flexGrow": 1,
-                      "flexShrink": undefined,
-                      "minWidth": 0,
-                      "textAlign": undefined,
-                    }
-                  }
-                >
-                  <div
-                    className="contentWrapper"
-                  >
-                    <div
-                      className="renderItem"
-                    >
-                      <div
-                        className="flexCell root uui-typography"
-                        style={
-                          Object {
-                            "alignSelf": undefined,
-                            "flexBasis": "auto",
-                            "flexGrow": undefined,
-                            "flexShrink": undefined,
-                            "minWidth": 0,
-                            "textAlign": undefined,
-                          }
-                        }
-                      >
-                        <div
-                          className="uui-flex-row root size-36 spacing-12 container align-items-center"
-                          style={
-                            Object {
-                              "columnGap": undefined,
-                              "rowGap": undefined,
-                            }
-                          }
-                        >
-                          <div
-                            className="flexCell"
-                            style={
-                              Object {
-                                "alignSelf": undefined,
-                                "flexBasis": "auto",
-                                "flexGrow": undefined,
-                                "flexShrink": undefined,
-                                "minWidth": 0,
-                                "textAlign": undefined,
-                              }
-                            }
-                          >
-                            <div
-                              className="root uui-text uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography line-height-18 font-size-14 v-padding-9 text container"
-                            >
-                              Elementary
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                      <div
-                        className="flexSpacer"
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                aria-posinset={2}
-                aria-selected={false}
-                className="uui-flex-row pickerRow container -clickable align-items-center"
-                onClick={[Function]}
-                role="option"
-                style={
-                  Object {
-                    "columnGap": undefined,
-                    "rowGap": undefined,
-                  }
-                }
-              >
-                <div
-                  className="flexCell cell data-picker-cell size-36 padding-24 padding-left-24 align-widgets-top"
-                  role="cell"
-                  style={
-                    Object {
-                      "alignSelf": undefined,
-                      "flexBasis": "0",
-                      "flexGrow": 1,
-                      "flexShrink": undefined,
-                      "minWidth": 0,
-                      "textAlign": undefined,
-                    }
-                  }
-                >
-                  <div
-                    className="contentWrapper"
-                  >
-                    <div
-                      className="renderItem"
-                    >
-                      <div
-                        className="flexCell root uui-typography"
-                        style={
-                          Object {
-                            "alignSelf": undefined,
-                            "flexBasis": "auto",
-                            "flexGrow": undefined,
-                            "flexShrink": undefined,
-                            "minWidth": 0,
-                            "textAlign": undefined,
-                          }
-                        }
-                      >
-                        <div
-                          className="uui-flex-row root size-36 spacing-12 container align-items-center"
-                          style={
-                            Object {
-                              "columnGap": undefined,
-                              "rowGap": undefined,
-                            }
-                          }
-                        >
-                          <div
-                            className="flexCell"
-                            style={
-                              Object {
-                                "alignSelf": undefined,
-                                "flexBasis": "auto",
-                                "flexGrow": undefined,
-                                "flexShrink": undefined,
-                                "minWidth": 0,
-                                "textAlign": undefined,
-                              }
-                            }
-                          >
-                            <div
-                              className="root uui-text uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography line-height-18 font-size-14 v-padding-9 text container"
-                            >
-                              Elementary+
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                      <div
-                        className="flexSpacer"
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="container uui-blocker-container root"
-          style={
-            Object {
-              "minHeight": undefined,
-            }
-          }
-        >
-          <div />
-        </div>
-        <div
-          className="uui-track-horizontal"
-          style={
-            Object {
-              "display": "none",
-              "height": 6,
-              "position": "absolute",
-            }
-          }
-        >
-          <div
-            className="uui-thumb-horizontal"
-          />
-        </div>
-        <div
-          className="uui-track-vertical"
-          style={
-            Object {
-              "display": "none",
-              "position": "absolute",
-              "width": 6,
-            }
-          }
-        >
-          <div
-            className="uui-thumb-vertical"
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="uui-flex-row root size-36 padding-24 vPadding-24 spacing-12 root modalFooter container align-items-center"
-      style={
-        Object {
-          "columnGap": undefined,
-          "rowGap": undefined,
-        }
-      }
-    >
-      <div
-        className="flexSpacer"
-      />
-      <button
-        className="container uui-button-box uui-enabled -clickable root uui-button uui-fill-outline uui-color-secondary uui-size-36"
-        onClick={[Function]}
-        tabIndex={0}
-        type="button"
-      >
-        <div
-          className="uui-caption"
-        >
-          Cancel
-        </div>
-      </button>
-      <button
-        className="container uui-button-box uui-enabled -clickable root uui-button uui-fill-solid uui-color-accent uui-size-36"
-        onClick={[Function]}
-        tabIndex={0}
-        type="button"
-      >
-        <div
-          className="uui-caption"
-        >
-          Select
-        </div>
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`PickerModal should be rendered correctly with maximum props 1`] = `
-<div
-  className="container modalBlocker"
-  style={
-    Object {
-      "zIndex": 1,
-    }
-  }
->
-  <div
-    aria-label="Click to close a modal"
-    className="uui-modal-blocker"
-    onClick={[Function]}
-  />
-  <div
-    aria-modal={true}
-    className="uui-modal-window root modal container"
-    role="dialog"
-    style={
-      Object {
-        "height": "700px",
-        "width": "600px",
-      }
-    }
-  >
-    <div
-      className="uui-flex-row root size-36 padding-24 vPadding-12 spacing-12 root modalHeader container align-items-center"
-      style={
-        Object {
-          "columnGap": undefined,
-          "rowGap": undefined,
-        }
-      }
-    >
-      <div
-        className="root uui-text uui-color-primary uui-font-weight-600 uui-font-style-normal uui-typography line-height-24 font-size-18 v-padding-12 container"
-      >
-        Please select
-      </div>
-      <div
-        className="flexSpacer"
-      />
-      <div
-        className="flexCell"
-        style={
-          Object {
-            "alignSelf": undefined,
-            "flexBasis": "auto",
-            "flexGrow": undefined,
-            "flexShrink": 0,
-            "minWidth": 0,
-            "textAlign": undefined,
-          }
-        }
-      >
-        <button
-          aria-label="Close modal"
-          className="container uui-button-box uui-enabled -clickable uui-icon_button uui-color-neutral root"
-          onClick={[Function]}
-          tabIndex={0}
-          type="button"
-        >
-          <div
-            className="container uui-icon uui-enabled"
-            style={Object {}}
-          >
-            <svg
-              className=""
-            />
-          </div>
-        </button>
-      </div>
-    </div>
-    <div
-      className="flexCell subHeaderWrapper"
-      style={
-        Object {
-          "alignSelf": undefined,
-          "flexBasis": "0",
-          "flexGrow": undefined,
-          "flexShrink": undefined,
-          "minWidth": 0,
-          "textAlign": undefined,
-        }
-      }
-    >
-      <div
-        className="uui-flex-row root size-36 vPadding-24 container align-items-center"
-        style={
-          Object {
-            "columnGap": undefined,
-            "rowGap": undefined,
-          }
-        }
-      >
-        <div
-          className="container uui-input-box -clickable root size-36 mode-form"
-          onFocus={[Function]}
-          tabIndex={-1}
-        >
-          <div
-            className="container uui-icon uui-enabled"
-            style={Object {}}
-          >
-            <svg
-              className=""
-            />
-          </div>
-          <input
-            aria-invalid={false}
-            autoFocus={true}
-            className="uui-input"
-            inputMode="search"
-            onBlur={[Function]}
-            onChange={[Function]}
-            onFocus={[Function]}
-            onKeyDown={[Function]}
-            placeholder="Type text for quick search"
-            tabIndex={0}
-            type="search"
-            value=""
-          />
-        </div>
-      </div>
-      <label
-        className="uui-switch container root size-18 uui-color-primary switch uui-disabled"
-      >
-        <div
-          className="uui-switch-body"
-        >
-          <input
-            aria-checked={false}
-            aria-disabled={true}
-            checked={false}
-            disabled={true}
-            onChange={[Function]}
-            role="switch"
-            type="checkbox"
-          />
-          <div
-            className="uui-switch-toggler"
-          />
-        </div>
-        <div
-          className="uui-input-label"
-        >
-          Show only selected
-        </div>
-      </label>
-    </div>
-    <div
-      className="uui-flex-row root size-36 body modal undefined container align-items-center"
-      style={
-        Object {
-          "columnGap": undefined,
-          "maxHeight": undefined,
-          "maxWidth": undefined,
-          "rowGap": undefined,
-        }
-      }
-    >
-      <div
-        className="root root uui-scroll-bars uui-shadow-top uui-shadow-bottom scrollContainer"
-        style={
-          Object {
-            "display": "flex",
-            "height": "100%",
-            "overflow": "hidden",
-            "position": "relative",
-            "width": "100%",
-          }
-        }
-      >
-        <div
-          style={
-            Object {
-              "WebkitOverflowScrolling": "touch",
-              "bottom": 0,
-              "display": "flex",
-              "flex": "1 1 auto",
-              "flexDirection": "column",
-              "left": 0,
-              "marginBottom": 0,
-              "marginRight": 0,
-              "overflow": "scroll",
-              "position": "relative",
-              "right": 0,
-              "top": 0,
-            }
-          }
-        >
-          <div
-            className="listContainer"
-            style={
-              Object {
-                "minHeight": "0px",
-              }
-            }
-          >
-            <div
-              style={
-                Object {
-                  "marginTop": 0,
-                }
-              }
-            >
-              <div
-                aria-checked={false}
-                aria-posinset={1}
-                className="uui-flex-row pickerRow container -clickable align-items-center"
-                onClick={[Function]}
-                role="option"
-                style={
-                  Object {
-                    "columnGap": undefined,
-                    "rowGap": undefined,
-                  }
-                }
-              >
-                <div
-                  className="flexCell cell data-picker-cell size-36 padding-24 padding-left-24 align-widgets-top"
-                  role="cell"
-                  style={
-                    Object {
-                      "alignSelf": undefined,
-                      "flexBasis": "0",
-                      "flexGrow": 1,
-                      "flexShrink": undefined,
-                      "minWidth": 0,
-                      "textAlign": undefined,
-                    }
-                  }
-                >
-                  <label
-                    className="container uui-checkbox-container root size-18 mode-form uui-color-primary checkbox -clickable"
-                  >
-                    <div
-                      className="uui-checkbox"
-                    >
-                      <input
-                        aria-checked={false}
-                        checked={false}
-                        onChange={[Function]}
-                        tabIndex={0}
-                        type="checkbox"
-                      />
-                    </div>
-                  </label>
-                  <div
-                    className="contentWrapper"
-                  >
-                    <div
-                      className="renderItem"
-                    >
-                      <div
-                        className="flexCell root uui-typography"
-                        style={
-                          Object {
-                            "alignSelf": undefined,
-                            "flexBasis": "auto",
-                            "flexGrow": undefined,
-                            "flexShrink": undefined,
-                            "minWidth": 0,
-                            "textAlign": undefined,
-                          }
-                        }
-                      >
-                        <div
-                          className="uui-flex-row root size-36 spacing-12 container align-items-center"
-                          style={
-                            Object {
-                              "columnGap": undefined,
-                              "rowGap": undefined,
-                            }
-                          }
-                        >
-                          <div
-                            className="flexCell"
-                            style={
-                              Object {
-                                "alignSelf": undefined,
-                                "flexBasis": "auto",
-                                "flexGrow": undefined,
-                                "flexShrink": undefined,
-                                "minWidth": 0,
-                                "textAlign": undefined,
-                              }
-                            }
-                          >
-                            <div
-                              className="root uui-text uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography line-height-18 font-size-14 v-padding-9 text container"
-                            >
-                              C2
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                      <div
-                        className="flexSpacer"
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                aria-checked={false}
-                aria-posinset={2}
-                className="uui-flex-row pickerRow container -clickable align-items-center"
-                onClick={[Function]}
-                role="option"
-                style={
-                  Object {
-                    "columnGap": undefined,
-                    "rowGap": undefined,
-                  }
-                }
-              >
-                <div
-                  className="flexCell cell data-picker-cell size-36 padding-24 padding-left-24 align-widgets-top"
-                  role="cell"
-                  style={
-                    Object {
-                      "alignSelf": undefined,
-                      "flexBasis": "0",
-                      "flexGrow": 1,
-                      "flexShrink": undefined,
-                      "minWidth": 0,
-                      "textAlign": undefined,
-                    }
-                  }
-                >
-                  <label
-                    className="container uui-checkbox-container root size-18 mode-form uui-color-primary checkbox -clickable"
-                  >
-                    <div
-                      className="uui-checkbox"
-                    >
-                      <input
-                        aria-checked={false}
-                        checked={false}
-                        onChange={[Function]}
-                        tabIndex={0}
-                        type="checkbox"
-                      />
-                    </div>
-                  </label>
-                  <div
-                    className="contentWrapper"
-                  >
-                    <div
-                      className="renderItem"
-                    >
-                      <div
-                        className="flexCell root uui-typography"
-                        style={
-                          Object {
-                            "alignSelf": undefined,
-                            "flexBasis": "auto",
-                            "flexGrow": undefined,
-                            "flexShrink": undefined,
-                            "minWidth": 0,
-                            "textAlign": undefined,
-                          }
-                        }
-                      >
-                        <div
-                          className="uui-flex-row root size-36 spacing-12 container align-items-center"
-                          style={
-                            Object {
-                              "columnGap": undefined,
-                              "rowGap": undefined,
-                            }
-                          }
-                        >
-                          <div
-                            className="flexCell"
-                            style={
-                              Object {
-                                "alignSelf": undefined,
-                                "flexBasis": "auto",
-                                "flexGrow": undefined,
-                                "flexShrink": undefined,
-                                "minWidth": 0,
-                                "textAlign": undefined,
-                              }
-                            }
-                          >
-                            <div
-                              className="root uui-text uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography line-height-18 font-size-14 v-padding-9 text container"
-                            >
-                              C1+
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                      <div
-                        className="flexSpacer"
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                aria-checked={false}
-                aria-posinset={3}
-                className="uui-flex-row pickerRow container -clickable align-items-center"
-                onClick={[Function]}
-                role="option"
-                style={
-                  Object {
-                    "columnGap": undefined,
-                    "rowGap": undefined,
-                  }
-                }
-              >
-                <div
-                  className="flexCell cell data-picker-cell size-36 padding-24 padding-left-24 align-widgets-top"
-                  role="cell"
-                  style={
-                    Object {
-                      "alignSelf": undefined,
-                      "flexBasis": "0",
-                      "flexGrow": 1,
-                      "flexShrink": undefined,
-                      "minWidth": 0,
-                      "textAlign": undefined,
-                    }
-                  }
-                >
-                  <label
-                    className="container uui-checkbox-container root size-18 mode-form uui-color-primary checkbox -clickable"
-                  >
-                    <div
-                      className="uui-checkbox"
-                    >
-                      <input
-                        aria-checked={false}
-                        checked={false}
-                        onChange={[Function]}
-                        tabIndex={0}
-                        type="checkbox"
-                      />
-                    </div>
-                  </label>
-                  <div
-                    className="contentWrapper"
-                  >
-                    <div
-                      className="renderItem"
-                    >
-                      <div
-                        className="flexCell root uui-typography"
-                        style={
-                          Object {
-                            "alignSelf": undefined,
-                            "flexBasis": "auto",
-                            "flexGrow": undefined,
-                            "flexShrink": undefined,
-                            "minWidth": 0,
-                            "textAlign": undefined,
-                          }
-                        }
-                      >
-                        <div
-                          className="uui-flex-row root size-36 spacing-12 container align-items-center"
-                          style={
-                            Object {
-                              "columnGap": undefined,
-                              "rowGap": undefined,
-                            }
-                          }
-                        >
-                          <div
-                            className="flexCell"
-                            style={
-                              Object {
-                                "alignSelf": undefined,
-                                "flexBasis": "auto",
-                                "flexGrow": undefined,
-                                "flexShrink": undefined,
-                                "minWidth": 0,
-                                "textAlign": undefined,
-                              }
-                            }
-                          >
-                            <div
-                              className="root uui-text uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography line-height-18 font-size-14 v-padding-9 text container"
-                            >
-                              C1
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                      <div
-                        className="flexSpacer"
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                aria-checked={false}
-                aria-posinset={4}
-                className="uui-flex-row pickerRow container -clickable align-items-center"
-                onClick={[Function]}
-                role="option"
-                style={
-                  Object {
-                    "columnGap": undefined,
-                    "rowGap": undefined,
-                  }
-                }
-              >
-                <div
-                  className="flexCell cell data-picker-cell size-36 padding-24 padding-left-24 align-widgets-top"
-                  role="cell"
-                  style={
-                    Object {
-                      "alignSelf": undefined,
-                      "flexBasis": "0",
-                      "flexGrow": 1,
-                      "flexShrink": undefined,
-                      "minWidth": 0,
-                      "textAlign": undefined,
-                    }
-                  }
-                >
-                  <label
-                    className="container uui-checkbox-container root size-18 mode-form uui-color-primary checkbox -clickable"
-                  >
-                    <div
-                      className="uui-checkbox"
-                    >
-                      <input
-                        aria-checked={false}
-                        checked={false}
-                        onChange={[Function]}
-                        tabIndex={0}
-                        type="checkbox"
-                      />
-                    </div>
-                  </label>
-                  <div
-                    className="contentWrapper"
-                  >
-                    <div
-                      className="renderItem"
-                    >
-                      <div
-                        className="flexCell root uui-typography"
-                        style={
-                          Object {
-                            "alignSelf": undefined,
-                            "flexBasis": "auto",
-                            "flexGrow": undefined,
-                            "flexShrink": undefined,
-                            "minWidth": 0,
-                            "textAlign": undefined,
-                          }
-                        }
-                      >
-                        <div
-                          className="uui-flex-row root size-36 spacing-12 container align-items-center"
-                          style={
-                            Object {
-                              "columnGap": undefined,
-                              "rowGap": undefined,
-                            }
-                          }
-                        >
-                          <div
-                            className="flexCell"
-                            style={
-                              Object {
-                                "alignSelf": undefined,
-                                "flexBasis": "auto",
-                                "flexGrow": undefined,
-                                "flexShrink": undefined,
-                                "minWidth": 0,
-                                "textAlign": undefined,
-                              }
-                            }
-                          >
-                            <div
-                              className="root uui-text uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography line-height-18 font-size-14 v-padding-9 text container"
-                            >
-                              B2+
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                      <div
-                        className="flexSpacer"
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                aria-checked={false}
-                aria-posinset={5}
-                className="uui-flex-row pickerRow container -clickable align-items-center"
-                onClick={[Function]}
-                role="option"
-                style={
-                  Object {
-                    "columnGap": undefined,
-                    "rowGap": undefined,
-                  }
-                }
-              >
-                <div
-                  className="flexCell cell data-picker-cell size-36 padding-24 padding-left-24 align-widgets-top"
-                  role="cell"
-                  style={
-                    Object {
-                      "alignSelf": undefined,
-                      "flexBasis": "0",
-                      "flexGrow": 1,
-                      "flexShrink": undefined,
-                      "minWidth": 0,
-                      "textAlign": undefined,
-                    }
-                  }
-                >
-                  <label
-                    className="container uui-checkbox-container root size-18 mode-form uui-color-primary checkbox -clickable"
-                  >
-                    <div
-                      className="uui-checkbox"
-                    >
-                      <input
-                        aria-checked={false}
-                        checked={false}
-                        onChange={[Function]}
-                        tabIndex={0}
-                        type="checkbox"
-                      />
-                    </div>
-                  </label>
-                  <div
-                    className="contentWrapper"
-                  >
-                    <div
-                      className="renderItem"
-                    >
-                      <div
-                        className="flexCell root uui-typography"
-                        style={
-                          Object {
-                            "alignSelf": undefined,
-                            "flexBasis": "auto",
-                            "flexGrow": undefined,
-                            "flexShrink": undefined,
-                            "minWidth": 0,
-                            "textAlign": undefined,
-                          }
-                        }
-                      >
-                        <div
-                          className="uui-flex-row root size-36 spacing-12 container align-items-center"
-                          style={
-                            Object {
-                              "columnGap": undefined,
-                              "rowGap": undefined,
-                            }
-                          }
-                        >
-                          <div
-                            className="flexCell"
-                            style={
-                              Object {
-                                "alignSelf": undefined,
-                                "flexBasis": "auto",
-                                "flexGrow": undefined,
-                                "flexShrink": undefined,
-                                "minWidth": 0,
-                                "textAlign": undefined,
-                              }
-                            }
-                          >
-                            <div
-                              className="root uui-text uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography line-height-18 font-size-14 v-padding-9 text container"
-                            >
-                              B2
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                      <div
-                        className="flexSpacer"
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                aria-checked={false}
-                aria-posinset={6}
-                className="uui-flex-row pickerRow container -clickable align-items-center"
-                onClick={[Function]}
-                role="option"
-                style={
-                  Object {
-                    "columnGap": undefined,
-                    "rowGap": undefined,
-                  }
-                }
-              >
-                <div
-                  className="flexCell cell data-picker-cell size-36 padding-24 padding-left-24 align-widgets-top"
-                  role="cell"
-                  style={
-                    Object {
-                      "alignSelf": undefined,
-                      "flexBasis": "0",
-                      "flexGrow": 1,
-                      "flexShrink": undefined,
-                      "minWidth": 0,
-                      "textAlign": undefined,
-                    }
-                  }
-                >
-                  <label
-                    className="container uui-checkbox-container root size-18 mode-form uui-color-primary checkbox -clickable"
-                  >
-                    <div
-                      className="uui-checkbox"
-                    >
-                      <input
-                        aria-checked={false}
-                        checked={false}
-                        onChange={[Function]}
-                        tabIndex={0}
-                        type="checkbox"
-                      />
-                    </div>
-                  </label>
-                  <div
-                    className="contentWrapper"
-                  >
-                    <div
-                      className="renderItem"
-                    >
-                      <div
-                        className="flexCell root uui-typography"
-                        style={
-                          Object {
-                            "alignSelf": undefined,
-                            "flexBasis": "auto",
-                            "flexGrow": undefined,
-                            "flexShrink": undefined,
-                            "minWidth": 0,
-                            "textAlign": undefined,
-                          }
-                        }
-                      >
-                        <div
-                          className="uui-flex-row root size-36 spacing-12 container align-items-center"
-                          style={
-                            Object {
-                              "columnGap": undefined,
-                              "rowGap": undefined,
-                            }
-                          }
-                        >
-                          <div
-                            className="flexCell"
-                            style={
-                              Object {
-                                "alignSelf": undefined,
-                                "flexBasis": "auto",
-                                "flexGrow": undefined,
-                                "flexShrink": undefined,
-                                "minWidth": 0,
-                                "textAlign": undefined,
-                              }
-                            }
-                          >
-                            <div
-                              className="root uui-text uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography line-height-18 font-size-14 v-padding-9 text container"
-                            >
-                              B1+
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                      <div
-                        className="flexSpacer"
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                aria-checked={false}
-                aria-posinset={7}
-                className="uui-flex-row pickerRow container -clickable align-items-center"
-                onClick={[Function]}
-                role="option"
-                style={
-                  Object {
-                    "columnGap": undefined,
-                    "rowGap": undefined,
-                  }
-                }
-              >
-                <div
-                  className="flexCell cell data-picker-cell size-36 padding-24 padding-left-24 align-widgets-top"
-                  role="cell"
-                  style={
-                    Object {
-                      "alignSelf": undefined,
-                      "flexBasis": "0",
-                      "flexGrow": 1,
-                      "flexShrink": undefined,
-                      "minWidth": 0,
-                      "textAlign": undefined,
-                    }
-                  }
-                >
-                  <label
-                    className="container uui-checkbox-container root size-18 mode-form uui-color-primary checkbox -clickable"
-                  >
-                    <div
-                      className="uui-checkbox"
-                    >
-                      <input
-                        aria-checked={false}
-                        checked={false}
-                        onChange={[Function]}
-                        tabIndex={0}
-                        type="checkbox"
-                      />
-                    </div>
-                  </label>
-                  <div
-                    className="contentWrapper"
-                  >
-                    <div
-                      className="renderItem"
-                    >
-                      <div
-                        className="flexCell root uui-typography"
-                        style={
-                          Object {
-                            "alignSelf": undefined,
-                            "flexBasis": "auto",
-                            "flexGrow": undefined,
-                            "flexShrink": undefined,
-                            "minWidth": 0,
-                            "textAlign": undefined,
-                          }
-                        }
-                      >
-                        <div
-                          className="uui-flex-row root size-36 spacing-12 container align-items-center"
-                          style={
-                            Object {
-                              "columnGap": undefined,
-                              "rowGap": undefined,
-                            }
-                          }
-                        >
-                          <div
-                            className="flexCell"
-                            style={
-                              Object {
-                                "alignSelf": undefined,
-                                "flexBasis": "auto",
-                                "flexGrow": undefined,
-                                "flexShrink": undefined,
-                                "minWidth": 0,
-                                "textAlign": undefined,
-                              }
-                            }
-                          >
-                            <div
-                              className="root uui-text uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography line-height-18 font-size-14 v-padding-9 text container"
-                            >
-                              B1
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                      <div
-                        className="flexSpacer"
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                aria-checked={false}
-                aria-posinset={8}
-                className="uui-flex-row pickerRow container -clickable align-items-center"
-                onClick={[Function]}
-                role="option"
-                style={
-                  Object {
-                    "columnGap": undefined,
-                    "rowGap": undefined,
-                  }
-                }
-              >
-                <div
-                  className="flexCell cell data-picker-cell size-36 padding-24 padding-left-24 align-widgets-top"
-                  role="cell"
-                  style={
-                    Object {
-                      "alignSelf": undefined,
-                      "flexBasis": "0",
-                      "flexGrow": 1,
-                      "flexShrink": undefined,
-                      "minWidth": 0,
-                      "textAlign": undefined,
-                    }
-                  }
-                >
-                  <label
-                    className="container uui-checkbox-container root size-18 mode-form uui-color-primary checkbox -clickable"
-                  >
-                    <div
-                      className="uui-checkbox"
-                    >
-                      <input
-                        aria-checked={false}
-                        checked={false}
-                        onChange={[Function]}
-                        tabIndex={0}
-                        type="checkbox"
-                      />
-                    </div>
-                  </label>
-                  <div
-                    className="contentWrapper"
-                  >
-                    <div
-                      className="renderItem"
-                    >
-                      <div
-                        className="flexCell root uui-typography"
-                        style={
-                          Object {
-                            "alignSelf": undefined,
-                            "flexBasis": "auto",
-                            "flexGrow": undefined,
-                            "flexShrink": undefined,
-                            "minWidth": 0,
-                            "textAlign": undefined,
-                          }
-                        }
-                      >
-                        <div
-                          className="uui-flex-row root size-36 spacing-12 container align-items-center"
-                          style={
-                            Object {
-                              "columnGap": undefined,
-                              "rowGap": undefined,
-                            }
-                          }
-                        >
-                          <div
-                            className="flexCell"
-                            style={
-                              Object {
-                                "alignSelf": undefined,
-                                "flexBasis": "auto",
-                                "flexGrow": undefined,
-                                "flexShrink": undefined,
-                                "minWidth": 0,
-                                "textAlign": undefined,
-                              }
-                            }
-                          >
-                            <div
-                              className="root uui-text uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography line-height-18 font-size-14 v-padding-9 text container"
-                            >
-                              A2+
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                      <div
-                        className="flexSpacer"
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                aria-checked={false}
-                aria-posinset={9}
-                className="uui-flex-row pickerRow container -clickable align-items-center"
-                onClick={[Function]}
-                role="option"
-                style={
-                  Object {
-                    "columnGap": undefined,
-                    "rowGap": undefined,
-                  }
-                }
-              >
-                <div
-                  className="flexCell cell data-picker-cell size-36 padding-24 padding-left-24 align-widgets-top"
-                  role="cell"
-                  style={
-                    Object {
-                      "alignSelf": undefined,
-                      "flexBasis": "0",
-                      "flexGrow": 1,
-                      "flexShrink": undefined,
-                      "minWidth": 0,
-                      "textAlign": undefined,
-                    }
-                  }
-                >
-                  <label
-                    className="container uui-checkbox-container root size-18 mode-form uui-color-primary checkbox -clickable"
-                  >
-                    <div
-                      className="uui-checkbox"
-                    >
-                      <input
-                        aria-checked={false}
-                        checked={false}
-                        onChange={[Function]}
-                        tabIndex={0}
-                        type="checkbox"
-                      />
-                    </div>
-                  </label>
-                  <div
-                    className="contentWrapper"
-                  >
-                    <div
-                      className="renderItem"
-                    >
-                      <div
-                        className="flexCell root uui-typography"
-                        style={
-                          Object {
-                            "alignSelf": undefined,
-                            "flexBasis": "auto",
-                            "flexGrow": undefined,
-                            "flexShrink": undefined,
-                            "minWidth": 0,
-                            "textAlign": undefined,
-                          }
-                        }
-                      >
-                        <div
-                          className="uui-flex-row root size-36 spacing-12 container align-items-center"
-                          style={
-                            Object {
-                              "columnGap": undefined,
-                              "rowGap": undefined,
-                            }
-                          }
-                        >
-                          <div
-                            className="flexCell"
-                            style={
-                              Object {
-                                "alignSelf": undefined,
-                                "flexBasis": "auto",
-                                "flexGrow": undefined,
-                                "flexShrink": undefined,
-                                "minWidth": 0,
-                                "textAlign": undefined,
-                              }
-                            }
-                          >
-                            <div
-                              className="root uui-text uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography line-height-18 font-size-14 v-padding-9 text container"
-                            >
-                              A2
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                      <div
-                        className="flexSpacer"
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                aria-checked={false}
-                aria-posinset={10}
-                className="uui-flex-row pickerRow container -clickable align-items-center"
-                onClick={[Function]}
-                role="option"
-                style={
-                  Object {
-                    "columnGap": undefined,
-                    "rowGap": undefined,
-                  }
-                }
-              >
-                <div
-                  className="flexCell cell data-picker-cell size-36 padding-24 padding-left-24 align-widgets-top"
-                  role="cell"
-                  style={
-                    Object {
-                      "alignSelf": undefined,
-                      "flexBasis": "0",
-                      "flexGrow": 1,
-                      "flexShrink": undefined,
-                      "minWidth": 0,
-                      "textAlign": undefined,
-                    }
-                  }
-                >
-                  <label
-                    className="container uui-checkbox-container root size-18 mode-form uui-color-primary checkbox -clickable"
-                  >
-                    <div
-                      className="uui-checkbox"
-                    >
-                      <input
-                        aria-checked={false}
-                        checked={false}
-                        onChange={[Function]}
-                        tabIndex={0}
-                        type="checkbox"
-                      />
-                    </div>
-                  </label>
-                  <div
-                    className="contentWrapper"
-                  >
-                    <div
-                      className="renderItem"
-                    >
-                      <div
-                        className="flexCell root uui-typography"
-                        style={
-                          Object {
-                            "alignSelf": undefined,
-                            "flexBasis": "auto",
-                            "flexGrow": undefined,
-                            "flexShrink": undefined,
-                            "minWidth": 0,
-                            "textAlign": undefined,
-                          }
-                        }
-                      >
-                        <div
-                          className="uui-flex-row root size-36 spacing-12 container align-items-center"
-                          style={
-                            Object {
-                              "columnGap": undefined,
-                              "rowGap": undefined,
-                            }
-                          }
-                        >
-                          <div
-                            className="flexCell"
-                            style={
-                              Object {
-                                "alignSelf": undefined,
-                                "flexBasis": "auto",
-                                "flexGrow": undefined,
-                                "flexShrink": undefined,
-                                "minWidth": 0,
-                                "textAlign": undefined,
-                              }
-                            }
-                          >
-                            <div
-                              className="root uui-text uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography line-height-18 font-size-14 v-padding-9 text container"
-                            >
-                              A1+
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                      <div
-                        className="flexSpacer"
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                aria-checked={false}
-                aria-posinset={11}
-                className="uui-flex-row pickerRow container -clickable align-items-center"
-                onClick={[Function]}
-                role="option"
-                style={
-                  Object {
-                    "columnGap": undefined,
-                    "rowGap": undefined,
-                  }
-                }
-              >
-                <div
-                  className="flexCell cell data-picker-cell size-36 padding-24 padding-left-24 align-widgets-top"
-                  role="cell"
-                  style={
-                    Object {
-                      "alignSelf": undefined,
-                      "flexBasis": "0",
-                      "flexGrow": 1,
-                      "flexShrink": undefined,
-                      "minWidth": 0,
-                      "textAlign": undefined,
-                    }
-                  }
-                >
-                  <label
-                    className="container uui-checkbox-container root size-18 mode-form uui-color-primary checkbox -clickable"
-                  >
-                    <div
-                      className="uui-checkbox"
-                    >
-                      <input
-                        aria-checked={false}
-                        checked={false}
-                        onChange={[Function]}
-                        tabIndex={0}
-                        type="checkbox"
-                      />
-                    </div>
-                  </label>
-                  <div
-                    className="contentWrapper"
-                  >
-                    <div
-                      className="renderItem"
-                    >
-                      <div
-                        className="flexCell root uui-typography"
-                        style={
-                          Object {
-                            "alignSelf": undefined,
-                            "flexBasis": "auto",
-                            "flexGrow": undefined,
-                            "flexShrink": undefined,
-                            "minWidth": 0,
-                            "textAlign": undefined,
-                          }
-                        }
-                      >
-                        <div
-                          className="uui-flex-row root size-36 spacing-12 container align-items-center"
-                          style={
-                            Object {
-                              "columnGap": undefined,
-                              "rowGap": undefined,
-                            }
-                          }
-                        >
-                          <div
-                            className="flexCell"
-                            style={
-                              Object {
-                                "alignSelf": undefined,
-                                "flexBasis": "auto",
-                                "flexGrow": undefined,
-                                "flexShrink": undefined,
-                                "minWidth": 0,
-                                "textAlign": undefined,
-                              }
-                            }
-                          >
-                            <div
-                              className="root uui-text uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography line-height-18 font-size-14 v-padding-9 text container"
-                            >
-                              A1
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                      <div
-                        className="flexSpacer"
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="container uui-blocker-container root"
-          style={
-            Object {
-              "minHeight": undefined,
-            }
-          }
-        >
-          <div />
-        </div>
-        <div
-          className="uui-track-horizontal"
-          style={
-            Object {
-              "display": "none",
-              "height": 6,
-              "position": "absolute",
-            }
-          }
-        >
-          <div
-            className="uui-thumb-horizontal"
-          />
-        </div>
-        <div
-          className="uui-track-vertical"
-          style={
-            Object {
-              "display": "none",
-              "position": "absolute",
-              "width": 6,
-            }
-          }
-        >
-          <div
-            className="uui-thumb-vertical"
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="uui-flex-row root size-36 padding-24 vPadding-24 spacing-12 root modalFooter container align-items-center"
-      style={
-        Object {
-          "columnGap": undefined,
-          "rowGap": undefined,
-        }
-      }
-    >
-      <button
-        aria-disabled={false}
-        className="container uui-button-box uui-enabled -clickable uui-link_button root uui-size-36 uui-no-left-icon uui-no-right-icon uui-color-primary"
-        onClick={[Function]}
-        tabIndex={0}
-        type="button"
-      >
-        <div
-          className="uui-caption"
-        >
-          SELECT ALL
-        </div>
-      </button>
-      <div
-        className="flexSpacer"
-      />
-      <button
-        className="container uui-button-box uui-enabled -clickable root uui-button uui-fill-outline uui-color-secondary uui-size-36"
-        onClick={[Function]}
-        tabIndex={0}
-        type="button"
-      >
-        <div
-          className="uui-caption"
-        >
-          Cancel
-        </div>
-      </button>
-      <button
-        className="container uui-button-box uui-enabled -clickable root uui-button uui-fill-solid uui-color-accent uui-size-36"
-        onClick={[Function]}
-        tabIndex={0}
-        type="button"
-      >
-        <div
-          className="uui-caption"
-        >
-          Select
-        </div>
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`PickerModal should open body 1`] = `
-<body
-  style="overflow: hidden;"
->
-  <div>
-    <button
-      class="container uui-button-box uui-enabled -clickable"
-      tabindex="0"
-      type="button"
-    />
-    <div
-      class="container modalBlocker"
-      style="z-index: 2000;"
-    >
-      <div
-        aria-label="Click to close a modal"
-        class="uui-modal-blocker"
-      />
-      <div
-        aria-modal="true"
-        class="uui-modal-window root modal container"
-        role="dialog"
-        style="width: 600px; height: 700px;"
-      >
-        <div
-          class="uui-flex-row root size-36 padding-24 vPadding-12 spacing-12 root modalHeader container align-items-center"
-        >
-          <div
-            class="root uui-text uui-color-primary uui-font-weight-600 uui-font-style-normal uui-typography line-height-24 font-size-18 v-padding-12 container"
-          >
-            Please select
-          </div>
-          <div
-            class="flexSpacer"
-          />
-          <div
-            class="flexCell"
-            style="min-width: 0; flex-shrink: 0; flex-basis: auto;"
-          >
-            <button
-              aria-label="Close modal"
-              class="container uui-button-box uui-enabled -clickable uui-icon_button uui-color-neutral root"
-              tabindex="0"
-              type="button"
-            >
-              <div
-                class="container uui-icon uui-enabled"
-              >
-                <svg
-                  class=""
-                />
-              </div>
-            </button>
-          </div>
-        </div>
-        <div
-          class="flexCell subHeaderWrapper"
-          style="min-width: 0; flex-basis: 0px;"
-        >
-          <div
-            class="uui-flex-row root size-36 vPadding-24 container align-items-center"
-          >
-            <div
-              class="container uui-input-box -clickable uui-focus root size-36 mode-form"
-              tabindex="-1"
-            >
-              <div
-                class="container uui-icon uui-enabled"
-              >
-                <svg
-                  class=""
-                />
-              </div>
-              <input
-                aria-invalid="false"
-                class="uui-input"
-                inputmode="search"
-                placeholder="Type text for quick search"
-                tabindex="-1"
-                type="search"
-                value=""
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          class="uui-flex-row root size-36 body modal undefined container align-items-center"
-        >
-          <div
-            class="root uui-scroll-bars uui-shadow-top uui-shadow-bottom scrollContainer"
-            style="position: relative; overflow: hidden; width: 100%; height: 100%; display: flex;"
-          >
-            <div
-              style="position: relative; top: 0px; left: 0px; right: 0px; bottom: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px; flex: 1 1 auto; display: flex; flex-direction: column;"
-            >
-              <div
-                class="listContainer"
-                style="min-height: 2px;"
-              >
-                <div
-                  style="margin-top: 0px;"
-                >
-                  <div
-                    aria-posinset="1"
-                    aria-selected="false"
-                    class="uui-flex-row pickerRow container -clickable align-items-center"
-                    role="option"
-                  >
-                    <div
-                      class="flexCell cell data-picker-cell size-36 padding-24 padding-left-24 align-widgets-top"
-                      role="cell"
-                      style="min-width: 0; flex-grow: 1; flex-basis: 0px;"
-                    >
-                      <div
-                        class="contentWrapper"
-                      >
-                        <div
-                          class="renderItem"
-                        >
-                          <div
-                            class="flexCell root uui-typography"
-                            style="min-width: 0; flex-basis: auto;"
-                          >
-                            <div
-                              class="uui-flex-row root size-36 spacing-12 container align-items-center"
-                            >
-                              <div
-                                class="flexCell"
-                                style="min-width: 0; flex-basis: auto;"
-                              >
-                                <div
-                                  class="root uui-text uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography line-height-18 font-size-14 v-padding-9 text container"
-                                >
-                                  Elementary
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                          <div
-                            class="flexSpacer"
-                          />
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    aria-posinset="2"
-                    aria-selected="false"
-                    class="uui-flex-row pickerRow container -clickable align-items-center"
-                    role="option"
-                  >
-                    <div
-                      class="flexCell cell data-picker-cell size-36 padding-24 padding-left-24 align-widgets-top"
-                      role="cell"
-                      style="min-width: 0; flex-grow: 1; flex-basis: 0px;"
-                    >
-                      <div
-                        class="contentWrapper"
-                      >
-                        <div
-                          class="renderItem"
-                        >
-                          <div
-                            class="flexCell root uui-typography"
-                            style="min-width: 0; flex-basis: auto;"
-                          >
-                            <div
-                              class="uui-flex-row root size-36 spacing-12 container align-items-center"
-                            >
-                              <div
-                                class="flexCell"
-                                style="min-width: 0; flex-basis: auto;"
-                              >
-                                <div
-                                  class="root uui-text uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography line-height-18 font-size-14 v-padding-9 text container"
-                                >
-                                  Elementary+
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                          <div
-                            class="flexSpacer"
-                          />
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              class="container uui-blocker-container root"
-            >
-              <div />
-            </div>
-            <div
-              class="uui-track-horizontal"
-              style="position: absolute; height: 6px; display: none;"
-            >
-              <div
-                class="uui-thumb-horizontal"
-              />
-            </div>
-            <div
-              class="uui-track-vertical"
-              style="position: absolute; width: 6px; display: none;"
-            >
-              <div
-                class="uui-thumb-vertical"
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          class="uui-flex-row root size-36 padding-24 vPadding-24 spacing-12 root modalFooter container align-items-center"
-        >
-          <div
-            class="flexSpacer"
-          />
-          <button
-            class="container uui-button-box uui-enabled -clickable root uui-button uui-fill-outline uui-color-secondary uui-size-36"
-            tabindex="0"
-            type="button"
-          >
-            <div
-              class="uui-caption"
-            >
-              Cancel
-            </div>
-          </button>
-          <button
-            class="container uui-button-box uui-enabled -clickable root uui-button uui-fill-solid uui-color-accent uui-size-36"
-            tabindex="0"
-            type="button"
-          >
-            <div
-              class="uui-caption"
-            >
-              Select
-            </div>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</body>
-`;