@televet/kibble-ui 1.14.1 → 1.14.2-beta.2v2u763.1

package/build/index.js

@@ -1605,7 +1605,7 @@ var toTitleCase = function (s) {
 };
 
 var Button = React.forwardRef(function (props, ref) {
-    var _a = useTheme(), components = _a.components, fontWeights = _a.fontWeights;
+    var _a = useTheme(), components = _a.components, fontWeights = _a.fontWeights, radii = _a.radii;
     var _b = components.Button[props.variant || 'primary'], variant = _b.variant, light = _b.light, dark = _b.dark;
     var modeColor = props.darkMode ? dark : light;
     var bg = react.useColorModeValue(modeColor.default, dark.default);
@@ -1631,7 +1631,7 @@ var Button = React.forwardRef(function (props, ref) {
             domProps[position] = ButtonIcon;
         }
     }
-    return (React__default["default"].createElement(react.Button, __assign({ fontWeight: fontWeights.semibold, ref: ref, _hover: hoverClass, _active: activeClass, iconSpacing: domProps.size === 'sm' || domProps.size === 'xs' ? '4px' : '8px' }, domProps), domProps.children));
+    return (React__default["default"].createElement(react.Button, __assign({ fontWeight: fontWeights.semibold, ref: ref, _hover: hoverClass, _active: activeClass, iconSpacing: domProps.size === 'sm' || domProps.size === 'xs' ? '4px' : '8px', borderRadius: radii.base }, domProps), domProps.children));
 });
 Button.displayName = 'Button';
 
@@ -3787,150 +3787,18 @@ function withFormControl(Component) {
     return WithFormControl;
 }
 
-var Heading = function (_a) {
-    var children = _a.children, _b = _a.size, size = _b === void 0 ? 'lg' : _b, color = _a.color, _c = _a.colorToken, colorToken = _c === void 0 ? 'headline' : _c, _d = _a.darkMode, darkMode = _d === void 0 ? false : _d, rest = __rest(_a, ["children", "size", "color", "colorToken", "darkMode"]);
-    var _e = useTheme(), components = _e.components, colors = _e.colors;
-    var adaptiveColor = useAdaptiveColorMap(colors.text, colorToken, darkMode);
-    var variant = react.useBreakpointValue({ base: 'small', md: 'large' }) || 'small';
-    var sizes = components.Heading.variants[variant].sizes;
-    var sizeProps = !sizes ? undefined : sizes[size];
-    return (React__default["default"].createElement(react.Heading, __assign({ variant: variant }, sizeProps, { color: color || adaptiveColor }, rest), children));
-};
-
-var HeadingConfig = {
-    variants: {
-        large: {
-            sizes: {
-                xs: {
-                    fontSize: '14px',
-                    lineHeight: '120%',
-                    fontWeight: fontWeights.semibold,
-                },
-                sm: {
-                    fontSize: '16px',
-                    lineHeight: '120%',
-                    fontWeight: fontWeights.semibold,
-                },
-                md: {
-                    fontSize: '20px',
-                    lineHeight: '120%',
-                    fontWeight: fontWeights.semibold,
-                },
-                lg: {
-                    fontSize: '30px',
-                    lineHeight: '133%',
-                    fontWeight: fontWeights.semibold,
-                },
-                xl: {
-                    fontSize: '36px',
-                    lineHeight: '133%',
-                    fontWeight: fontWeights.semibold,
-                },
-                '2xl': {
-                    fontSize: '48px',
-                    lineHeight: '120%',
-                    fontWeight: fontWeights.semibold,
-                },
-                '3xl': {
-                    fontSize: '60px',
-                    lineHeight: '100%',
-                    fontWeight: fontWeights.semibold,
-                },
-                '4xl': {
-                    fontSize: '72px',
-                    lineHeight: '100%',
-                    fontWeight: fontWeights.semibold,
-                },
-            },
-        },
-        small: {
-            sizes: {
-                xs: {
-                    fontSize: '14px',
-                    lineHeight: '120%',
-                    fontWeight: fontWeights.semibold,
-                },
-                sm: {
-                    fontSize: '16px',
-                    lineHeight: '120%',
-                    fontWeight: fontWeights.semibold,
-                },
-                md: {
-                    fontSize: '20px',
-                    lineHeight: '120%',
-                    fontWeight: fontWeights.semibold,
-                },
-                lg: {
-                    fontSize: '24px',
-                    lineHeight: '133%',
-                    fontWeight: fontWeights.semibold,
-                },
-                xl: {
-                    fontSize: '30px',
-                    lineHeight: '133%',
-                    fontWeight: fontWeights.semibold,
-                },
-                '2xl': {
-                    fontSize: '36px',
-                    lineHeight: '120%',
-                    fontWeight: fontWeights.semibold,
-                },
-                '3xl': {
-                    fontSize: '48px',
-                    lineHeight: '100%',
-                    fontWeight: fontWeights.semibold,
-                },
-                '4xl': {
-                    fontSize: '60px',
-                    lineHeight: '100%',
-                    fontWeight: fontWeights.semibold,
-                },
-            },
-        },
-    },
-};
-
-var TruncatedText = function (_a) {
-    var _b = _a.noOfLines, noOfLines = _b === void 0 ? 1 : _b, textContent = _a.textContent, placement = _a.placement, titleCaseTooltipLabel = _a.titleCaseTooltipLabel, rest = __rest(_a, ["noOfLines", "textContent", "placement", "titleCaseTooltipLabel"]);
-    var _c = __read(React.useState(false), 2), isTextOverFlowing = _c[0], setIsTextOverFlowing = _c[1];
-    var containerRef = React.useRef(null);
-    var onCheckTextOverFlowing = React.useCallback(function (containerRefValue) {
-        var _a, _b;
-        if (containerRefValue && containerRefValue.current) {
-            var textScrollHeight = ((_a = containerRefValue.current) === null || _a === void 0 ? void 0 : _a.children[0].scrollHeight) || 0;
-            var containerOffsetHeight = ((_b = containerRefValue.current) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 0;
-            return textScrollHeight > containerOffsetHeight;
-        }
-        return false;
-    }, []);
-    React.useEffect(function () {
-        var checkValue = onCheckTextOverFlowing(containerRef);
-        setIsTextOverFlowing(checkValue);
-    }, [containerRef, onCheckTextOverFlowing]);
-    return (React__default["default"].createElement(react.Box, { ref: containerRef, className: "TruncatedText__Wrapper" },
-        React__default["default"].createElement(Tooltip, { className: "TruncatedText__Tooltip", label: textContent || '', isDisabled: !isTextOverFlowing, placement: placement, titleCaseLabel: titleCaseTooltipLabel },
-            React__default["default"].createElement(react.Text, __assign({ className: "TruncatedText__TextContent", noOfLines: noOfLines, as: "p" }, rest), textContent))));
-};
-
 var Checkbox = function (_a) {
     var children = _a.children, _b = _a.size, size = _b === void 0 ? 'md' : _b, _c = _a.variant, variant = _c === void 0 ? 'square' : _c, _d = _a.m, m = _d === void 0 ? 0 : _d, mb = _a.mb, mt = _a.mt, mr = _a.mr, ml = _a.ml, rest = __rest(_a, ["children", "size", "variant", "m", "mb", "mt", "mr", "ml"]);
-    var Spacing = {
-        sm: 2,
-        md: 2,
-        lg: 3,
-    };
     var margins = { m: m, mb: mb, mt: mt, mr: mr, ml: ml };
-    return (React__default["default"].createElement(react.FormLabel, __assign({ display: "flex", alignItems: "center", cursor: "pointer" }, margins),
-        React__default["default"].createElement(react.Checkbox, __assign({}, rest, { size: size, variant: variant, m: 0 })),
-        typeof children === 'string' && (React__default["default"].createElement(Text, { size: size, ml: Spacing[size], as: "span" }, children)),
-        children && typeof children !== 'string' && React__default["default"].createElement(react.Box, { ml: Spacing[size] }, children)));
+    return (React__default["default"].createElement(react.Box, __assign({}, margins),
+        React__default["default"].createElement(react.Checkbox, __assign({}, rest, { size: size, variant: variant, m: 0, alignItems: "flex-start" }), children)));
 };
 
 var CheckboxGroup = function (_a) {
     var checkboxes = _a.checkboxes, _b = _a.size, size = _b === void 0 ? 'md' : _b, _c = _a.direction, direction = _c === void 0 ? 'row' : _c, spacing = _a.spacing, variant = _a.variant, rest = __rest(_a, ["checkboxes", "size", "direction", "spacing", "variant"]);
     rest.isFieldInline; var domProps = __rest(rest, ["isFieldInline"]);
     return (React__default["default"].createElement(react.CheckboxGroup, __assign({}, domProps),
-        React__default["default"].createElement(react.Stack, { direction: direction, spacing: spacing, display: "inline-flex" }, checkboxes.map(function (checkbox, index) { return (React__default["default"].createElement(Checkbox, __assign({ key: index }, checkbox, { size: size, variant: variant || checkbox.variant }))); }))));
+        React__default["default"].createElement(react.Stack, { direction: direction, spacing: spacing, width: "fit-content" }, checkboxes.map(function (checkbox, index) { return (React__default["default"].createElement(Checkbox, __assign({ key: index }, checkbox, { size: size, variant: variant || checkbox.variant }))); }))));
 };
 CheckboxGroup.displayName = 'CheckboxGroup';
 var WrappedCheckboxGroup = withFormControl(CheckboxGroup);
@@ -3974,6 +3842,16 @@ var RoundCheckedStyle = {
     },
 };
 var CheckboxConfig = {
+    baseStyle: {
+        control: {
+            _focus: {
+                boxShadow: 'none',
+            },
+        },
+        label: {
+            marginInlineStart: 0,
+        },
+    },
     sizes: {
         sm: {
             control: {
@@ -3982,6 +3860,8 @@ var CheckboxConfig = {
             },
             label: {
                 fontSize: fontSizes.sm,
+                ml: 2,
+                mt: -1,
             },
         },
         md: {
@@ -3991,6 +3871,8 @@ var CheckboxConfig = {
             },
             label: {
                 fontSize: fontSizes.md,
+                ml: 2,
+                mt: -1,
             },
         },
         lg: {
@@ -4000,6 +3882,8 @@ var CheckboxConfig = {
             },
             label: {
                 fontSize: fontSizes.lg,
+                ml: 3,
+                mt: '-3px',
             },
         },
     },
@@ -4263,6 +4147,131 @@ var RatingDot = function (_a) {
         } }, number))) : (React__default["default"].createElement(react.Flex, { as: "div", bgColor: colors.background.brand, h: "40px", w: "40px", borderRadius: "20px", border: "2px solid ".concat(colors.background.brand), color: colors.text.dark.default, mr: 1, mb: 1, justifyContent: "center", alignItems: "center", fontSize: "lg", cursor: "default" }, number))));
 };
 
+var Heading = function (_a) {
+    var children = _a.children, _b = _a.size, size = _b === void 0 ? 'lg' : _b, color = _a.color, _c = _a.colorToken, colorToken = _c === void 0 ? 'headline' : _c, _d = _a.darkMode, darkMode = _d === void 0 ? false : _d, rest = __rest(_a, ["children", "size", "color", "colorToken", "darkMode"]);
+    var _e = useTheme(), components = _e.components, colors = _e.colors;
+    var adaptiveColor = useAdaptiveColorMap(colors.text, colorToken, darkMode);
+    var variant = react.useBreakpointValue({ base: 'small', md: 'large' }) || 'small';
+    var sizes = components.Heading.variants[variant].sizes;
+    var sizeProps = !sizes ? undefined : sizes[size];
+    return (React__default["default"].createElement(react.Heading, __assign({ variant: variant }, sizeProps, { color: color || adaptiveColor }, rest), children));
+};
+
+var HeadingConfig = {
+    variants: {
+        large: {
+            sizes: {
+                xs: {
+                    fontSize: '14px',
+                    lineHeight: '120%',
+                    fontWeight: fontWeights.semibold,
+                },
+                sm: {
+                    fontSize: '16px',
+                    lineHeight: '120%',
+                    fontWeight: fontWeights.semibold,
+                },
+                md: {
+                    fontSize: '20px',
+                    lineHeight: '120%',
+                    fontWeight: fontWeights.semibold,
+                },
+                lg: {
+                    fontSize: '30px',
+                    lineHeight: '133%',
+                    fontWeight: fontWeights.semibold,
+                },
+                xl: {
+                    fontSize: '36px',
+                    lineHeight: '133%',
+                    fontWeight: fontWeights.semibold,
+                },
+                '2xl': {
+                    fontSize: '48px',
+                    lineHeight: '120%',
+                    fontWeight: fontWeights.semibold,
+                },
+                '3xl': {
+                    fontSize: '60px',
+                    lineHeight: '100%',
+                    fontWeight: fontWeights.semibold,
+                },
+                '4xl': {
+                    fontSize: '72px',
+                    lineHeight: '100%',
+                    fontWeight: fontWeights.semibold,
+                },
+            },
+        },
+        small: {
+            sizes: {
+                xs: {
+                    fontSize: '14px',
+                    lineHeight: '120%',
+                    fontWeight: fontWeights.semibold,
+                },
+                sm: {
+                    fontSize: '16px',
+                    lineHeight: '120%',
+                    fontWeight: fontWeights.semibold,
+                },
+                md: {
+                    fontSize: '20px',
+                    lineHeight: '120%',
+                    fontWeight: fontWeights.semibold,
+                },
+                lg: {
+                    fontSize: '24px',
+                    lineHeight: '133%',
+                    fontWeight: fontWeights.semibold,
+                },
+                xl: {
+                    fontSize: '30px',
+                    lineHeight: '133%',
+                    fontWeight: fontWeights.semibold,
+                },
+                '2xl': {
+                    fontSize: '36px',
+                    lineHeight: '120%',
+                    fontWeight: fontWeights.semibold,
+                },
+                '3xl': {
+                    fontSize: '48px',
+                    lineHeight: '100%',
+                    fontWeight: fontWeights.semibold,
+                },
+                '4xl': {
+                    fontSize: '60px',
+                    lineHeight: '100%',
+                    fontWeight: fontWeights.semibold,
+                },
+            },
+        },
+    },
+};
+
+var TruncatedText = function (_a) {
+    var _b = _a.noOfLines, noOfLines = _b === void 0 ? 1 : _b, textContent = _a.textContent, placement = _a.placement, titleCaseTooltipLabel = _a.titleCaseTooltipLabel, rest = __rest(_a, ["noOfLines", "textContent", "placement", "titleCaseTooltipLabel"]);
+    var _c = __read(React.useState(false), 2), isTextOverFlowing = _c[0], setIsTextOverFlowing = _c[1];
+    var containerRef = React.useRef(null);
+    var onCheckTextOverFlowing = React.useCallback(function (containerRefValue) {
+        var _a, _b;
+        if (containerRefValue && containerRefValue.current) {
+            var textScrollHeight = ((_a = containerRefValue.current) === null || _a === void 0 ? void 0 : _a.children[0].scrollHeight) || 0;
+            var containerOffsetHeight = ((_b = containerRefValue.current) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 0;
+            return textScrollHeight > containerOffsetHeight;
+        }
+        return false;
+    }, []);
+    React.useEffect(function () {
+        var checkValue = onCheckTextOverFlowing(containerRef);
+        setIsTextOverFlowing(checkValue);
+    }, [containerRef, onCheckTextOverFlowing]);
+    return (React__default["default"].createElement(react.Box, { ref: containerRef, className: "TruncatedText__Wrapper" },
+        React__default["default"].createElement(Tooltip, { className: "TruncatedText__Tooltip", label: textContent || '', isDisabled: !isTextOverFlowing, placement: placement, titleCaseLabel: titleCaseTooltipLabel },
+            React__default["default"].createElement(react.Text, __assign({ className: "TruncatedText__TextContent", noOfLines: noOfLines, as: "p" }, rest), textContent))));
+};
+
 var RatingDots = function (_a) {
     var minValue = _a.minValue, maxValue = _a.maxValue, minLabel = _a.minLabel, maxLabel = _a.maxLabel, centeredLabel = _a.centeredLabel, isDisabled = _a.isDisabled, isInteractive = _a.isInteractive, onClick = _a.onClick, selected = _a.selected;
     var _b = __read(React.useState(), 2), selectedValue = _b[0], setSelectedValue = _b[1];
@@ -4612,20 +4621,24 @@ var Select = function (_a) {
     var options = _a.options; _a.isFieldInline; var useBrowserDefaultMenu = _a.useBrowserDefaultMenu, placeholder = _a.placeholder, listProps = _a.listProps, value = _a.value, _b = _a.shouldTruncateText, shouldTruncateText = _b === void 0 ? true : _b, size = _a.size, onChange = _a.onChange, domProps = __rest(_a, ["options", "isFieldInline", "useBrowserDefaultMenu", "placeholder", "listProps", "value", "shouldTruncateText", "size", "onChange"]);
     var colors = useTheme().colors;
     var selectRef = React.useRef(null);
-    var _c = __read(React.useState({
+    var palceholderValue = React.useMemo(function () { return ({
         label: placeholder,
         value: '',
         leftElement: null,
         isPlaceholder: true,
-    }), 2), selectedOption = _c[0], setSelectedOption = _c[1];
+    }); }, [placeholder]);
+    var _c = __read(React.useState(palceholderValue), 2), selectedOption = _c[0], setSelectedOption = _c[1];
     React.useEffect(function () {
         if (value) {
             var defaultValue = options.find(function (option) { return option.value === value; });
             if (defaultValue) {
                 setSelectedOption(defaultValue);
             }
+            else {
+                setSelectedOption(palceholderValue);
+            }
         }
-    }, [value, options]);
+    }, [value, options, palceholderValue]);
     var selectWidth = React.useMemo(function () {
         var _a;
         if (!selectRef.current) {