@televet/kibble-ui 1.12.0 → 1.12.1

package/build/components/Forms/Checkbox/components/CheckboxGroup/checkboxGroup.component.d.ts

@@ -3,13 +3,14 @@ import { WithFormControlProps } from 'components/Forms/FormControl/formControl.c
 import React from 'react';
 import { FlexDirection } from 'shared/types';
 import { CheckboxProps } from '../../checkbox.component';
-import { CheckboxSize } from '../../checkbox.types';
+import { CheckboxSize, CheckboxVariant } from '../../checkbox.types';
 export interface CheckboxGroupProps extends WithFormControlProps, CCheckboxGroupProps {
     size?: CheckboxSize;
     checkboxes: CheckboxProps[];
     direction?: FlexDirection;
     spacing?: SystemProps['margin'];
     $isFieldInline?: boolean;
+    variant?: CheckboxVariant;
 }
 declare const WrappedCheckboxGroup: React.FC<CheckboxGroupProps & WithFormControlProps>;
 export { WrappedCheckboxGroup as CheckboxGroup };

package/build/index.js

@@ -3610,10 +3610,10 @@ var Checkbox = function (_a) {
 };
 
 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, rest = __rest(_a, ["checkboxes", "size", "direction", "spacing"]);
+    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 }, checkboxes.map(function (checkbox, index) { return (React__default["default"].createElement(Checkbox, __assign({ key: index }, checkbox, { size: size }))); }))));
+        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 }))); }))));
 };
 CheckboxGroup.displayName = 'CheckboxGroup';
 var WrappedCheckboxGroup = withFormControl(CheckboxGroup);
@@ -3771,7 +3771,7 @@ var WrappedTextArea = withFormControl(Textarea);
 
 var FormControlConfig = {
     baseStyle: {
-        borderRadius: borders['4px'],
+        borderRadius: radii.base,
         color: adaptiveColors.text.light.default,
     },
     variants: {
@@ -3815,7 +3815,7 @@ var FormControlConfig = {
     },
     sizes: {
         sm: {
-            borderRadius: borders['4px'],
+            borderRadius: radii.base,
             fontSize: fontSizes.sm,
         },
         md: {
@@ -3859,7 +3859,7 @@ var RadioGroup = function (_a) {
     var radios = _a.radios, _b = _a.size, size = _b === void 0 ? 'md' : _b, _c = _a.direction, direction = _c === void 0 ? 'row' : _c, spacing = _a.spacing, rest = __rest(_a, ["radios", "size", "direction", "spacing"]);
     rest.$isFieldInline; var domProps = __rest(rest, ["$isFieldInline"]);
     return (React__default["default"].createElement(react.RadioGroup, __assign({}, domProps),
-        React__default["default"].createElement(react.Stack, { direction: direction, spacing: spacing }, radios.map(function (radio, index) { return (React__default["default"].createElement(Radio, __assign({ key: index }, radio, { size: size }))); }))));
+        React__default["default"].createElement(react.Stack, { direction: direction, spacing: spacing, maxW: rest.maxW || 'max-content' }, radios.map(function (radio, index) { return (React__default["default"].createElement(Radio, __assign({ key: index }, radio, { size: size }))); }))));
 };
 RadioGroup.displayName = 'RadioGroup';
 var WrappedRadioGroup = withFormControl(RadioGroup);
@@ -3873,7 +3873,8 @@ var RadioConfig = {
         control: {
             background: colors.white,
             borderColor: semanticColors.border.light.medium,
-            borderWidth: '1px',
+            border: borders['1px'],
+            position: 'relative',
             _hover: {
                 borderColor: semanticColors.border.light.heavy,
                 _disabled: {
@@ -3883,6 +3884,12 @@ var RadioConfig = {
             _checked: {
                 background: colors.teal[600],
                 borderColor: colors.teal[600],
+                _before: {
+                    position: 'absolute',
+                    top: '50%',
+                    right: '50%',
+                    transform: 'translate(50%, -50%)',
+                },
                 _hover: {
                     background: colors.teal[700],
                     borderColor: colors.teal[700],