@strata-ds/core 2.1.0

package/dist/index.esm.js

@@ -0,0 +1,3049 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React, { useState, useRef, useMemo, useCallback, useEffect, createContext, useContext } from 'react';
+import { extendTheme, ChakraProvider, Box, Flex, Text, Image, Button, VStack, HStack } from '@chakra-ui/react';
+
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+function _arrayWithHoles(r) {
+  if (Array.isArray(r)) return r;
+}
+function asyncGeneratorStep(n, t, e, r, o, a, c) {
+  try {
+    var i = n[a](c),
+      u = i.value;
+  } catch (n) {
+    return void e(n);
+  }
+  i.done ? t(u) : Promise.resolve(u).then(r, o);
+}
+function _asyncToGenerator(n) {
+  return function () {
+    var t = this,
+      e = arguments;
+    return new Promise(function (r, o) {
+      var a = n.apply(t, e);
+      function _next(n) {
+        asyncGeneratorStep(a, r, o, _next, _throw, "next", n);
+      }
+      function _throw(n) {
+        asyncGeneratorStep(a, r, o, _next, _throw, "throw", n);
+      }
+      _next(void 0);
+    });
+  };
+}
+function _classCallCheck(a, n) {
+  if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function");
+}
+function _defineProperties(e, r) {
+  for (var t = 0; t < r.length; t++) {
+    var o = r[t];
+    o.enumerable = o.enumerable || false, o.configurable = true, "value" in o && (o.writable = true), Object.defineProperty(e, _toPropertyKey(o.key), o);
+  }
+}
+function _createClass(e, r, t) {
+  return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", {
+    writable: false
+  }), e;
+}
+function _defineProperty(e, r, t) {
+  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: true,
+    configurable: true,
+    writable: true
+  }) : e[r] = t, e;
+}
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = true,
+      o = false;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l) {
+        if (Object(t) !== t) return;
+        f = !1;
+      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = true, n = r;
+    } finally {
+      try {
+        if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
+    }
+    return a;
+  }
+}
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function ownKeys(e, r) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
+}
+function _objectSpread2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), true).forEach(function (r) {
+      _defineProperty(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+    });
+  }
+  return e;
+}
+function _objectWithoutProperties(e, t) {
+  if (null == e) return {};
+  var o,
+    r,
+    i = _objectWithoutPropertiesLoose(e, t);
+  if (Object.getOwnPropertySymbols) {
+    var n = Object.getOwnPropertySymbols(e);
+    for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
+  }
+  return i;
+}
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
+function _regenerator() {
+  /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */
+  var e,
+    t,
+    r = "function" == typeof Symbol ? Symbol : {},
+    n = r.iterator || "@@iterator",
+    o = r.toStringTag || "@@toStringTag";
+  function i(r, n, o, i) {
+    var c = n && n.prototype instanceof Generator ? n : Generator,
+      u = Object.create(c.prototype);
+    return _regeneratorDefine(u, "_invoke", function (r, n, o) {
+      var i,
+        c,
+        u,
+        f = 0,
+        p = o || [],
+        y = false,
+        G = {
+          p: 0,
+          n: 0,
+          v: e,
+          a: d,
+          f: d.bind(e, 4),
+          d: function (t, r) {
+            return i = t, c = 0, u = e, G.n = r, a;
+          }
+        };
+      function d(r, n) {
+        for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) {
+          var o,
+            i = p[t],
+            d = G.p,
+            l = i[2];
+          r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0));
+        }
+        if (o || r > 1) return a;
+        throw y = true, n;
+      }
+      return function (o, p, l) {
+        if (f > 1) throw TypeError("Generator is already running");
+        for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) {
+          i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u);
+          try {
+            if (f = 2, i) {
+              if (c || (o = "next"), t = i[o]) {
+                if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object");
+                if (!t.done) return t;
+                u = t.value, c < 2 && (c = 0);
+              } else 1 === c && (t = i.return) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1);
+              i = e;
+            } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break;
+          } catch (t) {
+            i = e, c = 1, u = t;
+          } finally {
+            f = 1;
+          }
+        }
+        return {
+          value: t,
+          done: y
+        };
+      };
+    }(r, o, i), true), u;
+  }
+  var a = {};
+  function Generator() {}
+  function GeneratorFunction() {}
+  function GeneratorFunctionPrototype() {}
+  t = Object.getPrototypeOf;
+  var c = [][n] ? t(t([][n]())) : (_regeneratorDefine(t = {}, n, function () {
+      return this;
+    }), t),
+    u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c);
+  function f(e) {
+    return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e;
+  }
+  return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine(u), _regeneratorDefine(u, o, "Generator"), _regeneratorDefine(u, n, function () {
+    return this;
+  }), _regeneratorDefine(u, "toString", function () {
+    return "[object Generator]";
+  }), (_regenerator = function () {
+    return {
+      w: i,
+      m: f
+    };
+  })();
+}
+function _regeneratorDefine(e, r, n, t) {
+  var i = Object.defineProperty;
+  try {
+    i({}, "", {});
+  } catch (e) {
+    i = 0;
+  }
+  _regeneratorDefine = function (e, r, n, t) {
+    function o(r, n) {
+      _regeneratorDefine(e, r, function (e) {
+        return this._invoke(r, n, e);
+      });
+    }
+    r ? i ? i(e, r, {
+      value: n,
+      enumerable: !t,
+      configurable: !t,
+      writable: !t
+    }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2));
+  }, _regeneratorDefine(e, r, n, t);
+}
+function _slicedToArray(r, e) {
+  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
+}
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r);
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (String )(t);
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _typeof(o) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+    return typeof o;
+  } : function (o) {
+    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+  }, _typeof(o);
+}
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
+}
+
+var _excluded$2 = ["children", "style", "className"],
+  _excluded2$2 = ["children", "style", "className"],
+  _excluded3$1 = ["key", "ref", "children", "style", "className"];
+var StrataComponentFactory = /*#__PURE__*/function () {
+  function StrataComponentFactory() {
+    _classCallCheck(this, StrataComponentFactory);
+  }
+  return _createClass(StrataComponentFactory, null, [{
+    key: "createComponent",
+    value:
+    // Create component with enhanced attribute handling
+    function createComponent(componentName, componentData, designSystem) {
+      var _this = this;
+      var Component = function Component(_ref) {
+        var children = _ref.children,
+          style = _ref.style,
+          className = _ref.className,
+          props = _objectWithoutProperties(_ref, _excluded$2);
+        var componentStyle = _this.resolveComponentStyles(componentData, designSystem);
+        var mergedStyle = _objectSpread2(_objectSpread2({}, componentStyle), style);
+        // Determine the HTML tag - use linkedElement or infer from component name
+        var htmlTag = _this.determineHtmlTag(componentData, componentName);
+        // Process ALL attributes including linked ones and passed props
+        var allAttributes = _this.processAllAttributes(props, componentData.linkedElement, htmlTag, designSystem);
+        return /*#__PURE__*/React.createElement(htmlTag, _objectSpread2({
+          style: mergedStyle,
+          className: _this.mergeClassNames(className, allAttributes["class"])
+        }, _this.cleanAttributes(allAttributes)), children || componentData.textContent);
+      };
+      Component.displayName = componentName;
+      return Component;
+    }
+    // Create sub-component with same enhanced attribute handling
+  }, {
+    key: "createSubComponent",
+    value: function createSubComponent(componentName, componentData, designSystem) {
+      var _this2 = this;
+      var SubComponent = function SubComponent(_ref2) {
+        var children = _ref2.children,
+          style = _ref2.style,
+          className = _ref2.className,
+          props = _objectWithoutProperties(_ref2, _excluded2$2);
+        var componentStyle = _this2.resolveComponentStyles(componentData, designSystem);
+        var mergedStyle = _objectSpread2(_objectSpread2({}, componentStyle), style);
+        var htmlTag = _this2.determineHtmlTag(componentData, componentName);
+        var allAttributes = _this2.processAllAttributes(props, componentData.linkedElement, htmlTag, designSystem);
+        return /*#__PURE__*/React.createElement(htmlTag, _objectSpread2({
+          style: mergedStyle,
+          className: _this2.mergeClassNames(className, allAttributes["class"])
+        }, _this2.cleanAttributes(allAttributes)), children || componentData.textContent);
+      };
+      SubComponent.displayName = componentName;
+      return SubComponent;
+    }
+    // Process both linked attributes and passed props
+  }, {
+    key: "processAllAttributes",
+    value: function processAllAttributes(props, linkedElement, htmlTag, designSystem) {
+      // Start with linked element attributes
+      var linkedAttributes = (linkedElement === null || linkedElement === void 0 ? void 0 : linkedElement.attributes) || {};
+      // Resolve CSS variables in linked attributes
+      var resolvedLinkedAttributes = this.resolveAttributesWithVariables(linkedAttributes, designSystem);
+      // Merge with passed props (props take precedence)
+      var mergedAttributes = _objectSpread2(_objectSpread2({}, resolvedLinkedAttributes), props);
+      // Clean and process the merged attributes
+      return this.processHtmlAttributes(mergedAttributes, htmlTag, designSystem);
+    }
+    // Resolve CSS variables in attribute values
+  }, {
+    key: "resolveAttributesWithVariables",
+    value: function resolveAttributesWithVariables(attributes, designSystem) {
+      var _this3 = this;
+      var resolved = {};
+      Object.entries(attributes).forEach(function (_ref3) {
+        var _ref4 = _slicedToArray(_ref3, 2),
+          key = _ref4[0],
+          value = _ref4[1];
+        if (typeof value === 'string') {
+          resolved[key] = _this3.resolveCssVariables(value, designSystem);
+        } else {
+          resolved[key] = value;
+        }
+      });
+      return resolved;
+    }
+    // Enhanced CSS variable resolution
+  }, {
+    key: "resolveCssVariables",
+    value: function resolveCssVariables(value, designSystem) {
+      return value.replace(/var\(--([^)]+)\)/g, function (match, varName) {
+        var variable = designSystem.variables["--".concat(varName)];
+        if (variable) {
+          return variable.value + (variable.unit || '');
+        }
+        return match; // Return original if variable not found
+      });
+    }
+    // Enhanced HTML attribute processing with type-specific validation
+  }, {
+    key: "processHtmlAttributes",
+    value: function processHtmlAttributes(attributes, htmlTag, designSystem) {
+      attributes.key;
+        attributes.ref;
+        attributes.children;
+        attributes.style;
+        attributes.className;
+        var cleanProps = _objectWithoutProperties(attributes, _excluded3$1);
+      var processed = _objectSpread2({}, cleanProps);
+      // Element-specific attribute processing
+      switch (htmlTag) {
+        case 'img':
+          this.processImageAttributes(processed);
+          break;
+        case 'input':
+          this.processInputAttributes(processed);
+          break;
+        case 'button':
+          this.processButtonAttributes(processed);
+          break;
+        case 'a':
+          this.processLinkAttributes(processed);
+          break;
+        case 'textarea':
+          this.processTextareaAttributes(processed);
+          break;
+        case 'video':
+          this.processVideoAttributes(processed);
+          break;
+        case 'audio':
+          this.processAudioAttributes(processed);
+          break;
+        case 'form':
+          this.processFormAttributes(processed);
+          break;
+        case 'select':
+          this.processSelectAttributes(processed);
+          break;
+        case 'svg':
+          this.processSvgAttributes(processed);
+          break;
+        case 'canvas':
+          this.processCanvasAttributes(processed);
+          break;
+      }
+      // Remove any undefined or null values
+      Object.keys(processed).forEach(function (key) {
+        if (processed[key] === undefined || processed[key] === null) {
+          delete processed[key];
+        }
+      });
+      return processed;
+    }
+    // Specific attribute processors for different HTML elements
+  }, {
+    key: "processInputAttributes",
+    value: function processInputAttributes(attrs) {
+      if (!attrs.type) {
+        var name = (attrs.name || '').toLowerCase();
+        if (name.includes('email')) attrs.type = 'email';else if (name.includes('password')) attrs.type = 'password';else if (name.includes('number') || name.includes('tel')) attrs.type = 'number';else if (name.includes('url')) attrs.type = 'url';else if (name.includes('search')) attrs.type = 'search';else if (name.includes('file')) attrs.type = 'file';else if (name.includes('checkbox')) attrs.type = 'checkbox';else if (name.includes('radio')) attrs.type = 'radio';else attrs.type = 'text';
+      }
+      // Add placeholder if missing for text-like inputs
+      if (!attrs.placeholder && ['text', 'email', 'password', 'search', 'url'].includes(attrs.type)) {
+        attrs.placeholder = "Enter ".concat(attrs.name || 'text');
+      }
+      // Ensure name attribute for form inputs
+      if (!attrs.name && attrs.id) {
+        attrs.name = attrs.id;
+      }
+    }
+  }, {
+    key: "processButtonAttributes",
+    value: function processButtonAttributes(attrs) {
+      if (!attrs.type) {
+        attrs.type = 'button';
+      }
+      // Add accessible default if no text content
+      if (!attrs['aria-label'] && !attrs.children) {
+        attrs['aria-label'] = 'Button';
+      }
+    }
+  }, {
+    key: "processImageAttributes",
+    value: function processImageAttributes(attrs) {
+      if (!attrs.alt) {
+        attrs.alt = 'Image';
+      }
+      if (!attrs.loading) {
+        attrs.loading = 'lazy';
+      }
+      // Handle missing or invalid src
+      if (attrs.src && !attrs.src.startsWith('http') && !attrs.src.startsWith('/') && !attrs.src.startsWith('data:')) {
+        // Provide a fallback placeholder image
+        attrs.src = "https://via.placeholder.com/200x150?text=Image+Placeholder";
+      }
+    }
+  }, {
+    key: "processLinkAttributes",
+    value: function processLinkAttributes(attrs) {
+      if (!attrs.href && attrs.onClick) {
+        attrs.href = '#';
+      }
+      if (attrs.target === '_blank' && !attrs.rel) {
+        attrs.rel = 'noopener noreferrer';
+      }
+      // Ensure href has a value
+      if (!attrs.href) {
+        attrs.href = '#';
+      }
+    }
+  }, {
+    key: "processTextareaAttributes",
+    value: function processTextareaAttributes(attrs) {
+      if (!attrs.rows) attrs.rows = '4';
+      if (!attrs.cols) attrs.cols = '50';
+      if (!attrs.placeholder) {
+        attrs.placeholder = 'Enter your text here...';
+      }
+    }
+  }, {
+    key: "processVideoAttributes",
+    value: function processVideoAttributes(attrs) {
+      if (!attrs.controls) attrs.controls = true;
+      if (!attrs.preload) attrs.preload = 'metadata';
+    }
+  }, {
+    key: "processAudioAttributes",
+    value: function processAudioAttributes(attrs) {
+      if (!attrs.controls) attrs.controls = true;
+      if (!attrs.preload) attrs.preload = 'metadata';
+    }
+  }, {
+    key: "processFormAttributes",
+    value: function processFormAttributes(attrs) {
+      if (!attrs.method) attrs.method = 'post';
+      if (!attrs.action) attrs.action = '#';
+    }
+  }, {
+    key: "processSelectAttributes",
+    value: function processSelectAttributes(attrs) {
+      if (!attrs.name) attrs.name = 'select-field';
+    }
+  }, {
+    key: "processSvgAttributes",
+    value: function processSvgAttributes(attrs) {
+      if (!attrs.viewBox && !attrs.width && !attrs.height) {
+        attrs.viewBox = '0 0 24 24';
+      }
+      if (!attrs.role) {
+        attrs.role = 'img';
+      }
+      if (!attrs['aria-hidden'] && !attrs['aria-label']) {
+        attrs['aria-hidden'] = 'true';
+      }
+    }
+  }, {
+    key: "processCanvasAttributes",
+    value: function processCanvasAttributes(attrs) {
+      if (!attrs.width) attrs.width = '300';
+      if (!attrs.height) attrs.height = '150';
+    }
+    // Helper to merge class names
+  }, {
+    key: "mergeClassNames",
+    value: function mergeClassNames() {
+      for (var _len = arguments.length, classes = new Array(_len), _key = 0; _key < _len; _key++) {
+        classes[_key] = arguments[_key];
+      }
+      return classes.filter(Boolean).join(' ').trim();
+    }
+    // Helper to clean attributes for React
+  }, {
+    key: "cleanAttributes",
+    value: function cleanAttributes(attrs) {
+      var cleaned = _objectSpread2({}, attrs);
+      // Remove class if it's empty after processing
+      if (cleaned["class"] === '') {
+        delete cleaned["class"];
+      }
+      // Convert boolean strings to actual booleans
+      Object.keys(cleaned).forEach(function (key) {
+        if (cleaned[key] === 'true') cleaned[key] = true;
+        if (cleaned[key] === 'false') cleaned[key] = false;
+        if (cleaned[key] === '') delete cleaned[key]; // Remove empty strings
+      });
+      // Remove React-specific props that shouldn't be passed to DOM
+      var reactProps = ['key', 'ref', 'children', 'style', 'className'];
+      reactProps.forEach(function (prop) {
+        delete cleaned[prop];
+      });
+      return cleaned;
+    }
+    // Determine HTML tag based on linkedElement or component name
+  }, {
+    key: "determineHtmlTag",
+    value: function determineHtmlTag(componentData, componentName) {
+      var _componentData$linked;
+      if ((_componentData$linked = componentData.linkedElement) !== null && _componentData$linked !== void 0 && _componentData$linked.htmlTag) {
+        return componentData.linkedElement.htmlTag;
+      }
+      var lowerName = componentName.toLowerCase();
+      // Comprehensive tag inference
+      if (lowerName.includes('input') || lowerName.includes('textfield') || lowerName.includes('textinput')) return 'input';
+      if (lowerName.includes('textarea') || lowerName.includes('textbox')) return 'textarea';
+      if (lowerName.includes('button') || lowerName.includes('btn')) return 'button';
+      if (lowerName.includes('form')) return 'form';
+      if (lowerName.includes('img') || lowerName.includes('image')) return 'img';
+      if (lowerName.includes('link') || lowerName.includes('anchor')) return 'a';
+      if (lowerName.includes('video')) return 'video';
+      if (lowerName.includes('audio')) return 'audio';
+      if (lowerName.includes('select') || lowerName.includes('dropdown')) return 'select';
+      if (lowerName.includes('list') || lowerName.includes('ul')) return 'ul';
+      if (lowerName.includes('listitem') || lowerName.includes('li')) return 'li';
+      if (lowerName.includes('table')) return 'table';
+      if (lowerName.includes('row') || lowerName.includes('tr')) return 'tr';
+      if (lowerName.includes('cell') || lowerName.includes('td')) return 'td';
+      if (lowerName.includes('header') || lowerName.includes('th')) return 'th';
+      if (lowerName.includes('heading') || lowerName.includes('h1')) return 'h1';
+      if (lowerName.includes('h2')) return 'h2';
+      if (lowerName.includes('h3')) return 'h3';
+      if (lowerName.includes('h4')) return 'h4';
+      if (lowerName.includes('h5')) return 'h5';
+      if (lowerName.includes('h6')) return 'h6';
+      if (lowerName.includes('paragraph') || lowerName.includes('p')) return 'p';
+      if (lowerName.includes('span')) return 'span';
+      if (lowerName.includes('div')) return 'div';
+      if (lowerName.includes('section')) return 'section';
+      if (lowerName.includes('article')) return 'article';
+      if (lowerName.includes('header')) return 'header';
+      if (lowerName.includes('footer')) return 'footer';
+      if (lowerName.includes('nav')) return 'nav';
+      if (lowerName.includes('main')) return 'main';
+      if (lowerName.includes('aside')) return 'aside';
+      if (lowerName.includes('svg')) return 'svg';
+      if (lowerName.includes('canvas')) return 'canvas';
+      return 'div'; // Default fallback
+    }
+    // Resolve component styles from properties and design system variables
+  }, {
+    key: "resolveComponentStyles",
+    value: function resolveComponentStyles(componentData, designSystem) {
+      var _this4 = this;
+      var styles = {};
+      if (componentData.properties) {
+        Object.entries(componentData.properties).forEach(function (_ref5) {
+          var _ref6 = _slicedToArray(_ref5, 2),
+            prop = _ref6[0],
+            value = _ref6[1];
+          var cssProperty = _this4.kebabToCamelCase(prop);
+          var resolvedValue = value.value;
+          // Resolve CSS variables
+          if (typeof resolvedValue === 'string' && resolvedValue.startsWith('var(')) {
+            var _resolvedValue$match;
+            var varName = (_resolvedValue$match = resolvedValue.match(/var\((--[^)]+)\)/)) === null || _resolvedValue$match === void 0 ? void 0 : _resolvedValue$match[1];
+            if (varName && designSystem.variables[varName]) {
+              var varData = designSystem.variables[varName];
+              resolvedValue = varData.value + (varData.unit || '');
+            }
+          }
+          // Add unit if value is numeric and unit is specified
+          if (value.unit && /^-?\d*\.?\d+$/.test(resolvedValue)) {
+            resolvedValue = resolvedValue + value.unit;
+          }
+          // Handle special CSS properties
+          if (cssProperty === 'boxShadow' && resolvedValue.includes('var(')) {
+            // Resolve shadow variables
+            resolvedValue = _this4.resolveCssVariables(resolvedValue, designSystem);
+          }
+          // Set the style property
+          styles[cssProperty] = resolvedValue;
+        });
+      }
+      return styles;
+    }
+    // Convert kebab-case to camelCase for CSS properties
+  }, {
+    key: "kebabToCamelCase",
+    value: function kebabToCamelCase(str) {
+      return str.replace(/-([a-z])/g, function (g) {
+        return g[1].toUpperCase();
+      });
+    }
+    // Convert camelCase to kebab-case (useful for HTML attributes)
+  }, {
+    key: "camelToKebabCase",
+    value: function camelToKebabCase(str) {
+      return str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
+    }
+    // Validate that the component can be safely rendered
+  }, {
+    key: "validateComponent",
+    value: function validateComponent(componentData) {
+      var errors = [];
+      // Check for required linked element attributes
+      if (componentData.linkedElement) {
+        var _componentData$linked2 = componentData.linkedElement,
+          htmlTag = _componentData$linked2.htmlTag,
+          attributes = _componentData$linked2.attributes,
+          requiredAttributes = _componentData$linked2.requiredAttributes;
+        if (requiredAttributes) {
+          requiredAttributes.forEach(function (attr) {
+            if (!attributes || !attributes[attr]) {
+              errors.push("Required attribute \"".concat(attr, "\" is missing for <").concat(htmlTag, "> element"));
+            }
+          });
+        }
+        // Validate specific element types
+        if (htmlTag === 'img' && attributes) {
+          if (!attributes.src) {
+            errors.push('Image element requires "src" attribute');
+          }
+          if (!attributes.alt) {
+            errors.push('Image element should have "alt" attribute for accessibility');
+          }
+        }
+        if (htmlTag === 'a' && attributes && !attributes.href) {
+          errors.push('Anchor element requires "href" attribute');
+        }
+      }
+      // Validate that properties have valid values
+      if (componentData.properties) {
+        Object.entries(componentData.properties).forEach(function (_ref7) {
+          var _ref8 = _slicedToArray(_ref7, 2),
+            prop = _ref8[0],
+            value = _ref8[1];
+          if (!value.value && value.value !== '') {
+            errors.push("Property \"".concat(prop, "\" has invalid value"));
+          }
+        });
+      }
+      return {
+        isValid: errors.length === 0,
+        errors: errors
+      };
+    }
+    // Create a debug version of the component that shows validation errors
+  }, {
+    key: "createDebugComponent",
+    value: function createDebugComponent(componentName, componentData, designSystem) {
+      var _this5 = this;
+      var validation = this.validateComponent(componentData);
+      var Component = function Component(props) {
+        if (!validation.isValid) {
+          console.warn("Component \"".concat(componentName, "\" validation errors:"), validation.errors);
+          // Return a debug element that shows errors in development
+          if (process.env.NODE_ENV === 'development') {
+            return /*#__PURE__*/React.createElement('div', {
+              style: {
+                border: '2px solid red',
+                padding: '8px',
+                margin: '4px',
+                backgroundColor: '#fff0f0'
+              },
+              title: validation.errors.join('\n')
+            }, "[DEBUG: ".concat(componentName, "] ").concat(validation.errors.join(', ')));
+          }
+        }
+        // Use the normal component factory for production
+        var NormalComponent = _this5.createComponent(componentName, componentData, designSystem);
+        return /*#__PURE__*/React.createElement(NormalComponent, props);
+      };
+      Component.displayName = "Debug".concat(componentName);
+      return Component;
+    }
+  }]);
+}();
+
+var ComponentRegistryService = /*#__PURE__*/function () {
+  function ComponentRegistryService() {
+    _classCallCheck(this, ComponentRegistryService);
+    this.registry = {};
+    this.listeners = [];
+    this.originalToPascalMap = new Map();
+  }
+  // UNIVERSAL PascalCase conversion - handles ALL component names
+  return _createClass(ComponentRegistryService, [{
+    key: "formatComponentName",
+    value: function formatComponentName(name) {
+      if (!name || typeof name !== 'string') {
+        console.warn("\u26A0\uFE0F Invalid component name:", name);
+        return "UnknownComponent";
+      }
+      console.log("\uD83D\uDD0D formatComponentName INPUT: \"".concat(name, "\""));
+      // Remove any file extensions
+      var cleanName = name.replace(/\.[^/.]+$/, "");
+      // Handle various naming conventions and convert to PascalCase
+      var pascalCaseName = cleanName
+      // Split by common separators: space, hyphen, underscore, dot, slash, camelCase boundary
+      .split(/[\s\-_\.\/]+|(?=[A-Z])/)
+      // Remove empty strings and filter out non-alphanumeric parts
+      .filter(function (part) {
+        return part.length > 0 && /[a-zA-Z0-9]/.test(part);
+      })
+      // Capitalize the first letter of each part
+      .map(function (part) {
+        // Handle edge cases like "2xl", "3xs" etc.
+        if (/^\d+[a-zA-Z]+$/.test(part)) {
+          return part.charAt(0) + part.slice(1).charAt(0).toUpperCase() + part.slice(2);
+        }
+        return part.charAt(0).toUpperCase() + part.slice(1).toLowerCase();
+      }).join("");
+      // Final validation and cleanup
+      var result = pascalCaseName;
+      // Ensure it starts with a letter (not a number)
+      if (/^\d/.test(result)) {
+        result = "Component" + result;
+      }
+      // Remove any remaining non-alphanumeric characters (except letters and numbers)
+      result = result.replace(/[^a-zA-Z0-9]/g, "");
+      // If result is empty, provide a fallback
+      if (!result) {
+        result = "UnknownComponent";
+      }
+      console.log("\uD83D\uDCDD FINAL CONVERSION: \"".concat(name, "\" \u2192 \"").concat(result, "\""));
+      return result;
+    }
+    // Test method to verify PascalCase conversion
+  }, {
+    key: "testPascalCaseConversion",
+    value: function testPascalCaseConversion() {
+      var _this = this;
+      var testCases = ["header", "main-content", "user_profile", "buttonPrimary", "form.input.email", "card-body", "nav menu", "footer-bottom", "3xs-text", "2xl-container", "userProfileCard", "roboform", "mailcard", "miscbutton", "random-component_name", "SomeAlreadyPascalCase", "multiple-words-component", "path/to/component", "component.v2", "component_v3_final"];
+      console.log("🧪 TESTING PASCAL CASE CONVERSION:");
+      testCases.forEach(function (testCase) {
+        var result = _this.formatComponentName(testCase);
+        console.log("  \"".concat(testCase, "\" \u2192 \"").concat(result, "\""));
+      });
+    }
+    // Register a new component dynamically
+  }, {
+    key: "registerComponent",
+    value: function registerComponent(componentName, componentData, designSystem) {
+      var _this2 = this;
+      console.log("\uD83D\uDD04 REGISTER COMPONENT CALLED with: \"".concat(componentName, "\""));
+      // Use PascalCase for the main component name
+      var pascalCaseName = this.formatComponentName(componentName);
+      // Store mapping for debugging and reverse lookup
+      this.originalToPascalMap.set(componentName, pascalCaseName);
+      console.log("\uD83D\uDCDD MAPPING STORED: \"".concat(componentName, "\" \u2192 \"").concat(pascalCaseName, "\""));
+      // Create the main component
+      var MainComponent = StrataComponentFactory.createComponent(pascalCaseName, componentData, designSystem);
+      // Create sub-components recursively with proper PascalCase
+      if (componentData.children) {
+        Object.entries(componentData.children).forEach(function (_ref) {
+          var _ref2 = _slicedToArray(_ref, 2),
+            childName = _ref2[0],
+            childData = _ref2[1];
+          var childComponentName = _this2.formatComponentName(childName);
+          console.log("\uD83D\uDCDD Nested conversion: \"".concat(childName, "\" \u2192 \"").concat(childComponentName, "\""));
+          // Store nested component mapping
+          _this2.originalToPascalMap.set("".concat(componentName, ".").concat(childName), "".concat(pascalCaseName, ".").concat(childComponentName));
+          MainComponent[childComponentName] = StrataComponentFactory.createSubComponent(childComponentName, childData, designSystem);
+          // Recursively add nested sub-components
+          _this2.addNestedComponents(MainComponent[childComponentName], childData, designSystem, childComponentName, "".concat(componentName, ".").concat(childName));
+        });
+      }
+      // Register with PascalCase name only for cleaner API
+      this.registry[pascalCaseName] = MainComponent;
+      console.log("\u2705 Registered: \"".concat(pascalCaseName, "\""));
+      console.log("\uD83D\uDCCA Current registry:", Object.keys(this.registry));
+      this.notifyListeners();
+    }
+    // Recursively add nested components with mapping
+  }, {
+    key: "addNestedComponents",
+    value: function addNestedComponents(parentComponent, componentData, designSystem, parentPascalPath, parentOriginalPath) {
+      var _this3 = this;
+      if (componentData.children) {
+        Object.entries(componentData.children).forEach(function (_ref3) {
+          var _ref4 = _slicedToArray(_ref3, 2),
+            childName = _ref4[0],
+            childData = _ref4[1];
+          var childComponentName = _this3.formatComponentName(childName);
+          var fullPascalPath = "".concat(parentPascalPath, ".").concat(childComponentName);
+          var fullOriginalPath = "".concat(parentOriginalPath, ".").concat(childName);
+          // Store mapping for nested components
+          _this3.originalToPascalMap.set(fullOriginalPath, fullPascalPath);
+          parentComponent[childComponentName] = StrataComponentFactory.createSubComponent(childComponentName, childData, designSystem);
+          // Continue recursion
+          _this3.addNestedComponents(parentComponent[childComponentName], childData, designSystem, fullPascalPath, fullOriginalPath);
+        });
+      }
+    }
+    // Get all registered components
+  }, {
+    key: "getRegistry",
+    value: function getRegistry() {
+      return _objectSpread2({}, this.registry);
+    }
+    // Get the mapping for debugging
+  }, {
+    key: "getComponentMapping",
+    value: function getComponentMapping() {
+      return new Map(this.originalToPascalMap);
+    }
+    // Check if component exists (supports both original and PascalCase names)
+  }, {
+    key: "hasComponent",
+    value: function hasComponent(componentName) {
+      // Try direct PascalCase first
+      if (componentName in this.registry) {
+        return true;
+      }
+      // Try to convert and check
+      var pascalName = this.formatComponentName(componentName);
+      return pascalName in this.registry;
+    }
+    // Get component by name (supports both original and PascalCase)
+  }, {
+    key: "getComponent",
+    value: function getComponent(componentName) {
+      // Try direct access first
+      if (this.registry[componentName]) {
+        return this.registry[componentName];
+      }
+      // Try converted name
+      var pascalName = this.formatComponentName(componentName);
+      return this.registry[pascalName] || null;
+    }
+    // Clear all components and re-register with new design system
+  }, {
+    key: "syncWithDesignSystem",
+    value: function syncWithDesignSystem(designSystem) {
+      var _this4 = this;
+      console.log("🔄 SYNC WITH DESIGN SYSTEM CALLED");
+      console.log("🔍 Design system components:", Object.keys(designSystem.components));
+      // Test PascalCase conversion before proceeding
+      this.testPascalCaseConversion();
+      // Clear existing registry and mappings
+      this.registry = {};
+      this.originalToPascalMap.clear();
+      // Register all components
+      Object.entries(designSystem.components).forEach(function (_ref5) {
+        var _ref6 = _slicedToArray(_ref5, 2),
+          componentName = _ref6[0],
+          componentData = _ref6[1];
+        console.log("\uD83D\uDD04 Processing component from design system: \"".concat(componentName, "\""));
+        _this4.registerComponent(componentName, componentData, designSystem);
+      });
+      console.log("✅ Sync completed. Final registry:", Object.keys(this.registry));
+      console.log("🗺️ Component mapping:", Array.from(this.originalToPascalMap.entries()));
+      this.notifyListeners();
+    }
+    // Subscribe to registry changes
+  }, {
+    key: "subscribe",
+    value: function subscribe(listener) {
+      var _this5 = this;
+      this.listeners.push(listener);
+      return function () {
+        _this5.listeners = _this5.listeners.filter(function (l) {
+          return l !== listener;
+        });
+      };
+    }
+  }, {
+    key: "notifyListeners",
+    value: function notifyListeners() {
+      var currentRegistry = this.getRegistry();
+      console.log("📋 FINAL REGISTRY STATE:", Object.keys(currentRegistry));
+      this.listeners.forEach(function (listener) {
+        return listener(currentRegistry);
+      });
+    }
+    // Clear all components (useful for testing)
+  }, {
+    key: "clear",
+    value: function clear() {
+      this.registry = {};
+      this.originalToPascalMap.clear();
+      this.notifyListeners();
+    }
+    // Utility method to get PascalCase name without registering
+  }, {
+    key: "getPascalCaseName",
+    value: function getPascalCaseName(originalName) {
+      return this.formatComponentName(originalName);
+    }
+  }]);
+}();
+var strataRegistry = new ComponentRegistryService();
+// Optionally run test when module loads in development, behind explicit debug flag
+var shouldRunPascalCaseTest = typeof process !== "undefined" && process.env && process.env.NODE_ENV === "development" && process.env.STRATA_DEBUG_PASCAL_CASE_TEST === "true";
+if (shouldRunPascalCaseTest) {
+  setTimeout(function () {
+    strataRegistry.testPascalCaseConversion();
+  }, 1000);
+}
+
+var StrataContext = /*#__PURE__*/createContext(undefined);
+var useStrata = function useStrata() {
+  var context = useContext(StrataContext);
+  if (!context) {
+    throw new Error("useStrata must be used within a StrataProvider");
+  }
+  return context;
+};
+var StrataProvider = function StrataProvider(_ref) {
+  var _designSystem$variabl, _designSystem$variabl2, _designSystem$variabl3, _designSystem$variabl4, _designSystem$variabl5, _designSystem$variabl6, _designSystem$variabl7, _designSystem$variabl8, _designSystem$variabl9, _designSystem$variabl0, _designSystem$variabl1, _designSystem$variabl10, _designSystem$variabl11, _designSystem$variabl12, _designSystem$variabl13, _designSystem$variabl14, _designSystem$variabl15, _designSystem$variabl16, _designSystem$variabl17, _designSystem$variabl18, _designSystem$variabl19, _designSystem$variabl20, _designSystem$variabl21, _designSystem$variabl22, _designSystem$variabl23, _designSystem$variabl24;
+  var children = _ref.children,
+    initialData = _ref.initialData,
+    userDesignSystem = _ref.userDesignSystem,
+    _ref$syncEnabled = _ref.syncEnabled,
+    syncEnabled = _ref$syncEnabled === void 0 ? false : _ref$syncEnabled,
+    _ref$syncUrl = _ref.syncUrl,
+    syncUrl = _ref$syncUrl === void 0 ? "http://localhost:4000" : _ref$syncUrl,
+    _ref$syncInterval = _ref.syncInterval,
+    syncInterval = _ref$syncInterval === void 0 ? 3000 : _ref$syncInterval,
+    syncToken = _ref.syncToken,
+    snapshotCdnBase = _ref.snapshotCdnBase,
+    projectId = _ref.projectId,
+    onSyncError = _ref.onSyncError,
+    onSyncSuccess = _ref.onSyncSuccess;
+  var _useState = useState(userDesignSystem || initialData || {
+      variables: {},
+      components: {},
+      custom: {
+        variables: {},
+        components: {}
+      }
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    designSystem = _useState2[0],
+    setDesignSystem = _useState2[1];
+  var _useState3 = useState("idle"),
+    _useState4 = _slicedToArray(_useState3, 2),
+    syncStatus = _useState4[0],
+    setSyncStatus = _useState4[1];
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    lastSynced = _useState6[0],
+    setLastSynced = _useState6[1];
+  var _useState7 = useState(0),
+    _useState8 = _slicedToArray(_useState7, 2),
+    syncVersion = _useState8[0],
+    setSyncVersion = _useState8[1];
+  // Ref that tracks the JSON string of the last successfully synced payload so
+  // that syncDesignSystem does not need to close over the designSystem state
+  // value. This keeps the callback stable and prevents the polling interval
+  // from being continuously reset after each successful sync.
+  var lastSyncedStringRef = useRef(null);
+  // Derive the CDN snapshot URL once — used in both syncDesignSystem and the
+  // polling effect so the condition is computed in a single place.
+  var snapshotUrl = useMemo(function () {
+    return snapshotCdnBase && projectId ? "".concat(snapshotCdnBase, "/snapshots/").concat(projectId, "/strata.json") : null;
+  }, [snapshotCdnBase, projectId]);
+  var syncDesignSystem = useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+    var headers, remoteData, res, data, _yield$Promise$all, _yield$Promise$all2, variablesRes, componentsRes, customRes, _yield$Promise$all3, _yield$Promise$all4, variables, components, custom, newDataString, _t;
+    return _regenerator().w(function (_context) {
+      while (1) switch (_context.p = _context.n) {
+        case 0:
+          if (!(!syncEnabled || !snapshotUrl && !syncUrl)) {
+            _context.n = 1;
+            break;
+          }
+          return _context.a(2);
+        case 1:
+          setSyncStatus("syncing");
+          _context.p = 2;
+          console.log("🔄 Starting design system sync...");
+          headers = syncToken ? {
+            Authorization: "Bearer ".concat(syncToken)
+          } : {};
+          if (!snapshotUrl) {
+            _context.n = 8;
+            break;
+          }
+          _context.n = 3;
+          return fetch(snapshotUrl, {
+            headers: headers
+          });
+        case 3:
+          res = _context.v;
+          if (!(!res.ok && res.status >= 400 && res.status < 500)) {
+            _context.n = 4;
+            break;
+          }
+          setSyncStatus("error");
+          onSyncError === null || onSyncError === void 0 || onSyncError({
+            code: res.status,
+            message: "CDN fetch failed: ".concat(res.status, " ").concat(res.statusText),
+            source: "cdn"
+          });
+          return _context.a(2);
+        case 4:
+          if (res.ok) {
+            _context.n = 5;
+            break;
+          }
+          throw new Error("Snapshot fetch failed: ".concat(res.status));
+        case 5:
+          _context.n = 6;
+          return res.json();
+        case 6:
+          data = _context.v;
+          if (!(!data || _typeof(data) !== "object" || Array.isArray(data) || _typeof(data.variables) !== "object" || data.variables === null || Array.isArray(data.variables) || _typeof(data.components) !== "object" || data.components === null || Array.isArray(data.components))) {
+            _context.n = 7;
+            break;
+          }
+          console.warn("[strata] Invalid snapshot shape received from CDN — skipping update.");
+          setSyncStatus("error");
+          onSyncError === null || onSyncError === void 0 || onSyncError({
+            code: 0,
+            message: "Invalid snapshot shape: missing variables or components",
+            source: "cdn"
+          });
+          return _context.a(2);
+        case 7:
+          remoteData = {
+            variables: data.variables,
+            components: data.components,
+            custom: data.custom || {
+              variables: {},
+              components: {}
+            }
+          };
+          _context.n = 14;
+          break;
+        case 8:
+          _context.n = 9;
+          return Promise.all([fetch("".concat(syncUrl, "/variables"), {
+            headers: headers
+          }), fetch("".concat(syncUrl, "/components"), {
+            headers: headers
+          }), fetch("".concat(syncUrl, "/custom"), {
+            headers: headers
+          })]);
+        case 9:
+          _yield$Promise$all = _context.v;
+          _yield$Promise$all2 = _slicedToArray(_yield$Promise$all, 3);
+          variablesRes = _yield$Promise$all2[0];
+          componentsRes = _yield$Promise$all2[1];
+          customRes = _yield$Promise$all2[2];
+          if (variablesRes.ok) {
+            _context.n = 10;
+            break;
+          }
+          throw new Error("Variables fetch failed: ".concat(variablesRes.status));
+        case 10:
+          if (componentsRes.ok) {
+            _context.n = 11;
+            break;
+          }
+          throw new Error("Components fetch failed: ".concat(componentsRes.status));
+        case 11:
+          if (customRes.ok) {
+            _context.n = 12;
+            break;
+          }
+          throw new Error("Custom fetch failed: ".concat(customRes.status));
+        case 12:
+          _context.n = 13;
+          return Promise.all([variablesRes.json(), componentsRes.json(), customRes.json()]);
+        case 13:
+          _yield$Promise$all3 = _context.v;
+          _yield$Promise$all4 = _slicedToArray(_yield$Promise$all3, 3);
+          variables = _yield$Promise$all4[0];
+          components = _yield$Promise$all4[1];
+          custom = _yield$Promise$all4[2];
+          remoteData = {
+            variables: variables || {},
+            components: components || {},
+            custom: custom || {
+              variables: {},
+              components: {}
+            }
+          };
+        case 14:
+          // Only update if data actually changed (compared against the last synced
+          // snapshot via ref, so this callback stays stable across renders).
+          newDataString = JSON.stringify(remoteData);
+          if (lastSyncedStringRef.current !== newDataString) {
+            console.log("🔄 Design system data changed, updating...");
+            lastSyncedStringRef.current = newDataString;
+            setDesignSystem(remoteData);
+            Object.entries(remoteData.components).forEach(function (_ref3) {
+              var _ref4 = _slicedToArray(_ref3, 2),
+                componentName = _ref4[0],
+                componentData = _ref4[1];
+              if (!strataRegistry.hasComponent(componentName)) {
+                strataRegistry.registerComponent(componentName, componentData, remoteData);
+              }
+            });
+            setSyncVersion(function (prev) {
+              return prev + 1;
+            });
+            setSyncStatus("success");
+            setLastSynced(new Date());
+            onSyncSuccess === null || onSyncSuccess === void 0 || onSyncSuccess(remoteData);
+            console.log("✅ Design system synced successfully");
+            console.log("📊 Components available:", Object.keys(remoteData.components));
+            console.log("🎨 Variables available:", Object.keys(remoteData.variables));
+          } else {
+            setSyncStatus("idle");
+            console.log("⚡ Design system already up to date");
+          }
+          _context.n = 16;
+          break;
+        case 15:
+          _context.p = 15;
+          _t = _context.v;
+          console.error("❌ Sync failed:", _t);
+          setSyncStatus("error");
+          onSyncError === null || onSyncError === void 0 || onSyncError({
+            code: 0,
+            message: _t instanceof Error ? _t.message : String(_t),
+            source: snapshotUrl ? "cdn" : "sync"
+          });
+        case 16:
+          return _context.a(2);
+      }
+    }, _callee, null, [[2, 15]]);
+  })), [syncEnabled, syncUrl, syncToken, snapshotUrl, onSyncSuccess, onSyncError]);
+  // Force sync function for manual triggering
+  var forceSync = useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
+    return _regenerator().w(function (_context2) {
+      while (1) switch (_context2.n) {
+        case 0:
+          _context2.n = 1;
+          return syncDesignSystem();
+        case 1:
+          return _context2.a(2);
+      }
+    }, _callee2);
+  })), [syncDesignSystem]);
+  // Polling for real-time updates
+  useEffect(function () {
+    if (!syncEnabled || !snapshotUrl && !syncUrl) return;
+    console.log("🔄 Starting sync polling...");
+    var interval = setInterval(syncDesignSystem, syncInterval);
+    // Initial sync
+    syncDesignSystem();
+    return function () {
+      console.log("🔄 Stopping sync polling...");
+      clearInterval(interval);
+    };
+  }, [syncEnabled, syncUrl, snapshotUrl, syncInterval, syncDesignSystem]);
+  // Convert design tokens to Chakra UI theme with enhanced resolution
+  var theme = extendTheme({
+    colors: Object.entries(designSystem.variables).reduce(function (acc, _ref6) {
+      var _ref7 = _slicedToArray(_ref6, 2),
+        key = _ref7[0],
+        value = _ref7[1];
+      if (value.type === "color" && key.startsWith("--")) {
+        var colorName = key.replace("--", "").replace(/-color/g, "");
+        acc[colorName] = value.value;
+      }
+      return acc;
+    }, {}),
+    fonts: {
+      body: ((_designSystem$variabl = designSystem.variables["--font-family-sans"]) === null || _designSystem$variabl === void 0 ? void 0 : _designSystem$variabl.value) || "system-ui, sans-serif",
+      heading: ((_designSystem$variabl2 = designSystem.variables["--font-family-sans"]) === null || _designSystem$variabl2 === void 0 ? void 0 : _designSystem$variabl2.value) || "system-ui, sans-serif",
+      mono: ((_designSystem$variabl3 = designSystem.variables["--font-family-mono"]) === null || _designSystem$variabl3 === void 0 ? void 0 : _designSystem$variabl3.value) || "monospace"
+    },
+    fontSizes: {
+      xs: ((_designSystem$variabl4 = designSystem.variables["--font-size-xs"]) === null || _designSystem$variabl4 === void 0 ? void 0 : _designSystem$variabl4.value) || "0.75rem",
+      sm: ((_designSystem$variabl5 = designSystem.variables["--font-size-sm"]) === null || _designSystem$variabl5 === void 0 ? void 0 : _designSystem$variabl5.value) || "0.875rem",
+      md: ((_designSystem$variabl6 = designSystem.variables["--font-size-base"]) === null || _designSystem$variabl6 === void 0 ? void 0 : _designSystem$variabl6.value) || "1rem",
+      lg: ((_designSystem$variabl7 = designSystem.variables["--font-size-lg"]) === null || _designSystem$variabl7 === void 0 ? void 0 : _designSystem$variabl7.value) || "1.125rem",
+      xl: ((_designSystem$variabl8 = designSystem.variables["--text-xl"]) === null || _designSystem$variabl8 === void 0 ? void 0 : _designSystem$variabl8.value) || "1.25rem",
+      "2xl": ((_designSystem$variabl9 = designSystem.variables["--text-2xl"]) === null || _designSystem$variabl9 === void 0 ? void 0 : _designSystem$variabl9.value) || "1.5rem"
+    },
+    space: {
+      1: ((_designSystem$variabl0 = designSystem.variables["--spacing-1"]) === null || _designSystem$variabl0 === void 0 ? void 0 : _designSystem$variabl0.value) || "0.25rem",
+      2: ((_designSystem$variabl1 = designSystem.variables["--spacing-2"]) === null || _designSystem$variabl1 === void 0 ? void 0 : _designSystem$variabl1.value) || "0.5rem",
+      3: ((_designSystem$variabl10 = designSystem.variables["--spacing-3"]) === null || _designSystem$variabl10 === void 0 ? void 0 : _designSystem$variabl10.value) || "0.75rem",
+      4: ((_designSystem$variabl11 = designSystem.variables["--spacing-4"]) === null || _designSystem$variabl11 === void 0 ? void 0 : _designSystem$variabl11.value) || "1rem",
+      6: ((_designSystem$variabl12 = designSystem.variables["--spacing-6"]) === null || _designSystem$variabl12 === void 0 ? void 0 : _designSystem$variabl12.value) || "1.5rem",
+      8: ((_designSystem$variabl13 = designSystem.variables["--spacing-8"]) === null || _designSystem$variabl13 === void 0 ? void 0 : _designSystem$variabl13.value) || "2rem"
+    },
+    radii: {
+      none: "0",
+      sm: ((_designSystem$variabl14 = designSystem.variables["--border-radius-sm"]) === null || _designSystem$variabl14 === void 0 ? void 0 : _designSystem$variabl14.value) || "0.125rem",
+      md: ((_designSystem$variabl15 = designSystem.variables["--border-radius-md"]) === null || _designSystem$variabl15 === void 0 ? void 0 : _designSystem$variabl15.value) || "0.375rem",
+      lg: ((_designSystem$variabl16 = designSystem.variables["--border-radius-lg"]) === null || _designSystem$variabl16 === void 0 ? void 0 : _designSystem$variabl16.value) || "0.5rem",
+      xl: ((_designSystem$variabl17 = designSystem.variables["--border-radius-xl"]) === null || _designSystem$variabl17 === void 0 ? void 0 : _designSystem$variabl17.value) || "0.75rem",
+      "2xl": ((_designSystem$variabl18 = designSystem.variables["--border-radius-2xl"]) === null || _designSystem$variabl18 === void 0 ? void 0 : _designSystem$variabl18.value) || "1rem",
+      "3xl": ((_designSystem$variabl19 = designSystem.variables["--border-radius-3xl"]) === null || _designSystem$variabl19 === void 0 ? void 0 : _designSystem$variabl19.value) || "1.5rem",
+      full: ((_designSystem$variabl20 = designSystem.variables["--border-radius-full"]) === null || _designSystem$variabl20 === void 0 ? void 0 : _designSystem$variabl20.value) || "9999px"
+    },
+    shadows: {
+      sm: ((_designSystem$variabl21 = designSystem.variables["--shadow-sm"]) === null || _designSystem$variabl21 === void 0 ? void 0 : _designSystem$variabl21.value) || "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+      md: ((_designSystem$variabl22 = designSystem.variables["--shadow-md"]) === null || _designSystem$variabl22 === void 0 ? void 0 : _designSystem$variabl22.value) || "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
+      lg: ((_designSystem$variabl23 = designSystem.variables["--shadow-lg"]) === null || _designSystem$variabl23 === void 0 ? void 0 : _designSystem$variabl23.value) || "0 10px 15px -3px rgba(0, 0, 0, 0.1)",
+      xl: ((_designSystem$variabl24 = designSystem.variables["--shadow-xl"]) === null || _designSystem$variabl24 === void 0 ? void 0 : _designSystem$variabl24.value) || "0 20px 25px -5px rgba(0, 0, 0, 0.1)"
+    }
+  });
+  var updateDesignSystem = function updateDesignSystem(newData) {
+    setDesignSystem(newData);
+    setSyncVersion(function (prev) {
+      return prev + 1;
+    });
+    if (!syncEnabled) {
+      localStorage.setItem("designSystemData", JSON.stringify(newData));
+    }
+  };
+  var contextValue = {
+    designSystem: designSystem,
+    updateDesignSystem: updateDesignSystem,
+    syncStatus: syncStatus,
+    lastSynced: lastSynced,
+    forceSync: forceSync,
+    syncVersion: syncVersion,
+    syncUrl: syncUrl,
+    syncEnabled: syncEnabled,
+    syncInterval: syncInterval,
+    syncToken: syncToken,
+    snapshotCdnBase: snapshotCdnBase,
+    projectId: projectId
+  };
+  return jsx(StrataContext.Provider, {
+    value: contextValue,
+    children: jsx(ChakraProvider, {
+      theme: theme,
+      cssVarsRoot: ":root",
+      children: children
+    })
+  });
+};
+
+var useComponentData = function useComponentData() {
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var _options$componentNam = options.componentName,
+    componentName = _options$componentNam === void 0 ? 'card' : _options$componentNam,
+    _options$fallbackToDe = options.fallbackToDefault,
+    fallbackToDefault = _options$fallbackToDe === void 0 ? true : _options$fallbackToDe;
+  var _useStrata = useStrata(),
+    designSystem = _useStrata.designSystem,
+    syncVersion = _useStrata.syncVersion;
+  // Enhanced helper function to safely access nested properties
+  var safeGet = function safeGet(obj, path, defaultValue) {
+    return path.split('.').reduce(function (acc, key) {
+      if (acc && _typeof(acc) === 'object' && key in acc) {
+        return acc[key];
+      }
+      return defaultValue;
+    }, obj);
+  };
+  // Advanced CSS variable resolution with recursion protection
+  var _resolveValue = function resolveValue(value) {
+    var unit = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+    var visited = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : new Set();
+    if (!value) return '';
+    var resolvedValue = value;
+    // Resolve CSS variables recursively with cycle detection
+    if (resolvedValue.startsWith('var(')) {
+      var _resolvedValue$match;
+      var varName = (_resolvedValue$match = resolvedValue.match(/var\((--[^)]+)\)/)) === null || _resolvedValue$match === void 0 ? void 0 : _resolvedValue$match[1];
+      if (varName) {
+        if (visited.has(varName)) {
+          console.warn("Circular reference detected for variable: ".concat(varName));
+          return resolvedValue;
+        }
+        visited.add(varName);
+        var varData = designSystem.variables[varName];
+        if (varData) {
+          resolvedValue = _resolveValue(varData.value, varData.unit, visited);
+        }
+      }
+    }
+    // Add unit if missing and value is numeric
+    if (unit && /^-?\d*\.?\d+$/.test(resolvedValue)) {
+      return resolvedValue + unit;
+    }
+    return resolvedValue;
+  };
+  // Get property value with enhanced resolution
+  var getPropertyValue = function getPropertyValue(node, property) {
+    var _node$properties;
+    if (!(node !== null && node !== void 0 && (_node$properties = node.properties) !== null && _node$properties !== void 0 && _node$properties[property])) {
+      return '';
+    }
+    var prop = node.properties[property];
+    return _resolveValue(prop.value, prop.unit);
+  };
+  // Get text content with safe access
+  var getTextContent = function getTextContent(node) {
+    return (node === null || node === void 0 ? void 0 : node.textContent) || '';
+  };
+  // Get linked element attributes
+  var getLinkedElementAttr = function getLinkedElementAttr(node, attr) {
+    var _node$linkedElement;
+    if (!(node !== null && node !== void 0 && (_node$linkedElement = node.linkedElement) !== null && _node$linkedElement !== void 0 && (_node$linkedElement = _node$linkedElement.attributes) !== null && _node$linkedElement !== void 0 && _node$linkedElement[attr])) {
+      return '';
+    }
+    return node.linkedElement.attributes[attr];
+  };
+  // Enhanced component data extraction that matches your design system structure
+  var _extractComponentData = function extractComponentData(componentName) {
+    var componentData = designSystem.components[componentName];
+    if (!componentData) {
+      if (fallbackToDefault && componentName !== 'card') {
+        console.warn("Component \"".concat(componentName, "\" not found, falling back to default card"));
+        return _extractComponentData('card');
+      }
+      console.warn("Component \"".concat(componentName, "\" not found in design system"));
+      return null;
+    }
+    console.log("\uD83D\uDCE6 Extracting data for component: ".concat(componentName), componentData);
+    // Extract card data based on your actual design system structure
+    var extractedData = {
+      // Main card properties
+      card: {
+        width: getPropertyValue(componentData, 'width') || '100%',
+        maxWidth: getPropertyValue(componentData, 'max-width') || '32rem',
+        backgroundColor: getPropertyValue(componentData, 'background-color') || '#f9fafb',
+        fontFamily: getPropertyValue(componentData, 'font-family') || 'Inter, system-ui, sans-serif'
+      },
+      // Card container (from children.card-container)
+      container: {
+        width: getPropertyValue(safeGet(componentData, 'children.card-container', undefined), 'width') || '100%',
+        maxWidth: getPropertyValue(safeGet(componentData, 'children.card-container', undefined), 'max-width') || '32rem',
+        backgroundColor: getPropertyValue(safeGet(componentData, 'children.card-container', undefined), 'background-color') || '#ffffff',
+        borderRadius: getPropertyValue(safeGet(componentData, 'children.card-container', undefined), 'border-radius') || '1.5rem',
+        boxShadow: getPropertyValue(safeGet(componentData, 'children.card-container', undefined), 'box-shadow') || '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
+        overflow: getPropertyValue(safeGet(componentData, 'children.card-container', undefined), 'overflow') || 'hidden'
+      },
+      // Card header (nested structure)
+      header: {
+        padding: getPropertyValue(safeGet(componentData, 'children.card-container.children.card-header', undefined), 'padding') || '1.5rem',
+        borderBottom: getPropertyValue(safeGet(componentData, 'children.card-container.children.card-header', undefined), 'border-bottom-width') || '1px',
+        borderColor: getPropertyValue(safeGet(componentData, 'children.card-container.children.card-header', undefined), 'border-bottom-color') || '#e5e7eb'
+      },
+      headerContent: {
+        display: getPropertyValue(safeGet(componentData, 'children.card-container.children.card-header.children.card-header-content', undefined), 'display') || 'flex',
+        justifyContent: getPropertyValue(safeGet(componentData, 'children.card-container.children.card-header.children.card-header-content', undefined), 'justify-content') || 'space-between',
+        alignItems: getPropertyValue(safeGet(componentData, 'children.card-container.children.card-header.children.card-header-content', undefined), 'align-items') || 'center'
+      },
+      headerTitle: {
+        text: getTextContent(safeGet(componentData, 'children.card-container.children.card-header.children.card-header-content.children.card-header-title', undefined)) || 'Arrived in',
+        fontSize: getPropertyValue(safeGet(componentData, 'children.card-container.children.card-header.children.card-header-content.children.card-header-title', undefined), 'font-size') || '1.25rem',
+        fontWeight: getPropertyValue(safeGet(componentData, 'children.card-container.children.card-header.children.card-header-content.children.card-header-title', undefined), 'font-weight') || '600',
+        color: getPropertyValue(safeGet(componentData, 'children.card-container.children.card-header.children.card-header-content.children.card-header-title', undefined), 'color') || '#111827'
+      },
+      headerTimer: {
+        text: getTextContent(safeGet(componentData, 'children.card-container.children.card-header.children.card-header-content.children.card-header-timer', undefined)) || '00:05:20',
+        fontSize: getPropertyValue(safeGet(componentData, 'children.card-container.children.card-header.children.card-header-content.children.card-header-timer', undefined), 'font-size') || '1.25rem',
+        fontFamily: getPropertyValue(safeGet(componentData, 'children.card-container.children.card-header.children.card-header-content.children.card-header-timer', undefined), 'font-family') || 'monospace',
+        color: getPropertyValue(safeGet(componentData, 'children.card-container.children.card-header.children.card-header-content.children.card-header-timer', undefined), 'color') || '#1f2937'
+      },
+      // Card body
+      body: {
+        padding: getPropertyValue(safeGet(componentData, 'children.card-container.children.card-body', undefined), 'padding') || '1.5rem'
+      },
+      bodyDriver: {
+        backgroundColor: getPropertyValue(safeGet(componentData, 'children.card-container.children.card-body.children.card-body-driver', undefined), 'background-color') || '#f9fafb',
+        borderRadius: getPropertyValue(safeGet(componentData, 'children.card-container.children.card-body.children.card-body-driver', undefined), 'border-radius') || '0.75rem',
+        padding: getPropertyValue(safeGet(componentData, 'children.card-container.children.card-body.children.card-body-driver', undefined), 'padding') || '1rem',
+        display: getPropertyValue(safeGet(componentData, 'children.card-container.children.card-body.children.card-body-driver', undefined), 'display') || 'flex',
+        alignItems: getPropertyValue(safeGet(componentData, 'children.card-container.children.card-body.children.card-body-driver', undefined), 'align-items') || 'center',
+        gap: getPropertyValue(safeGet(componentData, 'children.card-container.children.card-body.children.card-body-driver', undefined), 'gap') || '1rem'
+      },
+      bodyImage: {
+        src: getLinkedElementAttr(safeGet(componentData, 'children.card-container.children.card-body.children.card-body-driver.children.card-body-img', undefined), 'src') || 'https://plus.unsplash.com/premium_photo-1689977927774-401b12d137d6?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OXx8bWFufGVufDB8fDB8fHww',
+        alt: getLinkedElementAttr(safeGet(componentData, 'children.card-container.children.card-body.children.card-body-driver.children.card-body-img', undefined), 'alt') || 'Driver',
+        width: getPropertyValue(safeGet(componentData, 'children.card-container.children.card-body.children.card-body-driver.children.card-body-img', undefined), 'width') || '3.5rem',
+        height: getPropertyValue(safeGet(componentData, 'children.card-container.children.card-body.children.card-body-driver.children.card-body-img', undefined), 'height') || '3.5rem',
+        borderRadius: getPropertyValue(safeGet(componentData, 'children.card-container.children.card-body.children.card-body-driver.children.card-body-img', undefined), 'border-radius') || '50%',
+        objectFit: getPropertyValue(safeGet(componentData, 'children.card-container.children.card-body.children.card-body-driver.children.card-body-img', undefined), 'object-fit') || 'cover'
+      },
+      bodyInfo: {
+        flexGrow: getPropertyValue(safeGet(componentData, 'children.card-container.children.card-body.children.card-body-driver.children.card-body-info', undefined), 'flex-grow') || '1'
+      },
+      bodyName: {
+        text: getTextContent(safeGet(componentData, 'children.card-container.children.card-body.children.card-body-driver.children.card-body-info.children.card-body-name', undefined)) || 'Jacob Jones',
+        fontWeight: getPropertyValue(safeGet(componentData, 'children.card-container.children.card-body.children.card-body-driver.children.card-body-info.children.card-body-name', undefined), 'font-weight') || '600',
+        color: getPropertyValue(safeGet(componentData, 'children.card-container.children.card-body.children.card-body-driver.children.card-body-info.children.card-body-name', undefined), 'color') || '#111827'
+      },
+      bodySpan: {
+        text: getTextContent(safeGet(componentData, 'children.card-container.children.card-body.children.card-body-driver.children.card-body-info.children.card-body-span', undefined)) || 'Omnitrans • SPX-8328',
+        fontSize: getPropertyValue(safeGet(componentData, 'children.card-container.children.card-body.children.card-body-driver.children.card-body-info.children.card-body-span', undefined), 'font-size') || '0.875rem',
+        color: getPropertyValue(safeGet(componentData, 'children.card-container.children.card-body.children.card-body-driver.children.card-body-info.children.card-body-span', undefined), 'color') || '#6b7280'
+      },
+      bodyActions: {
+        gap: getPropertyValue(safeGet(componentData, 'children.card-container.children.card-body.children.card-body-driver.children.card-body-actions', undefined), 'gap') || '0.5rem'
+      },
+      // Route section
+      route: {
+        paddingX: getPropertyValue(safeGet(componentData, 'children.card-container.children.card-route', undefined), 'padding-left') || '1.5rem',
+        paddingBottom: getPropertyValue(safeGet(componentData, 'children.card-container.children.card-route', undefined), 'padding-bottom') || '1.5rem'
+      },
+      routeContainer: {
+        gap: getPropertyValue(safeGet(componentData, 'children.card-container.children.card-route.children.card-route-container', undefined), 'gap') || '1.5rem'
+      },
+      // Payment section
+      payment: {
+        paddingX: getPropertyValue(safeGet(componentData, 'children.card-container.children.card-payment', undefined), 'padding-left') || '1.5rem',
+        paddingBottom: getPropertyValue(safeGet(componentData, 'children.card-container.children.card-payment', undefined), 'padding-bottom') || '1.5rem'
+      },
+      paymentContainer: {
+        backgroundColor: getPropertyValue(safeGet(componentData, 'children.card-container.children.card-payment.children.card-payment-container', undefined), 'background-color') || '#111827',
+        borderRadius: getPropertyValue(safeGet(componentData, 'children.card-container.children.card-payment.children.card-payment-container', undefined), 'border-radius') || '0.75rem',
+        padding: getPropertyValue(safeGet(componentData, 'children.card-container.children.card-payment.children.card-payment-container', undefined), 'padding') || '1rem'
+      },
+      cardNumber: {
+        text: getTextContent(safeGet(componentData, 'children.card-container.children.card-payment.children.card-payment-container.children.card-payment-content.children.card-payment-details.children.card-number', undefined)) || '**** 7493',
+        color: getPropertyValue(safeGet(componentData, 'children.card-container.children.card-payment.children.card-payment-container.children.card-payment-content.children.card-payment-details.children.card-number', undefined), 'color') || '#ffffff',
+        fontWeight: getPropertyValue(safeGet(componentData, 'children.card-container.children.card-payment.children.card-payment-container.children.card-payment-content.children.card-payment-details.children.card-number', undefined), 'font-weight') || '500',
+        fontSize: getPropertyValue(safeGet(componentData, 'children.card-container.children.card-payment.children.card-payment-container.children.card-payment-content.children.card-payment-details.children.card-number', undefined), 'font-size') || '1.125rem'
+      },
+      cardType: {
+        text: getTextContent(safeGet(componentData, 'children.card-container.children.card-payment.children.card-payment-container.children.card-payment-content.children.card-payment-details.children.card-type', undefined)) || 'Credit card',
+        fontSize: getPropertyValue(safeGet(componentData, 'children.card-container.children.card-payment.children.card-payment-container.children.card-payment-content.children.card-payment-details.children.card-type', undefined), 'font-size') || '0.875rem',
+        color: getPropertyValue(safeGet(componentData, 'children.card-container.children.card-payment.children.card-payment-container.children.card-payment-content.children.card-payment-details.children.card-type', undefined), 'color') || '#d1d5db'
+      },
+      // Total section
+      totalSection: {
+        paddingX: getPropertyValue(safeGet(componentData, 'children.card-container.children.card-total-section', undefined), 'padding-left') || '1.5rem',
+        paddingY: getPropertyValue(safeGet(componentData, 'children.card-container.children.card-total-section', undefined), 'padding-top') || '1.5rem'
+      },
+      totalLabel: {
+        text: getTextContent(safeGet(componentData, 'children.card-container.children.card-total-section.children.card-total-content.children.card-total-label', undefined)) || 'Total orders',
+        color: getPropertyValue(safeGet(componentData, 'children.card-container.children.card-total-section.children.card-total-content.children.card-total-label', undefined), 'color') || '#111827',
+        fontWeight: getPropertyValue(safeGet(componentData, 'children.card-container.children.card-total-section.children.card-total-content.children.card-total-label', undefined), 'font-weight') || '500'
+      },
+      totalAmount: {
+        text: getTextContent(safeGet(componentData, 'children.card-container.children.card-total-section.children.card-total-content.children.card-total-amount', undefined)) || '$5.75',
+        fontSize: getPropertyValue(safeGet(componentData, 'children.card-container.children.card-total-section.children.card-total-content.children.card-total-amount', undefined), 'font-size') || '1.25rem',
+        fontWeight: getPropertyValue(safeGet(componentData, 'children.card-container.children.card-total-section.children.card-total-content.children.card-total-amount', undefined), 'font-weight') || '700',
+        color: getPropertyValue(safeGet(componentData, 'children.card-container.children.card-total-section.children.card-total-content.children.card-total-amount', undefined), 'color') || '#111827'
+      }
+    };
+    console.log("\u2705 Extracted data for ".concat(componentName, ":"), extractedData);
+    return extractedData;
+  };
+  var componentData = _extractComponentData(componentName);
+  return {
+    data: componentData,
+    hasData: !!componentData,
+    componentName: componentName,
+    syncVersion: syncVersion
+  };
+};
+// Backward compatibility alias
+var useCardData = function useCardData() {
+  return useComponentData({
+    componentName: 'card'
+  });
+};
+
+// "use client";
+// import * as React from "react";
+// import {
+//   Box,
+//   Flex,
+//   Text,
+//   Image,
+//   Button,
+//   VStack,
+//   HStack,
+// } from "@chakra-ui/react";
+// import { useCardData } from "../../hook/useCardData";
+// // Card Container
+// const CardContainer = ({ children, width, maxWidth }: any) => {
+//   const cardData = useCardData();
+//   if (!cardData) return null;
+//   return (
+//     <Box
+//       width={width || cardData.container.width}
+//       maxWidth={maxWidth || cardData.container.maxWidth}
+//       mx="auto"
+//       bg={cardData.container.backgroundColor}
+//       borderRadius={cardData.container.borderRadius}
+//       boxShadow={cardData.container.boxShadow}
+//       overflow={cardData.container.overflow}
+//     >
+//       {children}
+//     </Box>
+//   );
+// };
+// // Card Header
+// const CardHeader = ({ children, padding }: any) => {
+//   const cardData = useCardData();
+//   if (!cardData) return null;
+//   return (
+//     <Box
+//       p={padding || cardData.header.padding}
+//       borderBottom={`${cardData.header.borderBottom} solid ${cardData.header.borderColor}`}
+//     >
+//       {children}
+//     </Box>
+//   );
+// };
+// const CardHeaderContent = ({ children }: any) => {
+//   const cardData = useCardData();
+//   if (!cardData) return null;
+//   return (
+//     <Flex
+//       display={cardData.headerContent.display}
+//       justifyContent={cardData.headerContent.justifyContent}
+//       alignItems={cardData.headerContent.alignItems}
+//     >
+//       {children}
+//     </Flex>
+//   );
+// };
+// const CardHeaderTitle = ({ children, fontSize, fontWeight, color }: any) => {
+//   const cardData = useCardData();
+//   if (!cardData) return null;
+//   return (
+//     <Text
+//       fontSize={fontSize || cardData.headerTitle.fontSize}
+//       fontWeight={fontWeight || cardData.headerTitle.fontWeight}
+//       color={color || cardData.headerTitle.color}
+//     >
+//       {children || cardData.headerTitle.text}
+//     </Text>
+//   );
+// };
+// const CardHeaderTimer = ({ children, fontSize, fontFamily, color }: any) => {
+//   const cardData = useCardData();
+//   if (!cardData) return null;
+//   return (
+//     <Text
+//       fontSize={fontSize || cardData.headerTimer.fontSize}
+//       fontFamily={fontFamily || cardData.headerTimer.fontFamily}
+//       color={color || cardData.headerTimer.color}
+//     >
+//       {children || cardData.headerTimer.text}
+//     </Text>
+//   );
+// };
+// // Card Body
+// const CardBody = ({ children, padding }: any) => {
+//   const cardData = useCardData();
+//   if (!cardData) return null;
+//   return <Box p={padding || cardData.body.padding}>{children}</Box>;
+// };
+// const CardBodyDriver = ({
+//   children,
+//   backgroundColor,
+//   borderRadius,
+//   padding,
+// }: any) => {
+//   const cardData = useCardData();
+//   if (!cardData) return null;
+//   return (
+//     <Flex
+//       bg={backgroundColor || cardData.bodyDriver.backgroundColor}
+//       borderRadius={borderRadius || cardData.bodyDriver.borderRadius}
+//       p={padding || cardData.bodyDriver.padding}
+//       display={cardData.bodyDriver.display}
+//       alignItems={cardData.bodyDriver.alignItems}
+//       gap={cardData.bodyDriver.gap}
+//     >
+//       {children}
+//     </Flex>
+//   );
+// };
+// const CardBodyImage = ({ src, alt, width, height, borderRadius }: any) => {
+//   const cardData = useCardData();
+//   if (!cardData) return null;
+//   return (
+//     <Image
+//       src={src || cardData.bodyImage.src}
+//       alt={alt || cardData.bodyImage.alt}
+//       width={width || cardData.bodyImage.width}
+//       height={height || cardData.bodyImage.height}
+//       borderRadius={borderRadius || cardData.bodyImage.borderRadius}
+//       objectFit={cardData.bodyImage.objectFit as any}
+//     />
+//   );
+// };
+// const CardBodyInfo = ({ children, flexGrow }: any) => {
+//   const cardData = useCardData();
+//   if (!cardData) return null;
+//   return <Box flex={flexGrow || cardData.bodyInfo.flexGrow}>{children}</Box>;
+// };
+// const CardBodyName = ({ children, fontWeight, color }: any) => {
+//   const cardData = useCardData();
+//   if (!cardData) return null;
+//   return (
+//     <Text
+//       fontWeight={fontWeight || cardData.bodyName.fontWeight}
+//       color={color || cardData.bodyName.color}
+//     >
+//       {children || cardData.bodyName.text}
+//     </Text>
+//   );
+// };
+// const CardBodySpan = ({ children, fontSize, color }: any) => {
+//   const cardData = useCardData();
+//   if (!cardData) return null;
+//   return (
+//     <Text
+//       fontSize={fontSize || cardData.bodySpan.fontSize}
+//       color={color || cardData.bodySpan.color}
+//     >
+//       {children || cardData.bodySpan.text}
+//     </Text>
+//   );
+// };
+// const CardBodyActions = ({ children }: any) => {
+//   const cardData = useCardData();
+//   if (!cardData) return null;
+//   return <Flex gap={cardData.bodyActions.gap}>{children}</Flex>;
+// };
+// // Action Button Components - FIXED to match design system exactly
+// const CardBodyActionButton = ({
+//   children,
+//   variant = "outline",
+//   backgroundColor,
+//   color,
+//   hoverBackgroundColor,
+//   border,
+//   padding = 2,
+//   borderRadius = "full",
+//   onClick,
+// }: any) => {
+//   const cardData = useCardData();
+//   if (!cardData) return null;
+//   // Use custom props if provided, otherwise use variant-based styles
+//   const getButtonStyles = () => {
+//     // If custom props are provided, use them
+//     if (backgroundColor || color || hoverBackgroundColor || border) {
+//       return {
+//         bg: backgroundColor,
+//         color: color,
+//         border: border,
+//         borderColor: border === "none" ? "transparent" : "gray.300",
+//         _hover: {
+//           bg: hoverBackgroundColor,
+//         },
+//       };
+//     }
+//     // Otherwise use variant-based styles
+//     if (variant === "solid") {
+//       return {
+//         bg: "#1f2937", // gray-800
+//         color: "white",
+//         border: "none",
+//         _hover: {
+//           bg: "#374151", // gray-700
+//         },
+//       };
+//     } else {
+//       return {
+//         bg: "transparent",
+//         color: "gray.600",
+//         border: "1px solid",
+//         borderColor: "gray.300",
+//         _hover: {
+//           bg: "gray.100",
+//         },
+//       };
+//     }
+//   };
+//   const styles = getButtonStyles();
+//   return (
+//     <Button
+//       p={padding}
+//       borderRadius={borderRadius}
+//       bg={styles.bg}
+//       color={styles.color}
+//       border={styles.border}
+//       borderColor={styles.borderColor}
+//       transition="all 0.2s"
+//       _hover={styles._hover}
+//       onClick={onClick}
+//       minW="auto"
+//       h="auto"
+//       display="flex"
+//       alignItems="center"
+//       justifyContent="center"
+//     >
+//       {children}
+//     </Button>
+//   );
+// };
+// const CardBodyActionIcon = ({
+//   children,
+//   width = 5,
+//   height = 5,
+//   color,
+// }: any) => {
+//   return (
+//     <Box
+//       width={width}
+//       height={height}
+//       color={color}
+//       display="flex"
+//       alignItems="center"
+//       justifyContent="center"
+//     >
+//       {children}
+//     </Box>
+//   );
+// };
+// // Card Route
+// const CardRoute = ({ children, paddingX, paddingBottom }: any) => {
+//   const cardData = useCardData();
+//   if (!cardData) return null;
+//   return (
+//     <Box
+//       px={paddingX || cardData.route.paddingX}
+//       pb={paddingBottom || cardData.route.paddingBottom}
+//     >
+//       {children}
+//     </Box>
+//   );
+// };
+// const CardRouteContainer = ({ children, gap }: any) => {
+//   const cardData = useCardData();
+//   if (!cardData) return null;
+//   return (
+//     <VStack spacing={gap || cardData.routeContainer.gap} align="stretch">
+//       {children}
+//     </VStack>
+//   );
+// };
+// // FIXED: CardRouteItem with proper spacing to match design system
+// // const CardRouteItem = ({
+// //   children,
+// //   icon,
+// //   iconBackgroundColor = "blue.50",
+// //   title,
+// //   subtitle,
+// // }: {
+// //   children?: React.ReactNode;
+// //   icon?: React.ReactNode;
+// //   iconBackgroundColor?: string;
+// //   title?: string;
+// //   subtitle?: string;
+// // }) => {
+// //   return (
+// //     <HStack align="flex-start" spacing={4}>
+// //       <Box mt={0.5} flexShrink={0}>
+// //         <Flex
+// //           width={8}
+// //           height={8}
+// //           borderRadius="full"
+// //           backgroundColor={iconBackgroundColor}
+// //           align="center"
+// //           justify="center"
+// //         >
+// //           {icon}
+// //         </Flex>
+// //       </Box>
+// //       <Box flex="1">
+// //         {children || (
+// //           <>
+// //             <Text
+// //               fontWeight="semibold"
+// //               color="gray.900"
+// //               fontSize="md"
+// //               lineHeight="short"
+// //               mb={1} // Added margin bottom for proper spacing
+// //             >
+// //               {title}
+// //             </Text>
+// //             <Text fontSize="sm" color="gray.500" lineHeight="short">
+// //               {subtitle}
+// //             </Text>
+// //           </>
+// //         )}
+// //       </Box>
+// //     </HStack>
+// //   );
+// // };
+// const CardRouteItem = ({
+//   children,
+//   icon,
+//   iconBackgroundColor = "blue.50",
+//   title,
+//   subtitle,
+// }: {
+//   children?: React.ReactNode;
+//   icon?: React.ReactNode;
+//   iconBackgroundColor?: string;
+//   title?: string;
+//   subtitle?: string;
+// }) => {
+//   return (
+//     <HStack align="flex-start" spacing={4}>
+//       <Box mt={0.5} flexShrink={0}>
+//         <Flex
+//           width={8}
+//           height={8}
+//           borderRadius="full"
+//           backgroundColor={iconBackgroundColor}
+//           align="center"
+//           justify="center"
+//         >
+//           {icon}
+//         </Flex>
+//       </Box>
+//       <Box flex="1">
+//         {children || (
+//           <>
+//             <Text
+//               fontWeight="semibold"
+//               color="gray.900"
+//               fontSize="md"
+//               lineHeight="short"
+//               mb={1}
+//             >
+//               {title}
+//             </Text>
+//             <Text fontSize="sm" color="gray.500" lineHeight="short">
+//               {subtitle}
+//             </Text>
+//           </>
+//         )}
+//       </Box>
+//     </HStack>
+//   );
+// };
+// // Card Payment
+// const CardPayment = ({ children, paddingX, paddingBottom }: any) => {
+//   const cardData = useCardData();
+//   if (!cardData) return null;
+//   return (
+//     <Box
+//       px={paddingX || cardData.payment.paddingX}
+//       pb={paddingBottom || cardData.payment.paddingBottom}
+//     >
+//       {children}
+//     </Box>
+//   );
+// };
+// const CardPaymentContainer = ({
+//   children,
+//   backgroundColor,
+//   borderRadius,
+//   padding,
+// }: any) => {
+//   const cardData = useCardData();
+//   if (!cardData) return null;
+//   return (
+//     <Box
+//       bg={backgroundColor || cardData.paymentContainer.backgroundColor}
+//       borderRadius={borderRadius || cardData.paymentContainer.borderRadius}
+//       p={padding || cardData.paymentContainer.padding}
+//     >
+//       {children}
+//     </Box>
+//   );
+// };
+// const CardPaymentContent = ({ children }: any) => {
+//   return (
+//     <Flex align="center" gap={4}>
+//       {children}
+//     </Flex>
+//   );
+// };
+// const CardPaymentIconContainer = ({
+//   children,
+//   width = 12,
+//   height = 12,
+//   backgroundColor = "gray.800",
+// }: any) => {
+//   return (
+//     <Flex
+//       width={width}
+//       height={height}
+//       borderRadius="full"
+//       backgroundColor={backgroundColor}
+//       align="center"
+//       justify="center"
+//     >
+//       {children}
+//     </Flex>
+//   );
+// };
+// const CardPaymentDetails = ({ children }: any) => {
+//   return <Box>{children}</Box>;
+// };
+// const CardNumber = ({ children, color, fontWeight, fontSize }: any) => {
+//   const cardData = useCardData();
+//   if (!cardData) return null;
+//   return (
+//     <Text
+//       color={color || cardData.cardNumber.color}
+//       fontWeight={fontWeight || cardData.cardNumber.fontWeight}
+//       fontSize={fontSize || cardData.cardNumber.fontSize}
+//     >
+//       {children || cardData.cardNumber.text}
+//     </Text>
+//   );
+// };
+// const CardType = ({ children, fontSize, color }: any) => {
+//   const cardData = useCardData();
+//   if (!cardData) return null;
+//   return (
+//     <Text
+//       fontSize={fontSize || cardData.cardType.fontSize}
+//       color={color || cardData.cardType.color}
+//     >
+//       {children || cardData.cardType.text}
+//     </Text>
+//   );
+// };
+// // Card Total Section
+// const CardTotalSection = ({
+//   children,
+//   paddingX,
+//   paddingY,
+//   borderTop = "1px",
+//   borderColor = "gray.200",
+// }: any) => {
+//   const cardData = useCardData();
+//   if (!cardData) return null;
+//   return (
+//     <Box
+//       px={paddingX || cardData.totalSection.paddingX}
+//       py={paddingY || cardData.totalSection.paddingY}
+//       borderTop={borderTop}
+//       borderColor={borderColor}
+//     >
+//       {children}
+//     </Box>
+//   );
+// };
+// const CardTotalContent = ({ children }: any) => {
+//   return (
+//     <Flex justify="space-between" align="center">
+//       {children}
+//     </Flex>
+//   );
+// };
+// const CardTotalLabel = ({ children, color, fontWeight }: any) => {
+//   const cardData = useCardData();
+//   if (!cardData) return null;
+//   return (
+//     <Text
+//       color={color || cardData.totalLabel.color}
+//       fontWeight={fontWeight || cardData.totalLabel.fontWeight}
+//     >
+//       {children || cardData.totalLabel.text}
+//     </Text>
+//   );
+// };
+// const CardTotalAmount = ({ children, fontSize, fontWeight, color }: any) => {
+//   const cardData = useCardData();
+//   if (!cardData) return null;
+//   return (
+//     <Text
+//       fontSize={fontSize || cardData.totalAmount.fontSize}
+//       fontWeight={fontWeight || cardData.totalAmount.fontWeight}
+//       color={color || cardData.totalAmount.color}
+//     >
+//       {children || cardData.totalAmount.text}
+//     </Text>
+//   );
+// };
+// // Main Card component
+// const Card = ({ children, width, maxWidth, fontFamily }: any) => {
+//   const cardData = useCardData();
+//   if (!cardData) return null;
+//   return (
+//     <Box
+//       width={width || cardData.card.width}
+//       maxWidth={maxWidth || cardData.card.maxWidth}
+//       fontFamily={fontFamily || cardData.card.fontFamily}
+//     >
+//       {children}
+//     </Box>
+//   );
+// };
+// // Attach all subcomponents to Card
+// Card.Container = CardContainer;
+// Card.Header = CardHeader;
+// Card.HeaderContent = CardHeaderContent;
+// Card.HeaderTitle = CardHeaderTitle;
+// Card.HeaderTimer = CardHeaderTimer;
+// Card.Body = CardBody;
+// Card.BodyDriver = CardBodyDriver;
+// Card.BodyImage = CardBodyImage;
+// Card.BodyInfo = CardBodyInfo;
+// Card.BodyName = CardBodyName;
+// Card.BodySpan = CardBodySpan;
+// Card.BodyActions = CardBodyActions;
+// Card.BodyActionButton = CardBodyActionButton;
+// Card.BodyActionIcon = CardBodyActionIcon;
+// Card.Route = CardRoute;
+// Card.RouteContainer = CardRouteContainer;
+// Card.RouteItem = CardRouteItem;
+// Card.Payment = CardPayment;
+// Card.PaymentContainer = CardPaymentContainer;
+// Card.PaymentContent = CardPaymentContent;
+// Card.PaymentIconContainer = CardPaymentIconContainer;
+// Card.PaymentDetails = CardPaymentDetails;
+// Card.Number = CardNumber;
+// Card.Type = CardType;
+// Card.TotalSection = CardTotalSection;
+// Card.TotalContent = CardTotalContent;
+// Card.TotalLabel = CardTotalLabel;
+// Card.TotalAmount = CardTotalAmount;
+// export default Card;
+///ddeeeeeeeeeeppeeepeppepepepepeep
+// components/Card/Card.tsx
+var _excluded$1 = ["children", "width", "maxWidth"],
+  _excluded2$1 = ["children", "padding"],
+  _excluded3 = ["children"],
+  _excluded4 = ["children", "fontSize", "fontWeight", "color"],
+  _excluded5 = ["children", "fontSize", "fontFamily", "color"],
+  _excluded6 = ["children", "padding"],
+  _excluded7 = ["children", "backgroundColor", "borderRadius", "padding"],
+  _excluded8 = ["src", "alt", "width", "height", "borderRadius"],
+  _excluded9 = ["children", "flexGrow"],
+  _excluded0 = ["children", "fontWeight", "color"],
+  _excluded1 = ["children", "fontSize", "color"],
+  _excluded10 = ["children"],
+  _excluded11 = ["children", "variant", "backgroundColor", "color", "hoverBackgroundColor", "border", "padding", "borderRadius", "onClick"],
+  _excluded12 = ["children", "width", "height", "color"],
+  _excluded13 = ["children", "paddingX", "paddingBottom"],
+  _excluded14 = ["children", "gap"],
+  _excluded15 = ["children", "icon", "iconBackgroundColor", "title", "subtitle"],
+  _excluded16 = ["children", "paddingX", "paddingBottom"],
+  _excluded17 = ["children", "backgroundColor", "borderRadius", "padding"],
+  _excluded18 = ["children"],
+  _excluded19 = ["children", "width", "height", "backgroundColor"],
+  _excluded20 = ["children"],
+  _excluded21 = ["children", "color", "fontWeight", "fontSize"],
+  _excluded22 = ["children", "fontSize", "color"],
+  _excluded23 = ["children", "paddingX", "paddingY", "borderTop", "borderColor"],
+  _excluded24 = ["children"],
+  _excluded25 = ["children", "color", "fontWeight"],
+  _excluded26 = ["children", "fontSize", "fontWeight", "color"],
+  _excluded27 = ["children", "width", "maxWidth", "fontFamily"];
+// Helper function to safely access nested properties
+var safeGet = function safeGet(obj, path) {
+  var defaultValue = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+  return path.split('.').reduce(function (acc, key) {
+    if (acc && _typeof(acc) === 'object' && key in acc) {
+      return acc[key];
+    }
+    return defaultValue;
+  }, obj);
+};
+// Card Container
+var CardContainer = function CardContainer(_ref) {
+  var children = _ref.children,
+    width = _ref.width,
+    maxWidth = _ref.maxWidth,
+    props = _objectWithoutProperties(_ref, _excluded$1);
+  var _useCardData = useCardData(),
+    cardData = _useCardData.data;
+  if (!cardData) return null;
+  return jsx(Box, _objectSpread2(_objectSpread2({
+    width: width || safeGet(cardData, 'container.width', '100%'),
+    maxWidth: maxWidth || safeGet(cardData, 'container.maxWidth', '32rem'),
+    mx: "auto",
+    bg: safeGet(cardData, 'container.backgroundColor', '#ffffff'),
+    borderRadius: safeGet(cardData, 'container.borderRadius', '1.5rem'),
+    boxShadow: safeGet(cardData, 'container.boxShadow', '0 10px 15px -3px rgba(0, 0, 0, 0.1)'),
+    overflow: safeGet(cardData, 'container.overflow', 'hidden')
+  }, props), {}, {
+    children: children
+  }));
+};
+// Card Header
+var CardHeader = function CardHeader(_ref2) {
+  var children = _ref2.children,
+    padding = _ref2.padding,
+    props = _objectWithoutProperties(_ref2, _excluded2$1);
+  var _useCardData2 = useCardData(),
+    cardData = _useCardData2.data;
+  if (!cardData) return null;
+  return jsx(Box, _objectSpread2(_objectSpread2({
+    p: padding || safeGet(cardData, 'header.padding', '1.5rem'),
+    borderBottom: "".concat(safeGet(cardData, 'header.borderBottom', '1px'), " solid ").concat(safeGet(cardData, 'header.borderColor', '#e5e7eb'))
+  }, props), {}, {
+    children: children
+  }));
+};
+var CardHeaderContent = function CardHeaderContent(_ref3) {
+  var children = _ref3.children,
+    props = _objectWithoutProperties(_ref3, _excluded3);
+  var _useCardData3 = useCardData(),
+    cardData = _useCardData3.data;
+  if (!cardData) return null;
+  return jsx(Flex, _objectSpread2(_objectSpread2({
+    display: safeGet(cardData, 'headerContent.display', 'flex'),
+    justifyContent: safeGet(cardData, 'headerContent.justifyContent', 'space-between'),
+    alignItems: safeGet(cardData, 'headerContent.alignItems', 'center')
+  }, props), {}, {
+    children: children
+  }));
+};
+var CardHeaderTitle = function CardHeaderTitle(_ref4) {
+  var children = _ref4.children,
+    fontSize = _ref4.fontSize,
+    fontWeight = _ref4.fontWeight,
+    color = _ref4.color,
+    props = _objectWithoutProperties(_ref4, _excluded4);
+  var _useCardData4 = useCardData(),
+    cardData = _useCardData4.data;
+  if (!cardData) return null;
+  return jsx(Text, _objectSpread2(_objectSpread2({
+    fontSize: fontSize || safeGet(cardData, 'headerTitle.fontSize', '1.25rem'),
+    fontWeight: fontWeight || safeGet(cardData, 'headerTitle.fontWeight', '600'),
+    color: color || safeGet(cardData, 'headerTitle.color', '#111827')
+  }, props), {}, {
+    children: children || safeGet(cardData, 'headerTitle.text', 'Arrived in')
+  }));
+};
+var CardHeaderTimer = function CardHeaderTimer(_ref5) {
+  var children = _ref5.children,
+    fontSize = _ref5.fontSize,
+    fontFamily = _ref5.fontFamily,
+    color = _ref5.color,
+    props = _objectWithoutProperties(_ref5, _excluded5);
+  var _useCardData5 = useCardData(),
+    cardData = _useCardData5.data;
+  if (!cardData) return null;
+  return jsx(Text, _objectSpread2(_objectSpread2({
+    fontSize: fontSize || safeGet(cardData, 'headerTimer.fontSize', '1.25rem'),
+    fontFamily: fontFamily || safeGet(cardData, 'headerTimer.fontFamily', 'monospace'),
+    color: color || safeGet(cardData, 'headerTimer.color', '#1f2937')
+  }, props), {}, {
+    children: children || safeGet(cardData, 'headerTimer.text', '00:05:20')
+  }));
+};
+// Card Body
+var CardBody = function CardBody(_ref6) {
+  var children = _ref6.children,
+    padding = _ref6.padding,
+    props = _objectWithoutProperties(_ref6, _excluded6);
+  var _useCardData6 = useCardData(),
+    cardData = _useCardData6.data;
+  if (!cardData) return null;
+  return jsx(Box, _objectSpread2(_objectSpread2({
+    p: padding || safeGet(cardData, 'body.padding', '1.5rem')
+  }, props), {}, {
+    children: children
+  }));
+};
+var CardBodyDriver = function CardBodyDriver(_ref7) {
+  var children = _ref7.children,
+    backgroundColor = _ref7.backgroundColor,
+    borderRadius = _ref7.borderRadius,
+    padding = _ref7.padding,
+    props = _objectWithoutProperties(_ref7, _excluded7);
+  var _useCardData7 = useCardData(),
+    cardData = _useCardData7.data;
+  if (!cardData) return null;
+  return jsx(Flex, _objectSpread2(_objectSpread2({
+    bg: backgroundColor || safeGet(cardData, 'bodyDriver.backgroundColor', '#f9fafb'),
+    borderRadius: borderRadius || safeGet(cardData, 'bodyDriver.borderRadius', '0.75rem'),
+    p: padding || safeGet(cardData, 'bodyDriver.padding', '1rem'),
+    display: safeGet(cardData, 'bodyDriver.display', 'flex'),
+    alignItems: safeGet(cardData, 'bodyDriver.alignItems', 'center'),
+    gap: safeGet(cardData, 'bodyDriver.gap', '1rem')
+  }, props), {}, {
+    children: children
+  }));
+};
+var CardBodyImage = function CardBodyImage(_ref8) {
+  var src = _ref8.src,
+    alt = _ref8.alt,
+    width = _ref8.width,
+    height = _ref8.height,
+    borderRadius = _ref8.borderRadius,
+    props = _objectWithoutProperties(_ref8, _excluded8);
+  var _useCardData8 = useCardData(),
+    cardData = _useCardData8.data;
+  if (!cardData) return null;
+  return jsx(Image, _objectSpread2({
+    src: src || safeGet(cardData, 'bodyImage.src', 'https://plus.unsplash.com/premium_photo-1689977927774-401b12d137d6?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OXx8bWFufGVufDB8fDB8fHww'),
+    alt: alt || safeGet(cardData, 'bodyImage.alt', 'Driver'),
+    width: width || safeGet(cardData, 'bodyImage.width', '3.5rem'),
+    height: height || safeGet(cardData, 'bodyImage.height', '3.5rem'),
+    borderRadius: borderRadius || safeGet(cardData, 'bodyImage.borderRadius', '50%'),
+    objectFit: safeGet(cardData, 'bodyImage.objectFit', 'cover')
+  }, props));
+};
+var CardBodyInfo = function CardBodyInfo(_ref9) {
+  var children = _ref9.children,
+    flexGrow = _ref9.flexGrow,
+    props = _objectWithoutProperties(_ref9, _excluded9);
+  var _useCardData9 = useCardData(),
+    cardData = _useCardData9.data;
+  if (!cardData) return null;
+  return jsx(Box, _objectSpread2(_objectSpread2({
+    flex: flexGrow || safeGet(cardData, 'bodyInfo.flexGrow', '1')
+  }, props), {}, {
+    children: children
+  }));
+};
+var CardBodyName = function CardBodyName(_ref0) {
+  var children = _ref0.children,
+    fontWeight = _ref0.fontWeight,
+    color = _ref0.color,
+    props = _objectWithoutProperties(_ref0, _excluded0);
+  var _useCardData0 = useCardData(),
+    cardData = _useCardData0.data;
+  if (!cardData) return null;
+  return jsx(Text, _objectSpread2(_objectSpread2({
+    fontWeight: fontWeight || safeGet(cardData, 'bodyName.fontWeight', '600'),
+    color: color || safeGet(cardData, 'bodyName.color', '#111827')
+  }, props), {}, {
+    children: children || safeGet(cardData, 'bodyName.text', 'Jacob Jones')
+  }));
+};
+var CardBodySpan = function CardBodySpan(_ref1) {
+  var children = _ref1.children,
+    fontSize = _ref1.fontSize,
+    color = _ref1.color,
+    props = _objectWithoutProperties(_ref1, _excluded1);
+  var _useCardData1 = useCardData(),
+    cardData = _useCardData1.data;
+  if (!cardData) return null;
+  return jsx(Text, _objectSpread2(_objectSpread2({
+    fontSize: fontSize || safeGet(cardData, 'bodySpan.fontSize', '0.875rem'),
+    color: color || safeGet(cardData, 'bodySpan.color', '#6b7280')
+  }, props), {}, {
+    children: children || safeGet(cardData, 'bodySpan.text', 'Omnitrans • SPX-8328')
+  }));
+};
+var CardBodyActions = function CardBodyActions(_ref10) {
+  var children = _ref10.children,
+    props = _objectWithoutProperties(_ref10, _excluded10);
+  var _useCardData10 = useCardData(),
+    cardData = _useCardData10.data;
+  if (!cardData) return null;
+  return jsx(Flex, _objectSpread2(_objectSpread2({
+    gap: safeGet(cardData, 'bodyActions.gap', '0.5rem')
+  }, props), {}, {
+    children: children
+  }));
+};
+// Action Button Components
+var CardBodyActionButton = function CardBodyActionButton(_ref11) {
+  var children = _ref11.children,
+    _ref11$variant = _ref11.variant,
+    variant = _ref11$variant === void 0 ? "outline" : _ref11$variant,
+    backgroundColor = _ref11.backgroundColor,
+    color = _ref11.color,
+    hoverBackgroundColor = _ref11.hoverBackgroundColor,
+    border = _ref11.border,
+    _ref11$padding = _ref11.padding,
+    padding = _ref11$padding === void 0 ? 2 : _ref11$padding,
+    _ref11$borderRadius = _ref11.borderRadius,
+    borderRadius = _ref11$borderRadius === void 0 ? "full" : _ref11$borderRadius,
+    onClick = _ref11.onClick,
+    props = _objectWithoutProperties(_ref11, _excluded11);
+  var _useCardData11 = useCardData(),
+    cardData = _useCardData11.data;
+  if (!cardData) return null;
+  // Use custom props if provided, otherwise use variant-based styles
+  var getButtonStyles = function getButtonStyles() {
+    // If custom props are provided, use them
+    if (backgroundColor || color || hoverBackgroundColor || border) {
+      return {
+        bg: backgroundColor,
+        color: color,
+        border: border,
+        borderColor: border === "none" ? "transparent" : "gray.300",
+        _hover: {
+          bg: hoverBackgroundColor
+        }
+      };
+    }
+    // Otherwise use variant-based styles
+    if (variant === "solid") {
+      return {
+        bg: "#1f2937",
+        // gray-800
+        color: "white",
+        border: "none",
+        _hover: {
+          bg: "#374151" // gray-700
+        }
+      };
+    } else {
+      return {
+        bg: "transparent",
+        color: "gray.600",
+        border: "1px solid",
+        borderColor: "gray.300",
+        _hover: {
+          bg: "gray.100"
+        }
+      };
+    }
+  };
+  var styles = getButtonStyles();
+  return jsx(Button, _objectSpread2(_objectSpread2({
+    p: padding,
+    borderRadius: borderRadius,
+    bg: styles.bg,
+    color: styles.color,
+    border: styles.border,
+    borderColor: styles.borderColor,
+    transition: "all 0.2s",
+    _hover: styles._hover,
+    onClick: onClick,
+    minW: "auto",
+    h: "auto",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  }, props), {}, {
+    children: children
+  }));
+};
+var CardBodyActionIcon = function CardBodyActionIcon(_ref12) {
+  var children = _ref12.children,
+    _ref12$width = _ref12.width,
+    width = _ref12$width === void 0 ? 5 : _ref12$width,
+    _ref12$height = _ref12.height,
+    height = _ref12$height === void 0 ? 5 : _ref12$height,
+    color = _ref12.color,
+    props = _objectWithoutProperties(_ref12, _excluded12);
+  return jsx(Box, _objectSpread2(_objectSpread2({
+    width: width,
+    height: height,
+    color: color,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  }, props), {}, {
+    children: children
+  }));
+};
+// Card Route
+var CardRoute = function CardRoute(_ref13) {
+  var children = _ref13.children,
+    paddingX = _ref13.paddingX,
+    paddingBottom = _ref13.paddingBottom,
+    props = _objectWithoutProperties(_ref13, _excluded13);
+  var _useCardData12 = useCardData(),
+    cardData = _useCardData12.data;
+  if (!cardData) return null;
+  return jsx(Box, _objectSpread2(_objectSpread2({
+    px: paddingX || safeGet(cardData, 'route.paddingX', '1.5rem'),
+    pb: paddingBottom || safeGet(cardData, 'route.paddingBottom', '1.5rem')
+  }, props), {}, {
+    children: children
+  }));
+};
+var CardRouteContainer = function CardRouteContainer(_ref14) {
+  var children = _ref14.children,
+    gap = _ref14.gap,
+    props = _objectWithoutProperties(_ref14, _excluded14);
+  var _useCardData13 = useCardData(),
+    cardData = _useCardData13.data;
+  if (!cardData) return null;
+  return jsx(VStack, _objectSpread2(_objectSpread2({
+    spacing: gap || safeGet(cardData, 'routeContainer.gap', '1.5rem'),
+    align: "stretch"
+  }, props), {}, {
+    children: children
+  }));
+};
+var CardRouteItem = function CardRouteItem(_ref15) {
+  var children = _ref15.children,
+    icon = _ref15.icon,
+    _ref15$iconBackground = _ref15.iconBackgroundColor,
+    iconBackgroundColor = _ref15$iconBackground === void 0 ? "blue.50" : _ref15$iconBackground,
+    title = _ref15.title,
+    subtitle = _ref15.subtitle,
+    props = _objectWithoutProperties(_ref15, _excluded15);
+  var _useCardData14 = useCardData(),
+    cardData = _useCardData14.data;
+  if (!cardData) return null;
+  return jsxs(HStack, _objectSpread2(_objectSpread2({
+    align: "flex-start",
+    spacing: 4
+  }, props), {}, {
+    children: [jsx(Box, {
+      mt: 0.5,
+      flexShrink: 0,
+      children: jsx(Flex, {
+        width: 8,
+        height: 8,
+        borderRadius: "full",
+        backgroundColor: iconBackgroundColor,
+        align: "center",
+        justify: "center",
+        children: icon
+      })
+    }), jsx(Box, {
+      flex: "1",
+      children: children || jsxs(Fragment, {
+        children: [jsx(Text, {
+          fontWeight: "semibold",
+          color: "gray.900",
+          fontSize: "md",
+          lineHeight: "short",
+          mb: 1,
+          children: title || safeGet(cardData, 'pickup.title', '456 Elm Street, Springfield')
+        }), jsx(Text, {
+          fontSize: "sm",
+          color: "gray.500",
+          lineHeight: "short",
+          children: subtitle || safeGet(cardData, 'pickup.subtitle', 'Pickup point')
+        })]
+      })
+    })]
+  }));
+};
+// Card Payment
+var CardPayment = function CardPayment(_ref16) {
+  var children = _ref16.children,
+    paddingX = _ref16.paddingX,
+    paddingBottom = _ref16.paddingBottom,
+    props = _objectWithoutProperties(_ref16, _excluded16);
+  var _useCardData15 = useCardData(),
+    cardData = _useCardData15.data;
+  if (!cardData) return null;
+  return jsx(Box, _objectSpread2(_objectSpread2({
+    px: paddingX || safeGet(cardData, 'payment.paddingX', '1.5rem'),
+    pb: paddingBottom || safeGet(cardData, 'payment.paddingBottom', '1.5rem')
+  }, props), {}, {
+    children: children
+  }));
+};
+var CardPaymentContainer = function CardPaymentContainer(_ref17) {
+  var children = _ref17.children,
+    backgroundColor = _ref17.backgroundColor,
+    borderRadius = _ref17.borderRadius,
+    padding = _ref17.padding,
+    props = _objectWithoutProperties(_ref17, _excluded17);
+  var _useCardData16 = useCardData(),
+    cardData = _useCardData16.data;
+  if (!cardData) return null;
+  return jsx(Box, _objectSpread2(_objectSpread2({
+    bg: backgroundColor || safeGet(cardData, 'paymentContainer.backgroundColor', '#111827'),
+    borderRadius: borderRadius || safeGet(cardData, 'paymentContainer.borderRadius', '0.75rem'),
+    p: padding || safeGet(cardData, 'paymentContainer.padding', '1rem')
+  }, props), {}, {
+    children: children
+  }));
+};
+var CardPaymentContent = function CardPaymentContent(_ref18) {
+  var children = _ref18.children,
+    props = _objectWithoutProperties(_ref18, _excluded18);
+  return jsx(Flex, _objectSpread2(_objectSpread2({
+    align: "center",
+    gap: 4
+  }, props), {}, {
+    children: children
+  }));
+};
+var CardPaymentIconContainer = function CardPaymentIconContainer(_ref19) {
+  var children = _ref19.children,
+    _ref19$width = _ref19.width,
+    width = _ref19$width === void 0 ? 12 : _ref19$width,
+    _ref19$height = _ref19.height,
+    height = _ref19$height === void 0 ? 12 : _ref19$height,
+    _ref19$backgroundColo = _ref19.backgroundColor,
+    backgroundColor = _ref19$backgroundColo === void 0 ? "gray.800" : _ref19$backgroundColo,
+    props = _objectWithoutProperties(_ref19, _excluded19);
+  return jsx(Flex, _objectSpread2(_objectSpread2({
+    width: width,
+    height: height,
+    borderRadius: "full",
+    backgroundColor: backgroundColor,
+    align: "center",
+    justify: "center"
+  }, props), {}, {
+    children: children
+  }));
+};
+var CardPaymentDetails = function CardPaymentDetails(_ref20) {
+  var children = _ref20.children,
+    props = _objectWithoutProperties(_ref20, _excluded20);
+  return jsx(Box, _objectSpread2(_objectSpread2({}, props), {}, {
+    children: children
+  }));
+};
+var CardNumber = function CardNumber(_ref21) {
+  var children = _ref21.children,
+    color = _ref21.color,
+    fontWeight = _ref21.fontWeight,
+    fontSize = _ref21.fontSize,
+    props = _objectWithoutProperties(_ref21, _excluded21);
+  var _useCardData17 = useCardData(),
+    cardData = _useCardData17.data;
+  if (!cardData) return null;
+  return jsx(Text, _objectSpread2(_objectSpread2({
+    color: color || safeGet(cardData, 'cardNumber.color', '#ffffff'),
+    fontWeight: fontWeight || safeGet(cardData, 'cardNumber.fontWeight', '500'),
+    fontSize: fontSize || safeGet(cardData, 'cardNumber.fontSize', '1.125rem')
+  }, props), {}, {
+    children: children || safeGet(cardData, 'cardNumber.text', '**** 7493')
+  }));
+};
+var CardType = function CardType(_ref22) {
+  var children = _ref22.children,
+    fontSize = _ref22.fontSize,
+    color = _ref22.color,
+    props = _objectWithoutProperties(_ref22, _excluded22);
+  var _useCardData18 = useCardData(),
+    cardData = _useCardData18.data;
+  if (!cardData) return null;
+  return jsx(Text, _objectSpread2(_objectSpread2({
+    fontSize: fontSize || safeGet(cardData, 'cardType.fontSize', '0.875rem'),
+    color: color || safeGet(cardData, 'cardType.color', '#d1d5db')
+  }, props), {}, {
+    children: children || safeGet(cardData, 'cardType.text', 'Credit card')
+  }));
+};
+// Card Total Section
+var CardTotalSection = function CardTotalSection(_ref23) {
+  var children = _ref23.children,
+    paddingX = _ref23.paddingX,
+    paddingY = _ref23.paddingY,
+    _ref23$borderTop = _ref23.borderTop,
+    borderTop = _ref23$borderTop === void 0 ? "1px" : _ref23$borderTop,
+    _ref23$borderColor = _ref23.borderColor,
+    borderColor = _ref23$borderColor === void 0 ? "gray.200" : _ref23$borderColor,
+    props = _objectWithoutProperties(_ref23, _excluded23);
+  var _useCardData19 = useCardData(),
+    cardData = _useCardData19.data;
+  if (!cardData) return null;
+  return jsx(Box, _objectSpread2(_objectSpread2({
+    px: paddingX || safeGet(cardData, 'totalSection.paddingX', '1.5rem'),
+    py: paddingY || safeGet(cardData, 'totalSection.paddingY', '1.5rem'),
+    borderTop: borderTop,
+    borderColor: borderColor
+  }, props), {}, {
+    children: children
+  }));
+};
+var CardTotalContent = function CardTotalContent(_ref24) {
+  var children = _ref24.children,
+    props = _objectWithoutProperties(_ref24, _excluded24);
+  return jsx(Flex, _objectSpread2(_objectSpread2({
+    justify: "space-between",
+    align: "center"
+  }, props), {}, {
+    children: children
+  }));
+};
+var CardTotalLabel = function CardTotalLabel(_ref25) {
+  var children = _ref25.children,
+    color = _ref25.color,
+    fontWeight = _ref25.fontWeight,
+    props = _objectWithoutProperties(_ref25, _excluded25);
+  var _useCardData20 = useCardData(),
+    cardData = _useCardData20.data;
+  if (!cardData) return null;
+  return jsx(Text, _objectSpread2(_objectSpread2({
+    color: color || safeGet(cardData, 'totalLabel.color', '#111827'),
+    fontWeight: fontWeight || safeGet(cardData, 'totalLabel.fontWeight', '500')
+  }, props), {}, {
+    children: children || safeGet(cardData, 'totalLabel.text', 'Total orders')
+  }));
+};
+var CardTotalAmount = function CardTotalAmount(_ref26) {
+  var children = _ref26.children,
+    fontSize = _ref26.fontSize,
+    fontWeight = _ref26.fontWeight,
+    color = _ref26.color,
+    props = _objectWithoutProperties(_ref26, _excluded26);
+  var _useCardData21 = useCardData(),
+    cardData = _useCardData21.data;
+  if (!cardData) return null;
+  return jsx(Text, _objectSpread2(_objectSpread2({
+    fontSize: fontSize || safeGet(cardData, 'totalAmount.fontSize', '1.25rem'),
+    fontWeight: fontWeight || safeGet(cardData, 'totalAmount.fontWeight', '700'),
+    color: color || safeGet(cardData, 'totalAmount.color', '#111827')
+  }, props), {}, {
+    children: children || safeGet(cardData, 'totalAmount.text', '$5.75')
+  }));
+};
+// Main Card component
+var Card = function Card(_ref27) {
+  var children = _ref27.children,
+    width = _ref27.width,
+    maxWidth = _ref27.maxWidth,
+    fontFamily = _ref27.fontFamily,
+    props = _objectWithoutProperties(_ref27, _excluded27);
+  var _useCardData22 = useCardData(),
+    cardData = _useCardData22.data;
+  if (!cardData) return null;
+  return jsx(Box, _objectSpread2(_objectSpread2({
+    width: width || safeGet(cardData, 'card.width', '100%'),
+    maxWidth: maxWidth || safeGet(cardData, 'card.maxWidth', '32rem'),
+    fontFamily: fontFamily || safeGet(cardData, 'card.fontFamily', 'Inter, system-ui, sans-serif')
+  }, props), {}, {
+    children: children
+  }));
+};
+// Attach all subcomponents to Card
+Card.Container = CardContainer;
+Card.Header = CardHeader;
+Card.HeaderContent = CardHeaderContent;
+Card.HeaderTitle = CardHeaderTitle;
+Card.HeaderTimer = CardHeaderTimer;
+Card.Body = CardBody;
+Card.BodyDriver = CardBodyDriver;
+Card.BodyImage = CardBodyImage;
+Card.BodyInfo = CardBodyInfo;
+Card.BodyName = CardBodyName;
+Card.BodySpan = CardBodySpan;
+Card.BodyActions = CardBodyActions;
+Card.BodyActionButton = CardBodyActionButton;
+Card.BodyActionIcon = CardBodyActionIcon;
+Card.Route = CardRoute;
+Card.RouteContainer = CardRouteContainer;
+Card.RouteItem = CardRouteItem;
+Card.Payment = CardPayment;
+Card.PaymentContainer = CardPaymentContainer;
+Card.PaymentContent = CardPaymentContent;
+Card.PaymentIconContainer = CardPaymentIconContainer;
+Card.PaymentDetails = CardPaymentDetails;
+Card.Number = CardNumber;
+Card.Type = CardType;
+Card.TotalSection = CardTotalSection;
+Card.TotalContent = CardTotalContent;
+Card.TotalLabel = CardTotalLabel;
+Card.TotalAmount = CardTotalAmount;
+
+var DefaultCard = function DefaultCard() {
+  return jsx(Card, {
+    children: jsxs(Card.Container, {
+      children: [jsx(Card.Header, {
+        children: jsxs(Card.HeaderContent, {
+          children: [jsx(Card.HeaderTitle, {
+            children: "Arrived in"
+          }), jsx(Card.HeaderTimer, {
+            children: "00:05:20"
+          })]
+        })
+      }), jsx(Card.Body, {
+        children: jsxs(Card.BodyDriver, {
+          children: [jsx(Card.BodyImage, {}), jsxs(Card.BodyInfo, {
+            children: [jsx(Card.BodyName, {
+              children: "Jacob Jones"
+            }), jsx(Card.BodySpan, {
+              children: "Omnitrans \u2022 SPX-8328"
+            })]
+          }), jsxs(Card.BodyActions, {
+            children: [jsx(Card.BodyActionButton, {
+              children: jsx(Card.BodyActionIcon, {
+                children: jsx("svg", {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  className: "h-5 w-5 text-gray-600",
+                  viewBox: "0 0 20 20",
+                  fill: "currentColor",
+                  children: jsx("path", {
+                    d: "M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.041 11.041 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C9.083 18 3 11.917 3 6V3z"
+                  })
+                })
+              })
+            }), jsx(Card.BodyActionButton, {
+              backgroundColor: "gray.800",
+              color: "white",
+              hoverBackgroundColor: "gray.700",
+              border: "none",
+              children: jsx(Card.BodyActionIcon, {
+                color: "white",
+                children: jsx("svg", {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  className: "h-5 w-5",
+                  viewBox: "0 0 20 20",
+                  fill: "currentColor",
+                  children: jsx("path", {
+                    fillRule: "evenodd",
+                    d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2H9.5v-3a1 1 0 00-1-1z",
+                    clipRule: "evenodd"
+                  })
+                })
+              })
+            })]
+          })]
+        })
+      }), jsx(Card.Route, {
+        children: jsxs(Card.RouteContainer, {
+          children: [jsx(Card.RouteItem, {
+            icon: jsx("svg", {
+              xmlns: "http://www.w3.org/2000/svg",
+              className: "h-4 w-4 text-blue-600",
+              viewBox: "0 0 20 20",
+              fill: "currentColor",
+              children: jsx("path", {
+                fillRule: "evenodd",
+                d: "M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2a1 1 0 00.293.707l2.828 2.829a1 1 0 101.414-1.414L11 9.586V7z",
+                clipRule: "evenodd"
+              })
+            }),
+            iconBackgroundColor: "blue.50",
+            title: "456 Elm Street, Springfield",
+            subtitle: "Pickup point"
+          }), jsx(Card.RouteItem, {
+            icon: jsx("svg", {
+              xmlns: "http://www.w3.org/2000/svg",
+              className: "h-4 w-4 text-gray-600",
+              viewBox: "0 0 20 20",
+              fill: "currentColor",
+              children: jsx("path", {
+                fillRule: "evenodd",
+                d: "M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z",
+                clipRule: "evenodd"
+              })
+            }),
+            iconBackgroundColor: "gray.50",
+            title: "739 Main Street, Springfield",
+            subtitle: "Destination"
+          })]
+        })
+      }), jsx(Card.Payment, {
+        children: jsx(Card.PaymentContainer, {
+          children: jsxs(Card.PaymentContent, {
+            children: [jsx(Card.PaymentIconContainer, {
+              children: jsx(Card.BodyActionIcon, {
+                width: 6,
+                height: 6,
+                color: "gray.300",
+                children: jsx("svg", {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  className: "h-6 w-6 text-gray-300",
+                  viewBox: "0 0 20 20",
+                  fill: "currentColor",
+                  children: jsx("path", {
+                    d: "M4 4a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2H4zm1 4h10v2H5V8zm0 4h10v2H5v-2z"
+                  })
+                })
+              })
+            }), jsxs(Card.PaymentDetails, {
+              children: [jsx(Card.Number, {
+                children: "**** 7493"
+              }), jsx(Card.Type, {
+                children: "Credit card"
+              })]
+            })]
+          })
+        })
+      }), jsx(Card.TotalSection, {
+        children: jsxs(Card.TotalContent, {
+          children: [jsx(Card.TotalLabel, {
+            children: "Total orders"
+          }), jsx(Card.TotalAmount, {
+            children: "$5.75"
+          })]
+        })
+      })]
+    })
+  });
+};
+
+var useDynamicComponents = function useDynamicComponents() {
+  var _useStrata = useStrata(),
+    designSystem = _useStrata.designSystem,
+    syncVersion = _useStrata.syncVersion;
+  var _useState = useState(strataRegistry.getRegistry()),
+    _useState2 = _slicedToArray(_useState, 2),
+    registry = _useState2[0],
+    setRegistry = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isInitialized = _useState4[0],
+    setIsInitialized = _useState4[1];
+  // Sync components when design system changes
+  useEffect(function () {
+    console.log('🔄 useDynamicComponents: Design system changed', {
+      components: Object.keys(designSystem.components),
+      syncVersion: syncVersion
+    });
+    if (Object.keys(designSystem.components).length > 0) {
+      console.log('🔄 Syncing registry with design system...');
+      // Sync the entire registry with the current design system
+      strataRegistry.syncWithDesignSystem(designSystem);
+      setIsInitialized(true);
+    }
+  }, [designSystem, syncVersion]);
+  // Subscribe to registry changes
+  useEffect(function () {
+    console.log('🔄 useDynamicComponents: Subscribing to registry changes');
+    var unsubscribe = strataRegistry.subscribe(function (newRegistry) {
+      console.log('🔄 Registry updated:', Object.keys(newRegistry));
+      setRegistry(newRegistry);
+    });
+    return unsubscribe;
+  }, []);
+  console.log('📋 useDynamicComponents returning registry:', {
+    registryKeys: Object.keys(registry),
+    isInitialized: isInitialized,
+    hasRoboForm: 'RoboForm' in registry
+  });
+  return registry;
+};
+
+// This hook provides direct access to all components in PascalCase
+var useComponents = function useComponents() {
+  var dynamicComponents = useDynamicComponents();
+  console.log('🔄 useComponents returning:', {
+    componentCount: Object.keys(dynamicComponents).length,
+    componentNames: Object.keys(dynamicComponents)
+  });
+  return dynamicComponents;
+};
+
+var StrataDebug = function StrataDebug() {
+  var components = useComponents();
+  var _useStrata = useStrata(),
+    designSystem = _useStrata.designSystem,
+    syncStatus = _useStrata.syncStatus,
+    lastSynced = _useStrata.lastSynced,
+    syncUrl = _useStrata.syncUrl,
+    syncEnabled = _useStrata.syncEnabled,
+    syncInterval = _useStrata.syncInterval,
+    syncToken = _useStrata.syncToken,
+    snapshotCdnBase = _useStrata.snapshotCdnBase,
+    projectId = _useStrata.projectId;
+  var isCdnMode = !!(snapshotCdnBase && projectId);
+  var isLegacyMode = !isCdnMode && !!syncUrl;
+  var syncModeLabel;
+  if (!syncEnabled) {
+    syncModeLabel = '❌ Disabled';
+  } else if (isCdnMode) {
+    syncModeLabel = '✅ CDN Snapshot';
+  } else {
+    syncModeLabel = '⚠️ Legacy (3 requests/poll)';
+  }
+  return jsxs("div", {
+    style: {
+      padding: '20px',
+      border: '1px solid #ccc',
+      margin: '10px'
+    },
+    children: [jsx("h3", {
+      children: "Dynamic Components Debug"
+    }), jsxs("p", {
+      children: [jsx("strong", {
+        children: "Sync Status:"
+      }), " ", syncStatus]
+    }), jsxs("p", {
+      children: [jsx("strong", {
+        children: "Sync Mode:"
+      }), " ", syncModeLabel]
+    }), syncEnabled && isCdnMode && jsxs(Fragment, {
+      children: [jsxs("p", {
+        children: [jsx("strong", {
+          children: "Project ID:"
+        }), " ", projectId]
+      }), jsxs("p", {
+        children: [jsx("strong", {
+          children: "Snapshot URL:"
+        }), " ", "".concat(snapshotCdnBase, "/snapshots/").concat(projectId, "/strata.json")]
+      }), jsxs("p", {
+        children: [jsx("strong", {
+          children: "Token auth:"
+        }), " ", syncToken ? '✅ Present' : '❌ None']
+      }), jsxs("p", {
+        children: [jsx("strong", {
+          children: "Sync interval:"
+        }), " ", syncInterval, "ms"]
+      })]
+    }), syncEnabled && isLegacyMode && jsxs(Fragment, {
+      children: [jsxs("p", {
+        children: [jsx("strong", {
+          children: "Sync URL:"
+        }), " ", syncUrl]
+      }), jsxs("p", {
+        children: [jsx("strong", {
+          children: "Token auth:"
+        }), " ", syncToken ? '✅ Present' : '❌ None']
+      }), jsxs("p", {
+        children: [jsx("strong", {
+          children: "Sync interval:"
+        }), " ", syncInterval, "ms"]
+      })]
+    }), jsxs("p", {
+      children: [jsx("strong", {
+        children: "Last Synced:"
+      }), " ", (lastSynced === null || lastSynced === void 0 ? void 0 : lastSynced.toLocaleTimeString()) || 'Never']
+    }), jsxs("p", {
+      children: [jsx("strong", {
+        children: "Raw Components in Design System:"
+      }), " ", Object.keys(designSystem.components).join(', ') || 'None']
+    }), jsxs("p", {
+      children: [jsx("strong", {
+        children: "Components in Registry (PascalCase):"
+      }), " ", Object.keys(components).join(', ') || 'None']
+    }), jsxs("div", {
+      style: {
+        marginTop: '10px',
+        padding: '10px',
+        backgroundColor: '#f5f5f5'
+      },
+      children: [jsx("h4", {
+        children: "Component Conversion Map:"
+      }), jsx("ul", {
+        children: Object.keys(designSystem.components).map(function (originalName) {
+          var pascalName = Object.keys(components).find(function (key) {
+            return key.toLowerCase() === originalName.toLowerCase().replace(/[-_]/g, '');
+          });
+          return jsxs("li", {
+            children: [jsx("code", {
+              children: originalName
+            }), " \u2192 ", jsx("code", {
+              children: pascalName || 'Not converted'
+            })]
+          }, originalName);
+        })
+      })]
+    }), Object.keys(components).length === 0 && jsx("div", {
+      style: {
+        color: 'orange'
+      },
+      children: "No components in registry. Check if sync is working."
+    })]
+  });
+};
+
+//working
+// "use client";
+// import { useDynamicComponents } from './useDynamicComponents';
+// export const useComponent = (componentName: string) => {
+//   const dynamicComponents = useDynamicComponents();
+//   // Try exact match first
+//   if (dynamicComponents[componentName]) {
+//     return dynamicComponents[componentName];
+//   }
+//   // Try PascalCase
+//   const pascalCaseName = componentName
+//     .split('-')
+//     .map(part => part.charAt(0).toUpperCase() + part.slice(1))
+//     .join('');
+//   if (dynamicComponents[pascalCaseName]) {
+//     return dynamicComponents[pascalCaseName];
+//   }
+//   // Try camelCase
+//   const camelCaseName = componentName
+//     .split('-')
+//     .map((part, index) => index === 0 ? part : part.charAt(0).toUpperCase() + part.slice(1))
+//     .join('');
+//   return dynamicComponents[camelCaseName];
+// };
+// working
+var useComponent = function useComponent(componentName) {
+  var dynamicComponents = useDynamicComponents();
+  // Try exact match first
+  if (dynamicComponents[componentName]) {
+    return dynamicComponents[componentName];
+  }
+  // Try PascalCase conversion
+  var toPascalCase = function toPascalCase(str) {
+    return str.split(/[-_]/).map(function (part) {
+      return part.charAt(0).toUpperCase() + part.slice(1).toLowerCase();
+    }).join('');
+  };
+  var pascalCaseName = toPascalCase(componentName);
+  if (dynamicComponents[pascalCaseName]) {
+    return dynamicComponents[pascalCaseName];
+  }
+  console.warn("Component \"".concat(componentName, "\" not found. Available:"), Object.keys(dynamicComponents));
+  return null;
+};
+
+var _excluded = ["name", "children"],
+  _excluded2 = ["formName", "children"];
+// This component automatically imports and renders any dynamic component
+var DynamicComponent = function DynamicComponent(_ref) {
+  var name = _ref.name,
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var components = useComponents();
+  var Component = components[name];
+  if (!Component) {
+    console.warn("Component \"".concat(name, "\" not found in registry. Available: ").concat(Object.keys(components).join(', ')));
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(Component, props, children);
+};
+// Helper component for common patterns
+var AutoForm = function AutoForm(_ref2) {
+  var _ref2$formName = _ref2.formName,
+    formName = _ref2$formName === void 0 ? 'Form' : _ref2$formName,
+    children = _ref2.children,
+    props = _objectWithoutProperties(_ref2, _excluded2);
+  var components = useComponents();
+  var FormComponent = components[formName] || components['Form'];
+  if (!FormComponent) {
+    return jsxs("div", {
+      children: ["Form component \"", formName, "\" not found"]
+    });
+  }
+  return /*#__PURE__*/React.createElement(FormComponent, props, children);
+};
+
+export { AutoForm, Card, DefaultCard, DynamicComponent, StrataComponentFactory, StrataDebug, StrataProvider, strataRegistry, useComponent, useComponents, useDynamicComponents, useStrata };
+//# sourceMappingURL=index.esm.js.map