vira 31.18.1 → 31.18.2

package/dist/elements/vira-json-form.element.js

@@ -1,8 +1,7 @@
 import { assertWrap, check } from '@augment-vir/assert';
 import { omitObjectKeys, wrapInTry } from '@augment-vir/common';
-import { extractEventTarget } from '@augment-vir/web';
 import { css, defineElementEvent, html, listen, nothing } from 'element-vir';
-import { lucideIcons, X16Icon } from '../icons/index.js';
+import { Plus16Icon, X16Icon } from '../icons/index.js';
 import { viraFontCssVars } from '../styles/font.js';
 import { viraFormCssVars } from '../styles/form-styles.js';
 import { ViraColorVariant, ViraEmphasis, ViraSize } from '../styles/form-variants.js';
@@ -13,6 +12,7 @@ import { ViraCheckbox } from './vira-checkbox.element.js';
 import { ViraError } from './vira-error.element.js';
 import { ViraInput, ViraInputType } from './vira-input.element.js';
 import { ViraSelect } from './vira-select.element.js';
+import { ViraTextArea } from './vira-text-area.element.js';
 /**
  * An editor for arbitrary JSON values, optionally constrained by a standard JSON Schema
  * ({@link ViraJsonSchema}).
@@ -48,24 +48,10 @@ export const ViraJsonForm = defineViraElement()({
             justify-content: flex-end;
         }
 
-        .json-raw-textarea {
-            margin: 0;
-            padding: 10px 12px;
-            border: 1px solid ${viraFormCssVars['vira-form-border-color'].value};
-            border-radius: ${viraFormCssVars['vira-form-wrapper-radius'].value};
-            background-color: ${viraFormCssVars['vira-form-background-color'].value};
-            color: ${viraFormCssVars['vira-form-foreground-color'].value};
+        ${ViraTextArea}.json-raw-textarea {
+            width: 100%;
             font-family: ${viraFontCssVars['vira-monospace'].value};
             font-size: ${viraFormCssVars['vira-form-small-text-size'].value};
-            box-sizing: border-box;
-            width: 100%;
-            min-height: 240px;
-            resize: vertical;
-        }
-
-        .json-raw-textarea:focus {
-            outline: none;
-            border-color: ${viraFormCssVars['vira-form-focus-outline-color'].value};
         }
 
         .json-validation-errors {
@@ -80,68 +66,71 @@ export const ViraJsonForm = defineViraElement()({
         }
 
         .json-group {
-            display: flex;
-            flex-direction: column;
-            gap: 8px;
-            padding: 10px 12px;
-            border: 1px solid ${viraFormCssVars['vira-form-border-color'].value};
-            border-radius: ${viraFormCssVars['vira-form-wrapper-radius'].value};
-            background-color: ${viraFormCssVars['vira-form-background-color'].value};
+            border-collapse: separate;
+            border-spacing: 0;
+            width: 100%;
             box-sizing: border-box;
         }
 
-        .json-group-header {
-            display: flex;
-            align-items: center;
-            gap: 8px;
+        .json-group-nested {
+            margin-top: 4px;
+            padding-left: 12px;
+            padding-bottom: 8px;
+            border-left: 2px solid ${viraFormCssVars['vira-form-border-color'].value};
+            border-bottom: 2px solid ${viraFormCssVars['vira-form-border-color'].value};
         }
 
-        .json-group-header-title {
-            flex-grow: 1;
-            font-weight: ${viraFormCssVars['vira-form-label-font-weight'].value};
-            color: ${viraFormCssVars['vira-form-secondary-body-foreground'].value};
-            font-size: ${viraFormCssVars['vira-form-small-text-size'].value};
+        .json-row-primitive > td {
+            padding: 4px 8px 4px 0;
+            vertical-align: middle;
         }
 
-        .json-row {
-            display: flex;
-            gap: 8px;
-        }
-
-        .json-row-primitive {
-            align-items: center;
-        }
-
-        .json-row-nested {
-            flex-direction: column;
-            align-items: stretch;
-            gap: 4px;
+        .json-row-primitive > td:last-child {
+            padding-right: 0;
         }
 
-        .json-row-label {
-            flex-shrink: 0;
+        td.json-row-label {
+            text-align: left;
             min-width: 80px;
+            white-space: nowrap;
             font-weight: ${viraFormCssVars['vira-form-label-font-weight'].value};
-            word-break: break-word;
         }
 
-        .json-row-editor {
-            flex-grow: 1;
-            min-width: 0;
-            display: flex;
-            flex-direction: column;
+        td.json-row-editor {
+            width: 100%;
         }
 
-        .json-row-editor > * {
+        td.json-row-editor > * {
             width: 100%;
             max-width: 100%;
+            box-sizing: border-box;
         }
 
-        .json-row-delete {
-            flex-shrink: 0;
+        td.json-row-delete {
             width: 24px;
+            text-align: center;
+        }
+
+        .json-row-nested > td {
+            padding: 4px 0;
+        }
+
+        .json-row-nested-header {
             display: flex;
-            justify-content: center;
+            align-items: center;
+            gap: 8px;
+            margin-bottom: 4px;
+        }
+
+        .json-row-nested-header > .json-row-label {
+            flex-grow: 1;
+            font-weight: ${viraFormCssVars['vira-form-label-font-weight'].value};
+            word-break: break-word;
+        }
+
+        .json-type-tag {
+            font-weight: normal;
+            color: ${viraFormCssVars['vira-form-secondary-body-foreground'].value};
         }
 
         .json-value-with-switcher {
@@ -169,8 +158,10 @@ export const ViraJsonForm = defineViraElement()({
         .json-add-row {
             display: flex;
             align-items: center;
+            justify-content: flex-end;
             gap: 6px;
             flex-wrap: wrap;
+            padding: 8px 0;
         }
 
         .json-add-row ${ViraInput}, .json-add-row ${ViraSelect} {
@@ -190,6 +181,8 @@ export const ViraJsonForm = defineViraElement()({
         }
 
         .json-empty-note {
+            display: block;
+            padding: 4px 0;
             color: ${viraFormCssVars['vira-form-placeholder-color'].value};
             font-style: italic;
             font-size: ${viraFormCssVars['vira-form-small-text-size'].value};
@@ -392,8 +385,9 @@ export const ViraJsonForm = defineViraElement()({
         function renderPlusButton({ isAddDisabled, tooltip, onClick, }) {
             return html `
                 <${ViraButton.assign({
-                icon: lucideIcons.Plus,
-                color: ViraColorVariant.Plain,
+                icon: Plus16Icon,
+                color: ViraColorVariant.Positive,
+                buttonSize: ViraSize.Small,
                 isDisabled: isAddDisabled,
             })}
                     title=${tooltip}
@@ -406,7 +400,7 @@ export const ViraJsonForm = defineViraElement()({
                 ></${ViraButton}>
             `;
         }
-        function renderObjectAddControl({ pathKey, allowedTypes, canAdd, onAdd, }) {
+        function renderObjectAddControl({ pathKey, allowedTypes, canAdd, disabledReason, onAdd, }) {
             if (allowedTypes.length === 0) {
                 return nothing;
             }
@@ -415,7 +409,7 @@ export const ViraJsonForm = defineViraElement()({
                 const onlyType = assertWrap.isDefined(allowedTypes[0]);
                 return renderPlusButton({
                     isAddDisabled,
-                    tooltip: `Add ${viraJsonTypeLabels[onlyType]}`,
+                    tooltip: isAddDisabled ? disabledReason : `Add ${viraJsonTypeLabels[onlyType]}`,
                     onClick: () => onAdd(onlyType),
                 });
             }
@@ -437,7 +431,9 @@ export const ViraJsonForm = defineViraElement()({
                 ></${ViraSelect}>
                 ${renderPlusButton({
                 isAddDisabled,
-                tooltip: `Add ${viraJsonTypeLabels[selectedType]}`,
+                tooltip: isAddDisabled
+                    ? disabledReason
+                    : `Add ${viraJsonTypeLabels[selectedType]}`,
                 onClick: () => onAdd(selectedType),
             })}
             `;
@@ -497,8 +493,14 @@ export const ViraJsonForm = defineViraElement()({
             })}
             `;
         }
-        function renderObjectGroup(path, value, schema, onDelete) {
+        function getNestedTypeLabel(schema, value) {
+            const concreteType = getJsonType(value);
+            const narrowedSchema = pickBranchForType(schema, concreteType, resolveContext);
+            return (getSchemaTitle(narrowedSchema, resolveContext) || viraJsonTypeLabels[concreteType]);
+        }
+        function renderObjectGroup(path, value, schema) {
             const pathKey = pathToKey(path);
+            const isRoot = path.length === 0;
             const requiredKeys = new Set(getRequiredProperties(schema, resolveContext));
             const definedProperties = getDefinedProperties(schema, resolveContext);
             const definedKeys = new Set(Object.keys(definedProperties));
@@ -524,20 +526,34 @@ export const ViraJsonForm = defineViraElement()({
                         }
                     }
                     : undefined;
+                if (isChildNested) {
+                    return html `
+                        <tr class="json-row-nested">
+                            <td colspan="3">
+                                <div class="json-row-nested-header">
+                                    <span class="json-row-label">
+                                        ${key}${isRequired ? '*' : ''}
+                                        <span class="json-type-tag">
+                                            : ${getNestedTypeLabel(childSchema, childValue)}
+                                        </span>
+                                    </span>
+                                    ${childOnDelete ? renderDeleteButton(childOnDelete) : nothing}
+                                </div>
+                                ${renderValue(childPath, childValue, childSchema)}
+                            </td>
+                        </tr>
+                    `;
+                }
                 return html `
-                    <div
-                        class="json-row ${isChildNested ? 'json-row-nested' : 'json-row-primitive'}"
-                    >
-                        <span class="json-row-label">${key}${isRequired ? '*' : ''}</span>
-                        <span class="json-row-editor">
-                            ${renderValue(childPath, childValue, childSchema, isChildNested ? childOnDelete : undefined)}
-                        </span>
-                        <span class="json-row-delete">
-                            ${!isChildNested && childOnDelete
-                    ? renderDeleteButton(childOnDelete)
-                    : nothing}
-                        </span>
-                    </div>
+                    <tr class="json-row-primitive">
+                        <td class="json-row-label">${key}${isRequired ? '*' : ''}</td>
+                        <td class="json-row-editor">
+                            ${renderValue(childPath, childValue, childSchema)}
+                        </td>
+                        <td class="json-row-delete">
+                            ${childOnDelete ? renderDeleteButton(childOnDelete) : nothing}
+                        </td>
+                    </tr>
                 `;
             });
             const missingDefinedKeys = [...definedKeys].filter((key) => !(key in value));
@@ -550,8 +566,9 @@ export const ViraJsonForm = defineViraElement()({
                     return html `
                           <${ViraButton.assign({
                         text: `"${key}"`,
-                        icon: lucideIcons.Plus,
-                        color: ViraColorVariant.Plain,
+                        icon: Plus16Icon,
+                        color: ViraColorVariant.Positive,
+                        buttonSize: ViraSize.Small,
                     })}
                               ${listen('click', () => {
                         emitReplaceAt([
@@ -568,21 +585,27 @@ export const ViraJsonForm = defineViraElement()({
             const additionalAllowedTypes = additional.allowed
                 ? getAllowedJsonTypes(additional.schema, resolveContext)
                 : [];
+            const arbitraryAddDisabledReason = trimmedPendingKey
+                ? `Field "${trimmedPendingKey}" already exists.`
+                : 'Enter a field name to add.';
             const arbitraryAddRow = additional.allowed && !isDisabled
                 ? html `
-                          <div class="json-add-row">
-                              <${ViraInput.assign({
+                          <tr>
+                              <td colspan="3">
+                                  <div class="json-add-row">
+                                      <${ViraInput.assign({
                     value: pendingKey,
                     placeholder: 'new field name',
                 })}
-                                  ${listen(ViraInput.events.valueChange, (event) => {
+                                          ${listen(ViraInput.events.valueChange, (event) => {
                     setPendingKey(pathKey, event.detail);
                 })}
-                              ></${ViraInput}>
-                              ${renderObjectAddControl({
+                                      ></${ViraInput}>
+                                      ${renderObjectAddControl({
                     pathKey,
                     allowedTypes: additionalAllowedTypes,
                     canAdd: canAddArbitraryField,
+                    disabledReason: arbitraryAddDisabledReason,
                     onAdd: (type) => {
                         if (!canAddArbitraryField) {
                             return;
@@ -594,33 +617,41 @@ export const ViraJsonForm = defineViraElement()({
                         clearPending(pathKey);
                     },
                 })}
-                          </div>
+                                  </div>
+                              </td>
+                          </tr>
                       `
                 : nothing;
-            const title = getSchemaTitle(schema, resolveContext) || 'object';
             return html `
-                <div class="json-group">
-                    <div class="json-group-header">
-                        <span class="json-group-header-title">${title}</span>
-                        ${onDelete ? renderDeleteButton(onDelete) : nothing}
-                    </div>
-                    ${rowTemplates.length === 0 && suggestedKeyButtons.length === 0
+                <table class="json-group ${isRoot ? '' : 'json-group-nested'}">
+                    <tbody>
+                        ${rowTemplates.length === 0 && suggestedKeyButtons.length === 0
                 ? html `
-                              <span class="json-empty-note">(empty object)</span>
-                          `
+                                  <tr>
+                                      <td colspan="3">
+                                          <span class="json-empty-note">(empty object)</span>
+                                      </td>
+                                  </tr>
+                              `
                 : nothing}
-                    ${rowTemplates}
-                    ${suggestedKeyButtons.length > 0
+                        ${rowTemplates}
+                        ${suggestedKeyButtons.length > 0
                 ? html `
-                              <div class="json-add-row">${suggestedKeyButtons}</div>
-                          `
+                                  <tr>
+                                      <td colspan="3">
+                                          <div class="json-add-row">${suggestedKeyButtons}</div>
+                                      </td>
+                                  </tr>
+                              `
                 : nothing}
-                    ${arbitraryAddRow}
-                </div>
+                        ${arbitraryAddRow}
+                    </tbody>
+                </table>
             `;
         }
-        function renderArrayGroup(path, value, schema, onDelete) {
+        function renderArrayGroup(path, value, schema) {
             const pathKey = pathToKey(path);
+            const isRoot = path.length === 0;
             const newItemSchema = getNewItemSchema(schema, value.length, resolveContext);
             const allowedItemTypes = getAllowedJsonTypes(newItemSchema, resolveContext);
             const rowTemplates = value.map((item, index) => {
@@ -636,28 +667,43 @@ export const ViraJsonForm = defineViraElement()({
                     : () => {
                         emitDeleteAt(childPath);
                     };
+                if (isChildNested) {
+                    return html `
+                        <tr class="json-row-nested">
+                            <td colspan="3">
+                                <div class="json-row-nested-header">
+                                    <span class="json-row-label">
+                                        [${index}]
+                                        <span class="json-type-tag">
+                                            : ${getNestedTypeLabel(childSchema, item)}
+                                        </span>
+                                    </span>
+                                    ${childOnDelete ? renderDeleteButton(childOnDelete) : nothing}
+                                </div>
+                                ${renderValue(childPath, item, childSchema)}
+                            </td>
+                        </tr>
+                    `;
+                }
                 return html `
-                    <div
-                        class="json-row ${isChildNested ? 'json-row-nested' : 'json-row-primitive'}"
-                    >
-                        <span class="json-row-label">[${index}]</span>
-                        <span class="json-row-editor">
-                            ${renderValue(childPath, item, childSchema, isChildNested ? childOnDelete : undefined)}
-                        </span>
-                        <span class="json-row-delete">
-                            ${!isChildNested && childOnDelete
-                    ? renderDeleteButton(childOnDelete)
-                    : nothing}
-                        </span>
-                    </div>
+                    <tr class="json-row-primitive">
+                        <td class="json-row-label">[${index}]</td>
+                        <td class="json-row-editor">
+                            ${renderValue(childPath, item, childSchema)}
+                        </td>
+                        <td class="json-row-delete">
+                            ${childOnDelete ? renderDeleteButton(childOnDelete) : nothing}
+                        </td>
+                    </tr>
                 `;
             });
-            const title = getSchemaTitle(schema, resolveContext) || 'array';
             const addRow = isDisabled
                 ? nothing
                 : html `
-                      <div class="json-add-row">
-                          ${renderArrayAddControl({
+                      <tr>
+                          <td colspan="3">
+                              <div class="json-add-row">
+                                  ${renderArrayAddControl({
                     pathKey,
                     allowedTypes: allowedItemTypes,
                     onAdd: (newValue) => {
@@ -667,32 +713,36 @@ export const ViraJsonForm = defineViraElement()({
                         ], newValue);
                     },
                 })}
-                      </div>
+                              </div>
+                          </td>
+                      </tr>
                   `;
             return html `
-                <div class="json-group">
-                    <div class="json-group-header">
-                        <span class="json-group-header-title">${title}</span>
-                        ${onDelete ? renderDeleteButton(onDelete) : nothing}
-                    </div>
-                    ${rowTemplates.length === 0
+                <table class="json-group ${isRoot ? '' : 'json-group-nested'}">
+                    <tbody>
+                        ${rowTemplates.length === 0
                 ? html `
-                              <span class="json-empty-note">(empty array)</span>
-                          `
+                                  <tr>
+                                      <td colspan="3">
+                                          <span class="json-empty-note">(empty array)</span>
+                                      </td>
+                                  </tr>
+                              `
                 : nothing}
-                    ${rowTemplates} ${addRow}
-                </div>
+                        ${rowTemplates} ${addRow}
+                    </tbody>
+                </table>
             `;
         }
-        function renderValue(path, value, schema, onDelete) {
+        function renderValue(path, value, schema) {
             const concreteType = getJsonType(value);
             const allowedTypes = getAllowedJsonTypes(schema, resolveContext);
             const narrowedSchema = pickBranchForType(schema, concreteType, resolveContext);
             if (check.isArray(value)) {
-                return renderArrayGroup(path, value, narrowedSchema, onDelete);
+                return renderArrayGroup(path, value, narrowedSchema);
             }
             else if (check.isObject(value)) {
-                return renderObjectGroup(path, value, narrowedSchema, onDelete);
+                return renderObjectGroup(path, value, narrowedSchema);
             }
             const editor = renderPrimitive(path, value, narrowedSchema);
             const showSwitcher = !isDisabled &&
@@ -752,14 +802,15 @@ export const ViraJsonForm = defineViraElement()({
             const rawText = state.rawDraft ?? JSON.stringify(inputs.value, undefined, 4);
             return html `
                 ${toolbarTemplate}
-                <textarea
+                <${ViraTextArea.assign({
+                value: rawText,
+                disabled: isDisabled,
+                disableBrowserHelps: true,
+                rows: 12,
+            })}
                     class="json-raw-textarea"
-                    spellcheck="false"
-                    ?disabled=${isDisabled}
-                    .value=${rawText}
-                    ${listen('input', (event) => {
-                const textarea = extractEventTarget(event, HTMLTextAreaElement);
-                const text = textarea.value;
+                    ${listen(ViraTextArea.events.valueChange, (event) => {
+                const text = event.detail;
                 const parsed = wrapInTry(() => JSON.parse(text));
                 if (parsed instanceof Error) {
                     updateState({
@@ -775,7 +826,7 @@ export const ViraJsonForm = defineViraElement()({
                     emitRoot(parsed);
                 }
             })}
-                ></textarea>
+                ></${ViraTextArea}>
                 ${state.rawError
                 ? html `
                           <${ViraError}>${state.rawError}</${ViraError}>
@@ -800,7 +851,7 @@ export const ViraJsonForm = defineViraElement()({
             `;
         }
         return html `
-            ${toolbarTemplate} ${renderValue([], inputs.value, inputs.schema, undefined)}
+            ${toolbarTemplate} ${renderValue([], inputs.value, inputs.schema)}
         `;
     },
 });

package/dist/elements/vira-text-area.element.js

@@ -56,6 +56,7 @@ export const ViraTextArea = defineViraElement()({
 
         textarea {
             ${noNativeFormStyles};
+            overscroll-behavior: contain;
             font: inherit;
             cursor: text;
             width: 100%;

package/dist/icons/icon-svgs/16/plus-16.icon.d.ts

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

package/dist/icons/icon-svgs/{plus-24.icon.js → 16/plus-16.icon.js}

@@ -1,19 +1,19 @@
 import { html } from 'element-vir';
-import { viraIconCssVars } from '../icon-css-vars.js';
-import { defineIcon } from '../icon-svg.js';
+import { viraIconCssVars } from '../../icon-css-vars.js';
+import { defineIcon } from '../../icon-svg.js';
 /**
  * A plus icon.
  *
  * @category Icon
  * @category SVG
- * @see https://electrovir.github.io/vira/book/icons/plus24icon
+ * @see https://electrovir.github.io/vira/book/icons/plus16icon
  */
-export const Plus24Icon = defineIcon({
-    name: 'Plus24Icon',
+export const Plus16Icon = defineIcon({
+    name: 'Plus16Icon',
     svgTemplate: html `
-        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
             <path
-                d="M12 5v14M5 12h14"
+                d="M8 3v10M3 8h10"
                 fill="none"
                 stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
                 stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}

package/dist/icons/index.d.ts

@@ -8,6 +8,7 @@ export * from './icon-svgs/16/chevron-down-16.icon.js';
 export * from './icon-svgs/16/chevron-up-16.icon.js';
 export * from './icon-svgs/16/dash-16.icon.js';
 export * from './icon-svgs/16/element-16.icon.js';
+export * from './icon-svgs/16/plus-16.icon.js';
 export * from './icon-svgs/16/upload-16.icon.js';
 export * from './icon-svgs/16/x-16.icon.js';
 export * from './icon-svgs/24/arrow-down-24.icon.js';
@@ -100,6 +101,7 @@ export declare const allIconsByName: {
     readonly Moon24Icon: import("./icon-svg.js").ViraIconSvg;
     readonly Options24Icon: import("./icon-svg.js").ViraIconSvg;
     readonly Pencil24Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly Plus16Icon: import("./icon-svg.js").ViraIconSvg;
     readonly Plus24Icon: import("./icon-svg.js").ViraIconSvg;
     readonly Printer24Icon: import("./icon-svg.js").ViraIconSvg;
     readonly Shield24Icon: import("./icon-svg.js").ViraIconSvg;
@@ -189,6 +191,7 @@ export declare const all16IconsByName: {
     readonly ChevronUp16Icon: import("./icon-svg.js").ViraIconSvg;
     readonly Dash16Icon: import("./icon-svg.js").ViraIconSvg;
     readonly Element16Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly Plus16Icon: import("./icon-svg.js").ViraIconSvg;
     readonly Upload16Icon: import("./icon-svg.js").ViraIconSvg;
     readonly X16Icon: import("./icon-svg.js").ViraIconSvg;
 };

package/dist/icons/index.js

@@ -3,6 +3,7 @@ import { ChevronDown16Icon } from './icon-svgs/16/chevron-down-16.icon.js';
 import { ChevronUp16Icon } from './icon-svgs/16/chevron-up-16.icon.js';
 import { Dash16Icon } from './icon-svgs/16/dash-16.icon.js';
 import { Element16Icon } from './icon-svgs/16/element-16.icon.js';
+import { Plus16Icon } from './icon-svgs/16/plus-16.icon.js';
 import { Upload16Icon } from './icon-svgs/16/upload-16.icon.js';
 import { X16Icon } from './icon-svgs/16/x-16.icon.js';
 import { ArrowDown24Icon } from './icon-svgs/24/arrow-down-24.icon.js';
@@ -64,6 +65,7 @@ export * from './icon-svgs/16/chevron-down-16.icon.js';
 export * from './icon-svgs/16/chevron-up-16.icon.js';
 export * from './icon-svgs/16/dash-16.icon.js';
 export * from './icon-svgs/16/element-16.icon.js';
+export * from './icon-svgs/16/plus-16.icon.js';
 export * from './icon-svgs/16/upload-16.icon.js';
 export * from './icon-svgs/16/x-16.icon.js';
 export * from './icon-svgs/24/arrow-down-24.icon.js';
@@ -156,6 +158,7 @@ export const allIconsByName = {
     Moon24Icon,
     Options24Icon,
     Pencil24Icon,
+    Plus16Icon,
     Plus24Icon,
     Printer24Icon,
     Shield24Icon,
@@ -245,6 +248,7 @@ export const all16IconsByName = {
     ChevronUp16Icon,
     Dash16Icon,
     Element16Icon,
+    Plus16Icon,
     Upload16Icon,
     X16Icon,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vira",
-    "version": "31.18.1",
+    "version": "31.18.2",
     "description": "A simple and highly versatile design system using element-vir.",
     "keywords": [
         "design",

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

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