@festo-ui/react 9.0.1-dev.783 → 9.0.1-dev.785

package/dist/components/tab/Tabs.js

@@ -0,0 +1,193 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import "./Tabs.css";
+import classnames from "classnames";
+import react, { forwardRef, isValidElement, useEffect, useRef, useState } from "react";
+import { useForkRef } from "../../utils/useForkRef.js";
+import { IconWrapper } from "../icon-wrapper/IconWrapper.js";
+import { useTabScroll } from "./useTabScroll.js";
+let nextId = 0;
+const Tabs = /*#__PURE__*/ forwardRef(({ config, children, className, onChange, viewType = 'responsive', showDivider = false, ...props }, ref)=>{
+    const [useCompactDensity, setCompactDensity] = useState(true);
+    const componentId = useRef(`tabs-${++nextId}`);
+    const elRef = useRef(null);
+    const combinedRef = useForkRef(ref, elRef);
+    const scrollContent = useRef(null);
+    const scrollArea = useRef(null);
+    const observer = useRef(null);
+    let activeId = '';
+    react.Children.forEach(children, (element, i)=>{
+        if (/*#__PURE__*/ react.isValidElement(element)) {
+            if ('' === activeId || element.props.active) activeId = `${componentId.current}-tab-panel-${i}`;
+        }
+    });
+    const [currentId, setId] = useState(activeId);
+    const innerChildren = react.Children.map(children, (element, i)=>{
+        if (/*#__PURE__*/ isValidElement(element)) {
+            const newId = `${componentId.current}-tab-panel-${i}`;
+            return /*#__PURE__*/ react.cloneElement(element, {
+                isVisible: newId === currentId,
+                active: newId === currentId,
+                id: newId,
+                tabId: `${componentId.current}-tab-${i}`,
+                ...element.props
+            });
+        }
+    });
+    const [handleTabScroll, classes, style] = useTabScroll(innerChildren?.length ?? 0, componentId.current, {
+        elRef,
+        scrollContent,
+        scrollArea
+    });
+    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 (null == id) return;
+        if (onChange) onChange({
+            previous: currentId,
+            current: id
+        });
+        setId(id);
+    };
+    function handleClick(e, index, id) {
+        handleTabScroll(e, index);
+        if (void 0 !== id) showTabPane(id);
+    }
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: 'legacy' === viewType ? /*#__PURE__*/ jsxs("div", {
+            className: classnames('fwe-legacy-tabs', className),
+            children: [
+                /*#__PURE__*/ jsx("ul", {
+                    role: "tablist",
+                    className: classnames('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?.map((child, i)=>{
+                        const { active, icon, name, id, tabId } = child.props;
+                        return /*#__PURE__*/ jsx("li", {
+                            className: classnames('fwe-legacy-tab-item', {
+                                'fwe-active': active
+                            }),
+                            children: icon ? /*#__PURE__*/ jsxs("button", {
+                                type: "button",
+                                id: tabId,
+                                className: classnames('fwe-legacy-tab-link', {
+                                    'fwe-can-swap-icon': 2 === innerChildren.length && 1 === i
+                                }),
+                                role: "tab",
+                                "aria-controls": id,
+                                "aria-selected": active,
+                                onClick: ()=>showTabPane(id),
+                                children: [
+                                    /*#__PURE__*/ jsx(IconWrapper, {
+                                        icon: icon
+                                    }),
+                                    /*#__PURE__*/ jsx("span", {
+                                        children: name
+                                    })
+                                ]
+                            }) : /*#__PURE__*/ jsx("button", {
+                                type: "button",
+                                id: tabId,
+                                className: "fwe-legacy-tab-link",
+                                role: "tab",
+                                "aria-controls": id,
+                                "aria-selected": active,
+                                onClick: ()=>showTabPane(id),
+                                children: name
+                            })
+                        }, tabId);
+                    })
+                }),
+                /*#__PURE__*/ jsx("div", {
+                    className: "fwe-legacy-tab-panel-content",
+                    children: innerChildren
+                })
+            ]
+        }) : /*#__PURE__*/ jsxs("div", {
+            className: "fr-tab-bar",
+            role: "tablist",
+            ref: combinedRef,
+            ...props,
+            children: [
+                /*#__PURE__*/ jsx("div", {
+                    className: classnames('fr-tab-scroller', classes),
+                    children: /*#__PURE__*/ jsx("div", {
+                        className: classnames('fr-tab-scroller-scroll-area fr-tab-scroller-scroll-area--scroll', {
+                            'fr-tab-scroller-scroll-area--compact': useCompactDensity
+                        }),
+                        ref: scrollArea,
+                        children: /*#__PURE__*/ jsxs("div", {
+                            className: classnames('fr-tab-scroller-scroll-content', {
+                                'fr-tab-scroller-scroll-content--with-divider': showDivider
+                            }),
+                            ref: scrollContent,
+                            style: style,
+                            children: [
+                                innerChildren?.map((child, i)=>{
+                                    const { active, name, id, tabId } = child.props;
+                                    return /*#__PURE__*/ jsxs("button", {
+                                        type: "button",
+                                        role: "tab",
+                                        className: classnames('fr-tab', {
+                                            'fr-tab--active': active
+                                        }),
+                                        id: tabId,
+                                        "aria-controls": id,
+                                        "aria-selected": active,
+                                        tabIndex: 0 === i ? 0 : 1,
+                                        onClick: (e)=>handleClick(e, i, id),
+                                        children: [
+                                            /*#__PURE__*/ jsx("span", {
+                                                className: "fr-tab-content",
+                                                children: /*#__PURE__*/ jsx("span", {
+                                                    className: "fr-tab-text-label",
+                                                    children: name
+                                                })
+                                            }),
+                                            /*#__PURE__*/ jsx("span", {
+                                                className: classnames('fr-tab-indicator', {
+                                                    'fr-tab-indicator--active': active
+                                                }),
+                                                children: /*#__PURE__*/ jsx("span", {
+                                                    className: "fr-tab-indicator-content fr-tab-indicator-content--underline"
+                                                })
+                                            })
+                                        ]
+                                    }, tabId);
+                                }),
+                                /*#__PURE__*/ jsx("div", {
+                                    className: "fr-tab-scroller-divider-line"
+                                })
+                            ]
+                        })
+                    })
+                }),
+                /*#__PURE__*/ jsx("div", {
+                    className: "fr-tab-panel-content",
+                    children: innerChildren
+                })
+            ]
+        })
+    });
+});
+export { Tabs };

package/dist/components/tab/interfaces.d.ts

@@ -0,0 +1,5 @@
+export type Tab = {
+    icon?: React.ReactNode;
+    active?: boolean;
+    name: string;
+};

package/dist/components/tab/tab-pane/TabPane.css

@@ -0,0 +1,8 @@
+.fr-show {
+  display: block;
+}
+
+.fr-hide {
+  display: none;
+}
+

package/dist/components/tab/tab-pane/TabPane.d.ts

@@ -0,0 +1,9 @@
+import './TabPane.scss';
+import type { ClassNamePropsWithChildren } from '../../../utils/types';
+import type { Tab } from '../interfaces';
+export interface TabPaneProps extends ClassNamePropsWithChildren, Tab {
+    readonly id?: string;
+    readonly isVisible?: boolean;
+    readonly tabId?: string;
+}
+export declare function TabPane({ isVisible, children, className, tabId, id, }: TabPaneProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/tab/tab-pane/TabPane.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import "./TabPane.css";
+import classnames from "classnames";
+function TabPane({ isVisible = false, children, className, tabId, id }) {
+    const tabPaneClasses = classnames({
+        'fr-show': isVisible
+    }, {
+        'fr-hide': !isVisible
+    }, className);
+    return /*#__PURE__*/ jsx("div", {
+        id: id,
+        role: "tabpanel",
+        "aria-labelledby": tabId,
+        className: tabPaneClasses,
+        children: children
+    });
+}
+export { TabPane };

package/dist/components/tab/useTabScroll.d.ts

@@ -0,0 +1,25 @@
+import type React from 'react';
+import { type CSSProperties } from 'react';
+export interface TabDimensions {
+    rootLeft: number;
+    rootRight: number;
+    contentLeft: number;
+    contentRight: number;
+}
+export interface TabScrollAnimation {
+    finalScrollPosition: number;
+    scrollDelta: number;
+}
+export interface TabScrollHorizontalEdges {
+    left: number;
+    right: number;
+}
+type TypeHandleTabScroll = (e: React.MouseEvent<HTMLButtonElement>, index: number) => void;
+interface Refs {
+    elRef: React.MutableRefObject<HTMLDivElement | null>;
+    scrollContent: React.MutableRefObject<HTMLDivElement | null>;
+    scrollArea: React.MutableRefObject<HTMLDivElement | null>;
+}
+type TypeUseTabScroll = (tabLength: number, componentId: string, refs: Refs) => [TypeHandleTabScroll, string, CSSProperties];
+export declare const useTabScroll: TypeUseTabScroll;
+export {};

package/dist/components/tab/useTabScroll.js

@@ -0,0 +1,151 @@
+import { useState } from "react";
+const useTabScroll = (tabLength, componentId, refs)=>{
+    const { elRef, scrollContent, scrollArea } = refs;
+    const [style, setStyle] = useState({});
+    const [classes, setClasses] = useState('');
+    function getScrollContentStyleValue(propName) {
+        return scrollContent.current ? window.getComputedStyle(scrollContent.current).getPropertyValue(propName) : '';
+    }
+    function calculateCurrentTranslateX() {
+        const transformValue = getScrollContentStyleValue('transform');
+        if ('none' === transformValue) return 0;
+        const match = /\((.+?)\)/.exec(transformValue);
+        if (!match) return 0;
+        const matrixParams = match[1];
+        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) {
+        if (0 === animation.scrollDelta) return;
+        stopScrollAnimation();
+        if (scrollArea.current) scrollArea.current.scrollLeft = animation.finalScrollPosition;
+        setStyle({
+            transform: `translateX(${animation.scrollDelta}px)`
+        });
+        if (scrollArea.current) scrollArea.current.getBoundingClientRect();
+        requestAnimationFrame(()=>{
+            setClasses('fr-tab-scroller--animating');
+            setStyle({
+                transform: 'none'
+            });
+        });
+    }
+    function incrementScroll(scrollXIncrement) {
+        if (0 === scrollXIncrement) 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 (null == nextTab) 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) {
+        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;
+        if (scrollAreaWidth > scrollContentWidth) return;
+        if (!indexIsInRange(index)) return;
+        if (0 === index) return void scrollTo(0);
+        if (index === tabLength - 1 && scrollContent.current) return void scrollTo(scrollContent.current.offsetWidth);
+        if (e.currentTarget instanceof HTMLElement) {
+            const currentTab = e.currentTarget;
+            scrollIntoView(index, currentTab);
+        }
+    }
+    return [
+        handleTabScroll,
+        classes,
+        style
+    ];
+};
+export { useTabScroll };

package/dist/components/table-header-cell/TableHeaderCell.d.ts

@@ -0,0 +1,5 @@
+export interface TableHeaderCellProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
+    readonly active?: boolean;
+    readonly ascending: boolean;
+}
+export declare const TableHeaderCell: (props: TableHeaderCellProps & import("react").RefAttributes<HTMLTableCellElement>) => React.ReactElement | null;

package/dist/components/table-header-cell/TableHeaderCell.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import classnames from "classnames";
+import { forwardRef } from "react";
+const TableHeaderCell = /*#__PURE__*/ forwardRef(({ active, ascending, className, ...props }, ref)=>{
+    function handleClick(event) {
+        if (props.onClick) props.onClick(event);
+    }
+    return /*#__PURE__*/ jsx("th", {
+        ...props,
+        className: classnames('fwe-table-order', {
+            'fwe-active': active
+        }, {
+            'fwe-table-order-ascending': active && ascending
+        }, {
+            'fwe-table-order-descending': active && !ascending
+        }, className),
+        onClick: handleClick,
+        ref: ref
+    });
+});
+export { TableHeaderCell };

package/dist/forms/checkbox/Checkbox.css

@@ -0,0 +1,134 @@
+.fwe-checkbox-container {
+  font-family: var(--fwe-font-family-sans-serif);
+  user-select: none;
+  cursor: pointer;
+  flex-direction: row;
+  align-items: center;
+  display: flex;
+}
+
+.fwe-checkbox-container.fwe-label-below {
+  flex-direction: column;
+}
+
+.fwe-checkbox-container.fwe-label-below .fwe-checkbox-title {
+  margin: 8px 0 0;
+}
+
+.fwe-checkbox-container.fwe-label-before {
+  flex-direction: row-reverse;
+  justify-content: flex-end;
+}
+
+.fwe-checkbox-container.fwe-label-before .fwe-checkbox-title {
+  margin: 0 8px 0 0;
+}
+
+.fwe-checkbox-container .fwe-checkbox-indicator-container {
+  position: relative;
+}
+
+.fwe-checkbox-container input {
+  opacity: 0;
+  cursor: pointer;
+  width: 0;
+  height: 0;
+}
+
+.fwe-checkbox-container .fwe-checkbox-title {
+  color: var(--fwe-text);
+  user-select: none;
+  margin-left: 8px;
+  line-height: 24px;
+}
+
+.fwe-checkbox-container .fwe-checkbox-indicator-background {
+  box-sizing: border-box;
+  background: var(--fwe-white);
+  border: 1px solid var(--fwe-text-light);
+  border-radius: 2px;
+  width: 16px;
+  height: 16px;
+  transition: border-width .2s ease-out;
+}
+
+.fwe-checkbox-container .fwe-indeterminate-indicator {
+  background: #fff;
+  width: 10px;
+  height: 2px;
+  position: absolute;
+  top: 7px;
+  left: 3px;
+}
+
+.fwe-checkbox-container .fwe-checkbox-indicator-background + svg {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.fwe-checkbox-container.fr-checkbox-large .fwe-checkbox-indicator-background {
+  border-radius: 4px;
+  width: 24px;
+  height: 24px;
+}
+
+.fwe-checkbox-container.fr-checkbox-large .fwe-indeterminate-indicator {
+  width: 14px;
+  top: 11px;
+  left: 5px;
+}
+
+.fwe-checkbox-container.fr-checkbox-large.fwe-checked .fwe-checkbox-indicator-background, .fwe-checkbox-container.fr-checkbox-large.fr-checkbox-indeterminate .fwe-checkbox-indicator-background {
+  border: 12px solid var(--fwe-hero);
+}
+
+.fwe-checkbox-container:hover .fwe-checkbox-indicator-background {
+  background-color: var(--fwe-control);
+}
+
+.fwe-checkbox-container:active .fwe-checkbox-indicator-background {
+  background-color: var(--fwe-control-hover);
+}
+
+.fwe-checkbox-container.fwe-checked .fwe-checkbox-indicator-background, .fwe-checkbox-container.fr-checkbox-indeterminate .fwe-checkbox-indicator-background {
+  border: 8px solid var(--fwe-hero);
+}
+
+.fwe-checkbox-container.fwe-checked:hover .fwe-checkbox-indicator-background, .fwe-checkbox-container.fr-checkbox-indeterminate:hover .fwe-checkbox-indicator-background {
+  border-color: var(--fwe-hero-hover);
+}
+
+.fwe-checkbox-container.fwe-checked:active .fwe-checkbox-indicator-background, .fwe-checkbox-container.fr-checkbox-indeterminate:active .fwe-checkbox-indicator-background {
+  border-color: var(--fwe-hero-active);
+}
+
+.fwe-checkbox-container.fr-checkbox-invalid .fwe-checkbox-indicator-background {
+  border: 1px solid var(--fwe-red);
+  background: var(--fwe-white);
+}
+
+.fwe-checkbox-container.fwe-disabled {
+  cursor: default;
+}
+
+.fwe-checkbox-container.fwe-disabled .fwe-checkbox-indicator-background {
+  background-color: var(--fwe-white);
+  border: 1px solid var(--fwe-control);
+}
+
+.fwe-checkbox-container.fwe-disabled.fwe-checked .fwe-checkbox-indicator-background, .fwe-checkbox-container.fwe-disabled.fr-checkbox-indeterminate .fwe-checkbox-indicator-background {
+  background-color: var(--fwe-control);
+  border: 1px solid var(--fwe-control);
+}
+
+.fwe-checkbox-container.fwe-disabled.fr-checkbox-invalid .fwe-checkbox-indicator-background {
+  background-color: var(--fwe-white);
+  border: 1px solid var(--fwe-control);
+}
+
+.fwe-checkbox-container.fwe-disabled .fwe-checkbox-title {
+  color: var(--fwe-text-disabled);
+}
+

package/dist/forms/checkbox/Checkbox.d.ts

@@ -0,0 +1,15 @@
+import './Checkbox.scss';
+export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+    readonly id?: string;
+    readonly checked?: boolean;
+    readonly defaultChecked?: boolean;
+    readonly onChange?: (value: boolean, e: React.ChangeEvent<HTMLInputElement>) => void;
+    readonly name?: string;
+    readonly large?: boolean;
+    readonly valid?: boolean;
+    readonly labelPosition?: 'before' | 'after' | 'below';
+    readonly required?: boolean;
+    readonly disabled?: boolean;
+    readonly indeterminate?: boolean;
+}
+export declare function Checkbox({ id, checked: checkedProp, defaultChecked, onChange, name, large, valid, labelPosition, required, disabled, indeterminate, children, className, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;

package/dist/forms/checkbox/Checkbox.js

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