@orangelogic/design-system 2.19.0-ci.5

package/library/packages/molecules/src/graph-view/react/utils.d.ts

@@ -0,0 +1,58 @@
+import { Edge as FlowEdge } from '@xyflow/react';
+import { FlowEdgeData, MappedEdge, MappedNode, Node as NodeData, NodeHierarchyDataMap, Workflow } from '../../../../types/src/graph-view';
+
+export declare const mapNodeData: (node: NodeData) => MappedNode;
+export declare const mapEdgeData: (edge: FlowEdgeData, nodes: NodeData[]) => MappedEdge;
+export declare const mapData: (data: Workflow, initialSelectedNode?: string[]) => {
+    edges: MappedEdge[];
+    nodes: {
+        selected: boolean | undefined;
+        id: string;
+        position: import('@xyflow/react').XYPosition;
+        data: import('../../../../types/src/graph-view').FlowNodeData;
+        sourcePosition?: import('@xyflow/react').Position;
+        targetPosition?: import('@xyflow/react').Position;
+        hidden?: boolean;
+        dragging?: boolean;
+        draggable?: boolean;
+        selectable?: boolean;
+        connectable?: boolean;
+        deletable?: boolean;
+        dragHandle?: string;
+        width?: number;
+        height?: number;
+        initialWidth?: number;
+        initialHeight?: number;
+        parentId?: string;
+        zIndex?: number;
+        extent?: "parent" | import('@xyflow/react').CoordinateExtent;
+        expandParent?: boolean;
+        ariaLabel?: string;
+        origin?: import('@xyflow/react').NodeOrigin;
+        handles?: import('@xyflow/system').NodeHandle[];
+        measured?: {
+            width?: number;
+            height?: number;
+        };
+        type?: string | undefined;
+        style?: import('react').CSSProperties;
+        className?: string;
+        resizing?: boolean;
+        focusable?: boolean;
+        ariaRole?: import('react').AriaRole;
+        domAttributes?: Omit<import('react').HTMLAttributes<HTMLDivElement>, "id" | "style" | "className" | "draggable" | "role" | "aria-label" | keyof import('react').DOMAttributes<HTMLDivElement>>;
+    }[];
+};
+export declare const isDecorationEdge: (edge: FlowEdge) => boolean;
+export declare const isSameEdges: (edge1: FlowEdgeData, edge2: FlowEdgeData) => boolean;
+export declare const getLayoutedElements: (nodes: MappedNode[], edges: FlowEdge[]) => Promise<{
+    edges: MappedEdge[];
+    hierarchyData: NodeHierarchyDataMap;
+    nodes: MappedNode[];
+}>;
+export declare const getOriginalEdgeData: (edges: FlowEdge[]) => {
+    fromNode: string;
+    fromTransition: string | undefined;
+    toNode: string;
+}[];
+export declare const isStartWithVowel: (text: string) => boolean;

package/library/packages/molecules/src/icon-picker/icon-picker.d.ts

@@ -0,0 +1,80 @@
+import { default as CxDivider } from '../../../atoms/src/components/divider/divider.ts';
+import { default as CxIcon } from '../../../atoms/src/components/icon/icon.ts';
+import { default as CxOption } from '../../../atoms/src/components/option/option.ts';
+import { default as CxSelect } from '../../../atoms/src/components/select/select.ts';
+import { default as CxSpace } from '../../../atoms/src/components/space/space.ts';
+import { default as CortexElement } from '../../../base/src/cortex-element.ts';
+import { CxAssetPickerSelectEvent } from '../../../events/src/events.ts';
+import { default as CxAssetPicker } from '../asset-picker/asset-picker.ts';
+import { Asset, AssetType } from '../../../types/src/content-builder';
+import { CSSResultGroup, nothing } from 'lit';
+
+type IconData = {
+    name: string;
+    searchString: string;
+    version: number;
+};
+/**
+ * @summary <cx-icon-picker> is a component that allows the user to select an icon from a list of icons.
+ */
+export default class CxIconPicker extends CortexElement {
+    static readonly styles: CSSResultGroup;
+    static readonly dependencies: {
+        'cx-asset-picker': typeof CxAssetPicker;
+        'cx-divider': typeof CxDivider;
+        'cx-icon': typeof CxIcon;
+        'cx-option': typeof CxOption;
+        'cx-select': typeof CxSelect;
+        'cx-space': typeof CxSpace;
+    };
+    private readonly localize;
+    private select;
+    private customOption;
+    value: {
+        name: string;
+        src: string;
+    };
+    /**
+     * Adds a clear button when the select is not empty.
+     */
+    clearable: boolean;
+    /**
+     * Function to request an asset.
+     * This is used to open the asset picker dialog when the user selects an asset from the DAM.
+     * The function should return a promise that resolves to an Asset object.
+     * @param type - The type of asset to request (image, video, etc.).
+     * @returns A promise that resolves to an Asset object.
+     * @default undefined
+     */
+    onRequestAsset: ((type: AssetType, multiple?: boolean) => Promise<Asset | Record<string, Asset>>) | undefined;
+    searchTerm: string;
+    /**
+     * Need to mount or unmount virtualizer when select is shown or hidden
+     * Since the virtualizer have a defect that not re-render when the parent is hidden once
+     */
+    private showVirtualizer;
+    get filteredIcons(): IconData[];
+    constructor();
+    runFirstUpdated(): void;
+    renderOption(icon: IconData): import('lit').TemplateResult<1> | typeof nothing;
+    handleSelectValueChange(): void;
+    handleSelectShow(): void;
+    handleSelectHide(): void;
+    /**
+     * Mount virtualizer when select is focused (before it opens)
+     */
+    handleSelectFocus(): void;
+    handleContentBuilderAssetSelect(event: CxAssetPickerSelectEvent): Promise<void>;
+    handleContentBuilderAssetDelete(): Promise<void>;
+    setSelectOptionCurrent(option: HTMLElement, current?: boolean): void;
+    selectGetOptionLabel(option: HTMLElement): string;
+    selectFilterCallback(option: HTMLElement, value: string): boolean;
+    renderCustomIconPicker(): import('lit').TemplateResult<1>;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-icon-picker': CxIconPicker;
+    }
+}
+export {};

package/library/packages/molecules/src/icon-picker/icon-picker.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').CSSResult;
+export default _default;

package/library/packages/molecules/src/index.d.ts

@@ -0,0 +1,33 @@
+export { default as Cx3dViewer } from './3d-viewer/3d-viewer';
+export { default as CxAssetDataDisplay } from './asset-data-display/asset-data-display';
+export { default as CxAssetPicker } from './asset-picker/asset-picker';
+export { default as CxBicolorPicker } from './bicolor-picker/bicolor-picker';
+export { default as CxBorderInputGroup } from './border-input-group/border-input-group';
+export { default as CxColorSwatch } from './color-swatch/color-swatch';
+export { default as CxConfirmPopover } from './confirm-popover/confirm-popover';
+export { default as CxCornerPositionInputGroup } from './corner-position-input-group/corner-position-input-group';
+export { default as CxCropper } from './cropper/cropper';
+export { default as CxDashboardIframe } from './dashboard-iframe/dashboard-iframe';
+export { default as CxDataTabGroup } from './data-tab-group/data-tab-group';
+export { default as CxDetailsGroup } from './details-group/details-group';
+export { default as CxDocsExample } from './docs-example/docs-example';
+export { default as CxDownloadFormatPicker } from './download-format-picker/download-format-picker';
+export { default as CxDynamicSelect } from './dynamic-select/dynamic-select';
+export { default as CxFolderSelect } from './folder-select/folder-select';
+export { default as CxGalleryItem } from './gallery-item/gallery-item';
+export { default as CxGraphView } from './graph-view/graph-view';
+export { default as CxIconPicker } from './icon-picker/icon-picker';
+export { default as CxListEditor } from './list-editor/list-editor';
+export { default as CxMasonry } from './masonry/masonry';
+export { default as CxPaddingInputGroup } from './padding-input-group/padding-input-group';
+export { default as CxPageOutline } from './page-outline/page-outline';
+export { default as CxPositionPicker } from './position-picker/position-picker';
+export { default as CxSearchBox } from './search-box/search-box';
+export { default as CxShadowInputGroup } from './shadow-input-group/shadow-input-group';
+export { default as CxShareOptionList } from './share-option-list/share-option-list';
+export { default as CxSidebar } from './sidebar/sidebar';
+export { default as CxSizeInputGroup } from './size-input-group/size-input-group';
+export { default as CxStepperWizard } from './stepper-wizard/stepper-wizard';
+export { default as CxStorybook } from './storybook/storybook';
+export { default as CxTypeface } from './typeface/typeface';
+export { default as CxViewAndSort } from './view-and-sort/view-and-sort';

package/library/packages/molecules/src/library-index.d.ts

@@ -0,0 +1,18 @@
+export { default as CxBicolorPicker } from './bicolor-picker/bicolor-picker';
+export { default as CxBorderInputGroup } from './border-input-group/border-input-group';
+export { default as CxColorSwatch } from './color-swatch/color-swatch';
+export { default as CxConfirmPopover } from './confirm-popover/confirm-popover';
+export { default as CxCornerPositionInputGroup } from './corner-position-input-group/corner-position-input-group';
+export { default as CxCropper } from './cropper/cropper';
+export { default as CxDynamicSelect } from './dynamic-select/dynamic-select';
+export { default as CxFolderSelect } from './folder-select/folder-select';
+export { default as CxListEditor } from './list-editor/list-editor';
+export { default as CxMasonry } from './masonry/masonry';
+export { default as CxPaddingInputGroup } from './padding-input-group/padding-input-group';
+export { default as CxPositionPicker } from './position-picker/position-picker';
+export { default as CxShadowInputGroup } from './shadow-input-group/shadow-input-group';
+export { default as CxShareOptionList } from './share-option-list/share-option-list';
+export { default as CxSidebar } from './sidebar/sidebar';
+export { default as CxSizeInputGroup } from './size-input-group/size-input-group';
+export { default as CxStepperWizard } from './stepper-wizard/stepper-wizard';
+export { default as CxTypeface } from './typeface/typeface';

package/library/packages/molecules/src/list-editor/list-editor.d.ts

@@ -0,0 +1,67 @@
+import { default as CxButton } from '../../../atoms/src/components/button/button.ts';
+import { default as CxDialog } from '../../../atoms/src/components/dialog/dialog.ts';
+import { default as CxGrid } from '../../../atoms/src/components/grid/grid.ts';
+import { default as CxGridItem } from '../../../atoms/src/components/grid-item/grid-item.ts';
+import { default as CxIcon } from '../../../atoms/src/components/icon/icon.ts';
+import { default as CxIconButton } from '../../../atoms/src/components/icon-button/icon-button.ts';
+import { default as CxInput } from '../../../atoms/src/components/input/input.ts';
+import { default as CxLineClamp } from '../../../atoms/src/components/line-clamp/line-clamp.ts';
+import { default as CxSpace } from '../../../atoms/src/components/space/space.ts';
+import { default as CxTooltip } from '../../../atoms/src/components/tooltip/tooltip.ts';
+import { default as CxTree } from '../../../atoms/src/components/tree/tree.ts';
+import { default as CxTreeItem } from '../../../atoms/src/components/tree-item/tree-item.ts';
+import { default as CxTypography } from '../../../atoms/src/components/typography/typography.ts';
+import { default as CortexElement } from '../../../base/src/cortex-element.ts';
+import { CSSResultGroup } from 'lit';
+
+/**
+ * @summary CxListEditor
+ */
+export default class CxListEditor extends CortexElement {
+    static readonly styles: CSSResultGroup;
+    static readonly dependencies: {
+        'cx-button': typeof CxButton;
+        'cx-dialog': typeof CxDialog;
+        'cx-grid': typeof CxGrid;
+        'cx-grid-item': typeof CxGridItem;
+        'cx-icon': typeof CxIcon;
+        'cx-icon-button': typeof CxIconButton;
+        'cx-input': typeof CxInput;
+        'cx-line-clamp': typeof CxLineClamp;
+        'cx-space': typeof CxSpace;
+        'cx-tooltip': typeof CxTooltip;
+        'cx-tree': typeof CxTree;
+        'cx-tree-item': typeof CxTreeItem;
+        'cx-typography': typeof CxTypography;
+    };
+    private readonly localize;
+    data: Array<Record<string, string>>;
+    canAdd: boolean;
+    addDialogLabel: string;
+    editDialogLabel: string;
+    displayField: string;
+    descriptionField: string;
+    addItemText: string;
+    sampleItem: Record<string, string>;
+    useEvents: boolean;
+    sortable: boolean;
+    loadingEvent: string;
+    /**
+     * The boundary property of the confirm popover's dropdown/dialog popup.
+     */
+    boundary: HTMLElement;
+    editedItem: Record<string, string> | null;
+    isAdding: boolean;
+    private readonly actions;
+    private readonly OMITTED_FIELDS;
+    private handleRequestClose;
+    private handleAddClick;
+    private handleSaveClick;
+    private handleReorder;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-list-editor': CxListEditor;
+    }
+}

package/library/packages/molecules/src/list-editor/list-editor.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').CSSResult;
+export default _default;

package/library/packages/molecules/src/masonry/masonry.d.ts

@@ -0,0 +1,91 @@
+import { default as CxGrid } from '../../../atoms/src/components/grid/grid.ts';
+import { default as CxGridItem } from '../../../atoms/src/components/grid-item/grid-item.ts';
+import { default as CxIconButton } from '../../../atoms/src/components/icon-button/icon-button.ts';
+import { default as CxImage } from '../../../atoms/src/components/image/image.ts';
+import { default as CxSpace } from '../../../atoms/src/components/space/space.ts';
+import { default as CxTooltip } from '../../../atoms/src/components/tooltip/tooltip.ts';
+import { default as CortexElement } from '../../../base/src/cortex-element.ts';
+import { MasonryItem, MasonryItemAction, MasonryVariant } from '../../../types/src/masonry';
+import { CSSResultGroup } from 'lit';
+import { default as Sortable } from 'sortablejs';
+
+type SpacingProp = '3x-small' | '2x-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | '2x-large' | '3x-large' | '4x-large';
+/**
+ * @summary The Masonry component arranges its child elements in a masonry layout, allowing for a flexible and responsive grid of items that can vary in height.
+ *
+ * @event cx-reorder - Emitted when the order of items changes, such as after a drag-and-drop operation.
+ * @event cx-masonry-select - Emitted when an item in the masonry layout is clicked.
+ */
+export default class CxMasonry extends CortexElement {
+    static readonly styles: CSSResultGroup;
+    static readonly dependencies: {
+        'cx-grid': typeof CxGrid;
+        'cx-grid-item': typeof CxGridItem;
+        'cx-icon-button': typeof CxIconButton;
+        'cx-image': typeof CxImage;
+        'cx-space': typeof CxSpace;
+        'cx-tooltip': typeof CxTooltip;
+    };
+    private readonly list;
+    /**
+     * Data pass down to masonry
+     */
+    data: MasonryItem[];
+    /**
+     * The variant of the masonry layout.
+     */
+    variant: MasonryVariant;
+    /**
+     * The number of columns in the masonry layout.
+     */
+    cols: number;
+    /**
+     * Masonry row height
+     */
+    rowHeight: string;
+    /**
+     * Masonry's actions
+     */
+    actions: MasonryItemAction[];
+    /**
+     * Enables drag-and-drop reordering of items in the masonry layout.
+     */
+    sortable: boolean;
+    /**
+     * The spacing between items in the masonry layout. This can be set to one of the predefined spacing values.
+     */
+    spacing: SpacingProp;
+    /**
+     * The key to use for the id of the items in the masonry layout.
+     */
+    idKey: keyof MasonryItem;
+    private sortableInstance;
+    private previous;
+    /**
+     * A boolean property that indicates whether the drag operation should be aborted.
+     * When set to `true`, the current drag action will be canceled,
+     * and the dragged items will be placed back to their original position.
+     */
+    abortDrag: boolean;
+    constructor();
+    private getAllItems;
+    handleStart(evt: Sortable.SortableEvent): void;
+    handleEnd(evt: Sortable.SortableEvent): Promise<void>;
+    private destroySortable;
+    private initSortable;
+    handleSortableChange(): void;
+    protected runFirstUpdated(): void;
+    disconnectedCallback(): void;
+    handleItemClick(event: MouseEvent, item: MasonryItem): void;
+    handleSortableUpdate(event: Sortable.SortableEvent): void;
+    renderActions(item: MasonryItem): import('lit').TemplateResult<1>;
+    renderMasonry(): import('lit').TemplateResult<1>;
+    renderStandard(): import('lit').TemplateResult<1>;
+    render(): import('lit').TemplateResult<1>;
+}
+export { type MasonryItem };
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-masonry': CxMasonry;
+    }
+}

package/library/packages/molecules/src/masonry/masonry.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').CSSResult;
+export default _default;

package/library/packages/molecules/src/padding-input-group/padding-input-group.d.ts

@@ -0,0 +1,20 @@
+import { default as CxInput } from '../../../atoms/src/components/input/input.ts';
+import { default as CxInputGroup } from '../../../atoms/src/components/input-group/input-group.ts';
+import { default as CortexElement } from '../../../base/src/cortex-element.ts';
+import { CSSResultGroup, TemplateResult } from 'lit';
+
+export default class CxPaddingInputGroup extends CortexElement {
+    static readonly styles: CSSResultGroup;
+    static readonly dependencies: {
+        'cx-input': typeof CxInput;
+        'cx-input-group': typeof CxInputGroup;
+    };
+    value: [string, string, string, string];
+    private handleInputChange;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-padding-input-group': CxPaddingInputGroup;
+    }
+}

package/library/packages/molecules/src/padding-input-group/padding-input-group.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').CSSResult;
+export default _default;

package/library/packages/molecules/src/page-outline/page-outline.d.ts

@@ -0,0 +1,104 @@
+import { default as CxHeader } from '../../../atoms/src/components/header/header.ts';
+import { default as CxLineClamp } from '../../../atoms/src/components/line-clamp/line-clamp.ts';
+import { default as CxResizeObserver } from '../../../atoms/src/components/resize-observer/resize-observer.ts';
+import { default as CxTypography } from '../../../atoms/src/components/typography/typography.ts';
+import { default as CortexElement } from '../../../base/src/cortex-element.ts';
+import { PageOutlineUnderlineType } from '../../../types/src/page-outline';
+import { CSSResultGroup } from 'lit';
+
+/**
+ * @summary The PageOutline component dynamically generates a structured outline
+ * of the document by scanning for `<cx-header>` elements inside a specified root.
+ *
+ * @cssproperty --page-outline-item-color - The text color of item
+ * @cssproperty --page-outline-item-hover-color - The text color of item when hovered
+ * @cssproperty --page-outline-item-padding - The padding of item
+ * @cssproperty --page-outline-item-underline-offset - The offset of the underline
+ * @cssproperty --page-outline-item-underline-thickness - The thickness of the underline
+ * @cssproperty --page-outline-item-underline-style - The style of the underline
+ *
+ * @csspart title - The title of the outline
+ * @csspart list - The list of the outline
+ * @csspart item - The item of the outline
+ * @csspart text - The text of the outline item
+ *
+ * @typedef PageOutlineUnderlineType - 'always' | 'hover'
+ */
+export default class CxPageOutline extends CortexElement {
+    static readonly styles: CSSResultGroup;
+    static readonly dependencies: {
+        'cx-header': typeof CxHeader;
+        'cx-line-clamp': typeof CxLineClamp;
+        'cx-resize-observer': typeof CxResizeObserver;
+        'cx-typography': typeof CxTypography;
+    };
+    indicator?: HTMLElement;
+    list?: HTMLElement;
+    /** Root selector of the scanning document */
+    rootSelector: string;
+    /** If true, the outline item will be clickable */
+    canClick: boolean;
+    /** Heading title */
+    headingTitle: string;
+    /** Underline variant */
+    showUnderlineType: PageOutlineUnderlineType;
+    /** If true, automatically sync active heading based on scroll position */
+    autoSync: boolean;
+    /** Whether to not show the header anchor in nested blocks in CMS5 */
+    excludeNested: boolean;
+    /** List of the outline items extracted from the page */
+    private outlineItems;
+    private root;
+    private currentHash;
+    /**
+     * For auto-sync mode, when user clicks on an item
+     * We need to priority that item more than the observer for better visual experience
+     *
+     * Use case: Article header is at the end of the page, and user clicks on the item.
+     * (Normally observer will pick the previous item, but we want to pick the clicked item until we scroll)
+     */
+    private manualSelected;
+    private readonly MAX_NESTED_LEVEL;
+    private documentObserver;
+    private rootObserver;
+    private intersectionObserver?;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Get the owner window */
+    private get ownerWindow();
+    /** Get all headings by role and aria-level, filtered to only include those with text content */
+    private get headings();
+    /** Extract all headings by role and aria-level */
+    private extractHeadings;
+    /**
+     * Count how many wrapper levels exist between a heading and the root.
+     * If the root is missing, return 0 so the heading is treated as not nested.
+     */
+    private getWrapperLevel;
+    /** Extract root and set to state */
+    private extractRoot;
+    /** Query root node */
+    handleRootSelectorChange(): void;
+    handleRootChange(): void;
+    /**
+     * Setup the MutationObserver safely without recursion
+     */
+    private observeRootMutations;
+    /** Watch autoSync property */
+    handleAutoSyncChange(): void;
+    /** Observe headings for scroll sync */
+    private observeHeadings;
+    private disconnectHeadingsObserver;
+    /** Handle item click to scroll to section */
+    private handleItemClick;
+    updateCurrentHash(): void;
+    private syncIndicator;
+    private handleListKeyDown;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-page-outline': CxPageOutline;
+    }
+}

package/library/packages/molecules/src/page-outline/page-outline.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').CSSResult;
+export default _default;

package/library/packages/molecules/src/position-picker/position-picker.d.ts

@@ -0,0 +1,30 @@
+import { default as CxGrid } from '../../../atoms/src/components/grid/grid.ts';
+import { default as CxGridItem } from '../../../atoms/src/components/grid-item/grid-item.ts';
+import { default as CxRadio } from '../../../atoms/src/components/radio/radio.ts';
+import { default as CxRadioGroup } from '../../../atoms/src/components/radio-group/radio-group.ts';
+import { default as CortexElement } from '../../../base/src/cortex-element.ts';
+import { PositionPickerValue } from '../../../types/src/position-picker';
+import { CSSResultGroup } from 'lit';
+
+/**
+ * @summary CxPositionPicker
+ */
+export default class CxPositionPicker extends CortexElement {
+    static readonly styles: CSSResultGroup;
+    static readonly dependencies: {
+        'cx-grid': typeof CxGrid;
+        'cx-grid-item': typeof CxGridItem;
+        'cx-radio': typeof CxRadio;
+        'cx-radio-group': typeof CxRadioGroup;
+    };
+    private readonly localize;
+    /** The current value of the position picker. */
+    value: PositionPickerValue;
+    private handleChange;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-position-picker': CxPositionPicker;
+    }
+}

package/library/packages/molecules/src/position-picker/position-picker.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').CSSResult;
+export default _default;

package/library/packages/molecules/src/search-box/search-box.d.ts

@@ -0,0 +1,107 @@
+import { default as CortexElement } from '../../../base/src/cortex-element.ts';
+import { default as CxDynamicSelect } from '../dynamic-select/dynamic-select.ts';
+import { DeviceType } from '../../../types/src/content-builder';
+import { SearchBoxSize, SearchBoxWidthType } from '../../../types/src/search-box';
+import { CSSResultGroup } from 'lit';
+
+/**
+ * @summary A search box component that provides a user interface for entering search queries.
+ *
+ * @cssproperty [--padding-left=var(--cx-spacing-x-small)] - Padding for text in input field.
+ * @cssproperty [--background-color=transparent] - pair of colors for light and dark theme
+ * @cssproperty [--border-color=light-dark(
+      var(--cx-color-neutral-0),
+      var(--cx-color-neutral-1000)
+    )] - pair of colors for light and dark theme
+ * @cssproperty [--color=light-dark(
+      var(--cx-color-neutral-1000),
+      var(--cx-color-neutral-0)
+    )] - pair of colors for light and dark theme
+ *
+ * @event cx-input - Emitted when the control receives input.
+ * @event cx-change - Emitted when an alteration to the control's value is committed by the user.
+ * @event {{ value: string }} cx-search - Emitted when user hits Enter key or clicks search button (if enabled).
+ *
+ * @csspart input - The input field for entering search queries.
+ * @csspart icon - The icon displayed in the search box, typically a magnifying glass.
+ *
+ * @typedef SearchBoxSize - 'large' | 'medium' | 'small'
+ */
+export default class CxSearchBox extends CortexElement {
+    static readonly styles: CSSResultGroup;
+    static readonly dependencies: {
+        'cx-dynamic-select': typeof CxDynamicSelect;
+    };
+    /**
+     * Reference to form element
+     */
+    form: HTMLFormElement;
+    /**
+     * Reference to internal input element
+     */
+    dynamicSelect: CxDynamicSelect;
+    /**
+     * Search input's size.
+     */
+    size: SearchBoxSize;
+    /**
+     * Placeholder for input
+     */
+    placeholder: string;
+    /**
+     * Whether the icon can be clicked to trigger search
+     */
+    canSearchByIcon: boolean;
+    /**
+     * Value of the search box.
+     */
+    value: string;
+    /**
+     * Latest text the user typed mirrored to search-term and used to decide
+     * whether to render the suggestions dropdown.
+     */
+    searchTerm: string;
+    /**
+     * The width type of the search box.
+     */
+    widthType: SearchBoxWidthType;
+    /**
+     * Device type
+     * Don't use this prop since it is controlled by window resize event
+     * Used for :host([width-type='adaptive'][device-type='mobile']) selector
+     */
+    deviceType: DeviceType;
+    /**
+     * Label for the search box
+     */
+    label: string;
+    /**
+     * Breakpoints for responsive design
+     */
+    breakpoints: [number, number, number];
+    constructor();
+    runFirstUpdated(): void;
+    disconnectedCallback(): void;
+    /**
+     * Emit cx-search with current input value
+     */
+    private emitSearch;
+    private fetchAutocompleteItems;
+    private getSearchItems;
+    private setInputDisplayValue;
+    private removeCurrentOption;
+    private setOptionCurrent;
+    private setOptionSelected;
+    private handleEnter;
+    private handleSubmit;
+    private handleInput;
+    private handleClear;
+    private handleClick;
+    private handleWindowResize;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-search-box': CxSearchBox;
+    }
+}

package/library/packages/molecules/src/search-box/search-box.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').CSSResult;
+export default _default;