@kerfjs/ui 5.0.0-beta.10 → 5.0.0-beta.101

package/docs/composer.md

@@ -0,0 +1,143 @@
+# Composer
+
+`Composer` (`@kerfjs/ui/composer`, CSS `@kerfjs/ui/composer.css`) is the chat
+or prompt composer: the place a person writes a message, assistant prompt, or
+reply and sends it with a trailing action. It replaces app-owned composer
+chrome, such as a `wa-textarea` and a button wrapped in application CSS that
+draws a frame, a focus border, and a shadow.
+
+## Contract
+
+```tsx
+<Composer
+  id="assistant-message"
+  name="message"
+  label="Message"
+  placeholder="Ask about this build"
+  hint="Answers use the latest nightly build."
+  minRows={1}
+  maxRows={8}
+  actions={
+    <wa-button variant="brand" data-action="send-message">
+      Send
+    </wa-button>
+  }
+/>
+```
+
+- **Frame.** The root is a raised surface (`--kui-color-surface-raised`) with
+  the standard 1px neutral border, the large radius (`--kui-radius-l`), and
+  `--kui-shadow-l`. While focus is anywhere within it, including on a trailing
+  action, the border turns `--kui-color-brand-border-loud`. The frame owns
+  8px padding, so a composer placed 8px from a container edge puts its text on
+  the same 17px column as a `List` of content items beside it.
+- **Field.** A native, borderless `<textarea>` named by `label`. It sizes to
+  its content with `field-sizing: content`, between `minRows` (default 1) and
+  `maxRows` (default 8) lines, and scrolls past the maximum. Both bounds are
+  positive integers, and `maxRows` is at least `minRows`; otherwise `Composer`
+  throws a `RangeError`. In an engine without `field-sizing`, the field keeps
+  a fixed height of three lines, clamped to the bounds, and scrolls.
+- **Action row.** Below the field: an optional quiet `hint` at the text start
+  and the trailing `actions`, normally one brand Send button. With an `id`,
+  the hint is the field's accessible description (`<id>-hint`).
+- **Value.** `value` seeds the field (a restored draft, or `''`). The app
+  reads the textarea in its send action, clears it, and re-renders.
+- **Disabled.** `disabled` disables the field; the app disables or marks busy
+  its own actions.
+- **Placement.** `slot` assigns it to a web component slot, such as a
+  `wa-dialog`'s `footer`. `rootAttributes` takes safe `data-*` identity.
+- **Enter to send.** `submitOnEnter` opts in to the keyboard contract below;
+  it marks the root `data-submit-on-enter="true"` (protected from
+  `rootAttributes`) and gives the field `aria-keyshortcuts="Enter"`.
+
+The app owns sending, any other keyboard shortcut, what a sent message looks
+like, and where the composer sits.
+
+## Enter to send
+
+Set `submitOnEnter` and call `wireComposers` once over an ancestor of every
+such composer; it returns a disposer:
+
+```ts
+import { wireComposers } from '@kerfjs/ui/wire-composers';
+
+const stopComposers = wireComposers(app);
+```
+
+In an opted-in composer's field:
+
+| Key                                          | Result                                                                                                    |
+| -------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
+| Enter, Cmd+Enter, Ctrl+Enter                 | Clicks the composer's **first trailing action**; the newline is suppressed.                               |
+| Shift+Enter, Alt+Enter                       | Inserts a newline, as in any textarea.                                                                    |
+| Enter committing an IME composition          | Left to the input method: `isComposing`, keyCode 229, or between `compositionstart` and `compositionend`. |
+| Enter on an empty or whitespace-only message | Nothing: no send and no newline.                                                                          |
+| Auto-repeating Enter (key held down)         | Nothing.                                                                                                  |
+
+The first trailing action is the first `wa-button`, `button`, or
+`[data-action]` element inside `actions`. Clicking it means the keyboard send
+runs the same delegated `data-action` handler as a pointer send, so the app
+writes one send handler that reads the field, clears it, and re-renders. The
+click does not move focus, so the person keeps typing. Nothing is sent while
+the field is `disabled`, or while that action has a `disabled` attribute or
+property, a `loading` attribute (a busy `wa-button`), or
+`aria-disabled="true"`; the Enter is still suppressed, so a message waiting on
+a busy Send does not gain a newline.
+
+Leave `submitOnEnter` off for a long-form prompt where Enter should be a
+newline, and send with the action alone. A visible `hint` may also state the
+shortcut ("Enter to send, Shift+Enter for a new line") when the audience may
+not expect it; `aria-keyshortcuts` already announces it to assistive
+technology.
+
+## In a chat dialog
+
+A chat dialog floats the composer over its transcript. Use a `DialogSurface`
+with `bodyLayout="fill-last"` and `footerPresentation="floating"` (and
+`footerInset="none"`, since the composer draws its own frame), and slot the
+composer into the footer:
+
+```tsx
+<DialogSurface height={remify(560)} bodyInset="none" bodyLayout="fill-last" footerPresentation="floating" footerOffset={remify(8)} footerInset="none">
+  <wa-dialog id="assistant" label="Assistant">
+    <StateBanner title="Answers use the latest nightly build." tone="neutral" />
+    <List gap="xs" controlInsets="tb" scrollable scrollClearance="block-end">{messages}</List>
+    <Composer submitOnEnter slot="footer" id="assistant-message" name="message" label="Message" placeholder="Ask about this build" actions={send} />
+  </wa-dialog>
+</DialogSurface>;
+```
+
+The floating footer is transparent, so the composer's own frame and shadow
+lift it over the transcript. The transcript's `scrollClearance="block-end"`
+lets messages scroll visibly beneath the composer while the last one still
+comes to rest above it, following the composer's measured height as it grows.
+Without the opt-in, the dialog body reserves that height below the transcript
+instead.
+
+## Do not
+
+- Wrap it in a framed `ContentItem`, card, or bordered container; it owns its
+  frame, padding, and shadow.
+- Style its field, frame, or action row from application CSS. A variation it
+  does not offer is a component gap.
+- Use it for an ordinary form field submitted with the rest of a form; use
+  `wa-textarea` with a `FieldLabel`.
+
+## Verification
+
+`tests/unit/composer.test.tsx` covers serialization, the hint description,
+row bounds, and protected attributes; `tests/unit/wire-composers.test.tsx`
+covers the Enter-to-send matrix (modifiers, IME, empty, repeat, disabled
+field and actions, first action only, disposal). `tests/browser/composer.spec.ts` covers
+the focus-within border, growth up to `maxRows` and then scrolling, the action
+row geometry, and the send flow at wide and phone widths, and, in Chromium,
+Firefox, and WebKit, Enter, Shift+Enter, Cmd/Ctrl+Enter, empty messages, and
+IME composition (dispatched composition events and keyCode 229). In
+Chromium it also drives a real IME composition through the DevTools protocol
+(`Input.imeSetComposition`, then `Input.insertText` to commit). That test
+asserts the engine's own event order: an Enter keydown flagged `isComposing`
+while composing, the committing `Process` keydown with keyCode 229, then
+`compositionend`. None of those sends, the committed text lands in the field,
+and the next Enter sends it;
+`tests/browser/surface-scaffold.spec.ts` covers the composer in the floating
+footer of the chat dialog, including Enter to send.

package/docs/design/templates/choice-chips/color-palette-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 136" width="600" height="136"><defs><clipPath id="cp0"><rect x="51" y="29" width="82.9" height="14"/></clipPath><clipPath id="ct1"><rect x="51" y="29" width="82.9" height="14"/></clipPath><clipPath id="ishc2"><rect x="33" y="30" width="12" height="12" rx="6"/></clipPath><clipPath id="ishc3"><rect x="155.9" y="21" width="72.1" height="30" rx="15"/></clipPath><clipPath id="ishc4"><rect x="167.9" y="30" width="12" height="12" rx="6"/></clipPath><clipPath id="cp5"><rect x="185.9" y="29" width="30.1" height="14"/></clipPath><clipPath id="ct6"><rect x="185.9" y="29" width="30.1" height="14"/></clipPath><clipPath id="ishc7"><rect x="249.9" y="30" width="12" height="12" rx="6"/></clipPath><clipPath id="cp8"><rect x="267.9" y="29" width="41" height="14"/></clipPath><clipPath id="ct9"><rect x="267.9" y="29" width="41" height="14"/></clipPath><clipPath id="ishc10"><rect x="343" y="30" width="12" height="12" rx="6"/></clipPath><clipPath id="cp11"><rect x="361" y="29" width="50.1" height="14"/></clipPath><clipPath id="ct12"><rect x="361" y="29" width="50.1" height="14"/></clipPath><clipPath id="ishc13"><rect x="445" y="30" width="12" height="12" rx="6"/></clipPath><clipPath id="cp14"><rect x="463" y="29" width="26.3" height="14"/></clipPath><clipPath id="ct15"><rect x="463" y="29" width="26.3" height="14"/></clipPath><clipPath id="ishc16"><rect x="33" y="70" width="12" height="12" rx="6"/></clipPath><clipPath id="cp17"><rect x="51" y="69" width="44.5" height="14"/></clipPath><clipPath id="ct18"><rect x="51" y="69" width="44.5" height="14"/></clipPath><clipPath id="ishc19"><rect x="129.5" y="70" width="12" height="12" rx="6"/></clipPath><clipPath id="cp20"><rect x="147.5" y="69" width="29.6" height="14"/></clipPath><clipPath id="ct21"><rect x="147.5" y="69" width="29.6" height="14"/></clipPath><clipPath id="ishc22"><rect x="211.2" y="70" width="12" height="12" rx="6"/></clipPath><clipPath id="cp23"><rect x="229.2" y="69" width="27.8" height="14"/></clipPath><clipPath id="ct24"><rect x="229.2" y="69" width="27.8" height="14"/></clipPath><clipPath id="ishc25"><rect x="291" y="70" width="12" height="12" rx="6"/></clipPath><clipPath id="cp26"><rect x="309" y="69" width="32.1" height="14"/></clipPath><clipPath id="ct27"><rect x="309" y="69" width="32.1" height="14"/></clipPath></defs><rect x="20" y="20" width="126.9" height="32" rx="16" fill="rgb(28,28,30)"/><rect x="20.5" y="20.5" width="126" height="31" rx="15.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><g clip-path="url(#cp0)"><g clip-path="url(#ct1)"><text x="51" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(245,245,247)">Transparent</text></g></g><g clip-path="url(#ishc2)"><path d="M29 26h20v20H29zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(250,250,255,0.32)" fill-rule="evenodd"/></g><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::after" data-domotion-pseudo-owner="source-fragments"><g transform="rotate(45 33.636 80.28)scale(.15686 1.2549)"><rect x="34.2" y="31.2" width="9.6" height="9.6" rx="1" ry="1" fill="rgb(255, 105, 108)"/></g></g><rect x="154.9" y="20" width="74.1" height="32" rx="16" fill="rgb(40,57,66)"/><g clip-path="url(#ishc3)"><path d="M151.9 17h80v38h-80zm19 5h42a14 14 0 0 1 14 14 14 14 0 0 1-14 14h-42a14 14 0 0 1-14-14 14 14 0 0 1 14-14" fill="rgb(100,210,255)" fill-rule="evenodd"/></g><rect x="155.5" y="20.5" width="73" height="31" rx="15.5" fill="none" stroke="rgb(100,210,255)" stroke-width="1"/><rect x="167.9" y="30" width="12" height="12" rx="6" fill="rgb(59,130,246)"/><g clip-path="url(#ishc4)"><path d="M163.9 26h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(245,245,247,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#cp5)"><g clip-path="url(#ct6)"><text x="185.86" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(138,203,255)">Blue</text></g></g><rect x="236.9" y="20" width="85" height="32" rx="16" fill="rgb(28,28,30)"/><rect x="237.5" y="20.5" width="84" height="31" rx="15.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><rect x="249.9" y="30" width="12" height="12" rx="6" fill="rgb(34,197,94)"/><g clip-path="url(#ishc7)"><path d="M245.9 26h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(245,245,247,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#cp8)"><g clip-path="url(#ct9)"><text x="267.94" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(245,245,247)">Green</text></g></g><rect x="330" y="20" width="94.1" height="32" rx="16" fill="rgb(28,28,30)"/><rect x="330.5" y="20.5" width="93" height="31" rx="15.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><rect x="343" y="30" width="12" height="12" rx="6" fill="rgb(249,115,22)"/><g clip-path="url(#ishc10)"><path d="M339 26h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(245,245,247,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#cp11)"><g clip-path="url(#ct12)"><text x="360.95" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(245,245,247)">Orange</text></g></g><rect x="432" y="20" width="70.3" height="32" rx="16" fill="rgb(28,28,30)"/><rect x="432.5" y="20.5" width="69" height="31" rx="15.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><rect x="445" y="30" width="12" height="12" rx="6" fill="rgb(239,68,68)"/><g clip-path="url(#ishc13)"><path d="M441 26h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(245,245,247,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#cp14)"><g clip-path="url(#ct15)"><text x="463.02" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(245,245,247)">Red</text></g></g><rect x="20" y="60" width="88.5" height="32" rx="16" fill="rgb(28,28,30)"/><rect x="20.5" y="60.5" width="88" height="31" rx="15.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><rect x="33" y="70" width="12" height="12" rx="6" fill="rgb(168,85,247)"/><g clip-path="url(#ishc16)"><path d="M29 66h20v20H29zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(245,245,247,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#cp17)"><g clip-path="url(#ct18)"><text x="51" y="81" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(245,245,247)">Purple</text></g></g><rect x="116.5" y="60" width="73.6" height="32" rx="16" fill="rgb(28,28,30)"/><rect x="117.5" y="60.5" width="72" height="31" rx="15.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><rect x="129.5" y="70" width="12" height="12" rx="6" fill="rgb(236,72,153)"/><g clip-path="url(#ishc19)"><path d="M125.5 66h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(245,245,247,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#cp20)"><g clip-path="url(#ct21)"><text x="147.52" y="81" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(245,245,247)">Pink</text></g></g><rect x="198.2" y="60" width="71.8" height="32" rx="16" fill="rgb(28,28,30)"/><rect x="198.5" y="60.5" width="71" height="31" rx="15.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><rect x="211.2" y="70" width="12" height="12" rx="6" fill="rgb(20,184,166)"/><g clip-path="url(#ishc22)"><path d="M207.2 66h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(245,245,247,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#cp23)"><g clip-path="url(#ct24)"><text x="229.16" y="81" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(245,245,247)">Teal</text></g></g><rect x="278" y="60" width="76.1" height="32" rx="16" fill="rgb(28,28,30)"/><rect x="278.5" y="60.5" width="75" height="31" rx="15.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><rect x="291" y="70" width="12" height="12" rx="6" fill="rgb(107,114,128)"/><g clip-path="url(#ishc25)"><path d="M287 66h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(245,245,247,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#cp26)"><g clip-path="url(#ct27)"><text x="308.97" y="81" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(245,245,247)">Gray</text></g></g></svg>

package/docs/design/templates/choice-chips/color-palette.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 136" width="600" height="136"><defs><clipPath id="cp0"><rect x="51" y="29" width="82.9" height="14"/></clipPath><clipPath id="ct1"><rect x="51" y="29" width="82.9" height="14"/></clipPath><clipPath id="ishc2"><rect x="33" y="30" width="12" height="12" rx="6"/></clipPath><clipPath id="ishc3"><rect x="155.9" y="21" width="72.1" height="30" rx="15"/></clipPath><clipPath id="ishc4"><rect x="167.9" y="30" width="12" height="12" rx="6"/></clipPath><clipPath id="cp5"><rect x="185.9" y="29" width="30.1" height="14"/></clipPath><clipPath id="ct6"><rect x="185.9" y="29" width="30.1" height="14"/></clipPath><clipPath id="ishc7"><rect x="249.9" y="30" width="12" height="12" rx="6"/></clipPath><clipPath id="cp8"><rect x="267.9" y="29" width="41" height="14"/></clipPath><clipPath id="ct9"><rect x="267.9" y="29" width="41" height="14"/></clipPath><clipPath id="ishc10"><rect x="343" y="30" width="12" height="12" rx="6"/></clipPath><clipPath id="cp11"><rect x="361" y="29" width="50.1" height="14"/></clipPath><clipPath id="ct12"><rect x="361" y="29" width="50.1" height="14"/></clipPath><clipPath id="ishc13"><rect x="445" y="30" width="12" height="12" rx="6"/></clipPath><clipPath id="cp14"><rect x="463" y="29" width="26.3" height="14"/></clipPath><clipPath id="ct15"><rect x="463" y="29" width="26.3" height="14"/></clipPath><clipPath id="ishc16"><rect x="33" y="70" width="12" height="12" rx="6"/></clipPath><clipPath id="cp17"><rect x="51" y="69" width="44.5" height="14"/></clipPath><clipPath id="ct18"><rect x="51" y="69" width="44.5" height="14"/></clipPath><clipPath id="ishc19"><rect x="129.5" y="70" width="12" height="12" rx="6"/></clipPath><clipPath id="cp20"><rect x="147.5" y="69" width="29.6" height="14"/></clipPath><clipPath id="ct21"><rect x="147.5" y="69" width="29.6" height="14"/></clipPath><clipPath id="ishc22"><rect x="211.2" y="70" width="12" height="12" rx="6"/></clipPath><clipPath id="cp23"><rect x="229.2" y="69" width="27.8" height="14"/></clipPath><clipPath id="ct24"><rect x="229.2" y="69" width="27.8" height="14"/></clipPath><clipPath id="ishc25"><rect x="291" y="70" width="12" height="12" rx="6"/></clipPath><clipPath id="cp26"><rect x="309" y="69" width="32.1" height="14"/></clipPath><clipPath id="ct27"><rect x="309" y="69" width="32.1" height="14"/></clipPath></defs><rect x="20" y="20" width="126.9" height="32" rx="16" fill="rgb(255,255,255)"/><rect x="20.5" y="20.5" width="126" height="31" rx="15.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><g clip-path="url(#cp0)"><g clip-path="url(#ct1)"><text x="51" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(29,29,31)">Transparent</text></g></g><g clip-path="url(#ishc2)"><path d="M29 26h20v20H29zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(0,0,13,0.318)" fill-rule="evenodd"/></g><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::after" data-domotion-pseudo-owner="source-fragments"><g transform="rotate(45 33.636 80.28)scale(.15686 1.2549)"><rect x="34.2" y="31.2" width="9.6" height="9.6" rx="1" ry="1" fill="rgb(194, 11, 32)"/></g></g><rect x="154.9" y="20" width="74.1" height="32" rx="16" fill="rgb(214,233,249)"/><g clip-path="url(#ishc3)"><path d="M151.9 17h80v38h-80zm19 5h42a14 14 0 0 1 14 14 14 14 0 0 1-14 14h-42a14 14 0 0 1-14-14 14 14 0 0 1 14-14" fill="rgb(0,117,219)" fill-rule="evenodd"/></g><rect x="155.5" y="20.5" width="73" height="31" rx="15.5" fill="none" stroke="rgb(0,117,219)" stroke-width="1"/><rect x="167.9" y="30" width="12" height="12" rx="6" fill="rgb(59,130,246)"/><g clip-path="url(#ishc4)"><path d="M163.9 26h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(29,29,31,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#cp5)"><g clip-path="url(#ct6)"><text x="185.86" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(26,93,207)">Blue</text></g></g><rect x="236.9" y="20" width="85" height="32" rx="16" fill="rgb(255,255,255)"/><rect x="237.5" y="20.5" width="84" height="31" rx="15.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><rect x="249.9" y="30" width="12" height="12" rx="6" fill="rgb(34,197,94)"/><g clip-path="url(#ishc7)"><path d="M245.9 26h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(29,29,31,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#cp8)"><g clip-path="url(#ct9)"><text x="267.94" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(29,29,31)">Green</text></g></g><rect x="330" y="20" width="94.1" height="32" rx="16" fill="rgb(255,255,255)"/><rect x="330.5" y="20.5" width="93" height="31" rx="15.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><rect x="343" y="30" width="12" height="12" rx="6" fill="rgb(249,115,22)"/><g clip-path="url(#ishc10)"><path d="M339 26h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(29,29,31,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#cp11)"><g clip-path="url(#ct12)"><text x="360.95" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(29,29,31)">Orange</text></g></g><rect x="432" y="20" width="70.3" height="32" rx="16" fill="rgb(255,255,255)"/><rect x="432.5" y="20.5" width="69" height="31" rx="15.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><rect x="445" y="30" width="12" height="12" rx="6" fill="rgb(239,68,68)"/><g clip-path="url(#ishc13)"><path d="M441 26h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(29,29,31,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#cp14)"><g clip-path="url(#ct15)"><text x="463.02" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(29,29,31)">Red</text></g></g><rect x="20" y="60" width="88.5" height="32" rx="16" fill="rgb(255,255,255)"/><rect x="20.5" y="60.5" width="88" height="31" rx="15.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><rect x="33" y="70" width="12" height="12" rx="6" fill="rgb(168,85,247)"/><g clip-path="url(#ishc16)"><path d="M29 66h20v20H29zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(29,29,31,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#cp17)"><g clip-path="url(#ct18)"><text x="51" y="81" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(29,29,31)">Purple</text></g></g><rect x="116.5" y="60" width="73.6" height="32" rx="16" fill="rgb(255,255,255)"/><rect x="117.5" y="60.5" width="72" height="31" rx="15.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><rect x="129.5" y="70" width="12" height="12" rx="6" fill="rgb(236,72,153)"/><g clip-path="url(#ishc19)"><path d="M125.5 66h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(29,29,31,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#cp20)"><g clip-path="url(#ct21)"><text x="147.52" y="81" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(29,29,31)">Pink</text></g></g><rect x="198.2" y="60" width="71.8" height="32" rx="16" fill="rgb(255,255,255)"/><rect x="198.5" y="60.5" width="71" height="31" rx="15.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><rect x="211.2" y="70" width="12" height="12" rx="6" fill="rgb(20,184,166)"/><g clip-path="url(#ishc22)"><path d="M207.2 66h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(29,29,31,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#cp23)"><g clip-path="url(#ct24)"><text x="229.16" y="81" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(29,29,31)">Teal</text></g></g><rect x="278" y="60" width="76.1" height="32" rx="16" fill="rgb(255,255,255)"/><rect x="278.5" y="60.5" width="75" height="31" rx="15.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><rect x="291" y="70" width="12" height="12" rx="6" fill="rgb(107,114,128)"/><g clip-path="url(#ishc25)"><path d="M287 66h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(29,29,31,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#cp26)"><g clip-path="url(#ct27)"><text x="308.97" y="81" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(29,29,31)">Gray</text></g></g></svg>

package/docs/design/templates/choice-chips/compact-icons-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 80" width="600" height="80"><defs><clipPath id="ishc0"><rect x="21" y="21" width="67.3" height="22" rx="11"/></clipPath><clipPath id="cp1"><rect x="29" y="26" width="12" height="12"/></clipPath><clipPath id="cp3"><rect x="45" y="26" width="35.3" height="12"/></clipPath><clipPath id="ct4"><rect x="45" y="26" width="35.3" height="12"/></clipPath><clipPath id="cp5"><rect x="106" y="26" width="12.3" height="12"/></clipPath><clipPath id="cp7"><rect x="122.3" y="26" width="22" height="12"/></clipPath><clipPath id="ct8"><rect x="122.3" y="26" width="22" height="12"/></clipPath></defs><rect x="20" y="20" width="69.3" height="24" rx="12" fill="rgb(40,57,66)"/><g clip-path="url(#ishc0)"><path d="M17 17h75.3v30H17zm15 5h45.3a10 10 0 0 1 10 10 10 10 0 0 1-10 10H32a10 10 0 0 1-10-10 10 10 0 0 1 10-10" fill="rgb(100,210,255)" fill-rule="evenodd"/></g><rect x="20.5" y="20.5" width="68" height="23" rx="11.5" fill="none" stroke="rgb(100,210,255)" stroke-width="1"/><g clip-path="url(#cp1)"><g color="rgb(138, 203, 255)"><clipPath id="svgic2"><rect x="29" y="26" width="12" height="12"/></clipPath><g clip-path="url(#svgic2)"><g transform="matrix(.5 0 0 .5 29 26)"><rect width="18" height="18" x="3" y="3" rx="2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M15 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g clip-path="url(#cp3)"><g clip-path="url(#ct4)"><text x="45" y="36" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(138,203,255)">Board</text></g></g><rect x="97.3" y="20" width="56" height="24" rx="12" fill="rgb(28,28,30)"/><rect x="97.5" y="20.5" width="55" height="23" rx="11.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><g clip-path="url(#cp5)"><g color="rgb(245, 245, 247)"><clipPath id="svgic6"><rect x="106.3" y="26" width="12" height="12"/></clipPath><g clip-path="url(#svgic6)"><g transform="matrix(.5 0 0 .5 106.344 26)"><path d="M3 5z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 12z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 19z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 5h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 12h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 19h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g clip-path="url(#cp7)"><g clip-path="url(#ct8)"><text x="122.34" y="36" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(245,245,247)">List</text></g></g></svg>

package/docs/design/templates/choice-chips/compact-icons.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 80" width="600" height="80"><defs><clipPath id="ishc0"><rect x="21" y="21" width="67.3" height="22" rx="11"/></clipPath><clipPath id="cp1"><rect x="29" y="26" width="12" height="12"/></clipPath><clipPath id="cp3"><rect x="45" y="26" width="35.3" height="12"/></clipPath><clipPath id="ct4"><rect x="45" y="26" width="35.3" height="12"/></clipPath><clipPath id="cp5"><rect x="106" y="26" width="12.3" height="12"/></clipPath><clipPath id="cp7"><rect x="122.3" y="26" width="22" height="12"/></clipPath><clipPath id="ct8"><rect x="122.3" y="26" width="22" height="12"/></clipPath></defs><rect x="20" y="20" width="69.3" height="24" rx="12" fill="rgb(214,233,249)"/><g clip-path="url(#ishc0)"><path d="M17 17h75.3v30H17zm15 5h45.3a10 10 0 0 1 10 10 10 10 0 0 1-10 10H32a10 10 0 0 1-10-10 10 10 0 0 1 10-10" fill="rgb(0,117,219)" fill-rule="evenodd"/></g><rect x="20.5" y="20.5" width="68" height="23" rx="11.5" fill="none" stroke="rgb(0,117,219)" stroke-width="1"/><g clip-path="url(#cp1)"><g color="rgb(26, 93, 207)"><clipPath id="svgic2"><rect x="29" y="26" width="12" height="12"/></clipPath><g clip-path="url(#svgic2)"><g transform="matrix(.5 0 0 .5 29 26)"><rect width="18" height="18" x="3" y="3" rx="2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(26, 93, 207)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(26, 93, 207)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M15 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(26, 93, 207)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g clip-path="url(#cp3)"><g clip-path="url(#ct4)"><text x="45" y="36" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(26,93,207)">Board</text></g></g><rect x="97.3" y="20" width="56" height="24" rx="12" fill="rgb(255,255,255)"/><rect x="97.5" y="20.5" width="55" height="23" rx="11.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><g clip-path="url(#cp5)"><g color="rgb(29, 29, 31)"><clipPath id="svgic6"><rect x="106.3" y="26" width="12" height="12"/></clipPath><g clip-path="url(#svgic6)"><g transform="matrix(.5 0 0 .5 106.344 26)"><path d="M3 5z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 12z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 19z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 5h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 12h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 19h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g clip-path="url(#cp7)"><g clip-path="url(#ct8)"><text x="122.34" y="36" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(29,29,31)">List</text></g></g></svg>

package/docs/design/templates/choice-chips/multiple-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 88" width="600" height="88"><defs><clipPath id="ishc0"><rect x="21" y="21" width="68.8" height="30" rx="15"/></clipPath><clipPath id="ishc1"><rect x="33" y="30" width="12" height="12" rx="6"/></clipPath><clipPath id="cp2"><rect x="51" y="29" width="26.8" height="14"/></clipPath><clipPath id="ct3"><rect x="51" y="29" width="26.8" height="14"/></clipPath><clipPath id="ishc4"><rect x="111.8" y="30" width="12" height="12" rx="6"/></clipPath><clipPath id="cp5"><rect x="129.8" y="29" width="52.3" height="14"/></clipPath><clipPath id="ct6"><rect x="129.8" y="29" width="52.3" height="14"/></clipPath><clipPath id="ishc7"><rect x="204.1" y="21" width="76.4" height="30" rx="15"/></clipPath><clipPath id="ishc8"><rect x="216.1" y="30" width="12" height="12" rx="6"/></clipPath><clipPath id="cp9"><rect x="234.1" y="29" width="34.4" height="14"/></clipPath><clipPath id="ct10"><rect x="234.1" y="29" width="34.4" height="14"/></clipPath><clipPath id="ishc11"><rect x="302.5" y="30" width="12" height="12" rx="6"/></clipPath><clipPath id="cp12"><rect x="320.5" y="29" width="47.2" height="14"/></clipPath><clipPath id="ct13"><rect x="320.5" y="29" width="47.2" height="14"/></clipPath><clipPath id="ishc14"><rect x="401.7" y="30" width="12" height="12" rx="6"/></clipPath><clipPath id="cp15"><rect x="419.7" y="29" width="41.1" height="14"/></clipPath><clipPath id="ct16"><rect x="419.7" y="29" width="41.1" height="14"/></clipPath></defs><rect x="20" y="20" width="70.8" height="32" rx="16" fill="rgb(40,57,66)"/><g clip-path="url(#ishc0)"><path d="M17 17h76.8v38H17zm19 5h38.8a14 14 0 0 1 14 14 14 14 0 0 1-14 14H36a14 14 0 0 1-14-14 14 14 0 0 1 14-14" fill="rgb(100,210,255)" fill-rule="evenodd"/></g><rect x="20.5" y="20.5" width="70" height="31" rx="15.5" fill="none" stroke="rgb(100,210,255)" stroke-width="1"/><rect x="33" y="30" width="12" height="12" rx="6" fill="rgb(239,68,68)"/><g clip-path="url(#ishc1)"><path d="M29 26h20v20H29zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(245,245,247,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#cp2)"><g clip-path="url(#ct3)"><text x="51" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(138,203,255)">Bug</text></g></g><rect x="98.8" y="20" width="96.3" height="32" rx="16" fill="rgb(28,28,30)"/><rect x="99.5" y="20.5" width="95" height="31" rx="15.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><rect x="111.8" y="30" width="12" height="12" rx="6" fill="rgb(59,130,246)"/><g clip-path="url(#ishc4)"><path d="M107.8 26h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(245,245,247,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#cp5)"><g clip-path="url(#ct6)"><text x="129.81" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(245,245,247)">Feature</text></g></g><rect x="203.1" y="20" width="78.4" height="32" rx="16" fill="rgb(40,57,66)"/><g clip-path="url(#ishc7)"><path d="M200.1 17h84.4v38h-84.4zm19 5h46.4a14 14 0 0 1 14 14 14 14 0 0 1-14 14h-46.4a14 14 0 0 1-14-14 14 14 0 0 1 14-14" fill="rgb(100,210,255)" fill-rule="evenodd"/></g><rect x="203.5" y="20.5" width="77" height="31" rx="15.5" fill="none" stroke="rgb(100,210,255)" stroke-width="1"/><rect x="216.1" y="30" width="12" height="12" rx="6" fill="rgb(34,197,94)"/><g clip-path="url(#ishc8)"><path d="M212.1 26h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(245,245,247,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#cp9)"><g clip-path="url(#ct10)"><text x="234.06" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(138,203,255)">Docs</text></g></g><rect x="289.5" y="20" width="91.2" height="32" rx="16" fill="rgb(28,28,30)"/><rect x="289.5" y="20.5" width="91" height="31" rx="15.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><rect x="302.5" y="30" width="12" height="12" rx="6" fill="rgb(168,85,247)"/><g clip-path="url(#ishc11)"><path d="M298.5 26h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(245,245,247,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#cp12)"><g clip-path="url(#ct13)"><text x="320.47" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(245,245,247)">Design</text></g></g><rect x="388.7" y="20" width="85.1" height="32" rx="16" fill="rgb(28,28,30)"/><rect x="389.5" y="20.5" width="84" height="31" rx="15.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><rect x="401.7" y="30" width="12" height="12" rx="6" fill="rgb(107,114,128)"/><g clip-path="url(#ishc14)"><path d="M397.7 26h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(245,245,247,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#cp15)"><g clip-path="url(#ct16)"><text x="419.7" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(245,245,247)">Chore</text></g></g></svg>

package/docs/design/templates/choice-chips/multiple.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 88" width="600" height="88"><defs><clipPath id="ishc0"><rect x="21" y="21" width="68.8" height="30" rx="15"/></clipPath><clipPath id="ishc1"><rect x="33" y="30" width="12" height="12" rx="6"/></clipPath><clipPath id="cp2"><rect x="51" y="29" width="26.8" height="14"/></clipPath><clipPath id="ct3"><rect x="51" y="29" width="26.8" height="14"/></clipPath><clipPath id="ishc4"><rect x="111.8" y="30" width="12" height="12" rx="6"/></clipPath><clipPath id="cp5"><rect x="129.8" y="29" width="52.3" height="14"/></clipPath><clipPath id="ct6"><rect x="129.8" y="29" width="52.3" height="14"/></clipPath><clipPath id="ishc7"><rect x="204.1" y="21" width="76.4" height="30" rx="15"/></clipPath><clipPath id="ishc8"><rect x="216.1" y="30" width="12" height="12" rx="6"/></clipPath><clipPath id="cp9"><rect x="234.1" y="29" width="34.4" height="14"/></clipPath><clipPath id="ct10"><rect x="234.1" y="29" width="34.4" height="14"/></clipPath><clipPath id="ishc11"><rect x="302.5" y="30" width="12" height="12" rx="6"/></clipPath><clipPath id="cp12"><rect x="320.5" y="29" width="47.2" height="14"/></clipPath><clipPath id="ct13"><rect x="320.5" y="29" width="47.2" height="14"/></clipPath><clipPath id="ishc14"><rect x="401.7" y="30" width="12" height="12" rx="6"/></clipPath><clipPath id="cp15"><rect x="419.7" y="29" width="41.1" height="14"/></clipPath><clipPath id="ct16"><rect x="419.7" y="29" width="41.1" height="14"/></clipPath></defs><rect x="20" y="20" width="70.8" height="32" rx="16" fill="rgb(214,233,249)"/><g clip-path="url(#ishc0)"><path d="M17 17h76.8v38H17zm19 5h38.8a14 14 0 0 1 14 14 14 14 0 0 1-14 14H36a14 14 0 0 1-14-14 14 14 0 0 1 14-14" fill="rgb(0,117,219)" fill-rule="evenodd"/></g><rect x="20.5" y="20.5" width="70" height="31" rx="15.5" fill="none" stroke="rgb(0,117,219)" stroke-width="1"/><rect x="33" y="30" width="12" height="12" rx="6" fill="rgb(239,68,68)"/><g clip-path="url(#ishc1)"><path d="M29 26h20v20H29zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(29,29,31,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#cp2)"><g clip-path="url(#ct3)"><text x="51" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(26,93,207)">Bug</text></g></g><rect x="98.8" y="20" width="96.3" height="32" rx="16" fill="rgb(255,255,255)"/><rect x="99.5" y="20.5" width="95" height="31" rx="15.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><rect x="111.8" y="30" width="12" height="12" rx="6" fill="rgb(59,130,246)"/><g clip-path="url(#ishc4)"><path d="M107.8 26h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(29,29,31,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#cp5)"><g clip-path="url(#ct6)"><text x="129.81" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(29,29,31)">Feature</text></g></g><rect x="203.1" y="20" width="78.4" height="32" rx="16" fill="rgb(214,233,249)"/><g clip-path="url(#ishc7)"><path d="M200.1 17h84.4v38h-84.4zm19 5h46.4a14 14 0 0 1 14 14 14 14 0 0 1-14 14h-46.4a14 14 0 0 1-14-14 14 14 0 0 1 14-14" fill="rgb(0,117,219)" fill-rule="evenodd"/></g><rect x="203.5" y="20.5" width="77" height="31" rx="15.5" fill="none" stroke="rgb(0,117,219)" stroke-width="1"/><rect x="216.1" y="30" width="12" height="12" rx="6" fill="rgb(34,197,94)"/><g clip-path="url(#ishc8)"><path d="M212.1 26h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(29,29,31,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#cp9)"><g clip-path="url(#ct10)"><text x="234.06" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(26,93,207)">Docs</text></g></g><rect x="289.5" y="20" width="91.2" height="32" rx="16" fill="rgb(255,255,255)"/><rect x="289.5" y="20.5" width="91" height="31" rx="15.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><rect x="302.5" y="30" width="12" height="12" rx="6" fill="rgb(168,85,247)"/><g clip-path="url(#ishc11)"><path d="M298.5 26h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(29,29,31,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#cp12)"><g clip-path="url(#ct13)"><text x="320.47" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(29,29,31)">Design</text></g></g><rect x="388.7" y="20" width="85.1" height="32" rx="16" fill="rgb(255,255,255)"/><rect x="389.5" y="20.5" width="84" height="31" rx="15.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><rect x="401.7" y="30" width="12" height="12" rx="6" fill="rgb(107,114,128)"/><g clip-path="url(#ishc14)"><path d="M397.7 26h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(29,29,31,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#cp15)"><g clip-path="url(#ct16)"><text x="419.7" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(29,29,31)">Chore</text></g></g></svg>

package/docs/design/templates/choice-chips-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 632 434" width="632" height="434"><defs><clipPath id="cp0"><rect x="16" y="38" width="600" height="136"/></clipPath><clipPath id="cp1"><rect x="16" y="212" width="600" height="80"/></clipPath><clipPath id="cp2"><rect x="16" y="330" width="600" height="88"/></clipPath><clipPath id="ct3"><rect x="16" y="16" width="600" height="22"/></clipPath><clipPath id="irc4"><rect x="16" y="38" width="600" height="136" rx="0"/></clipPath><clipPath id="ct6"><rect x="16" y="190" width="600" height="22"/></clipPath><clipPath id="irc7"><rect x="16" y="212" width="600" height="80" rx="0"/></clipPath><clipPath id="ct9"><rect x="16" y="308" width="600" height="22"/></clipPath><clipPath id="irc10"><rect x="16" y="330" width="600" height="88" rx="0"/></clipPath></defs><rect x="0" y="0" width="632" height="434" 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)">Wrapping Color Palette</text><g clip-path="url(#cp0)"><g clip-path="url(#irc4)"><clipPath id="svgimg5vclip"><rect x="16" y="38" width="600" height="136"/></clipPath><g clip-path="url(#svgimg5vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg5cp0"><rect x="51" y="29" width="82.9" height="14"/></clipPath><clipPath id="svgimg5ct1"><rect x="51" y="29" width="82.9" height="14"/></clipPath><clipPath id="svgimg5ishc2"><rect x="33" y="30" width="12" height="12" rx="6"/></clipPath><clipPath id="svgimg5ishc3"><rect x="155.9" y="21" width="72.1" height="30" rx="15"/></clipPath><clipPath id="svgimg5ishc4"><rect x="167.9" y="30" width="12" height="12" rx="6"/></clipPath><clipPath id="svgimg5cp5"><rect x="185.9" y="29" width="30.1" height="14"/></clipPath><clipPath id="svgimg5ct6"><rect x="185.9" y="29" width="30.1" height="14"/></clipPath><clipPath id="svgimg5ishc7"><rect x="249.9" y="30" width="12" height="12" rx="6"/></clipPath><clipPath id="svgimg5cp8"><rect x="267.9" y="29" width="41" height="14"/></clipPath><clipPath id="svgimg5ct9"><rect x="267.9" y="29" width="41" height="14"/></clipPath><clipPath id="svgimg5ishc10"><rect x="343" y="30" width="12" height="12" rx="6"/></clipPath><clipPath id="svgimg5cp11"><rect x="361" y="29" width="50.1" height="14"/></clipPath><clipPath id="svgimg5ct12"><rect x="361" y="29" width="50.1" height="14"/></clipPath><clipPath id="svgimg5ishc13"><rect x="445" y="30" width="12" height="12" rx="6"/></clipPath><clipPath id="svgimg5cp14"><rect x="463" y="29" width="26.3" height="14"/></clipPath><clipPath id="svgimg5ct15"><rect x="463" y="29" width="26.3" height="14"/></clipPath><clipPath id="svgimg5ishc16"><rect x="33" y="70" width="12" height="12" rx="6"/></clipPath><clipPath id="svgimg5cp17"><rect x="51" y="69" width="44.5" height="14"/></clipPath><clipPath id="svgimg5ct18"><rect x="51" y="69" width="44.5" height="14"/></clipPath><clipPath id="svgimg5ishc19"><rect x="129.5" y="70" width="12" height="12" rx="6"/></clipPath><clipPath id="svgimg5cp20"><rect x="147.5" y="69" width="29.6" height="14"/></clipPath><clipPath id="svgimg5ct21"><rect x="147.5" y="69" width="29.6" height="14"/></clipPath><clipPath id="svgimg5ishc22"><rect x="211.2" y="70" width="12" height="12" rx="6"/></clipPath><clipPath id="svgimg5cp23"><rect x="229.2" y="69" width="27.8" height="14"/></clipPath><clipPath id="svgimg5ct24"><rect x="229.2" y="69" width="27.8" height="14"/></clipPath><clipPath id="svgimg5ishc25"><rect x="291" y="70" width="12" height="12" rx="6"/></clipPath><clipPath id="svgimg5cp26"><rect x="309" y="69" width="32.1" height="14"/></clipPath><clipPath id="svgimg5ct27"><rect x="309" y="69" width="32.1" height="14"/></clipPath></defs><rect x="20" y="20" width="126.9" height="32" rx="16" fill="rgb(28,28,30)"/><rect x="20.5" y="20.5" width="126" height="31" rx="15.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><g clip-path="url(#svgimg5cp0)"><g clip-path="url(#svgimg5ct1)"><text x="51" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(245,245,247)">Transparent</text></g></g><g clip-path="url(#svgimg5ishc2)"><path d="M29 26h20v20H29zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(250,250,255,0.32)" fill-rule="evenodd"/></g><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::after" data-domotion-pseudo-owner="source-fragments"><g transform="rotate(45 33.636 80.28)scale(.15686 1.2549)"><rect x="34.2" y="31.2" width="9.6" height="9.6" rx="1" ry="1" fill="rgb(255, 105, 108)"/></g></g><rect x="154.9" y="20" width="74.1" height="32" rx="16" fill="rgb(40,57,66)"/><g clip-path="url(#svgimg5ishc3)"><path d="M151.9 17h80v38h-80zm19 5h42a14 14 0 0 1 14 14 14 14 0 0 1-14 14h-42a14 14 0 0 1-14-14 14 14 0 0 1 14-14" fill="rgb(100,210,255)" fill-rule="evenodd"/></g><rect x="155.5" y="20.5" width="73" height="31" rx="15.5" fill="none" stroke="rgb(100,210,255)" stroke-width="1"/><rect x="167.9" y="30" width="12" height="12" rx="6" fill="rgb(59,130,246)"/><g clip-path="url(#svgimg5ishc4)"><path d="M163.9 26h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(245,245,247,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#svgimg5cp5)"><g clip-path="url(#svgimg5ct6)"><text x="185.86" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(138,203,255)">Blue</text></g></g><rect x="236.9" y="20" width="85" height="32" rx="16" fill="rgb(28,28,30)"/><rect x="237.5" y="20.5" width="84" height="31" rx="15.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><rect x="249.9" y="30" width="12" height="12" rx="6" fill="rgb(34,197,94)"/><g clip-path="url(#svgimg5ishc7)"><path d="M245.9 26h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(245,245,247,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#svgimg5cp8)"><g clip-path="url(#svgimg5ct9)"><text x="267.94" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(245,245,247)">Green</text></g></g><rect x="330" y="20" width="94.1" height="32" rx="16" fill="rgb(28,28,30)"/><rect x="330.5" y="20.5" width="93" height="31" rx="15.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><rect x="343" y="30" width="12" height="12" rx="6" fill="rgb(249,115,22)"/><g clip-path="url(#svgimg5ishc10)"><path d="M339 26h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(245,245,247,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#svgimg5cp11)"><g clip-path="url(#svgimg5ct12)"><text x="360.95" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(245,245,247)">Orange</text></g></g><rect x="432" y="20" width="70.3" height="32" rx="16" fill="rgb(28,28,30)"/><rect x="432.5" y="20.5" width="69" height="31" rx="15.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><rect x="445" y="30" width="12" height="12" rx="6" fill="rgb(239,68,68)"/><g clip-path="url(#svgimg5ishc13)"><path d="M441 26h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(245,245,247,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#svgimg5cp14)"><g clip-path="url(#svgimg5ct15)"><text x="463.02" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(245,245,247)">Red</text></g></g><rect x="20" y="60" width="88.5" height="32" rx="16" fill="rgb(28,28,30)"/><rect x="20.5" y="60.5" width="88" height="31" rx="15.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><rect x="33" y="70" width="12" height="12" rx="6" fill="rgb(168,85,247)"/><g clip-path="url(#svgimg5ishc16)"><path d="M29 66h20v20H29zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(245,245,247,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#svgimg5cp17)"><g clip-path="url(#svgimg5ct18)"><text x="51" y="81" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(245,245,247)">Purple</text></g></g><rect x="116.5" y="60" width="73.6" height="32" rx="16" fill="rgb(28,28,30)"/><rect x="117.5" y="60.5" width="72" height="31" rx="15.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><rect x="129.5" y="70" width="12" height="12" rx="6" fill="rgb(236,72,153)"/><g clip-path="url(#svgimg5ishc19)"><path d="M125.5 66h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(245,245,247,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#svgimg5cp20)"><g clip-path="url(#svgimg5ct21)"><text x="147.52" y="81" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(245,245,247)">Pink</text></g></g><rect x="198.2" y="60" width="71.8" height="32" rx="16" fill="rgb(28,28,30)"/><rect x="198.5" y="60.5" width="71" height="31" rx="15.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><rect x="211.2" y="70" width="12" height="12" rx="6" fill="rgb(20,184,166)"/><g clip-path="url(#svgimg5ishc22)"><path d="M207.2 66h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(245,245,247,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#svgimg5cp23)"><g clip-path="url(#svgimg5ct24)"><text x="229.16" y="81" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(245,245,247)">Teal</text></g></g><rect x="278" y="60" width="76.1" height="32" rx="16" fill="rgb(28,28,30)"/><rect x="278.5" y="60.5" width="75" height="31" rx="15.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><rect x="291" y="70" width="12" height="12" rx="6" fill="rgb(107,114,128)"/><g clip-path="url(#svgimg5ishc25)"><path d="M287 66h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(245,245,247,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#svgimg5cp26)"><g clip-path="url(#svgimg5ct27)"><text x="308.97" y="81" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(245,245,247)">Gray</text></g></g></g></g></g></g><text x="16" y="202" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Compact with Icons</text><g clip-path="url(#cp1)"><g clip-path="url(#irc7)"><clipPath id="svgimg8vclip"><rect x="16" y="212" width="600" height="80"/></clipPath><g clip-path="url(#svgimg8vclip)"><g transform="translate(16 212)"><defs><clipPath id="svgimg8ishc0"><rect x="21" y="21" width="67.3" height="22" rx="11"/></clipPath><clipPath id="svgimg8cp1"><rect x="29" y="26" width="12" height="12"/></clipPath><clipPath id="svgimg8cp3"><rect x="45" y="26" width="35.3" height="12"/></clipPath><clipPath id="svgimg8ct4"><rect x="45" y="26" width="35.3" height="12"/></clipPath><clipPath id="svgimg8cp5"><rect x="106" y="26" width="12.3" height="12"/></clipPath><clipPath id="svgimg8cp7"><rect x="122.3" y="26" width="22" height="12"/></clipPath><clipPath id="svgimg8ct8"><rect x="122.3" y="26" width="22" height="12"/></clipPath></defs><rect x="20" y="20" width="69.3" height="24" rx="12" fill="rgb(40,57,66)"/><g clip-path="url(#svgimg8ishc0)"><path d="M17 17h75.3v30H17zm15 5h45.3a10 10 0 0 1 10 10 10 10 0 0 1-10 10H32a10 10 0 0 1-10-10 10 10 0 0 1 10-10" fill="rgb(100,210,255)" fill-rule="evenodd"/></g><rect x="20.5" y="20.5" width="68" height="23" rx="11.5" fill="none" stroke="rgb(100,210,255)" stroke-width="1"/><g clip-path="url(#svgimg8cp1)"><g color="rgb(138, 203, 255)"><clipPath id="svgimg8svgic2"><rect x="29" y="26" width="12" height="12"/></clipPath><g clip-path="url(#svgimg8svgic2)"><g transform="matrix(.5 0 0 .5 29 26)"><rect width="18" height="18" x="3" y="3" rx="2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M15 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g clip-path="url(#svgimg8cp3)"><g clip-path="url(#svgimg8ct4)"><text x="45" y="36" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(138,203,255)">Board</text></g></g><rect x="97.3" y="20" width="56" height="24" rx="12" fill="rgb(28,28,30)"/><rect x="97.5" y="20.5" width="55" height="23" rx="11.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><g clip-path="url(#svgimg8cp5)"><g color="rgb(245, 245, 247)"><clipPath id="svgimg8svgic6"><rect x="106.3" y="26" width="12" height="12"/></clipPath><g clip-path="url(#svgimg8svgic6)"><g transform="matrix(.5 0 0 .5 106.344 26)"><path d="M3 5z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 12z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 19z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 5h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 12h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 19h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g clip-path="url(#svgimg8cp7)"><g clip-path="url(#svgimg8ct8)"><text x="122.34" y="36" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(245,245,247)">List</text></g></g></g></g></g></g><text x="16" y="320" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Multiple Selection</text><g clip-path="url(#cp2)"><g clip-path="url(#irc10)"><clipPath id="svgimg11vclip"><rect x="16" y="330" width="600" height="88"/></clipPath><g clip-path="url(#svgimg11vclip)"><g transform="translate(16 330)"><defs><clipPath id="svgimg11ishc0"><rect x="21" y="21" width="68.8" height="30" rx="15"/></clipPath><clipPath id="svgimg11ishc1"><rect x="33" y="30" width="12" height="12" rx="6"/></clipPath><clipPath id="svgimg11cp2"><rect x="51" y="29" width="26.8" height="14"/></clipPath><clipPath id="svgimg11ct3"><rect x="51" y="29" width="26.8" height="14"/></clipPath><clipPath id="svgimg11ishc4"><rect x="111.8" y="30" width="12" height="12" rx="6"/></clipPath><clipPath id="svgimg11cp5"><rect x="129.8" y="29" width="52.3" height="14"/></clipPath><clipPath id="svgimg11ct6"><rect x="129.8" y="29" width="52.3" height="14"/></clipPath><clipPath id="svgimg11ishc7"><rect x="204.1" y="21" width="76.4" height="30" rx="15"/></clipPath><clipPath id="svgimg11ishc8"><rect x="216.1" y="30" width="12" height="12" rx="6"/></clipPath><clipPath id="svgimg11cp9"><rect x="234.1" y="29" width="34.4" height="14"/></clipPath><clipPath id="svgimg11ct10"><rect x="234.1" y="29" width="34.4" height="14"/></clipPath><clipPath id="svgimg11ishc11"><rect x="302.5" y="30" width="12" height="12" rx="6"/></clipPath><clipPath id="svgimg11cp12"><rect x="320.5" y="29" width="47.2" height="14"/></clipPath><clipPath id="svgimg11ct13"><rect x="320.5" y="29" width="47.2" height="14"/></clipPath><clipPath id="svgimg11ishc14"><rect x="401.7" y="30" width="12" height="12" rx="6"/></clipPath><clipPath id="svgimg11cp15"><rect x="419.7" y="29" width="41.1" height="14"/></clipPath><clipPath id="svgimg11ct16"><rect x="419.7" y="29" width="41.1" height="14"/></clipPath></defs><rect x="20" y="20" width="70.8" height="32" rx="16" fill="rgb(40,57,66)"/><g clip-path="url(#svgimg11ishc0)"><path d="M17 17h76.8v38H17zm19 5h38.8a14 14 0 0 1 14 14 14 14 0 0 1-14 14H36a14 14 0 0 1-14-14 14 14 0 0 1 14-14" fill="rgb(100,210,255)" fill-rule="evenodd"/></g><rect x="20.5" y="20.5" width="70" height="31" rx="15.5" fill="none" stroke="rgb(100,210,255)" stroke-width="1"/><rect x="33" y="30" width="12" height="12" rx="6" fill="rgb(239,68,68)"/><g clip-path="url(#svgimg11ishc1)"><path d="M29 26h20v20H29zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(245,245,247,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#svgimg11cp2)"><g clip-path="url(#svgimg11ct3)"><text x="51" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(138,203,255)">Bug</text></g></g><rect x="98.8" y="20" width="96.3" height="32" rx="16" fill="rgb(28,28,30)"/><rect x="99.5" y="20.5" width="95" height="31" rx="15.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><rect x="111.8" y="30" width="12" height="12" rx="6" fill="rgb(59,130,246)"/><g clip-path="url(#svgimg11ishc4)"><path d="M107.8 26h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(245,245,247,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#svgimg11cp5)"><g clip-path="url(#svgimg11ct6)"><text x="129.81" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(245,245,247)">Feature</text></g></g><rect x="203.1" y="20" width="78.4" height="32" rx="16" fill="rgb(40,57,66)"/><g clip-path="url(#svgimg11ishc7)"><path d="M200.1 17h84.4v38h-84.4zm19 5h46.4a14 14 0 0 1 14 14 14 14 0 0 1-14 14h-46.4a14 14 0 0 1-14-14 14 14 0 0 1 14-14" fill="rgb(100,210,255)" fill-rule="evenodd"/></g><rect x="203.5" y="20.5" width="77" height="31" rx="15.5" fill="none" stroke="rgb(100,210,255)" stroke-width="1"/><rect x="216.1" y="30" width="12" height="12" rx="6" fill="rgb(34,197,94)"/><g clip-path="url(#svgimg11ishc8)"><path d="M212.1 26h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(245,245,247,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#svgimg11cp9)"><g clip-path="url(#svgimg11ct10)"><text x="234.06" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(138,203,255)">Docs</text></g></g><rect x="289.5" y="20" width="91.2" height="32" rx="16" fill="rgb(28,28,30)"/><rect x="289.5" y="20.5" width="91" height="31" rx="15.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><rect x="302.5" y="30" width="12" height="12" rx="6" fill="rgb(168,85,247)"/><g clip-path="url(#svgimg11ishc11)"><path d="M298.5 26h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(245,245,247,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#svgimg11cp12)"><g clip-path="url(#svgimg11ct13)"><text x="320.47" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(245,245,247)">Design</text></g></g><rect x="388.7" y="20" width="85.1" height="32" rx="16" fill="rgb(28,28,30)"/><rect x="389.5" y="20.5" width="84" height="31" rx="15.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><rect x="401.7" y="30" width="12" height="12" rx="6" fill="rgb(107,114,128)"/><g clip-path="url(#svgimg11ishc14)"><path d="M397.7 26h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(245,245,247,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#svgimg11cp15)"><g clip-path="url(#svgimg11ct16)"><text x="419.7" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(245,245,247)">Chore</text></g></g></g></g></g></g></svg>

package/docs/design/templates/choice-chips.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 632 434" width="632" height="434"><defs><clipPath id="cp0"><rect x="16" y="38" width="600" height="136"/></clipPath><clipPath id="cp1"><rect x="16" y="212" width="600" height="80"/></clipPath><clipPath id="cp2"><rect x="16" y="330" width="600" height="88"/></clipPath><clipPath id="ct3"><rect x="16" y="16" width="600" height="22"/></clipPath><clipPath id="irc4"><rect x="16" y="38" width="600" height="136" rx="0"/></clipPath><clipPath id="ct6"><rect x="16" y="190" width="600" height="22"/></clipPath><clipPath id="irc7"><rect x="16" y="212" width="600" height="80" rx="0"/></clipPath><clipPath id="ct9"><rect x="16" y="308" width="600" height="22"/></clipPath><clipPath id="irc10"><rect x="16" y="330" width="600" height="88" rx="0"/></clipPath></defs><rect x="0" y="0" width="632" height="434" 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)">Wrapping Color Palette</text><g clip-path="url(#cp0)"><g clip-path="url(#irc4)"><clipPath id="svgimg5vclip"><rect x="16" y="38" width="600" height="136"/></clipPath><g clip-path="url(#svgimg5vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg5cp0"><rect x="51" y="29" width="82.9" height="14"/></clipPath><clipPath id="svgimg5ct1"><rect x="51" y="29" width="82.9" height="14"/></clipPath><clipPath id="svgimg5ishc2"><rect x="33" y="30" width="12" height="12" rx="6"/></clipPath><clipPath id="svgimg5ishc3"><rect x="155.9" y="21" width="72.1" height="30" rx="15"/></clipPath><clipPath id="svgimg5ishc4"><rect x="167.9" y="30" width="12" height="12" rx="6"/></clipPath><clipPath id="svgimg5cp5"><rect x="185.9" y="29" width="30.1" height="14"/></clipPath><clipPath id="svgimg5ct6"><rect x="185.9" y="29" width="30.1" height="14"/></clipPath><clipPath id="svgimg5ishc7"><rect x="249.9" y="30" width="12" height="12" rx="6"/></clipPath><clipPath id="svgimg5cp8"><rect x="267.9" y="29" width="41" height="14"/></clipPath><clipPath id="svgimg5ct9"><rect x="267.9" y="29" width="41" height="14"/></clipPath><clipPath id="svgimg5ishc10"><rect x="343" y="30" width="12" height="12" rx="6"/></clipPath><clipPath id="svgimg5cp11"><rect x="361" y="29" width="50.1" height="14"/></clipPath><clipPath id="svgimg5ct12"><rect x="361" y="29" width="50.1" height="14"/></clipPath><clipPath id="svgimg5ishc13"><rect x="445" y="30" width="12" height="12" rx="6"/></clipPath><clipPath id="svgimg5cp14"><rect x="463" y="29" width="26.3" height="14"/></clipPath><clipPath id="svgimg5ct15"><rect x="463" y="29" width="26.3" height="14"/></clipPath><clipPath id="svgimg5ishc16"><rect x="33" y="70" width="12" height="12" rx="6"/></clipPath><clipPath id="svgimg5cp17"><rect x="51" y="69" width="44.5" height="14"/></clipPath><clipPath id="svgimg5ct18"><rect x="51" y="69" width="44.5" height="14"/></clipPath><clipPath id="svgimg5ishc19"><rect x="129.5" y="70" width="12" height="12" rx="6"/></clipPath><clipPath id="svgimg5cp20"><rect x="147.5" y="69" width="29.6" height="14"/></clipPath><clipPath id="svgimg5ct21"><rect x="147.5" y="69" width="29.6" height="14"/></clipPath><clipPath id="svgimg5ishc22"><rect x="211.2" y="70" width="12" height="12" rx="6"/></clipPath><clipPath id="svgimg5cp23"><rect x="229.2" y="69" width="27.8" height="14"/></clipPath><clipPath id="svgimg5ct24"><rect x="229.2" y="69" width="27.8" height="14"/></clipPath><clipPath id="svgimg5ishc25"><rect x="291" y="70" width="12" height="12" rx="6"/></clipPath><clipPath id="svgimg5cp26"><rect x="309" y="69" width="32.1" height="14"/></clipPath><clipPath id="svgimg5ct27"><rect x="309" y="69" width="32.1" height="14"/></clipPath></defs><rect x="20" y="20" width="126.9" height="32" rx="16" fill="rgb(255,255,255)"/><rect x="20.5" y="20.5" width="126" height="31" rx="15.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><g clip-path="url(#svgimg5cp0)"><g clip-path="url(#svgimg5ct1)"><text x="51" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(29,29,31)">Transparent</text></g></g><g clip-path="url(#svgimg5ishc2)"><path d="M29 26h20v20H29zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(0,0,13,0.318)" fill-rule="evenodd"/></g><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::after" data-domotion-pseudo-owner="source-fragments"><g transform="rotate(45 33.636 80.28)scale(.15686 1.2549)"><rect x="34.2" y="31.2" width="9.6" height="9.6" rx="1" ry="1" fill="rgb(194, 11, 32)"/></g></g><rect x="154.9" y="20" width="74.1" height="32" rx="16" fill="rgb(214,233,249)"/><g clip-path="url(#svgimg5ishc3)"><path d="M151.9 17h80v38h-80zm19 5h42a14 14 0 0 1 14 14 14 14 0 0 1-14 14h-42a14 14 0 0 1-14-14 14 14 0 0 1 14-14" fill="rgb(0,117,219)" fill-rule="evenodd"/></g><rect x="155.5" y="20.5" width="73" height="31" rx="15.5" fill="none" stroke="rgb(0,117,219)" stroke-width="1"/><rect x="167.9" y="30" width="12" height="12" rx="6" fill="rgb(59,130,246)"/><g clip-path="url(#svgimg5ishc4)"><path d="M163.9 26h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(29,29,31,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#svgimg5cp5)"><g clip-path="url(#svgimg5ct6)"><text x="185.86" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(26,93,207)">Blue</text></g></g><rect x="236.9" y="20" width="85" height="32" rx="16" fill="rgb(255,255,255)"/><rect x="237.5" y="20.5" width="84" height="31" rx="15.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><rect x="249.9" y="30" width="12" height="12" rx="6" fill="rgb(34,197,94)"/><g clip-path="url(#svgimg5ishc7)"><path d="M245.9 26h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(29,29,31,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#svgimg5cp8)"><g clip-path="url(#svgimg5ct9)"><text x="267.94" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(29,29,31)">Green</text></g></g><rect x="330" y="20" width="94.1" height="32" rx="16" fill="rgb(255,255,255)"/><rect x="330.5" y="20.5" width="93" height="31" rx="15.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><rect x="343" y="30" width="12" height="12" rx="6" fill="rgb(249,115,22)"/><g clip-path="url(#svgimg5ishc10)"><path d="M339 26h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(29,29,31,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#svgimg5cp11)"><g clip-path="url(#svgimg5ct12)"><text x="360.95" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(29,29,31)">Orange</text></g></g><rect x="432" y="20" width="70.3" height="32" rx="16" fill="rgb(255,255,255)"/><rect x="432.5" y="20.5" width="69" height="31" rx="15.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><rect x="445" y="30" width="12" height="12" rx="6" fill="rgb(239,68,68)"/><g clip-path="url(#svgimg5ishc13)"><path d="M441 26h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(29,29,31,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#svgimg5cp14)"><g clip-path="url(#svgimg5ct15)"><text x="463.02" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(29,29,31)">Red</text></g></g><rect x="20" y="60" width="88.5" height="32" rx="16" fill="rgb(255,255,255)"/><rect x="20.5" y="60.5" width="88" height="31" rx="15.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><rect x="33" y="70" width="12" height="12" rx="6" fill="rgb(168,85,247)"/><g clip-path="url(#svgimg5ishc16)"><path d="M29 66h20v20H29zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(29,29,31,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#svgimg5cp17)"><g clip-path="url(#svgimg5ct18)"><text x="51" y="81" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(29,29,31)">Purple</text></g></g><rect x="116.5" y="60" width="73.6" height="32" rx="16" fill="rgb(255,255,255)"/><rect x="117.5" y="60.5" width="72" height="31" rx="15.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><rect x="129.5" y="70" width="12" height="12" rx="6" fill="rgb(236,72,153)"/><g clip-path="url(#svgimg5ishc19)"><path d="M125.5 66h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(29,29,31,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#svgimg5cp20)"><g clip-path="url(#svgimg5ct21)"><text x="147.52" y="81" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(29,29,31)">Pink</text></g></g><rect x="198.2" y="60" width="71.8" height="32" rx="16" fill="rgb(255,255,255)"/><rect x="198.5" y="60.5" width="71" height="31" rx="15.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><rect x="211.2" y="70" width="12" height="12" rx="6" fill="rgb(20,184,166)"/><g clip-path="url(#svgimg5ishc22)"><path d="M207.2 66h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(29,29,31,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#svgimg5cp23)"><g clip-path="url(#svgimg5ct24)"><text x="229.16" y="81" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(29,29,31)">Teal</text></g></g><rect x="278" y="60" width="76.1" height="32" rx="16" fill="rgb(255,255,255)"/><rect x="278.5" y="60.5" width="75" height="31" rx="15.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><rect x="291" y="70" width="12" height="12" rx="6" fill="rgb(107,114,128)"/><g clip-path="url(#svgimg5ishc25)"><path d="M287 66h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(29,29,31,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#svgimg5cp26)"><g clip-path="url(#svgimg5ct27)"><text x="308.97" y="81" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(29,29,31)">Gray</text></g></g></g></g></g></g><text x="16" y="202" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Compact with Icons</text><g clip-path="url(#cp1)"><g clip-path="url(#irc7)"><clipPath id="svgimg8vclip"><rect x="16" y="212" width="600" height="80"/></clipPath><g clip-path="url(#svgimg8vclip)"><g transform="translate(16 212)"><defs><clipPath id="svgimg8ishc0"><rect x="21" y="21" width="67.3" height="22" rx="11"/></clipPath><clipPath id="svgimg8cp1"><rect x="29" y="26" width="12" height="12"/></clipPath><clipPath id="svgimg8cp3"><rect x="45" y="26" width="35.3" height="12"/></clipPath><clipPath id="svgimg8ct4"><rect x="45" y="26" width="35.3" height="12"/></clipPath><clipPath id="svgimg8cp5"><rect x="106" y="26" width="12.3" height="12"/></clipPath><clipPath id="svgimg8cp7"><rect x="122.3" y="26" width="22" height="12"/></clipPath><clipPath id="svgimg8ct8"><rect x="122.3" y="26" width="22" height="12"/></clipPath></defs><rect x="20" y="20" width="69.3" height="24" rx="12" fill="rgb(214,233,249)"/><g clip-path="url(#svgimg8ishc0)"><path d="M17 17h75.3v30H17zm15 5h45.3a10 10 0 0 1 10 10 10 10 0 0 1-10 10H32a10 10 0 0 1-10-10 10 10 0 0 1 10-10" fill="rgb(0,117,219)" fill-rule="evenodd"/></g><rect x="20.5" y="20.5" width="68" height="23" rx="11.5" fill="none" stroke="rgb(0,117,219)" stroke-width="1"/><g clip-path="url(#svgimg8cp1)"><g color="rgb(26, 93, 207)"><clipPath id="svgimg8svgic2"><rect x="29" y="26" width="12" height="12"/></clipPath><g clip-path="url(#svgimg8svgic2)"><g transform="matrix(.5 0 0 .5 29 26)"><rect width="18" height="18" x="3" y="3" rx="2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(26, 93, 207)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(26, 93, 207)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M15 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(26, 93, 207)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g clip-path="url(#svgimg8cp3)"><g clip-path="url(#svgimg8ct4)"><text x="45" y="36" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(26,93,207)">Board</text></g></g><rect x="97.3" y="20" width="56" height="24" rx="12" fill="rgb(255,255,255)"/><rect x="97.5" y="20.5" width="55" height="23" rx="11.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><g clip-path="url(#svgimg8cp5)"><g color="rgb(29, 29, 31)"><clipPath id="svgimg8svgic6"><rect x="106.3" y="26" width="12" height="12"/></clipPath><g clip-path="url(#svgimg8svgic6)"><g transform="matrix(.5 0 0 .5 106.344 26)"><path d="M3 5z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 12z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 19z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 5h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 12h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 19h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g clip-path="url(#svgimg8cp7)"><g clip-path="url(#svgimg8ct8)"><text x="122.34" y="36" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(29,29,31)">List</text></g></g></g></g></g></g><text x="16" y="320" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Multiple Selection</text><g clip-path="url(#cp2)"><g clip-path="url(#irc10)"><clipPath id="svgimg11vclip"><rect x="16" y="330" width="600" height="88"/></clipPath><g clip-path="url(#svgimg11vclip)"><g transform="translate(16 330)"><defs><clipPath id="svgimg11ishc0"><rect x="21" y="21" width="68.8" height="30" rx="15"/></clipPath><clipPath id="svgimg11ishc1"><rect x="33" y="30" width="12" height="12" rx="6"/></clipPath><clipPath id="svgimg11cp2"><rect x="51" y="29" width="26.8" height="14"/></clipPath><clipPath id="svgimg11ct3"><rect x="51" y="29" width="26.8" height="14"/></clipPath><clipPath id="svgimg11ishc4"><rect x="111.8" y="30" width="12" height="12" rx="6"/></clipPath><clipPath id="svgimg11cp5"><rect x="129.8" y="29" width="52.3" height="14"/></clipPath><clipPath id="svgimg11ct6"><rect x="129.8" y="29" width="52.3" height="14"/></clipPath><clipPath id="svgimg11ishc7"><rect x="204.1" y="21" width="76.4" height="30" rx="15"/></clipPath><clipPath id="svgimg11ishc8"><rect x="216.1" y="30" width="12" height="12" rx="6"/></clipPath><clipPath id="svgimg11cp9"><rect x="234.1" y="29" width="34.4" height="14"/></clipPath><clipPath id="svgimg11ct10"><rect x="234.1" y="29" width="34.4" height="14"/></clipPath><clipPath id="svgimg11ishc11"><rect x="302.5" y="30" width="12" height="12" rx="6"/></clipPath><clipPath id="svgimg11cp12"><rect x="320.5" y="29" width="47.2" height="14"/></clipPath><clipPath id="svgimg11ct13"><rect x="320.5" y="29" width="47.2" height="14"/></clipPath><clipPath id="svgimg11ishc14"><rect x="401.7" y="30" width="12" height="12" rx="6"/></clipPath><clipPath id="svgimg11cp15"><rect x="419.7" y="29" width="41.1" height="14"/></clipPath><clipPath id="svgimg11ct16"><rect x="419.7" y="29" width="41.1" height="14"/></clipPath></defs><rect x="20" y="20" width="70.8" height="32" rx="16" fill="rgb(214,233,249)"/><g clip-path="url(#svgimg11ishc0)"><path d="M17 17h76.8v38H17zm19 5h38.8a14 14 0 0 1 14 14 14 14 0 0 1-14 14H36a14 14 0 0 1-14-14 14 14 0 0 1 14-14" fill="rgb(0,117,219)" fill-rule="evenodd"/></g><rect x="20.5" y="20.5" width="70" height="31" rx="15.5" fill="none" stroke="rgb(0,117,219)" stroke-width="1"/><rect x="33" y="30" width="12" height="12" rx="6" fill="rgb(239,68,68)"/><g clip-path="url(#svgimg11ishc1)"><path d="M29 26h20v20H29zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(29,29,31,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#svgimg11cp2)"><g clip-path="url(#svgimg11ct3)"><text x="51" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(26,93,207)">Bug</text></g></g><rect x="98.8" y="20" width="96.3" height="32" rx="16" fill="rgb(255,255,255)"/><rect x="99.5" y="20.5" width="95" height="31" rx="15.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><rect x="111.8" y="30" width="12" height="12" rx="6" fill="rgb(59,130,246)"/><g clip-path="url(#svgimg11ishc4)"><path d="M107.8 26h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(29,29,31,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#svgimg11cp5)"><g clip-path="url(#svgimg11ct6)"><text x="129.81" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(29,29,31)">Feature</text></g></g><rect x="203.1" y="20" width="78.4" height="32" rx="16" fill="rgb(214,233,249)"/><g clip-path="url(#svgimg11ishc7)"><path d="M200.1 17h84.4v38h-84.4zm19 5h46.4a14 14 0 0 1 14 14 14 14 0 0 1-14 14h-46.4a14 14 0 0 1-14-14 14 14 0 0 1 14-14" fill="rgb(0,117,219)" fill-rule="evenodd"/></g><rect x="203.5" y="20.5" width="77" height="31" rx="15.5" fill="none" stroke="rgb(0,117,219)" stroke-width="1"/><rect x="216.1" y="30" width="12" height="12" rx="6" fill="rgb(34,197,94)"/><g clip-path="url(#svgimg11ishc8)"><path d="M212.1 26h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(29,29,31,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#svgimg11cp9)"><g clip-path="url(#svgimg11ct10)"><text x="234.06" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(26,93,207)">Docs</text></g></g><rect x="289.5" y="20" width="91.2" height="32" rx="16" fill="rgb(255,255,255)"/><rect x="289.5" y="20.5" width="91" height="31" rx="15.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><rect x="302.5" y="30" width="12" height="12" rx="6" fill="rgb(168,85,247)"/><g clip-path="url(#svgimg11ishc11)"><path d="M298.5 26h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(29,29,31,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#svgimg11cp12)"><g clip-path="url(#svgimg11ct13)"><text x="320.47" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(29,29,31)">Design</text></g></g><rect x="388.7" y="20" width="85.1" height="32" rx="16" fill="rgb(255,255,255)"/><rect x="389.5" y="20.5" width="84" height="31" rx="15.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><rect x="401.7" y="30" width="12" height="12" rx="6" fill="rgb(107,114,128)"/><g clip-path="url(#svgimg11ishc14)"><path d="M397.7 26h20v20h-20zm10 5a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5" fill="rgba(29,29,31,0.2)" fill-rule="evenodd"/></g><g clip-path="url(#svgimg11cp15)"><g clip-path="url(#svgimg11ct16)"><text x="419.7" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(29,29,31)">Chore</text></g></g></g></g></g></g></svg>

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

@@ -0,0 +1 @@
+<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

@@ -0,0 +1 @@
+<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/prompt-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 208" width="600" height="208"><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="84.8"/></clipPath><clipPath id="ct2"><rect x="29" y="29" width="542" height="84.8"/></clipPath><clipPath id="ct3"><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(#sh0)"/><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(#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)">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></svg>

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

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 208" width="600" height="208"><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="84.8"/></clipPath><clipPath id="ct2"><rect x="29" y="29" width="542" height="84.8"/></clipPath><clipPath id="ct3"><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(#sh0)"/><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(#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)">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></svg>

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

@@ -0,0 +1 @@
+<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

@@ -0,0 +1 @@
+<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>

package/docs/design/templates/empty-state/filtered-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 460 190" width="460" height="190"><defs><clipPath id="cp0"><rect x="214" y="66" width="32" height="32.3"/></clipPath><clipPath id="ct2"><rect x="174.6" y="114.3" width="110.8" height="23"/></clipPath><clipPath id="ct3"><rect x="115.7" y="145.3" width="228.6" height="20.3"/></clipPath></defs><rect x="28.5" y="20.5" width="403" height="191" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp0)"><g color="rgb(194, 194, 198)"><clipPath id="svgic1"><rect x="214" y="66.3" width="32" height="32"/></clipPath><g clip-path="url(#svgic1)"><g transform="translate(214 66.344)scale(1.33333)"><path d="M10 20a1 1 0 0 0 .6.9l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .5-1.3l7.2-8A1 1 0 0 0 21 3H3a1 1 0 0 0-.7 1.7l7.2 8A2 2 0 0 1 10 14Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="1.5px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="174.59" y="133.34" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(245,245,247)">No Matches</text><text x="115.72" y="160.34" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(194,194,198)">No tickets match the current filters.</text></svg>

package/docs/design/templates/empty-state/filtered.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 460 190" width="460" height="190"><defs><clipPath id="cp0"><rect x="214" y="66" width="32" height="32.3"/></clipPath><clipPath id="ct2"><rect x="174.6" y="114.3" width="110.8" height="23"/></clipPath><clipPath id="ct3"><rect x="115.7" y="145.3" width="228.6" height="20.3"/></clipPath></defs><rect x="28.5" y="20.5" width="403" height="191" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp0)"><g color="rgb(98, 98, 103)"><clipPath id="svgic1"><rect x="214" y="66.3" width="32" height="32"/></clipPath><g clip-path="url(#svgic1)"><g transform="translate(214 66.344)scale(1.33333)"><path d="M10 20a1 1 0 0 0 .6.9l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .5-1.3l7.2-8A1 1 0 0 0 21 3H3a1 1 0 0 0-.7 1.7l7.2 8A2 2 0 0 1 10 14Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="1.5px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="174.59" y="133.34" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(29,29,31)">No Matches</text><text x="115.72" y="160.34" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(98,98,103)">No tickets match the current filters.</text></svg>

package/docs/design/templates/empty-state/with-action-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 460 220" width="460" height="220"><defs><clipPath id="cp0"><rect x="214" y="53" width="32" height="32"/></clipPath><clipPath id="ct2"><rect x="153.5" y="101" width="152.9" height="23"/></clipPath><clipPath id="ct3"><rect x="73.7" y="132" width="312.7" height="20.3"/></clipPath><clipPath id="ct4"><rect x="177.5" y="168.3" width="104.9" height="32"/></clipPath></defs><rect x="28.5" y="20.5" width="403" height="212" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp0)"><g color="rgb(194, 194, 198)"><clipPath id="svgic1"><rect x="214" y="53" width="32" height="32"/></clipPath><g clip-path="url(#svgic1)"><g transform="translate(214 53)scale(1.33333)"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="1.5px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M5.5 5.1 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.4-6.9A2 2 0 0 0 16.8 4H7.2a2 2 0 0 0-1.7 1.1" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="1.5px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="153.55" y="120" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(245,245,247)">No Open Tickets</text><text x="73.67" y="147" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(194,194,198)">When someone files a ticket it will show up here.</text><rect x="177.5" y="168.3" width="104.9" height="32" rx="16" fill="rgb(44,44,46)"/><text x="189.53" y="190.3" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">New Ticket</text></svg>

package/docs/design/templates/empty-state/with-action.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 460 220" width="460" height="220"><defs><clipPath id="cp0"><rect x="214" y="53" width="32" height="32"/></clipPath><clipPath id="ct2"><rect x="153.5" y="101" width="152.9" height="23"/></clipPath><clipPath id="ct3"><rect x="73.7" y="132" width="312.7" height="20.3"/></clipPath><clipPath id="ct4"><rect x="177.5" y="168.3" width="104.9" height="32"/></clipPath></defs><rect x="28.5" y="20.5" width="403" height="212" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp0)"><g color="rgb(98, 98, 103)"><clipPath id="svgic1"><rect x="214" y="53" width="32" height="32"/></clipPath><g clip-path="url(#svgic1)"><g transform="translate(214 53)scale(1.33333)"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="1.5px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M5.5 5.1 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.4-6.9A2 2 0 0 0 16.8 4H7.2a2 2 0 0 0-1.7 1.1" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="1.5px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="153.55" y="120" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(29,29,31)">No Open Tickets</text><text x="73.67" y="147" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(98,98,103)">When someone files a ticket it will show up here.</text><rect x="177.5" y="168.3" width="104.9" height="32" rx="16" fill="rgb(255,255,255)"/><text x="189.53" y="190.3" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">New Ticket</text></svg>

package/docs/design/templates/empty-state-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 492 502" width="492" height="502"><defs><clipPath id="cp0"><rect x="16" y="38" width="460" height="220"/></clipPath><clipPath id="cp1"><rect x="16" y="296" width="460" height="190"/></clipPath><clipPath id="ct2"><rect x="16" y="16" width="460" height="22"/></clipPath><clipPath id="irc3"><rect x="16" y="38" width="460" height="220" rx="0"/></clipPath><clipPath id="ct5"><rect x="16" y="274" width="460" height="22"/></clipPath><clipPath id="irc6"><rect x="16" y="296" width="460" height="190" rx="0"/></clipPath></defs><rect x="0" y="0" width="492" height="502" 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)">Icon, Title, Detail, and Action</text><g clip-path="url(#cp0)"><g clip-path="url(#irc3)"><clipPath id="svgimg4vclip"><rect x="16" y="38" width="460" height="220"/></clipPath><g clip-path="url(#svgimg4vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg4cp0"><rect x="214" y="53" width="32" height="32"/></clipPath><clipPath id="svgimg4ct2"><rect x="153.5" y="101" width="152.9" height="23"/></clipPath><clipPath id="svgimg4ct3"><rect x="73.7" y="132" width="312.7" height="20.3"/></clipPath><clipPath id="svgimg4ct4"><rect x="177.5" y="168.3" width="104.9" height="32"/></clipPath></defs><rect x="28.5" y="20.5" width="403" height="212" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg4cp0)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg4svgic1"><rect x="214" y="53" width="32" height="32"/></clipPath><g clip-path="url(#svgimg4svgic1)"><g transform="translate(214 53)scale(1.33333)"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="1.5px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M5.5 5.1 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.4-6.9A2 2 0 0 0 16.8 4H7.2a2 2 0 0 0-1.7 1.1" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="1.5px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="153.55" y="120" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(245,245,247)">No Open Tickets</text><text x="73.67" y="147" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(194,194,198)">When someone files a ticket it will show up here.</text><rect x="177.5" y="168.3" width="104.9" height="32" rx="16" fill="rgb(44,44,46)"/><text x="189.53" y="190.3" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">New Ticket</text></g></g></g></g><text x="16" y="286" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">No Results for a Filter</text><g clip-path="url(#cp1)"><g clip-path="url(#irc6)"><clipPath id="svgimg7vclip"><rect x="16" y="296" width="460" height="190"/></clipPath><g clip-path="url(#svgimg7vclip)"><g transform="translate(16 296)"><defs><clipPath id="svgimg7cp0"><rect x="214" y="66" width="32" height="32.3"/></clipPath><clipPath id="svgimg7ct2"><rect x="174.6" y="114.3" width="110.8" height="23"/></clipPath><clipPath id="svgimg7ct3"><rect x="115.7" y="145.3" width="228.6" height="20.3"/></clipPath></defs><rect x="28.5" y="20.5" width="403" height="191" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg7cp0)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg7svgic1"><rect x="214" y="66.3" width="32" height="32"/></clipPath><g clip-path="url(#svgimg7svgic1)"><g transform="translate(214 66.344)scale(1.33333)"><path d="M10 20a1 1 0 0 0 .6.9l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .5-1.3l7.2-8A1 1 0 0 0 21 3H3a1 1 0 0 0-.7 1.7l7.2 8A2 2 0 0 1 10 14Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="1.5px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="174.59" y="133.34" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(245,245,247)">No Matches</text><text x="115.72" y="160.34" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(194,194,198)">No tickets match the current filters.</text></g></g></g></g></svg>