@kerfjs/ui 5.0.0-beta.24 → 5.0.0-beta.25

package/dist/chunk-PSKN344N.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/list-header.tsx"],"names":[],"mappings":"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","file":"chunk-PSKN344N.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { DisclosureArrow } from './disclosure-arrow.js';\nimport {\n  filterControlAttributes,\n  filterDataAttributes,\n} from './extension-attributes.js';\nimport { Skeleton } from './skeleton.js';\n\nconst PROTECTED_ROOT_DATA_ATTRIBUTES = new Set([\n  'data-component',\n  'data-action',\n  'data-has-badge',\n  'data-has-count',\n  'data-toggle',\n]);\nconst PROTECTED_TRIGGER_DATA_ATTRIBUTES = new Set(['data-action']);\n\ntype ListHeaderRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-action'?: never;\n    'data-has-badge'?: never;\n    'data-has-count'?: never;\n    'data-toggle'?: never;\n  }\n>;\n\ntype ListHeaderTriggerAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-action'?: never;\n    popoverTarget?: string;\n    popoverTargetAction?: 'toggle' | 'show' | 'hide';\n    'aria-controls'?: string;\n    'aria-haspopup'?: 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid' | 'true';\n  }\n>;\n\ninterface ListHeaderBaseProps {\n  label: string;\n  /** Render as an unanimated loading skeleton: keep the label and action affordance, disable interaction. */\n  placeholder?: boolean;\n  rootAttributes?: ListHeaderRootAttributes;\n  triggerAttributes?: ListHeaderTriggerAttributes;\n}\n\ntype ListHeaderModeProps =\n  | {\n      /** Render the title as a controlled disclosure trigger. */\n      toggle: true;\n      action: string;\n      expanded: boolean;\n      actionIcon?: SafeHtml;\n      actionLabel?: never;\n      actionDisabled?: boolean;\n      disabledReason?: string;\n    }\n  | {\n      /** Render a separately named trailing action. */\n      toggle?: false;\n      action: string;\n      actionLabel: string;\n      actionIcon: SafeHtml;\n      expanded?: never;\n      actionDisabled?: boolean;\n      disabledReason?: string;\n    }\n  | {\n      /** Render a passive section heading. */\n      toggle?: false;\n      action?: never;\n      actionLabel?: never;\n      actionIcon?: never;\n      expanded?: never;\n      actionDisabled?: never;\n      disabledReason?: never;\n    };\n\ntype ListHeaderIndicatorProps =\n  | { count: number; countLabel: string; badge?: never }\n  | { count?: never; countLabel?: never; badge?: SafeHtml };\n\nexport type ListHeaderProps = ListHeaderBaseProps &\n  ListHeaderIndicatorProps &\n  ListHeaderModeProps;\n\nexport function ListHeader({\n  label,\n  count,\n  countLabel,\n  badge,\n  action,\n  actionLabel,\n  actionIcon,\n  actionDisabled = false,\n  disabledReason,\n  expanded,\n  toggle = false,\n  placeholder = false,\n  rootAttributes = {},\n  triggerAttributes = {},\n}: ListHeaderProps) {\n  const extensionRootAttributes = filterDataAttributes(\n    rootAttributes,\n    PROTECTED_ROOT_DATA_ATTRIBUTES,\n  );\n  const extensionTriggerAttributes = filterControlAttributes(\n    triggerAttributes,\n    PROTECTED_TRIGGER_DATA_ATTRIBUTES,\n  );\n  const normalizedCount =\n    typeof count === 'number' && Number.isSafeInteger(count) && count >= 0\n      ? count\n      : undefined;\n  const normalizedCountLabel =\n    normalizedCount === undefined\n      ? undefined\n      : typeof countLabel === 'string' && countLabel.trim()\n        ? countLabel\n        : String(normalizedCount);\n  const renderedBadge = normalizedCount === undefined ? badge : undefined;\n  const renderedActionIcon =\n    actionIcon ??\n    (toggle ? <DisclosureArrow open={Boolean(expanded)} /> : undefined);\n  const accessibleLabel =\n    normalizedCount === undefined\n      ? undefined\n      : `${label}, ${normalizedCountLabel}`;\n  const indicator = placeholder ? (\n    (normalizedCount !== undefined || renderedBadge) && (\n      <span class=\"kui-list-header__badge\">\n        <Skeleton width=\"1.75em\" />\n      </span>\n    )\n  ) : normalizedCount === undefined ? (\n    renderedBadge && <span class=\"kui-list-header__badge\">{renderedBadge}</span>\n  ) : (\n    <span class=\"kui-list-header__count\" aria-hidden=\"true\">\n      {normalizedCount}\n    </span>\n  );\n  const busy = placeholder ? ('true' as const) : undefined;\n  if (toggle) {\n    return (\n      <header\n        {...extensionRootAttributes}\n        class=\"kui-list-header\"\n        data-component=\"list-header\"\n        data-has-badge={String(Boolean(renderedBadge))}\n        data-has-count={String(normalizedCount !== undefined)}\n        data-toggle=\"true\"\n        data-placeholder={placeholder ? 'true' : undefined}\n        aria-busy={busy}\n      >\n        <button\n          {...extensionTriggerAttributes}\n          type=\"button\"\n          class=\"kui-list-header__title kui-list-header__toggle\"\n          data-action={placeholder ? undefined : action}\n          title={actionDisabled ? disabledReason : undefined}\n          disabled={actionDisabled || placeholder || undefined}\n          aria-label={accessibleLabel}\n          aria-expanded={String(Boolean(expanded))}\n        >\n          <span class=\"kui-list-header__label\">{label}</span>\n          {indicator}\n          {renderedActionIcon && (\n            <span class=\"kui-list-header__action-layer\">\n              {renderedActionIcon}\n            </span>\n          )}\n        </button>\n      </header>\n    );\n  }\n  return (\n    <header\n      {...extensionRootAttributes}\n      class=\"kui-list-header\"\n      data-component=\"list-header\"\n      data-has-badge={String(Boolean(renderedBadge))}\n      data-has-count={String(normalizedCount !== undefined)}\n      data-toggle=\"false\"\n      data-placeholder={placeholder ? 'true' : undefined}\n      aria-busy={busy}\n    >\n      <div class=\"kui-list-header__title\">\n        <h2 class=\"kui-list-header__label\" aria-label={accessibleLabel}>\n          {label}\n        </h2>\n        {indicator}\n      </div>\n      {action && (\n        <button\n          {...extensionTriggerAttributes}\n          type=\"button\"\n          class=\"kui-list-header__action\"\n          data-action={placeholder ? undefined : action}\n          aria-label={actionLabel}\n          title={actionDisabled ? disabledReason : actionLabel}\n          disabled={actionDisabled || placeholder || undefined}\n        >\n          {renderedActionIcon}\n        </button>\n      )}\n    </header>\n  );\n}\n"]}

package/dist/chunk-UFZKLBCF.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/list-action-row.tsx"],"names":[],"mappings":"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","file":"chunk-UFZKLBCF.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport {\n  filterControlAttributes,\n  filterDataAttributes,\n} from './extension-attributes.js';\nimport { Skeleton } from './skeleton.js';\n\nconst PROTECTED_ROOT_DATA_ATTRIBUTES = new Set([\n  'data-component',\n  'data-action',\n  'data-item-id',\n  'data-has-icon',\n  'data-multiline',\n  'data-state',\n  'data-selected',\n  'data-pressed',\n]);\nconst PROTECTED_TRAILING_DATA_ATTRIBUTES = new Set([\n  'data-component',\n  'data-action',\n  'data-item-id',\n]);\n\ntype ListActionRowRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-action'?: never;\n    'data-item-id'?: never;\n    'data-has-icon'?: never;\n    'data-multiline'?: never;\n    'data-state'?: never;\n    'data-selected'?: never;\n    'data-pressed'?: never;\n  }\n>;\n\ntype ListActionRowTrailingAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-action'?: never;\n    'data-item-id'?: never;\n    popoverTarget?: string;\n    popoverTargetAction?: 'toggle' | 'show' | 'hide';\n    'aria-controls'?: string;\n    'aria-haspopup'?: 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid' | 'true';\n  }\n>;\n\nexport interface ListActionRowProps {\n  /** Visible dormant content for the primary button. Must not contain interactive descendants. */\n  label: string | SafeHtml;\n  /** Decorative dormant content for the primary button. Must not contain interactive descendants. */\n  icon?: SafeHtml;\n  action: string;\n  itemId?: string;\n  selected?: boolean;\n  pressed?: boolean;\n  accessibleLabel?: string;\n  title?: string;\n  multiline?: boolean;\n  state?: string;\n  disabled?: boolean;\n  tabIndex?: number;\n  /** Render as an unanimated loading skeleton, disabling both actions. */\n  placeholder?: boolean;\n  trailingAction: string;\n  trailingActionLabel: string;\n  /** Decorative dormant content for the trailing button. Must not contain interactive descendants. */\n  trailingActionIcon: SafeHtml;\n  trailingActionDisabled?: boolean;\n  trailingActionTitle?: string;\n  className?: string;\n  style?: string;\n  rootAttributes?: ListActionRowRootAttributes;\n  trailingActionAttributes?: ListActionRowTrailingAttributes;\n}\n\nexport function ListActionRow({\n  label,\n  icon,\n  action,\n  itemId,\n  selected = false,\n  pressed,\n  accessibleLabel,\n  title,\n  multiline = false,\n  state,\n  disabled = false,\n  tabIndex,\n  placeholder = false,\n  trailingAction,\n  trailingActionLabel,\n  trailingActionIcon,\n  trailingActionDisabled = false,\n  trailingActionTitle,\n  className = '',\n  style,\n  rootAttributes = {},\n  trailingActionAttributes = {},\n}: ListActionRowProps) {\n  const extensionRootAttributes = filterDataAttributes(\n    rootAttributes,\n    PROTECTED_ROOT_DATA_ATTRIBUTES,\n  );\n  const extensionTrailingAttributes = filterControlAttributes(\n    trailingActionAttributes,\n    PROTECTED_TRAILING_DATA_ATTRIBUTES,\n  );\n\n  return (\n    <div\n      {...extensionRootAttributes}\n      class={`kui-list-action-row ${className}`.trim()}\n      style={style}\n      data-component=\"list-action-row\"\n      data-item-id={itemId}\n      data-has-icon={String(Boolean(icon))}\n      data-multiline={multiline ? 'true' : undefined}\n      data-state={state}\n      data-selected={String(selected)}\n      data-pressed={pressed === undefined ? undefined : String(pressed)}\n      data-placeholder={placeholder ? 'true' : undefined}\n      aria-busy={placeholder ? 'true' : undefined}\n    >\n      <button\n        type=\"button\"\n        class=\"kui-list-action-row__primary\"\n        title={placeholder ? undefined : title}\n        disabled={disabled || placeholder}\n        tabindex={placeholder ? -1 : tabIndex}\n        data-action={placeholder ? undefined : action}\n        data-item-id={itemId}\n        aria-label={accessibleLabel}\n        aria-current={selected ? 'page' : undefined}\n        aria-pressed={pressed === undefined ? undefined : String(pressed)}\n      >\n        {icon && (\n          <span class=\"kui-list-action-row__icon\">\n            {placeholder ? <Skeleton width=\"1em\" height=\"1em\" /> : icon}\n          </span>\n        )}\n        <span class=\"kui-list-action-row__label\">\n          {placeholder ? <Skeleton width=\"9em\" /> : label}\n        </span>\n      </button>\n      <button\n        {...extensionTrailingAttributes}\n        type=\"button\"\n        class=\"kui-list-action-row__trailing-action\"\n        data-action={placeholder ? undefined : trailingAction}\n        data-item-id={itemId}\n        aria-label={trailingActionLabel}\n        title={trailingActionTitle ?? trailingActionLabel}\n        disabled={trailingActionDisabled || placeholder || undefined}\n      >\n        {trailingActionIcon}\n      </button>\n    </div>\n  );\n}\n"]}

package/dist/chunk-Y45PPBDV.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/app-tab.tsx"],"names":[],"mappings":"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","file":"chunk-Y45PPBDV.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { filterDataAttributes } from './extension-attributes.js';\nimport { Skeleton } from './skeleton.js';\n\nconst PROTECTED_ROOT_DATA_ATTRIBUTES = new Set([\n  'data-component',\n  'data-action',\n  'data-tab-id',\n  'data-selected',\n  'data-tab-dragging',\n  'data-tab-drop-position',\n]);\n\ntype AppTabRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-action'?: never;\n    'data-tab-id'?: never;\n    'data-selected'?: never;\n    'data-tab-dragging'?: never;\n    'data-tab-drop-position'?: never;\n  }\n>;\n\nexport interface AppTabProps {\n  id: string;\n  name: string;\n  selected?: boolean;\n  closable?: boolean;\n  draggable?: boolean;\n  leading?: SafeHtml;\n  trailing?: SafeHtml;\n  /** Decorative dormant content for the close button. Must not contain interactive descendants. */\n  closeIcon?: SafeHtml;\n  selectAction?: string;\n  closeAction?: string;\n  className?: string;\n  /** Render as an unanimated loading skeleton, disabling select/close and dragging. */\n  placeholder?: boolean;\n  rootAttributes?: AppTabRootAttributes;\n}\n\nfunction CloseIcon() {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2.25\"\n      stroke-linecap=\"round\"\n    >\n      <path d=\"m7 7 10 10\"></path>\n      <path d=\"M17 7 7 17\"></path>\n    </svg>\n  );\n}\n\nexport function AppTab({\n  id,\n  name,\n  selected = false,\n  closable = true,\n  draggable = false,\n  leading,\n  trailing,\n  closeIcon,\n  selectAction = 'select-tab',\n  closeAction = 'close-tab',\n  className = '',\n  placeholder = false,\n  rootAttributes = {},\n}: AppTabProps) {\n  const keyshortcuts = [\n    closable ? 'Delete Backspace' : '',\n    draggable ? 'Alt+Shift+ArrowLeft Alt+Shift+ArrowRight' : '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n  const extensionAttributes = filterDataAttributes(\n    rootAttributes,\n    PROTECTED_ROOT_DATA_ATTRIBUTES,\n  );\n  return (\n    <div\n      {...extensionAttributes}\n      class={`kui-app-tab ${className}`.trim()}\n      data-component=\"app-tab\"\n      data-tab-id={id}\n      data-selected={String(selected)}\n      data-placeholder={placeholder ? 'true' : undefined}\n      draggable={placeholder ? 'false' : draggable ? 'true' : 'false'}\n      aria-busy={placeholder ? 'true' : undefined}\n    >\n      {closable && (\n        <button\n          type=\"button\"\n          tabindex=\"-1\"\n          class=\"kui-app-tab__close\"\n          data-action={placeholder ? undefined : closeAction}\n          data-tab-id={id}\n          disabled={placeholder || undefined}\n          aria-label={`Close ${name}`}\n          title={`Close ${name}`}\n        >\n          <span class=\"kui-app-tab__close-icon\" aria-hidden=\"true\">\n            {closeIcon ?? <CloseIcon />}\n          </span>\n        </button>\n      )}\n      <button\n        type=\"button\"\n        class=\"kui-app-tab__select\"\n        role=\"tab\"\n        aria-selected={String(selected)}\n        aria-keyshortcuts={placeholder ? undefined : keyshortcuts || undefined}\n        data-action={placeholder ? undefined : selectAction}\n        data-tab-id={id}\n        disabled={placeholder || undefined}\n        tabindex={placeholder ? '-1' : selected ? '0' : '-1'}\n      >\n        {leading}\n        <span class=\"kui-app-tab__name\">\n          {placeholder ? <Skeleton width=\"7em\" /> : name}\n        </span>\n        {closable || trailing ? (\n          <span class=\"kui-app-tab__trailing\">{trailing}</span>\n        ) : undefined}\n      </button>\n    </div>\n  );\n}\n"]}

package/dist/panel-header.d.ts

@@ -1,42 +0,0 @@
-import { SafeHtml } from 'kerfjs';
-import { HeadingLevel } from './toolbar-text.js';
-
-interface PanelHeaderBaseProps {
-    title: string;
-    titleId: string;
-    icon?: SafeHtml;
-    iconClassName?: string;
-    actions?: SafeHtml;
-    /**
-     * Expose the title as a heading landmark (`role="heading"` + `aria-level`). Set it
-     * for a PAGE or view heading so screen-reader heading navigation works and the view
-     * has a primary heading; omit it (the default) for a dialog title, which is instead
-     * referenced via `aria-labelledby={titleId}` and needs no heading landmark.
-     */
-    headingLevel?: HeadingLevel;
-    /** Render the title and summary as unanimated loading skeletons, keeping the icon and actions. */
-    placeholder?: boolean;
-}
-type PanelHeaderSummaryProps = {
-    summary: string;
-    summaryId?: string;
-} | {
-    summary?: never;
-    summaryId?: never;
-};
-type PanelHeaderProps = PanelHeaderBaseProps & PanelHeaderSummaryProps;
-/**
- * The heading of a panel, dialog, or page: a plain `Toolbar` whose leading zone
- * holds an optional icon control group and the title as extra-large `ToolbarText`,
- * whose trailing zone holds the app's action controls, and with an optional
- * subtitle on its own row, left-aligned with the title.
- *
- * PanelHeader overrides no Toolbar styles — it is just a Toolbar with an xl title.
- * The only styling it adds is the icon group's fill/border color and the subtitle.
- * When no icon is provided, the icon group is omitted entirely. The `actions` slot
- * is passed straight into the toolbar's trailing zone; the app supplies whatever
- * trailing controls it needs (typically a `ToolbarControlGroup`).
- */
-declare function PanelHeader({ title, titleId, summary, summaryId, icon, iconClassName, actions, headingLevel, placeholder, }: PanelHeaderProps): SafeHtml;
-
-export { PanelHeader, type PanelHeaderProps };

package/dist/panel-header.js

@@ -1,7 +0,0 @@
-export { PanelHeader } from './chunk-7XRDUG4Y.js';
-
-
-
-
-
-//# sourceMappingURL=panel-header.js.map

package/dist/panel-header.js.map

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

package/dist/styles/panel-header.css

@@ -1,64 +0,0 @@
-.kui-panel-header {
-  display: grid;
-  width: 100%;
-  gap: 0;
-}
-
-/* The only chrome PanelHeader adds to the plain Toolbar: the icon group is a
-   normal (bordered) control group given a brand fill, with its border color set
-   to match the fill so it reads as a solid filled tile rather than a bordered
-   pill. Both are the group's own theming variables — no Toolbar style is
-   overridden. */
-.kui-panel-header__icon.kui-toolbar-control-group {
-  --kui-toolbar-control-background: var(
-    --kui-panel-header-icon-background,
-    var(--kui-color-brand-fill-quiet)
-  );
-  --kui-toolbar-control-border: var(
-    --kui-panel-header-icon-border,
-    var(--kui-color-brand-fill-quiet)
-  );
-  color: var(
-    --kui-panel-header-icon-foreground,
-    var(--kui-color-brand-on-quiet)
-  );
-  /* The icon is a raw svg child (not a button), so the group's default
-     flex-start alignment would pin it to the left of the filled tile. Center it
-     on both axes inside the circle. */
-  justify-content: center;
-}
-
-.kui-panel-header__icon svg {
-  display: block;
-  width: 1.375rem;
-  height: 1.375rem;
-}
-
-/* The subtitle sits on its own row, its text left-aligned with the title text
-   (past the toolbar padding, the optional icon group + leading gap, and the
-   title's own inline padding). */
-.kui-panel-header__summary {
-  min-width: 0;
-  margin: 0;
-  overflow: hidden;
-  padding-inline-start: var(--kui-panel-header-title-inset);
-  color: var(--kui-color-text-quiet);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.kui-panel-header[data-has-icon="false"] {
-  --kui-panel-header-title-inset: calc(
-    var(--kui-toolbar-gap, 0.5rem) +
-      var(--kui-layout-item-padding, 0.5rem)
-  );
-}
-
-.kui-panel-header[data-has-icon="true"] {
-  --kui-panel-header-title-inset: calc(
-    var(--kui-toolbar-gap, 0.5rem) +
-      var(--kui-toolbar-group-size, calc(2px + 2.625rem)) +
-      var(--kui-toolbar-gap, 0.5rem) +
-      var(--kui-layout-item-padding, 0.5rem)
-  );
-}

package/docs/design/templates/panel-header/icon-actions-dark.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 112" width="720" height="112"><defs><clipPath id="cp0"><rect x="28" y="28" width="551.7" height="44"/></clipPath><clipPath id="ov1"><rect x="28" y="28" width="551.7" height="44" rx="0"/></clipPath><clipPath id="cp2"><rect x="39" y="39" width="22" height="22"/></clipPath><clipPath id="cp4"><rect x="80" y="28" width="154.5" height="44"/></clipPath><clipPath id="ov5"><rect x="80" y="28" width="154.5" height="44" rx="0"/></clipPath><clipPath id="cp6"><rect x="88" y="40" width="138.5" height="20"/></clipPath><clipPath id="ct7"><rect x="88" y="40" width="138.5" height="20"/></clipPath><clipPath id="ct8"><rect x="587.7" y="34" width="64.3" height="32"/></clipPath></defs><g clip-path="url(#cp0)"><g clip-path="url(#ov1)"><rect x="28" y="28" width="44" height="44" rx="22" fill="rgb(34,43,48)"/><rect x="28.5" y="28.5" width="43" height="43" rx="21.5" fill="none" stroke="rgb(34,43,48)" stroke-width="1"/><g clip-path="url(#cp2)"><g color="rgb(138, 203, 255)"><clipPath id="svgic3"><rect x="39" y="39" width="22" height="22"/></clipPath><g clip-path="url(#svgic3)"><g transform="translate(39 39)scale(.91667)"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.7-.9l-.8-1.2A2 2 0 0 0 7.9 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g clip-path="url(#cp4)"><g clip-path="url(#ov5)"><g clip-path="url(#cp6)"><g clip-path="url(#ct7)"><text x="88" y="57" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(245,245,247)">Package details</text></g></g></g></g></g></g><rect x="587.7" y="34" width="64.3" height="32" rx="16" fill="rgb(28,28,30)"/><rect x="588.5" y="34.5" width="63" height="31" rx="15.5" fill="none" stroke="rgb(72,72,74)" stroke-width="1"/><text x="600.69" y="56" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Done</text></svg>

package/docs/design/templates/panel-header/icon-actions.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 112" width="720" height="112"><defs><clipPath id="cp0"><rect x="28" y="28" width="551.7" height="44"/></clipPath><clipPath id="ov1"><rect x="28" y="28" width="551.7" height="44" rx="0"/></clipPath><clipPath id="cp2"><rect x="39" y="39" width="22" height="22"/></clipPath><clipPath id="cp4"><rect x="80" y="28" width="154.5" height="44"/></clipPath><clipPath id="ov5"><rect x="80" y="28" width="154.5" height="44" rx="0"/></clipPath><clipPath id="cp6"><rect x="88" y="40" width="138.5" height="20"/></clipPath><clipPath id="ct7"><rect x="88" y="40" width="138.5" height="20"/></clipPath><clipPath id="ct8"><rect x="587.7" y="34" width="64.3" height="32"/></clipPath></defs><g clip-path="url(#cp0)"><g clip-path="url(#ov1)"><rect x="28" y="28" width="44" height="44" rx="22" fill="rgb(235,245,255)"/><rect x="28.5" y="28.5" width="43" height="43" rx="21.5" fill="none" stroke="rgb(235,245,255)" stroke-width="1"/><g clip-path="url(#cp2)"><g color="rgb(30, 110, 244)"><clipPath id="svgic3"><rect x="39" y="39" width="22" height="22"/></clipPath><g clip-path="url(#svgic3)"><g transform="translate(39 39)scale(.91667)"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.7-.9l-.8-1.2A2 2 0 0 0 7.9 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(30, 110, 244)" 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(#cp4)"><g clip-path="url(#ov5)"><g clip-path="url(#cp6)"><g clip-path="url(#ct7)"><text x="88" y="57" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(29,29,31)">Package details</text></g></g></g></g></g></g><rect x="587.7" y="34" width="64.3" height="32" rx="16" fill="rgb(255,255,255)"/><rect x="588.5" y="34.5" width="63" height="31" rx="15.5" fill="none" stroke="rgb(209,209,214)" stroke-width="1"/><text x="600.69" y="56" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Done</text></svg>

package/docs/design/templates/panel-header/icon-summary-actions-dark.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 136" width="720" height="136"><defs><clipPath id="cp0"><rect x="28" y="28" width="550.7" height="44"/></clipPath><clipPath id="ov1"><rect x="28" y="28" width="550.7" height="44" rx="0"/></clipPath><clipPath id="cp2"><rect x="39" y="39" width="22" height="22"/></clipPath><clipPath id="cp4"><rect x="80" y="28" width="189.8" height="44"/></clipPath><clipPath id="ov5"><rect x="80" y="28" width="189.8" height="44" rx="0"/></clipPath><clipPath id="cp6"><rect x="88" y="40" width="173.8" height="20"/></clipPath><clipPath id="ct7"><rect x="88" y="40" width="173.8" height="20"/></clipPath><clipPath id="ct8"><rect x="586.7" y="34" width="65.3" height="32"/></clipPath><clipPath id="cp9"><rect x="20" y="80" width="640" height="18"/></clipPath><clipPath id="ct10"><rect x="20" y="80" width="640" height="18"/></clipPath></defs><g clip-path="url(#cp0)"><g clip-path="url(#ov1)"><rect x="28" y="28" width="44" height="44" rx="22" fill="rgb(34,43,48)"/><rect x="28.5" y="28.5" width="43" height="43" rx="21.5" fill="none" stroke="rgb(34,43,48)" stroke-width="1"/><g clip-path="url(#cp2)"><g color="rgb(138, 203, 255)"><clipPath id="svgic3"><rect x="39" y="39" width="22" height="22"/></clipPath><g clip-path="url(#svgic3)"><g transform="translate(39 39)scale(.91667)"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2 2 0 0 1 1.7.7l3.6 3.6A2 2 0 0 1 20 8v12a2 2 0 0 1-2 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M14 2v5a1 1 0 0 0 1 1h5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M10 9H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M16 13H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M16 17H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g clip-path="url(#cp4)"><g clip-path="url(#ov5)"><g clip-path="url(#cp6)"><g clip-path="url(#ct7)"><text x="88" y="57" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(245,245,247)">Northstar migration</text></g></g></g></g></g></g><rect x="586.7" y="34" width="65.3" height="32" rx="16" fill="rgb(28,28,30)"/><rect x="587.5" y="34.5" width="64" height="31" rx="15.5" fill="none" stroke="rgb(72,72,74)" stroke-width="1"/><text x="599.66" y="56" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Open</text><g clip-path="url(#cp9)"><g clip-path="url(#ct10)"><text x="88" y="95" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(174,174,178)">In review · updated today</text></g></g></svg>

package/docs/design/templates/panel-header/icon-summary-actions.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 136" width="720" height="136"><defs><clipPath id="cp0"><rect x="28" y="28" width="550.7" height="44"/></clipPath><clipPath id="ov1"><rect x="28" y="28" width="550.7" height="44" rx="0"/></clipPath><clipPath id="cp2"><rect x="39" y="39" width="22" height="22"/></clipPath><clipPath id="cp4"><rect x="80" y="28" width="189.8" height="44"/></clipPath><clipPath id="ov5"><rect x="80" y="28" width="189.8" height="44" rx="0"/></clipPath><clipPath id="cp6"><rect x="88" y="40" width="173.8" height="20"/></clipPath><clipPath id="ct7"><rect x="88" y="40" width="173.8" height="20"/></clipPath><clipPath id="ct8"><rect x="586.7" y="34" width="65.3" height="32"/></clipPath><clipPath id="cp9"><rect x="20" y="80" width="640" height="18"/></clipPath><clipPath id="ct10"><rect x="20" y="80" width="640" height="18"/></clipPath></defs><g clip-path="url(#cp0)"><g clip-path="url(#ov1)"><rect x="28" y="28" width="44" height="44" rx="22" fill="rgb(235,245,255)"/><rect x="28.5" y="28.5" width="43" height="43" rx="21.5" fill="none" stroke="rgb(235,245,255)" stroke-width="1"/><g clip-path="url(#cp2)"><g color="rgb(30, 110, 244)"><clipPath id="svgic3"><rect x="39" y="39" width="22" height="22"/></clipPath><g clip-path="url(#svgic3)"><g transform="translate(39 39)scale(.91667)"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2 2 0 0 1 1.7.7l3.6 3.6A2 2 0 0 1 20 8v12a2 2 0 0 1-2 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M14 2v5a1 1 0 0 0 1 1h5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M10 9H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M16 13H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M16 17H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(30, 110, 244)" 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(#cp4)"><g clip-path="url(#ov5)"><g clip-path="url(#cp6)"><g clip-path="url(#ct7)"><text x="88" y="57" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(29,29,31)">Northstar migration</text></g></g></g></g></g></g><rect x="586.7" y="34" width="65.3" height="32" rx="16" fill="rgb(255,255,255)"/><rect x="587.5" y="34.5" width="64" height="31" rx="15.5" fill="none" stroke="rgb(209,209,214)" stroke-width="1"/><text x="599.66" y="56" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Open</text><g clip-path="url(#cp9)"><g clip-path="url(#ct10)"><text x="88" y="95" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(110,110,115)">In review · updated today</text></g></g></svg>

package/docs/design/templates/panel-header/no-icon-dark.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 136" width="720" height="136"><defs><clipPath id="cp0"><rect x="28" y="28" width="557.5" height="44"/></clipPath><clipPath id="ov1"><rect x="28" y="28" width="557.5" height="44" rx="0"/></clipPath><clipPath id="cp2"><rect x="28" y="28" width="191.4" height="44"/></clipPath><clipPath id="ov3"><rect x="28" y="28" width="191.4" height="44" rx="0"/></clipPath><clipPath id="cp4"><rect x="36" y="40" width="175.4" height="20"/></clipPath><clipPath id="ct5"><rect x="36" y="40" width="175.4" height="20"/></clipPath><clipPath id="ct6"><rect x="593.5" y="34" width="58.5" height="32"/></clipPath><clipPath id="cp7"><rect x="20" y="80" width="640" height="18"/></clipPath><clipPath id="ct8"><rect x="20" y="80" width="640" height="18"/></clipPath></defs><g clip-path="url(#cp0)"><g clip-path="url(#ov1)"><g clip-path="url(#cp2)"><g clip-path="url(#ov3)"><g clip-path="url(#cp4)"><g clip-path="url(#ct5)"><text x="36" y="57" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(245,245,247)">Workspace settings</text></g></g></g></g></g></g><rect x="593.5" y="34" width="58.5" height="32" rx="16" fill="rgb(28,28,30)"/><rect x="594.5" y="34.5" width="57" height="31" rx="15.5" fill="none" stroke="rgb(72,72,74)" stroke-width="1"/><text x="606.53" y="56" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">New</text><g clip-path="url(#cp7)"><g clip-path="url(#ct8)"><text x="36" y="95" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(174,174,178)">Manage members, billing, and integrations.</text></g></g></svg>

package/docs/design/templates/panel-header/no-icon.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 136" width="720" height="136"><defs><clipPath id="cp0"><rect x="28" y="28" width="557.5" height="44"/></clipPath><clipPath id="ov1"><rect x="28" y="28" width="557.5" height="44" rx="0"/></clipPath><clipPath id="cp2"><rect x="28" y="28" width="191.4" height="44"/></clipPath><clipPath id="ov3"><rect x="28" y="28" width="191.4" height="44" rx="0"/></clipPath><clipPath id="cp4"><rect x="36" y="40" width="175.4" height="20"/></clipPath><clipPath id="ct5"><rect x="36" y="40" width="175.4" height="20"/></clipPath><clipPath id="ct6"><rect x="593.5" y="34" width="58.5" height="32"/></clipPath><clipPath id="cp7"><rect x="20" y="80" width="640" height="18"/></clipPath><clipPath id="ct8"><rect x="20" y="80" width="640" height="18"/></clipPath></defs><g clip-path="url(#cp0)"><g clip-path="url(#ov1)"><g clip-path="url(#cp2)"><g clip-path="url(#ov3)"><g clip-path="url(#cp4)"><g clip-path="url(#ct5)"><text x="36" y="57" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(29,29,31)">Workspace settings</text></g></g></g></g></g></g><rect x="593.5" y="34" width="58.5" height="32" rx="16" fill="rgb(255,255,255)"/><rect x="594.5" y="34.5" width="57" height="31" rx="15.5" fill="none" stroke="rgb(209,209,214)" stroke-width="1"/><text x="606.53" y="56" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">New</text><g clip-path="url(#cp7)"><g clip-path="url(#ct8)"><text x="36" y="95" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(110,110,115)">Manage members, billing, and integrations.</text></g></g></svg>

package/docs/design/templates/panel-header/page-heading-dark.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 112" width="720" height="112"><defs><clipPath id="cp0"><rect x="28" y="28" width="500.7" height="44"/></clipPath><clipPath id="ov1"><rect x="28" y="28" width="500.7" height="44" rx="0"/></clipPath><clipPath id="cp2"><rect x="28" y="28" width="144.6" height="44"/></clipPath><clipPath id="ov3"><rect x="28" y="28" width="144.6" height="44" rx="0"/></clipPath><clipPath id="cp4"><rect x="36" y="40" width="128.6" height="20"/></clipPath><clipPath id="ct5"><rect x="36" y="40" width="128.6" height="20"/></clipPath><clipPath id="ct6"><rect x="536.7" y="34" width="115.3" height="32"/></clipPath></defs><g clip-path="url(#cp0)"><g clip-path="url(#ov1)"><g clip-path="url(#cp2)"><g clip-path="url(#ov3)"><g clip-path="url(#cp4)"><g clip-path="url(#ct5)"><text x="36" y="57" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(245,245,247)">UI foundations</text></g></g></g></g></g></g><rect x="536.7" y="34" width="115.3" height="32" rx="16" fill="rgb(28,28,30)"/><rect x="537.5" y="34.5" width="114" height="31" rx="15.5" fill="none" stroke="rgb(72,72,74)" stroke-width="1"/><text x="549.7" y="56" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">New pattern</text></svg>

package/docs/design/templates/panel-header/page-heading.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 112" width="720" height="112"><defs><clipPath id="cp0"><rect x="28" y="28" width="500.7" height="44"/></clipPath><clipPath id="ov1"><rect x="28" y="28" width="500.7" height="44" rx="0"/></clipPath><clipPath id="cp2"><rect x="28" y="28" width="144.6" height="44"/></clipPath><clipPath id="ov3"><rect x="28" y="28" width="144.6" height="44" rx="0"/></clipPath><clipPath id="cp4"><rect x="36" y="40" width="128.6" height="20"/></clipPath><clipPath id="ct5"><rect x="36" y="40" width="128.6" height="20"/></clipPath><clipPath id="ct6"><rect x="536.7" y="34" width="115.3" height="32"/></clipPath></defs><g clip-path="url(#cp0)"><g clip-path="url(#ov1)"><g clip-path="url(#cp2)"><g clip-path="url(#ov3)"><g clip-path="url(#cp4)"><g clip-path="url(#ct5)"><text x="36" y="57" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(29,29,31)">UI foundations</text></g></g></g></g></g></g><rect x="536.7" y="34" width="115.3" height="32" rx="16" fill="rgb(255,255,255)"/><rect x="537.5" y="34.5" width="114" height="31" rx="15.5" fill="none" stroke="rgb(209,209,214)" stroke-width="1"/><text x="549.7" y="56" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">New pattern</text></svg>

package/docs/design/templates/panel-header/title-only-dark.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 104" width="720" height="104"><defs><clipPath id="cp0"><rect x="28" y="28" width="616" height="44"/></clipPath><clipPath id="ov1"><rect x="28" y="28" width="616" height="44" rx="0"/></clipPath><clipPath id="cp2"><rect x="28" y="28" width="146.9" height="44"/></clipPath><clipPath id="ov3"><rect x="28" y="28" width="146.9" height="44" rx="0"/></clipPath><clipPath id="cp4"><rect x="36" y="40" width="130.9" height="20"/></clipPath><clipPath id="ct5"><rect x="36" y="40" width="130.9" height="20"/></clipPath></defs><g clip-path="url(#cp0)"><g clip-path="url(#ov1)"><g clip-path="url(#cp2)"><g clip-path="url(#ov3)"><g clip-path="url(#cp4)"><g clip-path="url(#ct5)"><text x="36" y="57" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(245,245,247)">Recent activity</text></g></g></g></g></g></g></svg>

package/docs/design/templates/panel-header/title-only.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 104" width="720" height="104"><defs><clipPath id="cp0"><rect x="28" y="28" width="616" height="44"/></clipPath><clipPath id="ov1"><rect x="28" y="28" width="616" height="44" rx="0"/></clipPath><clipPath id="cp2"><rect x="28" y="28" width="146.9" height="44"/></clipPath><clipPath id="ov3"><rect x="28" y="28" width="146.9" height="44" rx="0"/></clipPath><clipPath id="cp4"><rect x="36" y="40" width="130.9" height="20"/></clipPath><clipPath id="ct5"><rect x="36" y="40" width="130.9" height="20"/></clipPath></defs><g clip-path="url(#cp0)"><g clip-path="url(#ov1)"><g clip-path="url(#cp2)"><g clip-path="url(#ov3)"><g clip-path="url(#cp4)"><g clip-path="url(#ct5)"><text x="36" y="57" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(29,29,31)">Recent activity</text></g></g></g></g></g></g></svg>

package/docs/design/templates/panel-header-dark.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 752 806" width="752" height="806"><defs><clipPath id="cp0"><rect x="16" y="38" width="720" height="136"/></clipPath><clipPath id="cp1"><rect x="16" y="212" width="720" height="112"/></clipPath><clipPath id="cp2"><rect x="16" y="362" width="720" height="136"/></clipPath><clipPath id="cp3"><rect x="16" y="536" width="720" height="104"/></clipPath><clipPath id="cp4"><rect x="16" y="678" width="720" height="112"/></clipPath><clipPath id="ct5"><rect x="16" y="16" width="720" height="22"/></clipPath><clipPath id="irc6"><rect x="16" y="38" width="720" height="136" rx="0"/></clipPath><clipPath id="ct8"><rect x="16" y="190" width="720" height="22"/></clipPath><clipPath id="irc9"><rect x="16" y="212" width="720" height="112" rx="0"/></clipPath><clipPath id="ct11"><rect x="16" y="340" width="720" height="22"/></clipPath><clipPath id="irc12"><rect x="16" y="362" width="720" height="136" rx="0"/></clipPath><clipPath id="ct14"><rect x="16" y="514" width="720" height="22"/></clipPath><clipPath id="irc15"><rect x="16" y="536" width="720" height="104" rx="0"/></clipPath><clipPath id="ct17"><rect x="16" y="656" width="720" height="22"/></clipPath><clipPath id="irc18"><rect x="16" y="678" width="720" height="112" rx="0"/></clipPath></defs><rect x="0" y="0" width="752" height="806" rx="0" fill="rgb(28,28,30)"/><text x="16" y="28" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Icon, summary, and action</text><g clip-path="url(#cp0)"><g clip-path="url(#irc6)"><clipPath id="svgimg7vclip"><rect x="16" y="38" width="720" height="136"/></clipPath><g clip-path="url(#svgimg7vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg7cp0"><rect x="28" y="28" width="550.7" height="44"/></clipPath><clipPath id="svgimg7ov1"><rect x="28" y="28" width="550.7" height="44" rx="0"/></clipPath><clipPath id="svgimg7cp2"><rect x="39" y="39" width="22" height="22"/></clipPath><clipPath id="svgimg7cp4"><rect x="80" y="28" width="189.8" height="44"/></clipPath><clipPath id="svgimg7ov5"><rect x="80" y="28" width="189.8" height="44" rx="0"/></clipPath><clipPath id="svgimg7cp6"><rect x="88" y="40" width="173.8" height="20"/></clipPath><clipPath id="svgimg7ct7"><rect x="88" y="40" width="173.8" height="20"/></clipPath><clipPath id="svgimg7ct8"><rect x="586.7" y="34" width="65.3" height="32"/></clipPath><clipPath id="svgimg7cp9"><rect x="20" y="80" width="640" height="18"/></clipPath><clipPath id="svgimg7ct10"><rect x="20" y="80" width="640" height="18"/></clipPath></defs><g clip-path="url(#svgimg7cp0)"><g clip-path="url(#svgimg7ov1)"><rect x="28" y="28" width="44" height="44" rx="22" fill="rgb(34,43,48)"/><rect x="28.5" y="28.5" width="43" height="43" rx="21.5" fill="none" stroke="rgb(34,43,48)" stroke-width="1"/><g clip-path="url(#svgimg7cp2)"><g color="rgb(138, 203, 255)"><clipPath id="svgimg7svgic3"><rect x="39" y="39" width="22" height="22"/></clipPath><g clip-path="url(#svgimg7svgic3)"><g transform="translate(39 39)scale(.91667)"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2 2 0 0 1 1.7.7l3.6 3.6A2 2 0 0 1 20 8v12a2 2 0 0 1-2 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M14 2v5a1 1 0 0 0 1 1h5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M10 9H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M16 13H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M16 17H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g clip-path="url(#svgimg7cp4)"><g clip-path="url(#svgimg7ov5)"><g clip-path="url(#svgimg7cp6)"><g clip-path="url(#svgimg7ct7)"><text x="88" y="57" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(245,245,247)">Northstar migration</text></g></g></g></g></g></g><rect x="586.7" y="34" width="65.3" height="32" rx="16" fill="rgb(28,28,30)"/><rect x="587.5" y="34.5" width="64" height="31" rx="15.5" fill="none" stroke="rgb(72,72,74)" stroke-width="1"/><text x="599.66" y="56" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Open</text><g clip-path="url(#svgimg7cp9)"><g clip-path="url(#svgimg7ct10)"><text x="88" y="95" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(174,174,178)">In review · updated today</text></g></g></g></g></g></g><text x="16" y="202" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Icon and action, no summary</text><g clip-path="url(#cp1)"><g clip-path="url(#irc9)"><clipPath id="svgimg10vclip"><rect x="16" y="212" width="720" height="112"/></clipPath><g clip-path="url(#svgimg10vclip)"><g transform="translate(16 212)"><defs><clipPath id="svgimg10cp0"><rect x="28" y="28" width="551.7" height="44"/></clipPath><clipPath id="svgimg10ov1"><rect x="28" y="28" width="551.7" height="44" rx="0"/></clipPath><clipPath id="svgimg10cp2"><rect x="39" y="39" width="22" height="22"/></clipPath><clipPath id="svgimg10cp4"><rect x="80" y="28" width="154.5" height="44"/></clipPath><clipPath id="svgimg10ov5"><rect x="80" y="28" width="154.5" height="44" rx="0"/></clipPath><clipPath id="svgimg10cp6"><rect x="88" y="40" width="138.5" height="20"/></clipPath><clipPath id="svgimg10ct7"><rect x="88" y="40" width="138.5" height="20"/></clipPath><clipPath id="svgimg10ct8"><rect x="587.7" y="34" width="64.3" height="32"/></clipPath></defs><g clip-path="url(#svgimg10cp0)"><g clip-path="url(#svgimg10ov1)"><rect x="28" y="28" width="44" height="44" rx="22" fill="rgb(34,43,48)"/><rect x="28.5" y="28.5" width="43" height="43" rx="21.5" fill="none" stroke="rgb(34,43,48)" stroke-width="1"/><g clip-path="url(#svgimg10cp2)"><g color="rgb(138, 203, 255)"><clipPath id="svgimg10svgic3"><rect x="39" y="39" width="22" height="22"/></clipPath><g clip-path="url(#svgimg10svgic3)"><g transform="translate(39 39)scale(.91667)"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.7-.9l-.8-1.2A2 2 0 0 0 7.9 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g clip-path="url(#svgimg10cp4)"><g clip-path="url(#svgimg10ov5)"><g clip-path="url(#svgimg10cp6)"><g clip-path="url(#svgimg10ct7)"><text x="88" y="57" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(245,245,247)">Package details</text></g></g></g></g></g></g><rect x="587.7" y="34" width="64.3" height="32" rx="16" fill="rgb(28,28,30)"/><rect x="588.5" y="34.5" width="63" height="31" rx="15.5" fill="none" stroke="rgb(72,72,74)" stroke-width="1"/><text x="600.69" y="56" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Done</text></g></g></g></g><text x="16" y="352" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">No icon, summary and action</text><g clip-path="url(#cp2)"><g clip-path="url(#irc12)"><clipPath id="svgimg13vclip"><rect x="16" y="362" width="720" height="136"/></clipPath><g clip-path="url(#svgimg13vclip)"><g transform="translate(16 362)"><defs><clipPath id="svgimg13cp0"><rect x="28" y="28" width="557.5" height="44"/></clipPath><clipPath id="svgimg13ov1"><rect x="28" y="28" width="557.5" height="44" rx="0"/></clipPath><clipPath id="svgimg13cp2"><rect x="28" y="28" width="191.4" height="44"/></clipPath><clipPath id="svgimg13ov3"><rect x="28" y="28" width="191.4" height="44" rx="0"/></clipPath><clipPath id="svgimg13cp4"><rect x="36" y="40" width="175.4" height="20"/></clipPath><clipPath id="svgimg13ct5"><rect x="36" y="40" width="175.4" height="20"/></clipPath><clipPath id="svgimg13ct6"><rect x="593.5" y="34" width="58.5" height="32"/></clipPath><clipPath id="svgimg13cp7"><rect x="20" y="80" width="640" height="18"/></clipPath><clipPath id="svgimg13ct8"><rect x="20" y="80" width="640" height="18"/></clipPath></defs><g clip-path="url(#svgimg13cp0)"><g clip-path="url(#svgimg13ov1)"><g clip-path="url(#svgimg13cp2)"><g clip-path="url(#svgimg13ov3)"><g clip-path="url(#svgimg13cp4)"><g clip-path="url(#svgimg13ct5)"><text x="36" y="57" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(245,245,247)">Workspace settings</text></g></g></g></g></g></g><rect x="593.5" y="34" width="58.5" height="32" rx="16" fill="rgb(28,28,30)"/><rect x="594.5" y="34.5" width="57" height="31" rx="15.5" fill="none" stroke="rgb(72,72,74)" stroke-width="1"/><text x="606.53" y="56" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">New</text><g clip-path="url(#svgimg13cp7)"><g clip-path="url(#svgimg13ct8)"><text x="36" y="95" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(174,174,178)">Manage members, billing, and integrations.</text></g></g></g></g></g></g><text x="16" y="526" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Title only</text><g clip-path="url(#cp3)"><g clip-path="url(#irc15)"><clipPath id="svgimg16vclip"><rect x="16" y="536" width="720" height="104"/></clipPath><g clip-path="url(#svgimg16vclip)"><g transform="translate(16 536)"><defs><clipPath id="svgimg16cp0"><rect x="28" y="28" width="616" height="44"/></clipPath><clipPath id="svgimg16ov1"><rect x="28" y="28" width="616" height="44" rx="0"/></clipPath><clipPath id="svgimg16cp2"><rect x="28" y="28" width="146.9" height="44"/></clipPath><clipPath id="svgimg16ov3"><rect x="28" y="28" width="146.9" height="44" rx="0"/></clipPath><clipPath id="svgimg16cp4"><rect x="36" y="40" width="130.9" height="20"/></clipPath><clipPath id="svgimg16ct5"><rect x="36" y="40" width="130.9" height="20"/></clipPath></defs><g clip-path="url(#svgimg16cp0)"><g clip-path="url(#svgimg16ov1)"><g clip-path="url(#svgimg16cp2)"><g clip-path="url(#svgimg16ov3)"><g clip-path="url(#svgimg16cp4)"><g clip-path="url(#svgimg16ct5)"><text x="36" y="57" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(245,245,247)">Recent activity</text></g></g></g></g></g></g></g></g></g></g><text x="16" y="668" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Page heading (h1) with action</text><g clip-path="url(#cp4)"><g clip-path="url(#irc18)"><clipPath id="svgimg19vclip"><rect x="16" y="678" width="720" height="112"/></clipPath><g clip-path="url(#svgimg19vclip)"><g transform="translate(16 678)"><defs><clipPath id="svgimg19cp0"><rect x="28" y="28" width="500.7" height="44"/></clipPath><clipPath id="svgimg19ov1"><rect x="28" y="28" width="500.7" height="44" rx="0"/></clipPath><clipPath id="svgimg19cp2"><rect x="28" y="28" width="144.6" height="44"/></clipPath><clipPath id="svgimg19ov3"><rect x="28" y="28" width="144.6" height="44" rx="0"/></clipPath><clipPath id="svgimg19cp4"><rect x="36" y="40" width="128.6" height="20"/></clipPath><clipPath id="svgimg19ct5"><rect x="36" y="40" width="128.6" height="20"/></clipPath><clipPath id="svgimg19ct6"><rect x="536.7" y="34" width="115.3" height="32"/></clipPath></defs><g clip-path="url(#svgimg19cp0)"><g clip-path="url(#svgimg19ov1)"><g clip-path="url(#svgimg19cp2)"><g clip-path="url(#svgimg19ov3)"><g clip-path="url(#svgimg19cp4)"><g clip-path="url(#svgimg19ct5)"><text x="36" y="57" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(245,245,247)">UI foundations</text></g></g></g></g></g></g><rect x="536.7" y="34" width="115.3" height="32" rx="16" fill="rgb(28,28,30)"/><rect x="537.5" y="34.5" width="114" height="31" rx="15.5" fill="none" stroke="rgb(72,72,74)" stroke-width="1"/><text x="549.7" y="56" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">New pattern</text></g></g></g></g></svg>

package/docs/design/templates/panel-header.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 752 806" width="752" height="806"><defs><clipPath id="cp0"><rect x="16" y="38" width="720" height="136"/></clipPath><clipPath id="cp1"><rect x="16" y="212" width="720" height="112"/></clipPath><clipPath id="cp2"><rect x="16" y="362" width="720" height="136"/></clipPath><clipPath id="cp3"><rect x="16" y="536" width="720" height="104"/></clipPath><clipPath id="cp4"><rect x="16" y="678" width="720" height="112"/></clipPath><clipPath id="ct5"><rect x="16" y="16" width="720" height="22"/></clipPath><clipPath id="irc6"><rect x="16" y="38" width="720" height="136" rx="0"/></clipPath><clipPath id="ct8"><rect x="16" y="190" width="720" height="22"/></clipPath><clipPath id="irc9"><rect x="16" y="212" width="720" height="112" rx="0"/></clipPath><clipPath id="ct11"><rect x="16" y="340" width="720" height="22"/></clipPath><clipPath id="irc12"><rect x="16" y="362" width="720" height="136" rx="0"/></clipPath><clipPath id="ct14"><rect x="16" y="514" width="720" height="22"/></clipPath><clipPath id="irc15"><rect x="16" y="536" width="720" height="104" rx="0"/></clipPath><clipPath id="ct17"><rect x="16" y="656" width="720" height="22"/></clipPath><clipPath id="irc18"><rect x="16" y="678" width="720" height="112" rx="0"/></clipPath></defs><rect x="0" y="0" width="752" height="806" rx="0" fill="rgb(255,255,255)"/><text x="16" y="28" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Icon, summary, and action</text><g clip-path="url(#cp0)"><g clip-path="url(#irc6)"><clipPath id="svgimg7vclip"><rect x="16" y="38" width="720" height="136"/></clipPath><g clip-path="url(#svgimg7vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg7cp0"><rect x="28" y="28" width="550.7" height="44"/></clipPath><clipPath id="svgimg7ov1"><rect x="28" y="28" width="550.7" height="44" rx="0"/></clipPath><clipPath id="svgimg7cp2"><rect x="39" y="39" width="22" height="22"/></clipPath><clipPath id="svgimg7cp4"><rect x="80" y="28" width="189.8" height="44"/></clipPath><clipPath id="svgimg7ov5"><rect x="80" y="28" width="189.8" height="44" rx="0"/></clipPath><clipPath id="svgimg7cp6"><rect x="88" y="40" width="173.8" height="20"/></clipPath><clipPath id="svgimg7ct7"><rect x="88" y="40" width="173.8" height="20"/></clipPath><clipPath id="svgimg7ct8"><rect x="586.7" y="34" width="65.3" height="32"/></clipPath><clipPath id="svgimg7cp9"><rect x="20" y="80" width="640" height="18"/></clipPath><clipPath id="svgimg7ct10"><rect x="20" y="80" width="640" height="18"/></clipPath></defs><g clip-path="url(#svgimg7cp0)"><g clip-path="url(#svgimg7ov1)"><rect x="28" y="28" width="44" height="44" rx="22" fill="rgb(235,245,255)"/><rect x="28.5" y="28.5" width="43" height="43" rx="21.5" fill="none" stroke="rgb(235,245,255)" stroke-width="1"/><g clip-path="url(#svgimg7cp2)"><g color="rgb(30, 110, 244)"><clipPath id="svgimg7svgic3"><rect x="39" y="39" width="22" height="22"/></clipPath><g clip-path="url(#svgimg7svgic3)"><g transform="translate(39 39)scale(.91667)"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2 2 0 0 1 1.7.7l3.6 3.6A2 2 0 0 1 20 8v12a2 2 0 0 1-2 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M14 2v5a1 1 0 0 0 1 1h5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M10 9H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M16 13H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M16 17H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(30, 110, 244)" 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(#svgimg7cp4)"><g clip-path="url(#svgimg7ov5)"><g clip-path="url(#svgimg7cp6)"><g clip-path="url(#svgimg7ct7)"><text x="88" y="57" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(29,29,31)">Northstar migration</text></g></g></g></g></g></g><rect x="586.7" y="34" width="65.3" height="32" rx="16" fill="rgb(255,255,255)"/><rect x="587.5" y="34.5" width="64" height="31" rx="15.5" fill="none" stroke="rgb(209,209,214)" stroke-width="1"/><text x="599.66" y="56" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Open</text><g clip-path="url(#svgimg7cp9)"><g clip-path="url(#svgimg7ct10)"><text x="88" y="95" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(110,110,115)">In review · updated today</text></g></g></g></g></g></g><text x="16" y="202" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Icon and action, no summary</text><g clip-path="url(#cp1)"><g clip-path="url(#irc9)"><clipPath id="svgimg10vclip"><rect x="16" y="212" width="720" height="112"/></clipPath><g clip-path="url(#svgimg10vclip)"><g transform="translate(16 212)"><defs><clipPath id="svgimg10cp0"><rect x="28" y="28" width="551.7" height="44"/></clipPath><clipPath id="svgimg10ov1"><rect x="28" y="28" width="551.7" height="44" rx="0"/></clipPath><clipPath id="svgimg10cp2"><rect x="39" y="39" width="22" height="22"/></clipPath><clipPath id="svgimg10cp4"><rect x="80" y="28" width="154.5" height="44"/></clipPath><clipPath id="svgimg10ov5"><rect x="80" y="28" width="154.5" height="44" rx="0"/></clipPath><clipPath id="svgimg10cp6"><rect x="88" y="40" width="138.5" height="20"/></clipPath><clipPath id="svgimg10ct7"><rect x="88" y="40" width="138.5" height="20"/></clipPath><clipPath id="svgimg10ct8"><rect x="587.7" y="34" width="64.3" height="32"/></clipPath></defs><g clip-path="url(#svgimg10cp0)"><g clip-path="url(#svgimg10ov1)"><rect x="28" y="28" width="44" height="44" rx="22" fill="rgb(235,245,255)"/><rect x="28.5" y="28.5" width="43" height="43" rx="21.5" fill="none" stroke="rgb(235,245,255)" stroke-width="1"/><g clip-path="url(#svgimg10cp2)"><g color="rgb(30, 110, 244)"><clipPath id="svgimg10svgic3"><rect x="39" y="39" width="22" height="22"/></clipPath><g clip-path="url(#svgimg10svgic3)"><g transform="translate(39 39)scale(.91667)"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.7-.9l-.8-1.2A2 2 0 0 0 7.9 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(30, 110, 244)" 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(#svgimg10cp4)"><g clip-path="url(#svgimg10ov5)"><g clip-path="url(#svgimg10cp6)"><g clip-path="url(#svgimg10ct7)"><text x="88" y="57" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(29,29,31)">Package details</text></g></g></g></g></g></g><rect x="587.7" y="34" width="64.3" height="32" rx="16" fill="rgb(255,255,255)"/><rect x="588.5" y="34.5" width="63" height="31" rx="15.5" fill="none" stroke="rgb(209,209,214)" stroke-width="1"/><text x="600.69" y="56" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Done</text></g></g></g></g><text x="16" y="352" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">No icon, summary and action</text><g clip-path="url(#cp2)"><g clip-path="url(#irc12)"><clipPath id="svgimg13vclip"><rect x="16" y="362" width="720" height="136"/></clipPath><g clip-path="url(#svgimg13vclip)"><g transform="translate(16 362)"><defs><clipPath id="svgimg13cp0"><rect x="28" y="28" width="557.5" height="44"/></clipPath><clipPath id="svgimg13ov1"><rect x="28" y="28" width="557.5" height="44" rx="0"/></clipPath><clipPath id="svgimg13cp2"><rect x="28" y="28" width="191.4" height="44"/></clipPath><clipPath id="svgimg13ov3"><rect x="28" y="28" width="191.4" height="44" rx="0"/></clipPath><clipPath id="svgimg13cp4"><rect x="36" y="40" width="175.4" height="20"/></clipPath><clipPath id="svgimg13ct5"><rect x="36" y="40" width="175.4" height="20"/></clipPath><clipPath id="svgimg13ct6"><rect x="593.5" y="34" width="58.5" height="32"/></clipPath><clipPath id="svgimg13cp7"><rect x="20" y="80" width="640" height="18"/></clipPath><clipPath id="svgimg13ct8"><rect x="20" y="80" width="640" height="18"/></clipPath></defs><g clip-path="url(#svgimg13cp0)"><g clip-path="url(#svgimg13ov1)"><g clip-path="url(#svgimg13cp2)"><g clip-path="url(#svgimg13ov3)"><g clip-path="url(#svgimg13cp4)"><g clip-path="url(#svgimg13ct5)"><text x="36" y="57" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(29,29,31)">Workspace settings</text></g></g></g></g></g></g><rect x="593.5" y="34" width="58.5" height="32" rx="16" fill="rgb(255,255,255)"/><rect x="594.5" y="34.5" width="57" height="31" rx="15.5" fill="none" stroke="rgb(209,209,214)" stroke-width="1"/><text x="606.53" y="56" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">New</text><g clip-path="url(#svgimg13cp7)"><g clip-path="url(#svgimg13ct8)"><text x="36" y="95" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(110,110,115)">Manage members, billing, and integrations.</text></g></g></g></g></g></g><text x="16" y="526" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Title only</text><g clip-path="url(#cp3)"><g clip-path="url(#irc15)"><clipPath id="svgimg16vclip"><rect x="16" y="536" width="720" height="104"/></clipPath><g clip-path="url(#svgimg16vclip)"><g transform="translate(16 536)"><defs><clipPath id="svgimg16cp0"><rect x="28" y="28" width="616" height="44"/></clipPath><clipPath id="svgimg16ov1"><rect x="28" y="28" width="616" height="44" rx="0"/></clipPath><clipPath id="svgimg16cp2"><rect x="28" y="28" width="146.9" height="44"/></clipPath><clipPath id="svgimg16ov3"><rect x="28" y="28" width="146.9" height="44" rx="0"/></clipPath><clipPath id="svgimg16cp4"><rect x="36" y="40" width="130.9" height="20"/></clipPath><clipPath id="svgimg16ct5"><rect x="36" y="40" width="130.9" height="20"/></clipPath></defs><g clip-path="url(#svgimg16cp0)"><g clip-path="url(#svgimg16ov1)"><g clip-path="url(#svgimg16cp2)"><g clip-path="url(#svgimg16ov3)"><g clip-path="url(#svgimg16cp4)"><g clip-path="url(#svgimg16ct5)"><text x="36" y="57" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(29,29,31)">Recent activity</text></g></g></g></g></g></g></g></g></g></g><text x="16" y="668" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Page heading (h1) with action</text><g clip-path="url(#cp4)"><g clip-path="url(#irc18)"><clipPath id="svgimg19vclip"><rect x="16" y="678" width="720" height="112"/></clipPath><g clip-path="url(#svgimg19vclip)"><g transform="translate(16 678)"><defs><clipPath id="svgimg19cp0"><rect x="28" y="28" width="500.7" height="44"/></clipPath><clipPath id="svgimg19ov1"><rect x="28" y="28" width="500.7" height="44" rx="0"/></clipPath><clipPath id="svgimg19cp2"><rect x="28" y="28" width="144.6" height="44"/></clipPath><clipPath id="svgimg19ov3"><rect x="28" y="28" width="144.6" height="44" rx="0"/></clipPath><clipPath id="svgimg19cp4"><rect x="36" y="40" width="128.6" height="20"/></clipPath><clipPath id="svgimg19ct5"><rect x="36" y="40" width="128.6" height="20"/></clipPath><clipPath id="svgimg19ct6"><rect x="536.7" y="34" width="115.3" height="32"/></clipPath></defs><g clip-path="url(#svgimg19cp0)"><g clip-path="url(#svgimg19ov1)"><g clip-path="url(#svgimg19cp2)"><g clip-path="url(#svgimg19ov3)"><g clip-path="url(#svgimg19cp4)"><g clip-path="url(#svgimg19ct5)"><text x="36" y="57" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(29,29,31)">UI foundations</text></g></g></g></g></g></g><rect x="536.7" y="34" width="115.3" height="32" rx="16" fill="rgb(255,255,255)"/><rect x="537.5" y="34.5" width="114" height="31" rx="15.5" fill="none" stroke="rgb(209,209,214)" stroke-width="1"/><text x="549.7" y="56" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">New pattern</text></g></g></g></g></svg>