@festo-ui/react 9.0.0-dev.711 → 9.0.0-dev.713

package/node/lib/components/tab/Tabs.js

@@ -0,0 +1,240 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireWildcard(require("react"));
+var _useForkRef = _interopRequireDefault(require("../../helper/useForkRef.js"));
+var _useTabScroll = _interopRequireDefault(require("./useTabScroll.js"));
+var _IconWrapper = _interopRequireDefault(require("../icon-wrapper/IconWrapper.js"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// legacy: recommended for desktop only applications
+// responsive: desktop, tablet, mobile with scrollable tabs
+
+let nextId = 0;
+const Tabs = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    config,
+    children,
+    className,
+    onChange,
+    viewType = "responsive",
+    showDivider = false,
+    ...props
+  } = _ref;
+  const [useCompactDensity, setCompactDensity] = (0, _react.useState)(true);
+  const componentId = (0, _react.useRef)(`tabs-${++nextId}`);
+  const elRef = (0, _react.useRef)(null);
+  const combinedRef = (0, _useForkRef.default)(ref, elRef);
+  const scrollContent = (0, _react.useRef)(null);
+  const scrollArea = (0, _react.useRef)(null);
+  const observer = (0, _react.useRef)(null);
+  let activeId = "";
+  _react.default.Children.forEach(children, (element, i) => {
+    if (/*#__PURE__*/_react.default.isValidElement(element)) {
+      if (activeId === "") {
+        activeId = `${componentId.current}-tab-panel-${i}`;
+      } else if (element.props.active) {
+        activeId = `${componentId.current}-tab-panel-${i}`;
+      }
+    }
+  });
+  const [currentId, setId] = (0, _react.useState)(activeId);
+  const innerChildren = _react.default.Children.map(children, (element, i) => {
+    if (/*#__PURE__*/(0, _react.isValidElement)(element)) {
+      const newId = `${componentId.current}-tab-panel-${i}`;
+      return /*#__PURE__*/_react.default.cloneElement(element, {
+        isVisible: newId === currentId,
+        active: newId === currentId,
+        id: newId,
+        tabId: `${componentId.current}-tab-${i}`,
+        ...element.props
+      });
+    }
+    return undefined;
+  });
+  const [handleTabScroll, classes, style] = (0, _useTabScroll.default)(innerChildren?.length ?? 0, componentId.current, {
+    elRef,
+    scrollContent,
+    scrollArea
+  });
+  (0, _react.useEffect)(() => {
+    const {
+      current
+    } = scrollArea;
+    if (current) {
+      const initialWidth = current.offsetWidth;
+      if (initialWidth > 768) {
+        setCompactDensity(false);
+      }
+      observer.current = new ResizeObserver(() => {
+        const width = current.offsetWidth;
+        if (width > 768 && useCompactDensity) {
+          setCompactDensity(false);
+        } else if (width <= 768 && !useCompactDensity) {
+          setCompactDensity(true);
+        }
+      });
+      if (current) {
+        observer.current.observe(current);
+      }
+    }
+    return () => {
+      if (current && observer && observer.current) {
+        observer.current.unobserve(current);
+      }
+    };
+  }, [useCompactDensity]);
+  const showTabPane = id => {
+    if (id === undefined || id === null) {
+      return;
+    }
+    if (onChange) {
+      onChange({
+        previous: currentId,
+        current: id
+      });
+    }
+    setId(id);
+  };
+  function handleClick(e, index, id) {
+    handleTabScroll(e, index);
+    if (id !== undefined) {
+      showTabPane(id);
+    }
+  }
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+      children: viewType === "legacy" ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _classnames.default)("fwe-legacy-tabs", className),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+          role: "tablist",
+          className: (0, _classnames.default)("fwe-legacy-tab-bar", {
+            "fwe-legacy-tab-bar-full-width": config?.tabBar?.fullWidth
+          }, {
+            "fwe-legacy-tab-items-equal-width": config?.tabItems?.appearance === "equal"
+          }, {
+            "fwe-legacy-tab-items-fill": config?.tabItems?.appearance === "fill"
+          }),
+          children: innerChildren && innerChildren.map((child, i) => {
+            const {
+              active,
+              icon,
+              name,
+              id,
+              tabId
+            } = child.props;
+            return (
+              /*#__PURE__*/
+              // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
+              (0, _jsxRuntime.jsx)("li", {
+                className: (0, _classnames.default)("fwe-legacy-tab-item", {
+                  "fwe-active": active
+                }),
+                onClick: () => showTabPane(id),
+                children: icon ?
+                /*#__PURE__*/
+                // eslint-disable-next-line jsx-a11y/anchor-is-valid
+                (0, _jsxRuntime.jsxs)("a", {
+                  id: tabId,
+                  className: (0, _classnames.default)("fwe-legacy-tab-link", {
+                    "fwe-can-swap-icon": innerChildren.length === 2 && i === 1
+                  }),
+                  role: "tab",
+                  "aria-controls": id,
+                  "aria-selected": active,
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconWrapper.default, {
+                    icon: icon
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                    children: name
+                  })]
+                }) :
+                /*#__PURE__*/
+                // eslint-disable-next-line jsx-a11y/anchor-is-valid
+                (0, _jsxRuntime.jsx)("a", {
+                  id: tabId,
+                  className: "fwe-legacy-tab-link",
+                  role: "tab",
+                  "aria-controls": id,
+                  "aria-selected": active,
+                  children: name
+                })
+              }, tabId)
+            );
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fwe-legacy-tab-panel-content",
+          children: innerChildren
+        })]
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fr-tab-bar",
+        role: "tablist",
+        ref: combinedRef,
+        ...props,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: (0, _classnames.default)("fr-tab-scroller", classes),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: (0, _classnames.default)("fr-tab-scroller-scroll-area fr-tab-scroller-scroll-area--scroll", {
+              "fr-tab-scroller-scroll-area--compact": useCompactDensity
+            }),
+            ref: scrollArea,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: (0, _classnames.default)("fr-tab-scroller-scroll-content", {
+                "fr-tab-scroller-scroll-content--with-divider": showDivider
+              }),
+              ref: scrollContent,
+              style: style,
+              children: [innerChildren && innerChildren.map((child, i) => {
+                const {
+                  active,
+                  name,
+                  id,
+                  tabId
+                } = child.props;
+                return /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+                  type: "button",
+                  role: "tab",
+                  className: (0, _classnames.default)("fr-tab", {
+                    "fr-tab--active": active
+                  }),
+                  id: tabId,
+                  "aria-controls": id,
+                  "aria-selected": active,
+                  tabIndex: i === 0 ? 0 : 1,
+                  onClick: e => handleClick(e, i, id),
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                    className: "fr-tab-content",
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                      className: "fr-tab-text-label",
+                      children: name
+                    })
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                    className: (0, _classnames.default)("fr-tab-indicator", {
+                      "fr-tab-indicator--active": active
+                    }),
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                      className: "fr-tab-indicator-content fr-tab-indicator-content--underline"
+                    })
+                  })]
+                }, tabId);
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                className: "fr-tab-scroller-divider-line"
+              })]
+            })
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fr-tab-panel-content",
+          children: innerChildren
+        })]
+      })
+    })
+  );
+});
+var _default = exports.default = Tabs;

package/node/lib/components/tab/interfaces.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/node/lib/components/tab/tab-pane/TabPane.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function TabPane(_ref) {
+  let {
+    isVisible = false,
+    children,
+    className,
+    tabId,
+    id
+  } = _ref;
+  const tabPaneClasses = (0, _classnames.default)({
+    "fr-show": isVisible
+  }, {
+    "fr-hide": !isVisible
+  }, className);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    id: id,
+    "aria-labelledby": tabId,
+    className: tabPaneClasses,
+    children: children
+  });
+}
+var _default = exports.default = TabPane;

package/node/lib/components/tab/useTabScroll.js

@@ -0,0 +1,238 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+// provides details about the left and right edges of the tab element and the tab content element
+// these values are used to determine the visual position of the tab with respect of its parent container
+
+const useTabScroll = (tabLength, componentId, refs) => {
+  const {
+    elRef,
+    scrollContent,
+    scrollArea
+  } = refs;
+  const [style, setStyle] = (0, _react.useState)({});
+  const [classes, setClasses] = (0, _react.useState)("");
+  function getScrollContentStyleValue(propName) {
+    return scrollContent.current ? window.getComputedStyle(scrollContent.current).getPropertyValue(propName) : "";
+  }
+  function calculateCurrentTranslateX() {
+    const transformValue = getScrollContentStyleValue("transform");
+    if (transformValue === "none") {
+      return 0;
+    }
+
+    // the transform value is in form of 'matrix(a, b, c, d, tx, ty)'
+    // get all the parenthesized values
+    const match = /\((.+?)\)/.exec(transformValue);
+    if (!match) {
+      return 0;
+    }
+    const matrixParams = match[1];
+    // we need value of tx -> translateX
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const [a, b, c, d, tx, ty] = matrixParams.split(",");
+    return parseFloat(tx);
+  }
+  function getScrollPosition() {
+    const currentTranslateX = calculateCurrentTranslateX();
+    const scrollLeft = scrollArea.current?.scrollLeft ?? 0;
+    return scrollLeft - currentTranslateX;
+  }
+  function calculateScrollEdges() {
+    const scrollContentWidth = scrollContent.current?.offsetWidth ?? 0;
+    const scrollAreaWidth = scrollArea.current?.offsetWidth ?? 0;
+    return {
+      left: 0,
+      right: scrollContentWidth - scrollAreaWidth
+    };
+  }
+  function clampScrollValue(scrollX) {
+    const edges = calculateScrollEdges();
+    return Math.min(Math.max(edges.left, scrollX), edges.right);
+  }
+  function getIncrementScrollOperation(scrollX) {
+    const currentScrollX = getScrollPosition();
+    const targetScrollX = scrollX + currentScrollX;
+    const safeScrollX = clampScrollValue(targetScrollX);
+    const scrollDelta = safeScrollX - currentScrollX;
+    return {
+      finalScrollPosition: safeScrollX,
+      scrollDelta
+    };
+  }
+  function getAnimatingScrollPosition() {
+    const currentTranslateX = calculateCurrentTranslateX();
+    const scrollLeft = scrollArea.current?.scrollLeft ?? 0;
+    return scrollLeft - currentTranslateX;
+  }
+  function stopScrollAnimation() {
+    const currentScrollPosition = getAnimatingScrollPosition();
+    setClasses("");
+    setStyle({
+      transform: "translateX(0px)"
+    });
+    if (scrollArea.current) {
+      scrollArea.current.scrollLeft = currentScrollPosition;
+    }
+  }
+  function animate(animation) {
+    // no animation needed
+    if (animation.scrollDelta === 0) {
+      return;
+    }
+    stopScrollAnimation();
+
+    // this animation uses the flip approach
+    // https://aerotwist.com/blog/flip-your-animations/
+    // https://css-tricks.com/animating-layouts-with-the-flip-technique/
+    if (scrollArea.current) {
+      scrollArea.current.scrollLeft = animation.finalScrollPosition;
+    }
+    setStyle({
+      transform: `translateX(${animation.scrollDelta}px)`
+    });
+    // force repaint
+    if (scrollArea.current) {
+      scrollArea.current.getBoundingClientRect();
+    }
+    requestAnimationFrame(() => {
+      setClasses("fr-tab-scroller--animating");
+      setStyle({
+        transform: "none"
+      });
+    });
+  }
+  function incrementScroll(scrollXIncrement) {
+    // no scroll needed
+    if (scrollXIncrement === 0) {
+      return;
+    }
+    const scrollOperation = getIncrementScrollOperation(scrollXIncrement);
+    animate(scrollOperation);
+  }
+  function computeDimensions(tab) {
+    const rootWidth = tab.offsetWidth;
+    const rootLeft = tab.offsetLeft;
+    const tabContent = tab.querySelector(".fr-tab-content");
+    const contentWidth = tabContent?.offsetWidth ?? 0;
+    const contentLeft = tabContent?.offsetLeft ?? 0;
+    return {
+      contentLeft: rootLeft + contentLeft,
+      contentRight: rootLeft + contentLeft + contentWidth,
+      rootLeft,
+      rootRight: rootLeft + rootWidth
+    };
+  }
+  function calculateScrollIncrement(index, nextIndex, scrollPosition, barWidth) {
+    const nextTab = elRef.current?.querySelector(`#${componentId}-tab-${nextIndex}`);
+    if (nextTab === null || nextTab === undefined) {
+      return 0;
+    }
+    const nextTabDimensions = computeDimensions(nextTab);
+    const relativeContentLeft = nextTabDimensions.contentLeft - scrollPosition - barWidth;
+    const relativeContentRight = nextTabDimensions.contentRight - scrollPosition;
+    const leftIncrement = relativeContentRight - 48;
+    const rightIncrement = relativeContentLeft + 48;
+    if (nextIndex < index) {
+      return Math.min(leftIncrement, 0);
+    }
+    return Math.max(rightIncrement, 0);
+  }
+  function findAdjacentTabIndexClosestToEdge(index, tabDimensions, scrollPosition, barWidth) {
+    /**
+     * tabs are laid out in the tab scroller like this:
+     *
+     *    scroll position
+     *    +---+
+     *    |   |   bar width
+     *    |   +-----------------------------------+
+     *    |   |                                   |
+     *    |   v                                   v
+     *    |   +-----------------------------------+
+     *    v   |             tab scroller          |
+     *    +------------+--------------+-------------------+
+     *    |    tab     |      tab     |        tab        |
+     *    +------------+--------------+-------------------+
+     *        |                                   |
+     *        +-----------------------------------+
+     *
+     * to determine the next adjacent index, we look at the tab root left and
+     * tab root right, both relative to the scroll position. if the tab root
+     * left is less than 0, then we know it's out of view to the left. if the
+     * tab root right minus the bar width is greater than 0, we know the tab is
+     * out of view to the right. from there, we either increment or decrement
+     * the index.
+     */
+    const relativeRootLeft = tabDimensions.rootLeft - scrollPosition;
+    const relativeRootRight = tabDimensions.rootRight - scrollPosition - barWidth;
+    const relativeRootDelta = relativeRootLeft + relativeRootRight;
+    const leftEdgeIsCloser = relativeRootLeft < 0 || relativeRootDelta < 0;
+    const rightEdgeIsCloser = relativeRootRight > 0 || relativeRootDelta > 0;
+    if (leftEdgeIsCloser) {
+      return index - 1;
+    }
+    if (rightEdgeIsCloser) {
+      return index + 1;
+    }
+    return -1;
+  }
+  function indexIsInRange(index) {
+    return index >= 0 && index < tabLength;
+  }
+  function scrollIntoView(index, tab) {
+    const scrollPosition = getScrollPosition();
+    const barWidth = scrollArea.current?.offsetWidth ?? 0;
+    const tabDimensions = computeDimensions(tab);
+    const nextIndex = findAdjacentTabIndexClosestToEdge(index, tabDimensions, scrollPosition, barWidth);
+    if (!indexIsInRange(nextIndex)) {
+      return;
+    }
+    const scrollIncrement = calculateScrollIncrement(index, nextIndex, scrollPosition, barWidth);
+    incrementScroll(scrollIncrement);
+  }
+  function scrollTo(scrollX) {
+    const currentScrollX = getScrollPosition();
+    const safeScrollX = clampScrollValue(scrollX);
+    const scrollDelta = safeScrollX - currentScrollX;
+    animate({
+      finalScrollPosition: safeScrollX,
+      scrollDelta
+    });
+  }
+  function handleTabScroll(e, index) {
+    const scrollContentWidth = scrollContent.current?.offsetWidth ?? 0;
+    const scrollAreaWidth = scrollArea.current?.offsetWidth ?? 0;
+
+    // check if no scroll is needed
+    if (scrollAreaWidth > scrollContentWidth) {
+      return;
+    }
+
+    // check index
+    if (!indexIsInRange(index)) {
+      return;
+    }
+
+    // always scroll to 0 if scrolling to the first tab
+    if (index === 0) {
+      scrollTo(0);
+      return;
+    }
+
+    // always scroll to the max value if scrolling to the last tab
+    if (index === tabLength - 1 && scrollContent.current) {
+      scrollTo(scrollContent.current.offsetWidth);
+      return;
+    }
+    if (e.currentTarget instanceof HTMLElement) {
+      const currentTab = e.currentTarget;
+      scrollIntoView(index, currentTab);
+    }
+  }
+  return [handleTabScroll, classes, style];
+};
+var _default = exports.default = useTabScroll;

package/node/lib/components/table-header-cell/TableHeaderCell.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const TableHeaderCell = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    active,
+    ascending,
+    className,
+    ...props
+  } = _ref;
+  function handleClick(event) {
+    if (props.onClick) {
+      props.onClick(event);
+    }
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("th", {
+    ...props,
+    className: (0, _classnames.default)("fwe-table-order", {
+      "fwe-active": active
+    }, {
+      "fwe-table-order-ascending": active && ascending
+    }, {
+      "fwe-table-order-descending": active && !ascending
+    }, className),
+    onClick: handleClick,
+    ref: ref
+  });
+});
+var _default = exports.default = TableHeaderCell;

package/node/lib/forms/checkbox/Checkbox.js

@@ -0,0 +1,93 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireDefault(require("react"));
+var _useControlled = _interopRequireDefault(require("../../helper/useControlled.js"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function Checkbox(_ref) {
+  let {
+    id,
+    checked: checkedProp,
+    defaultChecked,
+    onChange,
+    name,
+    large = false,
+    valid = true,
+    labelPosition = "after",
+    required,
+    disabled = false,
+    indeterminate = false,
+    children,
+    className,
+    ...props
+  } = _ref;
+  const [isChecked, setChecked] = (0, _useControlled.default)({
+    controlled: checkedProp,
+    default: defaultChecked
+  });
+  const handleChange = e => {
+    const newChecked = !isChecked;
+    setChecked(newChecked);
+    onChange?.(newChecked, e);
+  };
+  const containerClasses = (0, _classnames.default)("fwe-checkbox-container", {
+    "fr-checkbox-large": large
+  }, {
+    "fr-checkbox-invalid": !valid || required
+  }, {
+    "fwe-disabled": disabled
+  }, {
+    "fwe-checked": isChecked
+  }, {
+    "fwe-label-below": labelPosition === "below"
+  }, {
+    "fwe-label-before": labelPosition === "before"
+  }, {
+    "fr-checkbox-indeterminate": indeterminate
+  }, className);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+    className: containerClasses,
+    htmlFor: id,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+      name: name,
+      type: "checkbox",
+      id: id,
+      disabled: disabled,
+      required: required,
+      onChange: e => handleChange(e),
+      ...props,
+      checked: isChecked
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fwe-checkbox-indicator-container",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fwe-checkbox-indicator-background"
+      }), !indeterminate && isChecked && (large ? /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+        width: "24px",
+        height: "24px",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+          d: "M17.5 7L10 14.5 7.501 12l-1.5 1.501L10 17.5l9-9z",
+          fill: "#fff"
+        })
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "16",
+        height: "16",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+          d: "M6 12L3 9l1.25-1.25L6 9.5l5.75-5.75L13 5l-7 7z",
+          fill: "#fff"
+        })
+      })), indeterminate && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fwe-indeterminate-indicator"
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fwe-checkbox-title",
+      children: children
+    })]
+  });
+}
+var _default = exports.default = Checkbox;