@olenbetong/synergi-react 0.6.7

package/es/synergi-react/src/SplitContainer/index.js

@@ -0,0 +1,151 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./index.css";
+import clsx from "clsx";
+import localforage from "localforage";
+import { Children, forwardRef, useEffect, useRef, useState } from "react";
+const settingsStore = localforage.createInstance({
+    name: `AfSplitContainers.${af.userSession.login}`,
+});
+const settingsCache = {};
+async function persistState(key, layoutVersion, fixedSize) {
+    if (fixedSize != null) {
+        let settings = {
+            layoutVersion,
+            fixedSize,
+        };
+        settingsCache[key] = settings;
+        await settingsStore.setItem(key, settings);
+    }
+}
+async function getSettings(key, layoutVersion) {
+    let settings = settingsCache[key] ?? (await settingsStore.getItem(key));
+    if (settings && settings.layoutVersion === layoutVersion) {
+        return settings.fixedSize;
+    }
+    return null;
+}
+// Load all article grid layouts even if the grid is not mounted yet.
+// This ways the persisted state can be restored faster after the initial
+// page load.
+settingsStore.keys().then((keys) => Promise.allSettled(keys
+    .filter((key) => key.startsWith(af.article.id))
+    .map((key) => settingsStore.getItem(key).then((settings) => {
+    if (settings && !settingsCache[key]) {
+        settingsCache[key] = settings;
+    }
+}))));
+const Divider = forwardRef(function Divider(props, ref) {
+    return _jsx("div", { tabIndex: 0, className: clsx("ObSplitContainer-divider", props.className), ref: ref });
+});
+function SplitRoot({ className, direction, ...props }) {
+    return _jsx("div", { className: clsx(className, "ObSplitContainer-root", direction), ...props });
+}
+function SplitPanel(props) {
+    let style = {
+        flex: props.fixed ? `0 0 ${Math.floor(props.size)}px` : "1 1 100%",
+        ...props.style,
+    };
+    return (_jsx("div", { className: clsx(props.className, "ObSplitContainer-panel"), style: style, children: props.children }));
+}
+export function SplitContainer({ className, children, direction = "vertical", fixedPanel = 1, panelClassName, defaultFixedSize = 400, layoutVersion = 1, id, }) {
+    let [fixedSize, setFixedSize] = useState(defaultFixedSize);
+    let [isDragging, setIsDragging] = useState(false);
+    let dividerRef = useRef(null);
+    if (Children.count(children) !== 2) {
+        throw Error("SplitContainer requires exactly 2 children");
+    }
+    function handleFixedSizeChanged(size) {
+        setFixedSize((current) => {
+            let newValue = typeof size === "function" ? size(current) : size;
+            if (id) {
+                let key = `${af.article.id}.${id}`;
+                persistState(key, layoutVersion, newValue);
+            }
+            return newValue;
+        });
+    }
+    useEffect(() => {
+        if (id) {
+            let key = `${af.article.id}.${id}`;
+            getSettings(key, layoutVersion).then((data) => {
+                if (data) {
+                    // Persisted state exists, and matches the current layout version,
+                    // so restore the state.
+                    setFixedSize(data);
+                    return Promise.resolve();
+                }
+            });
+        }
+    }, [id, layoutVersion]);
+    let childrenArray = Children.toArray(children);
+    useEffect(() => {
+        let divider = dividerRef.current;
+        if (divider) {
+            let initialPosition = {
+                clientX: 0,
+                clientY: 0,
+                size: 0,
+            };
+            let movingPanel = (fixedPanel === 1 ? divider.previousElementSibling : divider.nextElementSibling);
+            function getNewSize(event) {
+                let deltaSize = direction === "horizontal"
+                    ? event.clientX - initialPosition.clientX
+                    : event.clientY - initialPosition.clientY;
+                deltaSize *= fixedPanel === 1 ? -1 : 1;
+                return initialPosition.size - deltaSize;
+            }
+            function handlePointerUp(event) {
+                let newSize = getNewSize(event);
+                handleFixedSizeChanged(newSize);
+                setIsDragging(false);
+                movingPanel.style.flex = `0 0 ${Math.floor(newSize)}px`;
+                window.removeEventListener("pointermove", handlePointerMove);
+            }
+            function handlePointerMove(event) {
+                event.preventDefault();
+                let newSize = getNewSize(event);
+                movingPanel.style.flex = `0 0 ${newSize}px`;
+            }
+            function handlePointerDown(event) {
+                setIsDragging(true);
+                let rect = movingPanel.getBoundingClientRect();
+                let size = direction === "horizontal" ? rect.width : rect.height;
+                initialPosition = {
+                    clientX: event.clientX,
+                    clientY: event.clientY,
+                    size,
+                };
+                window.addEventListener("pointermove", handlePointerMove);
+                window.addEventListener("pointerup", handlePointerUp, { once: true });
+            }
+            function handleKeyDown(event) {
+                let reduce = true;
+                let shouldHandle = false;
+                if (!event.altKey && !event.ctrlKey && !event.metaKey) {
+                    if (direction === "horizontal" && ["ArrowLeft", "ArrowRight"].includes(event.key)) {
+                        shouldHandle = true;
+                        reduce =
+                            (fixedPanel === 1 && event.key === "ArrowLeft") || (fixedPanel === 2 && event.key === "ArrowRight");
+                    }
+                    else if (direction === "vertical" && ["ArrowUp", "ArrowDown"].includes(event.key)) {
+                        shouldHandle = true;
+                        reduce = (fixedPanel === 1 && event.key === "ArrowUp") || (fixedPanel === 2 && event.key === "ArrowDown");
+                    }
+                }
+                if (shouldHandle) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    let delta = event.shiftKey ? 25 : 5;
+                    handleFixedSizeChanged((size) => size + (reduce ? -delta : delta));
+                }
+            }
+            divider.addEventListener("pointerdown", handlePointerDown);
+            divider.addEventListener("keydown", handleKeyDown);
+            return () => {
+                divider?.removeEventListener("pointerdown", handlePointerDown);
+                divider?.removeEventListener("keydown", handleKeyDown);
+            };
+        }
+    }, [direction, fixedPanel]);
+    return (_jsxs(SplitRoot, { direction: direction, className: className, children: [_jsx(SplitPanel, { className: panelClassName, fixed: fixedPanel === 1, size: fixedSize, children: childrenArray[0] }), _jsx(Divider, { ref: dividerRef, direction: direction, isDragging: isDragging }), _jsx(SplitPanel, { className: panelClassName, fixed: fixedPanel === 2, size: fixedSize, children: childrenArray[1] })] }));
+}

package/es/synergi-react/src/ValueToggle/index.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import "./index.css";
+export declare type ValueToggleProps = {
+    className?: string;
+    onChange?: (value: string | number) => void;
+    value?: string | number;
+    defaultValue?: string | number;
+    id?: string;
+    options: Array<string | {
+        value: string | number;
+        label?: string;
+    }>;
+    style?: React.CSSProperties;
+};
+export declare const ValueToggle: import("react").ForwardRefExoticComponent<ValueToggleProps & import("react").RefAttributes<{
+    focus: () => void;
+    blur: () => void;
+    value: string | number;
+}>>;

package/es/synergi-react/src/ValueToggle/index.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./index.css";
+import { forwardRef, useImperativeHandle, useRef, useState } from "react";
+let valueToggleId = 0;
+function ValueToggleInner({ className, onChange, defaultValue, options, value, ...other }, ref) {
+    const wrapperRef = useRef(null);
+    const [toggleName] = useState("obet-value-toggle-" + String(++valueToggleId));
+    const isControlled = value !== undefined;
+    useImperativeHandle(ref, () => {
+        const e = wrapperRef.current?.querySelector("input");
+        return {
+            focus: () => e?.focus(),
+            blur: () => e?.blur(),
+            value: (e?.querySelector("input:checked")).value,
+        };
+    });
+    return (_jsx("fieldset", { className: className, ...other, children: _jsx("div", { className: "ObValueToggle-root", ref: wrapperRef, children: options.map((option) => {
+                const isObj = typeof option === "object";
+                const optValue = isObj ? option.value : option;
+                const props = {
+                    value: optValue,
+                };
+                if (isControlled) {
+                    props.checked = value === optValue;
+                }
+                else {
+                    props.defaultChecked = defaultValue === optValue;
+                }
+                if (typeof onChange === "function") {
+                    props.onChange = () => onChange(optValue);
+                }
+                if (isObj) {
+                    Object.assign(props, option);
+                }
+                return (_jsxs("label", { className: "ObValueToggle-option", children: [_jsx("input", { type: "radio", className: "ObValueToggle-input", name: toggleName, ...props }), _jsx("span", { className: "ObValueToggle-label", children: isObj ? option.label || optValue : optValue })] }, optValue));
+            }) }) }));
+}
+export const ValueToggle = forwardRef(ValueToggleInner);

package/es/synergi-react/src/index.d.ts

@@ -0,0 +1,15 @@
+export { Checkbox, CheckboxProps } from "./Checkbox/index.js";
+export { ColorCard, CardColumn, CardDetail, CardLabel } from "./ColorCard/index.js";
+export { DateNavigator } from "./DateNavigator/index.js";
+export { Card, List as LinkedList, ListItem as LinkedListItem } from "./LinkedCardList/index.js";
+export { BannerImage as PageBannerImage, BannerImageProps, PageBanner, PageBannerProps, Tab as PageBannerTab, TabProps as PageBannerTabProps, TabList as PageBannerTabList, TabListProps as PageBannerTabListProps, Title as PageBannerTitle, TitleProps as PageBannerTitleProps, } from "./PageBanner/index.js";
+export { Portal } from "./Portal/index.js";
+export { ProgressBar } from "./ProgressBar/index.js";
+export { Sidebar, SidebarProps } from "./Sidebar/index.js";
+export { Spinner, SpinnerProps } from "./Spinner/index.js";
+export { SplitContainer, SplitContainerProps } from "./SplitContainer/index.js";
+export { useTranslation } from "./useTranslation/index.js";
+export { ValueToggle, ValueToggleProps } from "./ValueToggle/index.js";
+export { useDebounce } from "../../appframe-react/src/useDebounce.js";
+export { usePersistedSetting } from "./usePersistedSetting.js";
+export { useSearchParamState } from "./useSearchParamState.js";

package/es/synergi-react/src/index.js

@@ -0,0 +1,15 @@
+export { Checkbox } from "./Checkbox/index.js";
+export { ColorCard, CardColumn, CardDetail, CardLabel } from "./ColorCard/index.js";
+export { DateNavigator } from "./DateNavigator/index.js";
+export { Card, List as LinkedList, ListItem as LinkedListItem } from "./LinkedCardList/index.js";
+export { BannerImage as PageBannerImage, PageBanner, Tab as PageBannerTab, TabList as PageBannerTabList, Title as PageBannerTitle, } from "./PageBanner/index.js";
+export { Portal } from "./Portal/index.js";
+export { ProgressBar } from "./ProgressBar/index.js";
+export { Sidebar } from "./Sidebar/index.js";
+export { Spinner } from "./Spinner/index.js";
+export { SplitContainer } from "./SplitContainer/index.js";
+export { useTranslation } from "./useTranslation/index.js";
+export { ValueToggle } from "./ValueToggle/index.js";
+export { useDebounce } from "../../appframe-react/src/useDebounce.js";
+export { usePersistedSetting } from "./usePersistedSetting.js";
+export { useSearchParamState } from "./useSearchParamState.js";

package/es/synergi-react/src/useDebounce.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Returns a debounced version of the given value.
+ *
+ * @param value
+ * @param delay
+ * @returns
+ * @deprecated Use equivalent hook in @olenbetong/appframe-react instead
+ */
+export declare function useDebounce<T>(value: T, delay?: number): T;

package/es/synergi-react/src/useDebounce.js

@@ -0,0 +1,17 @@
+import { useEffect, useState } from "react";
+/**
+ * Returns a debounced version of the given value.
+ *
+ * @param value
+ * @param delay
+ * @returns
+ * @deprecated Use equivalent hook in @olenbetong/appframe-react instead
+ */
+export function useDebounce(value, delay = 300) {
+    let [debouncedValue, setValue] = useState(value);
+    useEffect(() => {
+        let timeout = setTimeout(() => setValue(value), delay);
+        return () => clearTimeout(timeout);
+    }, [delay, value]);
+    return debouncedValue;
+}

package/es/synergi-react/src/usePersistedSetting.d.ts

@@ -0,0 +1,7 @@
+/**
+ * On mount, load the persisted state from Indexed DB, and if the persisted
+ * layout version matches, restore the layout. Then listen to changes to the
+ * state, and store the latest version in Indexed DB.
+ * @deprecated Use equivalent hook in @olenbetong/appframe-react instead
+ */
+export declare function usePersistedSetting<T = unknown>(key: string, defaultValue: T): [T, (newValue: T) => void];

package/es/synergi-react/src/usePersistedSetting.js

@@ -0,0 +1,53 @@
+import mitt from "mitt";
+import localforage from "localforage";
+import { useSyncExternalStore } from "react";
+const settingsStore = localforage.createInstance({
+    name: `AfUserSettings.${af.userSession.login}`,
+});
+class SettingsCache {
+    #mitt;
+    #cache = {};
+    constructor() {
+        this.#mitt = mitt();
+        // Load all article user settings even if the setting is not needed yet.
+        // This ways the persisted state can be restored faster after the initial
+        // page load.'
+        settingsStore.keys().then((keys) => Promise.allSettled(keys
+            .filter((key) => key.startsWith(af.article.id))
+            .map((storeKey) => settingsStore.getItem(storeKey).then((storedValue) => {
+            let key = storeKey.replace(`${af.article.id}.`, "");
+            if (storedValue !== undefined && this.#cache[key] === undefined) {
+                this.setItem(key, storedValue);
+            }
+        }))));
+    }
+    setItem(key, value) {
+        this.#cache[key] = value;
+        this.#mitt.emit("change", { key, value });
+        let storeKey = `${af.article.id}.${key}`;
+        settingsStore.setItem(storeKey, value);
+    }
+    getItem(key) {
+        return this.#cache[key];
+    }
+    listen(setting, callback) {
+        function handler({ key, value }) {
+            if (setting === key) {
+                callback(value);
+            }
+        }
+        this.#mitt.on("change", handler);
+        return () => this.#mitt.off("change", handler);
+    }
+}
+const settingsCache = new SettingsCache();
+/**
+ * On mount, load the persisted state from Indexed DB, and if the persisted
+ * layout version matches, restore the layout. Then listen to changes to the
+ * state, and store the latest version in Indexed DB.
+ * @deprecated Use equivalent hook in @olenbetong/appframe-react instead
+ */
+export function usePersistedSetting(key, defaultValue) {
+    let value = useSyncExternalStore((onChange) => settingsCache.listen(key, () => onChange()), () => settingsCache.getItem(key) ?? defaultValue);
+    return [value, (newValue) => settingsCache.setItem(key, newValue)];
+}

package/es/synergi-react/src/useSearchParamState.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+declare type SearchParamValue = string | null;
+/**
+ * A hook that wraps useState, and keeps the state value synced with
+ * a search parameter.
+ *
+ * @param {string} key They key used to store the value in the search parameters
+ * @param {SearchParamValue} fallbackValue Default value for the state. Only used if the search parameters do not contains a value for the key parameter
+ * @deprecated Use equivalent hook in @olenbetong/appframe-react instead
+ */
+export declare function useSearchParamState(key: string, fallbackValue?: SearchParamValue | (() => SearchParamValue), multiple?: false): [SearchParamValue, React.Dispatch<React.SetStateAction<SearchParamValue>>];
+export declare function useSearchParamState(key: string, fallbackValue: string[] | (() => string[]), multiple: true): [string[], React.Dispatch<React.SetStateAction<string[]>>];
+export {};

package/es/synergi-react/src/useSearchParamState.js

@@ -0,0 +1,42 @@
+import { useEffect, useRef, useState } from "react";
+export function useSearchParamState(key, fallbackValue, multiple = false) {
+    let defaultRef = useRef(multiple ? [] : null);
+    let [value, setValue] = useState(() => {
+        let params = new URLSearchParams(window.location.search);
+        let value = multiple ? params.getAll(key) : params.get(key);
+        // Even if we don't use the default value here, we want to keep it for later
+        // so we can see if the default value is the active value. If that's the case,
+        // we remove the parameter from the search parameters.
+        if (typeof fallbackValue === "function") {
+            defaultRef.current = fallbackValue();
+        }
+        else {
+            defaultRef.current = fallbackValue ?? (multiple ? [] : null);
+        }
+        if (!value) {
+            return defaultRef.current;
+        }
+        return value;
+    });
+    useEffect(() => {
+        let params = new URLSearchParams(window.location.search);
+        if (multiple) {
+            params.delete(key);
+            value.forEach((v) => params.append(key, v));
+        }
+        else if (value && value !== defaultRef.current) {
+            params.set(key, String(value));
+        }
+        else {
+            params.delete(key);
+        }
+        let newPath = window.location.pathname;
+        let paramString = params.toString();
+        if (paramString.length) {
+            newPath += "?" + paramString;
+        }
+        window.history.replaceState({ path: newPath }, "", newPath);
+    }, [key, value]);
+    // @ts-ignore i give up
+    return [value, setValue];
+}

package/es/synergi-react/src/useTranslation/index.d.ts

@@ -0,0 +1,7 @@
+export declare function useTranslation(text: string, targetLanguage: string, apiKey: string): {
+    error: string | null;
+    from: string | null;
+    isTranslating: boolean;
+    translation: string;
+    translate: () => Promise<void>;
+};

package/es/synergi-react/src/useTranslation/index.js

@@ -0,0 +1,64 @@
+import { useEffect, useRef, useState } from "react";
+async function translateText(text, target, apiKey) {
+    let url = `https://translation.googleapis.com/language/translate/v2?key=${apiKey}`;
+    let body = JSON.stringify({
+        q: text,
+        target,
+    });
+    let options = {
+        body,
+        method: "POST",
+    };
+    let result = await fetch(url, options);
+    let json = await result.json();
+    let { data } = json;
+    if (data && data.translations) {
+        let [translation] = data.translations;
+        return {
+            from: translation.detectedSourceLanguage,
+            translation: translation.translatedText,
+        };
+    }
+    return false;
+}
+export function useTranslation(text, targetLanguage, apiKey) {
+    let [translation, setTranslation] = useState("");
+    let [error, setError] = useState(null);
+    let [from, setSourceLang] = useState(null);
+    let [isTranslating, setIsTranslating] = useState(false);
+    let textRef = useRef(text);
+    useEffect(() => {
+        textRef.current = text;
+        return () => {
+            setTranslation("");
+            setError(null);
+            setSourceLang(null);
+            setIsTranslating(false);
+        };
+    }, [apiKey, targetLanguage, text]);
+    async function translate() {
+        setIsTranslating(true);
+        try {
+            let result = await translateText(text, targetLanguage, apiKey);
+            if (result && textRef.current === text) {
+                let { from, translation } = result;
+                setSourceLang(from);
+                setTranslation(translation);
+                setIsTranslating(false);
+            }
+        }
+        catch (error) {
+            if (textRef.current === text) {
+                setError(error.message);
+                setIsTranslating(false);
+            }
+        }
+    }
+    return {
+        error,
+        from,
+        isTranslating,
+        translation,
+        translate,
+    };
+}

package/package.json

@@ -0,0 +1,90 @@
+{
+  "name": "@olenbetong/synergi-react",
+  "version": "0.6.7",
+  "description": "Standalone React component for SynergiWeb and Partner Portal",
+  "type": "module",
+  "types": "./es/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./es/index.js"
+    },
+    "./Checkbox": {
+      "import": "./es/Checkbox/index.js"
+    },
+    "./ColorCard": {
+      "import": "./es/ColorCard/index.js"
+    },
+    "./DateNavigator": {
+      "import": "./es/DateNavigator/index.js"
+    },
+    "./LinkedCardList": {
+      "import": "./es/LinkedCardList/index.js"
+    },
+    "./PageBanner": {
+      "import": "./es/PageBanner/index.js"
+    },
+    "./Portal": {
+      "import": "./es/Portal/index.js"
+    },
+    "./ProgressBar": {
+      "import": "./es/ProgressBar/index.js"
+    },
+    "./Sidebar": {
+      "import": "./es/Sidebar/index.js"
+    },
+    "./Spinner": {
+      "import": "./es/Spinner/index.js"
+    },
+    "./SplitContainer": {
+      "import": "./es/SplitContainer/index.js"
+    },
+    "./useTranslation": {
+      "import": "./es/useTranslation/index.js"
+    },
+    "./ValueToggle": {
+      "import": "./es/ValueToggle/index.js"
+    }
+  },
+  "scripts": {
+    "prepack": "npm run build",
+    "build": "npm run build:tsc && npm run build:tsc:post && npm run build:esbuild && npm run build:sass && npm run build:sass:components",
+    "build:tsc": "rm -rf ./es && tsc",
+    "build:esbuild": "rm -rf ./dist && node --loader ts-node/esm.mjs ../../shared/esbuild.js",
+    "build:sass": "sass ./src/index.scss ./dist/styles/styles.css --source-map-urls=relative --style compressed",
+    "build:sass:components": "node ./scripts/buildSassComponents.mjs",
+    "build:tsc:post": "node ./scripts/replaceCss.mjs"
+  },
+  "files": [
+    "src",
+    "dist",
+    "es"
+  ],
+  "keywords": [],
+  "author": "Bjørnar Vister Hansen <bvh@olenbetong.no>",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "sideEffects": false,
+  "dependencies": {
+    "@olenbetong/appframe-core": "^2.0.4",
+    "clsx": "^1.1.1",
+    "localforage": "^1.10.0",
+    "mitt": "^3.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/olenbetong/ui-kit.git"
+  },
+  "buildConfig": {
+    "entries": [
+      {
+        "libraryName": "ob.react"
+      }
+    ]
+  },
+  "devDependencies": {
+    "replace-in-files": "^3.0.0"
+  }
+}

package/src/Checkbox/index.scss

@@ -0,0 +1,119 @@
+.ObCheckbox-root {
+  --check-width: 2rem;
+  --bg-color: var(--brand-dark, rgba(42, 65, 50, 0.5));
+  --bg-color-hover: var(--brand-primary, rgba(42, 65, 50, 0.8));
+  --bg-color-selected: var(--brand-light);
+
+  display: inline-block;
+  height: var(--check-width);
+  margin-bottom: 0;
+
+  &:focus-within .ObCheckbox-box {
+    border: 0.1rem solid black;
+  }
+}
+
+.ObCheckbox-box {
+  position: relative;
+
+  background: var(--bg-color);
+  transition: background 300ms ease;
+
+  overflow: hidden;
+
+  border-radius: calc(var(--check-width) / 15);
+  height: var(--check-width);
+  width: var(--check-width);
+
+  &:hover {
+    background: var(--bg-color-hover);
+  }
+}
+
+.ObCheckbox-label {
+  position: relative;
+  margin-bottom: 0;
+  overflow: hidden;
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.ObCheckbox-mark {
+  color: #fff;
+  display: inline-block;
+  font-size: calc(var(--check-width) * 0.4);
+  left: 50%;
+  opacity: 0;
+  pointer-events: none;
+  position: absolute;
+  top: 50%;
+  transition: all 300ms ease-in-out;
+  transition-delay: 0ms;
+  transform: translate(-50%, -50%) scale(6);
+}
+
+.ObCheckbox-input {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.check_Label {
+  margin-bottom: 0;
+  flex-grow: 1;
+}
+
+.ObCheckbox-input:checked:not(:disabled) + .ObCheckbox-label {
+  animation: animOn 800ms 1 forwards;
+}
+
+.ObCheckbox-input:checked:not(:disabled) + .ObCheckbox-label .ObCheckbox-box {
+  background: var(--bg-color-selected);
+}
+
+.ObCheckbox-input:checked + .ObCheckbox-label .ObCheckbox-box .ObCheckbox-mark {
+  transform: translate(-50%, -50%) scale(1);
+  transition-delay: 200ms;
+  opacity: 1;
+}
+
+.check_Disabled {
+  --bg-color: rgba(150, 150, 150, 0.5);
+  --bg-color-hover: var(--bg-color);
+}
+
+.ObCheckbox-root.Ob-disabled .ObCheckbox-box {
+  cursor: not-allowed;
+}
+
+@keyframes animOn {
+  40% {
+    transform: scaleY(0.4) scaleX(2);
+  }
+
+  50% {
+    transform: scaleY(1.2) scaleX(0.6);
+  }
+
+  60% {
+    transform: scaleY(0.8) scaleX(1.4);
+  }
+
+  70% {
+    transform: scaleY(1.1) scaleX(0.9);
+  }
+
+  100% {
+    transform: scaleY(1) scaleX(1);
+  }
+}