@workday/canvas-kit-labs-react/dist/commonjs/ai-ingress-button/lib/AIIngressButton.js

Canvas Kit Labs is an incubator for new and experimental components. Since we have a rather rigorous process for getting components in at a production level, it can be valuable to make them available earlier while we continuously iterate on the API/functi

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.AIIngressButton = exports.AIIngressButtonStencil = 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_kit_styling_1 = require("@workday/canvas-kit-styling");
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
const icon_1 = require("@workday/canvas-kit-react/icon");
const AIIngressIcon_1 = require("./AIIngressIcon");
/**
 * Icon gradient colors
 */
const illuminateStopColor1 = canvas_tokens_web_1.base.red200; //'#FFA198'
const illuminateStopColor2 = canvas_tokens_web_1.base.orange200; //'#FFCAA0'
const illuminateStopColor3 = canvas_tokens_web_1.base.orange200; //'#FFCA79'
const illuminateStopColor4 = canvas_tokens_web_1.base.amber200; //'#FDCA44'
const illuminateStopColor5 = canvas_tokens_web_1.base.amber300; //'#FFB74D';
/**
 * Box shadow glow colors
 */
const glowEraser = canvas_tokens_web_1.base.magenta200; //'#FFC2FD';
const glowHighlighter = canvas_tokens_web_1.base.amber100; //'#FFF3A8';
const glowLunchBreak = canvas_tokens_web_1.base.amber300; //'#FEC10B';
const glowHappyHour = canvas_tokens_web_1.base.orange400; //'#FD7E00';
const glowThumbtack = canvas_tokens_web_1.base.coral500; //'#FC5B05';
exports.AIIngressButtonStencil = (0, canvas_kit_styling_1.createStencil)({
    extends: button_1.buttonStencil,
    base: { name: "35qqm3", styles: "box-sizing:border-box;--background-button-85bf0e:var(--cnvs-sys-color-bg-ai-strongest);border-radius:var(--cnvs-sys-shape-round);height:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x1));width:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x1));transition:box-shadow 300ms ease-out, background 300ms ease-out;.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-inverse);}}&:is(:hover, .hover):not(:disabled, .disabled){.wd-icon-ai-ingress-button{linearGradient > stop:first-child{stop-color:var(--cnvs-base-palette-red-200);}linearGradient > stop:nth-child(2){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(3){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(4){stop-color:var(--cnvs-base-palette-amber-200);}linearGradient > stop:nth-child(5){stop-color:var(--cnvs-base-palette-amber-300);}}}&:disabled, &:disabled:active, &.disabled{opacity:var(--cnvs-sys-opacity-disabled);}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}" },
    modifiers: {
        variant: {
            inverse: { name: "1mypq1", styles: "--background-button-85bf0e:var(--cnvs-sys-color-bg-default);.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}}&:is(:hover, .hover):not(:disabled, .disabled){.wd-icon-ai-ingress-button{linearGradient > stop:first-child{stop-color:var(--cnvs-base-palette-red-200);}linearGradient > stop:nth-child(2){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(3){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(4){stop-color:var(--cnvs-base-palette-amber-200);}linearGradient > stop:nth-child(5){stop-color:var(--cnvs-base-palette-amber-300);}}}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 2px var(--cnvs-sys-color-fg-inverse);border:2px solid var(--cnvs-sys-color-border-ai) ;}" }
        },
        toggled: {
            true: { name: "38wqbh", styles: "--background-button-85bf0e:var(--cnvs-sys-color-bg-default);transition:box-shadow 300ms ease-out, background 300ms ease-out;box-shadow:0px 0px 4.9px 0px var(--cnvs-base-palette-magenta-200), 0px 0px 0.98px 0px var(--cnvs-base-palette-amber-100), 0px 0px 1.96px 0px var(--cnvs-base-palette-amber-300), 0px 0px 2.94px 0px var(--cnvs-base-palette-amber-300), 0px 0px 4.9px 0px var(--cnvs-base-palette-orange-400), 0px 0px 7.36px 0px var(--cnvs-base-palette-coral-500), 0px 0px 9.81px 0px var(--cnvs-base-palette-magenta-200), 0px 0px 12.26px 0px rgba(255, 194, 253, 0.50);.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));border:1px solid var(--cnvs-sys-color-border-container) ;}" },
            false: { name: "10zeha", styles: "transition:box-shadow 300ms ease-out, background 300ms ease-out;" }
        }
    },
    compound: [
        {
            modifiers: { toggled: true, variant: 'inverse' },
            styles: { name: "3zd0tl", styles: "--background-button-85bf0e:var(--cnvs-sys-color-bg-ai-strongest);.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-inverse);}}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 2px var(--cnvs-sys-color-fg-inverse);border:none;}" }
        }
    ]
}, "a-i-ingress-button-ea1953");
exports.AIIngressButton = (0, common_1.createComponent)('button')({
    displayName: 'AIIngressButton',
    Component: ({ toggled, variant, ...elemProps }, ref, Element) => {
        const svgGradientId = (0, common_1.useUniqueId)();
        return ((0, jsx_runtime_1.jsx)(button_1.BaseButton, { ref: ref, as: Element, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, [
                (0, exports.AIIngressButtonStencil)({ toggled, variant }),
                {
                    [icon_1.systemIconStencil.vars.color]: `url(#${svgGradientId})`,
                },
            ]), children: (0, jsx_runtime_1.jsx)(button_1.BaseButton.Icon, { size: "large", icon: (0, AIIngressIcon_1.getAIIngressIcon)(svgGradientId) }) }));
    },
});