@workday/canvas-kit-preview-react 15.0.0-alpha.0074-next.0 → 15.0.0-alpha.0076-next.0

package/dist/commonjs/select/lib/types.d.ts

@@ -1,37 +0,0 @@
-/**
- * The placement of the menu relative to its corresponding button. This type is a
- * subset of the PopperJS.Placement type limited to the `bottom` and `top` values.
- *
- * We need to use `top` and `bottom` instead of `top-start` and `bottom-start` for
- * placements because PopperJS incorrectly rounds the `start` and `end` modifiers:
- * https://github.com/popperjs/popper-core/blob/38914aae7a2e91715c6eb2b563517082a40cfa64/src/utils/computeOffsets.js#L68-L81
- * This rounding causes problems with browsers that allow subpixel values for elements
- * like Firefox and Edge.
- *
- * @deprecated ⚠️ `MenuPlacement` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs) instead.
- */
-export type MenuPlacement = 'bottom' | 'top';
-/**
- * The visibility state of the menu.
- *
- * `closed`: The menu is completely closed (not present in the DOM).
- * `open`: The menu was previously `closed` and has just been instructed to open.
- *   The menu has been added to the DOM, but it's not yet visible. This state is
- *   necessary in order to apply an opacity of 0 to the menu before transitioning it
- *   to an opacity of 1.0 in the opening state.
- * `opening`: The menu is in the process of opening.
- * `opened`: The menu is completely open.
- * `close`: The menu was previously `open` and has just been instructed to close.
- * `closing`: The menu is in the process of closing.
- *
- * Typically, a menu will transition through states in the following order:
- * `closed` > `open` > `opening` > `opened` > `close` > `closing` > `closed`
- *
- * However, it's possible for a user to open a menu while it's in the process of
- * closing in which case the menu can transition from `closing` > `opening` (and
- * vice-versa).
- *
- * @deprecated ⚠️ `MenuVisibility` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs) instead.
- */
-export type MenuVisibility = 'closed' | 'open' | 'opening' | 'opened' | 'close' | 'closing';
-//# sourceMappingURL=types.d.ts.map

package/dist/commonjs/select/lib/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../select/lib/types.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,KAAK,CAAC;AAE7C;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC"}

package/dist/commonjs/select/lib/types.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/commonjs/select/lib/utils.d.ts

@@ -1,10 +0,0 @@
-import { NormalizedOption } from './SelectBase';
-/**
- * @deprecated ⚠️ `getIndexByValue` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead.
- */
-export declare const getIndexByValue: (options: NormalizedOption[], value: string | undefined) => number;
-/**
- * @deprecated ⚠️ `getCorrectedIndexByValue` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs) instead.
- */
-export declare const getCorrectedIndexByValue: (options: NormalizedOption[], value: string | undefined) => number;
-//# sourceMappingURL=utils.d.ts.map

package/dist/commonjs/select/lib/utils.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../select/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,gBAAgB,EAAC,MAAM,cAAc,CAAC;AAC9C;;GAEG;AACH,eAAO,MAAM,eAAe,YAAa,gBAAgB,EAAE,SAAS,MAAM,GAAG,SAAS,KAAG,MAYxF,CAAC;AAGF;;GAEG;AACH,eAAO,MAAM,wBAAwB,YAC1B,gBAAgB,EAAE,SACpB,MAAM,GAAG,SAAS,KACxB,MAIF,CAAC"}

package/dist/commonjs/select/lib/utils.js

@@ -1,27 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getCorrectedIndexByValue = exports.getIndexByValue = void 0;
-/**
- * @deprecated ⚠️ `getIndexByValue` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead.
- */
-const getIndexByValue = (options, value) => {
-    if (!options || value === undefined) {
-        return -1;
-    }
-    for (let i = 0; i < options.length; i++) {
-        if (options[i].value === value) {
-            return i;
-        }
-    }
-    return -1;
-};
-exports.getIndexByValue = getIndexByValue;
-// If the value doesn't exist in the options, return index 0
-/**
- * @deprecated ⚠️ `getCorrectedIndexByValue` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs) instead.
- */
-const getCorrectedIndexByValue = (options, value) => {
-    const indexByValue = (0, exports.getIndexByValue)(options, value);
-    return indexByValue === -1 ? 0 : indexByValue;
-};
-exports.getCorrectedIndexByValue = getCorrectedIndexByValue;

package/dist/es6/pill/index.d.ts

@@ -1,8 +0,0 @@
-export * from './lib/Pill';
-export * from './lib/usePillModel';
-export * from './lib/PillCount';
-export * from './lib/PillIconButton';
-export * from './lib/PillIcon';
-export * from './lib/PillLabel';
-export * from './lib/Pill';
-//# sourceMappingURL=index.d.ts.map

package/dist/es6/pill/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../pill/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC"}

package/dist/es6/pill/index.js

@@ -1,7 +0,0 @@
-export * from './lib/Pill';
-export * from './lib/usePillModel';
-export * from './lib/PillCount';
-export * from './lib/PillIconButton';
-export * from './lib/PillIcon';
-export * from './lib/PillLabel';
-export * from './lib/Pill';

package/dist/es6/pill/lib/Pill.d.ts

@@ -1,265 +0,0 @@
-import { BoxProps } from '@workday/canvas-kit-react/layout';
-export interface PillProps extends BoxProps {
-    /**
-     * Defines what kind of pill to render stylistically and its interaction states
-     * @default 'default'
-     */
-    variant?: 'readOnly' | 'removable';
-    /**
-     * Determines the max width of the pill. If the pill text is longer than the max width,
-     * text will be truncated and a tooltip will show the rest of the content when hovered over
-     */
-    maxWidth?: string | number;
-}
-export declare const pillStencil: import("@workday/canvas-kit-styling").Stencil<{
-    variant: {
-        readOnly: {
-            [x: string]: string | {
-                [x: string]: "--cnvs-sys-color-bg-default" | "--cnvs-sys-color-border-container";
-                borderColor: "--cnvs-sys-color-border-container";
-            } | {
-                [x: string]: "--cnvs-sys-color-bg-default";
-                borderColor?: undefined;
-            };
-            border: string;
-            cursor: string;
-            '&:hover, &.hover': {
-                [x: string]: "--cnvs-sys-color-bg-default" | "--cnvs-sys-color-border-container";
-                borderColor: "--cnvs-sys-color-border-container";
-            };
-            '&:focus-visible, &.focus': {
-                [x: string]: "--cnvs-sys-color-bg-default";
-            };
-            '&:active, &.active': {
-                [x: string]: "--cnvs-sys-color-bg-default";
-            };
-            '&:disabled, &.disabled': {
-                [x: string]: "--cnvs-sys-color-bg-default";
-            };
-        };
-        removable: {
-            '&:focus-visible, &.focus': {
-                [x: string]: string;
-                boxShadow: string;
-            };
-            '&:hover, &.hover': {
-                [x: string]: "--cnvs-sys-color-bg-alt-strong";
-            };
-            '&:active, &.active': {
-                [x: string]: "--cnvs-sys-color-bg-alt-stronger";
-            };
-            '&:disabled, &.disabled': {
-                [x: string]: string;
-            };
-            cursor: string;
-            overflow: string;
-            position: string;
-        };
-    };
-}, {}, {
-    maxWidth: string;
-}, import("@workday/canvas-kit-styling").Stencil<{
-    size: {
-        large: {
-            fontWeight: "--cnvs-sys-font-weight-bold";
-            height: "var(--cnvs-sys-size-xl, 3rem)";
-            paddingInline: "var(--cnvs-sys-padding-xxl, var(--cnvs-sys-space-x8))";
-            minWidth: "--cnvs-base-size-1400";
-            fontFamily: "--cnvs-sys-font-family-default";
-            lineHeight: "var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small))";
-            fontSize: "var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small))";
-            letterSpacing: "var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-base-letter-spacing-200))";
-        };
-        medium: {
-            fontWeight: "--cnvs-sys-font-weight-bold";
-            minWidth: "--cnvs-base-size-1200";
-            paddingInline: "var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6))";
-            height: "var(--cnvs-sys-size-lg, var(--cnvs-sys-space-x10))";
-            fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
-            lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large))";
-            fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large))";
-            letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-50))";
-        };
-        small: {
-            fontWeight: "--cnvs-sys-font-weight-bold";
-            height: "var(--cnvs-sys-size-md, var(--cnvs-sys-space-x8))";
-            minWidth: "--cnvs-base-size-1000";
-            paddingInline: "var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4))";
-            gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1))";
-            fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
-            lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large))";
-            fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large))";
-            letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-50))";
-        };
-        extraSmall: {
-            fontWeight: "--cnvs-sys-font-weight-bold";
-            height: "var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x6))";
-            minWidth: string;
-            paddingInline: "var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3))";
-            gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1))";
-            fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
-            lineHeight: "var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium))";
-            fontSize: "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium))";
-            letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-base-letter-spacing-100))";
-        };
-    };
-    grow: {
-        true: {
-            width: string;
-            maxWidth: string;
-        };
-    };
-    iconPosition: {
-        only: {
-            padding: "var(--cnvs-sys-padding-none, var(--cnvs-sys-space-zero))";
-        };
-        start: {};
-        end: {};
-    };
-}, {}, {
-    background: string;
-    border: string;
-    boxShadowInner: string;
-    boxShadowOuter: string;
-    label: string;
-    opacity: string;
-    borderRadius: string;
-}, never, never>, never>;
-/**
- * By default, a `Pill` renders an interactive element that accepts subcomponents. By "interactive"
- * we mean that the Pill container is a focusable element (a `<button>`). All leading elements
- * (icons or avatars) are intended to be descriptive, helping support the label. They should not
- * receive focus.
- *
- * `Pill` is the container component. It also provides a React context model for its subcomponents.
- * Based on the `variant` prop this component will render different styled `Pill`s.
- *
- * Example of read only:
- *
- * ```tsx
- * <Pill variant="readOnly">This is a read only</Pill>
- * ```
- *
- * Example of interactive:
- *
- * ```tsx
- * <Pill onClick={() => console.log('clicked')}>
- *   <Pill.Avatar /> Regina Skeltor
- * </Pill>
- * ```
- *
- * Example of removable:
- *
- * ```tsx
- * <Pill variant="removable">
- *   <Pill.Avatar /> Regina Skeltor
- *   <Pill.IconButton aria-label='Remove user' onClick={() => console.log('clicked')} />
- * </Pill>
- * ```
- *
- * If you set the `Pill` `variant` to `removable`, it will render a `<span>` element. You can then
- * provide a `Pill.IconButton` that acts as the focus target. This creates a smaller, more
- * intentional click target that prevents users from accidentally deleting an item.
- *
- * ```tsx
- * <Pill variant="removable">
- *   Shoes
- *   <Pill.IconButton aria-label='Remove user' onClick={() => console.log('handle remove')} />
- * </Pill>
- * ```
- */
-export declare const Pill: import("@workday/canvas-kit-react/common").ElementComponentM<"button", PillProps & Partial<{
-    disabled: boolean;
-    id: string;
-}> & {} & {}, {
-    state: {
-        id: string;
-        disabled: boolean;
-    };
-    events: {};
-}> & {
-    /**
-     * This component renders an avatar. It supports all props of the `Avatar` component.
-     *
-     * ```tsx
-     * <Pill variant="removable">
-     *   <Pill.Avatar url={avatarUrl} />
-     *    <Pill.Label>Regina Skeltor</Pill.Label>
-     *   <Pill.IconButton aria-label='Remove user' onClick={() => console.log('handle remove')} />
-     * </Pill>
-     * ```
-     */
-    Avatar: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("./PillAvatar").PillAvatarProps, {
-        state: {
-            id: string;
-            disabled: boolean;
-        };
-        events: {};
-    }>;
-    /**
-     * This component renders its `children` as the count.
-     *
-     * ```tsx
-     * <Pill onClick={() => console.warn('clicked')}>
-     *    <Pill.Label>Shoes</Pill.Label>
-     *   <Pill.Count>30</Pill.Count>
-     * </Pill>
-     * ```
-     */
-    Count: import("@workday/canvas-kit-react/common").ElementComponent<"span", import("./PillCount").PillCountProps>;
-    /**
-     * This component renders an `icon`. By default it renders a `plusIcon` but it can be overridden by
-     * providing an icon to the `icon` prop. You must provide an `aria-label` for the icon.
-     *
-     * ```tsx
-     * <Pill onClick={() => console.warn('clicked')}>
-     *   <Pill.Icon aria-label='Add user' />
-     *   <Pill.Label>Regina Skeltor</Pill.Label>
-     * </Pill>
-     * ```
-     */
-    Icon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("./PillIcon").PillIconProps, {
-        state: {
-            id: string;
-            disabled: boolean;
-        };
-        events: {};
-    }>;
-    /**
-     * This component renders a custom icon button. It is only intended to be used with the
-     * `removable` variant. By default, it renders a `xSmallIcon` but can be overridden by providing
-     * an icon to the `icon` prop.
-     *
-     * ```tsx
-     * <Pill variant="removable">
-     *   <Pill.Label>Pink Shirts</Pill.Label>
-     *   <Pill.IconButton aria-label='Remove item' onClick={() => console.warn('clicked')} />
-     * </Pill>
-     * ```
-     */
-    IconButton: import("@workday/canvas-kit-react/common").ElementComponentM<"button", import("./PillIconButton").PillIconButtonProps, {
-        state: {
-            id: string;
-            disabled: boolean;
-        };
-        events: {};
-    }>;
-    /**
-     * This component renders a `<span>` that automatically handles overflow by rendering a tooltip.
-     * There's no need to use this component directly since the overflow is handled for you automatically unless you have an icon or other element.
-     *
-     * ```tsx
-     * <Pill variant="readOnly">
-     *   <Pill.Label>Read-only</Pill.Label>
-     * </Pill>
-     * ```
-     */
-    Label: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("./PillLabel").PillLabelProps, {
-        state: {
-            id: string;
-            disabled: boolean;
-        };
-        events: {};
-    }>;
-};
-//# sourceMappingURL=Pill.d.ts.map

package/dist/es6/pill/lib/Pill.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Pill.d.ts","sourceRoot":"","sources":["../../../../pill/lib/Pill.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAM,QAAQ,EAAc,MAAM,kCAAkC,CAAC;AAa5E,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,GAAG,WAAW,CAAC;IACnC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC5B;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAwHtB,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;IAIb;;;;;;;;;;OAUG;;;;;;;;IAEH;;;;;;;;;OASG;;IAEH;;;;;;;;;;OAUG;;;;;;;;IAEH;;;;;;;;;;;OAWG;;;;;;;;IAEH;;;;;;;;;OASG;;;;;;;;CA8BL,CAAC"}

package/dist/es6/pill/lib/Pill.js

@@ -1,144 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { buttonStencil } from '@workday/canvas-kit-react/button';
-import { createContainer, focusRing } from '@workday/canvas-kit-react/common';
-import { Box, mergeStyles } from '@workday/canvas-kit-react/layout';
-import { px2rem, createStencil, cssVar } from '@workday/canvas-kit-styling';
-import { usePillModel } from './usePillModel';
-import { PillIcon } from './PillIcon';
-import { PillIconButton } from './PillIconButton';
-import { PillCount, pillCountStencil } from './PillCount';
-import { PillAvatar } from './PillAvatar';
-import { PillLabel } from './PillLabel';
-import { systemIconStencil } from '@workday/canvas-kit-react/icon';
-import { system } from '@workday/canvas-tokens-web';
-export const pillStencil = createStencil({
-    extends: buttonStencil,
-    vars: {
-        maxWidth: '',
-    },
-    base: { name: "24wm92", styles: "box-sizing:border-box;display:initial;flex-direction:row;align-items:center;border-radius:var(--cnvs-sys-shape-x1);font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-medium);line-height:var(--cnvs-sys-line-height-subtext-small);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);box-shadow:none;outline:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:fit-content;padding:0.125rem var(--cnvs-sys-space-x2);height:var(--cnvs-sys-space-x6);position:relative;gap:var(--cnvs-sys-space-x1);max-width:var(--maxWidth-pill-02eca5);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-default);--border-button-f6d2bd:var(--cnvs-sys-color-border-input-default);--label-button-f6d2bd:var(--cnvs-sys-color-fg-strong);--color-system-icon-3a4847:currentColor;--borderColor-pill-count-d778e9:transparent;&:has(span){display:flex;line-height:var(--cnvs-sys-line-height-subtext-large);}&:hover, &.hover{--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-strong);--border-button-f6d2bd:var(--cnvs-sys-color-border-input-strong);--label-button-f6d2bd:var(--cnvs-sys-color-fg-strong);--color-system-icon-3a4847:currentColor;--backgroundColor-pill-count-d778e9:var(--cnvs-sys-color-bg-muted-softer);--borderColor-pill-count-d778e9:transparent;}&:active, &.active{--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-stronger);--border-button-f6d2bd:var(--cnvs-sys-color-border-input-strong);--label-button-f6d2bd:var(--cnvs-sys-color-fg-strong);--color-system-icon-3a4847:currentColor;--backgroundColor-pill-count-d778e9:var(--cnvs-sys-color-bg-muted-softer);--borderColor-pill-count-d778e9:transparent;}&:focus-visible, &.focus{--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-default);--border-button-f6d2bd:var(--cnvs-sys-color-border-primary-default);--label-button-f6d2bd:var(--cnvs-sys-color-fg-strong);border-color:var(--cnvs-sys-color-border-primary-default);--color-system-icon-3a4847:currentColor;--borderColor-pill-count-d778e9:var(--cnvs-sys-color-border-primary-default);box-shadow:inset 0 0 0 1px var(--cnvs-sys-color-border-primary-default), 0 0 0 0px var(--cnvs-sys-color-border-primary-default);}&:disabled, &.disabled{--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-default);--border-button-f6d2bd:var(--cnvs-sys-color-border-input-disabled);--label-button-f6d2bd:var(--cnvs-sys-color-fg-disabled);--color-system-icon-3a4847:currentColor;--backgroundColor-pill-count-d778e9:var(--cnvs-sys-color-bg-alt-strong);--borderColor-pill-count-d778e9:transparent;}" },
-    modifiers: {
-        variant: {
-            readOnly: { name: "3l435h", styles: "border:0.0625rem solid var(--cnvs-sys-color-border-container);cursor:default;--background-button-f6d2bd:var(--cnvs-sys-color-bg-default);&:hover, &.hover{border-color:var(--cnvs-sys-color-border-container);--background-button-f6d2bd:var(--cnvs-sys-color-bg-default);}&:focus-visible, &.focus{--background-button-f6d2bd:var(--cnvs-sys-color-bg-default);}&:active, &.active{--background-button-f6d2bd:var(--cnvs-sys-color-bg-default);}&:disabled, &.disabled{--background-button-f6d2bd:var(--cnvs-sys-color-bg-default);}" },
-            removable: { name: "s6l79", styles: "&:focus-visible, &.focus{--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-default);--border-button-f6d2bd:var(--cnvs-sys-color-border-input-default);--label-button-f6d2bd:var(--cnvs-sys-color-fg-strong);box-shadow:none;}&:hover, &.hover{--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-strong);}&:active, &.active{--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-stronger);}&:disabled, &.disabled{--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-default);--color-system-icon-3a4847:currentColor;}cursor:default;overflow:revert;position:relative;" }
-        }
-    }
-}, "pill-02eca5");
-/**
- * By default, a `Pill` renders an interactive element that accepts subcomponents. By "interactive"
- * we mean that the Pill container is a focusable element (a `<button>`). All leading elements
- * (icons or avatars) are intended to be descriptive, helping support the label. They should not
- * receive focus.
- *
- * `Pill` is the container component. It also provides a React context model for its subcomponents.
- * Based on the `variant` prop this component will render different styled `Pill`s.
- *
- * Example of read only:
- *
- * ```tsx
- * <Pill variant="readOnly">This is a read only</Pill>
- * ```
- *
- * Example of interactive:
- *
- * ```tsx
- * <Pill onClick={() => console.log('clicked')}>
- *   <Pill.Avatar /> Regina Skeltor
- * </Pill>
- * ```
- *
- * Example of removable:
- *
- * ```tsx
- * <Pill variant="removable">
- *   <Pill.Avatar /> Regina Skeltor
- *   <Pill.IconButton aria-label='Remove user' onClick={() => console.log('clicked')} />
- * </Pill>
- * ```
- *
- * If you set the `Pill` `variant` to `removable`, it will render a `<span>` element. You can then
- * provide a `Pill.IconButton` that acts as the focus target. This creates a smaller, more
- * intentional click target that prevents users from accidentally deleting an item.
- *
- * ```tsx
- * <Pill variant="removable">
- *   Shoes
- *   <Pill.IconButton aria-label='Remove user' onClick={() => console.log('handle remove')} />
- * </Pill>
- * ```
- */
-export const Pill = createContainer('button')({
-    displayName: 'Pill',
-    modelHook: usePillModel,
-    subComponents: {
-        /**
-         * This component renders an avatar. It supports all props of the `Avatar` component.
-         *
-         * ```tsx
-         * <Pill variant="removable">
-         *   <Pill.Avatar url={avatarUrl} />
-         *    <Pill.Label>Regina Skeltor</Pill.Label>
-         *   <Pill.IconButton aria-label='Remove user' onClick={() => console.log('handle remove')} />
-         * </Pill>
-         * ```
-         */
-        Avatar: PillAvatar,
-        /**
-         * This component renders its `children` as the count.
-         *
-         * ```tsx
-         * <Pill onClick={() => console.warn('clicked')}>
-         *    <Pill.Label>Shoes</Pill.Label>
-         *   <Pill.Count>30</Pill.Count>
-         * </Pill>
-         * ```
-         */
-        Count: PillCount,
-        /**
-         * This component renders an `icon`. By default it renders a `plusIcon` but it can be overridden by
-         * providing an icon to the `icon` prop. You must provide an `aria-label` for the icon.
-         *
-         * ```tsx
-         * <Pill onClick={() => console.warn('clicked')}>
-         *   <Pill.Icon aria-label='Add user' />
-         *   <Pill.Label>Regina Skeltor</Pill.Label>
-         * </Pill>
-         * ```
-         */
-        Icon: PillIcon,
-        /**
-         * This component renders a custom icon button. It is only intended to be used with the
-         * `removable` variant. By default, it renders a `xSmallIcon` but can be overridden by providing
-         * an icon to the `icon` prop.
-         *
-         * ```tsx
-         * <Pill variant="removable">
-         *   <Pill.Label>Pink Shirts</Pill.Label>
-         *   <Pill.IconButton aria-label='Remove item' onClick={() => console.warn('clicked')} />
-         * </Pill>
-         * ```
-         */
-        IconButton: PillIconButton,
-        /**
-         * This component renders a `<span>` that automatically handles overflow by rendering a tooltip.
-         * There's no need to use this component directly since the overflow is handled for you automatically unless you have an icon or other element.
-         *
-         * ```tsx
-         * <Pill variant="readOnly">
-         *   <Pill.Label>Read-only</Pill.Label>
-         * </Pill>
-         * ```
-         */
-        Label: PillLabel,
-    },
-})(({ variant, maxWidth = 200, children, ...elemProps }, Element, model) => {
-    const maxWidthCSSValue = typeof maxWidth === 'number' ? px2rem(maxWidth) : maxWidth;
-    const isReadOnly = variant === 'readOnly';
-    return (variant === null || variant === void 0 ? void 0 : variant.match(/^(readOnly|removable)$/)) ? (_jsx(Box, { as: Element !== 'button' ? Element : 'span', id: isReadOnly ? model.state.id : undefined, ...mergeStyles(elemProps, [
-            model.state.disabled ? 'disabled' : undefined,
-            pillStencil({ maxWidth: maxWidthCSSValue, variant }),
-        ]), children: isReadOnly ? _jsx(PillLabel, { children: children }) : children })) : (_jsx(Element, { disabled: model.state.disabled, ...mergeStyles(elemProps, [
-            model.state.disabled ? 'disabled' : undefined,
-            pillStencil({ maxWidth: maxWidthCSSValue }),
-        ]), children: children }));
-});