@workday/canvas-kit-labs-react 14.2.0-0055-next.0 → 14.2.0-0058-next.0

package/dist/commonjs/index.d.ts

@@ -1,5 +1,6 @@
 export * from './ai-ingress-button';
 export * from './combobox';
 export * from './search-form';
+export * from './side-panel';
 export * from './version';
 //# sourceMappingURL=index.d.ts.map

package/dist/commonjs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC"}

package/dist/commonjs/index.js

@@ -17,4 +17,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./ai-ingress-button"), exports);
 __exportStar(require("./combobox"), exports);
 __exportStar(require("./search-form"), exports);
+__exportStar(require("./side-panel"), exports);
 __exportStar(require("./version"), exports);

package/dist/commonjs/side-panel/index.d.ts

@@ -0,0 +1,4 @@
+export * from './lib/SidePanel';
+export * from './lib/SidePanelToggleButton';
+export * from './lib/useSidePanelModel';
+//# sourceMappingURL=index.d.ts.map

package/dist/commonjs/side-panel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../side-panel/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC"}

package/dist/commonjs/side-panel/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./lib/SidePanel"), exports);
+__exportStar(require("./lib/SidePanelToggleButton"), exports);
+__exportStar(require("./lib/useSidePanelModel"), exports);

package/dist/commonjs/side-panel/lib/SidePanel.d.ts

@@ -0,0 +1,205 @@
+import * as React from 'react';
+/**
+ * Adds the necessary props to the SidePanel container element.
+ * This includes the `id` and `aria-labelledby` attributes for accessibility.
+ */
+export declare const useSidePanelContainer: 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 'aria-labelledby': string;
+    readonly onTransitionEnd: (event: React.TransitionEvent<HTMLDivElement>) => React.TransitionEvent<HTMLDivElement>;
+}>;
+export type SidePanelVariant = 'standard' | 'alternate';
+export interface SidePanelProps {
+    /**
+     * The width of the component (in `px` if it's a `number`) when it is collapsed.
+     *
+     * @default 64
+     */
+    collapsedWidth?: number | string;
+    /**
+     * The width of the component (in `px` if it's a `number`) when it is expanded.
+     *
+     * @default 320
+     */
+    expandedWidth?: number | string;
+    /**
+     * The style variant of the side panel. 'standard' uses a lighter gray background (`system.color.bg.alt.softer`), no depth. 'alternate' uses a white background with depth (`system.color.bg.default` and level 5 depth).
+     *
+     * @default 'standard'
+     */
+    variant?: SidePanelVariant;
+    children?: React.ReactNode;
+}
+export declare const panelStencil: import("@workday/canvas-kit-styling").Stencil<{
+    variant: {
+        alternate: {
+            backgroundColor: "--cnvs-sys-color-bg-default";
+            boxShadow: "--cnvs-sys-depth-5";
+        };
+        standard: {
+            backgroundColor: "--cnvs-sys-color-bg-alt-softer";
+        };
+    };
+    expanded: {
+        expanded: ({ expandedWidth }: {
+            expandedWidth: `--${string}`;
+            collapsedWidth: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            width: `--${string}`;
+            maxWidth: `--${string}`;
+        };
+        collapsed: ({ collapsedWidth }: {
+            expandedWidth: `--${string}`;
+            collapsedWidth: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            width: `--${string}`;
+            maxWidth: `--${string}`;
+        };
+        expanding: ({ expandedWidth }: {
+            expandedWidth: `--${string}`;
+            collapsedWidth: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            width: `--${string}`;
+            maxWidth: `--${string}`;
+        };
+        collapsing: ({ collapsedWidth }: {
+            expandedWidth: `--${string}`;
+            collapsedWidth: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            width: `--${string}`;
+            maxWidth: `--${string}`;
+        };
+    };
+}, {}, {
+    expandedWidth: string;
+    collapsedWidth: string;
+}, never, never>;
+export declare const SidePanel: import("@workday/canvas-kit-react/common").ElementComponentM<"section", SidePanelProps & Partial<{
+    initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+    origin: "end" | "start";
+    panelId: string;
+    labelId: string;
+    onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
+}> & {
+    onExpand?: ((data: undefined, prevState: {
+        panelId: string;
+        labelId: string;
+        transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        origin: "end" | "start";
+        onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
+    }) => void) | undefined;
+    onCollapse?: ((data: undefined, prevState: {
+        panelId: string;
+        labelId: string;
+        transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        origin: "end" | "start";
+        onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
+    }) => void) | undefined;
+    onHandleAnimationEnd?: ((data: React.TransitionEvent<HTMLDivElement>, prevState: {
+        panelId: string;
+        labelId: string;
+        transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        origin: "end" | "start";
+        onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
+    }) => void) | undefined;
+    onHandleAnimationStart?: ((data: undefined, prevState: {
+        panelId: string;
+        labelId: string;
+        transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        origin: "end" | "start";
+        onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
+    }) => void) | undefined;
+} & {
+    shouldExpand?: ((data: undefined, state: {
+        panelId: string;
+        labelId: string;
+        transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        origin: "end" | "start";
+        onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
+    }) => boolean) | undefined;
+    shouldCollapse?: ((data: undefined, state: {
+        panelId: string;
+        labelId: string;
+        transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        origin: "end" | "start";
+        onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
+    }) => boolean) | undefined;
+    shouldHandleAnimationEnd?: ((data: React.TransitionEvent<HTMLDivElement>, state: {
+        panelId: string;
+        labelId: string;
+        transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        origin: "end" | "start";
+        onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
+    }) => boolean) | undefined;
+    shouldHandleAnimationStart?: ((data: undefined, state: {
+        panelId: string;
+        labelId: string;
+        transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        origin: "end" | "start";
+        onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
+    }) => boolean) | undefined;
+}, {
+    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;
+    };
+}> & {
+    /**
+     * `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: import("@workday/canvas-kit-react/common").ElementComponentM<"button", import("./SidePanelToggleButton").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=SidePanel.d.ts.map

package/dist/commonjs/side-panel/lib/SidePanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidePanel.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B;;;GAGG;AACH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;EAMhC,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,WAAW,CAAC;AAExD,MAAM,WAAW,cAAc;IAC7B;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC;;;;OAIG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAyCvB,CAAC;AAEH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAKlB;;;;;;;OAOG;;;;;;;;;;;;;;;;;CAgCN,CAAC"}

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

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidePanel = exports.panelStencil = exports.useSidePanelContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const common_1 = require("@workday/canvas-kit-react/common");
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+const useSidePanelModel_1 = require("./useSidePanelModel");
+const SidePanelToggleButton_1 = require("./SidePanelToggleButton");
+/**
+ * Adds the necessary props to the SidePanel container element.
+ * This includes the `id` and `aria-labelledby` attributes for accessibility.
+ */
+exports.useSidePanelContainer = (0, common_1.createElemPropsHook)(useSidePanelModel_1.useSidePanelModel)(({ state, events }) => {
+    return {
+        id: state.panelId,
+        'aria-labelledby': state.labelId,
+        onTransitionEnd: events.handleAnimationEnd,
+    };
+});
+exports.panelStencil = (0, canvas_kit_styling_1.createStencil)({
+    vars: {
+        expandedWidth: '',
+        collapsedWidth: '',
+    },
+    base: { name: "23943w", 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: "2bjjfl", styles: "background-color:var(--cnvs-sys-color-bg-default);box-shadow:var(--cnvs-sys-depth-5);" },
+            standard: { name: "1lsdyl", styles: "background-color:var(--cnvs-sys-color-bg-alt-softer);" }
+        },
+        expanded: {
+            expanded: { name: "i9o5v", styles: "width:var(--expandedWidth-panel-46751f);max-width:var(--expandedWidth-panel-46751f);" },
+            collapsed: { name: "3tfzp8", styles: "width:var(--collapsedWidth-panel-46751f);max-width:var(--collapsedWidth-panel-46751f);" },
+            expanding: { name: "42gyid", styles: "width:var(--expandedWidth-panel-46751f);max-width:var(--expandedWidth-panel-46751f);" },
+            collapsing: { name: "mk8xq", styles: "width:var(--collapsedWidth-panel-46751f);max-width:var(--collapsedWidth-panel-46751f);" }
+        }
+    }
+}, "panel-46751f");
+exports.SidePanel = (0, common_1.createContainer)('section')({
+    displayName: 'SidePanel',
+    modelHook: useSidePanelModel_1.useSidePanelModel,
+    elemPropsHook: exports.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_1.SidePanelToggleButton,
+    },
+})(({ collapsedWidth = 64, expandedWidth = 320, variant = 'standard', children, ...elemProps }, Element, model) => {
+    return ((0, jsx_runtime_1.jsx)(Element, { ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, [
+            (0, exports.panelStencil)({
+                expanded: model.state.transitionState,
+                variant,
+                expandedWidth: typeof expandedWidth === 'number' ? (0, canvas_kit_styling_1.px2rem)(expandedWidth) : expandedWidth,
+                collapsedWidth: typeof collapsedWidth === 'number' ? (0, canvas_kit_styling_1.px2rem)(collapsedWidth) : collapsedWidth,
+            }),
+        ]), children: children }));
+});

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

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import { ExtractProps } from '@workday/canvas-kit-react/common';
+import { TertiaryButton } from '@workday/canvas-kit-react/button';
+import { TooltipProps } from '@workday/canvas-kit-react/tooltip';
+export interface SidePanelToggleButtonProps extends ExtractProps<typeof TertiaryButton> {
+    /**
+     * The tooltip text to expand the side panel
+     */
+    tooltipTextExpand?: string;
+    /**
+     * The tooltip text to collapse the side panel
+     */
+    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;
+            insetInlineStart: number;
+            insetInlineEnd: number;
+            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 useSidePanelToggleButtonElemProps: 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-expanded': boolean;
+    readonly 'aria-labelledby': 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/commonjs/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;AAC/B,OAAO,EAGL,YAAY,EACb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,cAAc,EAAC,MAAM,kCAAkC,CAAC;AAEhE,OAAO,EAAU,YAAY,EAAC,MAAM,mCAAmC,CAAC;AAKxE,MAAM,WAAW,0BAA2B,SAAQ,YAAY,CAAC,OAAO,cAAc,CAAC;IACrF;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,YAAY,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;CAC/C;AAED,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA+FvC,CAAC;AAEH,eAAO,MAAM,iCAAiC;;;;;;;;;;;;;;;;;;;EAQ7C,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;EA4CjC,CAAC"}

package/dist/commonjs/side-panel/lib/SidePanelToggleButton.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidePanelToggleButton = exports.useSidePanelToggleButtonElemProps = exports.sidePanelToggleButtonStencil = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const common_1 = require("@workday/canvas-kit-react/common");
+const button_1 = require("@workday/canvas-kit-react/button");
+const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
+const tooltip_1 = require("@workday/canvas-kit-react/tooltip");
+const useSidePanelModel_1 = require("./useSidePanelModel");
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+exports.sidePanelToggleButtonStencil = (0, canvas_kit_styling_1.createStencil)({
+    base: { name: "1etqp8", styles: "box-sizing:border-box;position:absolute;top:var(--cnvs-sys-space-x6);width:var(--cnvs-sys-space-x8);inset-inline-end:var(--cnvs-sys-space-x4);" },
+    modifiers: {
+        state: {
+            collapsing: { name: "30y959", styles: "margin:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
+            collapsed: { name: "xhos1", styles: "margin:auto;inset-inline-start:0;inset-inline-end:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
+            expanded: { name: "1ksb21", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" },
+            expanding: { name: "2ew0xk", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" }
+        },
+        origin: {
+            start: { name: "3x19g6", styles: "" },
+            end: { name: "1x1y4h", styles: "transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" }
+        }
+    },
+    compound: [
+        {
+            modifiers: { state: 'collapsed', origin: 'end' },
+            styles: { name: "2lkeu7", styles: "transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" }
+        },
+        {
+            modifiers: { state: 'collapsing', origin: 'end' },
+            styles: { name: "42drd4", styles: "transform:scaleX(-1);inset-inline-start:var(--cnvs-sys-space-x4);:dir(rtl){transform:scaleX(1);inset-inline-end:var(--cnvs-sys-space-x4);}" }
+        },
+        {
+            modifiers: { state: 'expanded', origin: 'end' },
+            styles: { name: "16e0u", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-sys-space-x4);:dir(rtl){transform:scaleX(-1);inset-inline-end:var(--cnvs-sys-space-x4);}" }
+        },
+        {
+            modifiers: { state: 'expanding', origin: 'end' },
+            styles: { name: "1qlm4j", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-sys-space-x4);:dir(rtl){transform:scaleX(-1);inset-inline-end:var(--cnvs-sys-space-x4);}" }
+        }
+    ]
+}, "side-panel-toggle-button-2c790f");
+exports.useSidePanelToggleButtonElemProps = (0, common_1.createElemPropsHook)(useSidePanelModel_1.useSidePanelModel)(({ state }) => {
+    return {
+        'aria-controls': state.panelId,
+        'aria-expanded': state.transitionState === 'expanded',
+        'aria-labelledby': state.labelId,
+    };
+});
+exports.SidePanelToggleButton = (0, common_1.createSubcomponent)('button')({
+    displayName: 'SidePanel.ToggleButton',
+    modelHook: useSidePanelModel_1.useSidePanelModel,
+    elemPropsHook: exports.useSidePanelToggleButtonElemProps,
+})(({ variant = undefined, icon = canvas_system_icons_web_1.transformationImportIcon, tooltipTextExpand = 'Expand', tooltipTextCollapse = 'Collapse', tooltipProps, ...elemProps }, Element, model) => {
+    return ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { type: "muted", ...tooltipProps, title: model.state.transitionState === 'collapsed' ? tooltipTextExpand : tooltipTextCollapse, children: (0, jsx_runtime_1.jsx)(button_1.TertiaryButton, { icon: icon, as: Element, variant: variant, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.sidePanelToggleButtonStencil)({
+                state: model.state.transitionState,
+                origin: model.state.origin,
+            })), onClick: (event) => {
+                var _a;
+                (_a = elemProps.onClick) === null || _a === void 0 ? void 0 : _a.call(elemProps, event);
+                model.events.handleAnimationStart();
+            } }) }));
+});