@televet/kibble-ui 1.14.4 → 1.14.6

package/build/components/Forms/Switch/switch.component.d.ts

@@ -3,6 +3,7 @@ import { SwitchProps as CSwitchProps } from '@chakra-ui/react';
 import { WithFormControlProps } from '../FormControl/formControl.component';
 export interface SwitchProps extends WithFormControlProps, CSwitchProps {
     isFieldInline?: boolean;
+    isIndeterminate?: boolean;
 }
 declare const WrappedSwitch: React.FC<SwitchProps>;
 export { WrappedSwitch as Switch };

package/build/index.js

@@ -4680,8 +4680,8 @@ var WrappedSelect = withFormControl(Select);
 var SelectConfig = __assign({}, FormControlConfig);
 
 var Switch = function (props) {
-    var isChecked = props.isChecked, isFieldInline = props.isFieldInline, domProps = __rest(props, ["isChecked", "isFieldInline"]);
-    return (React__default["default"].createElement(react.Switch, __assign({ colorScheme: "teal", isChecked: isChecked, display: isFieldInline ? 'inline-block' : 'block' }, domProps)));
+    var isChecked = props.isChecked, isIndeterminate = props.isIndeterminate, isFieldInline = props.isFieldInline, domProps = __rest(props, ["isChecked", "isIndeterminate", "isFieldInline"]);
+    return (React__default["default"].createElement(react.Switch, __assign({ colorScheme: "teal", isChecked: isChecked, display: isFieldInline ? 'inline-block' : 'block' }, (isIndeterminate && { variant: 'indeterminate' }), domProps)));
 };
 Switch.displayName = 'Switch';
 var WrappedSwitch = withFormControl(Switch);
@@ -6873,29 +6873,45 @@ var SwitchConfig = {
     sizes: {
         sm: {
             container: (_a = {},
-                _a[$thumbWidth.variable] = '9.75px',
-                _a[$thumbHeight.variable] = '9.75px',
-                _a[$trackWidth.variable] = '16.5px',
-                _a[$trackHeight.variable] = '5.25px',
+                _a[$thumbWidth.variable] = '12px',
+                _a[$thumbHeight.variable] = '12px',
+                _a[$trackWidth.variable] = '24px',
+                _a[$trackHeight.variable] = '6px',
                 _a),
         },
         md: {
             container: (_b = {},
-                _b[$thumbWidth.variable] = '13px',
-                _b[$thumbHeight.variable] = '13px',
-                _b[$trackWidth.variable] = '22px',
-                _b[$trackHeight.variable] = '7px',
+                _b[$thumbWidth.variable] = '16px',
+                _b[$thumbHeight.variable] = '16px',
+                _b[$trackWidth.variable] = '32px',
+                _b[$trackHeight.variable] = '8px',
                 _b),
         },
         lg: {
             container: (_c = {},
-                _c[$thumbWidth.variable] = '19.5px',
-                _c[$thumbHeight.variable] = '19.5px',
-                _c[$trackWidth.variable] = '33px',
-                _c[$trackHeight.variable] = '10.5px',
+                _c[$thumbWidth.variable] = '20px',
+                _c[$thumbHeight.variable] = '20px',
+                _c[$trackWidth.variable] = '40px',
+                _c[$trackHeight.variable] = '10px',
                 _c),
         },
     },
+    variants: {
+        indeterminate: {
+            thumb: {
+                bg: coreColors.gray[500],
+                left: '50%',
+                transform: "translate(-50%, -50%)",
+                transitionDuration: 'slower',
+                _checked: {
+                    bg: coreColors.gray[500],
+                    left: '50%',
+                    transform: "translate(-50%, -50%)",
+                    transitionDuration: 'slower',
+                },
+            },
+        },
+    },
 };
 
 var DrawerConfig = {
@@ -6999,7 +7015,7 @@ var Modal = function (_a) {
     var fullScreenMobileContentMargin = react.useBreakpointValue({ base: 0, md: 16 });
     var Modal = (React__default["default"].createElement(react.Modal, __assign({ closeOnEsc: allowEscape, closeOnOverlayClick: allowEscape, autoFocus: !!initialFocusRef, isOpen: isOpen, onClose: onClose, scrollBehavior: scrollBehavior, isCentered: isCentered, size: useFullScreenMobile ? fullScreenMobileSize : size, motionPreset: "slideInBottom" }, rest),
         React__default["default"].createElement(react.ModalOverlay, null),
-        React__default["default"].createElement(react.ModalContent, { backgroundColor: backgroundColor, m: useFullScreenMobile ? fullScreenMobileContentMargin : 16, borderRadius: useFullScreenMobile ? fullScreenMobileBorderRadius : radii.xl }, children)));
+        React__default["default"].createElement(react.ModalContent, { backgroundColor: backgroundColor, m: useFullScreenMobile ? fullScreenMobileContentMargin : 16, borderRadius: useFullScreenMobile ? fullScreenMobileBorderRadius : radii.xl, minH: { base: '-webkit-fill-available', md: 'auto' } }, children)));
     return withDarkMode$1(Modal, !!darkMode);
 };