@vitality-ds/components 5.7.0-alpha.8 → 6.0.0-alpha.1

package/dist/Form/CheckboxList/index.spec.js

@@ -2,14 +2,10 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _enzyme = require("enzyme");
-var _react = _interopRequireDefault(require("react"));
-var _empties = require("../../helpers/logic/empties");
-var _Checkbox = _interopRequireDefault(require("../../Input/Checkbox"));
-var _useCheckedItems = _interopRequireDefault(require("./hooks/useCheckedItems"));
-var _useHandleChange = _interopRequireDefault(require("./hooks/useHandleChange"));
+var _react = require("@testing-library/react");
+var _react2 = _interopRequireDefault(require("react"));
 var _index = _interopRequireDefault(require("./index"));
-var _styled = require("./styled");
+var _jsxRuntime = require("react/jsx-runtime");
 var defaultProps = {
   onChange: jest.fn(),
   value: [],
@@ -17,136 +13,62 @@ var defaultProps = {
   options: [{
     label: "foo",
     value: "foo",
-    id: "foo",
-    name: "foo",
-    onChange: function onChange() {
-      return "";
-    },
-    checked: false
+    id: "foo"
   }, {
     label: "bar",
     value: "bar",
-    id: "bar",
-    name: "bar",
-    onChange: function onChange() {
-      return "";
-    },
-    checked: false
+    id: "bar"
   }]
 };
-var mount = function mount() {
-  var customProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _empties.EMPTY_OBJ;
-  return (0, _enzyme.shallow)(/*#__PURE__*/_react["default"].createElement(_index["default"], (0, _extends2["default"])({}, defaultProps, customProps)));
-};
-var mockUseCheckedItems = {
-  checkedItems: ["foo"],
-  setCheckedItems: jest.fn()
-};
-jest.mock("./hooks/useCheckedItems", function () {
-  return jest.fn(function () {
-    return mockUseCheckedItems;
-  });
-});
-jest.mock("./hooks/useHandleChange", function () {
-  return jest.fn(function () {
-    return jest.fn();
-  });
-});
-describe("CheckboxList", function () {
-  it("should be defined", function () {
-    expect(_index["default"]).toBeDefined();
-  });
-  it("should call the correct hooks", function () {
-    mount();
-    expect(_useCheckedItems["default"]).toHaveBeenCalledWith(defaultProps.value);
-    expect(_useHandleChange["default"]).toHaveBeenCalledWith(mockUseCheckedItems.checkedItems, mockUseCheckedItems.setCheckedItems);
+describe("<CheckboxList />", function () {
+  it("renders a group container with role='group'", function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], (0, _extends2["default"])({}, defaultProps)));
+    expect(_react.screen.getByRole("group")).toBeTruthy();
   });
-  it("should render correctly", function () {
-    var wrapper = mount();
-    var baseCheckboxListContainer = wrapper.find(_styled.BaseCheckboxListContainer);
-    expect(baseCheckboxListContainer).toHaveLength(1);
-    expect(baseCheckboxListContainer.prop("role")).toEqual("group");
-    var checkbox = wrapper.find(_Checkbox["default"]);
-    expect(checkbox).toHaveLength(2);
-    expect(checkbox.at(0).prop("label")).toEqual(defaultProps.options[0].label);
-    expect(checkbox.at(0).prop("value")).toEqual(defaultProps.options[0].value);
-    expect(checkbox.at(0).prop("name")).toEqual(defaultProps.options[0].value);
-    expect(checkbox.at(0).prop("checked")).toEqual(true);
-    expect(checkbox.at(0).prop("disabled")).toBeFalsy();
-    expect(checkbox.at(1).prop("label")).toEqual(defaultProps.options[1].label);
-    expect(checkbox.at(1).prop("value")).toEqual(defaultProps.options[1].value);
-    expect(checkbox.at(1).prop("name")).toEqual(defaultProps.options[1].value);
-    expect(checkbox.at(1).prop("checked")).toEqual(false);
-    expect(checkbox.at(1).prop("disabled")).toBeFalsy();
+  it("renders one checkbox per option", function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], (0, _extends2["default"])({}, defaultProps)));
+    expect(_react.screen.getAllByRole("checkbox")).toHaveLength(2);
   });
-  it("should disable all checkboxes when disabled prop is true", function () {
-    var wrapper = mount({
+  it("disables every checkbox when the list-level `disabled` prop is true", function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], (0, _extends2["default"])({}, defaultProps, {
       disabled: true
+    })));
+    var boxes = _react.screen.getAllByRole("checkbox");
+    expect(boxes).toHaveLength(2);
+    boxes.forEach(function (box) {
+      return expect(box.disabled).toBe(true);
     });
-    var checkbox = wrapper.find(_Checkbox["default"]);
-    expect(checkbox).toHaveLength(2);
-    expect(checkbox.at(0).prop("disabled")).toBe(true);
-    expect(checkbox.at(1).prop("disabled")).toBe(true);
   });
-  it("should disable individual checkboxes via options", function () {
-    var customOptions = [{
-      label: "foo",
-      value: "foo",
-      id: "foo",
-      name: "foo",
-      onChange: function onChange() {
-        return "";
-      },
-      checked: false,
-      disabled: true
-    }, {
-      label: "bar",
-      value: "bar",
-      id: "bar",
-      name: "bar",
-      onChange: function onChange() {
-        return "";
-      },
-      checked: false,
-      disabled: false
-    }];
-    var wrapper = mount({
-      options: customOptions
-    });
-    var checkbox = wrapper.find(_Checkbox["default"]);
-    expect(checkbox).toHaveLength(2);
-    expect(checkbox.at(0).prop("disabled")).toBe(true);
-    expect(checkbox.at(1).prop("disabled")).toBe(false);
+  it("disables only the matching checkbox when an individual option.disabled is set", function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], (0, _extends2["default"])({}, defaultProps, {
+      options: [{
+        label: "foo",
+        value: "foo",
+        id: "foo",
+        disabled: true
+      }, {
+        label: "bar",
+        value: "bar",
+        id: "bar",
+        disabled: false
+      }]
+    })));
+    var boxes = _react.screen.getAllByRole("checkbox");
+    expect(boxes[0].disabled).toBe(true);
+    expect(boxes[1].disabled).toBe(false);
   });
-  it("should disable all checkboxes when both disabled prop and individual option disabled are set", function () {
-    var customOptions = [{
-      label: "foo",
-      value: "foo",
-      id: "foo",
-      name: "foo",
-      onChange: function onChange() {
-        return "";
-      },
-      checked: false,
-      disabled: true
-    }, {
-      label: "bar",
-      value: "bar",
-      id: "bar",
-      name: "bar",
-      onChange: function onChange() {
-        return "";
-      },
-      checked: false,
-      disabled: false
-    }];
-    var wrapper = mount({
-      disabled: true,
-      options: customOptions
-    });
-    var checkbox = wrapper.find(_Checkbox["default"]);
-    expect(checkbox).toHaveLength(2);
-    expect(checkbox.at(0).prop("disabled")).toBe(true);
-    expect(checkbox.at(1).prop("disabled")).toBe(true);
+  it("reflects the `value` prop in each checkbox's aria-checked state", function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], (0, _extends2["default"])({}, defaultProps, {
+      value: ["foo"]
+    })));
+    var boxes = _react.screen.getAllByRole("checkbox");
+    expect(boxes[0].getAttribute("aria-checked")).toBe("true");
+    expect(boxes[1].getAttribute("aria-checked")).toBe("false");
   });
+
+  // Note: the `name` prop is consumed by Radix's Checkbox.Root, which only
+  // emits a hidden <input name="..."> when inside a <form>. We don't assert
+  // on `name` in DOM here because the rendered button doesn't carry it; the
+  // form-submission path is the right place to verify (separate integration
+  // test).
 });

package/dist/Form/FormField/components/FormFieldLabel/index.js

@@ -5,15 +5,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _Label = _interopRequireDefault(require("../../../Label"));
 var _Legend = _interopRequireDefault(require("../../../Legend"));
 var _constants = require("./constants");
+var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["fieldType"];
 function FormFieldLabel(_ref) {
   var fieldType = _ref.fieldType,
     restProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  return _constants.FIELD_TYPES_USING_LEGEND.includes(fieldType) ? /*#__PURE__*/_react["default"].createElement(_Legend["default"], restProps) : /*#__PURE__*/_react["default"].createElement(_Label["default"], restProps);
+  return _constants.FIELD_TYPES_USING_LEGEND.includes(fieldType) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Legend["default"], (0, _extends2["default"])({}, restProps)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Label["default"], (0, _extends2["default"])({}, restProps));
 }
 var _default = exports["default"] = FormFieldLabel;

package/dist/Form/FormField/components/FormFieldLabel/index.spec.js

@@ -5,9 +5,10 @@ var _react = require("@testing-library/react");
 var _react2 = _interopRequireDefault(require("react"));
 var _logic = require("../../logic");
 var _index = _interopRequireDefault(require("./index"));
+var _jsxRuntime = require("react/jsx-runtime");
 describe("getInputComponent", function () {
   it("should return a <label> component when no fieldType is provided", function () {
-    var _render = (0, _react.render)(/*#__PURE__*/_react2["default"].createElement(_index["default"], {
+    var _render = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
         id: (0, _logic.getLabelledById)("foo"),
         fieldType: "text",
         content: "Foo",
@@ -17,7 +18,7 @@ describe("getInputComponent", function () {
     expect(container.children[0].tagName).toEqual("LABEL");
   });
   it("should return a <label> component when no fieldType `text` is provided", function () {
-    var _render2 = (0, _react.render)(/*#__PURE__*/_react2["default"].createElement(_index["default"], {
+    var _render2 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
         id: (0, _logic.getLabelledById)("foo"),
         fieldType: "text",
         content: "Foo",
@@ -27,7 +28,7 @@ describe("getInputComponent", function () {
     expect(container.children[0].tagName).toEqual("LABEL");
   });
   it("should return a <legend> element when passed a checkbox type", function () {
-    var _render3 = (0, _react.render)(/*#__PURE__*/_react2["default"].createElement(_index["default"], {
+    var _render3 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
         id: (0, _logic.getLabelledById)("foo"),
         fieldType: "checkbox",
         content: "Foo",

package/dist/Form/FormField/index.js

@@ -18,6 +18,7 @@ var _Fieldset = _interopRequireDefault(require("./components/Fieldset"));
 var _FormFieldLabel = _interopRequireDefault(require("./components/FormFieldLabel"));
 var _logic = require("./logic");
 var _styled = require("./styled");
+var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["label", "helperMessage", "hasError", "inputProps", "onChange", "value", "id", "type", "required", "infoTooltipContent"];
 function FormField(_ref) {
   var label = _ref.label,
@@ -36,42 +37,53 @@ function FormField(_ref) {
   var ariaDescribedById = (0, _logic.getDescribedById)(id);
   var ariaErrorId = (0, _logic.getErrorMessageId)(id);
   var ariaLabelledById = (0, _logic.getLabelledById)(id);
-  return /*#__PURE__*/_react["default"].createElement(_Fieldset["default"], restProps, /*#__PURE__*/_react["default"].createElement(_Stack["default"], {
-    spacing: "sm",
-    direction: "horizontal",
-    align: "center"
-  }, /*#__PURE__*/_react["default"].createElement(_Box["default"], {
-    maxWidth: infoTooltipContent ? "90%" : "100%"
-  }, /*#__PURE__*/_react["default"].createElement(_FormFieldLabel["default"], {
-    fieldType: type,
-    content: label,
-    htmlFor: id,
-    id: ariaLabelledById,
-    required: required,
-    hasError: hasError
-  })), infoTooltipContent && /*#__PURE__*/_react["default"].createElement(_Box["default"], {
-    maxWidth: "10%",
-    minWidth: "16px" // this is the same width as the icon size="sm"
-    ,
-    minHeight: _system.theme.fontSizes.caption.value
-  }, /*#__PURE__*/_react["default"].createElement(_styled.IconWrapper, null, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
-    content: infoTooltipContent
-  }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_lucideReact.Info, {
-    color: "currentColor",
-    size: "0.875rem"
-  })))))), /*#__PURE__*/_react["default"].createElement(Component, (0, _extends2["default"])({
-    onChange: onChange,
-    value: value,
-    id: id,
-    "aria-labelledby": ariaLabelledById,
-    "aria-describedby": ariaDescribedById,
-    "aria-required": required,
-    "aria-errormessage": ariaErrorId,
-    required: required,
-    hasError: hasError
-  }, inputProps)), helperMessage && /*#__PURE__*/_react["default"].createElement(_HelperMessage["default"], {
-    hasError: hasError,
-    id: hasError ? ariaErrorId : ariaDescribedById
-  }, helperMessage));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Fieldset["default"], (0, _extends2["default"])({}, restProps, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Stack["default"], {
+      spacing: "sm",
+      direction: "horizontal",
+      align: "center",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box["default"], {
+        maxWidth: infoTooltipContent ? "90%" : "100%",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormFieldLabel["default"], {
+          fieldType: type,
+          content: label,
+          htmlFor: id,
+          id: ariaLabelledById,
+          required: required,
+          hasError: hasError
+        })
+      }), infoTooltipContent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box["default"], {
+        maxWidth: "10%",
+        minWidth: "16px" // this is the same width as the icon size="sm"
+        ,
+        minHeight: _system.theme.fontSizes.caption.value,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styled.IconWrapper, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip["default"], {
+            content: infoTooltipContent,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_lucideReact.Info, {
+                color: "currentColor",
+                size: "0.875rem"
+              })
+            })
+          })
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, (0, _extends2["default"])({
+      onChange: onChange,
+      value: value,
+      id: id,
+      "aria-labelledby": ariaLabelledById,
+      "aria-describedby": ariaDescribedById,
+      "aria-required": required,
+      "aria-errormessage": ariaErrorId,
+      required: required,
+      hasError: hasError
+    }, inputProps)), helperMessage && /*#__PURE__*/(0, _jsxRuntime.jsx)(_HelperMessage["default"], {
+      hasError: hasError,
+      id: hasError ? ariaErrorId : ariaDescribedById,
+      children: helperMessage
+    })]
+  }));
 }
 var _default = exports["default"] = FormField;

package/dist/Form/FormField/index.spec.js

@@ -5,6 +5,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = require("@testing-library/react");
 var _react2 = _interopRequireDefault(require("react"));
 var _index = _interopRequireDefault(require("./index"));
+var _jsxRuntime = require("react/jsx-runtime");
 var mockProps = {
   id: "id",
   label: "label",
@@ -18,7 +19,7 @@ var mockProps = {
 };
 describe("<FormField />", function () {
   it("`id` and `for` attributes match on input and label given the `text` type", function () {
-    var _render = (0, _react.render)(/*#__PURE__*/_react2["default"].createElement(_index["default"], (0, _extends2["default"])({
+    var _render = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], (0, _extends2["default"])({
         type: "text"
       }, mockProps))),
       container = _render.container;

package/dist/Form/HelperMessage/index.js

@@ -9,23 +9,26 @@ var _lucideReact = require("lucide-react");
 var _react = _interopRequireDefault(require("react"));
 var _Stack = _interopRequireDefault(require("../../Stack"));
 var _styled = require("./styled");
+var _jsxRuntime = require("react/jsx-runtime");
 var HelperMessage = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardedRef) {
   var hasError = _ref.hasError,
     id = _ref.id,
     children = _ref.children;
-  return /*#__PURE__*/_react["default"].createElement(_styled.BaseHelperMessage, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styled.BaseHelperMessage, {
     hasError: hasError,
     id: id,
     ref: forwardedRef,
-    "aria-live": hasError ? "assertive" : "off"
-  }, hasError ? /*#__PURE__*/_react["default"].createElement(_Stack["default"], {
-    direction: "horizontal",
-    spacing: "xs",
-    align: "center"
-  }, hasError && /*#__PURE__*/_react["default"].createElement(_lucideReact.CircleAlert, {
-    size: "0.875rem",
-    color: "var(--vitality-colors-critical11)"
-  }), children) : children);
+    "aria-live": hasError ? "assertive" : "off",
+    children: hasError ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Stack["default"], {
+      direction: "horizontal",
+      spacing: "xs",
+      align: "center",
+      children: [hasError && /*#__PURE__*/(0, _jsxRuntime.jsx)(_lucideReact.CircleAlert, {
+        size: "0.875rem",
+        color: "var(--vitality-colors-critical11)"
+      }), children]
+    }) : children
+  });
 });
 HelperMessage.displayName = "HelperMessage";
 var _default = exports["default"] = HelperMessage;

package/dist/Form/Label/index.js

@@ -7,17 +7,20 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _styled = require("./styled");
+var _jsxRuntime = require("react/jsx-runtime");
 function Label(_ref) {
   var content = _ref.content,
     htmlFor = _ref.htmlFor,
     required = _ref.required,
     hasError = _ref.hasError,
     id = _ref.id;
-  return /*#__PURE__*/_react["default"].createElement(_styled.BaseLabel, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styled.BaseLabel, {
     htmlFor: htmlFor,
-    id: id
-  }, content, required && /*#__PURE__*/_react["default"].createElement(_styled.BaseLabelRequired, {
-    hasError: hasError
-  }, "*"));
+    id: id,
+    children: [content, required && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styled.BaseLabelRequired, {
+      hasError: hasError,
+      children: "*"
+    })]
+  });
 }
 var _default = exports["default"] = Label;

package/dist/Form/Legend/index.js

@@ -7,11 +7,13 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _styled = require("./styled");
+var _jsxRuntime = require("react/jsx-runtime");
 function Legend(_ref) {
   var content = _ref.content,
     id = _ref.id;
-  return /*#__PURE__*/_react["default"].createElement(_styled.BaseLegend, {
-    id: id
-  }, content);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styled.BaseLegend, {
+    id: id,
+    children: content
+  });
 }
 var _default = exports["default"] = Legend;

package/dist/IconButton/index.js

@@ -11,6 +11,7 @@ var _lucideReact = require("lucide-react");
 var _react = _interopRequireDefault(require("react"));
 var _Tooltip = _interopRequireDefault(require("../Tooltip"));
 var _styled = require("./styled");
+var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["onClick", "children", "disabled", "isSelected", "icon", "size", "href", "tooltipContent"];
 var IconButton = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardedRef) {
   var onClick = _ref.onClick,
@@ -18,24 +19,27 @@ var IconButton = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwa
     disabled = _ref.disabled,
     isSelected = _ref.isSelected,
     _ref$icon = _ref.icon,
-    icon = _ref$icon === void 0 ? /*#__PURE__*/_react["default"].createElement(_lucideReact.Plus, null) : _ref$icon,
+    icon = _ref$icon === void 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_lucideReact.Plus, {}) : _ref$icon,
     size = _ref.size,
     href = _ref.href,
     tooltipContent = _ref.tooltipContent,
     restProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var IconButtonComponent = href ? _styled.BaseIconButtonLink : _styled.BaseIconButton;
-  return /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
-    content: tooltipContent
-  }, /*#__PURE__*/_react["default"].createElement(IconButtonComponent, (0, _extends2["default"])({
-    ref: forwardedRef,
-    "aria-label": tooltipContent,
-    selected: isSelected,
-    onClick: onClick,
-    disabled: disabled,
-    size: size,
-    href: href,
-    type: "button"
-  }, restProps), icon));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip["default"], {
+    content: tooltipContent,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButtonComponent, (0, _extends2["default"])({
+      ref: forwardedRef,
+      "aria-label": tooltipContent,
+      selected: isSelected,
+      onClick: onClick,
+      disabled: disabled,
+      size: size,
+      href: href,
+      type: "button"
+    }, restProps, {
+      children: icon
+    }))
+  });
 });
 IconButton.displayName = "IconButton";
 var _default = exports["default"] = IconButton;

package/dist/IconButton/styles/BaseIconButton.styles.js

@@ -30,6 +30,7 @@ var _default = exports["default"] = (0, _system.css)({
   alignSelf: "center",
   svg: {
     pointerEvents: "none",
+    color: "$$iconColor",
     verticalAlign: "middle",
     width: "1rem",
     height: "1rem",

package/dist/Input/Checkbox/components/BaseCheckbox/index.js

@@ -11,6 +11,7 @@ var _react = _interopRequireDefault(require("react"));
 var _CheckedIcon = _interopRequireDefault(require("../CheckedIcon"));
 var _IndeterminateIcon = _interopRequireDefault(require("../IndeterminateIcon"));
 var _styled = require("./styled");
+var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["checked", "disabled", "id", "forwardedRef", "name", "onCheckedChange"];
 function BaseCheckbox(_ref) {
   var checked = _ref.checked,
@@ -20,12 +21,16 @@ function BaseCheckbox(_ref) {
     name = _ref.name,
     onCheckedChange = _ref.onCheckedChange,
     props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  return /*#__PURE__*/_react["default"].createElement(_styled.BaseCheckboxRoot, (0, _extends2["default"])({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styled.BaseCheckboxRoot, (0, _extends2["default"])({
     checked: checked,
     disabled: disabled,
     id: id,
     ref: forwardedRef,
     name: name,
     onCheckedChange: onCheckedChange
-  }, props), /*#__PURE__*/_react["default"].createElement(_styled.BaseCheckboxIndicator, null, checked === "indeterminate" && /*#__PURE__*/_react["default"].createElement(_IndeterminateIcon["default"], null), checked === true && /*#__PURE__*/_react["default"].createElement(_CheckedIcon["default"], null)));
+  }, props, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styled.BaseCheckboxIndicator, {
+      children: [checked === "indeterminate" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_IndeterminateIcon["default"], {}), checked === true && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckedIcon["default"], {})]
+    })
+  }));
 }

package/dist/Input/Checkbox/components/CheckedIcon.js

@@ -6,16 +6,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
 function CheckedIcon() {
-  return /*#__PURE__*/_react["default"].createElement("svg", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "12",
     height: "12",
     fill: "none",
-    viewBox: "0 0 12 12"
-  }, /*#__PURE__*/_react["default"].createElement("path", {
-    fill: "currentColor",
-    d: "M0 6.646l4.286 4.285L12 3.217 10.791 2 4.286 8.506 1.209 5.437 0 6.646z"
-  }));
+    viewBox: "0 0 12 12",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      fill: "currentColor",
+      d: "M0 6.646l4.286 4.285L12 3.217 10.791 2 4.286 8.506 1.209 5.437 0 6.646z"
+    })
+  });
 }
 var _default = exports["default"] = CheckedIcon;

package/dist/Input/Checkbox/components/IndeterminateIcon.js

@@ -6,18 +6,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
 function IndeterminateIcon() {
-  return /*#__PURE__*/_react["default"].createElement("svg", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "12",
     height: "12",
     fill: "none",
-    viewBox: "0 0 12 12"
-  }, /*#__PURE__*/_react["default"].createElement("path", {
-    fill: "currentColor",
-    fillRule: "evenodd",
-    d: "M11 7H1V5h10v2z",
-    clipRule: "evenodd"
-  }));
+    viewBox: "0 0 12 12",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      fill: "currentColor",
+      fillRule: "evenodd",
+      d: "M11 7H1V5h10v2z",
+      clipRule: "evenodd"
+    })
+  });
 }
 var _default = exports["default"] = IndeterminateIcon;

package/dist/Input/Checkbox/index.js

@@ -10,6 +10,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireDefault(require("react"));
 var _BaseCheckbox = _interopRequireDefault(require("./components/BaseCheckbox"));
 var _styled = require("./styled");
+var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["css", "className", "style", "asChild", "checked", "disabled", "label", "id", "name", "children", "onChange"];
 var Checkbox = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardedRef) {
   var css = _ref.css,
@@ -24,17 +25,20 @@ var Checkbox = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forward
     children = _ref.children,
     onChange = _ref.onChange,
     props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  return /*#__PURE__*/_react["default"].createElement(_styled.BaseCheckboxContainer, null, /*#__PURE__*/_react["default"].createElement(_BaseCheckbox["default"], (0, _extends2["default"])({
-    checked: checked,
-    disabled: disabled,
-    id: id,
-    forwardedRef: forwardedRef,
-    name: name,
-    onCheckedChange: onChange
-  }, props)), label && /*#__PURE__*/_react["default"].createElement(_styled.BaseCheckboxText, {
-    disabled: disabled,
-    htmlFor: id
-  }, label));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styled.BaseCheckboxContainer, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_BaseCheckbox["default"], (0, _extends2["default"])({
+      checked: checked,
+      disabled: disabled,
+      id: id,
+      forwardedRef: forwardedRef,
+      name: name,
+      onCheckedChange: onChange
+    }, props)), label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styled.BaseCheckboxText, {
+      disabled: disabled,
+      htmlFor: id,
+      children: label
+    })]
+  });
 });
 Checkbox.displayName = "Checkbox";
 var _default = exports["default"] = Checkbox;