@sprinklrjs/spaceweb 12.33.2 → 14.11.0

package/esm/button-group/styled-components.js

@@ -1,120 +1,101 @@
 import { __assign } from "tslib";
 import * as React from 'react';
 import _isArray from 'lodash/isArray';
-import _merge from 'lodash/merge';
-import { createButtonStyles } from '../button/styled-components';
-import { borderColor, borderRadius, borderStyle, borderWidth } from '../helpers/longHandHelpers';
-import { getFocusVisibleStyles } from '../helpers/commonStyles';
+import { createButtonStylesAtomic } from '../button/helpers';
 import styled from '../style/styled';
-import { getComponentSizeTheme, getDefaultSize } from '../helpers/themeHelpers';
-// NOTE - This method is meant to be used by ButtonGroup only and not a generic one. This shouldn't be used to take style specific decisions.
-var isHyperSpaceUI = function (theme) { return theme.name.includes('hyperspace'); };
-export var buttonGroupButtonSizeMap = {
-    xxxs: {
-        height: '20px',
-        marginTop: '1px',
-        marginBottom: '1px',
-        containerBorderRadius: '5px',
-    },
-    xs: {
-        height: '26px',
-        marginTop: '2px',
-        marginBottom: '2px',
-        containerBorderRadius: '7px',
-    },
-    sm: {
-        height: '26px',
-        marginTop: '2px',
-        marginBottom: '2px',
-        containerBorderRadius: '7px',
-    },
-    md: {
-        height: '32px',
-        marginTop: '3px',
-        marginBottom: '3px',
-        containerBorderRadius: '8px',
-    },
-    lg: {
-        height: '32px',
-        marginTop: '3px',
-        marginBottom: '3px',
-        containerBorderRadius: '8px',
-    },
-};
-export var getButtonGroupSizeTheme = function (theme, size, prop) {
-    var _a, _b;
-    return ((_a = getComponentSizeTheme(theme, 'buttonGroup', size, getDefaultSize(theme))) === null || _a === void 0 ? void 0 : _a[prop]) ||
-        ((_b = buttonGroupButtonSizeMap[size || getDefaultSize(theme)]) === null || _b === void 0 ? void 0 : _b[prop]) ||
-        buttonGroupButtonSizeMap[getDefaultSize(theme)][prop];
-};
-export var StyledRoot = styled('div', 'inline-flex px-0.5 items-center', function (_a, _b) {
-    var theme = _a.theme, px2rem = _a.px2rem;
-    var $size = _b.$size;
-    if (!isHyperSpaceUI(theme))
-        return {};
-    var containerBorderRadius = getButtonGroupSizeTheme(theme, $size, 'containerBorderRadius');
-    var paddingX = getButtonGroupSizeTheme(theme, $size, 'marginTop');
-    return __assign(__assign(__assign(__assign(__assign({ gap: px2rem(3), backgroundColor: theme.spr.ui01 }, borderStyle('solid')), borderColor(theme.spr.ui03)), borderWidth('1px')), borderRadius(containerBorderRadius)), { paddingLeft: paddingX, paddingRight: paddingX });
-});
+import { mergeOverrides } from '../overrides';
+import { getButtonGroupSizeClasses, getButtonSizeClasses, getStyledRootOverride, getButtonThemeOverrideStyles, } from './helpers';
+export var StyledRoot = styled('div', 'spr-bg-primary border-solid border-1', getButtonGroupSizeClasses, function (_, _a) {
+    var $layout = _a.$layout;
+    return $layout === 'vertical' ? 'flex flex-col' : 'inline-flex items-center';
+}, function (_, _a) {
+    var $bordered = _a.$bordered;
+    return ($bordered ? 'spr-border-primary' : 'border-transparent');
+}, function (_, _a) {
+    var $disabled = _a.$disabled;
+    return ($disabled ? 'forced-colors:border-disabled' : '');
+}, 
+// @ts-ignore -- legacy theme support
+getStyledRootOverride);
 var isSelected = function (selected, index) { return (_isArray(selected) ? selected.includes(index) : selected === index); };
-var isAnyButtonSelected = function (selected) { return (typeof selected === 'number' && selected >= 0) || Boolean(selected === null || selected === void 0 ? void 0 : selected.length); };
-export var hyperspaceButtonOverrides = function (utils, props) {
-    var theme = utils.theme, px2rem = utils.px2rem;
-    var $isIconButton = props.$isIconButton, $index = props.$index, $childrenCount = props.$childrenCount, $isSelected = props.$isSelected, $size = props.$size;
-    var height = getButtonGroupSizeTheme(theme, $size, 'height');
-    var marginTop = getButtonGroupSizeTheme(theme, $size, 'marginTop');
-    var marginBottom = getButtonGroupSizeTheme(theme, $size, 'marginBottom');
-    return _merge(__assign(__assign(__assign(__assign(__assign(__assign({ fontSize: px2rem(12), lineHeight: px2rem(16) }, borderRadius(px2rem(4))), (!$isIconButton
-        ? {
-            paddingTop: px2rem(8),
-            paddingBottom: px2rem(8),
-            paddingLeft: px2rem(12),
-            paddingRight: px2rem(12),
-        }
-        : { height: height, width: height, marginTop: marginTop, marginBottom: marginBottom })), createButtonStyles({
-        color: theme.spr.text01,
-        hoverColor: theme.spr.text01,
-        activeColor: theme.spr.text04,
-        disabledColor: $isIconButton ? theme.spr.iconDisable : theme.spr.text02,
-        borderColor: 'transparent',
-        backgroundColor: theme.spr.ui01,
-        hoverBackgroundColor: theme.spr.ui05,
-        activeBackgroundColor: theme.spr.ui05,
-    }, props)), borderWidth(0)), { fontWeight: $isSelected ? theme.fontWeight.bold : theme.fontWeight.regular }), getFocusVisibleStyles(utils, { $outlineOffset: '-2px' })));
-};
-var baseButtonStyle = function (childrenCount, index, utils, props) {
-    var theme = utils.theme;
-    var $variant = props.$variant, $size = props.$size;
-    var height = getButtonGroupSizeTheme(theme, $size, 'height');
-    var marginTop = getButtonGroupSizeTheme(theme, $size, 'marginTop');
-    var marginBottom = getButtonGroupSizeTheme(theme, $size, 'marginBottom');
-    var baseStyles = { fontWeight: theme.fontWeight.normal, height: height, marginTop: marginTop, marginBottom: marginBottom };
-    if (isHyperSpaceUI(theme)) {
-        return __assign(__assign({}, baseStyles), hyperspaceButtonOverrides(utils, __assign(__assign({}, props), { $index: index, $childrenCount: childrenCount })));
+var getTabIndex = function (child, countOfChildren, index, selected) {
+    var _a;
+    var tabIndex = -1;
+    if (selected === undefined) {
+        tabIndex = 0;
     }
-    var borderLeftColor = $variant === 'primary'
-        ? {
-            borderLeftColor: theme.spr.border01,
-            ':hover': { borderLeftColor: theme.spr.border01 },
-            ':active': { borderLeftColor: theme.spr.border01 },
+    else if (typeof selected === 'number') {
+        if (selected < 0 || selected >= countOfChildren) {
+            tabIndex = 0;
         }
-        : { borderLeftWidth: 0 };
-    switch (index) {
-        case 0: //first button
-            return __assign(__assign({}, baseStyles), { borderTopRightRadius: 0, borderBottomRightRadius: 0 });
-        case childrenCount - 1: //last button
-            return __assign(__assign(__assign({}, baseStyles), borderLeftColor), { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 });
-        default:
-            //all middle buttons
-            return __assign(__assign(__assign({}, baseStyles), borderLeftColor), borderRadius(0));
+        else {
+            tabIndex = index === selected ? 0 : -1;
+        }
+    }
+    else if (selected.length === 0) {
+        tabIndex = 0;
     }
+    else {
+        tabIndex = selected.includes(index) ? 0 : -1;
+    }
+    tabIndex = (_a = child.props.tabIndex) !== null && _a !== void 0 ? _a : tabIndex;
+    /*
+    adding above logic to prevent tab Order Issue
+    If selected is undefined or selected <0 or selected >=no. of children or selected is empty array,
+            Then pressing tab will focus to first child (that first child that does not have disabled prop set to true ) of button group  and another tab will take it out from button group and now pressing shift+tab take it to last child of button-group element that has not been disabled .
+  
+    If selected is array having length >= 1 ,
+          then pressing tab will focus to first element (that first element that does not have disabled prop set to true and it index is present in selected array) of button group and another tab will take it out from button group and now pressing shift+tab take it to last child of button-group element that has not been disabled and whose index is present in selected array .
+  */
+    return tabIndex;
+};
+export var getButtonOverrides = function (utils, props) {
+    var $isSelected = props.$isSelected, $intent = props.$intent, $disabled = props.$disabled;
+    var defaultClasses = 'spr-text-primary spr-border-primary spr-bg-primary';
+    var hoverClasses = 'spr-text-primary spr-border-quaternary bg-transparent';
+    var activeClasses = 'spr-link spr-border-quinary bg-transparent';
+    var disabledClasses = 'spr-text-secondary';
+    var baseClasses = createButtonStylesAtomic(utils, props, defaultClasses, hoverClasses, activeClasses, disabledClasses);
+    return [
+        $isSelected ? 'font-bold' : 'font-normal',
+        baseClasses,
+        'focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 ' +
+            'focus-visible:outline-[--spr-focus-01]',
+        $intent === 'default' && $isSelected && !$disabled
+            ? 'hover:spr-link hover:spr-border-quinary hover:spr-bg-quaternary'
+            : '',
+        $intent === 'ai'
+            ? "spr-text-primary hover:bg-transparent active:border-transparent active:spr-text-primary ".concat($isSelected && !$disabled ? 'ai-bg-gradient ai-border-02' : '', " ")
+            : '',
+    ];
 };
-export var renderButtonGroupChild = function (props, child, index) {
+var baseButtonStyle = function (childrenCount, index, utils, props) { return [
+    getButtonSizeClasses,
+    getButtonOverrides(utils, __assign(__assign({}, props), { $index: index, $childrenCount: childrenCount })),
+    getButtonThemeOverrideStyles,
+]; };
+export var renderButtonGroupChild = function (buttonGroupProps, child, index) {
     var _a;
     if (!React.isValidElement(child)) {
         return null;
     }
-    var disabled = props.disabled, onClick = props.onClick, variant = props.variant, size = props.size, children = props.children, shape = props.shape, selected = props.selected, intent = props.intent, onKeyDown = props.onKeyDown;
+    var mergedOverrides = mergeOverrides({
+        BaseButton: {
+            props: {
+                $isRenderedInsideButtonGroup: true,
+            },
+            //@ts-ignore -- css variables declaration
+            style: function (_a, _) {
+                var theme = _a.theme;
+                return ({
+                    '--sw-ai-button-hover-background': theme.ai.border01.background,
+                    '--sw-padding-block-start': '0.45rem',
+                    '--sw-padding-block-end': '0.45rem',
+                });
+            },
+        },
+    }, child.props.overrides);
+    var disabled = buttonGroupProps.disabled, onClick = buttonGroupProps.onClick, variant = buttonGroupProps.variant, size = buttonGroupProps.size, children = buttonGroupProps.children, shape = buttonGroupProps.shape, selected = buttonGroupProps.selected, intent = buttonGroupProps.intent, onKeyDown = buttonGroupProps.onKeyDown, isButtonGroupFocused = buttonGroupProps.isButtonGroupFocused;
     var childrenCount = React.Children.count(children);
     var onChildClick = function (event) {
         if (disabled) {
@@ -135,7 +116,26 @@ export var renderButtonGroupChild = function (props, child, index) {
         onKeyDown(event);
         (_b = (_a = child.props).onKeyDown) === null || _b === void 0 ? void 0 : _b.call(_a, event);
     };
-    return React.cloneElement(child, __assign({ disabled: child.props.disabled || disabled, variant: child.props.variant || variant, size: child.props.size || size, shape: child.props.shape || shape, intent: child.props.intent || intent, isSelected: isSelected(selected, index), 'aria-selected': isSelected(selected, index), className: [baseButtonStyle.bind(null, childrenCount, index), child.props.className], onClick: onChildClick, onKeyDown: onChildKeyDown }, (isAnyButtonSelected(selected)
-        ? { tabIndex: (_a = child.props.tabIndex) !== null && _a !== void 0 ? _a : (isSelected(selected, index) ? 0 : -1) }
-        : {})));
+    return React.cloneElement(child, {
+        disabled: child.props.disabled || disabled,
+        variant: child.props.variant || variant,
+        size: child.props.size || size,
+        shape: child.props.shape || shape,
+        intent: child.props.intent || intent,
+        isSelected: isSelected(selected, index),
+        'aria-selected': isSelected(selected, index),
+        role: (_a = child.props.role) !== null && _a !== void 0 ? _a : 'tab',
+        className: [
+            baseButtonStyle.bind(null, childrenCount, index),
+            function (_, _a) {
+                var $isSelected = _a.$isSelected;
+                return ($isSelected ? 'forced-colors:border-2' : '');
+            },
+            child.props.className,
+        ],
+        overrides: mergedOverrides,
+        onClick: onChildClick,
+        onKeyDown: onChildKeyDown,
+        tabIndex: isButtonGroupFocused ? -1 : getTabIndex(child, childrenCount, index, selected),
+    });
 };

package/esm/button-group/types.d.ts

@@ -4,11 +4,13 @@ import { Variant, Size, ClassName, SpacewebComponentProps, Intent } from '../typ
 import { Variant as IconTextButtonVariant } from '../button/IconTextButton';
 import { Shape, ButtonSharedProps } from '../button';
 import { AriaRole } from 'react';
-declare type ButtonGroupOverrides = {
+type ButtonGroupOverrides = {
     Root?: Override<any>;
 };
-declare type Mode = 'checkbox' | 'radio';
-export declare type ButtonGroupProps = SpacewebComponentProps<{
+type Mode = 'checkbox' | 'radio';
+type ButtonGroupSize = Exclude<Size, 'small' | 'large'>;
+type Layout = 'horizontal' | 'vertical';
+export type ButtonGroupProps = SpacewebComponentProps<{
     children?: React.ReactNode;
     className?: ClassName;
     disabled?: boolean;
@@ -17,27 +19,47 @@ export declare type ButtonGroupProps = SpacewebComponentProps<{
     overrides?: ButtonGroupOverrides;
     selected?: number | number[];
     shape?: Shape;
-    size?: Size;
+    size?: ButtonGroupSize;
+    bordered?: boolean;
+    layout?: Layout;
+    /** @deprecated */
     intent?: Intent;
     variant?: Variant | IconTextButtonVariant;
     activateOnFocus?: boolean;
     role?: AriaRole | undefined;
+    onFocus?: (event: React.FocusEvent<HTMLElement>) => void;
+    onBlur?: (event: React.FocusEvent<HTMLElement>) => void;
 }>;
-export declare type ButtonGroupChildProps = {
+export type ButtonGroupChildProps = {
     className?: ClassName;
     isSelected?: boolean;
     disabled?: boolean;
     variant?: Variant | IconTextButtonVariant;
-    size?: Size;
+    size?: ButtonGroupSize;
     shape?: Shape;
+    bordered?: boolean;
+    layout?: Layout;
+    /** @deprecated */
     intent?: Intent;
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
     overrides?: Overrides<ButtonSharedProps>;
     onKeyDown?: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
     tabIndex?: number;
     'aria-selected'?: boolean;
+    role?: AriaRole;
 };
-export declare type StatefulButtonGroupProps = ButtonGroupProps & {
+export type StatefulButtonGroupProps = ButtonGroupProps & {
     initialState?: number[];
 };
+export type ButtonGroupSharedProps = {
+    /** @deprecated */
+    $intent?: Intent;
+    $variant?: Variant | IconTextButtonVariant;
+    $shape?: Shape;
+    $mode?: Mode;
+    $disabled?: boolean;
+    $size?: ButtonGroupSize;
+    $bordered?: boolean;
+    $layout?: Layout;
+};
 export {};

package/esm/checkbox/checkbox.d.ts

@@ -1,10 +1,7 @@
-import { PropsWithChildren, ReactElement } from 'react';
-import { CheckboxProps, StatefulCheckboxProps } from './types';
-export declare const Checkbox: {
-    (props: PropsWithChildren<CheckboxProps>): ReactElement;
-    displayName: string;
-};
-export declare const StatefulCheckbox: {
-    (props: PropsWithChildren<StatefulCheckboxProps>): ReactElement;
+import type { CheckboxProps } from './types';
+declare const Checkbox: {
+    ({ overrides, checked, containsInteractiveElement, disabled, autoFocus, isIndeterminate, error, checkmarkType, onChange, onMouseEnter, onMouseLeave, onMouseDown, onMouseUp, onFocus, onBlur, required, labelPlacement, value, id, name, children, title, "aria-label": _ariaLabel, "aria-describedby": ariaDescribedby, "aria-errormessage": ariaErrormessage, ariaLabel, inputRef, className, style, size, intent: _intent, $outlineStyle, $outlineColor, $outlineOffset, $outlineWidth, "data-spaceweb": dataSpaceweb, }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
+    __standard: string;
 };
+export default Checkbox;

package/esm/checkbox/checkbox.js

@@ -1,17 +1,141 @@
-import { __assign } from "tslib";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Checkbox as BaseCheckbox, StatefulCheckbox as BaseStatefulCheckbox } from '../baseui/checkbox';
-import useCheckboxAdapter from './basewebAdapters';
-// @ts-ignore
-BaseCheckbox.displayName = 'BaseUICheckbox';
-BaseStatefulCheckbox.displayName = 'BaseUIStatefulCheckbox';
-export var Checkbox = function (props) {
-    var adaptedProps = useCheckboxAdapter(props);
-    return _jsx(BaseCheckbox, __assign({}, adaptedProps), void 0);
+import { __assign, __read } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getCheckmarkBackgroundColor, getCheckmarkBorderColor, getTrackBackgroundColor, getTrackBorderColor, StyledCheckmark, StyledInput, StyledLabel, StyledRoot, StyledToggle, StyledToggleTrack, } from './styled-components';
+import { STYLE_TYPE } from './constants';
+import { isFocusVisible } from '../baseui/utils/focusVisible';
+import _noop from 'lodash/noop';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import useCombinedRefs from '../hooks/useCombinedRef';
+import { useOverrides } from '../overrides';
+import { useContextualFormProps } from '../form-control/context';
+import { useStyle } from '../style';
+import Tick from '../icon/components/tick';
+import Indeterminate from '../icon/components/subtract';
+var stopPropagation = function (e) { return e.stopPropagation(); };
+var Checkbox = function (_a) {
+    var _b = _a.overrides, overrides = _b === void 0 ? {} : _b, _c = _a.checked, checked = _c === void 0 ? false : _c, _d = _a.containsInteractiveElement, containsInteractiveElement = _d === void 0 ? false : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.autoFocus, autoFocus = _f === void 0 ? false : _f, _g = _a.isIndeterminate, isIndeterminate = _g === void 0 ? false : _g, _h = _a.error, error = _h === void 0 ? false : _h, _j = _a.checkmarkType, checkmarkType = _j === void 0 ? STYLE_TYPE.default : _j, _k = _a.onChange, onChange = _k === void 0 ? _noop : _k, _l = _a.onMouseEnter, onMouseEnter = _l === void 0 ? _noop : _l, _m = _a.onMouseLeave, onMouseLeave = _m === void 0 ? _noop : _m, _o = _a.onMouseDown, onMouseDown = _o === void 0 ? _noop : _o, _p = _a.onMouseUp, onMouseUp = _p === void 0 ? _noop : _p, _q = _a.onFocus, onFocus = _q === void 0 ? _noop : _q, _r = _a.onBlur, onBlur = _r === void 0 ? _noop : _r, required = _a.required, _s = _a.labelPlacement, labelPlacement = _s === void 0 ? 'right' : _s, value = _a.value, id = _a.id, name = _a.name, children = _a.children, title = _a.title, _ariaLabel = _a["aria-label"], ariaDescribedby = _a["aria-describedby"], ariaErrormessage = _a["aria-errormessage"], ariaLabel = _a.ariaLabel, inputRef = _a.inputRef, className = _a.className, style = _a.style, _t = _a.size, size = _t === void 0 ? 'md' : _t, _intent = _a.intent, $outlineStyle = _a.$outlineStyle, $outlineColor = _a.$outlineColor, $outlineOffset = _a.$outlineOffset, $outlineWidth = _a.$outlineWidth, dataSpaceweb = _a["data-spaceweb"];
+    var intent = useContextualFormProps({
+        intent: _intent,
+    }).intent;
+    var _u = __read(useState({
+        isFocused: autoFocus || false,
+        isFocusVisible: false,
+        isHovered: false,
+        isActive: false,
+    }), 2), state = _u[0], setState = _u[1];
+    var _inputRef = useRef(null);
+    var mergedRef = useCombinedRefs(_inputRef, inputRef);
+    useEffect(function () {
+        if (autoFocus && _inputRef.current) {
+            _inputRef.current.focus();
+        }
+        if (_inputRef.current) {
+            _inputRef.current.indeterminate = Boolean(isIndeterminate);
+        }
+    }, [autoFocus, isIndeterminate]);
+    useEffect(function () {
+        if (_inputRef.current) {
+            _inputRef.current.indeterminate = Boolean(isIndeterminate);
+        }
+    }, [isIndeterminate]);
+    var handleMouseEnter = useCallback(function (e) {
+        setState(function (prevState) { return (__assign(__assign({}, prevState), { isHovered: true })); });
+        onMouseEnter(e);
+    }, [setState, onMouseEnter]);
+    var handleMouseLeave = useCallback(function (e) {
+        setState(function (prevState) { return (__assign(__assign({}, prevState), { isHovered: false, isActive: false })); });
+        onMouseLeave(e);
+    }, [setState, onMouseLeave]);
+    var handleMouseDown = useCallback(function (e) {
+        setState(function (prevState) { return (__assign(__assign({}, prevState), { isActive: true })); });
+        onMouseDown(e);
+    }, [setState, onMouseDown]);
+    var handleMouseUp = useCallback(function (e) {
+        setState(function (prevState) { return (__assign(__assign({}, prevState), { isActive: false })); });
+        onMouseUp(e);
+    }, [setState, onMouseUp]);
+    var handleFocus = useCallback(function (e) {
+        setState(function (prevState) { return (__assign(__assign({}, prevState), { isFocused: true })); });
+        onFocus(e);
+        if (isFocusVisible(e)) {
+            setState(function (prevState) { return (__assign(__assign({}, prevState), { isFocusVisible: true })); });
+        }
+    }, [setState, onFocus]);
+    var handleBlur = useCallback(function (e) {
+        setState(function (prevState) { return (__assign(__assign({}, prevState), { isFocused: false })); });
+        onBlur(e);
+        if (state.isFocusVisible) {
+            setState(function (prevState) { return (__assign(__assign({}, prevState), { isFocusVisible: false })); });
+        }
+    }, [setState, onBlur, state.isFocusVisible]);
+    var RootOverride = overrides.Root, CheckmarkOverride = overrides.Checkmark, LabelOverride = overrides.Label, InputOverride = overrides.Input, ToggleOverride = overrides.Toggle, ToggleTrackOverride = overrides.ToggleTrack;
+    var _v = __read(useOverrides(RootOverride, StyledRoot), 2), Root = _v[0], rootProps = _v[1];
+    var _w = __read(useOverrides(CheckmarkOverride, StyledCheckmark), 2), Checkmark = _w[0], checkMarkProps = _w[1];
+    var _x = __read(useOverrides(LabelOverride, StyledLabel), 2), Label = _x[0], labelProps = _x[1];
+    var _y = __read(useOverrides(InputOverride, StyledInput), 2), Input = _y[0], inputProps = _y[1];
+    var _z = __read(useOverrides(ToggleOverride, StyledToggle), 2), Toggle = _z[0], toggleProps = _z[1];
+    var _0 = __read(useOverrides(ToggleTrackOverride, StyledToggleTrack), 2), ToggleTrack = _0[0], toggleTrackProps = _0[1];
+    var inputEvents = {
+        onChange: onChange,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+    };
+    var mouseEvents = {
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onMouseDown: handleMouseDown,
+        onMouseUp: handleMouseUp,
+    };
+    var sharedProps = {
+        $isFocused: state.isFocused,
+        $isFocusVisible: state.isFocusVisible,
+        $isHovered: state.isHovered,
+        $isActive: state.isActive,
+        $error: error,
+        $checked: checked,
+        $isIndeterminate: isIndeterminate,
+        $required: required,
+        $disabled: disabled,
+        $value: value,
+        $size: size,
+        $intent: intent,
+        $outlineStyle: $outlineStyle,
+        $outlineColor: $outlineColor,
+        $outlineOffset: $outlineOffset,
+        $outlineWidth: $outlineWidth,
+        $labelPlacement: labelPlacement,
+    };
+    var labelComp = children && (_jsx(Label, __assign({}, sharedProps, labelProps, { children: containsInteractiveElement ? (
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions -- prevents the event from bubbling up to the label and moving focus to the radio button
+        _jsx("div", __assign({ onClick: function (e) { return e.preventDefault(); } }, { children: children }))) : (children) })));
+    var getCheckmarkIcon = function () {
+        if (isIndeterminate) {
+            return _jsx(Indeterminate, { size: size === 'medium' || size === 'large' ? 10 : 8 });
+        }
+        if (checked) {
+            return _jsx(Tick, { size: size === 'large' ? 10 : 8 });
+        }
+        return null;
+    };
+    var checkmarkComp = (_jsx(Checkmark, __assign({}, sharedProps, checkMarkProps, { children: getCheckmarkIcon() })));
+    var utils = useStyle();
+    return (_jsxs(Root, __assign({ "data-spaceweb": dataSpaceweb !== null && dataSpaceweb !== void 0 ? dataSpaceweb : 'checkbox', title: title || null }, sharedProps, mouseEvents, rootProps, { style: [
+            {
+                '--sw-bg-color': checkmarkType === STYLE_TYPE.toggle
+                    ? getTrackBackgroundColor(utils, sharedProps)
+                    : getCheckmarkBackgroundColor(utils, sharedProps),
+                '--sw-border-color': checkmarkType === STYLE_TYPE.toggle
+                    ? getTrackBorderColor(utils, sharedProps)
+                    : getCheckmarkBorderColor(utils, sharedProps),
+                '--sw-bg-size': size === 'lg' ? '0.9rem 0.7rem' : '0.8rem 0.6rem',
+            },
+            style,
+            rootProps === null || rootProps === void 0 ? void 0 : rootProps.style,
+        ], className: [className, rootProps === null || rootProps === void 0 ? void 0 : rootProps.className] }, { children: [(labelPlacement === 'top' || labelPlacement === 'left') && labelComp, checkmarkType === STYLE_TYPE.toggle ? (_jsx(ToggleTrack, __assign({}, sharedProps, toggleTrackProps, { children: _jsx(Toggle, __assign({}, sharedProps, toggleProps)) }))) : (checkmarkComp), _jsx(Input, __assign({ value: value, id: id, name: name, checked: checked, required: required, "aria-label": ariaLabel || _ariaLabel, "aria-describedby": ariaDescribedby, "aria-checked": !!checked, "aria-errormessage": ariaErrormessage, "aria-invalid": error || null, "aria-required": required || null, disabled: disabled, type: "checkbox", ref: mergedRef, 
+                // Prevent a second click event from firing when label is clicked.
+                // See https://github.com/uber/baseweb/issues/3847
+                onClick: stopPropagation, role: checkmarkType === STYLE_TYPE.toggle ? 'switch' : undefined }, sharedProps, inputEvents, inputProps)), (labelPlacement === 'bottom' || labelPlacement === 'right') && labelComp] })));
 };
+export default Checkbox;
 Checkbox.displayName = 'Checkbox';
-export var StatefulCheckbox = function (props) {
-    var adaptedProps = useCheckboxAdapter(props);
-    return _jsx(BaseStatefulCheckbox, __assign({}, adaptedProps), void 0);
-};
-StatefulCheckbox.displayName = 'StatefulCheckbox';
+Checkbox.__standard = 'Component';

package/esm/checkbox/constants.d.ts

@@ -0,0 +1,13 @@
+export declare const STATE_TYPE: {
+    readonly change: "CHANGE";
+};
+export declare const STYLE_TYPE: Readonly<{
+    readonly default: "default";
+    readonly toggle: "toggle";
+}>;
+export declare const LABEL_PLACEMENT: Readonly<{
+    readonly top: "top";
+    readonly right: "right";
+    readonly bottom: "bottom";
+    readonly left: "left";
+}>;

package/esm/checkbox/constants.js

@@ -0,0 +1,13 @@
+export var STATE_TYPE = {
+    change: 'CHANGE',
+};
+export var STYLE_TYPE = Object.freeze({
+    default: 'default',
+    toggle: 'toggle',
+});
+export var LABEL_PLACEMENT = Object.freeze({
+    top: 'top',
+    right: 'right',
+    bottom: 'bottom',
+    left: 'left',
+});

package/esm/checkbox/hooks/useStatefulCheckbox.d.ts

@@ -0,0 +1,14 @@
+import { StatefulContainerProps } from '../types';
+import type { ChangeEvent, FocusEvent, MouseEvent } from 'react';
+declare const useStatefulCheckbox: ({ initialState, stateReducer, onChange, onMouseEnter, onMouseLeave, onFocus, onBlur, ...restProps }: StatefulContainerProps) => {
+    checked: boolean | undefined;
+    isIndeterminate: boolean | undefined;
+    onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+    onMouseEnter: (e: MouseEvent<HTMLInputElement>) => unknown;
+    onMouseLeave: (e: MouseEvent<HTMLInputElement>) => unknown;
+    onFocus: (e: FocusEvent<HTMLInputElement>) => unknown;
+    onBlur: (e: FocusEvent<HTMLInputElement>) => unknown;
+    overrides?: import("../types").CheckboxOverrides | undefined;
+    autoFocus?: boolean | undefined;
+};
+export default useStatefulCheckbox;

package/esm/checkbox/hooks/useStatefulCheckbox.js

@@ -0,0 +1,31 @@
+import { __assign, __read, __rest } from "tslib";
+import { useState, useCallback } from 'react';
+import { STATE_TYPE } from '../constants';
+import _noop from 'lodash/noop';
+var defaultStateReducer = function (_, nextState) { return nextState; };
+var useStatefulCheckbox = function (_a) {
+    var _b = _a.initialState, initialState = _b === void 0 ? { checked: false, isIndeterminate: false } : _b, _c = _a.stateReducer, stateReducer = _c === void 0 ? defaultStateReducer : _c, _d = _a.onChange, onChange = _d === void 0 ? _noop : _d, _e = _a.onMouseEnter, onMouseEnter = _e === void 0 ? _noop : _e, _f = _a.onMouseLeave, onMouseLeave = _f === void 0 ? _noop : _f, _g = _a.onFocus, onFocus = _g === void 0 ? _noop : _g, _h = _a.onBlur, onBlur = _h === void 0 ? _noop : _h, restProps = __rest(_a, ["initialState", "stateReducer", "onChange", "onMouseEnter", "onMouseLeave", "onFocus", "onBlur"]);
+    var _j = __read(useState(__assign({}, initialState)), 2), state = _j[0], setState = _j[1];
+    var handleStateReducer = useCallback(function (type, e) {
+        var nextState = {};
+        switch (type) {
+            case STATE_TYPE.change:
+                nextState = { checked: e.target.checked };
+                break;
+            default:
+                break;
+        }
+        var newState = stateReducer(type, nextState, state, e);
+        setState(function (prevState) { return (__assign(__assign({}, prevState), newState)); });
+    }, [stateReducer, state]);
+    var handleChange = useCallback(function (e) {
+        handleStateReducer(STATE_TYPE.change, e);
+        onChange(e);
+    }, [handleStateReducer, onChange]);
+    var handleMouseEnter = useCallback(function (e) { return onMouseEnter(e); }, [onMouseEnter]);
+    var handleMouseLeave = useCallback(function (e) { return onMouseLeave(e); }, [onMouseLeave]);
+    var handleFocus = useCallback(function (e) { return onFocus(e); }, [onFocus]);
+    var handleBlur = useCallback(function (e) { return onBlur(e); }, [onBlur]);
+    return __assign(__assign({}, restProps), { checked: state.checked, isIndeterminate: state.isIndeterminate, onChange: handleChange, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onFocus: handleFocus, onBlur: handleBlur });
+};
+export default useStatefulCheckbox;

package/esm/checkbox/index.d.ts

@@ -1,5 +1,5 @@
-export { Checkbox, StatefulCheckbox } from './checkbox';
-export { StatefulContainer, StyledRoot, StyledCheckmark, StyledLabel, StyledInput, StyledToggle, StyledToggleTrack, } from '../baseui/checkbox';
-export type { StateReducer, StatefulContainerProps, CheckboxOverrides, CheckboxState } from '../baseui/checkbox';
-export { STATE_TYPE, STYLE_TYPE } from '../baseui/checkbox';
+export { default as Checkbox } from './checkbox';
+export { default as StatefulCheckbox } from './stateful-checkbox';
+export { StyledRoot, StyledCheckmark, StyledLabel, StyledInput, StyledToggle, StyledToggleTrack, } from './styled-components';
+export { STATE_TYPE, STYLE_TYPE } from './constants';
 export * from './types';

package/esm/checkbox/index.js

@@ -1,4 +1,5 @@
-export { Checkbox, StatefulCheckbox } from './checkbox';
-export { StatefulContainer, StyledRoot, StyledCheckmark, StyledLabel, StyledInput, StyledToggle, StyledToggleTrack, } from '../baseui/checkbox';
-export { STATE_TYPE, STYLE_TYPE } from '../baseui/checkbox';
+export { default as Checkbox } from './checkbox';
+export { default as StatefulCheckbox } from './stateful-checkbox';
+export { StyledRoot, StyledCheckmark, StyledLabel, StyledInput, StyledToggle, StyledToggleTrack, } from './styled-components';
+export { STATE_TYPE, STYLE_TYPE } from './constants';
 export * from './types';

package/esm/checkbox/stateful-checkbox.js

@@ -0,0 +1,10 @@
+import { __assign } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import Checkbox from './checkbox';
+import useStatefulCheckbox from './hooks/useStatefulCheckbox';
+var StatefulCheckbox = function (props) {
+    var adaptedProps = useStatefulCheckbox(props);
+    return _jsx(Checkbox, __assign({}, adaptedProps));
+};
+StatefulCheckbox.displayName = 'StatefulCheckbox';
+export default StatefulCheckbox;

package/esm/checkbox/styled-components.d.ts

@@ -1,5 +1,12 @@
-import { StyleFn, StyleObject } from '../types';
+import { StyleUtils } from '../types';
 import { SharedProps } from './types';
-export declare const getLabelOverrides: StyleFn<SharedProps>;
-export declare const getCheckmarkOverrides: StyleFn<SharedProps>;
-export declare const getRootOverrides: () => StyleObject;
+export declare const getCheckmarkBorderColor: (utils: StyleUtils, props: SharedProps) => string;
+export declare const getCheckmarkBackgroundColor: (utils: StyleUtils, props: SharedProps) => string;
+export declare const StyledRoot: import("../style").StyledComponent;
+export declare const StyledCheckmark: import("../style").StyledComponent;
+export declare const StyledLabel: import("../style").StyledComponent;
+export declare const StyledInput: import("../style").StyledComponent;
+export declare const StyledToggle: import("../style").StyledComponent;
+export declare const getTrackBackgroundColor: (utils: StyleUtils, props: SharedProps) => string;
+export declare const getTrackBorderColor: (utils: StyleUtils, props: SharedProps) => string;
+export declare const StyledToggleTrack: import("../style").StyledComponent;