Rounded toggle button issue

[is-ashish]

Signed-off-by: ashishjain [email protected]
Trying to add css for Rounded-Toggle-Button , but error giving --

./docs/products/buttons.mdx
TypeError: (intermediate value).slice is not a function

docs/products/buttons.mdx

### Button group with Toggle
<Playground>
  <h2>Toggle Switch</h2>
    <label class="btn-pill-switch">
             <input type="checkbox" style="display: none;">
                <span class="pill-toggle pill-round ">primary</span>
            </label>
</Playground>

_scss/product/components/buttons.scss

.btn-pill-switch {
position: relative;
display: inline-block;
vertical-align: middle;
width: 48px;
height: 28px;
}

.pill-toggle {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-align:center;
padding-top:4px;
background-color: white;
}
.pill-round {
border-radius: 34px;
border:1px solid gray;
}

input:checked + .pill-toggle {
background-color: blue;
color:white;
border:1px solid blue;
}

Attached screenshot for desire result --