@duffel/components 3.0.7-canary → 3.1.2

package/src/lib/logging.ts

@@ -1,4 +1,14 @@
-import { createContext, useContext } from "react";
+import * as Sentry from "@sentry/browser";
+
+const MESSAGE_PREFIX = "[Duffel Ancillaries] ";
+const LOCAL_STORAGE_KEY = "duffel-ancillaries-logger-state";
+let LOG_INITIALISED = false;
+
+const storeLoggerState = (shouldLog: boolean) => {
+  localStorage.setItem(LOCAL_STORAGE_KEY, shouldLog.toString());
+};
+
+const shouldLog = () => localStorage.getItem(LOCAL_STORAGE_KEY) === "true";
 
 /**
  * The functions in this file are used to enable logging.
@@ -25,36 +35,37 @@ import { createContext, useContext } from "react";
  * log('This is a log message')
  * logGroup('These messages will be grouped together', ['This is a log message', 'This is another log message'])
  */
-
-const initializeLogger = (debugMode: boolean) => {
-  if (debugMode) {
-    log(
-      `\n\nDebug mode is enabled. Information about your setup will be printed to the console.\n\nIf you do not want to enable debug mode (for example in a production environment), pass "debug: false" when initializing this component.\n\nLearn more about the Ancillaries component:\nhttp://duffel.com/docs/guides/ancillaries-component`
+const initializeLogger = (debugMode: boolean): void => {
+  storeLoggerState(debugMode);
+  if (debugMode && !LOG_INITIALISED) {
+    // eslint-disable-next-line
+    console.info(
+      MESSAGE_PREFIX,
+      `\n\nDebug mode is enabled. Information about your setup will be printed to the console.
+    
+    If you do not want to enable debug mode (for example in a production environment), pass "debug: false" when initializing this component.
+    
+    Learn more about the Ancillaries component:
+    http://duffel.com/docs/guides/ancillaries-component`
     );
   }
-
-  // We return functions that do nothing because it allows consumers
-  // of this function to not have to check if the logger is enabled or not.
-  // If we returned undefined, consumers would have to do something like:
-  // if (log) { log('message') }
-  //
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  const noop = () => {};
-
-  return {
-    log: debugMode ? log : noop,
-    logGroup: debugMode ? logGroup : noop,
-  };
+  LOG_INITIALISED = true;
 };
 
-const MESSAGE_PREFIX = "[Duffel Ancillaries] ";
-
 /**
  * Log a message to the console. Messages will be prefixed with "[Duffel Ancillaries]".
  * @param message The message to print to the console.
  */
 const log = (message: any) => {
-  console.log(MESSAGE_PREFIX, message);
+  if (shouldLog()) {
+    // eslint-disable-next-line
+    console.info(MESSAGE_PREFIX, message);
+  } else {
+    Sentry.addBreadcrumb({
+      category: "log",
+      message,
+    });
+  }
 };
 
 /**
@@ -77,8 +88,6 @@ function logGroup(
   groupName: string,
   messagesOrObject: any[] | { [key: string]: any }
 ): void {
-  console.groupCollapsed(MESSAGE_PREFIX, groupName);
-
   let transformedMessagesOrObject = [];
   if (Array.isArray(messagesOrObject)) {
     transformedMessagesOrObject = messagesOrObject;
@@ -87,14 +96,25 @@ function logGroup(
       ([key, value]) => ({ property: key, value })
     );
   }
-  transformedMessagesOrObject.forEach((message) => {
-    console.log(message);
-  });
 
-  console.groupEnd();
-}
+  if (shouldLog()) {
+    // eslint-disable-next-line
+    console.groupCollapsed(MESSAGE_PREFIX, groupName);
 
-const LogContext = createContext(initializeLogger(false));
-const useLog = () => useContext(LogContext);
+    transformedMessagesOrObject.forEach((message) => {
+      // eslint-disable-next-line
+      console.info(message);
+    });
+
+    // eslint-disable-next-line
+    console.groupEnd();
+  } else {
+    Sentry.addBreadcrumb({
+      category: "log.group",
+      message: groupName,
+      data: messagesOrObject,
+    });
+  }
+}
 
-export { LogContext, initializeLogger, useLog };
+export { initializeLogger, logGroup, log };

package/src/lib/retrieveOffer.ts

@@ -1,5 +1,6 @@
 import { Offer } from "../types/Offer";
 import { captureErrorInSentry } from "./captureErrorInSentry";
+import { isErrorResponse } from "./fetchFromDuffelAPI";
 import { importFromOfferFixtures } from "./fetchFromFixtures";
 import { isFixtureOfferId } from "./isFixtureOfferId";
 import { retrieveOfferFromDuffelAPI } from "./retrieveOfferFromDuffelAPI";
@@ -24,23 +25,29 @@ export async function retrieveOffer(
 
   if (!client_key) {
     throw new Error(
-      "Attemptted to retrieve seat maps but the client key is missing"
+      "Attempted to retrieve seat maps but the client key is missing."
     );
   }
 
   try {
     const data = await retrieveOfferFromDuffelAPI(offer_id, client_key);
-    return onOfferReady(data);
+    onOfferReady(data);
   } catch (error) {
     let message = "An unknown error occurred while retrieving the offer.";
     if (error instanceof Error) {
       message = error.message;
-      if (error.message.includes("ECONNREFUSED")) {
+      if (error.message.includes("Load failed")) {
         message = "The Duffel API is not available. Please try again later.";
       }
-      captureErrorInSentry(error, { offer_id });
-    } else {
-      captureErrorInSentry(new Error(message), { offer_id });
+    } else if (isErrorResponse(error)) {
+      if (error.status === 404) {
+        message =
+          "The offer you are looking for does not exist or has expired.";
+      }
+    }
+
+    if (isErrorResponse(error) && error.status >= 500 && error.status < 600) {
+      captureErrorInSentry(new Error(message));
     }
     onError(message);
   } finally {

package/src/lib/retrieveSeatMaps.ts

@@ -1,5 +1,6 @@
 import { SeatMap } from "../types/SeatMap";
 import { captureErrorInSentry } from "./captureErrorInSentry";
+import { isErrorResponse } from "./fetchFromDuffelAPI";
 import { importFromSeatMapsFixtures } from "./fetchFromFixtures";
 import { isFixtureOfferId } from "./isFixtureOfferId";
 import { retrieveSeatMapsFromDuffelAPI } from "./retrieveSeatMapsFromDuffelAPI";
@@ -7,7 +8,7 @@ import { retrieveSeatMapsFromDuffelAPI } from "./retrieveSeatMapsFromDuffelAPI";
 export async function retrieveSeatMaps(
   offer_id: string,
   client_key: string | null,
-  onError: (error: string) => void,
+  onError: () => void,
   setIsLoading: (isLoading: boolean) => void,
   onSeatMapReady: (seatMaps: SeatMap[]) => void
 ) {
@@ -25,7 +26,7 @@ export async function retrieveSeatMaps(
 
   if (!client_key) {
     throw new Error(
-      "Attemptted to retrieve seat maps but the client key is missing"
+      "Attemptted to retrieve seat maps but the client key is missing."
     );
   }
 
@@ -33,17 +34,21 @@ export async function retrieveSeatMaps(
     const data = await retrieveSeatMapsFromDuffelAPI(offer_id, client_key);
     onSeatMapReady(data);
   } catch (error) {
-    let message = "An unknown error occurred while retrieving the offer.";
+    let message = "An unknown error occurred while retrieving the seat maps.";
+
     if (error instanceof Error) {
       message = error.message;
-      if (error.message.includes("ECONNREFUSED")) {
+      if (error.message.includes("Load failed")) {
         message = "The Duffel API is not available. Please try again later.";
       }
-      captureErrorInSentry(error, { offer_id });
-    } else {
-      captureErrorInSentry(new Error(message), { offer_id });
+    } else if (isErrorResponse(error)) {
+      message =
+        error.data.errors[0]?.message ||
+        "Received an unknown error from the Duffel API.";
     }
-    onError(message);
+
+    captureErrorInSentry(new Error(message));
+    onError();
   } finally {
     setIsLoading(false);
   }

package/src/stories/BaggageSelectionModalHeader.stories.tsx

@@ -1,5 +1,5 @@
-import { BaggageSelectionModalHeader } from "@components/bags/BaggageSelectionModalHeader";
 import type { Meta, StoryObj } from "@storybook/react";
+import { BaggageSelectionModalHeader } from "../components/DuffelAncillaries/bags/BaggageSelectionModalHeader";
 import { OfferSliceSegment } from "../types/Offer";
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const offer = require("../fixtures/offers/off_0000AUde3KwTztSRK1cznH.json");

package/src/stories/Button.stories.tsx

@@ -1,5 +1,6 @@
-import { Button, ButtonProps } from "@components/Button";
 import type { Meta, StoryFn, StoryObj } from "@storybook/react";
+import React from "react";
+import { Button, ButtonProps } from "../components/shared/Button";
 
 export default {
   title: "Button",
@@ -47,7 +48,9 @@ export const WithSize48: ButtonStory = {
   args: { ...defaultProps, size: 48, iconBefore: "autorenew" },
 };
 
-export const WithAccentColorSet: StoryFn<ButtonProps> = () => (
+const AccentColorWrapper: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => (
   <div
     style={
       {
@@ -55,6 +58,34 @@ export const WithAccentColorSet: StoryFn<ButtonProps> = () => (
       } as any
     }
   >
+    {children}
+  </div>
+);
+
+export const WithAccentColorSet: StoryFn<ButtonProps> = () => (
+  <AccentColorWrapper>
     <Button {...defaultProps} />
+  </AccentColorWrapper>
+);
+
+const WhiteAccentColorWrapper: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => (
+  <div
+    style={
+      {
+        "--ACCENT": "255, 255, 255",
+        "--SECONDARY": "black",
+        "--TERTIARY": "grey",
+      } as any
+    }
+  >
+    {children}
   </div>
 );
+
+export const WithWhiteAccentColorSet: StoryFn<ButtonProps> = () => (
+  <WhiteAccentColorWrapper>
+    <Button {...defaultProps} />
+  </WhiteAccentColorWrapper>
+);

package/src/stories/DuffelAncillaries.stories.tsx

@@ -1,5 +1,5 @@
-import { DuffelAncillaries } from "@components/DuffelAncillaries";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryFn, StoryObj } from "@storybook/react";
+import { DuffelAncillaries } from "../components/DuffelAncillaries/DuffelAncillaries";
 import mockPassengers from "../fixtures/passengers/mock_passengers";
 import { DuffelAncillariesPropsWithOffersAndSeatMaps } from "../types/DuffelAncillariesProps";
 import { Offer } from "../types/Offer";
@@ -62,6 +62,28 @@ export const ExpiredOffer: DuffelAncillariesStory = {
   },
 };
 
+export const OneWayOnePassengerOffer: DuffelAncillariesStory = {
+  args: {
+    ...defaultProps,
+    offer: {
+      ...offer,
+      slices: [
+        {
+          ...offer.slices[0],
+          segments: [
+            {
+              ...offer.slices[0].segments[0],
+              passengers: [offer.slices[0].segments[0].passengers[0]],
+            },
+          ],
+        },
+      ],
+      passengers: [offer.passengers[0]],
+      available_services: [offer.available_services[0]],
+    },
+  },
+};
+
 export const WithCustomStyles: DuffelAncillariesStory = {
   args: {
     ...defaultProps,
@@ -124,3 +146,21 @@ export const MarkupUsingPriceFormattersWithCustomCurrency: DuffelAncillariesStor
       },
     },
   };
+
+export const WithAccentColorSet: StoryFn<
+  DuffelAncillariesPropsWithOffersAndSeatMaps
+> = () => (
+  <DuffelAncillaries
+    {...defaultProps}
+    styles={{ accentColor: "29, 78, 216" }}
+  />
+);
+
+export const WithWhiteAccentColorSet: StoryFn<
+  DuffelAncillariesPropsWithOffersAndSeatMaps
+> = () => (
+  <DuffelAncillaries
+    {...defaultProps}
+    styles={{ accentColor: "255, 255, 255" }}
+  />
+);

package/src/stories/DuffelPayments.stories.tsx

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  DuffelPayments,
+  DuffelPaymentsProps,
+} from "../components/DuffelPayments/DuffelPayments";
+
+export default {
+  title: "DuffelPayments",
+  component: DuffelPayments,
+} as Meta;
+
+type DuffelPaymentsStory = StoryObj<typeof DuffelPayments>;
+
+const defaultProps: DuffelPaymentsProps = {
+  paymentIntentClientToken:
+    "eyJjbGllbnRfc2VjcmV0IjoicGlfM0psczlVQWcySmhFeTh2WTBSTm1MU0JkX3NlY3JldF9QUW9yZXNuU3laeWJadGRiejZwNzBCbUdPIiwicHVibGlzaGFibGVfa2V5IjoicGtfdGVzdF9EQUJLY0E2Vzh6OTc0cTdPSWY0YmJ2MVQwMEpwRmMyOUpWIn0=",
+  onSuccessfulPayment: () => {}, // eslint-disable-line @typescript-eslint/no-empty-function
+  onFailedPayment: () => {}, // eslint-disable-line @typescript-eslint/no-empty-function
+};
+
+export const Default: DuffelPaymentsStory = {
+  args: defaultProps,
+};
+
+export const WithCustomStyles: DuffelPaymentsStory = {
+  args: {
+    ...defaultProps,
+    styles: {
+      accentColor: "29, 78, 216",
+      fontFamily: "monospace",
+      buttonCornerRadius: "15px",
+    },
+  },
+};

package/src/stories/Icon.stories.tsx

@@ -1,12 +1,13 @@
-import { Icon, ICON_MAP, IconName } from "@components/Icon";
 import { Meta } from "@storybook/react";
+import React from "react";
+import { Icon, ICON_MAP, IconName } from "../components/shared/Icon";
 
 export default {
   title: "Icon",
   component: Icon,
 } as Meta;
 
-export const FullList = () => (
+export const FullList: React.FC = () => (
   <div
     style={{
       display: "grid",

package/src/stories/IconButton.stories.tsx

@@ -1,5 +1,5 @@
-import { IconButton, IconButtonProps } from "@components/IconButton";
 import type { Meta, StoryObj } from "@storybook/react";
+import { IconButton, IconButtonProps } from "../components/shared/IconButton";
 
 export default {
   title: "IconButton",

package/src/stories/PlacesLookup.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta } from "@storybook/react";
+import React from "react";
+import {
+  PlacesLookup,
+  PlacesLookupProps,
+} from "../components/PlacesLookup/PlacesLookup";
+
+export default {
+  title: "PlacesLookup",
+  component: PlacesLookup,
+} as Meta;
+
+const defaultProps: PlacesLookupProps = {
+  onPlaceSelected: (selection) =>
+    alert(`Selected: ${JSON.stringify(selection)}`),
+};
+
+export const Default: React.FC = () => (
+  <div style={{ width: "350px" }}>
+    <PlacesLookup {...defaultProps} />
+  </div>
+);

package/src/styles/components/Button.css

@@ -62,7 +62,7 @@ button:-moz-focusring,
 }
 
 .button {
-  --button-color: white;
+  --button-color: var(--SECONDARY, white);
 
   box-sizing: border-box;
   border-radius: var(--BUTTON-RADIUS, 6px);
@@ -80,6 +80,8 @@ button:-moz-focusring,
   box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.25), 0px 0px 0px #e9e9eb;
 
   border: 1px solid rgba(var(--ACCENT), var(--ACCENT-LIGHT-1000));
+  /* Will give the button an outline if the accent color has high luminance */
+  border: 1px solid var(--SECONDARY);
   transition: background-color 0.3s var(--TRANSITION-CUBIC-BEZIER),
     box-shadow 0.3s var(--TRANSITION-CUBIC-BEZIER),
     color 0.3s var(--TRANSITION-CUBIC-BEZIER);
@@ -128,13 +130,19 @@ button:-moz-focusring,
 
 .button--primary:not(:disabled):hover {
   background-color: rgba(var(--ACCENT), var(--ACCENT-LIGHT-800));
-  border-color: rgba(var(--ACCENT), var(--ACCENT-LIGHT-800));
+  border-color: (
+    var(--SECONDARY),
+    rgba(var(--ACCENT), var(--ACCENT-LIGHT-800))
+  );
   box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.15), 0px 0px 0px 2px #e9e9eb;
 }
 
 .button--primary:not(:disabled):active {
   background-color: rgba(var(--ACCENT), var(--ACCENT-LIGHT-1000));
-  border-color: rgba(var(--ACCENT), var(--ACCENT-LIGHT-1000));
+  border-color: (
+    var(--SECONDARY),
+    rgba(var(--ACCENT), var(--ACCENT-LIGHT-1000))
+  );
   box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.25), 0px 0px 0px 1px #dcdcde;
 }
 

package/src/styles/components/Card.css

@@ -33,18 +33,18 @@
 .ancillary-card:not(:disabled):not(.ancillary-card--loading):hover,
 .ancillary-card:not(:disabled):not(.ancillary-card--loading):focus-visible {
   /* important is needed here to override the inline border style from Card.tsx */
-  border-color: rgb(var(--ACCENT)) !important;
+  border-color: var(--SECONDARY, rgb(var(--ACCENT))) !important;
 }
 
 .ancillary-card:not(:disabled):not(.ancillary-card--loading):hover
   .ancillary-card__expand-icon,
 .ancillary-card:not(:disabled):not(.ancillary-card--loading):focus-visible
   .ancillary-card__expand-icon {
-  color: rgb(var(--ACCENT));
+  color: var(--SECONDARY, rgb(var(--ACCENT)));
 }
 
 .ancillary-card__selected-icon {
-  background-color: rgb(var(--ACCENT));
+  background-color: var(--SECONDARY, rgb(var(--ACCENT)));
   border-radius: 20px;
   color: rgb(var(--WHITE));
   height: 24px;

package/src/styles/components/CfarSelectionModal.css

@@ -17,7 +17,7 @@
 }
 
 .cfar-modal-list-item > svg {
-  color: rgb(var(--ACCENT));
+  color: var(--SECONDARY, rgb(var(--ACCENT)));
 }
 
 .cfar-modal-list-item > p {

package/src/styles/components/DuffelPayments.css

@@ -0,0 +1,42 @@
+.card-payment__container {
+  width: 480px;
+  height: auto;
+  max-width: 480px;
+  box-sizing: border-box;
+  margin: var(--SPACING-XS-3);
+}
+
+.card-payment__container--invalid {
+  margin-top: var(--SPACING-SM-1);
+  font-size: var(--FONT-SIZES-C2);
+  color: var(--RED);
+}
+
+.card-payment__container--invalid {
+  height: 16px;
+}
+
+.card-details {
+  background-color: rgb(var(--WHITE));
+  border: 1px solid var(--GREY-200);
+  border-radius: 5px;
+  padding: var(--SPACING-SM-2);
+  width: auto;
+}
+
+.card-details.StripeElement--invalid {
+  border: 1px solid var(--RED);
+}
+
+.card-payment__pay-button {
+  width: 100%;
+  margin-top: var(--SPACING-SM-3);
+}
+
+.card-payment--in-progress {
+  display: block;
+  z-index: 3;
+  width: 100vw;
+  height: 100vh;
+  position: absolute;
+}

package/src/styles/components/Legend.css

@@ -27,8 +27,9 @@
   width: var(--SPACING-MD-1);
   height: var(--SPACING-MD-1);
   border-radius: 5px;
-  border: 2px solid var(--GREY-400);
-  color: var(--GREY-400);
+  border: 2px solid var(--GREY-200);
+  color: var(--GREY-600);
+  background-color: var(--GREY-100);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -37,22 +38,25 @@
 
 .seat-map__legend-seat--fee-payable {
   background-color: rgba(var(--ACCENT), var(--ACCENT-LIGHT-100));
-  border: 2px solid rgba(var(--ACCENT), var(--ACCENT-LIGHT-200));
+  border: 2px solid
+    var(--TERTIARY, rgba(var(--ACCENT), var(--ACCENT-LIGHT-200)));
 }
 
 .seat-map__legend-seat--fee-payable-indicator {
   position: relative;
   top: var(--SPACING-XS-2);
   left: var(--SPACING-XS-2);
-  color: rgba(var(--ACCENT), var(--ACCENT-LIGHT-300));
+  color: var(--TERTIARY, rgba(var(--ACCENT), var(--ACCENT-LIGHT-300)));
 }
 
 .seat-map__legend-seat--included {
   background-color: rgba(var(--ACCENT), var(--ACCENT-LIGHT-100));
-  border: 2px solid rgba(var(--ACCENT), var(--ACCENT-LIGHT-200));
+  border: 2px solid
+    var(--TERTIARY, rgba(var(--ACCENT), var(--ACCENT-LIGHT-200)));
 }
 
 .seat-map__legend-seat--selected {
   background-color: rgba(var(--ACCENT), var(--ACCENT-LIGHT-1000));
-  border: 2px solid rgba(var(--ACCENT), var(--ACCENT-LIGHT-1000));
+  border: 2px solid
+    var(--SECONDARY, rgba(var(--ACCENT), var(--ACCENT-LIGHT-1000)));
 }

package/src/styles/components/LoadingState.css

@@ -24,7 +24,10 @@
   margin: var(--SPACING-SM-3) 0;
   border-radius: 999px;
   width: calc(100% - var(--SPACING-SM-1));
-  background-color: rgba(var(--ACCENT), var(--ACCENT-LIGHT-100));
+  background-color: var(
+    --SECONDARY,
+    rgba(var(--ACCENT), var(--ACCENT-LIGHT-100))
+  );
   position: relative;
   transition: var(--TRANSITIONS-CUBIC-BEZIER);
 }
@@ -33,7 +36,10 @@
   display: block;
   height: 100%;
   border-radius: 999px;
-  background-color: rgba(var(--ACCENT), var(--ACCENT-LIGHT-1000));
+  background-color: var(
+    --TERTIARY,
+    rgba(var(--ACCENT), var(--ACCENT-LIGHT-1000))
+  );
   position: relative;
   animation: fillstatus 1s linear;
 }

package/src/styles/components/Modal.css

@@ -27,7 +27,8 @@
 
 .modal--open,
 .modal--open .modal--content {
-  opacity: 1;
+  /* important needed to override inline style */
+  opacity: 1 !important;
   pointer-events: all;
 }
 

package/src/styles/components/PassengerSelect.css

@@ -43,7 +43,10 @@
 .passenger-selection-passenger:hover,
 .passenger-selection-passenger:focus,
 .passenger-selection-passenger:active {
-  background-color: rgba(var(--ACCENT), var(--ACCENT-LIGHT-100));
+  background-color: var(
+    --SECONDARY,
+    rgba(var(--ACCENT), var(--ACCENT-LIGHT-100))
+  );
 }
 
 .passenger-selection-passenger__identifier,
@@ -78,7 +81,10 @@
 .passenger-selection-passenger--selected {
   box-shadow: 4px 0px 0px 0px rgba(var(--ACCENT), var(--ACCENT-LIGHT-1000))
     inset;
-  background-color: rgba(var(--ACCENT), var(--ACCENT-LIGHT-100));
+  background-color: var(
+    --SECONDARY,
+    rgba(var(--ACCENT), var(--ACCENT-LIGHT-100))
+  );
 }
 
 .passenger-selection-segment {

package/src/styles/components/PlacesLookup.css

@@ -0,0 +1,36 @@
+.places-lookup-input {
+  width: 100%;
+}
+
+.places-lookup-popover {
+  background-color: var(--WHITE);
+  box-shadow: 0px 1px 4px rgba(59, 64, 86, 0.3);
+  border-radius: 4px;
+  margin-top: 4px;
+  width: 100%;
+  padding: 4px;
+}
+
+.places-lookup-popover__item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem;
+  cursor: pointer;
+  column-gap: var(--SPACING-XS-2);
+  background-color: transparent;
+  border: none;
+  border-radius: 4px;
+}
+
+.places-lookup-popover__item:hover,
+.places-lookup-popover__item:focus {
+  background-color: var(--GREY-100);
+}
+
+.places-lookup-popover__icon-and-name-container {
+  column-gap: var(--SPACING-SM-1);
+  display: flex;
+  align-items: flex-start;
+  text-align: start;
+}