@vuu-ui/vuu-utils 0.8.17-debug → 0.8.18-debug

package/cjs/index.js

@@ -38,6 +38,9 @@ __export(src_exports, {
   ArrowLeft: () => ArrowLeft,
   ArrowRight: () => ArrowRight,
   ArrowUp: () => ArrowUp,
+  DEFAULT_DENSITY: () => DEFAULT_DENSITY,
+  DEFAULT_THEME: () => DEFAULT_THEME,
+  DEFAULT_THEME_MODE: () => DEFAULT_THEME_MODE,
   DOWN1: () => DOWN1,
   DOWN2: () => DOWN2,
   DataWindow: () => DataWindow,
@@ -49,12 +52,16 @@ __export(src_exports, {
   KeySet: () => KeySet,
   MEASURES: () => MEASURES,
   NULL_RANGE: () => NULL_RANGE,
+  NoFilter: () => NoFilter,
+  NoSort: () => NoSort,
   PageDown: () => PageDown,
   PageUp: () => PageUp,
   RangeMonitor: () => RangeMonitor,
   RowSelected: () => RowSelected,
   Space: () => Space2,
   Tab: () => Tab,
+  ThemeContext: () => ThemeContext,
+  ThemeProvider: () => ThemeProvider,
   UP1: () => UP1,
   UP2: () => UP2,
   WindowRange: () => WindowRange,
@@ -69,8 +76,11 @@ __export(src_exports, {
   applySortToColumns: () => applySortToColumns,
   boxContainsPoint: () => boxContainsPoint,
   buildColumnMap: () => buildColumnMap,
+  columnsChanged: () => columnsChanged,
+  configChanged: () => configChanged,
   createEl: () => createEl,
   debounce: () => debounce,
+  defaultPatternsByType: () => defaultPatternsByType,
   defaultValueFormatter: () => defaultValueFormatter,
   deselectItem: () => deselectItem,
   dispatchCustomEvent: () => dispatchCustomEvent,
@@ -78,7 +88,9 @@ __export(src_exports, {
   expandSelection: () => expandSelection,
   extractFilterForColumn: () => extractFilterForColumn,
   extractGroupColumn: () => extractGroupColumn,
+  fallbackDateTimePattern: () => fallbackDateTimePattern,
   filterAsQuery: () => filterAsQuery,
+  filterChanged: () => filterChanged,
   filterValue: () => filterValue,
   findColumn: () => findColumn,
   flattenColumnGroup: () => flattenColumnGroup,
@@ -95,6 +107,8 @@ __export(src_exports, {
   getCellRendererOptions: () => getCellRendererOptions,
   getClosest: () => getClosest,
   getClosestIndexItem: () => getClosestIndexItem,
+  getColumnHeaderContentRenderer: () => getColumnHeaderContentRenderer,
+  getColumnHeaderLabelRenderer: () => getColumnHeaderLabelRenderer,
   getColumnLabel: () => getColumnLabel,
   getColumnName: () => getColumnName,
   getColumnStyle: () => getColumnStyle,
@@ -121,7 +135,12 @@ __export(src_exports, {
   getUniqueId: () => getUniqueId,
   getUrlParameter: () => getUrlParameter,
   getValueFormatter: () => getValueFormatter,
+  groupByChanged: () => groupByChanged,
+  hasAction: () => hasAction,
+  hasFilter: () => hasFilter,
+  hasGroupBy: () => hasGroupBy,
   hasHeadings: () => hasHeadings,
+  hasSort: () => hasSort,
   hasUrlParameter: () => hasUrlParameter,
   hasValidationRules: () => hasValidationRules,
   invariant: () => invariant,
@@ -130,10 +149,12 @@ __export(src_exports, {
   isCharacterKey: () => isCharacterKey,
   isColumnTypeRenderer: () => isColumnTypeRenderer,
   isCompleteFilter: () => isCompleteFilter,
+  isConnectionQualityMetrics: () => isConnectionQualityMetrics,
+  isConnectionStatusMessage: () => isConnectionStatusMessage,
   isDataLoading: () => isDataLoading,
-  isDateColumn: () => isDateColumn,
   isDateTimeColumn: () => isDateTimeColumn,
   isDateTimePattern: () => isDateTimePattern,
+  isErrorResponse: () => isErrorResponse,
   isFilterClause: () => isFilterClause,
   isFilteredColumn: () => isFilteredColumn,
   isGroupColumn: () => isGroupColumn,
@@ -149,6 +170,7 @@ __export(src_exports, {
   isMultiValueFilter: () => isMultiValueFilter,
   isNamedFilter: () => isNamedFilter,
   isNotHidden: () => isNotHidden,
+  isNotNullOrUndefined: () => isNotNullOrUndefined,
   isNumericColumn: () => isNumericColumn,
   isOrFilter: () => isOrFilter,
   isPinned: () => isPinned,
@@ -158,16 +180,22 @@ __export(src_exports, {
   isRowSelectedLast: () => isRowSelectedLast,
   isSelectableElement: () => isSelectableElement,
   isSelected: () => isSelected,
-  isSimpleColumnType: () => isSimpleColumnType,
   isSingleValueFilter: () => isSingleValueFilter,
+  isTableSchema: () => isTableSchema,
   isTextColumn: () => isTextColumn,
-  isTimeColumn: () => isTimeColumn,
   isTypeDescriptor: () => isTypeDescriptor,
+  isTypeaheadSuggestionProvider: () => isTypeaheadSuggestionProvider,
   isValidColumnAlignment: () => isValidColumnAlignment,
   isValidFilterClauseOp: () => isValidFilterClauseOp,
   isValidNumber: () => isValidNumber,
   isValidPinLocation: () => isValidPinLocation,
   isValueListRenderer: () => isValueListRenderer,
+  isViewportMenusAction: () => isViewportMenusAction,
+  isViewporttMessage: () => isViewporttMessage,
+  isVisualLinkCreatedAction: () => isVisualLinkCreatedAction,
+  isVisualLinkRemovedAction: () => isVisualLinkRemovedAction,
+  isVisualLinksAction: () => isVisualLinksAction,
+  isVuuFeatureAction: () => isVuuFeatureAction,
   itemToString: () => itemToString,
   itemsChanged: () => itemsChanged,
   itemsOrOrderChanged: () => itemsOrOrderChanged,
@@ -175,6 +203,7 @@ __export(src_exports, {
   lastWord: () => lastWord,
   logger: () => logger,
   mapSortCriteria: () => mapSortCriteria,
+  messageHasResult: () => messageHasResult,
   metadataKeys: () => metadataKeys,
   moveColumnTo: () => moveColumnTo,
   moveItem: () => moveItem,
@@ -200,16 +229,22 @@ __export(src_exports, {
   sortPinnedColumns: () => sortPinnedColumns,
   stripFilterFromColumns: () => stripFilterFromColumns,
   subscribedOnly: () => subscribedOnly,
-  takeScreenshot: () => takeScreenshot,
+  supportedDateTimePatterns: () => supportedDateTimePatterns,
   throttle: () => throttle,
   toColumnDescriptor: () => toColumnDescriptor,
   toDataSourceColumns: () => toDataSourceColumns,
   updateColumn: () => updateColumn,
+  updateColumnFormatting: () => updateColumnFormatting,
   updateColumnRenderProps: () => updateColumnRenderProps,
   updateColumnType: () => updateColumnType,
+  useId: () => useId,
+  useLayoutEffectSkipFirst: () => useLayoutEffectSkipFirst,
+  useThemeAttributes: () => useThemeAttributes,
   uuid: () => uuid,
+  vanillaConfig: () => vanillaConfig,
   virtualRowPositioning: () => virtualRowPositioning,
   visibleColumnAtIndex: () => visibleColumnAtIndex,
+  withConfigDefaults: () => withConfigDefaults,
   withinRange: () => withinRange,
   wordify: () => wordify
 });
@@ -401,9 +436,7 @@ var isNumericColumn = ({ serverDataType, type }) => {
   }
   return false;
 };
-var isDateColumn = ({ type }) => (isTypeDescriptor(type) ? type.name : type) === "date";
-var isTimeColumn = ({ type }) => (isTypeDescriptor(type) ? type.name : type) === "time";
-var isDateTimeColumn = (column) => isDateColumn(column) || isTimeColumn(column);
+var isDateTimeColumn = (column) => (isTypeDescriptor(column.type) ? column.type.name : column.type) === "date/time";
 var isPinned = (column) => typeof column.pin === "string";
 var hasHeadings = (column) => Array.isArray(column.heading) && column.heading.length > 0;
 var isResizing = (column) => column.resizing;
@@ -411,9 +444,6 @@ var isTextColumn = ({ serverDataType }) => serverDataType === void 0 ? false : s
 var toColumnDescriptor = (name) => ({
   name
 });
-var isSimpleColumnType = (value) => typeof value === "string" && ["string", "number", "boolean", "json", "date", "time", "checkbox"].includes(
-  value
-);
 var isTypeDescriptor = (type) => typeof type !== "undefined" && typeof type !== "string";
 var EMPTY_COLUMN_MAP = {};
 var isColumnTypeRenderer = (renderer) => typeof (renderer == null ? void 0 : renderer.name) !== "undefined";
@@ -495,14 +525,14 @@ function extractGroupColumn(columns, groupBy, confirmed = true) {
     const flattenedColumns = flattenColumnGroup(columns);
     const [groupedColumns, rest] = flattenedColumns.reduce(
       (result, column, i) => {
-        const [g, r] = result;
+        const [g, r2] = result;
         if (groupBy.includes(column.name)) {
           g.push({
             ...column,
             originalIdx: i
           });
         } else {
-          r.push(column);
+          r2.push(column);
         }
         return result;
       },
@@ -841,45 +871,20 @@ var getDefaultColumnType = (serverDataType) => {
       return "string";
   }
 };
-var updateColumnType = (column, formatting) => {
+var updateColumnFormatting = (column, formatting) => {
   const { serverDataType, type = getDefaultColumnType(serverDataType) } = column;
-  if (typeof type === "string" || type === void 0) {
-    return {
-      ...column,
-      type: {
-        name: type,
-        formatting
-      }
-    };
+  if (isTypeDescriptor(type)) {
+    return { ...column, type: { ...type, formatting } };
   } else {
-    return {
-      ...column,
-      type: {
-        ...type,
-        formatting
-      }
-    };
+    return { ...column, type: { name: type, formatting } };
   }
 };
+function updateColumnType(column, type) {
+  return isTypeDescriptor(column.type) ? { ...column, type: { ...column.type, name: type } } : { ...column, type };
+}
 var updateColumnRenderProps = (column, renderer) => {
-  const { serverDataType, type } = column;
-  if (type === void 0) {
-    return {
-      ...column,
-      type: {
-        name: getDefaultColumnType(serverDataType),
-        renderer
-      }
-    };
-  } else if (isSimpleColumnType(type)) {
-    return {
-      ...column,
-      type: {
-        name: type,
-        renderer
-      }
-    };
-  } else {
+  const { serverDataType, type = getDefaultColumnType(serverDataType) } = column;
+  if (isTypeDescriptor(type)) {
     return {
       ...column,
       type: {
@@ -888,6 +893,8 @@ var updateColumnRenderProps = (column, renderer) => {
         renderer
       }
     };
+  } else {
+    return { ...column, type: { name: type, renderer } };
   }
 };
 var NO_TYPE_SETTINGS = {};
@@ -1008,6 +1015,7 @@ var getCookieValue = (name) => {
 
 // src/component-registry.ts
 var cellRenderersMap = /* @__PURE__ */ new Map();
+var columnHeaderRenderersMap = /* @__PURE__ */ new Map();
 var configEditorsMap = /* @__PURE__ */ new Map();
 var cellConfigPanelsMap = /* @__PURE__ */ new Map();
 var editRuleValidatorsMap = /* @__PURE__ */ new Map();
@@ -1022,11 +1030,17 @@ var isTypeCompatible = (rendererType, serverDataType) => {
   }
 };
 var isCellRenderer = (type, component) => type === "cell-renderer";
+var isColumnHeaderContentRenderer = (type, component) => type === "column-header-content-renderer";
+var isColumnHeaderLabelRenderer = (type, component) => type === "column-header-label-renderer";
 var isCellConfigPanel = (type, component) => type === "cell-config-panel";
 var isEditRuleValidator = (type, component) => type === "data-edit-validator";
 function registerComponent(componentName, component, type = "cell-renderer", options) {
   if (isCellRenderer(type, component)) {
     cellRenderersMap.set(componentName, component);
+  } else if (isColumnHeaderContentRenderer(type, component)) {
+    columnHeaderRenderersMap.set(componentName, component);
+  } else if (isColumnHeaderLabelRenderer(type, component)) {
+    columnHeaderRenderersMap.set(componentName, component);
   } else if (isCellConfigPanel(type, component)) {
     cellConfigPanelsMap.set(componentName, component);
   } else if (isEditRuleValidator(type, component)) {
@@ -1054,13 +1068,17 @@ var getRegisteredCellRenderers = (serverDataType) => {
   }
 };
 var getCellRendererOptions = (renderName) => optionsMap.get(renderName);
-function getCellRenderer(column, cellType = "cell") {
-  if (cellType === "cell") {
-    return dataCellRenderer(column);
-  } else if (cellType === "col-label" && column.colHeaderLabelRenderer) {
-    return cellRenderersMap.get(column.colHeaderLabelRenderer);
-  } else if (cellType === "col-content" && column.colHeaderContentRenderer) {
-    return cellRenderersMap.get(column.colHeaderContentRenderer);
+function getCellRenderer(column) {
+  return dataCellRenderer(column);
+}
+function getColumnHeaderContentRenderer(column) {
+  if (column.colHeaderContentRenderer) {
+    return columnHeaderRenderersMap.get(column.colHeaderContentRenderer);
+  }
+}
+function getColumnHeaderLabelRenderer(column) {
+  if (column.colHeaderLabelRenderer) {
+    return columnHeaderRenderersMap.get(column.colHeaderLabelRenderer);
   }
 }
 function dataCellRenderer(column) {
@@ -1130,7 +1148,7 @@ var rangeNewItems = ({ from: from1, to: to1 }, newRange) => {
   const newFullySubsumesOld = from2 < from1 && to2 > to1;
   return noOverlap || newFullySubsumesOld ? newRange : to2 > to1 ? { from: to1, to: to2 } : { from: from2, to: from1 };
 };
-var WindowRange = class {
+var WindowRange = class _WindowRange {
   constructor(from, to) {
     this.from = from;
     this.to = to;
@@ -1143,7 +1161,7 @@ var WindowRange = class {
     return from >= this.to || to < this.from ? [0, 0] : [Math.max(from, this.from), Math.min(to, this.to)];
   }
   copy() {
-    return new WindowRange(this.from, this.to);
+    return new _WindowRange(this.from, this.to);
   }
 };
 
@@ -1274,6 +1292,151 @@ function getMovingValueDirection(newValue, direction, prevValue, decimalPlaces)
   }
 }
 
+// src/datasource-action-utils.ts
+var isVisualLinksAction = (action) => action.type === "vuu-links";
+var isVisualLinkCreatedAction = (action) => action.type === "vuu-link-created";
+var isVisualLinkRemovedAction = (action) => action.type === "vuu-link-removed";
+var isViewportMenusAction = (action) => action.type === "vuu-menu";
+var isVuuFeatureAction = (action) => isViewportMenusAction(action) || isVisualLinksAction(action);
+
+// src/datasource-utils.ts
+var NoFilter = { filter: "" };
+var NoSort = { sortDefs: [] };
+var vanillaConfig = {
+  aggregations: [],
+  columns: [],
+  filter: NoFilter,
+  groupBy: [],
+  sort: NoSort
+};
+var equivalentAggregations = ({ aggregations: agg1 }, { aggregations: agg2 }) => agg1 === void 0 && (agg2 == null ? void 0 : agg2.length) === 0 || agg2 === void 0 && (agg1 == null ? void 0 : agg1.length) === 0;
+var equivalentColumns = ({ columns: cols1 }, { columns: cols2 }) => cols1 === void 0 && (cols2 == null ? void 0 : cols2.length) === 0 || cols2 === void 0 && (cols1 == null ? void 0 : cols1.length) === 0;
+var equivalentFilter = ({ filter: f1 }, { filter: f2 }) => f1 === void 0 && (f2 == null ? void 0 : f2.filter) === "" || f2 === void 0 && (f1 == null ? void 0 : f1.filter) === "";
+var equivalentGroupBy = ({ groupBy: val1 }, { groupBy: val2 }) => val1 === void 0 && (val2 == null ? void 0 : val2.length) === 0 || val2 === void 0 && (val1 == null ? void 0 : val1.length) === 0;
+var equivalentSort = ({ sort: s1 }, { sort: s2 }) => s1 === void 0 && (s2 == null ? void 0 : s2.sortDefs.length) === 0 || s2 === void 0 && (s1 == null ? void 0 : s1.sortDefs.length) === 0;
+var exactlyTheSame = (a, b) => {
+  if (a === b) {
+    return true;
+  } else if (a === void 0 && b === void 0) {
+    return true;
+  } else {
+    return false;
+  }
+};
+var aggregationsChanged = (config, newConfig) => {
+  const { aggregations: agg1 } = config;
+  const { aggregations: agg2 } = newConfig;
+  if (exactlyTheSame(agg1, agg2) || equivalentAggregations(config, newConfig)) {
+    return false;
+  } else if (agg1 === void 0 || agg2 === void 0) {
+    return true;
+  } else if (agg1.length !== agg2.length) {
+    return true;
+  }
+  return agg1.some(
+    ({ column, aggType }, i) => column !== agg2[i].column || aggType !== agg2[i].aggType
+  );
+};
+var columnsChanged = (config, newConfig) => {
+  const { columns: cols1 } = config;
+  const { columns: cols2 } = newConfig;
+  if (exactlyTheSame(cols1, cols2) || equivalentColumns(config, newConfig)) {
+    return false;
+  } else if (cols1 === void 0 || cols2 === void 0) {
+    return true;
+  } else if ((cols1 == null ? void 0 : cols1.length) !== (cols2 == null ? void 0 : cols2.length)) {
+    return true;
+  }
+  return cols1.some((column, i) => column !== (cols2 == null ? void 0 : cols2[i]));
+};
+var filterChanged = (c1, c2) => {
+  var _a, _b;
+  if (equivalentFilter(c1, c2)) {
+    return false;
+  } else {
+    return ((_a = c1.filter) == null ? void 0 : _a.filter) !== ((_b = c2.filter) == null ? void 0 : _b.filter);
+  }
+};
+var groupByChanged = (config, newConfig) => {
+  const { groupBy: g1 } = config;
+  const { groupBy: g2 } = newConfig;
+  if (exactlyTheSame(g1, g2) || equivalentGroupBy(config, newConfig)) {
+    return false;
+  } else if (g1 === void 0 || g2 === void 0) {
+    return true;
+  } else if ((g1 == null ? void 0 : g1.length) !== (g2 == null ? void 0 : g2.length)) {
+    return true;
+  }
+  return g1.some((column, i) => column !== (g2 == null ? void 0 : g2[i]));
+};
+var sortChanged = (config, newConfig) => {
+  const { sort: s1 } = config;
+  const { sort: s2 } = newConfig;
+  if (exactlyTheSame(s1, s2) || equivalentSort(config, newConfig)) {
+    return false;
+  } else if (s1 === void 0 || s2 === void 0) {
+    return true;
+  } else if ((s1 == null ? void 0 : s1.sortDefs.length) !== (s2 == null ? void 0 : s2.sortDefs.length)) {
+    return true;
+  }
+  return s1.sortDefs.some(
+    ({ column, sortType }, i) => column !== s2.sortDefs[i].column || sortType !== s2.sortDefs[i].sortType
+  );
+};
+var visualLinkChanged = () => {
+  return false;
+};
+var configChanged = (config, newConfig) => {
+  if (exactlyTheSame(config, newConfig)) {
+    return false;
+  }
+  if (config === void 0 || newConfig === void 0) {
+    return true;
+  }
+  return aggregationsChanged(config, newConfig) || columnsChanged(config, newConfig) || filterChanged(config, newConfig) || groupByChanged(config, newConfig) || sortChanged(config, newConfig) || visualLinkChanged(config, newConfig);
+};
+var hasGroupBy = (config) => config !== void 0 && config.groupBy !== void 0 && config.groupBy.length > 0;
+var hasFilter = (config) => (config == null ? void 0 : config.filter) !== void 0 && config.filter.filter.length > 0;
+var hasSort = (config) => {
+  var _a;
+  return (config == null ? void 0 : config.sort) !== void 0 && Array.isArray((_a = config.sort) == null ? void 0 : _a.sortDefs) && config.sort.sortDefs.length > 0;
+};
+var isTypeaheadSuggestionProvider = (source) => typeof source["getTypeaheadSuggestions"] === "function";
+var isTableSchema = (message) => message.type === "TABLE_META_RESP";
+var isConnectionStatusMessage = (msg) => msg.type === "connection-status";
+var isConnectionQualityMetrics = (msg) => msg.type === "connection-metrics";
+var messageHasResult = (msg) => typeof msg.result !== "undefined";
+var isErrorResponse = (response) => response !== void 0 && "error" in response;
+var hasAction = (response) => response != void 0 && "action" in response;
+var isViewporttMessage = (msg) => "viewport" in msg;
+var withConfigDefaults = (config) => {
+  if (config.aggregations && config.columns && config.filter && config.groupBy && config.sort) {
+    return config;
+  } else {
+    const {
+      aggregations = [],
+      columns = [],
+      filter = { filter: "" },
+      groupBy = [],
+      sort = { sortDefs: [] },
+      visualLink
+    } = config;
+    return {
+      aggregations,
+      columns,
+      filter,
+      groupBy,
+      sort,
+      visualLink
+    };
+  }
+};
+
+// src/ts-utils.ts
+function isNotNullOrUndefined(value) {
+  return value !== void 0 && value !== null;
+}
+
 // src/date/formatter.ts
 var baseTimeFormatOptions = {
   hour: "2-digit",
@@ -1297,9 +1460,8 @@ var baseDateFormatOptions = {
 };
 var formatConfigByDatePatterns = {
   "dd.mm.yyyy": {
-    locale: "en-GB",
-    options: { ...baseDateFormatOptions },
-    postProcessor: (s) => s.replaceAll("/", ".")
+    locale: "de-De",
+    options: { ...baseDateFormatOptions }
   },
   "dd/mm/yyyy": { locale: "en-GB", options: { ...baseDateFormatOptions } },
   "dd MMM yyyy": {
@@ -1320,15 +1482,15 @@ var formatConfigByDatePatterns = {
     options: { ...baseDateFormatOptions, month: "long" }
   }
 };
-var formatConfigByDateTimePatterns = { ...formatConfigByDatePatterns, ...formatConfigByTimePatterns };
+function getFormatConfigs(pattern) {
+  return [
+    pattern.date ? formatConfigByDatePatterns[pattern.date] : null,
+    pattern.time ? formatConfigByTimePatterns[pattern.time] : null
+  ];
+}
 function formatDate(pattern) {
-  const { locale, options, postProcessor } = formatConfigByDateTimePatterns[pattern];
-  const dateTimeFormat = Intl.DateTimeFormat(locale, options);
-  return (d) => {
-    const dateStr = dateTimeFormat.format(d);
-    console.log({ dateStr });
-    return postProcessor ? postProcessor(dateStr) : dateStr;
-  };
+  const dateTimeFormats = getFormatConfigs(pattern).filter(isNotNullOrUndefined).map((c) => Intl.DateTimeFormat(c.locale, c.options));
+  return (d) => dateTimeFormats.map((dtf) => dtf.format(d)).join(" ");
 }
 
 // src/date/types.ts
@@ -1342,9 +1504,30 @@ var supportedDatePatterns = [
   "MMMM dd, yyyy"
 ];
 var supportedTimePatterns = ["hh:mm:ss", "hh:mm:ss a"];
+var supportedDateTimePatterns = {
+  date: supportedDatePatterns,
+  time: supportedTimePatterns
+};
 var isDatePattern = (pattern) => supportedDatePatterns.includes(pattern);
 var isTimePattern = (pattern) => supportedTimePatterns.includes(pattern);
-var isDateTimePattern = (pattern) => pattern !== void 0 && (isDatePattern(pattern) || isTimePattern(pattern));
+var isDateTimePattern = (pattern) => isDatePattern(pattern == null ? void 0 : pattern.date) || isTimePattern(pattern == null ? void 0 : pattern.time);
+
+// src/date/helpers.ts
+var defaultPatternsByType = {
+  time: "hh:mm:ss",
+  date: "dd.mm.yyyy"
+};
+var fallbackDateTimePattern = {
+  date: defaultPatternsByType["date"]
+};
+function dateTimePattern(type) {
+  if (isTypeDescriptor(type)) {
+    if (type.formatting && isDateTimePattern(type.formatting.pattern)) {
+      return type.formatting.pattern;
+    }
+  }
+  return fallbackDateTimePattern;
+}
 
 // src/logging-utils.ts
 var logLevels = ["error", "warn", "info", "debug"];
@@ -1722,19 +1905,6 @@ function roundDecimal(value, align = Align.Right, decimals = 4, zeroPad, alignOn
   return integral + (fraction ? "." + fraction : "");
 }
 
-// src/date/helpers.ts
-var defaultPatternByTypes = { time: "hh:mm:ss", date: "dd.mm.yyyy" };
-function dateTimePattern(type) {
-  if (isTypeDescriptor(type)) {
-    if (type.formatting && isDateTimePattern(type.formatting.pattern)) {
-      return type.formatting.pattern;
-    }
-    return defaultPatternByTypes[type.name];
-  } else {
-    return defaultPatternByTypes[type];
-  }
-}
-
 // src/formatting-utils.ts
 var DEFAULT_NUMERIC_FORMAT = {};
 var defaultValueFormatter = (value) => value == null ? "" : typeof value === "string" ? value : value.toString();
@@ -1999,9 +2169,9 @@ var isGroupMenuItemDescriptor = (menuItem) => menuItem !== void 0 && "children"
 // src/nanoid/index.ts
 var uuid = (size2 = 21) => {
   let id = "";
-  let bytes = crypto.getRandomValues(new Uint8Array(size2));
+  const bytes = crypto.getRandomValues(new Uint8Array(size2));
   while (size2--) {
-    let byte = bytes[size2] & 63;
+    const byte = bytes[size2] & 63;
     if (byte < 36) {
       id += byte.toString(36);
     } else if (byte < 62) {
@@ -2349,777 +2519,128 @@ var wordify = (text) => {
   return `${capitalize(firstWord)} ${rest.join(" ")}`;
 };
 
-// src/url-utils.ts
-var getUrlParameter = (paramName, defaultValue) => {
-  var _a;
-  return (_a = new URL(document.location.href).searchParams.get(paramName)) != null ? _a : defaultValue;
-};
-var hasUrlParameter = (paramName) => new URL(document.location.href).searchParams.has(paramName);
-
-// ../../node_modules/html-to-image/es/util.js
-function resolveUrl(url, baseUrl) {
-  if (url.match(/^[a-z]+:\/\//i)) {
-    return url;
-  }
-  if (url.match(/^\/\//)) {
-    return window.location.protocol + url;
-  }
-  if (url.match(/^[a-z]+:/i)) {
-    return url;
-  }
-  const doc = document.implementation.createHTMLDocument();
-  const base = doc.createElement("base");
-  const a = doc.createElement("a");
-  doc.head.appendChild(base);
-  doc.body.appendChild(a);
-  if (baseUrl) {
-    base.href = baseUrl;
-  }
-  a.href = url;
-  return a.href;
-}
-var uuid2 = (() => {
-  let counter = 0;
-  const random = () => (
-    // eslint-disable-next-line no-bitwise
-    `0000${(Math.random() * 36 ** 4 << 0).toString(36)}`.slice(-4)
-  );
-  return () => {
-    counter += 1;
-    return `u${random()}${counter}`;
-  };
-})();
-function toArray(arrayLike) {
-  const arr = [];
-  for (let i = 0, l = arrayLike.length; i < l; i++) {
-    arr.push(arrayLike[i]);
-  }
-  return arr;
-}
-function px(node, styleProperty) {
-  const win = node.ownerDocument.defaultView || window;
-  const val = win.getComputedStyle(node).getPropertyValue(styleProperty);
-  return val ? parseFloat(val.replace("px", "")) : 0;
-}
-function getNodeWidth(node) {
-  const leftBorder = px(node, "border-left-width");
-  const rightBorder = px(node, "border-right-width");
-  return node.clientWidth + leftBorder + rightBorder;
-}
-function getNodeHeight(node) {
-  const topBorder = px(node, "border-top-width");
-  const bottomBorder = px(node, "border-bottom-width");
-  return node.clientHeight + topBorder + bottomBorder;
-}
-function getImageSize(targetNode, options = {}) {
-  const width = options.width || getNodeWidth(targetNode);
-  const height = options.height || getNodeHeight(targetNode);
-  return { width, height };
-}
-function getPixelRatio() {
-  let ratio;
-  let FINAL_PROCESS;
-  try {
-    FINAL_PROCESS = process;
-  } catch (e) {
-  }
-  const val = FINAL_PROCESS && FINAL_PROCESS.env ? FINAL_PROCESS.env.devicePixelRatio : null;
-  if (val) {
-    ratio = parseInt(val, 10);
-    if (Number.isNaN(ratio)) {
-      ratio = 1;
-    }
-  }
-  return ratio || window.devicePixelRatio || 1;
-}
-var canvasDimensionLimit = 16384;
-function checkCanvasDimensions(canvas) {
-  if (canvas.width > canvasDimensionLimit || canvas.height > canvasDimensionLimit) {
-    if (canvas.width > canvasDimensionLimit && canvas.height > canvasDimensionLimit) {
-      if (canvas.width > canvas.height) {
-        canvas.height *= canvasDimensionLimit / canvas.width;
-        canvas.width = canvasDimensionLimit;
-      } else {
-        canvas.width *= canvasDimensionLimit / canvas.height;
-        canvas.height = canvasDimensionLimit;
-      }
-    } else if (canvas.width > canvasDimensionLimit) {
-      canvas.height *= canvasDimensionLimit / canvas.width;
-      canvas.width = canvasDimensionLimit;
-    } else {
-      canvas.width *= canvasDimensionLimit / canvas.height;
-      canvas.height = canvasDimensionLimit;
-    }
-  }
-}
-function createImage(url) {
-  return new Promise((resolve, reject) => {
-    const img = new Image();
-    img.decode = () => resolve(img);
-    img.onload = () => resolve(img);
-    img.onerror = reject;
-    img.crossOrigin = "anonymous";
-    img.decoding = "async";
-    img.src = url;
-  });
-}
-async function svgToDataURL(svg) {
-  return Promise.resolve().then(() => new XMLSerializer().serializeToString(svg)).then(encodeURIComponent).then((html) => `data:image/svg+xml;charset=utf-8,${html}`);
-}
-async function nodeToDataURL(node, width, height) {
-  const xmlns = "http://www.w3.org/2000/svg";
-  const svg = document.createElementNS(xmlns, "svg");
-  const foreignObject = document.createElementNS(xmlns, "foreignObject");
-  svg.setAttribute("width", `${width}`);
-  svg.setAttribute("height", `${height}`);
-  svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
-  foreignObject.setAttribute("width", "100%");
-  foreignObject.setAttribute("height", "100%");
-  foreignObject.setAttribute("x", "0");
-  foreignObject.setAttribute("y", "0");
-  foreignObject.setAttribute("externalResourcesRequired", "true");
-  svg.appendChild(foreignObject);
-  foreignObject.appendChild(node);
-  return svgToDataURL(svg);
-}
-var isInstanceOfElement = (node, instance) => {
-  if (node instanceof instance)
-    return true;
-  const nodePrototype = Object.getPrototypeOf(node);
-  if (nodePrototype === null)
-    return false;
-  return nodePrototype.constructor.name === instance.name || isInstanceOfElement(nodePrototype, instance);
-};
-
-// ../../node_modules/html-to-image/es/clone-pseudos.js
-function formatCSSText(style) {
-  const content = style.getPropertyValue("content");
-  return `${style.cssText} content: '${content.replace(/'|"/g, "")}';`;
-}
-function formatCSSProperties(style) {
-  return toArray(style).map((name) => {
-    const value = style.getPropertyValue(name);
-    const priority = style.getPropertyPriority(name);
-    return `${name}: ${value}${priority ? " !important" : ""};`;
-  }).join(" ");
-}
-function getPseudoElementStyle(className, pseudo, style) {
-  const selector = `.${className}:${pseudo}`;
-  const cssText = style.cssText ? formatCSSText(style) : formatCSSProperties(style);
-  return document.createTextNode(`${selector}{${cssText}}`);
-}
-function clonePseudoElement(nativeNode, clonedNode, pseudo) {
-  const style = window.getComputedStyle(nativeNode, pseudo);
-  const content = style.getPropertyValue("content");
-  if (content === "" || content === "none") {
-    return;
-  }
-  const className = uuid2();
-  try {
-    clonedNode.className = `${clonedNode.className} ${className}`;
-  } catch (err) {
-    return;
-  }
-  const styleElement = document.createElement("style");
-  styleElement.appendChild(getPseudoElementStyle(className, pseudo, style));
-  clonedNode.appendChild(styleElement);
-}
-function clonePseudoElements(nativeNode, clonedNode) {
-  clonePseudoElement(nativeNode, clonedNode, ":before");
-  clonePseudoElement(nativeNode, clonedNode, ":after");
-}
-
-// ../../node_modules/html-to-image/es/mimes.js
-var WOFF = "application/font-woff";
-var JPEG = "image/jpeg";
-var mimes = {
-  woff: WOFF,
-  woff2: WOFF,
-  ttf: "application/font-truetype",
-  eot: "application/vnd.ms-fontobject",
-  png: "image/png",
-  jpg: JPEG,
-  jpeg: JPEG,
-  gif: "image/gif",
-  tiff: "image/tiff",
-  svg: "image/svg+xml",
-  webp: "image/webp"
-};
-function getExtension(url) {
-  const match = /\.([^./]*?)$/g.exec(url);
-  return match ? match[1] : "";
-}
-function getMimeType(url) {
-  const extension = getExtension(url).toLowerCase();
-  return mimes[extension] || "";
-}
+// src/ThemeProvider.tsx
+var import_react = require("react");
 
-// ../../node_modules/html-to-image/es/dataurl.js
-function getContentFromDataUrl(dataURL) {
-  return dataURL.split(/,/)[1];
-}
-function isDataUrl(url) {
-  return url.search(/^(data:)/) !== -1;
-}
-function makeDataUrl(content, mimeType) {
-  return `data:${mimeType};base64,${content}`;
-}
-async function fetchAsDataURL(url, init, process2) {
-  const res = await fetch(url, init);
-  if (res.status === 404) {
-    throw new Error(`Resource "${res.url}" not found`);
-  }
-  const blob = await res.blob();
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onerror = reject;
-    reader.onloadend = () => {
-      try {
-        resolve(process2({ res, result: reader.result }));
-      } catch (error) {
-        reject(error);
-      }
-    };
-    reader.readAsDataURL(blob);
-  });
-}
-var cache = {};
-function getCacheKey(url, contentType, includeQueryParams) {
-  let key = url.replace(/\?.*/, "");
-  if (includeQueryParams) {
-    key = url;
-  }
-  if (/ttf|otf|eot|woff2?/i.test(key)) {
-    key = key.replace(/.*\//, "");
-  }
-  return contentType ? `[${contentType}]${key}` : key;
+// ../../node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if ("string" == typeof e || "number" == typeof e)
+    n += e;
+  else if ("object" == typeof e)
+    if (Array.isArray(e))
+      for (t = 0; t < e.length; t++)
+        e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+    else
+      for (t in e)
+        e[t] && (n && (n += " "), n += t);
+  return n;
 }
-async function resourceToDataURL(resourceUrl, contentType, options) {
-  const cacheKey = getCacheKey(resourceUrl, contentType, options.includeQueryParams);
-  if (cache[cacheKey] != null) {
-    return cache[cacheKey];
-  }
-  if (options.cacheBust) {
-    resourceUrl += (/\?/.test(resourceUrl) ? "&" : "?") + (/* @__PURE__ */ new Date()).getTime();
-  }
-  let dataURL;
-  try {
-    const content = await fetchAsDataURL(resourceUrl, options.fetchRequestInit, ({ res, result }) => {
-      if (!contentType) {
-        contentType = res.headers.get("Content-Type") || "";
-      }
-      return getContentFromDataUrl(result);
-    });
-    dataURL = makeDataUrl(content, contentType);
-  } catch (error) {
-    dataURL = options.imagePlaceholder || "";
-    let msg = `Failed to fetch resource: ${resourceUrl}`;
-    if (error) {
-      msg = typeof error === "string" ? error : error.message;
-    }
-    if (msg) {
-      console.warn(msg);
-    }
-  }
-  cache[cacheKey] = dataURL;
-  return dataURL;
+function clsx() {
+  for (var e, t, f = 0, n = ""; f < arguments.length; )
+    (e = arguments[f++]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
 }
+var clsx_default = clsx;
 
-// ../../node_modules/html-to-image/es/clone-node.js
-async function cloneCanvasElement(canvas) {
-  const dataURL = canvas.toDataURL();
-  if (dataURL === "data:,") {
-    return canvas.cloneNode(false);
+// src/ThemeProvider.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var DEFAULT_DENSITY = "medium";
+var DEFAULT_THEME = "salt-theme";
+var DEFAULT_THEME_MODE = "light";
+var ThemeContext = (0, import_react.createContext)({
+  density: "high",
+  theme: "vuu",
+  themeMode: "light"
+});
+var DEFAULT_THEME_ATTRIBUTES = [
+  "vuu",
+  "vuu-density-high",
+  "light"
+];
+var useThemeAttributes = (themeAttributes) => {
+  const context = (0, import_react.useContext)(ThemeContext);
+  if (themeAttributes) {
+    return [
+      themeAttributes.themeClass,
+      themeAttributes.densityClass,
+      themeAttributes.dataMode
+    ];
+  } else if (context) {
+    return [
+      `${context.theme}-theme`,
+      `${context.theme}-density-${context.density}`,
+      context.themeMode
+    ];
   }
-  return createImage(dataURL);
-}
-async function cloneVideoElement(video, options) {
-  if (video.currentSrc) {
-    const canvas = document.createElement("canvas");
-    const ctx = canvas.getContext("2d");
-    canvas.width = video.clientWidth;
-    canvas.height = video.clientHeight;
-    ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-    const dataURL2 = canvas.toDataURL();
-    return createImage(dataURL2);
-  }
-  const poster = video.poster;
-  const contentType = getMimeType(poster);
-  const dataURL = await resourceToDataURL(poster, contentType, options);
-  return createImage(dataURL);
-}
-async function cloneIFrameElement(iframe) {
+  return DEFAULT_THEME_ATTRIBUTES;
+};
+var createThemedChildren = (children, theme, themeMode, density) => {
   var _a;
-  try {
-    if ((_a = iframe === null || iframe === void 0 ? void 0 : iframe.contentDocument) === null || _a === void 0 ? void 0 : _a.body) {
-      return await cloneNode(iframe.contentDocument.body, {}, true);
-    }
-  } catch (_b) {
-  }
-  return iframe.cloneNode(false);
-}
-async function cloneSingleNode(node, options) {
-  if (isInstanceOfElement(node, HTMLCanvasElement)) {
-    return cloneCanvasElement(node);
-  }
-  if (isInstanceOfElement(node, HTMLVideoElement)) {
-    return cloneVideoElement(node, options);
-  }
-  if (isInstanceOfElement(node, HTMLIFrameElement)) {
-    return cloneIFrameElement(node);
-  }
-  return node.cloneNode(false);
-}
-var isSlotElement = (node) => node.tagName != null && node.tagName.toUpperCase() === "SLOT";
-async function cloneChildren(nativeNode, clonedNode, options) {
-  var _a, _b;
-  let children = [];
-  if (isSlotElement(nativeNode) && nativeNode.assignedNodes) {
-    children = toArray(nativeNode.assignedNodes());
-  } else if (isInstanceOfElement(nativeNode, HTMLIFrameElement) && ((_a = nativeNode.contentDocument) === null || _a === void 0 ? void 0 : _a.body)) {
-    children = toArray(nativeNode.contentDocument.body.childNodes);
-  } else {
-    children = toArray(((_b = nativeNode.shadowRoot) !== null && _b !== void 0 ? _b : nativeNode).childNodes);
-  }
-  if (children.length === 0 || isInstanceOfElement(nativeNode, HTMLVideoElement)) {
-    return clonedNode;
-  }
-  await children.reduce((deferred, child) => deferred.then(() => cloneNode(child, options)).then((clonedChild) => {
-    if (clonedChild) {
-      clonedNode.appendChild(clonedChild);
-    }
-  }), Promise.resolve());
-  return clonedNode;
-}
-function cloneCSSStyle(nativeNode, clonedNode) {
-  const targetStyle = clonedNode.style;
-  if (!targetStyle) {
-    return;
-  }
-  const sourceStyle = window.getComputedStyle(nativeNode);
-  if (sourceStyle.cssText) {
-    targetStyle.cssText = sourceStyle.cssText;
-    targetStyle.transformOrigin = sourceStyle.transformOrigin;
-  } else {
-    toArray(sourceStyle).forEach((name) => {
-      let value = sourceStyle.getPropertyValue(name);
-      if (name === "font-size" && value.endsWith("px")) {
-        const reducedFont = Math.floor(parseFloat(value.substring(0, value.length - 2))) - 0.1;
-        value = `${reducedFont}px`;
-      }
-      if (isInstanceOfElement(nativeNode, HTMLIFrameElement) && name === "display" && value === "inline") {
-        value = "block";
-      }
-      if (name === "d" && clonedNode.getAttribute("d")) {
-        value = `path(${clonedNode.getAttribute("d")})`;
-      }
-      targetStyle.setProperty(name, value, sourceStyle.getPropertyPriority(name));
+  if ((0, import_react.isValidElement)(children)) {
+    return (0, import_react.cloneElement)(children, {
+      className: clsx_default(
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+        (_a = children.props) == null ? void 0 : _a.className,
+        `${theme}-theme`,
+        `${theme}-density-${density}`
+      ),
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-expect-error
+      "data-mode": themeMode
     });
+  } else {
+    console.warn(
+      `
+ThemeProvider can only apply CSS classes for theming to a single nested child element of the ThemeProvider.
+            Wrap elements with a single container`
+    );
+    return children;
   }
-}
-function cloneInputValue(nativeNode, clonedNode) {
-  if (isInstanceOfElement(nativeNode, HTMLTextAreaElement)) {
-    clonedNode.innerHTML = nativeNode.value;
-  }
-  if (isInstanceOfElement(nativeNode, HTMLInputElement)) {
-    clonedNode.setAttribute("value", nativeNode.value);
-  }
-}
-function cloneSelectValue(nativeNode, clonedNode) {
-  if (isInstanceOfElement(nativeNode, HTMLSelectElement)) {
-    const clonedSelect = clonedNode;
-    const selectedOption = Array.from(clonedSelect.children).find((child) => nativeNode.value === child.getAttribute("value"));
-    if (selectedOption) {
-      selectedOption.setAttribute("selected", "");
-    }
-  }
-}
-function decorate(nativeNode, clonedNode) {
-  if (isInstanceOfElement(clonedNode, Element)) {
-    cloneCSSStyle(nativeNode, clonedNode);
-    clonePseudoElements(nativeNode, clonedNode);
-    cloneInputValue(nativeNode, clonedNode);
-    cloneSelectValue(nativeNode, clonedNode);
-  }
-  return clonedNode;
-}
-async function ensureSVGSymbols(clone, options) {
-  const uses = clone.querySelectorAll ? clone.querySelectorAll("use") : [];
-  if (uses.length === 0) {
-    return clone;
-  }
-  const processedDefs = {};
-  for (let i = 0; i < uses.length; i++) {
-    const use = uses[i];
-    const id = use.getAttribute("xlink:href");
-    if (id) {
-      const exist = clone.querySelector(id);
-      const definition = document.querySelector(id);
-      if (!exist && definition && !processedDefs[id]) {
-        processedDefs[id] = await cloneNode(definition, options, true);
-      }
-    }
-  }
-  const nodes = Object.values(processedDefs);
-  if (nodes.length) {
-    const ns = "http://www.w3.org/1999/xhtml";
-    const svg = document.createElementNS(ns, "svg");
-    svg.setAttribute("xmlns", ns);
-    svg.style.position = "absolute";
-    svg.style.width = "0";
-    svg.style.height = "0";
-    svg.style.overflow = "hidden";
-    svg.style.display = "none";
-    const defs = document.createElementNS(ns, "defs");
-    svg.appendChild(defs);
-    for (let i = 0; i < nodes.length; i++) {
-      defs.appendChild(nodes[i]);
-    }
-    clone.appendChild(svg);
-  }
-  return clone;
-}
-async function cloneNode(node, options, isRoot) {
-  if (!isRoot && options.filter && !options.filter(node)) {
-    return null;
-  }
-  return Promise.resolve(node).then((clonedNode) => cloneSingleNode(clonedNode, options)).then((clonedNode) => cloneChildren(node, clonedNode, options)).then((clonedNode) => decorate(node, clonedNode)).then((clonedNode) => ensureSVGSymbols(clonedNode, options));
-}
-
-// ../../node_modules/html-to-image/es/embed-resources.js
-var URL_REGEX = /url\((['"]?)([^'"]+?)\1\)/g;
-var URL_WITH_FORMAT_REGEX = /url\([^)]+\)\s*format\((["']?)([^"']+)\1\)/g;
-var FONT_SRC_REGEX = /src:\s*(?:url\([^)]+\)\s*format\([^)]+\)[,;]\s*)+/g;
-function toRegex(url) {
-  const escaped = url.replace(/([.*+?^${}()|\[\]\/\\])/g, "\\$1");
-  return new RegExp(`(url\\(['"]?)(${escaped})(['"]?\\))`, "g");
-}
-function parseURLs(cssText) {
-  const urls = [];
-  cssText.replace(URL_REGEX, (raw, quotation, url) => {
-    urls.push(url);
-    return raw;
-  });
-  return urls.filter((url) => !isDataUrl(url));
-}
-async function embed(cssText, resourceURL, baseURL, options, getContentFromUrl) {
-  try {
-    const resolvedURL = baseURL ? resolveUrl(resourceURL, baseURL) : resourceURL;
-    const contentType = getMimeType(resourceURL);
-    let dataURL;
-    if (getContentFromUrl) {
-      const content = await getContentFromUrl(resolvedURL);
-      dataURL = makeDataUrl(content, contentType);
-    } else {
-      dataURL = await resourceToDataURL(resolvedURL, contentType, options);
-    }
-    return cssText.replace(toRegex(resourceURL), `$1${dataURL}$3`);
-  } catch (error) {
-  }
-  return cssText;
-}
-function filterPreferredFontFormat(str, { preferredFontFormat }) {
-  return !preferredFontFormat ? str : str.replace(FONT_SRC_REGEX, (match) => {
-    while (true) {
-      const [src, , format] = URL_WITH_FORMAT_REGEX.exec(match) || [];
-      if (!format) {
-        return "";
-      }
-      if (format === preferredFontFormat) {
-        return `src: ${src};`;
-      }
-    }
-  });
-}
-function shouldEmbed(url) {
-  return url.search(URL_REGEX) !== -1;
-}
-async function embedResources(cssText, baseUrl, options) {
-  if (!shouldEmbed(cssText)) {
-    return cssText;
-  }
-  const filteredCSSText = filterPreferredFontFormat(cssText, options);
-  const urls = parseURLs(filteredCSSText);
-  return urls.reduce((deferred, url) => deferred.then((css) => embed(css, url, baseUrl, options)), Promise.resolve(filteredCSSText));
-}
+};
+var ThemeProvider = ({
+  applyThemeClasses = false,
+  children,
+  theme: themeProp,
+  themeMode: themeModeProp,
+  density: densityProp
+}) => {
+  var _a, _b, _c;
+  const {
+    density: inheritedDensity,
+    themeMode: inheritedThemeMode,
+    theme: inheritedTheme
+  } = (0, import_react.useContext)(ThemeContext);
+  const density = (_a = densityProp != null ? densityProp : inheritedDensity) != null ? _a : DEFAULT_DENSITY;
+  const themeMode = (_b = themeModeProp != null ? themeModeProp : inheritedThemeMode) != null ? _b : DEFAULT_THEME_MODE;
+  const theme = (_c = themeProp != null ? themeProp : inheritedTheme) != null ? _c : DEFAULT_THEME;
+  const themedChildren = applyThemeClasses ? createThemedChildren(children, theme, themeMode, density) : children;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeContext.Provider, { value: { themeMode, density, theme }, children: themedChildren });
+};
+ThemeProvider.displayName = "ThemeProvider";
 
-// ../../node_modules/html-to-image/es/embed-images.js
-async function embedProp(propName, node, options) {
+// src/url-utils.ts
+var getUrlParameter = (paramName, defaultValue) => {
   var _a;
-  const propValue = (_a = node.style) === null || _a === void 0 ? void 0 : _a.getPropertyValue(propName);
-  if (propValue) {
-    const cssString = await embedResources(propValue, null, options);
-    node.style.setProperty(propName, cssString, node.style.getPropertyPriority(propName));
-    return true;
-  }
-  return false;
-}
-async function embedBackground(clonedNode, options) {
-  if (!await embedProp("background", clonedNode, options)) {
-    await embedProp("background-image", clonedNode, options);
-  }
-  if (!await embedProp("mask", clonedNode, options)) {
-    await embedProp("mask-image", clonedNode, options);
-  }
-}
-async function embedImageNode(clonedNode, options) {
-  const isImageElement = isInstanceOfElement(clonedNode, HTMLImageElement);
-  if (!(isImageElement && !isDataUrl(clonedNode.src)) && !(isInstanceOfElement(clonedNode, SVGImageElement) && !isDataUrl(clonedNode.href.baseVal))) {
-    return;
-  }
-  const url = isImageElement ? clonedNode.src : clonedNode.href.baseVal;
-  const dataURL = await resourceToDataURL(url, getMimeType(url), options);
-  await new Promise((resolve, reject) => {
-    clonedNode.onload = resolve;
-    clonedNode.onerror = reject;
-    const image = clonedNode;
-    if (image.decode) {
-      image.decode = resolve;
-    }
-    if (image.loading === "lazy") {
-      image.loading = "eager";
-    }
-    if (isImageElement) {
-      clonedNode.srcset = "";
-      clonedNode.src = dataURL;
-    } else {
-      clonedNode.href.baseVal = dataURL;
-    }
-  });
-}
-async function embedChildren(clonedNode, options) {
-  const children = toArray(clonedNode.childNodes);
-  const deferreds = children.map((child) => embedImages(child, options));
-  await Promise.all(deferreds).then(() => clonedNode);
-}
-async function embedImages(clonedNode, options) {
-  if (isInstanceOfElement(clonedNode, Element)) {
-    await embedBackground(clonedNode, options);
-    await embedImageNode(clonedNode, options);
-    await embedChildren(clonedNode, options);
-  }
-}
+  return (_a = new URL(document.location.href).searchParams.get(paramName)) != null ? _a : defaultValue;
+};
+var hasUrlParameter = (paramName) => new URL(document.location.href).searchParams.has(paramName);
 
-// ../../node_modules/html-to-image/es/apply-style.js
-function applyStyle(node, options) {
-  const { style } = node;
-  if (options.backgroundColor) {
-    style.backgroundColor = options.backgroundColor;
-  }
-  if (options.width) {
-    style.width = `${options.width}px`;
-  }
-  if (options.height) {
-    style.height = `${options.height}px`;
-  }
-  const manual = options.style;
-  if (manual != null) {
-    Object.keys(manual).forEach((key) => {
-      style[key] = manual[key];
-    });
-  }
-  return node;
-}
+// src/useId.ts
+var import_react2 = require("react");
+var vuuComponentIdCount = 0;
+var useId = (id) => (0, import_react2.useMemo)(() => id != null ? id : `vuu-${++vuuComponentIdCount}`, [id]);
 
-// ../../node_modules/html-to-image/es/embed-webfonts.js
-var cssFetchCache = {};
-async function fetchCSS(url) {
-  let cache2 = cssFetchCache[url];
-  if (cache2 != null) {
-    return cache2;
-  }
-  const res = await fetch(url);
-  const cssText = await res.text();
-  cache2 = { url, cssText };
-  cssFetchCache[url] = cache2;
-  return cache2;
-}
-async function embedFonts(data, options) {
-  let cssText = data.cssText;
-  const regexUrl = /url\(["']?([^"')]+)["']?\)/g;
-  const fontLocs = cssText.match(/url\([^)]+\)/g) || [];
-  const loadFonts = fontLocs.map(async (loc) => {
-    let url = loc.replace(regexUrl, "$1");
-    if (!url.startsWith("https://")) {
-      url = new URL(url, data.url).href;
-    }
-    return fetchAsDataURL(url, options.fetchRequestInit, ({ result }) => {
-      cssText = cssText.replace(loc, `url(${result})`);
-      return [loc, result];
-    });
-  });
-  return Promise.all(loadFonts).then(() => cssText);
-}
-function parseCSS(source) {
-  if (source == null) {
-    return [];
-  }
-  const result = [];
-  const commentsRegex = /(\/\*[\s\S]*?\*\/)/gi;
-  let cssText = source.replace(commentsRegex, "");
-  const keyframesRegex = new RegExp("((@.*?keyframes [\\s\\S]*?){([\\s\\S]*?}\\s*?)})", "gi");
-  while (true) {
-    const matches = keyframesRegex.exec(cssText);
-    if (matches === null) {
-      break;
-    }
-    result.push(matches[0]);
-  }
-  cssText = cssText.replace(keyframesRegex, "");
-  const importRegex = /@import[\s\S]*?url\([^)]*\)[\s\S]*?;/gi;
-  const combinedCSSRegex = "((\\s*?(?:\\/\\*[\\s\\S]*?\\*\\/)?\\s*?@media[\\s\\S]*?){([\\s\\S]*?)}\\s*?})|(([\\s\\S]*?){([\\s\\S]*?)})";
-  const unifiedRegex = new RegExp(combinedCSSRegex, "gi");
-  while (true) {
-    let matches = importRegex.exec(cssText);
-    if (matches === null) {
-      matches = unifiedRegex.exec(cssText);
-      if (matches === null) {
-        break;
-      } else {
-        importRegex.lastIndex = unifiedRegex.lastIndex;
-      }
+// src/useLayoutEffectSkipFirst.ts
+var import_react3 = require("react");
+var useLayoutEffectSkipFirst = (func, deps) => {
+  const goodToGo = (0, import_react3.useRef)(false);
+  (0, import_react3.useLayoutEffect)(() => {
+    if (goodToGo.current) {
+      func();
     } else {
-      unifiedRegex.lastIndex = importRegex.lastIndex;
-    }
-    result.push(matches[0]);
-  }
-  return result;
-}
-async function getCSSRules(styleSheets, options) {
-  const ret = [];
-  const deferreds = [];
-  styleSheets.forEach((sheet) => {
-    if ("cssRules" in sheet) {
-      try {
-        toArray(sheet.cssRules || []).forEach((item, index) => {
-          if (item.type === CSSRule.IMPORT_RULE) {
-            let importIndex = index + 1;
-            const url = item.href;
-            const deferred = fetchCSS(url).then((metadata) => embedFonts(metadata, options)).then((cssText) => parseCSS(cssText).forEach((rule) => {
-              try {
-                sheet.insertRule(rule, rule.startsWith("@import") ? importIndex += 1 : sheet.cssRules.length);
-              } catch (error) {
-                console.error("Error inserting rule from remote css", {
-                  rule,
-                  error
-                });
-              }
-            })).catch((e) => {
-              console.error("Error loading remote css", e.toString());
-            });
-            deferreds.push(deferred);
-          }
-        });
-      } catch (e) {
-        const inline = styleSheets.find((a) => a.href == null) || document.styleSheets[0];
-        if (sheet.href != null) {
-          deferreds.push(fetchCSS(sheet.href).then((metadata) => embedFonts(metadata, options)).then((cssText) => parseCSS(cssText).forEach((rule) => {
-            inline.insertRule(rule, sheet.cssRules.length);
-          })).catch((err) => {
-            console.error("Error loading remote stylesheet", err);
-          }));
-        }
-        console.error("Error inlining remote css file", e);
-      }
+      goodToGo.current = true;
     }
-  });
-  return Promise.all(deferreds).then(() => {
-    styleSheets.forEach((sheet) => {
-      if ("cssRules" in sheet) {
-        try {
-          toArray(sheet.cssRules || []).forEach((item) => {
-            ret.push(item);
-          });
-        } catch (e) {
-          console.error(`Error while reading CSS rules from ${sheet.href}`, e);
-        }
-      }
-    });
-    return ret;
-  });
-}
-function getWebFontRules(cssRules) {
-  return cssRules.filter((rule) => rule.type === CSSRule.FONT_FACE_RULE).filter((rule) => shouldEmbed(rule.style.getPropertyValue("src")));
-}
-async function parseWebFontRules(node, options) {
-  if (node.ownerDocument == null) {
-    throw new Error("Provided element is not within a Document");
-  }
-  const styleSheets = toArray(node.ownerDocument.styleSheets);
-  const cssRules = await getCSSRules(styleSheets, options);
-  return getWebFontRules(cssRules);
-}
-async function getWebFontCSS(node, options) {
-  const rules = await parseWebFontRules(node, options);
-  const cssTexts = await Promise.all(rules.map((rule) => {
-    const baseUrl = rule.parentStyleSheet ? rule.parentStyleSheet.href : null;
-    return embedResources(rule.cssText, baseUrl, options);
-  }));
-  return cssTexts.join("\n");
-}
-async function embedWebFonts(clonedNode, options) {
-  const cssText = options.fontEmbedCSS != null ? options.fontEmbedCSS : options.skipFonts ? null : await getWebFontCSS(clonedNode, options);
-  if (cssText) {
-    const styleNode = document.createElement("style");
-    const sytleContent = document.createTextNode(cssText);
-    styleNode.appendChild(sytleContent);
-    if (clonedNode.firstChild) {
-      clonedNode.insertBefore(styleNode, clonedNode.firstChild);
-    } else {
-      clonedNode.appendChild(styleNode);
-    }
-  }
-}
-
-// ../../node_modules/html-to-image/es/index.js
-async function toSvg(node, options = {}) {
-  const { width, height } = getImageSize(node, options);
-  const clonedNode = await cloneNode(node, options, true);
-  await embedWebFonts(clonedNode, options);
-  await embedImages(clonedNode, options);
-  applyStyle(clonedNode, options);
-  const datauri = await nodeToDataURL(clonedNode, width, height);
-  return datauri;
-}
-async function toCanvas(node, options = {}) {
-  const { width, height } = getImageSize(node, options);
-  const svg = await toSvg(node, options);
-  const img = await createImage(svg);
-  const canvas = document.createElement("canvas");
-  const context = canvas.getContext("2d");
-  const ratio = options.pixelRatio || getPixelRatio();
-  const canvasWidth = options.canvasWidth || width;
-  const canvasHeight = options.canvasHeight || height;
-  canvas.width = canvasWidth * ratio;
-  canvas.height = canvasHeight * ratio;
-  if (!options.skipAutoScale) {
-    checkCanvasDimensions(canvas);
-  }
-  canvas.style.width = `${canvasWidth}`;
-  canvas.style.height = `${canvasHeight}`;
-  if (options.backgroundColor) {
-    context.fillStyle = options.backgroundColor;
-    context.fillRect(0, 0, canvas.width, canvas.height);
-  }
-  context.drawImage(img, 0, 0, canvas.width, canvas.height);
-  return canvas;
-}
-async function toPng(node, options = {}) {
-  const canvas = await toCanvas(node, options);
-  return canvas.toDataURL();
-}
-
-// src/screenshot-utils.ts
-async function takeScreenshot(node) {
-  const screenshot = await toPng(node, { cacheBust: true }).then((dataUrl) => {
-    return dataUrl;
-  }).catch((err) => {
-    console.error("Error taking screenshot", err);
-    return void 0;
-  });
-  if (!screenshot) {
-    return void 0;
-  }
-  return screenshot;
-}
+  }, deps);
+};
 //# sourceMappingURL=index.js.map