@shipengine/elements 2.22.0 → 2.24.1

package/esm/components/service-point-display/operating-hours.js

@@ -1,254 +0,0 @@
-import { jsx, jsxs } from '@emotion/react/jsx-runtime';
-import { useToggle } from '../../hooks/use-toggle.js';
-import { useMemo, useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Icon, IconSize, Typography } from '@shipengine/giger';
-import { IconNames } from '@shipengine/giger-theme';
-import { styles } from './operating-hours.styles.js';
-
-const OperatingHoursDisplay = ({
-  hoursOfOperation,
-  rateSelected
-}) => {
-  const {
-    t
-  } = useTranslation("purchase-label");
-  const [hoursExpanded, setHoursExpanded] = useToggle(false);
-  const daysOfTheWeek = useMemo(() => Object.keys(hoursOfOperation), [hoursOfOperation]);
-  const today = useMemo(() => {
-    const currentDayIndex = new Date().getDay();
-    return daysOfTheWeek[currentDayIndex - 1] || "sunday";
-  }, [daysOfTheWeek]);
-  const isToday = useCallback(day => day === today, [today]);
-  const formatTime = time => {
-    const timeInHHMMSS = time.match(/^(\d{2}):(\d{2}):(\d+)$/);
-    if (!timeInHHMMSS) return time;
-    return `${timeInHHMMSS[1]}:${timeInHHMMSS[2]}`;
-  };
-  const formatDay = day => day.charAt(0).toUpperCase() + day.slice(1);
-  const formatServicePointHours = hours => {
-    // if no hours return "closed"
-    if (hours.length === 0) return t("servicePoints.closed");
-    // if only one set of hours return the formatted time
-    if (hours.length === 1) {
-      return `${formatTime(hours[0].open)} - ${formatTime(hours[0].close)}`;
-    }
-    // if multiple sets of hours, handle possible overlapping hours
-    // example should return: ["8:00 - 13:00", "14:00 - 20:00"]
-    // monday: [
-    //   { open: "08:00:00", close: "10:00:00" },
-    //   { open: "10:00:00", close: "12:00:00" },
-    //   { open: "12:00:00", close: "13:00:00" },
-    //   { open: "14:00:00", close: "20:00:00" },
-    // ],
-    const formattedHours = [];
-    let currentOpen = hours[0].open;
-    let currentClose = hours[0].close;
-    for (let i = 1; i < hours.length; i++) {
-      const nextOpen = hours[i].open;
-      const nextClose = hours[i].close;
-      if (currentClose === nextOpen) {
-        currentClose = nextClose;
-      } else {
-        // if there is a gap in the hours, add the current set and start a new comparison
-        formattedHours.push(`${formatTime(currentOpen)} - ${formatTime(currentClose)}`);
-        currentOpen = nextOpen;
-        currentClose = nextClose;
-      }
-    }
-    // add the last set of hours
-    formattedHours.push(`${formatTime(currentOpen)} - ${formatTime(currentClose)}`);
-    return formattedHours;
-  };
-  const getHoursOfOperationByDay = day => {
-    const hours = hoursOfOperation[day];
-    return {
-      day: formatDay(day),
-      hours: formatServicePointHours(hours)
-    };
-  };
-  const TypographyWrapper = ({
-    day,
-    children,
-    isClosed
-  }) => {
-    return jsx(Typography, Object.assign({
-      css: styles.getTextStyles(isToday(day), hoursExpanded, isClosed)
-    }, {
-      children: children
-    }));
-  };
-  const HoursDisplay = ({
-    day,
-    hours
-  }) => {
-    return jsx("div", Object.assign({
-      css: styles.hoursDisplayContainer
-    }, {
-      children: Array.isArray(hours) ? hours.map((hour, index) => jsx(TypographyWrapper, Object.assign({
-        day: day
-      }, {
-        children: hour
-      }), index)) : jsx(TypographyWrapper, Object.assign({
-        day: day,
-        isClosed: hours === t("servicePoints.closed")
-      }, {
-        children: hours
-      }))
-    }));
-  };
-  // TODO: No longer using this function until we can compare local time zone to service points time zone and/or API returns timezone data or times in UTC. Keeping for future reference.
-  // const displayOpenOrClosedStatus = useCallback(
-  //   (hoursOfOperation: ServicePoint["hoursOfOperation"]) => {
-  //     const todaysHoursOfOperation = hoursOfOperation[today as keyof typeof hoursOfOperation];
-  //     if (!todaysHoursOfOperation) {
-  //       return <Typography>{t("servicePoints.closed")}</Typography>;
-  //     }
-  //     const currentTime = new Date().getHours();
-  //     const { open, close } = todaysHoursOfOperation[0];
-  //     const isBeforeOpenTime = currentTime <= parseInt(open.split(":")[0]) - 1 && currentTime < 12;
-  //     const isAfterCloseTime = currentTime >= parseInt(close.split(":")[0]);
-  //     const isOpen = !isBeforeOpenTime && !isAfterCloseTime;
-  //     const findNextOpenDayAndTime = () => {
-  //       const currentDayIdx = daysOfTheWeek.indexOf(today);
-  //       if (isBeforeOpenTime) {
-  //         return {
-  //           nextOpenDay: t("servicePoints.today"),
-  //           nextOpenTime: formatTime(open),
-  //         };
-  //       }
-  //       let i = currentDayIdx + 1;
-  //       // Loop until we find a day with hours of operation
-  //       while (i !== currentDayIdx) {
-  //         i = i % daysOfTheWeek.length;
-  //         const nextDay = daysOfTheWeek[i];
-  //         const nextDayHours = hoursOfOperation[nextDay as keyof typeof hoursOfOperation];
-  //         if (nextDay && nextDayHours.length > 0) {
-  //           return {
-  //             nextOpenDay: formatDay(nextDay),
-  //             nextOpenTime: formatTime(nextDayHours[0].open),
-  //           };
-  //         }
-  //         i++;
-  //       }
-  //       return {
-  //         nextOpenDay: "",
-  //         nextOpenTime: "",
-  //       };
-  //     };
-  //     const { nextOpenDay, nextOpenTime } = findNextOpenDayAndTime();
-  //     return isOpen ? (
-  //       <>
-  //         <Typography bold css={styles.open}>
-  //           {`${t("servicePoints.open")} `}
-  //         </Typography>
-  //         <Typography>{`${t("servicePoints.until", {
-  //           time: formatTime(close),
-  //         })}`}</Typography>
-  //       </>
-  //     ) : (
-  //       <>
-  //         <Typography bold css={styles.closed}>
-  //           {`${t("servicePoints.closed")} `}
-  //         </Typography>
-  //         <Typography>{`| ${t("servicePoints.nextOpeningDay", {
-  //           day: nextOpenDay,
-  //           time: nextOpenTime,
-  //         })}`}</Typography>
-  //       </>
-  //     );
-  //   },
-  //   [daysOfTheWeek, today, formatDay, t]
-  // );
-  const displayTodaysHours = day => {
-    const {
-      day: formattedDay,
-      hours
-    } = getHoursOfOperationByDay(day);
-    return (
-      // TODO: uncomment open/closed status below and remove lines 223 - 228 when line 124 TODO is resolved
-      // <div css={{ alignItems: "center", display: "flex" }}>
-      //   {displayOpenOrClosedStatus(hoursOfOperation)}
-      //   {rateSelected && (
-      //     <Icon
-      //       aria-label={hoursExpanded ? "collapse hours" : "expand hours"}
-      //       name={hoursExpanded ? IconNames.CHEVRON_TOP : IconNames.CHEVRON_BOTTOM}
-      //       onClick={setHoursExpanded}
-      //       size={IconSize.SIZE_MEDIUM}
-      //     />
-      //   )}
-      // </div>
-      jsxs("div", Object.assign({
-        css: styles.inlineWrapper
-      }, {
-        children: [jsx(TypographyWrapper, Object.assign({
-          day: day
-        }, {
-          children: formattedDay
-        })), jsxs("div", Object.assign({
-          css: styles.inlineWrapper
-        }, {
-          children: [jsx(HoursDisplay, {
-            day: day,
-            hours: hours
-          }), rateSelected && jsx(Icon, {
-            "aria-label": hoursExpanded ? "collapse hours" : "expand hours",
-            name: hoursExpanded ? IconNames.CHEVRON_TOP : IconNames.CHEVRON_BOTTOM,
-            onClick: setHoursExpanded,
-            onKeyDown: e => e.key === "Enter" && setHoursExpanded(),
-            size: IconSize.SIZE_MEDIUM,
-            tabIndex: 0
-          })]
-        }))]
-      }))
-    );
-  };
-  const displayAllHours = days => {
-    return jsxs("section", {
-      children: [jsxs("div", Object.assign({
-        css: styles.inlineWrapper
-      }, {
-        children: [jsx(Typography, Object.assign({
-          css: styles.getTextStyles(false, hoursExpanded)
-        }, {
-          children: t("servicePoints.localTimeDisclaimer")
-        })), rateSelected && jsx(Icon, {
-          "aria-label": hoursExpanded ? "collapse hours" : "expand hours",
-          name: hoursExpanded ? IconNames.CHEVRON_TOP : IconNames.CHEVRON_BOTTOM,
-          onClick: setHoursExpanded,
-          onKeyDown: e => e.key === "Enter" && setHoursExpanded(),
-          size: IconSize.SIZE_MEDIUM,
-          tabIndex: 0
-        })]
-      })), jsx("ul", {
-        children: days.map((day, idx) => {
-          const {
-            day: formattedDay,
-            hours
-          } = getHoursOfOperationByDay(day);
-          return jsxs("li", Object.assign({
-            css: styles.hoursListItem
-          }, {
-            children: [jsx("div", Object.assign({
-              css: styles.dayColumn
-            }, {
-              children: jsx(TypographyWrapper, Object.assign({
-                day: day
-              }, {
-                children: formattedDay
-              }))
-            })), jsx(HoursDisplay, {
-              day: day,
-              hours: hours
-            })]
-          }), idx);
-        })
-      })]
-    });
-  };
-  return jsx("section", {
-    children: hoursExpanded ? displayAllHours(daysOfTheWeek) : displayTodaysHours(today)
-  });
-};
-
-export { OperatingHoursDisplay };

package/esm/components/service-point-display/operating-hours.styles.js

@@ -1,47 +0,0 @@
-import { createStyles, scopeTheme } from '../../utilities/styles.js';
-
-const styles = createStyles({
-  closed: theme => ({
-    color: scopeTheme(theme).palette.error.main,
-    whiteSpace: "pre"
-  }),
-  dayColumn: theme => ({
-    gridColumn: "1",
-    minWidth: scopeTheme(theme).spacing(12)
-  }),
-  getTextStyles: (isToday, expanded, isClosed) => theme => ({
-    color: expanded ? scopeTheme(theme).palette.gray.main : scopeTheme(theme).palette.gray.dark,
-    fontStyle: isClosed ? "italic" : "normal",
-    fontWeight: isToday && expanded ? "bold" : "normal"
-  }),
-  hoursDisplayContainer: theme => ({
-    "& > span": {
-      lineHeight: `${scopeTheme(theme).typography.lineHeight.S} !important`
-    },
-    "& > span:last-child": {
-      marginBottom: scopeTheme(theme).spacing(0.5)
-    },
-    display: "flex",
-    flexDirection: "column"
-  }),
-  hoursListItem: theme => ({
-    display: "grid",
-    gap: scopeTheme(theme).spacing(1),
-    gridTemplateColumns: "auto 1fr",
-    listStyle: "none",
-    marginBottom: scopeTheme(theme).spacing(0.5)
-  }),
-  inlineWrapper: theme => ({
-    "& > span": {
-      lineHeight: `${scopeTheme(theme).typography.lineHeight.S} !important`
-    },
-    display: "flex",
-    gap: scopeTheme(theme).spacing(1)
-  }),
-  open: theme => ({
-    color: scopeTheme(theme).palette.success.main,
-    whiteSpace: "pre"
-  })
-});
-
-export { styles };

package/esm/components/service-point-display/service-point-display.js

@@ -1,128 +0,0 @@
-import { jsxs, jsx, Fragment } from '@emotion/react/jsx-runtime';
-import { useState, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Icon, IconSize, Typography, Link } from '@shipengine/giger';
-import { IconNames } from '@shipengine/giger-theme';
-import { OperatingHoursDisplay } from './operating-hours.js';
-import { styles } from './service-point-display.styles.js';
-
-/* https://auctane.atlassian.net/browse/ENGINE-7329
- * For iteration one we would hardcode services for which it will be available  (in the future this data will be in the registry. We will change hardcoding then)
- * carriersWithPaperless and servicesWithPaperless are hardcoded for iteration one
- */
-const carriersWithPaperless = "hermes";
-const servicesWithPaperless = ["hermes_domestic_parcelshop_dropoff", "hermes_domestic_parcelshop_dropoff_next_day", "hermes_postable", "hermes_postable_next_day"];
-const formatDistance = meters => {
-  return meters < 1000 ? "< 1 km" : `${parseFloat((meters / 1000).toFixed(1))} km`;
-};
-const ServicePointDisplay = ({
-  onViewMapClick,
-  servicePoint,
-  rateSelected,
-  mapViewEnabled: _mapViewEnabled = false,
-  showViewMapButton: _showViewMapButton = true
-}) => {
-  const {
-    t
-  } = useTranslation("purchase-label");
-  const [isFilteredServicesWithPaperless, setIsFilteredServicesWithPaperless] = useState(false);
-  /* https://auctane.atlassian.net/browse/ENGINE-7329
-   * For iteration one we would hardcode services for which it will be available  (in the future this data will be in the registry. We will change hardcoding then)
-   */
-  useEffect(() => {
-    if (carriersWithPaperless === servicePoint.carrierCode) {
-      const filteredServicesWithPaperless = servicePoint.serviceCodes.map(serviceCode => {
-        return servicesWithPaperless.filter(service => service === serviceCode);
-      }).length > 0;
-      setIsFilteredServicesWithPaperless(filteredServicesWithPaperless);
-    }
-  }, [servicePoint.carrierCode, servicePoint.serviceCodes]);
-  return jsxs("div", Object.assign({
-    css: styles.container
-  }, {
-    children: [isFilteredServicesWithPaperless && jsxs("section", Object.assign({
-      css: styles.paperlessWrapper
-    }, {
-      children: [jsx(Icon, {
-        css: styles.paperlessIcon,
-        name: IconNames.PRINTER,
-        size: IconSize.SIZE_MEDIUM
-      }), jsx(Icon, {
-        css: styles.paperlessIcon,
-        name: IconNames.SCAN_QR,
-        size: IconSize.SIZE_MEDIUM
-      }), jsx(Typography, Object.assign({
-        css: styles.paperlessText,
-        variant: "small"
-      }, {
-        children: t("servicePoints.paperless")
-      }))]
-    })), jsx("div", Object.assign({
-      css: styles.getSelectedStyles()
-    }, {
-      children: jsx(Typography, Object.assign({
-        bold: true,
-        css: {
-          whiteSpace: "nowrap"
-        }
-      }, {
-        children: servicePoint.companyName
-      }))
-    })), jsx(Typography, {
-      children: `${servicePoint.addressLine1}, ${servicePoint.postalCode}`
-    }), jsx(OperatingHoursDisplay, {
-      hoursOfOperation: servicePoint.hoursOfOperation,
-      rateSelected: rateSelected
-    }), jsx("div", Object.assign({
-      css: styles.inlineWrapper
-    }, {
-      children: jsxs("div", Object.assign({
-        css: styles.inlineWrapper
-      }, {
-        children: [jsx(Typography, {
-          children: formatDistance(servicePoint.distanceInMeters)
-        }), _showViewMapButton && !_mapViewEnabled ? jsxs(Fragment, {
-          children: [jsx(Typography, Object.assign({
-            "aria-hidden": "true"
-          }, {
-            children: "|"
-          })), jsx("a", Object.assign({
-            "aria-hidden": !rateSelected,
-            css: styles.viewMap,
-            href: `https://wego.here.com/discover/${encodeURIComponent(servicePoint.companyName)}%20${encodeURIComponent(servicePoint.addressLine1)},%20${encodeURIComponent(servicePoint.cityLocality)},%20${encodeURIComponent(servicePoint.postalCode)}?map=${servicePoint.lat},${servicePoint.long}`,
-            rel: "noreferrer",
-            target: "_blank"
-          }, {
-            children: jsx(Typography, Object.assign({
-              "aria-hidden": !rateSelected
-            }, {
-              children: t("servicePoints.viewMap")
-            }))
-          }))]
-        }) : _mapViewEnabled && rateSelected && jsxs(Fragment, {
-          children: [jsx(Typography, Object.assign({
-            "aria-hidden": "true"
-          }, {
-            children: "|"
-          })), jsx(Link, Object.assign({
-            "aria-hidden": !rateSelected,
-            "aria-label": "View Map",
-            onClick: () => onViewMapClick === null || onViewMapClick === void 0 ? void 0 : onViewMapClick(servicePoint),
-            onKeyDown: e => {
-              if (e.key === "Enter") {
-                onViewMapClick === null || onViewMapClick === void 0 ? void 0 : onViewMapClick(servicePoint);
-              }
-            },
-            role: "button"
-          }, {
-            children: jsx(Typography, {
-              children: t("servicePoints.viewMap")
-            })
-          }))]
-        })]
-      }))
-    }))]
-  }));
-};
-
-export { ServicePointDisplay, formatDistance };

package/esm/components/service-points/service-points.js

@@ -1,121 +0,0 @@
-import { jsxs, jsx, Fragment } from '@emotion/react/jsx-runtime';
-import { useToggle } from '../../hooks/use-toggle.js';
-import { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Skeleton, SkeletonAnimation, SkeletonBackgroundColor, SkeletonVariant, InlineNotification, NotificationType, Divider, Typography, Button, ButtonVariant, Icon, IconSize } from '@shipengine/giger';
-import { IconNames } from '@shipengine/giger-theme';
-import { styles } from './service-points.styles.js';
-import { ServicePointDisplay } from '../service-point-display/service-point-display.js';
-
-const ServicePoints = ({
-  servicePoints,
-  rateSelected,
-  onSelectServicePoint,
-  mapViewEnabled,
-  isLoading
-}) => {
-  const {
-    t
-  } = useTranslation("purchase-label");
-  const [expanded, toggleExpanded] = useToggle(false);
-  const [selectedServicePoint, setSelectedServicePoint] = useState(servicePoints === null || servicePoints === void 0 ? void 0 : servicePoints[0]);
-  if (!servicePoints) {
-    return null;
-  }
-  const handleOnSelectServicePoint = servicePoint => {
-    setSelectedServicePoint(servicePoint);
-    onSelectServicePoint === null || onSelectServicePoint === void 0 ? void 0 : onSelectServicePoint(servicePoint);
-  };
-  // Only show first 3 service points
-  if (servicePoints.length > 3) {
-    servicePoints = servicePoints.slice(0, 3);
-  }
-  if (isLoading) {
-    return jsxs("div", Object.assign({
-      css: styles.servicePointSkeleton
-    }, {
-      children: [jsx(Skeleton, {
-        animation: SkeletonAnimation.WAVE,
-        backgroundColor: SkeletonBackgroundColor.LIGHT,
-        height: 16,
-        variant: SkeletonVariant.TEXT,
-        width: 200
-      }), jsx(Skeleton, {
-        animation: SkeletonAnimation.WAVE,
-        backgroundColor: SkeletonBackgroundColor.LIGHT,
-        height: 16,
-        variant: SkeletonVariant.TEXT,
-        width: 200
-      }), jsx(Skeleton, {
-        animation: SkeletonAnimation.WAVE,
-        backgroundColor: SkeletonBackgroundColor.LIGHT,
-        height: 16,
-        variant: SkeletonVariant.TEXT,
-        width: 200
-      }), jsx(Skeleton, {
-        animation: SkeletonAnimation.WAVE,
-        backgroundColor: SkeletonBackgroundColor.LIGHT,
-        height: 16,
-        variant: SkeletonVariant.TEXT,
-        width: 200
-      })]
-    }));
-  }
-  if (!isLoading && servicePoints && servicePoints.length === 0) {
-    return jsx(InlineNotification, Object.assign({
-      css: {
-        margin: "16px"
-      },
-      type: NotificationType.INFO
-    }, {
-      children: t("purchase-label:servicePoints.noServicePointsForService")
-    }));
-  }
-  return jsxs("div", Object.assign({
-    css: rateSelected && expanded ? styles.expandedContainerStyles : styles.containerStyles,
-    "data-testid": "service-points"
-  }, {
-    children: [jsxs("div", Object.assign({
-      "aria-hidden": !rateSelected,
-      css: styles.servicePointWrapper
-    }, {
-      children: [jsx(ServicePointDisplay, {
-        mapViewEnabled: mapViewEnabled,
-        onViewMapClick: servicePoint => handleOnSelectServicePoint(servicePoint),
-        rateSelected: rateSelected,
-        servicePoint: servicePoints[0]
-      }), rateSelected && expanded && jsxs(Fragment, {
-        children: [jsx(Divider, {}), jsx(Typography, Object.assign({
-          css: styles.subText,
-          variant: "small"
-        }, {
-          children: t("servicePoints.otherLocations")
-        })), servicePoints.filter(servicePoint => servicePoint.servicePointId !== (selectedServicePoint === null || selectedServicePoint === void 0 ? void 0 : selectedServicePoint.servicePointId)).map(servicePoint => jsx(ServicePointDisplay, {
-          mapViewEnabled: mapViewEnabled,
-          onViewMapClick: servicePoint => handleOnSelectServicePoint(servicePoint),
-          rateSelected: rateSelected,
-          servicePoint: servicePoint
-        }, servicePoint.servicePointId))]
-      })]
-    })), jsx(Button, Object.assign({
-      css: styles.button,
-      onClick: toggleExpanded,
-      variant: ButtonVariant.TEXT
-    }, {
-      children: jsxs("div", Object.assign({
-        css: styles.locationToggle
-      }, {
-        children: [jsx(Typography, Object.assign({
-          "aria-hidden": !rateSelected
-        }, {
-          children: rateSelected && expanded ? t("servicePoints.hideLocations") : t("servicePoints.moreLocations")
-        })), jsx(Icon, {
-          name: expanded ? IconNames.CHEVRON_TOP : IconNames.CHEVRON_BOTTOM,
-          size: IconSize.SIZE_MEDIUM
-        })]
-      }))
-    }))]
-  }));
-};
-
-export { ServicePoints };

package/esm/components/settings-card/settings-card.js

@@ -1,71 +0,0 @@
-import { jsxs, jsx } from '@emotion/react/jsx-runtime';
-import { Typography, Tag, TagColor, Button, ButtonColor, ButtonVariant } from '@shipengine/giger';
-import { styles } from './settings-card.styles.js';
-import { ButtonGroup } from '../button-group/button-group.js';
-
-const SettingsCard = ({
-  accessoryAction,
-  cardAction,
-  children,
-  subtitle,
-  title,
-  verticallyAligned
-}) => {
-  return jsxs("div", Object.assign({
-    css: verticallyAligned ? styles.verticalContainer : styles.container,
-    "data-testid": "settingsCard"
-  }, {
-    children: [jsxs("div", Object.assign({
-      css: styles.header
-    }, {
-      children: [jsxs("div", Object.assign({
-        css: styles.title
-      }, {
-        children: [typeof title === "string" ? jsx(Typography, Object.assign({
-          variant: "subtitle2"
-        }, {
-          children: title
-        })) : title, subtitle && jsx(Tag, Object.assign({
-          color: TagColor.GRAY,
-          css: {
-            textTransform: "capitalize"
-          }
-        }, {
-          children: subtitle
-        }))]
-      })), jsx("div", Object.assign({
-        css: {
-          flexShrink: 0
-        }
-      }, {
-        children: jsx(Button, Object.assign({
-          color: ButtonColor.SECONDARY,
-          onClick: cardAction.action,
-          variant: ButtonVariant.TEXT
-        }, {
-          children: cardAction.name
-        }))
-      }))]
-    })), children && jsx("div", Object.assign({
-      css: styles.body
-    }, {
-      children: jsxs("div", {
-        children: [children, accessoryAction && jsx(ButtonGroup, Object.assign({
-          justify: "center"
-        }, {
-          children: jsx(Button, Object.assign({
-            bold: false,
-            color: ButtonColor.SECONDARY,
-            onClick: accessoryAction.action,
-            type: "button",
-            variant: ButtonVariant.TEXT
-          }, {
-            children: accessoryAction.name
-          }))
-        }))]
-      })
-    }))]
-  }));
-};
-
-export { SettingsCard };

package/esm/components/skeleton/skeleton-carrier-row.js

@@ -1,35 +0,0 @@
-import { jsxs, jsx } from '@emotion/react/jsx-runtime';
-import { Skeleton, SkeletonAnimation, SkeletonVariant, SkeletonBackgroundColor } from '@shipengine/giger';
-import { styles } from './skeleton-carrier-row.styles.js';
-
-const SkeletonCarrierRow = () => {
-  return jsxs("div", Object.assign({
-    css: styles.skeletonRow,
-    "data-testid": "skeleton-carrier-row"
-  }, {
-    children: [jsxs("div", Object.assign({
-      css: styles.skeletonLogoContainer
-    }, {
-      children: [jsx(Skeleton, {
-        animation: SkeletonAnimation.WAVE,
-        height: 24,
-        variant: SkeletonVariant.RECT,
-        width: 24
-      }), jsx(Skeleton, {
-        animation: SkeletonAnimation.WAVE,
-        backgroundColor: SkeletonBackgroundColor.DARK,
-        height: 20,
-        variant: SkeletonVariant.TEXT,
-        width: 80
-      })]
-    })), jsx(Skeleton, {
-      animation: SkeletonAnimation.WAVE,
-      backgroundColor: SkeletonBackgroundColor.DARK,
-      height: 20,
-      variant: SkeletonVariant.TEXT,
-      width: 73
-    })]
-  }));
-};
-
-export { SkeletonCarrierRow };