@shipengine/elements 2.24.1 → 2.26.0

package/README.md

@@ -1,15 +1,196 @@
 <!-- README for NPM; the one for GitHub is in .github directory. -->
 
-## Usage
+## Creating a New Element
 
-Visit [our documentation page](https://www.shipengine.com/docs/elements/elements-guide/) to learn how to get started with ShipEngine Elements.
+ShipEngine Elements is a collection of React components that provide shipping functionality through a standardized interface.
+This guide provides the essential steps for creating new elements in the ShipEngine Elements library.
 
-## Installation
+## Element Architecture
 
-```bash
-npm install @shipengine/elements
+Each element is composed of:
+
+- **Component**: Your main React component logic
+- **createElement Wrapper**: Provides error boundaries, i18n, and styling
+- **Element Provider**: Manages global state and configuration
+
+## File Structure
+
+```
+libs/elements/src/elements/new-element/
+├── index.ts                    # Export file
+├── new-element.tsx       # Main element file
+├── __stories__/               # Storybook stories
+│   └── new-element.stories.tsx
+└── __tests__/                 # Jest tests
+    └── new-element.test.tsx
 ```
 
+## Step-by-Step Guide
+
+### 1. Create the Directory Structure
+
 ```bash
-yarn add @shipengine/elements
+mkdir -p libs/elements/src/elements/new-element/{__stories__,__tests__}
+```
+
+### 2. Create the Main Element File
+
+**`libs/elements/src/elements/new-element/new-element.tsx`**
+
+```tsx
+import { ErrorFallback } from "@components/error-fallback";
+import { Button, Typography } from "@shipengine/giger";
+import { useTranslation } from "react-i18next";
+
+import { createElement } from "../../create-element";
+import { en } from "../../locales";
+
+/**
+ * Props for the NewElement component
+ */
+export type NewElementProps = {
+  /**
+   * Optional title to display
+   */
+  title?: string;
+
+  /**
+   * Callback function when action is performed
+   */
+  onClick?: (value: any) => void;
+};
+
+/**
+ * # NewElement Component
+ *
+ * Brief description of what this element does and its purpose.
+ */
+export const Component = ({ title = "New Element Title", onClick }: NewElementProps) => {
+  const { t } = useTranslation();
+
+  const handleOnClick = () => {
+    const value = { name: "ShipEngine Elements" };
+    onClick?.(value);
+  };
+
+  return (
+    <div>
+      <Typography variant="h2">{title}</Typography>
+
+      <Typography variant="body1">{t("description")}</Typography>
+
+      <Button onClick={handleOnClick}>{t("actionButton")}</Button>
+    </div>
+  );
+};
+
+/**
+ * # NewElement Element
+ *
+ * The registered element that can be used directly in applications.
+ */
+export const Element = createElement(Component, ErrorFallback, {
+  css: {
+    height: "100%",
+    maxWidth: "800px",
+    minWidth: "440px",
+    width: "100%",
+  },
+  resources: { en },
+});
+
+export type ElementProps = React.ComponentProps<typeof Element>;
+```
+
+### 3. Create the Index File
+
+**`libs/elements/src/elements/new-element/index.ts`**
+
+```ts
+export * as NewElement from "./new-element";
+export type { NewElementProps } from "./new-element";
+```
+
+### 4. Add Localization Resources
+
+**`libs/elements/src/locales/en/new-element.json`**
+
+```json
+{
+  "description": "This is a new Element!",
+  "actionButton": "Continue"
+}
+```
+
+### 5. Create Storybook Stories
+
+**`libs/elements/src/elements/new-element/__stories__/new-element.stories.tsx`**
+
+```tsx
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { NewElement } from "../new-element";
+
+const meta: Meta<typeof NewElement.Element> = {
+  title: "Elements/NewElement",
+  component: NewElement.Element,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    title: "Default Example",
+  },
+};
+
+export const CustomTitle: Story = {
+  args: {
+    title: "Custom Element Title",
+  },
+};
+```
+
+### 7. Update Package Exports
+
+Add your new element to **`libs/elements/package.json`** exports:
+
+```json
+{
+  "exports": {
+    "./new-element": {
+      "source": "./src/elements/new-element/index.ts",
+      "import": {
+        "types": "./dist/types/elements/new-element/index.d.ts",
+        "default": "./dist/esm/elements/new-element/index.js"
+      },
+      "require": {
+        "types": "./dist/types/elements/new-element/index.d.ts",
+        "default": "./dist/cjs/elements/new-element/index.cjs"
+      }
+    }
+  }
+}
 ```
+
+### 8. Update Main Index File
+
+Add your element to **`libs/elements/src/index.ts`**:
+
+```ts
+export * from "./elements/new-element";
+```
+
+## Best Practices
+
+- Use TypeScript with proper type definitions
+- Include JSDoc comments where appropriate
+- Write unit tests for functionality
+- Use i18 translation strings for all user-facing text
+- Follow existing code patterns for consistency
+- Test with Storybook during development

package/dist/cjs/components/display-term/display-term.cjs

@@ -8,14 +8,23 @@ var reactI18next = require('react-i18next');
 var displayTerm_styles = require('./display-term.styles.cjs');
 
 const DisplayTerm = ({
-  term
+  terms
 }) => {
   const {
     t
   } = reactI18next.useTranslation();
-  return jsxRuntime.jsx("ul", {
+  const {
+    links,
+    disclosure
+  } = terms;
+  return jsxRuntime.jsxs("ul", {
     css: displayTerm_styles.styles.container,
-    children: term.links.map(({
+    children: [disclosure && jsxRuntime.jsx("li", {
+      css: {
+        listStyle: "none"
+      },
+      children: disclosure
+    }), links.map(({
       link,
       title
     }) => jsxRuntime.jsx("li", {
@@ -33,7 +42,7 @@ const DisplayTerm = ({
           size: giger.IconSize.SIZE_SMALL
         })]
       })
-    }, title))
+    }, title))]
   });
 };
 

package/dist/cjs/components/field/credit-card-input/credit-card-input.cjs

@@ -4,41 +4,58 @@ var _tslib = require('../../../_virtual/_tslib.cjs');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 var giger = require('@shipengine/giger');
 var money = require('../../../utilities/money.cjs');
+var React = require('react');
 var createFieldController = require('../create-field-controller.cjs');
 var field_styles = require('../field.styles.cjs');
 
 const CreditCardInputController = createFieldController.createFieldController();
 const transform = {
-  in: v => v ? money.formatCreditCardNumber(v) : "",
+  in: (v, isFocused) => {
+    if (!v) return "";
+    return isFocused ? money.formatCreditCardNumber(v) : money.maskCreditCardNumber(v);
+  },
   out: event => event.target.value === "" ? null : event.target.value.replace(/\s/g, "")
 };
-const CreditCardInput = fieldProps => jsxRuntime.jsx(CreditCardInputController, Object.assign({}, fieldProps, {
-  children: _a => {
-    var {
-        onChange,
-        value
-      } = _a,
-      creditCardInputProps = _tslib.__rest(_a, ["onChange", "value"]);
-    return jsxRuntime.jsx("div", {
-      css: field_styles.styles.overrideStyles,
-      children: jsxRuntime.jsx(giger.Input, Object.assign({}, creditCardInputProps, {
-        onChange: e => {
-          // Amex allows 15 digits, all others allow 16
-          if (e.target.value.replace(/\s/g, "").length > 16) {
-            e.preventDefault();
-          } else {
-            onChange(transform.out(e));
-          }
-        },
-        onKeyDown: e => {
-          // Prevent non-numeric characters
-          if (!/^([0-9]|Backspace|Delete|Enter|Tab)$/i.test(e.key)) e.preventDefault();
-        },
-        type: "text",
-        value: transform.in(value)
-      }))
-    });
-  }
-}));
+const CreditCardInput = fieldProps => {
+  const [isFocused, setIsFocused] = React.useState(false);
+  return jsxRuntime.jsx(CreditCardInputController, Object.assign({}, fieldProps, {
+    children: _a => {
+      var {
+          onChange,
+          value
+        } = _a,
+        creditCardInputProps = _tslib.__rest(_a, ["onChange", "value"]);
+      return jsxRuntime.jsx("div", {
+        css: field_styles.styles.overrideStyles,
+        children: jsxRuntime.jsx(giger.Input, Object.assign({}, creditCardInputProps, {
+          onBlur: () => {
+            var _a;
+            setIsFocused(false);
+            (_a = creditCardInputProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(creditCardInputProps);
+          },
+          onChange: e => {
+            // Amex allows 15 digits, all others allow 16
+            if (e.target.value.replace(/\s/g, "").length > 16) {
+              e.preventDefault();
+            } else {
+              onChange(transform.out(e));
+            }
+          },
+          onFocus: e => {
+            var _a;
+            setIsFocused(true);
+            (_a = creditCardInputProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(creditCardInputProps, e);
+          },
+          onKeyDown: e => {
+            // Prevent non-numeric characters
+            if (!/^([0-9]|Backspace|Delete|Enter|Tab)$/i.test(e.key)) e.preventDefault();
+          },
+          type: "text",
+          value: transform.in(value, isFocused)
+        }))
+      });
+    }
+  }));
+};
 
 exports.CreditCardInput = CreditCardInput;

package/dist/cjs/components/field/rate-select/rate-card/rate-card.cjs

@@ -84,6 +84,7 @@ const RateCard = ({
   messages,
   onClick,
   onClickAcknowledgement,
+  onPaperlessAcknowledgementChange,
   onSelectServicePoint,
   otherAmount,
   rateId,
@@ -101,7 +102,9 @@ const RateCard = ({
   selectedRateCost,
   servicePoints: servicePoints$1,
   mapViewEnabled,
-  rateDetails
+  rateDetails,
+  paperlessDisplaySchemes,
+  paperlessLabelChecked = false
 }) => {
   /* TODO: ENGINE-7366: TODO Remove showVatSettings flag once this is fully in production */
   const showRateDetails = showVatFeatures && rateDetails && rateDetails.length > 0;
@@ -145,7 +148,8 @@ const RateCard = ({
       return undefined;
     }
   }, [confirmationAmount, insuranceAmount, isPreferredRate, otherAmount, selectedRateCost, shippingAmount, taxAmount]);
-  const hasFooterData = !!(rateMessages === null || rateMessages === void 0 ? void 0 : rateMessages.length) || requiresAcknowledgement;
+  const requiresPaperlessAcknowledgement = paperlessDisplaySchemes === null || paperlessDisplaySchemes === void 0 ? void 0 : paperlessDisplaySchemes.includes("qr_code");
+  const hasFooterData = !!(rateMessages === null || rateMessages === void 0 ? void 0 : rateMessages.length) || requiresAcknowledgement || requiresPaperlessAcknowledgement;
   const costBreakdownCommonProps = {
     confirmationAmount,
     insuranceAmount,
@@ -186,6 +190,17 @@ const RateCard = ({
       serviceInfo: {
         line1: carrierNickname,
         line2: getDeliveryDaysLabel(deliveryDays),
+        line3: paperlessDisplaySchemes && paperlessDisplaySchemes.length > 0 ? jsxRuntime.jsxs("div", {
+          "aria-label": t("purchase-label:paperlessAvailable"),
+          css: rateCard_styles.styles.paperlessText,
+          children: [jsxRuntime.jsx(giger.Icon, {
+            name: gigerTheme.IconNames.SCAN_QR,
+            size: giger.IconSize.SIZE_MEDIUM
+          }), jsxRuntime.jsx(giger.Typography, {
+            variant: "small",
+            children: t("purchase-label:paperlessAvailable")
+          })]
+        }) : undefined,
         type: serviceType
       }
     }), servicePoints$1 && jsxRuntime.jsxs(jsxRuntime.Fragment, {
@@ -200,16 +215,25 @@ const RateCard = ({
         rateSelected: selected,
         servicePoints: servicePoints$1
       })]
-    }), selected && hasFooterData && jsxRuntime.jsx(serviceCard.ServiceCardFooter, {
+    }), selected && hasFooterData && jsxRuntime.jsxs(serviceCard.ServiceCardFooter, {
       messages: rateMessages,
-      children: requiresAcknowledgement && onClickAcknowledgement && jsxRuntime.jsx(giger.Checkbox, {
+      children: [requiresAcknowledgement && onClickAcknowledgement && jsxRuntime.jsx(giger.Checkbox, {
         "aria-required": true,
         checked: isAcknowledged,
         css: rateCard_styles.styles.acknowledgment,
         "data-testid": "rate-acknowledgement",
         label: rateAcknowledgementMessage ? getPreferredRateAcknowledgementLabel(rateAcknowledgementMessage) : getAcknowledgementLabel(serviceCode, packageType),
         onChange: e => onClickAcknowledgement(e.target.checked)
-      })
+      }), requiresPaperlessAcknowledgement && jsxRuntime.jsx(giger.Checkbox, {
+        "aria-required": true,
+        checked: paperlessLabelChecked,
+        css: rateCard_styles.styles.acknowledgment,
+        "data-testid": "paperless-acknowledgement",
+        label: t("purchase-label:usePaperlessLabel"),
+        onChange: e => {
+          onPaperlessAcknowledgementChange === null || onPaperlessAcknowledgementChange === void 0 ? void 0 : onPaperlessAcknowledgementChange(e.target.checked, "qr_code");
+        }
+      })]
     })]
   });
 };

package/dist/cjs/components/field/rate-select/rate-card/rate-card.styles.cjs

@@ -5,10 +5,8 @@ var styles$1 = require('../../../../utilities/styles.cjs');
 const getRateCardFirstLineSize = theme => `${styles$1.scopeTheme(theme).spacing(3.25)}px`;
 const styles = styles$1.createStyles({
   acknowledgment: theme => ({
-    alignItems: "center",
     color: styles$1.scopeTheme(theme).palette.gray.main,
-    display: "flex",
-    paddingTop: styles$1.scopeTheme(theme).spacing(1.5)
+    display: "flex"
   }),
   divider: theme => ({
     borderColor: styles$1.scopeTheme(theme).palette.primary.main,
@@ -29,6 +27,13 @@ const styles = styles$1.createStyles({
     position: "absolute",
     right: 0,
     top: 0
+  }),
+  paperlessText: theme => ({
+    display: "flex",
+    gap: styles$1.scopeTheme(theme).spacing(0.25),
+    paddingTop: styles$1.scopeTheme(theme).spacing(0.5),
+    color: styles$1.scopeTheme(theme).palette.gray[600],
+    alignItems: "center"
   })
 });
 

package/dist/cjs/components/field/rate-select/rate-select.cjs

@@ -22,12 +22,13 @@ const RateSelect = _a => {
       nicknameFeature,
       preferredServiceCodes,
       onClick,
+      onPaperlessAcknowledgementChange,
       onSelectServicePoint,
       isLoading,
       mapViewEnabled,
       showVatFeatures
     } = _a,
-    fieldProps = _tslib.__rest(_a, ["nicknameFeature", "preferredServiceCodes", "onClick", "onSelectServicePoint", "isLoading", "mapViewEnabled", "showVatFeatures"]);
+    fieldProps = _tslib.__rest(_a, ["nicknameFeature", "preferredServiceCodes", "onClick", "onPaperlessAcknowledgementChange", "onSelectServicePoint", "isLoading", "mapViewEnabled", "showVatFeatures"]);
   // The calculated cost of the selected rate
   const [selectedRateCost, setSelectedRateCost] = React.useState();
   return jsxRuntime.jsx(RateSelectController, Object.assign({}, fieldProps, {
@@ -50,17 +51,37 @@ const RateSelect = _a => {
             isPreferredRate: preferredServiceCodes && preferredServiceCodes.includes(option.serviceCode),
             key: option.rateId,
             onClick: rateId => {
+              var _a;
               onClick === null || onClick === void 0 ? void 0 : onClick(rateId);
-              field.onChange({
-                isAcknowledged: !option.requiresAcknowledgement,
-                rateId
-              });
+              // if the rate supports "label_and_paperless" display scheme, use it by default
+              if ((_a = option.paperlessDisplaySchemes) === null || _a === void 0 ? void 0 : _a.includes("label_and_paperless")) {
+                field.onChange({
+                  usePaperlessLabel: true,
+                  labelDisplayScheme: "label_and_paperless",
+                  isAcknowledged: !option.requiresAcknowledgement,
+                  rateId
+                });
+              } else {
+                field.onChange({
+                  isAcknowledged: !option.requiresAcknowledgement,
+                  rateId
+                });
+              }
               setSelectedRateCost(rates.getTotalRateAmount(option));
             },
             onClickAcknowledgement: isAcknowledged => field.onChange(Object.assign(Object.assign({}, field.value), {
               isAcknowledged
             })),
+            onPaperlessAcknowledgementChange: (usePaperless, labelDisplayScheme) => {
+              field.onChange(Object.assign(Object.assign({}, field.value), {
+                usePaperlessLabel: usePaperless,
+                labelDisplayScheme
+              }));
+              onPaperlessAcknowledgementChange === null || onPaperlessAcknowledgementChange === void 0 ? void 0 : onPaperlessAcknowledgementChange(usePaperless, labelDisplayScheme);
+            },
             onSelectServicePoint: onSelectServicePoint,
+            paperlessDisplaySchemes: option.paperlessDisplaySchemes,
+            paperlessLabelChecked: field.value.usePaperlessLabel,
             rateDetails: option.rateDetails,
             selected: option.rateId === field.value.rateId,
             selectedRateCost: selectedRateCost,

package/dist/cjs/components/forms/address-form/address-form-schema.cjs

@@ -6,12 +6,12 @@ var address = require('../../../constants/shipengine/address.cjs');
 var zod = require('../../../extensions/zod.cjs');
 
 zod.extendZod();
-const refineName = n => n.match(/^[a-zA-Z']/);
 const refineNameStrict = n => n.match(address.addressNameRegex);
 const shipToAddressSchema = addressSchema.addressSchema.refine(schema => {
-  return refineName(schema.name);
+  // KEEP THIS STRICT, USPS REQUIRES 2 CHARACTERS FOR FIRST AND LAST NAME
+  return refineNameStrict(schema.name);
 }, {
-  message: "schemaErrors.invalidAddressName",
+  message: "schemaErrors.invalidAddressNameStrict",
   path: ["name"]
 }).refine(schema => !schema.phone || min.isValidPhoneNumber(schema.phone, schema.countryCode), {
   message: "schemaErrors.notAValidPhoneNumber",

package/dist/cjs/components/forms/edit-billing-form/edit-billing-form.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('@emotion/react/jsx-runtime');
+var useToggle = require('../../../hooks/use-toggle.cjs');
 var giger = require('@shipengine/giger');
 var formLogger = require('../../../utilities/form-logger.cjs');
 var validation = require('../../../utilities/validation.cjs');
@@ -10,19 +11,38 @@ var billingFields = require('../wallet-form/billing-fields.cjs');
 var editBillingForm_styles = require('./edit-billing-form.styles.cjs');
 var walletSchema = require('../wallet-form/wallet-schema.cjs');
 var addressFields = require('../address-form/address-fields.cjs');
+var addressDisplay = require('../../address-display/address-display.cjs');
+var linkAction = require('../../link-action/link-action.cjs');
 var buttonGroup = require('../../button-group/button-group.cjs');
 var submitButton = require('../../field/submit-button/submit-button.cjs');
 
 const EditBillingForm = ({
   onCancel,
   onSubmit,
-  isLoading
+  isLoading,
+  billingInfo
 }) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
   const {
     t
   } = reactI18next.useTranslation();
+  const [editBillingInfo, toggleEditBillingInfo] = useToggle.useToggle(false);
   const form = reactHookForm.useForm({
-    resolver: validation.validationResolver(walletSchema.getWalletSchema("emailRequired", "blackboxOptional"), ["creditCard"])
+    resolver: validation.validationResolver(walletSchema.getWalletSchema("emailRequired", "blackboxOptional"), ["creditCard"]),
+    defaultValues: {
+      address: {
+        name: (_a = billingInfo === null || billingInfo === void 0 ? void 0 : billingInfo.fullName) !== null && _a !== void 0 ? _a : "",
+        companyName: (_b = billingInfo === null || billingInfo === void 0 ? void 0 : billingInfo.company) !== null && _b !== void 0 ? _b : "",
+        addressLine1: (_c = billingInfo === null || billingInfo === void 0 ? void 0 : billingInfo.addressLine1) !== null && _c !== void 0 ? _c : "",
+        addressLine2: (_d = billingInfo === null || billingInfo === void 0 ? void 0 : billingInfo.addressLine2) !== null && _d !== void 0 ? _d : "",
+        cityLocality: (_e = billingInfo === null || billingInfo === void 0 ? void 0 : billingInfo.cityLocality) !== null && _e !== void 0 ? _e : "",
+        stateProvince: (_f = billingInfo === null || billingInfo === void 0 ? void 0 : billingInfo.stateProvince) !== null && _f !== void 0 ? _f : "",
+        postalCode: (_g = billingInfo === null || billingInfo === void 0 ? void 0 : billingInfo.postalCode) !== null && _g !== void 0 ? _g : "",
+        countryCode: billingInfo === null || billingInfo === void 0 ? void 0 : billingInfo.countryCode,
+        email: (_h = billingInfo === null || billingInfo === void 0 ? void 0 : billingInfo.email) !== null && _h !== void 0 ? _h : "",
+        phone: (_j = billingInfo === null || billingInfo === void 0 ? void 0 : billingInfo.phone) !== null && _j !== void 0 ? _j : ""
+      }
+    }
   });
   const handleSubmit = form.handleSubmit(values => {
     const {
@@ -59,14 +79,47 @@ const EditBillingForm = ({
           variant: "subtitle1",
           children: t("register-wallet:settings.billing.subtitleBilling")
         })
-      }), jsxRuntime.jsx(giger.GridChild, {
+      }), billingInfo && !editBillingInfo && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [jsxRuntime.jsx(giger.GridChild, {
+          colSpan: 9,
+          children: jsxRuntime.jsx(addressDisplay.AddressDisplay, {
+            address: Object.assign(Object.assign({}, billingInfo), {
+              name: billingInfo.fullName,
+              companyName: billingInfo.company
+            })
+          })
+        }), jsxRuntime.jsx(giger.GridChild, {
+          colSpan: 3,
+          css: {
+            textAlign: "right"
+          },
+          children: jsxRuntime.jsx(linkAction.LinkAction, {
+            css: {
+              alignSelf: "end"
+            },
+            onClick: () => {
+              toggleEditBillingInfo(true);
+              form.reset({
+                address: Object.assign(Object.assign({}, billingInfo), {
+                  name: billingInfo.fullName,
+                  companyName: billingInfo.company,
+                  countryCode: billingInfo.countryCode
+                })
+              }, {
+                keepDirtyValues: true
+              });
+            },
+            title: t("actions.edit")
+          })
+        })]
+      }), !billingInfo || editBillingInfo ? jsxRuntime.jsx(giger.GridChild, {
         colSpan: 12,
         children: jsxRuntime.jsx(addressFields.AddressFields, {
           form: form,
           formatFieldName: fieldName => `address.${fieldName}`,
           optionalFields: ["addressLine2"]
         })
-      }), jsxRuntime.jsx(giger.GridChild, {
+      }) : null, jsxRuntime.jsx(giger.GridChild, {
         colSpan: 12,
         children: jsxRuntime.jsxs(buttonGroup.ButtonGroup, {
           justify: "end",

package/dist/cjs/components/grid-controller/error-banner/error-banner.cjs

@@ -0,0 +1,74 @@
+'use strict';
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var giger = require('@shipengine/giger');
+var gigerTheme = require('@shipengine/giger-theme');
+var React = require('react');
+var reload = require('../../../assets/reload.svg.cjs');
+var errorBanner_styles = require('./error-banner.styles.cjs');
+var label = require('../../history/history-card/label/label.cjs');
+var linkAction = require('../../link-action/link-action.cjs');
+
+// This component is a temporary solution to handle error display, design is working to improve more error patterns to display
+const ErrorBanner = ({
+  labelText,
+  linkTitle,
+  onClick,
+  showReloadIcon,
+  duration,
+  onDurationEnd
+}) => {
+  const [isVisible, setIsVisible] = React.useState(true);
+  const timerRef = React.useRef(null);
+  // Set up the timer when the component mounts or duration changes
+  React.useEffect(() => {
+    if (duration && duration > 0) {
+      // Clear any existing timer
+      if (timerRef.current) clearTimeout(timerRef.current);
+      // Set up a new timer to hide the component after the specified duration
+      timerRef.current = setTimeout(() => {
+        setIsVisible(false);
+        // Call the onDurationEnd callback if provided
+        if (onDurationEnd) {
+          onDurationEnd();
+        }
+      }, duration);
+    }
+    // Clean up the timer when the component unmounts or duration changes
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [duration, onDurationEnd]);
+  if (!isVisible) return null;
+  return jsxRuntime.jsxs("div", {
+    css: errorBanner_styles.styles.errorContainer,
+    children: [showReloadIcon && jsxRuntime.jsx(reload, {
+      height: 24,
+      width: 24
+    }), linkTitle && !labelText && !onClick && jsxRuntime.jsxs("div", {
+      css: errorBanner_styles.styles.errorContent,
+      children: [jsxRuntime.jsx(giger.Icon, {
+        name: gigerTheme.IconNames.ALERT
+      }), jsxRuntime.jsx(giger.Typography, {
+        component: "p",
+        variant: "body2",
+        children: linkTitle
+      })]
+    }), linkTitle && labelText && onClick && jsxRuntime.jsx(label.Label, {
+      spacing: 0,
+      text: labelText !== null && labelText !== void 0 ? labelText : "",
+      textProps: {
+        css: errorBanner_styles.styles.errorHeading
+      },
+      variant: "subtitle",
+      children: jsxRuntime.jsx(linkAction.LinkAction, {
+        css: errorBanner_styles.styles.errorCTA,
+        isBold: false,
+        onClick: onClick,
+        title: linkTitle
+      })
+    })]
+  });
+};
+
+exports.ErrorBanner = ErrorBanner;