@overmap-ai/core 1.0.51-hover-cards.0 → 1.0.51-qr-field.0

package/dist/forms/builder/constants.d.ts

@@ -12,6 +12,7 @@ export declare const CompleteFieldTypeToClsMapping: {
     text: typeof import('../fields/StringOrTextFields/TextField/TextField').TextField;
     custom: typeof import('../fields/CustomField').CustomField;
     upload: typeof import('../fields/UploadField').UploadField;
+    qr: typeof import('../fields/QrField/QrField').QrField;
     "multi-string": typeof import('../fields/MultiStringField/MultiStringField').MultiStringField;
     "multi-select": typeof import('../fields/SelectField/MultiSelectField').MultiSelectField;
 };

package/dist/forms/builder/utils.d.ts

@@ -12,7 +12,7 @@ export declare function insert<T>(list: T[] | undefined, index: number, value: T
 export declare function remove<T>(list: T[], index: number): T[];
 export declare const makeIdentifier: (existing: unknown, label: string) => string;
 export declare const findFieldByIdentifier: (fields: ISerializedField[], identifier?: string) => ISerializedField | null;
-export declare const makeConditionalSourceFields: (sections: SerializedFieldSection[], index: number) => (import("../typings").SerializedTextField | import("../typings").SerializedBooleanField | import("../typings").SerializedNumberField | import("../typings").SerializedDateField | import("../typings").SerializedStringField | import("../typings").SerializedSelectField | import("../typings").SerializedMultiStringField | import("../typings").SerializedMultiSelectField | import("../typings").SerializedUploadField)[];
+export declare const makeConditionalSourceFields: (sections: SerializedFieldSection[], index: number) => (import("../typings").SerializedTextField | import("../typings").SerializedBooleanField | import("../typings").SerializedNumberField | import("../typings").SerializedDateField | import("../typings").SerializedStringField | import("../typings").SerializedSelectField | import("../typings").SerializedMultiStringField | import("../typings").SerializedMultiSelectField | import("../typings").SerializedUploadField | import("../typings").SerializedQrField)[];
 export type NewFieldInitialValues = Omit<ISerializedField, "identifier"> & {
     label: string;
 };

package/dist/forms/fields/QrField/QrField.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from "react";
+import { RiQrCodeLine } from "react-icons/ri";
+import { BaseField, ChildFieldOptions } from "../BaseField";
+import { ISerializedField, SerializedQrField } from "../../typings";
+import { ComponentProps } from "../typings";
+export declare const emptyQrField: {
+    type: string;
+    label: string;
+    description: string;
+    required: boolean;
+};
+export declare class QrField extends BaseField<string, "qr"> {
+    static readonly fieldTypeName = "QR";
+    static readonly fieldTypeDescription = "Used for scanning/reading QR codes.";
+    readonly onlyValidateAfterTouched = false;
+    static Icon: typeof RiQrCodeLine;
+    constructor(options: ChildFieldOptions<string>);
+    serialize(): SerializedQrField;
+    static deserialize(data: ISerializedField): QrField;
+    getInput(props: ComponentProps<QrField>): ReactNode;
+}

package/dist/forms/fields/QrField/QrInput.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { ComponentProps } from "../typings";
+import { QrField } from "./QrField";
+export declare const QrInput: import("react").MemoExoticComponent<(props: ComponentProps<QrField>) => import("react/jsx-runtime").JSX.Element>;
+interface QrScannerProps {
+    onQrScan: (data: string) => void;
+    onClose: () => void;
+}
+export declare const QrScanner: import("react").MemoExoticComponent<(props: QrScannerProps) => import("react/jsx-runtime").JSX.Element>;
+export {};

package/dist/forms/fields/QrField/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./QrField";
+export * from "./QrInput";

package/dist/forms/fields/constants.d.ts

@@ -6,6 +6,7 @@ import { MultiSelectField, SelectField } from "./SelectField";
 import { CustomField } from "./CustomField";
 import { MultiStringField } from "./MultiStringField";
 import { UploadField } from "./UploadField";
+import { QrField } from "./QrField";
 export declare const FieldTypeToClsMapping: {
     readonly date: typeof DateField;
     readonly number: typeof NumberField;
@@ -15,6 +16,7 @@ export declare const FieldTypeToClsMapping: {
     readonly text: typeof TextField;
     readonly custom: typeof CustomField;
     readonly upload: typeof UploadField;
+    readonly qr: typeof QrField;
     readonly "multi-string": typeof MultiStringField;
     readonly "multi-select": typeof MultiSelectField;
 };
@@ -77,6 +79,12 @@ export declare const FieldTypeToEmptyFieldMapping: {
         description: string;
         required: boolean;
     };
+    readonly qr: {
+        type: string;
+        label: string;
+        description: string;
+        required: boolean;
+    };
     readonly "multi-string": {
         type: string;
         minimum_length: number;

package/dist/forms/fields/index.d.ts

@@ -5,6 +5,7 @@ export * from "./StringOrTextFields";
 export * from "./BooleanField";
 export * from "./SelectField";
 export * from "./MultiStringField";
+export * from "./QrField";
 export * from "./FieldSection";
 export * from "./utils";
 export * from "./hooks";

package/dist/forms/typings.d.ts

@@ -16,7 +16,7 @@ import { AnyField, BaseField } from "./fields";
 export type Form = Record<string, FieldValue | Promise<File>[]>;
 /** Helper type that extracts the TValue type from a BaseField. */
 export type ValueOfField<Type extends AnyField> = Type extends BaseField<infer TValue> ? TValue : never;
-export type FieldTypeIdentifier = "string" | "text" | "boolean" | "number" | "date" | "select" | "custom" | "section" | "multi-string" | "multi-select" | "upload";
+export type FieldTypeIdentifier = "string" | "text" | "boolean" | "number" | "date" | "select" | "custom" | "section" | "multi-string" | "multi-select" | "upload" | "qr";
 export interface BaseSerializedObject<TIdentifier extends FieldTypeIdentifier = FieldTypeIdentifier> {
     description?: string | null;
     identifier: string;
@@ -50,6 +50,9 @@ export interface SerializedStringField extends BaseSerializedStringField {
     type: "string";
     input_type?: StringInputType;
 }
+export interface SerializedQrField extends BaseSerializedField {
+    type: "qr";
+}
 export interface SerializedTextField extends BaseSerializedStringField {
     type: "text";
 }
@@ -96,5 +99,5 @@ export interface SerializedUploadField extends BaseSerializedField {
      */
     maximum_files?: number;
 }
-export type ISerializedField = SerializedTextField | SerializedBooleanField | SerializedNumberField | SerializedDateField | SerializedStringField | SerializedSelectField | SerializedFieldSection | SerializedMultiStringField | SerializedMultiSelectField | SerializedUploadField;
+export type ISerializedField = SerializedTextField | SerializedBooleanField | SerializedNumberField | SerializedDateField | SerializedStringField | SerializedSelectField | SerializedFieldSection | SerializedMultiStringField | SerializedMultiSelectField | SerializedUploadField | SerializedQrField;
 export {};

package/dist/overmap-core.js

@@ -8,7 +8,7 @@ var _a;
 import * as React from "react";
 import React__default, { useState, useEffect, useRef, memo, useMemo, useCallback, createContext, createElement, useContext, forwardRef, Children, isValidElement, cloneElement, Fragment as Fragment$1, useLayoutEffect, useReducer, lazy, Suspense } from "react";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { unsafeShowToast, AlertDialogProvider, ToastProvider, DefaultTheme, Flex as Flex$1, IconButton, RiIcon, Text as Text$1, useSeverityColor, Checkbox, TextArea, Select, useToast, Badge, MultiSelect, useViewportSize, Overlay, ButtonGroup, Spinner, IconColorUtility, Tooltip, Popover, useSize, ToggleButton, Separator, OvermapItem, Button, ButtonList, divButtonProps, OvermapDropdownMenu, Input, useAlertDialog } from "@overmap-ai/blocks";
+import { unsafeShowToast, AlertDialogProvider, ToastProvider, DefaultTheme, Flex as Flex$1, IconButton, RiIcon, Text as Text$1, useSeverityColor, Checkbox, TextArea, Select, useToast, Badge, MultiSelect, Overlay, Button, Spinner, useViewportSize, ButtonGroup, IconColorUtility, Tooltip, Popover, useSize, ToggleButton, Separator, OvermapItem, ButtonList, divButtonProps, OvermapDropdownMenu, Input, useAlertDialog } from "@overmap-ai/blocks";
 import { DepGraph } from "dependency-graph";
 import { offline as offline$1 } from "@redux-offline/redux-offline";
 import offlineConfig from "@redux-offline/redux-offline/lib/defaults";
@@ -27,6 +27,7 @@ import { useField, useFormikContext, useFormik, FormikProvider } from "formik";
 import get from "lodash.get";
 import Linkify from "linkify-react";
 import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";
+import QrScannerAPI from "qr-scanner";
 import { read, utils } from "xlsx";
 import { pdfjs, Document, Page } from "react-pdf";
 import "react-pdf/dist/Page/AnnotationLayer.css";
@@ -1572,9 +1573,6 @@ const selectHiddenCategoryCount = (state) => {
     hiddenCategoryCount++;
   return hiddenCategoryCount;
 };
-const selectIssueCountOfCategory = (categoryId) => (state) => {
-  return Object.values(state.issueReducer.issues).filter((issue) => issue.category === categoryId).length;
-};
 const categoryReducer = categorySlice.reducer;
 function setAttachments(state, action) {
   state.attachments = {};
@@ -8234,7 +8232,7 @@ const tabTrigger = "_tabTrigger_1w0fq_69";
 const patchfieldBorder = "_patchfieldBorder_1w0fq_73";
 const title = "_title_1w0fq_73";
 const error = "_error_1w0fq_89";
-const styles$c = {
+const styles$d = {
   description: description$2,
   floatingButtonContainer: floatingButtonContainer$2,
   FullScreenImageContainer: FullScreenImageContainer$2,
@@ -8355,7 +8353,7 @@ const fileName$1 = "_fileName_10o76_31";
 const longIconButton$1 = "_longIconButton_10o76_36";
 const previewImage$1 = "_previewImage_10o76_42";
 const FullScreenImage$1 = "_FullScreenImage_10o76_12";
-const styles$b = {
+const styles$c = {
   description: description$1,
   floatingButtonContainer: floatingButtonContainer$1,
   FullScreenImageContainer: FullScreenImageContainer$1,
@@ -8379,7 +8377,7 @@ const FullScreenImagePreview = memo((props) => {
     /* @__PURE__ */ jsx(
       "button",
       {
-        className: styles$b.FullScreenImageContainer,
+        className: styles$c.FullScreenImageContainer,
         type: "button",
         onClick: () => {
           setShowPreview(false);
@@ -8387,7 +8385,7 @@ const FullScreenImagePreview = memo((props) => {
         children: /* @__PURE__ */ jsx(
           "img",
           {
-            className: styles$b.FullScreenImage,
+            className: styles$c.FullScreenImage,
             src: url,
             alt: name,
             onClick: (e) => {
@@ -8397,11 +8395,11 @@ const FullScreenImagePreview = memo((props) => {
         )
       }
     ),
-    /* @__PURE__ */ jsxs(Flex$1, { className: styles$b.TopBarContainer, align: "center", children: [
+    /* @__PURE__ */ jsxs(Flex$1, { className: styles$c.TopBarContainer, align: "center", children: [
       /* @__PURE__ */ jsx(
         IconButton,
         {
-          className: styles$b.longIconButton,
+          className: styles$c.longIconButton,
           variant: "soft",
           "aria-label": "Exit preview",
           onClick: () => {
@@ -8410,11 +8408,11 @@ const FullScreenImagePreview = memo((props) => {
           children: /* @__PURE__ */ jsx(RiIcon, { icon: "RiArrowLeftLine" })
         }
       ),
-      /* @__PURE__ */ jsx(Text$1, { className: styles$b.fileName, children: name }),
+      /* @__PURE__ */ jsx(Text$1, { className: styles$c.fileName, children: name }),
       /* @__PURE__ */ jsx(
         IconButton,
         {
-          className: styles$b.longIconButton,
+          className: styles$c.longIconButton,
           variant: "soft",
           "aria-label": `Download ${name}`,
           onClick: handleDownload,
@@ -8442,7 +8440,7 @@ const InputWithLabel = (props) => {
       /* @__PURE__ */ jsx(
         "img",
         {
-          className: styles$b.previewImage,
+          className: styles$c.previewImage,
           src: resolvedImageURL,
           alt: resolvedImage.name,
           onClick: () => {
@@ -8470,7 +8468,7 @@ const InputWithHelpText = (props) => {
   const { helpText, children, severity } = props;
   return /* @__PURE__ */ jsxs(Flex$1, { direction: "column", gap: "1", children: [
     children,
-    /* @__PURE__ */ jsx(Flex$1, { direction: "column", children: /* @__PURE__ */ jsx(Text$1, { size: "1", severity, className: styles$b.description, children: helpText }) })
+    /* @__PURE__ */ jsx(Flex$1, { direction: "column", children: /* @__PURE__ */ jsx(Text$1, { size: "1", severity, className: styles$c.description, children: helpText }) })
   ] });
 };
 const InputWithLabelAndHelpText = (props) => {
@@ -8704,6 +8702,9 @@ function RiArrowUpLine(props) {
 function RiCalendarLine(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "fill": "currentColor" }, "child": [{ "tag": "path", "attr": { "d": "M9 1V3H15V1H17V3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H7V1H9ZM20 11H4V19H20V11ZM7 5H4V9H20V5H17V7H15V5H9V7H7V5Z" }, "child": [] }] })(props);
 }
+function RiQrCodeLine(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "fill": "currentColor" }, "child": [{ "tag": "path", "attr": { "d": "M16 17V16H13V13H16V15H18V17H17V19H15V21H13V18H15V17H16ZM21 21H17V19H19V17H21V21ZM3 3H11V11H3V3ZM5 5V9H9V5H5ZM13 3H21V11H13V3ZM15 5V9H19V5H15ZM3 13H11V21H3V13ZM5 15V19H9V15H5ZM18 13H21V15H18V13ZM6 6H8V8H6V6ZM6 16H8V18H6V16ZM16 6H18V8H16V6Z" }, "child": [] }] })(props);
+}
 function RiFileCopyLine(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "fill": "currentColor" }, "child": [{ "tag": "path", "attr": { "d": "M6.9998 6V3C6.9998 2.44772 7.44752 2 7.9998 2H19.9998C20.5521 2 20.9998 2.44772 20.9998 3V17C20.9998 17.5523 20.5521 18 19.9998 18H16.9998V20.9991C16.9998 21.5519 16.5499 22 15.993 22H4.00666C3.45059 22 3 21.5554 3 20.9991L3.0026 7.00087C3.0027 6.44811 3.45264 6 4.00942 6H6.9998ZM5.00242 8L5.00019 20H14.9998V8H5.00242ZM8.9998 6H16.9998V16H18.9998V4H8.9998V6Z" }, "child": [] }] })(props);
 }
@@ -9607,9 +9608,9 @@ const Inset = React.forwardRef((props, forwardedRef) => {
   return React.createElement("div", { ...insetProps, ref: forwardedRef, className: classNames("rt-Inset", className, withBreakpoints(side, "rt-r-side"), withBreakpoints(clip, "rt-r-clip"), withBreakpoints(p, "rt-r-p"), withBreakpoints(px, "rt-r-px"), withBreakpoints(py, "rt-r-py"), withBreakpoints(pt, "rt-r-pt"), withBreakpoints(pr, "rt-r-pr"), withBreakpoints(pb, "rt-r-pb"), withBreakpoints(pl, "rt-r-pl"), withMarginProps(marginProps)) });
 });
 Inset.displayName = "Inset";
-const sizes$7 = ["1", "2", "3", "4", "5", "6", "7", "8", "9"];
+const sizes$8 = ["1", "2", "3", "4", "5", "6", "7", "8", "9"];
 const headingPropDefs = {
-  size: { type: "enum", values: sizes$7, default: "6", responsive: true },
+  size: { type: "enum", values: sizes$8, default: "6", responsive: true },
   weight: { ...weightProp, default: "bold" },
   align: alignProp,
   trim: trimProp,
@@ -9622,9 +9623,9 @@ const Heading = React.forwardRef((props, forwardedRef) => {
   return React.createElement($5e63c961fc1ce211$export$8c6ed5c666ac1360, { "data-accent-color": color, ...headingProps, ref: forwardedRef, className: classNames("rt-Heading", className, withBreakpoints(size, "rt-r-size"), withBreakpoints(weight, "rt-r-weight"), withBreakpoints(align, "rt-r-ta"), withBreakpoints(trim, "rt-r-lt"), { "rt-high-contrast": highContrast }, withMarginProps(marginProps)) }, asChild ? children : React.createElement(Tag, null, children));
 });
 Heading.displayName = "Heading";
-const sizes$6 = ["1", "2", "3", "4", "5", "6", "7", "8", "9"];
+const sizes$7 = ["1", "2", "3", "4", "5", "6", "7", "8", "9"];
 const textPropDefs = {
-  size: { type: "enum", values: sizes$6, default: void 0, responsive: true },
+  size: { type: "enum", values: sizes$7, default: void 0, responsive: true },
   weight: weightProp,
   align: alignProp,
   trim: trimProp,
@@ -9637,6 +9638,21 @@ const Text = React.forwardRef((props, forwardedRef) => {
   return React.createElement($5e63c961fc1ce211$export$8c6ed5c666ac1360, { "data-accent-color": color, ...textProps, ref: forwardedRef, className: classNames("rt-Text", className, withBreakpoints(size, "rt-r-size"), withBreakpoints(weight, "rt-r-weight"), withBreakpoints(align, "rt-r-ta"), withBreakpoints(trim, "rt-r-lt"), { "rt-high-contrast": highContrast }, withMarginProps(marginProps)) }, asChild ? children : React.createElement(Tag, null, children));
 });
 Text.displayName = "Text";
+const sizes$6 = ["1", "2", "3", "4", "5", "6", "7", "8", "9"];
+const variants$4 = ["solid", "soft", "outline", "ghost"];
+const codePropDefs = {
+  size: { type: "enum", values: sizes$6, default: void 0, responsive: true },
+  variant: { type: "enum", values: variants$4, default: "soft" },
+  weight: weightProp,
+  color: colorProp,
+  highContrast: highContrastProp
+};
+const Code = React.forwardRef((props, forwardedRef) => {
+  const { rest: marginRest, ...marginProps } = extractMarginProps(props);
+  const { className, size = codePropDefs.size.default, variant = codePropDefs.variant.default, weight = codePropDefs.weight.default, color = codePropDefs.color.default, highContrast = codePropDefs.highContrast.default, ...codeProps } = marginRest;
+  return React.createElement("code", { "data-accent-color": color, ...codeProps, ref: forwardedRef, className: classNames("rt-Code", className, withBreakpoints(size, "rt-r-size"), `rt-variant-${variant}`, withBreakpoints(weight, "rt-r-weight"), { "rt-high-contrast": highContrast }, withMarginProps(marginProps)) });
+});
+Code.displayName = "Code";
 const Em = React.forwardRef((props, forwardedRef) => React.createElement("em", { ...props, ref: forwardedRef, className: classNames("rt-Em", props.className) }));
 Em.displayName = "Em";
 const Strong = React.forwardRef((props, forwardedRef) => React.createElement("strong", { ...props, ref: forwardedRef, className: classNames("rt-Strong", props.className) }));
@@ -12027,7 +12043,7 @@ __publicField(StringOrTextField, "_validateMax", (path) => (value, allValues) =>
 });
 const clickableLinkContainer = "_clickableLinkContainer_1ace7_1";
 const TextFieldInputCopy = "_TextFieldInputCopy_1ace7_5";
-const styles$a = {
+const styles$b = {
   clickableLinkContainer,
   TextFieldInputCopy
 };
@@ -12056,13 +12072,13 @@ const StringInput = memo((props) => {
           placeholder: field.placeholder,
           color
         }
-      ) : /* @__PURE__ */ jsxs(TextField$1.Root, { className: styles$a.clickableLinkContainer, children: [
+      ) : /* @__PURE__ */ jsxs(TextField$1.Root, { className: styles$b.clickableLinkContainer, children: [
         /* @__PURE__ */ jsx(
           "div",
           {
             className: classNames$1(
               "rt-TextFieldInput rt-r-size-2 rt-variant-surface",
-              styles$a.TextFieldInputCopy
+              styles$b.TextFieldInputCopy
             ),
             children: /* @__PURE__ */ jsx(
               Linkify,
@@ -12754,6 +12770,158 @@ __publicField(_MultiSelectField, "fieldTypeName", "Multi-select");
 __publicField(_MultiSelectField, "fieldTypeDescription", "Allows the user to select a multiple options from a list of options.");
 __publicField(_MultiSelectField, "Icon", RiCheckboxLine);
 let MultiSelectField = _MultiSelectField;
+const QrScannerWrapper = "_QrScannerWrapper_1puz3_1";
+const styles$a = {
+  QrScannerWrapper
+};
+const QrInput = memo((props) => {
+  const [{ inputId, labelId, label, helpText, size, severity, showInputOnly, field, fieldProps }, rest] = useFormikInput(props);
+  const [showQrScanner, setShowQrScanner] = useState(false);
+  const value = fieldProps.value;
+  const handleQrScan = useCallback(
+    (data) => {
+      fieldProps.onChange({ target: { value: data } });
+      setShowQrScanner(false);
+    },
+    [fieldProps]
+  );
+  const handleClearScanResult = useCallback(() => {
+    fieldProps.onChange({ target: { value: "" } });
+  }, [fieldProps]);
+  const handleScanButtonClicked = useCallback(() => {
+    setShowQrScanner(true);
+  }, []);
+  const handleQrScannerClose = useCallback(() => {
+    setShowQrScanner(false);
+  }, []);
+  return /* @__PURE__ */ jsx(InputWithLabelAndHelpText, { helpText, severity, children: /* @__PURE__ */ jsxs(
+    InputWithLabel,
+    {
+      size,
+      severity,
+      inputId,
+      labelId,
+      label: showInputOnly ? label : "",
+      image: showInputOnly ? void 0 : field.image,
+      flexProps: { direction: "column", justify: "start", align: "start", gap: "1" },
+      children: [
+        /* @__PURE__ */ jsx(
+          Overlay,
+          {
+            open: showQrScanner,
+            content: () => /* @__PURE__ */ jsx(QrScanner, { onQrScan: handleQrScan, onClose: handleQrScannerClose }),
+            onOpenChange: setShowQrScanner
+          }
+        ),
+        /* @__PURE__ */ jsxs(Flex, { width: "max-content", gap: "1", align: "center", children: [
+          /* @__PURE__ */ jsxs(Button, { ...rest, variant: "soft", onClick: handleScanButtonClicked, children: [
+            /* @__PURE__ */ jsx(RiIcon, { icon: "RiQrCodeLine" }),
+            "Scan"
+          ] }),
+          value && /* @__PURE__ */ jsx(Text, { color: "jade", size: "1", children: /* @__PURE__ */ jsx(RiIcon, { icon: "RiCheckLine", style: { verticalAlign: "bottom" } }) })
+        ] }),
+        value && /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(Flex, { width: "max-content", gap: "2", align: "center", children: [
+          /* @__PURE__ */ jsx(Code, { color: "gray", highContrast: true, children: value }),
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              severity: "info",
+              variant: "ghost",
+              "aria-label": "delete",
+              size: "small",
+              onClick: handleClearScanResult,
+              children: /* @__PURE__ */ jsx(RiIcon, { icon: "RiCloseLine" })
+            }
+          )
+        ] }) })
+      ]
+    }
+  ) });
+});
+QrInput.displayName = "QrInput";
+const QrScanner = memo((props) => {
+  const { onQrScan, onClose } = props;
+  const videoRef = useRef(null);
+  const [isScannerLoading, setIsScannerLoading] = useState(false);
+  useEffect(() => {
+    if (!videoRef.current)
+      return;
+    const qrScanner = new QrScannerAPI(
+      videoRef.current,
+      (result) => {
+        const data = result.data;
+        onQrScan(data);
+        qrScanner.destroy();
+      },
+      {
+        highlightCodeOutline: true,
+        highlightScanRegion: true,
+        maxScansPerSecond: 1
+      }
+    );
+    setIsScannerLoading(true);
+    qrScanner.start().then(() => {
+      setIsScannerLoading(false);
+    }).catch(() => {
+      setIsScannerLoading(false);
+    });
+  }, [onQrScan]);
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      className: styles$a.QrScannerWrapper,
+      width: "100%",
+      height: "100%",
+      direction: "column",
+      gap: "2",
+      justify: "center",
+      position: "relative",
+      children: [
+        /* @__PURE__ */ jsx(Flex, { width: "100%", position: "absolute", top: "0", p: "2", children: /* @__PURE__ */ jsx(IconButton, { "aria-label": "close", variant: "soft", severity: "info", highContrast: true, onClick: onClose, children: /* @__PURE__ */ jsx(RiIcon, { icon: "RiCloseLine" }) }) }),
+        /* @__PURE__ */ jsxs(Box, { style: { maxWidth: "100%", maxHeight: "100%" }, position: "relative", children: [
+          /* @__PURE__ */ jsx("video", { ref: videoRef, style: { width: "100%", height: "100%" } }),
+          isScannerLoading && /* @__PURE__ */ jsx(
+            Flex,
+            {
+              position: "absolute",
+              inset: "0",
+              style: { background: "var(--color-background)" },
+              justify: "center",
+              align: "center",
+              children: /* @__PURE__ */ jsx(Spinner, {})
+            }
+          )
+        ] })
+      ]
+    }
+  );
+});
+QrScanner.displayName = "QrScanner";
+const emptyQrField = {
+  ...emptyBaseField,
+  type: "qr"
+};
+const _QrField = class _QrField extends BaseField {
+  constructor(options) {
+    super({ ...options, type: "qr" });
+    __publicField(this, "onlyValidateAfterTouched", false);
+  }
+  serialize() {
+    return super._serialize();
+  }
+  static deserialize(data) {
+    if (data.type !== "qr")
+      throw new Error("Type mismatch.");
+    return new _QrField(data);
+  }
+  getInput(props) {
+    return /* @__PURE__ */ jsx(QrInput, { ...props, field: this });
+  }
+};
+__publicField(_QrField, "fieldTypeName", "QR");
+__publicField(_QrField, "fieldTypeDescription", "Used for scanning/reading QR codes.");
+__publicField(_QrField, "Icon", RiQrCodeLine);
+let QrField = _QrField;
 const FieldInputCloner = memo((props) => {
   const { field, ...rest } = props;
   const [{ value: identifier }] = useField(field.options.clonedFieldIdentifier);
@@ -14011,6 +14179,7 @@ const FieldTypeToClsMapping = {
   text: TextField,
   custom: CustomField,
   upload: UploadField,
+  qr: QrField,
   // TODO: Underscore
   "multi-string": MultiStringField,
   "multi-select": MultiSelectField
@@ -14024,6 +14193,7 @@ const FieldTypeToEmptyFieldMapping = {
   text: emptyTextField,
   custom: emptyCustomField,
   upload: emptyUploadField,
+  qr: emptyQrField,
   // TODO: Underscore
   "multi-string": emptyMultiStringField,
   "multi-select": emptyMultiSelectField
@@ -14111,7 +14281,7 @@ const FieldSectionLayout = memo((props) => {
   return /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(Flex$1, { direction: "column", gap: "3", children: [
     /* @__PURE__ */ jsxs(Flex$1, { direction: "column", children: [
       /* @__PURE__ */ jsx(Heading, { as: "h3", size: "3", children: label }),
-      /* @__PURE__ */ jsx(Text$1, { className: styles$b.description, children: description2 })
+      /* @__PURE__ */ jsx(Text$1, { className: styles$c.description, children: description2 })
     ] }),
     inputs
   ] }) });
@@ -14354,7 +14524,7 @@ const FormRenderer = memo(
       [schema.title]
     );
     const Description = useMemo(
-      () => typeof schema.description === "string" ? /* @__PURE__ */ jsx(Text$1, { className: styles$b.description, children: schema.description }) : schema.description,
+      () => typeof schema.description === "string" ? /* @__PURE__ */ jsx(Text$1, { className: styles$c.description, children: schema.description }) : schema.description,
       [schema.description]
     );
     const inputs = useFieldInputs(schema.fields, { formId: formId2, disabled: readonly });
@@ -14370,7 +14540,7 @@ const FormRenderer = memo(
         !hideDescription && Description
       ] }) }),
       inputs,
-      !readonly && /* @__PURE__ */ jsxs(Flex$1, { className: styles$b.floatingButtonContainer, align: "center", justify: "end", gap: "2", children: [
+      !readonly && /* @__PURE__ */ jsxs(Flex$1, { className: styles$c.floatingButtonContainer, align: "center", justify: "end", gap: "2", children: [
         cancelText && /* @__PURE__ */ jsx(Button, { severity: "info", ...buttonProps, type: "button", onClick: onCancel, children: cancelText }),
         /* @__PURE__ */ jsx(Button, { ...buttonProps, type: "submit", disabled: !formik.isValid, children: submitText })
       ] })
@@ -15718,12 +15888,12 @@ const FormBuilder = memo(
     });
     const previewSchema = useMemo(() => formRevisionToSchema(formik.values), [formik.values]);
     return /* @__PURE__ */ jsx(Tabs.Root, { ref, defaultValue: "edit", children: /* @__PURE__ */ jsxs(Flex$1, { direction: "column", gap: "2", children: [
-      showTabs && /* @__PURE__ */ jsxs(Tabs.List, { className: classNames$1(styles$c.tabsList, tabsListClassName), children: [
-        /* @__PURE__ */ jsx(Tabs.Trigger, { className: styles$c.tabTrigger, value: "edit", children: /* @__PURE__ */ jsxs(Flex$1, { align: "center", gap: "2", children: [
+      showTabs && /* @__PURE__ */ jsxs(Tabs.List, { className: classNames$1(styles$d.tabsList, tabsListClassName), children: [
+        /* @__PURE__ */ jsx(Tabs.Trigger, { className: styles$d.tabTrigger, value: "edit", children: /* @__PURE__ */ jsxs(Flex$1, { align: "center", gap: "2", children: [
           /* @__PURE__ */ jsx(RiIcon, { icon: "RiPencilLine" }),
           "Edit"
         ] }) }),
-        /* @__PURE__ */ jsx(Tabs.Trigger, { className: styles$c.tabTrigger, value: "preview", children: /* @__PURE__ */ jsxs(Flex$1, { align: "center", gap: "2", children: [
+        /* @__PURE__ */ jsx(Tabs.Trigger, { className: styles$d.tabTrigger, value: "preview", children: /* @__PURE__ */ jsxs(Flex$1, { align: "center", gap: "2", children: [
           /* @__PURE__ */ jsx(RiIcon, { icon: "RiEyeLine" }),
           "Preview"
         ] }) })
@@ -15747,8 +15917,8 @@ const FormBuilder = memo(
                   render: ({ setValue, value, meta }) => /* @__PURE__ */ jsx(InputWithHelpText, { severity: "danger", helpText: meta.error ?? null, children: /* @__PURE__ */ jsx(
                     Input,
                     {
-                      className: classNames$1(styles$c.title, {
-                        [styles$c.error]: meta.error
+                      className: classNames$1(styles$d.title, {
+                        [styles$d.error]: meta.error
                       }),
                       placeholder: "Form title",
                       value,
@@ -15770,7 +15940,7 @@ const FormBuilder = memo(
                   render: ({ setValue, value }) => /* @__PURE__ */ jsx(
                     TextArea,
                     {
-                      className: styles$c.description,
+                      className: styles$d.description,
                       placeholder: "Explain the purpose of this form",
                       value,
                       onChange: (event) => {
@@ -15788,7 +15958,7 @@ const FormBuilder = memo(
             /* @__PURE__ */ jsx(FieldsEditor, { fieldsOnly }),
             /* @__PURE__ */ jsx(Text$1, { severity: "danger", size: "1", children: typeof formik.errors.fields === "string" && formik.errors.fields })
           ] }),
-          /* @__PURE__ */ jsxs(Flex$1, { className: styles$c.floatingButtonContainer, align: "center", justify: "end", gap: "2", children: [
+          /* @__PURE__ */ jsxs(Flex$1, { className: styles$d.floatingButtonContainer, align: "center", justify: "end", gap: "2", children: [
             onCancel && /* @__PURE__ */ jsx(Button, { type: "button", variant: "solid", severity: "info", onClick: onCancel, children: "Cancel" }),
             /* @__PURE__ */ jsx(Button, { type: "submit", children: "Save form" })
           ] })
@@ -15823,6 +15993,9 @@ const index = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePropert
   NumberInput,
   PatchField,
   PatchFormProvider,
+  QrField,
+  QrInput,
+  QrScanner,
   SelectField,
   SelectInput,
   StringField,
@@ -15837,6 +16010,7 @@ const index = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePropert
   emptyMultiSelectField,
   emptyMultiStringField,
   emptyNumberField,
+  emptyQrField,
   emptySelectField,
   emptyStringField,
   emptyTextField,
@@ -15927,6 +16101,9 @@ export {
   ProjectFileService,
   ProjectService,
   ProjectType,
+  QrField,
+  QrInput,
+  QrScanner,
   SDKContext,
   SDKProvider,
   SUPPORTED_IMAGE_FILE_TYPES,
@@ -16050,6 +16227,7 @@ export {
   emptyMultiSelectField,
   emptyMultiStringField,
   emptyNumberField,
+  emptyQrField,
   emptySelectField,
   emptyStringField,
   emptyTextField,
@@ -16274,7 +16452,6 @@ export {
   selectIssueAttachment,
   selectIssueAttachmentMapping,
   selectIssueAttachments,
-  selectIssueCountOfCategory,
   selectIssueMapping,
   selectIssueUpdateMapping,
   selectIssueUpdatesOfIssue,