vira 28.19.6 → 29.0.0

package/{src/elements/vira-select.element.ts → dist/elements/vira-select.element.js}

@@ -1,41 +1,14 @@
-import {randomString, type PartialWithUndefined} from '@augment-vir/common';
-import {extractEventTarget} from '@augment-vir/web';
-import {
-    attributes,
-    classMap,
-    css,
-    defineElementEvent,
-    html,
-    ifDefined,
-    listen,
-    nothing,
-    type AttributeValues,
-} from 'element-vir';
-import {ChevronUp24Icon, type ViraIconSvg} from '../icons/index.js';
-import {viraDisabledStyles} from '../styles/disabled.js';
-import {createFocusStyles} from '../styles/focus.js';
-import {viraFormCssVars} from '../styles/form-styles.js';
-import {viraAnimationDurations, viraBorders} from '../styles/index.js';
-import {noNativeFormStyles} from '../styles/native-styles.js';
-import {defineViraElement} from './define-vira-element.js';
-import {ViraDropdown} from './vira-dropdown.element.js';
-import {ViraIcon} from './vira-icon.element.js';
-
-/**
- * Options for {@link ViraSelect}.
- *
- * @category Dropdown
- * @category Elements
- * @see https://electrovir.github.io/vira/book/elements/vira-select
- */
-export type ViraSelectOption = {
-    /** A value or id, used to keep track of which option is selected. */
-    value: string;
-    label: string;
-} & PartialWithUndefined<{
-    disabled: boolean;
-}>;
-
+import { randomString } from '@augment-vir/common';
+import { extractEventTarget } from '@augment-vir/web';
+import { attributes, classMap, css, defineElementEvent, html, ifDefined, listen, nothing, } from 'element-vir';
+import { ChevronUp24Icon } from '../icons/index.js';
+import { viraDisabledStyles } from '../styles/disabled.js';
+import { createFocusStyles } from '../styles/focus.js';
+import { viraFormCssVars } from '../styles/form-styles.js';
+import { viraAnimationDurations } from '../styles/index.js';
+import { noNativeFormStyles } from '../styles/native-styles.js';
+import { defineViraElement } from './define-vira-element.js';
+import { ViraIcon } from './vira-icon.element.js';
 /**
  * Similar to {@link ViraDropdown} but is, instead, simply a wrapper for `<select>` and nothing more.
  *
@@ -43,28 +16,7 @@ export type ViraSelectOption = {
  * @category Elements
  * @see https://electrovir.github.io/vira/book/elements/vira-select
  */
-export const ViraSelect = defineViraElement<
-    Readonly<
-        {
-            options: ReadonlyArray<Readonly<ViraSelectOption>>;
-            /** The currently selected option value. */
-            value: undefined | string;
-        } & PartialWithUndefined<{
-            icon: Readonly<ViraIconSvg>;
-            placeholder: string;
-            label: string;
-            disabled: boolean;
-            attributePassthrough: Readonly<
-                PartialWithUndefined<{
-                    label: AttributeValues;
-                    select: AttributeValues;
-                    option: AttributeValues;
-                }>
-            >;
-            hasError: boolean;
-        }>
-    >
->()({
+export const ViraSelect = defineViraElement()({
     tagName: 'vira-select',
     state() {
         return {
@@ -76,7 +28,7 @@ export const ViraSelect = defineViraElement<
         };
     },
     events: {
-        valueChange: defineElementEvent<string>(),
+        valueChange: defineElementEvent(),
     },
     cssVars: {
         'vira-select-padding-horizontal': '10px',
@@ -84,10 +36,10 @@ export const ViraSelect = defineViraElement<
         'vira-select-icon-padding': '44px',
     },
     hostClasses: {
-        'vira-select-disabled': ({inputs}) => !!inputs.disabled,
-        'vira-select-error': ({inputs}) => !!inputs.hasError,
+        'vira-select-disabled': ({ inputs }) => !!inputs.disabled,
+        'vira-select-error': ({ inputs }) => !!inputs.hasError,
     },
-    styles: ({hostClasses, cssVars}) => css`
+    styles: ({ hostClasses, cssVars }) => css `
         :host {
             position: relative;
             display: inline-flex;
@@ -104,7 +56,8 @@ export const ViraSelect = defineViraElement<
             box-sizing: border-box;
             align-items: center;
             position: relative;
-            border-radius: ${viraBorders['vira-form-input-radius'].value};
+            border-radius: ${viraFormCssVars['vira-form-radius'].value};
+            color: ${viraFormCssVars['vira-form-foreground-color'].value};
             background-color: ${viraFormCssVars['vira-form-background-color'].value};
             /*
                 Border colors are actually applied via the .wrapper-border class. However, we must
@@ -132,9 +85,9 @@ export const ViraSelect = defineViraElement<
 
                 &:focus:focus-visible:not([aria-disabled='true']) ~ .focus-border {
                     ${createFocusStyles({
-                        elementBorderSize: 0,
-                        noNesting: true,
-                    })}
+        elementBorderSize: 0,
+        noNesting: true,
+    })}
                 }
 
                 &.placeholder {
@@ -166,7 +119,7 @@ export const ViraSelect = defineViraElement<
                 left: 0;
                 width: 100%;
                 height: 100%;
-                border-radius: ${viraBorders['vira-form-input-radius'].value};
+                border-radius: ${viraFormCssVars['vira-form-radius'].value};
                 z-index: 0;
                 pointer-events: none;
             }
@@ -213,51 +166,44 @@ export const ViraSelect = defineViraElement<
 
         ${hostClasses['vira-select-error'].selector} {
             & .wrapper-border {
-                border-color: ${viraFormCssVars['vira-form-error-foreground-color'].value};
+                border-color: ${viraFormCssVars['vira-form-error-color'].value};
             }
         }
     `,
-    render({inputs, state, dispatch, events}) {
+    render({ inputs, state, dispatch, events }) {
         const value = inputs.value || undefined;
-
-        const placeholderOptionTemplate =
-            inputs.placeholder || value == undefined
-                ? html`
+        const placeholderOptionTemplate = inputs.placeholder || value == undefined
+            ? html `
                       <option value="" disabled ?selected=${value == undefined}>
                           ${inputs.placeholder}
                       </option>
                   `
-                : nothing;
-
-        const selectTemplate = html`
+            : nothing;
+        const selectTemplate = html `
             <span class="select-wrapper">
                 <select
                     .value=${ifDefined(value)}
                     class=${classMap({
-                        placeholder: !value && !!inputs.placeholder,
-                        'with-icon': !!inputs.icon,
-                    })}
+            placeholder: !value && !!inputs.placeholder,
+            'with-icon': !!inputs.icon,
+        })}
                     tabindex=${inputs.disabled ? -1 : 0}
                     id=${ifDefined(inputs.label ? state.randomId : undefined)}
                     aria-label=${ifDefined(inputs.label || undefined)}
                     aria-disabled=${ifDefined(inputs.disabled ? 'true' : undefined)}
                     ${listen('input', (event) => {
-                        const selectElement = extractEventTarget(event, HTMLSelectElement);
-                        const newValue = selectElement.value;
-
-                        if (selectElement.value !== value) {
-                            selectElement.selectedIndex = inputs.options.findIndex(
-                                (option) => option.value === value,
-                            );
-                        }
-
-                        dispatch(new events.valueChange(newValue));
-                    })}
+            const selectElement = extractEventTarget(event, HTMLSelectElement);
+            const newValue = selectElement.value;
+            if (selectElement.value !== value) {
+                selectElement.selectedIndex = inputs.options.findIndex((option) => option.value === value);
+            }
+            dispatch(new events.valueChange(newValue));
+        })}
                     ${attributes(inputs.attributePassthrough?.select)}
                 >
                     ${placeholderOptionTemplate}
                     ${inputs.options.map((option) => {
-                        return html`
+            return html `
                             <option
                                 ?selected=${option.value === value}
                                 aria-label=${option.label}
@@ -267,7 +213,7 @@ export const ViraSelect = defineViraElement<
                                 ${option.label}
                             </option>
                         `;
-                    })}
+        })}
                 </select>
                 <!--
                     These separate style elements are necessary so that we can select them as
@@ -278,19 +224,19 @@ export const ViraSelect = defineViraElement<
 
                 <div class="border-style wrapper-border"></div>
 
-                <${ViraIcon.assign({icon: inputs.icon})} class="input-icon"></${ViraIcon}>
-                <${ViraIcon.assign({icon: ChevronUp24Icon})} class="trigger-icon"></${ViraIcon}>
+                <${ViraIcon.assign({ icon: inputs.icon })} class="input-icon"></${ViraIcon}>
+                <${ViraIcon.assign({ icon: ChevronUp24Icon })} class="trigger-icon"></${ViraIcon}>
             </span>
         `;
-
         if (inputs.label) {
-            return html`
+            return html `
                 <label for=${state.randomId} ${attributes(inputs.attributePassthrough?.label)}>
                     <span class="select-label">${inputs.label}</span>
                     ${selectTemplate}
                 </label>
             `;
-        } else {
+        }
+        else {
             return selectTemplate;
         }
     },

package/dist/icons/icon-color.test-helper.d.ts

@@ -0,0 +1,6 @@
+export declare enum ColorType {
+    Color = "color",
+    Fill = "fill",
+    Stroke = "stroke"
+}
+export declare function extractIconColor(element: Element, colorType: ColorType): string;

package/dist/icons/icon-color.test-helper.js

@@ -0,0 +1,9 @@
+export var ColorType;
+(function (ColorType) {
+    ColorType["Color"] = "color";
+    ColorType["Fill"] = "fill";
+    ColorType["Stroke"] = "stroke";
+})(ColorType || (ColorType = {}));
+export function extractIconColor(element, colorType) {
+    return window.getComputedStyle(element).getPropertyValue(colorType);
+}

package/dist/icons/icon-css-vars.d.ts

@@ -0,0 +1,14 @@
+/**
+ * CSS vars that are supported by all Vira SVG icons.
+ *
+ * @category Icon
+ * @category CSS Vars
+ * @category Styles
+ */
+export declare const viraIconCssVars: import("lit-css-vars").CssVarDefinitions<{
+    /** To be used for coloring an icon's stroke. */
+    readonly 'vira-icon-stroke-color': "currentColor";
+    /** To be used for coloring an icon's fill. */
+    readonly 'vira-icon-fill-color': "none";
+    readonly 'vira-icon-stroke-width': "1.5px";
+}>;

package/{src/icons/icon-css-vars.ts → dist/icons/icon-css-vars.js}

@@ -1,5 +1,4 @@
-import {defineCssVars} from 'lit-css-vars';
-
+import { defineCssVars } from 'lit-css-vars';
 /**
  * CSS vars that are supported by all Vira SVG icons.
  *

package/dist/icons/icon-svg.d.ts

@@ -0,0 +1,27 @@
+import { type TemplateResult } from 'element-vir';
+import { viraIconCssVars } from './icon-css-vars.js';
+/**
+ * An individual Vira icon SVG definition.
+ *
+ * @category Icon
+ */
+export type ViraIconSvg = {
+    name: string;
+    svgTemplate: TemplateResult;
+};
+/**
+ * A function used to define an individual Vira icon SVG.
+ *
+ * @category Icon
+ */
+export declare function defineIcon({ name, svgTemplate, }: {
+    name: string;
+    svgTemplate: TemplateResult;
+}): ViraIconSvg;
+/**
+ * Wraps an existing icon with a specific color and outputs another icon that can be used anywhere
+ * the original icon can be used.
+ *
+ * @category Icon
+ */
+export declare function createColoredIcon(icon: ViraIconSvg, colors: Partial<Record<keyof typeof viraIconCssVars, string>>): ViraIconSvg;

package/dist/icons/icon-svg.js

@@ -0,0 +1,48 @@
+import { getObjectTypedKeys, stringify } from '@augment-vir/common';
+import Color from 'colorjs.io';
+import { html } from 'element-vir';
+import { viraIconCssVars } from './icon-css-vars.js';
+/**
+ * A function used to define an individual Vira icon SVG.
+ *
+ * @category Icon
+ */
+export function defineIcon({ name, svgTemplate, }) {
+    const iconSvg = {
+        name,
+        svgTemplate,
+    };
+    return iconSvg;
+}
+function getAssertedValidColor(input) {
+    try {
+        if (!input) {
+            throw new Error('invalid empty color');
+        }
+        return new Color(input);
+    }
+    catch {
+        throw new Error(`Invalid color: ${stringify(input)}`);
+    }
+}
+/**
+ * Wraps an existing icon with a specific color and outputs another icon that can be used anywhere
+ * the original icon can be used.
+ *
+ * @category Icon
+ */
+export function createColoredIcon(icon, colors) {
+    const colorStyles = getObjectTypedKeys(colors)
+        .map((cssVarName) => {
+        const colorValue = colors[cssVarName];
+        const color = getAssertedValidColor(colorValue);
+        return `${viraIconCssVars[cssVarName].name}: ${color.toString()};`;
+    })
+        .join(' ');
+    return defineIcon({
+        name: icon.name,
+        svgTemplate: html `
+            <div style=${colorStyles}>${icon.svgTemplate}</div>
+        `,
+    });
+}

package/dist/icons/icon-svgs/bell-24.icon.d.ts

@@ -0,0 +1,8 @@
+/**
+ * A bell icon.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/vira/book/icons/bell24icon
+ */
+export declare const Bell24Icon: import("../icon-svg.js").ViraIconSvg;

package/{src/icons/icon-svgs/bell-24.icon.ts → dist/icons/icon-svgs/bell-24.icon.js}

@@ -1,7 +1,6 @@
-import {html} from 'element-vir';
-import {viraIconCssVars} from '../icon-css-vars.js';
-import {defineIcon} from '../icon-svg.js';
-
+import { html } from 'element-vir';
+import { viraIconCssVars } from '../icon-css-vars.js';
+import { defineIcon } from '../icon-svg.js';
 /**
  * A bell icon.
  *
@@ -11,7 +10,7 @@ import {defineIcon} from '../icon-svg.js';
  */
 export const Bell24Icon = defineIcon({
     name: 'Bell24Icon',
-    svgTemplate: html`
+    svgTemplate: html `
         <svg
             xmlns="http://www.w3.org/2000/svg"
             xml:space="preserve"

package/dist/icons/icon-svgs/chat-24.icon.d.ts

@@ -0,0 +1,8 @@
+/**
+ * A chat bubble icon.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/vira/book/icons/chat24icon
+ */
+export declare const Chat24Icon: import("../icon-svg.js").ViraIconSvg;

package/{src/icons/icon-svgs/chat-24.icon.ts → dist/icons/icon-svgs/chat-24.icon.js}

@@ -1,7 +1,6 @@
-import {html} from 'element-vir';
-import {viraIconCssVars} from '../icon-css-vars.js';
-import {defineIcon} from '../icon-svg.js';
-
+import { html } from 'element-vir';
+import { viraIconCssVars } from '../icon-css-vars.js';
+import { defineIcon } from '../icon-svg.js';
 /**
  * A chat bubble icon.
  *
@@ -11,7 +10,7 @@ import {defineIcon} from '../icon-svg.js';
  */
 export const Chat24Icon = defineIcon({
     name: 'Chat24Icon',
-    svgTemplate: html`
+    svgTemplate: html `
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
             <path
                 d="M5 15.4c-1.6-1.2-2.6-2.7-2.6-4.4 0-3.5 4.3-6.3 9.6-6.3s9.6 2.8 9.6 6.3-4.3 6.4-9.6 6.4L9 17l-5 3.8 1-5.5Z"

package/dist/icons/icon-svgs/check-24.icon.d.ts

@@ -0,0 +1,8 @@
+/**
+ * A checkmark.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/vira/book/icons/check24icon
+ */
+export declare const Check24Icon: import("../icon-svg.js").ViraIconSvg;

package/{src/icons/icon-svgs/check-24.icon.ts → dist/icons/icon-svgs/check-24.icon.js}

@@ -1,7 +1,6 @@
-import {html} from 'element-vir';
-import {viraIconCssVars} from '../icon-css-vars.js';
-import {defineIcon} from '../icon-svg.js';
-
+import { html } from 'element-vir';
+import { viraIconCssVars } from '../icon-css-vars.js';
+import { defineIcon } from '../icon-svg.js';
 /**
  * A checkmark.
  *
@@ -11,7 +10,7 @@ import {defineIcon} from '../icon-svg.js';
  */
 export const Check24Icon = defineIcon({
     name: 'Check24Icon',
-    svgTemplate: html`
+    svgTemplate: html `
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
             <path
                 d="m17 8.5-7 8-3-3"

package/dist/icons/icon-svgs/chevron-down-24.icon.d.ts

@@ -0,0 +1,8 @@
+/**
+ * A chevron that points upwards. See ChevronUp24Icon or one pointing upwards.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/vira/book/icons/chevrondown24icon
+ */
+export declare const ChevronDown24Icon: import("../icon-svg.js").ViraIconSvg;

package/{src/icons/icon-svgs/chevron-down-24.icon.ts → dist/icons/icon-svgs/chevron-down-24.icon.js}

@@ -1,7 +1,6 @@
-import {html} from 'element-vir';
-import {viraIconCssVars} from '../icon-css-vars.js';
-import {defineIcon} from '../icon-svg.js';
-
+import { html } from 'element-vir';
+import { viraIconCssVars } from '../icon-css-vars.js';
+import { defineIcon } from '../icon-svg.js';
 /**
  * A chevron that points upwards. See ChevronUp24Icon or one pointing upwards.
  *
@@ -11,7 +10,7 @@ import {defineIcon} from '../icon-svg.js';
  */
 export const ChevronDown24Icon = defineIcon({
     name: 'ChevronDown24Icon',
-    svgTemplate: html`
+    svgTemplate: html `
         <svg
             xmlns="http://www.w3.org/2000/svg"
             stroke=${viraIconCssVars['vira-icon-stroke-color'].value}

package/dist/icons/icon-svgs/chevron-up-24.icon.d.ts

@@ -0,0 +1,8 @@
+/**
+ * A chevron that points upwards. See ChevronDown24Icon for one pointing downloads.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/vira/book/icons/chevronup24icon
+ */
+export declare const ChevronUp24Icon: import("../icon-svg.js").ViraIconSvg;

package/{src/icons/icon-svgs/chevron-up-24.icon.ts → dist/icons/icon-svgs/chevron-up-24.icon.js}

@@ -1,7 +1,6 @@
-import {html} from 'element-vir';
-import {viraIconCssVars} from '../icon-css-vars.js';
-import {defineIcon} from '../icon-svg.js';
-
+import { html } from 'element-vir';
+import { viraIconCssVars } from '../icon-css-vars.js';
+import { defineIcon } from '../icon-svg.js';
 /**
  * A chevron that points upwards. See ChevronDown24Icon for one pointing downloads.
  *
@@ -11,7 +10,7 @@ import {defineIcon} from '../icon-svg.js';
  */
 export const ChevronUp24Icon = defineIcon({
     name: 'ChevronUp24Icon',
-    svgTemplate: html`
+    svgTemplate: html `
         <svg
             xmlns="http://www.w3.org/2000/svg"
             stroke=${viraIconCssVars['vira-icon-stroke-color'].value}

package/dist/icons/icon-svgs/close-x-24.icon.d.ts

@@ -0,0 +1,8 @@
+/**
+ * An x icon meant to be used as a "close" button.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/vira/book/icons/closex24icon
+ */
+export declare const CloseX24Icon: import("../icon-svg.js").ViraIconSvg;

package/{src/icons/icon-svgs/close-x-24.icon.ts → dist/icons/icon-svgs/close-x-24.icon.js}

@@ -1,7 +1,6 @@
-import {html} from 'element-vir';
-import {viraIconCssVars} from '../icon-css-vars.js';
-import {defineIcon} from '../icon-svg.js';
-
+import { html } from 'element-vir';
+import { viraIconCssVars } from '../icon-css-vars.js';
+import { defineIcon } from '../icon-svg.js';
 /**
  * An x icon meant to be used as a "close" button.
  *
@@ -11,7 +10,7 @@ import {defineIcon} from '../icon-svg.js';
  */
 export const CloseX24Icon = defineIcon({
     name: 'CloseX24Icon',
-    svgTemplate: html`
+    svgTemplate: html `
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
             <circle
                 cx="12"

package/dist/icons/icon-svgs/commit-24.icon.d.ts

@@ -0,0 +1,8 @@
+/**
+ * An icon that represents a single commit in git.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/vira/book/icons/commit24icon
+ */
+export declare const Commit24Icon: import("../icon-svg.js").ViraIconSvg;

package/{src/icons/icon-svgs/commit-24.icon.ts → dist/icons/icon-svgs/commit-24.icon.js}

@@ -1,7 +1,6 @@
-import {html} from 'element-vir';
-import {viraIconCssVars} from '../icon-css-vars.js';
-import {defineIcon} from '../icon-svg.js';
-
+import { html } from 'element-vir';
+import { viraIconCssVars } from '../icon-css-vars.js';
+import { defineIcon } from '../icon-svg.js';
 /**
  * An icon that represents a single commit in git.
  *
@@ -11,7 +10,7 @@ import {defineIcon} from '../icon-svg.js';
  */
 export const Commit24Icon = defineIcon({
     name: 'Commit24Icon',
-    svgTemplate: html`
+    svgTemplate: html `
         <svg
             xmlns="http://www.w3.org/2000/svg"
             xml:space="preserve"

package/dist/icons/icon-svgs/copy-24.icon.d.ts

@@ -0,0 +1,8 @@
+/**
+ * An icon that represents copying something.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/vira/book/icons/copy24icon
+ */
+export declare const Copy24Icon: import("../icon-svg.js").ViraIconSvg;

package/{src/icons/icon-svgs/copy-24.icon.ts → dist/icons/icon-svgs/copy-24.icon.js}

@@ -1,7 +1,6 @@
-import {html} from 'element-vir';
-import {viraIconCssVars} from '../icon-css-vars.js';
-import {defineIcon} from '../icon-svg.js';
-
+import { html } from 'element-vir';
+import { viraIconCssVars } from '../icon-css-vars.js';
+import { defineIcon } from '../icon-svg.js';
 /**
  * An icon that represents copying something.
  *
@@ -11,7 +10,7 @@ import {defineIcon} from '../icon-svg.js';
  */
 export const Copy24Icon = defineIcon({
     name: 'Copy24Icon',
-    svgTemplate: html`
+    svgTemplate: html `
         <svg
             xmlns="http://www.w3.org/2000/svg"
             xml:space="preserve"

package/dist/icons/icon-svgs/document-24.icon.d.ts

@@ -0,0 +1,8 @@
+/**
+ * An icon that represents a single document file on a computer file system.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/vira/book/icons/document24icon
+ */
+export declare const Document24Icon: import("../icon-svg.js").ViraIconSvg;

package/{src/icons/icon-svgs/document-24.icon.ts → dist/icons/icon-svgs/document-24.icon.js}

@@ -1,7 +1,6 @@
-import {html} from 'element-vir';
-import {viraIconCssVars} from '../icon-css-vars.js';
-import {defineIcon} from '../icon-svg.js';
-
+import { html } from 'element-vir';
+import { viraIconCssVars } from '../icon-css-vars.js';
+import { defineIcon } from '../icon-svg.js';
 /**
  * An icon that represents a single document file on a computer file system.
  *
@@ -11,7 +10,7 @@ import {defineIcon} from '../icon-svg.js';
  */
 export const Document24Icon = defineIcon({
     name: 'Document24Icon',
-    svgTemplate: html`
+    svgTemplate: html `
         <svg
             xmlns="http://www.w3.org/2000/svg"
             xml:space="preserve"

package/dist/icons/icon-svgs/document-search-24.icon.d.ts

@@ -0,0 +1,8 @@
+/**
+ * An icon that represents searching on a document or searching for a document.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/vira/book/icons/documentsearch24icon
+ */
+export declare const DocumentSearch24Icon: import("../icon-svg.js").ViraIconSvg;