@marigold/components 0.3.0 → 0.3.1

package/dist/components.cjs.development.js

@@ -907,142 +907,105 @@ function MarigoldProvider(_ref) {
   }, isTopLevel ? React__default.createElement(React__default.Fragment, null, React__default.createElement(system.Global, null), React__default.createElement(overlays$1.OverlayProvider, null, children)) : children);
 }
 
-var _excluded$n = ["disabled"],
-    _excluded2$3 = ["disabled", "error"];
-var RadioChecked = function RadioChecked(_ref) {
-  var _ref$disabled = _ref.disabled,
+var RadioIcon = function RadioIcon(_ref) {
+  var _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? '' : _ref$variant,
+      _ref$checked = _ref.checked,
+      checked = _ref$checked === void 0 ? false : _ref$checked,
+      _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
-
-  return React__default.createElement(system.SVG, Object.assign({
+      _ref$error = _ref.error,
+      error = _ref$error === void 0 ? false : _ref$error;
+  var conditionalStates = disabled ? {
+    disabled: disabled
+  } : {
+    checked: checked,
+    error: error
+  };
+  return React__default.createElement(system.SVG, {
     width: "16",
     height: "32",
     viewBox: "0 0 16 32",
-    fill: "none"
-  }, props), React__default.createElement(system.Box, {
-    as: "circle",
-    cx: "8",
-    cy: "16",
-    r: "7.5",
-    variant: disabled ? 'radio.checked.disabled' : 'radio.checked'
-  }), React__default.createElement(system.Box, {
+    fill: "none",
+    "aria-hidden": "true"
+  }, React__default.createElement(system.Box, {
+    variant: system.conditional("radio." + variant, conditionalStates),
     as: "circle",
     cx: "8",
     cy: "16",
-    r: "3",
-    variant: "radio.checked.circle"
-  }));
-};
-var RadioUnchecked = function RadioUnchecked(_ref2) {
-  var _ref2$disabled = _ref2.disabled,
-      disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
-      _ref2$error = _ref2.error,
-      error = _ref2$error === void 0 ? false : _ref2$error,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded2$3);
-
-  return React__default.createElement(system.SVG, Object.assign({
-    width: "16",
-    height: "32",
-    viewBox: "0 0 16 32",
-    fill: "none"
-  }, props), React__default.createElement(system.Box, {
-    as: "circle",
+    r: "7.5"
+  }), checked && React__default.createElement("circle", {
+    fill: "white",
     cx: "8",
     cy: "16",
-    r: "7.5",
-    variant: disabled ? 'radio.unchecked.disabled' : error ? 'radio.unchecked.error' : 'radio.unchecked'
+    r: "3"
   }));
 };
 
-var _excluded$o = ["className", "variant", "error"],
-    _excluded2$4 = ["label", "required", "labelVariant", "error", "errorMessage"];
+var _excluded$n = ["error"],
+    _excluded2$3 = ["label", "required", "labelVariant", "error", "errorMessage"];
 
-var RadioIcon = function RadioIcon(_ref) {
-  var variant = _ref.variant,
-      checked = _ref.checked,
-      disabled = _ref.disabled,
-      error = _ref.error;
-
-  if (checked) {
-    return React__default.createElement(system.Box, {
-      as: RadioChecked,
-      variant: "radio." + variant,
-      disabled: disabled
-    });
-  }
-
-  return React__default.createElement(system.Box, {
-    as: RadioUnchecked,
-    variant: "radio." + variant,
-    disabled: disabled,
-    error: error
-  });
-};
+var RadioInput = function RadioInput(_ref) {
+  var error = _ref.error,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
 
-var RadioInput = function RadioInput(_ref2) {
-  var className = _ref2.className,
-      _ref2$variant = _ref2.variant,
-      variant = _ref2$variant === void 0 ? '' : _ref2$variant,
-      error = _ref2.error,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$o);
+  var _useFocusRing = focus.useFocusRing(),
+      focusProps = _useFocusRing.focusProps;
 
   return React__default.createElement(system.Box, {
-    display: "inline-block",
-    className: className
-  }, React__default.createElement(system.Box, Object.assign({
-    as: "input",
+    pr: "xsmall"
+  }, React__default.createElement(visuallyHidden.VisuallyHidden, null, React__default.createElement("input", Object.assign({
     type: "radio",
-    css: {
-      position: 'absolute',
-      opacity: 0,
-      zIndex: -1,
-      width: 1,
-      height: 1,
-      overflow: 'hidden'
-    }
-  }, props)), React__default.createElement(RadioIcon, {
-    checked: props.checked,
-    variant: variant,
+    disabled: props.disabled
+  }, focusProps, props))), React__default.createElement(RadioIcon, {
+    variant: props.variant,
     disabled: props.disabled,
+    checked: props.checked,
     error: error
   }));
 };
 
-var Radio = function Radio(_ref3) {
-  var label = _ref3.label,
-      required = _ref3.required,
-      _ref3$labelVariant = _ref3.labelVariant,
-      labelVariant = _ref3$labelVariant === void 0 ? 'inline' : _ref3$labelVariant,
-      error = _ref3.error,
-      errorMessage = _ref3.errorMessage,
-      props = _objectWithoutPropertiesLoose(_ref3, _excluded2$4);
-
-  if (label) {
-    return React__default.createElement(React__default.Fragment, null, React__default.createElement(Label, {
-      htmlFor: props.id,
-      required: required,
-      variant: labelVariant,
-      color: props.disabled ? 'disabled' : 'text'
-    }, React__default.createElement(system.Box, Object.assign({
-      as: RadioInput,
-      pr: "8px",
-      error: error
-    }, props)), label), error && errorMessage && React__default.createElement(ValidationMessage, null, React__default.createElement(icons.Exclamation, {
-      size: 16
-    }), errorMessage));
-  }
+var Radio = function Radio(_ref2) {
+  var label = _ref2.label,
+      required = _ref2.required,
+      _ref2$labelVariant = _ref2.labelVariant,
+      labelVariant = _ref2$labelVariant === void 0 ? 'inline' : _ref2$labelVariant,
+      error = _ref2.error,
+      errorMessage = _ref2.errorMessage,
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded2$3);
 
-  return React__default.createElement(RadioInput, Object.assign({}, props));
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(system.Box, {
+    as: Label,
+    htmlFor: props.id,
+    required: required,
+    variant: "label." + labelVariant,
+    css: props.disabled ? {
+      color: 'disabled',
+      ':hover': {
+        cursor: 'not-allowed'
+      }
+    } : {
+      color: 'text',
+      ':hover': {
+        cursor: 'pointer'
+      }
+    }
+  }, React__default.createElement(system.Box, Object.assign({
+    as: RadioInput,
+    error: error
+  }, props)), label), error && errorMessage && React__default.createElement(ValidationMessage, null, React__default.createElement(icons.Exclamation, {
+    size: 16
+  }), errorMessage));
 };
 
-var _excluded$p = ["variant", "className"];
+var _excluded$o = ["variant", "className"];
 // ---------------
 
 var Slider = function Slider(_ref) {
   var _ref$variant = _ref.variant,
       variant = _ref$variant === void 0 ? '' : _ref$variant,
       className = _ref.className,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
 
   return React__default.createElement(system.Box, Object.assign({
     as: "input",
@@ -1150,13 +1113,13 @@ var ListBox = function ListBox(props) {
   }));
 };
 
-var _excluded$q = ["children", "className", "isOpen", "onClose"];
+var _excluded$p = ["children", "className", "isOpen", "onClose"];
 var Popover = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
       className = _ref.className,
       isOpen = _ref.isOpen,
       onClose = _ref.onClose,
-      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$q);
+      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$p);
 
   // Handle events that should cause the popup to close,
   var _useOverlay = overlays$1.useOverlay({
@@ -1181,7 +1144,7 @@ var Popover = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }))));
 });
 
-var _excluded$r = ["labelVariant", "placeholder", "disabled", "required", "error", "errorMessage", "width", "className"];
+var _excluded$q = ["labelVariant", "placeholder", "disabled", "required", "error", "errorMessage", "width", "className"];
 // ---------------
 
 var Select = function Select(_ref) {
@@ -1195,7 +1158,7 @@ var Select = function Select(_ref) {
       errorMessage = _ref.errorMessage,
       width = _ref.width,
       className = _ref.className,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
 
   var state = select.useSelectState(props);
   var overlayTriggerState = overlays.useOverlayTriggerState({});
@@ -1304,7 +1267,7 @@ var Select = function Select(_ref) {
   }), React__default.createElement(ValidationMessage, null, errorMessage)));
 };
 
-var _excluded$s = ["variant", "htmlFor", "label", "error", "errorMessage", "required", "className", "children"];
+var _excluded$r = ["variant", "htmlFor", "label", "error", "errorMessage", "required", "className", "children"];
 // ---------------
 
 var Textarea = function Textarea(_ref) {
@@ -1318,7 +1281,7 @@ var Textarea = function Textarea(_ref) {
       required = _ref.required,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
 
   return React__default.createElement(system.Box, null, label && React__default.createElement(Label, {
     htmlFor: htmlFor,
@@ -1337,10 +1300,10 @@ var Textarea = function Textarea(_ref) {
   }), errorMessage));
 };
 
-var _excluded$t = ["children"];
+var _excluded$s = ["children"];
 var Container = function Container(_ref) {
   var children = _ref.children,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
 
   return React__default.createElement(system.Box, Object.assign({}, props, {
     width: "100%"