@dmsi/wedgekit-react 0.0.494 → 0.0.496

package/dist/components/DateRangeInput.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/DateRangeInput.js

@@ -1,10 +1,11 @@
 import {
   CalendarRange
-} 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,10 +38,10 @@ 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 {
   InputBase
@@ -48,6 +49,7 @@ import {
 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/MenuOption.cjs

@@ -63,7 +63,7 @@ __export(MenuOption_exports, {
   MenuOption: () => MenuOption
 });
 module.exports = __toCommonJS(MenuOption_exports);
-var import_clsx5 = __toESM(require("clsx"), 1);
+var import_clsx6 = __toESM(require("clsx"), 1);
 var import_react5 = require("react");
 
 // src/classNames.ts
@@ -363,8 +363,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,
@@ -389,7 +511,8 @@ var MenuOption = ({
   mobilePositionTo,
   highlightMatchingText = false,
   menuValue,
-  onMouseMove
+  onMouseMove,
+  small = false
 }) => {
   const uniqueId = (0, import_react5.useId)();
   const internalRef = (0, import_react5.useRef)(null);
@@ -419,47 +542,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: () => {
@@ -476,13 +600,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,
@@ -506,14 +630,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,
@@ -522,7 +646,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"
       }
     );
@@ -539,7 +663,7 @@ 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
   );
 }
 // Annotate the CommonJS export names for ESM import in node:

package/dist/components/MenuOption.js

@@ -1,8 +1,9 @@
 "use client";
 import {
   MenuOption
-} from "../chunk-IPAKWF2V.js";
+} from "../chunk-5R4C5F63.js";
 import "../chunk-AL5QIRY3.js";
+import "../chunk-BTKWHCUE.js";
 import "../chunk-URYQ24NF.js";
 import "../chunk-VXWSAIB5.js";
 import "../chunk-R3EQIDBX.js";

package/dist/components/MobileDataGrid/ColumnList.js

@@ -3,8 +3,8 @@ import {
 } from "../../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-WEAVZEE4.js";
 import "../../chunk-UCJUC5AZ.js";
 import "../../chunk-ZSETMD4A.js";