@class101/cdn-ui-system 0.0.8 → 0.0.12

package/lib/Chip/InputChip/index.js

@@ -0,0 +1,10 @@
+import {
+  init_react_shim
+} from "../../../chunk-VIIHQGZ3.js";
+
+// libs/shared/ui-system/src/lib/Chip/InputChip/index.ts
+init_react_shim();
+import { InputChip } from "./InputChip.js";
+export {
+  InputChip
+};

package/lib/ConditionalWrapper/ConditionalWrapper.js

@@ -1,11 +1,11 @@
 import {
   React,
   init_react_shim
-} from "../../chunk-CPDZ2HQZ.js";
+} from "../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/ConditionalWrapper/ConditionalWrapper.tsx
 init_react_shim();
-var ConditionalWrapper = ({condition, WrapperComponent, children}) => {
+var ConditionalWrapper = ({ condition, WrapperComponent, children }) => {
   if (condition) {
     return /* @__PURE__ */ React.createElement(WrapperComponent, null, children);
   }

package/lib/ConditionalWrapper/index.js

@@ -1,10 +1,10 @@
 import {
   init_react_shim
-} from "../../chunk-CPDZ2HQZ.js";
+} from "../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/ConditionalWrapper/index.ts
 init_react_shim();
-import {ConditionalWrapper} from "./ConditionalWrapper.js";
+import { ConditionalWrapper } from "./ConditionalWrapper.js";
 export {
   ConditionalWrapper
 };

package/lib/ContentArea/ContentArea.js

@@ -0,0 +1,41 @@
+import {
+  useTheme
+} from "../../chunk-T7TBQTBE.js";
+import "../../chunk-LE44IRCL.js";
+import "../../chunk-CGEEKALF.js";
+import "../../chunk-J3Q2BPOW.js";
+import {
+  React,
+  __objRest,
+  __spreadValues,
+  init_react_shim
+} from "../../chunk-VIIHQGZ3.js";
+
+// libs/shared/ui-system/src/lib/ContentArea/ContentArea.tsx
+init_react_shim();
+import { propVariant, system } from "../../core/index.js";
+import { VStack } from "../Layout/VStack/index.js";
+var ContentArea = system()(propVariant({
+  prop: "full",
+  defaultValue: false,
+  responsive: true,
+  variants: {
+    true: {
+      width: "100%",
+      mx: 0
+    },
+    false: {
+      width: "calc(100% - 40px)",
+      mx: 20
+    }
+  }
+}))((_a) => {
+  var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
+  const { maxWidth } = useTheme();
+  return /* @__PURE__ */ React.createElement(VStack, __spreadValues({
+    maxWidth
+  }, props), children);
+});
+export {
+  ContentArea
+};

package/lib/ContentArea/index.js

@@ -0,0 +1,10 @@
+import {
+  init_react_shim
+} from "../../chunk-VIIHQGZ3.js";
+
+// libs/shared/ui-system/src/lib/ContentArea/index.ts
+init_react_shim();
+import { ContentArea } from "./ContentArea.js";
+export {
+  ContentArea
+};

package/lib/Divider/Divider.js

@@ -1,25 +1,28 @@
 import {
   isDefined
-} from "../../chunk-AY54FCVA.js";
+} from "../../chunk-MBYCGPJ2.js";
 import {
   React,
+  __objRest,
+  __spreadValues,
   init_react_shim
-} from "../../chunk-CPDZ2HQZ.js";
+} from "../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Divider/Divider.tsx
 init_react_shim();
-import {Box} from "../../private/Box/index.js";
-var Divider = ({color = "gray.300", direction, spacing, thickness = 1, ...props}) => {
+import { Box } from "../../private/Box/index.js";
+var Divider = (_a) => {
+  var _b = _a, { color = "gray.300", direction, spacing, thickness = 1 } = _b, props = __objRest(_b, ["color", "direction", "spacing", "thickness"]);
   const isHorizontal = direction === "horizontal";
   const isVertical = direction === "vertical";
-  return /* @__PURE__ */ React.createElement(Box, {
+  return /* @__PURE__ */ React.createElement(Box, __spreadValues({
+    flex: "none",
     bg: color,
-    width: isHorizontal ? "100%" : `${thickness}px`,
-    height: isHorizontal ? `${thickness}px` : "100%",
+    width: isHorizontal ? "100%" : thickness,
+    height: isHorizontal ? thickness : "100%",
     my: isHorizontal && isDefined(spacing) ? spacing : void 0,
-    mx: isVertical && isDefined(spacing) ? spacing : void 0,
-    ...props
-  });
+    mx: isVertical && isDefined(spacing) ? spacing : void 0
+  }, props));
 };
 export {
   Divider

package/lib/Divider/index.js

@@ -1,10 +1,10 @@
 import {
   init_react_shim
-} from "../../chunk-CPDZ2HQZ.js";
+} from "../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Divider/index.ts
 init_react_shim();
-import {Divider} from "./Divider.js";
+import { Divider } from "./Divider.js";
 export {
   Divider
 };

package/lib/Dot/Dot.js

@@ -0,0 +1,29 @@
+import {
+  React,
+  __objRest,
+  __spreadValues,
+  init_react_shim
+} from "../../chunk-VIIHQGZ3.js";
+
+// libs/shared/ui-system/src/lib/Dot/Dot.tsx
+init_react_shim();
+import { propVariant, system } from "../../core/index.js";
+import { Box } from "../../private/Box/index.js";
+var Dot = system()(propVariant({
+  prop: "size",
+  variants: (size) => ({
+    borderRadius: size / 2
+  }),
+  responsive: true
+}))((_a) => {
+  var _b = _a, { size, color } = _b, restProps = __objRest(_b, ["size", "color"]);
+  return /* @__PURE__ */ React.createElement(Box, __spreadValues({
+    width: size,
+    height: size,
+    backgroundColor: color
+  }, restProps));
+});
+Dot.forwardStyle = true;
+export {
+  Dot
+};

package/lib/Dot/index.js

@@ -0,0 +1,10 @@
+import {
+  init_react_shim
+} from "../../chunk-VIIHQGZ3.js";
+
+// libs/shared/ui-system/src/lib/Dot/index.ts
+init_react_shim();
+import { Dot } from "./Dot.js";
+export {
+  Dot
+};

package/lib/Drawer/Drawer.js

@@ -0,0 +1,57 @@
+import {
+  useLazyUnmount,
+  useLockBodyScroll
+} from "../../chunk-O6RRFC57.js";
+import "../../chunk-LN36XQS3.js";
+import {
+  React,
+  init_react_shim
+} from "../../chunk-VIIHQGZ3.js";
+
+// libs/shared/ui-system/src/lib/Drawer/Drawer.tsx
+init_react_shim();
+import { useEffect, useState } from "react";
+import { SlideAnimation } from "../Animation/SlideAnimation/index.js";
+import { Position } from "../Layout/Position/index.js";
+import { VStack } from "../Layout/VStack/index.js";
+import { Paper } from "../Paper/index.js";
+import { Portal } from "../Portal/index.js";
+var ANIMATION_TIME_MS = 500;
+var Drawer = ({ opened = false, renderOpener, anchor = "left", children }) => {
+  const [isOpened, setIsOpened] = useState(opened);
+  const isMounted = useLazyUnmount(isOpened, ANIMATION_TIME_MS);
+  useLockBodyScroll(isOpened);
+  useEffect(() => {
+    if (opened !== void 0) {
+      setIsOpened(opened);
+    }
+  }, [opened]);
+  const anchorPos = anchor === "right" ? "100%" : "-100%";
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, renderOpener == null ? void 0 : renderOpener({ openDrawer: () => setIsOpened(true) }), isMounted && /* @__PURE__ */ React.createElement(Portal, {
+    id: "drawer",
+    zIndex: 2
+  }, /* @__PURE__ */ React.createElement(SlideAnimation, {
+    duration: ANIMATION_TIME_MS,
+    from: isOpened ? [anchorPos, 0] : [0, 0],
+    to: isOpened ? [0, 0] : [anchorPos, 0],
+    fillMode: "forwards"
+  }, /* @__PURE__ */ React.createElement(Position, {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0
+  }, /* @__PURE__ */ React.createElement(Paper, {
+    kind: "background",
+    backgroundColor: "white"
+  }, /* @__PURE__ */ React.createElement(VStack, {
+    px: 20,
+    pb: 20,
+    width: "100%",
+    height: "100%",
+    overflow: "auto"
+  }, typeof children === "function" ? children({ closeDrawer: () => setIsOpened(false) }) : children))))));
+};
+export {
+  Drawer
+};

package/lib/Drawer/index.js

@@ -0,0 +1,10 @@
+import {
+  init_react_shim
+} from "../../chunk-VIIHQGZ3.js";
+
+// libs/shared/ui-system/src/lib/Drawer/index.ts
+init_react_shim();
+import { Drawer } from "./Drawer.js";
+export {
+  Drawer
+};

package/lib/Elevation/Elevation.js

@@ -1,20 +1,22 @@
 import {
   emotion_styled_browser_esm_default
-} from "../../chunk-KBR5BGSG.js";
+} from "../../chunk-SFQY5CLW.js";
 import {
   variant
-} from "../../chunk-7BJXCATJ.js";
-import "../../chunk-AXJOQSVO.js";
-import "../../chunk-UAWCTQGC.js";
-import "../../chunk-QN5Q5NTF.js";
+} from "../../chunk-XXMJSYNO.js";
+import "../../chunk-R4HM35UZ.js";
+import "../../chunk-T7TBQTBE.js";
+import "../../chunk-LE44IRCL.js";
+import "../../chunk-CGEEKALF.js";
+import "../../chunk-J3Q2BPOW.js";
 import {
   init_react_shim
-} from "../../chunk-CPDZ2HQZ.js";
+} from "../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Elevation/Elevation.tsx
 init_react_shim();
-import {ForwardStyle} from "../../private/ForwardStyle/index.js";
-import {skipForwardProps} from "../../core/index.js";
+import { ForwardStyle } from "../../private/ForwardStyle/index.js";
+import { skipForwardProps } from "../../core/index.js";
 var levelVariants = {
   1: {
     boxShadow: "0px 0px 1px rgba(0, 0, 0, 0.08), 0px 2px 6px rgba(0, 0, 0, 0.05)"
@@ -29,7 +31,7 @@ var levelVariants = {
     boxShadow: "0px 0px 1px rgba(0, 0, 0, 0.08), 0px 16px 30px 4px rgba(0, 0, 0, 0.1)"
   }
 };
-var Elevation = emotion_styled_browser_esm_default(ForwardStyle, skipForwardProps(["level"]))(variant({prop: "level", variants: levelVariants}));
+var Elevation = emotion_styled_browser_esm_default(ForwardStyle, skipForwardProps(["level"]))(variant({ prop: "level", variants: levelVariants }));
 Elevation.forwardStyle = true;
 export {
   Elevation

package/lib/Elevation/index.js

@@ -1,10 +1,10 @@
 import {
   init_react_shim
-} from "../../chunk-CPDZ2HQZ.js";
+} from "../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Elevation/index.ts
 init_react_shim();
-import {Elevation} from "./Elevation.js";
+import { Elevation } from "./Elevation.js";
 export {
   Elevation
 };

package/lib/Form/CardNumberField/CardNumberField.js

@@ -0,0 +1,28 @@
+import {
+  React,
+  __objRest,
+  __spreadValues,
+  init_react_shim
+} from "../../../chunk-VIIHQGZ3.js";
+
+// libs/shared/ui-system/src/lib/Form/CardNumberField/CardNumberField.tsx
+init_react_shim();
+import { forwardRef } from "react";
+import { CardNumberInput } from "../CardNumberInput/index.js";
+import { FormField } from "../FormField/index.js";
+var CardNumberField = forwardRef((_a, ref) => {
+  var _b = _a, { label, defaultMessage, successMessage, errorMessage } = _b, restProps = __objRest(_b, ["label", "defaultMessage", "successMessage", "errorMessage"]);
+  return /* @__PURE__ */ React.createElement(FormField, {
+    label,
+    defaultMessage,
+    successMessage,
+    errorMessage,
+    render: (state) => /* @__PURE__ */ React.createElement(CardNumberInput, __spreadValues({
+      ref,
+      state
+    }, restProps))
+  });
+});
+export {
+  CardNumberField
+};

package/lib/Form/CardNumberField/index.js

@@ -0,0 +1,10 @@
+import {
+  init_react_shim
+} from "../../../chunk-VIIHQGZ3.js";
+
+// libs/shared/ui-system/src/lib/Form/CardNumberField/index.ts
+init_react_shim();
+import { CardNumberField } from "./CardNumberField.js";
+export {
+  CardNumberField
+};

package/lib/Form/CardNumberInput/CardNumberInput.js

@@ -0,0 +1,50 @@
+import {
+  React,
+  __objRest,
+  __spreadValues,
+  init_react_shim
+} from "../../../chunk-VIIHQGZ3.js";
+
+// libs/shared/ui-system/src/lib/Form/CardNumberInput/CardNumberInput.tsx
+init_react_shim();
+import { useState, forwardRef } from "react";
+import { ZStack } from "../../Layout/ZStack/index.js";
+import { HiddenInput } from "../HiddenInput/index.js";
+import { TextInput } from "../TextInput/index.js";
+import { DEFAULT_SEPARATOR, MAX_CARD_NUMBER_LENGTH, ONLY_NUMBER_REGEX } from "./constants.js";
+import { formatCardNumber, parseCardNumber } from "./utils.js";
+var CardNumberInput = forwardRef((_a, ref) => {
+  var _b = _a, { inputRef, name, value, defaultValue, separator = DEFAULT_SEPARATOR, onChange, onKeyPress } = _b, restProps = __objRest(_b, ["inputRef", "name", "value", "defaultValue", "separator", "onChange", "onKeyPress"]);
+  var _a2;
+  const [cardNumber, setCardNumber] = useState((_a2 = value != null ? value : defaultValue) != null ? _a2 : "");
+  const handleChangeCardNumber = (inputValue) => {
+    const parsedCardNumber = parseCardNumber(inputValue);
+    setCardNumber(parsedCardNumber);
+    onChange == null ? void 0 : onChange(parsedCardNumber);
+  };
+  const handleKeyPressCardNumber = (event) => {
+    onKeyPress == null ? void 0 : onKeyPress(event);
+    if (!ONLY_NUMBER_REGEX.test(event.nativeEvent.key)) {
+      event.preventDefault();
+      return;
+    }
+    if (cardNumber.length >= MAX_CARD_NUMBER_LENGTH) {
+      event.preventDefault();
+    }
+  };
+  return /* @__PURE__ */ React.createElement(ZStack, null, /* @__PURE__ */ React.createElement(TextInput, __spreadValues({
+    ref: inputRef,
+    type: "number",
+    autoComplete: "cc-number",
+    value: formatCardNumber(cardNumber, separator),
+    onValueChange: handleChangeCardNumber,
+    onKeyPress: handleKeyPressCardNumber
+  }, restProps)), /* @__PURE__ */ React.createElement(HiddenInput, {
+    ref,
+    name,
+    value: cardNumber
+  }));
+});
+export {
+  CardNumberInput
+};

package/lib/Form/CardNumberInput/constants.js

@@ -0,0 +1,16 @@
+import {
+  init_react_shim
+} from "../../../chunk-VIIHQGZ3.js";
+
+// libs/shared/ui-system/src/lib/Form/CardNumberInput/constants.ts
+init_react_shim();
+var DEFAULT_SEPARATOR = "-";
+var MAX_CARD_NUMBER_LENGTH = 19;
+var NOT_NUMBER_REGEX = /[^0-9]/g;
+var ONLY_NUMBER_REGEX = /^\d*$/;
+export {
+  DEFAULT_SEPARATOR,
+  MAX_CARD_NUMBER_LENGTH,
+  NOT_NUMBER_REGEX,
+  ONLY_NUMBER_REGEX
+};

package/lib/Form/CardNumberInput/index.js

@@ -0,0 +1,10 @@
+import {
+  init_react_shim
+} from "../../../chunk-VIIHQGZ3.js";
+
+// libs/shared/ui-system/src/lib/Form/CardNumberInput/index.ts
+init_react_shim();
+import { CardNumberInput } from "./CardNumberInput.js";
+export {
+  CardNumberInput
+};

package/lib/Form/CardNumberInput/utils.js

@@ -0,0 +1,48 @@
+import {
+  init_react_shim
+} from "../../../chunk-VIIHQGZ3.js";
+
+// libs/shared/ui-system/src/lib/Form/CardNumberInput/utils.ts
+init_react_shim();
+import { MAX_CARD_NUMBER_LENGTH, NOT_NUMBER_REGEX } from "./constants.js";
+function formatCardNumber(cardNumber, separator) {
+  var _a;
+  if (!cardNumber) {
+    return "";
+  }
+  const formattedCardNumber = (_a = cardNumber.toString().replace(NOT_NUMBER_REGEX, "").slice(0, MAX_CARD_NUMBER_LENGTH).match(/.{1,4}/g)) == null ? void 0 : _a.join(separator != null ? separator : "");
+  return formattedCardNumber != null ? formattedCardNumber : "";
+}
+function parseCardNumber(formattedCardNumber, separator) {
+  if (!formattedCardNumber) {
+    return "";
+  }
+  const cardNumber = formattedCardNumber.toString().replace(NOT_NUMBER_REGEX, "");
+  if (separator) {
+    return cardNumber.replace(separator, "");
+  }
+  return cardNumber;
+}
+function mergeRefs(...refs) {
+  const filteredRefs = refs.filter(Boolean);
+  if (!filteredRefs.length) {
+    return null;
+  }
+  if (filteredRefs.length === 0) {
+    return filteredRefs[0];
+  }
+  return (instance) => {
+    for (const ref of filteredRefs) {
+      if (typeof ref === "function") {
+        ref(instance);
+      } else if (ref) {
+        ref.current = instance;
+      }
+    }
+  };
+}
+export {
+  formatCardNumber,
+  mergeRefs,
+  parseCardNumber
+};

package/lib/Form/CheckBox/CheckBox.js

@@ -1,22 +1,22 @@
-import {
-  emotion_styled_browser_esm_default
-} from "../../../chunk-KBR5BGSG.js";
-import "../../../chunk-UAWCTQGC.js";
-import "../../../chunk-QN5Q5NTF.js";
 import {
   React,
+  __objRest,
+  __spreadProps,
+  __spreadValues,
   init_react_shim
-} from "../../../chunk-CPDZ2HQZ.js";
+} from "../../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Form/CheckBox/CheckBox.tsx
 init_react_shim();
-import {forwardRef, useCallback, useEffect, useMemo, useState} from "react";
-import {Box} from "../../../private/Box/index.js";
-import {Background} from "../../Background/index.js";
-import {Icon} from "../../Icon/index.js";
-import {Center} from "../../Layout/Center/index.js";
-var CheckBox = forwardRef(({id, size, checked: checkedProp, onChange, indeterminate, disabled}, ref) => {
-  const [isChecked, setIsChecked] = useState(disabled ? false : checkedProp ?? false);
+import { forwardRef, useCallback, useEffect, useMemo, useState } from "react";
+import { Box } from "../../../private/Box/index.js";
+import { Icon } from "../../Icon/index.js";
+import { Center } from "../../Layout/Center/index.js";
+import { Paper } from "../../Paper/index.js";
+import { HiddenInput } from "../HiddenInput/index.js";
+var CheckBox = forwardRef((_a, ref) => {
+  var _b = _a, { id, size, checked: checkedProp, onChange, indeterminate, disabled } = _b, props = __objRest(_b, ["id", "size", "checked", "onChange", "indeterminate", "disabled"]);
+  const [isChecked, setIsChecked] = useState(disabled ? false : checkedProp != null ? checkedProp : false);
   const isMediumSize = size === "md";
   const boxSize = isMediumSize ? 24 : 18;
   const iconSize = boxSize - 6;
@@ -27,7 +27,7 @@ var CheckBox = forwardRef(({id, size, checked: checkedProp, onChange, indetermin
     if (checkedProp === void 0) {
       setIsChecked(!isChecked);
     }
-    onChange?.(e);
+    onChange == null ? void 0 : onChange(e);
   }, [checkedProp, disabled, isChecked, onChange]);
   const icon = useMemo(() => {
     if (!isChecked) {
@@ -52,24 +52,23 @@ var CheckBox = forwardRef(({id, size, checked: checkedProp, onChange, indetermin
   return /* @__PURE__ */ React.createElement(Box, {
     as: "label",
     display: "inline-block",
-    verticalAlign: "top"
-  }, /* @__PURE__ */ React.createElement(Background, {
-    color: isChecked ? "orange.500" : "gray.200",
-    borderRadius: "20%"
+    verticalAlign: "top",
+    width: "fit-content"
+  }, /* @__PURE__ */ React.createElement(Paper, {
+    kind: "background",
+    backgroundColor: isChecked ? "orange.500" : "gray.200",
+    borderRadiusLevel: 1
   }, /* @__PURE__ */ React.createElement(Center, {
     width: boxSize,
     height: boxSize,
     overflow: "hidden"
-  }, icon)), /* @__PURE__ */ React.createElement(HiddenInput, {
+  }, icon)), /* @__PURE__ */ React.createElement(HiddenInput, __spreadProps(__spreadValues({}, props), {
     id,
     type: "checkbox",
     onChange: handleInputChange,
     ref
-  }));
+  })));
 });
-var HiddenInput = emotion_styled_browser_esm_default.input`
-  display: none;
-`;
 export {
   CheckBox
 };

package/lib/Form/CheckBox/index.js

@@ -1,10 +1,10 @@
 import {
   init_react_shim
-} from "../../../chunk-CPDZ2HQZ.js";
+} from "../../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Form/CheckBox/index.ts
 init_react_shim();
-import {CheckBox} from "./CheckBox.js";
+import { CheckBox } from "./CheckBox.js";
 export {
   CheckBox
 };

package/lib/Form/CheckBoxField/CheckBoxField.js

@@ -1,23 +1,27 @@
 import {
   require_uuid
-} from "../../../chunk-IMWQE6G2.js";
+} from "../../../chunk-BDSNAS3L.js";
 import {
   React,
+  __objRest,
+  __spreadProps,
+  __spreadValues,
   __toModule,
   init_react_shim
-} from "../../../chunk-CPDZ2HQZ.js";
+} from "../../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Form/CheckBoxField/CheckBoxField.tsx
 init_react_shim();
 var import_uuid = __toModule(require_uuid());
-import {forwardRef, useCallback, useEffect, useRef, useState} from "react";
-import {HStack} from "../../Layout/HStack/index.js";
-import {CheckBox} from "../CheckBox/index.js";
-import {InlineTextLabel} from "../InlineTextLabel/index.js";
-var CheckBoxField = forwardRef(({label, description, ...props}, ref) => {
-  const {size, disabled, checked, onChange} = props;
+import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
+import { HStack } from "../../Layout/HStack/index.js";
+import { CheckBox } from "../CheckBox/index.js";
+import { InlineTextLabel } from "../InlineTextLabel/index.js";
+var CheckBoxField = forwardRef((_a, ref) => {
+  var _b = _a, { label, description } = _b, props = __objRest(_b, ["label", "description"]);
+  const { size, disabled, checked, onChange } = props;
   const isMediumSize = size === "md";
-  const [isChecked, setIsChecked] = useState(disabled ? false : checked ?? false);
+  const [isChecked, setIsChecked] = useState(disabled ? false : checked != null ? checked : false);
   const uniqueId = useRef((0, import_uuid.v4)());
   const handleCheckBoxChange = useCallback((e) => {
     if (disabled) {
@@ -26,7 +30,7 @@ var CheckBoxField = forwardRef(({label, description, ...props}, ref) => {
     if (checked === void 0) {
       setIsChecked(!isChecked);
     }
-    onChange?.(e);
+    onChange == null ? void 0 : onChange(e);
   }, [checked, disabled, isChecked, onChange]);
   useEffect(() => {
     if (checked !== void 0 && checked !== isChecked) {
@@ -36,19 +40,17 @@ var CheckBoxField = forwardRef(({label, description, ...props}, ref) => {
   return /* @__PURE__ */ React.createElement(HStack, {
     alignment: label && description ? "top" : "center",
     spacing: isMediumSize ? 10 : 8
-  }, /* @__PURE__ */ React.createElement(CheckBox, {
-    ...props,
+  }, /* @__PURE__ */ React.createElement(CheckBox, __spreadProps(__spreadValues({}, props), {
     id: uniqueId.current,
     checked: isChecked,
     onChange: handleCheckBoxChange,
     ref
-  }), /* @__PURE__ */ React.createElement(InlineTextLabel, {
+  })), /* @__PURE__ */ React.createElement(InlineTextLabel, {
     id: uniqueId.current,
     size,
     label,
     description,
-    disabled,
-    active: isChecked
+    disabled
   }));
 });
 export {

package/lib/Form/CheckBoxField/index.js

@@ -1,10 +1,10 @@
 import {
   init_react_shim
-} from "../../../chunk-CPDZ2HQZ.js";
+} from "../../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Form/CheckBoxField/index.ts
 init_react_shim();
-import {CheckBoxField} from "./CheckBoxField.js";
+import { CheckBoxField } from "./CheckBoxField.js";
 export {
   CheckBoxField
 };