@workday/canvas-kit-react/dist/es6/pill/lib/PillIconButton.js

The parent module that contains all Workday Canvas Kit React components

import { jsx as _jsx } from "react/jsx-runtime";
import { buttonStencil } from '@workday/canvas-kit-react/button';
import { createSubcomponent } from '@workday/canvas-kit-react/common';
import { SystemIcon, systemIconStencil } from '@workday/canvas-kit-react/icon';
import { mergeStyles } from '@workday/canvas-kit-react/layout';
import { calc, createStencil, px2rem } from '@workday/canvas-kit-styling';
import { xSmallIcon } from '@workday/canvas-system-icons-web';
import { component, system } from '@workday/canvas-tokens-web';
import { usePillModel } from './usePillModel';
export const pillIconButtonStencil = createStencil({
    extends: buttonStencil,
    base: { name: "3sxrpo", styles: "box-sizing:border-box;margin-inline-end:calc(0.4375rem * -1);margin-inline-start:0;--borderRadius-button-a19f67:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));height:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));width:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));padding:0;overflow:visible;flex:0 0 auto;--border-button-a19f67:var(--cnvs-sys-color-border-transparent);--background-button-a19f67:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-default);--size-svg-bca693:var(--cnvs-component-system-icon-size-xs, var(--cnvs-sys-space-x4, 1rem));::after{content:\"\";box-sizing:border-box;position:absolute;top:calc(0.3125rem * -1);right:calc(0.3125rem * -1);bottom:calc(0.3125rem * -1);left:calc(0.3125rem * -1);margin:0;pointer-events:all;border-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));border-style:solid;border-width:0.125rem;border-color:transparent;}&:focus-visible, &.focus{--border-button-a19f67:var(--cnvs-sys-color-border-transparent);box-shadow:none;::after{border-color:var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));}}&:hover, &.hover{--border-button-a19f67:var(--cnvs-sys-color-border-transparent);}&:active, &.active{--border-button-a19f67:var(--cnvs-sys-color-border-transparent);}&:disabled, &.disabled{--border-button-a19f67:var(--cnvs-sys-color-border-transparent);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);}" }
}, "pill-icon-button-81e81c");
export const PillIconButton = createSubcomponent('button')({
    modelHook: usePillModel,
})(({ size, icon, children, 'aria-label': ariaLabel = '', ...elemProps }, Element, model) => {
    return (_jsx(Element, { disabled: model.state.disabled, "aria-labelledby": `removable-${model.state.id} label-${model.state.id}`, ...mergeStyles(elemProps, pillIconButtonStencil()), children: _jsx(SystemIcon, { "aria-label": ariaLabel, id: `removable-${model.state.id}`, icon: icon || xSmallIcon, "aria-hidden": true, role: "img" }) }));
});