@workday/canvas-kit-docs 15.0.0-alpha.0056-next.0 → 15.0.0-alpha.0060-next.0

package/dist/es6/lib/stackblitzFiles/packageJSONFile.js

@@ -18,11 +18,11 @@ export const packageJSONFile = `{
     "@emotion/react": "11.11.4",
     "@types/react": "18.2.60",
     "@types/react-dom": "18.2.19",
-    "@workday/canvas-kit-labs-react": "14.1.27",
-    "@workday/canvas-kit-preview-react": "14.1.27",
-    "@workday/canvas-kit-react": "14.1.27",
-    "@workday/canvas-kit-react-fonts": "^14.1.27",
-    "@workday/canvas-kit-styling": "14.1.27",
+    "@workday/canvas-kit-labs-react": "14.1.28",
+    "@workday/canvas-kit-preview-react": "14.1.28",
+    "@workday/canvas-kit-react": "14.1.28",
+    "@workday/canvas-kit-react-fonts": "^14.1.28",
+    "@workday/canvas-kit-styling": "14.1.28",
     "@workday/canvas-system-icons-web": "3.0.36",
     "@workday/canvas-tokens-web": "3.1.2"
   },

package/dist/es6/lib/stackblitzFiles/packageJSONFile.ts

@@ -18,11 +18,11 @@ export const packageJSONFile = `{
     "@emotion/react": "11.11.4",
     "@types/react": "18.2.60",
     "@types/react-dom": "18.2.19",
-    "@workday/canvas-kit-labs-react": "14.1.27",
-    "@workday/canvas-kit-preview-react": "14.1.27",
-    "@workday/canvas-kit-react": "14.1.27",
-    "@workday/canvas-kit-react-fonts": "^14.1.27",
-    "@workday/canvas-kit-styling": "14.1.27",
+    "@workday/canvas-kit-labs-react": "14.1.28",
+    "@workday/canvas-kit-preview-react": "14.1.28",
+    "@workday/canvas-kit-react": "14.1.28",
+    "@workday/canvas-kit-react-fonts": "^14.1.28",
+    "@workday/canvas-kit-styling": "14.1.28",
     "@workday/canvas-system-icons-web": "3.0.36",
     "@workday/canvas-tokens-web": "3.1.2"
   },

package/dist/mdx/14.0-UPGRADE-GUIDE.mdx

@@ -83,7 +83,7 @@ input for LLMs to automate and assist with your migration process.
   migration
 
 <DownloadLLMFile
-  rawFileLink="https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/docs/llm-txt/llm-canvas-kit-upgrade-guide-v14.txt"
+  rawFileLink="https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/docs/llm/llm-canvas-kit-upgrade-guide-v14.txt"
   filename="llm-canvas-kit-upgrade-guide-v14.txt"
 />
 

package/dist/mdx/labs-react/side-panel/SidePanel.mdx

@@ -0,0 +1,256 @@
+import {ExampleCodeBlock, SymbolDoc, Specifications, StorybookStatusIndicator} from '@workday/canvas-kit-docs';
+import Basic from './examples/Basic';
+import HiddenName from './examples/HiddenName';
+import AlternatePanel from './examples/Variant';
+import ExternalControl from './examples/ExternalControl';
+import RightOrigin from './examples/RightOrigin';
+import AlwaysOpen from './examples/AlwaysOpen';
+import OnStateTransition from './examples/OnStateTransition';
+
+
+# Canvas Kit Side Panel <StorybookStatusIndicator type="new" />
+
+`SidePanel` is a collapsible container that anchors to the left or right side of the screen. It uses
+the model pattern for state management and is fully accessible.
+
+[> Workday Design Reference](https://design.workday.com/components/containers/side-panel)
+
+## Installation
+
+```sh
+yarn add @workday/canvas-kit-labs-react
+```
+
+## Migrating from Preview
+
+If you're migrating from `@workday/canvas-kit-preview-react/side-panel`, here are the key API changes:
+
+### Import Changes
+
+```tsx
+// Before (preview-react)
+import {SidePanel, useSidePanel} from '@workday/canvas-kit-preview-react/side-panel';
+
+// After (labs-react)
+import {SidePanel, useSidePanelModel} from '@workday/canvas-kit-labs-react/side-panel';
+```
+
+### Hook API Changes
+
+| Preview (`useSidePanel`) | Labs (`useSidePanelModel`) |
+|--------------------------|----------------------------|
+| `initialExpanded: boolean` | `initialTransitionState: 'expanded' \| 'collapsed'` |
+| `origin: 'left' \| 'right'` | `origin: 'start' \| 'end'` |
+| Returns `expanded: boolean` | Returns `model.state.transitionState` |
+| Returns `setExpanded(bool)` | Use `model.events.expand()` / `model.events.collapse()` |
+| Returns `panelProps` to spread | Props applied automatically via `elemPropsHook` |
+| Returns `labelProps` to spread | Use `id={model.state.labelId}` on label element |
+| Returns `controlProps` to spread | Props applied automatically to `SidePanel.ToggleButton` |
+
+### Component API Changes
+
+| Preview | Labs |
+|---------|------|
+| `<SidePanel {...panelProps}>` | `<SidePanel model={model}>` or just `<SidePanel>` |
+| `<SidePanel.ToggleButton {...controlProps} />` | `<SidePanel.ToggleButton />` |
+| `<Heading {...labelProps}>` | `<Heading id={model.state.labelId}>` |
+| `expanded` prop on SidePanel | Managed by model's `transitionState` |
+| `touched` prop on SidePanel | Managed internally |
+| `onExpandedChange` callback | Use `onStateTransition` and derive expanded state |
+| `onStateTransition` on component | `onStateTransition` on model config |
+
+### Code Migration Example
+
+```tsx
+// Before (preview-react)
+const {expanded, panelProps, labelProps, controlProps} = useSidePanel({
+  initialExpanded: false,
+});
+
+<SidePanel {...panelProps} origin="right" onExpandedChange={(exp) => console.log(exp)}>
+  <SidePanel.ToggleButton {...controlProps} />
+  <Heading {...labelProps}>Panel Title</Heading>
+  {expanded && <Content />}
+</SidePanel>
+
+// After (labs-react)
+const model = useSidePanelModel({
+  initialTransitionState: 'collapsed',
+  origin: 'end',
+  onStateTransition: (state) => {
+    const isExpanded = state === 'expanded' || state === 'expanding';
+    console.log(isExpanded);
+  },
+});
+
+<SidePanel model={model}>
+  <SidePanel.ToggleButton />
+  <Heading id={model.state.labelId}>Panel Title</Heading>
+  {model.state.transitionState === 'expanded' && <Content />}
+</SidePanel>
+```
+
+### Checking Expanded State
+
+```tsx
+// Before (preview-react)
+if (expanded) { /* ... */ }
+
+// After (labs-react) - for exact state
+if (model.state.transitionState === 'expanded') { /* ... */ }
+
+// After (labs-react) - including animation states
+const isExpanded = model.state.transitionState === 'expanded' ||
+                   model.state.transitionState === 'expanding';
+```
+
+## Usage
+
+### Basic Example
+
+`SidePanel` is composed of three parts:
+
+- The panel container (with an optional `model` prop)
+- An accessible name (using `model.state.labelId` on a visible or hidden element)
+- A toggle button (`SidePanel.ToggleButton`) to control the expand / collapse states
+
+The component automatically handles:
+- ARIA attributes (`aria-labelledby`, `aria-controls`, `aria-expanded`)
+- Transition states (`expanding`, `expanded`, `collapsing`, `collapsed`)
+- CSS transitions for smooth animations
+
+Bidirectional support is built into `SidePanel`. As seen in the example below, CSS Flexbox flips the
+page layout and the panel's contents. `SidePanel` also has logic to flip the position and direction
+of the `ToggleButton` as well as the direction of the expand / collapse animation. If you're using
+CSS Flexbox for layouts and using the provided components, you shouldn't have to provide any custom
+logic or styling for bidirectional support.
+
+<ExampleCodeBlock code={Basic} />
+
+### Hidden Name
+
+`SidePanel` must always have an accessible label for both the HTML `<section>` container and the
+`ToggleButton`. The label element must have `id={model.state.labelId}` to properly connect it to
+the panel and toggle button via `aria-labelledby`. The label can be visually hidden using
+`AccessibleHide` which relies on CSS properties to hide text visually while keeping it available
+for screen readers.
+
+<ExampleCodeBlock code={HiddenName} />
+
+### Alternate Variant
+
+`SidePanel` has one variant, `alternate`, which you can supply as a top-level prop. Default depth of
+`alternate` variant is 5, if `alternate` SidePanel has an overlay behavior the depth 6 should be
+used (this case is covered in the Examples section).
+
+<ExampleCodeBlock code={AlternatePanel} />
+
+### External Control
+
+Sometimes you'll want to control `SidePanel`'s expand / collapse behavior from outside the
+component. You can use the model's events (`model.events.expand()` and `model.events.collapse()`)
+to programmatically control the panel.
+
+#### Notes about accessibility
+
+When using external controls, be mindful of accessibility:
+
+- Use `aria-pressed` on toggle buttons to indicate the current state
+- The `SidePanel.ToggleButton` inside the panel automatically receives the correct ARIA attributes
+- External buttons should have their own accessible labels (don't rely on `aria-labelledby` pointing
+  to the panel's label)
+
+In the following example, we use the model's `transitionState` to determine the button's pressed
+state and call `model.events.expand()` or `model.events.collapse()` on click.
+
+<ExampleCodeBlock code={ExternalControl} />
+
+### Right Origin
+
+By default, `SidePanel` uses a `start` origin (left in LTR, right in RTL). This sets the
+`ToggleButton`'s position and direction as well as the direction of the animation. You can set
+the origin to `"end"` to flip these. The origin uses logical properties (`start`/`end`) for
+proper bidirectional support.
+
+<ExampleCodeBlock code={RightOrigin} />
+
+### Always Open
+
+If you do not need `SidePanel`'s expand / collapse behavior, you can simply omit the `ToggleButton`.
+
+<ExampleCodeBlock code={AlwaysOpen} />
+
+### Deriving Expanded State
+
+If you need a simple boolean `expanded` state (similar to the preview-react `onExpandedChange`
+callback), you can derive it from the `transitionState` using the `onStateTransition` callback
+on the model.
+
+### onStateTransition
+
+The `onStateTransition` callback is called whenever the panel's transition state changes. This
+includes all four states: `expanding`, `expanded`, `collapsing`, and `collapsed`. You can pass
+this callback directly to the `SidePanel` component or to the `useSidePanelModel` hook.
+
+The transition flow is:
+1. **Collapsing**: `expanded` → `collapsing` → `collapsed`
+2. **Expanding**: `collapsed` → `expanding` → `expanded`
+
+This is useful for:
+- Triggering side effects when the panel state changes
+- Syncing the panel state with external state management
+- Animating child components based on the transition state
+
+<ExampleCodeBlock code={OnStateTransition} />
+
+## Component API
+
+<SymbolDoc name="SidePanel" fileName="/labs-react/" />
+
+## Hooks
+
+### useSidePanelModel
+
+The `useSidePanelModel` hook creates a model for managing the SidePanel's state and events. You can
+pass this model to the `SidePanel` component, or let the component create one internally.
+
+```tsx
+import {useSidePanelModel} from '@workday/canvas-kit-labs-react/side-panel';
+
+// Create a model with custom configuration
+const model = useSidePanelModel({
+  initialTransitionState: 'collapsed',
+  origin: 'end',
+  onStateTransition: (state) => console.log('State:', state),
+});
+
+// Access state
+model.state.transitionState; // 'expanded' | 'expanding' | 'collapsed' | 'collapsing'
+model.state.panelId;         // unique ID for the panel
+model.state.labelId;         // unique ID for the label
+
+// Trigger events
+model.events.expand();              // Set to expanded (no animation)
+model.events.collapse();            // Set to collapsed (no animation)
+model.events.handleAnimationStart(); // Start expand/collapse animation
+```
+
+<SymbolDoc name="useSidePanelModel" fileName="/labs-react/" />
+
+### useSidePanelContainer
+
+The `useSidePanelContainer` elemProps hook provides the necessary props for the SidePanel container
+element, including `id`, `aria-labelledby`, and `onTransitionEnd`.
+
+<SymbolDoc name="useSidePanelContainer" fileName="/labs-react/" />
+
+### useSidePanelToggleButtonElemProps
+
+The `useSidePanelToggleButtonElemProps` elemProps hook provides ARIA attributes for the toggle
+button, including `aria-controls`, `aria-expanded`, and `aria-labelledby`.
+
+<SymbolDoc name="useSidePanelToggleButtonElemProps" fileName="/labs-react/" />
+
+## Specifications
+
+<Specifications file="SidePanelLabs.spec.ts" name="Side Panel" />

package/dist/mdx/labs-react/side-panel/examples/AlwaysOpen.tsx

@@ -0,0 +1,52 @@
+import {AccentIcon} from '@workday/canvas-kit-react/icon';
+import {rocketIcon} from '@workday/canvas-accent-icons-web';
+import {SidePanel, useSidePanelModel} from '@workday/canvas-kit-labs-react/side-panel';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {Heading, Text} from '@workday/canvas-kit-react/text';
+import {system} from '@workday/canvas-tokens-web';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+
+const stylesOverride = {
+  accentIcon: createStyles({
+    marginRight: system.space.x4,
+  }),
+  pageContainer: createStyles({
+    gap: system.space.x4,
+    height: px2rem(320),
+  }),
+  panelContainer: createStyles({
+    alignItems: 'center',
+    padding: system.space.x4,
+  }),
+  panelHeading: createStyles({
+    color: system.color.fg.default,
+  }),
+  mainContent: createStyles({
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexBasis: 'auto',
+    flex: 1,
+  }),
+};
+
+export default () => {
+  const model = useSidePanelModel();
+
+  return (
+    <Flex cs={stylesOverride.pageContainer}>
+      <SidePanel model={model}>
+        <Flex cs={stylesOverride.panelContainer}>
+          <AccentIcon icon={rocketIcon} cs={stylesOverride.accentIcon} />
+          <Heading size="small" cs={stylesOverride.panelHeading} id={model.state.labelId}>
+            Tasks Panel
+          </Heading>
+        </Flex>
+      </SidePanel>
+      <Flex as="main" cs={stylesOverride.mainContent}>
+        <Text as="p" typeLevel="body.large">
+          This is the main content section.
+        </Text>
+      </Flex>
+    </Flex>
+  );
+};

package/dist/mdx/labs-react/side-panel/examples/Basic.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
+import {SidePanel, useSidePanelModel} from '@workday/canvas-kit-labs-react/side-panel';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {Heading, Text} from '@workday/canvas-kit-react/text';
+import {AccentIcon} from '@workday/canvas-kit-react/icon';
+import {rocketIcon} from '@workday/canvas-accent-icons-web';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const stylesOverride = {
+  viewPortContainer: createStyles({
+    height: px2rem(320),
+  }),
+  panel: createStyles({
+    alignItems: 'center',
+    padding: system.space.x4,
+  }),
+  accentIcon: createStyles({
+    marginInlineEnd: system.space.x4,
+  }),
+  mainContent: createStyles({
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'column',
+    flex: 1,
+    flexBasis: 'auto',
+  }),
+};
+
+export default () => {
+  const model = useSidePanelModel();
+
+  return (
+    <Flex cs={stylesOverride.viewPortContainer}>
+      <SidePanel model={model}>
+        <SidePanel.ToggleButton />
+        <Flex cs={stylesOverride.panel}>
+          {model.state.transitionState === 'expanded' && (
+            <Flex cs={stylesOverride.accentIcon}>
+              <AccentIcon icon={rocketIcon} />
+            </Flex>
+          )}
+          <Heading
+            size="small"
+            id={model.state.labelId}
+            hidden={model.state.transitionState === 'collapsed' ? true : undefined}
+          >
+            Tasks Panel
+          </Heading>
+        </Flex>
+      </SidePanel>
+    </Flex>
+  );
+};

package/dist/mdx/labs-react/side-panel/examples/ExternalControl.tsx

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import {SidePanel, useSidePanelModel} from '@workday/canvas-kit-labs-react/side-panel';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {Heading, Text} from '@workday/canvas-kit-react/text';
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const stylesOverride = {
+  viewport: createStyles({
+    height: px2rem(320),
+  }),
+  panel: createStyles({
+    alignItems: 'center',
+    padding: system.space.x4,
+  }),
+  panelHeading: createStyles({
+    color: system.color.fg.muted.stronger,
+  }),
+  main: createStyles({
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'column',
+    flex: 1,
+    flexBasis: 'auto',
+  }),
+};
+
+/*
+ * NOTE TO DEV:
+ * Spreading the `controlProps` onto an external control creates serious accessibility issues.
+ * - `aria-labelledby` id reference is invalid when the SidePanel is collapsed
+ * - `aria-labelledby` will change the name of "Toggle Side Panel" button to "Tasks Panel"
+ * - `aria-expanded` won't make sense to screen reader users when the expanded SidePanel content isn't following the control
+ * - `aria-controls` is unsupported by screen readers and will not allow users to navigate to the controlled content
+ *
+ * SOLUTION:
+ * - Pass the `controlProps` click handler function down to the external control component.
+ * - Add a toggle state to Button components with `aria-pressed` for screen readers,
+ * - OR use a similar toggle input like Checkbox or Switch.
+ */
+export default () => {
+  const model = useSidePanelModel({
+    initialTransitionState: 'collapsed',
+    labelId: 'tasks-panel-label',
+  });
+
+  return (
+    <Flex cs={stylesOverride.viewport}>
+      <SidePanel model={model}>
+        <SidePanel.ToggleButton />
+        {model.state.transitionState === 'expanded' && (
+          <Flex cs={stylesOverride.panel}>
+            <Heading size="small" cs={stylesOverride.panelHeading} id={model.state.labelId}>
+              Tasks Panel
+            </Heading>
+          </Flex>
+        )}
+      </SidePanel>
+      <Flex as="main" cs={stylesOverride.main}>
+        <Text as="p" typeLevel="body.large">
+          Control the panel externally
+        </Text>
+        <SecondaryButton
+          onClick={
+            model.state.transitionState === 'expanded' ? model.events.collapse : model.events.expand
+          }
+          aria-pressed={model.state.transitionState === 'expanded'}
+        >
+          {model.state.transitionState === 'expanded' ? 'Hide Side Panel' : 'Show Side Panel'}
+        </SecondaryButton>
+      </Flex>
+    </Flex>
+  );
+};

package/dist/mdx/labs-react/side-panel/examples/HiddenName.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import {SidePanel, useSidePanelModel} from '@workday/canvas-kit-labs-react/side-panel';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {AccessibleHide} from '@workday/canvas-kit-react/common';
+import {Text} from '@workday/canvas-kit-react/text';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+
+const stylesOverride = {
+  viewport: createStyles({
+    height: px2rem(320),
+  }),
+  main: createStyles({
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'column',
+    flex: 1,
+    flexBasis: 'auto',
+  }),
+};
+
+export default () => {
+  const model = useSidePanelModel({
+    onStateTransition: state => {
+      console.log(`state is: ${state}`);
+    },
+  });
+
+  return (
+    <Flex cs={stylesOverride.viewport}>
+      <SidePanel model={model}>
+        <SidePanel.ToggleButton />
+        <AccessibleHide id={model.state.labelId}>Hidden Title</AccessibleHide>
+      </SidePanel>
+      <Flex as="main" cs={stylesOverride.main}>
+        <Text as="p" typeLevel="body.large">
+          Side Panel with a hidden title text.
+        </Text>
+      </Flex>
+    </Flex>
+  );
+};

package/dist/mdx/labs-react/side-panel/examples/OnStateTransition.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {
+  SidePanel,
+  useSidePanelModel,
+  SidePanelTransitionStates,
+} from '@workday/canvas-kit-labs-react/side-panel';
+import {Text} from '@workday/canvas-kit-react/text';
+import {AccessibleHide} from '@workday/canvas-kit-react/common';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+
+const stylesOverride = {
+  viewport: createStyles({
+    height: px2rem(320),
+  }),
+  main: createStyles({
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'column',
+    flex: 1,
+    flexBasis: 'auto',
+  }),
+};
+
+export default () => {
+  const [transitionState, setTransitionState] =
+    React.useState<SidePanelTransitionStates>('expanded');
+
+  const model = useSidePanelModel({
+    onStateTransition: state => {
+      setTransitionState(state);
+      console.log('Expanded changed to:', state);
+    },
+  });
+
+  return (
+    <Flex cs={stylesOverride.viewport}>
+      <SidePanel model={model}>
+        <SidePanel.ToggleButton />
+        <AccessibleHide id={model.state.labelId}>Hidden Title</AccessibleHide>
+      </SidePanel>
+      <Flex as="main" cs={stylesOverride.main}>
+        <Text as="p" typeLevel="body.large">
+          Side panel is {transitionState}.
+        </Text>
+      </Flex>
+    </Flex>
+  );
+};

package/dist/mdx/labs-react/side-panel/examples/RightOrigin.tsx

@@ -0,0 +1,73 @@
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
+import {SidePanel, useSidePanelModel} from '@workday/canvas-kit-labs-react/side-panel';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {Heading, Text} from '@workday/canvas-kit-react/text';
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+// local helper hook for setting content direction;
+import {useDirection} from './useDirection';
+
+const stylesOverride = {
+  viewport: createStyles({
+    height: px2rem(320),
+  }),
+  panelContainer: createStyles({
+    marginInlineStart: 'auto',
+  }),
+  panel: createStyles({
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    padding: system.space.x4,
+  }),
+  main: createStyles({
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'column',
+    flex: 1,
+    flexBasis: 'auto',
+  }),
+};
+
+const RightPanel = () => {
+  const model = useSidePanelModel({
+    origin: 'end',
+  });
+
+  return (
+    <SidePanel model={model} className={stylesOverride.panelContainer}>
+      <SidePanel.ToggleButton />
+      <Flex cs={stylesOverride.panel}>
+        <Heading
+          size="small"
+          hidden={model.state.transitionState === 'collapsed' ? true : undefined}
+          id={model.state.labelId}
+        >
+          Tasks Panel
+        </Heading>
+      </Flex>
+    </SidePanel>
+  );
+};
+
+export default () => {
+  const {direction, toggleDirection} = useDirection();
+
+  return (
+    <CanvasProvider dir={direction}>
+      <Flex cs={stylesOverride.viewport}>
+        <Flex as="main" cs={stylesOverride.main}>
+          <Text as="p" typeLevel="body.large">
+            Toggle the content direction
+          </Text>
+          <SecondaryButton onClick={toggleDirection}>
+            Set to {direction === 'ltr' ? 'Right-to-Left' : 'Left-to-Right'}
+          </SecondaryButton>
+        </Flex>
+
+        <RightPanel />
+      </Flex>
+    </CanvasProvider>
+  );
+};