@seveelly/baseui 16.1.1

package/documentation-site/components/thumbs/svg/tree-view.svg

@@ -0,0 +1,8 @@
+<svg width="232" height="145" viewBox="0 0 232 145" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="74" y="34" width="42" height="7" fill="#CBCBCB"/>
+<rect x="95" y="48" width="42" height="7" fill="#E2E2E2"/>
+<rect x="95" y="62" width="42" height="7" fill="#E2E2E2"/>
+<rect x="74" y="76" width="42" height="7" fill="#CBCBCB"/>
+<rect x="95" y="90" width="42" height="7" fill="#E2E2E2"/>
+<rect x="116" y="104" width="42" height="7" fill="#F6F6F6"/>
+</svg>

package/documentation-site/components/thumbs/svg/typography.svg

@@ -0,0 +1,6 @@
+<svg width="232" height="145" viewBox="0 0 232 145" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M155.536 58H152.944L151.702 54.922H146.23L144.988 58H142.468L147.778 45.4H150.226L155.536 58ZM150.856 52.816L148.966 48.1L147.058 52.816H150.856ZM144.416 66.4H149.384C149.9 66.4 150.386 66.49 150.842 66.67C151.298 66.838 151.694 67.072 152.03 67.372C152.366 67.672 152.63 68.026 152.822 68.434C153.014 68.842 153.11 69.28 153.11 69.748C153.11 70.264 152.978 70.744 152.714 71.188C152.462 71.62 152.12 71.98 151.688 72.268C152.36 72.544 152.9 72.958 153.308 73.51C153.728 74.062 153.938 74.698 153.938 75.418C153.938 75.922 153.836 76.39 153.632 76.822C153.44 77.254 153.17 77.632 152.822 77.956C152.474 78.28 152.066 78.538 151.598 78.73C151.142 78.91 150.644 79 150.104 79H144.416V66.4ZM146.846 68.434V71.53H149.15C149.606 71.53 149.972 71.38 150.248 71.08C150.524 70.768 150.662 70.402 150.662 69.982C150.662 69.538 150.524 69.172 150.248 68.884C149.972 68.584 149.606 68.434 149.15 68.434H146.846ZM149.69 76.966C150.23 76.966 150.662 76.804 150.986 76.48C151.31 76.156 151.472 75.742 151.472 75.238C151.472 74.746 151.31 74.332 150.986 73.996C150.662 73.66 150.23 73.492 149.69 73.492H146.846V76.966H149.69ZM143.126 93.682C143.126 92.782 143.294 91.936 143.63 91.144C143.966 90.352 144.428 89.662 145.016 89.074C145.616 88.486 146.324 88.024 147.14 87.688C147.968 87.34 148.868 87.166 149.84 87.166C150.98 87.166 152.012 87.418 152.936 87.922C153.86 88.414 154.634 89.068 155.258 89.884L153.368 91.27C152.96 90.694 152.444 90.238 151.82 89.902C151.208 89.554 150.56 89.38 149.876 89.38C149.276 89.38 148.712 89.488 148.184 89.704C147.668 89.908 147.218 90.202 146.834 90.586C146.45 90.958 146.144 91.408 145.916 91.936C145.7 92.464 145.592 93.046 145.592 93.682C145.592 94.33 145.706 94.924 145.934 95.464C146.162 95.992 146.468 96.448 146.852 96.832C147.236 97.204 147.686 97.492 148.202 97.696C148.73 97.9 149.288 98.002 149.876 98.002C150.608 98.002 151.286 97.84 151.91 97.516C152.534 97.18 153.038 96.718 153.422 96.13L155.312 97.516C154.712 98.332 153.95 98.992 153.026 99.496C152.102 99.988 151.058 100.234 149.894 100.234C148.898 100.234 147.986 100.066 147.158 99.73C146.33 99.394 145.616 98.932 145.016 98.344C144.428 97.756 143.966 97.066 143.63 96.274C143.294 95.47 143.126 94.606 143.126 93.682Z" fill="#CBCBCB"/>
+<path d="M133.287 58H131.253L129.903 54.688H124.017L122.667 58H120.705L126.051 45.4H127.941L133.287 58ZM129.219 53.032L126.969 47.524L124.701 53.032H129.219ZM122.628 66.4H127.236C127.752 66.4 128.232 66.49 128.676 66.67C129.132 66.838 129.522 67.072 129.846 67.372C130.182 67.66 130.44 68.008 130.62 68.416C130.812 68.812 130.908 69.238 130.908 69.694C130.908 70.234 130.764 70.732 130.476 71.188C130.2 71.632 129.828 71.992 129.36 72.268C130.08 72.508 130.656 72.916 131.088 73.492C131.532 74.056 131.754 74.704 131.754 75.436C131.754 75.928 131.658 76.39 131.466 76.822C131.274 77.254 131.004 77.632 130.656 77.956C130.32 78.28 129.918 78.538 129.45 78.73C128.994 78.91 128.496 79 127.956 79H122.628V66.4ZM124.518 68.002V71.692H127.092C127.368 71.692 127.62 71.644 127.848 71.548C128.088 71.452 128.292 71.32 128.46 71.152C128.628 70.984 128.76 70.792 128.856 70.576C128.952 70.348 129 70.108 129 69.856C129 69.328 128.82 68.89 128.46 68.542C128.112 68.182 127.656 68.002 127.092 68.002H124.518ZM127.704 77.398C128.34 77.398 128.856 77.2 129.252 76.804C129.648 76.396 129.846 75.898 129.846 75.31C129.846 75.022 129.792 74.758 129.684 74.518C129.576 74.266 129.426 74.05 129.234 73.87C129.054 73.678 128.832 73.528 128.568 73.42C128.304 73.312 128.016 73.258 127.704 73.258H124.518V77.398H127.704ZM121.03 93.7C121.03 92.8 121.198 91.954 121.534 91.162C121.87 90.37 122.332 89.68 122.92 89.092C123.52 88.504 124.222 88.042 125.026 87.706C125.842 87.358 126.724 87.184 127.672 87.184C128.836 87.184 129.886 87.448 130.822 87.976C131.758 88.492 132.532 89.182 133.144 90.046L131.632 91.072C131.188 90.424 130.618 89.902 129.922 89.506C129.238 89.11 128.494 88.912 127.69 88.912C127.03 88.912 126.412 89.032 125.836 89.272C125.26 89.512 124.756 89.848 124.324 90.28C123.892 90.7 123.55 91.204 123.298 91.792C123.058 92.368 122.938 93.004 122.938 93.7C122.938 94.396 123.058 95.038 123.298 95.626C123.55 96.214 123.892 96.718 124.324 97.138C124.756 97.558 125.26 97.888 125.836 98.128C126.412 98.368 127.03 98.488 127.69 98.488C128.518 98.488 129.28 98.296 129.976 97.912C130.684 97.516 131.248 96.988 131.668 96.328L133.18 97.372C132.592 98.236 131.824 98.926 130.876 99.442C129.94 99.958 128.884 100.216 127.708 100.216C126.748 100.216 125.86 100.048 125.044 99.712C124.228 99.376 123.52 98.914 122.92 98.326C122.332 97.738 121.87 97.048 121.534 96.256C121.198 95.464 121.03 94.612 121.03 93.7Z" fill="#CBCBCB"/>
+<path d="M111.038 58H109.58L108.086 54.454H101.858L100.382 58H98.9598L104.342 45.4H105.656L111.038 58ZM107.582 53.248L104.972 46.984L102.362 53.248H107.582ZM100.849 66.4H105.097C105.613 66.4 106.087 66.484 106.519 66.652C106.963 66.82 107.341 67.054 107.653 67.354C107.977 67.654 108.229 68.002 108.409 68.398C108.589 68.794 108.679 69.214 108.679 69.658C108.679 70.198 108.529 70.696 108.229 71.152C107.929 71.608 107.527 71.974 107.023 72.25C107.395 72.358 107.737 72.52 108.049 72.736C108.361 72.94 108.631 73.18 108.859 73.456C109.087 73.732 109.261 74.044 109.381 74.392C109.501 74.728 109.561 75.082 109.561 75.454C109.561 75.946 109.465 76.408 109.273 76.84C109.081 77.272 108.817 77.65 108.481 77.974C108.157 78.286 107.767 78.538 107.311 78.73C106.855 78.91 106.357 79 105.817 79H100.849V66.4ZM102.199 67.57V71.854H105.025C105.361 71.854 105.667 71.8 105.943 71.692C106.231 71.572 106.477 71.416 106.681 71.224C106.885 71.032 107.041 70.81 107.149 70.558C107.269 70.294 107.329 70.018 107.329 69.73C107.329 69.43 107.269 69.148 107.149 68.884C107.041 68.62 106.885 68.392 106.681 68.2C106.477 68.008 106.231 67.858 105.943 67.75C105.667 67.63 105.361 67.57 105.025 67.57H102.199ZM105.709 77.83C106.069 77.83 106.399 77.77 106.699 77.65C107.011 77.518 107.275 77.344 107.491 77.128C107.719 76.9 107.893 76.642 108.013 76.354C108.133 76.054 108.193 75.736 108.193 75.4C108.193 75.064 108.133 74.752 108.013 74.464C107.893 74.176 107.719 73.924 107.491 73.708C107.275 73.492 107.011 73.324 106.699 73.204C106.399 73.072 106.069 73.006 105.709 73.006H102.199V77.83H105.709ZM99.0311 93.7C99.0311 92.8 99.1991 91.954 99.5351 91.162C99.8711 90.37 100.333 89.686 100.921 89.11C101.521 88.522 102.217 88.06 103.009 87.724C103.813 87.376 104.677 87.202 105.601 87.202C106.177 87.202 106.735 87.274 107.275 87.418C107.815 87.562 108.319 87.766 108.787 88.03C109.267 88.294 109.699 88.612 110.083 88.984C110.479 89.344 110.821 89.746 111.109 90.19L109.993 90.874C109.525 90.142 108.907 89.554 108.139 89.11C107.371 88.666 106.525 88.444 105.601 88.444C104.881 88.444 104.203 88.582 103.567 88.858C102.931 89.122 102.373 89.488 101.893 89.956C101.425 90.424 101.053 90.982 100.777 91.63C100.513 92.266 100.381 92.956 100.381 93.7C100.381 94.444 100.513 95.14 100.777 95.788C101.053 96.424 101.425 96.976 101.893 97.444C102.373 97.912 102.931 98.284 103.567 98.56C104.203 98.824 104.881 98.956 105.601 98.956C106.537 98.956 107.389 98.74 108.157 98.308C108.937 97.864 109.561 97.27 110.029 96.526L111.127 97.228C110.551 98.128 109.783 98.848 108.823 99.388C107.875 99.928 106.801 100.198 105.601 100.198C104.677 100.198 103.813 100.03 103.009 99.694C102.205 99.358 101.509 98.902 100.921 98.326C100.333 97.738 99.8711 97.048 99.5351 96.256C99.1991 95.464 99.0311 94.612 99.0311 93.7Z" fill="#CBCBCB"/>
+<path d="M88.8163 58H87.8803L86.2783 54.238H79.6903L78.1063 58H77.1883L82.5883 45.4H83.4163L88.8163 58ZM85.9363 53.446L82.9843 46.498L80.0323 53.446H85.9363ZM79.0527 66.4H82.9767C83.4807 66.4 83.9487 66.484 84.3807 66.652C84.8127 66.82 85.1847 67.054 85.4967 67.354C85.8207 67.642 86.0667 67.984 86.2347 68.38C86.4147 68.764 86.5047 69.178 86.5047 69.622C86.5047 70.186 86.3427 70.696 86.0187 71.152C85.6947 71.608 85.2567 71.968 84.7047 72.232C85.1007 72.328 85.4667 72.484 85.8027 72.7C86.1387 72.904 86.4207 73.15 86.6487 73.438C86.8887 73.726 87.0747 74.044 87.2067 74.392C87.3387 74.74 87.4047 75.1 87.4047 75.472C87.4047 75.964 87.3087 76.426 87.1167 76.858C86.9367 77.278 86.6787 77.65 86.3427 77.974C86.0187 78.286 85.6287 78.538 85.1727 78.73C84.7287 78.91 84.2367 79 83.6967 79H79.0527V66.4ZM79.9167 67.192V71.998H82.9947C83.3787 71.998 83.7327 71.938 84.0567 71.818C84.3807 71.686 84.6567 71.512 84.8847 71.296C85.1247 71.08 85.3107 70.828 85.4427 70.54C85.5747 70.24 85.6407 69.928 85.6407 69.604C85.6407 69.268 85.5747 68.956 85.4427 68.668C85.3107 68.368 85.1247 68.11 84.8847 67.894C84.6567 67.678 84.3807 67.51 84.0567 67.39C83.7327 67.258 83.3787 67.192 82.9947 67.192H79.9167ZM83.7147 78.208C84.1227 78.208 84.5007 78.136 84.8487 77.992C85.1967 77.848 85.4967 77.65 85.7487 77.398C86.0007 77.146 86.1927 76.858 86.3247 76.534C86.4687 76.198 86.5407 75.844 86.5407 75.472C86.5407 75.1 86.4687 74.752 86.3247 74.428C86.1927 74.104 86.0007 73.822 85.7487 73.582C85.4967 73.33 85.1967 73.138 84.8487 73.006C84.5007 72.862 84.1227 72.79 83.7147 72.79H79.9167V78.208H83.7147ZM77.0227 93.718C77.0227 92.818 77.1907 91.972 77.5267 91.18C77.8747 90.388 78.3427 89.704 78.9307 89.128C79.5187 88.54 80.2087 88.078 81.0007 87.742C81.7927 87.394 82.6387 87.22 83.5387 87.22C84.1267 87.22 84.6907 87.292 85.2307 87.436C85.7707 87.58 86.2807 87.79 86.7607 88.066C87.2407 88.33 87.6727 88.654 88.0567 89.038C88.4527 89.41 88.7947 89.83 89.0827 90.298L88.3447 90.712C88.0927 90.304 87.7987 89.938 87.4627 89.614C87.1267 89.278 86.7487 88.996 86.3287 88.768C85.9207 88.528 85.4767 88.342 84.9967 88.21C84.5287 88.078 84.0427 88.012 83.5387 88.012C82.7467 88.012 82.0087 88.162 81.3247 88.462C80.6407 88.762 80.0407 89.17 79.5247 89.686C79.0207 90.202 78.6187 90.808 78.3187 91.504C78.0307 92.188 77.8867 92.926 77.8867 93.718C77.8867 94.51 78.0307 95.248 78.3187 95.932C78.6187 96.616 79.0207 97.216 79.5247 97.732C80.0407 98.248 80.6407 98.656 81.3247 98.956C82.0087 99.244 82.7467 99.388 83.5387 99.388C84.5587 99.388 85.4887 99.148 86.3287 98.668C87.1807 98.176 87.8587 97.522 88.3627 96.706L89.1007 97.084C88.5247 98.02 87.7507 98.77 86.7787 99.334C85.8187 99.898 84.7387 100.18 83.5387 100.18C82.6387 100.18 81.7927 100.012 81.0007 99.676C80.2087 99.34 79.5187 98.884 78.9307 98.308C78.3427 97.72 77.8747 97.036 77.5267 96.256C77.1907 95.464 77.0227 94.618 77.0227 93.718Z" fill="#CBCBCB"/>
+</svg>

package/documentation-site/components/thumbs/svg/unstable-a11y.svg

@@ -0,0 +1,13 @@
+<svg width="232" height="145" viewBox="0 0 232 145" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="79" y="72" width="50" height="18" fill="#E2E2E2"/>
+<rect x="105" y="72" width="24" height="10" fill="#CBCBCB"/>
+<rect x="103" y="56" width="50" height="24" fill="#F6F6F6"/>
+<g clip-path="url(#clip0)">
+<path d="M128 61.275L122 72H134L128 61.275ZM127.182 64.85H128.818V67.6H127.182V64.85ZM128 70.9C127.4 70.9 126.909 70.405 126.909 69.8C126.909 69.195 127.4 68.7 128 68.7C128.6 68.7 129.091 69.195 129.091 69.8C129.091 70.405 128.6 70.9 128 70.9Z" fill="#CBCBCB"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect x="122" y="61" width="12" height="11" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/documentation-site/components/thumbs/svg/use-styletron.svg

@@ -0,0 +1,11 @@
+<svg width="232" height="145" viewBox="0 0 232 145" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="14" height="14" transform="matrix(0.00243665 -0.999997 -0.999997 -0.00243665 122.912 98.1218)" fill="#F6F6F6"/>
+<rect width="14" height="14" transform="matrix(0.00243665 -0.999997 -0.999997 -0.00243665 104.912 80.0342)" fill="#F6F6F6"/>
+<rect width="14" height="14" transform="matrix(0.00243665 -0.999997 -0.999997 -0.00243665 122.956 80.1218)" fill="#E2E2E2"/>
+<rect width="14" height="14" transform="matrix(0.00243665 -0.999997 -0.999997 -0.00243665 123 62.1218)" fill="#CBCBCB"/>
+<rect width="14" height="14" transform="matrix(0.00243665 -0.999997 -0.999997 -0.00243665 140.912 80.0342)" fill="#CBCBCB"/>
+<rect width="14" height="14" transform="matrix(0.00243665 -0.999997 -0.999997 -0.00243665 87 62.0342)" fill="#F6F6F6"/>
+<rect width="14" height="14" transform="matrix(0.00243665 -0.999997 -0.999997 -0.00243665 105 62.0781)" fill="#E2E2E2"/>
+<rect width="14" height="14" transform="matrix(0.00243665 -0.999997 -0.999997 -0.00243665 140.912 98.1655)" fill="#E2E2E2"/>
+<rect width="14" height="14" transform="matrix(0.00243665 -0.999997 -0.999997 -0.00243665 158.912 98.2095)" fill="#CBCBCB"/>
+</svg>

package/documentation-site/components/thumbs/template.jsx

@@ -0,0 +1,34 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+
+// CLI example
+// svgr --template template.js --replace-attr-values "#F6F6F6={colors[0]}" --replace-attr-values "#E2E2E2={colors[1]}" --replace-attr-values "#CBCBCB={colors[2]}" -d components svg
+
+const header = `/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+/* THIS FILE IS AUTO-GENERATED. DO NOT MODIFY. */
+
+`;
+
+function template(api, opts, values) {
+  const { template } = api;
+  const { imports, componentName, props, jsx } = values;
+  return template.ast`
+${header}
+${imports}
+${"\n"}
+export default function ${componentName} (${props}) {
+  return ${jsx}
+}
+`;
+}
+
+module.exports = template;

package/documentation-site/components/unstable-warning.jsx

@@ -0,0 +1,36 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+//
+
+import React from "react";
+import { Notification, KIND } from "baseui/notification";
+import { StyledLink } from "baseui/link";
+import Link from "next/link";
+
+export default function UnstableWarning() {
+  return (
+    <Notification
+      overrides={{ Body: { style: { width: "auto" } } }}
+      kind={KIND.warning}
+    >
+      <>
+        {/* eslint-disable-next-line react/no-unescaped-entities */}
+        This component is currently 'Unstable', which means that the
+        functionality and API is subject to change in any version release. We
+        publish unstable components so that feedback can be presented before
+        {/* eslint-disable-next-line react/no-unescaped-entities */}
+        aligning on a consistent design. Please see baseui's{" "}
+        <Link href="/discover-more/versioning-policy" legacyBehavior>
+          <StyledLink href="/discover-more/versioning-policy">
+            versioning policy
+          </StyledLink>
+        </Link>{" "}
+        for more information.
+      </>
+    </Notification>
+  );
+}

package/documentation-site/components/version-selector.jsx

@@ -0,0 +1,92 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+
+/* eslint-env browser */
+
+import * as React from "react";
+
+import ChevronDown from "baseui/icon/chevron-down";
+import { StatefulPopover, PLACEMENT as PopoverPlacement } from "baseui/popover";
+import { StatefulMenu, NestedMenus } from "baseui/menu";
+import { Button, KIND } from "baseui/button";
+
+import pkg from "../../package.json";
+
+const { version } = pkg;
+
+const currentMajor = parseInt(version.split(".")[0], 10);
+const majors = [...Array(8).keys()].map((i) => i + currentMajor - 8);
+const majorVersions = majors.reverse().map((version) => ({
+  label: `v${version}`,
+}));
+
+const majorVersionsToDisplay = majorVersions.map((version) => {
+  const { label } = version;
+
+  return {
+    label,
+    originalVersionNumber: label,
+  };
+});
+const VersionSelector = () => {
+  const handleVersionSelect = async (item) => {
+    const versionUrl = `https://${item.label}.baseweb.design`;
+
+    try {
+      // Check if the version page exists
+      const response = await fetch(versionUrl, { method: 'HEAD' });
+
+      if (response.ok) {
+        // Page exists, navigate to it
+        window.location.href = versionUrl;
+      } else {
+        // Page doesn't exist, redirect to main site
+        window.location.href = 'https://baseweb.design/';
+      }
+    } catch (error) {
+      // In case of network error, redirect to main site
+      window.location.href = 'https://baseweb.design/';
+    }
+  };
+
+  return (
+    <StatefulPopover
+      placement={PopoverPlacement.bottomLeft}
+      focusLock
+      // eslint-disable-next-line jsx-a11y/no-autofocus
+      autoFocus
+      content={({ close }) => (
+        <NestedMenus>
+          <StatefulMenu
+            items={majorVersionsToDisplay}
+            onItemSelect={({ item }) => {
+              handleVersionSelect(item);
+              close();
+            }}
+            overrides={{
+              List: {
+                style: {
+                  width: "100px",
+                },
+              },
+            }}
+          />
+        </NestedMenus>
+      )}
+    >
+      <Button
+        size="compact"
+        kind={KIND.tertiary}
+        endEnhancer={() => <ChevronDown size={20} title="" />}
+      >
+        v{version}
+      </Button>
+    </StatefulPopover>
+  );
+};
+
+export default VersionSelector;

package/documentation-site/components/yard/__tests__/ast.test.ts

@@ -0,0 +1,101 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+
+import { parseOverrides } from "../custom-props";
+import { toggleOverrideSharedProps } from "../ast";
+
+describe("parseOverrides", () => {
+  test("get overrides active state and value", () => {
+    const overrides = `{
+      Root: {
+        style: ({ $theme }) => ({
+          outline: \`\${$theme.colors.warning200} solid\`,
+          backgroundColor: $theme.colors.warning200
+        })
+      },
+      Tag: {
+        props: {
+          overrides: {
+            Action: {
+              style: ({ $theme }) => ({
+                outline: \`\${$theme.colors.warning200} dashed\`,
+                backgroundColor:
+                  $theme.colors.warning200
+              })
+            }
+          }
+        }
+      }
+    }`;
+    expect(parseOverrides(overrides)).toEqual({
+      Root: {
+        active: true,
+        style: `({ $theme }) => ({
+  outline: \`\${$theme.colors.warning200} solid\`,
+  backgroundColor: $theme.colors.warning200
+})`,
+      },
+      Tag: {
+        active: true,
+        nestedValue: {
+          Action: {
+            active: true,
+            style: `({ $theme }) => ({
+  outline: \`\${$theme.colors.warning200} dashed\`,
+  backgroundColor: $theme.colors.warning200
+})`,
+          },
+        },
+      },
+    });
+  });
+});
+
+describe("toggleOverrideSharedProps", () => {
+  test("adding them", () => {
+    const overrides = `{
+    Root: {
+      style: ({ $theme }) => {
+        return {
+          outline: \`\${$theme.colors.warning200} solid\`,
+          backgroundColor: $theme.colors.warning200
+        };
+      }
+    }
+  }`;
+    expect(toggleOverrideSharedProps(overrides, ["$isActive"])).toEqual(`({
+  $theme,
+  $isActive
+}) => {
+  return {
+    outline: \`\${$theme.colors.warning200} solid\`,
+    backgroundColor: $theme.colors.warning200
+  };
+}`);
+  });
+
+  test("removing them", () => {
+    const overrides = `{
+    Root: {
+      style: ({ $theme, $isActive }) => {
+        return {
+          outline: \`\${$theme.colors.warning200} solid\`,
+          backgroundColor: $theme.colors.warning200
+        };
+      }
+    }
+  }`;
+    expect(toggleOverrideSharedProps(overrides, ["$isActive"])).toEqual(`({
+  $theme
+}) => {
+  return {
+    outline: \`\${$theme.colors.warning200} solid\`,
+    backgroundColor: $theme.colors.warning200
+  };
+}`);
+  });
+});

package/documentation-site/components/yard/__tests__/code-generator.test.ts

@@ -0,0 +1,197 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+
+//@ts-ignore
+import { getAstPropValue, getCode } from "react-view/dist/lib/code-generator";
+import { PropTypes } from "react-view";
+import generate from "@babel/generator";
+import { customProps } from "../custom-props";
+import { generate as generateThemeWrapper, getProvider } from "../provider";
+
+import * as t from "@babel/types";
+
+test("overrides", () => {
+  expect(
+    getAstPropValue(
+      {
+        value: {
+          Root: {
+            active: true,
+            style: `() => { color: 'black'}`,
+          },
+          NotActiveNotInAST: {
+            active: false,
+            style: `() => { color: 'pink'}`,
+          },
+        },
+        type: PropTypes.Custom,
+        description: "",
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      } as any,
+      "overrides",
+      customProps,
+    ),
+  ).toMatchInlineSnapshot(`
+    Object {
+      "properties": Array [
+        Object {
+          "computed": false,
+          "decorators": null,
+          "key": Object {
+            "name": "Root",
+            "type": "Identifier",
+          },
+          "shorthand": false,
+          "type": "ObjectProperty",
+          "value": Object {
+            "properties": Array [
+              Object {
+                "computed": false,
+                "decorators": null,
+                "key": Object {
+                  "name": "style",
+                  "type": "Identifier",
+                },
+                "shorthand": false,
+                "type": "ObjectProperty",
+                "value": Object {
+                  "async": false,
+                  "body": Object {
+                    "body": Array [
+                      Object {
+                        "body": Object {
+                          "expression": Object {
+                            "extra": Object {
+                              "raw": "'black'",
+                              "rawValue": "black",
+                            },
+                            "loc": undefined,
+                            "type": "StringLiteral",
+                            "value": "black",
+                          },
+                          "loc": undefined,
+                          "type": "ExpressionStatement",
+                        },
+                        "label": Object {
+                          "loc": undefined,
+                          "name": "color",
+                          "type": "Identifier",
+                        },
+                        "loc": undefined,
+                        "type": "LabeledStatement",
+                      },
+                    ],
+                    "directives": Array [],
+                    "loc": undefined,
+                    "type": "BlockStatement",
+                  },
+                  "extra": Object {
+                    "parenStart": 0,
+                    "parenthesized": true,
+                  },
+                  "generator": false,
+                  "loc": undefined,
+                  "params": Array [],
+                  "type": "ArrowFunctionExpression",
+                },
+              },
+            ],
+            "type": "ObjectExpression",
+          },
+        },
+      ],
+      "type": "ObjectExpression",
+    }
+  `);
+});
+
+describe("get theme AST primitives", () => {
+  test("getAstThemeWrapper", () => {
+    expect(
+      generate(
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        generateThemeWrapper(
+          { inputFill: "yellow" },
+          t.jsxText("Hey") as any,
+          "light-theme",
+        ) as any,
+      ).code,
+    ).toBe(`<ThemeProvider theme={createTheme(light-theme, {
+  colors: {
+    inputFill: "yellow"
+  }
+})}>Hey</ThemeProvider>`);
+  });
+});
+
+describe("getCode", () => {
+  test("stateful, hooks enabled component", () => {
+    expect(
+      getCode({
+        props: {
+          value: {
+            value: "Hello",
+            type: PropTypes.String,
+            description: "Input value attribute.",
+            stateful: true,
+          },
+          onChange: {
+            value: "e => setValue(e.target.value)",
+            type: PropTypes.Function,
+            description: "",
+            propHook: { what: "e.target.value", into: "value" },
+          },
+          overrides: {
+            value: {
+              Root: {
+                active: true,
+                style: `() => ({ color: 'black'})`,
+              },
+            },
+            type: PropTypes.Custom,
+            description: "",
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          } as any,
+        },
+        componentName: "Input",
+        providerValue: { inputFill: "yellow" },
+        provider: getProvider({ inputFill: "pink" }, "lightThemePrimitives"),
+        importsConfig: {
+          "baseui/input": {
+            named: ["Input"],
+          },
+        },
+        customProps,
+      }),
+    ).toBe(`import * as React from "react";
+import { Input } from "baseui/input";
+import {
+  ThemeProvider,
+  createTheme,
+  lightThemePrimitives
+} from "baseui";
+
+export default () => {
+  const [value, setValue] = React.useState("Hello");
+  return (
+    <ThemeProvider
+      theme={createTheme(lightThemePrimitives, {
+        colors: { inputFill: "yellow" }
+      })}
+    >
+      <Input
+        value={value}
+        onChange={e => setValue(e.target.value)}
+        overrides={{
+          Root: { style: () => ({ color: "black" }) }
+        }}
+      />
+    </ThemeProvider>
+  );
+}`);
+  });
+});

package/documentation-site/components/yard/action-buttons.tsx

@@ -0,0 +1,83 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+
+import * as React from "react";
+import { useStyletron } from "baseui";
+import type { TImportsConfig } from "react-view";
+import {
+  MdContentCopy,
+  MdFormatIndentIncrease,
+  MdRotateRight,
+} from "react-icons/md";
+
+import { Button, KIND, SIZE } from "baseui/button";
+import { ButtonGroup } from "baseui/button-group";
+
+const ActionButtons: React.FC<{
+  formatCode: () => void;
+  copyCode: () => void;
+  copyUrl: () => void;
+  reset: () => void;
+  code: string;
+  componentName: string;
+  importsConfig: TImportsConfig;
+}> = ({ formatCode, copyCode, reset, code, componentName, importsConfig }) => {
+  const [, theme] = useStyletron();
+
+  return (
+    <React.Fragment>
+      <ButtonGroup
+        size={SIZE.compact}
+        overrides={{
+          Root: {
+            style: ({ $theme }) => ({
+              flexWrap: "wrap",
+              marginTop: $theme.sizing.scale300,
+            }),
+          },
+        }}
+      >
+        <Button kind={KIND.tertiary} onClick={formatCode}>
+          <MdFormatIndentIncrease
+            style={{ paddingRight: theme.sizing.scale100 }}
+          />{" "}
+          Format
+        </Button>
+        <Button kind={KIND.tertiary} onClick={copyCode}>
+          <MdContentCopy style={{ paddingRight: theme.sizing.scale100 }} /> Copy
+        </Button>
+        <Button
+          kind={KIND.tertiary}
+          onClick={() => {
+            reset();
+          }}
+        >
+          <MdRotateRight style={{ paddingRight: theme.sizing.scale100 }} />{" "}
+          Reset
+        </Button>
+        <Button
+          overrides={{
+            BaseButton: {
+              props: {
+                $as: "a",
+              },
+            },
+          }}
+          // @ts-ignore
+          href={`/cheat-sheet#${Object.keys(importsConfig)[0]
+            .split("/")[1]
+            .toLowerCase()}`}
+          kind={KIND.tertiary}
+        >
+          API
+        </Button>
+      </ButtonGroup>
+    </React.Fragment>
+  );
+};
+
+export default ActionButtons;

package/documentation-site/components/yard/ast.ts

@@ -0,0 +1,75 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+
+import generate from "@babel/generator";
+import traverse from "@babel/traverse";
+import * as t from "@babel/types";
+import { parse } from "react-view";
+
+export function toggleOverrideSharedProps(code: string, sharedProps: string[]) {
+  let result = "";
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const ast: any = parse(code);
+    traverse(ast, {
+      ArrowFunctionExpression(path) {
+        if (result !== "") return;
+        if (path.node.params.length !== 1) return;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const firstParam: any = path.node.params[0];
+        let newParams: string[] = [];
+        if (firstParam.type === "ObjectPattern") {
+          const properties = firstParam.properties;
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          newParams = properties.map((prop: any) => prop.key.name);
+        }
+
+        const shouldWeAddSharedProps = newParams.every(
+          (name) => !sharedProps.includes(name),
+        );
+
+        if (shouldWeAddSharedProps) {
+          sharedProps.forEach((param) => {
+            if (!newParams.includes(param)) {
+              newParams.push(param);
+            }
+          });
+          path.node.params = [
+            //@ts-ignore
+            t.objectPattern(
+              newParams.map((param) =>
+                t.objectProperty(
+                  t.identifier(param),
+                  t.identifier(param),
+                  false,
+                  true,
+                ),
+              ),
+            ),
+          ];
+        } else {
+          path.node.params = [
+            //@ts-ignore
+            t.objectPattern([
+              //@ts-ignore
+              t.objectProperty(
+                t.identifier("$theme"),
+                t.identifier("$theme"),
+                false,
+                true,
+              ),
+            ]),
+          ];
+        }
+        result = generate(path.node).code;
+      },
+    });
+  } catch (e) {
+    throw new Error("Override params transform was no good.");
+  }
+  return result;
+}