@popsure/dirty-swan 0.31.2 → 0.32.0

package/dist/esm/components/autocompleteAddress/index.stories.js

@@ -0,0 +1,110 @@
+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 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 {\n          street: string;\n          houseNumber: string;\n          postcode: string;\n          city: string;\n          additionalInformation?: string;\n          country: string;\n      }"
+        }
+    },
+};
+var AutocompleteAddressStory = function (_a) {
+    var defaultAddress = _a.address, apiKey = _a.apiKey, manualAddressEntryTexts = _a.manualAddressEntryTexts, onAddressChange = _a.onAddressChange, placeholders = _a.placeholders;
+    var _b = useState(defaultAddress), address = _b[0], setAddress = _b[1];
+    var handleOnAddressChange = function (newAddress) {
+        onAddressChange(newAddress);
+        setAddress(newAddress);
+    };
+    return (jsx(AutocompleteAddress, { address: address, apiKey: apiKey, manualAddressEntryTexts: manualAddressEntryTexts, onAddressChange: handleOnAddressChange, placeholders: placeholders }, void 0));
+};
+AutocompleteAddressStory.storyName = "AutocompleteAddress";
+var WithAddress = function (_a) {
+    var apiKey = _a.apiKey, onAddressChange = _a.onAddressChange; _a.placeholders;
+    return (jsx(AutocompleteAddress, { address: {
+            street: 'Lohmuehlenstraße',
+            houseNumber: '65',
+            city: 'Berlin',
+            country: 'DE',
+            additionalInformation: 'c/o Factory',
+        }, apiKey: apiKey, onAddressChange: onAddressChange }, void 0));
+};
+var WithLocalisationEntryText = function (_a) {
+    var apiKey = _a.apiKey, onAddressChange = _a.onAddressChange;
+    return (jsx(AutocompleteAddress, { apiKey: apiKey, manualAddressEntryTexts: {
+            preText: 'Oder ',
+            cta: 'Adresse direkt eingeben',
+        }, onAddressChange: onAddressChange }, void 0));
+};
+var WithLocalisationPlaceholders = function (_a) {
+    var apiKey = _a.apiKey, onAddressChange = _a.onAddressChange;
+    return (jsx(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 }, void 0));
+};
+
+export default story;
+export { AutocompleteAddressStory, WithAddress, WithLocalisationEntryText, WithLocalisationPlaceholders };
+//# sourceMappingURL=index.stories.js.map

package/dist/esm/components/autocompleteAddress/index.stories.js.map

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

package/dist/esm/components/autocompleteAddress/index.test.js

@@ -1,7 +1,7 @@
 import { b as __awaiter, c as __generator } from '../../tslib.es6-5bc94358.js';
 import { jsx } from 'react/jsx-runtime';
 import { c as customRender, f as fireEvent } from '../../customRender-4157fcff.js';
-import AutoCompleteAddress from './index.js';
+import { AutocompleteAddress } from './index.js';
 import 'react';
 import 'react-dom';
 import '../../_commonjsHelpers-e7f67fd8.js';
@@ -22,7 +22,7 @@ var address = {
 var setup = function (address, onAddressChange) {
     if (address === void 0) { address = undefined; }
     if (onAddressChange === void 0) { onAddressChange = function () { }; }
-    return customRender(jsx(AutoCompleteAddress, { address: address, apiKey: '', onAddressChange: onAddressChange }, void 0));
+    return customRender(jsx(AutocompleteAddress, { address: address, apiKey: '', onAddressChange: onAddressChange }, void 0));
 };
 var inputTestId = 'ds-input-input';
 describe('AutocompleteAddress component', function () {

package/dist/esm/components/autocompleteAddress/index.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.test.js","sources":["../../../../../src/lib/components/autocompleteAddress/index.test.tsx"],"sourcesContent":["import { Address } from '@popsure/public-models';\nimport { fireEvent, render } from '../../util/testUtils';\n\nimport AutoCompleteAddress from '.';\n\nconst address = {\n  street: 'Köpeniker Strasse',\n  houseNumber: '4000',\n  postcode: '10179',\n  city: 'Berlin',\n  country: 'DE',\n};\n\nconst setup = (\n  address: Partial<Address> | undefined = undefined,\n  onAddressChange: (address: Partial<Address>) => void = () => {}\n) => {\n  return render(\n    <AutoCompleteAddress\n      address={address}\n      apiKey={''}\n      onAddressChange={onAddressChange}\n    />\n  );\n};\n\nconst inputTestId = 'ds-input-input';\n\ndescribe('AutocompleteAddress component', () => {\n  it('Should show all address fields once a search is completed', async () => {\n    // @ts-ignore\n    window.google.maps.places.Autocomplete = class {\n      reference: HTMLElement;\n      constructor(reference: HTMLElement) {\n        this.reference = reference;\n      }\n      // @ts-ignore\n      addListener(_action, callback) {\n        this.reference.addEventListener('change', (e: Event) =>\n          (e.target as HTMLInputElement).value !== ''\n            ? callback({\n                geometry: {\n                  location: class {},\n                },\n                address_components: [\n                  {\n                    long_name: 'Köpeniker Strasse',\n                    short_name: 'Köpeniker Strasse',\n                    types: ['route'],\n                  },\n                ],\n              })\n            : null\n        );\n      }\n    };\n\n    const { getAllByTestId, getByDisplayValue, getByTestId } = setup();\n\n    fireEvent.change(getByTestId(inputTestId), {\n      target: { value: 'Köpeniker' },\n    });\n\n    expect(getAllByTestId(inputTestId).length).toEqual(5);\n    expect(getByDisplayValue(\"Köpeniker Strasse\")).toBeVisible();\n  });\n\n  it('Should enable to enter the address manually', async () => {\n    const callback = jest.fn();\n    const { findByText, getAllByTestId, user } = setup(undefined, callback);\n    const btn = await findByText('Enter address manually');\n\n    await user.click(btn);\n\n    // fill out all fields\n    const inputs = getAllByTestId(inputTestId);\n\n    await user.type(inputs[0], 'Köpeniker Strasse');\n    await user.type(inputs[1], '4000');\n    await user.type(inputs[3], '10179');\n    await user.type(inputs[4], 'Berlin');\n\n    // callback should be called with a complete address\n    expect(callback).toHaveBeenCalledWith(address);\n  });\n\n  it('Should prefill fields if an address is provided', async () => {\n    const { getByDisplayValue } = setup(address);\n\n    expect(getByDisplayValue(\"Köpeniker Strasse\")).toBeVisible();\n    expect(getByDisplayValue(\"4000\")).toBeVisible();\n    expect(getByDisplayValue(\"10179\")).toBeVisible();\n    expect(getByDisplayValue(\"Berlin\")).toBeVisible();\n  });\n});\n"],"names":["render","_jsx"],"mappings":"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"}
+{"version":3,"file":"index.test.js","sources":["../../../../../src/lib/components/autocompleteAddress/index.test.tsx"],"sourcesContent":["import { Address } from '@popsure/public-models';\nimport { fireEvent, render } from '../../util/testUtils';\n\nimport { AutocompleteAddress } from '.';\n\nconst address = {\n  street: 'Köpeniker Strasse',\n  houseNumber: '4000',\n  postcode: '10179',\n  city: 'Berlin',\n  country: 'DE',\n};\n\nconst setup = (\n  address: Partial<Address> | undefined = undefined,\n  onAddressChange: (address: Partial<Address>) => void = () => {}\n) => {\n  return render(\n    <AutocompleteAddress\n      address={address}\n      apiKey={''}\n      onAddressChange={onAddressChange}\n    />\n  );\n};\n\nconst inputTestId = 'ds-input-input';\n\ndescribe('AutocompleteAddress component', () => {\n  it('Should show all address fields once a search is completed', async () => {\n    // @ts-ignore\n    window.google.maps.places.Autocomplete = class {\n      reference: HTMLElement;\n      constructor(reference: HTMLElement) {\n        this.reference = reference;\n      }\n      // @ts-ignore\n      addListener(_action, callback) {\n        this.reference.addEventListener('change', (e: Event) =>\n          (e.target as HTMLInputElement).value !== ''\n            ? callback({\n                geometry: {\n                  location: class {},\n                },\n                address_components: [\n                  {\n                    long_name: 'Köpeniker Strasse',\n                    short_name: 'Köpeniker Strasse',\n                    types: ['route'],\n                  },\n                ],\n              })\n            : null\n        );\n      }\n    };\n\n    const { getAllByTestId, getByDisplayValue, getByTestId } = setup();\n\n    fireEvent.change(getByTestId(inputTestId), {\n      target: { value: 'Köpeniker' },\n    });\n\n    expect(getAllByTestId(inputTestId).length).toEqual(5);\n    expect(getByDisplayValue(\"Köpeniker Strasse\")).toBeVisible();\n  });\n\n  it('Should enable to enter the address manually', async () => {\n    const callback = jest.fn();\n    const { findByText, getAllByTestId, user } = setup(undefined, callback);\n    const btn = await findByText('Enter address manually');\n\n    await user.click(btn);\n\n    // fill out all fields\n    const inputs = getAllByTestId(inputTestId);\n\n    await user.type(inputs[0], 'Köpeniker Strasse');\n    await user.type(inputs[1], '4000');\n    await user.type(inputs[3], '10179');\n    await user.type(inputs[4], 'Berlin');\n\n    // callback should be called with a complete address\n    expect(callback).toHaveBeenCalledWith(address);\n  });\n\n  it('Should prefill fields if an address is provided', async () => {\n    const { getByDisplayValue } = setup(address);\n\n    expect(getByDisplayValue(\"Köpeniker Strasse\")).toBeVisible();\n    expect(getByDisplayValue(\"4000\")).toBeVisible();\n    expect(getByDisplayValue(\"10179\")).toBeVisible();\n    expect(getByDisplayValue(\"Berlin\")).toBeVisible();\n  });\n});\n"],"names":["render","_jsx"],"mappings":";;;;;;;;;;;;;;AAKA,IAAM,OAAO,GAAG;IACd,MAAM,EAAE,mBAAmB;IAC3B,WAAW,EAAE,MAAM;IACnB,QAAQ,EAAE,OAAO;IACjB,IAAI,EAAE,QAAQ;IACd,OAAO,EAAE,IAAI;CACd,CAAC;AAEF,IAAM,KAAK,GAAG,UACZ,OAAiD,EACjD,eAA+D;IAD/D,wBAAA,EAAA,mBAAiD;IACjD,gCAAA,EAAA,iCAA+D;IAE/D,OAAOA,YAAM,CACXC,IAAC,mBAAmB,IAClB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,EAAE,EACV,eAAe,EAAE,eAAe,WAChC,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,IAAM,WAAW,GAAG,gBAAgB,CAAC;AAErC,QAAQ,CAAC,+BAA+B,EAAE;IACxC,EAAE,CAAC,2DAA2D,EAAE;;;;YAE9D,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,YAAY;gBAEpC,iBAAY,SAAsB;oBAChC,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;iBAC5B;;gBAED,6BAAW,GAAX,UAAY,OAAO,EAAE,QAAQ;oBAC3B,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,UAAC,CAAQ;wBACjD,OAAC,CAAC,CAAC,MAA2B,CAAC,KAAK,KAAK,EAAE;8BACvC,QAAQ,CAAC;gCACP,QAAQ,EAAE;oCACR,QAAQ;wCAAE;yCAAQ;wCAAD,eAAC;qCAAA,GAAA;iCACnB;gCACD,kBAAkB,EAAE;oCAClB;wCACE,SAAS,EAAE,mBAAmB;wCAC9B,UAAU,EAAE,mBAAmB;wCAC/B,KAAK,EAAE,CAAC,OAAO,CAAC;qCACjB;iCACF;6BACF,CAAC;8BACF,IAAI;qBAAA,CACT,CAAC;iBACH;gBACH,cAAC;aAxBwC,GAwBxC,CAAC;YAEI,KAAqD,KAAK,EAAE,EAA1D,cAAc,oBAAA,EAAE,iBAAiB,uBAAA,EAAE,WAAW,iBAAA,CAAa;YAEnE,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,WAAW,CAAC,EAAE;gBACzC,MAAM,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE;aAC/B,CAAC,CAAC;YAEH,MAAM,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;YACtD,MAAM,CAAC,iBAAiB,CAAC,mBAAmB,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;;;SAC9D,CAAC,CAAC;IAEH,EAAE,CAAC,6CAA6C,EAAE;;;;;oBAC1C,QAAQ,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;oBACrB,KAAuC,KAAK,CAAC,SAAS,EAAE,QAAQ,CAAC,EAA/D,UAAU,gBAAA,EAAE,cAAc,oBAAA,EAAE,IAAI,UAAA,CAAgC;oBAC5D,qBAAM,UAAU,CAAC,wBAAwB,CAAC,EAAA;;oBAAhD,GAAG,GAAG,SAA0C;oBAEtD,qBAAM,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,EAAA;;oBAArB,SAAqB,CAAC;oBAGhB,MAAM,GAAG,cAAc,CAAC,WAAW,CAAC,CAAC;oBAE3C,qBAAM,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,mBAAmB,CAAC,EAAA;;oBAA/C,SAA+C,CAAC;oBAChD,qBAAM,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,EAAA;;oBAAlC,SAAkC,CAAC;oBACnC,qBAAM,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,EAAA;;oBAAnC,SAAmC,CAAC;oBACpC,qBAAM,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,QAAQ,CAAC,EAAA;;oBAApC,SAAoC,CAAC;;oBAGrC,MAAM,CAAC,QAAQ,CAAC,CAAC,oBAAoB,CAAC,OAAO,CAAC,CAAC;;;;SAChD,CAAC,CAAC;IAEH,EAAE,CAAC,iDAAiD,EAAE;;;YAC5C,iBAAiB,GAAK,KAAK,CAAC,OAAO,CAAC,kBAAnB,CAAoB;YAE7C,MAAM,CAAC,iBAAiB,CAAC,mBAAmB,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;YAC7D,MAAM,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;YAChD,MAAM,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;YACjD,MAAM,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;;;SACnD,CAAC,CAAC;AACL,CAAC,CAAC"}

package/dist/esm/components/segmentedControl/index.stories.js

@@ -31,11 +31,7 @@ var 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.',
     },
 };
 var SegmentedControlStory = function (_a) {

package/dist/esm/components/segmentedControl/index.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/components/segmentedControl/index.stories.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { SegmentedControl, SegmentedControlProps } from '.';\n\nconst story = {\n  title: 'JSX/SegmentedControl',\n  component: SegmentedControl,\n  argTypes: {\n    values: {\n      description: 'Array containing the text that needs to be displayed',\n      table: {\n        type: { \n          summary: 'string[] OR { title: string; subtitle: string;}[]'\n        },\n      },\n    },\n    selectedIndex: {\n      description: 'The currently selected index',\n    },\n    onChange: {\n      action: true,\n      table: {\n        category: \"Callbacks\",\n      },\n    },\n  },\n  args: {\n    values: ['Earth', 'Sun', 'Moon'],\n    selectedIndex: 0,\n  },\n  parameters: {\n    docs: {\n      description: {\n        component: 'A segmented control is a linear set of two or more segments, each of which functions as a mutually exclusive button.',\n      },\n    },\n  },\n};\n\nexport const SegmentedControlStory = ({\n  onChange,\n  selectedIndex,\n  values\n}: SegmentedControlProps) => {\n  const [index, setIndex] = useState(selectedIndex);\n\n  const handleOnChange = (newIndex: number) => {\n    onChange?.(newIndex);\n    setIndex(newIndex);\n  };\n\n  return (\n    <SegmentedControl\n      values={values}\n      selectedIndex={index}\n      onChange={handleOnChange}\n    />\n  );\n};\n\nSegmentedControlStory.storyName = \"SegmentedControl\";\n\nexport const SegmentedControlWithSubtitle = ({\n  onChange,\n  selectedIndex,\n  values\n}: SegmentedControlProps) => {\n  const [index, setIndex] = useState(selectedIndex);\n\n  const handleOnChange = (newIndex: number) => {\n    onChange?.(newIndex);\n    setIndex(newIndex);\n  };\n\n  return (\n    <SegmentedControl\n      values={[\n        { title: 'Basic', subtitle: '€288,65' },\n        { title: 'Premium', subtitle: '€288,65' },\n      ]}\n      selectedIndex={index}\n      onChange={handleOnChange}\n    />\n  );\n};\n\nexport default story;\n"],"names":["_jsx"],"mappings":";;;;;;IAGM,KAAK,GAAG;IACZ,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,gBAAgB;IAC3B,QAAQ,EAAE;QACR,MAAM,EAAE;YACN,WAAW,EAAE,sDAAsD;YACnE,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,mDAAmD;iBAC7D;aACF;SACF;QACD,aAAa,EAAE;YACb,WAAW,EAAE,8BAA8B;SAC5C;QACD,QAAQ,EAAE;YACR,MAAM,EAAE,IAAI;YACZ,KAAK,EAAE;gBACL,QAAQ,EAAE,WAAW;aACtB;SACF;KACF;IACD,IAAI,EAAE;QACJ,MAAM,EAAE,CAAC,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC;QAChC,aAAa,EAAE,CAAC;KACjB;IACD,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EAAE,sHAAsH;aAClI;SACF;KACF;EACD;IAEW,qBAAqB,GAAG,UAAC,EAId;QAHtB,QAAQ,cAAA,EACR,aAAa,mBAAA,EACb,MAAM,YAAA;IAEA,IAAA,KAAoB,QAAQ,CAAC,aAAa,CAAC,EAA1C,KAAK,QAAA,EAAE,QAAQ,QAA2B,CAAC;IAElD,IAAM,cAAc,GAAG,UAAC,QAAgB;QACtC,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,QAAQ,CAAC,CAAC;QACrB,QAAQ,CAAC,QAAQ,CAAC,CAAC;KACpB,CAAC;IAEF,QACEA,IAAC,gBAAgB,IACf,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,KAAK,EACpB,QAAQ,EAAE,cAAc,WACxB,EACF;AACJ,EAAE;AAEF,qBAAqB,CAAC,SAAS,GAAG,kBAAkB,CAAC;IAExC,4BAA4B,GAAG,UAAC,EAIrB;QAHtB,QAAQ,cAAA,EACR,aAAa,mBAAA;IAGP,IAAA,KAAoB,QAAQ,CAAC,aAAa,CAAC,EAA1C,KAAK,QAAA,EAAE,QAAQ,QAA2B,CAAC;IAElD,IAAM,cAAc,GAAG,UAAC,QAAgB;QACtC,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,QAAQ,CAAC,CAAC;QACrB,QAAQ,CAAC,QAAQ,CAAC,CAAC;KACpB,CAAC;IAEF,QACEA,IAAC,gBAAgB,IACf,MAAM,EAAE;YACN,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE;YACvC,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE;SAC1C,EACD,aAAa,EAAE,KAAK,EACpB,QAAQ,EAAE,cAAc,WACxB,EACF;AACJ;;;;;"}
+{"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/components/segmentedControl/index.stories.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { SegmentedControl, SegmentedControlProps } from '.';\n\nconst story = {\n  title: 'JSX/SegmentedControl',\n  component: SegmentedControl,\n  argTypes: {\n    values: {\n      description: 'Array containing the text that needs to be displayed',\n      table: {\n        type: { \n          summary: 'string[] OR { title: string; subtitle: string;}[]'\n        },\n      },\n    },\n    selectedIndex: {\n      description: 'The currently selected index',\n    },\n    onChange: {\n      action: true,\n      table: {\n        category: \"Callbacks\",\n      },\n    },\n  },\n  args: {\n    values: ['Earth', 'Sun', 'Moon'],\n    selectedIndex: 0,\n  },\n  parameters: {\n    componentSubtitle: 'A segmented control is a linear set of two or more segments, each of which functions as a mutually exclusive button.',\n  },\n};\n\nexport const SegmentedControlStory = ({\n  onChange,\n  selectedIndex,\n  values\n}: SegmentedControlProps) => {\n  const [index, setIndex] = useState(selectedIndex);\n\n  const handleOnChange = (newIndex: number) => {\n    onChange?.(newIndex);\n    setIndex(newIndex);\n  };\n\n  return (\n    <SegmentedControl\n      values={values}\n      selectedIndex={index}\n      onChange={handleOnChange}\n    />\n  );\n};\n\nSegmentedControlStory.storyName = \"SegmentedControl\";\n\nexport const SegmentedControlWithSubtitle = ({\n  onChange,\n  selectedIndex,\n  values\n}: SegmentedControlProps) => {\n  const [index, setIndex] = useState(selectedIndex);\n\n  const handleOnChange = (newIndex: number) => {\n    onChange?.(newIndex);\n    setIndex(newIndex);\n  };\n\n  return (\n    <SegmentedControl\n      values={[\n        { title: 'Basic', subtitle: '€288,65' },\n        { title: 'Premium', subtitle: '€288,65' },\n      ]}\n      selectedIndex={index}\n      onChange={handleOnChange}\n    />\n  );\n};\n\nexport default story;\n"],"names":["_jsx"],"mappings":";;;;;;IAGM,KAAK,GAAG;IACZ,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,gBAAgB;IAC3B,QAAQ,EAAE;QACR,MAAM,EAAE;YACN,WAAW,EAAE,sDAAsD;YACnE,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,mDAAmD;iBAC7D;aACF;SACF;QACD,aAAa,EAAE;YACb,WAAW,EAAE,8BAA8B;SAC5C;QACD,QAAQ,EAAE;YACR,MAAM,EAAE,IAAI;YACZ,KAAK,EAAE;gBACL,QAAQ,EAAE,WAAW;aACtB;SACF;KACF;IACD,IAAI,EAAE;QACJ,MAAM,EAAE,CAAC,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC;QAChC,aAAa,EAAE,CAAC;KACjB;IACD,UAAU,EAAE;QACV,iBAAiB,EAAE,sHAAsH;KAC1I;EACD;IAEW,qBAAqB,GAAG,UAAC,EAId;QAHtB,QAAQ,cAAA,EACR,aAAa,mBAAA,EACb,MAAM,YAAA;IAEA,IAAA,KAAoB,QAAQ,CAAC,aAAa,CAAC,EAA1C,KAAK,QAAA,EAAE,QAAQ,QAA2B,CAAC;IAElD,IAAM,cAAc,GAAG,UAAC,QAAgB;QACtC,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,QAAQ,CAAC,CAAC;QACrB,QAAQ,CAAC,QAAQ,CAAC,CAAC;KACpB,CAAC;IAEF,QACEA,IAAC,gBAAgB,IACf,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,KAAK,EACpB,QAAQ,EAAE,cAAc,WACxB,EACF;AACJ,EAAE;AAEF,qBAAqB,CAAC,SAAS,GAAG,kBAAkB,CAAC;IAExC,4BAA4B,GAAG,UAAC,EAIrB;QAHtB,QAAQ,cAAA,EACR,aAAa,mBAAA;IAGP,IAAA,KAAoB,QAAQ,CAAC,aAAa,CAAC,EAA1C,KAAK,QAAA,EAAE,QAAQ,QAA2B,CAAC;IAElD,IAAM,cAAc,GAAG,UAAC,QAAgB;QACtC,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,QAAQ,CAAC,CAAC;QACrB,QAAQ,CAAC,QAAQ,CAAC,CAAC;KACpB,CAAC;IAEF,QACEA,IAAC,gBAAgB,IACf,MAAM,EAAE;YACN,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE;YACvC,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE;SAC1C,EACD,aAAa,EAAE,KAAK,EACpB,QAAQ,EAAE,cAAc,WACxB,EACF;AACJ;;;;;"}

package/dist/esm/index-db2e797f.js

@@ -0,0 +1,13 @@
+var 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',
+};
+
+export { images as i };
+//# sourceMappingURL=index-db2e797f.js.map

package/dist/esm/index-db2e797f.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-db2e797f.js","sources":["../../../src/lib/util/images/index.ts"],"sourcesContent":["const images = {\n  aid: 'https://assets.cdn.feather-insurance.com/assets/images/aid.svg',\n  bed: 'https://assets.cdn.feather-insurance.com/assets/images/bed.svg',\n  bigDog: 'https://assets.cdn.feather-insurance.com/assets/images/bigDog.svg',\n  brokenAquarium: 'https://assets.cdn.feather-insurance.com/assets/images/brokenAquarium.svg',\n  brokenGlass: 'https://assets.cdn.feather-insurance.com/assets/images/brokenGlass.svg',\n  damagedLaptop: 'https://assets.cdn.feather-insurance.com/assets/images/damagedLaptop.svg',\n  moneyIncome: 'https://assets.cdn.feather-insurance.com/assets/images/moneyIncome.svg',\n  washingMachine: 'https://assets.cdn.feather-insurance.com/assets/images/washingMachine.svg',\n} as const;\n\nexport { images };"],"names":[],"mappings":"IAAM,MAAM,GAAG;IACb,GAAG,EAAE,gEAAgE;IACrE,GAAG,EAAE,gEAAgE;IACrE,MAAM,EAAE,mEAAmE;IAC3E,cAAc,EAAE,2EAA2E;IAC3F,WAAW,EAAE,wEAAwE;IACrF,aAAa,EAAE,0EAA0E;IACzF,WAAW,EAAE,wEAAwE;IACrF,cAAc,EAAE,2EAA2E;;;;;"}

package/dist/esm/index.d.ts

@@ -1,2 +1,2 @@
-export { DateSelector, SignaturePad, AutocompleteAddress, Input, MultiDropzone, IbanInput, CurrencyInput, BottomModal, RegularModal, BottomOrRegularModal, CardWithTopLeftIcon, CardWithLeftIcon, CardWithTopIcon, InfoCard, CardButton, Button, AutoSuggestMultiSelect, Chip, AutoSuggestInput, ComparisonTable, TableRating, TableTrueFalse, TableRowHeader, TableButton, TableInfoButton, SegmentedControl, DownloadButton, Markdown, } from './lib';
-export type { DownloadStatus, FileType, MultiDropzoneProps, TableHeader, UploadedFile, UploadStatus } from './lib';
+export { DateSelector, SignaturePad, AutocompleteAddress, Input, MultiDropzone, IbanInput, CurrencyInput, BottomModal, RegularModal, BottomOrRegularModal, CardWithTopLeftIcon, CardWithLeftIcon, CardWithTopIcon, InfoCard, CardButton, Button, AutoSuggestMultiSelect, Chip, AutoSuggestInput, ComparisonTable, TableRating, TableTrueFalse, TableRowHeader, TableButton, TableInfoButton, SegmentedControl, DownloadButton, Markdown, images } from './lib';
+export type { DownloadStatus, FileType, MultiDropzoneProps, TableHeader, UploadedFile, UploadStatus, } from './lib';

package/dist/esm/index.js

@@ -1,6 +1,6 @@
 export { default as DateSelector } from './components/dateSelector/index.js';
 export { default as SignaturePad } from './components/signaturePad/index.js';
-export { default as AutocompleteAddress } from './components/autocompleteAddress/index.js';
+export { AutocompleteAddress } from './components/autocompleteAddress/index.js';
 export { default as Input } from './components/input/index.js';
 export { default as MultiDropzone } from './components/multiDropzone/index.js';
 export { default as DownloadButton } from './components/downloadButton/index.js';
@@ -18,6 +18,7 @@ export { default as AutoSuggestInput } from './components/input/autoSuggestInput
 export { ComparisonTable } from './components/comparisonTable/index.js';
 export { SegmentedControl } from './components/segmentedControl/index.js';
 export { default as Markdown } from './components/markdown/index.js';
+export { i as images } from './index-db2e797f.js';
 export { default as TableRating } from './components/comparisonTable/components/TableRating/index.js';
 export { default as TableTrueFalse } from './components/comparisonTable/components/TableTrueFalse.js';
 export { default as TableRowHeader } from './components/comparisonTable/components/TableRowHeader/index.js';

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -1,19 +1,20 @@
 import { Address } from '@popsure/public-models';
-declare const AutoCompleteAddress: ({ apiKey, address: initialAddress, onAddressChange, placeholders, manualAddressEntryTexts, }: {
+export interface AutocompleteAddressProps {
     apiKey: string;
-    address?: Partial<Address> | undefined;
+    address?: Partial<Address>;
     onAddressChange: (address: Partial<Address>) => void;
     placeholders?: {
-        manualAddressEntry?: string | undefined;
-        street?: string | undefined;
-        houseNumber?: string | undefined;
-        additionalInformation?: string | undefined;
-        postcode?: string | undefined;
-        city?: string | undefined;
-    } | undefined;
+        manualAddressEntry?: string;
+        street?: string;
+        houseNumber?: string;
+        additionalInformation?: string;
+        postcode?: string;
+        city?: string;
+    };
     manualAddressEntryTexts?: {
-        preText?: string | undefined;
-        cta?: string | undefined;
-    } | undefined;
-}) => JSX.Element;
-export default AutoCompleteAddress;
+        preText?: string;
+        cta?: string;
+    };
+}
+declare const AutocompleteAddress: ({ apiKey, address: initialAddress, onAddressChange, placeholders, manualAddressEntryTexts, }: AutocompleteAddressProps) => JSX.Element;
+export { AutocompleteAddress };

package/dist/esm/lib/components/autocompleteAddress/index.stories.d.ts

@@ -0,0 +1,66 @@
+import { AutocompleteAddressProps } from '.';
+declare const story: {
+    title: string;
+    component: ({ apiKey, address: initialAddress, onAddressChange, placeholders, manualAddressEntryTexts, }: AutocompleteAddressProps) => JSX.Element;
+    argTypes: {
+        address: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        apiKey: {
+            defaultValue: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        onAddressChange: {
+            description: string;
+            action: boolean;
+            table: {
+                category: string;
+            };
+        };
+        manualAddressEntryTexts: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        placeholders: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+    };
+    parameters: {
+        componentSubtitle: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+        customTypes: {
+            Address: string;
+        };
+    };
+};
+export declare const AutocompleteAddressStory: {
+    ({ address: defaultAddress, apiKey, manualAddressEntryTexts, onAddressChange, placeholders, }: AutocompleteAddressProps): JSX.Element;
+    storyName: string;
+};
+export declare const WithAddress: ({ apiKey, onAddressChange, placeholders, }: AutocompleteAddressProps) => JSX.Element;
+export declare const WithLocalisationEntryText: ({ apiKey, onAddressChange, }: AutocompleteAddressProps) => JSX.Element;
+export declare const WithLocalisationPlaceholders: ({ apiKey, onAddressChange, }: AutocompleteAddressProps) => JSX.Element;
+export default story;

package/dist/esm/lib/components/segmentedControl/index.stories.d.ts

@@ -26,11 +26,7 @@ declare const story: {
         selectedIndex: number;
     };
     parameters: {
-        docs: {
-            description: {
-                component: string;
-            };
-        };
+        componentSubtitle: string;
     };
 };
 export declare const SegmentedControlStory: {

package/dist/esm/lib/index.d.ts

@@ -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, MultiDropzoneProps, UploadedFile, UploadStatus } from './components/multiDropzone';
 import DownloadButton from './components/downloadButton';
@@ -15,6 +15,7 @@ import AutoSuggestInput from './components/input/autoSuggestInput';
 import { ComparisonTable, TableRating, TableTrueFalse, TableRowHeader, TableButton, TableInfoButton, TableHeader } from './components/comparisonTable';
 import { SegmentedControl } from './components/segmentedControl';
 import Markdown from './components/markdown';
-export { DateSelector, SignaturePad, AutocompleteAddress, Input, MultiDropzone, DownloadButton, IbanInput, BottomModal, RegularModal, BottomOrRegularModal, CardWithTopLeftIcon, CardWithLeftIcon, CardWithTopIcon, InfoCard, CardButton, Button, CurrencyInput, AutoSuggestMultiSelect, Chip, AutoSuggestInput, ComparisonTable, TableRating, TableTrueFalse, TableRowHeader, TableButton, TableInfoButton, SegmentedControl, Markdown, };
+import { images } from './util/images';
+export { DateSelector, SignaturePad, AutocompleteAddress, Input, MultiDropzone, DownloadButton, IbanInput, BottomModal, RegularModal, BottomOrRegularModal, CardWithTopLeftIcon, CardWithLeftIcon, CardWithTopIcon, InfoCard, CardButton, Button, CurrencyInput, AutoSuggestMultiSelect, Chip, AutoSuggestInput, ComparisonTable, TableRating, TableTrueFalse, TableRowHeader, TableButton, TableInfoButton, SegmentedControl, Markdown, images, };
 export type { FileType, MultiDropzoneProps, TableHeader, UploadedFile, UploadStatus };
 export type { DownloadStatus } from './models/download';

package/dist/esm/lib/util/images/index.d.ts

@@ -0,0 +1,11 @@
+declare const images: {
+    readonly aid: "https://assets.cdn.feather-insurance.com/assets/images/aid.svg";
+    readonly bed: "https://assets.cdn.feather-insurance.com/assets/images/bed.svg";
+    readonly bigDog: "https://assets.cdn.feather-insurance.com/assets/images/bigDog.svg";
+    readonly brokenAquarium: "https://assets.cdn.feather-insurance.com/assets/images/brokenAquarium.svg";
+    readonly brokenGlass: "https://assets.cdn.feather-insurance.com/assets/images/brokenGlass.svg";
+    readonly damagedLaptop: "https://assets.cdn.feather-insurance.com/assets/images/damagedLaptop.svg";
+    readonly moneyIncome: "https://assets.cdn.feather-insurance.com/assets/images/moneyIncome.svg";
+    readonly washingMachine: "https://assets.cdn.feather-insurance.com/assets/images/washingMachine.svg";
+};
+export { images };

package/dist/esm/lib/util/images/index.stories.d.ts

@@ -0,0 +1,12 @@
+declare const story: {
+    title: string;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export declare const Images: () => JSX.Element;
+export default story;

package/dist/esm/util/images/index.stories.js

@@ -0,0 +1,23 @@
+import { _ as __assign } from '../../tslib.es6-5bc94358.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { i as images } from '../../index-db2e797f.js';
+
+var story = {
+    title: 'Utils/Images',
+    parameters: {
+        docs: {
+            description: {
+                component: 'Use the `images` object export to access our list of available images.',
+            },
+        },
+    }
+};
+var Images = function () { return (jsx("div", __assign({ className: 'd-flex gap8 f-wrap' }, { children: Object.entries(images).map(function (_a) {
+        var key = _a[0], value = _a[1];
+        return (jsxs("div", __assign({ className: "ws3 d-flex fd-column ai-center br4 p24 pt16 pb16 bg-grey-100" }, { children: [jsx("span", __assign({ className: 'p-p--small mb8' }, { children: key }), void 0),
+                jsx("img", { alt: key, src: value }, void 0)] }), key));
+    }) }), void 0)); };
+
+export default story;
+export { Images };
+//# sourceMappingURL=index.stories.js.map

package/dist/esm/util/images/index.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/util/images/index.stories.tsx"],"sourcesContent":["import { images } from \"../../util/images\";\n\nconst story = {\n  title: 'Utils/Images',\n  parameters: {\n    docs: {\n      description: {\n        component: 'Use the `images` object export to access our list of available images.',\n      },\n    },\n  }\n};\n\n\nexport const Images = () => (\n  <div className='d-flex gap8 f-wrap'>\n    {Object.entries(images).map(([key, value]) => (\n      <div key={key} className=\"ws3 d-flex fd-column ai-center br4 p24 pt16 pb16 bg-grey-100\">\n        <span className='p-p--small mb8'>{key}</span>\n        \n        <img alt={key} src={value} />\n      </div>\n    ))}\n  </div>\n);\n\nexport default story;\n"],"names":["_jsx","_jsxs"],"mappings":";;;;IAEM,KAAK,GAAG;IACZ,KAAK,EAAE,cAAc;IACrB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EAAE,wEAAwE;aACpF;SACF;KACF;EACD;IAGW,MAAM,GAAG,cAAM,QAC1BA,sBAAK,SAAS,EAAC,oBAAoB,gBAChC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,UAAC,EAAY;YAAX,GAAG,QAAA,EAAE,KAAK,QAAA;QAAM,QAC5CC,uBAAe,SAAS,EAAC,8DAA8D,iBACrFD,uBAAM,SAAS,EAAC,gBAAgB,gBAAE,GAAG,YAAQ;gBAE7CA,aAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,WAAI,MAHrB,GAAG,CAIP;KACP,CAAC,YACE;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@popsure/dirty-swan",
-  "version": "0.31.2",
+  "version": "0.32.0",
   "author": "Vincent Audoire <vincent@getpopsure.com>",
   "license": "MIT",
   "private": false,

package/src/index.tsx

@@ -30,6 +30,7 @@ export {
   SegmentedControl,
   DownloadButton,
   Markdown,
+  images
 } from './lib';
 
 export type {
@@ -38,7 +39,7 @@ export type {
   MultiDropzoneProps,
   TableHeader,
   UploadedFile,
-  UploadStatus
+  UploadStatus,
  } from './lib';
 
 ReactDOM.render(<App />, document.getElementById('root'));

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}