@shipengine/elements 2.20.0 → 2.22.0

package/cjs/components/service-point-display/service-point-display.cjs

@@ -0,0 +1,133 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var React = require('react');
+var reactI18next = require('react-i18next');
+var giger = require('@shipengine/giger');
+var gigerTheme = require('@shipengine/giger-theme');
+var operatingHours = require('./operating-hours.cjs');
+var servicePointDisplay_styles = require('./service-point-display.styles.cjs');
+
+/* 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
+  } = reactI18next.useTranslation("purchase-label");
+  const [isFilteredServicesWithPaperless, setIsFilteredServicesWithPaperless] = React.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)
+   */
+  React.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 jsxRuntime.jsxs("div", Object.assign({
+    css: servicePointDisplay_styles.styles.container
+  }, {
+    children: [isFilteredServicesWithPaperless && jsxRuntime.jsxs("section", Object.assign({
+      css: servicePointDisplay_styles.styles.paperlessWrapper
+    }, {
+      children: [jsxRuntime.jsx(giger.Icon, {
+        css: servicePointDisplay_styles.styles.paperlessIcon,
+        name: gigerTheme.IconNames.PRINTER,
+        size: giger.IconSize.SIZE_MEDIUM
+      }), jsxRuntime.jsx(giger.Icon, {
+        css: servicePointDisplay_styles.styles.paperlessIcon,
+        name: gigerTheme.IconNames.SCAN_QR,
+        size: giger.IconSize.SIZE_MEDIUM
+      }), jsxRuntime.jsx(giger.Typography, Object.assign({
+        css: servicePointDisplay_styles.styles.paperlessText,
+        variant: "small"
+      }, {
+        children: t("servicePoints.paperless")
+      }))]
+    })), jsxRuntime.jsx("div", Object.assign({
+      css: servicePointDisplay_styles.styles.getSelectedStyles()
+    }, {
+      children: jsxRuntime.jsx(giger.Typography, Object.assign({
+        bold: true,
+        css: {
+          whiteSpace: "nowrap"
+        }
+      }, {
+        children: servicePoint.companyName
+      }))
+    })), jsxRuntime.jsx(giger.Typography, {
+      children: `${servicePoint.addressLine1}, ${servicePoint.postalCode}`
+    }), jsxRuntime.jsx(operatingHours.OperatingHoursDisplay, {
+      hoursOfOperation: servicePoint.hoursOfOperation,
+      rateSelected: rateSelected
+    }), jsxRuntime.jsx("div", Object.assign({
+      css: servicePointDisplay_styles.styles.inlineWrapper
+    }, {
+      children: jsxRuntime.jsxs("div", Object.assign({
+        css: servicePointDisplay_styles.styles.inlineWrapper
+      }, {
+        children: [jsxRuntime.jsx(giger.Typography, {
+          children: formatDistance(servicePoint.distanceInMeters)
+        }), _showViewMapButton && !_mapViewEnabled ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [jsxRuntime.jsx(giger.Typography, Object.assign({
+            "aria-hidden": "true"
+          }, {
+            children: "|"
+          })), jsxRuntime.jsx("a", Object.assign({
+            "aria-hidden": !rateSelected,
+            css: servicePointDisplay_styles.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: jsxRuntime.jsx(giger.Typography, Object.assign({
+              "aria-hidden": !rateSelected
+            }, {
+              children: t("servicePoints.viewMap")
+            }))
+          }))]
+        }) : _mapViewEnabled && rateSelected && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [jsxRuntime.jsx(giger.Typography, Object.assign({
+            "aria-hidden": "true"
+          }, {
+            children: "|"
+          })), jsxRuntime.jsx(giger.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: jsxRuntime.jsx(giger.Typography, {
+              children: t("servicePoints.viewMap")
+            })
+          }))]
+        })]
+      }))
+    }))]
+  }));
+};
+
+exports.ServicePointDisplay = ServicePointDisplay;
+exports.formatDistance = formatDistance;

package/cjs/components/service-point-display/service-point-display.styles.cjs

@@ -0,0 +1,53 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles$1 = require('../../utilities/styles.cjs');
+
+const styles = styles$1.createStyles({
+  container: {
+    display: "flex",
+    flexDirection: "column"
+  },
+  getSelectedStyles: isSelected => theme => ({
+    alignItems: "center",
+    display: "flex",
+    gap: styles$1.scopeTheme(theme).spacing(1),
+    justifyContent: isSelected ? "" : "space-between"
+  }),
+  inlineWrapper: theme => ({
+    alignItems: "center",
+    display: "flex",
+    gap: styles$1.scopeTheme(theme).spacing(1),
+    justifyContent: "space-between"
+  }),
+  paperlessIcon: theme => ({
+    color: styles$1.scopeTheme(theme).palette.gray[600],
+    paddingRight: "4px"
+  }),
+  paperlessText: theme => ({
+    color: styles$1.scopeTheme(theme).palette.gray[600],
+    paddingLeft: styles$1.scopeTheme(theme).spacing(0.5)
+  }),
+  paperlessWrapper: () => ({
+    display: "flex",
+    marginBottom: "12px"
+  }),
+  selectButton: theme => ({
+    backgroundColor: styles$1.scopeTheme(theme).palette.primary.main,
+    borderRadius: styles$1.scopeTheme(theme).borderRadius.S,
+    color: styles$1.scopeTheme(theme).palette.white,
+    cursor: "pointer",
+    padding: `${styles$1.scopeTheme(theme).spacing(0.25)}px ${styles$1.scopeTheme(theme).spacing(1)}px`,
+    whiteSpace: "nowrap"
+  }),
+  viewMap: theme => ({
+    "&:hover": {
+      textDecoration: "underline"
+    },
+    color: styles$1.scopeTheme(theme).palette.secondary.main,
+    textDecoration: "none"
+  })
+});
+
+exports.styles = styles;

package/cjs/components/service-points/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var servicePoints = require('./service-points.cjs');
+
+
+
+exports.ServicePoints = servicePoints.ServicePoints;

package/cjs/components/service-points/service-points.cjs

@@ -0,0 +1,125 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var useToggle = require('../../hooks/use-toggle.cjs');
+var React = require('react');
+var reactI18next = require('react-i18next');
+var giger = require('@shipengine/giger');
+var gigerTheme = require('@shipengine/giger-theme');
+var servicePoints_styles = require('./service-points.styles.cjs');
+var servicePointDisplay = require('../service-point-display/service-point-display.cjs');
+
+const ServicePoints = ({
+  servicePoints,
+  rateSelected,
+  onSelectServicePoint,
+  mapViewEnabled,
+  isLoading
+}) => {
+  const {
+    t
+  } = reactI18next.useTranslation("purchase-label");
+  const [expanded, toggleExpanded] = useToggle.useToggle(false);
+  const [selectedServicePoint, setSelectedServicePoint] = React.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 jsxRuntime.jsxs("div", Object.assign({
+      css: servicePoints_styles.styles.servicePointSkeleton
+    }, {
+      children: [jsxRuntime.jsx(giger.Skeleton, {
+        animation: giger.SkeletonAnimation.WAVE,
+        backgroundColor: giger.SkeletonBackgroundColor.LIGHT,
+        height: 16,
+        variant: giger.SkeletonVariant.TEXT,
+        width: 200
+      }), jsxRuntime.jsx(giger.Skeleton, {
+        animation: giger.SkeletonAnimation.WAVE,
+        backgroundColor: giger.SkeletonBackgroundColor.LIGHT,
+        height: 16,
+        variant: giger.SkeletonVariant.TEXT,
+        width: 200
+      }), jsxRuntime.jsx(giger.Skeleton, {
+        animation: giger.SkeletonAnimation.WAVE,
+        backgroundColor: giger.SkeletonBackgroundColor.LIGHT,
+        height: 16,
+        variant: giger.SkeletonVariant.TEXT,
+        width: 200
+      }), jsxRuntime.jsx(giger.Skeleton, {
+        animation: giger.SkeletonAnimation.WAVE,
+        backgroundColor: giger.SkeletonBackgroundColor.LIGHT,
+        height: 16,
+        variant: giger.SkeletonVariant.TEXT,
+        width: 200
+      })]
+    }));
+  }
+  if (!isLoading && servicePoints && servicePoints.length === 0) {
+    return jsxRuntime.jsx(giger.InlineNotification, Object.assign({
+      css: {
+        margin: "16px"
+      },
+      type: giger.NotificationType.INFO
+    }, {
+      children: t("purchase-label:servicePoints.noServicePointsForService")
+    }));
+  }
+  return jsxRuntime.jsxs("div", Object.assign({
+    css: rateSelected && expanded ? servicePoints_styles.styles.expandedContainerStyles : servicePoints_styles.styles.containerStyles,
+    "data-testid": "service-points"
+  }, {
+    children: [jsxRuntime.jsxs("div", Object.assign({
+      "aria-hidden": !rateSelected,
+      css: servicePoints_styles.styles.servicePointWrapper
+    }, {
+      children: [jsxRuntime.jsx(servicePointDisplay.ServicePointDisplay, {
+        mapViewEnabled: mapViewEnabled,
+        onViewMapClick: servicePoint => handleOnSelectServicePoint(servicePoint),
+        rateSelected: rateSelected,
+        servicePoint: servicePoints[0]
+      }), rateSelected && expanded && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [jsxRuntime.jsx(giger.Divider, {}), jsxRuntime.jsx(giger.Typography, Object.assign({
+          css: servicePoints_styles.styles.subText,
+          variant: "small"
+        }, {
+          children: t("servicePoints.otherLocations")
+        })), servicePoints.filter(servicePoint => servicePoint.servicePointId !== (selectedServicePoint === null || selectedServicePoint === void 0 ? void 0 : selectedServicePoint.servicePointId)).map(servicePoint => jsxRuntime.jsx(servicePointDisplay.ServicePointDisplay, {
+          mapViewEnabled: mapViewEnabled,
+          onViewMapClick: servicePoint => handleOnSelectServicePoint(servicePoint),
+          rateSelected: rateSelected,
+          servicePoint: servicePoint
+        }, servicePoint.servicePointId))]
+      })]
+    })), jsxRuntime.jsx(giger.Button, Object.assign({
+      css: servicePoints_styles.styles.button,
+      onClick: toggleExpanded,
+      variant: giger.ButtonVariant.TEXT
+    }, {
+      children: jsxRuntime.jsxs("div", Object.assign({
+        css: servicePoints_styles.styles.locationToggle
+      }, {
+        children: [jsxRuntime.jsx(giger.Typography, Object.assign({
+          "aria-hidden": !rateSelected
+        }, {
+          children: rateSelected && expanded ? t("servicePoints.hideLocations") : t("servicePoints.moreLocations")
+        })), jsxRuntime.jsx(giger.Icon, {
+          name: expanded ? gigerTheme.IconNames.CHEVRON_TOP : gigerTheme.IconNames.CHEVRON_BOTTOM,
+          size: giger.IconSize.SIZE_MEDIUM
+        })]
+      }))
+    }))]
+  }));
+};
+
+exports.ServicePoints = ServicePoints;

package/cjs/components/service-points/service-points.styles.cjs

@@ -0,0 +1,58 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles$1 = require('../../utilities/styles.cjs');
+
+const styles = styles$1.createStyles({
+  button: {
+    alignSelf: "flex-end",
+    gridArea: "2 / 2 / 3 / 3",
+    justifySelf: "flex-end",
+    padding: 0
+  },
+  containerStyles: theme => ({
+    display: "grid",
+    gridTemplateColumns: "repeat(2, 1fr)",
+    gridTemplateRows: "repeat(2, 1fr)",
+    padding: styles$1.scopeTheme(theme).spacing(2)
+  }),
+  expandedContainerStyles: theme => ({
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    padding: styles$1.scopeTheme(theme).spacing(2)
+  }),
+  locationToggle: theme => ({
+    alignItems: "center",
+    color: styles$1.scopeTheme(theme).palette.gray.dark,
+    display: "flex",
+    lineHeight: styles$1.scopeTheme(theme).typography.lineHeight.S,
+    whiteSpace: "nowrap"
+  }),
+  selectButton: theme => ({
+    backgroundColor: styles$1.scopeTheme(theme).palette.primary.main,
+    borderRadius: styles$1.scopeTheme(theme).borderRadius.S,
+    color: styles$1.scopeTheme(theme).palette.white,
+    cursor: "pointer",
+    padding: `${styles$1.scopeTheme(theme).spacing(0.25)}px ${styles$1.scopeTheme(theme).spacing(1)}px`,
+    whiteSpace: "nowrap"
+  }),
+  servicePointSkeleton: theme => ({
+    display: "flex",
+    flexDirection: "column",
+    gap: styles$1.scopeTheme(theme).spacing(1.25),
+    padding: styles$1.scopeTheme(theme).spacing(2)
+  }),
+  servicePointWrapper: theme => ({
+    display: "flex",
+    flexDirection: "column",
+    gap: styles$1.scopeTheme(theme).spacing(1),
+    gridArea: "1 / 1 / 3 / 3"
+  }),
+  subText: theme => ({
+    color: styles$1.scopeTheme(theme).palette.gray.main
+  })
+});
+
+exports.styles = styles;

package/cjs/components/settings-card/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var settingsCard = require('./settings-card.cjs');
+
+
+
+exports.SettingsCard = settingsCard.SettingsCard;

package/cjs/components/settings-card/settings-card.cjs

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

package/cjs/components/settings-card/settings-card.styles.cjs

@@ -0,0 +1,49 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles$1 = require('../../utilities/styles.cjs');
+
+const styles = styles$1.createStyles({
+  body: theme => ({
+    borderTop: `1px solid ${styles$1.scopeTheme(theme).palette.gray.light}`,
+    color: styles$1.scopeTheme(theme).palette.black,
+    lineHeight: styles$1.scopeTheme(theme).spacing(0.05),
+    marginRight: styles$1.scopeTheme(theme).spacing(2),
+    padding: styles$1.scopeTheme(theme).spacing(2),
+    textTransform: "uppercase",
+    width: "100%"
+  }),
+  container: theme => ({
+    border: `1px solid ${styles$1.scopeTheme(theme).palette.gray.light}`,
+    borderRadius: styles$1.scopeTheme(theme).borderRadius.M,
+    boxSizing: "border-box",
+    width: "100%"
+  }),
+  header: theme => ({
+    alignItems: "center",
+    borderRadius: 2,
+    color: styles$1.scopeTheme(theme).palette.black,
+    display: "flex",
+    justifyContent: "space-between",
+    padding: styles$1.scopeTheme(theme).spacing(2),
+    width: "100%"
+  }),
+  title: theme => ({
+    alignItems: "center",
+    display: "flex",
+    gap: styles$1.scopeTheme(theme).spacing(),
+    justifyContent: "space-between"
+  }),
+  verticalContainer: theme => ({
+    alignItems: "center",
+    border: `1px solid ${styles$1.scopeTheme(theme).palette.gray.light}`,
+    borderRadius: styles$1.scopeTheme(theme).borderRadius.M,
+    boxSizing: "border-box",
+    display: "flex",
+    height: "100%",
+    width: "100%"
+  })
+});
+
+exports.styles = styles;

package/cjs/components/skeleton/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var skeletonCarrierRow = require('./skeleton-carrier-row.cjs');
+
+
+
+exports.SkeletonCarrierRow = skeletonCarrierRow.SkeletonCarrierRow;

package/cjs/components/skeleton/skeleton-carrier-row.cjs

@@ -0,0 +1,39 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var giger = require('@shipengine/giger');
+var skeletonCarrierRow_styles = require('./skeleton-carrier-row.styles.cjs');
+
+const SkeletonCarrierRow = () => {
+  return jsxRuntime.jsxs("div", Object.assign({
+    css: skeletonCarrierRow_styles.styles.skeletonRow,
+    "data-testid": "skeleton-carrier-row"
+  }, {
+    children: [jsxRuntime.jsxs("div", Object.assign({
+      css: skeletonCarrierRow_styles.styles.skeletonLogoContainer
+    }, {
+      children: [jsxRuntime.jsx(giger.Skeleton, {
+        animation: giger.SkeletonAnimation.WAVE,
+        height: 24,
+        variant: giger.SkeletonVariant.RECT,
+        width: 24
+      }), jsxRuntime.jsx(giger.Skeleton, {
+        animation: giger.SkeletonAnimation.WAVE,
+        backgroundColor: giger.SkeletonBackgroundColor.DARK,
+        height: 20,
+        variant: giger.SkeletonVariant.TEXT,
+        width: 80
+      })]
+    })), jsxRuntime.jsx(giger.Skeleton, {
+      animation: giger.SkeletonAnimation.WAVE,
+      backgroundColor: giger.SkeletonBackgroundColor.DARK,
+      height: 20,
+      variant: giger.SkeletonVariant.TEXT,
+      width: 73
+    })]
+  }));
+};
+
+exports.SkeletonCarrierRow = SkeletonCarrierRow;

package/cjs/components/skeleton/skeleton-carrier-row.styles.cjs

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles$1 = require('../../utilities/styles.cjs');
+
+const styles = styles$1.createStyles({
+  skeletonLogoContainer: theme => ({
+    alignItems: "center",
+    columnGap: `${styles$1.scopeTheme(theme).spacing(1)}px`,
+    display: "flex"
+  }),
+  skeletonRow: theme => ({
+    "&:not(:last-of-type)": {
+      borderBottom: `1px solid ${styles$1.scopeTheme(theme).palette.gray.light}`
+    },
+    alignItems: "center",
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    padding: `${styles$1.scopeTheme(theme).spacing(3)}px ${styles$1.scopeTheme(theme).spacing(2)}px`
+  })
+});
+
+exports.styles = styles;

package/cjs/components/spacer/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var spacer = require('./spacer.cjs');
+
+
+
+exports.Spacer = spacer.Spacer;

package/cjs/components/spacer/spacer.cjs

@@ -0,0 +1,54 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var styles$1 = require('../../utilities/styles.cjs');
+
+/**
+ * @internal
+ *
+ * # Spacer Component Util Function
+ *
+ * - This is a utility function that generates dynamic styles for the `<Spacer />` component.
+ *
+ * @param SpacerProps The base props that will be passed into the `<Spacer />` component at
+ * point of use.
+ *
+ *
+ * @see {@link Spacer | The `<Spacer />` component that uses these dynamic styles}
+ *
+ */
+const styles = styles$1.createStyles({
+  getSpacerStyles: ({
+    displayOn,
+    multiplier: _multiplier = 4
+  }) => theme => Object.assign(Object.assign({}, displayOn ? {
+    display: "none",
+    [styles$1.scopeTheme(theme).mediaQuery(displayOn)]: {
+      display: "block"
+    }
+  } : {
+    display: "block"
+  }), {
+    height: styles$1.scopeTheme(theme).spacing(_multiplier),
+    width: "100%"
+  })
+});
+/**
+ * @internal
+ *
+ * # Spacer Composition Component
+ *
+ * - The `Spacer` is a composition component used to create a space between elements
+ * in the UI.
+ *
+ * @see {@link Spacer.SpacerProps | The props necessary to render the `<Spacer />` component}
+ * @see {@link Spacer.getSpacerStyles | The util function that generates the styles for the `<Spacer />` component}
+ *
+ */
+const Spacer = props => jsxRuntime.jsx("div", {
+  css: styles.getSpacerStyles(props)
+});
+
+exports.Spacer = Spacer;

package/cjs/components/spread/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var spread = require('./spread.cjs');
+
+
+
+exports.Spread = spread.Spread;