@kerfjs/ui 5.0.0-beta.103 → 5.0.0-beta.105

package/dist/icon-button.js

@@ -1,6 +0,0 @@
-export { IconButton } from './chunk-VFYO3UGZ.js';
-
-
-
-
-//# sourceMappingURL=icon-button.js.map

package/dist/icon-button.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"icon-button.js"}

package/dist/icon-toggle-button.d.ts

@@ -1,42 +0,0 @@
-import * as kerfjs from 'kerfjs';
-import { LucideNode } from './lucide-icon.js';
-import 'lucide';
-import './css-values.js';
-
-/** Corner shape: fully round `pill` (default) or a softer `rounded` square. */
-type IconToggleButtonShape = 'pill' | 'rounded';
-type IconToggleButtonRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
-    'data-component'?: never;
-    'data-action'?: never;
-    'data-shape'?: never;
-}>;
-interface IconToggleButtonProps {
-    /** The Lucide-compatible icon node. */
-    icon: LucideNode;
-    /** The icon's stable name, as `LucideIcon` takes it. */
-    iconName: string;
-    /** Accessible name and hover help tag; required because no text is shown. */
-    label: string;
-    /** Pressed state, exposed as `aria-pressed`; the application owns it. */
-    pressed: boolean;
-    /** Delegated `data-action` the application handles to flip `pressed`. */
-    action?: string;
-    shape?: IconToggleButtonShape;
-    disabled?: boolean;
-    id?: string;
-    className?: string;
-    /** Safe `data-*` metadata; IconToggleButton-owned markers stay protected. */
-    rootAttributes?: IconToggleButtonRootAttributes;
-    /** Native named-slot assignment when composed inside a web component. */
-    slot?: string;
-}
-/**
- * A standalone, icon-only toggle: a native `<button aria-pressed>` with the
- * geometry and pressed chrome of a single contained `ToolbarControlGroup`
- * (44px, a 2px-inset face that rises when pressed), for content and pane
- * footers where no `Toolbar` belongs. Inside a toolbar, use a
- * `ToolbarControlGroup` instead.
- */
-declare function IconToggleButton({ icon, iconName, label, pressed, action, shape, disabled, id, className, rootAttributes, slot, }: IconToggleButtonProps): kerfjs.SafeHtml;
-
-export { IconToggleButton, type IconToggleButtonProps, type IconToggleButtonShape };

package/dist/icon-toggle-button.js

@@ -1,6 +0,0 @@
-export { IconToggleButton } from './chunk-CA7LNX3J.js';
-
-
-
-
-//# sourceMappingURL=icon-toggle-button.js.map

package/dist/icon-toggle-button.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"icon-toggle-button.js"}

package/dist/styles/components/actions/icon-button/icon-button.css

@@ -1,22 +0,0 @@
-/* Web Awesome's own icon-button geometry, for a lone LucideIcon: a square one
-   form control height on each side with the glyph centered. Web Awesome
-   applies it only to a lone wa-icon. */
-.kui-icon-button::part(base) {
-  width: var(--wa-form-control-height);
-  min-width: var(--wa-form-control-height);
-  padding: 0;
-  aspect-ratio: 1;
-  justify-content: center;
-}
-
-.kui-icon-button::part(label) {
-  display: flex;
-  justify-content: center;
-}
-
-/* Beside a field in a ListInsetControl, the square keeps its size instead of
-   growing to share the row, and lines up with the field below its label. */
-.kui-list-inset-control > .kui-icon-button {
-  flex: none;
-  align-self: flex-end;
-}

package/dist/styles/components/actions/icon-toggle-button/icon-toggle-button.css

@@ -1,83 +0,0 @@
-/* The single contained ToolbarControlGroup's geometry, standalone: a 44px
-   filled, bordered control whose 2px-inset face lifts to the raised surface
-   on hover and stays raised, in the brand foreground, while pressed. */
-.kui-icon-toggle-button {
-  --_kui-icon-toggle-button-radius: var(
-    --kui-layout-pill-radius,
-    calc(1px + 1.3125rem)
-  );
-  --_kui-icon-toggle-button-inset: var(
-    --kui-layout-highlight-inset,
-    0.125rem
-  );
-  /* One full-size track for the face. The button sets its own track and
-     alignment because native or document button styles center content,
-     which would shrink the face to the icon. */
-  display: inline-grid;
-  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
-  place-content: stretch;
-  place-items: stretch;
-  width: 2.75rem;
-  height: 2.75rem;
-  margin: 0;
-  padding: var(--_kui-icon-toggle-button-inset);
-  box-sizing: border-box;
-  border: 1px solid var(--kui-color-neutral-border-normal);
-  border-radius: var(--_kui-icon-toggle-button-radius);
-  color: var(--kui-color-neutral-on-quiet);
-  background: var(--kui-color-neutral-fill-normal);
-  cursor: pointer;
-  flex: none;
-  font: inherit;
-}
-
-.kui-icon-toggle-button[data-shape="rounded"] {
-  --_kui-icon-toggle-button-radius: var(
-    --kui-layout-rounded-radius,
-    calc(1px + 0.6875rem)
-  );
-}
-
-.kui-icon-toggle-button__face {
-  display: grid;
-  border-radius: max(
-    0px,
-    calc(
-      var(--_kui-icon-toggle-button-radius) -
-        var(--_kui-icon-toggle-button-inset) - 1px
-    )
-  );
-  place-items: center;
-  transition:
-    background-color 120ms ease,
-    box-shadow 120ms ease;
-}
-
-.kui-icon-toggle-button:hover:not(:disabled) > .kui-icon-toggle-button__face {
-  background: var(--kui-color-surface);
-}
-
-.kui-icon-toggle-button[aria-pressed="true"] {
-  color: var(--kui-color-brand-on-quiet);
-}
-
-.kui-icon-toggle-button[aria-pressed="true"] > .kui-icon-toggle-button__face {
-  background: var(--kui-color-surface);
-  box-shadow: var(--kui-shadow-s);
-}
-
-.kui-icon-toggle-button:focus-visible {
-  outline: var(--kui-focus-ring);
-  outline-offset: 1px;
-}
-
-.kui-icon-toggle-button:disabled {
-  cursor: default;
-  opacity: 0.5;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .kui-icon-toggle-button__face {
-    transition: none;
-  }
-}

package/dist/styles/icon-button.css

@@ -1,22 +0,0 @@
-/* Web Awesome's own icon-button geometry, for a lone LucideIcon: a square one
-   form control height on each side with the glyph centered. Web Awesome
-   applies it only to a lone wa-icon. */
-.kui-icon-button::part(base) {
-  width: var(--wa-form-control-height);
-  min-width: var(--wa-form-control-height);
-  padding: 0;
-  aspect-ratio: 1;
-  justify-content: center;
-}
-
-.kui-icon-button::part(label) {
-  display: flex;
-  justify-content: center;
-}
-
-/* Beside a field in a ListInsetControl, the square keeps its size instead of
-   growing to share the row, and lines up with the field below its label. */
-.kui-list-inset-control > .kui-icon-button {
-  flex: none;
-  align-self: flex-end;
-}

package/dist/styles/icon-toggle-button.css

@@ -1,83 +0,0 @@
-/* The single contained ToolbarControlGroup's geometry, standalone: a 44px
-   filled, bordered control whose 2px-inset face lifts to the raised surface
-   on hover and stays raised, in the brand foreground, while pressed. */
-.kui-icon-toggle-button {
-  --_kui-icon-toggle-button-radius: var(
-    --kui-layout-pill-radius,
-    calc(1px + 1.3125rem)
-  );
-  --_kui-icon-toggle-button-inset: var(
-    --kui-layout-highlight-inset,
-    0.125rem
-  );
-  /* One full-size track for the face. The button sets its own track and
-     alignment because native or document button styles center content,
-     which would shrink the face to the icon. */
-  display: inline-grid;
-  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
-  place-content: stretch;
-  place-items: stretch;
-  width: 2.75rem;
-  height: 2.75rem;
-  margin: 0;
-  padding: var(--_kui-icon-toggle-button-inset);
-  box-sizing: border-box;
-  border: 1px solid var(--kui-color-neutral-border-normal);
-  border-radius: var(--_kui-icon-toggle-button-radius);
-  color: var(--kui-color-neutral-on-quiet);
-  background: var(--kui-color-neutral-fill-normal);
-  cursor: pointer;
-  flex: none;
-  font: inherit;
-}
-
-.kui-icon-toggle-button[data-shape="rounded"] {
-  --_kui-icon-toggle-button-radius: var(
-    --kui-layout-rounded-radius,
-    calc(1px + 0.6875rem)
-  );
-}
-
-.kui-icon-toggle-button__face {
-  display: grid;
-  border-radius: max(
-    0px,
-    calc(
-      var(--_kui-icon-toggle-button-radius) -
-        var(--_kui-icon-toggle-button-inset) - 1px
-    )
-  );
-  place-items: center;
-  transition:
-    background-color 120ms ease,
-    box-shadow 120ms ease;
-}
-
-.kui-icon-toggle-button:hover:not(:disabled) > .kui-icon-toggle-button__face {
-  background: var(--kui-color-surface);
-}
-
-.kui-icon-toggle-button[aria-pressed="true"] {
-  color: var(--kui-color-brand-on-quiet);
-}
-
-.kui-icon-toggle-button[aria-pressed="true"] > .kui-icon-toggle-button__face {
-  background: var(--kui-color-surface);
-  box-shadow: var(--kui-shadow-s);
-}
-
-.kui-icon-toggle-button:focus-visible {
-  outline: var(--kui-focus-ring);
-  outline-offset: 1px;
-}
-
-.kui-icon-toggle-button:disabled {
-  cursor: default;
-  opacity: 0.5;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .kui-icon-toggle-button__face {
-    transition: none;
-  }
-}

package/dist/token-search-field.d.ts

@@ -1,3 +0,0 @@
-export { T as TokenSearchEditorAttributes, a as TokenSearchField, b as TokenSearchFieldProps, c as TokenSearchFieldValue, j as TokenSearchToken, k as TokenSearchTrailingAction, l as TokenSearchTrailingActionAttributes, p as placeTokenSearchCaret, r as readTokenSearchField } from './token-search-model-aYR0YAei.js';
-import 'kerfjs';
-import './semantic-content-BbzjvSu9.js';

package/dist/token-search-field.js

@@ -1,5 +0,0 @@
-export { TokenSearchField, placeTokenSearchCaret, readTokenSearchField } from './chunk-MF6ZUUJZ.js';
-
-
-
-//# sourceMappingURL=token-search-field.js.map

package/dist/token-search-field.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"token-search-field.js"}

package/dist/token-search-model.d.ts

@@ -1,3 +0,0 @@
-export { d as TokenSearchModel, e as TokenSearchModelOptions, f as TokenSearchResolvedToken, g as TokenSearchRule, h as TokenSearchState, i as TokenSearchSuggestion, m as createTokenSearchModel } from './token-search-model-aYR0YAei.js';
-import 'kerfjs';
-import './semantic-content-BbzjvSu9.js';

package/dist/token-search-model.js

@@ -1,3 +0,0 @@
-export { createTokenSearchModel } from './chunk-IM3GKYOG.js';
-
-//# sourceMappingURL=token-search-model.js.map

package/dist/token-search-model.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"token-search-model.js"}

package/dist/wire-composers.js

@@ -1,3 +0,0 @@
-export { wireComposers } from './chunk-ELCMSQNJ.js';
-
-//# sourceMappingURL=wire-composers.js.map

package/dist/wire-token-search-fields.js

@@ -1,6 +0,0 @@
-export { wireTokenSearchFields } from './chunk-PKL6QJKK.js';
-
-
-
-
-//# sourceMappingURL=wire-token-search-fields.js.map

package/docs/design/templates/composer/chat-dark.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 160" width="600" height="160"><defs><filter id="sh0" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="16"/></filter><clipPath id="cp1"><rect x="29" y="29" width="542" height="33.6"/></clipPath><clipPath id="ct2"><rect x="29" y="29" width="542" height="33.6"/></clipPath><clipPath id="ct3"><rect x="29" y="80.6" width="204.1" height="15"/></clipPath><clipPath id="ct4"><rect x="509.8" y="70.6" width="61.3" height="32"/></clipPath></defs><rect x="20" y="32" width="560" height="91.6" rx="12" fill="rgba(0,0,0,0.32)" filter="url(#sh0)"/><rect x="20" y="20" width="560" height="91.6" rx="12" fill="rgb(44,44,46)"/><rect x="20.5" y="20.5" width="559" height="91" rx="11.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><g clip-path="url(#cp1)"><g clip-path="url(#ct2)"><text x="29" y="51" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(194, 194, 198)">Ask about this build</text></g></g><text x="29" y="92.59" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" fill="rgb(174,174,178)">Answers use the latest nightly build.</text><rect x="509.8" y="70.6" width="61.3" height="32" rx="16" fill="rgb(100,210,255)"/><text x="521.75" y="92.59" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(17,17,19)">Send</text></svg>

package/docs/design/templates/composer/chat.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 160" width="600" height="160"><defs><filter id="sh0" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="16"/></filter><clipPath id="cp1"><rect x="29" y="29" width="542" height="33.6"/></clipPath><clipPath id="ct2"><rect x="29" y="29" width="542" height="33.6"/></clipPath><clipPath id="ct3"><rect x="29" y="80.6" width="204.1" height="15"/></clipPath><clipPath id="ct4"><rect x="509.8" y="70.6" width="61.3" height="32"/></clipPath></defs><rect x="20" y="32" width="560" height="91.6" rx="12" fill="rgba(0,0,0,0.09)" filter="url(#sh0)"/><rect x="20" y="20" width="560" height="91.6" rx="12" fill="rgb(255,255,255)"/><rect x="20.5" y="20.5" width="559" height="91" rx="11.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><g clip-path="url(#cp1)"><g clip-path="url(#ct2)"><text x="29" y="51" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(98, 98, 103)">Ask about this build</text></g></g><text x="29" y="92.59" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" fill="rgb(110,110,115)">Answers use the latest nightly build.</text><rect x="509.8" y="70.6" width="61.3" height="32" rx="16" fill="rgb(0,117,219)"/><text x="521.75" y="92.59" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(255,255,255)">Send</text></svg>

package/docs/design/templates/composer-dark.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 632 460" width="632" height="460"><defs><clipPath id="cp0"><rect x="16" y="38" width="600" height="160"/></clipPath><clipPath id="cp1"><rect x="16" y="236" width="600" height="208"/></clipPath><clipPath id="ct2"><rect x="16" y="16" width="600" height="22"/></clipPath><clipPath id="irc3"><rect x="16" y="38" width="600" height="160" rx="0"/></clipPath><clipPath id="ct5"><rect x="16" y="214" width="600" height="22"/></clipPath><clipPath id="irc6"><rect x="16" y="236" width="600" height="208" rx="0"/></clipPath></defs><rect x="0" y="0" width="632" height="460" rx="0" fill="rgb(28,28,30)"/><text x="16" y="28" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Chat Composer with Hint</text><g clip-path="url(#cp0)"><g clip-path="url(#irc3)"><clipPath id="svgimg4vclip"><rect x="16" y="38" width="600" height="160"/></clipPath><g clip-path="url(#svgimg4vclip)"><g transform="translate(16 38)"><defs><filter id="svgimg4sh0" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="16"/></filter><clipPath id="svgimg4cp1"><rect x="29" y="29" width="542" height="33.6"/></clipPath><clipPath id="svgimg4ct2"><rect x="29" y="29" width="542" height="33.6"/></clipPath><clipPath id="svgimg4ct3"><rect x="29" y="80.6" width="204.1" height="15"/></clipPath><clipPath id="svgimg4ct4"><rect x="509.8" y="70.6" width="61.3" height="32"/></clipPath></defs><rect x="20" y="32" width="560" height="91.6" rx="12" fill="rgba(0,0,0,0.32)" filter="url(#svgimg4sh0)"/><rect x="20" y="20" width="560" height="91.6" rx="12" fill="rgb(44,44,46)"/><rect x="20.5" y="20.5" width="559" height="91" rx="11.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><g clip-path="url(#svgimg4cp1)"><g clip-path="url(#svgimg4ct2)"><text x="29" y="51" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(194, 194, 198)">Ask about this build</text></g></g><text x="29" y="92.59" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" fill="rgb(174,174,178)">Answers use the latest nightly build.</text><rect x="509.8" y="70.6" width="61.3" height="32" rx="16" fill="rgb(100,210,255)"/><text x="521.75" y="92.59" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(17,17,19)">Send</text></g></g></g></g><text x="16" y="226" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Prompt with Taller Bounds</text><g clip-path="url(#cp1)"><g clip-path="url(#irc6)"><clipPath id="svgimg7vclip"><rect x="16" y="236" width="600" height="208"/></clipPath><g clip-path="url(#svgimg7vclip)"><g transform="translate(16 236)"><defs><filter id="svgimg7sh0" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="16"/></filter><clipPath id="svgimg7cp1"><rect x="29" y="29" width="542" height="84.8"/></clipPath><clipPath id="svgimg7ct2"><rect x="29" y="29" width="542" height="84.8"/></clipPath><clipPath id="svgimg7ct3"><rect x="480.2" y="121.8" width="90.8" height="32"/></clipPath></defs><rect x="20" y="32" width="560" height="142.8" rx="12" fill="rgba(0,0,0,0.32)" filter="url(#svgimg7sh0)"/><rect x="20" y="20" width="560" height="142.8" rx="12" fill="rgb(44,44,46)"/><rect x="20.5" y="20.5" width="559" height="142" rx="11.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><g clip-path="url(#svgimg7cp1)"><g clip-path="url(#svgimg7ct2)"><text x="29" y="51" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(194, 194, 198)">Describe the change you want</text></g></g><rect x="480.2" y="121.8" width="90.8" height="32" rx="16" fill="rgb(100,210,255)"/><text x="492.17" y="143.78" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(17,17,19)">Generate</text></g></g></g></g></svg>

package/docs/design/templates/composer.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 632 460" width="632" height="460"><defs><clipPath id="cp0"><rect x="16" y="38" width="600" height="160"/></clipPath><clipPath id="cp1"><rect x="16" y="236" width="600" height="208"/></clipPath><clipPath id="ct2"><rect x="16" y="16" width="600" height="22"/></clipPath><clipPath id="irc3"><rect x="16" y="38" width="600" height="160" rx="0"/></clipPath><clipPath id="ct5"><rect x="16" y="214" width="600" height="22"/></clipPath><clipPath id="irc6"><rect x="16" y="236" width="600" height="208" rx="0"/></clipPath></defs><rect x="0" y="0" width="632" height="460" rx="0" fill="rgb(255,255,255)"/><text x="16" y="28" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Chat Composer with Hint</text><g clip-path="url(#cp0)"><g clip-path="url(#irc3)"><clipPath id="svgimg4vclip"><rect x="16" y="38" width="600" height="160"/></clipPath><g clip-path="url(#svgimg4vclip)"><g transform="translate(16 38)"><defs><filter id="svgimg4sh0" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="16"/></filter><clipPath id="svgimg4cp1"><rect x="29" y="29" width="542" height="33.6"/></clipPath><clipPath id="svgimg4ct2"><rect x="29" y="29" width="542" height="33.6"/></clipPath><clipPath id="svgimg4ct3"><rect x="29" y="80.6" width="204.1" height="15"/></clipPath><clipPath id="svgimg4ct4"><rect x="509.8" y="70.6" width="61.3" height="32"/></clipPath></defs><rect x="20" y="32" width="560" height="91.6" rx="12" fill="rgba(0,0,0,0.09)" filter="url(#svgimg4sh0)"/><rect x="20" y="20" width="560" height="91.6" rx="12" fill="rgb(255,255,255)"/><rect x="20.5" y="20.5" width="559" height="91" rx="11.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><g clip-path="url(#svgimg4cp1)"><g clip-path="url(#svgimg4ct2)"><text x="29" y="51" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(98, 98, 103)">Ask about this build</text></g></g><text x="29" y="92.59" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" fill="rgb(110,110,115)">Answers use the latest nightly build.</text><rect x="509.8" y="70.6" width="61.3" height="32" rx="16" fill="rgb(0,117,219)"/><text x="521.75" y="92.59" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(255,255,255)">Send</text></g></g></g></g><text x="16" y="226" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Prompt with Taller Bounds</text><g clip-path="url(#cp1)"><g clip-path="url(#irc6)"><clipPath id="svgimg7vclip"><rect x="16" y="236" width="600" height="208"/></clipPath><g clip-path="url(#svgimg7vclip)"><g transform="translate(16 236)"><defs><filter id="svgimg7sh0" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="16"/></filter><clipPath id="svgimg7cp1"><rect x="29" y="29" width="542" height="84.8"/></clipPath><clipPath id="svgimg7ct2"><rect x="29" y="29" width="542" height="84.8"/></clipPath><clipPath id="svgimg7ct3"><rect x="480.2" y="121.8" width="90.8" height="32"/></clipPath></defs><rect x="20" y="32" width="560" height="142.8" rx="12" fill="rgba(0,0,0,0.09)" filter="url(#svgimg7sh0)"/><rect x="20" y="20" width="560" height="142.8" rx="12" fill="rgb(255,255,255)"/><rect x="20.5" y="20.5" width="559" height="142" rx="11.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><g clip-path="url(#svgimg7cp1)"><g clip-path="url(#svgimg7ct2)"><text x="29" y="51" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(98, 98, 103)">Describe the change you want</text></g></g><rect x="480.2" y="121.8" width="90.8" height="32" rx="16" fill="rgb(0,117,219)"/><text x="492.17" y="143.78" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(255,255,255)">Generate</text></g></g></g></g></svg>