@descope-ui/descope-user-passkeys 3.11.0

package/src/component/UserPasskeysClass.js

@@ -0,0 +1,470 @@
+import { compose } from '@descope-ui/common/utils';
+import {
+  forwardAttrs,
+  getComponentName,
+  injectStyle,
+} from '@descope-ui/common/components-helpers';
+import {
+  createStyleMixin,
+  draggableMixin,
+  componentNameValidationMixin,
+  createDynamicDataMixin,
+} from '@descope-ui/common/components-mixins';
+import { createBaseClass } from '@descope-ui/common/base-classes';
+import { ListClass } from '@descope-ui/descope-list/class';
+import { ListItemClass } from '@descope-ui/descope-list-item/class';
+import { getIcon, parseDate, populateRemoveButton, sortFn } from './helpers';
+import checkmark from './icons/checkmark.svg';
+import { LinkClass } from '@descope-ui/descope-link';
+
+export const componentName = getComponentName('user-passkeys');
+
+const itemRenderer = ({ id, name, createdAt, passkeyType }, _, ref) => {
+  const { iconSrc, iconSrcDark } = getIcon(passkeyType);
+
+  const createdAtLabel =
+    createdAt && ref.createdAtLabel ? `${ref.createdAtLabel} ` : '';
+
+  const createdAtDate = parseDate(createdAt, ref.format);
+
+  const template = document.createElement('template');
+
+  template.innerHTML = `
+    <descope-list-item>
+      <div class="content">
+        <div class="main">
+          <span class="item">
+            <descope-icon class="item-icon" src="${iconSrc}" src-dark="${iconSrcDark}"></descope-icon>
+            <descope-text class="item-name" variant="body1" mode="primary"></descope-text>
+          </span>
+          <span class="item-panel">
+            ${ref.allowRemove ? `<descope-link variant="text" mode="primary" size="md" ellipsis="true" data-action="remove-passkey" class="remove-button"></descope-link>` : `<descope-icon src="${checkmark}"></descope-icon>`}
+          </span>
+        </div>
+        <div class="meta">
+          <descope-text variant="body2" mode="primary">${createdAtLabel}</descope-text>
+          <descope-text class="date" variant="body2" mode="primary">
+            ${createdAtDate}
+          </descope-text>
+        </div>
+      </div>
+    </descope-list-item>
+  `;
+
+  // we return a template instead of returning a string so we can avoid XSS on passkey name
+  template.content.querySelector('.item-name').textContent = name;
+
+  if (ref.allowRemove) {
+    populateRemoveButton(template, id, ref);
+  }
+
+  return template;
+};
+
+const BaseClass = createBaseClass({
+  componentName,
+  baseSelector: ListClass.componentName,
+});
+
+class RawUserPasskeysClass extends BaseClass {
+  static get observedAttributes() {
+    return [
+      'label',
+      'add-passkey-button-label',
+      'remove-passkey-button-label',
+      'empty',
+    ].concat(super.observedAttributes);
+  }
+
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+        <div class="header">
+          <div class="method">
+            <slot name="method-icon"></slot>
+            <descope-text class="method-label" st-text-align="auto" data-id="label-text" variant="body1" mode="primary"></descope-text>
+          </div>
+          <span class="button">
+            <descope-button class="add-passkey-button" size="sm" variant="link" mode="primary">
+              <slot name="button-icon"></slot>
+            </descope-button>
+          </span>
+        </div>
+
+        <descope-list>
+          <slot name="empty-state" slot="empty-state"></slot>
+        </descope-list>
+
+        <slot name="remove-button" class="hidden"></slot>
+    `;
+
+    this.methodLabel = this.shadowRoot.querySelector('.method-label');
+    this.addPasskeyButton = this.shadowRoot.querySelector(
+      '.add-passkey-button',
+    );
+    this.appsList = this.shadowRoot.querySelector('descope-list');
+    this.removeButton = this.shadowRoot.querySelector(
+      'slot[name="remove-button"]',
+    );
+
+    injectStyle(
+      `
+      :host {
+        display: inline-block;
+      }
+
+      .header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      .header .method {
+        display: flex;
+      }
+
+      .button {
+        min-width: 0;
+      }
+
+      .add-passkey-button {
+        align-self: center;
+        max-width: 100%;
+      }
+
+      .add-passkey-button > span {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      slot[name="method-icon"] {
+        display: inline-flex;
+        align-items: center;
+      }
+
+      .descope-list-item {
+        min-width: 0;
+      }
+
+      .content {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+      }
+
+      .main {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+
+      .item-panel {
+        display: flex;
+        flex-shrink: 0;
+        max-width: 75%;
+        overflow: hidden;
+        align-items: center;
+        cursor: pointer;
+      }
+
+      .item {
+        display: flex;
+        min-width: 0;
+      }
+
+      .item-icon {
+        flex-shrink: 0;
+      }
+
+      .meta {
+        display: flex;
+      }
+
+      .date {
+        min-width: fit-content;
+      }
+
+      descope-text {
+        display: flex;
+        align-items: center;        
+        min-width: 0;
+      }
+      descope-text::part(text-wrapper) {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+      }
+
+      descope-link {
+        overflow: hidden;
+      }
+      descope-link.remove-button {
+        width: 100%;
+      }
+      descope-link.remove-button::part(wrapper) {
+        display: flex;
+        width: 100%;
+      }
+
+      .hidden {
+        display: none
+      }
+      
+      `,
+      this,
+    );
+  }
+
+  init() {
+    super.init?.();
+
+    this.appsList.itemRenderer = itemRenderer;
+
+    this.appsList.addEventListener('click', this.onRemoveClick.bind(this));
+    this.addPasskeyButton.addEventListener('click', this.onAddClick.bind(this));
+
+    forwardAttrs(this.appsList, this, { includeAttrs: ['empty'] });
+
+    this.removeButton.addEventListener('slotchange', () => {
+      this.data = [...this.data]; // re-renders list
+    });
+
+    // apply default labels
+    this.onLabelChange();
+    this.updateButtonLabel(this.addPasskeyButton, this.addPasskeyButtonLabel);
+  }
+
+  onAddClick() {
+    if (this.readOnly) return;
+
+    this.dispatchEvent(
+      new CustomEvent('add-passkey-clicked', {
+        bubbles: true,
+        detail: { action: 'add-passkey' },
+      }),
+    );
+  }
+
+  onRemoveClick(e) {
+    if (this.readOnly) return;
+
+    const target = e.target.closest('[data-passkey-id]');
+    const passkeyId = target?.getAttribute('data-passkey-id');
+
+    if (passkeyId) {
+      this.dispatchEvent(
+        new CustomEvent('remove-passkey-clicked', {
+          bubbles: true,
+          detail: { id: passkeyId, action: 'remove-passkey' },
+        }),
+      );
+    }
+  }
+
+  get label() {
+    return this.getAttribute('label') || 'Passkey';
+  }
+
+  get readOnly() {
+    return this.getAttribute('readonly') === 'true';
+  }
+
+  get allowRemove() {
+    return this.getAttribute('allow-remove') === 'true';
+  }
+
+  get format() {
+    return this.getAttribute('format')?.toUpperCase() || 'MM-DD-YYYY';
+  }
+
+  get addPasskeyButtonLabel() {
+    return this.getAttribute('add-passkey-button-label') || 'Add';
+  }
+  get removePasskeyButtonLabel() {
+    return this.getAttribute('remove-passkey-button-label') || 'Remove';
+  }
+
+  get createdAtLabel() {
+    return this.getAttribute('created-at-label') || 'Date added:';
+  }
+
+  get direction() {
+    return this.getAttribute('st-host-direction');
+  }
+
+  onLabelChange() {
+    this.methodLabel.innerText = this.label;
+    this.methodLabel.setAttribute('title', this.label);
+  }
+
+  updateButtonLabel(btnRef, label) {
+    let textSpanEle = btnRef.querySelector('span');
+
+    if (label) {
+      if (!textSpanEle) {
+        textSpanEle = document.createElement('span');
+        btnRef.appendChild(textSpanEle);
+      }
+      textSpanEle.textContent = label;
+    } else if (textSpanEle) {
+      btnRef.removeChild(textSpanEle);
+    }
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    super.attributeChangedCallback?.(name, oldValue, newValue);
+    if (oldValue === newValue) {
+      return;
+    }
+
+    if (name === 'label') {
+      this.onLabelChange();
+    } else if (name === 'add-passkey-button-label') {
+      this.updateButtonLabel(this.addPasskeyButton, this.addPasskeyButtonLabel);
+    } else if (name === 'empty') {
+      this.appsList.classList.toggle('hidden', newValue === 'true');
+    }
+  }
+}
+
+const { host } = {
+  host: { selector: () => ':host' },
+};
+
+export const UserPasskeysClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: { ...host, property: 'width' },
+      hostMinWidth: { ...host, property: 'min-width' },
+      hostDirection: [
+        { ...host, property: 'direction' },
+        {
+          selector: () => 'descope-list-item',
+          property: 'direction',
+        },
+        {
+          selector: () => 'descope-text',
+          property: 'direction',
+        },
+        {
+          selector: () => 'descope-link',
+          property: LinkClass.cssVarList.hostDirection,
+        },
+      ],
+
+      headerGap: {
+        selector: () => '.method',
+        property: 'gap',
+      },
+      listGap: {
+        selector: () => 'descope-list',
+        property: 'margin-top',
+      },
+
+      listItemsGap: {
+        property: ListClass.cssVarList.gap,
+      },
+      listBackgroundColor: {
+        selector: () => ListClass.componentName,
+        property: ListClass.cssVarList.backgroundColor,
+      },
+      listBorderRadius: {
+        selector: () => ListClass.componentName,
+        property: ListClass.cssVarList.borderRadius,
+      },
+      listBorderWidth: {
+        selector: () => ListClass.componentName,
+        property: ListClass.cssVarList.borderWidth,
+      },
+      listBoxShadow: {
+        selector: () => ListClass.componentName,
+        property: ListClass.cssVarList.boxShadow,
+      },
+      listPadding: [
+        {
+          selector: () => ListClass.componentName,
+          property: ListClass.cssVarList.verticalPadding,
+        },
+        {
+          selector: () => ListClass.componentName,
+          property: ListClass.cssVarList.horizontalPadding,
+        },
+      ],
+
+      itemVerticalPadding: {
+        selector: ListItemClass.componentName,
+        property: ListItemClass.cssVarList.verticalPadding,
+      },
+      itemHorizontalPadding: {
+        selector: ListItemClass.componentName,
+        property: ListItemClass.cssVarList.horizontalPadding,
+      },
+      itemCursor: {
+        selector: ListItemClass.componentName,
+        property: ListItemClass.cssVarList.cursor,
+      },
+      itemOutline: {
+        selector: ListItemClass.componentName,
+        property: ListItemClass.cssVarList.outline,
+      },
+      itemBorderColor: {
+        selector: ListItemClass.componentName,
+        property: ListItemClass.cssVarList.borderColor,
+      },
+      itemBorderRadius: {
+        selector: ListItemClass.componentName,
+        property: ListItemClass.cssVarList.borderRadius,
+      },
+      itemBackgroundColor: {
+        selector: ListItemClass.componentName,
+        property: ListItemClass.cssVarList.backgroundColor,
+      },
+      itemContentGap: {
+        selector: () => '.content',
+        property: 'gap',
+      },
+      itemPanelGap: {
+        selector: () => '.main',
+        property: 'gap',
+      },
+      itemIconGap: {
+        selector: () => '.item',
+        property: 'gap',
+      },
+      itemIconSize: [
+        {
+          selector: () => '.item-icon',
+          property: 'width',
+        },
+        {
+          selector: () => '.item-icon',
+          property: 'height',
+        },
+      ],
+
+      addButtonGap: {
+        selector: () => '.button',
+        property: 'margin-inline-end',
+      },
+      dateGap: {
+        selector: ' .meta',
+        property: 'gap',
+      },
+
+      removeButtonGap: {
+        selector: () =>
+          `${LinkClass.componentName}.remove-button > *:not(:last-child)`,
+        property: 'margin-inline-end',
+      },
+    },
+  }),
+  draggableMixin,
+  createDynamicDataMixin({
+    itemRenderer,
+    sortFn,
+    rerenderAttrsList: ['created-at-label', 'format', 'allow-remove'],
+  }),
+  componentNameValidationMixin,
+)(RawUserPasskeysClass);

package/src/component/helpers.js

@@ -0,0 +1,171 @@
+import onePasswordDark from './providers/1password-dark.svg';
+import onePasswordLight from './providers/1password-light.svg';
+import appleDark from './providers/apple-dark.svg';
+import appleLight from './providers/apple-light.svg';
+import bitwardenDark from './providers/bitwarden-dark.svg';
+import bitwardenLight from './providers/bitwarden-light.svg';
+import chromeDark from './providers/chrome-dark.svg';
+import chromeLight from './providers/chrome-light.svg';
+import dashlaneDark from './providers/dashlane-dark.svg';
+import dashlaneLight from './providers/dashlane-light.svg';
+import edgeDark from './providers/edge-dark.svg';
+import edgeLight from './providers/edge-light.svg';
+import enpassDark from './providers/enpass-dark.svg';
+import enpassLight from './providers/enpass-light.svg';
+import googleDark from './providers/google-dark.svg';
+import googleLight from './providers/google-light.svg';
+import keepassxcDark from './providers/keepassxc-dark.svg';
+import keepassxcLight from './providers/keepassxc-light.svg';
+import keeperDark from './providers/keeper-dark.svg';
+import keeperLight from './providers/keeper-light.svg';
+import keyDark from './providers/key-dark.svg';
+import keyLight from './providers/key-light.svg';
+import lastPassDark from './providers/lastpass-dark.svg';
+import lastPassLight from './providers/lastpass-light.svg';
+import nordPassDark from './providers/nordpass-dark.svg';
+import nordPassLight from './providers/nordpass-light.svg';
+import phoneDark from './providers/phone-dark.svg';
+import phoneLight from './providers/phone-light.svg';
+import protonPassDark from './providers/protonpass-dark.svg';
+import protonPassLight from './providers/protonpass-light.svg';
+import unknownDark from './providers/unknown-device-dark.svg';
+import unknownLight from './providers/unknown-device-light.svg';
+import windowsDark from './providers/windows-dark.svg';
+import windowsLight from './providers/windows-light.svg';
+
+const ensureDate = (loginDate) => {
+  const numVal = parseInt(loginDate, 10);
+  if (Number.isNaN(numVal)) return 0;
+  return numVal;
+};
+
+export const sortFn = (a, b) =>
+  ensureDate(b.createdAt) - ensureDate(a.createdAt);
+
+export const parseDate = (epoch, format) => {
+  if (Number.isNaN(parseInt(epoch, 10))) return '';
+
+  const date = new Date(epoch);
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  const time = date.toLocaleTimeString('en-US', {
+    hour12: false,
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+
+  const formatMap = {
+    'DD-MM-YYYY': `${day}/${month}/${year}`,
+    'YYYY-MM-DD': `${year}/${month}/${day}`,
+    'MM-DD-YYYY': `${month}/${day}/${year}`,
+  };
+
+  const dateStr = formatMap[format] || formatMap['MM-DD-YYYY'];
+  return `${dateStr} ${time}`;
+};
+
+export const iconMap = {
+  apple: {
+    light: appleLight,
+    dark: appleDark,
+  },
+  google: {
+    light: googleLight,
+    dark: googleDark,
+  },
+  windows: {
+    light: windowsLight,
+    dark: windowsDark,
+  },
+  chrome: {
+    light: chromeLight,
+    dark: chromeDark,
+  },
+  edge: {
+    light: edgeLight,
+    dark: edgeDark,
+  },
+  samsung: {
+    light: unknownLight,
+    dark: unknownDark,
+  },
+  '1password': {
+    light: onePasswordLight,
+    dark: onePasswordDark,
+  },
+  bitwarden: {
+    light: bitwardenLight,
+    dark: bitwardenDark,
+  },
+  lastpass: {
+    light: lastPassLight,
+    dark: lastPassDark,
+  },
+  dashlane: {
+    light: dashlaneLight,
+    dark: dashlaneDark,
+  },
+  keeper: {
+    light: keeperLight,
+    dark: keeperDark,
+  },
+  keepassxc: {
+    light: keepassxcLight,
+    dark: keepassxcDark,
+  },
+  proton: {
+    light: protonPassLight,
+    dark: protonPassDark,
+  },
+  nordpass: {
+    light: nordPassLight,
+    dark: nordPassDark,
+  },
+  enpass: {
+    light: enpassLight,
+    dark: enpassDark,
+  },
+  key: {
+    light: keyLight,
+    dark: keyDark,
+  },
+  phone: {
+    light: phoneLight,
+    dark: phoneDark,
+  },
+  other: {
+    light: unknownLight,
+    dark: unknownDark,
+  },
+};
+
+export const cloneSlottedNodes = (element, slotName) => {
+  if (!element || !slotName) return null;
+  const sources = element.querySelectorAll(`:scope > [slot="${slotName}"]`);
+  if (!sources.length) return null;
+  const fragment = document.createDocumentFragment();
+  sources.forEach((source) => {
+    const clone = source.content
+      ? source.content.cloneNode(true)
+      : source.cloneNode(true);
+    if (clone.removeAttribute) clone.removeAttribute('slot');
+    fragment.append(clone);
+  });
+  return fragment;
+};
+
+export const populateRemoveButton = (template, id, ref) => {
+  const button = template.content.querySelector('.remove-button');
+  button.dataset.passkeyId = id;
+  const clonedSlottedContent = cloneSlottedNodes(ref, 'remove-button');
+  if (clonedSlottedContent) button.append(clonedSlottedContent);
+};
+
+export const getIcon = (deviceType) => {
+  const icon = iconMap[deviceType] || iconMap.other;
+  return {
+    iconSrc: icon.light,
+    iconSrcDark: icon.dark,
+  };
+};

package/src/component/icons/checkmark.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 0C3.6 0 0 3.6 0 8C0 12.4 3.6 16 8 16C12.4 16 16 12.4 16 8C16 3.6 12.4 0 8 0ZM7.1 11.7L2.9 7.6L4.3 6.2L7 8.9L12 4L13.4 5.4L7.1 11.7Z" fill="#4CAF50"/>
+</svg>

package/src/component/icons/unknown-device-dark.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 6H22V4H4C2.9 4 2 4.9 2 6V17H0V20H14V17H4V6ZM23 8H17C16.45 8 16 8.45 16 9V19C16 19.55 16.45 20 17 20H23C23.55 20 24 19.55 24 19V9C24 8.45 23.55 8 23 8ZM22 17H18V10H22V17Z" fill="white"/>
+</svg>

package/src/component/icons/unknown-device-light.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 6.5H22V4.5H4C2.9 4.5 2 5.4 2 6.5V17.5H0V20.5H14V17.5H4V6.5ZM23 8.5H17C16.45 8.5 16 8.95 16 9.5V19.5C16 20.05 16.45 20.5 17 20.5H23C23.55 20.5 24 20.05 24 19.5V9.5C24 8.95 23.55 8.5 23 8.5ZM22 17.5H18V10.5H22V17.5Z" fill="#636C74"/>
+</svg>

package/src/component/index.js

@@ -0,0 +1,12 @@
+import '@descope-ui/descope-list';
+import '@descope-ui/descope-list-item';
+import '@descope-ui/descope-text';
+import '@descope-ui/descope-link';
+import '@descope-ui/descope-icon';
+import '@descope-ui/descope-button';
+
+import { componentName, UserPasskeysClass } from './UserPasskeysClass';
+
+customElements.define(componentName, UserPasskeysClass);
+
+export { UserPasskeysClass, componentName };

package/src/component/providers/1password-dark.svg

@@ -0,0 +1 @@
+<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path d="m0 0h24v24h-24z"/></clipPath><clipPath id="b"><path d="m1 1h22v22h-22z"/></clipPath><mask id="c" height="22" maskUnits="userSpaceOnUse" width="116" x="1" y="1"><path d="m1 1h115.077v22h-115.077z" fill="#fff"/></mask><g clip-path="url(#a)"><g clip-path="url(#b)"><g mask="url(#c)"><path d="m12 1c6.075 0 11 4.92495 11 11 0 6.0754-4.925 11-11 11-6.07505 0-11-4.9246-11-11 0-6.07505 4.92495-11 11-11zm-.8189 4.45552c-.4442 0-.6665.00038-.8363.08677-.1492.07608-.2709.19776-.34697.34706-.08631.16968-.08681.39216-.08681.83623v2.51781c0 .11093.00008.16686.01413.21815.01235.04535.03291.08817.06024.12641.03101.04324.07421.07878.16031.14876l.6371.51729c.1038.0843.1555.1269.1744.1777.0164.0444.0165.0935 0 .138-.019.0506-.0708.0926-.1744.1768l-.6371.5173c-.0861.0699-.1293.1055-.16031.1487-.02733.0383-.04789.0811-.06024.1264-.01405.0513-.01413.1072-.01413.2182l.00008 5.5173c0 .4444.00025.6674.08673.8371.07607.1491.19787.2702.34697.3462.1698.0864.3921.0868.8363.0868h1.6378c.4442 0 .6665-.0003.8363-.0868.1491-.076.2709-.1971.347-.3462.0864-.1697.0868-.3927.0868-.8371v-2.5178c0-.1109-.0001-.1669-.0141-.2181-.0124-.0454-.033-.0882-.0603-.1265-.031-.0432-.0742-.0787-.1603-.1487l-.6371-.5173c-.1037-.0842-.1563-.1261-.1752-.1768-.0165-.0445-.0165-.0943 0-.1389.0189-.0506.0715-.0925.1752-.1768l.6371-.5173c.0861-.0699.1293-.1055.1603-.1487.0273-.0383.0479-.0811.0603-.1264.014-.0513.0141-.1072.0141-.2182v-5.51732c0-.44406-.0005-.66655-.0868-.83623-.0761-.1493-.1978-.27098-.347-.34706-.1698-.08639-.3921-.08677-.8363-.08677z" fill="#fff"/></g></g></g></svg>

package/src/component/providers/1password-light.svg

@@ -0,0 +1 @@
+<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path d="m0 0h24v24h-24z"/></clipPath><clipPath id="b"><path d="m1 1h22v22h-22z"/></clipPath><mask id="c" height="22" maskUnits="userSpaceOnUse" width="116" x="1" y="1"><path d="m1 1h115.077v22h-115.077z" fill="#fff"/></mask><g clip-path="url(#a)"><g clip-path="url(#b)"><g mask="url(#c)"><path d="m12 1c6.075 0 11 4.92495 11 11 0 6.0754-4.925 11-11 11-6.07505 0-11-4.9246-11-11 0-6.07505 4.92495-11 11-11zm-.8189 4.45552c-.4442 0-.6665.00038-.8363.08677-.1492.07608-.2709.19776-.34697.34706-.08631.16968-.08681.39216-.08681.83623v2.51781c0 .11093.00008.16686.01413.21815.01235.04535.03291.08817.06024.12641.03101.04324.07421.07878.16031.14876l.6371.51729c.1038.0843.1555.1269.1744.1777.0164.0444.0165.0935 0 .138-.019.0506-.0708.0926-.1744.1768l-.6371.5173c-.0861.0699-.1293.1055-.16031.1487-.02733.0383-.04789.0811-.06024.1264-.01405.0513-.01413.1072-.01413.2182l.00008 5.5173c0 .4444.00025.6674.08673.8371.07607.1491.19787.2702.34697.3462.1698.0864.3921.0868.8363.0868h1.6378c.4442 0 .6665-.0003.8363-.0868.1491-.076.2709-.1971.347-.3462.0864-.1697.0868-.3927.0868-.8371v-2.5178c0-.1109-.0001-.1669-.0141-.2181-.0124-.0454-.033-.0882-.0603-.1265-.031-.0432-.0742-.0787-.1603-.1487l-.6371-.5173c-.1037-.0842-.1563-.1261-.1752-.1768-.0165-.0445-.0165-.0943 0-.1389.0189-.0506.0715-.0925.1752-.1768l.6371-.5173c.0861-.0699.1293-.1055.1603-.1487.0273-.0383.0479-.0811.0603-.1264.014-.0513.0141-.1072.0141-.2182v-5.51732c0-.44406-.0005-.66655-.0868-.83623-.0761-.1493-.1978-.27098-.347-.34706-.1698-.08639-.3921-.08677-.8363-.08677z" fill="#000"/></g></g></g></svg>

package/src/component/providers/apple-dark.svg

@@ -0,0 +1 @@
+<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m12.2672 6.07692c.9984 0 2.25-.67133 2.9953-1.56643.675-.81119 1.1672-1.94406 1.1672-3.07692 0-.15385-.0141-.3077-.0422-.43357-1.1109.04196-2.4469.74126-3.2484 1.67832-.6328.71329-1.2094 1.83217-1.2094 2.97902 0 .16784.0281.33567.0422.39161.0703.01399.1828.02797.2953.02797zm-3.51564 16.92308c1.36404 0 1.96874-.9091 3.67034-.9091 1.7297 0 2.1094.8811 3.6281.8811 1.4906 0 2.4891-1.3706 3.4313-2.7133 1.0546-1.5384 1.4906-3.0489 1.5187-3.1188-.0984-.028-2.9531-1.1889-2.9531-4.4476 0-2.82517 2.25-4.09789 2.3765-4.1958-1.4906-2.12587-3.7546-2.18181-4.3734-2.18181-1.6734 0-3.0375 1.00699-3.8953 1.00699-.9281 0-2.1516-.95105-3.60001-.95105-2.75625 0-5.55469 2.26573-5.55469 6.54547 0 2.6573 1.04063 5.4685 2.32031 7.2867 1.09688 1.5385 2.05313 2.7972 3.43125 2.7972z" fill="#fff"/></svg>

package/src/component/providers/apple-light.svg

@@ -0,0 +1 @@
+<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path d="m0 0h24v24h-24z"/></clipPath><g clip-path="url(#a)"><path d="m12.7523 6.07692c.943 0 2.125-.67133 2.829-1.56643.6375-.81119 1.1023-1.94406 1.1023-3.07692 0-.15385-.0133-.3077-.0398-.43357-1.0493.04196-2.311.74126-3.068 1.67832-.5977.71329-1.1422 1.83217-1.1422 2.97902 0 .16784.0266.33567.0398.39161.0664.01399.1727.02797.2789.02797zm-3.32027 16.92308c1.28827 0 1.85937-.9091 3.46637-.9091 1.6336 0 1.9922.8811 3.4266.8811 1.4078 0 2.3508-1.3706 3.2406-2.7133.9961-1.5384 1.4078-3.0489 1.4344-3.1188-.093-.028-2.7891-1.1889-2.7891-4.4476 0-2.82517 2.125-4.09789 2.2446-4.1958-1.4078-2.12587-3.5461-2.18181-4.1305-2.18181-1.5805 0-2.8687 1.00699-3.6789 1.00699-.8766 0-2.032-.95105-3.40001-.95105-2.60312 0-5.24609 2.26573-5.24609 6.54547 0 2.6573.98281 5.4685 2.19141 7.2867 1.03593 1.5385 1.93906 2.7972 3.24062 2.7972z" fill="#000"/></g></svg>

package/src/component/providers/bitwarden-dark.svg

@@ -0,0 +1 @@
+<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m18.3 12.9171v-9.1663h-6.3v16.2853c1.1158-.602 2.1143-1.2554 2.9954-1.9626 2.2026-1.7573 3.3046-3.4761 3.3046-5.1564zm2.7-11.00059v11.00059c0 .8216-.1565 1.6354-.4708 2.4415-.3143.8074-.7031 1.5224-1.1676 2.1488-.4646.6251-1.0174 1.2335-1.6599 1.8266-.6425.5917-1.2345 1.0834-1.7786 1.4749-.544.3915-1.1108.7611-1.7015 1.1103-.5908.3491-1.0098.5853-1.2585.7085-.2487.1246-.4481.2195-.597.2863-.1124.0578-.2348.086-.3661.086s-.2537-.0282-.3661-.086c-.1502-.0668-.3496-.1617-.597-.2863-.2487-.1245-.6678-.3607-1.25851-.7085-.59074-.3479-1.1575-.7188-1.70154-1.1103s-1.1373-.8832-1.77853-1.4749c-.6425-.5918-1.19538-1.2002-1.65989-1.8266-.46452-.6251-.8533-1.3414-1.16761-2.1488-.3143-.8074-.47082-1.6212-.47082-2.4415v-11.00059c0-.24774.08962-.46339.2676-.64438s.38878-.27213.6324-.27213h16.2c.2436 0 .4544.09114.6324.27213s.2676.39664.2676.64438z" fill="#fff"/></svg>