@team-monolith/cds 1.115.2 → 1.115.4

package/dist/components/CheckboxInput.js

@@ -153,9 +153,9 @@ const Checkbox = React.forwardRef(function Checkbox(props, ref) {
             ? "partial"
             : "default";
     const clampedSize = Math.max(hitAreaSize, DEFAULT_CHECKBOX_SIZE);
-    return (_jsxs(CheckboxContainer, Object.assign({ className: className, spacer: spacer, disabled: disabled, size: clampedSize, ref: ref }, other, { children: [_jsx(StyledInput, Object.assign({ type: "checkbox" }, inputProps, { checked: checked, disabled: disabled, onClick: onClick, onChange: onChange, size: clampedSize })), _jsx(CheckboxIcon, { type: type, disabled: disabled })] })));
+    return (_jsxs(CheckboxContainer, Object.assign({ className: className, spacer: spacer, disabled: disabled, hitAreaSize: clampedSize, ref: ref }, other, { children: [_jsx(StyledInput, Object.assign({ type: "checkbox" }, inputProps, { checked: checked, disabled: disabled, onClick: onClick, onChange: onChange, size: clampedSize })), _jsx(CheckboxIcon, { type: type, disabled: disabled })] })));
 });
-const CheckboxContainer = styled.span(({ theme, spacer, disabled, size }) => css `
+const CheckboxContainer = styled.span(({ theme, spacer, disabled, hitAreaSize }) => css `
     display: flex;
     align-items: center;
     justify-content: center;
@@ -170,16 +170,15 @@ const CheckboxContainer = styled.span(({ theme, spacer, disabled, size }) => css
       pointer-events: none;
     }
 
-    ${size > DEFAULT_CHECKBOX_SIZE &&
+    ${hitAreaSize > DEFAULT_CHECKBOX_SIZE &&
     css `
       &::before {
         content: "";
         position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        width: ${size}px;
-        height: ${size}px;
+        top: ${(DEFAULT_CHECKBOX_SIZE - hitAreaSize) / 2}px;
+        left: ${(DEFAULT_CHECKBOX_SIZE - hitAreaSize) / 2}px;
+        width: ${hitAreaSize}px;
+        height: ${hitAreaSize}px;
         border-radius: 50%;
         background: ${theme.color.background.neutralAltActive};
         opacity: 0;
@@ -197,9 +196,8 @@ const CheckboxContainer = styled.span(({ theme, spacer, disabled, size }) => css
 const StyledInput = styled.input(({ size }) => css `
     cursor: inherit;
     position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+    top: ${(DEFAULT_CHECKBOX_SIZE - size) / 2}px;
+    left: ${(DEFAULT_CHECKBOX_SIZE - size) / 2}px;
     opacity: 0;
     width: ${size}px;
     height: ${size}px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@team-monolith/cds",
-  "version": "1.115.2",
+  "version": "1.115.4",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,