@eightshift/ui-components 6.0.13 → 6.1.0

package/dist/components/smart-image/smart-image-next.js

@@ -0,0 +1,294 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";
+import { c as clsx } from "../../clsx-DgYk2OaC.js";
+import { useState, useRef, useEffect, cloneElement } from "react";
+import { icons } from "../../icons/icons.js";
+import "../../react-jsx-parser.min-B_hvYYa1.js";
+import { DecorativeTooltip } from "../tooltip/tooltip.js";
+import { cyrb64Hash } from "../../utilities/hash.js";
+const WORKER_CODE = "const getSaturation = (r, g, b) => {\n	// Convert 0-255 to 0-1 range.\n	const red = r / 255;\n	const green = g / 255;\n	const blue = b / 255;\n\n	const max = Math.max(red, green, blue);\n	const min = Math.min(red, green, blue);\n	const delta = max - min;\n\n	// If the maximum brightness is less than ~5% (approx RGB 13),\n	// the human eye just sees \"black\", regardless of the color math.\n	if (max < 0.05) {\n		return 0;\n	}\n\n	// Standard HSV Calculation\n	let saturation = 0;\n\n	if (max !== 0) {\n		saturation = delta / max;\n	}\n\n	return parseFloat(saturation.toFixed(3));\n};\n\n// Helper to convert RGB to Hex\nconst rgbToHex = (r, g, b) => '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase();\n\nself.onmessage = (e) => {\n	const { buffer, width, height, config } = e.data;\n	const { maxColors = 5, threshold = 96, transparencyThreshold = 255 } = config;\n	const stride = 4;\n\n	// [1] Check transparency.\n	const isTransparent = (idx) => buffer[idx + 3] < transparencyThreshold;\n	const getIdx = (x, y) => (y * width + x) * stride;\n\n	const corners = {\n		topLeft: isTransparent(getIdx(0, 0)),\n		topRight: isTransparent(getIdx(width - 1, 0)),\n		bottomLeft: isTransparent(getIdx(0, height - 1)),\n		bottomRight: isTransparent(getIdx(width - 1, height - 1)),\n	};\n\n	const sides = { top: false, bottom: false, left: false, right: false };\n\n	// Scan top/bottom.\n	for (let x = 0; x < width; x += 5) {\n		if (!sides.top && isTransparent(getIdx(x, 0))) {\n			sides.top = true;\n		}\n\n		if (!sides.bottom && isTransparent(getIdx(x, height - 1))) {\n			sides.bottom = true;\n		}\n	}\n\n	// Scan left/right.\n	for (let y = 0; y < height; y += 5) {\n		if (!sides.left && isTransparent(getIdx(0, y))) {\n			sides.left = true;\n		}\n\n		if (!sides.right && isTransparent(getIdx(width - 1, y))) {\n			sides.right = true;\n		}\n	}\n\n	// Internal transparency check\n	let internalTransparent = false;\n	const borderIsSolid = !Object.values(sides).some((v) => v);\n\n	if (borderIsSolid) {\n		const len = buffer.length;\n		const step = Math.floor(len / 100);\n\n		for (let i = 0; i < len; i += step) {\n			const idx = i - (i % 4);\n\n			if (buffer[idx + 3] < 255) {\n				internalTransparent = true;\n				break;\n			}\n		}\n	} else {\n		internalTransparent = true;\n	}\n\n	// [2] Analyze colors (Dominant + average)\n	const colorCounts = {};\n	const samplingRate = 20;\n	let totalSampledPixels = 0;\n\n	// Accumulators for Average Color\n	let sumR = 0;\n	let sumG = 0;\n	let sumB = 0;\n\n	for (let i = 0; i < buffer.length; i += stride * samplingRate) {\n		const rRaw = buffer[i];\n		const gRaw = buffer[i + 1];\n		const bRaw = buffer[i + 2];\n		const a = buffer[i + 3];\n\n		// Strict alpha check (ignores anti-aliased SVG edges)\n		if (a < 250) continue;\n\n		totalSampledPixels++;\n\n		// 1. Add to Average Sums (Use raw values for accuracy)\n		sumR += rRaw;\n		sumG += gRaw;\n		sumB += bRaw;\n\n		// 2. Add to Dominant Color Buckets (Quantized)\n		const q = 5;\n		const r = Math.round(rRaw / q) * q;\n		const g = Math.round(gRaw / q) * q;\n		const b = Math.round(bRaw / q) * q;\n\n		const key = `${r},${g},${b}`;\n		colorCounts[key] = (colorCounts[key] || 0) + 1;\n	}\n\n	// [3] Calculate Average Color\n	let averageColor = null;\n\n	if (totalSampledPixels > 0) {\n		const avgR = Math.round(sumR / totalSampledPixels);\n		const avgG = Math.round(sumG / totalSampledPixels);\n		const avgB = Math.round(sumB / totalSampledPixels);\n		const avgLum = 0.2126 * avgR + 0.7152 * avgG + 0.0722 * avgB;\n\n		averageColor = {\n			color: rgbToHex(avgR, avgG, avgB),\n			isDark: avgLum <= 128,\n			saturation: getSaturation(avgR, avgG, avgB),\n		};\n	}\n\n	// [4] Process Dominant Colors\n	const sortedRawColors = Object.entries(colorCounts)\n		.map(([key, count]) => {\n			const [r, g, b] = key.split(',').map(Number);\n\n			return { r, g, b, count };\n		})\n		.sort((a, b) => b.count - a.count);\n\n	const distinctPalette = [];\n\n	for (const candidate of sortedRawColors) {\n		if (distinctPalette.length >= maxColors) break;\n\n		let isSimilar = false;\n\n		for (const existing of distinctPalette) {\n			const dist = Math.sqrt(Math.pow(candidate.r - existing.r, 2) + Math.pow(candidate.g - existing.g, 2) + Math.pow(candidate.b - existing.b, 2));\n\n			if (dist < threshold) {\n				existing.count += candidate.count;\n				isSimilar = true;\n				break;\n			}\n		}\n\n		if (!isSimilar) {\n			distinctPalette.push({ ...candidate });\n		}\n	}\n\n	const palette = distinctPalette.map((item) => {\n		const percentage = parseFloat((item.count / totalSampledPixels).toFixed(3));\n		const lum = 0.2126 * item.r + 0.7152 * item.g + 0.0722 * item.b;\n\n		return {\n			color: rgbToHex(item.r, item.g, item.b),\n			area: percentage,\n			isDark: lum <= 128,\n			saturation: getSaturation(item.r, item.g, item.b),\n		};\n	});\n\n	self.postMessage({\n		dominantColors: palette,\n		averageColor,\n		isDark: palette[0]?.isDark || false,\n		isTransparent: internalTransparent || Object.values(corners).some((v) => v) || Object.values(sides).some((v) => v),\n		transparencyInfo: {\n			any: internalTransparent,\n			left: sides.left,\n			right: sides.right,\n			top: sides.top,\n			bottom: sides.bottom,\n			topLeftCorner: corners.topLeft,\n			topRightCorner: corners.topRight,\n			bottomLeftCorner: corners.bottomLeft,\n			bottomRightCorner: corners.bottomRight,\n		},\n	});\n};\n";
+/**
+ * @typedef {Object} CustomImageProps
+ * @property {JSX.Element} [props.renderError] - Component to render if image analysis fails. `(error) => JSX:Element`.
+ * @property {string} [props.errorClassName] - Classes to pass to the default error view.
+ * @property {string} [props.processingClassName] - Classes to apply while the image is loading / being processed.
+ * @property {boolean} [props.hidden] - If `true`, the component is not rendered.
+ * @property {boolean} [props.verbose] - If `true`, extra debug info is logged in case of errors.
+ * @property {import('../../utilities/general.js').ImageAnalysisSettings} [imageAnalysisSettings] - Settings to pass to the image analysis function.
+ * @property {import('../../utilities/general.js').ImageAnalysisResult} [analysisData] - Previous analysis result to pass in directly, skipping analysis.
+ *
+ * @preserve
+ */
+/**
+ * @typedef {Omit<JSX.IntrinsicElements['img'], 'crossOrigin'>} BaseImageProps
+ *
+ * @preserve
+ */
+/**
+ * @typedef {CustomImageProps & BaseImageProps} ImageProps
+ *
+ * @preserve
+ */
+function isValidUrl(url) {
+  try {
+    new URL(url);
+    return true;
+  } catch {
+    return false;
+  }
+}
+async function urlExists(url) {
+  if (!isValidUrl(url)) return false;
+  try {
+    await fetch(url, { method: "HEAD", mode: "no-cors" });
+    return true;
+  } catch {
+    return false;
+  }
+}
+/**
+ * Image that analyzes its contents and can apply different classes based on image transparency.
+ * It also provides a CSS variable with the image's dominant color, and optionally custom child rendering with all the data exposed.
+ *
+ * @component
+ * @param {ImageProps} props - Component props.
+ *
+ * @returns {JSX.Element} The __SmartImageNext component.
+ *
+ * @example
+ * <__SmartImageNext src='https://picsum.photos/600/400' />
+ *
+ * @example
+ * <__SmartImageNext src='https://picsum.photos/600/400'>
+ *     {({ image, dominantColors, isDark }) => (
+ *         <div style={{ backgroundColor: dominantColors[0].color }}>
+ *             {image}
+ *             <p style={{ color: isDark ? '#000000' : '#FFFFFF' }}>Lorem ipsum</p>
+ *         </div>
+ *     )}
+ * </__SmartImageNext>
+ *
+ * @preserve
+ */
+const __SmartImageNext = (props) => {
+  const { onAnalysisComplete, colorCount = 3, similarityThreshold = 10 } = props;
+  const { imageAnalysisSettings, errorClassName, processingClassName = "es:opacity-0 es:fixed", hidden, renderError, analysisData, children, verbose, ...imageProps } = props;
+  const { src } = imageProps;
+  const [analysis, setAnalysis] = useState(analysisData);
+  const [error, setError] = useState(null);
+  const [objectUrl, setObjectUrl] = useState(null);
+  const workerRef = useRef(null);
+  useEffect(() => {
+    const blob = new Blob([WORKER_CODE], { type: "application/javascript" });
+    workerRef.current = new Worker(URL.createObjectURL(blob));
+    return () => workerRef.current.terminate();
+  }, []);
+  useEffect(() => {
+    if (!src) {
+      return;
+    }
+    if (analysisData) {
+      setObjectUrl(src);
+      return;
+    }
+    const cacheKey = `es-uic-img-data-${cyrb64Hash(src)}`;
+    if (localStorage?.getItem(cacheKey)) {
+      const cachedAnalysis = JSON.parse(localStorage.getItem(cacheKey));
+      if (cachedAnalysis) {
+        setAnalysis(cachedAnalysis);
+        setObjectUrl(src);
+        return;
+      }
+    }
+    let isActive = true;
+    const abortController = new AbortController();
+    const processImage = async () => {
+      try {
+        const response = await fetch(src, {
+          signal: abortController.signal,
+          mode: "cors"
+        });
+        if (src.includes("uikit")) {
+          console.log("tusam?", src, response);
+        }
+        if (!response.ok) {
+          if (verbose) {
+            console.error(`[SmartImageNext]: Failed to fetch (${response.status}) image from ${src}`);
+          }
+        }
+        const blob = await response.clone().blob();
+        if (blob.size === 0) {
+          if (verbose) {
+            console.error(`[SmartImageNext]: Empty image (${src})`);
+          }
+        }
+        const url = URL.createObjectURL(blob);
+        if (isActive) {
+          setObjectUrl(url);
+        }
+        let imageSource, width, height;
+        const isSVG = blob.type.includes("svg");
+        if (isSVG) {
+          const img = new Image();
+          img.src = url;
+          await new Promise((resolve, reject) => {
+            img.onload = resolve;
+            img.onerror = reject;
+          });
+          width = img.width || 500;
+          height = img.height || 500;
+          imageSource = img;
+        } else {
+          try {
+            imageSource = await createImageBitmap(blob);
+            width = imageSource.width;
+            height = imageSource.height;
+          } catch (e) {
+            if (verbose) {
+              console.warn("[SmartImageNext]: createImageBitmap failed, falling back to HTML Image method.", e);
+            }
+          }
+        }
+        let buffer, arrayBuffer;
+        if (typeof OffscreenCanvas !== "undefined") {
+          const canvas = new OffscreenCanvas(width, height);
+          const ctx = canvas.getContext("2d", { willReadFrequently: true });
+          ctx.clearRect(0, 0, width, height);
+          ctx.drawImage(imageSource, 0, 0, width, height);
+          buffer = ctx.getImageData(0, 0, width, height).data;
+          arrayBuffer = buffer.buffer;
+        } else {
+          const canvas = document.createElement("canvas");
+          canvas.width = width;
+          canvas.height = height;
+          const ctx = canvas.getContext("2d");
+          ctx.clearRect(0, 0, width, height);
+          ctx.drawImage(imageSource, 0, 0, width, height);
+          buffer = ctx.getImageData(0, 0, width, height).data;
+          arrayBuffer = buffer.buffer;
+        }
+        if (imageSource.close) {
+          imageSource.close();
+        }
+        if (workerRef.current) {
+          workerRef.current.onmessage = (e) => {
+            if (!isActive) {
+              return;
+            }
+            setAnalysis(e.data);
+            localStorage?.setItem(cacheKey, JSON.stringify(e.data));
+            if (onAnalysisComplete) {
+              onAnalysisComplete(e.data);
+            }
+          };
+          try {
+            workerRef.current.postMessage(
+              {
+                buffer,
+                width,
+                height,
+                config: {
+                  // TODO
+                }
+              },
+              [arrayBuffer]
+            );
+          } catch (msgErr) {
+            workerRef.current.postMessage({
+              buffer,
+              width,
+              height,
+              config: { maxColors: colorCount, threshold: similarityThreshold }
+            });
+          }
+        }
+      } catch (err) {
+        if (isActive) {
+          if (verbose) {
+            console.error("[SmartImageNext] Error:", err);
+          }
+          const exists = await urlExists(src);
+          if (exists) {
+            setError(err.message);
+          } else {
+            setError("failedToFetch");
+          }
+          setObjectUrl(null);
+        }
+      }
+    };
+    processImage();
+    return () => {
+      isActive = false;
+      abortController.abort();
+    };
+  }, [src, colorCount, similarityThreshold]);
+  const hasAnalysed = Boolean(analysis) && Boolean(objectUrl);
+  const { dominantColors, isDark, isTransparent, transparencyInfo, averageColor } = analysis || {};
+  const classFetchProps = {
+    isLoaded: true,
+    dominantColors,
+    isDark,
+    hasAnalysed: Boolean(error) || hasAnalysed,
+    isTransparent,
+    transparencyInfo,
+    averageColor,
+    hasError: error === "failedToFetch"
+  };
+  if (hidden) {
+    return null;
+  }
+  const colorfulDominantColor = dominantColors?.find((c) => c.saturation > 0.25 && c.area >= 0.1) || dominantColors?.[0];
+  const imageElement = /* @__PURE__ */ jsx(
+    "img",
+    {
+      decoding: "async",
+      ...imageProps,
+      src: analysis && objectUrl && !error ? objectUrl : imageProps?.src,
+      style: {
+        ...imageProps.style || {},
+        "--es-img-dominant-color": dominantColors?.[0]?.color ?? "",
+        "--es-img-colorful-dominant-color": colorfulDominantColor?.color ?? "",
+        "--es-img-average-color": averageColor?.color ?? ""
+      },
+      className: clsx(
+        "es:transition-opacity",
+        !hasAnalysed && !error && processingClassName,
+        typeof imageProps.className === "function" ? imageProps.className(classFetchProps) : imageProps.className
+      ),
+      "data-is-transparent": isTransparent,
+      "data-is-dark": isDark
+    }
+  );
+  if (error && renderError) {
+    return renderError(error);
+  } else if (error === "failedToFetch") {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: clsx(
+          typeof children !== "function" && "es:flex es:flex-col es:gap-2 es:items-center-safe es:justify-center-safe es:p-2",
+          "es:motion-preset-fade",
+          errorClassName
+        ),
+        children: [
+          typeof children !== "function" && /* @__PURE__ */ jsx(DecorativeTooltip, { text: __("Error loading image", "eightshift-ui-components"), children: cloneElement(icons.imageError, { className: "es:text-surface-600 es:size-8" }) }),
+          typeof children === "function" ? children({
+            image: cloneElement(imageElement, { crossOrigin: null }),
+            hasAnalysed,
+            isTransparent: false,
+            hasError: true,
+            errorBadge: /* @__PURE__ */ jsx("div", { className: "es:size-full es:flex es:items-center es:justify-center", children: /* @__PURE__ */ jsx(DecorativeTooltip, { text: __("Error loading image", "eightshift-ui-components"), children: cloneElement(icons.imageError, { className: "es:text-surface-600 es:size-8" }) }) })
+          }) : cloneElement(imageElement, { crossOrigin: null })
+        ]
+      }
+    );
+  }
+  return children && typeof children === "function" ? children({
+    image: imageElement,
+    ...classFetchProps
+  }) : imageElement;
+};
+export {
+  __SmartImageNext
+};

package/dist/components/tabs/tabs.js

@@ -1,19 +1,19 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { b as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, a as $3ef42575df84b30b$export$9d1611c77c2fe928, c as $bdb11010cef70236$export$f680877a34711e37, j as $df56164dff5785e2$export$4338b53315abf666, g as $64fa3d84918910a7$export$4d86445c2cf5e3, $ as $64fa3d84918910a7$export$29f1550f4b0d4415, d as $64fa3d84918910a7$export$fabf2dc03a41866e, h as $64fa3d84918910a7$export$2881499e37b75b9a } from "../../utils-HC9_3Crc.js";
-import { e as $880e95eb8b93ba9a$export$ecf600387e221c37, m as $ae20dd8cbca75726$export$d6daf82dcd84e87c, f as $e1995378a142960e$export$18af5c7a9e9b3664, h as $e1995378a142960e$export$fb8073518f34e6ec, g as $e1995378a142960e$export$bf788dd355e3a401, n as $23b9f4fcf0fe224b$export$d68d59712b04d9d1, j as $7135fc7d473fd974$export$4feb769f8ddf26c5, o as $7135fc7d473fd974$export$90e00781bc59d8f9, p as $7135fc7d473fd974$export$a164736487e3f0ae } from "../../SelectionManager-DbBiF5M8.js";
+import { c as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, b as $3ef42575df84b30b$export$9d1611c77c2fe928, d as $bdb11010cef70236$export$f680877a34711e37, k as $df56164dff5785e2$export$4338b53315abf666, h as $64fa3d84918910a7$export$4d86445c2cf5e3, a as $64fa3d84918910a7$export$df3a06d6289f983e, $ as $64fa3d84918910a7$export$29f1550f4b0d4415, e as $64fa3d84918910a7$export$fabf2dc03a41866e, i as $64fa3d84918910a7$export$2881499e37b75b9a } from "../../utils-Cr3pLd9c.js";
+import { e as $880e95eb8b93ba9a$export$ecf600387e221c37, m as $ae20dd8cbca75726$export$d6daf82dcd84e87c, f as $e1995378a142960e$export$18af5c7a9e9b3664, h as $e1995378a142960e$export$fb8073518f34e6ec, g as $e1995378a142960e$export$bf788dd355e3a401, n as $23b9f4fcf0fe224b$export$d68d59712b04d9d1, j as $7135fc7d473fd974$export$4feb769f8ddf26c5, o as $7135fc7d473fd974$export$90e00781bc59d8f9, p as $7135fc7d473fd974$export$a164736487e3f0ae } from "../../SelectionManager-VgpR-1Ri.js";
 import { $ as $1d5b8b8664671ef2$export$c9549807523555e0 } from "../../SelectionIndicator-D7WMzeAW.js";
 import { $ as $c8a5a149f625efcf$export$758399f318e6385a } from "../../SharedElementTransition-B_vnQ1uR.js";
 import { $ as $f39a9eba43920ace$export$86427a43e3e48ebb } from "../../Hidden-Rfj-STx7.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-eGTqWSTd.js";
-import { b as $cdc5a6778b766db2$export$a9d04c5684123369 } from "../../useListState-Bya9g7W8.js";
-import { $ as $d3f049242431219c$export$45fda7c47f93fd48, a as $d3f049242431219c$export$6d3443f2c48bfc20 } from "../../animation-DY7CNkr6.js";
+import { b as $cdc5a6778b766db2$export$a9d04c5684123369 } from "../../useListState-jHobZH6F.js";
+import { $ as $d3f049242431219c$export$45fda7c47f93fd48, a as $d3f049242431219c$export$6d3443f2c48bfc20 } from "../../animation-B2sADg3I.js";
 import $dbSRa$react__default, { useState, useMemo, useRef, useEffect, forwardRef, useContext, createContext, isValidElement, useId, cloneElement } from "react";
-import { E as $ea8dcbcb9ea1b556$export$7e924b3091a3bd18, $ as $f645667febf57a63$export$4c014de7c8940b4c, x as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../useHover-CG39Ci3A.js";
-import { $ as $313b98861ee5dd6c$export$d6875122194c7b44 } from "../../useLabels-vzdDMGCX.js";
-import { a as $9bf71ea28793e738$export$2d6ec8fc375ceafa } from "../../FocusScope-Dri1oBcH.js";
-import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-DYYO3Ns3.js";
-import { a as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-WEswknAY.js";
-import { $ as $a0d645289fe9b86b$export$e7f05e985daf4b5f } from "../../useSingleSelectListState-D9SqGLJ0.js";
+import { E as $ea8dcbcb9ea1b556$export$7e924b3091a3bd18, $ as $f645667febf57a63$export$4c014de7c8940b4c, x as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../useHover-VPZwb-1l.js";
+import { $ as $313b98861ee5dd6c$export$d6875122194c7b44 } from "../../useLabels-D8O3gOdV.js";
+import { a as $9bf71ea28793e738$export$2d6ec8fc375ceafa } from "../../FocusScope-BxT4xfe9.js";
+import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-iUFQCK8m.js";
+import { a as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-Ct2N5S1b.js";
+import { $ as $a0d645289fe9b86b$export$e7f05e985daf4b5f } from "../../useSingleSelectListState-sLg_MnX8.js";
 import { s as sprintf } from "../../sprintf-DmNrJSYG.js";
 import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";
 import { c as clsx } from "../../clsx-DgYk2OaC.js";
@@ -83,6 +83,7 @@ function $0175d55c2a017ebc$export$fdf4756d5b8ef90a(props, state, ref) {
   delete domProps.id;
   let linkProps = $ea8dcbcb9ea1b556$export$7e924b3091a3bd18(item === null || item === void 0 ? void 0 : item.props);
   let { focusableProps } = $f645667febf57a63$export$4c014de7c8940b4c({
+    ...item === null || item === void 0 ? void 0 : item.props,
     isDisabled
   }, ref);
   return {
@@ -292,7 +293,7 @@ function $5e8ad37a45e1c704$var$TabsInner({ props, tabsRef: ref, collection }) {
   let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
     global: true
   });
-  return /* @__PURE__ */ $dbSRa$react__default.createElement("div", {
+  return /* @__PURE__ */ $dbSRa$react__default.createElement($64fa3d84918910a7$export$df3a06d6289f983e.div, {
     ...$3ef42575df84b30b$export$9d1611c77c2fe928(DOMProps, renderProps, focusProps),
     ref,
     slot: props.slot || void 0,
@@ -343,7 +344,7 @@ function $5e8ad37a45e1c704$var$TabListInner({ props, forwardedRef: ref }) {
     global: true
   });
   delete DOMProps.id;
-  return /* @__PURE__ */ $dbSRa$react__default.createElement("div", {
+  return /* @__PURE__ */ $dbSRa$react__default.createElement($64fa3d84918910a7$export$df3a06d6289f983e.div, {
     ...$3ef42575df84b30b$export$9d1611c77c2fe928(DOMProps, renderProps, tabListProps),
     ref: objectRef,
     "data-orientation": orientation || void 0
@@ -383,7 +384,7 @@ const $5e8ad37a45e1c704$export$3e41faf802a29e71 = /* @__PURE__ */ $e1995378a1429
       isHovered
     }
   });
-  let ElementType = item.props.href ? "a" : "div";
+  let ElementType = item.props.href ? $64fa3d84918910a7$export$df3a06d6289f983e.a : $64fa3d84918910a7$export$df3a06d6289f983e.div;
   let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
     global: true
   });
@@ -445,7 +446,7 @@ function $5e8ad37a45e1c704$var$TabPanelInner(props) {
   });
   delete DOMProps.id;
   let domProps = isSelected ? $3ef42575df84b30b$export$9d1611c77c2fe928(DOMProps, tabPanelProps, focusProps, renderProps) : $3ef42575df84b30b$export$9d1611c77c2fe928(DOMProps, renderProps);
-  return /* @__PURE__ */ $dbSRa$react__default.createElement("div", {
+  return /* @__PURE__ */ $dbSRa$react__default.createElement($64fa3d84918910a7$export$df3a06d6289f983e.div, {
     ...domProps,
     ref,
     "data-focused": isFocused || void 0,

package/dist/components/toggle/switch.js

@@ -1,12 +1,12 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { $ as $64fa3d84918910a7$export$29f1550f4b0d4415, j as $df56164dff5785e2$export$4338b53315abf666, k as $5dc95899b306f630$export$c9058316764c140e, f as $64fa3d84918910a7$export$ef03459518577ad4, g as $64fa3d84918910a7$export$4d86445c2cf5e3, a as $3ef42575df84b30b$export$9d1611c77c2fe928 } from "../../utils-HC9_3Crc.js";
+import { $ as $64fa3d84918910a7$export$29f1550f4b0d4415, k as $df56164dff5785e2$export$4338b53315abf666, l as $5dc95899b306f630$export$c9058316764c140e, g as $64fa3d84918910a7$export$ef03459518577ad4, h as $64fa3d84918910a7$export$4d86445c2cf5e3, a as $64fa3d84918910a7$export$df3a06d6289f983e, b as $3ef42575df84b30b$export$9d1611c77c2fe928 } from "../../utils-Cr3pLd9c.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-eGTqWSTd.js";
 import $dbSRa$react__default, { forwardRef, createContext } from "react";
-import { $ as $3017fa7ffdddec74$export$8042c6c013fd5226 } from "../../useToggleState-j3o1PvdS.js";
-import { $ as $d2c8e2b0480f3f34$export$cbe85ee05b554577 } from "../../useToggle-Deq2xxQV.js";
-import { a as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-WEswknAY.js";
-import { x as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../useHover-CG39Ci3A.js";
-import { $ as $5c3e21d68f1c4674$export$439d29a4e110a164 } from "../../VisuallyHidden-eaCBtXhE.js";
+import { $ as $3017fa7ffdddec74$export$8042c6c013fd5226 } from "../../useToggleState-BhJn-Dz7.js";
+import { $ as $d2c8e2b0480f3f34$export$cbe85ee05b554577 } from "../../useToggle-D0-c9HPm.js";
+import { a as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-Ct2N5S1b.js";
+import { x as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../useHover-VPZwb-1l.js";
+import { $ as $5c3e21d68f1c4674$export$439d29a4e110a164 } from "../../VisuallyHidden-DXVaR_RC.js";
 import { c as cva } from "../../index-BHpUy2Ix.js";
 function $b418ec0c85c52f27$export$d853f7095ae95f88(props, state, ref) {
   let { labelProps, inputProps, isSelected, isPressed, isDisabled, isReadOnly } = $d2c8e2b0480f3f34$export$cbe85ee05b554577(props, state, ref);
@@ -59,7 +59,7 @@ const $8e59e948500a8fe1$export$b5d5cf8927ab7262 = /* @__PURE__ */ forwardRef(fun
   });
   delete DOMProps.id;
   delete DOMProps.onClick;
-  return /* @__PURE__ */ $dbSRa$react__default.createElement("label", {
+  return /* @__PURE__ */ $dbSRa$react__default.createElement($64fa3d84918910a7$export$df3a06d6289f983e.label, {
     ...$3ef42575df84b30b$export$9d1611c77c2fe928(DOMProps, labelProps, hoverProps, renderProps),
     ref,
     slot: props.slot || void 0,

package/dist/components/toggle/toggle.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-DPWyf-gp.js";
+import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-BDlf9vIY.js";
 import { Switch } from "./switch.js";
 import { RichLabel } from "../rich-label/rich-label.js";
 import { c as clsx } from "../../clsx-DgYk2OaC.js";

package/dist/components/toggle-button/toggle-button.js

@@ -1,12 +1,12 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { n as $ff5963eb1fccf552$export$e08e3b67e392101e, a as $3ef42575df84b30b$export$9d1611c77c2fe928, $ as $64fa3d84918910a7$export$29f1550f4b0d4415, g as $64fa3d84918910a7$export$4d86445c2cf5e3 } from "../../utils-HC9_3Crc.js";
+import { o as $ff5963eb1fccf552$export$e08e3b67e392101e, b as $3ef42575df84b30b$export$9d1611c77c2fe928, $ as $64fa3d84918910a7$export$29f1550f4b0d4415, h as $64fa3d84918910a7$export$4d86445c2cf5e3, a as $64fa3d84918910a7$export$df3a06d6289f983e } from "../../utils-Cr3pLd9c.js";
 import { $ as $1d5b8b8664671ef2$export$c9549807523555e0 } from "../../SelectionIndicator-D7WMzeAW.js";
 import $dbSRa$react__default, { createContext, forwardRef, useContext } from "react";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-eGTqWSTd.js";
-import { $ as $3017fa7ffdddec74$export$8042c6c013fd5226 } from "../../useToggleState-j3o1PvdS.js";
-import { $ as $701a24aa0da5b062$export$ea18c227d4417cc3 } from "../../useButton-CeuyDay5.js";
-import { a as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-WEswknAY.js";
-import { x as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../useHover-CG39Ci3A.js";
+import { $ as $3017fa7ffdddec74$export$8042c6c013fd5226 } from "../../useToggleState-BhJn-Dz7.js";
+import { $ as $701a24aa0da5b062$export$ea18c227d4417cc3 } from "../../useButton-DofKjCES.js";
+import { a as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-Ct2N5S1b.js";
+import { x as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../useHover-VPZwb-1l.js";
 import { c as cva } from "../../index-BHpUy2Ix.js";
 import { Tooltip } from "../tooltip/tooltip.js";
 function $55f54f7887471b58$export$51e84d46ca0bc451(props, state, ref) {
@@ -71,7 +71,10 @@ const $efde0372d7a700fe$export$d2b052e7b4be1756 = /* @__PURE__ */ forwardRef(fun
     id: props.id != null ? String(props.id) : void 0
   }, state, ref);
   let { focusProps, isFocused, isFocusVisible } = $f7dceffc5ad7768b$export$4e328f61c538687f(props);
-  let { hoverProps, isHovered } = $6179b936705e76d3$export$ae780daf29e6d456(props);
+  let { hoverProps, isHovered } = $6179b936705e76d3$export$ae780daf29e6d456({
+    ...props,
+    isDisabled
+  });
   let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
     ...props,
     id: void 0,
@@ -91,7 +94,7 @@ const $efde0372d7a700fe$export$d2b052e7b4be1756 = /* @__PURE__ */ forwardRef(fun
   });
   delete DOMProps.id;
   delete DOMProps.onClick;
-  return /* @__PURE__ */ $dbSRa$react__default.createElement("button", {
+  return /* @__PURE__ */ $dbSRa$react__default.createElement($64fa3d84918910a7$export$df3a06d6289f983e.button, {
     ...$3ef42575df84b30b$export$9d1611c77c2fe928(DOMProps, renderProps, buttonProps, focusProps, hoverProps),
     ref,
     slot: props.slot || void 0,

package/dist/components/tooltip/tooltip.js

@@ -1,9 +1,9 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { $ as $fc909762b330b746$export$61c6a8c84e605fb6, a as $2a41e45df1593e64$export$d39e1813b3bdd0e1, b as $44f671af83e7d9e0$export$2de4954e8ae13b9f, c as $44f671af83e7d9e0$export$746d02f47f4d381 } from "../../OverlayArrow-DVJTTfZM.js";
-import { l as $b5e257d569688ac6$export$535bd6ca7f90a273, a as $3ef42575df84b30b$export$9d1611c77c2fe928, c as $bdb11010cef70236$export$f680877a34711e37, h as $64fa3d84918910a7$export$2881499e37b75b9a, $ as $64fa3d84918910a7$export$29f1550f4b0d4415, g as $64fa3d84918910a7$export$4d86445c2cf5e3 } from "../../utils-HC9_3Crc.js";
+import { $ as $fc909762b330b746$export$61c6a8c84e605fb6, a as $2a41e45df1593e64$export$d39e1813b3bdd0e1, b as $44f671af83e7d9e0$export$2de4954e8ae13b9f, c as $44f671af83e7d9e0$export$746d02f47f4d381 } from "../../OverlayArrow-NzRV9wsn.js";
+import { m as $b5e257d569688ac6$export$535bd6ca7f90a273, b as $3ef42575df84b30b$export$9d1611c77c2fe928, d as $bdb11010cef70236$export$f680877a34711e37, i as $64fa3d84918910a7$export$2881499e37b75b9a, $ as $64fa3d84918910a7$export$29f1550f4b0d4415, h as $64fa3d84918910a7$export$4d86445c2cf5e3, a as $64fa3d84918910a7$export$df3a06d6289f983e } from "../../utils-Cr3pLd9c.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-eGTqWSTd.js";
-import { $ as $d3f049242431219c$export$45fda7c47f93fd48, a as $d3f049242431219c$export$6d3443f2c48bfc20 } from "../../animation-DY7CNkr6.js";
-import { x as $6179b936705e76d3$export$ae780daf29e6d456, $ as $f645667febf57a63$export$4c014de7c8940b4c, v as $507fabe10e71c6fb$export$630ff653c5ada6a9, m as $507fabe10e71c6fb$export$b9b3dfddab17db27, z as $f645667febf57a63$export$13f3202a3e5ddd5 } from "../../useHover-CG39Ci3A.js";
+import { $ as $d3f049242431219c$export$45fda7c47f93fd48, a as $d3f049242431219c$export$6d3443f2c48bfc20 } from "../../animation-B2sADg3I.js";
+import { x as $6179b936705e76d3$export$ae780daf29e6d456, $ as $f645667febf57a63$export$4c014de7c8940b4c, v as $507fabe10e71c6fb$export$630ff653c5ada6a9, m as $507fabe10e71c6fb$export$b9b3dfddab17db27, z as $f645667febf57a63$export$13f3202a3e5ddd5 } from "../../useHover-VPZwb-1l.js";
 import $dbSRa$react__default, { useContext, useState, useMemo, useRef, useEffect, forwardRef, createContext } from "react";
 import { a as $96b38030c423d352$export$9fc1347d4195ccb3 } from "../../PortalProvider-CHPnqDSH.js";
 import { $ as $dbSRa$reactdom } from "../../index-sSixe2j_.js";
@@ -328,7 +328,7 @@ function $4e3b923658d69c60$var$TooltipInner(props) {
   let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
     global: true
   });
-  return /* @__PURE__ */ $dbSRa$react__default.createElement("div", {
+  return /* @__PURE__ */ $dbSRa$react__default.createElement($64fa3d84918910a7$export$df3a06d6289f983e.div, {
     ...$3ef42575df84b30b$export$9d1611c77c2fe928(DOMProps, renderProps, tooltipProps),
     ref: props.tooltipRef,
     style: {

package/dist/{context-DYYO3Ns3.js → context-iUFQCK8m.js}

@@ -1,5 +1,5 @@
 import $dbSRa$react__default, { useState, useEffect, useContext } from "react";
-import { l as $b5e257d569688ac6$export$535bd6ca7f90a273 } from "./utils-HC9_3Crc.js";
+import { m as $b5e257d569688ac6$export$535bd6ca7f90a273 } from "./utils-Cr3pLd9c.js";
 const $148a7a147e38ea7f$var$RTL_SCRIPTS = /* @__PURE__ */ new Set([
   "Arab",
   "Syrc",

package/dist/icons/icons.js

@@ -3418,7 +3418,7 @@ const icons = {
     /* @__PURE__ */ jsx("rect", { x: "11.75", y: "3", width: "4.5", height: "14", rx: "1.5", fill: "currentColor", fillOpacity: "0.5" }),
     /* @__PURE__ */ jsx("path", { d: "M1 1h18M1 19h18", stroke: "currentColor", strokeLinecap: "round", fill: "none" })
   ] }),
-  verticalAlignBetween: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", children: [
+  verticalAlignBetweenAlt: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", children: [
     /* @__PURE__ */ jsx("rect", { x: "0.75", y: "3", width: "4.5", height: "14", rx: "1.5", fill: "currentColor", fillOpacity: "0.5" }),
     /* @__PURE__ */ jsx("rect", { x: "14.75", y: "3", width: "4.5", height: "14", rx: "1.5", fill: "currentColor", fillOpacity: "0.5" }),
     /* @__PURE__ */ jsx("path", { d: "M1 1h18M1 19h18", stroke: "currentColor", strokeLinecap: "round", fill: "none" })
@@ -3433,7 +3433,7 @@ const icons = {
     /* @__PURE__ */ jsx("rect", { width: "4.5", height: "14", rx: "1.5", transform: "matrix(0 1 1 0 3 11.75)", fill: "currentColor", fillOpacity: "0.5" }),
     /* @__PURE__ */ jsx("path", { d: "M1 1v18M19 1v18", stroke: "currentColor", strokeLinecap: "round", fill: "none" })
   ] }),
-  horizontalAlignBetween: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", children: [
+  horizontalAlignBetweenAlt: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", children: [
     /* @__PURE__ */ jsx("rect", { width: "4.5", height: "14", rx: "1.5", transform: "matrix(0 1 1 0 3 .75)", fill: "currentColor", fillOpacity: "0.5" }),
     /* @__PURE__ */ jsx("rect", { width: "4.5", height: "14", rx: "1.5", transform: "matrix(0 1 1 0 3 14.75)", fill: "currentColor", fillOpacity: "0.5" }),
     /* @__PURE__ */ jsx("path", { d: "M1 1v18M19 1v18", stroke: "currentColor", strokeLinecap: "round", fill: "none" })

package/dist/index.js

@@ -5,7 +5,7 @@ import { Button, ButtonGroup } from "./components/button/button.js";
 import { Checkbox } from "./components/checkbox/checkbox.js";
 import { ComponentToggle } from "./components/component-toggle/component-toggle.js";
 import { ContainerPanel } from "./components/container-panel/container-panel.js";
-import { C } from "./color-swatch-CZj0jHZd.js";
+import { C } from "./color-swatch-DtaLObbd.js";
 import { ColorPicker } from "./components/color-pickers/color-picker.js";
 import { ColumnConfigSlider, ColumnConfigSliderOutput } from "./components/slider/column-config-slider.js";
 import { Container, ContainerGroup } from "./components/base-control/container.js";
@@ -47,6 +47,7 @@ import { OptionsPanel, OptionsPanelHeader, OptionsPanelIntro, OptionsPanelSectio
 import { Select } from "./components/select/single-select.js";
 import { Slider } from "./components/slider/slider.js";
 import { SmartImage } from "./components/smart-image/smart-image.js";
+import { __SmartImageNext } from "./components/smart-image/smart-image-next.js";
 import { SolidColorPicker } from "./components/color-pickers/solid-color-picker.js";
 import { Spacer } from "./components/spacer/spacer.js";
 import { Tab, TabList, TabPanel, Tabs } from "./components/tabs/tabs.js";
@@ -132,5 +133,6 @@ export {
   Tooltip,
   TriggeredPopover,
   VStack,
+  __SmartImageNext,
   getColumnConfigOutputText
 };