solid-panes 4.2.6 → 4.4.0

package/dist/profileUtils/ownerProfile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ownerProfile.d.ts","sourceRoot":"","sources":["../../src/profileUtils/ownerProfile.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,SAAS,EAAO,MAAM,QAAQ,CAAA;AAKhE,wBAAsB,kBAAkB,CACtC,GAAG,EAAE,SAAS,EACd,KAAK,EAAE,cAAc,EACrB,OAAO,EAAE,OAAO,GACf,OAAO,CAAC,SAAS,CAAC,CA0CpB;AAED,wBAAsB,iBAAiB,CACrC,GAAG,EAAE,SAAS,EACd,KAAK,EAAE,cAAc,EACrB,OAAO,EAAE,OAAO,GACf,OAAO,CAAC,MAAM,CAAC,CAyBjB;AAED,wBAAgB,OAAO,CAAE,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,SAAS,GAAG,MAAM,CAMhF"}

package/dist/profileUtils/ownerProfile.js

@@ -0,0 +1,84 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getName = getName;
+exports.getNameOfPodOwner = getNameOfPodOwner;
+exports.loadProfileFromURI = loadProfileFromURI;
+var _rdflib = require("rdflib");
+var _solidUi = require("solid-ui");
+/*
+* Utility functions to help load the profile
+* especially when I am not logged in
+*/
+
+const DEFAULT_PROFILE_PATH = 'profile/card#me';
+async function loadProfileFromURI(uri, store, fetcher) {
+  const pod = uri.site().uri;
+  // TODO: This is a hack - we cannot assume that the profile is at this document, but we will live with it for now
+  const webId = (0, _rdflib.sym)(`${pod}${DEFAULT_PROFILE_PATH}`);
+  try {
+    await fetcher.load(webId);
+    return webId;
+  } catch (err) {
+    // continue
+  }
+
+  // we try a prefixed pod structure
+  try {
+    const uriUrl = new URL(uri.uri);
+    const pathSegments = uriUrl.pathname.split('/').filter(Boolean);
+    if (pathSegments.length > 0) {
+      const derivedPod = `${uriUrl.origin}/${pathSegments[0]}/`;
+      const derivedWebId = (0, _rdflib.sym)(`${derivedPod}${DEFAULT_PROFILE_PATH}`);
+      await fetcher.load(derivedWebId);
+      return derivedWebId;
+    }
+  } catch (err) {
+    // continue
+  }
+  try {
+    await fetcher.load(uri);
+  } catch (err) {
+    return uri;
+  }
+  const primaryTopic = store.any(uri, _solidUi.ns.foaf('primaryTopic'), null, uri.doc());
+  if (primaryTopic && primaryTopic.termType === 'NamedNode') {
+    try {
+      await fetcher.load(primaryTopic);
+      return primaryTopic;
+    } catch (err) {
+      return uri;
+    }
+  }
+  return uri;
+}
+async function getNameOfPodOwner(pod, store, fetcher) {
+  // TODO: This is a hack - we cannot assume that the profile is at this document, but we will live with it for now
+  const webId = (0, _rdflib.sym)(`${pod.uri}${DEFAULT_PROFILE_PATH}`);
+  try {
+    await fetcher.load(webId);
+    return getName(store, webId);
+  } catch (err) {
+    // continue
+  }
+
+  // we try a prefixed pod structure
+  try {
+    const uriUrl = new URL(pod.uri);
+    const pathSegments = uriUrl.pathname.split('/').filter(Boolean);
+    if (pathSegments.length > 0) {
+      const derivedPod = `${uriUrl.origin}/${pathSegments[0]}/`;
+      const derivedWebId = (0, _rdflib.sym)(`${derivedPod}${DEFAULT_PROFILE_PATH}`);
+      await fetcher.load(derivedWebId);
+      return getName(store, derivedWebId);
+    }
+  } catch (err) {
+    // continue
+  }
+  return '';
+}
+function getName(store, ownersProfile) {
+  return store.anyValue(ownersProfile, _solidUi.ns.vcard('fn'), null, ownersProfile.doc()) || store.anyValue(ownersProfile, _solidUi.ns.foaf('name'), null, ownersProfile.doc()) || new URL(ownersProfile.uri).host.split('.')[0];
+}

package/dist/registerPanes.js

@@ -27,7 +27,7 @@ var _dokieliPane = _interopRequireDefault(require("./dokieli/dokieliPane.js"));
 var _folderPane = _interopRequireDefault(require("folder-pane"));
 var _classInstancePane = require("./classInstancePane.js");
 var _slideshowPane = require("./slideshow/slideshowPane.js");
-var _socialPane = require("./socialPane.js");
+var _socialPane = require("./social/socialPane");
 var _humanReadablePane = _interopRequireDefault(require("./humanReadablePane.js"));
 var _dataContentPane = require("./dataContentPane.js");
 var _sourcePane = _interopRequireDefault(require("source-pane"));
@@ -57,11 +57,11 @@ function registerPanes(register) {
   const editProfileView = _profilePane.default.editor;
   if (!editProfileView) {
     console.log('@@@ editProfileView', 'profilePane is not providing an editor pane');
+  } else {
+    register(editProfileView); // Edit my profile.
   }
-  register(editProfileView); // Edit my profile.
-
   register(_trustedApplications.default); // must be registered before basicPreferences
-  register(_dashboardPane.default);
+  // register(dashboardPane)
   register(_basicPreferences.default);
   register(_issuePane.default);
   register(_contactsPane.default);

package/dist/slideshow/slideshowPane.js

@@ -62,7 +62,7 @@ const slideshowPane = exports.slideshowPane = {
         const objectURL = URL.createObjectURL(myBlob);
         img.setAttribute('src', objectURL); // w640 h480 //
       });
-      img.setAttribute('width', '100%');
+      img.style.width = '100%';
       figure.appendChild(dom.createElement('figcaption'));
     }
     const options = {

package/dist/social/editProfileDetails.d.ts

@@ -0,0 +1,19 @@
+import { LiveStore, NamedNode } from 'rdflib';
+type ProfileLinkField = {
+    key: 'homepage' | 'weblog' | 'workplaceHomepage' | 'schoolHomepage';
+    label: string;
+    placeholder: string;
+    predicate: NamedNode;
+};
+type EditProfileDetailsButtonOptions = {
+    dom: HTMLDocument;
+    store: LiveStore;
+    subject: NamedNode;
+    header: HTMLElement;
+    onSaved: () => void;
+};
+export declare const profileLinkFields: ProfileLinkField[];
+export declare function appendProfileLinks(container: HTMLElement, dom: HTMLDocument, store: LiveStore, subject: NamedNode): void;
+export declare function createEditProfileDetailsButton(options: EditProfileDetailsButtonOptions): HTMLButtonElement;
+export {};
+//# sourceMappingURL=editProfileDetails.d.ts.map

package/dist/social/editProfileDetails.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"editProfileDetails.d.ts","sourceRoot":"","sources":["../../src/social/editProfileDetails.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAW,MAAM,QAAQ,CAAA;AActD,KAAK,gBAAgB,GAAG;IACtB,GAAG,EAAE,UAAU,GAAG,QAAQ,GAAG,mBAAmB,GAAG,gBAAgB,CAAA;IACnE,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,SAAS,CAAA;CACrB,CAAA;AAID,KAAK,+BAA+B,GAAG;IACrC,GAAG,EAAE,YAAY,CAAA;IACjB,KAAK,EAAE,SAAS,CAAA;IAChB,OAAO,EAAE,SAAS,CAAA;IAClB,MAAM,EAAE,WAAW,CAAA;IACnB,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,gBAAgB,EAyB/C,CAAA;AAuFD,wBAAgB,kBAAkB,CAChC,SAAS,EAAE,WAAW,EACtB,GAAG,EAAE,YAAY,EACjB,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,SAAS,GACjB,IAAI,CA2CN;AAED,wBAAgB,8BAA8B,CAC5C,OAAO,EAAE,+BAA+B,GACvC,iBAAiB,CAiJnB"}

package/dist/social/editProfileDetails.js

@@ -0,0 +1,267 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.appendProfileLinks = appendProfileLinks;
+exports.createEditProfileDetailsButton = createEditProfileDetailsButton;
+exports.profileLinkFields = void 0;
+var _rdflib = require("rdflib");
+var _solidUi = require("solid-ui");
+var _icons = require("./icons");
+/* The following code was generated by AI Model: GPT-5.4
+   Prompt: can you create me a form to enter this data [
+ns.foaf('homepage'),
+ns.foaf('weblog'),
+ns.foaf('workplaceHomepage'),
+ns.foaf('schoolHomepage')
+] and put an edit button at the top left corner of the header
+ that when you click it pops up so you can enter this information
+ and save it to the Webid. You can look in
+ Dev2025/profile-pane/src/sections/heading/mutations to see how
+ to write this data in the profile. */
+
+const profileLinkFields = exports.profileLinkFields = [{
+  key: 'homepage',
+  label: 'Homepage',
+  placeholder: 'https://example.com',
+  predicate: _solidUi.ns.foaf('homepage')
+}, {
+  key: 'weblog',
+  label: 'Weblog',
+  placeholder: 'https://blog.example.com',
+  predicate: _solidUi.ns.foaf('weblog')
+}, {
+  key: 'workplaceHomepage',
+  label: 'Workplace Homepage',
+  placeholder: 'https://company.example.com',
+  predicate: _solidUi.ns.foaf('workplaceHomepage')
+}, {
+  key: 'schoolHomepage',
+  label: 'School Homepage',
+  placeholder: 'https://school.example.edu',
+  predicate: _solidUi.ns.foaf('schoolHomepage')
+}];
+function readProfileLinkValues(store, subject) {
+  const doc = subject.doc();
+  return profileLinkFields.reduce((result, field) => {
+    const values = store.statementsMatching(subject, field.predicate, undefined, doc).map(statement => statement.object?.value || '').filter(Boolean);
+    result[field.key] = values.join('\n');
+    return result;
+  }, {
+    homepage: '',
+    weblog: '',
+    workplaceHomepage: '',
+    schoolHomepage: ''
+  });
+}
+function normalizeUrlList(value, fieldLabel) {
+  const unique = new Set();
+  const lines = value.split('\n').map(entry => entry.trim()).filter(Boolean);
+  for (const line of lines) {
+    let parsed;
+    try {
+      parsed = new URL(line);
+    } catch {
+      throw new Error(`${fieldLabel} must contain valid absolute URLs.`);
+    }
+    if (parsed.protocol !== 'http:' && parsed.protocol !== 'https:') {
+      throw new Error(`${fieldLabel} only supports http and https URLs.`);
+    }
+    unique.add(parsed.toString());
+  }
+  return [...unique];
+}
+async function saveProfileLinkValues(store, subject, values) {
+  const updater = store.updater;
+  if (!updater || typeof updater.update !== 'function') {
+    throw new Error('This profile cannot be edited with the current store.');
+  }
+  const doc = subject.doc();
+  const deletions = [];
+  const insertions = [];
+  for (const field of profileLinkFields) {
+    const existingStatements = store.statementsMatching(subject, field.predicate, undefined, doc);
+    deletions.push(...existingStatements);
+    const nextValues = normalizeUrlList(values[field.key], field.label);
+    for (const nextValue of nextValues) {
+      insertions.push((0, _rdflib.st)(subject, field.predicate, (0, _rdflib.sym)(nextValue), doc));
+    }
+  }
+  await new Promise((resolve, reject) => {
+    updater.update(deletions, insertions, (_uri, ok, errorBody) => {
+      if (!ok) {
+        reject(new Error(errorBody || 'Unable to save profile links.'));
+        return;
+      }
+      if (typeof store.remove === 'function' && deletions.length > 0) {
+        ;
+        store.remove(deletions);
+      }
+      insertions.forEach(statement => {
+        store.add(statement.subject, statement.predicate, statement.object, statement.why);
+      });
+      resolve();
+    });
+  });
+}
+function appendProfileLinks(container, dom, store, subject) {
+  const webLinksSection = dom.createElement('section');
+  webLinksSection.className = 'social-profile-links';
+  container.appendChild(webLinksSection);
+  for (const field of profileLinkFields) {
+    const statements = store.statementsMatching(subject, field.predicate);
+    if (statements.length === 0) continue;
+    const uris = statements.map(statement => statement.object?.value || '').filter(Boolean).sort();
+    let previousUri = '';
+    for (const uri of uris) {
+      if (uri === previousUri) continue;
+      previousUri = uri;
+      let label = field.label;
+      if (uris.length > 1) {
+        const schemeIndex = uri.indexOf('//');
+        if (schemeIndex > 0) {
+          let end = uri.indexOf('/', schemeIndex + 2);
+          const dottedEnd = uri.lastIndexOf('.', end);
+          if (dottedEnd > 0) end = dottedEnd;
+          const hostLabel = uri.slice(schemeIndex + 2, end);
+          if (hostLabel) {
+            label = `${hostLabel} ${label}`;
+          }
+        }
+      }
+      const textNode = dom.createTextNode(label);
+      const anchor = dom.createElement('a');
+      anchor.appendChild(textNode);
+      anchor.setAttribute('href', uri);
+      const item = dom.createElement('div');
+      item.className = 'social-pane__link-button';
+      item.appendChild(anchor);
+      webLinksSection.appendChild(item);
+    }
+  }
+}
+function createEditProfileDetailsButton(options) {
+  const {
+    dom,
+    store,
+    subject,
+    header,
+    onSaved
+  } = options;
+  const button = dom.createElement('button');
+  button.type = 'button';
+  button.className = 'social-pane__edit-button';
+  const icon = dom.createElement('span');
+  icon.className = 'social-pane__edit-button-icon';
+  icon.innerHTML = _icons.editIcon;
+  button.appendChild(icon);
+  const label = dom.createElement('span');
+  label.className = 'social-pane__edit-button-label';
+  label.textContent = 'Edit';
+  button.appendChild(label);
+  button.setAttribute('aria-label', 'Edit profile links');
+  header.style.position = 'relative';
+  const openDialog = () => {
+    const initialValues = readProfileLinkValues(store, subject);
+    const overlay = dom.createElement('div');
+    overlay.classList.add('social-pane__dialog-backdrop', 'flex-center');
+    const dialog = dom.createElement('div');
+    dialog.classList.add('social-pane__dialog');
+    dialog.setAttribute('role', 'dialog');
+    dialog.setAttribute('aria-modal', 'true');
+    dialog.setAttribute('aria-label', 'Edit profile links');
+    overlay.appendChild(dialog);
+    const dialogHeader = dom.createElement('div');
+    dialogHeader.classList.add('social-pane__dialog-header');
+    dialog.appendChild(dialogHeader);
+    const title = dom.createElement('h2');
+    title.className = 'social-pane__dialog-title';
+    title.textContent = 'Edit profile links';
+    dialogHeader.appendChild(title);
+    const closeIconButton = dom.createElement('button');
+    closeIconButton.type = 'button';
+    closeIconButton.className = 'social-pane__dialog-close';
+    closeIconButton.setAttribute('aria-label', 'Close dialog');
+    closeIconButton.innerHTML = _icons.closeIcon;
+    dialogHeader.appendChild(closeIconButton);
+    const form = dom.createElement('form');
+    form.classList.add('social-pane__dialog-form', 'flex-column');
+    dialog.appendChild(form);
+    const errorMessage = dom.createElement('p');
+    errorMessage.className = 'social-pane__dialog-error';
+    const fields = new Map();
+    for (const field of profileLinkFields) {
+      const fieldWrapper = dom.createElement('label');
+      fieldWrapper.classList.add('social-pane__dialog-field', 'flex-column');
+      const fieldLabel = dom.createElement('span');
+      fieldLabel.className = 'social-pane__dialog-label';
+      fieldLabel.textContent = field.label;
+      fieldWrapper.appendChild(fieldLabel);
+      const input = dom.createElement('input');
+      input.classList.add('social-pane__dialog-input', 'input');
+      input.type = 'url';
+      input.placeholder = field.placeholder;
+      input.value = initialValues[field.key].split('\n')[0] || '';
+      fieldWrapper.appendChild(input);
+      fields.set(field.key, input);
+      form.appendChild(fieldWrapper);
+    }
+    form.appendChild(errorMessage);
+    const actions = dom.createElement('div');
+    actions.className = 'social-pane__dialog-actions';
+    form.appendChild(actions);
+    const closeButton = dom.createElement('button');
+    closeButton.type = 'button';
+    closeButton.className = 'social-pane__dialog-button btn-light';
+    closeButton.textContent = 'Close';
+    actions.appendChild(closeButton);
+    const saveButton = dom.createElement('button');
+    saveButton.type = 'submit';
+    saveButton.className = 'social-pane__dialog-button btn-primary';
+    saveButton.textContent = 'Save Changes';
+    actions.appendChild(saveButton);
+    const closeDialog = () => {
+      overlay.remove();
+    };
+    overlay.addEventListener('click', event => {
+      if (event.target === overlay) closeDialog();
+    });
+    closeIconButton.addEventListener('click', closeDialog);
+    closeButton.addEventListener('click', closeDialog);
+    overlay.addEventListener('keydown', event => {
+      if (event.key === 'Escape') closeDialog();
+    });
+    form.addEventListener('submit', async event => {
+      event.preventDefault();
+      errorMessage.textContent = '';
+      saveButton.disabled = true;
+      closeButton.disabled = true;
+      closeIconButton.disabled = true;
+      const nextValues = profileLinkFields.reduce((result, field) => {
+        result[field.key] = fields.get(field.key)?.value || '';
+        return result;
+      }, {
+        homepage: '',
+        weblog: '',
+        workplaceHomepage: '',
+        schoolHomepage: ''
+      });
+      try {
+        await saveProfileLinkValues(store, subject, nextValues);
+        closeDialog();
+        onSaved();
+      } catch (error) {
+        errorMessage.textContent = error instanceof Error ? error.message : 'Unable to save profile links.';
+      } finally {
+        saveButton.disabled = false;
+        closeButton.disabled = false;
+        closeIconButton.disabled = false;
+      }
+    });
+    dom.body.appendChild(overlay);
+    fields.get('homepage')?.focus();
+  };
+  button.addEventListener('click', openDialog);
+  return button;
+}

package/dist/social/icons.d.ts

@@ -0,0 +1,5 @@
+export declare const personInCircleIcon: string;
+export declare const editIcon: string;
+export declare const locationIcon: string;
+export declare const closeIcon: string;
+//# sourceMappingURL=icons.d.ts.map

package/dist/social/icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../src/social/icons.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,kBAAkB,QAa9B,CAAA;AACD,eAAO,MAAM,QAAQ,QAWpB,CAAA;AACD,eAAO,MAAM,YAAY,QAYxB,CAAA;AACD,eAAO,MAAM,SAAS,QAWrB,CAAA"}

package/dist/social/icons.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.personInCircleIcon = exports.locationIcon = exports.editIcon = exports.closeIcon = void 0;
+/* Simpliest solution for now since we are only using it for the symposium
+and then we will use icons from solid-assets */
+const html = String.raw;
+const personInCircleIcon = exports.personInCircleIcon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" 
+    width="64" 
+    height="64" 
+    viewBox="0 0 64 64" 
+    fill="none"
+    aria-hidden="true"
+    focusable="false"
+  >
+    <path d="M32.0007 58.6666C46.7282 58.6666 58.6673 46.7275 58.6673 31.9999C58.6673 17.2723 46.7282 5.33325 32.0007 5.33325C17.2731 5.33325 5.33398 17.2723 5.33398 31.9999C5.33398 46.7275 17.2731 58.6666 32.0007 58.6666Z" stroke="#CBD5E1" stroke-width="5.33333" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M32 34.6667C36.4183 34.6667 40 31.085 40 26.6667C40 22.2485 36.4183 18.6667 32 18.6667C27.5817 18.6667 24 22.2485 24 26.6667C24 31.085 27.5817 34.6667 32 34.6667Z" stroke="#CBD5E1" stroke-width="5.33333" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M18.666 55.0986V50.6666C18.666 49.2521 19.2279 47.8955 20.2281 46.8954C21.2283 45.8952 22.5849 45.3333 23.9993 45.3333H39.9993C41.4138 45.3333 42.7704 45.8952 43.7706 46.8954C44.7708 47.8955 45.3327 49.2521 45.3327 50.6666V55.0986" stroke="#CBD5E1" stroke-width="5.33333" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>
+`;
+const editIcon = exports.editIcon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" 
+    width="20" 
+    height="20" 
+    viewBox="0 0 20 20" 
+    fill="none"
+    aria-hidden="true" 
+    focusable="false"
+    >
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M14.3063 3.34814C14.9271 3.34832 15.5236 3.59563 15.9625 4.03467C16.4012 4.47362 16.648 5.06935 16.6481 5.68994C16.648 6.31072 16.4004 6.90719 15.9615 7.34619L15.9606 7.34521L7.95373 15.355L7.95275 15.356C7.73845 15.5696 7.47464 15.7278 7.18517 15.8159H7.1842L4.57287 16.6079H4.57092C4.40678 16.6572 4.23224 16.6614 4.06603 16.6196C3.89974 16.5778 3.74793 16.4918 3.62658 16.3706C3.50526 16.2494 3.41865 16.0974 3.37658 15.9312C3.33472 15.7651 3.3383 15.5903 3.38732 15.4263L3.3883 15.4243L4.18127 12.813V12.811C4.27013 12.5215 4.42882 12.2574 4.64318 12.0435L12.651 4.03467V4.03369C13.09 3.59513 13.6857 3.34816 14.3063 3.34814ZM5.56213 12.9634C5.49841 13.0269 5.4509 13.1059 5.42443 13.1919L5.42345 13.1909L4.82189 15.1733L6.80627 14.5718C6.89221 14.5456 6.97114 14.4985 7.03478 14.4351L13.274 8.19482L11.8014 6.72217L5.56213 12.9634ZM14.3063 4.64893C14.0303 4.64894 13.7652 4.75864 13.5699 4.95361L12.7213 5.80225L14.194 7.2749L15.0426 6.42627L15.1119 6.3501C15.2635 6.16488 15.3473 5.93141 15.3473 5.68994C15.3472 5.41394 15.2377 5.14881 15.0426 4.95361C14.8474 4.75846 14.5823 4.64906 14.3063 4.64893Z" fill="#1E2939"/>
+  </svg>
+`;
+const locationIcon = exports.locationIcon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" 
+  width="16" 
+  height="16" 
+  viewBox="0 0 16 16" 
+  fill="none"
+  aria-hidden="true"
+  focusable="false"
+  >
+    <path d="M13.3327 6.66659C13.3327 9.99525 9.64002 13.4619 8.40002 14.5326C8.2845 14.6194 8.14388 14.6664 7.99935 14.6664C7.85482 14.6664 7.7142 14.6194 7.59868 14.5326C6.35868 13.4619 2.66602 9.99525 2.66602 6.66659C2.66602 5.2521 3.22792 3.89554 4.22811 2.89535C5.22831 1.89516 6.58486 1.33325 7.99935 1.33325C9.41384 1.33325 10.7704 1.89516 11.7706 2.89535C12.7708 3.89554 13.3327 5.2521 13.3327 6.66659Z" stroke="#4A5565" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M8 8.66675C9.10457 8.66675 10 7.77132 10 6.66675C10 5.56218 9.10457 4.66675 8 4.66675C6.89543 4.66675 6 5.56218 6 6.66675C6 7.77132 6.89543 8.66675 8 8.66675Z" stroke="#4A5565" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>
+`;
+const closeIcon = exports.closeIcon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" 
+    width="12" 
+    height="12" 
+    viewBox="0 0 12 12" 
+    fill="none"
+    aria-hidden="true" 
+    focusable="false"
+    >
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M10.5301 0.244005C10.8555 -0.0813835 11.3834 -0.0812864 11.7088 0.244005C12.0338 0.569352 12.0338 1.09639 11.7088 1.42174L7.15416 5.97545L11.7088 10.5301C12.0341 10.8556 12.0342 11.3835 11.7088 11.7088C11.3835 12.0342 10.8556 12.0341 10.5301 11.7088L5.97545 7.15416L1.42174 11.7088C1.09639 12.0338 0.569351 12.0338 0.244004 11.7088C-0.0812866 11.3834 -0.0813828 10.8555 0.244004 10.5301L4.79772 5.97545L0.244004 1.42174C-0.0812866 1.09629 -0.0813828 0.569393 0.244004 0.244005C0.569393 -0.0813835 1.09629 -0.0812864 1.42174 0.244005L5.97545 4.79772L10.5301 0.244005Z" fill="#4A5565"/>
+  </svg>
+`;