@popsure/dirty-swan 0.31.1 → 0.32.0

package/src/lib/components/autocompleteAddress/index.stories.tsx

@@ -0,0 +1,147 @@
+import { Address } from '@popsure/public-models';
+import { useState } from 'react';
+import { AutocompleteAddress, AutocompleteAddressProps } from '.';
+
+const story = {
+  title: 'JSX/AutocompleteAddress',
+  component: AutocompleteAddress,
+  argTypes: {
+    address: {
+      description: 'The address properties',
+      table: {
+        type: { 
+          summary: 'Partial<Address>'
+        },
+      },
+    },
+    apiKey: {
+      defaultValue: 'AIzaSyDg0DSrjYKt5smmsjkVasDz7c4T5rbOXT8',
+      description: 'Your private API key for the [Google Places API](https://developers.google.com/maps/documentation/places/web-service/overview)',
+      table: {
+        type: { 
+          summary: 'Partial<Address>'
+        },
+      },
+    },
+    onAddressChange: {
+      description: 'Callback with the updated address, this function will get called everytime the address gets updated',
+      action: true,
+      table: {
+        category: "Callbacks",
+      },
+    },
+    manualAddressEntryTexts: {
+      description: 'The CTA that enables manual address entry and the text preceding it',
+      table: {
+        type: {
+            summary: '{ preText?: string; cta: string?; }'
+        }
+      }
+    },
+    placeholders: {
+      description: 'Placeholder text',
+      table: {
+        type: {
+            summary: '{ manualAddressEntry?: string; street: string?; houseNumber?: string; additionalInformation?: string; postcode?: string; city?: string; }'
+        }
+      }
+    }
+  },
+  parameters: {
+    componentSubtitle: 'Autocomplete Address are user interface elements which allow users start typing an address and get autocompletion suggestions on the address.',
+    docs: {
+      description: {
+          component: 'This component is for now only restricted to "address" types and will restrict every query to Germany.',
+      },
+    },
+    customTypes: {
+      Address: `interface Address {
+          street: string;
+          houseNumber: string;
+          postcode: string;
+          city: string;
+          additionalInformation?: string;
+          country: string;
+      }`
+    }
+  },
+};
+
+export const AutocompleteAddressStory = ({
+  address: defaultAddress,
+  apiKey,
+  manualAddressEntryTexts,
+  onAddressChange,
+  placeholders,
+}: AutocompleteAddressProps) => {
+  const [address, setAddress] = useState<Partial<Address> | undefined>(defaultAddress);
+  const handleOnAddressChange = (newAddress: Partial<Address>) => {
+    onAddressChange(newAddress);
+    setAddress(newAddress);
+  };
+
+  return (
+    <AutocompleteAddress
+      address={address}
+      apiKey={apiKey}
+      manualAddressEntryTexts={manualAddressEntryTexts}
+      onAddressChange={handleOnAddressChange}
+      placeholders={placeholders}
+    />
+  );
+};
+
+AutocompleteAddressStory.storyName = "AutocompleteAddress";
+
+export const WithAddress = ({
+  apiKey,
+  onAddressChange,
+  placeholders,
+}: AutocompleteAddressProps) => (
+    <AutocompleteAddress
+      address={{
+        street: 'Lohmuehlenstraße',
+        houseNumber: '65',
+        city: 'Berlin',
+        country: 'DE',
+        additionalInformation: 'c/o Factory',
+      }}
+      apiKey={apiKey}
+      onAddressChange={onAddressChange}
+    />
+);
+
+export const WithLocalisationEntryText = ({
+  apiKey,
+  onAddressChange,
+}: AutocompleteAddressProps) => (
+  <AutocompleteAddress
+    apiKey={apiKey}
+    manualAddressEntryTexts={{
+      preText: 'Oder ',
+      cta: 'Adresse direkt eingeben',
+    }}
+    onAddressChange={onAddressChange}
+  />
+);
+
+export const WithLocalisationPlaceholders = ({
+  apiKey,
+  onAddressChange,
+}: AutocompleteAddressProps) => (
+  <AutocompleteAddress
+    address={{}}
+    apiKey={apiKey}
+    placeholders={{
+      manualAddressEntry: 'Adresse suchen',
+      street: 'Straße',
+      houseNumber: 'Hausnummer',
+      additionalInformation: 'Adresszusatz (c/o, z.Hd., o.V.i.A, ...)',
+      postcode: 'PLZ',
+      city: 'Stadt',
+    }}
+    onAddressChange={onAddressChange}
+  />
+);
+
+export default story;

package/src/lib/components/autocompleteAddress/index.test.tsx

@@ -1,7 +1,7 @@
 import { Address } from '@popsure/public-models';
 import { fireEvent, render } from '../../util/testUtils';
 
-import AutoCompleteAddress from '.';
+import { AutocompleteAddress } from '.';
 
 const address = {
   street: 'Köpeniker Strasse',
@@ -16,7 +16,7 @@ const setup = (
   onAddressChange: (address: Partial<Address>) => void = () => {}
 ) => {
   return render(
-    <AutoCompleteAddress
+    <AutocompleteAddress
       address={address}
       apiKey={''}
       onAddressChange={onAddressChange}

package/src/lib/components/autocompleteAddress/index.tsx

@@ -49,13 +49,7 @@ const loadGoogleMapsApiDynamically = (callback: () => void, apiKey: string) => {
   };
 };
 
-const AutoCompleteAddress = ({
-  apiKey,
-  address: initialAddress,
-  onAddressChange,
-  placeholders,
-  manualAddressEntryTexts,
-}: {
+export interface AutocompleteAddressProps {
   apiKey: string;
   address?: Partial<Address>;
   onAddressChange: (address: Partial<Address>) => void;
@@ -71,7 +65,15 @@ const AutoCompleteAddress = ({
     preText?: string;
     cta?: string;
   };
-}) => {
+}
+
+const AutocompleteAddress = ({
+  apiKey,
+  address: initialAddress,
+  onAddressChange,
+  placeholders,
+  manualAddressEntryTexts,
+}: AutocompleteAddressProps) => {
   const [manualAddressEntry, setManualAddressEntry] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const autocomplete = useRef<google.maps.places.Autocomplete | null>(null);
@@ -349,4 +351,4 @@ const AutoCompleteAddress = ({
   );
 };
 
-export default AutoCompleteAddress;
+export { AutocompleteAddress };

package/src/lib/components/comparisonTable/components/Row/style.module.scss

@@ -8,7 +8,7 @@ $cell-min-width: var(--cellWidth, 256px);
 
   & > div {
     width: var(--tableWidth);
-    max-width: var(--tableWidth);
+    max-width: 100vw;
 
     &:nth-child(n + 3) {
       margin: 0;
@@ -16,6 +16,7 @@ $cell-min-width: var(--cellWidth, 256px);
 
     @include p-size-tablet {
       width: $cell-min-width;
+      max-width: var(--tableWidth);
       scroll-snap-align: unset;
     }
   }

package/src/lib/components/segmentedControl/index.stories.tsx

@@ -28,11 +28,7 @@ const story = {
     selectedIndex: 0,
   },
   parameters: {
-    docs: {
-      description: {
-        component: 'A segmented control is a linear set of two or more segments, each of which functions as a mutually exclusive button.',
-      },
-    },
+    componentSubtitle: 'A segmented control is a linear set of two or more segments, each of which functions as a mutually exclusive button.',
   },
 };
 

package/src/lib/index.tsx

@@ -1,6 +1,6 @@
 import DateSelector from './components/dateSelector';
 import SignaturePad from './components/signaturePad';
-import AutocompleteAddress from './components/autocompleteAddress';
+import { AutocompleteAddress } from './components/autocompleteAddress';
 import Input from './components/input';
 import MultiDropzone, { 
   FileType,
@@ -38,6 +38,7 @@ import {
 } from './components/comparisonTable';
 import { SegmentedControl } from './components/segmentedControl';
 import Markdown from './components/markdown';
+import { images } from './util/images';
 
 export {
   DateSelector,
@@ -68,6 +69,7 @@ export {
   TableInfoButton,
   SegmentedControl,
   Markdown,
+  images,
 };
 
 export type {

package/src/lib/util/images/index.stories.tsx

@@ -0,0 +1,27 @@
+import { images } from "../../util/images";
+
+const story = {
+  title: 'Utils/Images',
+  parameters: {
+    docs: {
+      description: {
+        component: 'Use the `images` object export to access our list of available images.',
+      },
+    },
+  }
+};
+
+
+export const Images = () => (
+  <div className='d-flex gap8 f-wrap'>
+    {Object.entries(images).map(([key, value]) => (
+      <div key={key} className="ws3 d-flex fd-column ai-center br4 p24 pt16 pb16 bg-grey-100">
+        <span className='p-p--small mb8'>{key}</span>
+        
+        <img alt={key} src={value} />
+      </div>
+    ))}
+  </div>
+);
+
+export default story;

package/src/lib/util/images/index.ts

@@ -0,0 +1,12 @@
+const images = {
+  aid: 'https://assets.cdn.feather-insurance.com/assets/images/aid.svg',
+  bed: 'https://assets.cdn.feather-insurance.com/assets/images/bed.svg',
+  bigDog: 'https://assets.cdn.feather-insurance.com/assets/images/bigDog.svg',
+  brokenAquarium: 'https://assets.cdn.feather-insurance.com/assets/images/brokenAquarium.svg',
+  brokenGlass: 'https://assets.cdn.feather-insurance.com/assets/images/brokenGlass.svg',
+  damagedLaptop: 'https://assets.cdn.feather-insurance.com/assets/images/damagedLaptop.svg',
+  moneyIncome: 'https://assets.cdn.feather-insurance.com/assets/images/moneyIncome.svg',
+  washingMachine: 'https://assets.cdn.feather-insurance.com/assets/images/washingMachine.svg',
+} as const;
+
+export { images };

package/dist/cjs/lib/components/autocompleteAddress/demo.d.ts

@@ -1,4 +0,0 @@
-export declare const WithoutAddress: () => JSX.Element;
-export declare const WithAddress: () => JSX.Element;
-export declare const WithoutAddressLocalized: () => JSX.Element;
-export declare const WithAddressLocalized: () => JSX.Element;

package/dist/esm/components/autocompleteAddress/demo.js

@@ -1,64 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { useState } from 'react';
-import AutoCompleteAddress from './index.js';
-import '../../tslib.es6-5bc94358.js';
-import '../../index-e9e37a34.js';
-import '../../index-1463d5e9.js';
-import '../../_commonjsHelpers-e7f67fd8.js';
-import '../input/index.js';
-import '../../index-fb46adf9.js';
-import '../../style-inject.es-1f59c1d0.js';
-
-var WithoutAddress = function () {
-    var _a = useState(undefined), address = _a[0], setAddress = _a[1];
-    return (jsx(AutoCompleteAddress, { onAddressChange: function (address) {
-            setAddress(address);
-        }, address: address, apiKey: "AIzaSyDg0DSrjYKt5smmsjkVasDz7c4T5rbOXT8" }, void 0));
-};
-var WithAddress = function () {
-    var _a = useState({
-        street: 'Lohmuehlenstraße',
-        houseNumber: '65',
-        city: 'Berlin',
-        country: 'DE',
-        additionalInformation: 'c/o Factory',
-    }), address = _a[0], setAddress = _a[1];
-    return (jsx(AutoCompleteAddress, { onAddressChange: function (address) {
-            setAddress(address);
-        }, address: address, apiKey: "AIzaSyDg0DSrjYKt5smmsjkVasDz7c4T5rbOXT8" }, void 0));
-};
-var WithoutAddressLocalized = function () {
-    var _a = useState(), address = _a[0], setAddress = _a[1];
-    return (jsx(AutoCompleteAddress, { onAddressChange: function (address) {
-            setAddress(address);
-        }, address: address, apiKey: "AIzaSyDg0DSrjYKt5smmsjkVasDz7c4T5rbOXT8", placeholders: {
-            manualAddressEntry: 'Adresse suchen',
-            street: 'Straße',
-            houseNumber: 'Hausnummer',
-            additionalInformation: 'Adresszusatz (c/o, z. Hd., o.V.i.A, ...)',
-            postcode: 'PLZ',
-            city: 'Stadt',
-        }, manualAddressEntryTexts: {
-            preText: 'Oder ',
-            cta: 'Adresse direkt eingeben',
-        } }, void 0));
-};
-var WithAddressLocalized = function () {
-    var _a = useState({}), address = _a[0], setAddress = _a[1];
-    return (jsx(AutoCompleteAddress, { onAddressChange: function (address) {
-            setAddress(address);
-        }, address: address, apiKey: "AIzaSyDg0DSrjYKt5smmsjkVasDz7c4T5rbOXT8", placeholders: {
-            manualAddressEntry: 'Adresse suchen',
-            street: 'Straße',
-            houseNumber: 'Hausnummer',
-            additionalInformation: 'Adresszusatz (c/o, z.Hd., o.V.i.A, ...)',
-            postcode: 'PLZ',
-            city: 'Stadt',
-        }, manualAddressEntryTexts: {
-            preText: 'Oder ',
-            cta: 'Adresse direkt eingeben',
-        } }, void 0));
-};
-
-export { WithAddress, WithAddressLocalized, WithoutAddress, WithoutAddressLocalized };
-//# sourceMappingURL=demo.js.map

package/dist/esm/components/autocompleteAddress/demo.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"demo.js","sources":["../../../../../src/lib/components/autocompleteAddress/demo.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Address } from '@popsure/public-models';\n\nimport AutoCompleteAddress from '.';\n\nexport const WithoutAddress = () => {\n  const [address, setAddress] = useState<Partial<Address> | undefined>(\n    undefined\n  );\n  return (\n    <AutoCompleteAddress\n      onAddressChange={(address) => {\n        setAddress(address);\n      }}\n      address={address}\n      apiKey=\"AIzaSyDg0DSrjYKt5smmsjkVasDz7c4T5rbOXT8\"\n    />\n  );\n};\n\nexport const WithAddress = () => {\n  const [address, setAddress] = useState<Partial<Address> | undefined>({\n    street: 'Lohmuehlenstraße',\n    houseNumber: '65',\n    city: 'Berlin',\n    country: 'DE',\n    additionalInformation: 'c/o Factory',\n  });\n  return (\n    <AutoCompleteAddress\n      onAddressChange={(address) => {\n        setAddress(address);\n      }}\n      address={address}\n      apiKey=\"AIzaSyDg0DSrjYKt5smmsjkVasDz7c4T5rbOXT8\"\n    />\n  );\n};\n\nexport const WithoutAddressLocalized = () => {\n  const [address, setAddress] = useState<Partial<Address> | undefined>();\n  return (\n    <AutoCompleteAddress\n      onAddressChange={(address) => {\n        setAddress(address);\n      }}\n      address={address}\n      apiKey=\"AIzaSyDg0DSrjYKt5smmsjkVasDz7c4T5rbOXT8\"\n      placeholders={{\n        manualAddressEntry: 'Adresse suchen',\n        street: 'Straße',\n        houseNumber: 'Hausnummer',\n        additionalInformation: 'Adresszusatz (c/o, z. Hd., o.V.i.A, ...)',\n        postcode: 'PLZ',\n        city: 'Stadt',\n      }}\n      manualAddressEntryTexts={{\n        preText: 'Oder ',\n        cta: 'Adresse direkt eingeben',\n      }}\n    />\n  );\n};\n\nexport const WithAddressLocalized = () => {\n  const [address, setAddress] = useState<Partial<Address> | undefined>({});\n  return (\n    <AutoCompleteAddress\n      onAddressChange={(address) => {\n        setAddress(address);\n      }}\n      address={address}\n      apiKey=\"AIzaSyDg0DSrjYKt5smmsjkVasDz7c4T5rbOXT8\"\n      placeholders={{\n        manualAddressEntry: 'Adresse suchen',\n        street: 'Straße',\n        houseNumber: 'Hausnummer',\n        additionalInformation: 'Adresszusatz (c/o, z.Hd., o.V.i.A, ...)',\n        postcode: 'PLZ',\n        city: 'Stadt',\n      }}\n      manualAddressEntryTexts={{\n        preText: 'Oder ',\n        cta: 'Adresse direkt eingeben',\n      }}\n    />\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;IAKa,cAAc,GAAG;IACtB,IAAA,KAAwB,QAAQ,CACpC,SAAS,CACV,EAFM,OAAO,QAAA,EAAE,UAAU,QAEzB,CAAC;IACF,QACEA,IAAC,mBAAmB,IAClB,eAAe,EAAE,UAAC,OAAO;YACvB,UAAU,CAAC,OAAO,CAAC,CAAC;SACrB,EACD,OAAO,EAAE,OAAO,EAChB,MAAM,EAAC,yCAAyC,WAChD,EACF;AACJ,EAAE;IAEW,WAAW,GAAG;IACnB,IAAA,KAAwB,QAAQ,CAA+B;QACnE,MAAM,EAAE,kBAAkB;QAC1B,WAAW,EAAE,IAAI;QACjB,IAAI,EAAE,QAAQ;QACd,OAAO,EAAE,IAAI;QACb,qBAAqB,EAAE,aAAa;KACrC,CAAC,EANK,OAAO,QAAA,EAAE,UAAU,QAMxB,CAAC;IACH,QACEA,IAAC,mBAAmB,IAClB,eAAe,EAAE,UAAC,OAAO;YACvB,UAAU,CAAC,OAAO,CAAC,CAAC;SACrB,EACD,OAAO,EAAE,OAAO,EAChB,MAAM,EAAC,yCAAyC,WAChD,EACF;AACJ,EAAE;IAEW,uBAAuB,GAAG;IAC/B,IAAA,KAAwB,QAAQ,EAAgC,EAA/D,OAAO,QAAA,EAAE,UAAU,QAA4C,CAAC;IACvE,QACEA,IAAC,mBAAmB,IAClB,eAAe,EAAE,UAAC,OAAO;YACvB,UAAU,CAAC,OAAO,CAAC,CAAC;SACrB,EACD,OAAO,EAAE,OAAO,EAChB,MAAM,EAAC,yCAAyC,EAChD,YAAY,EAAE;YACZ,kBAAkB,EAAE,gBAAgB;YACpC,MAAM,EAAE,QAAQ;YAChB,WAAW,EAAE,YAAY;YACzB,qBAAqB,EAAE,0CAA0C;YACjE,QAAQ,EAAE,KAAK;YACf,IAAI,EAAE,OAAO;SACd,EACD,uBAAuB,EAAE;YACvB,OAAO,EAAE,OAAO;YAChB,GAAG,EAAE,yBAAyB;SAC/B,WACD,EACF;AACJ,EAAE;IAEW,oBAAoB,GAAG;IAC5B,IAAA,KAAwB,QAAQ,CAA+B,EAAE,CAAC,EAAjE,OAAO,QAAA,EAAE,UAAU,QAA8C,CAAC;IACzE,QACEA,IAAC,mBAAmB,IAClB,eAAe,EAAE,UAAC,OAAO;YACvB,UAAU,CAAC,OAAO,CAAC,CAAC;SACrB,EACD,OAAO,EAAE,OAAO,EAChB,MAAM,EAAC,yCAAyC,EAChD,YAAY,EAAE;YACZ,kBAAkB,EAAE,gBAAgB;YACpC,MAAM,EAAE,QAAQ;YAChB,WAAW,EAAE,YAAY;YACzB,qBAAqB,EAAE,yCAAyC;YAChE,QAAQ,EAAE,KAAK;YACf,IAAI,EAAE,OAAO;SACd,EACD,uBAAuB,EAAE;YACvB,OAAO,EAAE,OAAO;YAChB,GAAG,EAAE,yBAAyB;SAC/B,WACD,EACF;AACJ;;;;"}

package/dist/esm/lib/components/autocompleteAddress/demo.d.ts

@@ -1,4 +0,0 @@
-export declare const WithoutAddress: () => JSX.Element;
-export declare const WithAddress: () => JSX.Element;
-export declare const WithoutAddressLocalized: () => JSX.Element;
-export declare const WithAddressLocalized: () => JSX.Element;

package/src/lib/components/autocompleteAddress/demo.tsx

@@ -1,88 +0,0 @@
-import React, { useState } from 'react';
-import { Address } from '@popsure/public-models';
-
-import AutoCompleteAddress from '.';
-
-export const WithoutAddress = () => {
-  const [address, setAddress] = useState<Partial<Address> | undefined>(
-    undefined
-  );
-  return (
-    <AutoCompleteAddress
-      onAddressChange={(address) => {
-        setAddress(address);
-      }}
-      address={address}
-      apiKey="AIzaSyDg0DSrjYKt5smmsjkVasDz7c4T5rbOXT8"
-    />
-  );
-};
-
-export const WithAddress = () => {
-  const [address, setAddress] = useState<Partial<Address> | undefined>({
-    street: 'Lohmuehlenstraße',
-    houseNumber: '65',
-    city: 'Berlin',
-    country: 'DE',
-    additionalInformation: 'c/o Factory',
-  });
-  return (
-    <AutoCompleteAddress
-      onAddressChange={(address) => {
-        setAddress(address);
-      }}
-      address={address}
-      apiKey="AIzaSyDg0DSrjYKt5smmsjkVasDz7c4T5rbOXT8"
-    />
-  );
-};
-
-export const WithoutAddressLocalized = () => {
-  const [address, setAddress] = useState<Partial<Address> | undefined>();
-  return (
-    <AutoCompleteAddress
-      onAddressChange={(address) => {
-        setAddress(address);
-      }}
-      address={address}
-      apiKey="AIzaSyDg0DSrjYKt5smmsjkVasDz7c4T5rbOXT8"
-      placeholders={{
-        manualAddressEntry: 'Adresse suchen',
-        street: 'Straße',
-        houseNumber: 'Hausnummer',
-        additionalInformation: 'Adresszusatz (c/o, z. Hd., o.V.i.A, ...)',
-        postcode: 'PLZ',
-        city: 'Stadt',
-      }}
-      manualAddressEntryTexts={{
-        preText: 'Oder ',
-        cta: 'Adresse direkt eingeben',
-      }}
-    />
-  );
-};
-
-export const WithAddressLocalized = () => {
-  const [address, setAddress] = useState<Partial<Address> | undefined>({});
-  return (
-    <AutoCompleteAddress
-      onAddressChange={(address) => {
-        setAddress(address);
-      }}
-      address={address}
-      apiKey="AIzaSyDg0DSrjYKt5smmsjkVasDz7c4T5rbOXT8"
-      placeholders={{
-        manualAddressEntry: 'Adresse suchen',
-        street: 'Straße',
-        houseNumber: 'Hausnummer',
-        additionalInformation: 'Adresszusatz (c/o, z.Hd., o.V.i.A, ...)',
-        postcode: 'PLZ',
-        city: 'Stadt',
-      }}
-      manualAddressEntryTexts={{
-        preText: 'Oder ',
-        cta: 'Adresse direkt eingeben',
-      }}
-    />
-  );
-};

package/src/lib/components/autocompleteAddress/index.stories.mdx

@@ -1,53 +0,0 @@
-import { useState } from 'react';
-
-import { Meta, Preview } from '@storybook/addon-docs/blocks';
-
-import AutocompleteAddress from '.';
-import {
-  WithoutAddress,
-  WithoutAddressLocalized,
-  WithAddress,
-  WithAddressLocalized,
-} from './demo';
-
-<Meta title="JSX/Autocomplete Address" component={AutocompleteAddress} />
-
-# Autocomplete Address
-
-| attribute               | unit                                                                                                                                        | description                                                                                                                    | default value | required |
-| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ------------- | -------- |
-| address                 | `Partial<Address>`                                                                                                                          | The address                                                                                                                    | undefined     | false    |
-| onAddressChange         | `function (newAddress: Partial<Address>)`                                                                                                   | Callback with the updated address, this function will get called everytime the address gets updated.                           | n/a           | true     |
-| apiKey                  | string                                                                                                                                      | Your private API key for the [Google Places API](https://developers.google.com/maps/documentation/places/web-service/overview) | n/a           | true     |
-| placeholders            | `{ manualAddressEntry?: string; street: string?; houseNumber?: string; additionalInformation?: string; postcode?: string; city?: string; }` | Placeholder text                                                                                                               | undefined     | false    |
-| manualAddressEntryTexts | `{ preText?: string; cta: string?; }`                                                                                                       | The CTA that enables manual address entry and the text preceding it                                                            | undefined     | false    |
-
-Autocomplete Address are user interface elements which allow users start typing an address and get autocompletion suggestions on the address.
-
-## Important notes
-
-This component is for now only restricted to "address" types and will restrict every query to Germany.
-
-## Default example
-
-### Input without an address filled
-
-<WithoutAddress />
-
-### Input with an address filled
-
-<WithAddress />
-
-### Localized inputs
-
-<WithoutAddressLocalized />
-<WithAddressLocalized />
-
-```typescript import React, {useState} from 'react'; import {Address} from '@popsure/public-models';
-import AutoCompleteAddress from '.';
-
-export default () => {
-  const [address, setAddress] = useState<Address>(undefined);
-  return <AutoCompleteAddress onAddressChange={setAddress} address={address} />;
-};
-```