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 --

docs/products/buttons.mdx と scss/product/components/_buttons.scss から始め、ドキュメントのビルド時に発生する報告された TypeError を再現します。報告された slice エラーを角丸トグルの例またはそのスタイルまで追跡し、例がエラーなしでビルドされ、意図した角丸トグルがレンダリングされれば作業完了とします。