@dmsi/wedgekit-react 0.0.494 → 0.0.495

package/dist/components/index.css

@@ -4091,6 +4091,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);

package/dist/components/index.js

@@ -2,13 +2,16 @@ import {
   DataGrid,
   DateInput,
   MobileDataGrid
-} from "../chunk-BYY2NTJH.js";
+} from "../chunk-2A7H5GVB.js";
 import "../chunk-M7INAUAJ.js";
 import "../chunk-4Q7T4GJ2.js";
 import "../chunk-3DEYCNUE.js";
 import {
   ProductImagePreview
 } from "../chunk-DYBJUTGK.js";
+import {
+  SearchResultImage
+} from "../chunk-Y5GD2FJA.js";
 import {
   PDFViewer
 } from "../chunk-TPBEID5X.js";
@@ -21,8 +24,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";
@@ -60,14 +63,14 @@ import {
   DataGridCell,
   DragAlongCell,
   DraggableCellHeader
-} from "../chunk-QBSEKZWX.js";
+} from "../chunk-ZKTHUXKS.js";
 import {
   Menu
 } from "../chunk-TCMOGTPB.js";
 import "../chunk-DVU5XV7L.js";
 import {
   MenuOption
-} from "../chunk-IPAKWF2V.js";
+} from "../chunk-5R4C5F63.js";
 import {
   Search
 } from "../chunk-RQRR4FEF.js";
@@ -81,6 +84,7 @@ import "../chunk-WVUIIBRR.js";
 import {
   EmptyCartIcon
 } from "../chunk-75USUR3I.js";
+import "../chunk-BTKWHCUE.js";
 import {
   Checkbox
 } from "../chunk-WEAVZEE4.js";
@@ -142,6 +146,7 @@ export {
   Paragraph,
   ProductImagePreview,
   Search,
+  SearchResultImage,
   Select,
   SimpleTable,
   SkeletonParagraph,

package/dist/index.css

@@ -4069,6 +4069,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);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dmsi/wedgekit-react",
   "private": false,
-  "version": "0.0.494",
+  "version": "0.0.495",
   "type": "module",
   "scripts": {
     "build": "tsup",

package/src/components/Caption.tsx

@@ -13,6 +13,7 @@ type CaptionProps = {
   style?: Style["style"];
   id?: string;
   testid?: string;
+  marginTopDesktop?: boolean;
 } & AsProps<Tags> &
   TextAttributes &
   TypographyProps;
@@ -26,6 +27,7 @@ export const Caption = ({
   align,
   id,
   testid,
+  marginTopDesktop,
   ...props
 }: CaptionProps) => {
   const Element = as;
@@ -54,6 +56,7 @@ export const Caption = ({
           align === "center" && "text-center",
           align === "right" && "text-right",
           className,
+          marginTopDesktop && `desktop:mt-px`,
         )}
         {...props}
         style={{

package/src/components/MenuOption.tsx

@@ -2,13 +2,14 @@
 
 import clsx from "clsx";
 import { PropsWithChildren, ReactNode, RefObject, useId, useRef } from "react";
-import { baseTransition, componentGap, componentPadding } from "../classNames";
+import { baseTransition, componentGap, componentPadding, layoutGroupGap } from "../classNames";
 import { AsProps } from "../types";
 import { Label, Tags } from "./Label";
 import { Paragraph } from "./Paragraph";
 import { Icon } from "./Icon";
 import { MenuPosition } from "./Menu";
 import { useMatchesMobile } from "../hooks";
+import { Caption } from "./Caption";
 
 type BaseProps = PropsWithChildren<{
   id?: string;
@@ -22,6 +23,7 @@ type BaseProps = PropsWithChildren<{
   mobilePositionTo?: RefObject<HTMLElement | null>;
   selected?: boolean;
   currentSubMenuLevel?: number | null;
+  small?: boolean;
 }> &
   (
     | {
@@ -100,7 +102,8 @@ export const MenuOption = ({
   mobilePositionTo,
   highlightMatchingText = false,
   menuValue,
-  onMouseMove
+  onMouseMove,
+  small = false,
 }: MenuOptionProps) => {
   const uniqueId = useId();
   const internalRef = useRef(null);
@@ -186,9 +189,15 @@ export const MenuOption = ({
         {processChildren}
       </Label>
     ) : (
+      !small ? (
       <Paragraph padded className={textLabelStyles}>
         {processChildren}
       </Paragraph>
+      ) : (
+      <Caption padded className={textLabelStyles}>
+        {processChildren}
+      </Caption>
+      )
     );
 
   return (
@@ -198,9 +207,9 @@ export const MenuOption = ({
         data-testid={testid}
         ref={actualRef}
         className={clsx(
-          "flex items-center cursor-pointer w-full text-left relative outline-none",
+          "flex cursor-pointer w-full text-left relative outline-none",
           svgStyles,
-          componentGap,
+          small ? layoutGroupGap : componentGap,
           componentPadding,
           baseTransition,
           normalStyles,
@@ -208,6 +217,7 @@ export const MenuOption = ({
           actionStyles,
           actionDisabledStyles,
           disabledStyles,
+          { "items-center": !small },
         )}
         data-value={value || children}
         onClick={() => {
@@ -224,7 +234,7 @@ export const MenuOption = ({
         role="menuitem"
         aria-haspopup={subMenu ? "menu" : undefined}
       >
-        {before && <div className="shrink-0 flex items-center">{before}</div>}
+        {before && <div className={clsx("shrink-0", { "items-center flex": !small })}>{before}</div>}
 
         {renderChildren}
 
@@ -273,7 +283,7 @@ export const MenuOption = ({
         testid={testid ? `${testid}-back` : undefined}
         onClick={() => {
           closeSubMenuLevel?.(currentSubMenuLevel ?? 0);
-        }}
+        }} 
         variant="action"
         before={<Icon name="chevron_left" />}
       >

package/src/components/SearchResultImage/index.tsx

@@ -0,0 +1,39 @@
+import { useState } from "react";
+import { ImagePlaceholder } from "../ImagePlaceholder";
+
+export type SearchResultImageProps = {
+  width?: number;
+  height?: number;
+  src?: string | null;
+  alt: string;
+  className?: string;
+};
+
+export function SearchResultImage({
+  width = 20,
+  height = 20,
+  src,
+  alt,
+}: SearchResultImageProps) {
+  const [imageError, setImageError] = useState(false);
+
+  const showPlaceholder = imageError || !src;
+
+  return (
+    <>
+      {showPlaceholder ? (
+        <ImagePlaceholder width={width} height={height} />
+      ) : (
+        <img
+          src={src}
+          alt={alt}
+          width={width}
+          height={height}
+          draggable={false}
+          loading="lazy"
+          onError={() => setImageError(true)}
+        />
+      )}
+    </>
+  );
+}

package/src/components/index.ts

@@ -30,4 +30,5 @@ export { ListGroup } from "./ListGroup";
 export { Pagination } from "./Pagination";
 export { SkeletonParagraph } from "./SkeletonParagraph";
 export { EmptyCartIcon } from "./EmptyCartIcon";
+export { SearchResultImage } from "./SearchResultImage";
 export { Alert } from "./Alert";