How to use the bobril.styledDiv function in bobril

export const Subheader = (data: ISubheaderData, children?: b.IBobrilCacheChildren) => {
    if (data == null) data = {};
    return b.styledDiv(data.children || children, subheaderStyle, { paddingLeft: data.inset ? 72 : 16 });
}

function getSuiteDetail(a: SuiteOrTest): b.IBobrilChildren {
    return [
        b.styledDiv(a.name, styles.suiteDivStyle),
        b.styledDiv(getSuitesDetail(a.nested), styles.suiteChildrenIndentStyle)
    ];
}

return testSvrState.agents.map((r, index) => {
        return clickable(b.styledDiv([
            b.styledDiv(r.userAgent, styles.spanUserAgent),
            b.styledDiv("Failures: " + r.testsFailed
                + ((r.testsSkipped > 0) ? (" Skipped: " + r.testsSkipped) : "")
                + " Successful: " + (r.testsFinished - r.testsFailed - r.testsSkipped), styles.spanInfo),
            r.running && b.styledDiv("Running " + r.testsFinished + "/" + r.totalTests, styles.spanInfo)
        ], index === selectedAgent&&styles.selectedStyle),() => { setSelectedAgent(index) });
    });
}

children.push(b.styledDiv(d.leftCheckbox, leftCheckboxStyle,
            { top: twoLine ? 24 : singleAvatar ? 16 : 12 })
        );

    if (d.rightIconButton || needsNestedIndicator) {
        let rightIconButtonElement = d.rightIconButton;
        if (needsNestedIndicator) {
            rightIconButtonElement = iconButton.IconButton({
                children: { children: d.initiallyOpen ? icons.navigationExpandLess() : icons.navigationExpandMore() },
                action: d.onNestedListToggle,
                onFocus: () => { ctx.rightIconButtonKeyboardFocused = true; b.invalidate(ctx); },
                onBlur: () => { ctx.rightIconButtonKeyboardFocused = false; b.invalidate(ctx); }
            });
        }

        children.push(b.styledDiv(rightIconButtonElement, rightIconButtonStyle,
            { top: twoLine ? 12 : singleAvatar ? 4 : 0 })
        );
    }

    if (d.rightToggle)
        children.push(b.styledDiv(d.rightToggle, rightToggleStyle, {
            top: twoLine ? 25 : singleAvatar ? 17 : 13
        }));
    if (d.primaryText)
        children.push(d.primaryText);
    if (d.secondaryText)
        children.push(b.styledDiv(d.secondaryText, threeLine ? threeLineSecondaryStyle : twoLineSecondaryStyle));

    let hasCheckbox = d.leftCheckbox || d.rightToggle;

    return b.styledDiv(children, rootStyle, innerDivStyle, {

{ top: twoLine ? 12 : singleAvatar ? 4 : 0 })
        );
    }

    if (d.rightToggle)
        children.push(b.styledDiv(d.rightToggle, rightToggleStyle, {
            top: twoLine ? 25 : singleAvatar ? 17 : 13
        }));
    if (d.primaryText)
        children.push(d.primaryText);
    if (d.secondaryText)
        children.push(b.styledDiv(d.secondaryText, threeLine ? threeLineSecondaryStyle : twoLineSecondaryStyle));

    let hasCheckbox = d.leftCheckbox || d.rightToggle;

    return b.styledDiv(children, rootStyle, innerDivStyle, {
        marginLeft: ctx.nestedLevel * styles.nestedLevelDepth,
        paddingLeft: d.leftIcon || d.leftAvatar || d.leftCheckbox || d.insetChildren ? 72 : 16,
        paddingRight: d.rightIcon || d.rightAvatar || d.rightIconButton ? 56 : d.rightToggle ? 72 : 16,
        paddingBottom: singleAvatar ? 20 : 16,
        paddingTop: !singleAvatar || threeLine ? 16 : 20
    });
}

render(ctx: IMenuCtx, me: b.IBobrilNode) {
        const d = ctx.data;
        ctx.controller.onClose = d.onClose;
        b.extendCfg(ctx, "menuController", ctx.controller);
        me.children = b.styledDiv(
            b.withRef(List({ tabindex: 0 }, d.children), ctx, "list"),
            {
                maxHeight: d.maxHeight,
                overflowY: d.maxHeight ? "auto" : undefined
            },
            d.style
        );
    },
    postRender(ctx: IMenuCtx) {

render(ctx: IModalCtx, me: IElementBobrilNode) {
    me.attrs["role"] = "dialog";
    b.style(me, modalStyles.modal, !!ctx.data.animation && modalStyles.fade);
    me.children = b.styledDiv(
      b.styledDiv(
        [
          !!ctx.data.header &&
            b.styledDiv(ctx.data.header, modalStyles.modalHeader),
          !!ctx.data.body && b.styledDiv(ctx.data.body, modalStyles.modalBody),
          !!ctx.data.footer &&
            b.styledDiv(ctx.data.footer, modalStyles.modalFooter)
        ],
        modalStyles.modalContent
      ),
      modalStyles.modalDialog,
      ctx.data.size !== undefined && modalSizeStyles(ctx.data.size)
    );
    me.children.attrs = { role: "document" };
  },
  postInitDom(ctx: IModalCtx, _me: b.IBobrilCacheNode, element: HTMLElement) {

if (t > 2) {
                hasRipple = false;
                ctx.rippleStart = 0;
            }
            r = Math.min(t * toggleSize, toggleSize);
            b.invalidate(ctx);
        }
        if (focusFromKeyboard) {
            hasRipple = true;
            r = toggleSize;
            t = 1;
        }
        b.style(me, rootStyle, disabled ? disabledStyle : enabledStyle);
        me.children = [
            b.styledDiv(null, trackStyle, checked && trackToggledStyle, disabled && trackDisabledStyle),
            b.styledDiv(hasRipple && b.styledDiv(null, rippleStyle, {
                left: toggleSize * 0.5 - r,
                top: toggleSize * 0.5 - r,
                width: 2 * r,
                height: 2 * r,
                opacity: 0.16 - 0.08 * t
            }), thumbStyle, checked && thumbToggledStyle, disabled && thumbDisabledStyle)
        ];
        me.attrs = {
            role: "checkbox",
            "aria-checked": checked ? "true" : "false",
            "aria-disabled": disabled ? "true" : "false"
        };
        if (!disabled)
            me.attrs.tabindex = d.tabindex || 0;
    },
    onPointerDown(ctx: IToggleCtx): boolean {

function createFlexLayout(children: b.IBobrilNode[]): b.IBobrilNode {
    return b.styledDiv(
        children.map(child => {
            return b.styledDiv(child, { flex: 1 });
        }),
        { display: "flex" }
    );
}

let needsNestedIndicator = hasNestListItems && ctx.autoGenerateNestedIndicator && !hasRightElement;

    if (d.leftIcon)
        children.push(b.styledDiv(d.leftIcon({ color: styles.strPrimary1Color }),
            iconStyle, leftIconStyle, { top: twoLine ? 12 : singleAvatar ? 4 : 0 })
        );
    if (d.rightIcon)
        children.push(b.styledDiv(d.rightIcon({ color: styles.strPrimary1Color }),
            iconStyle, rightIconStyle, { top: twoLine ? 12 : singleAvatar ? 4 : 0 })
        );
    if (d.leftAvatar)
        children.push(b.styledDiv(d.leftAvatar, avatarStyle, leftAvatarStyle,
            { top: singleAvatar ? 8 : 16 })
        );
    if (d.rightAvatar)
        children.push(b.styledDiv(d.rightAvatar, avatarStyle, rightAvatarStyle,
            { top: singleAvatar ? 8 : 16 })
        );
    if (d.leftCheckbox)
        children.push(b.styledDiv(d.leftCheckbox, leftCheckboxStyle,
            { top: twoLine ? 24 : singleAvatar ? 16 : 12 })
        );

    if (d.rightIconButton || needsNestedIndicator) {
        let rightIconButtonElement = d.rightIconButton;
        if (needsNestedIndicator) {
            rightIconButtonElement = iconButton.IconButton({
                children: { children: d.initiallyOpen ? icons.navigationExpandLess() : icons.navigationExpandMore() },
                action: d.onNestedListToggle,
                onFocus: () => { ctx.rightIconButtonKeyboardFocused = true; b.invalidate(ctx); },
                onBlur: () => { ctx.rightIconButtonKeyboardFocused = false; b.invalidate(ctx); }
            });