@instructure/ui-checkbox 11.6.0 → 11.6.1-snapshot-129

package/es/Checkbox/v2/CheckboxFacade/index.js

@@ -0,0 +1,104 @@
+var _dec, _class, _CheckboxFacade;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { Component } from 'react';
+import { CheckInstUIIcon, MinusInstUIIcon, renderIconWithProps } from '@instructure/ui-icons';
+import { withStyle } from '@instructure/emotion';
+import generateStyle from "./styles.js";
+import { allowedProps } from "./props.js";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/**
+---
+parent: Checkbox
+---
+**/
+let CheckboxFacade = (_dec = withStyle(generateStyle, 'Checkbox'), _dec(_class = (_CheckboxFacade = class CheckboxFacade extends Component {
+  constructor(...args) {
+    super(...args);
+    this.ref = null;
+    this.handleRef = el => {
+      this.ref = el;
+    };
+  }
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props;
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+  }
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props2;
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+  }
+  renderIcon() {
+    const _this$props3 = this.props,
+      disabled = _this$props3.disabled,
+      readOnly = _this$props3.readOnly,
+      indeterminate = _this$props3.indeterminate,
+      checked = _this$props3.checked;
+    const getIconColor = () => {
+      if (disabled) {
+        return 'disabledBaseColor';
+      }
+      if (readOnly) {
+        return 'baseColor';
+      }
+      return 'inverseColor';
+    };
+    const iconColor = getIconColor();
+    if (indeterminate) {
+      return renderIconWithProps(MinusInstUIIcon, 'sm', iconColor);
+    } else if (checked) {
+      return renderIconWithProps(CheckInstUIIcon, 'sm', iconColor);
+    } else {
+      return null;
+    }
+  }
+  render() {
+    const _this$props4 = this.props,
+      children = _this$props4.children,
+      styles = _this$props4.styles;
+    return _jsxs("span", {
+      css: styles === null || styles === void 0 ? void 0 : styles.checkboxFacade,
+      ref: this.handleRef,
+      children: [_jsx("span", {
+        css: styles === null || styles === void 0 ? void 0 : styles.facade,
+        "aria-hidden": "true",
+        children: this.renderIcon()
+      }), _jsx("span", {
+        css: styles === null || styles === void 0 ? void 0 : styles.label,
+        children: children
+      })]
+    });
+  }
+}, _CheckboxFacade.displayName = "CheckboxFacade", _CheckboxFacade.componentId = 'CheckboxFacade', _CheckboxFacade.allowedProps = allowedProps, _CheckboxFacade.defaultProps = {
+  checked: false,
+  disabled: false,
+  readOnly: false,
+  focused: false,
+  hovered: false,
+  size: 'medium',
+  indeterminate: false
+}, _CheckboxFacade)) || _class);
+export default CheckboxFacade;
+export { CheckboxFacade };

package/es/Checkbox/v2/CheckboxFacade/props.js

@@ -0,0 +1,26 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const allowedProps = ['children', 'checked', 'disabled', 'readOnly', 'focused', 'hovered', 'size', 'indeterminate', 'invalid'];
+export { allowedProps };

package/es/Checkbox/v2/CheckboxFacade/styles.js

@@ -0,0 +1,177 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { calcFocusOutlineStyles } from '@instructure/emotion';
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} sharedTokens Shared theme token object
+ * @param  {Object} state the state of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (componentTheme, props, sharedTokens) => {
+  var _sizeVariants;
+  const size = props.size,
+    checked = props.checked,
+    disabled = props.disabled,
+    readOnly = props.readOnly,
+    focused = props.focused,
+    hovered = props.hovered,
+    indeterminate = props.indeterminate,
+    invalid = props.invalid;
+  const isChecked = checked || indeterminate;
+  const sizeVariants = {
+    small: {
+      label: {
+        fontSize: componentTheme.fontSizeSm
+      },
+      facade: {
+        fontSize: componentTheme.fontSizeSm,
+        width: componentTheme.controlSizeSm,
+        height: componentTheme.controlSizeSm,
+        margin: `${componentTheme.controlVerticalMargin} ${componentTheme.gap} 0 0`
+      }
+    },
+    medium: {
+      label: {
+        fontSize: componentTheme.fontSizeMd
+      },
+      facade: {
+        fontSize: componentTheme.fontSizeMd,
+        width: componentTheme.controlSizeMd,
+        height: componentTheme.controlSizeMd
+      }
+    },
+    large: {
+      label: {
+        fontSize: componentTheme.fontSizeLg
+      },
+      facade: {
+        fontSize: componentTheme.fontSizeLg,
+        width: componentTheme.controlSizeLg,
+        height: componentTheme.controlSizeLg
+      }
+    }
+  };
+  const sizeVariant = (_sizeVariants = sizeVariants[size]) !== null && _sizeVariants !== void 0 ? _sizeVariants : sizeVariants.medium;
+  const getLabelColor = () => {
+    if (disabled) {
+      return componentTheme.labelDisabledColor;
+    }
+    if (readOnly) {
+      return componentTheme.labelReadonlyColor;
+    }
+
+    // DEFAULT state
+    return hovered ? componentTheme.labelHoverColor : componentTheme.labelBaseColor;
+  };
+  const getFacadeStyles = () => {
+    const baseStyles = {
+      position: 'relative',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      boxSizing: 'border-box',
+      flexShrink: 0,
+      transition: 'all 0.2s',
+      borderRadius: componentTheme.borderRadius,
+      marginInlineEnd: componentTheme.gap,
+      marginInlineStart: '0',
+      ...sizeVariant.facade
+    };
+    if (disabled) {
+      return {
+        ...baseStyles,
+        background: componentTheme.backgroundDisabledColor,
+        border: `${componentTheme.borderWidth} solid ${componentTheme.borderDisabledColor}`
+      };
+    }
+    if (readOnly) {
+      return {
+        ...baseStyles,
+        background: componentTheme.backgroundReadonlyColor,
+        border: `${componentTheme.borderWidth} solid ${componentTheme.borderReadonlyColor}`,
+        pointerEvents: 'none'
+      };
+    }
+    if (invalid) {
+      return {
+        ...baseStyles,
+        ...(isChecked && {
+          background: componentTheme.backgroundCheckedColor,
+          border: `${componentTheme.borderWidth} solid ${hovered ? componentTheme.errorBorderHoverColor : componentTheme.errorBorderColor}`
+        }),
+        ...(!isChecked && {
+          background: hovered ? componentTheme.backgroundHoverColor : componentTheme.backgroundColor,
+          border: `${componentTheme.borderWidth} solid ${hovered ? componentTheme.errorBorderHoverColor : componentTheme.errorBorderColor}`
+        })
+      };
+    }
+    if (isChecked) {
+      return {
+        ...baseStyles,
+        background: componentTheme.backgroundCheckedColor,
+        border: `${componentTheme.borderWidth} solid ${componentTheme.borderCheckedColor}`
+      };
+    }
+
+    // DEFAULT (unchecked) state
+    return {
+      ...baseStyles,
+      background: hovered ? componentTheme.backgroundHoverColor : componentTheme.backgroundColor,
+      border: `${componentTheme.borderWidth} solid ${hovered ? componentTheme.borderHoverColor : componentTheme.borderColor}`
+    };
+  };
+  return {
+    checkboxFacade: {
+      label: 'checkboxFacade',
+      display: 'flex',
+      alignItems: 'flex-start',
+      cursor: disabled ? 'not-allowed' : readOnly ? 'default' : 'pointer'
+    },
+    facade: {
+      label: 'checkboxFacade__facade',
+      ...getFacadeStyles(),
+      ...(sharedTokens !== null && sharedTokens !== void 0 && sharedTokens.focusOutline ? calcFocusOutlineStyles(sharedTokens.focusOutline, {
+        withFocusOutline: focused
+      }) : {})
+    },
+    label: {
+      label: 'checkboxFacade__label',
+      flex: '1 1 auto',
+      alignSelf: 'center',
+      minWidth: '0.0625rem',
+      color: getLabelColor(),
+      fontFamily: componentTheme.fontFamily,
+      fontWeight: componentTheme.fontWeight,
+      lineHeight: componentTheme.lineHeight,
+      ...sizeVariant.label
+    }
+  };
+};
+export default generateStyle;

package/es/Checkbox/v2/ToggleFacade/index.js

@@ -0,0 +1,116 @@
+var _dec, _class, _ToggleFacade;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { Component } from 'react';
+import { CheckInstUIIcon, XInstUIIcon, renderIconWithProps } from '@instructure/ui-icons';
+import { withStyle } from '@instructure/emotion';
+import generateStyle from "./styles.js";
+import { allowedProps } from "./props.js";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/**
+---
+parent: Checkbox
+---
+**/
+let ToggleFacade = (_dec = withStyle(generateStyle, 'Toggle'), _dec(_class = (_ToggleFacade = class ToggleFacade extends Component {
+  constructor(...args) {
+    super(...args);
+    this.ref = null;
+    this.handleRef = el => {
+      this.ref = el;
+    };
+  }
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props;
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+  }
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props2;
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+  }
+  renderIcon() {
+    const _this$props3 = this.props,
+      disabled = _this$props3.disabled,
+      readOnly = _this$props3.readOnly,
+      checked = _this$props3.checked;
+    const getIconColor = () => {
+      if (disabled) {
+        return 'disabledBaseColor';
+      }
+      if (readOnly) {
+        return 'mutedColor';
+      }
+      if (checked) {
+        return 'successColor';
+      }
+      return 'baseColor';
+    };
+    const iconColor = getIconColor();
+    if (checked) {
+      return renderIconWithProps(CheckInstUIIcon, 'xs', iconColor);
+    } else {
+      return renderIconWithProps(XInstUIIcon, 'xs', iconColor);
+    }
+  }
+  renderLabel() {
+    const _this$props4 = this.props,
+      children = _this$props4.children,
+      styles = _this$props4.styles;
+    return _jsx("span", {
+      css: styles === null || styles === void 0 ? void 0 : styles.label,
+      children: children
+    });
+  }
+  render() {
+    const _this$props5 = this.props,
+      labelPlacement = _this$props5.labelPlacement,
+      styles = _this$props5.styles;
+    return _jsxs("span", {
+      css: styles === null || styles === void 0 ? void 0 : styles.toggleFacade,
+      ref: this.handleRef,
+      children: [(labelPlacement === 'top' || labelPlacement === 'start') && this.renderLabel(), _jsx("span", {
+        css: styles === null || styles === void 0 ? void 0 : styles.facade,
+        "aria-hidden": "true",
+        children: _jsx("span", {
+          css: styles === null || styles === void 0 ? void 0 : styles.icon,
+          children: _jsx("span", {
+            css: styles === null || styles === void 0 ? void 0 : styles.iconToggle,
+            children: this.renderIcon()
+          })
+        })
+      }), labelPlacement === 'end' && this.renderLabel()]
+    });
+  }
+}, _ToggleFacade.displayName = "ToggleFacade", _ToggleFacade.componentId = 'ToggleFacade', _ToggleFacade.allowedProps = allowedProps, _ToggleFacade.defaultProps = {
+  checked: false,
+  focused: false,
+  hovered: false,
+  size: 'medium',
+  disabled: false,
+  readOnly: false,
+  labelPlacement: 'end'
+}, _ToggleFacade)) || _class);
+export default ToggleFacade;
+export { ToggleFacade };

package/es/Checkbox/v2/ToggleFacade/props.js

@@ -0,0 +1,26 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const allowedProps = ['children', 'checked', 'disabled', 'readOnly', 'focused', 'hovered', 'size', 'labelPlacement', 'invalid'];
+export { allowedProps };

package/es/Checkbox/v2/ToggleFacade/styles.js

@@ -0,0 +1,232 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { boxShadowObjectsToCSSString } from '@instructure/ui-themes';
+import { calcFocusOutlineStyles } from '@instructure/emotion';
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} sharedTokens Shared theme token object
+ * @param  {Object} state the state of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (componentTheme, props, sharedTokens) => {
+  var _labelPlacementVarian, _labelSizeVariants;
+  const disabled = props.disabled,
+    size = props.size,
+    checked = props.checked,
+    readOnly = props.readOnly,
+    focused = props.focused,
+    hovered = props.hovered,
+    labelPlacement = props.labelPlacement,
+    invalid = props.invalid;
+  const labelPlacementVariants = {
+    start: {
+      facade: {
+        marginInlineEnd: componentTheme.marginEnd,
+        marginInlineStart: componentTheme.marginStart
+      },
+      label: {
+        textAlign: 'end'
+      }
+    },
+    end: {
+      facade: {
+        marginInlineEnd: componentTheme.marginEnd
+      },
+      label: {}
+    },
+    top: {
+      facade: {
+        marginTop: componentTheme.marginVertical
+      },
+      label: {
+        display: 'block'
+      }
+    }
+  };
+  const labelPlacementVariant = (_labelPlacementVarian = labelPlacementVariants[labelPlacement]) !== null && _labelPlacementVarian !== void 0 ? _labelPlacementVarian : labelPlacementVariants.end;
+  const labelSizeVariants = {
+    small: {
+      fontSize: componentTheme.labelFontSizeSm,
+      lineHeight: componentTheme.labelLineHeightSm
+    },
+    medium: {
+      fontSize: componentTheme.labelFontSizeMd,
+      lineHeight: componentTheme.labelLineHeightMd
+    },
+    large: {
+      fontSize: componentTheme.labelFontSizeLg,
+      lineHeight: componentTheme.labelLineHeightLg
+    }
+  };
+  const sizeVariant = (_labelSizeVariants = labelSizeVariants[size]) !== null && _labelSizeVariants !== void 0 ? _labelSizeVariants : labelSizeVariants.medium;
+  const getIconBorderColor = () => {
+    if (disabled) {
+      return checked ? componentTheme.checkedIconBorderDisabledColor : componentTheme.uncheckedIconBorderDisabledColor;
+    }
+    if (readOnly) {
+      return checked ? componentTheme.checkedIconBorderReadonlyColor : componentTheme.uncheckedIconBorderReadonlyColor;
+    }
+    if (invalid && !checked) {
+      return hovered ? componentTheme.uncheckedIconBorderHoverColor : componentTheme.uncheckedIconErrorBorderColor;
+    }
+    if (checked) {
+      return hovered ? componentTheme.checkedIconBorderHoverColor : componentTheme.checkedIconBorderColor;
+    }
+
+    // DEFAULT (unchecked) state
+    return hovered ? componentTheme.uncheckedIconBorderHoverColor : componentTheme.uncheckedIconBorderColor;
+  };
+  const getFacadeStyles = () => {
+    const baseStyles = {
+      display: 'inline-block',
+      userSelect: 'none',
+      position: 'relative',
+      borderRadius: componentTheme.borderRadius,
+      verticalAlign: 'middle',
+      height: componentTheme.toggleSize,
+      width: componentTheme.toggleWidth,
+      ...labelPlacementVariant.facade
+    };
+    if (disabled) {
+      return {
+        ...baseStyles,
+        background: checked ? componentTheme.checkedBackgroundDisabledColor : componentTheme.backgroundDisabledColor,
+        boxShadow: `inset 0 0 0 ${componentTheme.borderWidth} ${checked ? componentTheme.checkedBorderDisabledColor : componentTheme.borderDisabledColor}`,
+        opacity: componentTheme.disabledOpacity
+      };
+    }
+    if (readOnly) {
+      return {
+        ...baseStyles,
+        background: checked ? componentTheme.checkedBackgroundReadonlyColor : componentTheme.backgroundReadonlyColor,
+        boxShadow: `inset 0 0 0 ${componentTheme.borderWidth} ${checked ? componentTheme.checkedBorderReadonlyColor : componentTheme.borderReadonlyColor}`,
+        pointerEvents: 'none'
+      };
+    }
+    if (invalid) {
+      return {
+        ...baseStyles,
+        ...(checked && {
+          background: hovered ? componentTheme.checkedBackgroundHoverColor : componentTheme.checkedBackgroundColor,
+          boxShadow: `inset 0 0 0 ${componentTheme.borderWidth} ${componentTheme.errorBorderColor}`
+        }),
+        ...(!checked && {
+          background: hovered ? componentTheme.errorBackgroundHoverColor : componentTheme.errorBackgroundColor,
+          boxShadow: `inset 0 0 0 ${componentTheme.borderWidth} ${componentTheme.errorBorderColor}`
+        })
+      };
+    }
+    if (checked) {
+      return {
+        ...baseStyles,
+        background: hovered ? componentTheme.checkedBackgroundHoverColor : componentTheme.checkedBackgroundColor,
+        boxShadow: `inset 0 0 0 ${componentTheme.borderWidth} ${hovered ? componentTheme.checkedBorderHoverColor : componentTheme.checkedBorderColor}`
+      };
+    }
+
+    // DEFAULT (unchecked) state
+    return {
+      ...baseStyles,
+      background: hovered ? componentTheme.backgroundHoverColor : componentTheme.backgroundColor,
+      boxShadow: `inset 0 0 0 ${componentTheme.borderWidth} ${hovered ? componentTheme.borderHoverColor : componentTheme.borderColor}`
+    };
+  };
+  return {
+    toggleFacade: {
+      label: 'toggleFacade',
+      display: 'flex',
+      alignItems: 'center',
+      cursor: disabled ? 'not-allowed' : readOnly ? 'default' : 'pointer',
+      ...(labelPlacement === 'top' && {
+        display: 'block'
+      })
+    },
+    facade: {
+      label: 'toggleFacade__facade',
+      ...getFacadeStyles(),
+      ...(sharedTokens !== null && sharedTokens !== void 0 && sharedTokens.focusOutline ? calcFocusOutlineStyles(sharedTokens.focusOutline, {
+        withFocusOutline: focused
+      }) : {})
+    },
+    icon: {
+      label: 'toggleFacade__icon',
+      display: 'block',
+      textAlign: 'center',
+      position: 'absolute',
+      top: '0',
+      insetInlineStart: '0',
+      insetInlineEnd: 'auto',
+      transition: 'all 0.2s',
+      transform: 'translate3d(0, 0, 0)',
+      height: componentTheme.toggleSize,
+      width: componentTheme.toggleSize,
+      ...(checked && {
+        transform: `translateX(calc(${componentTheme.toggleWidth} - ${componentTheme.toggleSize}))`,
+        '[dir="rtl"] &': {
+          transform: `translateX(calc(-1 * (${componentTheme.toggleWidth} - ${componentTheme.toggleSize})))`
+        }
+      })
+    },
+    iconToggle: {
+      label: 'toggleFacade__iconToggle',
+      position: 'relative',
+      height: '100%',
+      width: '100%',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      '&::before': {
+        content: '""',
+        position: 'absolute',
+        height: `calc(100% - (${componentTheme.borderWidth} * 6))`,
+        width: `calc(100% - (${componentTheme.borderWidth} * 6))`,
+        background: componentTheme.toggleBackground,
+        boxShadow: boxShadowObjectsToCSSString(componentTheme.toggleShadow),
+        borderRadius: '100%',
+        border: `${componentTheme.borderWidth} solid ${getIconBorderColor()}`
+      },
+      '& [class*="lucideIcon"] svg': {
+        position: 'relative',
+        zIndex: 1
+      }
+    },
+    label: {
+      label: 'toggleFacade__label',
+      flex: 1,
+      minWidth: '0.0625rem',
+      color: disabled ? componentTheme.labelDisabledColor : componentTheme.labelColor,
+      fontFamily: componentTheme.labelFontFamily,
+      fontWeight: componentTheme.labelFontWeight,
+      ...sizeVariant,
+      ...labelPlacementVariant.label
+    }
+  };
+};
+export default generateStyle;