@workday/canvas-kit-react 15.0.0-alpha.1303-next.0 → 15.0.0

package/dist/es6/side-panel/lib/SidePanel.js

@@ -1,132 +1,68 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import styled from '@emotion/styled';
-import { colors, space } from '@workday/canvas-kit-react/tokens';
-import { TertiaryButton } from '@workday/canvas-kit-react/button';
-import { chevronLeftIcon, chevronRightIcon } from '@workday/canvas-system-icons-web';
-import { Heading } from '@workday/canvas-kit-react/text';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContainer, createElemPropsHook } from '@workday/canvas-kit-react/common';
+import { createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
+import { system } from '@workday/canvas-tokens-web';
+import { SidePanelHeading } from './SidePanelHeading';
+import { SidePanelToggleButton } from './SidePanelToggleButton';
+import { useSidePanelModel } from './useSidePanelModel';
 /**
- * @deprecated ⚠️ `SidePanelOpenDirection` in Main has been deprecated and will be removed in a future major version.
+ * Adds the necessary props to the SidePanel container element.
+ * This includes the `id` and `aria-labelledby` attributes for accessibility.
  */
-export var SidePanelOpenDirection;
-(function (SidePanelOpenDirection) {
-    SidePanelOpenDirection[SidePanelOpenDirection["Left"] = 0] = "Left";
-    SidePanelOpenDirection[SidePanelOpenDirection["Right"] = 1] = "Right";
-})(SidePanelOpenDirection || (SidePanelOpenDirection = {}));
-/**
- * @deprecated ⚠️ `SidePanelBackgroundColor` in Main has been deprecated and will be removed in a future major version.
- */
-export var SidePanelBackgroundColor;
-(function (SidePanelBackgroundColor) {
-    SidePanelBackgroundColor[SidePanelBackgroundColor["White"] = 0] = "White";
-    SidePanelBackgroundColor[SidePanelBackgroundColor["Transparent"] = 1] = "Transparent";
-    SidePanelBackgroundColor[SidePanelBackgroundColor["Gray"] = 2] = "Gray";
-})(SidePanelBackgroundColor || (SidePanelBackgroundColor = {}));
-const closedWidth = space.xxl;
-const SidePanelContainer = styled('div')({
-    overflow: 'hidden',
-    height: '100%',
-    boxSizing: 'border-box',
-    display: 'flex',
-    flexDirection: 'column',
-    transition: 'width 200ms ease',
-    position: 'absolute',
-}, ({ open }) => ({
-    alignItems: open ? undefined : 'center',
-    boxShadow: open ? undefined : '0 8px 16px -8px rgba(0, 0, 0, 0.16)',
-}), ({ open, backgroundColor }) => {
-    let openBackgroundColor;
-    switch (backgroundColor) {
-        case SidePanelBackgroundColor.Transparent:
-            openBackgroundColor = 'transparent';
-            break;
-        case SidePanelBackgroundColor.Gray:
-            openBackgroundColor = colors.soap100;
-            break;
-        case SidePanelBackgroundColor.White:
-        default:
-            openBackgroundColor = colors.frenchVanilla100;
-            break;
-    }
+export const useSidePanelContainer = createElemPropsHook(useSidePanelModel)(({ state, events }) => {
     return {
-        backgroundColor: open ? openBackgroundColor : colors.frenchVanilla100,
+        id: state.panelId,
+        'aria-labelledby': state.labelId,
+        onTransitionEnd: events.handleAnimationEnd,
     };
-}, ({ open, openWidth }) => ({
-    width: open ? openWidth : closedWidth,
-}), ({ open, padding }) => ({
-    padding: open ? padding || space.m : `${space.s} 0`,
-}), ({ openDirection }) => ({
-    right: openDirection === SidePanelOpenDirection.Right ? space.zero : undefined,
-    left: openDirection === SidePanelOpenDirection.Left ? space.zero : undefined,
-}));
-const ChildrenContainer = styled('div')({
-    transition: 'none',
-    zIndex: 1, // show above SidePanelFooter when screen is small vertically
-}, ({ open, openWidth }) => ({
-    width: open ? openWidth : closedWidth,
-}));
-const ToggleButton = styled(TertiaryButton, { shouldForwardProp: prop => prop !== 'openDirection' })({
-    position: 'absolute',
-    bottom: space.s,
-}, ({ openDirection }) => ({
-    right: openDirection === SidePanelOpenDirection.Left ? space.s : '',
-    left: openDirection === SidePanelOpenDirection.Right ? space.s : '',
-}));
-const SidePanelFooter = styled('div')({
-    position: 'absolute',
-    bottom: '0',
-    height: 120,
-    left: 0,
-    background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.0001) 0%, #FFFFFF 100%)',
-}, ({ open, openWidth }) => ({
-    width: open ? openWidth : space.xxl,
-}));
-/**
- * @deprecated ⚠️ `SidePanel` in Main has been deprecated and will be removed in a future major version. Please use [`SidePanel` in Preview](https://workday.github.io/canvas-kit/?path=/docs/preview-side-panel--docs) instead.
- */
-class SidePanel extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            screenSize: typeof window !== 'undefined' ? window.innerWidth : 0,
-        };
-        this.handleResize = () => {
-            if (!this.props.onBreakpointChange || !this.props.breakpoint) {
-                return;
-            }
-            if (window.innerWidth > this.props.breakpoint && !this.props.open) {
-                this.props.onBreakpointChange(true);
-            }
-            if (window.innerWidth <= this.props.breakpoint && this.props.open) {
-                this.props.onBreakpointChange(false);
-            }
-        };
-        this.onToggleClick = () => {
-            if (this.props.onToggleClick) {
-                this.props.onToggleClick();
-            }
-        };
-        this.toggleButtonDirection = (open, openDirection) => {
-            if (openDirection !== SidePanelOpenDirection.Right) {
-                return open ? chevronLeftIcon : chevronRightIcon;
-            }
-            else {
-                return open ? chevronRightIcon : chevronLeftIcon;
-            }
-        };
-        this.handleResize = this.handleResize.bind(this);
-    }
-    componentDidMount() {
-        window.addEventListener('resize', this.handleResize);
-    }
-    componentWillUnmount() {
-        window.removeEventListener('resize', this.handleResize);
-    }
-    render() {
-        const { backgroundColor = SidePanelBackgroundColor.White, openNavigationAriaLabel = 'open navigation', closeNavigationAriaLabel = 'close navigation', openDirection = SidePanelOpenDirection.Left, breakpoint = 768, openWidth = 300, header, onToggleClick, open, padding, onBreakpointChange, ...elemProps } = this.props;
-        return (_jsxs(SidePanelContainer, { role: "region", padding: padding, openDirection: openDirection, openWidth: openWidth, backgroundColor: backgroundColor, open: open, ...elemProps, children: [_jsxs(ChildrenContainer, { open: open, openWidth: openWidth, children: [header && open ? (_jsx(Heading, { as: "h2", size: "small", marginTop: "zero", children: header })) : null, this.props.children] }), _jsx(SidePanelFooter, { openWidth: openWidth, open: open, children: onToggleClick && (_jsx(ToggleButton, { openDirection: openDirection, "aria-label": open ? closeNavigationAriaLabel : openNavigationAriaLabel, onClick: this.onToggleClick, icon: this.toggleButtonDirection(open, openDirection) })) })] }));
+});
+export const panelStencil = createStencil({
+    vars: {
+        expandedWidth: '',
+        collapsedWidth: '',
+    },
+    base: { name: "2roim5", styles: "box-sizing:border-box;overflow:hidden;position:relative;height:100%;outline:0.0625rem solid transparent;transition:width ease-out 200ms, max-width ease-out 200ms;" },
+    modifiers: {
+        variant: {
+            alternate: { name: "2b8lj6", styles: "background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));box-shadow:var(--cnvs-sys-depth-3);" },
+            standard: { name: "p9irm", styles: "background-color:var(--cnvs-sys-color-surface-navigation, oklch(0.9692 0.0035 248.23 / 1));" }
+        },
+        expanded: {
+            expanded: { name: "3ciu9k", styles: "width:var(--expandedWidth-panel-4d5fea);max-width:var(--expandedWidth-panel-4d5fea);" },
+            collapsed: { name: "onutw", styles: "width:var(--collapsedWidth-panel-4d5fea);max-width:var(--collapsedWidth-panel-4d5fea);" },
+            expanding: { name: "12emo0", styles: "width:var(--expandedWidth-panel-4d5fea);max-width:var(--expandedWidth-panel-4d5fea);" },
+            collapsing: { name: "2y4ce2", styles: "width:var(--collapsedWidth-panel-4d5fea);max-width:var(--collapsedWidth-panel-4d5fea);" }
+        }
     }
-}
-SidePanel.OpenDirection = SidePanelOpenDirection;
-SidePanel.BackgroundColor = SidePanelBackgroundColor;
-export { SidePanel };
+}, "panel-4d5fea");
+export const SidePanel = createContainer('section')({
+    displayName: 'SidePanel',
+    modelHook: useSidePanelModel,
+    elemPropsHook: useSidePanelContainer,
+    subComponents: {
+        /**
+         * `SidePanel.ToggleButton` is a control that toggles between expanded and collapsed states.
+         * It must be used within the `SidePanel` component as a child. For accessibility purposes,
+         * it should be the first focusable element in the panel.
+         *
+         * The button automatically receives `aria-controls`, `aria-expanded`, and `aria-labelledby`
+         * attributes from the model.
+         */
+        ToggleButton: SidePanelToggleButton,
+        /**
+         * `SidePanel.Heading` is a styled heading that provides the accessible name for the SidePanel.
+         * The heading's `id` is automatically linked to the panel's `aria-labelledby` attribute.
+         * By default, the heading is hidden when the panel is collapsed.
+         */
+        Heading: SidePanelHeading,
+    },
+})(({ collapsedWidth = 64, expandedWidth = 320, variant = 'standard', children, ...elemProps }, Element, model) => {
+    return (_jsx(Element, { ...handleCsProp(elemProps, [
+            panelStencil({
+                expanded: model.state.transitionState,
+                variant,
+                expandedWidth: typeof expandedWidth === 'number' ? px2rem(expandedWidth) : expandedWidth,
+                collapsedWidth: typeof collapsedWidth === 'number' ? px2rem(collapsedWidth) : collapsedWidth,
+            }),
+        ]), children: children }));
+});

package/dist/es6/side-panel/lib/SidePanelHeading.d.ts

@@ -0,0 +1,271 @@
+import * as React from 'react';
+import { ExtractProps } from '@workday/canvas-kit-react/common';
+import { Heading, TypeLevelProps } from '@workday/canvas-kit-react/text';
+export interface SidePanelHeadingProps extends Omit<ExtractProps<typeof Heading, never>, 'size'> {
+    /**
+     * The size of the heading.
+     * @default 'small'
+     */
+    size?: TypeLevelProps['size'];
+    children?: React.ReactNode;
+}
+export declare const sidePanelHeadingStencil: import("@workday/canvas-kit-styling").Stencil<{
+    origin: {
+        end: {
+            paddingInlineStart: string;
+        };
+        start: {};
+    };
+}, {}, {}, import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, import("@workday/canvas-kit-styling").Stencil<{
+    typeLevel: {
+        'title.large': {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-bold";
+            fontSize: "var(--cnvs-sys-font-size-title-lg, var(--cnvs-sys-font-size-title-large, 3.5rem))";
+            lineHeight: "var(--cnvs-sys-line-height-title-lg, var(--cnvs-sys-line-height-title-large, 4rem))";
+            color: "--cnvs-sys-color-fg-strong";
+        };
+        'title.medium': {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-bold";
+            fontSize: "var(--cnvs-sys-font-size-title-md, var(--cnvs-sys-font-size-title-medium, 3rem))";
+            lineHeight: "var(--cnvs-sys-line-height-title-md, var(--cnvs-sys-line-height-title-medium, 3.5rem))";
+            color: "--cnvs-sys-color-fg-strong";
+        };
+        'title.small': {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-bold";
+            lineHeight: "var(--cnvs-sys-line-height-title-sm, var(--cnvs-sys-line-height-title-small, 3rem))";
+            fontSize: "var(--cnvs-sys-font-size-title-sm, var(--cnvs-sys-font-size-title-small, 2.5rem))";
+            color: "--cnvs-sys-color-fg-strong";
+        };
+        'heading.large': {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-bold";
+            fontSize: "var(--cnvs-sys-font-size-heading-lg, var(--cnvs-sys-font-size-heading-large, 2rem))";
+            lineHeight: "var(--cnvs-sys-line-height-heading-lg, var(--cnvs-sys-line-height-heading-large, 2.5rem))";
+            color: "--cnvs-sys-color-fg-strong";
+        };
+        'heading.medium': {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-bold";
+            fontSize: "var(--cnvs-sys-font-size-heading-md, var(--cnvs-sys-font-size-heading-medium, 1.75rem))";
+            lineHeight: "var(--cnvs-sys-line-height-heading-md, var(--cnvs-sys-line-height-heading-medium, 2.25rem))";
+            color: "--cnvs-sys-color-fg-strong";
+        };
+        'heading.small': {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-bold";
+            fontSize: "var(--cnvs-sys-font-size-heading-sm, var(--cnvs-sys-font-size-heading-small, 1.5rem))";
+            lineHeight: "var(--cnvs-sys-line-height-heading-sm, var(--cnvs-sys-line-height-heading-small, 2rem))";
+            color: "--cnvs-sys-color-fg-strong";
+        };
+        'body.large': {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-normal";
+            fontSize: "var(--cnvs-sys-font-size-body-lg, var(--cnvs-sys-font-size-body-large, 1.25rem))";
+            lineHeight: "var(--cnvs-sys-line-height-body-lg, var(--cnvs-sys-line-height-body-large, 1.75rem))";
+            color: "--cnvs-sys-color-fg-default";
+        };
+        'body.medium': {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-normal";
+            fontSize: "var(--cnvs-sys-font-size-body-md, var(--cnvs-sys-font-size-body-medium, 1.125rem))";
+            lineHeight: "var(--cnvs-sys-line-height-body-md, var(--cnvs-sys-line-height-body-medium, 1.75rem))";
+            color: "--cnvs-sys-color-fg-default";
+        };
+        'body.small': {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-normal";
+            fontSize: "var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small, 1rem))";
+            lineHeight: "var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small, 1.5rem))";
+            letterSpacing: "var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-sys-type-letter-spacing-body-small))";
+            color: "--cnvs-sys-color-fg-default";
+        };
+        'subtext.large': {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-normal";
+            fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem))";
+            lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem))";
+            letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large))";
+            color: "--cnvs-sys-color-fg-default";
+        };
+        'subtext.medium': {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-normal";
+            fontSize: "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem))";
+            lineHeight: "var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem))";
+            letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium))";
+            color: "--cnvs-sys-color-fg-default";
+        };
+        'subtext.small': {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-normal";
+            fontSize: "var(--cnvs-sys-font-size-subtext-sm, var(--cnvs-sys-font-size-subtext-small, 0.625rem))";
+            lineHeight: "var(--cnvs-sys-line-height-subtext-sm, var(--cnvs-sys-line-height-subtext-small, 1rem))";
+            letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-sm, var(--cnvs-sys-type-letter-spacing-subtext-small))";
+            color: "--cnvs-sys-color-fg-default";
+        };
+    };
+    variant: {
+        error: {
+            color: "var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)))";
+        };
+        hint: {
+            color: "--cnvs-sys-color-fg-muted-default";
+        };
+        inverse: {
+            color: "--cnvs-sys-color-fg-inverse";
+        };
+    };
+}, {}, {}, never, never>>, {}, {}, import("@workday/canvas-kit-styling").Stencil<{
+    typeLevel: {
+        'title.large': {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-bold";
+            fontSize: "var(--cnvs-sys-font-size-title-lg, var(--cnvs-sys-font-size-title-large, 3.5rem))";
+            lineHeight: "var(--cnvs-sys-line-height-title-lg, var(--cnvs-sys-line-height-title-large, 4rem))";
+            color: "--cnvs-sys-color-fg-strong";
+        };
+        'title.medium': {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-bold";
+            fontSize: "var(--cnvs-sys-font-size-title-md, var(--cnvs-sys-font-size-title-medium, 3rem))";
+            lineHeight: "var(--cnvs-sys-line-height-title-md, var(--cnvs-sys-line-height-title-medium, 3.5rem))";
+            color: "--cnvs-sys-color-fg-strong";
+        };
+        'title.small': {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-bold";
+            lineHeight: "var(--cnvs-sys-line-height-title-sm, var(--cnvs-sys-line-height-title-small, 3rem))";
+            fontSize: "var(--cnvs-sys-font-size-title-sm, var(--cnvs-sys-font-size-title-small, 2.5rem))";
+            color: "--cnvs-sys-color-fg-strong";
+        };
+        'heading.large': {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-bold";
+            fontSize: "var(--cnvs-sys-font-size-heading-lg, var(--cnvs-sys-font-size-heading-large, 2rem))";
+            lineHeight: "var(--cnvs-sys-line-height-heading-lg, var(--cnvs-sys-line-height-heading-large, 2.5rem))";
+            color: "--cnvs-sys-color-fg-strong";
+        };
+        'heading.medium': {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-bold";
+            fontSize: "var(--cnvs-sys-font-size-heading-md, var(--cnvs-sys-font-size-heading-medium, 1.75rem))";
+            lineHeight: "var(--cnvs-sys-line-height-heading-md, var(--cnvs-sys-line-height-heading-medium, 2.25rem))";
+            color: "--cnvs-sys-color-fg-strong";
+        };
+        'heading.small': {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-bold";
+            fontSize: "var(--cnvs-sys-font-size-heading-sm, var(--cnvs-sys-font-size-heading-small, 1.5rem))";
+            lineHeight: "var(--cnvs-sys-line-height-heading-sm, var(--cnvs-sys-line-height-heading-small, 2rem))";
+            color: "--cnvs-sys-color-fg-strong";
+        };
+        'body.large': {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-normal";
+            fontSize: "var(--cnvs-sys-font-size-body-lg, var(--cnvs-sys-font-size-body-large, 1.25rem))";
+            lineHeight: "var(--cnvs-sys-line-height-body-lg, var(--cnvs-sys-line-height-body-large, 1.75rem))";
+            color: "--cnvs-sys-color-fg-default";
+        };
+        'body.medium': {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-normal";
+            fontSize: "var(--cnvs-sys-font-size-body-md, var(--cnvs-sys-font-size-body-medium, 1.125rem))";
+            lineHeight: "var(--cnvs-sys-line-height-body-md, var(--cnvs-sys-line-height-body-medium, 1.75rem))";
+            color: "--cnvs-sys-color-fg-default";
+        };
+        'body.small': {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-normal";
+            fontSize: "var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small, 1rem))";
+            lineHeight: "var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small, 1.5rem))";
+            letterSpacing: "var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-sys-type-letter-spacing-body-small))";
+            color: "--cnvs-sys-color-fg-default";
+        };
+        'subtext.large': {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-normal";
+            fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem))";
+            lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem))";
+            letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large))";
+            color: "--cnvs-sys-color-fg-default";
+        };
+        'subtext.medium': {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-normal";
+            fontSize: "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem))";
+            lineHeight: "var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem))";
+            letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium))";
+            color: "--cnvs-sys-color-fg-default";
+        };
+        'subtext.small': {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-normal";
+            fontSize: "var(--cnvs-sys-font-size-subtext-sm, var(--cnvs-sys-font-size-subtext-small, 0.625rem))";
+            lineHeight: "var(--cnvs-sys-line-height-subtext-sm, var(--cnvs-sys-line-height-subtext-small, 1rem))";
+            letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-sm, var(--cnvs-sys-type-letter-spacing-subtext-small))";
+            color: "--cnvs-sys-color-fg-default";
+        };
+    };
+    variant: {
+        error: {
+            color: "var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)))";
+        };
+        hint: {
+            color: "--cnvs-sys-color-fg-muted-default";
+        };
+        inverse: {
+            color: "--cnvs-sys-color-fg-inverse";
+        };
+    };
+}, {}, {}, never, never>, never>, never>;
+/**
+ * Adds the necessary props to the SidePanelHeading subcomponent.
+ * This sets the `id` to the `labelId` from the model for accessibility purposes,
+ * and hides the heading when the panel is not expanded.
+ */
+export declare const useSidePanelHeading: import("@workday/canvas-kit-react/common").BehaviorHook<{
+    state: {
+        panelId: string;
+        labelId: string;
+        transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        origin: "end" | "start";
+        onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
+    };
+    events: {
+        expand(): void;
+        collapse(): void;
+        handleAnimationEnd(event: React.TransitionEvent<HTMLDivElement>): React.TransitionEvent<HTMLDivElement>;
+        handleAnimationStart(): undefined;
+    };
+}, {
+    readonly id: string;
+    readonly hidden: boolean;
+}>;
+/**
+ * `SidePanel.Heading` is a styled heading component that provides the accessible name
+ * for the SidePanel. The heading's `id` is automatically set to the model's `labelId`,
+ * which is used by the panel's `aria-labelledby` attribute.
+ *
+ * The heading is automatically hidden when the panel is collapsed.
+ */
+export declare const SidePanelHeading: import("@workday/canvas-kit-react/common").ElementComponentM<import("@workday/canvas-kit-react/common").ElementComponent<"h2", TypeLevelProps>, SidePanelHeadingProps, {
+    state: {
+        panelId: string;
+        labelId: string;
+        transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        origin: "end" | "start";
+        onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
+    };
+    events: {
+        expand(): void;
+        collapse(): void;
+        handleAnimationEnd(event: React.TransitionEvent<HTMLDivElement>): React.TransitionEvent<HTMLDivElement>;
+        handleAnimationStart(): undefined;
+    };
+}>;
+//# sourceMappingURL=SidePanelHeading.d.ts.map

package/dist/es6/side-panel/lib/SidePanelHeading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidePanelHeading.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanelHeading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,OAAO,EAAE,cAAc,EAAiB,MAAM,gCAAgC,CAAC;AAMvF,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,OAAO,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAC9F;;;OAGG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCAalC,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;EAK9B,CAAC;AAEH;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;EAa3B,CAAC"}

package/dist/es6/side-panel/lib/SidePanelHeading.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElemPropsHook, createSubcomponent, } from '@workday/canvas-kit-react/common';
+import { Heading, headingStencil } from '@workday/canvas-kit-react/text';
+import { createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
+import { system } from '@workday/canvas-tokens-web';
+import { useSidePanelModel } from './useSidePanelModel';
+export const sidePanelHeadingStencil = createStencil({
+    extends: headingStencil,
+    base: { name: "4b8ivu", styles: "box-sizing:border-box;padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));" },
+    modifiers: {
+        origin: {
+            end: { name: "1ayohc", styles: "padding-inline-start:4.25rem;" },
+            start: { name: "2t9k2d", styles: "" }
+        }
+    }
+}, "side-panel-heading-9d38c2");
+/**
+ * Adds the necessary props to the SidePanelHeading subcomponent.
+ * This sets the `id` to the `labelId` from the model for accessibility purposes,
+ * and hides the heading when the panel is not expanded.
+ */
+export const useSidePanelHeading = createElemPropsHook(useSidePanelModel)(({ state }) => {
+    return {
+        id: state.labelId,
+        hidden: state.transitionState !== 'expanded',
+    };
+});
+/**
+ * `SidePanel.Heading` is a styled heading component that provides the accessible name
+ * for the SidePanel. The heading's `id` is automatically set to the model's `labelId`,
+ * which is used by the panel's `aria-labelledby` attribute.
+ *
+ * The heading is automatically hidden when the panel is collapsed.
+ */
+export const SidePanelHeading = createSubcomponent(Heading)({
+    displayName: 'SidePanel.Heading',
+    modelHook: useSidePanelModel,
+    elemPropsHook: useSidePanelHeading,
+})(({ size = 'small', children, ...elemProps }, Element, model) => {
+    return (_jsx(Element, { size: size, ...handleCsProp(elemProps, sidePanelHeadingStencil({ size, origin: model.state.origin })), children: children }));
+});

package/dist/es6/side-panel/lib/SidePanelToggleButton.d.ts

@@ -0,0 +1,98 @@
+import * as React from 'react';
+import { TertiaryButton } from '@workday/canvas-kit-react/button';
+import { ExtractProps } from '@workday/canvas-kit-react/common';
+import { TooltipProps } from '@workday/canvas-kit-react/tooltip';
+export interface SidePanelToggleButtonProps extends ExtractProps<typeof TertiaryButton> {
+    /**
+     * The tooltip text to expand the side panel
+     * @deprecated Use
+     */
+    tooltipTextExpand?: string;
+    /**
+     * Provides an accessible label to the button. This text **should not** convey visual state but rather what it does like "control data panel."
+     */
+    tooltipText?: string;
+    /**
+     * The tooltip text to collapse the side panel. Optional text for when the side panel is in a collapsed state.
+     */
+    tooltipTextCollapse?: string;
+    tooltipProps?: Omit<TooltipProps, 'children'>;
+}
+export declare const sidePanelToggleButtonStencil: import("@workday/canvas-kit-styling").Stencil<{
+    state: {
+        collapsing: {
+            margin: number;
+            transform: string;
+            ':dir(rtl)': {
+                transform: string;
+            };
+        };
+        collapsed: {
+            margin: string;
+            transform: string;
+            ':dir(rtl)': {
+                transform: string;
+            };
+        };
+        expanded: {
+            margin: number;
+            transform: string;
+            ':dir(rtl)': {
+                transform: string;
+            };
+        };
+        expanding: {
+            margin: number;
+            transform: string;
+            ':dir(rtl)': {
+                transform: string;
+            };
+        };
+    };
+    origin: {
+        start: {};
+        end: {
+            transform: string;
+            ':dir(rtl)': {
+                transform: string;
+            };
+        };
+    };
+}, {}, {}, never, never>;
+export declare const useSidePanelToggleButton: import("@workday/canvas-kit-react/common").BehaviorHook<{
+    state: {
+        panelId: string;
+        labelId: string;
+        transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        origin: "end" | "start";
+        onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
+    };
+    events: {
+        expand(): void;
+        collapse(): void;
+        handleAnimationEnd(event: React.TransitionEvent<HTMLDivElement>): React.TransitionEvent<HTMLDivElement>;
+        handleAnimationStart(): undefined;
+    };
+}, {
+    readonly 'aria-controls': string;
+    readonly 'aria-pressed': boolean;
+    readonly 'aria-describedby': string;
+}>;
+export declare const SidePanelToggleButton: import("@workday/canvas-kit-react/common").ElementComponentM<"button", SidePanelToggleButtonProps, {
+    state: {
+        panelId: string;
+        labelId: string;
+        transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        origin: "end" | "start";
+        onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
+    };
+    events: {
+        expand(): void;
+        collapse(): void;
+        handleAnimationEnd(event: React.TransitionEvent<HTMLDivElement>): React.TransitionEvent<HTMLDivElement>;
+        handleAnimationStart(): undefined;
+    };
+}>;
+//# sourceMappingURL=SidePanelToggleButton.d.ts.map

package/dist/es6/side-panel/lib/SidePanelToggleButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidePanelToggleButton.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanelToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,cAAc,EAAC,MAAM,kCAAkC,CAAC;AAChE,OAAO,EACL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAU,YAAY,EAAC,MAAM,mCAAmC,CAAC;AAOxE,MAAM,WAAW,0BAA2B,SAAQ,YAAY,CAAC,OAAO,cAAc,CAAC;IACrF;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,YAAY,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;CAC/C;AAED,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA6FvC,CAAC;AAEH,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;EAMnC,CAAC;AAEH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;EA+CjC,CAAC"}