@kirbydesign/designsystem 0.0.0

package/src/lib/helpers/color-helper.styles.ts

@@ -0,0 +1,193 @@
+export const styles = {
+  brandColors: { primary: '#00e89a', secondary: '#005c3c', tertiary: '#01352c' },
+  notificationColors: { success: '#2cf287', warning: '#ffca3a', danger: '#ff595e' },
+  systemColors: {
+    backgroundColor: '#f6f6f6',
+    white: '#ffffff',
+    light: '#f2f2f2',
+    semiLight: '#ebebeb',
+    medium: '#d1d1d1',
+    semiDark: '#8e8e8e',
+    dark: '#353535',
+    black: '#1c1c1c',
+  },
+  textColors: { white: '#ffffff', semiDark: '#707070', black: '#1c1c1c', danger: '#ee0d0d' },
+  focusRingColor: '#4d90fe',
+  mainColors: {
+    primary: '#00e89a',
+    secondary: '#005c3c',
+    tertiary: '#01352c',
+    success: '#2cf287',
+    warning: '#ffca3a',
+    danger: '#ff595e',
+    light: '#f2f2f2',
+    medium: '#d1d1d1',
+    dark: '#353535',
+  },
+  kirbyColors: {
+    black: '#1c1c1c',
+    blackRgb: '28, 28, 28',
+    blackContrast: '#ffffff',
+    blackContrastRgb: '255, 255, 255',
+    blackShade: '#191919',
+    blackShadeRgb: '25, 25, 25',
+    blackTint: '#333333',
+    blackTintRgb: '51, 51, 51',
+    blackColorBrightness: 'dark',
+    dark: '#353535',
+    darkRgb: '53, 53, 53',
+    darkContrast: '#ffffff',
+    darkContrastRgb: '255, 255, 255',
+    darkShade: '#2f2f2f',
+    darkShadeRgb: '47, 47, 47',
+    darkTint: '#494949',
+    darkTintRgb: '73, 73, 73',
+    darkColorBrightness: 'dark',
+    semiDark: '#8e8e8e',
+    semiDarkRgb: '142, 142, 142',
+    semiDarkContrast: '#1c1c1c',
+    semiDarkContrastRgb: '28, 28, 28',
+    semiDarkShade: '#7d7d7d',
+    semiDarkShadeRgb: '125, 125, 125',
+    semiDarkTint: '#999999',
+    semiDarkTintRgb: '153, 153, 153',
+    semiDarkColorBrightness: 'light',
+    medium: '#d1d1d1',
+    mediumRgb: '209, 209, 209',
+    mediumContrast: '#1c1c1c',
+    mediumContrastRgb: '28, 28, 28',
+    mediumShade: '#b8b8b8',
+    mediumShadeRgb: '184, 184, 184',
+    mediumTint: '#d6d6d6',
+    mediumTintRgb: '214, 214, 214',
+    mediumColorBrightness: 'light',
+    semiLight: '#ebebeb',
+    semiLightRgb: '235, 235, 235',
+    semiLightContrast: '#1c1c1c',
+    semiLightContrastRgb: '28, 28, 28',
+    semiLightShade: '#cfcfcf',
+    semiLightShadeRgb: '207, 207, 207',
+    semiLightTint: '#ededed',
+    semiLightTintRgb: '237, 237, 237',
+    semiLightColorBrightness: 'light',
+    light: '#f2f2f2',
+    lightRgb: '242, 242, 242',
+    lightContrast: '#1c1c1c',
+    lightContrastRgb: '28, 28, 28',
+    lightShade: '#d5d5d5',
+    lightShadeRgb: '213, 213, 213',
+    lightTint: '#f3f3f3',
+    lightTintRgb: '243, 243, 243',
+    lightColorBrightness: 'light',
+    white: '#ffffff',
+    whiteRgb: '255, 255, 255',
+    whiteContrast: '#1c1c1c',
+    whiteContrastRgb: '28, 28, 28',
+    whiteShade: '#e0e0e0',
+    whiteShadeRgb: '224, 224, 224',
+    whiteTint: 'white',
+    whiteTintRgb: '255, 255, 255',
+    whiteColorBrightness: 'white',
+    backgroundColor: '#f6f6f6',
+    backgroundColorRgb: '246, 246, 246',
+    backgroundColorContrast: '#1c1c1c',
+    backgroundColorContrastRgb: '28, 28, 28',
+    backgroundColorShade: '#d8d8d8',
+    backgroundColorShadeRgb: '216, 216, 216',
+    backgroundColorTint: '#f7f7f7',
+    backgroundColorTintRgb: '247, 247, 247',
+    backgroundColorColorBrightness: 'light',
+    danger: '#ff595e',
+    dangerRgb: '255, 89, 94',
+    dangerContrast: '#1c1c1c',
+    dangerContrastRgb: '28, 28, 28',
+    dangerShade: '#e04e53',
+    dangerShadeRgb: '224, 78, 83',
+    dangerTint: '#ff6a6e',
+    dangerTintRgb: '255, 106, 110',
+    dangerColorBrightness: 'light',
+    warning: '#ffca3a',
+    warningRgb: '255, 202, 58',
+    warningContrast: '#1c1c1c',
+    warningContrastRgb: '28, 28, 28',
+    warningShade: '#e0b233',
+    warningShadeRgb: '224, 178, 51',
+    warningTint: '#ffcf4e',
+    warningTintRgb: '255, 207, 78',
+    warningColorBrightness: 'light',
+    success: '#2cf287',
+    successRgb: '44, 242, 135',
+    successContrast: '#1c1c1c',
+    successContrastRgb: '28, 28, 28',
+    successShade: '#27d577',
+    successShadeRgb: '39, 213, 119',
+    successTint: '#41f393',
+    successTintRgb: '65, 243, 147',
+    successColorBrightness: 'light',
+    tertiary: '#01352c',
+    tertiaryRgb: '1, 53, 44',
+    tertiaryContrast: '#ffffff',
+    tertiaryContrastRgb: '255, 255, 255',
+    tertiaryShade: '#012f27',
+    tertiaryShadeRgb: '1, 47, 39',
+    tertiaryTint: '#1a4941',
+    tertiaryTintRgb: '26, 73, 65',
+    tertiaryColorBrightness: 'dark',
+    secondary: '#005c3c',
+    secondaryRgb: '0, 92, 60',
+    secondaryContrast: '#ffffff',
+    secondaryContrastRgb: '255, 255, 255',
+    secondaryShade: '#005135',
+    secondaryShadeRgb: '0, 81, 53',
+    secondaryTint: '#1a6c50',
+    secondaryTintRgb: '26, 108, 80',
+    secondaryColorBrightness: 'dark',
+    primary: '#00e89a',
+    primaryRgb: '0, 232, 154',
+    primaryContrast: '#1c1c1c',
+    primaryContrastRgb: '28, 28, 28',
+    primaryShade: '#00cc88',
+    primaryShadeRgb: '0, 204, 136',
+    primaryTint: '#1aeaa4',
+    primaryTintRgb: '26, 234, 164',
+    primaryColorBrightness: 'light',
+  },
+  kirbyTextColors: {
+    danger: '#ee0d0d',
+    dangerRgb: '238, 13, 13',
+    dangerContrast: '#ffffff',
+    dangerContrastRgb: '255, 255, 255',
+    dangerShade: '#d10b0b',
+    dangerShadeRgb: '209, 11, 11',
+    dangerTint: '#f02525',
+    dangerTintRgb: '240, 37, 37',
+    dangerColorBrightness: 'dark',
+    black: '#1c1c1c',
+    blackRgb: '28, 28, 28',
+    blackContrast: '#ffffff',
+    blackContrastRgb: '255, 255, 255',
+    blackShade: '#191919',
+    blackShadeRgb: '25, 25, 25',
+    blackTint: '#333333',
+    blackTintRgb: '51, 51, 51',
+    blackColorBrightness: 'dark',
+    semiDark: '#707070',
+    semiDarkRgb: '112, 112, 112',
+    semiDarkContrast: '#ffffff',
+    semiDarkContrastRgb: '255, 255, 255',
+    semiDarkShade: '#636363',
+    semiDarkShadeRgb: '99, 99, 99',
+    semiDarkTint: '#7e7e7e',
+    semiDarkTintRgb: '126, 126, 126',
+    semiDarkColorBrightness: 'dark',
+    white: '#ffffff',
+    whiteRgb: '255, 255, 255',
+    whiteContrast: '#1c1c1c',
+    whiteContrastRgb: '28, 28, 28',
+    whiteShade: '#e0e0e0',
+    whiteShadeRgb: '224, 224, 224',
+    whiteTint: 'white',
+    whiteTintRgb: '255, 255, 255',
+    whiteColorBrightness: 'white',
+  },
+};

package/src/lib/helpers/color-helper.ts

@@ -0,0 +1 @@
+export { ColorHelper, Color, BrandColor, KirbyColor, NotificationColor } from '@kirbydesign/core';

package/src/lib/helpers/deep-copy.ts

@@ -0,0 +1,13 @@
+import _deepCopy from 'ts-deepcopy';
+
+/**
+ * Do a deep copy of object that supports the composite data type Function
+ *
+ * @see https://stackoverflow.com/questions/122102/what-is-the-most-efficient-way-to-deep-clone-an-object-in-javascript#answer-122704
+ *
+ * @param obj
+ * @returns obj
+ */
+export function deepCopy<T>(obj: T): T {
+  return _deepCopy<T>(obj);
+}

package/src/lib/helpers/design-token-helper.styles.ts

@@ -0,0 +1,78 @@
+export const styles = {
+  sizes: {
+    xxxl: '56px',
+    xxl: '48px',
+    xl: '40px',
+    l: '32px',
+    m: '24px',
+    s: '16px',
+    xs: '12px',
+    xxs: '8px',
+    xxxs: '4px',
+    xxxxs: '2px',
+  },
+  fontSizes: {
+    xxxxl: '72px',
+    xxxl: '56px',
+    xxl: '40px',
+    xl: '32px',
+    l: '22px',
+    m: '18px',
+    n: '16px',
+    s: '14px',
+    xs: '12px',
+    xxs: '10px',
+  },
+  lineHeight: { xl: '38px', l: '28px', m: '24px', n: '24px', s: '20px', xs: '16px', xxs: '11px' },
+  fontWeight: { light: '300', normal: '400', bold: '700', black: '900' },
+  iconFontSizes: { xs: '16px', sm: '24px', md: '32px', lg: '56px' },
+  zLayers: {
+    default: '1',
+    segmentBadge: '2',
+    dropdown: '800',
+    popover: '850',
+    modalOverlay: '900',
+    modal: '901',
+    loadingOverlay: '1001',
+  },
+  borderRadius: '16px',
+  borderRadiusRound: '999px',
+  breakpoints: {
+    small: '321px',
+    medium: '721px',
+    large: '1025px',
+    xlarge: '60em',
+    xxlarge: '80em',
+  },
+  elevations: {
+    2: 'rgba(28, 28, 28, 0.3) 0px 5px 10px -10px, rgba(28, 28, 28, 0.08) 0px 0px 5px 0px',
+    4: 'rgba(28, 28, 28, 0.3) 0px 10px 15px -10px, rgba(28, 28, 28, 0.08) 0px 0px 5px 0px',
+    8: 'rgba(28, 28, 28, 0.3) 0px 20px 30px -15px, rgba(28, 28, 28, 0.08) 0px 0px 5px 0px',
+  },
+  avatarSizes: { xs: '32px', s: '40px', m: '56px', l: '96px' },
+  avatarBadgeSize: '16px',
+  pageContentMaxWidth: '720px',
+  alertMaxWidth: '359px',
+  compactModalMaxWidth: '359px',
+  modalMaxWidth: '720px',
+  modalHeights: { s: '288px', m: '460px', l: '576px' },
+  modalDefaultHeight: '460px',
+  drawerDefaultHeight: '288px',
+  itemHeights: { m: '56px', s: '44px', xs: '32px' },
+  dropdownItemHeight: '44px',
+  fatFingerSize: '44px',
+  checkboxRadioSizes: { xs: '32px', sm: '44px', md: '56px' },
+  checkboxRadioSpacing: { toEdge: '16px', toLabel: '12px' },
+  softKeyboardTransitionEnter: '250ms ease-out 1ms',
+  softKeyboardTransitionLeave: '150ms ease-out',
+  transitionDurations: { quick: '200ms', short: '300ms', long: '500ms', extraLong: '1000ms' },
+  transitionEasings: {
+    static: 'linear',
+    enter: 'ease-out',
+    exit: 'ease-in',
+    enterExit: 'ease',
+    motion: 'cubic-bezier(0.25, 0.1, 0.25, 1)',
+    modal: { enter: 'cubic-bezier(0.32, 0.72, 0, 1)', exit: 'cubic-bezier(0.32, 0.72, 0, 1)' },
+  },
+  loadingOverlayBackdropOpacity: '0.8',
+};

package/src/lib/helpers/design-token-helper.ts

@@ -0,0 +1,6 @@
+export {
+  DesignTokenHelper,
+  ThemeColorDefinition,
+  ThemeColorExtended,
+  ThemeColorVariant,
+} from '@kirbydesign/core';

package/src/lib/helpers/element-has-ancestor.ts

@@ -0,0 +1,28 @@
+/* 
+  Utility function to check if a given element 
+  has an ancestor with a specific node name. 
+
+  Can be given a 'stopNodeName' to limit the search
+  as to not climb all the way up through the DOM tree. 
+
+  Returns true when element has the ancestorNodeName 
+  or an ancestor has the ancestorNodeName. 
+
+  Returns false otherwise.
+*/
+
+export const elementHasAncestor = (
+  element: HTMLElement,
+  ancestorNodeName: string,
+  stopNodeName?: string
+) => {
+  switch (element?.nodeName) {
+    case undefined:
+    case stopNodeName?.toUpperCase():
+      return false;
+    case ancestorNodeName.toUpperCase():
+      return true;
+    default:
+      return elementHasAncestor(element.parentElement, ancestorNodeName, stopNodeName);
+  }
+};

package/src/lib/helpers/index.ts

@@ -0,0 +1,8 @@
+// re-export helpers from core, to preserve backwards compatability
+// of 'designsystem' library
+export * from './element-has-ancestor';
+export * from './color-helper';
+export * from './design-token-helper';
+export * from './string-helper';
+export * from './theme-color.type';
+export * from './platform.service';

package/src/lib/helpers/line-clamp-helper.ts

@@ -0,0 +1,28 @@
+import { Injectable, Renderer2, RendererStyleFlags2 } from '@angular/core';
+
+const config = Object.freeze({
+  className: 'kirby-line-clamp',
+  lineClamp: '--line-clamp',
+  lineHeight: '--line-height',
+});
+
+@Injectable()
+export class LineClampHelper {
+  constructor(private renderer: Renderer2) {}
+
+  setMaxLines(element: Element, maxLines: number): void {
+    this.renderer.setStyle(element, config.lineClamp, maxLines, RendererStyleFlags2.DashCase);
+    this.renderer.addClass(element, config.className);
+  }
+
+  setLineHeight(element: Element, lineHeight: string): void {
+    // Only necessary for the fallback solution to work
+    this.renderer.setStyle(element, config.lineHeight, lineHeight, RendererStyleFlags2.DashCase);
+  }
+
+  removeLineClamp(element: Element) {
+    this.renderer.removeClass(element, config.className);
+    this.renderer.removeStyle(element, config.lineClamp);
+    this.renderer.removeStyle(element, config.lineHeight);
+  }
+}

package/src/lib/helpers/merge-deep.spec.ts

@@ -0,0 +1,11 @@
+import { mergeDeep } from './merge-deep';
+
+describe('mergeDeep', () => {
+  it('should deep merge provided objects, right into left', () => {
+    const combinedRes = mergeDeep(
+      { a: { a: 'will be overridden' }, b: 'will be overridden' },
+      { a: { a: 'new val' }, b: 'new val' }
+    );
+    expect(combinedRes).toEqual({ a: { a: 'new val' }, b: 'new val' });
+  });
+});

package/src/lib/helpers/merge-deep.ts

@@ -0,0 +1,41 @@
+/**
+ * Performs a deep merge of objects and returns new object. Does not modify
+ * objects (immutable).
+ * It merges from into object to the left
+ *  eg. mergeDeep({a: 'will be overridden', b: 'some val'}, {a: 'new val'}) =>  {a: 'new val', b: 'some val'}
+ *
+ * @param originalObject object - Object to override,
+ * @param overrideObject object - Object to override "toOverride" values with
+ * @param config object - Configuration for how to merge.
+ *  mergeArrays determines if it should merge or override arrays
+ * @returns object - New object with merged key/values
+ */
+export function mergeDeep(originalObject, overrideObject, config = { mergeArrays: false }) {
+  const isObject = (obj) => obj && typeof obj === 'object';
+
+  return [originalObject, overrideObject].reduce((mergedObject, obj) => {
+    Object.keys(obj).forEach((key) => {
+      const mergedObjectValue = mergedObject[key];
+      const overrideObjectValue = obj[key];
+
+      if (Array.isArray(mergedObjectValue) && Array.isArray(overrideObjectValue)) {
+        mergedObject[key] = config.mergeArrays
+          ? mergedObjectValue.concat(overrideObjectValue)
+          : overrideObjectValue;
+      } else if (isObject(mergedObjectValue) && isObject(overrideObjectValue)) {
+        mergedObject[key] = mergeDeep(mergedObjectValue, overrideObjectValue);
+      } else {
+        mergedObject[key] = overrideObjectValue;
+      }
+    });
+
+    return mergedObject;
+  }, {});
+}
+
+export function mergeDeepAll(...objects: Object[]): Object {
+  const objectsWithoutUndefined = objects.filter((object) => object !== undefined);
+  return objectsWithoutUndefined.reduce((originalObject, overrideObject) =>
+    mergeDeep(originalObject, overrideObject)
+  );
+}

package/src/lib/helpers/platform.service.ts

@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+
+import { DesignTokenHelper } from '@kirbydesign/core';
+
+import { WindowRef } from '../types/window-ref';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class PlatformService {
+  constructor(private windowRef: WindowRef) {}
+
+  isTouch() {
+    const isTouchDeviceQuery = '(pointer: coarse)'; // No check for `hover: none`, as Samsung Galaxy will return false on `hover: none` media query
+    return this.windowRef.nativeWindow.matchMedia(isTouchDeviceQuery).matches;
+  }
+
+  isPhabletOrBigger() {
+    const query = `(min-width: ${DesignTokenHelper.breakpoints.medium})`;
+    return this.windowRef.nativeWindow.matchMedia(query).matches;
+  }
+}

package/src/lib/helpers/string-helper.ts

@@ -0,0 +1,6 @@
+export {
+  kebabToCamelCase,
+  kebabToTitleCase,
+  camelToKebabCase,
+  capitalizeFirstLetter,
+} from '@kirbydesign/core';

package/src/lib/helpers/theme-color.type.ts

@@ -0,0 +1 @@
+export { ThemeColor } from '@kirbydesign/core';

package/src/lib/helpers/unique-id-generator.helper.spec.ts

@@ -0,0 +1,58 @@
+import { UniqueIdGenerator } from './unique-id-generator.helper';
+
+describe('UniqueIdGenerator', () => {
+  let service: UniqueIdGenerator;
+
+  beforeEach(() => {
+    service = UniqueIdGenerator.scopedTo('kirby-test');
+  });
+
+  it('should create service', () => {
+    expect(service).toBeInstanceOf(UniqueIdGenerator);
+  });
+
+  describe('next', () => {
+    it('should return unique ids', () => {
+      expect(service.next()).not.toEqual(service.next());
+    });
+  });
+
+  describe('scopedTo', () => {
+    let service1: UniqueIdGenerator;
+    let service2: UniqueIdGenerator;
+
+    describe('same scope', () => {
+      beforeEach(() => {
+        service1 = UniqueIdGenerator.scopedTo('same-scope');
+        service2 = UniqueIdGenerator.scopedTo('same-scope');
+      });
+
+      it('should return existing instance', () => {
+        expect(service2).toBe(service1);
+      });
+
+      describe('next', () => {
+        it('should return unique ids from each instance', () => {
+          expect(service1.next()).not.toEqual(service2.next());
+        });
+      });
+    });
+
+    describe('different scopes', () => {
+      beforeEach(() => {
+        service1 = UniqueIdGenerator.scopedTo('first-scope');
+        service2 = UniqueIdGenerator.scopedTo('second-scope');
+      });
+
+      it('should create new instance', () => {
+        expect(service2).not.toBe(service1);
+      });
+
+      describe('next', () => {
+        it('should return unique ids from each instance', () => {
+          expect(service1.next()).not.toEqual(service2.next());
+        });
+      });
+    });
+  });
+});

package/src/lib/helpers/unique-id-generator.helper.ts

@@ -0,0 +1,19 @@
+export class UniqueIdGenerator {
+  private static registry = new Map<string, UniqueIdGenerator>();
+  private id = 0;
+
+  private constructor(private scope: string) {}
+
+  static scopedTo(scope: string) {
+    let scopedGenerator = UniqueIdGenerator.registry.get(scope);
+    if (!scopedGenerator) {
+      scopedGenerator = new UniqueIdGenerator(scope);
+      UniqueIdGenerator.registry.set(scope, scopedGenerator);
+    }
+    return scopedGenerator;
+  }
+
+  next(): string {
+    return `${this.scope}-${this.id++}`;
+  }
+}

package/src/lib/icons/svg/QR.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 55.1 (78136) - https://sketchapp.com -->
+    <g id="QR" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M5.0884,5.3811 L5.0884,8.6061 C5.0884,8.7411 5.1994,8.8521 5.3364,8.8521 L8.3314,8.8521 C8.4674,8.8521 8.5794,8.7411 8.5794,8.6061 L8.5794,5.3811 C8.5794,5.2451 8.4674,5.1341 8.3314,5.1341 L5.3364,5.1341 C5.1994,5.1341 5.0884,5.2451 5.0884,5.3811 Z M5.3364,10.3341 C4.3804,10.3341 3.6024,9.5581 3.6024,8.6061 L3.6024,5.3811 C3.6024,4.4281 4.3804,3.6531 5.3364,3.6531 L8.3314,3.6531 C9.2874,3.6531 10.0654,4.4281 10.0654,5.3811 L10.0654,8.6061 C10.0654,9.5581 9.2874,10.3341 8.3314,10.3341 L5.3364,10.3341 Z M19.0146,8.2805 L19.0146,5.2285 C19.0146,5.0925 18.9036,4.9815 18.7666,4.9815 L15.7706,4.9815 C15.6346,4.9815 15.5236,5.0925 15.5236,5.2285 L15.5236,8.2805 C15.5236,8.4165 15.6346,8.5275 15.7706,8.5275 L18.7666,8.5275 C18.9036,8.5275 19.0146,8.4165 19.0146,8.2805 Z M18.7666,3.4995 C19.7226,3.4995 20.4996,4.2755 20.4996,5.2285 L20.4996,8.2805 C20.4996,9.2335 19.7226,10.0085 18.7666,10.0085 L15.7706,10.0085 C14.8156,10.0085 14.0366,9.2335 14.0366,8.2805 L14.0366,5.2285 C14.0366,4.2755 14.8156,3.4995 15.7706,3.4995 L18.7666,3.4995 Z M4.7979,11.2742 L5.6039,11.2742 C6.0139,11.2742 6.3469,11.6062 6.3469,12.0152 C6.3469,12.4232 6.0139,12.7552 5.6039,12.7552 L4.7979,12.7552 C4.3879,12.7552 4.0549,12.4232 4.0549,12.0152 C4.0549,11.6062 4.3879,11.2742 4.7979,11.2742 Z M9.6484,11.3357 C10.0584,11.3357 10.3914,11.6677 10.3914,12.0767 C10.3914,12.4847 10.0584,12.8167 9.6484,12.8167 L7.9174,12.8167 C7.5074,12.8167 7.1744,12.4847 7.1744,12.0767 C7.1744,11.6677 7.5074,11.3357 7.9174,11.3357 L9.6484,11.3357 Z M12.0205,10.6052 C11.6105,10.6052 11.2775,10.2732 11.2775,9.8642 L11.2775,9.0612 C11.2775,8.6512 11.6105,8.3202 12.0205,8.3202 C12.4305,8.3202 12.7635,8.6512 12.7635,9.0612 L12.7635,9.8642 C12.7635,10.2732 12.4305,10.6052 12.0205,10.6052 Z M12.082,7.4949 C11.672,7.4949 11.339,7.1629 11.339,6.7539 L11.339,5.0289 C11.339,4.6199 11.672,4.2879 12.082,4.2879 C12.492,4.2879 12.825,4.6199 12.825,5.0289 L12.825,6.7539 C12.825,7.1629 12.492,7.4949 12.082,7.4949 Z M12.8252,17.2908 C12.8252,17.6988 12.4922,18.0308 12.0822,18.0308 C11.6722,18.0308 11.3392,17.6988 11.3392,17.2908 L11.3392,17.0728 C11.3392,16.6648 11.6722,16.3328 12.0822,16.3328 C12.4922,16.3328 12.8252,16.6648 12.8252,17.0728 L12.8252,17.2908 Z M15.1738,19.0183 C15.5838,19.0183 15.9168,19.3503 15.9168,19.7593 C15.9168,20.1683 15.5838,20.4993 15.1738,20.4993 L12.7348,20.4993 C12.3248,20.4993 11.9918,20.1683 11.9918,19.7593 C11.9918,19.3503 12.3248,19.0183 12.7348,19.0183 L15.1738,19.0183 Z M18.873,13.8191 C19.283,13.8191 19.616,14.1501 19.616,14.5591 C19.616,14.9681 19.283,15.2991 18.873,15.2991 L17.886,15.2991 C17.476,15.2991 17.143,14.9681 17.143,14.5591 C17.143,14.1501 17.476,13.8191 17.886,13.8191 L18.873,13.8191 Z M12.0195,15.5457 C11.6095,15.5457 11.2765,15.2147 11.2765,14.8057 L11.2765,14.2887 C11.2765,13.8807 11.6095,13.5487 12.0195,13.5487 C12.4295,13.5487 12.7625,13.8807 12.7625,14.2887 L12.7625,14.8057 C12.7625,15.2147 12.4295,15.5457 12.0195,15.5457 Z M12.1616,12.0149 C12.1616,11.6059 12.4946,11.2739 12.9046,11.2739 L13.1886,11.2739 C13.5986,11.2739 13.9316,11.6059 13.9316,12.0149 C13.9316,12.4239 13.5986,12.7549 13.1886,12.7549 L12.9046,12.7549 C12.4946,12.7549 12.1616,12.4239 12.1616,12.0149 Z M17.4111,6.0139 C17.8211,6.0139 18.1541,6.3459 18.1541,6.7539 C18.1541,7.1629 17.8211,7.4949 17.4111,7.4949 L17.1271,7.4949 C16.7171,7.4949 16.3841,7.1629 16.3841,6.7539 C16.3841,6.3459 16.7171,6.0139 17.1271,6.0139 L17.4111,6.0139 Z M20.1924,12.0149 C20.1924,12.4239 19.8594,12.7549 19.4494,12.7549 L15.5374,12.7549 C15.1274,12.7549 14.7954,12.4239 14.7954,12.0149 C14.7954,11.6059 15.1274,11.2739 15.5374,11.2739 L19.4494,11.2739 C19.8594,11.2739 20.1924,11.6059 20.1924,12.0149 Z M18.3311,17.073 C18.3311,17.482 17.9981,17.814 17.5881,17.814 L16.5251,17.814 C16.1151,17.814 15.7821,17.482 15.7821,17.073 C15.7821,16.665 16.1151,16.333 16.5251,16.333 L17.5881,16.333 C17.9981,16.333 18.3311,16.665 18.3311,17.073 Z M6.6914,7.7341 C6.2814,7.7341 5.9484,7.4021 5.9484,6.9931 C5.9484,6.5851 6.2814,6.2531 6.6914,6.2531 L6.9764,6.2531 C7.3864,6.2531 7.7194,6.5851 7.7194,6.9931 C7.7194,7.4021 7.3864,7.7341 6.9764,7.7341 L6.6914,7.7341 Z M6.9062,16.4187 C7.3162,16.4187 7.6492,16.7507 7.6492,17.1587 C7.6492,17.5677 7.3162,17.8997 6.9062,17.8997 L6.6212,17.8997 C6.2112,17.8997 5.8792,17.5677 5.8792,17.1587 C5.8792,16.7507 6.2112,16.4187 6.6212,16.4187 L6.9062,16.4187 Z M19.7568,16.3328 C20.1668,16.3328 20.4998,16.6648 20.4998,17.0728 L20.4998,19.7598 C20.4998,20.1688 20.1668,20.4998 19.7568,20.4998 L17.8858,20.4998 C17.4758,20.4998 17.1428,20.1688 17.1428,19.7598 C17.1428,19.3508 17.4758,19.0188 17.8858,19.0188 L19.0148,19.0188 L19.0148,17.0728 C19.0148,16.6648 19.3468,16.3328 19.7568,16.3328 Z M14.7803,16.6667 C14.3703,16.6667 14.0373,16.3347 14.0373,15.9257 L14.0373,14.5597 C14.0373,14.1497 14.3703,13.8187 14.7803,13.8187 L15.5373,13.8187 C15.9473,13.8187 16.2803,14.1497 16.2803,14.5597 C16.2803,14.9687 15.9473,15.2997 15.5373,15.2997 L15.5233,15.2997 L15.5233,15.9257 C15.5233,16.3347 15.1903,16.6667 14.7803,16.6667 Z M8.543,18.7722 L8.543,15.5462 C8.543,15.4112 8.432,15.2992 8.295,15.2992 L5.233,15.2992 C5.097,15.2992 4.986,15.4112 4.986,15.5462 L4.986,18.7722 C4.986,18.9082 5.097,19.0182 5.233,19.0182 L8.295,19.0182 C8.432,19.0182 8.543,18.9082 8.543,18.7722 Z M8.295,13.8192 C9.251,13.8192 10.029,14.5942 10.029,15.5462 L10.029,18.7722 C10.029,19.7242 9.251,20.5002 8.295,20.5002 L5.233,20.5002 C4.278,20.5002 3.5,19.7242 3.5,18.7722 L3.5,15.5462 C3.5,14.5942 4.278,13.8192 5.233,13.8192 L8.295,13.8192 Z" id="icon-color" fill="currentColor" fill-rule="nonzero"></path>
+    </g>
+</svg>

package/src/lib/icons/svg/accounts-outline.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 57.1 (83088) - https://sketch.com -->
+    <title>accounts-outline</title>
+    <desc>Created with Sketch.</desc>
+    <g id="accounts-outline" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M16.288,4 C17.58,4 18.631,5.047 18.631,6.335 L18.631,6.335 L18.631,6.852 C19.951,6.939 20.999,7.967 20.999,9.232 L20.999,9.232 L20.999,17.602 C20.999,18.924 19.858,20 18.455,20 L18.455,20 L5.545,20 C4.142,20 3,18.924 3,17.602 L3,17.602 L3,6.104 C3,4.944 3.947,4 5.111,4 L5.111,4 Z M4.482,8.208 L4.482,17.602 C4.482,18.109 4.959,18.521 5.545,18.521 L5.545,18.521 L18.455,18.521 C19.041,18.521 19.517,18.109 19.517,17.602 L19.517,17.602 L19.517,16.127 L17.404,16.127 C15.956,16.127 14.779,14.953 14.779,13.509 L14.779,13.509 L14.779,13.365 C14.779,11.921 15.956,10.748 17.404,10.748 L17.404,10.748 L19.517,10.748 L19.517,9.232 C19.517,8.726 19.041,8.314 18.455,8.314 L18.455,8.314 L5.111,8.314 C4.891,8.314 4.682,8.271 4.482,8.208 L4.482,8.208 Z M19.517,12.226 L17.404,12.226 C16.775,12.226 16.262,12.737 16.262,13.365 L16.262,13.365 L16.262,13.509 C16.262,14.137 16.775,14.648 17.404,14.648 L17.404,14.648 L19.517,14.648 L19.517,12.226 Z M17.5837,12.7631 C17.9567,12.7631 18.2607,13.0651 18.2607,13.4371 C18.2607,13.8091 17.9567,14.1121 17.5837,14.1121 C17.2097,14.1121 16.9067,13.8091 16.9067,13.4371 C16.9067,13.0651 17.2097,12.7631 17.5837,12.7631 Z M16.288,5.478 L5.111,5.478 C4.765,5.478 4.482,5.759 4.482,6.104 L4.482,6.104 L4.482,6.21 C4.482,6.554 4.765,6.836 5.111,6.836 L5.111,6.836 L17.148,6.836 L17.148,6.335 C17.148,5.862 16.762,5.478 16.288,5.478 L16.288,5.478 Z" id="Combined-Shape" fill="currentColor" fill-rule="nonzero"></path>
+    </g>
+</svg>

package/src/lib/icons/svg/accounts.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 57.1 (83088) - https://sketch.com -->
+    <title>accounts</title>
+    <desc>Created with Sketch.</desc>
+    <g id="accounts" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M16.4262,4 C17.5322,4 18.4262,5.01 18.4262,6.258 L18.4262,6.258 L18.4262,6.746 L19.0002,6.746 C20.1042,6.746 21.0002,7.647 21.0002,8.759 L21.0002,8.759 L21.0002,10.702 L17.4292,10.702 C15.9662,10.702 14.7792,11.896 14.7792,13.37 L14.7792,13.37 C14.7792,14.849 15.9662,16.044 17.4292,16.044 L17.4292,16.044 L21.0002,16.044 L21.0002,17.986 C21.0002,19.098 20.1042,20 19.0002,20 L19.0002,20 L5.0002,20 C3.8952,20 3.0002,19.098 3.0002,17.986 L3.0002,17.986 L3.0002,6.258 C3.0002,5.01 3.8952,4 5.0002,4 L5.0002,4 Z M20.9994,11.9168 L20.9994,14.8288 L17.4744,14.8288 C16.6904,14.8288 16.0544,14.1768 16.0544,13.3728 C16.0544,12.5678 16.6904,11.9168 17.4744,11.9168 L17.4744,11.9168 L20.9994,11.9168 Z M17.5054,12.6338 C17.1074,12.6338 16.7844,12.9648 16.7844,13.3728 C16.7844,13.7808 17.1074,14.1118 17.5054,14.1118 C17.9034,14.1118 18.2264,13.7808 18.2264,13.3728 C18.2264,12.9648 17.9034,12.6338 17.5054,12.6338 Z M16.2452,5.446 L5.2382,5.446 C4.8732,5.446 4.5732,5.74 4.5732,6.1 C4.5732,6.444 4.8502,6.721 5.1942,6.746 L5.1942,6.746 L16.9732,6.746 L16.9732,6.272 C16.9732,5.748 16.6672,5.446 16.2452,5.446 L16.2452,5.446 Z" id="icon-color" fill="currentColor" fill-rule="nonzero"></path>
+    </g>
+</svg>

package/src/lib/icons/svg/add.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 55.1 (78136) - https://sketchapp.com -->
+    <g id="add" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M11.274,12.7256 L5.2254,12.7256 C4.8254,12.7256 4.5004,12.4006 4.5004,11.9996 C4.5004,11.5996 4.8254,11.2746 5.2254,11.2746 L11.274,11.2746 L11.274,5.226 C11.274,4.825 11.599,4.5 12,4.5 C12.401,4.5 12.726,4.825 12.726,5.226 L12.726,11.2746 L18.7744,11.2746 C19.1744,11.2746 19.5004,11.5996 19.5004,11.9996 C19.5004,12.4006 19.1744,12.7256 18.7744,12.7256 L12.726,12.7256 L12.726,18.774 C12.726,19.175 12.401,19.5 12,19.5 C11.599,19.5 11.274,19.175 11.274,18.774 L11.274,12.7256 Z" id="icon-color" fill="currentColor" fill-rule="nonzero"></path>
+    </g>
+</svg>

package/src/lib/icons/svg/arrow-back.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 55.1 (78136) - https://sketchapp.com -->
+    <g id="arrow-back" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M15.1896,18.9998 C14.9736,18.9998 14.7596,18.9218 14.6006,18.7678 L8.2116,12.4948 C7.9296,12.2178 7.9296,11.7908 8.2116,11.5138 L14.6116,5.2328 C14.9126,4.9388 15.4186,4.9208 15.7436,5.1918 C16.0666,5.4628 16.0876,5.9208 15.7886,6.2148 L9.8886,12.0038 L15.7786,17.7848 C16.0776,18.0788 16.0566,18.5368 15.7326,18.8088 C15.5786,18.9378 15.3836,18.9998 15.1896,18.9998" id="icon-color" fill="currentColor" fill-rule="nonzero"></path>
+    </g>
+</svg>

package/src/lib/icons/svg/arrow-down.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 55.1 (78136) - https://sketchapp.com -->
+    <g id="arrow-down" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M15.1895231,18.9999293 C14.9735231,18.9999293 14.7595231,18.9219293 14.6005231,18.7679293 L8.21152308,12.4949293 C7.92952308,12.2179293 7.92952308,11.7909293 8.21152308,11.5139293 L14.6115231,5.23292929 C14.9125231,4.93892929 15.4185231,4.92092929 15.7435231,5.19192929 C16.0665231,5.46292929 16.0875231,5.92092929 15.7885231,6.21492929 L9.88852308,12.0039293 L15.7785231,17.7849293 C16.0775231,18.0789293 16.0565231,18.5369293 15.7325231,18.8089293 C15.5785231,18.9379293 15.3835231,18.9999293 15.1895231,18.9999293" id="icon-color" fill="currentColor" fill-rule="nonzero" transform="translate(11.999976, 11.999953) rotate(-90.000000) translate(-11.999976, -11.999953) "></path>
+    </g>
+</svg>

package/src/lib/icons/svg/arrow-more.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 55.1 (78136) - https://sketchapp.com -->
+    <g id="arrow-more" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M15.1895,18.9999524 C14.9735,18.9999524 14.7595,18.9219524 14.6005,18.7679524 L8.2115,12.4949524 C7.9295,12.2179524 7.9295,11.7909524 8.2115,11.5139524 L14.6115,5.23295237 C14.9125,4.93895237 15.4185,4.92095237 15.7435,5.19195237 C16.0665,5.46295237 16.0875,5.92095237 15.7885,6.21495237 L9.8885,12.0039524 L15.7785,17.7849524 C16.0775,18.0789524 16.0565,18.5369524 15.7325,18.8089524 C15.5785,18.9379524 15.3835,18.9999524 15.1895,18.9999524" id="icon-color" fill="currentColor" fill-rule="nonzero" transform="translate(11.999953, 11.999976) rotate(-180.000000) translate(-11.999953, -11.999976) "></path>
+    </g>
+</svg>

package/src/lib/icons/svg/arrow-up.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 55.1 (78136) - https://sketchapp.com -->
+    <g id="arrow-up" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M15.1895231,18.9999293 C14.9735231,18.9999293 14.7595231,18.9219293 14.6005231,18.7679293 L8.21152308,12.4949293 C7.92952308,12.2179293 7.92952308,11.7909293 8.21152308,11.5139293 L14.6115231,5.23292929 C14.9125231,4.93892929 15.4185231,4.92092929 15.7435231,5.19192929 C16.0665231,5.46292929 16.0875231,5.92092929 15.7885231,6.21492929 L9.88852308,12.0039293 L15.7785231,17.7849293 C16.0775231,18.0789293 16.0565231,18.5369293 15.7325231,18.8089293 C15.5785231,18.9379293 15.3835231,18.9999293 15.1895231,18.9999293" id="icon-color" fill="currentColor" fill-rule="nonzero" transform="translate(11.999976, 11.999953) rotate(-270.000000) translate(-11.999976, -11.999953) "></path>
+    </g>
+</svg>

package/src/lib/icons/svg/attach.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 55.1 (78136) - https://sketchapp.com -->
+    <g id="attach" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M9.18,19.9996 C8.247,19.9996 7.325,19.7276 6.56,19.2126 C4.459,17.7986 3.86,14.8546 5.253,12.7846 L9.317,6.7446 C9.555,6.3906 10.034,6.2966 10.388,6.5346 C10.742,6.7726 10.836,7.2526 10.598,7.6056 L6.534,13.6466 C5.609,15.0226 6.015,16.9846 7.422,17.9326 C8.087,18.3786 8.935,18.5516 9.746,18.4056 C10.574,18.2576 11.277,17.8076 11.726,17.1396 L17.619,8.3796 C17.901,7.9596 18.011,7.4666 17.929,6.9906 C17.848,6.5216 17.587,6.1186 17.193,5.8536 C16.347,5.2846 15.151,5.5056 14.59,6.3416 L9.37,14.1006 C9.205,14.3456 9.262,14.6746 9.497,14.8336 C9.732,14.9926 10.062,14.9226 10.227,14.6766 L13.888,9.2346 C14.126,8.8816 14.604,8.7876 14.96,9.0246 C15.314,9.2626 15.407,9.7426 15.17,10.0966 L11.508,15.5386 C10.868,16.4906 9.58,16.7476 8.635,16.1146 C7.694,15.4796 7.449,14.1896 8.089,13.2376 L13.308,5.4806 C14.336,3.9496 16.509,3.5346 18.055,4.5726 C18.802,5.0756 19.297,5.8406 19.45,6.7266 C19.601,7.5976 19.405,8.4906 18.899,9.2416 L13.007,18.0016 C12.323,19.0196 11.261,19.7026 10.019,19.9256 C9.741,19.9766 9.46,19.9996 9.18,19.9996" id="icon-color" fill="currentColor" fill-rule="nonzero"></path>
+    </g>
+</svg>

package/src/lib/icons/svg/backspace.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 57.1 (83088) - https://sketch.com -->
+    <title>backspace</title>
+    <desc>Created with Sketch.</desc>
+    <g id="backspace" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M22,3 C23.1,3 24,3.9 24,5 L24,5 L24,19 C24,20.1 23.1,21 22,21 L22,21 L7,21 C6.31,21 5.77,20.64 5.41,20.11 L5.41,20.11 L0,12 L5.41,3.88 C5.77,3.35 6.31,3 7,3 L7,3 Z M17.59,7 L14,10.59 L10.41,7 L9,8.41 L12.59,12 L9,15.59 L10.41,17 L14,13.41 L17.59,17 L19,15.59 L15.41,12 L19,8.41 L17.59,7 Z" id="icon-color" fill="currentColor" fill-rule="nonzero"></path>
+    </g>
+</svg>