@ynput/ayon-frontend-shared 0.2.19 → 0.2.20

package/dist/shared/src/components/Views/ViewForm/ViewForm.cjs.js

@@ -0,0 +1,164 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../../../_virtual/jsx-runtime.cjs.js");
+const ayonReactComponents = require("@ynput/ayon-react-components");
+const React = require("react");
+const ViewForm_styled = require("./ViewForm.styled.cjs.js");
+const scopeOptions = [
+  { label: "Project", value: "project" },
+  { label: "Studio", value: "studio" }
+];
+const defaultInitialData = {
+  label: "",
+  scope: "project",
+  visibility: "private"
+};
+const ViewForm = React.forwardRef(
+  ({
+    initialData,
+    error,
+    isEditing,
+    isLoading,
+    viewLoading,
+    onSubmit,
+    onDelete,
+    onDuplicate,
+    onCancel
+  }, ref) => {
+    const initialFormData = () => ({
+      ...defaultInitialData,
+      ...initialData
+    });
+    const [formData, setFormData] = React.useState(initialFormData());
+    React.useEffect(() => {
+      if (initialData) {
+        setFormData(initialFormData());
+      }
+    }, [initialData]);
+    React.useEffect(() => {
+      console.log("remount");
+    }, []);
+    const handleChange = (value, field) => {
+      console.log("change", field, value);
+      setFormData((prev) => ({
+        ...prev,
+        [field]: value
+      }));
+    };
+    const handleVisibilityChange = (event) => {
+      const checked = "checked" in event.target ? event.target.checked : false;
+      console.log("visibility change", checked);
+      const newVisibility = checked ? "public" : "private";
+      handleChange(newVisibility, "visibility");
+    };
+    const isFormValid = formData.label.trim().length > 0;
+    const handleSubmit = React.useCallback(async () => {
+      console.log("submitting form");
+      if (!isFormValid) {
+        return;
+      } else {
+        await onSubmit(formData);
+      }
+    }, [formData, isFormValid, onSubmit]);
+    const handleFormSubmit = (e) => {
+      e.preventDefault();
+    };
+    const handleKeyDown = (e) => {
+      if (e.nativeEvent instanceof KeyboardEvent && (e.nativeEvent.metaKey || e.nativeEvent.ctrlKey) && e.nativeEvent.key === "Enter") {
+        e.preventDefault();
+        handleSubmit();
+      }
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(ViewForm_styled.Container, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(ViewForm_styled.Form, { ref, onSubmit: handleFormSubmit, onKeyDown: handleKeyDown, children: [
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(ViewForm_styled.Row, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("label", { htmlFor: "label", children: "View name" }),
+          /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+            ayonReactComponents.InputText,
+            {
+              type: "text",
+              id: "label",
+              name: "label",
+              value: formData.label,
+              onChange: (e) => handleChange(e.target.value, "label"),
+              autoComplete: "off",
+              autoFocus: true,
+              disabled: viewLoading
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(ViewForm_styled.Row, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("label", { htmlFor: "scope", children: "Scope" }),
+          /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+            ayonReactComponents.Dropdown,
+            {
+              value: [formData.scope],
+              onChange: (e) => handleChange(e[0], "scope"),
+              options: scopeOptions,
+              disabled: viewLoading
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(ViewForm_styled.CheckboxRow, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("label", { children: "Share with studio" }),
+          /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+            ayonReactComponents.InputSwitch,
+            {
+              checked: formData.visibility === "public",
+              onChange: handleVisibilityChange,
+              disabled: viewLoading,
+              id: "visibility"
+            }
+          )
+        ] }),
+        error && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ViewForm_styled.Error, { children: error })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(ViewForm_styled.Footer, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ViewForm_styled.LeftActions, { children: isEditing && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+          ayonReactComponents.Button,
+          {
+            label: "Delete",
+            variant: "text",
+            icon: "delete",
+            onClick: onDelete,
+            disabled: isLoading
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(ViewForm_styled.RightActions, { children: [
+          onCancel && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+            ayonReactComponents.Button,
+            {
+              label: "Cancel",
+              variant: "text",
+              icon: "close",
+              onClick: onCancel,
+              disabled: isLoading
+            }
+          ),
+          isEditing && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+            ayonReactComponents.Button,
+            {
+              label: "Duplicate",
+              variant: "text",
+              icon: "content_copy",
+              onClick: onDuplicate,
+              disabled: !isFormValid || isLoading
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+            ayonReactComponents.SaveButton,
+            {
+              label: isEditing ? "Save" : "Create",
+              icon: isEditing ? "save" : "add",
+              onClick: handleSubmit,
+              disabled: !isFormValid || isLoading,
+              saving: isLoading
+            }
+          )
+        ] })
+      ] })
+    ] });
+  }
+);
+exports.ViewForm = ViewForm;
+//# sourceMappingURL=ViewForm.cjs.js.map

package/dist/shared/src/components/Views/ViewForm/ViewForm.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewForm.cjs.js","sources":["../../../../../../src/components/Views/ViewForm/ViewForm.tsx"],"sourcesContent":["import { Button, Dropdown, InputSwitch, InputText, SaveButton } from '@ynput/ayon-react-components'\nimport { forwardRef, useEffect, useRef, useCallback, useState } from 'react'\nimport * as Styled from './ViewForm.styled'\nimport type { ViewFormData } from '..'\n\nconst scopeOptions = [\n  { label: 'Project', value: 'project' },\n  { label: 'Studio', value: 'studio' },\n]\n\ninterface ViewFormProps {\n  initialData?: Partial<ViewFormData>\n  error?: string\n  isEditing: boolean\n  isLoading: boolean\n  viewLoading: boolean\n  onSubmit: (formData: ViewFormData) => Promise<void>\n  onDelete: () => Promise<void>\n  onDuplicate: () => Promise<void>\n  onCancel?: () => void\n}\n\nconst defaultInitialData: ViewFormData = {\n  label: '',\n  scope: 'project',\n  visibility: 'private',\n}\n\nexport const ViewForm = forwardRef<HTMLFormElement, ViewFormProps>(\n  (\n    {\n      initialData,\n      error,\n      isEditing,\n      isLoading,\n      viewLoading,\n      onSubmit,\n      onDelete,\n      onDuplicate,\n      onCancel,\n    },\n    ref,\n  ) => {\n    const initialFormData = (): ViewFormData => ({\n      ...defaultInitialData,\n      ...initialData,\n    })\n\n    const [formData, setFormData] = useState<ViewFormData>(initialFormData())\n\n    // Update form data when initialData changes\n    useEffect(() => {\n      if (initialData) {\n        setFormData(initialFormData())\n      }\n    }, [initialData])\n\n    useEffect(() => {\n      console.log('remount')\n    }, [])\n\n    const handleChange = <K extends keyof ViewFormData>(value: ViewFormData[K], field: K) => {\n      console.log('change', field, value)\n      setFormData((prev) => ({\n        ...prev,\n        [field]: value,\n      }))\n    }\n\n    const handleVisibilityChange = (\n      event: React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent<HTMLInputElement>,\n    ) => {\n      const checked = 'checked' in event.target ? event.target.checked : false\n      console.log('visibility change', checked)\n      const newVisibility = checked ? 'public' : 'private'\n      handleChange(newVisibility, 'visibility')\n    }\n\n    const isFormValid = formData.label.trim().length > 0\n\n    const handleSubmit = useCallback(async () => {\n      console.log('submitting form')\n      if (!isFormValid) {\n        return\n      } else {\n        await onSubmit(formData)\n      }\n    }, [formData, isFormValid, onSubmit])\n\n    const handleFormSubmit = (e: React.FormEvent) => {\n      e.preventDefault()\n    }\n\n    const handleKeyDown = (e: React.KeyboardEvent) => {\n      if (\n        e.nativeEvent instanceof KeyboardEvent &&\n        (e.nativeEvent.metaKey || e.nativeEvent.ctrlKey) &&\n        e.nativeEvent.key === 'Enter'\n      ) {\n        e.preventDefault()\n        handleSubmit()\n      }\n    }\n\n    return (\n      <Styled.Container>\n        <Styled.Form ref={ref} onSubmit={handleFormSubmit} onKeyDown={handleKeyDown}>\n          <Styled.Row>\n            <label htmlFor=\"label\">View name</label>\n            <InputText\n              type=\"text\"\n              id=\"label\"\n              name=\"label\"\n              value={formData.label}\n              onChange={(e) => handleChange(e.target.value, 'label')}\n              autoComplete=\"off\"\n              autoFocus\n              disabled={viewLoading}\n            />\n          </Styled.Row>\n\n          <Styled.Row>\n            <label htmlFor=\"scope\">Scope</label>\n            <Dropdown\n              value={[formData.scope]}\n              onChange={(e) => handleChange(e[0] as ViewFormData['scope'], 'scope')}\n              options={scopeOptions}\n              disabled={viewLoading}\n            />\n          </Styled.Row>\n\n          <Styled.CheckboxRow>\n            <label>Share with studio</label>\n            <InputSwitch\n              checked={formData.visibility === 'public'}\n              onChange={handleVisibilityChange}\n              disabled={viewLoading}\n              id=\"visibility\"\n            />\n          </Styled.CheckboxRow>\n\n          {error && <Styled.Error>{error}</Styled.Error>}\n        </Styled.Form>\n\n        <Styled.Footer>\n          <Styled.LeftActions>\n            {isEditing && (\n              <Button\n                label=\"Delete\"\n                variant=\"text\"\n                icon=\"delete\"\n                onClick={onDelete}\n                disabled={isLoading}\n              />\n            )}\n          </Styled.LeftActions>\n\n          <Styled.RightActions>\n            {onCancel && (\n              <Button\n                label=\"Cancel\"\n                variant=\"text\"\n                icon=\"close\"\n                onClick={onCancel}\n                disabled={isLoading}\n              />\n            )}\n            {isEditing && (\n              <Button\n                label=\"Duplicate\"\n                variant=\"text\"\n                icon=\"content_copy\"\n                onClick={onDuplicate}\n                disabled={!isFormValid || isLoading}\n              />\n            )}\n            <SaveButton\n              label={isEditing ? 'Save' : 'Create'}\n              icon={isEditing ? 'save' : 'add'}\n              onClick={handleSubmit}\n              disabled={!isFormValid || isLoading}\n              saving={isLoading}\n            />\n          </Styled.RightActions>\n        </Styled.Footer>\n      </Styled.Container>\n    )\n  },\n)\n"],"names":["forwardRef","useState","useEffect","useCallback","jsxs","Styled.Container","Styled.Form","Styled.Row","jsx","InputText","Dropdown","Styled.CheckboxRow","InputSwitch","Styled.Error","Styled.Footer","Styled.LeftActions","Button","Styled.RightActions","SaveButton"],"mappings":"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"}

package/dist/shared/src/components/Views/ViewForm/ViewForm.es.js

@@ -0,0 +1,164 @@
+import { j as jsxRuntimeExports } from "../../../../../_virtual/jsx-runtime.es.js";
+import { InputText, Dropdown, InputSwitch, Button, SaveButton } from "@ynput/ayon-react-components";
+import { forwardRef, useState, useEffect, useCallback } from "react";
+import { Container, Form, Row, CheckboxRow, Error, Footer, LeftActions, RightActions } from "./ViewForm.styled.es.js";
+const scopeOptions = [
+  { label: "Project", value: "project" },
+  { label: "Studio", value: "studio" }
+];
+const defaultInitialData = {
+  label: "",
+  scope: "project",
+  visibility: "private"
+};
+const ViewForm = forwardRef(
+  ({
+    initialData,
+    error,
+    isEditing,
+    isLoading,
+    viewLoading,
+    onSubmit,
+    onDelete,
+    onDuplicate,
+    onCancel
+  }, ref) => {
+    const initialFormData = () => ({
+      ...defaultInitialData,
+      ...initialData
+    });
+    const [formData, setFormData] = useState(initialFormData());
+    useEffect(() => {
+      if (initialData) {
+        setFormData(initialFormData());
+      }
+    }, [initialData]);
+    useEffect(() => {
+      console.log("remount");
+    }, []);
+    const handleChange = (value, field) => {
+      console.log("change", field, value);
+      setFormData((prev) => ({
+        ...prev,
+        [field]: value
+      }));
+    };
+    const handleVisibilityChange = (event) => {
+      const checked = "checked" in event.target ? event.target.checked : false;
+      console.log("visibility change", checked);
+      const newVisibility = checked ? "public" : "private";
+      handleChange(newVisibility, "visibility");
+    };
+    const isFormValid = formData.label.trim().length > 0;
+    const handleSubmit = useCallback(async () => {
+      console.log("submitting form");
+      if (!isFormValid) {
+        return;
+      } else {
+        await onSubmit(formData);
+      }
+    }, [formData, isFormValid, onSubmit]);
+    const handleFormSubmit = (e) => {
+      e.preventDefault();
+    };
+    const handleKeyDown = (e) => {
+      if (e.nativeEvent instanceof KeyboardEvent && (e.nativeEvent.metaKey || e.nativeEvent.ctrlKey) && e.nativeEvent.key === "Enter") {
+        e.preventDefault();
+        handleSubmit();
+      }
+    };
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(Container, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(Form, { ref, onSubmit: handleFormSubmit, onKeyDown: handleKeyDown, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(Row, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("label", { htmlFor: "label", children: "View name" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            InputText,
+            {
+              type: "text",
+              id: "label",
+              name: "label",
+              value: formData.label,
+              onChange: (e) => handleChange(e.target.value, "label"),
+              autoComplete: "off",
+              autoFocus: true,
+              disabled: viewLoading
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(Row, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("label", { htmlFor: "scope", children: "Scope" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Dropdown,
+            {
+              value: [formData.scope],
+              onChange: (e) => handleChange(e[0], "scope"),
+              options: scopeOptions,
+              disabled: viewLoading
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(CheckboxRow, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("label", { children: "Share with studio" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            InputSwitch,
+            {
+              checked: formData.visibility === "public",
+              onChange: handleVisibilityChange,
+              disabled: viewLoading,
+              id: "visibility"
+            }
+          )
+        ] }),
+        error && /* @__PURE__ */ jsxRuntimeExports.jsx(Error, { children: error })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(Footer, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(LeftActions, { children: isEditing && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Button,
+          {
+            label: "Delete",
+            variant: "text",
+            icon: "delete",
+            onClick: onDelete,
+            disabled: isLoading
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(RightActions, { children: [
+          onCancel && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Button,
+            {
+              label: "Cancel",
+              variant: "text",
+              icon: "close",
+              onClick: onCancel,
+              disabled: isLoading
+            }
+          ),
+          isEditing && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Button,
+            {
+              label: "Duplicate",
+              variant: "text",
+              icon: "content_copy",
+              onClick: onDuplicate,
+              disabled: !isFormValid || isLoading
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            SaveButton,
+            {
+              label: isEditing ? "Save" : "Create",
+              icon: isEditing ? "save" : "add",
+              onClick: handleSubmit,
+              disabled: !isFormValid || isLoading,
+              saving: isLoading
+            }
+          )
+        ] })
+      ] })
+    ] });
+  }
+);
+export {
+  ViewForm
+};
+//# sourceMappingURL=ViewForm.es.js.map

package/dist/shared/src/components/Views/ViewForm/ViewForm.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewForm.es.js","sources":["../../../../../../src/components/Views/ViewForm/ViewForm.tsx"],"sourcesContent":["import { Button, Dropdown, InputSwitch, InputText, SaveButton } from '@ynput/ayon-react-components'\nimport { forwardRef, useEffect, useRef, useCallback, useState } from 'react'\nimport * as Styled from './ViewForm.styled'\nimport type { ViewFormData } from '..'\n\nconst scopeOptions = [\n  { label: 'Project', value: 'project' },\n  { label: 'Studio', value: 'studio' },\n]\n\ninterface ViewFormProps {\n  initialData?: Partial<ViewFormData>\n  error?: string\n  isEditing: boolean\n  isLoading: boolean\n  viewLoading: boolean\n  onSubmit: (formData: ViewFormData) => Promise<void>\n  onDelete: () => Promise<void>\n  onDuplicate: () => Promise<void>\n  onCancel?: () => void\n}\n\nconst defaultInitialData: ViewFormData = {\n  label: '',\n  scope: 'project',\n  visibility: 'private',\n}\n\nexport const ViewForm = forwardRef<HTMLFormElement, ViewFormProps>(\n  (\n    {\n      initialData,\n      error,\n      isEditing,\n      isLoading,\n      viewLoading,\n      onSubmit,\n      onDelete,\n      onDuplicate,\n      onCancel,\n    },\n    ref,\n  ) => {\n    const initialFormData = (): ViewFormData => ({\n      ...defaultInitialData,\n      ...initialData,\n    })\n\n    const [formData, setFormData] = useState<ViewFormData>(initialFormData())\n\n    // Update form data when initialData changes\n    useEffect(() => {\n      if (initialData) {\n        setFormData(initialFormData())\n      }\n    }, [initialData])\n\n    useEffect(() => {\n      console.log('remount')\n    }, [])\n\n    const handleChange = <K extends keyof ViewFormData>(value: ViewFormData[K], field: K) => {\n      console.log('change', field, value)\n      setFormData((prev) => ({\n        ...prev,\n        [field]: value,\n      }))\n    }\n\n    const handleVisibilityChange = (\n      event: React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent<HTMLInputElement>,\n    ) => {\n      const checked = 'checked' in event.target ? event.target.checked : false\n      console.log('visibility change', checked)\n      const newVisibility = checked ? 'public' : 'private'\n      handleChange(newVisibility, 'visibility')\n    }\n\n    const isFormValid = formData.label.trim().length > 0\n\n    const handleSubmit = useCallback(async () => {\n      console.log('submitting form')\n      if (!isFormValid) {\n        return\n      } else {\n        await onSubmit(formData)\n      }\n    }, [formData, isFormValid, onSubmit])\n\n    const handleFormSubmit = (e: React.FormEvent) => {\n      e.preventDefault()\n    }\n\n    const handleKeyDown = (e: React.KeyboardEvent) => {\n      if (\n        e.nativeEvent instanceof KeyboardEvent &&\n        (e.nativeEvent.metaKey || e.nativeEvent.ctrlKey) &&\n        e.nativeEvent.key === 'Enter'\n      ) {\n        e.preventDefault()\n        handleSubmit()\n      }\n    }\n\n    return (\n      <Styled.Container>\n        <Styled.Form ref={ref} onSubmit={handleFormSubmit} onKeyDown={handleKeyDown}>\n          <Styled.Row>\n            <label htmlFor=\"label\">View name</label>\n            <InputText\n              type=\"text\"\n              id=\"label\"\n              name=\"label\"\n              value={formData.label}\n              onChange={(e) => handleChange(e.target.value, 'label')}\n              autoComplete=\"off\"\n              autoFocus\n              disabled={viewLoading}\n            />\n          </Styled.Row>\n\n          <Styled.Row>\n            <label htmlFor=\"scope\">Scope</label>\n            <Dropdown\n              value={[formData.scope]}\n              onChange={(e) => handleChange(e[0] as ViewFormData['scope'], 'scope')}\n              options={scopeOptions}\n              disabled={viewLoading}\n            />\n          </Styled.Row>\n\n          <Styled.CheckboxRow>\n            <label>Share with studio</label>\n            <InputSwitch\n              checked={formData.visibility === 'public'}\n              onChange={handleVisibilityChange}\n              disabled={viewLoading}\n              id=\"visibility\"\n            />\n          </Styled.CheckboxRow>\n\n          {error && <Styled.Error>{error}</Styled.Error>}\n        </Styled.Form>\n\n        <Styled.Footer>\n          <Styled.LeftActions>\n            {isEditing && (\n              <Button\n                label=\"Delete\"\n                variant=\"text\"\n                icon=\"delete\"\n                onClick={onDelete}\n                disabled={isLoading}\n              />\n            )}\n          </Styled.LeftActions>\n\n          <Styled.RightActions>\n            {onCancel && (\n              <Button\n                label=\"Cancel\"\n                variant=\"text\"\n                icon=\"close\"\n                onClick={onCancel}\n                disabled={isLoading}\n              />\n            )}\n            {isEditing && (\n              <Button\n                label=\"Duplicate\"\n                variant=\"text\"\n                icon=\"content_copy\"\n                onClick={onDuplicate}\n                disabled={!isFormValid || isLoading}\n              />\n            )}\n            <SaveButton\n              label={isEditing ? 'Save' : 'Create'}\n              icon={isEditing ? 'save' : 'add'}\n              onClick={handleSubmit}\n              disabled={!isFormValid || isLoading}\n              saving={isLoading}\n            />\n          </Styled.RightActions>\n        </Styled.Footer>\n      </Styled.Container>\n    )\n  },\n)\n"],"names":["jsxs","Styled.Container","Styled.Form","Styled.Row","jsx","Styled.CheckboxRow","Styled.Error","Styled.Footer","Styled.LeftActions","Styled.RightActions"],"mappings":"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"}

package/dist/shared/src/components/Views/ViewForm/ViewForm.styled.cjs.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const styled = require("styled-components");
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-gap-large);
+`;
+const Form = styled.form`
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-gap-large);
+`;
+const Row = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-gap-small);
+`;
+const CheckboxRow = styled.div`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  justify-content: space-between;
+  gap: var(--base-gap-small);
+  padding: 8px 0;
+`;
+styled.input`
+  width: 16px;
+  height: 16px;
+  background-color: transparent;
+  border: 1px solid var(--md-sys-color-outline);
+  appearance: none;
+  border-radius: 2px;
+  cursor: pointer;
+
+  &:hover {
+    border-color: hsl(212.31deg 16.83% 74.65%);
+  }
+
+  &:checked {
+    background-color: var(--md-sys-color-primary);
+    border-color: var(--md-sys-color-primary);
+    appearance: auto;
+  }
+`;
+const Footer = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+const LeftActions = styled.div`
+  display: flex;
+  gap: var(--base-gap-small);
+`;
+const RightActions = styled.div`
+  display: flex;
+  gap: var(--base-gap-small);
+`;
+const Error = styled.div`
+  color: var(--md-sys-color-error);
+`;
+exports.CheckboxRow = CheckboxRow;
+exports.Container = Container;
+exports.Error = Error;
+exports.Footer = Footer;
+exports.Form = Form;
+exports.LeftActions = LeftActions;
+exports.RightActions = RightActions;
+exports.Row = Row;
+//# sourceMappingURL=ViewForm.styled.cjs.js.map

package/dist/shared/src/components/Views/ViewForm/ViewForm.styled.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewForm.styled.cjs.js","sources":["../../../../../../src/components/Views/ViewForm/ViewForm.styled.ts"],"sourcesContent":["import styled from 'styled-components'\n\nexport const Container = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-gap-large);\n`\n\nexport const Form = styled.form`\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-gap-large);\n`\n\nexport const Row = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-gap-small);\n`\n\nexport const CheckboxRow = styled.div`\n  display: flex;\n  align-items: center;\n  width: 100%;\n  justify-content: space-between;\n  gap: var(--base-gap-small);\n  padding: 8px 0;\n`\n\nexport const StyledCheckbox = styled.input`\n  width: 16px;\n  height: 16px;\n  background-color: transparent;\n  border: 1px solid var(--md-sys-color-outline);\n  appearance: none;\n  border-radius: 2px;\n  cursor: pointer;\n\n  &:hover {\n    border-color: hsl(212.31deg 16.83% 74.65%);\n  }\n\n  &:checked {\n    background-color: var(--md-sys-color-primary);\n    border-color: var(--md-sys-color-primary);\n    appearance: auto;\n  }\n`\n\nexport const Footer = styled.div`\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n`\n\nexport const LeftActions = styled.div`\n  display: flex;\n  gap: var(--base-gap-small);\n`\n\nexport const RightActions = styled.div`\n  display: flex;\n  gap: var(--base-gap-small);\n`\n\nexport const Error = styled.div`\n  color: var(--md-sys-color-error);\n`\n"],"names":[],"mappings":";;;AAEO,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAMzB,MAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAMpB,MAAM,MAAM,OAAO;AAAA;AAAA;AAAA;AAAA;AAMnB,MAAM,cAAc,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASJ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoB9B,MAAM,SAAS,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOtB,MAAM,cAAc,OAAO;AAAA;AAAA;AAAA;AAK3B,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA;AAK5B,MAAM,QAAQ,OAAO;AAAA;AAAA;;;;;;;;;"}

package/dist/shared/src/components/Views/ViewForm/ViewForm.styled.es.js

@@ -0,0 +1,71 @@
+import styled from "styled-components";
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-gap-large);
+`;
+const Form = styled.form`
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-gap-large);
+`;
+const Row = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-gap-small);
+`;
+const CheckboxRow = styled.div`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  justify-content: space-between;
+  gap: var(--base-gap-small);
+  padding: 8px 0;
+`;
+styled.input`
+  width: 16px;
+  height: 16px;
+  background-color: transparent;
+  border: 1px solid var(--md-sys-color-outline);
+  appearance: none;
+  border-radius: 2px;
+  cursor: pointer;
+
+  &:hover {
+    border-color: hsl(212.31deg 16.83% 74.65%);
+  }
+
+  &:checked {
+    background-color: var(--md-sys-color-primary);
+    border-color: var(--md-sys-color-primary);
+    appearance: auto;
+  }
+`;
+const Footer = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+const LeftActions = styled.div`
+  display: flex;
+  gap: var(--base-gap-small);
+`;
+const RightActions = styled.div`
+  display: flex;
+  gap: var(--base-gap-small);
+`;
+const Error = styled.div`
+  color: var(--md-sys-color-error);
+`;
+export {
+  CheckboxRow,
+  Container,
+  Error,
+  Footer,
+  Form,
+  LeftActions,
+  RightActions,
+  Row
+};
+//# sourceMappingURL=ViewForm.styled.es.js.map

package/dist/shared/src/components/Views/ViewForm/ViewForm.styled.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewForm.styled.es.js","sources":["../../../../../../src/components/Views/ViewForm/ViewForm.styled.ts"],"sourcesContent":["import styled from 'styled-components'\n\nexport const Container = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-gap-large);\n`\n\nexport const Form = styled.form`\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-gap-large);\n`\n\nexport const Row = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-gap-small);\n`\n\nexport const CheckboxRow = styled.div`\n  display: flex;\n  align-items: center;\n  width: 100%;\n  justify-content: space-between;\n  gap: var(--base-gap-small);\n  padding: 8px 0;\n`\n\nexport const StyledCheckbox = styled.input`\n  width: 16px;\n  height: 16px;\n  background-color: transparent;\n  border: 1px solid var(--md-sys-color-outline);\n  appearance: none;\n  border-radius: 2px;\n  cursor: pointer;\n\n  &:hover {\n    border-color: hsl(212.31deg 16.83% 74.65%);\n  }\n\n  &:checked {\n    background-color: var(--md-sys-color-primary);\n    border-color: var(--md-sys-color-primary);\n    appearance: auto;\n  }\n`\n\nexport const Footer = styled.div`\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n`\n\nexport const LeftActions = styled.div`\n  display: flex;\n  gap: var(--base-gap-small);\n`\n\nexport const RightActions = styled.div`\n  display: flex;\n  gap: var(--base-gap-small);\n`\n\nexport const Error = styled.div`\n  color: var(--md-sys-color-error);\n`\n"],"names":[],"mappings":";AAEO,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAMzB,MAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAMpB,MAAM,MAAM,OAAO;AAAA;AAAA;AAAA;AAAA;AAMnB,MAAM,cAAc,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASJ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoB9B,MAAM,SAAS,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOtB,MAAM,cAAc,OAAO;AAAA;AAAA;AAAA;AAK3B,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA;AAK5B,MAAM,QAAQ,OAAO;AAAA;AAAA;"}