@olenbetong/synergi-react 0.6.45 → 0.7.0

package/dist/styles/styles.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../src/Checkbox/index.scss","../../src/ColorCard/index.scss","../../src/DateNavigator/index.scss","../../src/styles/_mixins.scss","../../src/LinkedCardList/index.scss","../../src/PageBanner/index.scss","../../src/styles/_variables.scss","../../src/ProgressBar/index.scss","../../src/Sidebar/index.scss","../../src/SplitContainer/index.scss","../../src/ValueToggle/index.scss"],"names":[],"mappings":"CAAA,iBACE,oBACA,qDACA,8DACA,wCAEA,qBACA,0BACA,gBAEA,8CACE,wBAGF,6BACE,qCACA,kCAIJ,gBACE,kBAEA,2BACA,iCAEA,gBAEA,0CACA,0BACA,yBAEA,sBACE,iCAIJ,kBACE,kBACA,gBACA,gBAEA,wBACE,aAIJ,iBACE,WACA,qBACA,sCACA,SACA,UACA,oBACA,kBACA,QACA,iCACA,qBACA,yCAGF,kBACE,mBACA,qBACA,WACA,gBACA,kBACA,mBACA,UAEA,wBACE,aAIJ,aACE,gBACA,YAGF,2DACE,kCAGF,2EACE,oCAGF,6EACE,yCACA,uBACA,UAGF,6CACE,mBAGF,kBACE,IACE,gCAGF,IACE,kCAGF,IACE,kCAGF,IACE,kCAGF,KACE,+BClHJ,kBACE,yBACA,uBACA,mBACA,2BAEA,oBACA,uHACA,qKAOA,qBACA,gEACA,WACA,eACA,aACA,yMAEA,eACA,iBACA,gBACA,iCAEA,sCACE,sCAEF,sCACE,oCAEF,sCACE,qCAEF,sCACE,oCAEF,sCACE,qCAGF,gDAGE,yBAEA,iEACA,WACA,qBAIF,qCAtDF,kBAuDI,kBAIJ,oBACE,aACA,cACA,sBACA,8BACA,cACA,gBACA,gCACA,uBAEA,gCACE,mBACA,2BAGF,sCACE,+BACA,cACA,oCAGF,qCACE,sCACE,eAKN,yBACE,WACA,gBACA,yBAIA,qCACE,oBAGF,yGAEE,kBACA,gBAGF,iEACE,YAGF,qCAfF,oBAgBI,gBAIJ,yBACE,WAGF,mBACE,kBACA,oBAGA,oCACE,mBAEA,2CACE,WACA,kBACA,YACA,yBACA,8BACA,YACA,UACA,UAIJ,2BACE,gBACA,2BACA,0CACA,kBACA,WACA,cACA,cACA,OACA,kBACA,UACA,aACA,UCnJJ,sBACE,qBAEA,0BACE,aACA,kBACA,SAIJ,sBACE,yBACA,8CACA,aACA,eAGF,uBCpBE,gBACA,SACA,cAEA,aACA,mBACA,iBACA,UACA,0BACA,yBACA,sBACA,qBDWA,aACA,mBACA,cACA,uBAEA,OA1BmB,KA4BnB,eACA,kBCjBA,yCACE,SACA,UDiBF,6BACE,yBACA,kDAIJ,2BACE,4BACA,QAGF,4BACE,2BACA,QAGF,sBACE,aACA,cACA,sBACA,uBACA,QAEA,OAtDmB,KAwDnB,kBErDF,mBACE,qBACA,cACA,eAGF,mBACE,aACA,mBACA,mBAGF,yBACE,aACA,gBACA,cACA,kBAGF,0BACE,cACA,0BAGF,mBACE,aACA,mBACA,cACA,gBACA,kBAGF,qBACE,gBAEA,oCACA,oBACA,OAxCY,KAyCZ,MAzCY,KA2CZ,kBACA,OACA,QAEA,mCAGF,mBACE,gBACA,iBACA,qCACA,sBACA,cACA,eACA,cACA,kBAGF,2BACE,uCACA,4BACA,oCACA,YACA,uDACA,WACA,UACA,kBACA,kBACA,QACA,UAGF,yBACE,oCACA,cACA,wBAGF,iCACE,sCClFF,mBACE,iBCHc,QDId,mCACA,sCACA,WAEA,qBACE,cAIJ,oBACE,aACA,mBACA,sBAEA,qCALF,oBAMI,uBACA,oBAIJ,yBACE,eAEA,qCAHF,yBAII,gBAIJ,0BACE,mBACA,sBACA,qBACA,YACA,iBACA,8BACA,WAEA,qCATF,0BAUI,kBACA,SACA,kBACA,wBACA,kBACA,aACA,aAGF,qCAnBF,0BAoBI,aACA,aAIJ,0BACE,mBACA,gBACA,eAEA,qCALF,0BAMI,cAGF,qCATF,0BAUI,gBAKF,6BACE,wBACA,gBACA,MACA,aAIJ,2BACE,gBACA,qBACA,mBAGF,kBACE,yCACA,qBACA,iBACA,eACA,mBACA,kBACA,0BAEA,yBACE,kBE9FJ,oBACE,aACA,WACA,gBACA,wBACA,yBACA,YACA,kBACA,0CACA,cACA,kBAEA,0CACE,yBACA,kBACA,0CAGF,4CACE,0TAUA,kVAUA,8CACA,kBACA,kBACA,8BAGF,kDACE,sBACA,WAEA,mBACA,WAEA,kBACA,UACA,QACA,UAGF,uCACE,4QAUA,2RAUA,8CACA,kBACA,8BCnFJ,gBACE,eACA,SACA,OACA,MACA,UAEA,sBAEA,4BACA,kCACA,sBAQA,gBANA,yBACE,WACA,QACA,2BAKF,wBACE,wBAGF,iCACE,uCAEA,0CACE,wCAKN,mBACE,eACA,SACA,OACA,QACA,MACA,UAEA,UACA,kBAEA,wDACA,gCAEA,2BACE,UACA,mBC/CJ,IACE,gBAGF,uBACE,aACA,sBACA,YACA,WAEA,kCACE,mBAIJ,wBACE,gBAGF,0BACE,eACA,+BACA,gBACA,iBAEA,aACA,mBACA,uBAEA,gCACE,gCAGF,4DACE,iBACA,yBCpCJ,oBACE,aACA,mBAGF,sBACE,gBAGF,qBACE,eACA,eACA,cACA,kBACA,yBAEA,2BACE,gBAGF,kDACE,8BACA,sBACA,iCACA,eACA,WAGF,+DACE,+BAGF,wDACE,sBACA,iCAIJ,qBACE,kBACA,UACA,WACA,UACA,YACA,gBACA,sBACA","file":"styles.css"}
+{"version":3,"sourceRoot":"","sources":["../../src/Checkbox/index.scss","../../src/ColorCard/index.scss","../../src/DateNavigator/index.scss","../../src/styles/_mixins.scss","../../src/LinkedCardList/index.scss","../../src/PageBanner/index.scss","../../src/styles/_variables.scss","../../src/ProgressBar/index.scss","../../src/Sidebar/index.scss","../../src/SplitContainer/index.scss","../../src/ValueToggle/index.scss"],"names":[],"mappings":"CAAA,iBACC,oBACA,qDACA,8DACA,wCAEA,qBACA,0BACA,gBAEA,8CACC,wBAGD,6BACC,qCACA,kCAIF,gBACC,kBAEA,2BACA,iCAEA,gBAEA,0CACA,0BACA,yBAEA,sBACC,iCAIF,kBACC,kBACA,gBACA,gBAEA,wBACC,aAIF,iBACC,WACA,qBACA,sCACA,SACA,UACA,oBACA,kBACA,QACA,iCACA,qBACA,yCAGD,kBACC,mBACA,qBACA,WACA,gBACA,kBACA,mBACA,UAEA,wBACC,aAIF,aACC,gBACA,YAGD,2DACC,kCAGD,2EACC,oCAGD,6EACC,yCACA,uBACA,UAGD,6CACC,mBAGD,kBACC,IACC,gCAGD,IACC,kCAGD,IACC,kCAGD,IACC,kCAGD,KACC,+BClHF,kBACC,yBACA,uBACA,mBACA,2BAEA,oBACA,uHACA,qKAOA,qBACA,gEACA,WACA,eACA,aACA,yMAEA,eACA,iBACA,gBACA,iCAEA,sCACC,sCAED,sCACC,oCAED,sCACC,qCAED,sCACC,oCAED,sCACC,qCAGD,gDAGC,yBAEA,iEACA,WACA,qBAID,qCAtDD,kBAuDE,kBAIF,oBACC,aACA,cACA,sBACA,8BACA,cACA,gBACA,gCACA,uBAEA,gCACC,mBACA,2BAGD,sCACC,+BACA,cACA,oCAGD,qCACC,sCACC,eAKH,yBACC,WACA,gBACA,yBAIA,qCACC,oBAGD,yGAEC,kBACA,gBAGD,iEACC,YAGD,qCAfD,oBAgBE,gBAIF,yBACC,WAGD,mBACC,kBACA,oBAGA,oCACC,mBAEA,2CACC,WACA,kBACA,YACA,yBACA,8BACA,YACA,UACA,UAIF,2BACC,gBACA,2BACA,0CACA,kBACA,WACA,cACA,cACA,OACA,kBACA,UACA,aACA,UCnJF,sBACC,qBAEA,0BACC,aACA,kBACA,SAIF,sBACC,yBACA,8CACA,aACA,eAGD,uBCpBC,gBACA,SACA,cAEA,aACA,mBACA,iBACA,UACA,0BACA,yBACA,sBACA,qBDWA,aACA,mBACA,cACA,uBAEA,OA1BoB,KA4BpB,eACA,kBCjBA,yCACC,SACA,UDiBD,6BACC,yBACA,kDAIF,2BACC,4BACA,QAGD,4BACC,2BACA,QAGD,sBACC,aACA,cACA,sBACA,uBACA,QAEA,OAtDoB,KAwDpB,kBErDD,mBACC,qBACA,cACA,eAGD,mBACC,aACA,mBACA,mBAGD,yBACC,aACA,gBACA,cACA,kBAGD,0BACC,cACA,0BAGD,mBACC,aACA,mBACA,cACA,gBACA,kBAGD,qBACC,gBAEA,oCACA,oBACA,OAxCa,KAyCb,MAzCa,KA2Cb,kBACA,OACA,QAEA,mCAGD,mBACC,gBACA,iBACA,qCACA,sBACA,cACA,eACA,cACA,kBAGD,2BACC,uCACA,4BACA,oCACA,YACA,uDACA,WACA,UACA,kBACA,kBACA,QACA,UAGD,yBACC,oCACA,cACA,wBAGD,iCACC,sCClFD,mBACC,iBCHe,QDIf,mCACA,sCACA,WAEA,qBACC,cAIF,oBACC,aACA,mBACA,sBAEA,qCALD,oBAME,uBACA,oBAIF,yBACC,eAEA,qCAHD,yBAIE,gBAIF,0BACC,mBACA,sBACA,qBACA,YACA,iBACA,8BACA,WAEA,qCATD,0BAUE,kBACA,SACA,kBACA,wBACA,kBACA,aACA,aAGD,qCAnBD,0BAoBE,aACA,aAIF,0BACC,mBACA,gBACA,eAEA,qCALD,0BAME,cAGD,qCATD,0BAUE,gBAKD,6BACC,wBACA,gBACA,MACA,aAIF,2BACC,gBACA,qBACA,mBAGD,kBACC,yCACA,qBACA,iBACA,eACA,mBACA,kBACA,0BAEA,yBACC,kBE9FF,oBACC,aACA,WACA,gBACA,wBACA,yBACA,YACA,kBACA,0CACA,cACA,kBAEA,0CACC,yBACA,kBACA,0CAGD,4CACC,0TAUA,kVAUA,8CACA,kBACA,kBACA,8BAGD,kDACC,sBACA,WAEA,mBACA,WAEA,kBACA,UACA,QACA,UAGD,uCACC,4QAUA,2RAUA,8CACA,kBACA,8BCnFF,gBACC,eACA,SACA,OACA,MACA,UAEA,sBAEA,4BACA,kCACA,sBAQA,gBANA,yBACC,WACA,QACA,2BAKD,wBACC,wBAGD,iCACC,uCAEA,0CACC,wCAKH,mBACC,eACA,SACA,OACA,QACA,MACA,UAEA,UACA,kBAEA,wDACA,gCAEA,2BACC,UACA,mBC/CF,IACC,gBAGD,uBACC,aACA,sBACA,YACA,WAEA,kCACC,mBAIF,wBACC,gBAGD,0BACC,eACA,+BACA,gBACA,iBAEA,aACA,mBACA,uBAEA,gCACC,gCAGD,4DACC,iBACA,yBCpCF,oBACC,aACA,mBAGD,sBACC,gBAGD,qBACC,eACA,eACA,cACA,kBACA,yBAEA,2BACC,gBAGD,kDACC,8BACA,sBACA,iCACA,eACA,WAGD,+DACC,+BAGD,wDACC,sBACA,iCAIF,qBACC,kBACA,UACA,WACA,UACA,YACA,gBACA,sBACA","file":"styles.css"}

package/es/DateNavigator/index.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import "./index.css";
+import { getLocalizedString } from "@olenbetong/appframe-core";
 import clsx from "clsx";
 import { useState } from "react";
-import { getLocalizedString } from "@olenbetong/appframe-core";
 function getUiCulture() {
     return af?.userSession?.culture ?? "default";
 }
@@ -15,7 +15,7 @@ const formatter = new Intl.DateTimeFormat(getUiCulture(), {
     day: "numeric",
     month: "short",
     year: "numeric",
-    timeZone: "utc"
+    timeZone: "utc",
 });
 const today = new Date();
 const todayUtc = Date.UTC(today.getFullYear(), today.getMonth(), today.getDate());

package/es/Portal/index.js

@@ -3,7 +3,7 @@ import { useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 function useForceUpdate() {
     const [, setVal] = useState(false);
-    return () => setVal(val => !val);
+    return () => setVal((val) => !val);
 }
 export function Portal({ children, root, type = "div" }) {
     const forceUpdate = useForceUpdate();

package/es/index.d.ts

@@ -10,4 +10,3 @@ 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, usePersistedSetting, useSearchParamState } from "@olenbetong/appframe-react";

package/es/index.js

@@ -10,4 +10,3 @@ 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, usePersistedSetting, useSearchParamState } from "@olenbetong/appframe-react";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@olenbetong/synergi-react",
-	"version": "0.6.45",
+	"version": "0.7.0",
 	"description": "Standalone React component for SynergiWeb and Partner Portal",
 	"type": "module",
 	"types": "./es/index.d.ts",
@@ -68,8 +68,7 @@
 	},
 	"sideEffects": false,
 	"dependencies": {
-		"@olenbetong/appframe-core": "^2.4.3",
-		"@olenbetong/appframe-react": "^1.9.5",
+		"@olenbetong/appframe-core": "^2.5.0",
 		"clsx": "^1.2.1",
 		"localforage": "^1.10.0",
 		"mitt": "^3.0.0"
@@ -88,5 +87,5 @@
 	"devDependencies": {
 		"replace-in-files": "^3.0.0"
 	},
-	"gitHead": "1d17062e6d3a5bee1264d25572ec08ea2635f1ca"
+	"gitHead": "91865fe3ee3456c0bb01b23221502b2e53bb2850"
 }

package/src/Checkbox/index.scss

@@ -1,119 +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;
-  }
-
-  &.Ob-disabled {
-    --bg-color: rgba(150, 150, 150, 0.5);
-    --bg-color-hover: var(--bg-color);
-  }
+	--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;
+	}
+
+	&.Ob-disabled {
+		--bg-color: rgba(150, 150, 150, 0.5);
+		--bg-color-hover: var(--bg-color);
+	}
 }
 
 .ObCheckbox-box {
-  position: relative;
+	position: relative;
 
-  background: var(--bg-color);
-  transition: background 300ms ease;
+	background: var(--bg-color);
+	transition: background 300ms ease;
 
-  overflow: hidden;
+	overflow: hidden;
 
-  border-radius: calc(var(--check-width) / 15);
-  height: var(--check-width);
-  width: var(--check-width);
+	border-radius: calc(var(--check-width) / 15);
+	height: var(--check-width);
+	width: var(--check-width);
 
-  &:hover {
-    background: var(--bg-color-hover);
-  }
+	&:hover {
+		background: var(--bg-color-hover);
+	}
 }
 
 .ObCheckbox-label {
-  position: relative;
-  margin-bottom: 0;
-  overflow: hidden;
+	position: relative;
+	margin-bottom: 0;
+	overflow: hidden;
 
-  &:focus {
-    outline: none;
-  }
+	&: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);
+	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;
-  }
+	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;
+	margin-bottom: 0;
+	flex-grow: 1;
 }
 
 .ObCheckbox-input:checked:not(:disabled) + .ObCheckbox-label {
-  animation: animOn 800ms 1 forwards;
+	animation: animOn 800ms 1 forwards;
 }
 
 .ObCheckbox-input:checked:not(:disabled) + .ObCheckbox-label .ObCheckbox-box {
-  background: var(--bg-color-selected);
+	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;
+	transform: translate(-50%, -50%) scale(1);
+	transition-delay: 200ms;
+	opacity: 1;
 }
 
 .ObCheckbox-root.Ob-disabled .ObCheckbox-box {
-  cursor: not-allowed;
+	cursor: not-allowed;
 }
 
 @keyframes animOn {
-  40% {
-    transform: scaleY(0.4) scaleX(2);
-  }
+	40% {
+		transform: scaleY(0.4) scaleX(2);
+	}
 
-  50% {
-    transform: scaleY(1.2) scaleX(0.6);
-  }
+	50% {
+		transform: scaleY(1.2) scaleX(0.6);
+	}
 
-  60% {
-    transform: scaleY(0.8) scaleX(1.4);
-  }
+	60% {
+		transform: scaleY(0.8) scaleX(1.4);
+	}
 
-  70% {
-    transform: scaleY(1.1) scaleX(0.9);
-  }
+	70% {
+		transform: scaleY(1.1) scaleX(0.9);
+	}
 
-  100% {
-    transform: scaleY(1) scaleX(1);
-  }
+	100% {
+		transform: scaleY(1) scaleX(1);
+	}
 }

package/src/Checkbox/index.tsx

@@ -4,78 +4,78 @@ import clsx from "clsx";
 import { HTMLAttributes, forwardRef, useEffect, useId, useRef } from "react";
 
 function Mark(props: HTMLAttributes<SVGElement>) {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" {...props}>
-      <path d="M20.285 2L9 13.567 3.714 8.556 0 12.272 9 21 24 5.715z" fill="currentColor" />
-    </svg>
-  );
+	return (
+		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" {...props}>
+			<path d="M20.285 2L9 13.567 3.714 8.556 0 12.272 9 21 24 5.715z" fill="currentColor" />
+		</svg>
+	);
 }
 
 export type CheckboxProps = React.RefAttributes<HTMLInputElement> &
-  Omit<React.HTMLProps<HTMLInputElement>, "value"> & {
-    className?: string;
-    id?: string;
-    title?: string;
-    value?: boolean;
-  };
+	Omit<React.HTMLProps<HTMLInputElement>, "value"> & {
+		className?: string;
+		id?: string;
+		title?: string;
+		value?: boolean;
+	};
 
 export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(
-  { className, disabled = false, id, onChange = () => null, title, value, ...other }: CheckboxProps,
-  ref: React.ForwardedRef<HTMLInputElement>
+	{ className, disabled = false, id, onChange = () => null, title, value, ...other }: CheckboxProps,
+	ref: React.ForwardedRef<HTMLInputElement>
 ) {
-  const inputId = useId() + (id ?? "");
-  const input = useRef<HTMLInputElement>(null);
+	const inputId = useId() + (id ?? "");
+	const input = useRef<HTMLInputElement>(null);
 
-  useEffect(() => {
-    if (typeof ref === "function") {
-      ref(input.current);
-    } else if (ref) {
-      ref.current = input.current;
-    }
-  }, []);
+	useEffect(() => {
+		if (typeof ref === "function") {
+			ref(input.current);
+		} else if (ref) {
+			ref.current = input.current;
+		}
+	}, []);
 
-  function handleClick() {
-    let elem = input.current;
-    if (elem) {
-      elem.focus();
-      elem.click();
-    }
-  }
+	function handleClick() {
+		let elem = input.current;
+		if (elem) {
+			elem.focus();
+			elem.click();
+		}
+	}
 
-  function handleInputChanged(evt: any) {
-    if (!disabled) {
-      onChange(evt);
-    }
-  }
+	function handleInputChanged(evt: any) {
+		if (!disabled) {
+			onChange(evt);
+		}
+	}
 
-  function handleKeyDown(evt: any) {
-    if (evt.nativeEvent) {
-      const { nativeEvent } = evt;
+	function handleKeyDown(evt: any) {
+		if (evt.nativeEvent) {
+			const { nativeEvent } = evt;
 
-      if (nativeEvent.key === " ") {
-        nativeEvent.preventDefault();
-        input.current?.click();
-      }
-    }
-  }
+			if (nativeEvent.key === " ") {
+				nativeEvent.preventDefault();
+				input.current?.click();
+			}
+		}
+	}
 
-  return (
-    <div className={clsx("ObCheckbox-root", disabled && "Ob-disabled", className)} title={title}>
-      <input
-        className="ObCheckbox-input"
-        id={inputId}
-        type="checkbox"
-        onChange={handleInputChanged}
-        checked={value}
-        disabled={disabled}
-        ref={input}
-        {...other}
-      />
-      <label htmlFor={`#${inputId}`} className="ObCheckbox-label" onKeyDown={handleKeyDown} onClick={handleClick}>
-        <div className="ObCheckbox-box">
-          <Mark className="ObCheckbox-mark" />
-        </div>
-      </label>
-    </div>
-  );
+	return (
+		<div className={clsx("ObCheckbox-root", disabled && "Ob-disabled", className)} title={title}>
+			<input
+				className="ObCheckbox-input"
+				id={inputId}
+				type="checkbox"
+				onChange={handleInputChanged}
+				checked={value}
+				disabled={disabled}
+				ref={input}
+				{...other}
+			/>
+			<label htmlFor={`#${inputId}`} className="ObCheckbox-label" onKeyDown={handleKeyDown} onClick={handleClick}>
+				<div className="ObCheckbox-box">
+					<Mark className="ObCheckbox-mark" />
+				</div>
+			</label>
+		</div>
+	);
 });