@artaio/arta-browser 2.19.1 → 2.20.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,8 @@
1
+ import type { TrackingConfig } from '../../trackingConfig';
2
+ import type { Shipment } from '../TrackingDrawer';
3
+ interface DeliveryDelayProps {
4
+ config: TrackingConfig;
5
+ shipment: Shipment;
6
+ }
7
+ export declare const DeliveryDelay: ({ config, shipment }: DeliveryDelayProps) => import("preact").JSX.Element | null;
8
+ export {};
@@ -0,0 +1,27 @@
1
+ 'use strict';
2
+
3
+ var jsxRuntime = require('preact/jsx-runtime');
4
+ var HexagonAlertBase = require('../ShipmentException/icons/HexagonAlertBase.js');
5
+
6
+ const isDeliveryDelayed = (shipment) => {
7
+ if (shipment.delivery_end == null) {
8
+ return false;
9
+ }
10
+ const end = new Date(shipment.delivery_end);
11
+ if (Number.isNaN(end.getTime())) {
12
+ return false;
13
+ }
14
+ end.setHours(23, 59, 59, 999);
15
+ return Date.now() > end.getTime();
16
+ };
17
+ const DeliveryDelay = ({ config, shipment }) => {
18
+ if (shipment.status === 'completed' ||
19
+ shipment.status === 'cancelled' ||
20
+ shipment.quote_type === 'track' ||
21
+ !isDeliveryDelayed(shipment)) {
22
+ return null;
23
+ }
24
+ return (jsxRuntime.jsxs("div", { class: "artajs__tracking__delay__wrapper", children: [jsxRuntime.jsx(HexagonAlertBase.HexagonAlertBase, { config: config }), jsxRuntime.jsx("div", { class: "artajs__tracking__delay__text", children: config.text.deliveryDelayedLabel })] }));
25
+ };
26
+
27
+ exports.DeliveryDelay = DeliveryDelay;
@@ -912,6 +912,24 @@
912
912
  cursor: pointer;
913
913
  }
914
914
 
915
+ .artajs__drawer .artajs__tracking__delay__wrapper {
916
+ display: flex;
917
+ align-items: flex-start;
918
+ justify-content: center;
919
+ gap: 8px;
920
+ padding: 0 16px 16px;
921
+ align-self: stretch;
922
+ border-bottom: 1px solid var(--border);
923
+ }
924
+
925
+ .artajs__drawer .artajs__tracking__delay__text {
926
+ color: var(--text-primary);
927
+ font-family: var(--font-family);
928
+ font-size: calc(var(--font-size) - 1px);
929
+ line-height: 150%;
930
+ letter-spacing: 0.2px;
931
+ }
932
+
915
933
  /* Shipments Events List */
916
934
 
917
935
  .artajs__drawer .artajs__tracking__events__wrapper {
@@ -2,6 +2,6 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var css = "/* reset */\n\n:root {\n --background: #ffffff;\n --text-primary: #110f10;\n --text-secondary: #6f6c65;\n --border: #e7e7e7;\n --width: 540px;\n --font-family: 'Neue Haas Grotesk Text Pro, Helvetica, sans-serif, Arial';\n --font-size: 14px;\n --default-styling: 'flex';\n --minimal-styling: 'none';\n\n --location-direction: 'row';\n --location-justify: 'center';\n --location-align: 'flex-start';\n --location-flex: '1 0 0';\n --backdrop-color: rgba(0, 0, 0, 0.5);\n\n --animationIn: none;\n\n --button-background: #110f10;\n --button-background-hover: #6f6c65;\n --button-border: #110f10;\n --button-text: #ffffff;\n --button-text-hover: #ffffff;\n --button-border-hover: #110f10;\n}\n\n.artajs__drawer,\n.artajs__drawer__backdrop {\n all: initial;\n}\n\n.artajs__drawer a,\n.artajs__drawer button,\n.artajs__drawer div,\n.artajs__drawer input,\n.artajs__drawer form,\n.artajs__drawer p,\n.artajs__drawer select,\n.artajs__drawer__backdrop div {\n all: unset;\n}\n\n/* Box sizing rules */\n.artajs__drawer *,\n.artajs__drawer *::before,\n.artajs__drawer *::after,\n.artajs__drawer__backdrop *,\n.artajs__drawer__backdrop *::before,\n.artajs__drawer__backdrop *::after {\n box-sizing: border-box;\n}\n\n/* Remove default margin */\n.artajs__drawer div,\n.artajs__drawer h1,\n.artajs__drawer h2,\n.artajs__drawer h3,\n.artajs__drawer h4,\n.artajs__drawer p {\n margin: 0;\n}\n\n.artajs__drawer div,\n.artajs__drawer p {\n display: block;\n font-family: var(--font-family);\n}\n\n/* Inherit fonts for inputs and buttons */\n.artajs__drawer input,\n.artajs__drawer button,\n.artajs__drawer select {\n font: inherit;\n margin: 0;\n}\n\n/* drawer styles */\n.artajs__drawer {\n background-color: var(--background);\n height: 100vh;\n position: fixed;\n z-index: 2001;\n bottom: 0px;\n font-family: var(--font-family);\n}\n\n@keyframes fadeInAnimation {\n 0% {\n opacity: 0;\n }\n\n 100% {\n opacity: 1;\n }\n}\n\n@keyframes slideInFromRight {\n 0% {\n transform: translateX(100%);\n }\n\n 100% {\n transform: translateX(0);\n }\n}\n\n@keyframes slideInFromLeft {\n 0% {\n transform: translateX(-100%);\n }\n\n 100% {\n transform: translateX(0);\n }\n}\n\n.artajs__drawer__left {\n left: 0;\n right: auto;\n animation: var(--animationIn);\n animation-iteration-count: 1;\n animation-fill-mode: forwards;\n}\n\n.artajs__drawer__right {\n left: auto;\n right: 0;\n animation: var(--animationIn);\n animation-iteration-count: 1;\n animation-fill-mode: forwards;\n}\n\n/* backdrop */\n.artajs__drawer__backdrop {\n background-color: var(--backdrop-color);\n bottom: 0;\n left: 0;\n position: fixed;\n right: 0;\n top: 0;\n z-index: 2001;\n}\n\n.artajs__drawer .artajs__tracking__out__wrapper {\n display: flex;\n width: var(--width);\n flex-direction: column;\n align-items: flex-start;\n\n background: var(--background, #fff);\n\n box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.25);\n height: 100%;\n}\n\n/* Header styles */\n.artajs__drawer .artajs__tracking__header {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n align-self: stretch;\n}\n\n.artajs__drawer .artajs__tracking__header__title {\n display: flex;\n padding: 16px 24px;\n align-items: center;\n align-self: stretch;\n gap: 16px;\n}\n\n.artajs__drawer .artajs__tracking__header__text {\n flex: 1 0 0;\n font-size: calc(var(--font-size) + 2px);\n font-weight: bold;\n line-height: 150%;\n color: var(--text-primary);\n}\n\n.artajs__drawer .artajs__tracking__header__icon {\n display: flex;\n width: 16px;\n height: 16px;\n padding-right: 0px;\n justify-content: center;\n align-items: center;\n}\n\n.artajs__drawer .artajs__tracking__header__icon a {\n cursor: pointer;\n display: block;\n height: 24px;\n text-decoration: none;\n}\n\n.artajs__drawer .artajs__tracking__header__icon a svg line {\n stroke: var(--text-secondary);\n}\n\n.artajs__drawer .artajs__tracking__header__icon a:hover svg line {\n stroke: var(--text-primary);\n}\n\n.artajs__drawer .artajs__tracking__header__line {\n width: 100%;\n height: 1px;\n background-color: var(--border);\n}\n\n/* Body styles */\n.artajs__drawer .artajs__tracking__body {\n display: flex;\n padding: 16px 24px;\n flex-direction: column;\n align-items: center;\n gap: 16px;\n align-self: stretch;\n overflow-y: auto;\n max-height: 100%;\n flex-grow: 1;\n}\n\n/* Timeline Default styles */\n.artajs__drawer .artajs__tracking__timeline__default__wrapper {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 16px;\n align-self: stretch;\n}\n\n.artajs__drawer .artajs__tracking__timeline__default__steps {\n display: flex;\n padding: 0px 16px;\n justify-content: space-between;\n align-items: flex-start;\n align-self: stretch;\n}\n\n.artajs__drawer .artajs__tracking__timeline__default__step__icon {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n}\n\n.artajs__drawer .artajs__tracking__timeline__triple__dots {\n display: flex;\n align-items: flex-start;\n gap: 4px;\n}\n\n.artajs__drawer .artajs__tracking__timeline__status__text__large {\n color: var(--text-primary);\n text-align: center;\n\n font-family: var(--font-family);\n font-size: calc(var(--font-size) + 2px);\n font-style: normal;\n font-weight: bold;\n line-height: 150%;\n}\n\n.artajs__drawer .artajs__tracking__timeline__step {\n display: flex;\n padding-top: 12px;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n}\n\n.artajs__drawer .artajs__tracking__timeline__step__text__secondary {\n color: var(--text-secondary);\n font-family: var(--font-family);\n font-size: var(--font-size);\n line-height: 150%;\n letter-spacing: 0.2px;\n}\n\n.artajs__drawer .artajs__tracking__timeline__step__text__primary {\n color: var(--text-primary);\n font-family: var(--font-family);\n font-size: var(--font-size);\n line-height: 150%;\n letter-spacing: 0.2px;\n}\n\n.artajs__drawer .artajs__tracking__timeline__status__text__wrapper {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.artajs__drawer .artajs__tracking__timeline__status__date {\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n gap: 0px 4px;\n align-self: stretch;\n flex-wrap: wrap;\n}\n\n.artajs__drawer .artajs__tracking__timeline__status__date__content {\n color: var(--text-primary);\n text-align: center;\n font-family: var(--font-family);\n font-size: calc(var(--font-size) - 2px);\n line-height: 150%;\n /* 18px */\n letter-spacing: 0.2px;\n}\n\n.artajs__drawer .artajs__tracking__timeline__status__date__secondary {\n color: var(--text-secondary);\n text-align: center;\n font-family: var(--font-family);\n font-size: calc(var(--font-size) - 3px);\n line-height: 150%;\n /* 18px */\n letter-spacing: 0.2px;\n}\n\n/* Timeline Minimal styles */\n.artajs__drawer .artajs__tracking__timeline__minimal__wrapper {\n display: flex;\n width: 140px;\n flex-direction: column;\n align-items: center;\n gap: 4px;\n}\n\n.artajs__drawer .artajs__tracking__timeline__wrapper {\n display: flex;\n flex-direction: column;\n align-items: center;\n align-self: stretch;\n}\n\n@media (max-width: 540px) {\n .artajs__drawer .artajs__tracking__out__wrapper {\n width: 100% !important;\n }\n\n .artajs__drawer__right {\n width: 100% !important;\n }\n\n .artajs__drawer__left {\n width: 100% !important;\n }\n\n .artajs__drawer .artajs__tracking__timeline__default__wrapper {\n display: none !important;\n }\n\n .artajs__drawer .artajs__tracking__timeline__minimal__wrapper {\n display: flex !important;\n }\n\n .artajs__drawer .artajs__tracking__location {\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n }\n\n .artajs__drawer .artajs__tracking__location__item {\n flex: 0 1 auto;\n }\n\n .artajs__drawer__backdrop {\n display: none;\n }\n}\n\n@media (min-width: 541px) {\n .artajs__drawer .artajs__tracking__out__wrapper {\n width: var(--width) !important;\n }\n\n .artajs__drawer__right {\n width: var(--width) !important;\n }\n\n .artajs__drawer__left {\n width: var(--width) !important;\n }\n\n .artajs__drawer .artajs__tracking__timeline__default__wrapper {\n display: var(--default-styling) !important;\n }\n\n .artajs__drawer .artajs__tracking__timeline__minimal__wrapper {\n display: var(--minimal-styling) !important;\n }\n\n .artajs__drawer .artajs__tracking__location {\n flex-direction: var(--location-direction);\n justify-content: var(--location-justify);\n align-items: var(--location-align);\n }\n\n .artajs__drawer .artajs__tracking__location__item {\n flex: var(--location-flex);\n }\n\n .artajs__drawer__backdrop {\n display: unset;\n }\n}\n\n.artajs__drawer .artajs__tracking__timeline__minimal__divider {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n}\n\n.artajs__drawer .artajs__tracking__timeline__minimal__step {\n display: flex;\n padding: 10px;\n align-items: flex-start;\n gap: 10px;\n}\n\n.artajs__drawer .artajs__tracking__timeline__minimal__spacing {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 12px;\n}\n\n.artajs__drawer .artajs__tracking__timeline__divider {\n display: flex;\n width: 140px;\n height: 1px;\n flex-direction: column;\n align-items: center;\n gap: 4px;\n border-bottom: 1px solid var(--border);\n}\n\n/* Tracking Top styles */\n.artajs__drawer .artajs__tracking__top__wrapper {\n display: flex;\n padding-bottom: 16px;\n flex-direction: column;\n align-items: flex-start;\n gap: 24px;\n align-self: stretch;\n border-bottom: 1px solid var(--border);\n}\n\n.artajs__drawer .artajs__tracking__top__divider {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n align-self: stretch;\n}\n\n.artajs__drawer .artajs__tracking__top__cta {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 4px;\n align-self: stretch;\n}\n\n.artajs__drawer .artajs__tracking__top__text {\n color: var(--text-primary);\n text-align: center;\n font-family: var(--font-family);\n font-size: var(--font-size);\n font-style: normal;\n font-weight: bold;\n line-height: 150%;\n letter-spacing: 0.2px;\n}\n\n.artajs__drawer .artajs__tracking__top__date__wrapper {\n display: flex;\n justify-content: center;\n align-items: flex-end;\n gap: 24px;\n align-self: stretch;\n}\n\n.artajs__drawer .artajs__tracking__top__date__aligner {\n display: flex;\n height: 71px;\n flex-direction: column;\n align-items: center;\n}\n\n.artajs__drawer .artajs__tracking__top__date__day {\n color: var(--text-primary);\n text-align: center;\n font-family: var(--font-family);\n font-size: calc(var(--font-size) - 2px);\n line-height: 150%;\n font-weight: bold;\n letter-spacing: 0.2px;\n}\n\n.artajs__drawer .artajs__tracking__top__date__day__numeric {\n color: var(--text-primary);\n text-align: center;\n font-family: var(--font-family);\n font-weight: bold;\n font-size: calc(var(--font-size) + 42px);\n line-height: calc(var(--font-size) + 42px);\n}\n\n.artajs__drawer .artajas__tracking__top__date__and {\n color: var(--text-primary);\n justify-content: flex-end;\n display: flex;\n flex-direction: column;\n font-size: calc(var(--font-size) - 1px);\n height: 95%;\n}\n\n/* Tracking Location */\n.artajs__drawer .artajas__tracking__location__wrapper {\n display: flex;\n padding-bottom: 16px;\n flex-direction: column;\n align-items: flex-start;\n gap: 6px;\n align-self: stretch;\n border-bottom: 1px solid var(--border);\n}\n\n.artajs__drawer .artajs__tracking__location {\n display: flex;\n gap: 8px;\n align-self: stretch;\n}\n\n.artajs__drawer .artajs__tracking__location__item {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n align-self: stretch;\n}\n\n.artajs__drawer .artajs__tracking__location__text__wrapper {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 2px;\n flex: 1 0 0;\n}\n\n.artajs__drawer .artajs__tracking__location__text__header {\n display: flex;\n align-items: center;\n gap: 4px;\n align-self: stretch;\n}\n\n.artajs__drawer .artajs__tracking__location__text__header__label {\n color: var(--text-primary);\n font-family: var(--font-family);\n font-weight: bold;\n font-size: calc(var(--font-size) - 2px);\n letter-spacing: 0.2px;\n line-height: 150%;\n text-align: left;\n}\n\n.artajs__drawer .artajs__tracking__location__text__content {\n color: var(--text-primary);\n font-family: var(--font-family);\n font-size: calc(var(--font-size) - 2px);\n letter-spacing: 0.2px;\n line-height: 150%;\n text-align: left;\n}\n\n/* Tracking Packings */\n\n.artajs__drawer .artajs__packings__wrapper {\n display: flex;\n padding: 16px 16px;\n flex-direction: column;\n align-items: flex-start;\n gap: 16px;\n align-self: stretch;\n border-radius: 8px;\n border: 1px solid var(--border);\n background: var(--background);\n\n /* 1 */\n box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);\n}\n\n.artajs__drawer .artajs__packings__spacer {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 16px;\n align-self: stretch;\n}\n\n.artajs__drawer .artajs__packings__header {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 6px;\n align-self: stretch;\n}\n\n.artajs__drawer .artajs__packings__header__top {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 4px;\n align-self: stretch;\n}\n\n.artajs__drawer .artajs__packings__header__body {\n display: flex;\n align-items: flex-start;\n gap: 4px;\n align-self: stretch;\n}\n\n.artajs__drawer .artajs__packings__line {\n width: 100%;\n height: 1px;\n background-color: var(--border);\n}\n\n.artajs__drawer .artajs__packings__item {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 8px;\n align-self: stretch;\n}\n\n.artajs__drawer .artajs__packings__item__row {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n align-self: stretch;\n}\n\n.artajs__drawer .artajs__packings__item__thumbnail {\n flex-shrink: 0;\n}\n\n.artajs__drawer .artajs__packings__item__thumbnail__img {\n width: 48px;\n height: 48px;\n object-fit: cover;\n border-radius: 2px;\n border: 1px solid var(--border);\n}\n\n.artajs__drawer .artajs__packings__item__thumbnail__placeholder {\n width: 48px;\n height: 48px;\n border-radius: 2px;\n border: 1px solid var(--border);\n}\n\n.artajs__drawer .artajs__packings__item__content {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex: 1;\n}\n\n.artajs__drawer .artajs__packings__text__wrapper {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n align-self: stretch;\n}\n\n.artajs__drawer .artajs__packings__text__regular__underline {\n cursor: pointer;\n color: var(--text-primary);\n font-family: var(--font-family);\n font-size: var(--font-size);\n line-height: 150%;\n /* 21px */\n letter-spacing: 0.2px;\n text-decoration-line: underline;\n}\n\n.artajs__drawer .artajs__packings__text__small__underline {\n cursor: pointer;\n color: var(--text-primary);\n font-family: var(--font-family);\n font-size: calc(var(--font-size) - 2px);\n line-height: 150%;\n /* 18px */\n letter-spacing: 0.2px;\n text-decoration-line: underline;\n}\n\n.artajs__drawer .artajs__tracking__title {\n color: var(--text-primary);\n font-family: var(--font-family);\n font-size: var(--font-size);\n font-style: normal;\n font-weight: bold;\n line-height: 150%;\n letter-spacing: 0.2px;\n}\n\n.artajs__drawer .artajs__tracking__subtype {\n color: var(--text-primary);\n font-family: var(--font-family);\n font-size: calc(var(--font-size) - 2px);\n line-height: 150%;\n /* 18px */\n letter-spacing: 0.2px;\n}\n\n/* Footer */\n.artajs__drawer .artajs__tracking__footer__wrapper {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 10px;\n align-self: stretch;\n margin-bottom: 16px;\n margin-top: auto;\n}\n\n.artajs__drawer .artajs__tracking__footer__content {\n display: flex;\n margin-top: 24px;\n justify-content: center;\n align-items: center;\n gap: 6px;\n cursor: pointer;\n padding: 6px 10px;\n background: #ffffff;\n border-radius: 12px;\n}\n\n.artajs__drawer .artajs__tracking__footer__powered__by__text {\n color: #6f6c65;\n text-align: center;\n font-family: Helvetica;\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: 150%;\n padding-top: 2px;\n}\n\n.artajs__drawer .artajs__tracking__footer__powered__by__logo {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-shrink: 0;\n color: #379464;\n}\n\n.artajs__drawer\n .artajs__tracking__footer__content:hover\n .artajs__tracking__footer__powered__by__text,\n.artajs__drawer\n .artajs__tracking__footer__content:hover\n .artajs__tracking__footer__powered__by__logo {\n color: #000;\n}\n\n/* Insurance box */\n.artajs__drawer .artajs__tracking__insurance__wrapper {\n display: flex;\n padding-top: 16px;\n flex-direction: column;\n align-items: flex-start;\n gap: 4px;\n align-self: stretch;\n border-top: 1px solid var(--border);\n}\n\n.artajs__drawer .artajs__tracking__insurance__content {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n gap: 2px;\n align-self: stretch;\n border-radius: 8px;\n}\n\n.artajs__drawer .artajs__tracking__insurance__title {\n color: var(--text-primary);\n font-family: var(--font-family);\n font-size: calc(var(--font-size) - 2px);\n font-weight: bold;\n line-height: 150%;\n letter-spacing: 0.2px;\n}\n\n.artajs__drawer .artajs__tracking__insurance__body {\n display: flex;\n gap: 4px;\n}\n\n.artajs__drawer .artajs__tracking__insurance__body__icon {\n color: var(--text-primary);\n display: flex;\n width: 18px;\n height: 20px;\n justify-content: center;\n align-items: center;\n flex-shrink: 0;\n}\n\n.artajs__drawer .artajs__tracking__insurance__body__icon__text {\n color: var(--text-primary);\n font-family: var(--font-family);\n font-size: calc(var(--font-size) - 2px);\n font-weight: bold;\n line-height: 150%;\n letter-spacing: 0.2px;\n text-decoration-line: underline;\n cursor: pointer;\n}\n\n/* Summary styles */\n.artajs__drawer .artajs__tracking__summary__wrapper {\n display: flex;\n padding-top: 16px;\n flex-direction: column;\n align-items: flex-start;\n gap: 4px;\n align-self: stretch;\n border-top: 1px solid var(--border);\n}\n\n.artajs__drawer .artajs__tracking__summary__content {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.artajs__drawer .artajs__tracking__summary__date {\n color: var(--text-secondary);\n font-family: var(--font-family);\n font-size: calc(var(--font-size) - 2px);\n line-height: 150%;\n letter-spacing: 0.2px;\n}\n\n.artajs__drawer .artajs__tracking__summary__title {\n color: var(--text-primary);\n text-align: center;\n font-family: var(--font-family);\n font-size: var(--font-size);\n font-weight: bold;\n line-height: 150%;\n letter-spacing: 0.2px;\n}\n\n/* Exceptions */\n.artajs__drawer .artajs__tracking__exception__wrapper {\n display: flex;\n padding-bottom: 24px;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n align-self: stretch;\n border-bottom: 1px solid var(--border);\n}\n\n.artajs__drawer .artajs__tracking__exception__content {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 2px;\n align-self: stretch;\n}\n\n.artajs__drawer .artajs__tracking__exception__title {\n color: var(--text-primary);\n text-align: center;\n align-self: stretch;\n font-family: var(--font-family);\n font-size: var(--font-size);\n font-style: normal;\n font-weight: bold;\n line-height: 150%;\n letter-spacing: 0.2px;\n}\n\n.artajs__drawer .artajs__tracking__exception__cta {\n color: var(--text-primary);\n text-align: center;\n font-family: var(--font-family);\n font-size: calc(var(--font-size) - 2px);\n line-height: 150%;\n letter-spacing: 0.2px;\n text-decoration-line: underline;\n align-self: stretch;\n cursor: pointer;\n}\n\n/* Shipments Events List */\n\n.artajs__drawer .artajs__tracking__events__wrapper {\n display: flex;\n padding: 16px 0px;\n flex-direction: column;\n align-items: center;\n gap: 16px;\n align-self: stretch;\n flex-grow: 1;\n overflow-y: auto;\n}\n\n.artajs__drawer .artajs__tracking__events__return {\n display: flex;\n padding: 0 24px 16px;\n flex-direction: column;\n align-items: flex-start;\n gap: 4px;\n align-self: stretch;\n border-bottom: 1px solid var(--border);\n cursor: pointer;\n}\n\n.artajs__drawer .artajs__tracking__events__return__text {\n color: var(--text-primary);\n text-align: center;\n font-family: var(--font-family);\n font-style: normal;\n line-height: 150%;\n letter-spacing: 0.2px;\n text-decoration-line: underline;\n}\n\n.artajs__drawer .artajs__tracking__events__header {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 6px;\n align-self: stretch;\n padding: 0 24px;\n}\n\n.artajs__drawer .artajs__tracking__events__header__title {\n color: var(--text-primary);\n font-family: var(--font-family);\n font-size: var(--font-size);\n font-style: normal;\n font-weight: bold;\n line-height: 150%;\n /* 21px */\n letter-spacing: 0.2px;\n}\n\n/* Loading */\n\n.artajs__drawer .artajs__drawer__loading {\n position: absolute;\n top: 42%;\n left: 44%;\n transform: translate(-50%, -50%);\n height: 56px;\n width: 56px;\n box-sizing: border-box;\n background: conic-gradient(\n from 90deg at 50% 50%,\n rgba(39, 174, 96, 0) 0deg,\n rgba(31, 144, 255, 0) 0.04deg,\n var(--text-secondary) 360deg\n );\n border-radius: 56px;\n animation: 1s rotate infinite linear;\n}\n\n.artajs__drawer .artajs__drawer__loading::before {\n content: '';\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n height: 40px;\n width: 40px;\n background: var(--background);\n border-radius: 48px;\n}\n\n.artajs__drawer .artajs__drawer__loading::after {\n content: '';\n position: absolute;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n height: 8px;\n width: 8px;\n background: var(--text-secondary);\n border-radius: 8px;\n}\n\n@keyframes rotate {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n/* Pill */\n.artajs__drawer .artajs__tracking__pill__wrapper {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.artajs__drawer .artajs__tracking__pill__round {\n display: flex;\n padding: 4px 8px;\n justify-content: center;\n align-items: center;\n gap: 8px;\n border-radius: 12px;\n}\n\n.artajs__drawer .artajs__tracking__pill__text {\n text-align: center;\n font-family: var(--font-family);\n font-size: calc(var(--font-size) - 3px);\n font-style: normal;\n font-weight: bold;\n line-height: 130%;\n letter-spacing: 0.2px;\n}\n\n.artajs__drawer .artajs__tracking__events__body {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 16px;\n align-self: stretch;\n max-height: 100%;\n flex-grow: 1;\n}\n\n.artajs__drawer\n .artajs__tracking__events__body\n .artajs__tracking__footer__wrapper {\n padding: 16px 0 32px 0;\n}\n\n.artajs__drawer .artajs__tracking__events__group {\n align-self: stretch;\n display: flex;\n flex-direction: column;\n margin-left: 6px;\n padding: 0 24px;\n}\n\n.artajs__drawer .artajs__tracking__events__date {\n color: var(--text-secondary);\n font-family: var(--font-family);\n font-size: calc(var(--font-size) - 2px);\n font-style: normal;\n font-weight: bold;\n line-height: 130%;\n letter-spacing: 0.2px;\n margin-bottom: 4px;\n}\n\n.artajs__drawer .artajs__tracking__events__group__content {\n display: flex;\n flex-direction: row;\n gap: 2px;\n}\n\n.artajs__drawer .artajs__tracking__events__group__item {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.artajs__drawer .artajs__tracking__events__group__number__primary {\n color: var(--text-primary);\n font-family: var(--font-family);\n font-size: var(--font-size);\n font-style: normal;\n font-weight: bold;\n line-height: 130%;\n letter-spacing: 0.2px;\n margin-top: 6px;\n min-width: 24px;\n text-align: end;\n}\n\n.artajs__drawer .artajs__tracking__events__group__number__secondary {\n color: var(--text-secondary);\n font-family: var(--font-family);\n font-size: var(--font-size);\n font-style: normal;\n font-weight: bold;\n line-height: 130%;\n letter-spacing: 0.2px;\n margin-top: 6px;\n min-width: 24px;\n text-align: end;\n}\n\n.artajs__drawer .artajs__tracking__events__group__divider {\n display: flex;\n flex-direction: column;\n}\n\n.artajs__drawer .artajs__tracking__events__group__summary {\n display: flex;\n flex-direction: column;\n gap: 6px;\n margin-top: 6px;\n}\n\n.artajs__drawer .artajs__tracking__events__vertical {\n border-width: 1px;\n height: 100%;\n margin-top: 0;\n margin-bottom: 0;\n}\n\n.artajs__drawer .artajs__tracking__events__round {\n margin-top: 0;\n margin-bottom: 0;\n height: 30px;\n width: 30px;\n}\n\n.artajs__drawer .artajs__tracking__events__group__location {\n color: var(--text-primary);\n font-family: var(--font-family);\n font-size: var(--font-size);\n font-style: normal;\n font-weight: bold;\n line-height: 130%;\n letter-spacing: 0.2px;\n}\n\n.artajs__drawer .artajs__tracking__events__group__location__secondary {\n color: var(--text-secondary);\n font-family: var(--font-family);\n font-size: var(--font-size);\n font-style: normal;\n font-weight: bold;\n line-height: 130%;\n letter-spacing: 0.2px;\n}\n\n.artajs__drawer .artajs__tracking__events__group__time {\n color: var(--text-secondary);\n font-family: var(--font-family);\n font-size: calc(var(--font-size) - 2px);\n font-style: normal;\n line-height: 130%;\n letter-spacing: 0.2px;\n}\n\n.artajs__drawer .artajs__tracking__events__group__description {\n color: var(--text-primary);\n font-family: var(--font-family);\n font-size: var(--font-size);\n font-style: normal;\n line-height: 130%;\n letter-spacing: 0.2px;\n}\n\n.artajs__drawer .artajs__tracking__select__shipment__card {\n display: flex;\n padding: 16px 16px;\n flex-direction: column;\n align-items: flex-start;\n gap: 16px;\n align-self: stretch;\n border-radius: 8px;\n border: 1px solid var(--border);\n background: var(--background);\n box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);\n}\n\n.artajs__drawer .artajs__tracking__select__shipment__content {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 16px;\n align-self: stretch;\n}\n\n.artajs__drawer .artajs__tracking__select__shipment__header {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 16px;\n align-self: stretch;\n}\n\n.artajs__drawer .artajs__tracking__select__shipment__header__item {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 6px;\n align-self: stretch;\n}\n\n.artajs__drawer .artajs__tracking__button {\n display: flex;\n padding: 6px 12px;\n justify-content: center;\n align-items: center;\n border-radius: 4px;\n font-size: calc(var(--font-size) - 1px);\n font-weight: bold;\n\n background: var(--button-background);\n border: 1px solid var(--button-border);\n color: var(--button-text);\n}\n\n.artajs__drawer .artajs__tracking__button:hover {\n background: var(--button-background-hover);\n border: 1px solid var(--button-border-hover);\n color: var(--button-text-hover);\n cursor: pointer;\n}\n\n.artajs__drawer .artajs__tracking__button__container {\n display: flex;\n padding-right: 16px;\n justify-content: center;\n align-items: center;\n gap: 10px;\n border-right: 1px solid var(--border);\n}\n\n.artajs__drawer .artajs__tracking__select__shipment__exception__content {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 2px;\n}\n\n.artajs__drawer .artajs__tracking__select__shipment__exception__title {\n color: var(--text-primary);\n align-self: stretch;\n font-family: var(--font-family);\n font-size: var(--font-size);\n font-style: normal;\n font-weight: bold;\n line-height: 150%;\n letter-spacing: 0.2px;\n}\n";
5
+ var css = "/* reset */\n\n:root {\n --background: #ffffff;\n --text-primary: #110f10;\n --text-secondary: #6f6c65;\n --border: #e7e7e7;\n --width: 540px;\n --font-family: 'Neue Haas Grotesk Text Pro, Helvetica, sans-serif, Arial';\n --font-size: 14px;\n --default-styling: 'flex';\n --minimal-styling: 'none';\n\n --location-direction: 'row';\n --location-justify: 'center';\n --location-align: 'flex-start';\n --location-flex: '1 0 0';\n --backdrop-color: rgba(0, 0, 0, 0.5);\n\n --animationIn: none;\n\n --button-background: #110f10;\n --button-background-hover: #6f6c65;\n --button-border: #110f10;\n --button-text: #ffffff;\n --button-text-hover: #ffffff;\n --button-border-hover: #110f10;\n}\n\n.artajs__drawer,\n.artajs__drawer__backdrop {\n all: initial;\n}\n\n.artajs__drawer a,\n.artajs__drawer button,\n.artajs__drawer div,\n.artajs__drawer input,\n.artajs__drawer form,\n.artajs__drawer p,\n.artajs__drawer select,\n.artajs__drawer__backdrop div {\n all: unset;\n}\n\n/* Box sizing rules */\n.artajs__drawer *,\n.artajs__drawer *::before,\n.artajs__drawer *::after,\n.artajs__drawer__backdrop *,\n.artajs__drawer__backdrop *::before,\n.artajs__drawer__backdrop *::after {\n box-sizing: border-box;\n}\n\n/* Remove default margin */\n.artajs__drawer div,\n.artajs__drawer h1,\n.artajs__drawer h2,\n.artajs__drawer h3,\n.artajs__drawer h4,\n.artajs__drawer p {\n margin: 0;\n}\n\n.artajs__drawer div,\n.artajs__drawer p {\n display: block;\n font-family: var(--font-family);\n}\n\n/* Inherit fonts for inputs and buttons */\n.artajs__drawer input,\n.artajs__drawer button,\n.artajs__drawer select {\n font: inherit;\n margin: 0;\n}\n\n/* drawer styles */\n.artajs__drawer {\n background-color: var(--background);\n height: 100vh;\n position: fixed;\n z-index: 2001;\n bottom: 0px;\n font-family: var(--font-family);\n}\n\n@keyframes fadeInAnimation {\n 0% {\n opacity: 0;\n }\n\n 100% {\n opacity: 1;\n }\n}\n\n@keyframes slideInFromRight {\n 0% {\n transform: translateX(100%);\n }\n\n 100% {\n transform: translateX(0);\n }\n}\n\n@keyframes slideInFromLeft {\n 0% {\n transform: translateX(-100%);\n }\n\n 100% {\n transform: translateX(0);\n }\n}\n\n.artajs__drawer__left {\n left: 0;\n right: auto;\n animation: var(--animationIn);\n animation-iteration-count: 1;\n animation-fill-mode: forwards;\n}\n\n.artajs__drawer__right {\n left: auto;\n right: 0;\n animation: var(--animationIn);\n animation-iteration-count: 1;\n animation-fill-mode: forwards;\n}\n\n/* backdrop */\n.artajs__drawer__backdrop {\n background-color: var(--backdrop-color);\n bottom: 0;\n left: 0;\n position: fixed;\n right: 0;\n top: 0;\n z-index: 2001;\n}\n\n.artajs__drawer .artajs__tracking__out__wrapper {\n display: flex;\n width: var(--width);\n flex-direction: column;\n align-items: flex-start;\n\n background: var(--background, #fff);\n\n box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.25);\n height: 100%;\n}\n\n/* Header styles */\n.artajs__drawer .artajs__tracking__header {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n align-self: stretch;\n}\n\n.artajs__drawer .artajs__tracking__header__title {\n display: flex;\n padding: 16px 24px;\n align-items: center;\n align-self: stretch;\n gap: 16px;\n}\n\n.artajs__drawer .artajs__tracking__header__text {\n flex: 1 0 0;\n font-size: calc(var(--font-size) + 2px);\n font-weight: bold;\n line-height: 150%;\n color: var(--text-primary);\n}\n\n.artajs__drawer .artajs__tracking__header__icon {\n display: flex;\n width: 16px;\n height: 16px;\n padding-right: 0px;\n justify-content: center;\n align-items: center;\n}\n\n.artajs__drawer .artajs__tracking__header__icon a {\n cursor: pointer;\n display: block;\n height: 24px;\n text-decoration: none;\n}\n\n.artajs__drawer .artajs__tracking__header__icon a svg line {\n stroke: var(--text-secondary);\n}\n\n.artajs__drawer .artajs__tracking__header__icon a:hover svg line {\n stroke: var(--text-primary);\n}\n\n.artajs__drawer .artajs__tracking__header__line {\n width: 100%;\n height: 1px;\n background-color: var(--border);\n}\n\n/* Body styles */\n.artajs__drawer .artajs__tracking__body {\n display: flex;\n padding: 16px 24px;\n flex-direction: column;\n align-items: center;\n gap: 16px;\n align-self: stretch;\n overflow-y: auto;\n max-height: 100%;\n flex-grow: 1;\n}\n\n/* Timeline Default styles */\n.artajs__drawer .artajs__tracking__timeline__default__wrapper {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 16px;\n align-self: stretch;\n}\n\n.artajs__drawer .artajs__tracking__timeline__default__steps {\n display: flex;\n padding: 0px 16px;\n justify-content: space-between;\n align-items: flex-start;\n align-self: stretch;\n}\n\n.artajs__drawer .artajs__tracking__timeline__default__step__icon {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n}\n\n.artajs__drawer .artajs__tracking__timeline__triple__dots {\n display: flex;\n align-items: flex-start;\n gap: 4px;\n}\n\n.artajs__drawer .artajs__tracking__timeline__status__text__large {\n color: var(--text-primary);\n text-align: center;\n\n font-family: var(--font-family);\n font-size: calc(var(--font-size) + 2px);\n font-style: normal;\n font-weight: bold;\n line-height: 150%;\n}\n\n.artajs__drawer .artajs__tracking__timeline__step {\n display: flex;\n padding-top: 12px;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n}\n\n.artajs__drawer .artajs__tracking__timeline__step__text__secondary {\n color: var(--text-secondary);\n font-family: var(--font-family);\n font-size: var(--font-size);\n line-height: 150%;\n letter-spacing: 0.2px;\n}\n\n.artajs__drawer .artajs__tracking__timeline__step__text__primary {\n color: var(--text-primary);\n font-family: var(--font-family);\n font-size: var(--font-size);\n line-height: 150%;\n letter-spacing: 0.2px;\n}\n\n.artajs__drawer .artajs__tracking__timeline__status__text__wrapper {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.artajs__drawer .artajs__tracking__timeline__status__date {\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n gap: 0px 4px;\n align-self: stretch;\n flex-wrap: wrap;\n}\n\n.artajs__drawer .artajs__tracking__timeline__status__date__content {\n color: var(--text-primary);\n text-align: center;\n font-family: var(--font-family);\n font-size: calc(var(--font-size) - 2px);\n line-height: 150%;\n /* 18px */\n letter-spacing: 0.2px;\n}\n\n.artajs__drawer .artajs__tracking__timeline__status__date__secondary {\n color: var(--text-secondary);\n text-align: center;\n font-family: var(--font-family);\n font-size: calc(var(--font-size) - 3px);\n line-height: 150%;\n /* 18px */\n letter-spacing: 0.2px;\n}\n\n/* Timeline Minimal styles */\n.artajs__drawer .artajs__tracking__timeline__minimal__wrapper {\n display: flex;\n width: 140px;\n flex-direction: column;\n align-items: center;\n gap: 4px;\n}\n\n.artajs__drawer .artajs__tracking__timeline__wrapper {\n display: flex;\n flex-direction: column;\n align-items: center;\n align-self: stretch;\n}\n\n@media (max-width: 540px) {\n .artajs__drawer .artajs__tracking__out__wrapper {\n width: 100% !important;\n }\n\n .artajs__drawer__right {\n width: 100% !important;\n }\n\n .artajs__drawer__left {\n width: 100% !important;\n }\n\n .artajs__drawer .artajs__tracking__timeline__default__wrapper {\n display: none !important;\n }\n\n .artajs__drawer .artajs__tracking__timeline__minimal__wrapper {\n display: flex !important;\n }\n\n .artajs__drawer .artajs__tracking__location {\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n }\n\n .artajs__drawer .artajs__tracking__location__item {\n flex: 0 1 auto;\n }\n\n .artajs__drawer__backdrop {\n display: none;\n }\n}\n\n@media (min-width: 541px) {\n .artajs__drawer .artajs__tracking__out__wrapper {\n width: var(--width) !important;\n }\n\n .artajs__drawer__right {\n width: var(--width) !important;\n }\n\n .artajs__drawer__left {\n width: var(--width) !important;\n }\n\n .artajs__drawer .artajs__tracking__timeline__default__wrapper {\n display: var(--default-styling) !important;\n }\n\n .artajs__drawer .artajs__tracking__timeline__minimal__wrapper {\n display: var(--minimal-styling) !important;\n }\n\n .artajs__drawer .artajs__tracking__location {\n flex-direction: var(--location-direction);\n justify-content: var(--location-justify);\n align-items: var(--location-align);\n }\n\n .artajs__drawer .artajs__tracking__location__item {\n flex: var(--location-flex);\n }\n\n .artajs__drawer__backdrop {\n display: unset;\n }\n}\n\n.artajs__drawer .artajs__tracking__timeline__minimal__divider {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n}\n\n.artajs__drawer .artajs__tracking__timeline__minimal__step {\n display: flex;\n padding: 10px;\n align-items: flex-start;\n gap: 10px;\n}\n\n.artajs__drawer .artajs__tracking__timeline__minimal__spacing {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 12px;\n}\n\n.artajs__drawer .artajs__tracking__timeline__divider {\n display: flex;\n width: 140px;\n height: 1px;\n flex-direction: column;\n align-items: center;\n gap: 4px;\n border-bottom: 1px solid var(--border);\n}\n\n/* Tracking Top styles */\n.artajs__drawer .artajs__tracking__top__wrapper {\n display: flex;\n padding-bottom: 16px;\n flex-direction: column;\n align-items: flex-start;\n gap: 24px;\n align-self: stretch;\n border-bottom: 1px solid var(--border);\n}\n\n.artajs__drawer .artajs__tracking__top__divider {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n align-self: stretch;\n}\n\n.artajs__drawer .artajs__tracking__top__cta {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 4px;\n align-self: stretch;\n}\n\n.artajs__drawer .artajs__tracking__top__text {\n color: var(--text-primary);\n text-align: center;\n font-family: var(--font-family);\n font-size: var(--font-size);\n font-style: normal;\n font-weight: bold;\n line-height: 150%;\n letter-spacing: 0.2px;\n}\n\n.artajs__drawer .artajs__tracking__top__date__wrapper {\n display: flex;\n justify-content: center;\n align-items: flex-end;\n gap: 24px;\n align-self: stretch;\n}\n\n.artajs__drawer .artajs__tracking__top__date__aligner {\n display: flex;\n height: 71px;\n flex-direction: column;\n align-items: center;\n}\n\n.artajs__drawer .artajs__tracking__top__date__day {\n color: var(--text-primary);\n text-align: center;\n font-family: var(--font-family);\n font-size: calc(var(--font-size) - 2px);\n line-height: 150%;\n font-weight: bold;\n letter-spacing: 0.2px;\n}\n\n.artajs__drawer .artajs__tracking__top__date__day__numeric {\n color: var(--text-primary);\n text-align: center;\n font-family: var(--font-family);\n font-weight: bold;\n font-size: calc(var(--font-size) + 42px);\n line-height: calc(var(--font-size) + 42px);\n}\n\n.artajs__drawer .artajas__tracking__top__date__and {\n color: var(--text-primary);\n justify-content: flex-end;\n display: flex;\n flex-direction: column;\n font-size: calc(var(--font-size) - 1px);\n height: 95%;\n}\n\n/* Tracking Location */\n.artajs__drawer .artajas__tracking__location__wrapper {\n display: flex;\n padding-bottom: 16px;\n flex-direction: column;\n align-items: flex-start;\n gap: 6px;\n align-self: stretch;\n border-bottom: 1px solid var(--border);\n}\n\n.artajs__drawer .artajs__tracking__location {\n display: flex;\n gap: 8px;\n align-self: stretch;\n}\n\n.artajs__drawer .artajs__tracking__location__item {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n align-self: stretch;\n}\n\n.artajs__drawer .artajs__tracking__location__text__wrapper {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 2px;\n flex: 1 0 0;\n}\n\n.artajs__drawer .artajs__tracking__location__text__header {\n display: flex;\n align-items: center;\n gap: 4px;\n align-self: stretch;\n}\n\n.artajs__drawer .artajs__tracking__location__text__header__label {\n color: var(--text-primary);\n font-family: var(--font-family);\n font-weight: bold;\n font-size: calc(var(--font-size) - 2px);\n letter-spacing: 0.2px;\n line-height: 150%;\n text-align: left;\n}\n\n.artajs__drawer .artajs__tracking__location__text__content {\n color: var(--text-primary);\n font-family: var(--font-family);\n font-size: calc(var(--font-size) - 2px);\n letter-spacing: 0.2px;\n line-height: 150%;\n text-align: left;\n}\n\n/* Tracking Packings */\n\n.artajs__drawer .artajs__packings__wrapper {\n display: flex;\n padding: 16px 16px;\n flex-direction: column;\n align-items: flex-start;\n gap: 16px;\n align-self: stretch;\n border-radius: 8px;\n border: 1px solid var(--border);\n background: var(--background);\n\n /* 1 */\n box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);\n}\n\n.artajs__drawer .artajs__packings__spacer {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 16px;\n align-self: stretch;\n}\n\n.artajs__drawer .artajs__packings__header {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 6px;\n align-self: stretch;\n}\n\n.artajs__drawer .artajs__packings__header__top {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 4px;\n align-self: stretch;\n}\n\n.artajs__drawer .artajs__packings__header__body {\n display: flex;\n align-items: flex-start;\n gap: 4px;\n align-self: stretch;\n}\n\n.artajs__drawer .artajs__packings__line {\n width: 100%;\n height: 1px;\n background-color: var(--border);\n}\n\n.artajs__drawer .artajs__packings__item {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 8px;\n align-self: stretch;\n}\n\n.artajs__drawer .artajs__packings__item__row {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n align-self: stretch;\n}\n\n.artajs__drawer .artajs__packings__item__thumbnail {\n flex-shrink: 0;\n}\n\n.artajs__drawer .artajs__packings__item__thumbnail__img {\n width: 48px;\n height: 48px;\n object-fit: cover;\n border-radius: 2px;\n border: 1px solid var(--border);\n}\n\n.artajs__drawer .artajs__packings__item__thumbnail__placeholder {\n width: 48px;\n height: 48px;\n border-radius: 2px;\n border: 1px solid var(--border);\n}\n\n.artajs__drawer .artajs__packings__item__content {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex: 1;\n}\n\n.artajs__drawer .artajs__packings__text__wrapper {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n align-self: stretch;\n}\n\n.artajs__drawer .artajs__packings__text__regular__underline {\n cursor: pointer;\n color: var(--text-primary);\n font-family: var(--font-family);\n font-size: var(--font-size);\n line-height: 150%;\n /* 21px */\n letter-spacing: 0.2px;\n text-decoration-line: underline;\n}\n\n.artajs__drawer .artajs__packings__text__small__underline {\n cursor: pointer;\n color: var(--text-primary);\n font-family: var(--font-family);\n font-size: calc(var(--font-size) - 2px);\n line-height: 150%;\n /* 18px */\n letter-spacing: 0.2px;\n text-decoration-line: underline;\n}\n\n.artajs__drawer .artajs__tracking__title {\n color: var(--text-primary);\n font-family: var(--font-family);\n font-size: var(--font-size);\n font-style: normal;\n font-weight: bold;\n line-height: 150%;\n letter-spacing: 0.2px;\n}\n\n.artajs__drawer .artajs__tracking__subtype {\n color: var(--text-primary);\n font-family: var(--font-family);\n font-size: calc(var(--font-size) - 2px);\n line-height: 150%;\n /* 18px */\n letter-spacing: 0.2px;\n}\n\n/* Footer */\n.artajs__drawer .artajs__tracking__footer__wrapper {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 10px;\n align-self: stretch;\n margin-bottom: 16px;\n margin-top: auto;\n}\n\n.artajs__drawer .artajs__tracking__footer__content {\n display: flex;\n margin-top: 24px;\n justify-content: center;\n align-items: center;\n gap: 6px;\n cursor: pointer;\n padding: 6px 10px;\n background: #ffffff;\n border-radius: 12px;\n}\n\n.artajs__drawer .artajs__tracking__footer__powered__by__text {\n color: #6f6c65;\n text-align: center;\n font-family: Helvetica;\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: 150%;\n padding-top: 2px;\n}\n\n.artajs__drawer .artajs__tracking__footer__powered__by__logo {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-shrink: 0;\n color: #379464;\n}\n\n.artajs__drawer\n .artajs__tracking__footer__content:hover\n .artajs__tracking__footer__powered__by__text,\n.artajs__drawer\n .artajs__tracking__footer__content:hover\n .artajs__tracking__footer__powered__by__logo {\n color: #000;\n}\n\n/* Insurance box */\n.artajs__drawer .artajs__tracking__insurance__wrapper {\n display: flex;\n padding-top: 16px;\n flex-direction: column;\n align-items: flex-start;\n gap: 4px;\n align-self: stretch;\n border-top: 1px solid var(--border);\n}\n\n.artajs__drawer .artajs__tracking__insurance__content {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n gap: 2px;\n align-self: stretch;\n border-radius: 8px;\n}\n\n.artajs__drawer .artajs__tracking__insurance__title {\n color: var(--text-primary);\n font-family: var(--font-family);\n font-size: calc(var(--font-size) - 2px);\n font-weight: bold;\n line-height: 150%;\n letter-spacing: 0.2px;\n}\n\n.artajs__drawer .artajs__tracking__insurance__body {\n display: flex;\n gap: 4px;\n}\n\n.artajs__drawer .artajs__tracking__insurance__body__icon {\n color: var(--text-primary);\n display: flex;\n width: 18px;\n height: 20px;\n justify-content: center;\n align-items: center;\n flex-shrink: 0;\n}\n\n.artajs__drawer .artajs__tracking__insurance__body__icon__text {\n color: var(--text-primary);\n font-family: var(--font-family);\n font-size: calc(var(--font-size) - 2px);\n font-weight: bold;\n line-height: 150%;\n letter-spacing: 0.2px;\n text-decoration-line: underline;\n cursor: pointer;\n}\n\n/* Summary styles */\n.artajs__drawer .artajs__tracking__summary__wrapper {\n display: flex;\n padding-top: 16px;\n flex-direction: column;\n align-items: flex-start;\n gap: 4px;\n align-self: stretch;\n border-top: 1px solid var(--border);\n}\n\n.artajs__drawer .artajs__tracking__summary__content {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.artajs__drawer .artajs__tracking__summary__date {\n color: var(--text-secondary);\n font-family: var(--font-family);\n font-size: calc(var(--font-size) - 2px);\n line-height: 150%;\n letter-spacing: 0.2px;\n}\n\n.artajs__drawer .artajs__tracking__summary__title {\n color: var(--text-primary);\n text-align: center;\n font-family: var(--font-family);\n font-size: var(--font-size);\n font-weight: bold;\n line-height: 150%;\n letter-spacing: 0.2px;\n}\n\n/* Exceptions */\n.artajs__drawer .artajs__tracking__exception__wrapper {\n display: flex;\n padding-bottom: 24px;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n align-self: stretch;\n border-bottom: 1px solid var(--border);\n}\n\n.artajs__drawer .artajs__tracking__exception__content {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 2px;\n align-self: stretch;\n}\n\n.artajs__drawer .artajs__tracking__exception__title {\n color: var(--text-primary);\n text-align: center;\n align-self: stretch;\n font-family: var(--font-family);\n font-size: var(--font-size);\n font-style: normal;\n font-weight: bold;\n line-height: 150%;\n letter-spacing: 0.2px;\n}\n\n.artajs__drawer .artajs__tracking__exception__cta {\n color: var(--text-primary);\n text-align: center;\n font-family: var(--font-family);\n font-size: calc(var(--font-size) - 2px);\n line-height: 150%;\n letter-spacing: 0.2px;\n text-decoration-line: underline;\n align-self: stretch;\n cursor: pointer;\n}\n\n.artajs__drawer .artajs__tracking__delay__wrapper {\n display: flex;\n align-items: flex-start;\n justify-content: center;\n gap: 8px;\n padding: 0 16px 16px;\n align-self: stretch;\n border-bottom: 1px solid var(--border);\n}\n\n.artajs__drawer .artajs__tracking__delay__text {\n color: var(--text-primary);\n font-family: var(--font-family);\n font-size: calc(var(--font-size) - 1px);\n line-height: 150%;\n letter-spacing: 0.2px;\n}\n\n/* Shipments Events List */\n\n.artajs__drawer .artajs__tracking__events__wrapper {\n display: flex;\n padding: 16px 0px;\n flex-direction: column;\n align-items: center;\n gap: 16px;\n align-self: stretch;\n flex-grow: 1;\n overflow-y: auto;\n}\n\n.artajs__drawer .artajs__tracking__events__return {\n display: flex;\n padding: 0 24px 16px;\n flex-direction: column;\n align-items: flex-start;\n gap: 4px;\n align-self: stretch;\n border-bottom: 1px solid var(--border);\n cursor: pointer;\n}\n\n.artajs__drawer .artajs__tracking__events__return__text {\n color: var(--text-primary);\n text-align: center;\n font-family: var(--font-family);\n font-style: normal;\n line-height: 150%;\n letter-spacing: 0.2px;\n text-decoration-line: underline;\n}\n\n.artajs__drawer .artajs__tracking__events__header {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 6px;\n align-self: stretch;\n padding: 0 24px;\n}\n\n.artajs__drawer .artajs__tracking__events__header__title {\n color: var(--text-primary);\n font-family: var(--font-family);\n font-size: var(--font-size);\n font-style: normal;\n font-weight: bold;\n line-height: 150%;\n /* 21px */\n letter-spacing: 0.2px;\n}\n\n/* Loading */\n\n.artajs__drawer .artajs__drawer__loading {\n position: absolute;\n top: 42%;\n left: 44%;\n transform: translate(-50%, -50%);\n height: 56px;\n width: 56px;\n box-sizing: border-box;\n background: conic-gradient(\n from 90deg at 50% 50%,\n rgba(39, 174, 96, 0) 0deg,\n rgba(31, 144, 255, 0) 0.04deg,\n var(--text-secondary) 360deg\n );\n border-radius: 56px;\n animation: 1s rotate infinite linear;\n}\n\n.artajs__drawer .artajs__drawer__loading::before {\n content: '';\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n height: 40px;\n width: 40px;\n background: var(--background);\n border-radius: 48px;\n}\n\n.artajs__drawer .artajs__drawer__loading::after {\n content: '';\n position: absolute;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n height: 8px;\n width: 8px;\n background: var(--text-secondary);\n border-radius: 8px;\n}\n\n@keyframes rotate {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n/* Pill */\n.artajs__drawer .artajs__tracking__pill__wrapper {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.artajs__drawer .artajs__tracking__pill__round {\n display: flex;\n padding: 4px 8px;\n justify-content: center;\n align-items: center;\n gap: 8px;\n border-radius: 12px;\n}\n\n.artajs__drawer .artajs__tracking__pill__text {\n text-align: center;\n font-family: var(--font-family);\n font-size: calc(var(--font-size) - 3px);\n font-style: normal;\n font-weight: bold;\n line-height: 130%;\n letter-spacing: 0.2px;\n}\n\n.artajs__drawer .artajs__tracking__events__body {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 16px;\n align-self: stretch;\n max-height: 100%;\n flex-grow: 1;\n}\n\n.artajs__drawer\n .artajs__tracking__events__body\n .artajs__tracking__footer__wrapper {\n padding: 16px 0 32px 0;\n}\n\n.artajs__drawer .artajs__tracking__events__group {\n align-self: stretch;\n display: flex;\n flex-direction: column;\n margin-left: 6px;\n padding: 0 24px;\n}\n\n.artajs__drawer .artajs__tracking__events__date {\n color: var(--text-secondary);\n font-family: var(--font-family);\n font-size: calc(var(--font-size) - 2px);\n font-style: normal;\n font-weight: bold;\n line-height: 130%;\n letter-spacing: 0.2px;\n margin-bottom: 4px;\n}\n\n.artajs__drawer .artajs__tracking__events__group__content {\n display: flex;\n flex-direction: row;\n gap: 2px;\n}\n\n.artajs__drawer .artajs__tracking__events__group__item {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.artajs__drawer .artajs__tracking__events__group__number__primary {\n color: var(--text-primary);\n font-family: var(--font-family);\n font-size: var(--font-size);\n font-style: normal;\n font-weight: bold;\n line-height: 130%;\n letter-spacing: 0.2px;\n margin-top: 6px;\n min-width: 24px;\n text-align: end;\n}\n\n.artajs__drawer .artajs__tracking__events__group__number__secondary {\n color: var(--text-secondary);\n font-family: var(--font-family);\n font-size: var(--font-size);\n font-style: normal;\n font-weight: bold;\n line-height: 130%;\n letter-spacing: 0.2px;\n margin-top: 6px;\n min-width: 24px;\n text-align: end;\n}\n\n.artajs__drawer .artajs__tracking__events__group__divider {\n display: flex;\n flex-direction: column;\n}\n\n.artajs__drawer .artajs__tracking__events__group__summary {\n display: flex;\n flex-direction: column;\n gap: 6px;\n margin-top: 6px;\n}\n\n.artajs__drawer .artajs__tracking__events__vertical {\n border-width: 1px;\n height: 100%;\n margin-top: 0;\n margin-bottom: 0;\n}\n\n.artajs__drawer .artajs__tracking__events__round {\n margin-top: 0;\n margin-bottom: 0;\n height: 30px;\n width: 30px;\n}\n\n.artajs__drawer .artajs__tracking__events__group__location {\n color: var(--text-primary);\n font-family: var(--font-family);\n font-size: var(--font-size);\n font-style: normal;\n font-weight: bold;\n line-height: 130%;\n letter-spacing: 0.2px;\n}\n\n.artajs__drawer .artajs__tracking__events__group__location__secondary {\n color: var(--text-secondary);\n font-family: var(--font-family);\n font-size: var(--font-size);\n font-style: normal;\n font-weight: bold;\n line-height: 130%;\n letter-spacing: 0.2px;\n}\n\n.artajs__drawer .artajs__tracking__events__group__time {\n color: var(--text-secondary);\n font-family: var(--font-family);\n font-size: calc(var(--font-size) - 2px);\n font-style: normal;\n line-height: 130%;\n letter-spacing: 0.2px;\n}\n\n.artajs__drawer .artajs__tracking__events__group__description {\n color: var(--text-primary);\n font-family: var(--font-family);\n font-size: var(--font-size);\n font-style: normal;\n line-height: 130%;\n letter-spacing: 0.2px;\n}\n\n.artajs__drawer .artajs__tracking__select__shipment__card {\n display: flex;\n padding: 16px 16px;\n flex-direction: column;\n align-items: flex-start;\n gap: 16px;\n align-self: stretch;\n border-radius: 8px;\n border: 1px solid var(--border);\n background: var(--background);\n box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);\n}\n\n.artajs__drawer .artajs__tracking__select__shipment__content {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 16px;\n align-self: stretch;\n}\n\n.artajs__drawer .artajs__tracking__select__shipment__header {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 16px;\n align-self: stretch;\n}\n\n.artajs__drawer .artajs__tracking__select__shipment__header__item {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 6px;\n align-self: stretch;\n}\n\n.artajs__drawer .artajs__tracking__button {\n display: flex;\n padding: 6px 12px;\n justify-content: center;\n align-items: center;\n border-radius: 4px;\n font-size: calc(var(--font-size) - 1px);\n font-weight: bold;\n\n background: var(--button-background);\n border: 1px solid var(--button-border);\n color: var(--button-text);\n}\n\n.artajs__drawer .artajs__tracking__button:hover {\n background: var(--button-background-hover);\n border: 1px solid var(--button-border-hover);\n color: var(--button-text-hover);\n cursor: pointer;\n}\n\n.artajs__drawer .artajs__tracking__button__container {\n display: flex;\n padding-right: 16px;\n justify-content: center;\n align-items: center;\n gap: 10px;\n border-right: 1px solid var(--border);\n}\n\n.artajs__drawer .artajs__tracking__select__shipment__exception__content {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 2px;\n}\n\n.artajs__drawer .artajs__tracking__select__shipment__exception__title {\n color: var(--text-primary);\n align-self: stretch;\n font-family: var(--font-family);\n font-size: var(--font-size);\n font-style: normal;\n font-weight: bold;\n line-height: 150%;\n letter-spacing: 0.2px;\n}\n";
6
6
 
7
7
  exports.default = css;
@@ -50,7 +50,7 @@ export interface ArtaPackage {
50
50
  handle_with_care: boolean;
51
51
  is_sufficiently_packed: boolean;
52
52
  eta: string;
53
- status: 'unknown' | 'pending' | 'notfound' | 'transit' | 'out_for_delivery' | 'delivered' | 'undelivered' | 'exception' | 'expired';
53
+ status: 'unknown' | 'pending' | 'notfound' | 'transit' | 'out_for_delivery' | 'delivered' | 'undelivered' | 'exception' | 'expired' | 'collected' | 'review_packing' | 'packed' | 'label_ready' | 'cancelled';
54
54
  objects: ArtaObject[];
55
55
  packing_materials: string;
56
56
  depth: number;
@@ -2,15 +2,16 @@
2
2
 
3
3
  var jsxRuntime = require('preact/jsx-runtime');
4
4
  var hooks = require('preact/hooks');
5
- var index$4 = require('../ShipToFrom/index.js');
6
- var index$5 = require('../Package/index.js');
5
+ var index$5 = require('../ShipToFrom/index.js');
6
+ var index$6 = require('../Package/index.js');
7
7
  var index$1 = require('../Timeline/index.js');
8
8
  var index$3 = require('../TrackingTop/index.js');
9
- var index$8 = require('../DrawerFooter/index.js');
10
- var index$6 = require('../DrawerInsurance/index.js');
11
- var index$7 = require('../Summary/index.js');
9
+ var index$9 = require('../DrawerFooter/index.js');
10
+ var index$7 = require('../DrawerInsurance/index.js');
11
+ var index$8 = require('../Summary/index.js');
12
12
  var index$2 = require('../ShipmentException/index.js');
13
13
  var index = require('../PackageEvents/index.js');
14
+ var index$4 = require('../DeliveryDelay/index.js');
14
15
 
15
16
  const hasActiveException = (shipment) => {
16
17
  return (shipment.shipment_exceptions.some((ex) => ex.status !== 'resolved') &&
@@ -27,7 +28,7 @@ const TrackingShipment = ({ shipment, config, }) => {
27
28
  if (packageId != null) {
28
29
  return (jsxRuntime.jsx(index.PackageEvents, { packageId: packageId, shipment: shipment, config: config, setPackageId: setPackageId }));
29
30
  }
30
- return (jsxRuntime.jsxs("div", { class: "artajs__tracking__body", children: [jsxRuntime.jsx(index$1.Timeline, { shipment: shipment, config: config }), jsxRuntime.jsx("div", { class: "artajs__tracking__timeline__divider" }), hasActiveException(shipment) && (jsxRuntime.jsx(index$2.ShipmentException, { shipment: shipment, config: config })), jsxRuntime.jsx(index$3.TrackingTop, { config: config, shipment: shipment }), jsxRuntime.jsx(index$4.ShipToFrom, { config: config, shipment: shipment }), packagesWithObjects.map((pkg, index) => (jsxRuntime.jsx(index$5.Package, { title: `#${index + 1}`, pkg: pkg, shipment: shipment, config: config, setPackageId: setPackageId }))), shipment.insurance_policy != null && jsxRuntime.jsx(index$6.DrawerInsurance, {}), jsxRuntime.jsx(index$7.Summary, { config: config, shipment: shipment }), jsxRuntime.jsx(index$8.DrawerFooter, {})] }));
31
+ return (jsxRuntime.jsxs("div", { class: "artajs__tracking__body", children: [jsxRuntime.jsx(index$1.Timeline, { shipment: shipment, config: config }), jsxRuntime.jsx("div", { class: "artajs__tracking__timeline__divider" }), hasActiveException(shipment) && (jsxRuntime.jsx(index$2.ShipmentException, { shipment: shipment, config: config })), jsxRuntime.jsx(index$3.TrackingTop, { config: config, shipment: shipment }), jsxRuntime.jsx(index$4.DeliveryDelay, { config: config, shipment: shipment }), jsxRuntime.jsx(index$5.ShipToFrom, { config: config, shipment: shipment }), packagesWithObjects.map((pkg, index) => (jsxRuntime.jsx(index$6.Package, { title: `#${index + 1}`, pkg: pkg, shipment: shipment, config: config, setPackageId: setPackageId }))), shipment.insurance_policy != null && jsxRuntime.jsx(index$7.DrawerInsurance, {}), jsxRuntime.jsx(index$8.Summary, { config: config, shipment: shipment }), jsxRuntime.jsx(index$9.DrawerFooter, {})] }));
31
32
  };
32
33
 
33
34
  exports.TrackingShipment = TrackingShipment;
@@ -108,6 +108,7 @@ export interface TrackingConfig {
108
108
  shipmentExceptionDefaultLabel: string;
109
109
  viewShipmentDetailLabel: string;
110
110
  viewShipmentsListLabel: string;
111
+ deliveryDelayedLabel: string;
111
112
  };
112
113
  pill: {
113
114
  unknown: PillConfig;
@@ -123,6 +124,9 @@ export interface TrackingConfig {
123
124
  collected: PillConfig;
124
125
  completed: PillConfig;
125
126
  confirmed: PillConfig;
127
+ review_packing: PillConfig;
128
+ packed: PillConfig;
129
+ label_ready: PillConfig;
126
130
  };
127
131
  animation: {
128
132
  in: AnimationConfig;
@@ -69,6 +69,7 @@ const defaultTrackingConfig = {
69
69
  shipmentExceptionDefaultLabel: 'There is an exception with this shipment.',
70
70
  viewShipmentDetailLabel: 'View Details',
71
71
  viewShipmentsListLabel: '< All Shipments',
72
+ deliveryDelayedLabel: "There is a delay in delivery and we're working on it. We apologize for any inconvenience.",
72
73
  dates: {
73
74
  locale: navigator.language,
74
75
  formatOptions: { dateStyle: 'medium' },
@@ -153,6 +154,21 @@ const defaultTrackingConfig = {
153
154
  backgroundColor: '#D6EDE1',
154
155
  text: 'Collected',
155
156
  },
157
+ review_packing: {
158
+ textColor: '#173E2A',
159
+ backgroundColor: '#D6EDE1',
160
+ text: 'Packed',
161
+ },
162
+ packed: {
163
+ textColor: '#173E2A',
164
+ backgroundColor: '#D6EDE1',
165
+ text: 'Packed',
166
+ },
167
+ label_ready: {
168
+ textColor: '#173E2A',
169
+ backgroundColor: '#D6EDE1',
170
+ text: 'Collected',
171
+ },
156
172
  completed: {
157
173
  textColor: '#173E2A',
158
174
  backgroundColor: '#D6EDE1',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@artaio/arta-browser",
3
- "version": "2.19.1",
3
+ "version": "2.20.1",
4
4
  "description": "",
5
5
  "source": "lib/index.ts",
6
6
  "main": "./dist/index.js",