@popsure/dirty-swan 0.38.3 → 0.38.4

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

@@ -17,7 +17,7 @@ var story = {
             description: 'The address properties',
             table: {
                 type: {
-                    summary: 'Partial<Address>'
+                    summary: 'Partial<Address>',
                 },
             },
         },
@@ -26,7 +26,7 @@ var story = {
             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>'
+                    summary: 'Partial<Address>',
                 },
             },
         },
@@ -34,25 +34,25 @@ var story = {
             description: 'Callback with the updated address, this function will get called everytime the address gets updated',
             action: true,
             table: {
-                category: "Callbacks",
+                category: 'Callbacks',
             },
         },
         manualAddressEntryTexts: {
             description: 'The CTA that enables manual address entry and the text preceding it',
             table: {
                 type: {
-                    summary: '{ preText?: string; cta: string?; }'
-                }
-            }
+                    summary: '{ preText?: string; cta: string?; }',
+                },
+            },
         },
         placeholders: {
             description: 'Placeholder text',
             table: {
                 type: {
-                    summary: '{ manualAddressEntry?: string; street: string?; houseNumber?: string; additionalInformation?: string; postcode?: string; city?: string; }'
-                }
-            }
-        }
+                    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.',
@@ -62,20 +62,20 @@ var story = {
             },
         },
         customTypes: {
-            Address: "interface Address {\n          street: string;\n          houseNumber: string;\n          postcode: string;\n          city: string;\n          additionalInformation?: string;\n          country: string;\n      }"
-        }
+            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);
+        onAddressChange === null || onAddressChange === void 0 ? void 0 : onAddressChange(newAddress);
         setAddress(newAddress);
     };
     return (jsx(AutocompleteAddress, { address: address, apiKey: apiKey, manualAddressEntryTexts: manualAddressEntryTexts, onAddressChange: handleOnAddressChange, placeholders: placeholders }, void 0));
 };
-AutocompleteAddressStory.storyName = "AutocompleteAddress";
+AutocompleteAddressStory.storyName = 'AutocompleteAddress';
 var WithAddress = function (_a) {
     var apiKey = _a.apiKey, onAddressChange = _a.onAddressChange; _a.placeholders;
     return (jsx(AutocompleteAddress, { address: {

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

@@ -1 +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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"}
+{"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:\n        '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:\n        '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:\n        '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:\n            '{ manualAddressEntry?: string; street: string?; houseNumber?: string; additionalInformation?: string; postcode?: string; city?: string; }',\n        },\n      },\n    },\n  },\n  parameters: {\n    componentSubtitle:\n      '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:\n          '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>(\n    defaultAddress\n  );\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/cards/index.js

@@ -28,7 +28,7 @@ var CardWithTopLeftIcon = function (_a) {
     return (jsxs("div", __assign({ className: cardStyle }, props, { children: [jsxs("div", __assign({ className: titleContainerStyle }, { children: [leftIcon && (jsx("img", { className: "mr8", width: "28px", height: "28px", src: leftIcon === 'logo' ? featherLogo.src : leftIcon.src, alt: leftIcon === 'logo' ? featherLogo.alt : leftIcon.src }, void 0)),
                     jsx("div", __assign({ className: headingStyle }, { children: title }), void 0),
                     rightIcon && (jsx("img", { className: iconStyle, width: "24px", height: "24px", src: rightIcon === 'arrow' ? arrowRight.src : rightIcon.src, alt: rightIcon === 'arrow' ? arrowRight.alt : rightIcon.alt }, void 0))] }), void 0),
-            jsx("p", __assign({ className: cardTextStyle }, { children: children }), void 0)] }), void 0));
+            jsx("div", __assign({ className: cardTextStyle }, { children: children }), void 0)] }), void 0));
 };
 
 var css_248z$2 = ".style-module_container__34kUF {\n  padding: 32px 24px 24px 24px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n.style-module_right-icon__3_kH9 {\n  margin-left: 4px;\n}";
@@ -117,10 +117,10 @@ var CardWithLeftIcon = function (_a) {
     var iconStyle = cardSize === 'xsmall' ? 'mr16' : 'mr32';
     var cardTextStyle = "tc-grey-600 " + (cardSize === 'xsmall' ? 'p-p--small' : 'p-p ') + " " + styles[cardTextStyleFromCardSize(cardSize)];
     return (jsxs("div", __assign({ className: cardStyle }, props, { children: [leftIcon && (jsx("img", { width: ((leftIconSize === null || leftIconSize === void 0 ? void 0 : leftIconSize.width) || 48) + "px", height: ((leftIconSize === null || leftIconSize === void 0 ? void 0 : leftIconSize.height) || 48) + "px", className: iconStyle, src: leftIcon.src, alt: leftIcon.alt }, void 0)),
-            jsxs("div", { children: [jsxs("div", __assign({ className: "d-flex" }, { children: [(title || subtitle) && (jsxs("div", { children: [title && (jsx("div", __assign({ className: headingStyle }, { children: title }), void 0)),
+            jsxs("div", { children: [jsxs("div", __assign({ className: "d-flex" }, { children: [(title || subtitle) && (jsxs("div", { children: [title && jsx("div", __assign({ className: headingStyle }, { children: title }), void 0),
                                     subtitle && (jsx("div", __assign({ className: "tc-grey-500 " + headingStyle }, { children: subtitle }), void 0))] }, void 0)),
                             rightIcon && (jsx("img", { className: "ml-auto", width: "24px", height: "24px", src: rightIcon === 'arrow' ? arrowRight.src : rightIcon.src, alt: rightIcon === 'arrow' ? arrowRight.alt : rightIcon.alt }, void 0))] }), void 0),
-                    jsx("p", __assign({ className: cardTextStyle }, { children: children }), void 0)] }, void 0)] }), void 0));
+                    jsx("div", __assign({ className: cardTextStyle }, { children: children }), void 0)] }, void 0)] }), void 0));
 };
 
 export { CardWithLeftIcon, CardWithTopIcon, CardWithTopLeftIcon, InfoCard, associatedClassForCardState, headingForCardSize };

package/dist/esm/components/cards/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/cards/cardWithTopLeftIcon/index.tsx","../../../../../src/lib/components/cards/cardWithTopIcon/index.tsx","../../../../../src/lib/components/cards/infoCard/index.tsx","../../../../../src/lib/components/cards/index.tsx","../../../../../src/lib/components/cards/cardWithLeftIcon/index.tsx"],"sourcesContent":["import {\n  associatedClassForCardState,\n  CardProps,\n  headingForCardSize,\n} from '..';\nimport { Icon, arrowRight, featherLogo } from '../icons';\n\nimport styles from './style.module.scss';\n\nconst containerStyleFromTitleSize = (\n  titleSize: 'xsmall' | 'small' | 'medium' | 'big'\n): string => {\n  switch (titleSize) {\n    case 'xsmall':\n      return 'container--xsmall';\n    default:\n      return 'container';\n  }\n};\n\nexport type CardWithTopLeftIconProps = CardProps & {\n  cardSize?: 'xsmall' | 'small' | 'medium' | 'big';\n  leftIcon?: 'logo' | Icon;\n  rightIcon?: 'arrow' | Icon;\n};\n\nexport const CardWithTopLeftIcon = ({\n  className,\n  title,\n  cardSize = 'medium',\n  children,\n  leftIcon,\n  rightIcon,\n  state = 'actionable',\n  dropshadow = true,\n  ...props\n}: CardWithTopLeftIconProps) => {\n  const cardStyle = `${className} ${associatedClassForCardState(\n    state,\n    dropshadow\n  )} ${styles[containerStyleFromTitleSize(cardSize)]}`;\n\n  const titleContainerStyle = styles['title-container'];\n  const headingStyle = headingForCardSize(cardSize);\n  const iconStyle = styles['right-icon'];\n  const cardTextStyle = `p-p tc-grey-600 ${cardSize === 'xsmall' ? styles.indent : 'mt16'}`;\n\n  return (\n    <div className={cardStyle} {...props}>\n      <div className={titleContainerStyle}>\n        {leftIcon && (\n          <img\n            className=\"mr8\"\n            width=\"28px\"\n            height=\"28px\"\n            src={leftIcon === 'logo' ? featherLogo.src : leftIcon.src}\n            alt={leftIcon === 'logo' ? featherLogo.alt : leftIcon.src}\n          />\n        )}\n        <div className={headingStyle}>{title}</div>\n        {rightIcon && (\n          <img\n            className={iconStyle}\n            width=\"24px\"\n            height=\"24px\"\n            src={rightIcon === 'arrow' ? arrowRight.src : rightIcon.src}\n            alt={rightIcon === 'arrow' ? arrowRight.alt : rightIcon.alt}\n          />\n        )}\n      </div>\n      <p className={cardTextStyle}>{children}</p>\n    </div>\n  );\n};\n","import { associatedClassForCardState, CardProps, headingForCardSize } from '..';\nimport { Icon, arrowRight, IconSize } from '../icons';\n\nimport styles from './style.module.scss';\n\nexport type CardWithTopIconProps = CardProps & {\n  topIcon: Icon;\n  topIconSize: IconSize;\n  cardSize?: 'small' | 'medium' | 'big';\n  rightIcon?: 'arrow' | Icon;\n};\n\nexport const CardWithTopIcon = ({\n  className,\n  title,\n  cardSize = 'medium',\n  children,\n  topIcon,\n  topIconSize = { width: 48, height: 48 },\n  rightIcon,\n  state = 'actionable',\n  dropshadow = true,\n  ...props\n}: CardWithTopIconProps) => {\n  const cardStyle = `d-flex fd-column ai-center ${className} ${associatedClassForCardState(\n    state,\n    dropshadow\n  )} ${styles.container}`;\n\n  const headingStyle = headingForCardSize(cardSize);\n  const iconStyle = styles['right-icon'];\n\n  return (\n    <>\n      <div className={cardStyle} {...props}>\n        <img\n          width={topIconSize.width}\n          height={topIconSize.height}\n          alt={topIcon.alt}\n          src={topIcon.src}\n        />\n        <div className=\"d-flex mt16\">\n          <div className={headingStyle}>{title}</div>\n          {rightIcon && (\n            <img\n              className={iconStyle}\n              width=\"24px\"\n              height=\"24px\"\n              src={rightIcon === 'arrow' ? arrowRight.src : rightIcon.src}\n              alt={rightIcon === 'arrow' ? arrowRight.alt : rightIcon.alt}\n            />\n          )}\n        </div>\n        {children}\n      </div>\n    </>\n  );\n};\n","import { associatedClassForCardState, CardProps } from '..';\nimport { Icon, info } from '../icons';\n\nimport styles from './style.module.scss';\n\nexport type InfoCardProps = CardProps & {\n  topIcon: Icon;\n  rightIcon?: 'info' | Icon;\n};\n\nexport const InfoCard = ({\n  className,\n  title,\n  children,\n  topIcon,\n  rightIcon,\n  state = 'actionable',\n  dropshadow = true,\n  ...props\n}: InfoCardProps) => (\n  <div className={`${styles['root-container']} ${className ?? ''}`} {...props}>\n    <img\n      src={topIcon.src}\n      alt={topIcon.alt}\n      className={`${styles['top-icon']} ${\n        state === 'muted' ? styles['top-icon--muted'] : ''\n      } `}\n      width=\"80px\"\n      height=\"80px\"\n    />\n    <div\n      className={`${associatedClassForCardState(state, dropshadow)} ${\n        styles.container\n      }`}\n    >\n      {rightIcon && (\n        <img\n          width=\"20px\"\n          height=\"20px\"\n          className={styles['right-icon']}\n          src={rightIcon === 'info' ? info.src : rightIcon.src}\n          alt={rightIcon === 'info' ? info.alt : rightIcon.alt}\n        />\n      )}\n      <div className=\"p-h4 ta-center mt64\">{title}</div>\n      <p className=\"p-p mt16 tc-grey-600\">{children}</p>\n    </div>\n  </div>\n);\n","import { CardWithTopLeftIcon } from './cardWithTopLeftIcon';\nimport { CardWithLeftIcon } from './cardWithLeftIcon';\nimport { CardWithTopIcon } from './cardWithTopIcon';\nimport { InfoCard } from './infoCard';\nimport { CardButton } from './cardButton';\n\ntype CardState = 'actionable' | 'static' | 'muted';\n\nexport type CardProps = {\n  title: string;\n  children: React.ReactNode;\n  state?: CardState;\n  dropshadow?: boolean;\n} & JSX.IntrinsicElements['div'];\n\nexport const headingForCardSize = (\n  cardSize: 'xsmall' | 'small' | 'medium' | 'big'\n): string => {\n  switch (cardSize) {\n    case 'xsmall':\n    case 'small':\n      return 'p-h4';\n    case 'medium':\n      return 'p-h3';\n    case 'big':\n      return 'p-h2';\n  }\n};\n\nexport const associatedClassForCardState = (\n  state: CardState,\n  dropshadow: boolean\n): string => {\n  const baseClass = (() => {\n    switch (state) {\n      case 'actionable':\n        return 'ds-card--actionable';\n      case 'muted':\n        return 'ds-card--muted';\n      case 'static':\n        return 'ds-card';\n    }\n  })();\n\n  if (dropshadow === false) {\n    return `${baseClass} ds-card--no-dropshadow`;\n  }\n  return baseClass;\n};\n\nexport {\n  CardWithTopLeftIcon,\n  CardWithLeftIcon,\n  CardWithTopIcon,\n  InfoCard,\n  CardButton,\n};\n","import { associatedClassForCardState, CardProps, headingForCardSize } from '..';\nimport { Icon, IconSize, arrowRight } from '../icons';\n\nimport styles from './style.module.scss';\n\nconst containerStyleFromCardSize = (\n  cardSize: 'xsmall' | 'small' | 'medium' | 'big'\n): string => {\n  switch (cardSize) {\n    case 'xsmall':\n      return 'container--xsmall';\n    case 'small':\n      return 'container--small';\n    default:\n      return 'container';\n  }\n};\n\nconst cardTextStyleFromCardSize = (\n  cardSize: 'xsmall' | 'small' | 'medium' | 'big'\n): string => {\n  switch (cardSize) {\n    case 'xsmall':\n    case 'small':\n      return 'card-text--small';\n    case 'medium':\n      return 'card-text--medium';\n    default:\n      return 'card-text--big';\n  }\n};\n\nexport type CardWithLeftIconProps = Omit<CardProps, 'title'> & {\n  cardSize?: 'xsmall' | 'small' | 'medium' | 'big';\n  leftIcon?: Icon;\n  rightIcon?: 'arrow' | Icon;\n  leftIconSize?: IconSize;\n  title?: string;\n  subtitle?: string;\n}\n\nexport const CardWithLeftIcon = ({\n  className = '',\n  title,\n  subtitle,\n  cardSize = 'medium',\n  children,\n  leftIcon,\n  rightIcon,\n  state = 'actionable',\n  dropshadow = true,\n  leftIconSize,\n  ...props\n}: CardWithLeftIconProps) => {\n  const cardStyle = `d-flex ai-center ${className} ${associatedClassForCardState(\n    state,\n    dropshadow\n  )} ${styles[containerStyleFromCardSize(cardSize)]}`;\n\n  const headingStyle = headingForCardSize(cardSize);\n  const iconStyle = cardSize === 'xsmall' ? 'mr16' : 'mr32';\n  const cardTextStyle = `tc-grey-600 ${\n    cardSize === 'xsmall' ? 'p-p--small' : 'p-p '\n  } ${styles[cardTextStyleFromCardSize(cardSize)]}`;\n\n  return (\n    <div className={cardStyle} {...props}>\n      {leftIcon && (\n        <img\n          width={`${leftIconSize?.width || 48}px`}\n          height={`${leftIconSize?.height || 48}px`}\n          className={iconStyle}\n          src={leftIcon.src}\n          alt={leftIcon.alt}\n        />\n      )}\n      <div>\n        <div className=\"d-flex\">\n          {(title || subtitle) && (\n            <div>\n              {title && (\n                <div className={headingStyle}>{title}</div>\n              )}\n              {subtitle && (\n                <div className={`tc-grey-500 ${headingStyle}`}>{subtitle}</div>\n              )}\n            </div>\n          )}\n          {rightIcon && (\n            <img\n              className=\"ml-auto\"\n              width=\"24px\"\n              height=\"24px\"\n              src={rightIcon === 'arrow' ? arrowRight.src : rightIcon.src}\n              alt={rightIcon === 'arrow' ? arrowRight.alt : rightIcon.alt}\n            />\n          )}\n        </div>\n        <p className={cardTextStyle}>{children}</p>\n      </div>\n    </div>\n  );\n};\n"],"names":["styles","_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/cards/cardWithTopLeftIcon/index.tsx","../../../../../src/lib/components/cards/cardWithTopIcon/index.tsx","../../../../../src/lib/components/cards/infoCard/index.tsx","../../../../../src/lib/components/cards/index.tsx","../../../../../src/lib/components/cards/cardWithLeftIcon/index.tsx"],"sourcesContent":["import { associatedClassForCardState, CardProps, headingForCardSize } from '..';\nimport { arrowRight, featherLogo, Icon } from '../icons';\n\nimport styles from './style.module.scss';\n\nconst containerStyleFromTitleSize = (\n  titleSize: 'xsmall' | 'small' | 'medium' | 'big'\n): string => {\n  switch (titleSize) {\n    case 'xsmall':\n      return 'container--xsmall';\n    default:\n      return 'container';\n  }\n};\n\nexport type CardWithTopLeftIconProps = CardProps & {\n  cardSize?: 'xsmall' | 'small' | 'medium' | 'big';\n  leftIcon?: 'logo' | Icon;\n  rightIcon?: 'arrow' | Icon;\n};\n\nexport const CardWithTopLeftIcon = ({\n  className,\n  title,\n  cardSize = 'medium',\n  children,\n  leftIcon,\n  rightIcon,\n  state = 'actionable',\n  dropshadow = true,\n  ...props\n}: CardWithTopLeftIconProps) => {\n  const cardStyle = `${className} ${associatedClassForCardState(\n    state,\n    dropshadow\n  )} ${styles[containerStyleFromTitleSize(cardSize)]}`;\n\n  const titleContainerStyle = styles['title-container'];\n  const headingStyle = headingForCardSize(cardSize);\n  const iconStyle = styles['right-icon'];\n  const cardTextStyle = `p-p tc-grey-600 ${\n    cardSize === 'xsmall' ? styles.indent : 'mt16'\n  }`;\n\n  return (\n    <div className={cardStyle} {...props}>\n      <div className={titleContainerStyle}>\n        {leftIcon && (\n          <img\n            className=\"mr8\"\n            width=\"28px\"\n            height=\"28px\"\n            src={leftIcon === 'logo' ? featherLogo.src : leftIcon.src}\n            alt={leftIcon === 'logo' ? featherLogo.alt : leftIcon.src}\n          />\n        )}\n        <div className={headingStyle}>{title}</div>\n        {rightIcon && (\n          <img\n            className={iconStyle}\n            width=\"24px\"\n            height=\"24px\"\n            src={rightIcon === 'arrow' ? arrowRight.src : rightIcon.src}\n            alt={rightIcon === 'arrow' ? arrowRight.alt : rightIcon.alt}\n          />\n        )}\n      </div>\n      <div className={cardTextStyle}>{children}</div>\n    </div>\n  );\n};\n","import { associatedClassForCardState, CardProps, headingForCardSize } from '..';\nimport { Icon, arrowRight, IconSize } from '../icons';\n\nimport styles from './style.module.scss';\n\nexport type CardWithTopIconProps = CardProps & {\n  topIcon: Icon;\n  topIconSize: IconSize;\n  cardSize?: 'small' | 'medium' | 'big';\n  rightIcon?: 'arrow' | Icon;\n};\n\nexport const CardWithTopIcon = ({\n  className,\n  title,\n  cardSize = 'medium',\n  children,\n  topIcon,\n  topIconSize = { width: 48, height: 48 },\n  rightIcon,\n  state = 'actionable',\n  dropshadow = true,\n  ...props\n}: CardWithTopIconProps) => {\n  const cardStyle = `d-flex fd-column ai-center ${className} ${associatedClassForCardState(\n    state,\n    dropshadow\n  )} ${styles.container}`;\n\n  const headingStyle = headingForCardSize(cardSize);\n  const iconStyle = styles['right-icon'];\n\n  return (\n    <>\n      <div className={cardStyle} {...props}>\n        <img\n          width={topIconSize.width}\n          height={topIconSize.height}\n          alt={topIcon.alt}\n          src={topIcon.src}\n        />\n        <div className=\"d-flex mt16\">\n          <div className={headingStyle}>{title}</div>\n          {rightIcon && (\n            <img\n              className={iconStyle}\n              width=\"24px\"\n              height=\"24px\"\n              src={rightIcon === 'arrow' ? arrowRight.src : rightIcon.src}\n              alt={rightIcon === 'arrow' ? arrowRight.alt : rightIcon.alt}\n            />\n          )}\n        </div>\n        {children}\n      </div>\n    </>\n  );\n};\n","import { associatedClassForCardState, CardProps } from '..';\nimport { Icon, info } from '../icons';\n\nimport styles from './style.module.scss';\n\nexport type InfoCardProps = CardProps & {\n  topIcon: Icon;\n  rightIcon?: 'info' | Icon;\n};\n\nexport const InfoCard = ({\n  className,\n  title,\n  children,\n  topIcon,\n  rightIcon,\n  state = 'actionable',\n  dropshadow = true,\n  ...props\n}: InfoCardProps) => (\n  <div className={`${styles['root-container']} ${className ?? ''}`} {...props}>\n    <img\n      src={topIcon.src}\n      alt={topIcon.alt}\n      className={`${styles['top-icon']} ${\n        state === 'muted' ? styles['top-icon--muted'] : ''\n      } `}\n      width=\"80px\"\n      height=\"80px\"\n    />\n    <div\n      className={`${associatedClassForCardState(state, dropshadow)} ${\n        styles.container\n      }`}\n    >\n      {rightIcon && (\n        <img\n          width=\"20px\"\n          height=\"20px\"\n          className={styles['right-icon']}\n          src={rightIcon === 'info' ? info.src : rightIcon.src}\n          alt={rightIcon === 'info' ? info.alt : rightIcon.alt}\n        />\n      )}\n      <div className=\"p-h4 ta-center mt64\">{title}</div>\n      <p className=\"p-p mt16 tc-grey-600\">{children}</p>\n    </div>\n  </div>\n);\n","import { CardWithTopLeftIcon } from './cardWithTopLeftIcon';\nimport { CardWithLeftIcon } from './cardWithLeftIcon';\nimport { CardWithTopIcon } from './cardWithTopIcon';\nimport { InfoCard } from './infoCard';\nimport { CardButton } from './cardButton';\n\ntype CardState = 'actionable' | 'static' | 'muted';\n\nexport type CardProps = {\n  title: string;\n  children: React.ReactNode;\n  state?: CardState;\n  dropshadow?: boolean;\n} & JSX.IntrinsicElements['div'];\n\nexport const headingForCardSize = (\n  cardSize: 'xsmall' | 'small' | 'medium' | 'big'\n): string => {\n  switch (cardSize) {\n    case 'xsmall':\n    case 'small':\n      return 'p-h4';\n    case 'medium':\n      return 'p-h3';\n    case 'big':\n      return 'p-h2';\n  }\n};\n\nexport const associatedClassForCardState = (\n  state: CardState,\n  dropshadow: boolean\n): string => {\n  const baseClass = (() => {\n    switch (state) {\n      case 'actionable':\n        return 'ds-card--actionable';\n      case 'muted':\n        return 'ds-card--muted';\n      case 'static':\n        return 'ds-card';\n    }\n  })();\n\n  if (dropshadow === false) {\n    return `${baseClass} ds-card--no-dropshadow`;\n  }\n  return baseClass;\n};\n\nexport {\n  CardWithTopLeftIcon,\n  CardWithLeftIcon,\n  CardWithTopIcon,\n  InfoCard,\n  CardButton,\n};\n","import { associatedClassForCardState, CardProps, headingForCardSize } from '..';\nimport { arrowRight, Icon, IconSize } from '../icons';\n\nimport styles from './style.module.scss';\n\nconst containerStyleFromCardSize = (\n  cardSize: 'xsmall' | 'small' | 'medium' | 'big'\n): string => {\n  switch (cardSize) {\n    case 'xsmall':\n      return 'container--xsmall';\n    case 'small':\n      return 'container--small';\n    default:\n      return 'container';\n  }\n};\n\nconst cardTextStyleFromCardSize = (\n  cardSize: 'xsmall' | 'small' | 'medium' | 'big'\n): string => {\n  switch (cardSize) {\n    case 'xsmall':\n    case 'small':\n      return 'card-text--small';\n    case 'medium':\n      return 'card-text--medium';\n    default:\n      return 'card-text--big';\n  }\n};\n\nexport type CardWithLeftIconProps = Omit<CardProps, 'title'> & {\n  cardSize?: 'xsmall' | 'small' | 'medium' | 'big';\n  leftIcon?: Icon;\n  rightIcon?: 'arrow' | Icon;\n  leftIconSize?: IconSize;\n  title?: string;\n  subtitle?: string;\n};\n\nexport const CardWithLeftIcon = ({\n  className = '',\n  title,\n  subtitle,\n  cardSize = 'medium',\n  children,\n  leftIcon,\n  rightIcon,\n  state = 'actionable',\n  dropshadow = true,\n  leftIconSize,\n  ...props\n}: CardWithLeftIconProps) => {\n  const cardStyle = `d-flex ai-center ${className} ${associatedClassForCardState(\n    state,\n    dropshadow\n  )} ${styles[containerStyleFromCardSize(cardSize)]}`;\n\n  const headingStyle = headingForCardSize(cardSize);\n  const iconStyle = cardSize === 'xsmall' ? 'mr16' : 'mr32';\n  const cardTextStyle = `tc-grey-600 ${\n    cardSize === 'xsmall' ? 'p-p--small' : 'p-p '\n  } ${styles[cardTextStyleFromCardSize(cardSize)]}`;\n\n  return (\n    <div className={cardStyle} {...props}>\n      {leftIcon && (\n        <img\n          width={`${leftIconSize?.width || 48}px`}\n          height={`${leftIconSize?.height || 48}px`}\n          className={iconStyle}\n          src={leftIcon.src}\n          alt={leftIcon.alt}\n        />\n      )}\n      <div>\n        <div className=\"d-flex\">\n          {(title || subtitle) && (\n            <div>\n              {title && <div className={headingStyle}>{title}</div>}\n              {subtitle && (\n                <div className={`tc-grey-500 ${headingStyle}`}>{subtitle}</div>\n              )}\n            </div>\n          )}\n          {rightIcon && (\n            <img\n              className=\"ml-auto\"\n              width=\"24px\"\n              height=\"24px\"\n              src={rightIcon === 'arrow' ? arrowRight.src : rightIcon.src}\n              alt={rightIcon === 'arrow' ? arrowRight.alt : rightIcon.alt}\n            />\n          )}\n        </div>\n        <div className={cardTextStyle}>{children}</div>\n      </div>\n    </div>\n  );\n};\n"],"names":["styles","_jsxs","_jsx"],"mappings":"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"}

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

@@ -3,6 +3,23 @@ export interface AutocompleteAddressProps {
     apiKey: string;
     address?: Partial<Address>;
     onAddressChange: (address: Partial<Address>) => void;
+    inputProps?: {
+        street?: {
+            name?: string;
+        };
+        houseNumber?: {
+            name?: string;
+        };
+        additionalInformation?: {
+            name?: string;
+        };
+        postcode?: {
+            name?: string;
+        };
+        city?: {
+            name?: string;
+        };
+    };
     placeholders?: {
         manualAddressEntry?: string;
         street?: string;
@@ -16,5 +33,5 @@ export interface AutocompleteAddressProps {
         cta?: string;
     };
 }
-declare const AutocompleteAddress: ({ apiKey, address: initialAddress, onAddressChange, placeholders, manualAddressEntryTexts, }: AutocompleteAddressProps) => JSX.Element;
+declare const AutocompleteAddress: ({ apiKey, address: initialAddress, onAddressChange, placeholders, manualAddressEntryTexts, inputProps, }: AutocompleteAddressProps) => JSX.Element;
 export { AutocompleteAddress };

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

@@ -1,7 +1,7 @@
 import { AutocompleteAddressProps } from '.';
 declare const story: {
     title: string;
-    component: ({ apiKey, address: initialAddress, onAddressChange, placeholders, manualAddressEntryTexts, }: AutocompleteAddressProps) => JSX.Element;
+    component: ({ apiKey, address: initialAddress, onAddressChange, placeholders, manualAddressEntryTexts, inputProps, }: AutocompleteAddressProps) => JSX.Element;
     argTypes: {
         address: {
             description: string;

package/package.json

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

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

@@ -9,49 +9,55 @@ const story = {
     address: {
       description: 'The address properties',
       table: {
-        type: { 
-          summary: 'Partial<Address>'
+        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)',
+      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>'
+        type: {
+          summary: 'Partial<Address>',
         },
       },
     },
     onAddressChange: {
-      description: 'Callback with the updated address, this function will get called everytime the address gets updated',
+      description:
+        'Callback with the updated address, this function will get called everytime the address gets updated',
       action: true,
       table: {
-        category: "Callbacks",
+        category: 'Callbacks',
       },
     },
     manualAddressEntryTexts: {
-      description: 'The CTA that enables manual address entry and the text preceding it',
+      description:
+        'The CTA that enables manual address entry and the text preceding it',
       table: {
         type: {
-            summary: '{ preText?: string; cta: string?; }'
-        }
-      }
+          summary: '{ preText?: string; cta: string?; }',
+        },
+      },
     },
     placeholders: {
       description: 'Placeholder text',
       table: {
         type: {
-            summary: '{ manualAddressEntry?: string; street: string?; houseNumber?: string; additionalInformation?: string; postcode?: string; city?: string; }'
-        }
-      }
-    }
+          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.',
+    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.',
+        component:
+          'This component is for now only restricted to "address" types and will restrict every query to Germany.',
       },
     },
     customTypes: {
@@ -62,8 +68,8 @@ const story = {
           city: string;
           additionalInformation?: string;
           country: string;
-      }`
-    }
+      }`,
+    },
   },
 };
 
@@ -74,9 +80,11 @@ export const AutocompleteAddressStory = ({
   onAddressChange,
   placeholders,
 }: AutocompleteAddressProps) => {
-  const [address, setAddress] = useState<Partial<Address> | undefined>(defaultAddress);
+  const [address, setAddress] = useState<Partial<Address> | undefined>(
+    defaultAddress
+  );
   const handleOnAddressChange = (newAddress: Partial<Address>) => {
-    onAddressChange(newAddress);
+    onAddressChange?.(newAddress);
     setAddress(newAddress);
   };
 
@@ -91,24 +99,24 @@ export const AutocompleteAddressStory = ({
   );
 };
 
-AutocompleteAddressStory.storyName = "AutocompleteAddress";
+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}
-    />
+  <AutocompleteAddress
+    address={{
+      street: 'Lohmuehlenstraße',
+      houseNumber: '65',
+      city: 'Berlin',
+      country: 'DE',
+      additionalInformation: 'c/o Factory',
+    }}
+    apiKey={apiKey}
+    onAddressChange={onAddressChange}
+  />
 );
 
 export const WithLocalisationEntryText = ({

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

@@ -1,12 +1,11 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { ChangeEvent, useCallback, useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 import debounce from 'lodash.debounce';
-import isEqual from 'lodash.isequal';
 import { Input } from '../input';
 import {
   Address,
-  countryNameFromAlphaCode,
   Alpha2CountryCode,
+  countryNameFromAlphaCode,
 } from '@popsure/public-models';
 
 import { geocoderAddressComponentToPartialAddress } from './util';
@@ -53,6 +52,23 @@ export interface AutocompleteAddressProps {
   apiKey: string;
   address?: Partial<Address>;
   onAddressChange: (address: Partial<Address>) => void;
+  inputProps?: {
+    street?: {
+      name?: string;
+    };
+    houseNumber?: {
+      name?: string;
+    };
+    additionalInformation?: {
+      name?: string;
+    };
+    postcode?: {
+      name?: string;
+    };
+    city?: {
+      name?: string;
+    };
+  };
   placeholders?: {
     manualAddressEntry?: string;
     street?: string;
@@ -73,6 +89,7 @@ const AutocompleteAddress = ({
   onAddressChange,
   placeholders,
   manualAddressEntryTexts,
+  inputProps,
 }: AutocompleteAddressProps) => {
   const [manualAddressEntry, setManualAddressEntry] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
@@ -99,15 +116,12 @@ const AutocompleteAddress = ({
         autocompleteElement.current.value = address.street;
       }
 
-      if (isEqual(address, initialAddress) === false) {
-        onAddressChange({ ...address });
-      }
       handleEnterAddressManually();
     }
-  }, [initialAddress, address, onAddressChange, hasLoadedGoogleAPI]);
+  }, [address, onAddressChange, hasLoadedGoogleAPI]);
 
   useEffect(() => {
-    if (hasLoadedGoogleAPI === false) {
+    if (!hasLoadedGoogleAPI) {
       return;
     }
 
@@ -156,6 +170,7 @@ const AutocompleteAddress = ({
           ...geocoderAddress,
           additionalInformation: oldValue?.additionalInformation,
         }));
+        onAddressChange?.(geocoderAddress);
       }
 
       map.current?.panTo(newPlace.geometry.location);
@@ -204,12 +219,28 @@ const AutocompleteAddress = ({
     []
   );
 
-  const debouncedSetPlace = debounce(setPlaceFromAddress, 1000);
+  const debouncedSetPlace = debounce(setPlaceFromAddress, 2000);
 
   const handleEnterAddressManually = () => {
     setManualAddressEntry(true);
   };
 
+  const onManualAddressChange =
+    ({ updatePlace } = { updatePlace: true }) =>
+    (e: ChangeEvent<HTMLInputElement>) => {
+      const newAddress = {
+        ...address,
+        [e.target.name]: e.target.value,
+        country: GERMANY_ALPHA_CODE,
+      };
+      setAddress(newAddress);
+      onAddressChange(newAddress);
+
+      if (updatePlace) {
+        debouncedSetPlace(newAddress);
+      }
+    };
+
   return (
     <>
       <div
@@ -257,15 +288,9 @@ const AutocompleteAddress = ({
                 type="text"
                 placeholder={placeholders?.street || 'Street'}
                 value={address?.street || ''}
-                onChange={(e) => {
-                  const newAddress = {
-                    ...address,
-                    street: e.target.value,
-                    country: GERMANY_ALPHA_CODE,
-                  };
-                  setAddress(newAddress);
-                  debouncedSetPlace(newAddress);
-                }}
+                onChange={onManualAddressChange()}
+                name="street"
+                {...inputProps?.street}
               />
               <Input
                 className={`wmx2 ${styles['house-number-input']}`}
@@ -273,15 +298,9 @@ const AutocompleteAddress = ({
                 key="autocomplete-house-number"
                 placeholder={placeholders?.houseNumber || 'House Number'}
                 value={address?.houseNumber || ''}
-                onChange={(e) => {
-                  const newAddress = {
-                    ...address,
-                    houseNumber: e.target.value,
-                    country: GERMANY_ALPHA_CODE,
-                  };
-                  setAddress(newAddress);
-                  debouncedSetPlace(newAddress);
-                }}
+                name="houseNumber"
+                onChange={onManualAddressChange()}
+                {...inputProps?.houseNumber}
               />
             </div>
             <Input
@@ -293,14 +312,9 @@ const AutocompleteAddress = ({
                 'Additional information (C/O, apartment, …)'
               }
               value={address?.additionalInformation || ''}
-              onChange={(e) => {
-                const newAddress = {
-                  ...address,
-                  additionalInformation: e.target.value,
-                  country: GERMANY_ALPHA_CODE,
-                };
-                setAddress(newAddress);
-              }}
+              name="additionalInformation"
+              onChange={onManualAddressChange({ updatePlace: false })}
+              {...inputProps?.additionalInformation}
             />
             <div className={`d-flex mt16 c-gap16 ${styles['input-line']}`}>
               <Input
@@ -309,15 +323,9 @@ const AutocompleteAddress = ({
                 key="autocomplete-postcode"
                 placeholder={placeholders?.postcode || 'Postcode'}
                 value={address?.postcode || ''}
-                onChange={(e) => {
-                  const newAddress = {
-                    ...address,
-                    postcode: e.target.value,
-                    country: GERMANY_ALPHA_CODE,
-                  };
-                  setAddress(newAddress);
-                  debouncedSetPlace(newAddress);
-                }}
+                name="postcode"
+                onChange={onManualAddressChange()}
+                {...inputProps?.postcode}
               />
               <Input
                 className="w100"
@@ -325,15 +333,9 @@ const AutocompleteAddress = ({
                 key="autocomplete-city"
                 placeholder={placeholders?.city || 'City'}
                 value={address?.city || ''}
-                onChange={(e) => {
-                  const newAddress = {
-                    ...address,
-                    city: e.target.value,
-                    country: GERMANY_ALPHA_CODE,
-                  };
-                  setAddress(newAddress);
-                  debouncedSetPlace(newAddress);
-                }}
+                name="city"
+                onChange={onManualAddressChange()}
+                {...inputProps?.city}
               />
             </div>
           </>

package/src/lib/components/cards/cardWithLeftIcon/index.tsx

@@ -1,5 +1,5 @@
 import { associatedClassForCardState, CardProps, headingForCardSize } from '..';
-import { Icon, IconSize, arrowRight } from '../icons';
+import { arrowRight, Icon, IconSize } from '../icons';
 
 import styles from './style.module.scss';
 
@@ -37,7 +37,7 @@ export type CardWithLeftIconProps = Omit<CardProps, 'title'> & {
   leftIconSize?: IconSize;
   title?: string;
   subtitle?: string;
-}
+};
 
 export const CardWithLeftIcon = ({
   className = '',
@@ -78,9 +78,7 @@ export const CardWithLeftIcon = ({
         <div className="d-flex">
           {(title || subtitle) && (
             <div>
-              {title && (
-                <div className={headingStyle}>{title}</div>
-              )}
+              {title && <div className={headingStyle}>{title}</div>}
               {subtitle && (
                 <div className={`tc-grey-500 ${headingStyle}`}>{subtitle}</div>
               )}
@@ -96,7 +94,7 @@ export const CardWithLeftIcon = ({
             />
           )}
         </div>
-        <p className={cardTextStyle}>{children}</p>
+        <div className={cardTextStyle}>{children}</div>
       </div>
     </div>
   );