@dmsi/wedgekit-react 0.0.414 → 0.0.417

package/dist/components/CalendarRange.css

@@ -690,6 +690,9 @@
   .ml-auto {
     margin-left: auto;
   }
+  .box-content {
+    box-sizing: content-box;
+  }
   .block {
     display: block;
   }
@@ -841,6 +844,9 @@
   .\!w-20 {
     width: calc(var(--spacing) * 20) !important;
   }
+  .w-2\/3 {
+    width: calc(2/3 * 100%);
+  }
   .w-3 {
     width: calc(var(--spacing) * 3);
   }
@@ -961,6 +967,9 @@
   .grow-0 {
     flex-grow: 0;
   }
+  .border-collapse {
+    border-collapse: collapse;
+  }
   .translate-x-0 {
     --tw-translate-x: calc(var(--spacing) * 0);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -996,6 +1005,9 @@
   .cursor-grab {
     cursor: grab;
   }
+  .cursor-not-allowed {
+    cursor: not-allowed;
+  }
   .cursor-pointer {
     cursor: pointer;
   }
@@ -1074,6 +1086,9 @@
   .justify-start {
     justify-content: flex-start;
   }
+  .gap-0 {
+    gap: calc(var(--spacing) * 0);
+  }
   .gap-0\.5 {
     gap: calc(var(--spacing) * 0.5);
   }
@@ -1284,6 +1299,10 @@
     border-inline-style: var(--tw-border-style);
     border-inline-width: 0px;
   }
+  .border-x-1 {
+    border-inline-style: var(--tw-border-style);
+    border-inline-width: 1px;
+  }
   .border-y {
     border-block-style: var(--tw-border-style);
     border-block-width: 1px;
@@ -1300,6 +1319,10 @@
     border-right-style: var(--tw-border-style);
     border-right-width: 0px;
   }
+  .border-r-1 {
+    border-right-style: var(--tw-border-style);
+    border-right-width: 1px;
+  }
   .border-b {
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
@@ -1308,6 +1331,10 @@
     border-left-style: var(--tw-border-style);
     border-left-width: 1px;
   }
+  .border-l-1 {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 1px;
+  }
   .border-dashed {
     --tw-border-style: dashed;
     border-style: dashed;
@@ -1885,6 +1912,9 @@
   .\!p-0 {
     padding: calc(var(--spacing) * 0) !important;
   }
+  .p-0 {
+    padding: calc(var(--spacing) * 0);
+  }
   .p-0\.5 {
     padding: calc(var(--spacing) * 0.5);
   }
@@ -1999,12 +2029,33 @@
   .pt-\[7px\] {
     padding-top: 7px;
   }
+  .pt-mobile-component-padding {
+    padding-top: var(--spacing-mobile-component-padding);
+  }
+  .pt-mobile-container-padding {
+    padding-top: var(--spacing-mobile-container-padding);
+  }
+  .pt-mobile-layout-padding {
+    padding-top: var(--spacing-mobile-layout-padding);
+  }
+  .pr-mobile-component-padding {
+    padding-right: var(--spacing-mobile-component-padding);
+  }
+  .pr-mobile-container-padding {
+    padding-right: var(--spacing-mobile-container-padding);
+  }
+  .pr-mobile-layout-padding {
+    padding-right: var(--spacing-mobile-layout-padding);
+  }
   .pb-2 {
     padding-bottom: calc(var(--spacing) * 2);
   }
   .pb-mobile-component-padding {
     padding-bottom: var(--spacing-mobile-component-padding);
   }
+  .pb-mobile-container-padding {
+    padding-bottom: var(--spacing-mobile-container-padding);
+  }
   .pb-mobile-layout-padding {
     padding-bottom: var(--spacing-mobile-layout-padding);
   }
@@ -2026,6 +2077,12 @@
   .pl-mobile-component-padding {
     padding-left: var(--spacing-mobile-component-padding);
   }
+  .pl-mobile-container-padding {
+    padding-left: var(--spacing-mobile-container-padding);
+  }
+  .pl-mobile-layout-padding {
+    padding-left: var(--spacing-mobile-layout-padding);
+  }
   .text-center {
     text-align: center;
   }
@@ -2035,6 +2092,9 @@
   .text-right {
     text-align: right;
   }
+  .align-middle {
+    vertical-align: middle;
+  }
   .font-sans {
     font-family: var(--font-sans);
   }
@@ -2243,6 +2303,9 @@
   .text-text-action-normal {
     color: var(--color-text-action-normal);
   }
+  .text-text-action-primary-disabled {
+    color: var(--color-text-action-primary-disabled);
+  }
   .text-text-action-primary-normal {
     color: var(--color-text-action-primary-normal);
   }
@@ -2321,6 +2384,9 @@
   .opacity-40 {
     opacity: 40%;
   }
+  .opacity-50 {
+    opacity: 50%;
+  }
   .opacity-70 {
     opacity: 70%;
   }
@@ -3060,6 +3126,13 @@
       }
     }
   }
+  .hover\:bg-background-grouped-secondary-normal {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-background-grouped-secondary-normal);
+      }
+    }
+  }
   .hover\:\!text-brand-text-on-action-primary-hover {
     &:hover {
       @media (hover: hover) {
@@ -3206,6 +3279,11 @@
       background-color: var(--color-background-action-secondary-hover);
     }
   }
+  .focus\:bg-background-grouped-secondary-normal {
+    &:focus {
+      background-color: var(--color-background-grouped-secondary-normal);
+    }
+  }
   .focus\:text-text-action-critical-hover {
     &:focus {
       color: var(--color-text-action-critical-hover);
@@ -3416,6 +3494,11 @@
       pointer-events: none;
     }
   }
+  .disabled\:cursor-default {
+    &:disabled {
+      cursor: default;
+    }
+  }
   .disabled\:\!border-border-primary-normal {
     &:disabled {
       border-color: var(--color-border-primary-normal) !important;
@@ -3722,11 +3805,6 @@
       width: 100%;
     }
   }
-  .sm\:grid-cols-2 {
-    @media (width >= 320px) {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-  }
   .md\:block {
     @media (width >= 768px) {
       display: block;
@@ -3757,66 +3835,6 @@
       gap: calc(var(--spacing) * 2);
     }
   }
-  .lg\:grid-cols-4 {
-    @media (width >= 1024px) {
-      grid-template-columns: repeat(4, minmax(0, 1fr));
-    }
-  }
-  .xl\:grid-cols-4 {
-    @media (width >= 1280px) {
-      grid-template-columns: repeat(4, minmax(0, 1fr));
-    }
-  }
-  .xl\:grid-cols-5 {
-    @media (width >= 1280px) {
-      grid-template-columns: repeat(5, minmax(0, 1fr));
-    }
-  }
-  .xl\:grid-cols-6 {
-    @media (width >= 1280px) {
-      grid-template-columns: repeat(6, minmax(0, 1fr));
-    }
-  }
-  .xl\:grid-cols-8 {
-    @media (width >= 1280px) {
-      grid-template-columns: repeat(8, minmax(0, 1fr));
-    }
-  }
-  .\32xl\:grid-cols-6 {
-    @media (width >= 1536px) {
-      grid-template-columns: repeat(6, minmax(0, 1fr));
-    }
-  }
-  .\32xl\:grid-cols-7 {
-    @media (width >= 1536px) {
-      grid-template-columns: repeat(7, minmax(0, 1fr));
-    }
-  }
-  .\32xl\:grid-cols-8 {
-    @media (width >= 1536px) {
-      grid-template-columns: repeat(8, minmax(0, 1fr));
-    }
-  }
-  .\32xl\:grid-cols-9 {
-    @media (width >= 1536px) {
-      grid-template-columns: repeat(9, minmax(0, 1fr));
-    }
-  }
-  .\32xl\:grid-cols-10 {
-    @media (width >= 1536px) {
-      grid-template-columns: repeat(10, minmax(0, 1fr));
-    }
-  }
-  .\32xl\:grid-cols-11 {
-    @media (width >= 1536px) {
-      grid-template-columns: repeat(11, minmax(0, 1fr));
-    }
-  }
-  .\32xl\:grid-cols-12 {
-    @media (width >= 1536px) {
-      grid-template-columns: repeat(12, minmax(0, 1fr));
-    }
-  }
   .compact\:mt-desktop-compact-component-gap {
     &:where([data-compact]) {
       margin-top: var(--spacing-desktop-compact-component-gap);
@@ -3922,11 +3940,46 @@
       padding-block: var(--spacing-desktop-compact-layout-padding);
     }
   }
+  .compact\:pt-desktop-compact-component-padding {
+    &:where([data-compact]) {
+      padding-top: var(--spacing-desktop-compact-component-padding);
+    }
+  }
+  .compact\:pt-desktop-compact-container-padding {
+    &:where([data-compact]) {
+      padding-top: var(--spacing-desktop-compact-container-padding);
+    }
+  }
+  .compact\:pt-desktop-compact-layout-padding {
+    &:where([data-compact]) {
+      padding-top: var(--spacing-desktop-compact-layout-padding);
+    }
+  }
+  .compact\:pr-desktop-compact-component-padding {
+    &:where([data-compact]) {
+      padding-right: var(--spacing-desktop-compact-component-padding);
+    }
+  }
+  .compact\:pr-desktop-compact-container-padding {
+    &:where([data-compact]) {
+      padding-right: var(--spacing-desktop-compact-container-padding);
+    }
+  }
+  .compact\:pr-desktop-compact-layout-padding {
+    &:where([data-compact]) {
+      padding-right: var(--spacing-desktop-compact-layout-padding);
+    }
+  }
   .compact\:pb-desktop-compact-component-padding {
     &:where([data-compact]) {
       padding-bottom: var(--spacing-desktop-compact-component-padding);
     }
   }
+  .compact\:pb-desktop-compact-container-padding {
+    &:where([data-compact]) {
+      padding-bottom: var(--spacing-desktop-compact-container-padding);
+    }
+  }
   .compact\:pb-desktop-compact-layout-padding {
     &:where([data-compact]) {
       padding-bottom: var(--spacing-desktop-compact-layout-padding);
@@ -3937,6 +3990,16 @@
       padding-left: var(--spacing-desktop-compact-component-padding);
     }
   }
+  .compact\:pl-desktop-compact-container-padding {
+    &:where([data-compact]) {
+      padding-left: var(--spacing-desktop-compact-container-padding);
+    }
+  }
+  .compact\:pl-desktop-compact-layout-padding {
+    &:where([data-compact]) {
+      padding-left: var(--spacing-desktop-compact-layout-padding);
+    }
+  }
   .compact\:text-caption-desktop-compact {
     &:where([data-compact]) {
       font-size: var(--text-caption-desktop-compact);
@@ -4108,6 +4171,11 @@
       flex-grow: 0;
     }
   }
+  .desktop\:grid-cols-4 {
+    @container root (width >= 48rem) {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+  }
   .desktop\:flex-col {
     @container root (width >= 48rem) {
       flex-direction: column;
@@ -4243,16 +4311,51 @@
       padding-block: var(--spacing-desktop-layout-padding);
     }
   }
+  .desktop\:pt-desktop-component-padding {
+    @container root (width >= 48rem) {
+      padding-top: var(--spacing-desktop-component-padding);
+    }
+  }
+  .desktop\:pt-desktop-container-padding {
+    @container root (width >= 48rem) {
+      padding-top: var(--spacing-desktop-container-padding);
+    }
+  }
   .desktop\:pt-desktop-layout-gap {
     @container root (width >= 48rem) {
       padding-top: var(--spacing-desktop-layout-gap);
     }
   }
+  .desktop\:pt-desktop-layout-padding {
+    @container root (width >= 48rem) {
+      padding-top: var(--spacing-desktop-layout-padding);
+    }
+  }
+  .desktop\:pr-desktop-component-padding {
+    @container root (width >= 48rem) {
+      padding-right: var(--spacing-desktop-component-padding);
+    }
+  }
+  .desktop\:pr-desktop-container-padding {
+    @container root (width >= 48rem) {
+      padding-right: var(--spacing-desktop-container-padding);
+    }
+  }
+  .desktop\:pr-desktop-layout-padding {
+    @container root (width >= 48rem) {
+      padding-right: var(--spacing-desktop-layout-padding);
+    }
+  }
   .desktop\:pb-desktop-component-padding {
     @container root (width >= 48rem) {
       padding-bottom: var(--spacing-desktop-component-padding);
     }
   }
+  .desktop\:pb-desktop-container-padding {
+    @container root (width >= 48rem) {
+      padding-bottom: var(--spacing-desktop-container-padding);
+    }
+  }
   .desktop\:pb-desktop-layout-padding {
     @container root (width >= 48rem) {
       padding-bottom: var(--spacing-desktop-layout-padding);
@@ -4263,6 +4366,16 @@
       padding-left: var(--spacing-desktop-component-padding);
     }
   }
+  .desktop\:pl-desktop-container-padding {
+    @container root (width >= 48rem) {
+      padding-left: var(--spacing-desktop-container-padding);
+    }
+  }
+  .desktop\:pl-desktop-layout-padding {
+    @container root (width >= 48rem) {
+      padding-left: var(--spacing-desktop-layout-padding);
+    }
+  }
   .desktop\:text-caption-desktop {
     @container root (width >= 48rem) {
       font-size: var(--text-caption-desktop);

package/dist/components/CalendarRange.js

@@ -3,37 +3,45 @@ import {
   CalendarRange_default,
   isWeekend
 } from "../chunk-UOHCOOC2.js";
-import "../chunk-OBY5EH47.js";
+import "../chunk-HYJIDHAK.js";
 import "../chunk-M7INAUAJ.js";
-import "../chunk-6I5LZ2ZC.js";
-import "../chunk-44TDIHUP.js";
-import "../chunk-LZGYABCX.js";
+import "../chunk-7AXHAWJX.js";
+import "../chunk-P3MIP2FD.js";
+import "../chunk-3HBYDOYE.js";
+import "../chunk-IMOIZFJZ.js";
+import "../chunk-MBZ55T2D.js";
+import "../chunk-2IKT6IHB.js";
 import "../chunk-G5DEC7H3.js";
 import "../chunk-3X3Y4TMS.js";
 import "../chunk-BQNPOGD5.js";
-import "../chunk-MBZ55T2D.js";
-import "../chunk-2IKT6IHB.js";
-import "../chunk-AA6GE3TH.js";
-import "../chunk-KZZKQLKF.js";
+import "../chunk-LUPHOXAQ.js";
+import "../chunk-W55J2KJZ.js";
 import "../chunk-5IFPG6TS.js";
 import "../chunk-AJ5M6MVX.js";
 import "../chunk-M6TSTDNZ.js";
-import "../chunk-QQ5G773N.js";
-import "../chunk-AT4AWD6B.js";
+import "../chunk-EJSPFQCY.js";
+import "../chunk-RQLWSLVE.js";
+import "../chunk-6LHBY2IH.js";
+import "../chunk-VJVY6NPF.js";
 import "../chunk-EWGHVZL5.js";
+import "../chunk-DCLNAUC4.js";
+import "../chunk-PQWWVBSR.js";
+import "../chunk-AT4AWD6B.js";
 import "../chunk-J5V2JRIK.js";
-import "../chunk-D6YCMQPO.js";
+import "../chunk-TYAQWVIM.js";
+import "../chunk-SBCFBHNG.js";
 import "../chunk-4RJKB7LC.js";
+import "../chunk-AG43RS4Q.js";
 import "../chunk-XM7IQHBU.js";
 import "../chunk-FRHPFACM.js";
 import "../chunk-T36HX6QY.js";
-import "../chunk-AG43RS4Q.js";
+import "../chunk-NRNWEQD7.js";
 import "../chunk-SBRRNFOP.js";
-import "../chunk-ER6RCOH3.js";
+import "../chunk-Y2GK27RX.js";
 import "../chunk-EU73QPW7.js";
 import "../chunk-QVWYTQKL.js";
 import "../chunk-NO5BIKWS.js";
-import "../chunk-MQX7GFLX.js";
+import "../chunk-CAQWLY5V.js";
 import "../chunk-V47RTW7E.js";
 import "../chunk-22VBZWJG.js";
 import "../chunk-NVOZAVEX.js";
@@ -47,9 +55,9 @@ import "../chunk-VXWSAIB5.js";
 import "../chunk-TYTD4FLW.js";
 import "../chunk-5UH6QUFB.js";
 import "../chunk-FA7IFW66.js";
-import "../chunk-JIMJIJOF.js";
-import "../chunk-EZCH4PQS.js";
-import "../chunk-GB4ZTUQV.js";
+import "../chunk-5TGP5EFM.js";
+import "../chunk-KBJZUVLM.js";
+import "../chunk-DTW7JCBR.js";
 import "../chunk-OGIFIPKH.js";
 import "../chunk-NKUETCDA.js";
 import "../chunk-WWAPK5PH.js";

package/dist/components/Card.cjs

@@ -65,14 +65,50 @@ module.exports = __toCommonJS(Card_exports);
 var import_clsx = __toESM(require("clsx"), 1);
 var import_jsx_runtime = require("react/jsx-runtime");
 function Card(props) {
-  const _a = props, { children, selected, testid } = _a, rest = __objRest(_a, ["children", "selected", "testid"]);
+  const _a = props, {
+    children,
+    selected,
+    testid,
+    padding,
+    paddingX,
+    paddingY,
+    paddingBottom,
+    paddingTop,
+    paddingLeft,
+    paddingRight
+  } = _a, rest = __objRest(_a, [
+    "children",
+    "selected",
+    "testid",
+    "padding",
+    "paddingX",
+    "paddingY",
+    "paddingBottom",
+    "paddingTop",
+    "paddingLeft",
+    "paddingRight"
+  ]);
   const CardComponent = props.as || "div";
+  const anyPaddingPropSpecified = padding !== void 0 || paddingX !== void 0 || paddingY !== void 0 || paddingBottom !== void 0 || paddingTop !== void 0 || paddingLeft !== void 0 || paddingRight !== void 0;
+  const paddingClasses = (0, import_clsx.default)(
+    // Backward compatibility: if no new padding props provided keep existing class.
+    !anyPaddingPropSpecified && "p-desktop-layout-padding",
+    // New responsive spacing tokens (mirrors Stack for layout sizing)
+    padding && "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding",
+    paddingX && "px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding",
+    paddingY && "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding",
+    paddingBottom && "pb-mobile-layout-padding desktop:pb-desktop-layout-padding compact:pb-desktop-compact-layout-padding",
+    paddingTop && "pt-mobile-layout-padding desktop:pt-desktop-layout-padding compact:pt-desktop-compact-layout-padding",
+    paddingLeft && "pl-mobile-layout-padding desktop:pl-desktop-layout-padding compact:pl-desktop-compact-layout-padding",
+    paddingRight && "pr-mobile-layout-padding desktop:pr-desktop-layout-padding compact:pr-desktop-compact-layout-padding"
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     CardComponent,
     __spreadProps(__spreadValues({}, rest), {
       "data-testid": testid,
       className: (0, import_clsx.default)(
-        "rounded-sm p-desktop-layout-padding",
+        "rounded-sm",
+        paddingClasses,
         selected ? "border-2 border-border-primary-focus" : "border border-border-primary-normal",
         rest.className
       ),

package/dist/components/Card.js

@@ -1,6 +1,6 @@
 import {
   Card
-} from "../chunk-EZCH4PQS.js";
+} from "../chunk-KBJZUVLM.js";
 import "../chunk-ORMEWXMH.js";
 export {
   Card

package/dist/components/CompactImagesPreview.cjs

@@ -232,6 +232,10 @@ var Stack = (_a) => {
     padding,
     paddingX,
     paddingY,
+    paddingBottom,
+    paddingTop,
+    paddingLeft,
+    paddingRight,
     margin,
     marginX,
     marginY,
@@ -247,6 +251,10 @@ var Stack = (_a) => {
     height,
     maxHeight,
     borderColor,
+    borderTopColor,
+    borderRightColor,
+    borderBottomColor,
+    borderLeftColor,
     backgroundColor,
     sizing = "none",
     overflowY = "inherit",
@@ -272,6 +280,10 @@ var Stack = (_a) => {
     "padding",
     "paddingX",
     "paddingY",
+    "paddingBottom",
+    "paddingTop",
+    "paddingLeft",
+    "paddingRight",
     "margin",
     "marginX",
     "marginY",
@@ -287,6 +299,10 @@ var Stack = (_a) => {
     "height",
     "maxHeight",
     "borderColor",
+    "borderTopColor",
+    "borderRightColor",
+    "borderBottomColor",
+    "borderLeftColor",
     "backgroundColor",
     "sizing",
     "overflowY",
@@ -322,6 +338,10 @@ var Stack = (_a) => {
         width: width !== void 0 && typeof width === "number" ? `${width}px` : void 0,
         minWidth: minWidth !== void 0 ? `${minWidth}px` : void 0,
         border: borderColor ? `1px solid var(--color-${borderColor})` : void 0,
+        borderTop: borderTopColor ? `1px solid var(--color-${borderTopColor})` : void 0,
+        borderRight: borderRightColor ? `1px solid var(--color-${borderRightColor})` : void 0,
+        borderBottom: borderBottomColor ? `1px solid var(--color-${borderBottomColor})` : void 0,
+        borderLeft: borderLeftColor ? `1px solid var(--color-${borderLeftColor})` : void 0,
         backgroundColor: backgroundColor ? `var(--color-${backgroundColor})` : void 0,
         flexGrow: flexGrow !== void 0 ? flexGrow : void 0,
         flexShrink: flexShrink !== void 0 ? flexShrink : void 0,
@@ -361,6 +381,22 @@ var Stack = (_a) => {
         paddingY && sizing === "layout" && "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding",
         paddingY && sizing === "layout-group" && paddingYUsingLayoutGroupGap,
         paddingY && sizing === "component" && "py-mobile-component-padding desktop:py-desktop-component-padding compact:py-desktop-compact-component-padding",
+        paddingBottom && sizing === "container" && "pb-mobile-container-padding desktop:pb-desktop-container-padding compact:pb-desktop-compact-container-padding",
+        paddingBottom && sizing === "layout" && "pb-mobile-layout-padding desktop:pb-desktop-layout-padding compact:pb-desktop-compact-layout-padding",
+        paddingBottom && sizing === "layout-group" && "pb-mobile-layout-group-padding desktop:pb-desktop-layout-group-padding compact:pb-desktop-compact-layout-group-padding",
+        paddingBottom && sizing === "component" && "pb-mobile-component-padding desktop:pb-desktop-component-padding compact:pb-desktop-compact-component-padding",
+        paddingTop && sizing === "container" && "pt-mobile-container-padding desktop:pt-desktop-container-padding compact:pt-desktop-compact-container-padding",
+        paddingTop && sizing === "layout" && "pt-mobile-layout-padding desktop:pt-desktop-layout-padding compact:pt-desktop-compact-layout-padding",
+        paddingTop && sizing === "layout-group" && "pt-mobile-layout-group-padding desktop:pt-desktop-layout-group-padding compact:pt-desktop-compact-layout-group-padding",
+        paddingTop && sizing === "component" && "pt-mobile-component-padding desktop:pt-desktop-component-padding compact:pt-desktop-compact-component-padding",
+        paddingLeft && sizing === "container" && "pl-mobile-container-padding desktop:pl-desktop-container-padding compact:pl-desktop-compact-container-padding",
+        paddingLeft && sizing === "layout" && "pl-mobile-layout-padding desktop:pl-desktop-layout-padding compact:pl-desktop-compact-layout-padding",
+        paddingLeft && sizing === "layout-group" && "pl-mobile-layout-group-padding desktop:pl-desktop-layout-group-padding compact:pl-desktop-compact-layout-group-padding",
+        paddingLeft && sizing === "component" && "pl-mobile-component-padding desktop:pl-desktop-component-padding compact:pl-desktop-compact-component-padding",
+        paddingRight && sizing === "container" && "pr-mobile-container-padding desktop:pr-desktop-container-padding compact:pr-desktop-compact-container-padding",
+        paddingRight && sizing === "layout" && "pr-mobile-layout-padding desktop:pr-desktop-layout-padding compact:pr-desktop-compact-layout-padding",
+        paddingRight && sizing === "layout-group" && "pr-mobile-layout-group-padding desktop:pr-desktop-layout-group-padding compact:pr-desktop-compact-layout-group-padding",
+        paddingRight && sizing === "component" && "pr-mobile-component-padding desktop:pr-desktop-component-padding compact:pr-desktop-compact-component-padding",
         margin && sizing === "container" && "m-mobile-container-padding desktop:m-desktop-container-padding compact:m-compact-container-padding",
         marginX && sizing === "container" && "mx-mobile-container-padding desktop:mx-desktop-container-padding compact:mx-compact-container-padding",
         marginTop && sizing === "container" && "mt-mobile-container-padding desktop:mt-desktop-container-padding compact:mt-compact-container-padding",
@@ -420,10 +456,22 @@ function CompactImagesPreview(props) {
     thumbnailHeight = 30,
     enableThumbnailBorder = false,
     placeholderImageUri,
-    onChangeSource
+    placeholderAlt = "placeholder image",
+    onChangeSource,
+    onMainImageClick
   } = props;
   const isMobile = useMatchesMobile();
   const imagesCount = sources.length;
+  const handleImgError = (0, import_react5.useCallback)(
+    (e) => {
+      if (!placeholderImageUri) return;
+      const img = e.currentTarget;
+      if (img.src === placeholderImageUri) return;
+      img.src = placeholderImageUri;
+      if (!img.alt) img.alt = placeholderAlt;
+    },
+    [placeholderImageUri, placeholderAlt]
+  );
   const handleThumbnailClick = (0, import_react5.useCallback)(
     (newIndex) => {
       if (newIndex === currentSourceIndex) return;
@@ -444,7 +492,9 @@ function CompactImagesPreview(props) {
           objectFit: "cover"
         },
         src: placeholderImageUri,
-        alt: "placeholder image"
+        alt: placeholderAlt,
+        onError: handleImgError,
+        onClick: onMainImageClick
       }
     );
   const currentSource = sources[currentSourceIndex];
@@ -452,6 +502,7 @@ function CompactImagesPreview(props) {
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       "img",
       {
+        className: (0, import_clsx3.default)("object-center", onMainImageClick && "cursor-pointer"),
         style: {
           width: isMobile ? "100%" : activeImageWidth,
           height: activeImageHeight,
@@ -459,10 +510,12 @@ function CompactImagesPreview(props) {
           objectFit: "cover"
         },
         src: currentSource.uri,
-        alt: currentSource.name
+        alt: currentSource.name,
+        onError: handleImgError,
+        onClick: onMainImageClick
       }
     ),
-    sources.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex flex-row flex-wrap items-center gap-3", children: sources.map((source, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex flex-row flex-wrap items-center gap-3", children: sources.map((source, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       "button",
       {
         onClick: (e) => {
@@ -483,7 +536,8 @@ function CompactImagesPreview(props) {
               height: thumbnailHeight,
               objectPosition: "center",
               objectFit: "cover"
-            }
+            },
+            onError: handleImgError
           }
         )
       },