@pantheon-systems/pds-toolkit-react 1.0.0-beta.4 → 1.0.0-beta.6

package/_dist/components/Callout/Callout.d.ts

@@ -1,6 +1,7 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { StatusType } from '@libs/types/custom-types';
 import './callout.css';
-type CalloutType = 'info' | 'success' | 'warning' | 'critical' | 'discovery' | 'code' | 'earlyAccess';
+type CalloutType = StatusType | 'code' | 'earlyAccess';
 type TypeLabels = Record<CalloutType, string>;
 export interface CalloutProps extends ComponentPropsWithoutRef<'div'> {
     /**

package/_dist/components/DashboardStat/DashboardStat.d.ts

@@ -1,6 +1,6 @@
 import { ComponentPropsWithoutRef } from 'react';
 import './dashboard-stat.css';
-export type DashBoardStatStatus = 'success' | 'warning' | 'launch' | 'error' | 'ready' | 'notReady';
+export type DashboardStatStatus = 'success' | 'warning' | 'launch' | 'error' | 'ready' | 'notReady';
 /**
  * Prop types for DashboardStat
  */
@@ -16,7 +16,7 @@ export interface DashboardStatProps extends ComponentPropsWithoutRef<'div'> {
     /**
      * Status of the stat, which determines the icon and icon color.
      */
-    status?: DashBoardStatStatus;
+    status?: DashboardStatStatus;
     /**
      * Title of the stat, displayed as the main heading of the component.
      */

package/_dist/components/StatusIndicator/StatusIndicator.d.ts

@@ -1,4 +1,5 @@
 import { ComponentPropsWithoutRef } from 'react';
+import { StatusType } from '@libs/types/custom-types';
 import './status-indicator.css';
 export interface StatusIndicatorProps extends ComponentPropsWithoutRef<'div'> {
     /**
@@ -16,7 +17,7 @@ export interface StatusIndicatorProps extends ComponentPropsWithoutRef<'div'> {
     /**
      * Sets status type
      */
-    type: 'critical' | 'info' | 'neutral' | 'new' | 'success' | 'warning' | 'working';
+    type: Exclude<StatusType, 'discovery'> | 'neutral' | 'new' | 'working';
 }
 /**
  * StatusIndicator UI component

package/_dist/components/badges/StatusBadge/StatusBadge.d.ts

@@ -1,4 +1,5 @@
 import { ComponentPropsWithoutRef } from 'react';
+import { StatusType } from '@libs/types/custom-types';
 import './status-badge.css';
 /**
  * StatusBadge component props
@@ -27,7 +28,7 @@ export interface StatusBadgeProps extends ComponentPropsWithoutRef<'div'> {
     /**
      * Status type for badge. Only renders if `hasStatusIndicator` is true.
      */
-    statusType?: 'success' | 'info' | 'frozen' | 'critical' | 'warning' | 'discovery' | 'disabled';
+    statusType?: StatusType | 'frozen' | 'disabled';
 }
 /**
  * StatusBadge UI component

package/_dist/components/buttons/Button/Button.d.ts

@@ -1,4 +1,5 @@
 import React, { ComponentPropsWithoutRef, MouseEvent, ReactNode } from 'react';
+import { ButtonDisplayType, ButtonSize, ButtonType, ButtonVariant } from '@libs/types/custom-types';
 import { PDSIcon } from '@components/icons/Icon/Icon';
 import './button.css';
 interface ButtonProps extends ComponentPropsWithoutRef<'button'> {
@@ -9,7 +10,7 @@ interface ButtonProps extends ComponentPropsWithoutRef<'button'> {
     /**
      * Type of button
      */
-    buttonType?: 'button' | 'submit' | 'reset';
+    buttonType?: ButtonType;
     /**
      * Additional class names
      */
@@ -21,7 +22,7 @@ interface ButtonProps extends ComponentPropsWithoutRef<'button'> {
     /**
      * How the button is displayed.
      */
-    displayType?: 'label-only' | 'icon-start' | 'icon-end';
+    displayType?: ButtonDisplayType;
     /**
      * Which icon to render
      */
@@ -49,7 +50,7 @@ interface ButtonProps extends ComponentPropsWithoutRef<'button'> {
     /**
      * Which size of button to render
      */
-    size?: 'sm' | 'md' | 'lg';
+    size?: ButtonSize;
     /**
      * Text for an optional tooltip to be displayed when the button is `disabled` or `isLoading`.
      */
@@ -57,7 +58,7 @@ interface ButtonProps extends ComponentPropsWithoutRef<'button'> {
     /**
      * Which variant of button to render
      */
-    variant?: 'primary' | 'secondary' | 'subtle' | 'brand' | 'brand-secondary' | 'critical' | 'critical-secondary' | 'navbar' | 'inline';
+    variant?: ButtonVariant;
 }
 /**
  * A Component used to render a Button

package/_dist/components/buttons/IconButton/IconButton.d.ts

@@ -1,4 +1,5 @@
 import React, { ComponentPropsWithoutRef, MouseEvent } from 'react';
+import { ButtonSize, ButtonType } from '@libs/types/custom-types';
 import { PDSIcon } from '@components/icons/Icon/Icon';
 import './icon-button.css';
 interface IconButtonProps extends ComponentPropsWithoutRef<'button'> {
@@ -9,7 +10,7 @@ interface IconButtonProps extends ComponentPropsWithoutRef<'button'> {
     /**
      * Type of button
      */
-    buttonType?: 'button' | 'submit' | 'reset';
+    buttonType?: ButtonType;
     /**
      * Additional class names.
      */
@@ -37,7 +38,7 @@ interface IconButtonProps extends ComponentPropsWithoutRef<'button'> {
     /**
      * Which size of button to render.
      */
-    size?: 'sm' | 'md' | 'lg';
+    size?: ButtonSize;
     /**
      * Which variant of button to render.
      */

package/_dist/components/buttons/MenuButton/MenuButton.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithRef, ReactNode } from 'react';
-import { HeadingItemType, LinkItemType, MenuItemType, NodeItemType, SeparatorItemType } from '@libs/types/custom-types';
+import { ButtonSize, ButtonVariant, HeadingItemType, LinkItemType, MenuItemType, NodeItemType, SeparatorItemType } from '@libs/types/custom-types';
 import { PDSIcon } from '@components/icons/Icon/Icon';
 import './menu-button.css';
 /**
@@ -49,7 +49,7 @@ export interface MenuButtonProps extends ComponentPropsWithRef<'span'> {
     /**
      * Which size of button to render.
      */
-    size?: 'sm' | 'md';
+    size?: Exclude<ButtonSize, 'lg'>;
     /**
      *  Optional `data-testid` value for this component.
      */
@@ -61,7 +61,7 @@ export interface MenuButtonProps extends ComponentPropsWithRef<'span'> {
     /**
      * Which variant of button to render — only valid for icon-end (default) display type.
      */
-    variant?: 'primary' | 'secondary' | 'navbar';
+    variant?: Extract<ButtonVariant, 'primary' | 'secondary' | 'navbar'>;
     /**
      * Is this button located with the Navbar component?
      * This will adjust the styling and position of the dropdown.

package/_dist/components/buttons/SplitButton/SplitButton.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithoutRef } from 'react';
-import { LinkItemType, MenuItemType } from '@libs/types/custom-types';
+import { ButtonSize, ButtonVariant, LinkItemType, MenuItemType } from '@libs/types/custom-types';
 import './split-button.css';
 /**
  * Prop types for SplitButton
@@ -28,11 +28,11 @@ interface SplitButtonProps extends ComponentPropsWithoutRef<'span'> {
     /**
      * Which size of button to render
      */
-    size?: 'sm' | 'md';
+    size?: Exclude<ButtonSize, 'lg'>;
     /**
      * Which variant of button to render
      */
-    variant?: 'primary' | 'secondary';
+    variant?: Extract<ButtonVariant, 'primary' | 'secondary'>;
 }
 /**
  * A component used to render a button with a primary action and a menu of additional options

package/_dist/components/cards/Card/Card.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
-import { GridGapOptions } from '@layouts/layout-types';
+import { GridGapOptions } from '@libs/types/layout-types';
 import './card.css';
 export type CardBackground = 'default' | 'mint-gradient' | 'sundown-gradient' | 'yellow-gradient' | 'transparent';
 /**

package/_dist/components/inputs/Checkbox/Checkbox.d.ts

@@ -1,5 +1,5 @@
 import React, { ChangeEvent, ComponentPropsWithoutRef, FocusEvent, ReactNode } from 'react';
-import { ValidationStatus } from '../input-types';
+import { ValidationStatus } from '@libs/types/input-types';
 import './checkbox.css';
 /**
  * Prop types for Checkbox

package/_dist/components/inputs/CheckboxFieldset/CheckboxFieldset.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
-import { ValidationStatus } from '../input-types';
+import { ValidationStatus } from '@libs/types/input-types';
 import '../CheckboxGroup/checkbox-group.css';
 /**
  * Prop types for CheckboxFieldset

package/_dist/components/inputs/CheckboxGroup/CheckboxGroup.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
-import { ValidationStatus } from '../input-types';
+import { ValidationStatus } from '@libs/types/input-types';
 import './checkbox-group.css';
 export type CheckboxOption = {
     checked?: boolean;

package/_dist/components/inputs/Combobox/Combobox.d.ts

@@ -1,5 +1,5 @@
 import React, { ChangeEvent, ComponentPropsWithoutRef, FocusEvent, ReactNode } from 'react';
-import { ValidationStatus } from '../input-types';
+import { ValidationStatus } from '@libs/types/input-types';
 import './combobox.css';
 type LabelStrings = {
     clearButton?: string;

package/_dist/components/inputs/FileUpload/FileUpload.d.ts

@@ -1,5 +1,5 @@
 import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
-import { ValidationStatus } from '../input-types';
+import { ValidationStatus } from '@libs/types/input-types';
 import './file-upload.css';
 type LabelStrings = {
     chooseFile: string;

package/_dist/components/inputs/RadioGroup/RadioGroup.d.ts

@@ -1,5 +1,5 @@
 import { ChangeEvent, ComponentPropsWithoutRef, FocusEvent, ReactNode } from 'react';
-import { ValidationStatus } from '../input-types';
+import { ValidationStatus } from '@libs/types/input-types';
 import './radio-group.css';
 export interface RadioOption {
     /**

package/_dist/components/inputs/Select/Select.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { PDSIcon } from '@components/icons/Icon/Icon';
-import { ValidationStatus } from '../input-types';
+import { ValidationStatus } from '@libs/types/input-types';
 import './select.css';
 type LabelStrings = {
     selectOptionText: string;

package/_dist/components/inputs/Select/select-sample-data.d.ts

@@ -0,0 +1,6 @@
+import { SelectOptionsType, SelectOptionType } from './Select';
+export declare const githubAccountOptions: SelectOptionType[];
+export declare const userRoleOptions: SelectOptionType[];
+export declare const validationExampleOptions: SelectOptionType[];
+export declare const sampleSelectOptionsWithGroups: SelectOptionsType;
+export declare const sampleSelectOptions: SelectOptionType[];

package/_dist/components/inputs/TextInput/TextInput.d.ts

@@ -1,7 +1,7 @@
 import React, { ChangeEvent, ComponentPropsWithoutRef, FocusEvent, ReactNode } from 'react';
-import { ValidationStatus } from '../input-types';
+import { ValidationStatus } from '@libs/types/input-types';
 import './text-input.css';
-type TranslationStringProps = {
+type LabelStrings = {
     clearButton: string;
     counterOverLimit?: string;
     searchShortcut: string;
@@ -114,7 +114,7 @@ export interface TextInputProps extends ComponentPropsWithoutRef<'div'> {
     /**
      * Translation strings for various labels or other visually-hidden text.
      */
-    translationStrings?: TranslationStringProps;
+    translationStrings?: LabelStrings;
     /**
      * Type of input field to use.
      */

package/_dist/components/inputs/Textarea/Textarea.d.ts

@@ -1,7 +1,7 @@
 import React, { ChangeEvent, ComponentPropsWithoutRef, FocusEvent, ReactNode } from 'react';
-import { ValidationStatus } from '../input-types';
+import { ValidationStatus } from '@libs/types/input-types';
 import './textarea.css';
-export type TranslationStringProps = {
+type LabelStrings = {
     clearButton: string;
     counterOverLimit?: string;
     searchShortcut: string;
@@ -90,7 +90,7 @@ export interface TextareaProps {
     /**
      * Translation strings for various labels or other visually-hidden text.
      */
-    translationStrings?: TranslationStringProps;
+    translationStrings?: LabelStrings;
     /**
      * Validation message for the textarea field based on the validation status.
      */
@@ -108,3 +108,4 @@ export interface TextareaProps {
  * Textarea UI component
  */
 export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export {};

package/_dist/components/navigation/ButtonNav/ButtonNav.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithRef } from 'react';
-import { NavigationItem } from '@components/navigation/navigation-types';
+import { NavigationItem } from '@libs/types/navigation-types';
 import './button-nav.css';
 export type ButtonNavItem = Omit<NavigationItem, 'links'>;
 /**

package/_dist/components/navigation/DashboardNav/DashboardNavItem.d.ts

@@ -1,7 +1,7 @@
 import { PDSIcon } from '@components/icons/Icon/Icon';
-import { NavigationItem } from '@components/navigation/navigation-types';
+import { NavigationItem } from '@libs/types/navigation-types';
 import './dashboard-nav.css';
-export type DashboardNavItemProps = NavigationItem & {
+export interface DashboardNavItemProps extends NavigationItem {
     /**
      * Icon to display next to the link content.
      */
@@ -17,7 +17,7 @@ export type DashboardNavItemProps = NavigationItem & {
         submenu: string;
         toggle: string;
     };
-};
+}
 /**
  * DashboardNavItem UI component
  */

package/_dist/components/navigation/DropdownMenu/DropdownMenu.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithoutRef, ReactElement } from 'react';
-import { NavigationItem } from '@components/navigation/navigation-types';
+import { NavigationItem } from '@libs/types/navigation-types';
 import './dropdown-menu.css';
 /**
  * Prop types for DropdownMenu

package/_dist/components/navigation/NavMenu/NavMenu.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithoutRef } from 'react';
-import { MenuItem } from '../navigation-types';
+import { NavMenuItem } from '@libs/types/navigation-types';
 import './nav-menu.css';
 /**
  * Prop types for NavMenu
@@ -20,7 +20,7 @@ interface NavMenuProps extends ComponentPropsWithoutRef<'nav'> {
     /**
      * Menu Items.
      */
-    menuItems?: MenuItem[];
+    menuItems?: NavMenuItem[];
     /**
      *  Mobile menu will be enabled when viewport is at or below this number in pixels.
      */

package/_dist/components/navigation/NavMenu/NavMenuDropdown.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithoutRef } from 'react';
-import { MenuItem } from '../navigation-types';
+import { NavMenuItem } from '@libs/types/navigation-types';
 /**
  * Prop types for NavMenuDropdown
  */
@@ -7,7 +7,7 @@ interface NavMenuDropdownProps extends ComponentPropsWithoutRef<'button'> {
     /**
      * Dropdown items.
      */
-    items?: MenuItem[];
+    items?: NavMenuItem[];
     /**
      * Dropdown label.
      */

package/_dist/components/navigation/SideNav/SideNav.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithoutRef, ReactElement } from 'react';
-import { NavigationItem } from '@components/navigation/navigation-types';
+import { NavigationItem } from '@libs/types/navigation-types';
 import './side-nav.css';
 /**
  * Prop types for SideNav

package/_dist/components/navigation/SideNavCompact/SideNavCompact.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithoutRef, ReactElement } from 'react';
-import { NavigationItem } from '@components/navigation/navigation-types';
+import { NavigationItem } from '@libs/types/navigation-types';
 import './side-nav-compact.css';
 export type SideNavCompactItem = NavigationItem & {
     /**

package/_dist/components/navigation/SideNavGlobal/SideNavGlobalItem.d.ts

@@ -1,7 +1,7 @@
 import { PDSIcon } from '@components/icons/Icon/Icon';
-import { NavigationItem } from '@components/navigation/navigation-types';
+import { NavigationItem } from '@libs/types/navigation-types';
 import './side-nav-global.css';
-export type SideNavGlobalItemProps = NavigationItem & {
+export interface SideNavGlobalItemProps extends NavigationItem {
     /**
      * Icon to display next to the link content.
      */
@@ -17,7 +17,7 @@ export type SideNavGlobalItemProps = NavigationItem & {
         submenu: string;
         toggle: string;
     };
-};
+}
 /**
  * SideNavGlobalItem UI component
  */

package/_dist/components/navigation/TabMenu/TabMenu.d.ts

@@ -1,10 +1,10 @@
 import { ComponentPropsWithoutRef } from 'react';
 import { PDSIcon } from '@components/icons/Icon/Icon';
-import { NavigationItem } from '@components/navigation/navigation-types';
+import { NavigationItem } from '@libs/types/navigation-types';
 import { TabMenuDropdownProps } from './TabMenuDropdown';
 import './tab-menu.css';
 type DropdownSettings = Omit<TabMenuDropdownProps, 'links'>;
-export type TabMenuItemProps = NavigationItem & {
+export interface TabMenuItemProps extends NavigationItem {
     /**
      * Settings for dropdown menu. Leave null if no dropdown is needed.
      */
@@ -18,7 +18,7 @@ export type TabMenuItemProps = NavigationItem & {
      * If true, the top-level menu will display the active child link instead of the parent link. If using this approach, it is recommended to also include the parent link as the first child link.
      */
     promoteActiveChildLink?: boolean;
-};
+}
 /**
  * Prop types for TabMenu.
  */

package/_dist/components/navigation/TabMenu/TabMenuDropdown.d.ts

@@ -1,6 +1,6 @@
-import { NavigationItem } from '@components/navigation/navigation-types';
+import { NavigationItem } from '@libs/types/navigation-types';
 import './tab-menu.css';
-export type TabMenuDropdownProps = {
+export interface TabMenuDropdownProps {
     /**
      * Button label for the dropdown trigger.
      */
@@ -25,7 +25,7 @@ export type TabMenuDropdownProps = {
      * Text to display when no results are found.
      */
     noResultsText?: string;
-};
+}
 /**
  * TabMenuDropdown UI component
  */

package/_dist/components/navigation/WorkspaceSelector/WorkspaceSelector.d.ts

@@ -20,14 +20,28 @@ export type WorkspaceSelectorItem = {
      * Is this the currently selected workspace?
      */
     isActive?: boolean;
+    /**
+     * This workspace has restricted access.
+     */
+    isRestricted?: boolean;
     /**
      * This user does not have access to this workspace.
      */
     isUnprivileged?: boolean;
+    /**
+     * Callback function to run when a restricted workspace is clicked.
+     * Only used when isRestricted is true.
+     */
+    onRestrictedSelection?: () => void;
     /**
      * Account plan tier.
      */
     planTier?: PlanTiers;
+    /**
+     * Visually-hidden label to indicate restricted access.
+     * @default 'Restricted'
+     */
+    restrictedLabel?: string;
     /**
      * Id of the workspace.
      */

package/_dist/components/navigation/navigation-utilities.d.ts

@@ -1,6 +1,6 @@
 import React, { ReactElement, ReactNode } from 'react';
 import { PDSIcon } from '@components/icons/Icon/Icon';
-import { NavigationItem } from '@components/navigation/navigation-types';
+import { NavigationItem } from '@libs/types/navigation-types';
 /**
  * Recursively searches through navigation items to find the first active link
  * @param items - Array of navigation items to search through

package/_dist/components/notifications/Banner/Banner.d.ts

@@ -1,11 +1,13 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { StatusType } from '@libs/types/custom-types';
 import './banner.css';
+type BannerType = Exclude<StatusType, 'success' | 'discovery'>;
 type Banner = {
     id: string;
     isDismissible?: boolean;
     message: string | ReactNode;
     onDismiss?: () => void;
-    type?: 'info' | 'warning' | 'critical';
+    type?: BannerType;
 };
 /**
  * Prop types for Banner

package/_dist/components/notifications/InlineMessage/InlineMessage.d.ts

@@ -1,9 +1,10 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { StatusType } from '@libs/types/custom-types';
 import './inline-message.css';
 /**
  * The type of message to display.
  */
-export type InlineMessageType = 'info' | 'success' | 'warning' | 'critical' | 'working';
+export type InlineMessageType = Exclude<StatusType, 'discovery'> | 'working';
 /**
  * Labels for each message type.
  */

package/_dist/components/notifications/SectionMessage/SectionMessage.d.ts

@@ -1,7 +1,8 @@
 import { ComponentPropsWithoutRef, MouseEvent, ReactNode } from 'react';
+import { StatusType } from '@libs/types/custom-types';
 import { Button } from '@components/buttons/Button/Button';
 import './section-message.css';
-export type SectionMessageType = 'info' | 'success' | 'warning' | 'critical' | 'discovery';
+export type SectionMessageType = StatusType;
 type TypeLabels = Record<SectionMessageType, string>;
 export interface SectionMessageProps extends ComponentPropsWithoutRef<'div'> {
     /**

package/_dist/components/panels/Panel/Panel.d.ts

@@ -1,7 +1,9 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
-import { GridGapOptions } from '@layouts/layout-types';
+import { StatusType } from '@libs/types/custom-types';
+import { GridGapOptions } from '@libs/types/layout-types';
 import './panel.css';
-type StatusType = 'info' | 'success' | 'warning' | 'critical' | 'neutral';
+type PanelStatusType = Exclude<StatusType, 'discovery'>;
+type TypeLabels = Record<PanelStatusType, string>;
 export interface PanelProps extends ComponentPropsWithoutRef<'div'> {
     /**
      * Panel content.
@@ -22,7 +24,12 @@ export interface PanelProps extends ComponentPropsWithoutRef<'div'> {
     /**
      * Status type for panel. Only renders if `hasStatusIndicator` is true.
      */
-    statusType?: StatusType;
+    statusType?: Exclude<StatusType, 'discovery'> | 'neutral';
+    /**
+     * Status type labels for screen readers. Provide translation strings if needed.
+     * Set to empty string ('') to create a visual-only indicator.
+     */
+    typeLabels?: TypeLabels;
     /**
      * Which variant of panel to render
      */
@@ -31,5 +38,5 @@ export interface PanelProps extends ComponentPropsWithoutRef<'div'> {
 /**
  * Panel UI component
  */
-export declare const Panel: ({ children, className, hasStatusIndicator, padding, statusType, variant, ...props }: PanelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Panel: ({ children, className, hasStatusIndicator, padding, statusType, typeLabels, variant, ...props }: PanelProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/_dist/components/progress-indicators/ProgressBar/ProgressBar.d.ts

@@ -1,7 +1,8 @@
 import { ComponentPropsWithoutRef } from 'react';
+import { StatusType } from '@libs/types/custom-types';
 import './progress-bar.css';
 interface ProgressBarBreakpoint {
-    colorType: 'neutral' | 'info' | 'success' | 'warning' | 'critical';
+    colorType: Exclude<StatusType, 'discovery'> | 'neutral';
     percentage: number;
 }
 interface ProgressBarProps extends ComponentPropsWithoutRef<'div'> {

package/_dist/css/component-css/pds-combobox-multiselect.css

@@ -1,2 +1,2 @@
 .pds-combobox-multi{position:relative}.pds-combobox-multi:disabled .pds-combobox-multi__input-wrapper{border-color:var(--pds-color-border-disabled)}.pds-combobox-multi__items-wrapper .pds-combobox-multi__selected-item:not(:last-child){display:none}.pds-combobox-multi__selected-item{align-items:center;background:var(--pds-color-neutral-200);border-radius:3px;color:var(--pds-color--neutral-500);display:inline-flex;font-size:.75rem;font-weight:400;gap:.41rem;justify-content:center;line-height:120%;padding:.25rem .512rem;text-wrap:nowrap}.pds-combobox-multi__selected-item:hover{background:var(--pds-color-neutral-300)}.pds-combobox-multi__selected-item:focus-visible{outline:none}.pds-combobox-multi__selected-item-text{margin-top:1px}.pds-combobox-multi__selected-item-remove{border-radius:.1875rem;color:var(--pds-color-fg-default-secondary);cursor:pointer;display:flex;height:16px;justify-content:center;width:14px}.pds-combobox-multi__selected-item-remove:hover{color:var(--pds-color-fg-default)}.pds-combobox-multi__selected-item--marked-for-deletion .pds-combobox-multi__selected-item-remove{outline:1px solid var(--pds-color-interactive-focus)}.pds-combobox-multi__input-wrapper{align-items:center;background-color:var(--pds-color-bg-default);border:1px solid var(--pds-color-border-input);border-radius:.1875rem;box-sizing:border-box;column-gap:.512rem;display:flex;gap:.512rem;height:var(--pds-spacing-input-height);justify-content:space-between;padding-inline:.64rem;position:relative;transition:background-color .2s ease-in-out 0s,border-color .2s ease-in-out 0s;width:100%}.pds-combobox-multi__input-wrapper:focus-within{border-color:var(--pds-color-interactive-focus);outline:none;transition:outline .2s ease-in-out 0s}.pds-combobox-multi__counter{display:inline-block;height:24px;position:relative}.pds-combobox-multi__counter-wrapper{display:flex;position:relative}.pds-combobox-multi__counter-layer{width:8px}.pds-combobox-multi__counter-item,.pds-combobox-multi__counter-layer{background:var(--pds-color-neutral-200);border-radius:3px;box-shadow:-3px 0 0 0 var(--pds-color-neutral-000);height:24px}.pds-combobox-multi__counter-item{align-items:center;color:var(--pds-color--neutral-500);display:flex;font-size:.75rem;font-weight:400;justify-content:center;width:20.5px}.pds-combobox-multi__trigger{align-items:center;background-color:transparent;border:none;border-radius:.1875rem;color:var(--pds-color-fg-default);display:flex;flex-grow:1;height:1.563rem;justify-content:flex-end;margin-inline-start:auto}.pds-combobox-multi__trigger:disabled{cursor:not-allowed}.pds-combobox-multi__trigger:focus-visible{outline:none}.pds-combobox-multi__trigger-icon{color:var(--pds-color-fg-default-secondary);pointer-events:none;transition:transform .2s ease-in-out 0s}.pds-combobox-multi__trigger[aria-expanded=true]
-	.pds-combobox-multi__trigger-icon{transform:rotate(180deg);transition:transform .2s ease-in-out 0s}.pds-combobox-multi__dropdown{background-color:var(--pds-color-dropdown-background);border-radius:.1875rem;box-shadow:var(--pds-elevation-overlay);box-sizing:border-box;display:flex;flex-direction:column;margin-block-start:.512rem;max-height:18rem;overflow-x:hidden;overflow-y:auto;position:absolute;width:100%}.pds-combobox-multi__dropdown-list{flex:1;margin-block-start:0;overflow-y:auto;padding:0}.pds-combobox-multi__dropdown-input-wrapper{align-items:center;background-color:var(--pds-color-dropdown-background);border-bottom:1px solid var(--pds-color-border-default);column-gap:.512rem;display:flex;gap:.64rem;padding:.64rem 1rem;position:sticky;top:0;z-index:1}.pds-combobox-multi__dropdown-input{background-color:transparent;border:none;caret-color:var(--pds-color-fg-default);color:var(--pds-color-fg-default);flex-grow:1;line-height:1;padding-inline:0;width:100%}.pds-combobox-multi__dropdown-input:focus{outline:none}.pds-combobox-multi__dropdown-input::placeholder{color:var(--pds-color-fg-default-secondary)}.pds-combobox-multi__dropdown-item{padding:.64rem 1rem}.pds-combobox-multi__dropdown-item-label{align-items:center;display:flex;gap:6px;justify-content:space-between;line-height:normal;width:100%}.pds-combobox-multi__dropdown-item-icon{color:var(--pds-color-status-success-foreground)}.pds-combobox-multi__loading,.pds-combobox-multi__no-results{color:var(--pds-color-fg-default);font-size:1rem;padding:1rem}
+	.pds-combobox-multi__trigger-icon{transform:rotate(180deg);transition:transform .2s ease-in-out 0s}.pds-combobox-multi__dropdown{background-color:var(--pds-color-dropdown-background);border-radius:.1875rem;box-shadow:var(--pds-elevation-overlay);box-sizing:border-box;display:flex;flex-direction:column;margin-block-start:.512rem;max-height:18rem;overflow-x:hidden;overflow-y:auto;position:absolute;width:100%}.pds-combobox-multi__dropdown:focus-visible{outline:none}.pds-combobox-multi__dropdown-list{flex:1;margin-block-start:0;overflow-y:auto;padding:0}.pds-combobox-multi__dropdown-input-wrapper{align-items:center;background-color:var(--pds-color-dropdown-background);border-bottom:1px solid var(--pds-color-border-default);column-gap:.512rem;display:flex;gap:.64rem;padding:.64rem 1rem;position:sticky;top:0;z-index:1}.pds-combobox-multi__dropdown-input{background-color:transparent;border:none;caret-color:var(--pds-color-fg-default);color:var(--pds-color-fg-default);flex-grow:1;line-height:1;padding-inline:0;width:100%}.pds-combobox-multi__dropdown-input:focus{outline:none}.pds-combobox-multi__dropdown-input::placeholder{color:var(--pds-color-fg-default-secondary)}.pds-combobox-multi__dropdown-item{padding:.64rem 1rem}.pds-combobox-multi__dropdown-item-label{align-items:center;display:flex;gap:6px;justify-content:space-between;line-height:normal;width:100%}.pds-combobox-multi__dropdown-item-icon{color:var(--pds-color-status-success-foreground)}.pds-combobox-multi__loading,.pds-combobox-multi__no-results{color:var(--pds-color-fg-default);font-size:1rem;padding:1rem}

package/_dist/css/component-css/pds-combobox.css

@@ -1 +1 @@
-.pds-combobox{position:relative}.pds-combobox__input-wrapper{align-items:center;background-color:var(--pds-color-bg-default);border:1px solid var(--pds-color-border-input);border-radius:.1875rem;box-sizing:border-box;display:flex;gap:.64rem;column-gap:.512rem;height:var(--pds-spacing-input-height);justify-content:space-between;padding-inline:.64rem;position:relative;transition:background-color .2s ease-in-out 0s,border-color .2s ease-in-out 0s;width:100%}.pds-combobox__input-wrapper:focus-within{border-color:var(--pds-color-interactive-focus);outline:none;transition:outline .2s ease-in-out 0s}.pds-combobox__input{background-color:transparent;border:none;caret-color:var(--pds-color-fg-default);color:var(--pds-color-fg-default);flex-grow:1;line-height:1;padding-inline:0;width:100%}.pds-combobox__input:focus{outline:none}.pds-combobox__input::placeholder{color:var(--pds-color-fg-default-secondary)}.pds-combobox__trigger{align-items:center;background-color:transparent;border:none;border-radius:.1875rem;color:var(--pds-color-fg-default);display:flex;height:1.563rem}.pds-combobox__trigger:focus-visible{outline:1px solid var(--pds-color-interactive-focus)}.pds-combobox__trigger-icon{color:var(--pds-color-fg-default-secondary);pointer-events:none;transition:transform .2s ease-in-out 0s}.pds-combobox__trigger[aria-expanded=true] .pds-combobox__trigger-icon{transform:rotate(180deg);transition:transform .2s ease-in-out 0s}.pds-combobox__dropdown{background-color:var(--pds-color-dropdown-background);border-radius:.1875rem;box-shadow:var(--pds-elevation-overlay);box-sizing:border-box;margin-block-start:.512rem;max-height:18rem;overflow-x:hidden;overflow-y:auto;position:absolute;width:100%}.pds-combobox__options{display:flex;flex-direction:column;list-style:none;margin:0;padding:0;row-gap:.0625rem}.pds-combobox__loading,.pds-combobox__no-results{color:var(--pds-color-fg-default);font-size:1rem;padding:1rem}
+.pds-combobox{position:relative}.pds-combobox__input-wrapper{align-items:center;background-color:var(--pds-color-bg-default);border:1px solid var(--pds-color-border-input);border-radius:.1875rem;box-sizing:border-box;display:flex;gap:.64rem;column-gap:.512rem;height:var(--pds-spacing-input-height);justify-content:space-between;padding-inline:.64rem;position:relative;transition:background-color .2s ease-in-out 0s,border-color .2s ease-in-out 0s;width:100%}.pds-combobox__input-wrapper:focus-within{border-color:var(--pds-color-interactive-focus);outline:none;transition:outline .2s ease-in-out 0s}.pds-combobox__input{background-color:transparent;border:none;caret-color:var(--pds-color-fg-default);color:var(--pds-color-fg-default);flex-grow:1;line-height:1;padding-inline:0;width:100%}.pds-combobox__input:focus{outline:none}.pds-combobox__input::placeholder{color:var(--pds-color-fg-default-secondary)}.pds-combobox__trigger{align-items:center;background-color:transparent;border:none;border-radius:.1875rem;color:var(--pds-color-fg-default);display:flex;height:1.563rem}.pds-combobox__trigger:focus-visible{outline:1px solid var(--pds-color-interactive-focus)}.pds-combobox__trigger-icon{color:var(--pds-color-fg-default-secondary);pointer-events:none;transition:transform .2s ease-in-out 0s}.pds-combobox__trigger[aria-expanded=true] .pds-combobox__trigger-icon{transform:rotate(180deg);transition:transform .2s ease-in-out 0s}.pds-combobox__dropdown{background-color:var(--pds-color-dropdown-background);border-radius:.1875rem;box-shadow:var(--pds-elevation-overlay);box-sizing:border-box;margin-block-start:.512rem;max-height:18rem;overflow-x:hidden;overflow-y:auto;position:absolute;width:100%}.pds-combobox__dropdown:focus-visible{outline:none}.pds-combobox__options{display:flex;flex-direction:column;list-style:none;margin:0;padding:0;row-gap:.0625rem}.pds-combobox__loading,.pds-combobox__no-results{color:var(--pds-color-fg-default);font-size:1rem;padding:1rem}