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

The parent module that contains all Workday Canvas Kit React components

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PillIconButton = exports.pillIconButtonStencil = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const button_1 = require("@workday/canvas-kit-react/button");
const common_1 = require("@workday/canvas-kit-react/common");
const icon_1 = require("@workday/canvas-kit-react/icon");
const layout_1 = require("@workday/canvas-kit-react/layout");
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
const usePillModel_1 = require("./usePillModel");
exports.pillIconButtonStencil = (0, canvas_kit_styling_1.createStencil)({
    extends: button_1.buttonStencil,
    base: { name: "2bqsfs", 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");
exports.PillIconButton = (0, common_1.createSubcomponent)('button')({
    modelHook: usePillModel_1.usePillModel,
})(({ size, icon, children, 'aria-label': ariaLabel = '', ...elemProps }, Element, model) => {
    return ((0, jsx_runtime_1.jsx)(Element, { disabled: model.state.disabled, "aria-labelledby": `removable-${model.state.id} label-${model.state.id}`, ...(0, layout_1.mergeStyles)(elemProps, (0, exports.pillIconButtonStencil)()), children: (0, jsx_runtime_1.jsx)(icon_1.SystemIcon, { "aria-label": ariaLabel, id: `removable-${model.state.id}`, icon: icon || canvas_system_icons_web_1.xSmallIcon, "aria-hidden": true, role: "img" }) }));
});