@dmsi/wedgekit-react 0.0.369 → 0.0.371

package/dist/components/{MobileDataGrid.cjs → PDFViewer/PDFNavigation.cjs}

@@ -56,355 +56,149 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/components/MobileDataGrid.tsx
-var MobileDataGrid_exports = {};
-__export(MobileDataGrid_exports, {
-  MobileDataGrid: () => MobileDataGrid
+// src/components/PDFViewer/PDFNavigation.tsx
+var PDFNavigation_exports = {};
+__export(PDFNavigation_exports, {
+  PdfNavigation: () => PdfNavigation
 });
-module.exports = __toCommonJS(MobileDataGrid_exports);
-var import_clsx7 = __toESM(require("clsx"), 1);
+module.exports = __toCommonJS(PDFNavigation_exports);
 
-// src/components/Icon.tsx
-var import_clsx = __toESM(require("clsx"), 1);
-var import_jsx_runtime = require("react/jsx-runtime");
-function Icon(_a) {
-  var _b = _a, {
-    name,
-    size = 24,
-    variant = "outline",
-    testid
-  } = _b, props = __objRest(_b, [
-    "name",
-    "size",
-    "variant",
-    "testid"
-  ]);
-  const variantStyle = variant === "filled" ? '"FILL" 1' : '"FILL" 0';
-  const weightStyle = size === 16 ? '"wght" 400' : '"wght" 300';
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "span",
-    __spreadProps(__spreadValues({}, props), {
-      "data-testid": testid,
-      className: (0, import_clsx.default)(
-        "icon",
-        `icon-${size}`,
-        // size === 16 ? "font-normal" : "font-light", // size 16 font weight is not working as normal from before
-        props.className
-      ),
-      style: __spreadValues({
-        fontVariationSettings: variantStyle + `, ${weightStyle}`
-      }, props.style),
-      children: name
-    })
-  );
-}
-
-// src/components/Stack.tsx
-var import_clsx3 = __toESM(require("clsx"), 1);
+// src/components/Button.tsx
+var import_clsx2 = __toESM(require("clsx"), 1);
 
 // src/classNames.ts
-var import_clsx2 = __toESM(require("clsx"), 1);
+var import_clsx = __toESM(require("clsx"), 1);
 var typography = {
-  display1: (0, import_clsx2.default)(
+  display1: (0, import_clsx.default)(
     "font-sans font-semibold",
     "text-display-1-mobile desktop:text-display-1-desktop compact:text-display-1-desktop-compact",
     "leading-display-1-mobile desktop:leading-display-1-desktop"
   ),
-  display2: (0, import_clsx2.default)(
+  display2: (0, import_clsx.default)(
     "font-sans font-bold",
     "text-display-2-mobile desktop:text-display-2-desktop compact:text-display-2-desktop-compact",
     "leading-display-2-mobile desktop:leading-display-2-desktop"
   ),
-  heading1: (0, import_clsx2.default)(
+  heading1: (0, import_clsx.default)(
     "font-sans font-semibold",
     "text-heading-1-mobile desktop:text-heading-1-desktop compact:text-heading-1-desktop-compact",
     "leading-heading-1-mobile desktop:leading-heading-1-desktop"
   ),
-  heading2: (0, import_clsx2.default)(
+  heading2: (0, import_clsx.default)(
     "font-sans font-normal",
     "text-heading-2-mobile desktop:text-heading-2-desktop compact:text-heading-2-desktop-compact",
     "leading-heading-2-mobile desktop:leading-heading-2-desktop"
   ),
-  heading3: (0, import_clsx2.default)(
+  heading3: (0, import_clsx.default)(
     "font-sans font-semibold",
     "text-heading-3-mobile desktop:text-heading-3-desktop compact:text-heading-3-desktop-compact",
     "leading-heading-3-mobile desktop:leading-heading-3-desktop"
   ),
-  subheader: (0, import_clsx2.default)(
+  subheader: (0, import_clsx.default)(
     "font-sans font-semibold",
     "text-subheader-mobile desktop:text-subheader-desktop compact:text-subheader-desktop-compact",
     "leading-subheader-mobile desktop:leading-subheader-desktop"
   ),
-  link: (0, import_clsx2.default)(
+  link: (0, import_clsx.default)(
     "font-sans font-normal",
     "text-link-mobile desktop:text-link-desktop compact:text-link-desktop-compact",
     "leading-link-mobile desktop:leading-link-desktop"
   ),
-  buttonLabel: (0, import_clsx2.default)(
+  buttonLabel: (0, import_clsx.default)(
     "font-sans font-semibold",
     "text-label-mobile desktop:text-label-desktop compact:text-label-desktop-compact",
     "leading-label-mobile desktop:leading-label-desktop"
   ),
-  label: (0, import_clsx2.default)(
+  label: (0, import_clsx.default)(
     "font-sans font-semibold",
     "text-label-mobile desktop:text-label-desktop compact:text-label-desktop-compact",
     "leading-label-mobile desktop:leading-label-desktop"
   ),
-  paragraph: (0, import_clsx2.default)(
+  paragraph: (0, import_clsx.default)(
     "font-sans font-normal",
     "text-paragraph-mobile desktop:text-paragraph-desktop compact:text-paragraph-desktop-compact",
     "leading-paragraph-mobile desktop:leading-paragraph-desktop"
   ),
-  caption: (0, import_clsx2.default)(
+  caption: (0, import_clsx.default)(
     "font-sans font-normal",
     "text-caption-mobile desktop:text-caption-desktop compact:text-caption-desktop-compact",
     "leading-caption-mobile desktop:leading-caption-desktop"
   ),
-  breadcrumb: (0, import_clsx2.default)(
+  breadcrumb: (0, import_clsx.default)(
     "font-sans font-normal",
     "text-paragraph-mobile desktop:text-paragraph-desktop compact:text-paragraph-desktop-compact",
     "leading-mobile-breadcrumb desktop:leading-desktop-breadcrumb"
   )
 };
-var baseTransition = (0, import_clsx2.default)(
+var baseTransition = (0, import_clsx.default)(
   "transition-colors duration-100 ease-in-out"
 );
-var componentGap = (0, import_clsx2.default)(
+var componentGap = (0, import_clsx.default)(
   "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-desktop-compact-component-gap"
 );
-var paddingUsingComponentGap = (0, import_clsx2.default)(
+var paddingUsingComponentGap = (0, import_clsx.default)(
   "p-mobile-component-gap desktop:p-desktop-component-gap compact:p-desktop-compact-component-gap"
 );
-var paddingXUsingLayoutGroupGap = (0, import_clsx2.default)(
+var paddingXUsingLayoutGroupGap = (0, import_clsx.default)(
   "px-mobile-layout-group-gap desktop:px-desktop-layout-group-gap compact:px-desktop-compact-layout-group-gap"
 );
-var paddingYUsingLayoutGroupGap = (0, import_clsx2.default)(
+var paddingYUsingLayoutGroupGap = (0, import_clsx.default)(
   "py-mobile-layout-group-gap desktop:py-desktop-layout-group-gap compact:py-desktop-compact-layout-group-gap"
 );
-var componentPadding = (0, import_clsx2.default)(
+var componentPadding = (0, import_clsx.default)(
   "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding"
 );
-var componentPaddingBottom = (0, import_clsx2.default)(
+var componentPaddingBottom = (0, import_clsx.default)(
   "pb-mobile-component-padding desktop:pb-desktop-component-padding compact:pb-desktop-compact-component-padding"
 );
-var componentPaddingX = (0, import_clsx2.default)(
+var componentPaddingX = (0, import_clsx.default)(
   "px-mobile-component-padding desktop:px-desktop-component-padding compact:px-desktop-compact-component-padding"
 );
-var componentPaddingY = (0, import_clsx2.default)(
+var componentPaddingY = (0, import_clsx.default)(
   "py-mobile-component-padding desktop:py-desktop-component-padding compact:py-desktop-compact-component-padding"
 );
-var componentPaddingXUsingComponentGap = (0, import_clsx2.default)(
+var componentPaddingXUsingComponentGap = (0, import_clsx.default)(
   "px-mobile-component-gap desktop:px-desktop-component-gap compact:px-desktop-compact-component-gap"
 );
-var componentPaddingYUsingComponentGap = (0, import_clsx2.default)(
+var componentPaddingYUsingComponentGap = (0, import_clsx.default)(
   "py-mobile-component-gap desktop:py-desktop-component-gap compact:py-desktop-compact-component-gap"
 );
-var componentPaddingMinusBorder = (0, import_clsx2.default)(
+var componentPaddingMinusBorder = (0, import_clsx.default)(
   "p-[calc(var(--spacing-mobile-component-padding)_-_1px)] desktop:p-[calc(var(--spacing-desktop-component-padding)_-_1px)] compact:p-[calc(var(--spacing-desktop-compact-component-padding)_-_1px)]"
 );
-var componentPaddingMinus2pxBorder = (0, import_clsx2.default)(
+var componentPaddingMinus2pxBorder = (0, import_clsx.default)(
   "p-[calc(var(--spacing-mobile-component-padding)_-_2px)] desktop:p-[calc(var(--spacing-desktop-component-padding)_-_2px)] compact:p-[calc(var(--spacing-desktop-compact-component-padding)_-_2px)]"
 );
-var layoutPaddding = (0, import_clsx2.default)(
+var layoutPaddding = (0, import_clsx.default)(
   "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding"
 );
-var layoutPaddingBottom = (0, import_clsx2.default)(
+var layoutPaddingBottom = (0, import_clsx.default)(
   "pb-mobile-layout-padding desktop:pb-desktop-layout-padding compact:pb-desktop-compact-layout-padding"
 );
-var layoutPaddingY = (0, import_clsx2.default)(
+var layoutPaddingY = (0, import_clsx.default)(
   "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding"
 );
-var containerPaddingX = (0, import_clsx2.default)(
+var containerPaddingX = (0, import_clsx.default)(
   "px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding"
 );
-var containerPaddingY = (0, import_clsx2.default)(
+var containerPaddingY = (0, import_clsx.default)(
   "py-mobile-container-padding desktop:py-desktop-container-padding compact:py-desktop-compact-container-padding"
 );
-var layoutGroupGapPaddingY = (0, import_clsx2.default)(
+var layoutGroupGapPaddingY = (0, import_clsx.default)(
   "py-mobile-layout-group-gap desktop:py-desktop-layout-group-gap compact:py-desktop-compact-layout-group-gap"
 );
-var layoutGroupGap = (0, import_clsx2.default)(
+var layoutGroupGap = (0, import_clsx.default)(
   "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-desktop-compact-layout-group-gap"
 );
-var layoutGap = (0, import_clsx2.default)(
+var layoutGap = (0, import_clsx.default)(
   "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-desktop-compact-layout-gap"
 );
-var gapUsingContainerPadding = (0, import_clsx2.default)(
+var gapUsingContainerPadding = (0, import_clsx.default)(
   "gap-mobile-container-padding desktop:gap-desktop-container-padding compact:gap-desktop-compact-container-padding"
 );
 
-// src/components/Stack.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var getFlexClassNames = ({ items, justify, grow }) => (0, import_clsx3.default)(
-  "flex",
-  items === "start" && "items-start",
-  grow && "grow",
-  items === "start" && "items-start",
-  items === "center" && "items-center",
-  items === "end" && "items-end",
-  items === "start-center" && "items-start desktop:items-center",
-  justify === "start" && "justify-start",
-  justify === "center" && "justify-center",
-  justify === "end" && "justify-end",
-  justify === "end" && "justify-end",
-  justify === "between" && "justify-between",
-  justify === "around" && "justify-around"
-);
-var useGapClassNames = (sizing) => {
-  return (0, import_clsx3.default)(
-    sizing === "layout-group" && "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-compact-layout-group-gap",
-    sizing === "layout" && "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-compact-layout-gap",
-    sizing === "container" && "gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-compact-container-gap",
-    sizing === "component" && "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-compact-component-gap"
-  );
-};
-var Stack = (_a) => {
-  var _b = _a, {
-    children,
-    items,
-    justify,
-    grow,
-    padding,
-    paddingX,
-    paddingY,
-    margin,
-    marginX,
-    marginY,
-    horizontal,
-    horizontalMobile,
-    elevation = 0,
-    rounded,
-    centered,
-    width,
-    minHeight,
-    maxWidth,
-    minWidth,
-    height,
-    maxHeight,
-    borderColor,
-    backgroundColor,
-    sizing = "none",
-    overflowY = "inherit",
-    overflowX = "inherit",
-    flexShrink,
-    flexGrow,
-    position,
-    top,
-    left,
-    id,
-    noGap,
-    marginTop,
-    marginBottom,
-    testid
-  } = _b, props = __objRest(_b, [
-    "children",
-    "items",
-    "justify",
-    "grow",
-    "padding",
-    "paddingX",
-    "paddingY",
-    "margin",
-    "marginX",
-    "marginY",
-    "horizontal",
-    "horizontalMobile",
-    "elevation",
-    "rounded",
-    "centered",
-    "width",
-    "minHeight",
-    "maxWidth",
-    "minWidth",
-    "height",
-    "maxHeight",
-    "borderColor",
-    "backgroundColor",
-    "sizing",
-    "overflowY",
-    "overflowX",
-    "flexShrink",
-    "flexGrow",
-    "position",
-    "top",
-    "left",
-    "id",
-    "noGap",
-    "marginTop",
-    "marginBottom",
-    "testid"
-  ]);
-  const flexClassNames = getFlexClassNames({ items, justify, grow });
-  const gapClassNames = useGapClassNames(sizing);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    "div",
-    __spreadProps(__spreadValues({
-      id,
-      "data-testid": testid
-    }, props), {
-      style: {
-        height: height === "full" ? "100%" : height !== void 0 ? `${height}px` : void 0,
-        maxHeight: maxHeight !== void 0 ? `${maxHeight}px` : void 0,
-        minHeight: minHeight !== void 0 ? `${minHeight}px` : void 0,
-        maxWidth: maxWidth !== void 0 ? `${maxWidth}px` : void 0,
-        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,
-        backgroundColor: backgroundColor ? `var(--color-${backgroundColor})` : void 0,
-        flexGrow: flexGrow !== void 0 ? flexGrow : void 0,
-        flexShrink: flexShrink !== void 0 ? flexShrink : void 0,
-        position: position !== void 0 ? position : void 0,
-        top: top !== void 0 ? `${top}px` : void 0,
-        left: left !== void 0 ? `${left}px` : void 0
-      },
-      className: (0, import_clsx3.default)(
-        "scrollbar-thin",
-        "max-w-screen",
-        width !== "fit" && "w-full",
-        width === "full" && "w-full",
-        width === "max" && "w-max",
-        centered && "mx-auto",
-        overflowY == "auto" && "overflow-y-auto",
-        overflowY == "hidden" && "overflow-y-hidden",
-        overflowY == "scroll" && "overflow-y-scroll",
-        overflowX == "auto" && "overflow-x-auto",
-        overflowX == "hidden" && "overflow-x-hidden",
-        overflowX == "scroll" && "overflow-x-scroll",
-        padding && sizing === "container" && "p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding",
-        padding && sizing === "layout" && "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding",
-        padding && sizing === "layout-group" && "p-mobile-layout-group-padding desktop:p-desktop-layout-group-padding compact:p-desktop-compact-layout-group-padding",
-        padding && sizing === "component" && "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding",
-        paddingX && sizing === "container" && "px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding",
-        paddingX && sizing === "layout" && "px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding",
-        paddingX && sizing === "layout-group" && "px-mobile-layout-group-padding desktop:px-desktop-layout-group-padding compact:px-desktop-compact-layout-group-padding",
-        paddingX && sizing === "component" && "px-mobile-component-padding desktop:px-desktop-component-padding compact:px-desktop-compact-component-padding",
-        paddingY && sizing === "container" && "py-mobile-container-padding desktop:py-desktop-container-padding compact:py-desktop-compact-container-padding",
-        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",
-        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",
-        marginBottom && sizing === "container" && "mb-mobile-container-padding desktop:mb-desktop-container-padding compact:mb-compact-container-padding",
-        marginY && sizing === "container" && "my-mobile-container-padding desktop:my-desktop-container-padding compact:my-compact-container-padding",
-        horizontal ? "desktop:flex-row" : "desktop:flex-col",
-        horizontalMobile ? "flex-row" : "flex-col",
-        flexClassNames,
-        !noGap && gapClassNames,
-        elevation === 0 && "shadow-none",
-        elevation === 2 && "shadow-2",
-        elevation === 4 && "shadow-4",
-        elevation === 16 && "shadow-16",
-        rounded && "rounded"
-      ),
-      children
-    })
-  );
-};
-
 // src/components/Button.tsx
-var import_clsx4 = __toESM(require("clsx"), 1);
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime = require("react/jsx-runtime");
 var Button = (_a) => {
   var _b = _a, {
     variant = "primary",
@@ -437,7 +231,7 @@ var Button = (_a) => {
     "id",
     "testid"
   ]);
-  const primaryVariantStyles = variant === "primary" && (0, import_clsx4.default)(
+  const primaryVariantStyles = variant === "primary" && (0, import_clsx2.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",
@@ -445,7 +239,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_clsx4.default)(
+  const secondaryVariantStyles = variant === "secondary" && (0, import_clsx2.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",
@@ -453,7 +247,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_clsx4.default)(
+  const tertiaryVariantStyles = variant === "tertiary" && (0, import_clsx2.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",
@@ -462,7 +256,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_clsx4.default)(
+  const primaryCriticalVariantStyles = variant === "primary-critical" && (0, import_clsx2.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",
@@ -470,7 +264,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_clsx4.default)(
+  const secondaryCriticalVariantStyles = variant === "secondary-critical" && (0, import_clsx2.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",
@@ -478,7 +272,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_clsx4.default)(
+  const tertiaryCriticalVariantStyles = variant === "tertiary-critical" && (0, import_clsx2.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",
@@ -486,7 +280,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_clsx4.default)(
+  const navigationVarianStyles = variant === "navigation" && (0, import_clsx2.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",
@@ -496,8 +290,8 @@ var Button = (_a) => {
     "flex-col",
     paddingUsingComponentGap
   );
-  const notNavigationVariantStyles = variant !== "navigation" && (0, import_clsx4.default)("border-2 flex-row", componentPaddingMinus2pxBorder, componentGap);
-  const buttonClasses = (0, import_clsx4.default)(
+  const notNavigationVariantStyles = variant !== "navigation" && (0, import_clsx2.default)("border-2 flex-row", componentPaddingMinus2pxBorder, componentGap);
+  const buttonClasses = (0, import_clsx2.default)(
     disabled ? "cursor-default" : "cursor-pointer",
     block ? "w-full" : "w-fit",
     baseTransition,
@@ -512,14 +306,14 @@ var Button = (_a) => {
     notNavigationVariantStyles,
     className
   );
-  const labelClasses = (0, import_clsx4.default)(
+  const labelClasses = (0, import_clsx2.default)(
     "min-h-6 flex items-center justify-center",
     classNameLabel,
     componentPaddingXUsingComponentGap,
     typography.buttonLabel
   );
   const Element = href && !as ? "a" : as;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     Element,
     __spreadProps(__spreadValues({
       id,
@@ -533,7 +327,7 @@ var Button = (_a) => {
       "data-theme": variant === "navigation" ? "brand" : void 0,
       children: [
         leftIcon && leftIcon,
-        !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { id: id ? `${id}-label` : void 0, "data-testid": testid ? `${testid}-label` : void 0, className: labelClasses, children }),
+        !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { id: id ? `${id}-label` : void 0, "data-testid": testid ? `${testid}-label` : void 0, className: labelClasses, children }),
         rightIcon && rightIcon
       ]
     })
@@ -541,33 +335,9 @@ var Button = (_a) => {
 };
 Button.displayName = "Button";
 
-// src/components/Theme.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-function Theme({
-  theme,
-  children,
-  id,
-  testid,
-  ref
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    "div",
-    {
-      id,
-      "data-testid": testid,
-      className: "contents",
-      "data-theme": theme,
-      ref: (e) => {
-        if (ref) ref.current = e;
-      },
-      children
-    }
-  );
-}
-
 // src/components/Heading.tsx
-var import_clsx5 = __toESM(require("clsx"), 1);
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_clsx3 = __toESM(require("clsx"), 1);
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var Heading = (_a) => {
   var _b = _a, {
     className,
@@ -590,12 +360,12 @@ var Heading = (_a) => {
   ]);
   const defaultElement = variant === "heading1" ? "h1" : variant === "heading2" ? "h2" : "h3";
   const Element = as != null ? as : defaultElement;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     Element,
     __spreadProps(__spreadValues({
       id,
       "data-testid": testid,
-      className: (0, import_clsx5.default)(
+      className: (0, import_clsx3.default)(
         typography[variant],
         className,
         align === "left" && "text-left",
@@ -611,16 +381,51 @@ var Heading = (_a) => {
   );
 };
 Heading.displayName = "Heading";
-var Heading1 = (props) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading, __spreadProps(__spreadValues({}, props), { variant: "heading1" }));
-var Heading2 = (props) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading, __spreadProps(__spreadValues({}, props), { variant: "heading2" }));
-var Heading3 = (props) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading, __spreadProps(__spreadValues({}, props), { variant: "heading3" }));
+var Heading1 = (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Heading, __spreadProps(__spreadValues({}, props), { variant: "heading1" }));
+var Heading2 = (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Heading, __spreadProps(__spreadValues({}, props), { variant: "heading2" }));
+var Heading3 = (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Heading, __spreadProps(__spreadValues({}, props), { variant: "heading3" }));
 Heading1.displayName = "Heading1";
 Heading2.displayName = "Heading2";
 Heading3.displayName = "Heading3";
 
+// src/components/Icon.tsx
+var import_clsx4 = __toESM(require("clsx"), 1);
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function Icon(_a) {
+  var _b = _a, {
+    name,
+    size = 24,
+    variant = "outline",
+    testid
+  } = _b, props = __objRest(_b, [
+    "name",
+    "size",
+    "variant",
+    "testid"
+  ]);
+  const variantStyle = variant === "filled" ? '"FILL" 1' : '"FILL" 0';
+  const weightStyle = size === 16 ? '"wght" 400' : '"wght" 300';
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "span",
+    __spreadProps(__spreadValues({}, props), {
+      "data-testid": testid,
+      className: (0, import_clsx4.default)(
+        "icon",
+        `icon-${size}`,
+        // size === 16 ? "font-normal" : "font-light", // size 16 font weight is not working as normal from before
+        props.className
+      ),
+      style: __spreadValues({
+        fontVariationSettings: variantStyle + `, ${weightStyle}`
+      }, props.style),
+      children: name
+    })
+  );
+}
+
 // src/components/Paragraph.tsx
-var import_clsx6 = __toESM(require("clsx"), 1);
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_clsx5 = __toESM(require("clsx"), 1);
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var Paragraph = (_a) => {
   var _b = _a, {
     className,
@@ -646,13 +451,13 @@ var Paragraph = (_a) => {
     "testid"
   ]);
   const Element = as;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     Element,
     __spreadProps(__spreadValues({
       id,
       "data-testid": testid
     }, props), {
-      className: (0, import_clsx6.default)(
+      className: (0, import_clsx5.default)(
         typography.paragraph,
         className,
         padded && componentPaddingXUsingComponentGap,
@@ -671,132 +476,243 @@ var Paragraph = (_a) => {
 };
 Paragraph.displayName = "Paragraph";
 
-// src/components/MobileDataGrid.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
-function MobileDataGrid({
-  columns,
-  data,
-  header,
-  getId,
-  renderLink,
-  renderChevron,
-  id,
-  testid
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+// src/components/Stack.tsx
+var import_clsx6 = __toESM(require("clsx"), 1);
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var getFlexClassNames = ({ items, justify, grow }) => (0, import_clsx6.default)(
+  "flex",
+  items === "start" && "items-start",
+  grow && "grow",
+  items === "start" && "items-start",
+  items === "center" && "items-center",
+  items === "end" && "items-end",
+  items === "start-center" && "items-start desktop:items-center",
+  justify === "start" && "justify-start",
+  justify === "center" && "justify-center",
+  justify === "end" && "justify-end",
+  justify === "end" && "justify-end",
+  justify === "between" && "justify-between",
+  justify === "around" && "justify-around"
+);
+var useGapClassNames = (sizing) => {
+  return (0, import_clsx6.default)(
+    sizing === "layout-group" && "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-compact-layout-group-gap",
+    sizing === "layout" && "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-compact-layout-gap",
+    sizing === "container" && "gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-compact-container-gap",
+    sizing === "component" && "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-compact-component-gap"
+  );
+};
+var Stack = (_a) => {
+  var _b = _a, {
+    children,
+    items,
+    justify,
+    grow,
+    padding,
+    paddingX,
+    paddingY,
+    margin,
+    marginX,
+    marginY,
+    horizontal,
+    horizontalMobile,
+    elevation = 0,
+    rounded,
+    centered,
+    width,
+    minHeight,
+    maxWidth,
+    minWidth,
+    height,
+    maxHeight,
+    borderColor,
+    backgroundColor,
+    sizing = "none",
+    overflowY = "inherit",
+    overflowX = "inherit",
+    flexShrink,
+    flexGrow,
+    position,
+    top,
+    left,
+    id,
+    noGap,
+    marginTop,
+    marginBottom,
+    testid,
+    bottom,
+    zIndex
+  } = _b, props = __objRest(_b, [
+    "children",
+    "items",
+    "justify",
+    "grow",
+    "padding",
+    "paddingX",
+    "paddingY",
+    "margin",
+    "marginX",
+    "marginY",
+    "horizontal",
+    "horizontalMobile",
+    "elevation",
+    "rounded",
+    "centered",
+    "width",
+    "minHeight",
+    "maxWidth",
+    "minWidth",
+    "height",
+    "maxHeight",
+    "borderColor",
+    "backgroundColor",
+    "sizing",
+    "overflowY",
+    "overflowX",
+    "flexShrink",
+    "flexGrow",
+    "position",
+    "top",
+    "left",
+    "id",
+    "noGap",
+    "marginTop",
+    "marginBottom",
+    "testid",
+    "bottom",
+    "zIndex"
+  ]);
+  var _a2, _b2, _c, _d, _e;
+  const flexClassNames = getFlexClassNames({ items, justify, grow });
+  const gapClassNames = useGapClassNames(sizing);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "div",
-    {
+    __spreadProps(__spreadValues({
       id,
-      "data-testid": testid,
-      className: (0, import_clsx7.default)(
-        "rounded",
-        "overflow-hidden",
-        "divide-y divide-border-primary-normal",
-        "border border-border-primary-normal",
-        "overflow-y-scroll scrollbar-thin"
+      "data-testid": testid
+    }, props), {
+      style: {
+        height: height === "full" ? "100%" : height !== void 0 ? `${height}px` : void 0,
+        maxHeight: maxHeight !== void 0 ? isNaN(+maxHeight) ? maxHeight : `${maxHeight}px` : (_a2 = props.style) == null ? void 0 : _a2.maxHeight,
+        maxWidth: maxWidth !== void 0 ? isNaN(+maxWidth) ? maxWidth : `${maxWidth}px` : (_b2 = props.style) == null ? void 0 : _b2.maxWidth,
+        minHeight: minHeight !== void 0 ? isNaN(+minHeight) ? minHeight : `${minHeight}px` : (_c = props.style) == null ? void 0 : _c.minHeight,
+        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,
+        backgroundColor: backgroundColor ? `var(--color-${backgroundColor})` : void 0,
+        flexGrow: flexGrow !== void 0 ? flexGrow : void 0,
+        flexShrink: flexShrink !== void 0 ? flexShrink : void 0,
+        position: position !== void 0 ? position : void 0,
+        top: top !== void 0 ? `${top}px` : void 0,
+        bottom: bottom !== void 0 ? `${bottom}px` : void 0,
+        left: left !== void 0 ? `${left}px` : void 0,
+        borderBlock: (_d = props.style) == null ? void 0 : _d.borderBlock,
+        marginInline: (_e = props.style) == null ? void 0 : _e.marginInline,
+        zIndex: zIndex !== void 0 ? zIndex : void 0
+      },
+      className: (0, import_clsx6.default)(
+        "scrollbar-thin",
+        "max-w-screen",
+        width !== "fit" && "w-full",
+        width === "full" && "w-full",
+        width === "max" && "w-max",
+        centered && "mx-auto",
+        overflowY == "auto" && "overflow-y-auto",
+        overflowY == "hidden" && "overflow-y-hidden",
+        overflowY == "scroll" && "overflow-y-scroll",
+        overflowX == "auto" && "overflow-x-auto",
+        overflowX == "hidden" && "overflow-x-hidden",
+        overflowX == "scroll" && "overflow-x-scroll",
+        padding && sizing === "container" && "p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding",
+        padding && sizing === "layout" && "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding",
+        padding && sizing === "layout-group" && "p-mobile-layout-group-padding desktop:p-desktop-layout-group-padding compact:p-desktop-compact-layout-group-padding",
+        padding && sizing === "component" && "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding",
+        paddingX && sizing === "container" && "px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding",
+        paddingX && sizing === "layout" && "px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding",
+        paddingX && sizing === "layout-group" && "px-mobile-layout-group-padding desktop:px-desktop-layout-group-padding compact:px-desktop-compact-layout-group-padding",
+        paddingX && sizing === "component" && "px-mobile-component-padding desktop:px-desktop-component-padding compact:px-desktop-compact-component-padding",
+        paddingY && sizing === "container" && "py-mobile-container-padding desktop:py-desktop-container-padding compact:py-desktop-compact-container-padding",
+        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",
+        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",
+        marginBottom && sizing === "container" && "mb-mobile-container-padding desktop:mb-desktop-container-padding compact:mb-compact-container-padding",
+        marginY && sizing === "container" && "my-mobile-container-padding desktop:my-desktop-container-padding compact:my-compact-container-padding",
+        horizontal ? "desktop:flex-row" : "desktop:flex-col",
+        horizontalMobile ? "flex-row" : "flex-col",
+        flexClassNames,
+        !noGap && gapClassNames,
+        elevation === 0 && "shadow-none",
+        elevation === 2 && "shadow-2",
+        elevation === 4 && "shadow-4",
+        elevation === 16 && "shadow-16",
+        rounded && "rounded"
       ),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          MobileDataGridHeader,
-          {
-            id: id ? `${id}-header` : void 0,
-            testid: testid ? `${testid}-header` : void 0,
-            header
-          }
-        ),
-        data.map((item) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          MobileDataGridCard,
-          {
-            id: id ? `${id}-card-${getId(item)}` : void 0,
-            testid: testid ? `${testid}-card-${getId(item)}` : void 0,
-            data: item,
-            columns,
-            renderLink,
-            renderChevron
-          },
-          getId(item)
-        ))
-      ]
-    }
+      children
+    })
   );
-}
-function MobileDataGridHeader({
-  header,
-  id,
-  testid
+};
+
+// src/components/PDFViewer/PDFNavigation.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function PdfNavigation({
+  currentIndex,
+  total,
+  onPrev,
+  onNext,
+  disablePrev,
+  disableNext,
+  extraActions,
+  testid,
+  fileName
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { id, "data-testid": testid, className: "sticky top-0", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Theme, { theme: "brand", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     Stack,
     {
       horizontal: true,
-      items: "start",
-      justify: "center",
-      backgroundColor: "background-primary-normal",
-      padding: true,
-      sizing: "component",
-      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Heading3, { as: "span", color: "text-primary-normal", children: header })
-    }
-  ) }) });
-}
-function MobileDataGridCard({
-  data,
-  columns,
-  renderLink,
-  renderChevron,
-  id,
-  testid
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { id, "data-testid": testid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Stack, { sizing: "component", padding: true, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Stack, { horizontal: true, horizontalMobile: true, items: "center", justify: "between", children: [
-        renderLink && renderLink(data),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Stack, { horizontal: true, horizontalMobile: true, items: "center", justify: "end", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      items: "center",
+      justify: "between",
+      sizing: "layout-group",
+      testid: testid ? `${testid}-pdf-navigation` : void 0,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Stack, { horizontal: true, items: "center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             Button,
             {
-              id: id ? `${id}-docs-button` : void 0,
-              testid: testid ? `${testid}-docs-button` : void 0,
               iconOnly: true,
               variant: "tertiary",
-              onClick: () => {
-              },
-              leftIcon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { name: "docs" })
+              onClick: onPrev,
+              leftIcon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "chevron_backward" }),
+              disabled: disablePrev,
+              testid: testid ? `${testid}-pdf-file-previous-button` : void 0
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Heading3, { className: "text-text-primary-normal whitespace-nowrap", children: [
+            currentIndex + 1,
+            " / ",
+            total
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             Button,
             {
-              id: id ? `${id}-swap-button` : void 0,
-              testid: testid ? `${testid}-swap-button` : void 0,
               iconOnly: true,
               variant: "tertiary",
-              onClick: () => {
-              },
-              leftIcon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { name: "swap_vert" })
+              onClick: onNext,
+              rightIcon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "chevron_forward" }),
+              disabled: disableNext,
+              testid: testid ? `${testid}-pdf-file-next-button` : void 0
             }
-          )
-        ] })
-      ] }),
-      columns.filter((x) => x.show).map((column) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-        "div",
-        {
-          className: "mb-2 grid grid-cols-2",
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Paragraph, { color: "text-secondary-normal", className: "text-left", children: [
-              column.header,
-              ":"
-            ] }),
-            " ",
-            column.cell ? column.cell({ row: data }) : String(data[column.accessorKey])
-          ]
-        },
-        String(column.accessorKey)
-      ))
-    ] }),
-    renderChevron && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Stack, { items: "center", justify: "center", horizontal: true, horizontalMobile: true, children: renderChevron(data) })
-  ] });
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Paragraph, { children: (fileName == null ? void 0 : fileName.endsWith(".pdf")) ? fileName : `${fileName}.pdf` })
+        ] }),
+        extraActions && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex items-center gap-2", children: extraActions })
+      ]
+    }
+  ) });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  MobileDataGrid
+  PdfNavigation
 });