@ultraviolet/ui 1.8.4 → 1.10.0

package/dist/src/components/Checkbox/index.js

@@ -3,55 +3,54 @@ import { useTheme } from '@emotion/react';
 import { Icon } from '@ultraviolet/icons';
 import { forwardRef, useState, useId, useEffect, useCallback } from 'react';
 import { Loader } from '../Loader/index.js';
+import { Row } from '../Row/index.js';
+import { Stack } from '../Stack/index.js';
 import { Text } from '../Text/index.js';
-import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
 
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-const InnerCheckbox = /*#__PURE__*/_styled("rect", {
+const ErrorText = /*#__PURE__*/_styled(Text, {
   target: "eqr7bqq7"
-})("fill:", _ref => {
+})("padding-top:", _ref => {
   let {
     theme
   } = _ref;
-  return theme.colors.neutral.backgroundWeak;
-}, ";stroke:", _ref2 => {
+  return `${theme.space['0.5']}`;
+}, ";");
+const InnerCheckbox = /*#__PURE__*/_styled("rect", {
+  target: "eqr7bqq6"
+})("fill:", _ref2 => {
   let {
     theme
   } = _ref2;
-  return theme.colors.neutral.borderStrong;
+  return theme.colors.neutral.background;
+}, ";stroke:", _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.colors.neutral.border;
 }, ";");
-const CheckMark = /*#__PURE__*/_styled("rect", {
-  target: "eqr7bqq6"
-})();
 const CheckMixedMark = /*#__PURE__*/_styled("rect", {
   target: "eqr7bqq5"
 })();
-const CheckboxIconContainer = _ref3 => {
+const CheckboxIconContainer = _ref4 => {
   let {
     children
-  } = _ref3;
+  } = _ref4;
   const theme = useTheme();
   return jsxs("g", {
     children: [jsx(InnerCheckbox, {
-      x: "5",
-      y: "5",
-      width: "14",
-      height: "14",
+      x: "2",
+      y: "2",
+      width: "20",
+      height: "20",
       rx: theme.radii.small,
       strokeWidth: "2"
     }), children]
   });
 };
-const PaddedText = /*#__PURE__*/_styled(Text, {
-  target: "eqr7bqq4"
-})("padding:", _ref4 => {
-  let {
-    theme
-  } = _ref4;
-  return `0 ${theme.space['0.5']}`;
-}, ";");
 const StyledIcon = /*#__PURE__*/_styled('svg', {
-  target: "eqr7bqq3"
+  target: "eqr7bqq4"
 })("border-radius:", _ref5 => {
   let {
     theme
@@ -77,149 +76,257 @@ const StyledIcon = /*#__PURE__*/_styled('svg', {
     size
   } = _ref9;
   return size;
-}, "px;");
+}, "px;& path{fill:", _ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return theme.colors.neutral.background;
+}, ";transform:translate(2px, 2px);transform:scale(0);}");
+const StyledLabel = /*#__PURE__*/_styled('label', {
+  target: "eqr7bqq3"
+})();
 const CheckboxInput = /*#__PURE__*/_styled('input', {
   shouldForwardProp: prop => !['size'].includes(prop),
   target: "eqr7bqq2"
-})("position:absolute;white-space:nowrap;height:", _ref10 => {
-  let {
-    size
-  } = _ref10;
-  return size;
-}, "px;width:", _ref11 => {
+})("position:absolute;white-space:nowrap;height:", _ref11 => {
   let {
     size
   } = _ref11;
   return size;
-}, "px;opacity:0;border-width:0;&:not(:disabled){cursor:pointer;}&:disabled{cursor:not-allowed;}&:not(:disabled){&:checked+", StyledIcon, ",&[aria-checked='mixed']+", StyledIcon, "{fill:", _ref12 => {
+}, "px;width:", _ref12 => {
   let {
-    theme
+    size
   } = _ref12;
-  return theme.colors.primary.backgroundStrong;
-}, ";", InnerCheckbox, "{stroke:", _ref13 => {
+  return size;
+}, "px;opacity:0;border-width:0;&:not(:disabled){cursor:pointer;}&:disabled{cursor:not-allowed;}&:not(:disabled){&:checked+", StyledIcon, ",&[aria-checked='mixed']+", StyledIcon, "{fill:", _ref13 => {
   let {
     theme
   } = _ref13;
   return theme.colors.primary.backgroundStrong;
-}, ";}}&[aria-invalid='true']+", StyledIcon, ",&[aria-invalid='mixed']+", StyledIcon, "{fill:", _ref14 => {
+}, ";", InnerCheckbox, "{stroke:", _ref14 => {
   let {
     theme
   } = _ref14;
-  return theme.colors.danger.backgroundStrong;
-}, ";", InnerCheckbox, "{stroke:", _ref15 => {
+  return theme.colors.primary.backgroundStrong;
+}, ";}}&[aria-invalid='true']+", StyledIcon, ",&[aria-invalid='mixed']+", StyledIcon, "{fill:", _ref15 => {
   let {
     theme
   } = _ref15;
-  return theme.colors.danger.backgroundStrong;
-}, ";}}}&:focus+", StyledIcon, "{background-color:", _ref16 => {
+  return theme.colors.danger.background;
+}, ";", InnerCheckbox, "{stroke:", _ref16 => {
   let {
     theme
   } = _ref16;
-  return theme.colors.primary.background;
-}, ";fill:", _ref17 => {
+  return theme.colors.danger.border;
+}, ";}}}&:focus+", StyledIcon, "{background-color:", _ref17 => {
   let {
     theme
   } = _ref17;
-  return theme.colors.primary.backgroundStrong;
-}, ";", InnerCheckbox, "{stroke:", _ref18 => {
+  return theme.colors.primary.background;
+}, ";fill:", _ref18 => {
   let {
     theme
   } = _ref18;
-  return theme.colors.primary.backgroundStrong;
-}, ";fill:", _ref19 => {
+  return theme.colors.danger.background;
+}, ";outline:2px solid ", _ref19 => {
   let {
     theme
   } = _ref19;
-  return theme.colors.primary.background;
-}, ";}}&[aria-invalid='true']:focus+", StyledIcon, "{background-color:", _ref20 => {
+  return theme.colors.primary.backgroundHover;
+}, ";", InnerCheckbox, "{stroke:", _ref20 => {
   let {
     theme
   } = _ref20;
-  return theme.colors.danger.background;
+  return theme.colors.primary.borderHover;
 }, ";fill:", _ref21 => {
   let {
     theme
   } = _ref21;
-  return theme.colors.danger.backgroundStrong;
-}, ";", InnerCheckbox, "{stroke:", _ref22 => {
+  return theme.colors.primary.backgroundHover;
+}, ";}}&[aria-invalid='true']:focus+", StyledIcon, "{background-color:", _ref22 => {
   let {
     theme
   } = _ref22;
-  return theme.colors.danger.backgroundStrong;
+  return theme.colors.danger.background;
 }, ";fill:", _ref23 => {
   let {
     theme
   } = _ref23;
   return theme.colors.danger.background;
-}, ";}}");
-const CheckboxContainer = /*#__PURE__*/_styled("div", {
-  target: "eqr7bqq1"
-})("position:relative;display:inline-flex;align-items:center;gap:", _ref24 => {
+}, ";outline:2px solid ", _ref24 => {
   let {
     theme
   } = _ref24;
-  return theme.space['1'];
-}, ";&[aria-disabled='false'],&[aria-disabled='false']>label{cursor:pointer;}&[aria-disabled='true']{cursor:not-allowed;color:", _ref25 => {
+  return theme.colors.danger.backgroundHover;
+}, ";", InnerCheckbox, "{stroke:", _ref25 => {
   let {
     theme
   } = _ref25;
-  return theme.colors.neutral.textDisabled;
-}, ";&>label{cursor:not-allowed;}", StyledIcon, "{fill:", _ref26 => {
+  return theme.colors.danger.borderHover;
+}, ";fill:", _ref26 => {
   let {
     theme
   } = _ref26;
-  return theme.colors.neutral.borderStrongDisabled;
-}, ";", InnerCheckbox, "{stroke:", _ref27 => {
+  return theme.colors.danger.backgroundHover;
+}, ";}}");
+const CheckboxContainer = /*#__PURE__*/_styled("div", {
+  target: "eqr7bqq1"
+})("position:relative;display:inline-flex;align-items:start;gap:", _ref27 => {
   let {
     theme
   } = _ref27;
-  return theme.colors.neutral.borderStrongDisabled;
-}, ";fill:", _ref28 => {
+  return theme.space['1'];
+}, ";", StyledLabel, "{cursor:pointer;}&[aria-disabled='true']{cursor:not-allowed;color:", _ref28 => {
   let {
     theme
   } = _ref28;
-  return theme.colors.neutral.backgroundDisabled;
-}, ";}}}", CheckMark, ",", CheckMixedMark, "{transform-origin:center;transition:200ms transform ease-in-out;transform:scale(0);}", CheckboxInput, ":checked+", StyledIcon, " ", CheckMark, "{transform:scale(1);}", CheckboxInput, "[aria-checked=\"mixed\"]+", StyledIcon, " ", CheckMixedMark, "{transform:scale(1);}&:hover[aria-disabled='false']{", CheckboxInput, "+", StyledIcon, "{background-color:", _ref29 => {
+  return theme.colors.neutral.textDisabled;
+}, ";", StyledLabel, "{cursor:not-allowed;}", StyledIcon, "{fill:", _ref29 => {
   let {
     theme
   } = _ref29;
-  return theme.colors.primary.background;
-}, ";fill:", _ref30 => {
+  return theme.colors.neutral.borderDisabled;
+}, ";", InnerCheckbox, "{stroke:", _ref30 => {
   let {
     theme
   } = _ref30;
-  return theme.colors.primary.backgroundStrong;
-}, ";", InnerCheckbox, "{stroke:", _ref31 => {
+  return theme.colors.neutral.borderDisabled;
+}, ";fill:", _ref31 => {
   let {
     theme
   } = _ref31;
-  return theme.colors.primary.backgroundStrong;
-}, ";fill:", _ref32 => {
+  return theme.colors.neutral.backgroundDisabled;
+}, ";}}", CheckboxInput, "[aria-invalid=\"true\"]:checked+", StyledIcon, "{fill:", _ref32 => {
   let {
     theme
   } = _ref32;
-  return theme.colors.primary.background;
-}, ";}}", CheckboxInput, "[aria-invalid=\"true\"]+", StyledIcon, "{background-color:", _ref33 => {
+  return theme.colors.danger.borderDisabled;
+}, ";", InnerCheckbox, "{stroke:", _ref33 => {
   let {
     theme
   } = _ref33;
-  return theme.colors.danger.background;
+  return theme.colors.danger.borderDisabled;
 }, ";fill:", _ref34 => {
   let {
     theme
   } = _ref34;
-  return theme.colors.danger.backgroundStrong;
-}, ";", InnerCheckbox, "{stroke:", _ref35 => {
+  return theme.colors.danger.borderDisabled;
+}, ";}}", CheckboxInput, "[aria-invalid=\"true\"]+", StyledIcon, "{fill:", _ref35 => {
   let {
     theme
   } = _ref35;
-  return theme.colors.danger.backgroundStrong;
-}, ";fill:", _ref36 => {
+  return theme.colors.danger.background;
+}, ";", InnerCheckbox, "{stroke:", _ref36 => {
   let {
     theme
   } = _ref36;
+  return theme.colors.danger.borderDisabled;
+}, ";fill:", _ref37 => {
+  let {
+    theme
+  } = _ref37;
   return theme.colors.danger.background;
-}, ";}}}");
+}, ";}}", CheckboxInput, ":checked+", StyledIcon, "{fill:", _ref38 => {
+  let {
+    theme
+  } = _ref38;
+  return theme.colors.primary.borderDisabled;
+}, ";", InnerCheckbox, "{stroke:", _ref39 => {
+  let {
+    theme
+  } = _ref39;
+  return theme.colors.primary.borderDisabled;
+}, ";fill:", _ref40 => {
+  let {
+    theme
+  } = _ref40;
+  return theme.colors.primary.borderDisabled;
+}, ";}}", CheckboxInput, "[aria-checked=\"mixed\"]+", StyledIcon, "{fill:", _ref41 => {
+  let {
+    theme
+  } = _ref41;
+  return theme.colors.primary.borderDisabled;
+}, ";", InnerCheckbox, "{stroke:", _ref42 => {
+  let {
+    theme
+  } = _ref42;
+  return theme.colors.primary.borderDisabled;
+}, ";fill:", _ref43 => {
+  let {
+    theme
+  } = _ref43;
+  return theme.colors.primary.borderDisabled;
+}, ";}}}", CheckboxInput, ":checked+", StyledIcon, " path{transform-origin:center;transition:200ms transform ease-in-out;transform:scale(1);transform:translate(2px, 2px);}", CheckboxInput, ":checked+", StyledIcon, " ", InnerCheckbox, "{fill:", _ref44 => {
+  let {
+    theme
+  } = _ref44;
+  return theme.colors.primary.border;
+}, ";stroke:", _ref45 => {
+  let {
+    theme
+  } = _ref45;
+  return theme.colors.primary.border;
+}, ";}", CheckboxInput, "[aria-invalid=\"true\"]:checked+", StyledIcon, " ", InnerCheckbox, "{fill:", _ref46 => {
+  let {
+    theme
+  } = _ref46;
+  return theme.colors.danger.border;
+}, ";stroke:", _ref47 => {
+  let {
+    theme
+  } = _ref47;
+  return theme.colors.danger.border;
+}, ";}", CheckboxInput, "[aria-checked=\"mixed\"]+", StyledIcon, "{", CheckMixedMark, "{fill:", _ref48 => {
+  let {
+    theme
+  } = _ref48;
+  return theme.colors.neutral.iconStronger;
+}, ";}", InnerCheckbox, "{fill:", _ref49 => {
+  let {
+    theme
+  } = _ref49;
+  return theme.colors.primary.border;
+}, ";stroke:", _ref50 => {
+  let {
+    theme
+  } = _ref50;
+  return theme.colors.primary.border;
+}, ";}}&:hover[aria-disabled='false']{", CheckboxInput, "[aria-invalid='false']{&[aria-checked='false']+", StyledIcon, " ", InnerCheckbox, "{stroke:", _ref51 => {
+  let {
+    theme
+  } = _ref51;
+  return theme.colors.primary.borderHover;
+}, ";fill:", _ref52 => {
+  let {
+    theme
+  } = _ref52;
+  return theme.colors.primary.backgroundHover;
+}, ";}}", CheckboxInput, "[aria-invalid='true']{&[aria-checked='false']+", StyledIcon, " ", InnerCheckbox, "{stroke:", _ref53 => {
+  let {
+    theme
+  } = _ref53;
+  return theme.colors.danger.borderHover;
+}, ";fill:", _ref54 => {
+  let {
+    theme
+  } = _ref54;
+  return theme.colors.danger.backgroundHover;
+}, ";}}}", CheckboxInput, "[aria-invalid=\"true\"]+", StyledIcon, "{fill:", _ref55 => {
+  let {
+    theme
+  } = _ref55;
+  return theme.colors.danger.backgroundStrong;
+}, ";", InnerCheckbox, "{stroke:", _ref56 => {
+  let {
+    theme
+  } = _ref56;
+  return theme.colors.danger.backgroundStrong;
+}, ";fill:", _ref57 => {
+  let {
+    theme
+  } = _ref57;
+  return theme.colors.danger.background;
+}, ";}}");
 const StyledActivityContainer = /*#__PURE__*/_styled("div", {
   target: "eqr7bqq0"
 })(process.env.NODE_ENV === "production" ? {
@@ -230,7 +337,7 @@ const StyledActivityContainer = /*#__PURE__*/_styled("div", {
   styles: "display:flex",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-const Checkbox = /*#__PURE__*/forwardRef((_ref37, ref) => {
+const Checkbox = /*#__PURE__*/forwardRef((_ref58, ref) => {
   let {
     checked = false,
     onChange,
@@ -238,6 +345,7 @@ const Checkbox = /*#__PURE__*/forwardRef((_ref37, ref) => {
     onBlur,
     error,
     name,
+    helper,
     value,
     size = 24,
     children,
@@ -249,7 +357,7 @@ const Checkbox = /*#__PURE__*/forwardRef((_ref37, ref) => {
     'aria-label': ariaLabel,
     required,
     'data-testid': dataTestId
-  } = _ref37;
+  } = _ref58;
   const [state, setState] = useState(checked);
   const id = useId();
   const computedName = name ?? id;
@@ -266,72 +374,84 @@ const Checkbox = /*#__PURE__*/forwardRef((_ref37, ref) => {
       setState(current => !current);
     }
   }, []);
-  return jsxs(Fragment, {
-    children: [jsxs(CheckboxContainer, {
-      className: className,
-      "aria-disabled": disabled,
-      "data-visibility": dataVisibility,
-      "data-checked": state,
-      "data-error": !!error,
-      "data-testid": dataTestId,
-      children: [progress ? jsx(StyledActivityContainer, {
-        children: jsx(Loader, {
-          active: true,
-          size: size
-        })
-      }) : null, jsx(CheckboxInput, {
-        id: computedName,
-        type: "checkbox",
-        "aria-invalid": !!error,
-        "aria-describedby": error ? `${computedName}-hint` : undefined,
-        "aria-checked": state === 'indeterminate' ? 'mixed' : undefined,
-        "aria-label": ariaLabel,
-        checked: state === 'indeterminate' ? false : state,
-        size: size,
-        onChange: onLocalChange,
-        onKeyDown: onKeyDown,
-        onFocus: onFocus,
-        onBlur: onBlur,
-        disabled: disabled,
-        value: value,
-        name: computedName,
-        autoFocus: autoFocus,
-        ref: ref,
-        required: required
-      }), !progress ? jsx(StyledIcon, {
-        size: size,
-        viewBox: "0 0 24 24",
-        children: jsxs(CheckboxIconContainer, {
-          children: [jsx(CheckMixedMark, {
-            x: "8",
-            y: "11",
-            rx: "1",
-            width: "8",
-            height: "2"
-          }), jsx(CheckMark, {
-            x: "8",
-            y: "8",
-            rx: "1",
-            width: "8",
-            height: "8"
-          })]
-        })
-      }) : null, children ? jsx("label", {
-        htmlFor: computedName,
-        children: children
-      }) : null, required ? jsx("sup", {
-        children: jsx(Icon, {
-          name: "asterisk",
-          size: 10,
-          color: "danger"
+  return jsxs(CheckboxContainer, {
+    className: className,
+    "aria-disabled": disabled,
+    "data-visibility": dataVisibility,
+    "data-checked": state,
+    "data-error": !!error,
+    "data-testid": dataTestId,
+    children: [progress ? jsx(StyledActivityContainer, {
+      children: jsx(Loader, {
+        active: true,
+        size: size
+      })
+    }) : null, jsx(CheckboxInput, {
+      id: computedName,
+      type: "checkbox",
+      "aria-invalid": !!error,
+      "aria-describedby": error ? `${computedName}-hint` : undefined,
+      "aria-checked": state === 'indeterminate' ? 'mixed' : state,
+      "aria-label": ariaLabel,
+      checked: state === 'indeterminate' ? false : state,
+      size: size,
+      onChange: onLocalChange,
+      onKeyDown: onKeyDown,
+      onFocus: onFocus,
+      onBlur: onBlur,
+      disabled: disabled,
+      value: value,
+      name: computedName,
+      autoFocus: autoFocus,
+      ref: ref,
+      required: required
+    }), !progress ? jsx(StyledIcon, {
+      size: size,
+      viewBox: "0 0 24 24",
+      children: jsx(CheckboxIconContainer, {
+        children: state !== 'indeterminate' ? jsx("path", {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          width: 14,
+          height: 14,
+          d: "M15.6678 5.26709C16.0849 5.6463 16.113 6.28907 15.7307 6.70276L9.29172 13.6705C9.10291 13.8748 8.83818 13.9937 8.55884 13.9998C8.2795 14.0058 8.0098 13.8984 7.81223 13.7024L4.30004 10.2185C3.89999 9.82169 3.89999 9.17831 4.30004 8.78149C4.70009 8.38467 5.34869 8.38467 5.74874 8.78149L8.50441 11.5149L14.2205 5.32951C14.6028 4.91583 15.2508 4.88788 15.6678 5.26709Z",
+          fill: "white"
+        }) : jsx(CheckMixedMark, {
+          x: "6",
+          y: "11",
+          rx: "1",
+          width: "12",
+          height: "2"
         })
+      })
+    }) : null, jsxs(Stack, {
+      gap: 0.25,
+      children: [jsxs(Row, {
+        templateColumns: "11fr 1fr",
+        alignItems: "center",
+        children: [children ? jsx(StyledLabel, {
+          htmlFor: computedName,
+          children: children
+        }) : null, required ? jsx("sup", {
+          children: jsx(Icon, {
+            name: "asterisk",
+            size: 10,
+            color: "danger"
+          })
+        }) : null]
+      }), helper ? jsx(Text, {
+        variant: "bodySmall",
+        as: "p",
+        prominence: "weak",
+        color: "neutral",
+        children: helper
+      }) : null, error ? jsx(ErrorText, {
+        variant: "bodySmall",
+        as: "p",
+        color: "danger",
+        children: error
       }) : null]
-    }), error ? jsx(PaddedText, {
-      variant: "bodySmall",
-      as: "p",
-      color: "danger",
-      children: error
-    }) : null]
+    })]
   });
 });