@dsh-workbench/shared 0.2.10 → 0.2.12

package/dist/api/dsh-client.d.ts

@@ -93,10 +93,13 @@ export interface DshLayoutPanels {
 export interface DshShortcutCatalog {
     readonly catalog: unknown;
 }
+export interface DshSessionStartOptions {
+    readonly agentPreset?: string;
+}
 export interface DshUiWorkspace {
     openWorkspace(workspaceId: string): Promise<unknown>;
     openSession(sessionId: string): void;
-    startSession(workspaceId: string): void;
+    startSession(workspaceId: string, options?: DshSessionStartOptions): void;
     pickDirectory(): Promise<string | null>;
 }
 export interface DshWorkspaceWritten {

package/dist/components/Activity.css

@@ -8,6 +8,7 @@
 }
 
 .wb-activityBlock:first-child {
+  padding-top: 0;
   border-top: none;
 }
 

package/dist/components/Card.css

@@ -12,9 +12,9 @@
   display: flex;
   flex-direction: column;
   gap: var(--wb-len-12);
-  padding: var(--wb-len-12);
+  padding: var(--wb-len-12) var(--wb-card-gutter);
+  font-size: var(--dsw-font-xxs-12-font-size);
 }
-.wb-cardBody > :not([data-wb-bleed]) {
-  padding-left: var(--wb-len-8);
-  padding-right: var(--wb-len-8);
+.wb-cardBleed {
+  margin-inline: calc(-1 * var(--wb-card-gutter));
 }

package/dist/components/CardAnchor.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from '../lib/react.js';
+export declare function cardIdOf(unit: string | null): string | undefined;
+export interface CardAnchorProps {
+    readonly unit: string;
+    readonly children?: ReactNode | undefined;
+}
+export declare function CardAnchor({ unit, children }: CardAnchorProps): JSX.Element;

package/dist/components/CardAnchor.js

@@ -0,0 +1,8 @@
+import { h } from '../lib/react.js';
+import styles from './CardAnchor.module.css';
+export function cardIdOf(unit) {
+    return unit === null || unit === '' ? undefined : `wb-card-${unit}`;
+}
+export function CardAnchor({ unit, children }) {
+    return (h("div", { id: cardIdOf(unit), className: styles.anchor }, children));
+}

package/dist/components/CardAnchor.module.css

@@ -0,0 +1,3 @@
+.anchor {
+  display: contents;
+}

package/dist/components/CardHead.css

@@ -4,7 +4,7 @@
   align-items: center;
   gap: var(--wb-len-6);
   flex: none;
-  padding: var(--wb-len-8) var(--wb-len-10) var(--wb-len-8) var(--wb-len-20);
+  padding: var(--wb-len-8) var(--wb-len-10) var(--wb-len-8) var(--wb-card-gutter);
   border-bottom: 0.5px solid var(--dsw-alias-border-l2);
   background: var(--dsw-alias-bg-layer-2);
 }
@@ -86,7 +86,3 @@
 .wb-cardGear:hover:not(:disabled) {
   color: var(--dsw-alias-label-primary);
 }
-
-.wb-cardRefresh.wb-spinning svg {
-  animation: wb-spin var(--wb-dur-0-9) linear infinite;
-}

package/dist/components/ChoiceGroup.css

@@ -62,7 +62,7 @@
 }
 
 .wb-checkbox:disabled + .wb-checkboxBox {
-  opacity: 0.5;
+  cursor: default;
 }
 
 .wb-checkbox:focus-visible + .wb-checkboxBox {
@@ -75,6 +75,16 @@
   background: var(--dsw-alias-interactive-bg-hover);
 }
 
+.wb-choiceOption:has(:disabled) {
+  cursor: default;
+  opacity: 0.5;
+}
+
+.wb-choiceOption:has(:disabled),
+.wb-choiceOption:has(:disabled):hover {
+  background: transparent;
+}
+
 .wb-choiceLabel {
   flex: 1;
   min-width: 0;
@@ -115,7 +125,6 @@
 
 .wb-radio:disabled {
   cursor: default;
-  opacity: 0.5;
 }
 
 .wb-radio:focus-visible {

package/dist/components/Field.css

@@ -14,3 +14,7 @@
   line-height: var(--wb-line-18);
   color: var(--dsw-alias-label-tertiary);
 }
+
+.wb-field:has(:disabled) .wb-fieldLabel {
+  opacity: 0.4;
+}

package/dist/components/MockStrip.css

@@ -36,4 +36,14 @@
   border-color: transparent;
   background: var(--dsw-alias-brand-primary);
   color: var(--dsw-alias-label-primary-foreground);
-}
+}
+
+.wb-mockChipOn:hover {
+  border-color: transparent;
+  background: var(--dsw-alias-brand-primary);
+  color: var(--dsw-alias-label-primary-foreground);
+}
+
+.wb-panelBody.wb-panelMany .wb-mockStrip {
+  display: none;
+}

package/dist/components/Note.css

@@ -1,14 +1,14 @@
 
 .wb-note {
   margin: 0;
-  font-size: var(--dsw-font-xxxs-11-font-size);
-  line-height: var(--wb-line-16);
+  font-size: var(--dsw-font-xxs-12-font-size);
+  line-height: var(--wb-line-18);
   color: var(--dsw-alias-label-tertiary);
 }
 .wb-problem {
   margin: 0;
-  font-size: var(--dsw-font-xxxs-11-font-size);
-  line-height: var(--wb-line-16);
+  font-size: var(--dsw-font-xxs-12-font-size);
+  line-height: var(--wb-line-18);
   color: var(--dsw-alias-state-error-primary);
   overflow-wrap: anywhere;
 }

package/dist/components/SelectField.css

@@ -0,0 +1,156 @@
+:where(.wb-selectTrigger) {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--wb-len-8);
+  width: 100%;
+  min-height: var(--wb-len-32);
+  padding: var(--wb-len-6) var(--wb-len-12);
+  border: 0.5px solid var(--dsw-alias-border-l4);
+  border-radius: var(--dsw-radius-md);
+  background: var(--dsw-alias-bg-layer-3);
+  font: var(--dsw-font-xs-13);
+  color: var(--dsw-alias-label-primary);
+  text-align: left;
+  cursor: pointer;
+}
+
+.wb-selectTrigger:focus-visible {
+  outline: none;
+  border-color: var(--dsw-alias-state-business-primary);
+  box-shadow: inset 0 0 0 0.5px var(--dsw-alias-state-business-primary);
+}
+
+.wb-selectTrigger:disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+
+.wb-selectLoading:disabled {
+  cursor: default;
+  opacity: 1;
+}
+
+.wb-selectGhost {
+  gap: var(--wb-gap-xs);
+  min-height: 0;
+  height: var(--wb-len-34);
+  padding: 0 var(--wb-len-8);
+  border: none;
+  background: transparent;
+  font-size: var(--wb-font-row);
+}
+
+.wb-selectGhost:hover:not(:disabled) {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.wb-selectGhost:focus-visible {
+  outline: var(--dsw-focus-ring-width) solid
+    var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));
+  outline-offset: -2px;
+  border-color: transparent;
+  box-shadow: none;
+}
+
+.wb-selectAnchor {
+  display: block;
+  width: 100%;
+}
+
+.wb-selectIcon {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--wb-len-16);
+  height: var(--wb-len-20);
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.wb-selectValue {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: baseline;
+  gap: var(--wb-len-6);
+  line-height: var(--wb-line-20);
+  overflow: hidden;
+}
+
+.wb-selectPlaceholder {
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.wb-selectChevron {
+  flex: none;
+  display: inline-flex;
+  color: var(--dsw-alias-label-caption);
+}
+
+.wb-selectMenu {
+  min-width: var(--wb-len-240);
+  max-width: var(--wb-len-360);
+  max-height: min(var(--wb-len-320), calc(100vh - var(--wb-len-24)));
+}
+
+:where(.wb-selectSearch) {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--wb-len-8);
+  width: 100%;
+  min-height: var(--wb-len-32);
+  padding: var(--wb-len-6) var(--wb-len-12);
+  border: 0.5px solid var(--dsw-alias-border-l4);
+  border-radius: var(--dsw-radius-md);
+  background: var(--dsw-alias-bg-layer-3);
+}
+
+.wb-selectSearch:focus-within {
+  border-color: var(--dsw-alias-state-business-primary);
+  box-shadow: inset 0 0 0 0.5px var(--dsw-alias-state-business-primary);
+}
+
+.wb-selectSearch.wb-selectGhost {
+  gap: var(--wb-gap-xs);
+  min-height: 0;
+  height: var(--wb-len-34);
+  padding: 0 var(--wb-len-8);
+  border: 0.5px solid var(--dsw-alias-border-l3);
+  background: var(--dsw-alias-bg-layer-2);
+}
+
+.wb-selectSearch.wb-selectGhost:focus-within {
+  border-color: var(--dsw-alias-state-business-primary);
+  box-shadow: none;
+}
+
+.wb-selectSearchIcon {
+  flex: none;
+  display: inline-flex;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.wb-textField.wb-selectSearchInput {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+}
+
+.wb-textField.wb-selectSearchInput:focus {
+  box-shadow: none;
+}
+
+.wb-selectFallback {
+  width: 100%;
+}
+
+.wb-selectHint {
+  font-size: var(--dsw-font-xxs-12-font-size);
+  line-height: var(--wb-line-18);
+  color: var(--dsw-alias-label-tertiary);
+}

package/dist/components/SelectField.d.ts

@@ -0,0 +1,57 @@
+import type { ReactNode } from 'react';
+import type { MenuEntry } from '@deepseek-ai/dsh-client-ui-primitives';
+import './SelectField.css';
+export interface SelectFieldOption {
+    readonly value: string;
+    readonly label: ReactNode;
+    readonly searchText?: string | undefined;
+    readonly icon?: ReactNode | undefined;
+    readonly group?: string | undefined;
+    readonly disabled?: boolean | undefined;
+}
+export interface SelectFieldFallback {
+    readonly value: string;
+    readonly onChange: (next: string) => void;
+}
+export interface SelectFieldFooter {
+    readonly label: ReactNode;
+    readonly icon?: ReactNode | undefined;
+}
+export interface SelectFieldProps {
+    readonly value: string;
+    readonly options: readonly SelectFieldOption[];
+    readonly onChange: (value: string) => void;
+    readonly label?: ReactNode | undefined;
+    readonly hint?: ReactNode | undefined;
+    readonly icon?: ReactNode | undefined;
+    readonly renderValue?: ((current: SelectFieldOption | undefined) => ReactNode) | undefined;
+    readonly placeholder?: ReactNode | undefined;
+    readonly search?: boolean | undefined;
+    readonly searchLabel?: string | undefined;
+    readonly searchPlaceholder?: string | undefined;
+    readonly filter?: ((option: SelectFieldOption, query: string) => boolean) | undefined;
+    readonly emptyText?: string | ((query: string) => string) | undefined;
+    readonly open?: boolean | undefined;
+    readonly onOpenChange?: ((open: boolean) => void) | undefined;
+    readonly disabled?: boolean | undefined;
+    readonly loading?: boolean | undefined;
+    readonly loadingText?: string | undefined;
+    readonly fallback?: SelectFieldFallback | undefined;
+    readonly footer?: SelectFieldFooter | undefined;
+    readonly onFooter?: (() => void) | undefined;
+    readonly selection?: 'check' | 'fill' | undefined;
+    readonly variant?: 'ghost' | 'boxed' | undefined;
+    readonly ariaLabel?: string | undefined;
+    readonly title?: string | undefined;
+    readonly id?: string | undefined;
+    readonly name?: string | undefined;
+    readonly className?: string | undefined;
+    readonly menuClassName?: string | undefined;
+}
+export declare function searchTextOf(option: SelectFieldOption): string;
+export declare function defaultSelectFilter(option: SelectFieldOption, query: string): boolean;
+export declare function filterSelectOptions(options: readonly SelectFieldOption[], query: string, filter?: (option: SelectFieldOption, query: string) => boolean): readonly SelectFieldOption[];
+export declare function selectCursorValue(shown: readonly SelectFieldOption[], cursor: number | null): string | null;
+export declare function stepSelectCursor(shown: readonly SelectFieldOption[], cursor: number | null, step: 1 | -1): number | null;
+export declare function selectEntries(shown: readonly SelectFieldOption[], emptyText: string | undefined): readonly MenuEntry[];
+export declare function SelectField(props: SelectFieldProps): ReactNode;

package/dist/components/SelectField.js

@@ -0,0 +1,236 @@
+import { h, useEffect, useMemo, useRef, useState } from '../lib/react.js';
+import { IconChevronDownOutlineRegular, IconSearchOutlineRegular, Menu, StateDot, TextShimmer, } from '@deepseek-ai/dsh-client-ui-primitives';
+import { Field } from './Field.js';
+import { TextField } from './TextField.js';
+import './SelectField.css';
+const FOOTER_ID = '__wb-select-footer__';
+const EMPTY_ID = '__wb-select-empty__';
+function mergeClass(...parts) {
+    return parts.filter((one) => one !== undefined && one !== '').join(' ');
+}
+function itemOf(option) {
+    return {
+        id: option.value,
+        label: option.label,
+        ...(option.icon === undefined ? {} : { icon: option.icon }),
+        ...(option.disabled === true ? { disabled: true } : {}),
+    };
+}
+function triggerNode(args) {
+    return (h("button", { type: "button", id: args.id, className: args.className, disabled: args.disabled, "aria-haspopup": "listbox", "aria-expanded": args.open, "aria-label": args.ariaLabel, title: args.title, onClick: args.onOpen },
+        args.icon === undefined ? null : h("span", { className: "wb-selectIcon" }, args.icon),
+        h("span", { className: "wb-selectValue" }, args.value),
+        h("span", { className: "wb-selectChevron" },
+            h(IconChevronDownOutlineRegular, { size: 14 }))));
+}
+function loadingNode(args) {
+    return (h("button", { type: "button", id: args.id, className: `${args.className} wb-selectLoading`, disabled: true, "aria-busy": "true", "aria-label": args.ariaLabel, title: args.loadingText },
+        h("span", { className: "wb-selectValue" },
+            h(TextShimmer, { active: true }, args.loadingText ?? '…')),
+        h("span", { className: "wb-selectChevron" },
+            h(StateDot, { state: "ongoing", size: 14 }))));
+}
+function searchNode(args) {
+    return (h("span", { ref: args.boxRef, className: args.className },
+        h("span", { className: "wb-selectSearchIcon" },
+            h(IconSearchOutlineRegular, { size: 14 })),
+        h(TextField, { id: args.id, name: args.name, className: "wb-selectSearchInput", "aria-label": args.ariaLabel, placeholder: args.placeholder, value: args.query, onChange: (event) => args.onQuery(event.currentTarget.value), onKeyDown: (event) => {
+                if (event.nativeEvent.isComposing)
+                    return;
+                args.onKey(event);
+            } })));
+}
+function menuNode(args) {
+    return (h(Menu, { open: args.open, portal: true, className: "wb-selectAnchor", listClassName: args.listClassName, anchor: args.anchor, align: "start", side: "bottom", selection: args.selection, selectedId: args.selectedId, items: args.items, footer: args.footer, onSelect: args.onPick, onClose: args.onCancel }));
+}
+function framed(label, hint, className, control) {
+    const inner = label === undefined
+        ? hint === undefined
+            ? control
+            : (h("span", { className: "wb-select" },
+                control,
+                h("span", { className: "wb-selectHint" }, hint)))
+        : (h(Field, { label: label, hint: hint }, control));
+    return className === undefined ? inner : h("div", { className: className }, inner);
+}
+export function searchTextOf(option) {
+    if (option.searchText !== undefined)
+        return option.searchText;
+    return typeof option.label === 'string' ? option.label : '';
+}
+export function defaultSelectFilter(option, query) {
+    const needle = query.trim().toLowerCase();
+    if (needle === '')
+        return true;
+    return searchTextOf(option).toLowerCase().includes(needle);
+}
+export function filterSelectOptions(options, query, filter = defaultSelectFilter) {
+    return options.filter((option) => filter(option, query));
+}
+export function selectCursorValue(shown, cursor) {
+    if (cursor === null || shown.length === 0)
+        return null;
+    return shown[Math.min(cursor, shown.length - 1)]?.value ?? null;
+}
+export function stepSelectCursor(shown, cursor, step) {
+    if (shown.length === 0)
+        return null;
+    if (cursor === null)
+        return step === 1 ? 0 : shown.length - 1;
+    return (cursor + step + shown.length) % shown.length;
+}
+export function selectEntries(shown, emptyText) {
+    if (shown.length === 0) {
+        return emptyText === undefined ? [] : [{ type: 'label', id: EMPTY_ID, text: emptyText }];
+    }
+    const out = [];
+    let group = null;
+    for (const option of shown) {
+        if (option.group !== undefined && option.group !== group) {
+            out.push({ type: 'label', id: `__wb-select-group-${String(out.length)}`, text: option.group });
+            group = option.group;
+        }
+        out.push(itemOf(option));
+    }
+    return out;
+}
+function useSelectState(props) {
+    const { options, filter = defaultSelectFilter, emptyText, open: openProp, onOpenChange } = props;
+    const [openState, setOpenState] = useState(false);
+    const [query, setQuery] = useState('');
+    const [cursor, setCursor] = useState(null);
+    const boxRef = useRef(null);
+    const triggerRef = useRef(null);
+    const wasOpenRef = useRef(false);
+    const pickedRef = useRef(false);
+    const closedByUsRef = useRef(false);
+    const open = openProp ?? openState;
+    const setOpen = (next) => {
+        if (openProp === undefined)
+            setOpenState(next);
+        onOpenChange?.(next);
+    };
+    useEffect(() => {
+        if (!open || props.search === false)
+            return;
+        boxRef.current?.querySelector('input')?.focus();
+    }, [open, props.search]);
+    useEffect(() => {
+        if (open) {
+            wasOpenRef.current = true;
+            return;
+        }
+        if (!wasOpenRef.current)
+            return;
+        wasOpenRef.current = false;
+        const closedByUs = closedByUsRef.current;
+        const picked = pickedRef.current;
+        closedByUsRef.current = false;
+        pickedRef.current = false;
+        if (!closedByUs || picked)
+            return;
+        triggerRef.current?.focus();
+    }, [open]);
+    const shown = useMemo(() => filterSelectOptions(options, query, filter), [options, query, filter]);
+    const close = (picked) => {
+        closedByUsRef.current = true;
+        pickedRef.current = picked;
+        setOpen(false);
+        setQuery('');
+        setCursor(null);
+    };
+    return {
+        open,
+        setOpen,
+        query,
+        cursor,
+        setCursor,
+        setQuery,
+        shown,
+        close,
+        boxRef,
+        triggerRef,
+        empty: typeof emptyText === 'function' ? emptyText(query) : emptyText,
+    };
+}
+export function SelectField(props) {
+    const { value, options, onChange, label, hint, icon, renderValue, placeholder, search = true, searchLabel, searchPlaceholder, footer, onFooter, disabled = false, loading = false, loadingText, fallback, selection = 'fill', variant = 'boxed', ariaLabel, title, id, name, className, menuClassName, } = props;
+    const state = useSelectState(props);
+    const current = options.find((option) => option.value === value);
+    const variantClass = variant === 'ghost' ? 'wb-selectGhost' : undefined;
+    const triggerClass = mergeClass('wb-selectTrigger', variantClass);
+    if (loading) {
+        return framed(label, hint, className, loadingNode({ id, className: triggerClass, ariaLabel, loadingText }));
+    }
+    if (fallback !== undefined && options.length === 0) {
+        return framed(label, hint, className, h(TextField, { id: id, name: name, className: "wb-selectFallback", "aria-label": ariaLabel, value: fallback.value, onChange: (event) => fallback.onChange(event.currentTarget.value) }));
+    }
+    const trigger = triggerNode({
+        id,
+        className: triggerClass,
+        disabled,
+        open: state.open,
+        ariaLabel,
+        title,
+        icon,
+        value: current === undefined ? (h("span", { className: "wb-selectPlaceholder" }, placeholder ?? '—')) : renderValue === undefined ? (current.label) : (renderValue(current)),
+        onOpen: () => state.setOpen(true),
+    });
+    const anchor = state.open && search
+        ? searchNode({
+            boxRef: state.boxRef,
+            className: mergeClass('wb-selectSearch', variantClass),
+            id,
+            name,
+            ariaLabel: searchLabel,
+            placeholder: searchPlaceholder,
+            query: state.query,
+            onQuery: (next) => {
+                state.setQuery(next);
+                state.setCursor(null);
+            },
+            onKey: (event) => {
+                if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+                    event.stopPropagation();
+                    event.preventDefault();
+                    state.setCursor((at) => stepSelectCursor(state.shown, at, event.key === 'ArrowDown' ? 1 : -1));
+                    return;
+                }
+                if (event.key !== 'Enter')
+                    return;
+                event.stopPropagation();
+                const pick = state.shown[Math.min(state.cursor ?? 0, state.shown.length - 1)];
+                if (pick === undefined)
+                    return;
+                state.close(true);
+                onChange(pick.value);
+            },
+        })
+        : trigger;
+    return framed(label, hint, className, menuNode({
+        open: state.open,
+        listClassName: mergeClass('wb-selectMenu', menuClassName),
+        anchor,
+        selection,
+        selectedId: selectCursorValue(state.shown, state.cursor) ?? undefined,
+        items: selectEntries(state.shown, state.empty),
+        footer: footer === undefined
+            ? undefined
+            : [
+                {
+                    id: FOOTER_ID,
+                    label: footer.label,
+                    ...(footer.icon === undefined ? {} : { icon: footer.icon }),
+                },
+            ],
+        onPick: (picked) => {
+            state.close(true);
+            if (picked === FOOTER_ID) {
+                onFooter?.();
+                return;
+            }
+            onChange(picked);
+        },
+        onCancel: () => state.close(false),
+    }));
+}

package/dist/components/SettingsSection.css

@@ -3,7 +3,7 @@ section.wb-settings {
   display: flex;
   flex-direction: column;
   gap: var(--wb-len-12);
-  padding: 0;
+  padding: var(--wb-len-12) var(--wb-len-16);
   border: 0;
   border-radius: var(--dsw-radius-md);
   background: var(--dsw-alias-settings-card-fill);
@@ -19,7 +19,7 @@ section.wb-settings {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: var(--dsw-font-base-16-font-size);
+  font-size: var(--dsw-font-s-strong-14-font-size);
   line-height: var(--wb-line-24);
   font-weight: 500;
   color: var(--dsw-alias-label-primary);

package/dist/components/StateDot.d.ts

@@ -0,0 +1,5 @@
+export type DotState = 'ongoing' | 'warning' | 'done' | 'idle' | string;
+export declare function StateDot({ state, size }: {
+    state: DotState;
+    size: number;
+}): JSX.Element;

package/dist/components/StateDot.js

@@ -0,0 +1,10 @@
+import { h } from '../lib/react.js';
+export function StateDot({ state, size }) {
+    if (state === 'ongoing') {
+        return (h("svg", { className: "wb-loading", viewBox: "0 0 24 24", width: size, height: size, "aria-hidden": "true", style: { display: 'block' } },
+            h("g", { className: "wb-loadingMotion" },
+                h("circle", { className: "wb-loadingTrack", cx: 12, cy: 12, r: 9.5 }),
+                h("circle", { className: "wb-loadingArc", cx: 12, cy: 12, r: 9.5 }))));
+    }
+    return (h("span", { className: "wb-stateDot", "data-state": state, style: { width: size, height: size }, "aria-hidden": "true" }));
+}

package/dist/components/TextField.css

@@ -13,6 +13,11 @@
   box-shadow: inset 0 0 0 0.5px var(--dsw-alias-state-business-primary);
 }
 
+.wb-textField:disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+
 .wb-textField[aria-invalid='true'] {
   border-color: var(--dsw-alias-state-error-primary);
 }

package/dist/components/icons.d.ts

@@ -6,4 +6,5 @@ export declare function IconBrandMark({ size }: IconProps): JSX.Element;
 export declare function IconOpencli({ size }: IconProps): JSX.Element;
 export declare function IconNpm({ size }: IconProps): JSX.Element;
 export declare function IconModules({ size }: IconProps): JSX.Element;
+export declare function IconModuleMark({ size }: IconProps): JSX.Element;
 export declare function IconPanelScreen({ size }: IconProps): JSX.Element;