@gobolt/genesis 0.7.3 → 0.8.0

package/dist/index.js

@@ -8,11 +8,6 @@ function getDefaultExportFromCjs(x2) {
   return x2 && x2.__esModule && Object.prototype.hasOwnProperty.call(x2, "default") ? x2["default"] : x2;
 }
 var classnames = { exports: {} };
-/*!
-	Copyright (c) 2018 Jed Watson.
-	Licensed under the MIT License (MIT), see
-	http://jedwatson.github.io/classnames
-*/
 var hasRequiredClassnames;
 function requireClassnames() {
   if (hasRequiredClassnames) return classnames.exports;
@@ -89,9 +84,9 @@ function _typeof(o2) {
     return o3 && "function" == typeof Symbol && o3.constructor === Symbol && o3 !== Symbol.prototype ? "symbol" : typeof o3;
   }, _typeof(o2);
 }
-var REACT_ELEMENT_TYPE_18 = Symbol.for("react.element");
-var REACT_ELEMENT_TYPE_19 = Symbol.for("react.transitional.element");
-var REACT_FRAGMENT_TYPE = Symbol.for("react.fragment");
+var REACT_ELEMENT_TYPE_18 = /* @__PURE__ */ Symbol.for("react.element");
+var REACT_ELEMENT_TYPE_19 = /* @__PURE__ */ Symbol.for("react.transitional.element");
+var REACT_FRAGMENT_TYPE = /* @__PURE__ */ Symbol.for("react.fragment");
 function isFragment$1(object4) {
   return (
     // Base object type
@@ -228,21 +223,12 @@ function findDOMNode(node2) {
 }
 var reactIs = { exports: {} };
 var reactIs_production_min = {};
-/**
- * @license React
- * react-is.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
 var hasRequiredReactIs_production_min;
 function requireReactIs_production_min() {
   if (hasRequiredReactIs_production_min) return reactIs_production_min;
   hasRequiredReactIs_production_min = 1;
-  var b = Symbol.for("react.element"), c = Symbol.for("react.portal"), d = Symbol.for("react.fragment"), e3 = Symbol.for("react.strict_mode"), f = Symbol.for("react.profiler"), g = Symbol.for("react.provider"), h = Symbol.for("react.context"), k = Symbol.for("react.server_context"), l2 = Symbol.for("react.forward_ref"), m = Symbol.for("react.suspense"), n2 = Symbol.for("react.suspense_list"), p = Symbol.for("react.memo"), q = Symbol.for("react.lazy"), t2 = Symbol.for("react.offscreen"), u;
-  u = Symbol.for("react.module.reference");
+  var b = /* @__PURE__ */ Symbol.for("react.element"), c = /* @__PURE__ */ Symbol.for("react.portal"), d = /* @__PURE__ */ Symbol.for("react.fragment"), e3 = /* @__PURE__ */ Symbol.for("react.strict_mode"), f = /* @__PURE__ */ Symbol.for("react.profiler"), g = /* @__PURE__ */ Symbol.for("react.provider"), h = /* @__PURE__ */ Symbol.for("react.context"), k = /* @__PURE__ */ Symbol.for("react.server_context"), l2 = /* @__PURE__ */ Symbol.for("react.forward_ref"), m = /* @__PURE__ */ Symbol.for("react.suspense"), n2 = /* @__PURE__ */ Symbol.for("react.suspense_list"), p = /* @__PURE__ */ Symbol.for("react.memo"), q = /* @__PURE__ */ Symbol.for("react.lazy"), t2 = /* @__PURE__ */ Symbol.for("react.offscreen"), u;
+  u = /* @__PURE__ */ Symbol.for("react.module.reference");
   function v(a) {
     if ("object" === typeof a && null !== a) {
       var r2 = a.$$typeof;
@@ -334,35 +320,26 @@ function requireReactIs_production_min() {
   return reactIs_production_min;
 }
 var reactIs_development = {};
-/**
- * @license React
- * react-is.development.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
 var hasRequiredReactIs_development;
 function requireReactIs_development() {
   if (hasRequiredReactIs_development) return reactIs_development;
   hasRequiredReactIs_development = 1;
   if (process.env.NODE_ENV !== "production") {
     (function() {
-      var REACT_ELEMENT_TYPE = Symbol.for("react.element");
-      var REACT_PORTAL_TYPE = Symbol.for("react.portal");
-      var REACT_FRAGMENT_TYPE2 = Symbol.for("react.fragment");
-      var REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode");
-      var REACT_PROFILER_TYPE = Symbol.for("react.profiler");
-      var REACT_PROVIDER_TYPE = Symbol.for("react.provider");
-      var REACT_CONTEXT_TYPE = Symbol.for("react.context");
-      var REACT_SERVER_CONTEXT_TYPE = Symbol.for("react.server_context");
-      var REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref");
-      var REACT_SUSPENSE_TYPE = Symbol.for("react.suspense");
-      var REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list");
-      var REACT_MEMO_TYPE = Symbol.for("react.memo");
-      var REACT_LAZY_TYPE = Symbol.for("react.lazy");
-      var REACT_OFFSCREEN_TYPE = Symbol.for("react.offscreen");
+      var REACT_ELEMENT_TYPE = /* @__PURE__ */ Symbol.for("react.element");
+      var REACT_PORTAL_TYPE = /* @__PURE__ */ Symbol.for("react.portal");
+      var REACT_FRAGMENT_TYPE2 = /* @__PURE__ */ Symbol.for("react.fragment");
+      var REACT_STRICT_MODE_TYPE = /* @__PURE__ */ Symbol.for("react.strict_mode");
+      var REACT_PROFILER_TYPE = /* @__PURE__ */ Symbol.for("react.profiler");
+      var REACT_PROVIDER_TYPE = /* @__PURE__ */ Symbol.for("react.provider");
+      var REACT_CONTEXT_TYPE = /* @__PURE__ */ Symbol.for("react.context");
+      var REACT_SERVER_CONTEXT_TYPE = /* @__PURE__ */ Symbol.for("react.server_context");
+      var REACT_FORWARD_REF_TYPE = /* @__PURE__ */ Symbol.for("react.forward_ref");
+      var REACT_SUSPENSE_TYPE = /* @__PURE__ */ Symbol.for("react.suspense");
+      var REACT_SUSPENSE_LIST_TYPE = /* @__PURE__ */ Symbol.for("react.suspense_list");
+      var REACT_MEMO_TYPE = /* @__PURE__ */ Symbol.for("react.memo");
+      var REACT_LAZY_TYPE = /* @__PURE__ */ Symbol.for("react.lazy");
+      var REACT_OFFSCREEN_TYPE = /* @__PURE__ */ Symbol.for("react.offscreen");
       var enableScopeAPI = false;
       var enableCacheElement = false;
       var enableTransitionTracing = false;
@@ -370,7 +347,7 @@ function requireReactIs_development() {
       var enableDebugTracing = false;
       var REACT_MODULE_REFERENCE;
       {
-        REACT_MODULE_REFERENCE = Symbol.for("react.module.reference");
+        REACT_MODULE_REFERENCE = /* @__PURE__ */ Symbol.for("react.module.reference");
       }
       function isValidElementType(type4) {
         if (typeof type4 === "string" || typeof type4 === "function") {
@@ -7898,7 +7875,6 @@ function _regeneratorDefine(e3, r2, n2, t2) {
   }, _regeneratorDefine(e3, r2, n2, t2);
 }
 function _regenerator() {
-  /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */
   var e3, t2, r2 = "function" == typeof Symbol ? Symbol : {}, n2 = r2.iterator || "@@iterator", o2 = r2.toStringTag || "@@toStringTag";
   function i(r3, n3, o3, i2) {
     var c2 = n3 && n3.prototype instanceof Generator ? n3 : Generator, u2 = Object.create(c2.prototype);
@@ -11502,19 +11478,19 @@ function _wrapNativeSuper(t2) {
     if ("function" != typeof t3) throw new TypeError("Super expression must either be null or a function");
     if (void 0 !== r2) {
       if (r2.has(t3)) return r2.get(t3);
-      r2.set(t3, Wrapper);
+      r2.set(t3, Wrapper2);
     }
-    function Wrapper() {
+    function Wrapper2() {
       return _construct(t3, arguments, _getPrototypeOf(this).constructor);
     }
-    return Wrapper.prototype = Object.create(t3.prototype, {
+    return Wrapper2.prototype = Object.create(t3.prototype, {
       constructor: {
-        value: Wrapper,
+        value: Wrapper2,
         enumerable: false,
         writable: true,
         configurable: true
       }
-    }), _setPrototypeOf(Wrapper, t3);
+    }), _setPrototypeOf(Wrapper2, t3);
   }, _wrapNativeSuper(t2);
 }
 var formatRegExp = /%[sdj%]/g;
@@ -27899,7 +27875,7 @@ var hasRequiredDayjs_min;
 function requireDayjs_min() {
   if (hasRequiredDayjs_min) return dayjs_min$1.exports;
   hasRequiredDayjs_min = 1;
-  (function(module2, exports) {
+  (function(module2, exports$1) {
     !(function(t2, e3) {
       module2.exports = e3();
     })(dayjs_min, (function() {
@@ -28184,7 +28160,7 @@ var hasRequiredWeekday;
 function requireWeekday() {
   if (hasRequiredWeekday) return weekday$2.exports;
   hasRequiredWeekday = 1;
-  (function(module2, exports) {
+  (function(module2, exports$1) {
     !(function(e3, t2) {
       module2.exports = t2();
     })(weekday$1, (function() {
@@ -28206,7 +28182,7 @@ var hasRequiredLocaleData;
 function requireLocaleData() {
   if (hasRequiredLocaleData) return localeData$2.exports;
   hasRequiredLocaleData = 1;
-  (function(module2, exports) {
+  (function(module2, exports$1) {
     !(function(n2, e3) {
       module2.exports = e3();
     })(localeData$1, (function() {
@@ -28291,7 +28267,7 @@ var hasRequiredWeekOfYear;
 function requireWeekOfYear() {
   if (hasRequiredWeekOfYear) return weekOfYear$2.exports;
   hasRequiredWeekOfYear = 1;
-  (function(module2, exports) {
+  (function(module2, exports$1) {
     !(function(e3, t2) {
       module2.exports = t2();
     })(weekOfYear$1, (function() {
@@ -28323,7 +28299,7 @@ var hasRequiredWeekYear;
 function requireWeekYear() {
   if (hasRequiredWeekYear) return weekYear$2.exports;
   hasRequiredWeekYear = 1;
-  (function(module2, exports) {
+  (function(module2, exports$1) {
     !(function(e3, t2) {
       module2.exports = t2();
     })(weekYear$1, (function() {
@@ -28345,7 +28321,7 @@ var hasRequiredAdvancedFormat;
 function requireAdvancedFormat() {
   if (hasRequiredAdvancedFormat) return advancedFormat$2.exports;
   hasRequiredAdvancedFormat = 1;
-  (function(module2, exports) {
+  (function(module2, exports$1) {
     !(function(e3, t2) {
       module2.exports = t2();
     })(advancedFormat$1, (function() {
@@ -28402,7 +28378,7 @@ var hasRequiredCustomParseFormat;
 function requireCustomParseFormat() {
   if (hasRequiredCustomParseFormat) return customParseFormat$2.exports;
   hasRequiredCustomParseFormat = 1;
-  (function(module2, exports) {
+  (function(module2, exports$1) {
     !(function(e3, t2) {
       module2.exports = t2();
     })(customParseFormat$1, (function() {
@@ -44885,7 +44861,7 @@ var defaultItemRender = function defaultItemRender2(page, type4, element2) {
 };
 function noop$2() {
 }
-function isInteger(v) {
+function isInteger$1(v) {
   var value2 = Number(v);
   return typeof value2 === "number" && !Number.isNaN(value2) && isFinite(value2) && Math.floor(value2) === value2;
 }
@@ -44945,7 +44921,7 @@ var Pagination$1 = function Pagination(props) {
     return value2;
   }
   function isValid2(page) {
-    return isInteger(page) && page !== current && isInteger(total) && total > 0;
+    return isInteger$1(page) && page !== current && isInteger$1(total) && total > 0;
   }
   var shouldDisplayQuickJumper = total > pageSize ? showQuickJumper : false;
   function handleKeyDown(event2) {
@@ -59314,7 +59290,6 @@ const getGenesisTypographyClass = ({ colors: colors2, typography: typography2 },
       width: ${$isFullWidth ? "100%" : "auto"};
       font-weight: ${fontWeight} !important;
       font-size: ${fontSize} !important;
-      line-height: 1;
        -webkit-font-smoothing: antialiased;
 
       &:disabled {
@@ -60376,6 +60351,7 @@ const Typography = ({
   style: style2,
   fontSize,
   fontWeight,
+  lineHeight,
   isDisabled,
   ...rest
 }) => {
@@ -60397,7 +60373,7 @@ const Typography = ({
         fontWeight,
         disabled: isDisabled,
         $letterSpacing: theme.typography[breakpoint][variant].letterSpacing,
-        $lineHeight: theme.typography[breakpoint][variant].lineHeight,
+        $lineHeight: lineHeight ?? theme.typography[breakpoint][variant].lineHeight,
         ...rest,
         children: children2
       }
@@ -60418,7 +60394,7 @@ const Typography = ({
         fontSize: fontSize ?? `${theme.typography[breakpoint][variant].fontSize}px`,
         fontWeight,
         $letterSpacing: theme.typography[breakpoint][validVariant].letterSpacing,
-        $lineHeight: theme.typography[breakpoint][validVariant].lineHeight,
+        $lineHeight: lineHeight ?? theme.typography[breakpoint][validVariant].lineHeight,
         ...rest,
         children: children2
       }
@@ -60437,7 +60413,7 @@ const Typography = ({
       fontSize: fontSize ?? `${theme.typography[breakpoint][variant].fontSize}px`,
       fontWeight,
       $letterSpacing: theme.typography[breakpoint][validVariant].letterSpacing,
-      $lineHeight: theme.typography[breakpoint][validVariant].lineHeight,
+      $lineHeight: lineHeight ?? theme.typography[breakpoint][validVariant].lineHeight,
       ...rest,
       children: children2
     }
@@ -60722,6 +60698,18 @@ function IconBase2(props) {
 function FaCircleCheck(props) {
   return GenIcon({ "attr": { "viewBox": "0 0 512 512" }, "child": [{ "tag": "path", "attr": { "d": "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z" }, "child": [] }] })(props);
 }
+function HiArrowCircleRight(props) {
+  return GenIcon({ "attr": { "viewBox": "0 0 20 20", "fill": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "d": "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 1.414L10.586 9H7a1 1 0 100 2h3.586l-1.293 1.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414z", "clipRule": "evenodd" }, "child": [] }] })(props);
+}
+function HiCheckCircle(props) {
+  return GenIcon({ "attr": { "viewBox": "0 0 20 20", "fill": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "d": "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z", "clipRule": "evenodd" }, "child": [] }] })(props);
+}
+function HiChevronDoubleLeft(props) {
+  return GenIcon({ "attr": { "viewBox": "0 0 20 20", "fill": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "d": "M15.707 15.707a1 1 0 01-1.414 0l-5-5a1 1 0 010-1.414l5-5a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 010 1.414zm-6 0a1 1 0 01-1.414 0l-5-5a1 1 0 010-1.414l5-5a1 1 0 011.414 1.414L5.414 10l4.293 4.293a1 1 0 010 1.414z", "clipRule": "evenodd" }, "child": [] }] })(props);
+}
+function HiChevronDown(props) {
+  return GenIcon({ "attr": { "viewBox": "0 0 20 20", "fill": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "d": "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z", "clipRule": "evenodd" }, "child": [] }] })(props);
+}
 function HiClock(props) {
   return GenIcon({ "attr": { "viewBox": "0 0 20 20", "fill": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "d": "M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z", "clipRule": "evenodd" }, "child": [] }] })(props);
 }
@@ -61381,7 +61369,7 @@ function createPacketDecoderStream(maxPayload, binaryType) {
     }
   });
 }
-const protocol$1 = 4;
+const protocol = 4;
 function Emitter(obj) {
   if (obj) return mixin(obj);
 }
@@ -62359,7 +62347,7 @@ class SocketWithoutUpgrade extends Emitter {
    */
   createTransport(name2) {
     const query = Object.assign({}, this.opts.query);
-    query.EIO = protocol$1;
+    query.EIO = protocol;
     query.transport = name2;
     if (this.id)
       query.sid = this.id;
@@ -62688,7 +62676,7 @@ class SocketWithoutUpgrade extends Emitter {
     }
   }
 }
-SocketWithoutUpgrade.protocol = protocol$1;
+SocketWithoutUpgrade.protocol = protocol;
 class SocketWithUpgrade extends SocketWithoutUpgrade {
   constructor() {
     super(...arguments);
@@ -62953,14 +62941,18 @@ function _reconstructPacket(data, buffers) {
 }
 const RESERVED_EVENTS$1 = [
   "connect",
+  // used on the client side
   "connect_error",
+  // used on the client side
   "disconnect",
+  // used on both sides
   "disconnecting",
+  // used on the server side
   "newListener",
+  // used by the Node.js EventEmitter
   "removeListener"
   // used by the Node.js EventEmitter
 ];
-const protocol = 5;
 var PacketType;
 (function(PacketType2) {
   PacketType2[PacketType2["CONNECT"] = 0] = "CONNECT";
@@ -63031,18 +63023,16 @@ class Encoder {
     return buffers;
   }
 }
-function isObject(value2) {
-  return Object.prototype.toString.call(value2) === "[object Object]";
-}
 class Decoder extends Emitter {
   /**
    * Decoder constructor
-   *
-   * @param {function} reviver - custom reviver to pass down to JSON.stringify
    */
-  constructor(reviver) {
+  constructor(opts) {
     super();
-    this.reviver = reviver;
+    this.opts = Object.assign({
+      reviver: void 0,
+      maxAttachments: 10
+    }, typeof opts === "function" ? { reviver: opts } : opts);
   }
   /**
    * Decodes an encoded packet string into packet JSON.
@@ -63102,7 +63092,13 @@ class Decoder extends Emitter {
       if (buf != Number(buf) || str.charAt(i) !== "-") {
         throw new Error("Illegal attachments");
       }
-      p.attachments = Number(buf);
+      const n2 = Number(buf);
+      if (!isInteger(n2) || n2 < 0) {
+        throw new Error("Illegal attachments");
+      } else if (n2 > this.opts.maxAttachments) {
+        throw new Error("too many attachments");
+      }
+      p.attachments = n2;
     }
     if ("/" === str.charAt(i + 1)) {
       const start2 = i + 1;
@@ -63143,7 +63139,7 @@ class Decoder extends Emitter {
   }
   tryParse(str) {
     try {
-      return JSON.parse(str, this.reviver);
+      return JSON.parse(str, this.opts.reviver);
     } catch (e3) {
       return false;
     }
@@ -63205,14 +63201,19 @@ class BinaryReconstructor {
     this.buffers = [];
   }
 }
+const isInteger = Number.isInteger || function(value2) {
+  return typeof value2 === "number" && isFinite(value2) && Math.floor(value2) === value2;
+};
+function isObject(value2) {
+  return Object.prototype.toString.call(value2) === "[object Object]";
+}
 const parser = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   Decoder,
   Encoder,
   get PacketType() {
     return PacketType;
-  },
-  protocol
+  }
 }, Symbol.toStringTag, { value: "Module" }));
 function on(obj, ev, fn) {
   obj.on(ev, fn);
@@ -74966,7 +74967,7 @@ const OverflowMenu = forwardRef(
     }, [isOpen, handleClickOutside, getPopupContainer]);
     const getMenuStyle = useMemo$1(() => {
       const baseStyle = {
-        position: getPopupContainer !== void 0 ? "fixed" : "absolute",
+        position: getPopupContainer === void 0 ? "absolute" : "fixed",
         zIndex: 1e3,
         ...style2
       };
@@ -75104,35 +75105,65 @@ const GlobalHeader = ({
   menuItems = [],
   primaryAction
 }) => {
-  return /* @__PURE__ */ jsxs(Tile, { "data-testid": "GlobalHeader", style: {
-    padding: "32px 40px",
-    justifyContent: "flex-end",
-    width: "100%",
-    alignItems: "flex-start",
-    minHeight: "164px",
-    borderBottom: "1px solid #CBCBCB",
-    background: "#FFF",
-    gap: "24px"
-  }, children: [
-    breadcrumbs?.length > 0 && /* @__PURE__ */ jsx(Breadcrumb, { items: breadcrumbs }),
-    /* @__PURE__ */ jsxs(Tile, { isHorizontal: true, style: { justifyContent: "space-between", gap: "16px", width: "100%", flexWrap: "wrap" }, children: [
-      /* @__PURE__ */ jsxs(Tile, { isHorizontal: true, style: { flex: 1, gap: "16px", minWidth: "200px" }, children: [
-        onBack && /* @__PURE__ */ jsx(UtilityButton, { icon: /* @__PURE__ */ jsx(RefIcon$j, {}), onClick: onBack }),
-        /* @__PURE__ */ jsx(Typography, { variant: "display3", children: title })
-      ] }),
-      /* @__PURE__ */ jsxs(Tile, { isHorizontal: true, style: { justifyContent: "flex-end", gap: "16px", alignItems: "flex-end" }, children: [
-        primaryAction && /* @__PURE__ */ jsx(Button$1, { onClick: primaryAction.onClick, children: primaryAction.label }),
-        menuItems.length > 0 && /* @__PURE__ */ jsx(
-          OverflowMenu,
+  return /* @__PURE__ */ jsxs(
+    Tile,
+    {
+      "data-testid": "GlobalHeader",
+      style: {
+        padding: "32px 40px",
+        justifyContent: "flex-end",
+        width: "100%",
+        alignItems: "flex-start",
+        minHeight: "164px",
+        borderBottom: "1px solid #CBCBCB",
+        background: "#FFF",
+        gap: "24px"
+      },
+      children: [
+        breadcrumbs?.length > 0 && /* @__PURE__ */ jsx(Breadcrumb, { items: breadcrumbs }),
+        /* @__PURE__ */ jsxs(
+          Tile,
           {
-            trigger: /* @__PURE__ */ jsx(UtilityButton, { isIconButton: true, children: /* @__PURE__ */ jsx(HiDotsHorizontal, {}) }),
-            alignment: "right",
-            children: menuItems.map((item) => /* @__PURE__ */ jsx(OverflowMenuItem, { onClick: item.onClick, children: item.children }, item.id))
+            isHorizontal: true,
+            style: {
+              justifyContent: "space-between",
+              gap: "16px",
+              width: "100%",
+              flexWrap: "wrap"
+            },
+            children: [
+              /* @__PURE__ */ jsxs(Tile, { isHorizontal: true, style: { flex: 1, gap: "16px", minWidth: "200px" }, children: [
+                onBack && /* @__PURE__ */ jsx(UtilityButton, { icon: /* @__PURE__ */ jsx(RefIcon$j, {}), onClick: onBack }),
+                /* @__PURE__ */ jsx(Typography, { variant: "display3", children: title })
+              ] }),
+              /* @__PURE__ */ jsxs(
+                Tile,
+                {
+                  isHorizontal: true,
+                  style: {
+                    justifyContent: "flex-end",
+                    gap: "16px",
+                    alignItems: "flex-end"
+                  },
+                  children: [
+                    primaryAction && /* @__PURE__ */ jsx(Button$1, { onClick: primaryAction.onClick, children: primaryAction.label }),
+                    menuItems.length > 0 && /* @__PURE__ */ jsx(
+                      OverflowMenu,
+                      {
+                        trigger: /* @__PURE__ */ jsx(UtilityButton, { isIconButton: true, children: /* @__PURE__ */ jsx(HiDotsHorizontal, {}) }),
+                        alignment: "right",
+                        children: menuItems.map((item) => /* @__PURE__ */ jsx(OverflowMenuItem, { onClick: item.onClick, children: item.children }, item.id))
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
           }
         )
-      ] })
-    ] })
-  ] });
+      ]
+    }
+  );
 };
 const Outline = (properties) => /* @__PURE__ */ jsxs(
   "svg",
@@ -77922,7 +77953,7 @@ function initRange(domain, range3) {
   }
   return this;
 }
-const implicit = Symbol("implicit");
+const implicit = /* @__PURE__ */ Symbol("implicit");
 function ordinal() {
   var index2 = new InternMap(), domain = [], range3 = [], unknown = implicit;
   function scale(d) {
@@ -78649,7 +78680,7 @@ const VEHICLE_INSIGHTS_CONFIG = {
   // 4px bars as shown in Figma
   BAR_SPACING: 40
 };
-const Container$2 = styled.div`
+const Container$3 = styled.div`
   display: flex;
   flex-direction: row;
   gap: ${({ theme }) => theme?.sizing.Size2}px;
@@ -79036,7 +79067,7 @@ const BarChart = ({
     iconSpacing,
     showAdditionalGridLines
   ]);
-  return /* @__PURE__ */ jsx(Container$2, { className, $height: height, $width: width, children: /* @__PURE__ */ jsxs(ChartContainer$2, { children: [
+  return /* @__PURE__ */ jsx(Container$3, { className, $height: height, $width: width, children: /* @__PURE__ */ jsxs(ChartContainer$2, { children: [
     /* @__PURE__ */ jsx(
       "svg",
       {
@@ -79057,7 +79088,7 @@ const BarChart = ({
     )
   ] }) });
 };
-const Container$1 = styled.div`
+const Container$2 = styled.div`
   display: flex;
   flex-direction: row;
   gap: ${({ theme }) => theme?.sizing.Size2}px;
@@ -79214,7 +79245,7 @@ const LineChart = ({
     skipDays,
     isAnimated
   ]);
-  return /* @__PURE__ */ jsx(Container$1, { className, $height: height, $width: width, children: /* @__PURE__ */ jsxs(ChartContainer$1, { children: [
+  return /* @__PURE__ */ jsx(Container$2, { className, $height: height, $width: width, children: /* @__PURE__ */ jsxs(ChartContainer$1, { children: [
     /* @__PURE__ */ jsx(
       "svg",
       {
@@ -79235,7 +79266,7 @@ const LineChart = ({
     )
   ] }) });
 };
-const Container = styled.div`
+const Container$1 = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -79365,7 +79396,7 @@ const DonutChart = ({
       });
     }
   }, [data, height, width, innerRadius, outerRadius, showTooltip, showLegend]);
-  return /* @__PURE__ */ jsx(Container, { className, $height: height, $width: width, children: /* @__PURE__ */ jsxs(ChartContainer, { children: [
+  return /* @__PURE__ */ jsx(Container$1, { className, $height: height, $width: width, children: /* @__PURE__ */ jsxs(ChartContainer, { children: [
     /* @__PURE__ */ jsx(
       "svg",
       {
@@ -79406,12 +79437,12 @@ const getGenesisClass$7 = ({ sizing: sizing2 }, $isColumn) => `
   margin: 0;
   box-sizing: border-box;
  `;
-const Content$1 = styled.div`
+const Content$2 = styled.div`
   ${({ theme, $isColumn }) => {
   return getGenesisClass$7(theme, $isColumn);
 }}
 `;
-const Content = ({
+const Content$1 = ({
   children: children2,
   className,
   backgroundColor,
@@ -79419,7 +79450,7 @@ const Content = ({
   style: style2
 }) => {
   return /* @__PURE__ */ jsx(
-    Content$1,
+    Content$2,
     {
       className: clsx(className),
       style: { ...style2, backgroundColor },
@@ -79429,7 +79460,7 @@ const Content = ({
   );
 };
 const Layout = ({ children: children2, isColumn = false, style: style2 }) => {
-  return /* @__PURE__ */ jsx(Content, { "data-testid": "Layout", isColumn, style: style2, children: children2 });
+  return /* @__PURE__ */ jsx(Content$1, { "data-testid": "Layout", isColumn, style: style2, children: children2 });
 };
 const MessageRow = styled.div`
   display: flex;
@@ -79556,6 +79587,490 @@ const Message = ({
     ) : null
   ] });
 };
+styled.nav`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: ${({ theme }) => theme.sizing.Size64 + "px"};
+  padding: 0 ${({ theme }) => theme.sizing.Size24 + "px"};
+  background-color: ${({ theme }) => theme.colors.surface.active.backgroundColor};
+  border-bottom: ${({ theme }) => theme.sizing.Size05 + "px"} solid
+    ${({ theme }) => theme.colors.surface.border?.borderColor ?? theme.colors.onsurface.active.borderColor};
+  box-shadow: ${({ theme }) => theme.shadows.general["1"]};
+`;
+styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.sizing.Size24 + "px"};
+`;
+styled.div`
+  display: flex;
+  align-items: center;
+`;
+styled.ul`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.sizing.Size4 + "px"};
+  list-style: none;
+  margin: 0;
+  padding: 0;
+`;
+styled.li`
+  display: flex;
+  align-items: center;
+`;
+const itemBase = `
+  display: inline-flex;
+  align-items: center;
+  padding: 6px 12px;
+  border-radius: ${({ theme }) => theme.borderRadius.sm + "px"};
+  font-family: ${({ theme }) => theme.typography.fontFamily};
+  font-size: ${({ theme }) => theme.typography.wide.body1.fontSize};
+  font-weight: ${({ theme }) => theme.typography.wide.body1.fontWeight};
+  line-height: ${({ theme }) => theme.typography.wide.body1.lineHeight};
+  text-decoration: none;
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease;
+`;
+styled.a`
+  ${itemBase}
+  color: ${({ theme }) => theme.colors.onsurface.active.textColor};
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.onsurface.hover?.backgroundColor ?? theme.colors.surface.hover?.backgroundColor};
+  }
+`;
+styled.button`
+  ${itemBase}
+  color: ${({ theme }) => theme.colors.onsurface.active.textColor};
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.onsurface.hover?.backgroundColor ?? theme.colors.surface.hover?.backgroundColor};
+  }
+`;
+styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.sizing.Size8 + "px"};
+`;
+const Sidebar = styled.aside`
+  display: flex;
+  flex-direction: column;
+  width: ${({ $isSmall }) => $isSmall ? "78px" : "224px"};
+  background-color: #fff;
+  height: 100vh;
+  justify-content: space-between;
+  border-right: 1px solid #dfdfdf;
+  z-index: 2;
+  transition: width 0.2s ease;
+  overflow: hidden;
+`;
+const Frame = styled(Tile)`
+  padding: 0 ${({ $isSmall }) => $isSmall ? "12px" : "16px"};
+  align-items: flex-start;
+  align-self: stretch;
+`;
+const ScrollableFrame = styled.div`
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 0
+    ${({ $isSmall, $hasScrollbar }) => $hasScrollbar ? $isSmall ? "2px" : "12px" : $isSmall ? "8px" : "16px"}
+    0 ${({ $isSmall }) => $isSmall ? "12px" : "16px"};
+  scrollbar-width: thin;
+  scrollbar-color: #d4d4d4 transparent;
+
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: #d4d4d4;
+    border-radius: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: #b0b0b0;
+  }
+`;
+const CollapseWrapper = styled.div`
+  display: grid;
+  grid-template-rows: ${({ $isOpen }) => $isOpen ? "1fr" : "0fr"};
+  transition: grid-template-rows 0.2s ease;
+  overflow: hidden;
+
+  & > ul {
+    min-height: 0;
+  }
+`;
+const NavItem$1 = styled.div`
+  display: flex;
+  min-height: 48px;
+  padding: 12px 16px;
+  gap: 4px;
+  /* justify-content: space-between; */
+  align-items: center;
+  align-self: stretch;
+  width: 100%;
+  cursor: pointer;
+  border-radius: 6px;
+  text-decoration: none;
+  white-space: nowrap;
+  color: ${({ $isActive }) => $isActive ? "#fff" : "#3E3E3E"};
+  background-color: ${({ $isActive }) => $isActive ? "#214148" : "transparent"};
+
+  &:hover {
+    background-color: ${({ $isActive }) => $isActive ? "#214148" : "#F4F4F4"};
+    color: ${({ $isActive }) => $isActive ? "#fff" : "#30606B"};
+
+    * {
+      color: inherit !important;
+    }
+  }
+`;
+const NavItem = ({
+  icon,
+  label,
+  href,
+  isActive: isActive2,
+  type: type4 = "default",
+  isOpen,
+  onToggle,
+  onClick,
+  isSmall
+}) => {
+  const isExpandable = type4 === "expandable";
+  const isButton = type4 === "button";
+  const content2 = /* @__PURE__ */ jsxs(
+    Tile,
+    {
+      isHorizontal: true,
+      style: {
+        justifyContent: "space-between",
+        width: "100%",
+        alignItems: "center"
+      },
+      children: [
+        /* @__PURE__ */ jsxs("span", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
+          /* @__PURE__ */ jsx("span", { style: { width: "24px", display: "flex", flexShrink: 0 }, children: icon }),
+          !isSmall && /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "label2",
+              fontWeight: 500,
+              color: isActive2 ? "#fff" : void 0,
+              children: label
+            }
+          )
+        ] }),
+        isExpandable && !isSmall && /* @__PURE__ */ jsx(
+          HiChevronDown,
+          {
+            size: 16,
+            style: {
+              transition: "transform 0.2s ease",
+              transform: isOpen ? "rotate(180deg)" : "rotate(0deg)"
+            }
+          }
+        )
+      ]
+    }
+  );
+  if (isExpandable) {
+    return /* @__PURE__ */ jsx(
+      NavItem$1,
+      {
+        as: "button",
+        $isActive: isActive2,
+        onClick: onToggle,
+        "aria-expanded": isOpen,
+        style: { border: "none", width: "100%", textAlign: "left" },
+        children: content2
+      }
+    );
+  }
+  if (isButton) {
+    return /* @__PURE__ */ jsx(
+      NavItem$1,
+      {
+        as: "button",
+        $isActive: isActive2,
+        onClick,
+        style: { border: "none", width: "100%", textAlign: "left" },
+        children: content2
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    NavItem$1,
+    {
+      as: href ? "a" : "div",
+      href,
+      $isActive: isActive2,
+      "aria-current": isActive2 ? "page" : void 0,
+      children: content2
+    }
+  );
+};
+const NavMenu = ({ items, isSmall }) => {
+  const [openPaths, setOpenPaths] = useState({});
+  const navRef = useRef(null);
+  const currentPaths = items.map((item) => item.currentPath).join(",");
+  useEffect(() => {
+    navRef.current?.querySelector("[data-active='true']")?.scrollIntoView({ block: "nearest", behavior: "smooth" });
+  }, [currentPaths]);
+  const togglePath = (path2) => {
+    setOpenPaths((prev2) => ({ ...prev2, [path2]: !prev2[path2] }));
+  };
+  return /* @__PURE__ */ jsx("nav", { ref: navRef, style: { width: "100%" }, children: items.map(
+    (item, itemIndex) => item.data.map((group, groupIndex) => /* @__PURE__ */ jsxs("div", { children: [
+      group.category && /* @__PURE__ */ jsx(
+        Tile,
+        {
+          style: {
+            padding: isSmall ? "0" : "12px 0px",
+            maxHeight: isSmall ? 0 : "40px",
+            opacity: isSmall ? 0 : 1,
+            transition: "opacity 0.15s ease, max-height 0.2s ease, padding 0.2s ease",
+            overflow: "hidden"
+          },
+          children: /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "overline2",
+              color: "#6C6C6C",
+              fontWeight: 600,
+              children: group.category.toUpperCase()
+            }
+          )
+        }
+      ),
+      group.routes.map((route) => /* @__PURE__ */ jsx(React__default.Fragment, { children: isSmall && route.children ? /* @__PURE__ */ jsx(
+        OverflowMenu,
+        {
+          placement: "right",
+          offset: 24,
+          trigger: /* @__PURE__ */ jsx(Tooltip$2, { title: route.name, placement: "right", children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-active": route.children.some(
+                (c) => c.path === item.currentPath
+              ) || void 0,
+              children: /* @__PURE__ */ jsx(
+                NavItem,
+                {
+                  label: route.name,
+                  icon: route.icon,
+                  isActive: route.children.some(
+                    (c) => c.path === item.currentPath
+                  ),
+                  isSmall: true
+                }
+              )
+            }
+          ) }),
+          children: route.children.map((child) => /* @__PURE__ */ jsx(OverflowMenuItem, { children: /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: child.path,
+              style: {
+                textDecoration: "none",
+                color: "inherit",
+                display: "block"
+              },
+              children: /* @__PURE__ */ jsx(Typography, { variant: "label2", fontWeight: 500, children: child.name })
+            }
+          ) }, child.path))
+        }
+      ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          Tooltip$2,
+          {
+            title: isSmall ? route.name : void 0,
+            placement: "right",
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                "data-active": !route.children && item.currentPath === route.path || void 0,
+                children: /* @__PURE__ */ jsx(
+                  NavItem,
+                  {
+                    label: route.name,
+                    icon: route.icon,
+                    type: route.children ? "expandable" : "default",
+                    href: route.children ? void 0 : route.path,
+                    isActive: !route.children && item.currentPath === route.path,
+                    isOpen: openPaths[route.path],
+                    onToggle: () => togglePath(route.path),
+                    isSmall
+                  }
+                )
+              }
+            )
+          }
+        ),
+        route.children && /* @__PURE__ */ jsx(CollapseWrapper, { $isOpen: !!openPaths[route.path], children: /* @__PURE__ */ jsx(
+          "ul",
+          {
+            style: { listStyle: "none", margin: 0, padding: 0 },
+            children: route.children.map((child) => /* @__PURE__ */ jsx(
+              "li",
+              {
+                "data-active": item.currentPath === child.path || void 0,
+                children: /* @__PURE__ */ jsx(
+                  NavItem,
+                  {
+                    label: child.name,
+                    icon: child.icon,
+                    href: child.path,
+                    isActive: item.currentPath === child.path,
+                    isSmall
+                  }
+                )
+              },
+              child.path
+            ))
+          }
+        ) })
+      ] }) }, route.path))
+    ] }, `${itemIndex}-${groupIndex}`))
+  ) });
+};
+const gbLogo = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAOdEVYdFNvZnR3YXJlAEZpZ21hnrGWYwAAAfpJREFUeAHtlctLG0Ecx38z+8rDBkoJpUVK6x9QrKSHHoSlSE+lh0JoT60Hg+JNUBFFFAI5+LrqKSfxIoLgQUXxgRfjshHRgx4EFT0ogg9iskl2Z93ZYPBgdtaoF/F72d/s/H6f33yHmV2AFwEg87i3HZ5IWFMiS9aTK5kAD4Ab6xH9yi8krdgolYSgDF3N/KnxiJKCvTxG3+KOjPs64M62moZ8vKhg08TJzfPfrIL7OECpRMOBP5WtpANTFNK4Nl5BQ6ciVw5k+aOHKA36DVw3TGLBX7HgVDwr4XCtqf6dkYvnc7omAnjtoi/vo7JsLw4Hg2COj9uNyF31rreIbDTq6DTNgVeEqQm1+P7DG09fdedqB5Rw46YBNtRIFp9rttv5hW3IaPnCBMIrPweScqnV2znObOBSi/8TN/CLdK4ID/gEjQVnNUBnO839fkJChRGC2elNOwwGREOOKl4W3C5zmMPhcLg43xs66t49SffQWBQ4jUcgEcT/+xFLjEKZDW6Lm2ypzmJc+OZUSJi0zSKPqqp5ViHzmNJFzHWEMpm8bsN9Erf/PaZ+Ahd3gIp50eKNn/9acMHikbcBqb8upla5hVMxHVS+5sdyBiHHl3rNr8HEBjymlrtCwyvdX+lJ4aBMOW0RRjyuqo0q1KUBj629kbpWKPN/8bx0DaY/qDhSPSx2AAAAAElFTkSuQmCC";
+const NavBar = ({
+  items = [],
+  version: version2,
+  user,
+  headerSlot,
+  actionsSlot
+}) => {
+  const [isSmall, setIsSmall] = useState(false);
+  const [hasScrollbar, setHasScrollbar] = useState(false);
+  const scrollRef = useRef(null);
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const check = () => setHasScrollbar(el.scrollHeight > el.clientHeight);
+    check();
+    const observer = new ResizeObserver(check);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+  return /* @__PURE__ */ jsxs(Sidebar, { $isSmall: isSmall, children: [
+    /* @__PURE__ */ jsxs(Tile, { style: { flex: 1, overflow: "hidden" }, children: [
+      /* @__PURE__ */ jsxs(
+        Tile,
+        {
+          isHorizontal: !isSmall,
+          style: {
+            justifyContent: "space-between",
+            alignItems: "center",
+            width: "100%",
+            gap: "16px",
+            padding: `${isSmall ? "24px" : "16px"}`,
+            transition: "padding 0.2s ease"
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              Tile,
+              {
+                isHorizontal: true,
+                style: {
+                  gap: "8px",
+                  alignItems: "center",
+                  padding: "8px"
+                },
+                children: headerSlot ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(Avatar, { shape: "square", size: 24, url: gbLogo }),
+                  !isSmall && /* @__PURE__ */ jsx(
+                    Typography,
+                    {
+                      variant: "heading3",
+                      fontWeight: 700,
+                      style: {
+                        whiteSpace: "nowrap",
+                        overflow: "hidden",
+                        maxWidth: isSmall ? "0px" : "160px",
+                        opacity: isSmall ? 0 : 1,
+                        transition: "max-width 2s ease, opacity 0.15s ease"
+                      },
+                      children: "GoBolt"
+                    }
+                  )
+                ] })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              HiChevronDoubleLeft,
+              {
+                size: 20,
+                onClick: () => setIsSmall((s) => !s),
+                style: {
+                  cursor: "pointer",
+                  transition: "transform 0.4s ease",
+                  transform: isSmall ? "rotate(180deg)" : "rotate(0deg)"
+                }
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ScrollableFrame,
+        {
+          ref: scrollRef,
+          $isSmall: isSmall,
+          $hasScrollbar: hasScrollbar,
+          children: /* @__PURE__ */ jsx(NavMenu, { items, isSmall })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(Frame, { $isSmall: isSmall, children: [
+      actionsSlot?.(isSmall),
+      /* @__PURE__ */ jsxs(
+        Tile,
+        {
+          isHorizontal: true,
+          style: {
+            alignItems: "center",
+            width: "100%",
+            gap: "8px",
+            padding: `12px ${isSmall ? "12px" : "16px"}`
+          },
+          children: [
+            /* @__PURE__ */ jsx(Avatar, { user, size: isSmall ? 32 : 40 }),
+            !isSmall && /* @__PURE__ */ jsxs(Typography, { variant: "label2", style: { whiteSpace: "nowrap" }, children: [
+              user.first_name,
+              " ",
+              user.last_name
+            ] })
+          ]
+        }
+      ),
+      !isSmall && /* @__PURE__ */ jsx(
+        Tile,
+        {
+          style: {
+            padding: "16px 24px",
+            width: "100%",
+            textAlign: "center"
+          },
+          children: /* @__PURE__ */ jsxs(Typography, { variant: "label3", children: [
+            "Version ",
+            version2
+          ] })
+        }
+      )
+    ] })
+  ] });
+};
 const Appointment = (properties) => /* @__PURE__ */ jsx(
   "svg",
   {
@@ -87059,8 +87574,8 @@ const mockColumns = [
       const textColor = record.isSelected ? "white" : "#6c6c6c";
       return React__default.createElement(Typography, {
         variant: "body2",
-        children: typeof address === "string" ? address : JSON.stringify(address),
-        color: `${textColor}`
+        color: `${textColor}`,
+        children: typeof address === "string" ? address : JSON.stringify(address)
       });
     }
   },
@@ -87517,6 +88032,177 @@ const Tabs = ({ items, onChange, selectedId }) => {
     }
   );
 };
+const Wrapper = styled(Tile)`
+  padding: 0 ${({ theme }) => theme.sizing.Size6}px;
+  background-color: #fff;
+
+  &:hover {
+    background-color: #f4f4f4;
+  }
+`;
+const Container = styled(Tile)`
+  flex-direction: row;
+  justify-content: flex-start;
+  gap: 12px;
+  background-color: ${({ theme }) => theme.colors.surface.default};
+  width: 100%;
+  /* padding: 0 ${({ theme }) => theme.sizing.Size24}px; */
+`;
+const TimelineColumn = styled(Tile)`
+  align-items: center;
+  align-self: stretch;
+  flex-shrink: 0;
+  padding: 0;
+  width: 26px;
+`;
+const TimelineLine = styled.div`
+  width: 1px;
+  flex: 1;
+  background-color: ${({ $color }) => $color ?? "#9A9A9A"};
+`;
+const Dot = styled.div`
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  background-color: #9a9a9a;
+`;
+const Content = styled(Tile)`
+  gap: ${({ theme }) => theme.sizing.Size1}px;
+  flex: 1;
+  min-width: 0;
+  padding: ${({ theme }) => theme.sizing.Size3}px 0;
+`;
+const ActionNote = styled(Tile)`
+  padding: 0;
+`;
+const TileLog = ({
+  timestamp,
+  action,
+  status = "none",
+  note: note2,
+  author
+}) => {
+  const { theme } = useGenesis();
+  const isNone = status === "none";
+  const stateColors = {
+    none: "#CBCBCB",
+    success: "#A7DFAF",
+    error: "#F3A9AB",
+    "in-progress": "#AFB8FB",
+    generic: "#CBCBCB"
+  };
+  const stateTextColors = {
+    none: void 0,
+    success: theme.colors.status["success"].onsurface,
+    error: theme.colors.status["error"].onsurface,
+    "in-progress": theme.colors.status["info"].onsurface,
+    generic: theme.colors.status["generic"].onsurface
+  };
+  const stateIcons = {
+    success: /* @__PURE__ */ jsx(
+      Badge$1,
+      {
+        state: "success",
+        customIcon: /* @__PURE__ */ jsx(
+          HiCheckCircle,
+          {
+            size: 16,
+            color: theme.colors.status["success"].onsurface
+          }
+        ),
+        hasIcon: true
+      }
+    ),
+    error: /* @__PURE__ */ jsx(
+      Badge$1,
+      {
+        state: "error",
+        customIcon: /* @__PURE__ */ jsx(HiXCircle, { size: 16, color: theme.colors.status["error"].onsurface }),
+        hasIcon: true
+      }
+    ),
+    "in-progress": /* @__PURE__ */ jsx(
+      Badge$1,
+      {
+        state: "info",
+        customIcon: /* @__PURE__ */ jsx(
+          HiArrowCircleRight,
+          {
+            size: 16,
+            color: theme.colors.status["info"].onsurface
+          }
+        ),
+        hasIcon: true
+      }
+    ),
+    generic: /* @__PURE__ */ jsx(
+      Badge$1,
+      {
+        state: "generic",
+        customIcon: /* @__PURE__ */ jsx(
+          HiOutlineMinusCircle,
+          {
+            size: 16,
+            color: theme.colors.status["generic"].onsurface
+          }
+        ),
+        hasIcon: true
+      }
+    )
+  };
+  return /* @__PURE__ */ jsx(Wrapper, { children: /* @__PURE__ */ jsxs(Container, { children: [
+    /* @__PURE__ */ jsxs(TimelineColumn, { children: [
+      /* @__PURE__ */ jsx(TimelineLine, { $color: stateColors[status] }),
+      isNone ? /* @__PURE__ */ jsx(Dot, {}) : stateIcons[status],
+      /* @__PURE__ */ jsx(TimelineLine, { $color: stateColors[status] })
+    ] }),
+    /* @__PURE__ */ jsxs(Content, { children: [
+      /* @__PURE__ */ jsx(
+        Typography,
+        {
+          variant: "label3",
+          lineHeight: "10px",
+          color: theme.colors.onsurface["copy-light"],
+          children: timestamp
+        }
+      ),
+      /* @__PURE__ */ jsxs(ActionNote, { children: [
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "body4",
+            fontSize: "14px",
+            fontWeight: 400,
+            lineHeight: "27px",
+            color: stateTextColors[status],
+            children: action
+          }
+        ),
+        note2 && /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "body5",
+            lineHeight: "23px",
+            color: theme.colors.onsurface["copy-light"],
+            children: note2
+          }
+        )
+      ] }),
+      author && /* @__PURE__ */ jsx(
+        Typography,
+        {
+          variant: "label3",
+          fontSize: "10px",
+          fontWeight: 500,
+          lineHeight: "10px",
+          color: theme.colors.onsurface["copy-light"],
+          children: author
+        }
+      )
+    ] })
+  ] }) });
+};
 const GlobalStyles = createGlobalStyle`
   * {
     margin: 0;
@@ -87558,6 +88244,7 @@ export {
   Layout,
   LineChart,
   Message,
+  NavBar,
   Notification,
   OverflowMenu,
   OverflowMenuItem,
@@ -87574,6 +88261,7 @@ export {
   Tabs,
   Tag,
   Tile,
+  TileLog,
   Toast,
   Tooltip2 as Tooltip,
   Typography,