@dmsi/wedgekit-react 0.0.494 → 0.0.496

package/dist/components/MobileDataGrid/index.css

@@ -838,6 +838,12 @@
   .\!w-20 {
     width: calc(var(--spacing) * 20) !important;
   }
+  .w-1\/2 {
+    width: calc(1/2 * 100%);
+  }
+  .w-1\/4 {
+    width: calc(1/4 * 100%);
+  }
   .w-2\/3 {
     width: calc(2/3 * 100%);
   }
@@ -922,6 +928,9 @@
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
+  .min-w-10 {
+    min-width: calc(var(--spacing) * 10);
+  }
   .min-w-20 {
     min-width: calc(var(--spacing) * 20);
   }
@@ -4091,6 +4100,11 @@
       margin-top: var(--spacing-desktop-container-padding);
     }
   }
+  .desktop\:mt-px {
+    @container root (width >= 48rem) {
+      margin-top: 1px;
+    }
+  }
   .desktop\:mb-desktop-container-padding {
     @container root (width >= 48rem) {
       margin-bottom: var(--spacing-desktop-container-padding);
@@ -4673,6 +4687,7 @@
   position: relative;
   overflow: hidden;
   background-color: #f7f7f7;
+  opacity: 0.85;
 }
 .skeleton-paragraph::after {
   content: "";
@@ -4682,9 +4697,17 @@
   background-image:
     linear-gradient(
       90deg,
-      rgba(255, 255, 255, 0) 0%,
-      rgba(255, 255, 255, 0.6) 50%,
-      rgba(255, 255, 255, 0) 100%);
+      transparent 0%,
+      color-mix(in srgb, #ffffff 60%, transparent) 50%,
+      transparent 100%);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-image:
+      linear-gradient(
+        90deg,
+        transparent 0%,
+        color-mix(in srgb, var(--color-neutral-000) 60%, transparent) 50%,
+        transparent 100%);
+  }
   animation: skeleton-shimmer 1.4s ease-in-out infinite;
 }
 @keyframes skeleton-shimmer {

package/dist/components/MobileDataGrid/index.js

@@ -1,10 +1,11 @@
 import {
   MobileDataGrid
-} from "../../chunk-BYY2NTJH.js";
+} from "../../chunk-2A7H5GVB.js";
 import "../../chunk-M7INAUAJ.js";
 import "../../chunk-4Q7T4GJ2.js";
 import "../../chunk-3DEYCNUE.js";
 import "../../chunk-DYBJUTGK.js";
+import "../../chunk-Y5GD2FJA.js";
 import "../../chunk-TPBEID5X.js";
 import "../../chunk-B53XDCLO.js";
 import "../../chunk-MBZ55T2D.js";
@@ -15,8 +16,8 @@ import "../../chunk-BQNPOGD5.js";
 import "../../chunk-QMSPTD6L.js";
 import "../../chunk-XIXQUEYC.js";
 import "../../chunk-5IFPG6TS.js";
-import "../../chunk-KW6V7O3H.js";
 import "../../chunk-AJ5M6MVX.js";
+import "../../chunk-KW6V7O3H.js";
 import "../../chunk-JUFBGNWW.js";
 import "../../chunk-YEZBNQZI.js";
 import "../../chunk-S5ZJ3Q7P.js";
@@ -24,7 +25,7 @@ import "../../chunk-AT4AWD6B.js";
 import "../../chunk-EWGHVZL5.js";
 import "../../chunk-7GHD74J3.js";
 import "../../chunk-7BVUTFZ5.js";
-import "../../chunk-ETAEB3TA.js";
+import "../../chunk-L3BXRDLP.js";
 import "../../chunk-GRGDX7JC.js";
 import "../../chunk-HVNHTM3P.js";
 import "../../chunk-X67L3NZI.js";
@@ -37,15 +38,16 @@ import "../../chunk-6TYWM26K.js";
 import "../../chunk-SBRRNFOP.js";
 import "../../chunk-Y2GK27RX.js";
 import "../../chunk-QVWYTQKL.js";
-import "../../chunk-QBSEKZWX.js";
+import "../../chunk-ZKTHUXKS.js";
 import "../../chunk-TCMOGTPB.js";
 import "../../chunk-DVU5XV7L.js";
-import "../../chunk-IPAKWF2V.js";
+import "../../chunk-5R4C5F63.js";
 import "../../chunk-RQRR4FEF.js";
 import "../../chunk-44TH3VC7.js";
 import "../../chunk-AL5QIRY3.js";
 import "../../chunk-WVUIIBRR.js";
 import "../../chunk-75USUR3I.js";
+import "../../chunk-BTKWHCUE.js";
 import "../../chunk-WEAVZEE4.js";
 import "../../chunk-OZBB6RFM.js";
 import "../../chunk-URYQ24NF.js";

package/dist/components/NestedMenu.cjs

@@ -101,7 +101,7 @@ function Icon(_a) {
 }
 
 // src/components/MenuOption.tsx
-var import_clsx5 = __toESM(require("clsx"), 1);
+var import_clsx6 = __toESM(require("clsx"), 1);
 var import_react5 = require("react");
 
 // src/classNames.ts
@@ -392,8 +392,130 @@ var LocalStoragePrefixVersion = `dmsi-acc-v1.1`;
 var import_react4 = require("react");
 var LocalStoragePrefix = `${LocalStoragePrefixVersion}-tableLayout`;
 
-// src/components/MenuOption.tsx
+// src/components/Caption.tsx
+var import_clsx5 = __toESM(require("clsx"), 1);
 var import_jsx_runtime4 = require("react/jsx-runtime");
+var Caption = (_a) => {
+  var _b = _a, {
+    className,
+    children,
+    as = "span",
+    style = "default",
+    color,
+    align,
+    id,
+    testid,
+    marginTopDesktop
+  } = _b, props = __objRest(_b, [
+    "className",
+    "children",
+    "as",
+    "style",
+    "color",
+    "align",
+    "id",
+    "testid",
+    "marginTopDesktop"
+  ]);
+  const Element = as;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { id, "data-testid": testid, className: "flex gap-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      WhichIcon,
+      {
+        id,
+        testid,
+        style,
+        size: 16,
+        className: "mt-[3px] desktop:mt-0"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      Element,
+      __spreadProps(__spreadValues({
+        id: id ? `${id}-text` : void 0,
+        "data-testid": testid ? `${testid}-text` : void 0,
+        className: (0, import_clsx5.default)(
+          typography.caption.replace("text-text-primary-normal", ""),
+          (style === "default" || style === "info") && "text-text-secondary-normal",
+          style === "success" && "text-text-success-normal",
+          style === "warning" && "text-text-warning-normal",
+          style === "error" && "text-text-critical-normal",
+          align === "left" && "text-left",
+          align === "center" && "text-center",
+          align === "right" && "text-right",
+          className,
+          marginTopDesktop && `desktop:mt-px`
+        )
+      }, props), {
+        style: {
+          color: color ? `var(--color-${color})` : void 0
+        },
+        children
+      })
+    )
+  ] });
+};
+var WhichIcon = ({
+  style,
+  size,
+  className,
+  id,
+  testid
+}) => {
+  if (style === "success") {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-icon-success-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      Icon,
+      {
+        id: id ? `${id}-icon` : void 0,
+        testid: testid ? `${testid}-icon` : void 0,
+        className,
+        name: "check_circle",
+        size
+      }
+    ) });
+  }
+  if (style === "warning") {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-icon-warning-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      Icon,
+      {
+        id: id ? `${id}-icon` : void 0,
+        testid: testid ? `${testid}-icon` : void 0,
+        className,
+        name: "warning",
+        size
+      }
+    ) });
+  }
+  if (style === "error") {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-icon-critical-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      Icon,
+      {
+        id: id ? `${id}-icon` : void 0,
+        testid: testid ? `${testid}-icon` : void 0,
+        className,
+        name: "info",
+        size
+      }
+    ) });
+  }
+  if (style === "info") {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      Icon,
+      {
+        id: id ? `${id}-icon` : void 0,
+        testid: testid ? `${testid}-icon` : void 0,
+        className,
+        name: "info",
+        size
+      }
+    ) });
+  }
+  return null;
+};
+Caption.displayName = "Caption";
+
+// src/components/MenuOption.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var MenuOption = ({
   id,
   testid,
@@ -418,7 +540,8 @@ var MenuOption = ({
   mobilePositionTo,
   highlightMatchingText = false,
   menuValue,
-  onMouseMove
+  onMouseMove,
+  small = false
 }) => {
   const uniqueId = (0, import_react5.useId)();
   const internalRef = (0, import_react5.useRef)(null);
@@ -448,47 +571,48 @@ var MenuOption = ({
   const additionalAttributes = {
     "data-selected": selected || null
   };
-  const svgStyles = (0, import_clsx5.default)(
+  const svgStyles = (0, import_clsx6.default)(
     "[&>svg]:shrink-0 [&>svg]:fill-icon-action-primary-normal"
   );
-  const textLabelStyles = (0, import_clsx5.default)("w-full whitespace-nowrap !leading-6");
-  const normalStyles = variant === "normal" && !disabled && (0, import_clsx5.default)(
+  const textLabelStyles = (0, import_clsx6.default)("w-full whitespace-nowrap !leading-6");
+  const normalStyles = variant === "normal" && !disabled && (0, import_clsx6.default)(
     "bg-transparent text-text-primary-normal",
     "hover:bg-background-action-secondary-hover",
     "focus:bg-background-action-secondary-hover",
     "data-selected:bg-background-action-secondary-hover",
     "active:bg-background-action-secondary-active"
   );
-  const normalDisabledStyles = variant === "normal" && disabled && (0, import_clsx5.default)("text-text-primary-disabled");
-  const actionStyles = variant === "action" && !disabled && (0, import_clsx5.default)(
+  const normalDisabledStyles = variant === "normal" && disabled && (0, import_clsx6.default)("text-text-primary-disabled");
+  const actionStyles = variant === "action" && !disabled && (0, import_clsx6.default)(
     "text-action-400 bg-transparent",
     "hover:bg-background-action-secondary-hover hover:text-text-action-hover",
     "focus:bg-background-action-secondary-hover focus:text-text-action-hover",
     "data-selected:bg-background-action-secondary-active data-selected:text-text-action-active",
     "active:bg-background-action-secondary-active active:text-text-action-active"
   );
-  const actionDisabledStyles = variant === "action" && disabled && (0, import_clsx5.default)("text-text-action-disabled");
-  const disabledStyles = disabled && (0, import_clsx5.default)("bg-transparent cursor-default pointer-events-none");
+  const actionDisabledStyles = variant === "action" && disabled && (0, import_clsx6.default)("text-text-action-disabled");
+  const disabledStyles = disabled && (0, import_clsx6.default)("bg-transparent cursor-default pointer-events-none");
   const processChildren = typeof children === "string" && highlightMatchingText ? highlightMatch(children, menuValue) : children;
-  const renderChildren = typeof children === "object" ? children : variant === "action" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Label, { padded: true, className: textLabelStyles, children: processChildren }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Paragraph, { padded: true, className: textLabelStyles, children: processChildren });
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  const renderChildren = typeof children === "object" ? children : variant === "action" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Label, { padded: true, className: textLabelStyles, children: processChildren }) : !small ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Paragraph, { padded: true, className: textLabelStyles, children: processChildren }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Caption, { padded: true, className: textLabelStyles, children: processChildren });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       "div",
       __spreadProps(__spreadValues({
         id,
         "data-testid": testid,
         ref: actualRef,
-        className: (0, import_clsx5.default)(
-          "flex items-center cursor-pointer w-full text-left relative outline-none",
+        className: (0, import_clsx6.default)(
+          "flex cursor-pointer w-full text-left relative outline-none",
           svgStyles,
-          componentGap,
+          small ? layoutGroupGap : componentGap,
           componentPadding,
           baseTransition,
           normalStyles,
           normalDisabledStyles,
           actionStyles,
           actionDisabledStyles,
-          disabledStyles
+          disabledStyles,
+          { "items-center": !small }
         ),
         "data-value": value || children,
         onClick: () => {
@@ -505,13 +629,13 @@ var MenuOption = ({
         role: "menuitem",
         "aria-haspopup": subMenu ? "menu" : void 0,
         children: [
-          before && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "shrink-0 flex items-center", children: before }),
+          before && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: (0, import_clsx6.default)("shrink-0", { "items-center flex": !small }), children: before }),
           renderChildren,
           renderAfterProp()
         ]
       })
     ),
-    subMenu && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    subMenu && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "div",
       {
         onMouseEnter: handleSubMenuEnter,
@@ -535,14 +659,14 @@ var MenuOption = ({
       return after;
     }
     if (subMenu && after !== null) {
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: "chevron_right" });
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { name: "chevron_right" });
     }
   }
   function mobileBackMenuOption() {
     if (!isMobile) {
       return;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       MenuOption,
       {
         id: id ? `${id}-back` : void 0,
@@ -551,7 +675,7 @@ var MenuOption = ({
           closeSubMenuLevel == null ? void 0 : closeSubMenuLevel(currentSubMenuLevel != null ? currentSubMenuLevel : 0);
         },
         variant: "action",
-        before: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: "chevron_left" }),
+        before: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { name: "chevron_left" }),
         children: "Back"
       }
     );
@@ -568,13 +692,13 @@ function highlightMatch(text, searchValue) {
   );
   const parts = text.split(regex);
   return parts.map(
-    (part, index) => regex.test(part) ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "font-bold", children: part }, index) : part
+    (part, index) => regex.test(part) ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "font-bold", children: part }, index) : part
   );
 }
 
 // src/components/Button.tsx
-var import_clsx6 = __toESM(require("clsx"), 1);
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_clsx7 = __toESM(require("clsx"), 1);
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var Button = (_a) => {
   var _b = _a, {
     variant = "primary",
@@ -607,7 +731,7 @@ var Button = (_a) => {
     "id",
     "testid"
   ]);
-  const primaryVariantStyles = variant === "primary" && (0, import_clsx6.default)(
+  const primaryVariantStyles = variant === "primary" && (0, import_clsx7.default)(
     (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
     "bg-background-action-primary-normal border-background-action-primary-normal",
     "hover:bg-background-action-primary-hover hover:border-background-action-primary-hover",
@@ -615,7 +739,7 @@ var Button = (_a) => {
     "active:bg-background-action-primary-active active:border-background-action-primary-active",
     "disabled:bg-background-action-primary-disabled disabled:border-background-action-primary-disabled disabled:text-text-on-action-primary-disabled"
   );
-  const secondaryVariantStyles = variant === "secondary" && (0, import_clsx6.default)(
+  const secondaryVariantStyles = variant === "secondary" && (0, import_clsx7.default)(
     (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-primary-normal",
     "bg-background-action-secondary-normal border-border-action-normal",
     "hover:bg-background-action-secondary-hover hover:border-border-action-hover hover:text-text-action-primary-hover",
@@ -623,7 +747,7 @@ var Button = (_a) => {
     "active:bg-background-action-secondary-active active:border-border-action-active active:text-text-action-primary-active",
     "disabled:bg-background-action-primary-disabled disabled:border-border-action-disabled disabled:text-text-action-primary-disabled"
   );
-  const tertiaryVariantStyles = variant === "tertiary" && (0, import_clsx6.default)(
+  const tertiaryVariantStyles = variant === "tertiary" && (0, import_clsx7.default)(
     "bg-transparent border-transparent",
     iconOnly ? (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-icon-action-primary-normal" : (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-primary-normal",
     "bg-transparent border-transparent",
@@ -632,7 +756,7 @@ var Button = (_a) => {
     "active:bg-background-action-secondary-active active:border-transparent active:text-text-action-primary-active",
     "disabled:bg-transparent disabled:border-transparent disabled:text-text-action-primary-disabled"
   );
-  const primaryCriticalVariantStyles = variant === "primary-critical" && (0, import_clsx6.default)(
+  const primaryCriticalVariantStyles = variant === "primary-critical" && (0, import_clsx7.default)(
     (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
     "bg-background-action-critical-primary-normal border-background-action-critical-primary-normal",
     "hover:bg-background-action-critical-primary-hover hover:border-background-action-critical-primary-hover",
@@ -640,7 +764,7 @@ var Button = (_a) => {
     "active:bg-background-action-critical-primary-active active:border-background-action-critical-primary-active",
     "disabled:bg-background-action-critical-primary-disabled disabled:border-background-action-critical-primary-disabled disabled:text-text-on-action-primary-disabled"
   );
-  const secondaryCriticalVariantStyles = variant === "secondary-critical" && (0, import_clsx6.default)(
+  const secondaryCriticalVariantStyles = variant === "secondary-critical" && (0, import_clsx7.default)(
     (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-critical-normal",
     "bg-background-action-critical-secondary-normal border-border-action-critical-normal",
     "hover:bg-background-action-critical-secondary-hover hover:border-border-action-critical-hover hover:text-text-action-critical-hover",
@@ -648,7 +772,7 @@ var Button = (_a) => {
     "active:bg-background-action-critical-secondary-active active:border-border-action-critical-active active:text-text-action-critical-active",
     "disabled:bg-background-action-critical-disabled disabled:border-border-action-critical-disabled disabled:text-text-action-critical-disabled"
   );
-  const tertiaryCriticalVariantStyles = variant === "tertiary-critical" && (0, import_clsx6.default)(
+  const tertiaryCriticalVariantStyles = variant === "tertiary-critical" && (0, import_clsx7.default)(
     (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-critical-normal",
     "bg-transparent border-transparent text-text-action-critical-normal",
     "hover:bg-background-action-critical-secondary-hover hover:border-background-action-critical-secondary-hover hover:text-text-action-critical-hover",
@@ -656,7 +780,7 @@ var Button = (_a) => {
     "active:bg-background-action-critical-secondary-active active:border-background-action-critical-secondary-active active:text-text-action-critical-active",
     "disabled:bg-transparent disabled:border-transparent disabled:text-text-action-critical-disabled"
   );
-  const navigationVarianStyles = variant === "navigation" && (0, import_clsx6.default)(
+  const navigationVarianStyles = variant === "navigation" && (0, import_clsx7.default)(
     (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-primary-normal",
     "bg-transparent",
     "hover:bg-background-action-secondary-hover hover:text-text-action-primary-hover",
@@ -666,8 +790,8 @@ var Button = (_a) => {
     "flex-col",
     paddingUsingComponentGap
   );
-  const notNavigationVariantStyles = variant !== "navigation" && (0, import_clsx6.default)("border-2 flex-row", componentPaddingMinus2pxBorder, componentGap);
-  const buttonClasses = (0, import_clsx6.default)(
+  const notNavigationVariantStyles = variant !== "navigation" && (0, import_clsx7.default)("border-2 flex-row", componentPaddingMinus2pxBorder, componentGap);
+  const buttonClasses = (0, import_clsx7.default)(
     disabled ? "cursor-default" : "cursor-pointer",
     block ? "w-full" : "w-fit",
     baseTransition,
@@ -682,14 +806,14 @@ var Button = (_a) => {
     notNavigationVariantStyles,
     className
   );
-  const labelClasses = (0, import_clsx6.default)(
+  const labelClasses = (0, import_clsx7.default)(
     "min-h-6 flex items-center justify-center",
     classNameLabel,
     componentPaddingXUsingComponentGap,
     typography.buttonLabel
   );
   const Element = href && !as ? "a" : as;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     Element,
     __spreadProps(__spreadValues({
       id,
@@ -703,7 +827,7 @@ var Button = (_a) => {
       "data-theme": variant === "navigation" ? "brand" : void 0,
       children: [
         leftIcon && leftIcon,
-        !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { id: id ? `${id}-label` : void 0, "data-testid": testid ? `${testid}-label` : void 0, className: labelClasses, children }),
+        !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { id: id ? `${id}-label` : void 0, "data-testid": testid ? `${testid}-label` : void 0, className: labelClasses, children }),
         rightIcon && rightIcon
       ]
     })
@@ -712,7 +836,7 @@ var Button = (_a) => {
 Button.displayName = "Button";
 
 // src/components/NestedMenu.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function NestedMenu(props) {
   var _a;
   const { onMenuClick, currentMenu, testid } = props;
@@ -758,13 +882,13 @@ function NestedMenu(props) {
       item && __spreadValues(__spreadValues({}, item), !isPrevious && { previousMenu: currentMenu })
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-col w-full", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       MenuOption,
       {
         testid: testid ? `${testid}-back` : void 0,
         variant: "normal",
-        before: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        before: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           Icon,
           {
             name: "chevron_left",
@@ -777,10 +901,10 @@ function NestedMenu(props) {
           return handleMenuClick((_a2 = currentMenu.previousMenu) != null ? _a2 : null, true);
         },
         selected: selectedIndex === -1,
-        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Label, { color: "text-action-normal", children: currentMenu.previousMenu ? currentMenu.previousMenu.label : "Main Menu" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Label, { color: "text-action-normal", children: currentMenu.previousMenu ? currentMenu.previousMenu.label : "Main Menu" })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       MenuOption,
       {
         variant: "action",
@@ -790,13 +914,13 @@ function NestedMenu(props) {
     ),
     (currentMenu.subEntries || []).map((item, idx) => {
       var _a2;
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         MenuOption,
         {
           testid: testid ? `${testid}-${item.label}` : void 0,
           variant: "normal",
           onClick: () => handleMenuClick(item),
-          after: ((_a2 = item.subEntries) == null ? void 0 : _a2.length) && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          after: ((_a2 = item.subEntries) == null ? void 0 : _a2.length) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             Button,
             {
               iconOnly: true,
@@ -807,7 +931,7 @@ function NestedMenu(props) {
                 onMenuClick(item, "subEntry");
               },
               className: "!p-0 w-full justify-end",
-              leftIcon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "chevron_right", className: "icon", size: 24 })
+              leftIcon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { name: "chevron_right", className: "icon", size: 24 })
             }
           ),
           selected: selectedIndex === idx,

package/dist/components/NestedMenu.js

@@ -1,10 +1,11 @@
 "use client";
 import {
   MenuOption
-} from "../chunk-IPAKWF2V.js";
+} from "../chunk-5R4C5F63.js";
 import {
   Label
 } from "../chunk-AL5QIRY3.js";
+import "../chunk-BTKWHCUE.js";
 import {
   useKeydown
 } from "../chunk-URYQ24NF.js";

package/dist/components/SearchResultImage/index.cjs

@@ -0,0 +1,92 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/SearchResultImage/index.tsx
+var SearchResultImage_exports = {};
+__export(SearchResultImage_exports, {
+  SearchResultImage: () => SearchResultImage
+});
+module.exports = __toCommonJS(SearchResultImage_exports);
+var import_react2 = require("react");
+
+// src/components/ImagePlaceholder.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+function ImagePlaceholder(props) {
+  const clipId = (0, import_react.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    __spreadProps(__spreadValues({
+      xmlns: "http://www.w3.org/2000/svg",
+      width: 242,
+      height: 243,
+      fill: "none"
+    }, props), {
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { clipPath: `url(#${clipId})`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { width: props.width, height: props.width, fill: "#F7F7F7", rx: 2 }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("clipPath", { id: clipId, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { width: props.width, height: props.width, fill: "#fff", rx: 2 }) }) })
+      ]
+    })
+  );
+}
+
+// src/components/SearchResultImage/index.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function SearchResultImage({
+  width = 20,
+  height = 20,
+  src,
+  alt
+}) {
+  const [imageError, setImageError] = (0, import_react2.useState)(false);
+  const showPlaceholder = imageError || !src;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: showPlaceholder ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ImagePlaceholder, { width, height }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "img",
+    {
+      src,
+      alt,
+      width,
+      height,
+      draggable: false,
+      loading: "lazy",
+      onError: () => setImageError(true)
+    }
+  ) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SearchResultImage
+});

package/dist/components/SearchResultImage/index.js

@@ -0,0 +1,8 @@
+import {
+  SearchResultImage
+} from "../../chunk-Y5GD2FJA.js";
+import "../../chunk-QVWYTQKL.js";
+import "../../chunk-ORMEWXMH.js";
+export {
+  SearchResultImage
+};