@ogds/elements 1.0.0-alpha.6

package/src/components/usa-header/index.ts

@@ -0,0 +1,50 @@
+import { html } from "lit";
+import { OgdsElement } from "../../core/OgdsElement";
+import { defineCustomElement } from "../../utils";
+
+import styles from "./usa-header.css";
+
+export class UsaHeader extends OgdsElement {
+  constructor() {
+    super();
+  }
+
+  static styles = [styles];
+
+  render() {
+    return html`
+      <div class="header__logo">LOGO</div>
+      <nav aria-label="Primary navigation">
+        <ul>
+          <li>
+            <a href="#">A link</a>
+          </li>
+          <li>
+            <button popovertarget="primary-nav-1">
+              First item with dropdown
+            </button>
+            <ul popover id="primary-nav-1">
+              <li><a href="#">Subnav 1</a></li>
+              <li><a href="#">Subnav 2</a></li>
+              <li><a href="#">Subnav 3</a></li>
+              <li><a href="#">Subnav 4</a></li>
+            </ul>
+          </li>
+          <li>
+            <button popovertarget="primary-nav-2">
+              Second item with dropdown
+            </button>
+            <ul popover id="primary-nav-2">
+              <li><a href="#">Second Subnav 1</a></li>
+              <li><a href="#">Subnav 2</a></li>
+              <li><a href="#">Subnav 3</a></li>
+              <li><a href="#">Subnav 4</a></li>
+            </ul>
+          </li>
+        </ul>
+      </nav>
+    `;
+  }
+}
+
+defineCustomElement("usa-header", UsaHeader);

package/src/components/usa-header/usa-header.css

@@ -0,0 +1 @@
+/* Hi */

package/src/components/usa-link/index.ts

@@ -0,0 +1,66 @@
+import { LitElement, html } from "lit";
+import styles from "./usa-link.css";
+import { defineCustomElement } from "../../utils";
+
+/**
+ * @summary The usa-link component.
+ *
+ * @slot - This element has a slot
+ *
+ * @attribute {String} href - The url for the link
+ *
+ * @cssprop --theme-link-color - Sets the link color
+ * @cssprop --theme-link-visited-color - Sets the color for visited links
+ * @cssprop --theme-link-hover-color - Sets the hover state link color
+ * @cssprop --theme-link-active-color - Sets the active state link color
+ *
+ * @tagname usa-link
+ */
+export class UsaLink extends LitElement {
+  static styles = [styles];
+
+  static properties = {
+    href: { type: String },
+  };
+
+  declare href?: string;
+  private slottedChildren?: HTMLAnchorElement;
+
+  constructor() {
+    super();
+  }
+
+  private hasLinkChild(): boolean {
+    const childLink = this.querySelector("a");
+    if (!childLink) return false;
+
+    if (childLink instanceof HTMLAnchorElement) {
+      this.href = childLink.href;
+      this.slottedChildren = childLink;
+      this.shadowRoot?.appendChild(this.slottedChildren);
+      return true;
+    }
+
+    return false;
+  }
+
+  private templateWithChildren() {
+    return html`<a class="usa-link" href="${this.href ?? ""}"
+      >${this.slottedChildren}</a
+    >`;
+  }
+
+  private templateWithSlots() {
+    return html`<a class="usa-link" href="${this.href ?? ""}"
+      ><slot></slot
+    ></a>`;
+  }
+
+  render() {
+    return this.hasLinkChild()
+      ? this.templateWithChildren()
+      : this.templateWithSlots();
+  }
+}
+
+defineCustomElement("usa-link", UsaLink);

package/src/components/usa-link/usa-link.css

@@ -0,0 +1,24 @@
+:host {
+  a {
+    color: var(--theme-link-color, #005ea2);
+    text-decoration: underline;
+  }
+
+  a:visited {
+    color: var(--theme-link-visited-color, #54278f);
+  }
+
+  a:hover {
+    color: var(--theme-link-hover-color, #1a4480);
+  }
+
+  a:active {
+    color: var(--theme-link-active-color, #162e51);
+  }
+
+  a:focus {
+    outline: var(--theme-focus-width, 0.25rem) var(--theme-focus-style, solid)
+      var(--theme-focus-color, #2491ff);
+    outline-offset: var(--theme-focus-offset, 0);
+  }
+}

package/src/components/usa-link/usa-link.spec.ts

@@ -0,0 +1,50 @@
+import { beforeEach, describe, expect, it } from "vitest";
+
+import "./index.ts";
+
+function getInsideLink(): HTMLAnchorElement {
+  const link = document.body
+    .querySelector("usa-link")
+    ?.shadowRoot?.querySelector("a");
+
+  if (!link) {
+    throw new Error("Could not find inner <a> inside <usa-link>");
+  }
+
+  return link as HTMLAnchorElement;
+}
+
+describe("usa-link component", async () => {
+  beforeEach(async () => {
+    document.body.innerHTML = `<usa-link href="http://designsystem.digital.gov">It's dangerous to go alone. Here, take this.</usa-link>`;
+  });
+
+  it("should show href props", () => {
+    expect(getInsideLink().getAttribute("href")).toContain(".gov");
+  });
+
+  it("should show slotted children", () => {
+    const slot = document.body
+      .querySelector("usa-link")
+      ?.shadowRoot?.querySelector("slot");
+
+    expect(
+      slot?.assignedNodes({ flatten: true })[0].textContent ?? "",
+    ).toContain("dangerous");
+  });
+});
+
+describe("progressively enhanced usa-link component", async () => {
+  beforeEach(async () => {
+    document.body.innerHTML = `<usa-link><a href="http://designsystem.digital.gov">It's dangerous to go alone. Here, take this.</a></usa-link>`;
+  });
+
+  it("should show href props", () => {
+    getInsideLink();
+    expect(getInsideLink().getAttribute("href")).toContain(".gov");
+  });
+
+  it("should render link with component markup", () => {
+    expect(getInsideLink().className).toContain("usa-link");
+  });
+});

package/src/core/colors.css

@@ -0,0 +1,8 @@
+@import url("/build/css/colors.css");
+
+:root {
+  --usa-color-base-lightest: var(--usa-color-gray-5);
+
+  --theme-link-color: var(--usa-color-blue-vivid-60);
+  --theme-link-hover-color: var(--usa-color-blue-warm-vivid-70);
+}

package/src/core/fonts.css

@@ -0,0 +1,213 @@
+/* ==========================================================================
+   USWDS Fonts & theme settings
+   ========================================================================== */
+
+/*
+   Theme settings
+   ========================================================================== */
+:root {
+  --font-stack-source-sans-pro:
+    "Source Sans Pro Web", "Helvetica Neue", "Helvetica", "Roboto", "Arial",
+    sans-serif;
+  --font-stack-public-sans:
+    "Public Sans Web", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol";
+
+  --usa-font-sans: var(--font-stack-source-sans-pro);
+  --usa-font-ui: var(--usa-font-sans);
+}
+
+/*
+   Source Sans Pro Web
+   ========================================================================== */
+@font-face {
+  font-family: "Source Sans Pro Web";
+  font-style: normal;
+  font-weight: 300;
+  font-display: fallback;
+  src: url("@uswds/uswds/fonts/source-sans-pro/sourcesanspro-light-webfont.woff2")
+    format("woff2");
+}
+
+@font-face {
+  font-family: "Source Sans Pro Web";
+  font-style: normal;
+  font-weight: 400;
+  font-display: fallback;
+  src: url("@uswds/uswds/fonts/source-sans-pro/sourcesanspro-regular-webfont.woff2")
+    format("woff2");
+}
+@font-face {
+  font-family: "Source Sans Pro Web";
+  font-style: normal;
+  font-weight: 700;
+  font-display: fallback;
+  src: url("@uswds/uswds/fonts/source-sans-pro/sourcesanspro-bold-webfont.woff2")
+    format("woff2");
+}
+@font-face {
+  font-family: "Source Sans Pro Web";
+  font-style: italic;
+  font-weight: 300;
+  font-display: fallback;
+  src: url("@uswds/uswds/fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff2")
+    format("woff2");
+}
+@font-face {
+  font-family: "Source Sans Pro Web";
+  font-style: italic;
+  font-weight: 400;
+  font-display: fallback;
+  src: url("@uswds/uswds/fonts/source-sans-pro/sourcesanspro-italic-webfont.woff2")
+    format("woff2");
+}
+@font-face {
+  font-family: "Source Sans Pro Web";
+  font-style: italic;
+  font-weight: 700;
+  font-display: fallback;
+  src: url("@uswds/uswds/fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff2")
+    format("woff2");
+}
+
+@font-face {
+  font-family: "Source Sans Pro Web";
+  font-style: normal;
+  font-weight: 300;
+  font-display: fallback;
+  src: url("@uswds/uswds/fonts/source-sans-pro/sourcesanspro-light-webfont.woff2")
+    format("woff2");
+}
+
+@font-face {
+  font-family: "Source Sans Pro Web";
+  font-style: normal;
+  font-weight: 400;
+  font-display: fallback;
+  src: url("@uswds/uswds/fonts/source-sans-pro/sourcesanspro-regular-webfont.woff2")
+    format("woff2");
+}
+@font-face {
+  font-family: "Source Sans Pro Web";
+  font-style: normal;
+  font-weight: 700;
+  font-display: fallback;
+  src: url("@uswds/uswds/fonts/source-sans-pro/sourcesanspro-bold-webfont.woff2")
+    format("woff2");
+}
+@font-face {
+  font-family: "Source Sans Pro Web";
+  font-style: italic;
+  font-weight: 300;
+  font-display: fallback;
+  src: url("@uswds/uswds/fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff2")
+    format("woff2");
+}
+@font-face {
+  font-family: "Source Sans Pro Web";
+  font-style: italic;
+  font-weight: 400;
+  font-display: fallback;
+  src: url("@uswds/uswds/fonts/source-sans-pro/sourcesanspro-italic-webfont.woff2")
+    format("woff2");
+}
+@font-face {
+  font-family: "Source Sans Pro Web";
+  font-style: italic;
+  font-weight: 700;
+  font-display: fallback;
+  src: url("@uswds/uswds/fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff2")
+    format("woff2");
+}
+
+/*
+   Public Sans
+   ========================================================================== */
+@font-face {
+  font-family: "Public Sans Web";
+  font-style: normal;
+  font-weight: 300;
+  src: url("@uswds/uswds/fonts/public-sans/PublicSans-Light.woff2")
+    format("woff2");
+}
+
+@font-face {
+  font-family: "Public Sans Web";
+  font-style: normal;
+  font-weight: 400;
+  src: url("@uswds/uswds/fonts/public-sans/PublicSans-Regular.woff2")
+    format("woff2");
+}
+@font-face {
+  font-family: "Public Sans Web";
+  font-style: normal;
+  font-weight: 700;
+  src: url("@uswds/uswds/fonts/public-sans/PublicSans-Bold.woff2")
+    format("woff2");
+}
+@font-face {
+  font-family: "Public Sans Web";
+  font-style: italic;
+  font-weight: 300;
+  src: url("@uswds/uswds/fonts/public-sans/PublicSans-LightItalic.woff2")
+    format("woff2");
+}
+@font-face {
+  font-family: "Public Sans Web";
+  font-style: italic;
+  font-weight: 400;
+  src: url("@uswds/uswds/fonts/public-sans/PublicSans-Italic.woff2")
+    format("woff2");
+}
+@font-face {
+  font-family: "Public Sans Web";
+  font-style: italic;
+  font-weight: 700;
+  src: url("@uswds/uswds/fonts/public-sans/PublicSans-BoldItalic.woff2")
+    format("woff2");
+}
+
+@font-face {
+  font-family: "Public Sans Web";
+  font-style: normal;
+  font-weight: 300;
+  src: url("@uswds/uswds/fonts/public-sans/PublicSans-Light.woff2")
+    format("woff2");
+}
+
+@font-face {
+  font-family: "Public Sans Web";
+  font-style: normal;
+  font-weight: 400;
+  src: url("@uswds/uswds/fonts/public-sans/PublicSans-Regular.woff2")
+    format("woff2");
+}
+@font-face {
+  font-family: "Public Sans Web";
+  font-style: normal;
+  font-weight: 700;
+  src: url("@uswds/uswds/fonts/public-sans/PublicSans-Bold.woff2")
+    format("woff2");
+}
+@font-face {
+  font-family: "Public Sans Web";
+  font-style: italic;
+  font-weight: 300;
+  src: url("@uswds/uswds/fonts/public-sans/PublicSans-LightItalic.woff2")
+    format("woff2");
+}
+@font-face {
+  font-family: "Public Sans Web";
+  font-style: italic;
+  font-weight: 400;
+  src: url("@uswds/uswds/fonts/public-sans/PublicSans-Italic.woff2")
+    format("woff2");
+}
+@font-face {
+  font-family: "Public Sans Web";
+  font-style: italic;
+  font-weight: 700;
+  src: url("@uswds/uswds/fonts/public-sans/PublicSans-BoldItalic.woff2")
+    format("woff2");
+}

package/src/core/index.css

@@ -0,0 +1,2 @@
+@import "./colors.css" layer;
+@import "./fonts.css" layer;

package/src/core/token-styles.ts

@@ -0,0 +1,26 @@
+import colorTokens from "@ogds/tokens/styles/css/colors.css";
+import spacingTokens from "@ogds/tokens/styles/css/spacing.css";
+import typographyTokens from "@ogds/tokens/styles/css/typography.css";
+import themeColorTokens from "@ogds/tokens/styles/css/theme-color.css";
+import themeSpacingTokens from "@ogds/tokens/styles/css/theme-spacing.css";
+import themeTypographyTokens from "@ogds/tokens/styles/css/theme-typography.css";
+
+const sheet = new CSSStyleSheet();
+sheet.replaceSync(
+  [
+    colorTokens,
+    spacingTokens,
+    typographyTokens,
+    themeColorTokens,
+    themeSpacingTokens,
+    themeTypographyTokens,
+  ]
+    .map((s) => s.cssText)
+    .join("\n"),
+);
+
+export function adoptTokenStyles() {
+  if (!document.adoptedStyleSheets.includes(sheet)) {
+    document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
+  }
+}

package/src/declaration.d.ts

@@ -0,0 +1,75 @@
+/// <reference types="vite/client" />
+
+import type { CSSResultGroup } from "lit";
+
+// Asset imports
+declare module "*.svg" {
+  const content: string;
+  export default content;
+}
+
+declare module "*.scss?inline" {
+  const content: string;
+  export default content;
+}
+
+declare module "*.svg?inline" {
+  const content: string;
+  export default content;
+}
+
+declare module "*.png" {
+  const content: string;
+  export default content;
+}
+
+declare module "*.jpg" {
+  const content: string;
+  export default content;
+}
+
+declare module "*.jpeg" {
+  const content: string;
+  export default content;
+}
+
+// USWDS specific module declarations
+declare module "@uswds/uswds/img/us_flag_small.png" {
+  const content: string;
+  export default content;
+}
+
+declare module "@uswds/uswds/img/icon-dot-gov.svg" {
+  const content: string;
+  export default content;
+}
+
+declare module "@uswds/uswds/img/icon-https.svg" {
+  const content: string;
+  export default content;
+}
+
+declare module "@uswds/uswds/img/usa-icons/close.svg" {
+  const content: string;
+  export default content;
+}
+
+declare module "@uswds/uswds/img/usa-icons/expand_more.svg" {
+  const content: string;
+  export default content;
+}
+
+declare module "@uswds/uswds/img/usa-icons/expand_less.svg" {
+  const content: string;
+  export default content;
+}
+
+declare module "@uswds/uswds/img/usa-icons/lock.svg" {
+  const content: string;
+  export default content;
+}
+
+declare module "@uswds/uswds/scss/stylesheets/packages/_usa-banner.scss?inline" {
+  const content: string;
+  export default content;
+}

package/src/shared/icons/accessibility_new.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20.5 6c-2.61.7-5.67 1-8.5 1s-5.89-.3-8.5-1L3 8c1.86.5 4 .83 6 1v13h2v-6h2v6h2V9c2-.17 4.14-.5 6-1l-.5-2zM12 6c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z"/></svg>

package/src/shared/icons/accessible_forward.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="17" cy="4.54" r="2"/><path d="M14 17h-2c0 1.65-1.35 3-3 3s-3-1.35-3-3 1.35-3 3-3v-2c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5zm3-3.5h-1.86l1.67-3.67C17.42 8.5 16.44 7 14.96 7h-5.2c-.81 0-1.54.47-1.87 1.2L7.22 10l1.92.53L9.79 9H12l-1.83 4.1c-.6 1.33.39 2.9 1.85 2.9H17v5h2v-5.5c0-1.1-.9-2-2-2z"/></svg>

package/src/shared/icons/account_balance.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M4 10h3v7H4zm6.5 0h3v7h-3zM2 19h20v3H2zm15-9h3v7h-3zm-5-9L2 6v2h20V6z"/></svg>

package/src/shared/icons/account_box.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 3c1.93 0 3.5 1.57 3.5 3.5S13.93 13 12 13s-3.5-1.57-3.5-3.5S10.07 6 12 6zm7 13H5v-.23c0-.62.28-1.2.76-1.58C7.47 15.82 9.64 15 12 15s4.53.82 6.24 2.19c.48.38.76.97.76 1.58V19z"/></svg>

package/src/shared/icons/account_circle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 4c1.93 0 3.5 1.57 3.5 3.5S13.93 13 12 13s-3.5-1.57-3.5-3.5S10.07 6 12 6zm0 14c-2.03 0-4.43-.82-6.14-2.88a9.947 9.947 0 0 1 12.28 0C16.43 19.18 14.03 20 12 20z"/></svg>

package/src/shared/icons/add.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>

package/src/shared/icons/add_circle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/></svg>

package/src/shared/icons/add_circle_outline.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>

package/src/shared/icons/alarm.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="m22 5.72-4.6-3.86-1.29 1.53 4.6 3.86L22 5.72zM7.88 3.39 6.6 1.86 2 5.71l1.29 1.53 4.59-3.85zM12.5 8H11v6l4.75 2.85.75-1.23-4-2.37V8zM12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9a9 9 0 0 0 0-18zm0 16c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"/></svg>

package/src/shared/icons/alternate_email.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10h5v-2h-5c-4.34 0-8-3.66-8-8s3.66-8 8-8 8 3.66 8 8v1.43c0 .79-.71 1.57-1.5 1.57s-1.5-.78-1.5-1.57V12c0-2.76-2.24-5-5-5s-5 2.24-5 5 2.24 5 5 5c1.38 0 2.64-.56 3.54-1.47.65.89 1.77 1.47 2.96 1.47 1.97 0 3.5-1.6 3.5-3.57V12c0-5.52-4.48-10-10-10zm0 13c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"/></svg>

package/src/shared/icons/announcement.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 9h-2V5h2v6zm0 4h-2v-2h2v2z"/></svg>

package/src/shared/icons/api.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="m14 12-2 2-2-2 2-2 2 2zm-2-6 2.12 2.12 2.5-2.5L12 1 7.38 5.62l2.5 2.5L12 6zm-6 6 2.12-2.12-2.5-2.5L1 12l4.62 4.62 2.5-2.5L6 12zm12 0-2.12 2.12 2.5 2.5L23 12l-4.62-4.62-2.5 2.5L18 12zm-6 6-2.12-2.12-2.5 2.5L12 23l4.62-4.62-2.5-2.5L12 18z"/></svg>

package/src/shared/icons/arrow_back.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>

package/src/shared/icons/arrow_downward.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="m20 12-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"/></svg>

package/src/shared/icons/arrow_drop_down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="m7 10 5 5 5-5z"/></svg>

package/src/shared/icons/arrow_drop_up.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="m7 14 5-5 5 5z"/></svg>

package/src/shared/icons/arrow_forward.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/></svg>

package/src/shared/icons/arrow_upward.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="m4 12 1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/></svg>

package/src/shared/icons/assessment.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z"/></svg>

package/src/shared/icons/attach_file.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5a2.5 2.5 0 0 1 5 0v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5a2.5 2.5 0 0 0 5 0V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6h-1.5z"/></svg>

package/src/shared/icons/attach_money.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c1.95-.37 3.5-1.5 3.5-3.55 0-2.84-2.43-3.81-4.7-4.4z"/></svg>

package/src/shared/icons/autorenew.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 6v3l4-4-4-4v3c-4.42 0-8 3.58-8 8 0 1.57.46 3.03 1.24 4.26L6.7 14.8A5.87 5.87 0 0 1 6 12c0-3.31 2.69-6 6-6zm6.76 1.74L17.3 9.2c.44.84.7 1.79.7 2.8 0 3.31-2.69 6-6 6v-3l-4 4 4 4v-3c4.42 0 8-3.58 8-8 0-1.57-.46-3.03-1.24-4.26z"/></svg>

package/src/shared/icons/backpack.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20 8v12c0 1.1-.9 2-2 2H6c-1.1 0-2-.9-2-2V8c0-1.86 1.28-3.41 3-3.86V2h3v2h4V2h3v2.14c1.72.45 3 2 3 3.86zM6 12v2h10v2h2v-4H6z"/></svg>

package/src/shared/icons/bathtub.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="7" cy="7" r="2"/><path d="M20 13V4.83C20 3.27 18.73 2 17.17 2c-.75 0-1.47.3-2 .83l-1.25 1.25c-.16-.05-.33-.08-.51-.08-.4 0-.77.12-1.08.32l2.76 2.76c.2-.31.32-.68.32-1.08 0-.18-.03-.34-.07-.51l1.25-1.25a.828.828 0 0 1 1.41.59V13h-6.85c-.3-.21-.57-.45-.82-.72l-1.4-1.55c-.19-.21-.43-.38-.69-.5A2.251 2.251 0 0 0 5 12.25V13H2v6c0 1.1.9 2 2 2 0 .55.45 1 1 1h14c.55 0 1-.45 1-1 1.1 0 2-.9 2-2v-6h-2z"/></svg>

package/src/shared/icons/bedding.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M17 10.13a33.86 33.86 0 0 1-10 0 1.92 1.92 0 0 1-1.51-1.46 10.42 10.42 0 0 1 0-4.84 1.92 1.92 0 0 1 1.57-1.46 33.86 33.86 0 0 1 10 0 1.9 1.9 0 0 1 1.56 1.46 10.16 10.16 0 0 1 0 4.84A1.9 1.9 0 0 1 17 10.13Zm4 12.12H7a5.25 5.25 0 0 1 0-10.5h10a3.25 3.25 0 0 1 0 6.5H7a1.25 1.25 0 0 1 0-2.5h10a.75.75 0 0 0 0-1.5H7a2.75 2.75 0 0 0 0 5.5h14a1.25 1.25 0 0 1 0 2.5Z"/></svg>

package/src/shared/icons/bookmark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z"/></svg>

package/src/shared/icons/bug_report.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20 8h-2.81a5.985 5.985 0 0 0-1.82-1.96L17 4.41 15.59 3l-2.17 2.17C12.96 5.06 12.49 5 12 5c-.49 0-.96.06-1.41.17L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8zm-6 8h-4v-2h4v2zm0-4h-4v-2h4v2z"/></svg>

package/src/shared/icons/build.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="m22.7 19-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z"/></svg>

package/src/shared/icons/calendar_today.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"/></svg>

package/src/shared/icons/campaign.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M18 11v2h4v-2h-4zm-2 6.61c.96.71 2.21 1.65 3.2 2.39.4-.53.8-1.07 1.2-1.6-.99-.74-2.24-1.68-3.2-2.4-.4.54-.8 1.08-1.2 1.61zM20.4 5.6c-.4-.53-.8-1.07-1.2-1.6-.99.74-2.24 1.68-3.2 2.4.4.53.8 1.07 1.2 1.6.96-.72 2.21-1.65 3.2-2.4zM4 9c-1.1 0-2 .9-2 2v2c0 1.1.9 2 2 2h1v4h2v-4h1l5 3V6L8 9H4zm11.5 3c0-1.33-.58-2.53-1.5-3.35v6.69c.92-.81 1.5-2.01 1.5-3.34z"/></svg>

package/src/shared/icons/camping.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill-rule="evenodd" d="m12 5 8 13h2v2H2v-2h2l8-13zm.05 8-2.69 5h5.38l-2.69-5zM5.5 3l-.018.024A2.5 2.5 0 0 0 7.498 7 2.5 2.5 0 1 1 5.5 3z"/></svg>

package/src/shared/icons/cancel.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/></svg>

package/src/shared/icons/chat.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 9h12v2H6V9zm8 5H6v-2h8v2zm4-6H6V6h12v2z"/></svg>

package/src/shared/icons/check.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>

package/src/shared/icons/check_box_outline_blank.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/></svg>