Rounded toggle button issue

Signed-off-by: ashishjain ashish.jain@mayadata.io
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 --

Start with docs/products/buttons.mdx and scss/product/components/_buttons.scss, then reproduce the documented TypeError while building the documentation. Trace the reported slice error to the rounded toggle example or its styling, and consider the work complete when the example builds without error and renders the intended rounded toggle.