@juspay/svelte-ui-components 2.123.0 → 2.125.0

package/dist/ChatToolStatus/ChatToolStatus.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+  import Loader from '../Loader/Loader.svelte';
+  import type { ChatToolStatusProperties } from './properties';
+
+  let { label, icon, testId, classes }: ChatToolStatusProperties = $props();
+</script>
+
+<div
+  class="chat-tool-status {classes ?? ''}"
+  aria-live="polite"
+  data-pw={typeof testId === 'string' ? testId : null}
+  testID={typeof testId === 'string' ? testId : null}
+>
+  <span class="indicator">
+    {#if typeof icon === 'function'}
+      {@render icon()}
+    {:else}
+      <Loader />
+    {/if}
+  </span>
+  <span class="label">{label}</span>
+</div>
+
+<style>
+  .chat-tool-status {
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--chat-tool-status-gap, 8px);
+    width: fit-content;
+    padding: var(--chat-tool-status-padding, 8px 14px);
+    background: var(--chat-tool-status-background, #ffffff);
+    border: var(--chat-tool-status-border, 1px solid #e4e4e7);
+    border-radius: var(--chat-tool-status-border-radius, 999px);
+    box-shadow: var(--chat-tool-status-box-shadow, 0 6px 20px rgba(0, 0, 0, 0.08));
+    color: var(--chat-tool-status-color, #52525b);
+    font-size: var(--chat-tool-status-font-size, 0.85rem);
+    font-weight: var(--chat-tool-status-font-weight, 500);
+    max-width: var(--chat-tool-status-max-width, 100%);
+  }
+
+  .indicator {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    color: var(--chat-tool-status-indicator-color, currentColor);
+    --loader-foreground: var(--chat-tool-status-spinner-color, currentColor);
+    --loader-foreground-end: var(--chat-tool-status-spinner-color-end, transparent);
+    --loader-width: var(--chat-tool-status-spinner-size, 14px);
+    --loader-height: var(--chat-tool-status-spinner-size, 14px);
+    --loader-before-width: 7px;
+    --loader-before-height: 7px;
+    --loader-after-width: 11px;
+    --loader-after-height: 11px;
+    --loader-background: var(--chat-tool-status-background, #ffffff);
+  }
+
+  .label {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+</style>

package/dist/ChatToolStatus/ChatToolStatus.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ChatToolStatusProperties } from './properties';
+declare const ChatToolStatus: import("svelte").Component<ChatToolStatusProperties, {}, "">;
+type ChatToolStatus = ReturnType<typeof ChatToolStatus>;
+export default ChatToolStatus;

package/dist/ChatToolStatus/properties.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+export type ChatToolStatusProperties = OptionalChatToolStatusProperties & MandatoryChatToolStatusProperties;
+export type MandatoryChatToolStatusProperties = {
+    label: string;
+};
+export type OptionalChatToolStatusProperties = {
+    icon?: Snippet;
+    testId?: string;
+    classes?: string;
+};

package/dist/ChatToolStatus/properties.js

@@ -0,0 +1 @@
+export {};

package/dist/Input/Input.svelte

@@ -115,6 +115,9 @@
   const hasRightIcon = $derived(typeof rightIcon === 'function');
 
   const charCount = $derived(value?.length ?? 0);
+  // Every numeric use below is either tel-only normalisation or the character
+  // counter; `null` means "no attribute", not "no ceiling on those paths".
+  const effectiveMaxLength = $derived(maxLength ?? 1000);
   const effectiveResize = $derived(autoResize ? 'none' : resize);
 
   // Grow the textarea to fit its content between minRows and maxRows.
@@ -130,8 +133,16 @@
     const border = parseFloat(styles.borderTopWidth) + parseFloat(styles.borderBottomWidth);
     const lower = minRows ?? rows ?? 2;
     const minHeight = lower * lineHeight + verticalPadding + border;
-    const maxHeight =
+    const rowsCeiling =
       maxRows != null ? maxRows * lineHeight + verticalPadding + border : Number.POSITIVE_INFINITY;
+    // --input-max-height is a ceiling too. Reading only maxRows left it at Infinity, so the
+    // inline height grew past the CSS clamp and overflowY was set to `hidden` — the box
+    // stopped at the right size but its overflow became unreachable instead of scrollable.
+    const styleCeiling = parseFloat(styles.maxHeight);
+    const maxHeight = Math.min(
+      rowsCeiling,
+      Number.isFinite(styleCeiling) ? styleCeiling : Number.POSITIVE_INFINITY
+    );
     const nextHeight = Math.min(Math.max(el.scrollHeight, minHeight), maxHeight);
     el.style.height = `${nextHeight}px`;
     el.style.overflowY = el.scrollHeight > maxHeight ? 'auto' : 'hidden';
@@ -163,16 +174,16 @@
         inputElement.value = value;
         return;
       }
-      if (numberLength > maxLength) {
+      if (numberLength > effectiveMaxLength) {
         const existingInput = value;
-        if (existingInput.length === maxLength) {
+        if (existingInput.length === effectiveMaxLength) {
           inputElement.value = applyTextPresentation(value);
           return;
         }
         /**
          * choose last max length number of digits if length is bigger than max length passed in props
          */
-        currentValue = currentValue.substring(numberLength - maxLength);
+        currentValue = currentValue.substring(numberLength - effectiveMaxLength);
       }
       currentValue = applyTextPresentation(currentValue);
       inputElement.value = currentValue;
@@ -221,12 +232,12 @@
         /**
          * user pasted 10+ digit number , overrides all cases
          */
-        if (filteredNumber.length > maxLength) {
+        if (filteredNumber.length > effectiveMaxLength) {
           /**
            * choose last max length number of digits if length is bigger than max length passed in props
            */
           const finalValue = applyTextPresentation(
-            filteredNumber.substring(filteredNumberLength - maxLength)
+            filteredNumber.substring(filteredNumberLength - effectiveMaxLength)
           );
           // Adding reactivity
           value = finalValue;
@@ -390,8 +401,8 @@
     </div>
   {/if}
   {#if useTextArea && showCount && !actionInput}
-    <div class="input-char-count" class:at-limit={charCount >= maxLength}>
-      {charCount}/{maxLength}
+    <div class="input-char-count" class:at-limit={charCount >= effectiveMaxLength}>
+      {charCount}/{effectiveMaxLength}
     </div>
   {/if}
 </div>
@@ -401,6 +412,13 @@
   input {
     box-sizing: var(--input-box-sizing, border-box);
     height: var(--input-height, fit-content);
+
+    /* Both default to the CSS initial value, so a consumer that sets neither is
+       byte-identical to before. A textarea that grows with its content needs a
+       ceiling before it can scroll, and one used as a paste target needs a floor;
+       neither was reachable through the --input-* surface. */
+    min-height: var(--input-min-height, auto);
+    max-height: var(--input-max-height, none);
     background-color: var(--input-background, white);
     font-size: var(--input-font-size, 16px) !important;
     font-family: var(--input-font-family, inherit);
@@ -408,6 +426,12 @@
     outline: none;
     padding: var(--input-padding, 16px);
     font-weight: var(--input-font-weight, 500);
+
+    /* `normal` is what a textarea/input computes today regardless of any inherited
+       value — the UA sheet sets it, and inheritance loses to a UA declaration on the
+       element itself. So the default here is byte-identical for existing consumers,
+       and this is the only way a consumer can set it at all. */
+    line-height: var(--input-line-height, normal);
     width: var(--input-width, fit-content);
     margin: var(--input-margin, 0);
     appearance: none !important;

package/dist/Input/properties.d.ts

@@ -29,7 +29,12 @@ export type OptionalInputProperties = {
     validationPattern?: RegExp | null;
     inProgressPattern?: RegExp | null;
     addFocusColor?: boolean;
-    maxLength?: number;
+    /**
+     * Native `maxlength`. Defaults to 1000. Pass `null` for no limit — a composer or
+     * paste target that silently truncates long input is worse than an unbounded one,
+     * and the attribute is rendered unconditionally otherwise.
+     */
+    maxLength?: number | null;
     minLength?: number;
     min?: number;
     max?: number;

package/dist/LineChart/LineChart.svelte

@@ -228,6 +228,10 @@
     })
   );
 
+  // Markers paint back-to-front so the first series ends up on top — see the
+  // comment on the marker loop in the markup.
+  let markerPaintOrder = $derived(lines.map((_line, index) => index).reverse());
+
   let legendItems = $derived<LegendItem[]>(
     series.map((s, i) => ({
       label: s.name,
@@ -658,6 +662,38 @@
                 stroke-dasharray={line.dash}
                 fill="none"
               />
+              {#if showValues && pointLabelPlacements[si]}
+                {#each line.points as _point, pi (pi)}
+                  {@const pl = pointLabelPlacements[si][pi]}
+                  {#if pl?.visible && Number.isFinite(pl.x) && Number.isFinite(pl.y)}
+                    <text
+                      class="point-value"
+                      x={pl.x}
+                      y={pl.y}
+                      text-anchor="middle"
+                      dominant-baseline={pl.dominantBaseline}
+                      >{formatNumber(series[si].data[pi].y)}</text
+                    >
+                  {/if}
+                {/each}
+              {/if}
+            {/if}
+          {/each}
+
+          <!--
+            Point markers are painted after every line, and in REVERSE series
+            order. Two series that share a value put their markers on identical
+            coordinates, and SVG has no z-index — whichever is written last wins.
+            Painting forwards meant the last series in the array hid the first,
+            so a chart passed [primary, comparison] lost the primary series'
+            marker wherever the two periods happened to agree, most visibly at
+            the first bucket. Reversing here makes the FIRST series win, which is
+            the one a reader is looking at; the legend keeps its original order
+            because it is derived from `series`, not from this loop.
+          -->
+          {#each markerPaintOrder as si (si)}
+            {@const line = lines[si]}
+            {#if !line.hidden}
               {#if line.points.length === 1 && !showDots && Number.isFinite(line.points[0].x) && Number.isFinite(line.points[0].y)}
                 <circle
                   class="single-point"
@@ -684,21 +720,6 @@
                   {/if}
                 {/each}
               {/if}
-              {#if showValues && pointLabelPlacements[si]}
-                {#each line.points as _point, pi (pi)}
-                  {@const pl = pointLabelPlacements[si][pi]}
-                  {#if pl?.visible && Number.isFinite(pl.x) && Number.isFinite(pl.y)}
-                    <text
-                      class="point-value"
-                      x={pl.x}
-                      y={pl.y}
-                      text-anchor="middle"
-                      dominant-baseline={pl.dominantBaseline}
-                      >{formatNumber(series[si].data[pi].y)}</text
-                    >
-                  {/if}
-                {/each}
-              {/if}
             {/if}
           {/each}
 

package/dist/Menu/Menu.svelte

@@ -200,9 +200,28 @@
     focusedIndex = -1;
     typeaheadQuery = '';
     onclose?.();
-    if (triggerEl !== null) {
-      triggerEl.focus({ preventScroll: true });
+    focusTrigger();
+  }
+
+  /**
+   * Returns focus to whatever is actually focusable for this trigger. Under
+   * `interactiveTrigger` the wrapper carries no tabindex, so focusing it is a no-op and
+   * focus falls to <body> — the control the snippet rendered is the real target.
+   */
+  function focusTrigger() {
+    if (triggerEl === null) {
+      return;
     }
+    if (interactiveTrigger) {
+      const control = triggerEl.querySelector(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      );
+      if (control instanceof HTMLElement) {
+        control.focus({ preventScroll: true });
+        return;
+      }
+    }
+    triggerEl.focus({ preventScroll: true });
   }
 
   function selectItem(item: MenuItem) {
@@ -240,6 +259,23 @@
     }
   }
 
+  /**
+   * Keydown wiring handed to an `interactiveTrigger` snippet. Enter and Space are
+   * deliberately NOT handled here: the snippet owns a real `<button>`, which already
+   * synthesises a click from both, and that click is already wired to `toggle`. Handling
+   * them again would open a menu the click then immediately closes. Only the arrow keys —
+   * which no native button implements — are added.
+   */
+  function handleInteractiveTriggerKeydown(event: KeyboardEvent) {
+    if (event.key === 'ArrowDown') {
+      event.preventDefault();
+      openMenu();
+    } else if (event.key === 'ArrowUp') {
+      event.preventDefault();
+      openMenu(selectableItems.length - 1);
+    }
+  }
+
   function handleMenuKeydown(event: KeyboardEvent) {
     switch (event.key) {
       case 'ArrowDown': {
@@ -358,7 +394,7 @@
       {#if typeof trigger === 'function'}
         {@render trigger({
           onclick: toggle,
-          onkeydown: handleTriggerKeydown,
+          onkeydown: handleInteractiveTriggerKeydown,
           ariaHaspopup: 'menu',
           ariaExpanded: open
         })}

package/dist/Resizable/Resizable.svelte

@@ -0,0 +1,304 @@
+<script lang="ts">
+  import type { ResizableProperties, ResizeEdge } from './properties';
+
+  let {
+    width = $bindable(null),
+    height = $bindable(null),
+    minWidth = 0,
+    maxWidth = Number.POSITIVE_INFINITY,
+    minHeight = 0,
+    maxHeight = Number.POSITIVE_INFINITY,
+    handles = ['bottom-right'],
+    step = 16,
+    disabled = false,
+    handleLabel = 'Resize',
+    children,
+    onresize,
+    onresizestart,
+    onresizeend,
+    testId,
+    classes
+  }: ResizableProperties = $props();
+
+  const DIRS: Record<ResizeEdge, { x: -1 | 0 | 1; y: -1 | 0 | 1 }> = {
+    top: { x: 0, y: -1 },
+    right: { x: 1, y: 0 },
+    bottom: { x: 0, y: 1 },
+    left: { x: -1, y: 0 },
+    'top-left': { x: -1, y: -1 },
+    'top-right': { x: 1, y: -1 },
+    'bottom-left': { x: -1, y: 1 },
+    'bottom-right': { x: 1, y: 1 }
+  };
+
+  let container: HTMLElement | null = $state(null);
+  let active: {
+    edge: ResizeEdge;
+    pointerId: number;
+    startX: number;
+    startY: number;
+    startW: number;
+    startH: number;
+  } | null = $state(null);
+
+  let activeHandles = $derived(disabled ? [] : handles);
+
+  function clampWidth(value: number): number {
+    return Math.min(maxWidth, Math.max(minWidth, value));
+  }
+
+  function clampHeight(value: number): number {
+    return Math.min(maxHeight, Math.max(minHeight, value));
+  }
+
+  function measuredWidth(): number {
+    return typeof width === 'number' ? width : (container?.offsetWidth ?? 0);
+  }
+
+  function measuredHeight(): number {
+    return typeof height === 'number' ? height : (container?.offsetHeight ?? 0);
+  }
+
+  function axisOf(edge: ResizeEdge): 'x' | 'y' | 'both' {
+    const dir = DIRS[edge];
+    if (dir.x !== 0 && dir.y !== 0) {
+      return 'both';
+    }
+    return dir.x !== 0 ? 'x' : 'y';
+  }
+
+  function orientationOf(edge: ResizeEdge): 'horizontal' | 'vertical' | null {
+    const axis = axisOf(edge);
+    if (axis === 'x') {
+      return 'vertical';
+    }
+    if (axis === 'y') {
+      return 'horizontal';
+    }
+    return null;
+  }
+
+  function startResize(
+    event: PointerEvent & { currentTarget: HTMLElement },
+    edge: ResizeEdge
+  ): void {
+    if (disabled) {
+      return;
+    }
+    event.preventDefault();
+    const startW = clampWidth(measuredWidth());
+    const startH = clampHeight(measuredHeight());
+    width = startW;
+    height = startH;
+    active = {
+      edge,
+      pointerId: event.pointerId,
+      startX: event.clientX,
+      startY: event.clientY,
+      startW,
+      startH
+    };
+    event.currentTarget.setPointerCapture(event.pointerId);
+    onresizestart?.({ width: startW, height: startH });
+  }
+
+  function moveResize(event: PointerEvent): void {
+    if (active === null) {
+      return;
+    }
+    const dir = DIRS[active.edge];
+    if (dir.x !== 0) {
+      width = clampWidth(active.startW + dir.x * (event.clientX - active.startX));
+    }
+    if (dir.y !== 0) {
+      height = clampHeight(active.startH + dir.y * (event.clientY - active.startY));
+    }
+    onresize?.({ width: measuredWidth(), height: measuredHeight() });
+  }
+
+  function endResize(event: PointerEvent & { currentTarget: HTMLElement }): void {
+    if (active === null) {
+      return;
+    }
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+    active = null;
+    onresizeend?.({ width: measuredWidth(), height: measuredHeight() });
+  }
+
+  function keyResize(event: KeyboardEvent, edge: ResizeEdge): void {
+    if (disabled) {
+      return;
+    }
+    const dir = DIRS[edge];
+    let nextWidth = measuredWidth();
+    let nextHeight = measuredHeight();
+    let handled = false;
+
+    if (dir.x !== 0 && (event.key === 'ArrowRight' || event.key === 'ArrowLeft')) {
+      nextWidth = clampWidth(nextWidth + (event.key === 'ArrowRight' ? step : -step));
+      handled = true;
+    }
+    if (dir.y !== 0 && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
+      nextHeight = clampHeight(nextHeight + (event.key === 'ArrowDown' ? step : -step));
+      handled = true;
+    }
+
+    if (handled) {
+      event.preventDefault();
+      width = nextWidth;
+      height = nextHeight;
+      onresize?.({ width: nextWidth, height: nextHeight });
+    }
+  }
+
+  function valueNow(edge: ResizeEdge): number | null {
+    const axis = axisOf(edge);
+    if (axis === 'y') {
+      return typeof height === 'number' ? height : null;
+    }
+    return typeof width === 'number' ? width : null;
+  }
+
+  function valueMin(edge: ResizeEdge): number {
+    return axisOf(edge) === 'y' ? minHeight : minWidth;
+  }
+
+  function valueMax(edge: ResizeEdge): number | null {
+    const max = axisOf(edge) === 'y' ? maxHeight : maxWidth;
+    return Number.isFinite(max) ? max : null;
+  }
+</script>
+
+<div
+  class="resizable {classes ?? ''}"
+  class:resizing={active !== null}
+  data-pw={typeof testId === 'string' ? testId : null}
+  testID={typeof testId === 'string' ? testId : null}
+  bind:this={container}
+  style:width={typeof width === 'number' ? `${width}px` : null}
+  style:height={typeof height === 'number' ? `${height}px` : null}
+>
+  {#if typeof children === 'function'}
+    {@render children()}
+  {/if}
+
+  {#each activeHandles as edge (edge)}
+    <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+    <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+    <div
+      class="handle"
+      data-edge={edge}
+      role="separator"
+      tabindex="0"
+      aria-label={handleLabel}
+      aria-orientation={orientationOf(edge)}
+      aria-valuenow={valueNow(edge)}
+      aria-valuemin={valueMin(edge)}
+      aria-valuemax={valueMax(edge)}
+      onpointerdown={(event) => startResize(event, edge)}
+      onpointermove={moveResize}
+      onpointerup={endResize}
+      onkeydown={(event) => keyResize(event, edge)}
+    ></div>
+  {/each}
+</div>
+
+<style>
+  .resizable {
+    position: relative;
+    box-sizing: border-box;
+    max-width: var(--resizable-max-width, none);
+    max-height: var(--resizable-max-height, none);
+    transition: var(--resizable-transition, none);
+  }
+
+  .resizable.resizing {
+    user-select: none;
+    transition: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .resizable {
+      transition: none;
+    }
+  }
+
+  .handle {
+    position: absolute;
+    touch-action: none;
+    z-index: var(--resizable-handle-z-index, 2);
+    background: var(--resizable-handle-color, transparent);
+  }
+
+  .handle:focus-visible {
+    outline: var(--resizable-handle-focus-outline, 2px solid #3b5bdb);
+    outline-offset: var(--resizable-handle-focus-outline-offset, -2px);
+  }
+
+  .handle[data-edge='top'],
+  .handle[data-edge='bottom'] {
+    left: 0;
+    right: 0;
+    height: var(--resizable-edge-size, 8px);
+    cursor: ns-resize;
+  }
+
+  .handle[data-edge='left'],
+  .handle[data-edge='right'] {
+    top: 0;
+    bottom: 0;
+    width: var(--resizable-edge-size, 8px);
+    cursor: ew-resize;
+  }
+
+  .handle[data-edge='top'] {
+    top: 0;
+  }
+
+  .handle[data-edge='bottom'] {
+    bottom: 0;
+  }
+
+  .handle[data-edge='left'] {
+    left: 0;
+  }
+
+  .handle[data-edge='right'] {
+    right: 0;
+  }
+
+  .handle[data-edge='top-left'],
+  .handle[data-edge='top-right'],
+  .handle[data-edge='bottom-left'],
+  .handle[data-edge='bottom-right'] {
+    width: var(--resizable-corner-size, 14px);
+    height: var(--resizable-corner-size, 14px);
+    z-index: var(--resizable-corner-z-index, 3);
+  }
+
+  .handle[data-edge='top-left'] {
+    top: 0;
+    left: 0;
+    cursor: nwse-resize;
+  }
+
+  .handle[data-edge='top-right'] {
+    top: 0;
+    right: 0;
+    cursor: nesw-resize;
+  }
+
+  .handle[data-edge='bottom-left'] {
+    bottom: 0;
+    left: 0;
+    cursor: nesw-resize;
+  }
+
+  .handle[data-edge='bottom-right'] {
+    bottom: 0;
+    right: 0;
+    cursor: nwse-resize;
+  }
+</style>

package/dist/Resizable/Resizable.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ResizableProperties } from './properties';
+declare const Resizable: import("svelte").Component<ResizableProperties, {}, "width" | "height">;
+type Resizable = ReturnType<typeof Resizable>;
+export default Resizable;

package/dist/Resizable/properties.d.ts

@@ -0,0 +1,27 @@
+import type { Snippet } from 'svelte';
+export type ResizeEdge = 'top' | 'right' | 'bottom' | 'left' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+export type ResizeSize = {
+    width: number;
+    height: number;
+};
+export type ResizableProperties = OptionalResizableProperties & ResizableEventProperties;
+export type OptionalResizableProperties = {
+    width?: number | null;
+    height?: number | null;
+    minWidth?: number;
+    maxWidth?: number;
+    minHeight?: number;
+    maxHeight?: number;
+    handles?: ResizeEdge[];
+    step?: number;
+    disabled?: boolean;
+    handleLabel?: string;
+    children?: Snippet;
+    testId?: string;
+    classes?: string;
+};
+export type ResizableEventProperties = {
+    onresize?: (size: ResizeSize) => void;
+    onresizestart?: (size: ResizeSize) => void;
+    onresizeend?: (size: ResizeSize) => void;
+};

package/dist/Resizable/properties.js

@@ -0,0 +1 @@
+export {};

package/dist/assets/attach.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+  <path d="M16 7v9a4 4 0 0 1-8 0V6.5a2.5 2.5 0 0 1 5 0V15.5" />
+</svg>

package/dist/assets/chat.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+  <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />
+</svg>

package/dist/assets/mic.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+  <rect x="9" y="2" width="6" height="12" rx="3" />
+  <path d="M5 11a7 7 0 0 0 14 0" />
+  <line x1="12" y1="18" x2="12" y2="22" />
+</svg>