From 480f2cef973252751ff0408a2c38eb42d198c350 Mon Sep 17 00:00:00 2001
From: Jake Moxey <jakemoxey@gmail.com>
Date: Wed, 5 Aug 2020 14:10:07 +1000
Subject: [PATCH] Update 'Themeable components' docs

---
 packages/website/src/docs/styling-components.mdx | 11 ++++++++---
 packages/website/src/layout/DocsLayout.tsx       |  2 +-
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/website/src/docs/styling-components.mdx b/packages/website/src/docs/styling-components.mdx
index 7b063bc9f..1a156f770 100644
--- a/packages/website/src/docs/styling-components.mdx
+++ b/packages/website/src/docs/styling-components.mdx
@@ -1,12 +1,17 @@
 ---
 breakpoint: tablet
-title: Themeable components
+title: Themeable & styled components
 path: /styling-components/
 ---
 
-# Themeable components
+# Themeable & styled components
 
-Bumbag comes with an `applyTheme` function which allows you to create components that have a customized theme attached to them. This allows you to **style components**, as well as set **default props** to them.
+Bumbag has two methods of styling components, via:
+
+- **[Themeable components](#creating-a-basic-themeable-component) (recommended)**: Allowing you to create components that have a customized theme/style attached to them. This allows you to **style components**, as well as set **default props**, **variants** and **modes** to them.
+- **[Styled components](#theming-external-components)**: Allowing you to create a standalone styled component.
+
+**Note: Themeable components are not supported with third-party components that do not belong to Bumbag. [You can use styled components instead](#theming-external-components).**
 
 ## Creating a basic themeable component
 
diff --git a/packages/website/src/layout/DocsLayout.tsx b/packages/website/src/layout/DocsLayout.tsx
index afac42d6d..d25d891b1 100644
--- a/packages/website/src/layout/DocsLayout.tsx
+++ b/packages/website/src/layout/DocsLayout.tsx
@@ -112,7 +112,7 @@ export default function Docs(props: Props) {
     <React.Fragment>
       <SEO title={pageContext.frontmatter?.seoTitle || pageContext.frontmatter?.title} />
       <bumbag.PageWithHeader sticky header={<Header />}>
-        <bumbag.PageWithSidebar sidebar={<Sidebar path={path} />} sidebarPlacement="left">
+        <bumbag.PageWithSidebar sidebar={<Sidebar path={path} />} sidebarPlacement="left" sidebarWidth="270px">
           <TableOfContents
             breakpoint={pageContext.frontmatter.breakpoint || 'tablet'}
             isFluid={pageContext.frontmatter.isFluid}