@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 { 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 { brand, system } from '@workday/canvas-tokens-web';
import { useExpandableTarget } from './hooks/useExpandableTarget';
import { useExpandableModel } from './hooks/useExpandableModel';
export const expandableTargetStencil = createStencil({
    base: { name: "3xn4wd", styles: "box-sizing:border-box;background:var(--cnvs-sys-color-bg-transparent-default);border-color:var(--cnvs-sys-color-bg-transparent-default);border-radius:var(--cnvs-sys-shape-x1);border-width:0;display:flex;align-items:center;flex-direction:row;gap:var(--cnvs-sys-space-x2);justify-content:start;padding:var(--cnvs-sys-space-x2);cursor:pointer;width:100%;&:hover, &.hover{background-color:var(--cnvs-sys-color-bg-alt-soft);}&:focus-visible, &.focus{outline:var(--cnvs-brand-common-focus-outline) solid 0.125rem;}" }
}, "expandable-target-89840f");
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, margin: "0", children: button })) : (button);
});