npm - @kerfjs/ui - Versions diffs - 5.0.0-beta.110 → 5.0.0-beta.111 - Mend

@kerfjs/ui 5.0.0-beta.110 → 5.0.0-beta.111

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (158) hide show

package/README.md +1 -0
package/ai/component-catalog.json +9 -2
package/ai/component-composition.json +8 -1
package/ai/components/button.md +5 -2
package/ai/components/surface-scaffold.md +3 -0
package/ai/public-api-signatures-v1.md +86 -39
package/ai/skill.md +4 -0
package/ai/webawesome-jsx-signatures-v1.md +1 -1
package/dist/backdrop-image.d.ts +8 -0
package/dist/backdrop-image.js +1 -1
package/dist/browser/content-item.js +1 -0
package/dist/button.d.ts +4 -2
package/dist/button.js +1 -1
package/dist/catalog-resources.d.ts +2 -1
package/dist/catalog.d.ts +2 -1
package/dist/catalog.js +2 -1
package/dist/catalog.js.map +1 -1
package/dist/{chunk-P7EJ4CAD.js → chunk-ETFP7HAR.js} +2 -2
package/dist/{chunk-P7EJ4CAD.js.map → chunk-ETFP7HAR.js.map} +1 -1
package/dist/{chunk-SOFPUW3O.js → chunk-IIQ2XIMU.js} +4 -3
package/dist/chunk-IIQ2XIMU.js.map +1 -0
package/dist/chunk-IRC5N7FA.js +16 -0
package/dist/chunk-IRC5N7FA.js.map +1 -0
package/dist/{chunk-SQ5DH66U.js → chunk-ITENVZ6Q.js} +2 -15
package/dist/chunk-ITENVZ6Q.js.map +1 -0
package/dist/{chunk-WSEJ2FDE.js → chunk-OUCHU7JB.js} +2 -2
package/dist/{chunk-WSEJ2FDE.js.map → chunk-OUCHU7JB.js.map} +1 -1
package/dist/{chunk-KPINJHIC.js → chunk-PS24PVR6.js} +3 -1
package/dist/chunk-PS24PVR6.js.map +1 -0
package/dist/{chunk-SCDWURBO.js → chunk-SOBRGH7T.js} +18 -3
package/dist/chunk-SOBRGH7T.js.map +1 -0
package/dist/{chunk-6CDILXF4.js → chunk-VGECEXM6.js} +11 -2
package/dist/chunk-VGECEXM6.js.map +1 -0
package/dist/chunk-WD6KABEU.js +200 -0
package/dist/chunk-WD6KABEU.js.map +1 -0
package/dist/{chunk-HQZG3OFL.js → chunk-XRZSK2WC.js} +3 -2
package/dist/chunk-XRZSK2WC.js.map +1 -0
package/dist/{chunk-CPSGUGAY.js → chunk-YPAQFBMN.js} +4 -4
package/dist/{chunk-CPSGUGAY.js.map → chunk-YPAQFBMN.js.map} +1 -1
package/dist/collapsible-panel.d.ts +1 -0
package/dist/collapsible-panel.js +3 -2
package/dist/collapsible-panel.js.map +1 -1
package/dist/content-item.d.ts +44 -2
package/dist/content-item.js +4 -1
package/dist/index.d.ts +3 -2
package/dist/index.js +6 -5
package/dist/list-detail-dialog.d.ts +2 -1
package/dist/list-detail-dialog.js +4 -3
package/dist/list-detail-dialog.js.map +1 -1
package/dist/{nav-stack-CU_0dKtI.d.ts → nav-stack-CrZF95VO.d.ts} +2 -1
package/dist/nav-stack.d.ts +2 -1
package/dist/nav-stack.js +2 -1
package/dist/pane.d.ts +3 -23
package/dist/pane.js +2 -1
package/dist/split-view.d.ts +2 -1
package/dist/split-view.js +2 -1
package/dist/styles/backdrop-image.css +18 -1
package/dist/styles/components/surfaces/backdrop-image/backdrop-image.css +18 -1
package/dist/styles/components/surfaces/content-item/content-item.css +52 -0
package/dist/styles/components/surfaces/surface-scaffold/surface-scaffold.css +9 -1
package/dist/styles/content-item.css +3 -168
package/dist/styles/foundation.css +4 -4
package/dist/styles/surface-scaffold.css +9 -1
package/dist/styles/webawesome.css +2 -2
package/dist/surface-scaffold.d.ts +6 -2
package/dist/surface-scaffold.js +1 -1
package/dist/surface-tint-DQgYCaP9.d.ts +25 -0
package/dist/tab-navigator.d.ts +2 -1
package/dist/tab-navigator.js +2 -1
package/dist/tab-navigator.js.map +1 -1
package/dist/toolbar.d.ts +1 -0
package/dist/wire-catalog.d.ts +2 -1
package/dist/wire-content-items.js +62 -0
package/dist/wire-content-items.js.map +1 -1
package/dist/workbench-dialog.d.ts +2 -1
package/dist/workbench-dialog.js +3 -2
package/dist/workbench-dialog.js.map +1 -1
package/dist/workbench.d.ts +2 -1
package/dist/workbench.js +2 -1
package/docs/accessibility.md +6 -0
package/docs/backdrop-image.md +4 -0
package/docs/button.md +15 -0
package/docs/component-contract.md +7 -0
package/docs/component-selection.md +1 -1
package/docs/design/templates/button/emphasis-dark.svg +1 -1
package/docs/design/templates/button-dark.svg +1 -1
package/docs/design/templates/checkbox/error-dark.svg +1 -1
package/docs/design/templates/checkbox/states.svg +1 -1
package/docs/design/templates/checkbox-dark.svg +1 -1
package/docs/design/templates/checkbox-group/horizontal-dark.svg +1 -1
package/docs/design/templates/checkbox-group/vertical.svg +1 -1
package/docs/design/templates/checkbox-group-dark.svg +1 -1
package/docs/design/templates/checkbox-group.svg +1 -1
package/docs/design/templates/checkbox.svg +1 -1
package/docs/design/templates/choice-chips/color-palette-dark.svg +1 -1
package/docs/design/templates/choice-chips-dark.svg +1 -1
package/docs/design/templates/color-field/error-dark.svg +1 -1
package/docs/design/templates/color-field/hint.svg +1 -1
package/docs/design/templates/color-field-dark.svg +1 -1
package/docs/design/templates/color-field.svg +1 -1
package/docs/design/templates/color-picker/gray.svg +1 -1
package/docs/design/templates/color-picker/hsb.svg +1 -1
package/docs/design/templates/color-picker/rgb.svg +1 -1
package/docs/design/templates/color-picker.svg +1 -1
package/docs/design/templates/color-swatches/palette-dark.svg +1 -1
package/docs/design/templates/color-swatches-dark.svg +1 -1
package/docs/design/templates/disclosure/embedded.svg +1 -1
package/docs/design/templates/disclosure/framed-sunken.svg +1 -1
package/docs/design/templates/disclosure/plain.svg +1 -1
package/docs/design/templates/disclosure.svg +1 -1
package/docs/design/templates/message-composer/chat.svg +1 -1
package/docs/design/templates/message-composer.svg +1 -1
package/docs/design/templates/progress-bar/determinate.svg +1 -1
package/docs/design/templates/progress-bar/tones.svg +1 -1
package/docs/design/templates/progress-bar.svg +1 -1
package/docs/design/templates/radio-group/horizontal-dark.svg +1 -1
package/docs/design/templates/radio-group/vertical.svg +1 -1
package/docs/design/templates/radio-group-dark.svg +1 -1
package/docs/design/templates/radio-group.svg +1 -1
package/docs/design/templates/search-field/empty.svg +1 -1
package/docs/design/templates/search-field/tokens.svg +1 -1
package/docs/design/templates/search-field.svg +1 -1
package/docs/design/templates/select/form.svg +1 -1
package/docs/design/templates/select.svg +1 -1
package/docs/design/templates/slider/compact.svg +1 -1
package/docs/design/templates/slider/readout.svg +1 -1
package/docs/design/templates/slider/ticks.svg +1 -1
package/docs/design/templates/slider.svg +1 -1
package/docs/design/templates/switch/states.svg +1 -1
package/docs/design/templates/switch.svg +1 -1
package/docs/design/templates/tag-field/error-dark.svg +1 -1
package/docs/design/templates/tag-field/error.svg +1 -1
package/docs/design/templates/tag-field/tags.svg +1 -1
package/docs/design/templates/tag-field-dark.svg +1 -1
package/docs/design/templates/tag-field.svg +1 -1
package/docs/design/templates/text-field/error-dark.svg +1 -1
package/docs/design/templates/text-field/labeled.svg +1 -1
package/docs/design/templates/text-field/multiline.svg +1 -1
package/docs/design/templates/text-field/search.svg +1 -1
package/docs/design/templates/text-field-dark.svg +1 -1
package/docs/design/templates/text-field.svg +1 -1
package/docs/design/templates/toolbar-control-group/icon-tile-danger-dark.svg +1 -1
package/docs/design/templates/toolbar-control-group-dark.svg +1 -1
package/docs/design/templates.md +3 -1
package/docs/layout.md +25 -0
package/docs/manual-test-plan.md +27 -1
package/docs/recipes.md +9 -0
package/docs/surface-scaffold.md +4 -1
package/llms.txt +3 -0
package/package.json +1 -1
package/dist/chunk-5USKCWGL.js +0 -113
package/dist/chunk-5USKCWGL.js.map +0 -1
package/dist/chunk-6CDILXF4.js.map +0 -1
package/dist/chunk-HQZG3OFL.js.map +0 -1
package/dist/chunk-KPINJHIC.js.map +0 -1
package/dist/chunk-SCDWURBO.js.map +0 -1
package/dist/chunk-SOFPUW3O.js.map +0 -1
package/dist/chunk-SQ5DH66U.js.map +0 -1

package/docs/component-selection.md CHANGED Viewed

@@ -274,7 +274,7 @@ beside a `ContentItem` value, and connect its id to the preview group's
 | Desktop multi-panel workspace — `Workbench`                                                                                   | A desktop-class tool needs a central work area plus independently collapsible navigator, inspector, or console regions.                                                                                                                                                                                                                                                                                   | Do not shrink the full shell onto compact devices or use it for one standalone panel.                                                                                                                                                                                                                                                      | Render only the required rails/drawer, keep collapse state controlled, and replace peripheral regions with stacks or overlays below desktop sizes. Opt a panel into drag/keyboard resizing with `resizable` and call `wireWorkbench` with its size signal.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | Panel presence/content, collapsed states, sizes, persistence, responsive replacement, and controls.                                                      | `@kerfjs/ui/workbench`                                                                    | [Workbench](./workbench.md)                                                                    |
 | Standalone rail or drawer — `CollapsiblePanel`                                                                                | One left/right rail or bottom drawer needs controlled collapse without adopting the complete `Workbench` shell.                                                                                                                                                                                                                                                                                           | Do not use it for several coordinated workspace panels or retain an empty icon-only rail while collapsed.                                                                                                                                                                                                                                  | Pair it with `CollapsiblePanelToggle`; call `wireSidebar` for focus transfer, Escape/backdrop dismissal, compact overlay trapping, and persistence integration.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | Panel content/size, collapsed state, toggle placement, persistence, and compact policy.                                                                  | `@kerfjs/ui/collapsible-panel`                                                            | [App-layout decision matrix](./app-layouts.md#decision-matrix)                                 |
 | Lowered content surface — `SunkenPanel`                                                                                       | A main work area or nested content group needs one visually lowered surface with a compact inset and vertical stack.                                                                                                                                                                                                                                                                                      | Do not use it merely to add padding, as a replacement for `Pane` anatomy, or around children that already own the same outer surface.                                                                                                                                                                                                      | Compose the application-owned content as children, choose the default `rounded` shape or `square` for a flush edge-to-edge area, and pass `ariaLabel` only when the surface is a distinct named region. Every sunken surface carries a fine grain texture, generated once per page by the first one that renders; call `ensureSunkenTexture` only when the page paints Web Awesome `appearance="sunken"` without any Kerf sunken component, and set `--kui-sunken-texture: none` at `:root` for a flat surface.                                                                                                                                                                                                                                                                                                                                                | Region semantics, accessible name, shape, scroll ownership, child ordering, and content.                                                                 | `@kerfjs/ui/sunken-panel`                                                                 | [SunkenPanel](./sunken-panel.md)                                                               |
-| Scrolling view's hero image — `BackdropImage`                                                                                 | A scrolling `Pane` or `NavStack` view opens with a mood or identity image (an artist, album, or place page) that should lag the scroll, dissolve into a color, and read as one surface with the content below.                                                                                                                                                                                            | Do not use it for inline content images, thumbnails, or avatars. Do not hand-roll scroll listeners, `background-attachment: fixed`, or mask gradients. Do not use it outside a vertical scroller; parallax needs one.                                                                                                                      | Place it first in the scrolling content. Pass `src`, `alt` (`""` for decoration), optional `srcset`/`sizes`, `fit`/`position` or a tiled `repeat`, a typed `height`, `parallax` (`none`, `subtle`, or a 0 to 1 factor), `blur` (`radius`, `blurredSrc`, `dim`) for a progressive blur, a typed `fadeTo` color that also paints below, a `scrim` for overlay text, `overlay` content over its block end, and `children` below. Kerf owns the scroll-driven, compositor-only parallax and its static fallbacks.                                                                                                                                                                                                                                                                                                                                                  | The image and alt text, the fade color, overlay content and its contrast, and the content below.                                                         | `@kerfjs/ui/backdrop-image`                                                               | [BackdropImage](./backdrop-image.md)                                                           |
+| Scrolling view hero or card media — `BackdropImage`                                                                           | A scrolling Pane, NavStack view, or image-led ContentItem needs artwork that can lag the scroll, blur, fade, and carry an overlay.                                                                                                                                                                                                                                                                        | Use `ContentItem.media` for feed cards; use `BackdropImage` directly for a page hero. Avoid per-card scroll listeners and `background-attachment: fixed`.                                                                                                                                                                                  | Pass `src`, `alt`, optional responsive sources, `height` for a page hero or `aspectRatio` for inline media, `parallax`, `blur`, `fadeTo`, `scrim`, and `overlay`. `ContentItem.media` composes the same behavior and can extend to the card edges.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | The app owns the artwork, alt text, fade color, overlay content, and contrast.                                                                           | `@kerfjs/ui/backdrop-image`                                                               | [BackdropImage](./backdrop-image.md)                                                           |
 | Menu composition                                                                                                              | Navigation sections need full-size rows and the same content-item geometry as every other pane.                                                                                                                                                                                                                                                                                                           | Do not add sidebar-specific wrapper padding, shrink targets to icon size, nest an interactive trailing control in `ListItem`, or use a chevron on a row that does not disclose content. Use ordinary links for a different navigation contract.                                                                                            | Compose `ListHeader`, `ListItem`, and `ListActionRow` in `.kui-content`; use `ListHeader` toggle mode with real controlled content, and use `ContentItem` for other surfaces plus a pane footer for toolbar actions.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | Information architecture, disclosure content and state, responsive drawer/shell behavior, and token overrides.                                           | `@kerfjs/ui/layout.css`                                                                   | [Pane geometry](../README.md#pane-and-content-geometry)                                        |
 | Resizable application pane — `ResizableRegion`, `clampRegionSize`, `resizeRegionFromPointer`                                  | A controlled split pane needs the Kerf separator, collapse state, pointer plus keyboard resizing, or a product-specific decorative grip.                                                                                                                                                                                                                                                                  | Do not use it for static equal columns; use `Grid`. Use application CSS grid for static asymmetric or intrinsic tracks. Prefer it over Web Awesome `wa-split-panel` unless that component's distinct API is required. Keep `handleIcon` noninteractive.                                                                                    | Call `wireResizableRegions` from `@kerfjs/ui/wire-resizable-regions` once and retain its disposer.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | Size signal, min/max policy, collapse policy, persistence, and optional decorative handle icon.                                                          | `@kerfjs/ui/resizable-region`                                                             | [ResizableRegion contract](./accessibility.md#resizableregion)                                 |
 | One application tab — `TabBarItem`                                                                                            | A controlled app tab needs selection, close, drag, leading/trailing anatomy, compact/segmented/icon-only presentation, label truncation, safe domain metadata, or a product-specific close glyph.                                                                                                                                                                                                         | Do not render it alone or use it for a small settings choice; compose in `TabBar`, or use `SegmentedControl`. Keep `closeIcon` noninteractive.                                                                                                                                                                                             | Compose in `TabBar`; let `wireTabBars` manage interaction. Put only domain `data-*` values in `rootAttributes`; use typed appearance props instead of descendant CSS.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Tab identity, order, selection, close policy, content, domain metadata values, and outer placement.                                                      | `@kerfjs/ui/tab-bar-item`                                                                 | [Tabs contract](./accessibility.md#tabs)                                                       |

package/docs/design/templates/button/emphasis-dark.svg CHANGED Viewed

	@@ -1 +1 @@
1	- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 84" width="520" height="84"><defs><clipPath id="ct0"><rect x="29" y="33" width="48.7" height="18"/></clipPath><clipPath id="ct1"><rect x="103.7" y="33" width="59.3" height="18"/></clipPath><clipPath id="ct2"><rect x="188.9" y="33" width="83.7" height="18"/></clipPath></defs><rect x="20.5" y="20.5" width="66" height="43" rx="11.5" fill="none" stroke="rgba(250,250,255,0.32)" stroke-width="1"/><text x="29" y="48" font-family="system-ui, "-apple-system", sans-serif" font-size="16" font-weight="500" fill="rgb(194,194,198)">Export</text><rect x="95.5" y="20.5" width="76" height="43" rx="11.5" fill="none" stroke="rgb(253,98,101)" stroke-width="1"/><text x="103.69" y="48" font-family="system-ui, "-apple-system", sans-serif" font-size="16" font-weight="500" fill="rgb(255,~~105~~,~~108~~)">Remove</text><rect x="180.5" y="20.5" width="101" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="188.94" y="48" font-family="system-ui, "-apple-system", sans-serif" font-size="16" font-weight="500" fill="rgb(194,194,198)">Learn More</text></svg>
1	+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 84" width="520" height="84"><defs><clipPath id="ct0"><rect x="29" y="33" width="48.7" height="18"/></clipPath><clipPath id="ct1"><rect x="103.7" y="33" width="59.3" height="18"/></clipPath><clipPath id="ct2"><rect x="188.9" y="33" width="83.7" height="18"/></clipPath></defs><rect x="20.5" y="20.5" width="66" height="43" rx="11.5" fill="none" stroke="rgba(250,250,255,0.32)" stroke-width="1"/><text x="29" y="48" font-family="system-ui, "-apple-system", sans-serif" font-size="16" font-weight="500" fill="rgb(194,194,198)">Export</text><rect x="95.5" y="20.5" width="76" height="43" rx="11.5" fill="none" stroke="rgb(253,98,101)" stroke-width="1"/><text x="103.69" y="48" font-family="system-ui, "-apple-system", sans-serif" font-size="16" font-weight="500" fill="rgb(255,133,136)">Remove</text><rect x="180.5" y="20.5" width="101" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="188.94" y="48" font-family="system-ui, "-apple-system", sans-serif" font-size="16" font-weight="500" fill="rgb(194,194,198)">Learn More</text></svg>

package/docs/design/templates/button-dark.svg CHANGED Viewed

	@@ -1 +1 @@
1	- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 552 870" width="552" height="870"><defs><clipPath id="cp0"><rect x="16" y="38" width="520" height="84"/></clipPath><clipPath id="cp1"><rect x="16" y="160" width="520" height="84"/></clipPath><clipPath id="cp2"><rect x="16" y="282" width="520" height="84"/></clipPath><clipPath id="cp3"><rect x="16" y="404" width="520" height="84"/></clipPath><clipPath id="cp4"><rect x="16" y="526" width="520" height="84"/></clipPath><clipPath id="cp5"><rect x="16" y="648" width="520" height="84"/></clipPath><clipPath id="cp6"><rect x="16" y="770" width="520" height="84"/></clipPath><clipPath id="ct7"><rect x="16" y="16" width="520" height="22"/></clipPath><clipPath id="irc8"><rect x="16" y="38" width="520" height="84" rx="0"/></clipPath><clipPath id="ct10"><rect x="16" y="138" width="520" height="22"/></clipPath><clipPath id="irc11"><rect x="16" y="160" width="520" height="84" rx="0"/></clipPath><clipPath id="ct13"><rect x="16" y="260" width="520" height="22"/></clipPath><clipPath id="irc14"><rect x="16" y="282" width="520" height="84" rx="0"/></clipPath><clipPath id="ct16"><rect x="16" y="382" width="520" height="22"/></clipPath><clipPath id="irc17"><rect x="16" y="404" width="520" height="84" rx="0"/></clipPath><clipPath id="ct19"><rect x="16" y="504" width="520" height="22"/></clipPath><clipPath id="irc20"><rect x="16" y="526" width="520" height="84" rx="0"/></clipPath><clipPath id="ct22"><rect x="16" y="626" width="520" height="22"/></clipPath><clipPath id="irc23"><rect x="16" y="648" width="520" height="84" rx="0"/></clipPath><clipPath id="ct25"><rect x="16" y="748" width="520" height="22"/></clipPath><clipPath id="irc26"><rect x="16" y="770" width="520" height="84" rx="0"/></clipPath></defs><rect x="0" y="0" width="552" height="870" rx="0" fill="rgb(28,28,30)"/><text x="16" y="28" font-family="system-ui, "-apple-system", sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Primary Tones</text><g clip-path="url(#cp0)"><g clip-path="url(#irc8)"><clipPath id="svgimg9vclip"><rect x="16" y="38" width="520" height="84"/></clipPath><g clip-path="url(#svgimg9vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg9ct0"><rect x="29" y="33" width="105.3" height="18"/></clipPath><clipPath id="svgimg9ct1"><rect x="160.3" y="33" width="51" height="18"/></clipPath><clipPath id="svgimg9ct2"><rect x="237.3" y="33" width="88.9" height="18"/></clipPath><clipPath id="svgimg9ct3"><rect x="352.2" y="33" width="104.8" height="18"/></clipPath></defs><rect x="20" y="20" width="123.3" height="44" rx="12" fill="rgb(100,210,255)"/><rect x="20.5" y="20.5" width="122" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="29" y="48" font-family="system-ui, "-apple-system", sans-serif" font-size="16" font-weight="500" fill="rgb(17,17,19)">Save Changes</text><rect x="151.3" y="20" width="69" height="44" rx="12" fill="rgb(229,229,234)"/><rect x="151.5" y="20.5" width="68" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="160.28" y="48" font-family="system-ui, "-apple-system", sans-serif" font-size="16" font-weight="500" fill="rgb(28,28,30)">Cancel</text><rect x="228.3" y="20" width="106.9" height="44" rx="12" fill="rgb(52,199,89)"/><rect x="228.5" y="20.5" width="106" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="237.27" y="48" font-family="system-ui, "-apple-system", sans-serif" font-size="16" font-weight="500" fill="rgb(29,29,31)">Price Check</text><rect x="343.2" y="20" width="122.8" height="44" rx="12" fill="rgb(255,56,60)"/><rect x="343.5" y="20.5" width="122" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="352.16" y="48" font-family="system-ui, "-apple-system", sans-serif" font-size="16" font-weight="500" fill="rgb(17,17,19)">Delete Project</text></g></g></g></g><text x="16" y="150" font-family="system-ui, "-apple-system", sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Secondary and Plain Emphasis</text><g clip-path="url(#cp1)"><g clip-path="url(#irc11)"><clipPath id="svgimg12vclip"><rect x="16" y="160" width="520" height="84"/></clipPath><g clip-path="url(#svgimg12vclip)"><g transform="translate(16 160)"><defs><clipPath id="svgimg12ct0"><rect x="29" y="33" width="48.7" height="18"/></clipPath><clipPath id="svgimg12ct1"><rect x="103.7" y="33" width="59.3" height="18"/></clipPath><clipPath id="svgimg12ct2"><rect x="188.9" y="33" width="83.7" height="18"/></clipPath></defs><rect x="20.5" y="20.5" width="66" height="43" rx="11.5" fill="none" stroke="rgba(250,250,255,0.32)" stroke-width="1"/><text x="29" y="48" font-family="system-ui, "-apple-system", sans-serif" font-size="16" font-weight="500" fill="rgb(194,194,198)">Export</text><rect x="95.5" y="20.5" width="76" height="43" rx="11.5" fill="none" stroke="rgb(253,98,101)" stroke-width="1"/><text x="103.69" y="48" font-family="system-ui, "-apple-system", sans-serif" font-size="16" font-weight="500" fill="rgb(255,105,108)">Remove</text><rect x="180.5" y="20.5" width="101" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="188.94" y="48" font-family="system-ui, "-apple-system", sans-serif" font-size="16" font-weight="500" fill="rgb(194,194,198)">Learn More</text></g></g></g></g><text x="16" y="272" font-family="system-ui, "-apple-system", sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">With an Icon, and Icon Only</text><g clip-path="url(#cp2)"><g clip-path="url(#irc14)"><clipPath id="svgimg15vclip"><rect x="16" y="282" width="520" height="84"/></clipPath><g clip-path="url(#svgimg15vclip)"><g transform="translate(16 282)"><defs><clipPath id="svgimg15cp0"><rect x="29" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg15ct2"><rect x="53" y="33" width="82.6" height="18"/></clipPath><clipPath id="svgimg15cp3"><rect x="161.6" y="34" width="16.4" height="16"/></clipPath><clipPath id="svgimg15ct5"><rect x="185.6" y="33" width="45.6" height="18"/></clipPath><clipPath id="svgimg15cp6"><rect x="262" y="34" width="16.3" height="16"/></clipPath></defs><rect x="20" y="20" width="124.6" height="44" rx="12" fill="rgb(100,210,255)"/><rect x="20.5" y="20.5" width="124" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg15cp0)"><g color="rgb(17, 17, 19)"><clipPath id="svgimg15svgic1"><rect x="29" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg15svgic1)"><g transform="translate(29 34)scale(.66667)"><path d="M5 12h14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(17, 17, 19)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M12 5v14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(17, 17, 19)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="53" y="48" font-family="system-ui, "-apple-system", sans-serif" font-size="16" font-weight="500" fill="rgb(17,17,19)">New Ticket</text><rect x="152.6" y="20" width="87.6" height="44" rx="12" fill="rgb(229,229,234)"/><rect x="153.5" y="20.5" width="86" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg15cp3)"><g color="rgb(28, 28, 30)"><clipPath id="svgimg15svgic4"><rect x="161.6" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg15svgic4)"><g transform="translate(161.64 34)scale(.66667)"><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(28, 28, 30)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="185.64" y="48" font-family="system-ui, "-apple-system", sans-serif" font-size="16" font-weight="500" fill="rgb(28,28,30)">Filters</text><rect x="248.3" y="20" width="44" height="44" rx="12" fill="rgb(229,229,234)"/><rect x="248.5" y="20.5" width="43" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg15cp6)"><g color="rgb(28, 28, 30)"><clipPath id="svgimg15svgic7"><rect x="262.3" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg15svgic7)"><g transform="translate(262.281 34)scale(.66667)"><path d="M9.7 4.1a2.3 2.3 0 0 1 4.6 0 2.3 2.3 0 0 0 3.3 2 2.3 2.3 0 0 1 2.4 4 2.3 2.3 0 0 0 0 3.8 2.3 2.3 0 0 1-2.4 4 2.3 2.3 0 0 0-3.3 2 2.3 2.3 0 0 1-4.6 0 2.3 2.3 0 0 0-3.3-2A2.3 2.3 0 0 1 4 14a2.3 2.3 0 0 0 0-3.8 2.3 2.3 0 0 1 2.3-4 2.3 2.3 0 0 0 3.4-2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(28, 28, 30)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><circle cx="12" cy="12" r="3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(28, 28, 30)" 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></g></g></g><text x="16" y="394" font-family="system-ui, "-apple-system", sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Compact and Disabled</text><g clip-path="url(#cp3)"><g clip-path="url(#irc17)"><clipPath id="svgimg18vclip"><rect x="16" y="404" width="520" height="84"/></clipPath><g clip-path="url(#svgimg18vclip)"><g transform="translate(16 404)"><defs><clipPath id="svgimg18ct0"><rect x="29" y="33.5" width="60" height="17"/></clipPath><clipPath id="svgimg18ct1"><rect x="115" y="33" width="85.5" height="18"/></clipPath></defs><rect x="20" y="25.5" width="78" height="33" rx="12" fill="rgb(229,229,234)"/><rect x="20.5" y="26.5" width="77" height="32" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="29" y="47.5" font-family="system-ui, "-apple-system", sans-serif" font-size="14" font-weight="500" fill="rgb(28,28,30)">Compact</text><g opacity="0.5" style="isolation:isolate"><rect x="106" y="20" width="103.5" height="44" rx="12" fill="rgb(229,229,234)"/><rect x="106.5" y="20.5" width="102" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="114.98" y="48" font-family="system-ui, "-apple-system", sans-serif" font-size="16" font-weight="500" fill="rgb(28,28,30)">Unavailable</text></g></g></g></g></g><text x="16" y="516" font-family="system-ui, "-apple-system", sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Toggle, Resting and Pressed</text><g clip-path="url(#cp4)"><g clip-path="url(#irc20)"><clipPath id="svgimg21vclip"><rect x="16" y="526" width="520" height="84"/></clipPath><g clip-path="url(#svgimg21vclip)"><g transform="translate(16 526)"><defs><clipPath id="svgimg21ct0"><rect x="29" y="33" width="59" height="18"/></clipPath><clipPath id="svgimg21ishc1"><rect x="106" y="21" width="99" height="42" rx="11"/></clipPath><clipPath id="svgimg21cp2"><rect x="114" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg21ct4"><rect x="138" y="33" width="59" height="18"/></clipPath><clipPath id="svgimg21ishc5"><rect x="215.1" y="21" width="67.1" height="42" rx="11"/></clipPath><clipPath id="svgimg21ct6"><rect x="223.1" y="33" width="51.1" height="18"/></clipPath><clipPath id="svgimg21ishc7"><rect x="292.2" y="21" width="42" height="42" rx="11"/></clipPath><clipPath id="svgimg21cp8"><rect x="305" y="34" width="16.2" height="16"/></clipPath></defs><rect x="20" y="20" width="77" height="44" rx="12" fill="rgb(229,229,234)"/><rect x="20.5" y="20.5" width="76" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="29" y="48" font-family="system-ui, "-apple-system", sans-serif" font-size="16" font-weight="500" fill="rgb(28,28,30)">Favorite</text><rect x="105" y="20" width="101" height="44" rx="12" fill="rgb(100,210,255)"/><g clip-path="url(#svgimg21ishc1)"><path d="M98 13h115.1v58H98zm19 10h77.1a9 9 0 0 1 9 9v20a9 9 0 0 1-9 9H117a9 9 0 0 1-9-9V32a9 9 0 0 1 9-9" fill="rgba(0,0,0,0)" fill-rule="evenodd"/></g><rect x="105.5" y="20.5" width="100" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg21cp2)"><g color="rgb(17, 17, 19)"><clipPath id="svgimg21svgic3"><rect x="114" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg21svgic3)"><g transform="translate(114.047 34)scale(.66667)"><path d="M11.5 2.3a.5.5 0 0 1 1 0L14.8 7a2 2 0 0 0 1.6 1l5.1.8a.5.5 0 0 1 .3.9l-3.7 3.6a2 2 0 0 0-.6 2l.9 5a.5.5 0 0 1-.8.6L13 18.6a2 2 0 0 0-2 0L6.4 21a.5.5 0 0 1-.8-.6l1-5a2 2 0 0 0-.7-2L2.2 9.8a.5.5 0 0 1 .3-1l5.1-.7A2 2 0 0 0 9.2 7Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(17, 17, 19)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="138.05" y="48" font-family="system-ui, "-apple-system", sans-serif" font-size="16" font-weight="500" fill="rgb(17,17,19)">Favorite</text><rect x="214.1" y="20" width="69.1" height="44" rx="12" fill="rgb(134,219,255)"/><g clip-path="url(#svgimg21ishc5)"><path d="M207.1 13h83.1v58h-83.1zm19 10h45.1a9 9 0 0 1 9 9v20a9 9 0 0 1-9 9h-45.1a9 9 0 0 1-9-9V32a9 9 0 0 1 9-9" fill="rgba(0,0,0,0)" fill-rule="evenodd"/></g><rect x="214.5" y="20.5" width="68" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="223.09" y="48" font-family="system-ui, "-apple-system", sans-serif" font-size="16" font-weight="500" fill="rgb(17,17,19)">Pinned</text><rect x="291.2" y="20" width="44" height="44" rx="12" fill="rgb(100,210,255)"/><g clip-path="url(#svgimg21ishc7)"><path d="M284.2 13h58v58h-58zm19 10h20a9 9 0 0 1 9 9v20a9 9 0 0 1-9 9h-20a9 9 0 0 1-9-9V32a9 9 0 0 1 9-9" fill="rgba(0,0,0,0)" fill-rule="evenodd"/></g><rect x="291.5" y="20.5" width="43" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg21cp8)"><g color="rgb(17, 17, 19)"><clipPath id="svgimg21svgic9"><rect x="305.2" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg21svgic9)"><g transform="translate(305.219 34)scale(.66667)"><path d="M11.5 2.3a.5.5 0 0 1 1 0L14.8 7a2 2 0 0 0 1.6 1l5.1.8a.5.5 0 0 1 .3.9l-3.7 3.6a2 2 0 0 0-.6 2l.9 5a.5.5 0 0 1-.8.6L13 18.6a2 2 0 0 0-2 0L6.4 21a.5.5 0 0 1-.8-.6l1-5a2 2 0 0 0-.7-2L2.2 9.8a.5.5 0 0 1 .3-1l5.1-.7A2 2 0 0 0 9.2 7Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(17, 17, 19)" 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></g></g></g><text x="16" y="638" font-family="system-ui, "-apple-system", sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Pill Shape</text><g clip-path="url(#cp5)"><g clip-path="url(#irc23)"><clipPath id="svgimg24vclip"><rect x="16" y="648" width="520" height="84"/></clipPath><g clip-path="url(#svgimg24vclip)"><g transform="translate(16 648)"><defs><clipPath id="svgimg24ct0"><rect x="29" y="33" width="47.6" height="18"/></clipPath><clipPath id="svgimg24ct1"><rect x="102.6" y="33" width="43" height="18"/></clipPath><clipPath id="svgimg24cp2"><rect x="176.6" y="34" width="16.4" height="16"/></clipPath></defs><rect x="20" y="20" width="65.6" height="44" rx="22" fill="rgb(100,210,255)"/><rect x="20.5" y="20.5" width="65" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="29" y="48" font-family="system-ui, "-apple-system", sans-serif" font-size="16" font-weight="500" fill="rgb(17,17,19)">Follow</text><rect x="93.6" y="20" width="61" height="44" rx="22" fill="rgb(229,229,234)"/><rect x="94.5" y="20.5" width="60" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="102.64" y="48" font-family="system-ui, "-apple-system", sans-serif" font-size="16" font-weight="500" fill="rgb(28,28,30)">Share</text><rect x="162.6" y="20" width="44" height="44" rx="22" fill="rgb(229,229,234)"/><rect x="163.5" y="20.5" width="43" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg24cp2)"><g color="rgb(28, 28, 30)"><clipPath id="svgimg24svgic3"><rect x="176.6" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg24svgic3)"><g transform="translate(176.625 34)scale(.66667)"><path d="M5 12h14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(28, 28, 30)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M12 5v14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(28, 28, 30)" 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></g></g></g><text x="16" y="760" font-family="system-ui, "-apple-system", sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Full-Width Primary Action</text><g clip-path="url(#cp6)"><g clip-path="url(#irc26)"><clipPath id="svgimg27vclip"><rect x="16" y="770" width="520" height="84"/></clipPath><g clip-path="url(#svgimg27vclip)"><g transform="translate(16 770)"><defs><clipPath id="svgimg27cp0"><rect x="174.9" y="34" width="16.1" height="16"/></clipPath><clipPath id="svgimg27cp2"><rect x="198.9" y="33" width="106.3" height="18"/></clipPath><clipPath id="svgimg27ct3"><rect x="198.9" y="33" width="106.3" height="18"/></clipPath></defs><rect x="20" y="20" width="440" height="44" rx="12" fill="rgb(100,210,255)"/><rect x="20.5" y="20.5" width="439" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg27cp0)"><g color="rgb(17, 17, 19)"><clipPath id="svgimg27svgic1"><rect x="174.9" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg27svgic1)"><g transform="translate(174.86 34)scale(.66667)"><path d="M5 12h14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(17, 17, 19)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M12 5v14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(17, 17, 19)" 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(#svgimg27cp2)"><g clip-path="url(#svgimg27ct3)"><text x="198.86" y="48" font-family="system-ui, "-apple-system", sans-serif" font-size="16" font-weight="500" fill="rgb(17,17,19)">Create Project</text></g></g></g></g></g></g></svg>
1	+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 552 870" width="552" height="870"><defs><clipPath id="cp0"><rect x="16" y="38" width="520" height="84"/></clipPath><clipPath id="cp1"><rect x="16" y="160" width="520" height="84"/></clipPath><clipPath id="cp2"><rect x="16" y="282" width="520" height="84"/></clipPath><clipPath id="cp3"><rect x="16" y="404" width="520" height="84"/></clipPath><clipPath id="cp4"><rect x="16" y="526" width="520" height="84"/></clipPath><clipPath id="cp5"><rect x="16" y="648" width="520" height="84"/></clipPath><clipPath id="cp6"><rect x="16" y="770" width="520" height="84"/></clipPath><clipPath id="ct7"><rect x="16" y="16" width="520" height="22"/></clipPath><clipPath id="irc8"><rect x="16" y="38" width="520" height="84" rx="0"/></clipPath><clipPath id="ct10"><rect x="16" y="138" width="520" height="22"/></clipPath><clipPath id="irc11"><rect x="16" y="160" width="520" height="84" rx="0"/></clipPath><clipPath id="ct13"><rect x="16" y="260" width="520" height="22"/></clipPath><clipPath id="irc14"><rect x="16" y="282" width="520" height="84" rx="0"/></clipPath><clipPath id="ct16"><rect x="16" y="382" width="520" height="22"/></clipPath><clipPath id="irc17"><rect x="16" y="404" width="520" height="84" rx="0"/></clipPath><clipPath id="ct19"><rect x="16" y="504" width="520" height="22"/></clipPath><clipPath id="irc20"><rect x="16" y="526" width="520" height="84" rx="0"/></clipPath><clipPath id="ct22"><rect x="16" y="626" width="520" height="22"/></clipPath><clipPath id="irc23"><rect x="16" y="648" width="520" height="84" rx="0"/></clipPath><clipPath id="ct25"><rect x="16" y="748" width="520" height="22"/></clipPath><clipPath id="irc26"><rect x="16" y="770" width="520" height="84" rx="0"/></clipPath></defs><rect x="0" y="0" width="552" height="870" rx="0" fill="rgb(28,28,30)"/><text x="16" y="28" font-family="system-ui, "-apple-system", sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Primary Tones</text><g clip-path="url(#cp0)"><g clip-path="url(#irc8)"><clipPath id="svgimg9vclip"><rect x="16" y="38" width="520" height="84"/></clipPath><g clip-path="url(#svgimg9vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg9ct0"><rect x="29" y="33" width="105.3" height="18"/></clipPath><clipPath id="svgimg9ct1"><rect x="160.3" y="33" width="51" height="18"/></clipPath><clipPath id="svgimg9ct2"><rect x="237.3" y="33" width="88.9" height="18"/></clipPath><clipPath id="svgimg9ct3"><rect x="352.2" y="33" width="104.8" height="18"/></clipPath></defs><rect x="20" y="20" width="123.3" height="44" rx="12" fill="rgb(100,210,255)"/><rect x="20.5" y="20.5" width="122" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="29" y="48" font-family="system-ui, "-apple-system", sans-serif" font-size="16" font-weight="500" fill="rgb(17,17,19)">Save Changes</text><rect x="151.3" y="20" width="69" height="44" rx="12" fill="rgb(229,229,234)"/><rect x="151.5" y="20.5" width="68" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="160.28" y="48" font-family="system-ui, "-apple-system", sans-serif" font-size="16" font-weight="500" fill="rgb(28,28,30)">Cancel</text><rect x="228.3" y="20" width="106.9" height="44" rx="12" fill="rgb(52,199,89)"/><rect x="228.5" y="20.5" width="106" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="237.27" y="48" font-family="system-ui, "-apple-system", sans-serif" font-size="16" font-weight="500" fill="rgb(29,29,31)">Price Check</text><rect x="343.2" y="20" width="122.8" height="44" rx="12" fill="rgb(255,56,60)"/><rect x="343.5" y="20.5" width="122" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="352.16" y="48" font-family="system-ui, "-apple-system", sans-serif" font-size="16" font-weight="500" fill="rgb(17,17,19)">Delete Project</text></g></g></g></g><text x="16" y="150" font-family="system-ui, "-apple-system", sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Secondary and Plain Emphasis</text><g clip-path="url(#cp1)"><g clip-path="url(#irc11)"><clipPath id="svgimg12vclip"><rect x="16" y="160" width="520" height="84"/></clipPath><g clip-path="url(#svgimg12vclip)"><g transform="translate(16 160)"><defs><clipPath id="svgimg12ct0"><rect x="29" y="33" width="48.7" height="18"/></clipPath><clipPath id="svgimg12ct1"><rect x="103.7" y="33" width="59.3" height="18"/></clipPath><clipPath id="svgimg12ct2"><rect x="188.9" y="33" width="83.7" height="18"/></clipPath></defs><rect x="20.5" y="20.5" width="66" height="43" rx="11.5" fill="none" stroke="rgba(250,250,255,0.32)" stroke-width="1"/><text x="29" y="48" font-family="system-ui, "-apple-system", sans-serif" font-size="16" font-weight="500" fill="rgb(194,194,198)">Export</text><rect x="95.5" y="20.5" width="76" height="43" rx="11.5" fill="none" stroke="rgb(253,98,101)" stroke-width="1"/><text x="103.69" y="48" font-family="system-ui, "-apple-system", sans-serif" font-size="16" font-weight="500" fill="rgb(255,133,136)">Remove</text><rect x="180.5" y="20.5" width="101" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="188.94" y="48" font-family="system-ui, "-apple-system", sans-serif" font-size="16" font-weight="500" fill="rgb(194,194,198)">Learn More</text></g></g></g></g><text x="16" y="272" font-family="system-ui, "-apple-system", sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">With an Icon, and Icon Only</text><g clip-path="url(#cp2)"><g clip-path="url(#irc14)"><clipPath id="svgimg15vclip"><rect x="16" y="282" width="520" height="84"/></clipPath><g clip-path="url(#svgimg15vclip)"><g transform="translate(16 282)"><defs><clipPath id="svgimg15cp0"><rect x="29" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg15ct2"><rect x="53" y="33" width="82.6" height="18"/></clipPath><clipPath id="svgimg15cp3"><rect x="161.6" y="34" width="16.4" height="16"/></clipPath><clipPath id="svgimg15ct5"><rect x="185.6" y="33" width="45.6" height="18"/></clipPath><clipPath id="svgimg15cp6"><rect x="262" y="34" width="16.3" height="16"/></clipPath></defs><rect x="20" y="20" width="124.6" height="44" rx="12" fill="rgb(100,210,255)"/><rect x="20.5" y="20.5" width="124" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg15cp0)"><g color="rgb(17, 17, 19)"><clipPath id="svgimg15svgic1"><rect x="29" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg15svgic1)"><g transform="translate(29 34)scale(.66667)"><path d="M5 12h14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(17, 17, 19)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M12 5v14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(17, 17, 19)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="53" y="48" font-family="system-ui, "-apple-system", sans-serif" font-size="16" font-weight="500" fill="rgb(17,17,19)">New Ticket</text><rect x="152.6" y="20" width="87.6" height="44" rx="12" fill="rgb(229,229,234)"/><rect x="153.5" y="20.5" width="86" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg15cp3)"><g color="rgb(28, 28, 30)"><clipPath id="svgimg15svgic4"><rect x="161.6" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg15svgic4)"><g transform="translate(161.64 34)scale(.66667)"><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(28, 28, 30)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="185.64" y="48" font-family="system-ui, "-apple-system", sans-serif" font-size="16" font-weight="500" fill="rgb(28,28,30)">Filters</text><rect x="248.3" y="20" width="44" height="44" rx="12" fill="rgb(229,229,234)"/><rect x="248.5" y="20.5" width="43" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg15cp6)"><g color="rgb(28, 28, 30)"><clipPath id="svgimg15svgic7"><rect x="262.3" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg15svgic7)"><g transform="translate(262.281 34)scale(.66667)"><path d="M9.7 4.1a2.3 2.3 0 0 1 4.6 0 2.3 2.3 0 0 0 3.3 2 2.3 2.3 0 0 1 2.4 4 2.3 2.3 0 0 0 0 3.8 2.3 2.3 0 0 1-2.4 4 2.3 2.3 0 0 0-3.3 2 2.3 2.3 0 0 1-4.6 0 2.3 2.3 0 0 0-3.3-2A2.3 2.3 0 0 1 4 14a2.3 2.3 0 0 0 0-3.8 2.3 2.3 0 0 1 2.3-4 2.3 2.3 0 0 0 3.4-2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(28, 28, 30)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><circle cx="12" cy="12" r="3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(28, 28, 30)" 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></g></g></g><text x="16" y="394" font-family="system-ui, "-apple-system", sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Compact and Disabled</text><g clip-path="url(#cp3)"><g clip-path="url(#irc17)"><clipPath id="svgimg18vclip"><rect x="16" y="404" width="520" height="84"/></clipPath><g clip-path="url(#svgimg18vclip)"><g transform="translate(16 404)"><defs><clipPath id="svgimg18ct0"><rect x="29" y="33.5" width="60" height="17"/></clipPath><clipPath id="svgimg18ct1"><rect x="115" y="33" width="85.5" height="18"/></clipPath></defs><rect x="20" y="25.5" width="78" height="33" rx="12" fill="rgb(229,229,234)"/><rect x="20.5" y="26.5" width="77" height="32" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="29" y="47.5" font-family="system-ui, "-apple-system", sans-serif" font-size="14" font-weight="500" fill="rgb(28,28,30)">Compact</text><g opacity="0.5" style="isolation:isolate"><rect x="106" y="20" width="103.5" height="44" rx="12" fill="rgb(229,229,234)"/><rect x="106.5" y="20.5" width="102" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="114.98" y="48" font-family="system-ui, "-apple-system", sans-serif" font-size="16" font-weight="500" fill="rgb(28,28,30)">Unavailable</text></g></g></g></g></g><text x="16" y="516" font-family="system-ui, "-apple-system", sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Toggle, Resting and Pressed</text><g clip-path="url(#cp4)"><g clip-path="url(#irc20)"><clipPath id="svgimg21vclip"><rect x="16" y="526" width="520" height="84"/></clipPath><g clip-path="url(#svgimg21vclip)"><g transform="translate(16 526)"><defs><clipPath id="svgimg21ct0"><rect x="29" y="33" width="59" height="18"/></clipPath><clipPath id="svgimg21ishc1"><rect x="106" y="21" width="99" height="42" rx="11"/></clipPath><clipPath id="svgimg21cp2"><rect x="114" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg21ct4"><rect x="138" y="33" width="59" height="18"/></clipPath><clipPath id="svgimg21ishc5"><rect x="215.1" y="21" width="67.1" height="42" rx="11"/></clipPath><clipPath id="svgimg21ct6"><rect x="223.1" y="33" width="51.1" height="18"/></clipPath><clipPath id="svgimg21ishc7"><rect x="292.2" y="21" width="42" height="42" rx="11"/></clipPath><clipPath id="svgimg21cp8"><rect x="305" y="34" width="16.2" height="16"/></clipPath></defs><rect x="20" y="20" width="77" height="44" rx="12" fill="rgb(229,229,234)"/><rect x="20.5" y="20.5" width="76" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="29" y="48" font-family="system-ui, "-apple-system", sans-serif" font-size="16" font-weight="500" fill="rgb(28,28,30)">Favorite</text><rect x="105" y="20" width="101" height="44" rx="12" fill="rgb(100,210,255)"/><g clip-path="url(#svgimg21ishc1)"><path d="M98 13h115.1v58H98zm19 10h77.1a9 9 0 0 1 9 9v20a9 9 0 0 1-9 9H117a9 9 0 0 1-9-9V32a9 9 0 0 1 9-9" fill="rgba(0,0,0,0)" fill-rule="evenodd"/></g><rect x="105.5" y="20.5" width="100" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg21cp2)"><g color="rgb(17, 17, 19)"><clipPath id="svgimg21svgic3"><rect x="114" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg21svgic3)"><g transform="translate(114.047 34)scale(.66667)"><path d="M11.5 2.3a.5.5 0 0 1 1 0L14.8 7a2 2 0 0 0 1.6 1l5.1.8a.5.5 0 0 1 .3.9l-3.7 3.6a2 2 0 0 0-.6 2l.9 5a.5.5 0 0 1-.8.6L13 18.6a2 2 0 0 0-2 0L6.4 21a.5.5 0 0 1-.8-.6l1-5a2 2 0 0 0-.7-2L2.2 9.8a.5.5 0 0 1 .3-1l5.1-.7A2 2 0 0 0 9.2 7Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(17, 17, 19)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="138.05" y="48" font-family="system-ui, "-apple-system", sans-serif" font-size="16" font-weight="500" fill="rgb(17,17,19)">Favorite</text><rect x="214.1" y="20" width="69.1" height="44" rx="12" fill="rgb(134,219,255)"/><g clip-path="url(#svgimg21ishc5)"><path d="M207.1 13h83.1v58h-83.1zm19 10h45.1a9 9 0 0 1 9 9v20a9 9 0 0 1-9 9h-45.1a9 9 0 0 1-9-9V32a9 9 0 0 1 9-9" fill="rgba(0,0,0,0)" fill-rule="evenodd"/></g><rect x="214.5" y="20.5" width="68" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="223.09" y="48" font-family="system-ui, "-apple-system", sans-serif" font-size="16" font-weight="500" fill="rgb(17,17,19)">Pinned</text><rect x="291.2" y="20" width="44" height="44" rx="12" fill="rgb(100,210,255)"/><g clip-path="url(#svgimg21ishc7)"><path d="M284.2 13h58v58h-58zm19 10h20a9 9 0 0 1 9 9v20a9 9 0 0 1-9 9h-20a9 9 0 0 1-9-9V32a9 9 0 0 1 9-9" fill="rgba(0,0,0,0)" fill-rule="evenodd"/></g><rect x="291.5" y="20.5" width="43" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg21cp8)"><g color="rgb(17, 17, 19)"><clipPath id="svgimg21svgic9"><rect x="305.2" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg21svgic9)"><g transform="translate(305.219 34)scale(.66667)"><path d="M11.5 2.3a.5.5 0 0 1 1 0L14.8 7a2 2 0 0 0 1.6 1l5.1.8a.5.5 0 0 1 .3.9l-3.7 3.6a2 2 0 0 0-.6 2l.9 5a.5.5 0 0 1-.8.6L13 18.6a2 2 0 0 0-2 0L6.4 21a.5.5 0 0 1-.8-.6l1-5a2 2 0 0 0-.7-2L2.2 9.8a.5.5 0 0 1 .3-1l5.1-.7A2 2 0 0 0 9.2 7Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(17, 17, 19)" 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></g></g></g><text x="16" y="638" font-family="system-ui, "-apple-system", sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Pill Shape</text><g clip-path="url(#cp5)"><g clip-path="url(#irc23)"><clipPath id="svgimg24vclip"><rect x="16" y="648" width="520" height="84"/></clipPath><g clip-path="url(#svgimg24vclip)"><g transform="translate(16 648)"><defs><clipPath id="svgimg24ct0"><rect x="29" y="33" width="47.6" height="18"/></clipPath><clipPath id="svgimg24ct1"><rect x="102.6" y="33" width="43" height="18"/></clipPath><clipPath id="svgimg24cp2"><rect x="176.6" y="34" width="16.4" height="16"/></clipPath></defs><rect x="20" y="20" width="65.6" height="44" rx="22" fill="rgb(100,210,255)"/><rect x="20.5" y="20.5" width="65" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="29" y="48" font-family="system-ui, "-apple-system", sans-serif" font-size="16" font-weight="500" fill="rgb(17,17,19)">Follow</text><rect x="93.6" y="20" width="61" height="44" rx="22" fill="rgb(229,229,234)"/><rect x="94.5" y="20.5" width="60" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="102.64" y="48" font-family="system-ui, "-apple-system", sans-serif" font-size="16" font-weight="500" fill="rgb(28,28,30)">Share</text><rect x="162.6" y="20" width="44" height="44" rx="22" fill="rgb(229,229,234)"/><rect x="163.5" y="20.5" width="43" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg24cp2)"><g color="rgb(28, 28, 30)"><clipPath id="svgimg24svgic3"><rect x="176.6" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg24svgic3)"><g transform="translate(176.625 34)scale(.66667)"><path d="M5 12h14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(28, 28, 30)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M12 5v14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(28, 28, 30)" 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></g></g></g><text x="16" y="760" font-family="system-ui, "-apple-system", sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Full-Width Primary Action</text><g clip-path="url(#cp6)"><g clip-path="url(#irc26)"><clipPath id="svgimg27vclip"><rect x="16" y="770" width="520" height="84"/></clipPath><g clip-path="url(#svgimg27vclip)"><g transform="translate(16 770)"><defs><clipPath id="svgimg27cp0"><rect x="174.9" y="34" width="16.1" height="16"/></clipPath><clipPath id="svgimg27cp2"><rect x="198.9" y="33" width="106.3" height="18"/></clipPath><clipPath id="svgimg27ct3"><rect x="198.9" y="33" width="106.3" height="18"/></clipPath></defs><rect x="20" y="20" width="440" height="44" rx="12" fill="rgb(100,210,255)"/><rect x="20.5" y="20.5" width="439" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg27cp0)"><g color="rgb(17, 17, 19)"><clipPath id="svgimg27svgic1"><rect x="174.9" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg27svgic1)"><g transform="translate(174.86 34)scale(.66667)"><path d="M5 12h14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(17, 17, 19)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M12 5v14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(17, 17, 19)" 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(#svgimg27cp2)"><g clip-path="url(#svgimg27ct3)"><text x="198.86" y="48" font-family="system-ui, "-apple-system", sans-serif" font-size="16" font-weight="500" fill="rgb(17,17,19)">Create Project</text></g></g></g></g></g></g></svg>

package/docs/design/templates/checkbox/error-dark.svg CHANGED Viewed

	@@ -1 +1 @@
1	- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 90" width="400" height="90"><defs><clipPath id="ct0"><rect x="48" y="20" width="187.9" height="19.6"/></clipPath><clipPath id="ct1"><rect x="20" y="40" width="360" height="22.4"/></clipPath></defs><text x="48" y="35.41" font-family="system-ui, "-apple-system", sans-serif" font-size="16" fill="rgb(245,245,247)">I accept the release terms</text><text x="48" y="56" font-family="system-ui, "-apple-system", sans-serif" font-size="14" fill="rgb(255,~~105~~,~~108~~)">Accept the terms to continue.</text><rect x="20" y="20" width="20" height="20" rx="3" fill="rgb(28,28,30)"/><rect x="20.5" y="20.5" width="19" height="19" rx="2.5" fill="none" stroke="rgb(253,98,101)" stroke-width="1"/></svg>
1	+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 90" width="400" height="90"><defs><clipPath id="ct0"><rect x="48" y="20" width="187.9" height="19.6"/></clipPath><clipPath id="ct1"><rect x="20" y="40" width="360" height="22.4"/></clipPath></defs><text x="48" y="35.41" font-family="system-ui, "-apple-system", sans-serif" font-size="16" fill="rgb(245,245,247)">I accept the release terms</text><text x="48" y="56" font-family="system-ui, "-apple-system", sans-serif" font-size="14" fill="rgb(255,133,136)">Accept the terms to continue.</text><rect x="20" y="20" width="20" height="20" rx="3" fill="rgb(28,28,30)"/><rect x="20.5" y="20.5" width="19" height="19" rx="2.5" fill="none" stroke="rgb(253,98,101)" stroke-width="1"/></svg>

package/docs/design/templates/checkbox/states.svg CHANGED Viewed

	@@ -1 +1 @@
1	- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 146" width="400" height="146"><defs><clipPath id="ct0"><rect x="48" y="20" width="126.1" height="19.6"/></clipPath><clipPath id="ct1"><rect x="48" y="48" width="122" height="19.6"/></clipPath><clipPath id="ct2"><rect x="20" y="68" width="360" height="22.4"/></clipPath><clipPath id="ct3"><rect x="48" y="98.4" width="106.7" height="19.6"/></clipPath><clipPath id="cp4"><rect x="23" y="101" width="14" height="14.4"/></clipPath><clipPath id="cp6"><rect x="23" y="23" width="14" height="14"/></clipPath></defs><text x="48" y="35.41" font-family="system-ui, "-apple-system", sans-serif" font-size="16" fill="rgb(29,29,31)">Include in release</text><text x="48" y="63.41" font-family="system-ui, "-apple-system", sans-serif" font-size="16" fill="rgb(29,29,31)">Email summaries</text><text x="48" y="84" font-family="system-ui, "-apple-system", sans-serif" font-size="14" fill="rgb(~~110~~,~~110~~,~~115~~)">Sent every Monday morning.</text><g opacity="0.5" style="isolation:isolate"><text x="48" y="113.8" font-family="system-ui, "-apple-system", sans-serif" font-size="16" fill="rgb(29,29,31)">Locked setting</text><rect x="20" y="98.4" width="20" height="20" rx="3" fill="rgb(0,117,219)"/><rect x="20.5" y="98.5" width="19" height="19" rx="2.5" fill="none" stroke="rgb(0,117,219)" stroke-width="1"/><g clip-path="url(#cp4)"><g color="rgb(255, 255, 255)"><clipPath id="svgic5"><rect x="23" y="101.4" width="14" height="14"/></clipPath><g clip-path="url(#svgic5)"><g transform="translate(23 101.39)scale(.58333)"><path d="M20 6 9 17l-5-5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 255, 255)" stroke-width="3px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g><rect x="20" y="20" width="20" height="20" rx="3" fill="rgb(0,117,219)"/><rect x="20.5" y="20.5" width="19" height="19" rx="2.5" fill="none" stroke="rgb(0,117,219)" stroke-width="1"/><g clip-path="url(#cp6)"><g color="rgb(255, 255, 255)"><clipPath id="svgic7"><rect x="23" y="23" width="14" height="14"/></clipPath><g clip-path="url(#svgic7)"><g transform="translate(23 23)scale(.58333)"><path d="M20 6 9 17l-5-5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 255, 255)" stroke-width="3px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="20" y="48" width="20" height="20" rx="3" fill="rgb(255,255,255)"/><rect x="20.5" y="48.5" width="19" height="19" rx="2.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/></svg>
1	+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 146" width="400" height="146"><defs><clipPath id="ct0"><rect x="48" y="20" width="126.1" height="19.6"/></clipPath><clipPath id="ct1"><rect x="48" y="48" width="122" height="19.6"/></clipPath><clipPath id="ct2"><rect x="20" y="68" width="360" height="22.4"/></clipPath><clipPath id="ct3"><rect x="48" y="98.4" width="106.7" height="19.6"/></clipPath><clipPath id="cp4"><rect x="23" y="101" width="14" height="14.4"/></clipPath><clipPath id="cp6"><rect x="23" y="23" width="14" height="14"/></clipPath></defs><text x="48" y="35.41" font-family="system-ui, "-apple-system", sans-serif" font-size="16" fill="rgb(29,29,31)">Include in release</text><text x="48" y="63.41" font-family="system-ui, "-apple-system", sans-serif" font-size="16" fill="rgb(29,29,31)">Email summaries</text><text x="48" y="84" font-family="system-ui, "-apple-system", sans-serif" font-size="14" fill="rgb(100,100,105)">Sent every Monday morning.</text><g opacity="0.5" style="isolation:isolate"><text x="48" y="113.8" font-family="system-ui, "-apple-system", sans-serif" font-size="16" fill="rgb(29,29,31)">Locked setting</text><rect x="20" y="98.4" width="20" height="20" rx="3" fill="rgb(0,117,219)"/><rect x="20.5" y="98.5" width="19" height="19" rx="2.5" fill="none" stroke="rgb(0,117,219)" stroke-width="1"/><g clip-path="url(#cp4)"><g color="rgb(255, 255, 255)"><clipPath id="svgic5"><rect x="23" y="101.4" width="14" height="14"/></clipPath><g clip-path="url(#svgic5)"><g transform="translate(23 101.39)scale(.58333)"><path d="M20 6 9 17l-5-5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 255, 255)" stroke-width="3px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g><rect x="20" y="20" width="20" height="20" rx="3" fill="rgb(0,117,219)"/><rect x="20.5" y="20.5" width="19" height="19" rx="2.5" fill="none" stroke="rgb(0,117,219)" stroke-width="1"/><g clip-path="url(#cp6)"><g color="rgb(255, 255, 255)"><clipPath id="svgic7"><rect x="23" y="23" width="14" height="14"/></clipPath><g clip-path="url(#svgic7)"><g transform="translate(23 23)scale(.58333)"><path d="M20 6 9 17l-5-5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 255, 255)" stroke-width="3px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="20" y="48" width="20" height="20" rx="3" fill="rgb(255,255,255)"/><rect x="20.5" y="48.5" width="19" height="19" rx="2.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/></svg>

package/docs/design/templates/checkbox-dark.svg CHANGED Viewed

	@@ -1 +1 @@
1	- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 432 604" width="432" height="604"><defs><clipPath id="cp0"><rect x="16" y="38" width="400" height="146"/></clipPath><clipPath id="cp1"><rect x="16" y="222" width="400" height="116"/></clipPath><clipPath id="cp2"><rect x="16" y="376" width="400" height="90"/></clipPath><clipPath id="cp3"><rect x="16" y="504" width="400" height="84"/></clipPath><clipPath id="ct4"><rect x="16" y="16" width="400" height="22"/></clipPath><clipPath id="irc5"><rect x="16" y="38" width="400" height="146" rx="0"/></clipPath><clipPath id="ct7"><rect x="16" y="200" width="400" height="22"/></clipPath><clipPath id="irc8"><rect x="16" y="222" width="400" height="116" rx="0"/></clipPath><clipPath id="ct10"><rect x="16" y="354" width="400" height="22"/></clipPath><clipPath id="irc11"><rect x="16" y="376" width="400" height="90" rx="0"/></clipPath><clipPath id="ct13"><rect x="16" y="482" width="400" height="22"/></clipPath><clipPath id="irc14"><rect x="16" y="504" width="400" height="84" rx="0"/></clipPath></defs><rect x="0" y="0" width="432" height="604" rx="0" fill="rgb(28,28,30)"/><text x="16" y="28" font-family="system-ui, "-apple-system", sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Checked, Unchecked, and Disabled</text><g clip-path="url(#cp0)"><g clip-path="url(#irc5)"><clipPath id="svgimg6vclip"><rect x="16" y="38" width="400" height="146"/></clipPath><g clip-path="url(#svgimg6vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg6ct0"><rect x="48" y="20" width="126.1" height="19.6"/></clipPath><clipPath id="svgimg6ct1"><rect x="48" y="48" width="122" height="19.6"/></clipPath><clipPath id="svgimg6ct2"><rect x="20" y="68" width="360" height="22.4"/></clipPath><clipPath id="svgimg6ct3"><rect x="48" y="98.4" width="106.7" height="19.6"/></clipPath><clipPath id="svgimg6cp4"><rect x="23" y="101" width="14" height="14.4"/></clipPath><clipPath id="svgimg6cp6"><rect x="23" y="23" width="14" height="14"/></clipPath></defs><text x="48" y="35.41" font-family="system-ui, "-apple-system", sans-serif" font-size="16" fill="rgb(245,245,247)">Include in release</text><text x="48" y="63.41" font-family="system-ui, "-apple-system", sans-serif" font-size="16" fill="rgb(245,245,247)">Email summaries</text><text x="48" y="84" font-family="system-ui, "-apple-system", sans-serif" font-size="14" fill="rgb(174,174,178)">Sent every Monday morning.</text><g opacity="0.5" style="isolation:isolate"><text x="48" y="113.8" font-family="system-ui, "-apple-system", sans-serif" font-size="16" fill="rgb(245,245,247)">Locked setting</text><rect x="20" y="98.4" width="20" height="20" rx="3" fill="rgb(100,210,255)"/><rect x="20.5" y="98.5" width="19" height="19" rx="2.5" fill="none" stroke="rgb(100,210,255)" stroke-width="1"/><g clip-path="url(#svgimg6cp4)"><g color="rgb(17, 17, 19)"><clipPath id="svgimg6svgic5"><rect x="23" y="101.4" width="14" height="14"/></clipPath><g clip-path="url(#svgimg6svgic5)"><g transform="translate(23 101.39)scale(.58333)"><path d="M20 6 9 17l-5-5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(17, 17, 19)" stroke-width="3px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g><rect x="20" y="20" width="20" height="20" rx="3" fill="rgb(100,210,255)"/><rect x="20.5" y="20.5" width="19" height="19" rx="2.5" fill="none" stroke="rgb(100,210,255)" stroke-width="1"/><g clip-path="url(#svgimg6cp6)"><g color="rgb(17, 17, 19)"><clipPath id="svgimg6svgic7"><rect x="23" y="23" width="14" height="14"/></clipPath><g clip-path="url(#svgimg6svgic7)"><g transform="translate(23 23)scale(.58333)"><path d="M20 6 9 17l-5-5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(17, 17, 19)" stroke-width="3px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="20" y="48" width="20" height="20" rx="3" fill="rgb(28,28,30)"/><rect x="20.5" y="48.5" width="19" height="19" rx="2.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/></g></g></g></g><text x="16" y="212" font-family="system-ui, "-apple-system", sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Mixed Parent</text><g clip-path="url(#cp1)"><g clip-path="url(#irc8)"><clipPath id="svgimg9vclip"><rect x="16" y="222" width="400" height="116"/></clipPath><g clip-path="url(#svgimg9vclip)"><g transform="translate(16 222)"><defs><clipPath id="svgimg9ct0"><rect x="48" y="20" width="60.3" height="19.6"/></clipPath><clipPath id="svgimg9ct1"><rect x="48" y="48" width="101.6" height="19.6"/></clipPath><clipPath id="svgimg9ct2"><rect x="48" y="76" width="92.7" height="19.6"/></clipPath><clipPath id="svgimg9cp3"><rect x="23" y="23" width="14" height="14"/></clipPath><clipPath id="svgimg9cp5"><rect x="23" y="51" width="14" height="14"/></clipPath></defs><text x="48" y="35.41" font-family="system-ui, "-apple-system", sans-serif" font-size="16" fill="rgb(245,245,247)">All tasks</text><text x="48" y="63.41" font-family="system-ui, "-apple-system", sans-serif" font-size="16" fill="rgb(245,245,247)">Design review</text><text x="48" y="91.41" font-family="system-ui, "-apple-system", sans-serif" font-size="16" fill="rgb(245,245,247)">Build release</text><rect x="20" y="20" width="20" height="20" rx="3" fill="rgb(100,210,255)"/><rect x="20.5" y="20.5" width="19" height="19" rx="2.5" fill="none" stroke="rgb(100,210,255)" stroke-width="1"/><g clip-path="url(#svgimg9cp3)"><g color="rgb(17, 17, 19)"><clipPath id="svgimg9svgic4"><rect x="23" y="23" width="14" height="14"/></clipPath><g clip-path="url(#svgimg9svgic4)"><g transform="translate(23 23)scale(.58333)"><path d="M5 12h14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(17, 17, 19)" stroke-width="3px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="20" y="48" width="20" height="20" rx="3" fill="rgb(100,210,255)"/><rect x="20.5" y="48.5" width="19" height="19" rx="2.5" fill="none" stroke="rgb(100,210,255)" stroke-width="1"/><g clip-path="url(#svgimg9cp5)"><g color="rgb(17, 17, 19)"><clipPath id="svgimg9svgic6"><rect x="23" y="51" width="14" height="14"/></clipPath><g clip-path="url(#svgimg9svgic6)"><g transform="translate(23 51)scale(.58333)"><path d="M20 6 9 17l-5-5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(17, 17, 19)" stroke-width="3px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="20" y="76" width="20" height="20" rx="3" fill="rgb(28,28,30)"/><rect x="20.5" y="76.5" width="19" height="19" rx="2.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/></g></g></g></g><text x="16" y="366" font-family="system-ui, "-apple-system", sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Required with an Error</text><g clip-path="url(#cp2)"><g clip-path="url(#irc11)"><clipPath id="svgimg12vclip"><rect x="16" y="376" width="400" height="90"/></clipPath><g clip-path="url(#svgimg12vclip)"><g transform="translate(16 376)"><defs><clipPath id="svgimg12ct0"><rect x="48" y="20" width="187.9" height="19.6"/></clipPath><clipPath id="svgimg12ct1"><rect x="20" y="40" width="360" height="22.4"/></clipPath></defs><text x="48" y="35.41" font-family="system-ui, "-apple-system", sans-serif" font-size="16" fill="rgb(245,245,247)">I accept the release terms</text><text x="48" y="56" font-family="system-ui, "-apple-system", sans-serif" font-size="14" fill="rgb(255,~~105~~,~~108~~)">Accept the terms to continue.</text><rect x="20" y="20" width="20" height="20" rx="3" fill="rgb(28,28,30)"/><rect x="20.5" y="20.5" width="19" height="19" rx="2.5" fill="none" stroke="rgb(253,98,101)" stroke-width="1"/></g></g></g></g><text x="16" y="494" font-family="system-ui, "-apple-system", sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Compact</text><g clip-path="url(#cp3)"><g clip-path="url(#irc14)"><clipPath id="svgimg15vclip"><rect x="16" y="504" width="400" height="84"/></clipPath><g clip-path="url(#svgimg15vclip)"><g transform="translate(16 504)"><defs><clipPath id="svgimg15ct0"><rect x="45" y="20" width="94.3" height="17.4"/></clipPath><clipPath id="svgimg15ct1"><rect x="45" y="46" width="77.3" height="17.4"/></clipPath><clipPath id="svgimg15cp2"><rect x="23" y="23" width="12" height="12"/></clipPath></defs><text x="45" y="33.59" font-family="system-ui, "-apple-system", sans-serif" font-size="14" fill="rgb(245,245,247)">Show archived</text><text x="45" y="59.59" font-family="system-ui, "-apple-system", sans-serif" font-size="14" fill="rgb(245,245,247)">Show drafts</text><rect x="20" y="20" width="18" height="18" rx="3" fill="rgb(100,210,255)"/><rect x="20.5" y="20.5" width="17" height="17" rx="2.5" fill="none" stroke="rgb(100,210,255)" stroke-width="1"/><g clip-path="url(#svgimg15cp2)"><g color="rgb(17, 17, 19)"><clipPath id="svgimg15svgic3"><rect x="23" y="23" width="12" height="12"/></clipPath><g clip-path="url(#svgimg15svgic3)"><g transform="matrix(.5 0 0 .5 23 23)"><path d="M20 6 9 17l-5-5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(17, 17, 19)" stroke-width="3px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="20" y="46" width="18" height="18" rx="3" fill="rgb(28,28,30)"/><rect x="20.5" y="46.5" width="17" height="17" rx="2.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/></g></g></g></g></svg>
1	+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 432 604" width="432" height="604"><defs><clipPath id="cp0"><rect x="16" y="38" width="400" height="146"/></clipPath><clipPath id="cp1"><rect x="16" y="222" width="400" height="116"/></clipPath><clipPath id="cp2"><rect x="16" y="376" width="400" height="90"/></clipPath><clipPath id="cp3"><rect x="16" y="504" width="400" height="84"/></clipPath><clipPath id="ct4"><rect x="16" y="16" width="400" height="22"/></clipPath><clipPath id="irc5"><rect x="16" y="38" width="400" height="146" rx="0"/></clipPath><clipPath id="ct7"><rect x="16" y="200" width="400" height="22"/></clipPath><clipPath id="irc8"><rect x="16" y="222" width="400" height="116" rx="0"/></clipPath><clipPath id="ct10"><rect x="16" y="354" width="400" height="22"/></clipPath><clipPath id="irc11"><rect x="16" y="376" width="400" height="90" rx="0"/></clipPath><clipPath id="ct13"><rect x="16" y="482" width="400" height="22"/></clipPath><clipPath id="irc14"><rect x="16" y="504" width="400" height="84" rx="0"/></clipPath></defs><rect x="0" y="0" width="432" height="604" rx="0" fill="rgb(28,28,30)"/><text x="16" y="28" font-family="system-ui, "-apple-system", sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Checked, Unchecked, and Disabled</text><g clip-path="url(#cp0)"><g clip-path="url(#irc5)"><clipPath id="svgimg6vclip"><rect x="16" y="38" width="400" height="146"/></clipPath><g clip-path="url(#svgimg6vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg6ct0"><rect x="48" y="20" width="126.1" height="19.6"/></clipPath><clipPath id="svgimg6ct1"><rect x="48" y="48" width="122" height="19.6"/></clipPath><clipPath id="svgimg6ct2"><rect x="20" y="68" width="360" height="22.4"/></clipPath><clipPath id="svgimg6ct3"><rect x="48" y="98.4" width="106.7" height="19.6"/></clipPath><clipPath id="svgimg6cp4"><rect x="23" y="101" width="14" height="14.4"/></clipPath><clipPath id="svgimg6cp6"><rect x="23" y="23" width="14" height="14"/></clipPath></defs><text x="48" y="35.41" font-family="system-ui, "-apple-system", sans-serif" font-size="16" fill="rgb(245,245,247)">Include in release</text><text x="48" y="63.41" font-family="system-ui, "-apple-system", sans-serif" font-size="16" fill="rgb(245,245,247)">Email summaries</text><text x="48" y="84" font-family="system-ui, "-apple-system", sans-serif" font-size="14" fill="rgb(174,174,178)">Sent every Monday morning.</text><g opacity="0.5" style="isolation:isolate"><text x="48" y="113.8" font-family="system-ui, "-apple-system", sans-serif" font-size="16" fill="rgb(245,245,247)">Locked setting</text><rect x="20" y="98.4" width="20" height="20" rx="3" fill="rgb(100,210,255)"/><rect x="20.5" y="98.5" width="19" height="19" rx="2.5" fill="none" stroke="rgb(100,210,255)" stroke-width="1"/><g clip-path="url(#svgimg6cp4)"><g color="rgb(17, 17, 19)"><clipPath id="svgimg6svgic5"><rect x="23" y="101.4" width="14" height="14"/></clipPath><g clip-path="url(#svgimg6svgic5)"><g transform="translate(23 101.39)scale(.58333)"><path d="M20 6 9 17l-5-5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(17, 17, 19)" stroke-width="3px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g><rect x="20" y="20" width="20" height="20" rx="3" fill="rgb(100,210,255)"/><rect x="20.5" y="20.5" width="19" height="19" rx="2.5" fill="none" stroke="rgb(100,210,255)" stroke-width="1"/><g clip-path="url(#svgimg6cp6)"><g color="rgb(17, 17, 19)"><clipPath id="svgimg6svgic7"><rect x="23" y="23" width="14" height="14"/></clipPath><g clip-path="url(#svgimg6svgic7)"><g transform="translate(23 23)scale(.58333)"><path d="M20 6 9 17l-5-5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(17, 17, 19)" stroke-width="3px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="20" y="48" width="20" height="20" rx="3" fill="rgb(28,28,30)"/><rect x="20.5" y="48.5" width="19" height="19" rx="2.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/></g></g></g></g><text x="16" y="212" font-family="system-ui, "-apple-system", sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Mixed Parent</text><g clip-path="url(#cp1)"><g clip-path="url(#irc8)"><clipPath id="svgimg9vclip"><rect x="16" y="222" width="400" height="116"/></clipPath><g clip-path="url(#svgimg9vclip)"><g transform="translate(16 222)"><defs><clipPath id="svgimg9ct0"><rect x="48" y="20" width="60.3" height="19.6"/></clipPath><clipPath id="svgimg9ct1"><rect x="48" y="48" width="101.6" height="19.6"/></clipPath><clipPath id="svgimg9ct2"><rect x="48" y="76" width="92.7" height="19.6"/></clipPath><clipPath id="svgimg9cp3"><rect x="23" y="23" width="14" height="14"/></clipPath><clipPath id="svgimg9cp5"><rect x="23" y="51" width="14" height="14"/></clipPath></defs><text x="48" y="35.41" font-family="system-ui, "-apple-system", sans-serif" font-size="16" fill="rgb(245,245,247)">All tasks</text><text x="48" y="63.41" font-family="system-ui, "-apple-system", sans-serif" font-size="16" fill="rgb(245,245,247)">Design review</text><text x="48" y="91.41" font-family="system-ui, "-apple-system", sans-serif" font-size="16" fill="rgb(245,245,247)">Build release</text><rect x="20" y="20" width="20" height="20" rx="3" fill="rgb(100,210,255)"/><rect x="20.5" y="20.5" width="19" height="19" rx="2.5" fill="none" stroke="rgb(100,210,255)" stroke-width="1"/><g clip-path="url(#svgimg9cp3)"><g color="rgb(17, 17, 19)"><clipPath id="svgimg9svgic4"><rect x="23" y="23" width="14" height="14"/></clipPath><g clip-path="url(#svgimg9svgic4)"><g transform="translate(23 23)scale(.58333)"><path d="M5 12h14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(17, 17, 19)" stroke-width="3px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="20" y="48" width="20" height="20" rx="3" fill="rgb(100,210,255)"/><rect x="20.5" y="48.5" width="19" height="19" rx="2.5" fill="none" stroke="rgb(100,210,255)" stroke-width="1"/><g clip-path="url(#svgimg9cp5)"><g color="rgb(17, 17, 19)"><clipPath id="svgimg9svgic6"><rect x="23" y="51" width="14" height="14"/></clipPath><g clip-path="url(#svgimg9svgic6)"><g transform="translate(23 51)scale(.58333)"><path d="M20 6 9 17l-5-5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(17, 17, 19)" stroke-width="3px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="20" y="76" width="20" height="20" rx="3" fill="rgb(28,28,30)"/><rect x="20.5" y="76.5" width="19" height="19" rx="2.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/></g></g></g></g><text x="16" y="366" font-family="system-ui, "-apple-system", sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Required with an Error</text><g clip-path="url(#cp2)"><g clip-path="url(#irc11)"><clipPath id="svgimg12vclip"><rect x="16" y="376" width="400" height="90"/></clipPath><g clip-path="url(#svgimg12vclip)"><g transform="translate(16 376)"><defs><clipPath id="svgimg12ct0"><rect x="48" y="20" width="187.9" height="19.6"/></clipPath><clipPath id="svgimg12ct1"><rect x="20" y="40" width="360" height="22.4"/></clipPath></defs><text x="48" y="35.41" font-family="system-ui, "-apple-system", sans-serif" font-size="16" fill="rgb(245,245,247)">I accept the release terms</text><text x="48" y="56" font-family="system-ui, "-apple-system", sans-serif" font-size="14" fill="rgb(255,133,136)">Accept the terms to continue.</text><rect x="20" y="20" width="20" height="20" rx="3" fill="rgb(28,28,30)"/><rect x="20.5" y="20.5" width="19" height="19" rx="2.5" fill="none" stroke="rgb(253,98,101)" stroke-width="1"/></g></g></g></g><text x="16" y="494" font-family="system-ui, "-apple-system", sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Compact</text><g clip-path="url(#cp3)"><g clip-path="url(#irc14)"><clipPath id="svgimg15vclip"><rect x="16" y="504" width="400" height="84"/></clipPath><g clip-path="url(#svgimg15vclip)"><g transform="translate(16 504)"><defs><clipPath id="svgimg15ct0"><rect x="45" y="20" width="94.3" height="17.4"/></clipPath><clipPath id="svgimg15ct1"><rect x="45" y="46" width="77.3" height="17.4"/></clipPath><clipPath id="svgimg15cp2"><rect x="23" y="23" width="12" height="12"/></clipPath></defs><text x="45" y="33.59" font-family="system-ui, "-apple-system", sans-serif" font-size="14" fill="rgb(245,245,247)">Show archived</text><text x="45" y="59.59" font-family="system-ui, "-apple-system", sans-serif" font-size="14" fill="rgb(245,245,247)">Show drafts</text><rect x="20" y="20" width="18" height="18" rx="3" fill="rgb(100,210,255)"/><rect x="20.5" y="20.5" width="17" height="17" rx="2.5" fill="none" stroke="rgb(100,210,255)" stroke-width="1"/><g clip-path="url(#svgimg15cp2)"><g color="rgb(17, 17, 19)"><clipPath id="svgimg15svgic3"><rect x="23" y="23" width="12" height="12"/></clipPath><g clip-path="url(#svgimg15svgic3)"><g transform="matrix(.5 0 0 .5 23 23)"><path d="M20 6 9 17l-5-5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(17, 17, 19)" stroke-width="3px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="20" y="46" width="18" height="18" rx="3" fill="rgb(28,28,30)"/><rect x="20.5" y="46.5" width="17" height="17" rx="2.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/></g></g></g></g></svg>

package/docs/design/templates/checkbox-group/horizontal-dark.svg CHANGED Viewed

	@@ -1 +1 @@
1	- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 105" width="400" height="105"><defs><clipPath id="fln0" clip-rule="evenodd"><path d="M0 0h400v105H0Zm20 20h96.6v14.4H20Z" clip-rule="evenodd"/></clipPath><clipPath id="ct1"><rect x="20" y="20" width="96.6" height="14.4"/></clipPath><clipPath id="ct2"><rect x="45" y="40.4" width="46.7" height="17.4"/></clipPath><clipPath id="ct3"><rect x="140.7" y="40.4" width="58.7" height="17.4"/></clipPath><clipPath id="ct4"><rect x="248.4" y="40.4" width="34.3" height="17.4"/></clipPath><clipPath id="ct5"><rect x="20" y="65.4" width="360" height="19.2"/></clipPath></defs><g clip-path="url(#fln0)"/><text x="29" y="31" font-family="system-ui, "-apple-system", sans-serif" font-size="12" font-weight="650" fill="rgb(194,194,198)">PLATFORMS</text><text x="45" y="53.98" font-family="system-ui, "-apple-system", sans-serif" font-size="14" fill="rgb(245,245,247)">macOS</text><text x="140.72" y="53.98" font-family="system-ui, "-apple-system", sans-serif" font-size="14" fill="rgb(245,245,247)">Windows</text><text x="248.41" y="53.98" font-family="system-ui, "-apple-system", sans-serif" font-size="14" fill="rgb(245,245,247)">Linux</text><text x="29" y="79.39" font-family="system-ui, "-apple-system", sans-serif" font-size="12" fill="rgb(255,~~105~~,~~108~~)">Choose a platform.</text><rect x="20" y="40.4" width="18" height="18" rx="3" fill="rgb(28,28,30)"/><rect x="20.5" y="40.5" width="17" height="17" rx="2.5" fill="none" stroke="rgb(253,98,101)" stroke-width="1"/><rect x="115.7" y="40.4" width="18" height="18" rx="3" fill="rgb(28,28,30)"/><rect x="116.5" y="40.5" width="17" height="17" rx="2.5" fill="none" stroke="rgb(253,98,101)" stroke-width="1"/><rect x="223.4" y="40.4" width="18" height="18" rx="3" fill="rgb(28,28,30)"/><rect x="223.5" y="40.5" width="17" height="17" rx="2.5" fill="none" stroke="rgb(253,98,101)" stroke-width="1"/></svg>
1	+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 105" width="400" height="105"><defs><clipPath id="fln0" clip-rule="evenodd"><path d="M0 0h400v105H0Zm20 20h96.6v14.4H20Z" clip-rule="evenodd"/></clipPath><clipPath id="ct1"><rect x="20" y="20" width="96.6" height="14.4"/></clipPath><clipPath id="ct2"><rect x="45" y="40.4" width="46.7" height="17.4"/></clipPath><clipPath id="ct3"><rect x="140.7" y="40.4" width="58.7" height="17.4"/></clipPath><clipPath id="ct4"><rect x="248.4" y="40.4" width="34.3" height="17.4"/></clipPath><clipPath id="ct5"><rect x="20" y="65.4" width="360" height="19.2"/></clipPath></defs><g clip-path="url(#fln0)"/><text x="29" y="31" font-family="system-ui, "-apple-system", sans-serif" font-size="12" font-weight="650" fill="rgb(194,194,198)">PLATFORMS</text><text x="45" y="53.98" font-family="system-ui, "-apple-system", sans-serif" font-size="14" fill="rgb(245,245,247)">macOS</text><text x="140.72" y="53.98" font-family="system-ui, "-apple-system", sans-serif" font-size="14" fill="rgb(245,245,247)">Windows</text><text x="248.41" y="53.98" font-family="system-ui, "-apple-system", sans-serif" font-size="14" fill="rgb(245,245,247)">Linux</text><text x="29" y="79.39" font-family="system-ui, "-apple-system", sans-serif" font-size="12" fill="rgb(255,133,136)">Choose a platform.</text><rect x="20" y="40.4" width="18" height="18" rx="3" fill="rgb(28,28,30)"/><rect x="20.5" y="40.5" width="17" height="17" rx="2.5" fill="none" stroke="rgb(253,98,101)" stroke-width="1"/><rect x="115.7" y="40.4" width="18" height="18" rx="3" fill="rgb(28,28,30)"/><rect x="116.5" y="40.5" width="17" height="17" rx="2.5" fill="none" stroke="rgb(253,98,101)" stroke-width="1"/><rect x="223.4" y="40.4" width="18" height="18" rx="3" fill="rgb(28,28,30)"/><rect x="223.5" y="40.5" width="17" height="17" rx="2.5" fill="none" stroke="rgb(253,98,101)" stroke-width="1"/></svg>

package/docs/design/templates/checkbox-group/vertical.svg CHANGED Viewed

	@@ -1 +1 @@
1	- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 217" width="400" height="217"><defs><clipPath id="fln0" clip-rule="evenodd"><path d="M0 0h400v217H0Zm20 20h186.1v14.4H20Z" clip-rule="evenodd"/></clipPath><clipPath id="ct1"><rect x="20" y="20" width="186.1" height="14.4"/></clipPath><clipPath id="ct2"><rect x="48" y="40.4" width="38.7" height="19.6"/></clipPath><clipPath id="ct3"><rect x="48" y="68.4" width="129.2" height="19.6"/></clipPath><clipPath id="ct4"><rect x="20" y="88.4" width="360" height="22.4"/></clipPath><clipPath id="ct5"><rect x="48" y="118.8" width="101.6" height="19.6"/></clipPath><clipPath id="ct6"><rect x="48" y="146.8" width="107.8" height="19.6"/></clipPath><clipPath id="ct7"><rect x="20" y="173.8" width="360" height="22.4"/></clipPath><clipPath id="cp8"><rect x="23" y="43" width="14" height="14.4"/></clipPath><clipPath id="cp10"><rect x="23" y="71" width="14" height="14.4"/></clipPath></defs><g clip-path="url(#fln0)"/><text x="29" y="31" font-family="system-ui, "-apple-system", sans-serif" font-size="12" font-weight="650" fill="rgb(98,98,103)">NOTIFICATION CHANNELS</text><text x="48" y="55.8" font-family="system-ui, "-apple-system", sans-serif" font-size="16" fill="rgb(29,29,31)">Email</text><text x="48" y="83.8" font-family="system-ui, "-apple-system", sans-serif" font-size="16" fill="rgb(29,29,31)">Push notifications</text><text x="48" y="104.39" font-family="system-ui, "-apple-system", sans-serif" font-size="14" fill="rgb(~~110~~,~~110~~,~~115~~)">On devices where you are signed in.</text><text x="48" y="134.19" font-family="system-ui, "-apple-system", sans-serif" font-size="16" fill="rgb(29,29,31)">Weekly digest</text><g opacity="0.5" style="isolation:isolate"><text x="48" y="162.19" font-family="system-ui, "-apple-system", sans-serif" font-size="16" fill="rgb(29,29,31)">Text messages</text><rect x="20" y="146.8" width="20" height="20" rx="3" fill="rgb(255,255,255)"/><rect x="20.5" y="147.5" width="19" height="19" rx="2.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/></g><text x="29" y="189.78" font-family="system-ui, "-apple-system", sans-serif" font-size="14" fill="rgb(~~110~~,~~110~~,~~115~~)">Sent to your work account.</text><rect x="20" y="40.4" width="20" height="20" rx="3" fill="rgb(0,117,219)"/><rect x="20.5" y="40.5" width="19" height="19" rx="2.5" fill="none" stroke="rgb(0,117,219)" stroke-width="1"/><g clip-path="url(#cp8)"><g color="rgb(255, 255, 255)"><clipPath id="svgic9"><rect x="23" y="43.4" width="14" height="14"/></clipPath><g clip-path="url(#svgic9)"><g transform="translate(23 43.39)scale(.58333)"><path d="M20 6 9 17l-5-5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 255, 255)" stroke-width="3px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="20" y="68.4" width="20" height="20" rx="3" fill="rgb(0,117,219)"/><rect x="20.5" y="68.5" width="19" height="19" rx="2.5" fill="none" stroke="rgb(0,117,219)" stroke-width="1"/><g clip-path="url(#cp10)"><g color="rgb(255, 255, 255)"><clipPath id="svgic11"><rect x="23" y="71.4" width="14" height="14"/></clipPath><g clip-path="url(#svgic11)"><g transform="translate(23 71.39)scale(.58333)"><path d="M20 6 9 17l-5-5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 255, 255)" stroke-width="3px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="20" y="118.8" width="20" height="20" rx="3" fill="rgb(255,255,255)"/><rect x="20.5" y="119.5" width="19" height="19" rx="2.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/></svg>
1	+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 217" width="400" height="217"><defs><clipPath id="fln0" clip-rule="evenodd"><path d="M0 0h400v217H0Zm20 20h186.1v14.4H20Z" clip-rule="evenodd"/></clipPath><clipPath id="ct1"><rect x="20" y="20" width="186.1" height="14.4"/></clipPath><clipPath id="ct2"><rect x="48" y="40.4" width="38.7" height="19.6"/></clipPath><clipPath id="ct3"><rect x="48" y="68.4" width="129.2" height="19.6"/></clipPath><clipPath id="ct4"><rect x="20" y="88.4" width="360" height="22.4"/></clipPath><clipPath id="ct5"><rect x="48" y="118.8" width="101.6" height="19.6"/></clipPath><clipPath id="ct6"><rect x="48" y="146.8" width="107.8" height="19.6"/></clipPath><clipPath id="ct7"><rect x="20" y="173.8" width="360" height="22.4"/></clipPath><clipPath id="cp8"><rect x="23" y="43" width="14" height="14.4"/></clipPath><clipPath id="cp10"><rect x="23" y="71" width="14" height="14.4"/></clipPath></defs><g clip-path="url(#fln0)"/><text x="29" y="31" font-family="system-ui, "-apple-system", sans-serif" font-size="12" font-weight="650" fill="rgb(98,98,103)">NOTIFICATION CHANNELS</text><text x="48" y="55.8" font-family="system-ui, "-apple-system", sans-serif" font-size="16" fill="rgb(29,29,31)">Email</text><text x="48" y="83.8" font-family="system-ui, "-apple-system", sans-serif" font-size="16" fill="rgb(29,29,31)">Push notifications</text><text x="48" y="104.39" font-family="system-ui, "-apple-system", sans-serif" font-size="14" fill="rgb(100,100,105)">On devices where you are signed in.</text><text x="48" y="134.19" font-family="system-ui, "-apple-system", sans-serif" font-size="16" fill="rgb(29,29,31)">Weekly digest</text><g opacity="0.5" style="isolation:isolate"><text x="48" y="162.19" font-family="system-ui, "-apple-system", sans-serif" font-size="16" fill="rgb(29,29,31)">Text messages</text><rect x="20" y="146.8" width="20" height="20" rx="3" fill="rgb(255,255,255)"/><rect x="20.5" y="147.5" width="19" height="19" rx="2.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/></g><text x="29" y="189.78" font-family="system-ui, "-apple-system", sans-serif" font-size="14" fill="rgb(100,100,105)">Sent to your work account.</text><rect x="20" y="40.4" width="20" height="20" rx="3" fill="rgb(0,117,219)"/><rect x="20.5" y="40.5" width="19" height="19" rx="2.5" fill="none" stroke="rgb(0,117,219)" stroke-width="1"/><g clip-path="url(#cp8)"><g color="rgb(255, 255, 255)"><clipPath id="svgic9"><rect x="23" y="43.4" width="14" height="14"/></clipPath><g clip-path="url(#svgic9)"><g transform="translate(23 43.39)scale(.58333)"><path d="M20 6 9 17l-5-5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 255, 255)" stroke-width="3px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="20" y="68.4" width="20" height="20" rx="3" fill="rgb(0,117,219)"/><rect x="20.5" y="68.5" width="19" height="19" rx="2.5" fill="none" stroke="rgb(0,117,219)" stroke-width="1"/><g clip-path="url(#cp10)"><g color="rgb(255, 255, 255)"><clipPath id="svgic11"><rect x="23" y="71.4" width="14" height="14"/></clipPath><g clip-path="url(#svgic11)"><g transform="translate(23 71.39)scale(.58333)"><path d="M20 6 9 17l-5-5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 255, 255)" stroke-width="3px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="20" y="118.8" width="20" height="20" rx="3" fill="rgb(255,255,255)"/><rect x="20.5" y="119.5" width="19" height="19" rx="2.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/></svg>

package/docs/design/templates/checkbox-group-dark.svg CHANGED Viewed

	@@ -1 +1 @@
1	- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 432 414" width="432" height="414"><defs><clipPath id="cp0"><rect x="16" y="38" width="400" height="217"/></clipPath><clipPath id="cp1"><rect x="16" y="293" width="400" height="105"/></clipPath><clipPath id="ct2"><rect x="16" y="16" width="400" height="22"/></clipPath><clipPath id="irc3"><rect x="16" y="38" width="400" height="217" rx="0"/></clipPath><clipPath id="ct5"><rect x="16" y="271" width="400" height="22"/></clipPath><clipPath id="irc6"><rect x="16" y="293" width="400" height="105" rx="0"/></clipPath></defs><rect x="0" y="0" width="432" height="414" rx="0" fill="rgb(28,28,30)"/><text x="16" y="28" font-family="system-ui, "-apple-system", sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Stacked Choices with Hints</text><g clip-path="url(#cp0)"><g clip-path="url(#irc3)"><clipPath id="svgimg4vclip"><rect x="16" y="38" width="400" height="217"/></clipPath><g clip-path="url(#svgimg4vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg4fln0" clip-rule="evenodd"><path d="M0 0h400v217H0Zm20 20h186.1v14.4H20Z" clip-rule="evenodd"/></clipPath><clipPath id="svgimg4ct1"><rect x="20" y="20" width="186.1" height="14.4"/></clipPath><clipPath id="svgimg4ct2"><rect x="48" y="40.4" width="38.7" height="19.6"/></clipPath><clipPath id="svgimg4ct3"><rect x="48" y="68.4" width="129.2" height="19.6"/></clipPath><clipPath id="svgimg4ct4"><rect x="20" y="88.4" width="360" height="22.4"/></clipPath><clipPath id="svgimg4ct5"><rect x="48" y="118.8" width="101.6" height="19.6"/></clipPath><clipPath id="svgimg4ct6"><rect x="48" y="146.8" width="107.8" height="19.6"/></clipPath><clipPath id="svgimg4ct7"><rect x="20" y="173.8" width="360" height="22.4"/></clipPath><clipPath id="svgimg4cp8"><rect x="23" y="43" width="14" height="14.4"/></clipPath><clipPath id="svgimg4cp10"><rect x="23" y="71" width="14" height="14.4"/></clipPath></defs><g clip-path="url(#svgimg4fln0)"/><text x="29" y="31" font-family="system-ui, "-apple-system", sans-serif" font-size="12" font-weight="650" fill="rgb(194,194,198)">NOTIFICATION CHANNELS</text><text x="48" y="55.8" font-family="system-ui, "-apple-system", sans-serif" font-size="16" fill="rgb(245,245,247)">Email</text><text x="48" y="83.8" font-family="system-ui, "-apple-system", sans-serif" font-size="16" fill="rgb(245,245,247)">Push notifications</text><text x="48" y="104.39" font-family="system-ui, "-apple-system", sans-serif" font-size="14" fill="rgb(174,174,178)">On devices where you are signed in.</text><text x="48" y="134.19" font-family="system-ui, "-apple-system", sans-serif" font-size="16" fill="rgb(245,245,247)">Weekly digest</text><g opacity="0.5" style="isolation:isolate"><text x="48" y="162.19" font-family="system-ui, "-apple-system", sans-serif" font-size="16" fill="rgb(245,245,247)">Text messages</text><rect x="20" y="146.8" width="20" height="20" rx="3" fill="rgb(28,28,30)"/><rect x="20.5" y="147.5" width="19" height="19" rx="2.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/></g><text x="29" y="189.78" font-family="system-ui, "-apple-system", sans-serif" font-size="14" fill="rgb(174,174,178)">Sent to your work account.</text><rect x="20" y="40.4" width="20" height="20" rx="3" fill="rgb(100,210,255)"/><rect x="20.5" y="40.5" width="19" height="19" rx="2.5" fill="none" stroke="rgb(100,210,255)" stroke-width="1"/><g clip-path="url(#svgimg4cp8)"><g color="rgb(17, 17, 19)"><clipPath id="svgimg4svgic9"><rect x="23" y="43.4" width="14" height="14"/></clipPath><g clip-path="url(#svgimg4svgic9)"><g transform="translate(23 43.39)scale(.58333)"><path d="M20 6 9 17l-5-5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(17, 17, 19)" stroke-width="3px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="20" y="68.4" width="20" height="20" rx="3" fill="rgb(100,210,255)"/><rect x="20.5" y="68.5" width="19" height="19" rx="2.5" fill="none" stroke="rgb(100,210,255)" stroke-width="1"/><g clip-path="url(#svgimg4cp10)"><g color="rgb(17, 17, 19)"><clipPath id="svgimg4svgic11"><rect x="23" y="71.4" width="14" height="14"/></clipPath><g clip-path="url(#svgimg4svgic11)"><g transform="translate(23 71.39)scale(.58333)"><path d="M20 6 9 17l-5-5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(17, 17, 19)" stroke-width="3px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="20" y="118.8" width="20" height="20" rx="3" fill="rgb(28,28,30)"/><rect x="20.5" y="119.5" width="19" height="19" rx="2.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/></g></g></g></g><text x="16" y="283" font-family="system-ui, "-apple-system", sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Horizontal, Compact, with an Error</text><g clip-path="url(#cp1)"><g clip-path="url(#irc6)"><clipPath id="svgimg7vclip"><rect x="16" y="293" width="400" height="105"/></clipPath><g clip-path="url(#svgimg7vclip)"><g transform="translate(16 293)"><defs><clipPath id="svgimg7fln0" clip-rule="evenodd"><path d="M0 0h400v105H0Zm20 20h96.6v14.4H20Z" clip-rule="evenodd"/></clipPath><clipPath id="svgimg7ct1"><rect x="20" y="20" width="96.6" height="14.4"/></clipPath><clipPath id="svgimg7ct2"><rect x="45" y="40.4" width="46.7" height="17.4"/></clipPath><clipPath id="svgimg7ct3"><rect x="140.7" y="40.4" width="58.7" height="17.4"/></clipPath><clipPath id="svgimg7ct4"><rect x="248.4" y="40.4" width="34.3" height="17.4"/></clipPath><clipPath id="svgimg7ct5"><rect x="20" y="65.4" width="360" height="19.2"/></clipPath></defs><g clip-path="url(#svgimg7fln0)"/><text x="29" y="31" font-family="system-ui, "-apple-system", sans-serif" font-size="12" font-weight="650" fill="rgb(194,194,198)">PLATFORMS</text><text x="45" y="53.98" font-family="system-ui, "-apple-system", sans-serif" font-size="14" fill="rgb(245,245,247)">macOS</text><text x="140.72" y="53.98" font-family="system-ui, "-apple-system", sans-serif" font-size="14" fill="rgb(245,245,247)">Windows</text><text x="248.41" y="53.98" font-family="system-ui, "-apple-system", sans-serif" font-size="14" fill="rgb(245,245,247)">Linux</text><text x="29" y="79.39" font-family="system-ui, "-apple-system", sans-serif" font-size="12" fill="rgb(255,~~105~~,~~108~~)">Choose a platform.</text><rect x="20" y="40.4" width="18" height="18" rx="3" fill="rgb(28,28,30)"/><rect x="20.5" y="40.5" width="17" height="17" rx="2.5" fill="none" stroke="rgb(253,98,101)" stroke-width="1"/><rect x="115.7" y="40.4" width="18" height="18" rx="3" fill="rgb(28,28,30)"/><rect x="116.5" y="40.5" width="17" height="17" rx="2.5" fill="none" stroke="rgb(253,98,101)" stroke-width="1"/><rect x="223.4" y="40.4" width="18" height="18" rx="3" fill="rgb(28,28,30)"/><rect x="223.5" y="40.5" width="17" height="17" rx="2.5" fill="none" stroke="rgb(253,98,101)" stroke-width="1"/></g></g></g></g></svg>
1	+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 432 414" width="432" height="414"><defs><clipPath id="cp0"><rect x="16" y="38" width="400" height="217"/></clipPath><clipPath id="cp1"><rect x="16" y="293" width="400" height="105"/></clipPath><clipPath id="ct2"><rect x="16" y="16" width="400" height="22"/></clipPath><clipPath id="irc3"><rect x="16" y="38" width="400" height="217" rx="0"/></clipPath><clipPath id="ct5"><rect x="16" y="271" width="400" height="22"/></clipPath><clipPath id="irc6"><rect x="16" y="293" width="400" height="105" rx="0"/></clipPath></defs><rect x="0" y="0" width="432" height="414" rx="0" fill="rgb(28,28,30)"/><text x="16" y="28" font-family="system-ui, "-apple-system", sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Stacked Choices with Hints</text><g clip-path="url(#cp0)"><g clip-path="url(#irc3)"><clipPath id="svgimg4vclip"><rect x="16" y="38" width="400" height="217"/></clipPath><g clip-path="url(#svgimg4vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg4fln0" clip-rule="evenodd"><path d="M0 0h400v217H0Zm20 20h186.1v14.4H20Z" clip-rule="evenodd"/></clipPath><clipPath id="svgimg4ct1"><rect x="20" y="20" width="186.1" height="14.4"/></clipPath><clipPath id="svgimg4ct2"><rect x="48" y="40.4" width="38.7" height="19.6"/></clipPath><clipPath id="svgimg4ct3"><rect x="48" y="68.4" width="129.2" height="19.6"/></clipPath><clipPath id="svgimg4ct4"><rect x="20" y="88.4" width="360" height="22.4"/></clipPath><clipPath id="svgimg4ct5"><rect x="48" y="118.8" width="101.6" height="19.6"/></clipPath><clipPath id="svgimg4ct6"><rect x="48" y="146.8" width="107.8" height="19.6"/></clipPath><clipPath id="svgimg4ct7"><rect x="20" y="173.8" width="360" height="22.4"/></clipPath><clipPath id="svgimg4cp8"><rect x="23" y="43" width="14" height="14.4"/></clipPath><clipPath id="svgimg4cp10"><rect x="23" y="71" width="14" height="14.4"/></clipPath></defs><g clip-path="url(#svgimg4fln0)"/><text x="29" y="31" font-family="system-ui, "-apple-system", sans-serif" font-size="12" font-weight="650" fill="rgb(194,194,198)">NOTIFICATION CHANNELS</text><text x="48" y="55.8" font-family="system-ui, "-apple-system", sans-serif" font-size="16" fill="rgb(245,245,247)">Email</text><text x="48" y="83.8" font-family="system-ui, "-apple-system", sans-serif" font-size="16" fill="rgb(245,245,247)">Push notifications</text><text x="48" y="104.39" font-family="system-ui, "-apple-system", sans-serif" font-size="14" fill="rgb(174,174,178)">On devices where you are signed in.</text><text x="48" y="134.19" font-family="system-ui, "-apple-system", sans-serif" font-size="16" fill="rgb(245,245,247)">Weekly digest</text><g opacity="0.5" style="isolation:isolate"><text x="48" y="162.19" font-family="system-ui, "-apple-system", sans-serif" font-size="16" fill="rgb(245,245,247)">Text messages</text><rect x="20" y="146.8" width="20" height="20" rx="3" fill="rgb(28,28,30)"/><rect x="20.5" y="147.5" width="19" height="19" rx="2.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/></g><text x="29" y="189.78" font-family="system-ui, "-apple-system", sans-serif" font-size="14" fill="rgb(174,174,178)">Sent to your work account.</text><rect x="20" y="40.4" width="20" height="20" rx="3" fill="rgb(100,210,255)"/><rect x="20.5" y="40.5" width="19" height="19" rx="2.5" fill="none" stroke="rgb(100,210,255)" stroke-width="1"/><g clip-path="url(#svgimg4cp8)"><g color="rgb(17, 17, 19)"><clipPath id="svgimg4svgic9"><rect x="23" y="43.4" width="14" height="14"/></clipPath><g clip-path="url(#svgimg4svgic9)"><g transform="translate(23 43.39)scale(.58333)"><path d="M20 6 9 17l-5-5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(17, 17, 19)" stroke-width="3px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="20" y="68.4" width="20" height="20" rx="3" fill="rgb(100,210,255)"/><rect x="20.5" y="68.5" width="19" height="19" rx="2.5" fill="none" stroke="rgb(100,210,255)" stroke-width="1"/><g clip-path="url(#svgimg4cp10)"><g color="rgb(17, 17, 19)"><clipPath id="svgimg4svgic11"><rect x="23" y="71.4" width="14" height="14"/></clipPath><g clip-path="url(#svgimg4svgic11)"><g transform="translate(23 71.39)scale(.58333)"><path d="M20 6 9 17l-5-5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(17, 17, 19)" stroke-width="3px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="20" y="118.8" width="20" height="20" rx="3" fill="rgb(28,28,30)"/><rect x="20.5" y="119.5" width="19" height="19" rx="2.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/></g></g></g></g><text x="16" y="283" font-family="system-ui, "-apple-system", sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Horizontal, Compact, with an Error</text><g clip-path="url(#cp1)"><g clip-path="url(#irc6)"><clipPath id="svgimg7vclip"><rect x="16" y="293" width="400" height="105"/></clipPath><g clip-path="url(#svgimg7vclip)"><g transform="translate(16 293)"><defs><clipPath id="svgimg7fln0" clip-rule="evenodd"><path d="M0 0h400v105H0Zm20 20h96.6v14.4H20Z" clip-rule="evenodd"/></clipPath><clipPath id="svgimg7ct1"><rect x="20" y="20" width="96.6" height="14.4"/></clipPath><clipPath id="svgimg7ct2"><rect x="45" y="40.4" width="46.7" height="17.4"/></clipPath><clipPath id="svgimg7ct3"><rect x="140.7" y="40.4" width="58.7" height="17.4"/></clipPath><clipPath id="svgimg7ct4"><rect x="248.4" y="40.4" width="34.3" height="17.4"/></clipPath><clipPath id="svgimg7ct5"><rect x="20" y="65.4" width="360" height="19.2"/></clipPath></defs><g clip-path="url(#svgimg7fln0)"/><text x="29" y="31" font-family="system-ui, "-apple-system", sans-serif" font-size="12" font-weight="650" fill="rgb(194,194,198)">PLATFORMS</text><text x="45" y="53.98" font-family="system-ui, "-apple-system", sans-serif" font-size="14" fill="rgb(245,245,247)">macOS</text><text x="140.72" y="53.98" font-family="system-ui, "-apple-system", sans-serif" font-size="14" fill="rgb(245,245,247)">Windows</text><text x="248.41" y="53.98" font-family="system-ui, "-apple-system", sans-serif" font-size="14" fill="rgb(245,245,247)">Linux</text><text x="29" y="79.39" font-family="system-ui, "-apple-system", sans-serif" font-size="12" fill="rgb(255,133,136)">Choose a platform.</text><rect x="20" y="40.4" width="18" height="18" rx="3" fill="rgb(28,28,30)"/><rect x="20.5" y="40.5" width="17" height="17" rx="2.5" fill="none" stroke="rgb(253,98,101)" stroke-width="1"/><rect x="115.7" y="40.4" width="18" height="18" rx="3" fill="rgb(28,28,30)"/><rect x="116.5" y="40.5" width="17" height="17" rx="2.5" fill="none" stroke="rgb(253,98,101)" stroke-width="1"/><rect x="223.4" y="40.4" width="18" height="18" rx="3" fill="rgb(28,28,30)"/><rect x="223.5" y="40.5" width="17" height="17" rx="2.5" fill="none" stroke="rgb(253,98,101)" stroke-width="1"/></g></g></g></g></svg>

package/docs/design/templates/checkbox-group.svg CHANGED Viewed

	@@ -1 +1 @@
1	- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 432 414" width="432" height="414"><defs><clipPath id="cp0"><rect x="16" y="38" width="400" height="217"/></clipPath><clipPath id="cp1"><rect x="16" y="293" width="400" height="105"/></clipPath><clipPath id="ct2"><rect x="16" y="16" width="400" height="22"/></clipPath><clipPath id="irc3"><rect x="16" y="38" width="400" height="217" rx="0"/></clipPath><clipPath id="ct5"><rect x="16" y="271" width="400" height="22"/></clipPath><clipPath id="irc6"><rect x="16" y="293" width="400" height="105" rx="0"/></clipPath></defs><rect x="0" y="0" width="432" height="414" rx="0" fill="rgb(255,255,255)"/><text x="16" y="28" font-family="system-ui, "-apple-system", sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Stacked Choices with Hints</text><g clip-path="url(#cp0)"><g clip-path="url(#irc3)"><clipPath id="svgimg4vclip"><rect x="16" y="38" width="400" height="217"/></clipPath><g clip-path="url(#svgimg4vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg4fln0" clip-rule="evenodd"><path d="M0 0h400v217H0Zm20 20h186.1v14.4H20Z" clip-rule="evenodd"/></clipPath><clipPath id="svgimg4ct1"><rect x="20" y="20" width="186.1" height="14.4"/></clipPath><clipPath id="svgimg4ct2"><rect x="48" y="40.4" width="38.7" height="19.6"/></clipPath><clipPath id="svgimg4ct3"><rect x="48" y="68.4" width="129.2" height="19.6"/></clipPath><clipPath id="svgimg4ct4"><rect x="20" y="88.4" width="360" height="22.4"/></clipPath><clipPath id="svgimg4ct5"><rect x="48" y="118.8" width="101.6" height="19.6"/></clipPath><clipPath id="svgimg4ct6"><rect x="48" y="146.8" width="107.8" height="19.6"/></clipPath><clipPath id="svgimg4ct7"><rect x="20" y="173.8" width="360" height="22.4"/></clipPath><clipPath id="svgimg4cp8"><rect x="23" y="43" width="14" height="14.4"/></clipPath><clipPath id="svgimg4cp10"><rect x="23" y="71" width="14" height="14.4"/></clipPath></defs><g clip-path="url(#svgimg4fln0)"/><text x="29" y="31" font-family="system-ui, "-apple-system", sans-serif" font-size="12" font-weight="650" fill="rgb(98,98,103)">NOTIFICATION CHANNELS</text><text x="48" y="55.8" font-family="system-ui, "-apple-system", sans-serif" font-size="16" fill="rgb(29,29,31)">Email</text><text x="48" y="83.8" font-family="system-ui, "-apple-system", sans-serif" font-size="16" fill="rgb(29,29,31)">Push notifications</text><text x="48" y="104.39" font-family="system-ui, "-apple-system", sans-serif" font-size="14" fill="rgb(~~110~~,~~110~~,~~115~~)">On devices where you are signed in.</text><text x="48" y="134.19" font-family="system-ui, "-apple-system", sans-serif" font-size="16" fill="rgb(29,29,31)">Weekly digest</text><g opacity="0.5" style="isolation:isolate"><text x="48" y="162.19" font-family="system-ui, "-apple-system", sans-serif" font-size="16" fill="rgb(29,29,31)">Text messages</text><rect x="20" y="146.8" width="20" height="20" rx="3" fill="rgb(255,255,255)"/><rect x="20.5" y="147.5" width="19" height="19" rx="2.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/></g><text x="29" y="189.78" font-family="system-ui, "-apple-system", sans-serif" font-size="14" fill="rgb(~~110~~,~~110~~,~~115~~)">Sent to your work account.</text><rect x="20" y="40.4" width="20" height="20" rx="3" fill="rgb(0,117,219)"/><rect x="20.5" y="40.5" width="19" height="19" rx="2.5" fill="none" stroke="rgb(0,117,219)" stroke-width="1"/><g clip-path="url(#svgimg4cp8)"><g color="rgb(255, 255, 255)"><clipPath id="svgimg4svgic9"><rect x="23" y="43.4" width="14" height="14"/></clipPath><g clip-path="url(#svgimg4svgic9)"><g transform="translate(23 43.39)scale(.58333)"><path d="M20 6 9 17l-5-5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 255, 255)" stroke-width="3px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="20" y="68.4" width="20" height="20" rx="3" fill="rgb(0,117,219)"/><rect x="20.5" y="68.5" width="19" height="19" rx="2.5" fill="none" stroke="rgb(0,117,219)" stroke-width="1"/><g clip-path="url(#svgimg4cp10)"><g color="rgb(255, 255, 255)"><clipPath id="svgimg4svgic11"><rect x="23" y="71.4" width="14" height="14"/></clipPath><g clip-path="url(#svgimg4svgic11)"><g transform="translate(23 71.39)scale(.58333)"><path d="M20 6 9 17l-5-5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 255, 255)" stroke-width="3px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="20" y="118.8" width="20" height="20" rx="3" fill="rgb(255,255,255)"/><rect x="20.5" y="119.5" width="19" height="19" rx="2.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/></g></g></g></g><text x="16" y="283" font-family="system-ui, "-apple-system", sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Horizontal, Compact, with an Error</text><g clip-path="url(#cp1)"><g clip-path="url(#irc6)"><clipPath id="svgimg7vclip"><rect x="16" y="293" width="400" height="105"/></clipPath><g clip-path="url(#svgimg7vclip)"><g transform="translate(16 293)"><defs><clipPath id="svgimg7fln0" clip-rule="evenodd"><path d="M0 0h400v105H0Zm20 20h96.6v14.4H20Z" clip-rule="evenodd"/></clipPath><clipPath id="svgimg7ct1"><rect x="20" y="20" width="96.6" height="14.4"/></clipPath><clipPath id="svgimg7ct2"><rect x="45" y="40.4" width="46.7" height="17.4"/></clipPath><clipPath id="svgimg7ct3"><rect x="140.7" y="40.4" width="58.7" height="17.4"/></clipPath><clipPath id="svgimg7ct4"><rect x="248.4" y="40.4" width="34.3" height="17.4"/></clipPath><clipPath id="svgimg7ct5"><rect x="20" y="65.4" width="360" height="19.2"/></clipPath></defs><g clip-path="url(#svgimg7fln0)"/><text x="29" y="31" font-family="system-ui, "-apple-system", sans-serif" font-size="12" font-weight="650" fill="rgb(98,98,103)">PLATFORMS</text><text x="45" y="53.98" font-family="system-ui, "-apple-system", sans-serif" font-size="14" fill="rgb(29,29,31)">macOS</text><text x="140.72" y="53.98" font-family="system-ui, "-apple-system", sans-serif" font-size="14" fill="rgb(29,29,31)">Windows</text><text x="248.41" y="53.98" font-family="system-ui, "-apple-system", sans-serif" font-size="14" fill="rgb(29,29,31)">Linux</text><text x="29" y="79.39" font-family="system-ui, "-apple-system", sans-serif" font-size="12" fill="rgb(194,11,32)">Choose a platform.</text><rect x="20" y="40.4" width="18" height="18" rx="3" fill="rgb(255,255,255)"/><rect x="20.5" y="40.5" width="17" height="17" rx="2.5" fill="none" stroke="rgb(190,6,11)" stroke-width="1"/><rect x="115.7" y="40.4" width="18" height="18" rx="3" fill="rgb(255,255,255)"/><rect x="116.5" y="40.5" width="17" height="17" rx="2.5" fill="none" stroke="rgb(190,6,11)" stroke-width="1"/><rect x="223.4" y="40.4" width="18" height="18" rx="3" fill="rgb(255,255,255)"/><rect x="223.5" y="40.5" width="17" height="17" rx="2.5" fill="none" stroke="rgb(190,6,11)" stroke-width="1"/></g></g></g></g></svg>
1	+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 432 414" width="432" height="414"><defs><clipPath id="cp0"><rect x="16" y="38" width="400" height="217"/></clipPath><clipPath id="cp1"><rect x="16" y="293" width="400" height="105"/></clipPath><clipPath id="ct2"><rect x="16" y="16" width="400" height="22"/></clipPath><clipPath id="irc3"><rect x="16" y="38" width="400" height="217" rx="0"/></clipPath><clipPath id="ct5"><rect x="16" y="271" width="400" height="22"/></clipPath><clipPath id="irc6"><rect x="16" y="293" width="400" height="105" rx="0"/></clipPath></defs><rect x="0" y="0" width="432" height="414" rx="0" fill="rgb(255,255,255)"/><text x="16" y="28" font-family="system-ui, "-apple-system", sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Stacked Choices with Hints</text><g clip-path="url(#cp0)"><g clip-path="url(#irc3)"><clipPath id="svgimg4vclip"><rect x="16" y="38" width="400" height="217"/></clipPath><g clip-path="url(#svgimg4vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg4fln0" clip-rule="evenodd"><path d="M0 0h400v217H0Zm20 20h186.1v14.4H20Z" clip-rule="evenodd"/></clipPath><clipPath id="svgimg4ct1"><rect x="20" y="20" width="186.1" height="14.4"/></clipPath><clipPath id="svgimg4ct2"><rect x="48" y="40.4" width="38.7" height="19.6"/></clipPath><clipPath id="svgimg4ct3"><rect x="48" y="68.4" width="129.2" height="19.6"/></clipPath><clipPath id="svgimg4ct4"><rect x="20" y="88.4" width="360" height="22.4"/></clipPath><clipPath id="svgimg4ct5"><rect x="48" y="118.8" width="101.6" height="19.6"/></clipPath><clipPath id="svgimg4ct6"><rect x="48" y="146.8" width="107.8" height="19.6"/></clipPath><clipPath id="svgimg4ct7"><rect x="20" y="173.8" width="360" height="22.4"/></clipPath><clipPath id="svgimg4cp8"><rect x="23" y="43" width="14" height="14.4"/></clipPath><clipPath id="svgimg4cp10"><rect x="23" y="71" width="14" height="14.4"/></clipPath></defs><g clip-path="url(#svgimg4fln0)"/><text x="29" y="31" font-family="system-ui, "-apple-system", sans-serif" font-size="12" font-weight="650" fill="rgb(98,98,103)">NOTIFICATION CHANNELS</text><text x="48" y="55.8" font-family="system-ui, "-apple-system", sans-serif" font-size="16" fill="rgb(29,29,31)">Email</text><text x="48" y="83.8" font-family="system-ui, "-apple-system", sans-serif" font-size="16" fill="rgb(29,29,31)">Push notifications</text><text x="48" y="104.39" font-family="system-ui, "-apple-system", sans-serif" font-size="14" fill="rgb(100,100,105)">On devices where you are signed in.</text><text x="48" y="134.19" font-family="system-ui, "-apple-system", sans-serif" font-size="16" fill="rgb(29,29,31)">Weekly digest</text><g opacity="0.5" style="isolation:isolate"><text x="48" y="162.19" font-family="system-ui, "-apple-system", sans-serif" font-size="16" fill="rgb(29,29,31)">Text messages</text><rect x="20" y="146.8" width="20" height="20" rx="3" fill="rgb(255,255,255)"/><rect x="20.5" y="147.5" width="19" height="19" rx="2.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/></g><text x="29" y="189.78" font-family="system-ui, "-apple-system", sans-serif" font-size="14" fill="rgb(100,100,105)">Sent to your work account.</text><rect x="20" y="40.4" width="20" height="20" rx="3" fill="rgb(0,117,219)"/><rect x="20.5" y="40.5" width="19" height="19" rx="2.5" fill="none" stroke="rgb(0,117,219)" stroke-width="1"/><g clip-path="url(#svgimg4cp8)"><g color="rgb(255, 255, 255)"><clipPath id="svgimg4svgic9"><rect x="23" y="43.4" width="14" height="14"/></clipPath><g clip-path="url(#svgimg4svgic9)"><g transform="translate(23 43.39)scale(.58333)"><path d="M20 6 9 17l-5-5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 255, 255)" stroke-width="3px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="20" y="68.4" width="20" height="20" rx="3" fill="rgb(0,117,219)"/><rect x="20.5" y="68.5" width="19" height="19" rx="2.5" fill="none" stroke="rgb(0,117,219)" stroke-width="1"/><g clip-path="url(#svgimg4cp10)"><g color="rgb(255, 255, 255)"><clipPath id="svgimg4svgic11"><rect x="23" y="71.4" width="14" height="14"/></clipPath><g clip-path="url(#svgimg4svgic11)"><g transform="translate(23 71.39)scale(.58333)"><path d="M20 6 9 17l-5-5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 255, 255)" stroke-width="3px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="20" y="118.8" width="20" height="20" rx="3" fill="rgb(255,255,255)"/><rect x="20.5" y="119.5" width="19" height="19" rx="2.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/></g></g></g></g><text x="16" y="283" font-family="system-ui, "-apple-system", sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Horizontal, Compact, with an Error</text><g clip-path="url(#cp1)"><g clip-path="url(#irc6)"><clipPath id="svgimg7vclip"><rect x="16" y="293" width="400" height="105"/></clipPath><g clip-path="url(#svgimg7vclip)"><g transform="translate(16 293)"><defs><clipPath id="svgimg7fln0" clip-rule="evenodd"><path d="M0 0h400v105H0Zm20 20h96.6v14.4H20Z" clip-rule="evenodd"/></clipPath><clipPath id="svgimg7ct1"><rect x="20" y="20" width="96.6" height="14.4"/></clipPath><clipPath id="svgimg7ct2"><rect x="45" y="40.4" width="46.7" height="17.4"/></clipPath><clipPath id="svgimg7ct3"><rect x="140.7" y="40.4" width="58.7" height="17.4"/></clipPath><clipPath id="svgimg7ct4"><rect x="248.4" y="40.4" width="34.3" height="17.4"/></clipPath><clipPath id="svgimg7ct5"><rect x="20" y="65.4" width="360" height="19.2"/></clipPath></defs><g clip-path="url(#svgimg7fln0)"/><text x="29" y="31" font-family="system-ui, "-apple-system", sans-serif" font-size="12" font-weight="650" fill="rgb(98,98,103)">PLATFORMS</text><text x="45" y="53.98" font-family="system-ui, "-apple-system", sans-serif" font-size="14" fill="rgb(29,29,31)">macOS</text><text x="140.72" y="53.98" font-family="system-ui, "-apple-system", sans-serif" font-size="14" fill="rgb(29,29,31)">Windows</text><text x="248.41" y="53.98" font-family="system-ui, "-apple-system", sans-serif" font-size="14" fill="rgb(29,29,31)">Linux</text><text x="29" y="79.39" font-family="system-ui, "-apple-system", sans-serif" font-size="12" fill="rgb(194,11,32)">Choose a platform.</text><rect x="20" y="40.4" width="18" height="18" rx="3" fill="rgb(255,255,255)"/><rect x="20.5" y="40.5" width="17" height="17" rx="2.5" fill="none" stroke="rgb(190,6,11)" stroke-width="1"/><rect x="115.7" y="40.4" width="18" height="18" rx="3" fill="rgb(255,255,255)"/><rect x="116.5" y="40.5" width="17" height="17" rx="2.5" fill="none" stroke="rgb(190,6,11)" stroke-width="1"/><rect x="223.4" y="40.4" width="18" height="18" rx="3" fill="rgb(255,255,255)"/><rect x="223.5" y="40.5" width="17" height="17" rx="2.5" fill="none" stroke="rgb(190,6,11)" stroke-width="1"/></g></g></g></g></svg>