@festo-ui/react 4.0.3-pre-20221213.1 → 5.0.0-dev.72

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

@@ -0,0 +1,237 @@
+"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"));
+var _useTabScroll = _interopRequireDefault(require("./useTabScroll"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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)("i", {
+                    className: `fwe-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 = Tabs;
+exports.default = _default;

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,31 @@
+"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(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 = TabPane;
+exports.default = _default;

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

@@ -0,0 +1,236 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+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 = useTabScroll;
+exports.default = _default;

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

@@ -0,0 +1,29 @@
+"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(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const TableHeaderCell = /*#__PURE__*/(0, _react.forwardRef)((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': props.active
+    }, {
+      'fwe-table-order-descending': !props.ascending
+    }, props.className),
+    onClick: handleClick,
+    ref: ref
+  });
+});
+var _default = TableHeaderCell;
+exports.default = _default;

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

@@ -0,0 +1,97 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function Checkbox(_ref) {
+  let {
+    id,
+    checked,
+    onChange,
+    name,
+    large = false,
+    valid = true,
+    labelPosition = 'after',
+    required,
+    disabled = false,
+    indeterminate = false,
+    children,
+    className,
+    ...props
+  } = _ref;
+  const [isChecked, setChecked] = (0, _react.useState)(checked);
+  const [isIndeterminate, setIndeterminate] = (0, _react.useState)(indeterminate);
+  (0, _react.useEffect)(() => {
+    setChecked(checked);
+    setIndeterminate(indeterminate);
+  }, [checked, indeterminate]);
+  const handleChange = () => {
+    const newChecked = !isChecked;
+    if (indeterminate) {
+      setIndeterminate(false);
+    }
+    setChecked(newChecked);
+    onChange(newChecked);
+  };
+  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': isIndeterminate
+  }, 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,
+      onChange: () => handleChange(),
+      ...props
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fwe-checkbox-indicator-container",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fwe-checkbox-indicator-background"
+      }), !isIndeterminate && 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"
+        })
+      })), isIndeterminate && !isChecked && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fwe-indeterminate-indicator"
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fwe-checkbox-title",
+      children: children
+    })]
+  });
+}
+var _default = Checkbox;
+exports.default = _default;