@workday/canvas-kit-react/dist/es6/expandable/lib/ExpandableTarget.js

The parent module that contains all Workday Canvas Kit React components

import { jsx as _jsx } from "react/jsx-runtime";
import { cornerShapeStencil, createSubcomponent, } from '@workday/canvas-kit-react/common';
import { mergeStyles } from '@workday/canvas-kit-react/layout';
import { Heading } from '@workday/canvas-kit-react/text';
import { createStencil, px2rem } from '@workday/canvas-kit-styling';
import { system } from '@workday/canvas-tokens-web';
import { useExpandableModel } from './hooks/useExpandableModel';
import { useExpandableTarget } from './hooks/useExpandableTarget';
export const expandableTargetStencil = createStencil({
    extends: cornerShapeStencil,
    base: { name: "262v4x", styles: "box-sizing:border-box;background:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));border-color:var(--cnvs-sys-color-border-transparent);--shape-corner-shape-ccab68:var(--cnvs-sys-shape-lg, 0.75rem);border-width:0;display:flex;align-items:center;flex-direction:row;gap:var(--cnvs-sys-gap-none, var(--cnvs-sys-space-zero, 0));justify-content:start;padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));cursor:pointer;width:100%;&:hover, &.hover{background-color:var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));}&:focus-visible, &.focus{outline:0.125rem solid var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));}" }
}, "expandable-target-6f2998");
export const ExpandableTarget = createSubcomponent('button')({
    modelHook: useExpandableModel,
    elemPropsHook: useExpandableTarget,
})(({ children, headingLevel, ...elementProps }, Element) => {
    const button = (_jsx(Element, { ...mergeStyles(elementProps, expandableTargetStencil()), children: children }));
    return headingLevel ? (_jsx(Heading, { size: "small", as: headingLevel, cs: { margin: 0 }, children: button })) : (button);
});