@flodesk/grain 11.21.2 → 11.22.0

package/es/components/index.js

@@ -29,4 +29,5 @@ export { Pagination } from './pagination';
 export { Nav, NavItem } from './nav';
 export { Flex } from './flex';
 export { Badge } from './badge';
-export { Toast } from './toast';
+export { Toast } from './toast';
+export { Radio } from './radio';

package/es/components/radio.js

@@ -0,0 +1,89 @@
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.array.index-of.js";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.object.assign.js";
+import _styled from "@emotion/styled/base";
+var _excluded = ["onChange"],
+    _excluded2 = ["isDisabled", "isChecked", "name", "label", "hint", "id", "onChange"];
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import { getColor, getSpace, getTransition } from '../utilities';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { componentVars, FieldHint, FieldLabel } from '../foundational';
+import { types } from '../types';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var size = 18;
+var knobSize = 8;
+var strokeSize = componentVars.strokeSize;
+
+var RadioBoxInput = /*#__PURE__*/_styled("input", process.env.NODE_ENV === "production" ? {
+  target: "e1xos9xm1"
+} : {
+  target: "e1xos9xm1",
+  label: "RadioBoxInput"
+})("--knobColor:", getColor('shade2'), ";--backgroundColor:transparent;--backgroundColorActive:", getColor('shade12'), ";--borderColor:", getColor('shade6'), ";appearance:none;height:", size, "px;width:", size, "px;display:block;border-radius:100%;cursor:pointer;margin:0;position:relative;background-color:var(--backgroundColor);border:", strokeSize, " solid var(--borderColor);transition:border-color ", getTransition('leave'), ";&:hover{--borderColor:", getColor('shade12'), ";transition:border-color ", getTransition('hover'), ";}&:checked{--borderColor:var(--backgroundColorActive);--backgroundColor:var(--backgroundColorActive);}&:after{content:'';position:absolute;background:var(--knobColor);display:block;pointer-events:none;opacity:0;border-radius:100%;left:0;right:0;top:0;bottom:0;margin:auto;width:", knobSize, "px;height:", knobSize, "px;}&:checked:after{opacity:1;}&:disabled{--knobColor:", getColor('disabledContent'), ";--backgroundColor:", getColor('disabledBackground'), ";--backgroundColorActive:", getColor('disabledBackground'), ";--borderColor:transparent;pointer-events:none;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3JhZGlvLmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFXa0MiLCJmaWxlIjoiLi4vLi4vc3JjL2NvbXBvbmVudHMvcmFkaW8uanN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgZ2V0Q29sb3IsIGdldFNwYWNlLCBnZXRUcmFuc2l0aW9uIH0gZnJvbSAnLi4vdXRpbGl0aWVzJztcbmltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgUHJvcFR5cGVzIGZyb20gJ3Byb3AtdHlwZXMnO1xuaW1wb3J0IHsgY29tcG9uZW50VmFycywgRmllbGRIaW50LCBGaWVsZExhYmVsIH0gZnJvbSAnLi4vZm91bmRhdGlvbmFsJztcbmltcG9ydCB7IHR5cGVzIH0gZnJvbSAnLi4vdHlwZXMnO1xuXG5jb25zdCBzaXplID0gMTg7XG5jb25zdCBrbm9iU2l6ZSA9IDg7XG5jb25zdCBzdHJva2VTaXplID0gY29tcG9uZW50VmFycy5zdHJva2VTaXplO1xuXG5jb25zdCBSYWRpb0JveElucHV0ID0gc3R5bGVkLmlucHV0YFxuICAtLWtub2JDb2xvcjogJHtnZXRDb2xvcignc2hhZGUyJyl9O1xuICAtLWJhY2tncm91bmRDb2xvcjogdHJhbnNwYXJlbnQ7XG4gIC0tYmFja2dyb3VuZENvbG9yQWN0aXZlOiAke2dldENvbG9yKCdzaGFkZTEyJyl9O1xuICAtLWJvcmRlckNvbG9yOiAke2dldENvbG9yKCdzaGFkZTYnKX07XG5cbiAgYXBwZWFyYW5jZTogbm9uZTtcbiAgaGVpZ2h0OiAke3NpemV9cHg7XG4gIHdpZHRoOiAke3NpemV9cHg7XG4gIGRpc3BsYXk6IGJsb2NrO1xuICBib3JkZXItcmFkaXVzOiAxMDAlO1xuICBjdXJzb3I6IHBvaW50ZXI7XG4gIG1hcmdpbjogMDtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1iYWNrZ3JvdW5kQ29sb3IpO1xuICBib3JkZXI6ICR7c3Ryb2tlU2l6ZX0gc29saWQgdmFyKC0tYm9yZGVyQ29sb3IpO1xuICB0cmFuc2l0aW9uOiBib3JkZXItY29sb3IgJHtnZXRUcmFuc2l0aW9uKCdsZWF2ZScpfTtcblxuICAmOmhvdmVyIHtcbiAgICAtLWJvcmRlckNvbG9yOiAke2dldENvbG9yKCdzaGFkZTEyJyl9O1xuICAgIHRyYW5zaXRpb246IGJvcmRlci1jb2xvciAke2dldFRyYW5zaXRpb24oJ2hvdmVyJyl9O1xuICB9XG5cbiAgJjpjaGVja2VkIHtcbiAgICAtLWJvcmRlckNvbG9yOiB2YXIoLS1iYWNrZ3JvdW5kQ29sb3JBY3RpdmUpO1xuICAgIC0tYmFja2dyb3VuZENvbG9yOiB2YXIoLS1iYWNrZ3JvdW5kQ29sb3JBY3RpdmUpO1xuICB9XG5cbiAgJjphZnRlciB7XG4gICAgY29udGVudDogJyc7XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIGJhY2tncm91bmQ6IHZhcigtLWtub2JDb2xvcik7XG4gICAgZGlzcGxheTogYmxvY2s7XG4gICAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG4gICAgb3BhY2l0eTogMDtcbiAgICBib3JkZXItcmFkaXVzOiAxMDAlO1xuICAgIGxlZnQ6IDA7XG4gICAgcmlnaHQ6IDA7XG4gICAgdG9wOiAwO1xuICAgIGJvdHRvbTogMDtcbiAgICBtYXJnaW46IGF1dG87XG4gICAgd2lkdGg6ICR7a25vYlNpemV9cHg7XG4gICAgaGVpZ2h0OiAke2tub2JTaXplfXB4O1xuICB9XG5cbiAgJjpjaGVja2VkOmFmdGVyIHtcbiAgICBvcGFjaXR5OiAxO1xuICB9XG5cbiAgJjpkaXNhYmxlZCB7XG4gICAgLS1rbm9iQ29sb3I6ICR7Z2V0Q29sb3IoJ2Rpc2FibGVkQ29udGVudCcpfTtcbiAgICAtLWJhY2tncm91bmRDb2xvcjogJHtnZXRDb2xvcignZGlzYWJsZWRCYWNrZ3JvdW5kJyl9O1xuICAgIC0tYmFja2dyb3VuZENvbG9yQWN0aXZlOiAke2dldENvbG9yKCdkaXNhYmxlZEJhY2tncm91bmQnKX07XG4gICAgLS1ib3JkZXJDb2xvcjogdHJhbnNwYXJlbnQ7XG4gICAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG4gIH1cbmA7XG5cbmNvbnN0IFJhZGlvQm94ID0gKHsgb25DaGFuZ2UgPSAoKSA9PiB7fSwgLi4ucHJvcHMgfSkgPT4gKFxuICA8UmFkaW9Cb3hJbnB1dCB7Li4ucHJvcHN9IG9uQ2hhbmdlPXtvbkNoYW5nZX0gdHlwZT1cInJhZGlvXCIgLz5cbik7XG5cbmNvbnN0IFJvb3QgPSBzdHlsZWQuZGl2YFxuICAkeyh7IGhhc1RleHQgfSkgPT5cbiAgICBoYXNUZXh0ICYmXG4gICAgYFxuICAgICAgZGlzcGxheTogZ3JpZDtcbiAgICAgIGdyaWQtYXV0by1mbG93OiBjb2x1bW47XG4gICAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgICAgd2lkdGg6IGZpdC1jb250ZW50O1xuICAgICAgY29sdW1uLWdhcDogJHtnZXRTcGFjZSgnYmV0d2VlbkZvcm1Db250cm9sQW5kTGFiZWwnKX07XG4gICAgYH1cblxuICAucmFkaW9IaW50LCAucmFkaW9MYWJlbCB7XG4gICAgZ3JpZC1jb2x1bW46IDIgLyAzO1xuICB9XG5gO1xuXG5leHBvcnQgY29uc3QgUmFkaW8gPSAoeyBpc0Rpc2FibGVkLCBpc0NoZWNrZWQsIG5hbWUsIGxhYmVsLCBoaW50LCBpZCwgb25DaGFuZ2UsIC4uLnByb3BzIH0pID0+IHtcbiAgcmV0dXJuIChcbiAgICA8Um9vdCBoYXNUZXh0PXtsYWJlbCB8fCBoaW50fSB7Li4ucHJvcHN9PlxuICAgICAgPFJhZGlvQm94XG4gICAgICAgIHR5cGU9XCJyYWRpb1wiXG4gICAgICAgIGRpc2FibGVkPXtpc0Rpc2FibGVkfVxuICAgICAgICBpZD17aWR9XG4gICAgICAgIGNoZWNrZWQ9e2lzQ2hlY2tlZH1cbiAgICAgICAgb25DaGFuZ2U9e29uQ2hhbmdlfVxuICAgICAgICBuYW1lPXtuYW1lfVxuICAgICAgLz5cbiAgICAgIHtsYWJlbCAmJiAoXG4gICAgICAgIDxGaWVsZExhYmVsIGh0bWxGb3I9e2lkfSBjbGFzc05hbWU9XCJyYWRpb0xhYmVsXCI+XG4gICAgICAgICAge2xhYmVsfVxuICAgICAgICA8L0ZpZWxkTGFiZWw+XG4gICAgICApfVxuICAgICAge2hpbnQgJiYgPEZpZWxkSGludCBjbGFzc05hbWU9XCJyYWRpb0hpbnRcIj57aGludH08L0ZpZWxkSGludD59XG4gICAgPC9Sb290PlxuICApO1xufTtcblxuUmFkaW8uTGFiZWwgPSBGaWVsZExhYmVsO1xuUmFkaW8uQm94ID0gUmFkaW9Cb3g7XG5cblJhZGlvLnByb3BUeXBlcyA9IHtcbiAgaWQ6IFByb3BUeXBlcy5zdHJpbmcuaXNSZXF1aXJlZCxcbiAgb25DaGFuZ2U6IFByb3BUeXBlcy5mdW5jLFxuICBpc0Rpc2FibGVkOiBQcm9wVHlwZXMuYm9vbCxcbiAgaXNDaGVja2VkOiBQcm9wVHlwZXMuYm9vbCxcbiAgbGFiZWw6IFByb3BUeXBlcy5zdHJpbmcsXG4gIGhpbnQ6IHR5cGVzLmhpbnQsXG4gIG5hbWU6IFByb3BUeXBlcy5zdHJpbmcsXG59O1xuIl19 */"));
+
+var RadioBox = function RadioBox(_ref) {
+  var _ref$onChange = _ref.onChange,
+      onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return ___EmotionJSX(RadioBoxInput, _extends({}, props, {
+    onChange: onChange,
+    type: "radio"
+  }));
+};
+
+var Root = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
+  target: "e1xos9xm0"
+} : {
+  target: "e1xos9xm0",
+  label: "Root"
+})(function (_ref2) {
+  var hasText = _ref2.hasText;
+  return hasText && "\n      display: grid;\n      grid-auto-flow: column;\n      align-items: center;\n      width: fit-content;\n      column-gap: ".concat(getSpace('betweenFormControlAndLabel'), ";\n    ");
+}, " .radioHint,.radioLabel{grid-column:2/3;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3JhZGlvLmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF5RXVCIiwiZmlsZSI6Ii4uLy4uL3NyYy9jb21wb25lbnRzL3JhZGlvLmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGdldENvbG9yLCBnZXRTcGFjZSwgZ2V0VHJhbnNpdGlvbiB9IGZyb20gJy4uL3V0aWxpdGllcyc7XG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IFByb3BUeXBlcyBmcm9tICdwcm9wLXR5cGVzJztcbmltcG9ydCB7IGNvbXBvbmVudFZhcnMsIEZpZWxkSGludCwgRmllbGRMYWJlbCB9IGZyb20gJy4uL2ZvdW5kYXRpb25hbCc7XG5pbXBvcnQgeyB0eXBlcyB9IGZyb20gJy4uL3R5cGVzJztcblxuY29uc3Qgc2l6ZSA9IDE4O1xuY29uc3Qga25vYlNpemUgPSA4O1xuY29uc3Qgc3Ryb2tlU2l6ZSA9IGNvbXBvbmVudFZhcnMuc3Ryb2tlU2l6ZTtcblxuY29uc3QgUmFkaW9Cb3hJbnB1dCA9IHN0eWxlZC5pbnB1dGBcbiAgLS1rbm9iQ29sb3I6ICR7Z2V0Q29sb3IoJ3NoYWRlMicpfTtcbiAgLS1iYWNrZ3JvdW5kQ29sb3I6IHRyYW5zcGFyZW50O1xuICAtLWJhY2tncm91bmRDb2xvckFjdGl2ZTogJHtnZXRDb2xvcignc2hhZGUxMicpfTtcbiAgLS1ib3JkZXJDb2xvcjogJHtnZXRDb2xvcignc2hhZGU2Jyl9O1xuXG4gIGFwcGVhcmFuY2U6IG5vbmU7XG4gIGhlaWdodDogJHtzaXplfXB4O1xuICB3aWR0aDogJHtzaXplfXB4O1xuICBkaXNwbGF5OiBibG9jaztcbiAgYm9yZGVyLXJhZGl1czogMTAwJTtcbiAgY3Vyc29yOiBwb2ludGVyO1xuICBtYXJnaW46IDA7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tYmFja2dyb3VuZENvbG9yKTtcbiAgYm9yZGVyOiAke3N0cm9rZVNpemV9IHNvbGlkIHZhcigtLWJvcmRlckNvbG9yKTtcbiAgdHJhbnNpdGlvbjogYm9yZGVyLWNvbG9yICR7Z2V0VHJhbnNpdGlvbignbGVhdmUnKX07XG5cbiAgJjpob3ZlciB7XG4gICAgLS1ib3JkZXJDb2xvcjogJHtnZXRDb2xvcignc2hhZGUxMicpfTtcbiAgICB0cmFuc2l0aW9uOiBib3JkZXItY29sb3IgJHtnZXRUcmFuc2l0aW9uKCdob3ZlcicpfTtcbiAgfVxuXG4gICY6Y2hlY2tlZCB7XG4gICAgLS1ib3JkZXJDb2xvcjogdmFyKC0tYmFja2dyb3VuZENvbG9yQWN0aXZlKTtcbiAgICAtLWJhY2tncm91bmRDb2xvcjogdmFyKC0tYmFja2dyb3VuZENvbG9yQWN0aXZlKTtcbiAgfVxuXG4gICY6YWZ0ZXIge1xuICAgIGNvbnRlbnQ6ICcnO1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICBiYWNrZ3JvdW5kOiB2YXIoLS1rbm9iQ29sb3IpO1xuICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuICAgIG9wYWNpdHk6IDA7XG4gICAgYm9yZGVyLXJhZGl1czogMTAwJTtcbiAgICBsZWZ0OiAwO1xuICAgIHJpZ2h0OiAwO1xuICAgIHRvcDogMDtcbiAgICBib3R0b206IDA7XG4gICAgbWFyZ2luOiBhdXRvO1xuICAgIHdpZHRoOiAke2tub2JTaXplfXB4O1xuICAgIGhlaWdodDogJHtrbm9iU2l6ZX1weDtcbiAgfVxuXG4gICY6Y2hlY2tlZDphZnRlciB7XG4gICAgb3BhY2l0eTogMTtcbiAgfVxuXG4gICY6ZGlzYWJsZWQge1xuICAgIC0ta25vYkNvbG9yOiAke2dldENvbG9yKCdkaXNhYmxlZENvbnRlbnQnKX07XG4gICAgLS1iYWNrZ3JvdW5kQ29sb3I6ICR7Z2V0Q29sb3IoJ2Rpc2FibGVkQmFja2dyb3VuZCcpfTtcbiAgICAtLWJhY2tncm91bmRDb2xvckFjdGl2ZTogJHtnZXRDb2xvcignZGlzYWJsZWRCYWNrZ3JvdW5kJyl9O1xuICAgIC0tYm9yZGVyQ29sb3I6IHRyYW5zcGFyZW50O1xuICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuICB9XG5gO1xuXG5jb25zdCBSYWRpb0JveCA9ICh7IG9uQ2hhbmdlID0gKCkgPT4ge30sIC4uLnByb3BzIH0pID0+IChcbiAgPFJhZGlvQm94SW5wdXQgey4uLnByb3BzfSBvbkNoYW5nZT17b25DaGFuZ2V9IHR5cGU9XCJyYWRpb1wiIC8+XG4pO1xuXG5jb25zdCBSb290ID0gc3R5bGVkLmRpdmBcbiAgJHsoeyBoYXNUZXh0IH0pID0+XG4gICAgaGFzVGV4dCAmJlxuICAgIGBcbiAgICAgIGRpc3BsYXk6IGdyaWQ7XG4gICAgICBncmlkLWF1dG8tZmxvdzogY29sdW1uO1xuICAgICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICAgIHdpZHRoOiBmaXQtY29udGVudDtcbiAgICAgIGNvbHVtbi1nYXA6ICR7Z2V0U3BhY2UoJ2JldHdlZW5Gb3JtQ29udHJvbEFuZExhYmVsJyl9O1xuICAgIGB9XG5cbiAgLnJhZGlvSGludCwgLnJhZGlvTGFiZWwge1xuICAgIGdyaWQtY29sdW1uOiAyIC8gMztcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IFJhZGlvID0gKHsgaXNEaXNhYmxlZCwgaXNDaGVja2VkLCBuYW1lLCBsYWJlbCwgaGludCwgaWQsIG9uQ2hhbmdlLCAuLi5wcm9wcyB9KSA9PiB7XG4gIHJldHVybiAoXG4gICAgPFJvb3QgaGFzVGV4dD17bGFiZWwgfHwgaGludH0gey4uLnByb3BzfT5cbiAgICAgIDxSYWRpb0JveFxuICAgICAgICB0eXBlPVwicmFkaW9cIlxuICAgICAgICBkaXNhYmxlZD17aXNEaXNhYmxlZH1cbiAgICAgICAgaWQ9e2lkfVxuICAgICAgICBjaGVja2VkPXtpc0NoZWNrZWR9XG4gICAgICAgIG9uQ2hhbmdlPXtvbkNoYW5nZX1cbiAgICAgICAgbmFtZT17bmFtZX1cbiAgICAgIC8+XG4gICAgICB7bGFiZWwgJiYgKFxuICAgICAgICA8RmllbGRMYWJlbCBodG1sRm9yPXtpZH0gY2xhc3NOYW1lPVwicmFkaW9MYWJlbFwiPlxuICAgICAgICAgIHtsYWJlbH1cbiAgICAgICAgPC9GaWVsZExhYmVsPlxuICAgICAgKX1cbiAgICAgIHtoaW50ICYmIDxGaWVsZEhpbnQgY2xhc3NOYW1lPVwicmFkaW9IaW50XCI+e2hpbnR9PC9GaWVsZEhpbnQ+fVxuICAgIDwvUm9vdD5cbiAgKTtcbn07XG5cblJhZGlvLkxhYmVsID0gRmllbGRMYWJlbDtcblJhZGlvLkJveCA9IFJhZGlvQm94O1xuXG5SYWRpby5wcm9wVHlwZXMgPSB7XG4gIGlkOiBQcm9wVHlwZXMuc3RyaW5nLmlzUmVxdWlyZWQsXG4gIG9uQ2hhbmdlOiBQcm9wVHlwZXMuZnVuYyxcbiAgaXNEaXNhYmxlZDogUHJvcFR5cGVzLmJvb2wsXG4gIGlzQ2hlY2tlZDogUHJvcFR5cGVzLmJvb2wsXG4gIGxhYmVsOiBQcm9wVHlwZXMuc3RyaW5nLFxuICBoaW50OiB0eXBlcy5oaW50LFxuICBuYW1lOiBQcm9wVHlwZXMuc3RyaW5nLFxufTtcbiJdfQ== */"));
+
+export var Radio = function Radio(_ref3) {
+  var isDisabled = _ref3.isDisabled,
+      isChecked = _ref3.isChecked,
+      name = _ref3.name,
+      label = _ref3.label,
+      hint = _ref3.hint,
+      id = _ref3.id,
+      onChange = _ref3.onChange,
+      props = _objectWithoutProperties(_ref3, _excluded2);
+
+  return ___EmotionJSX(Root, _extends({
+    hasText: label || hint
+  }, props), ___EmotionJSX(RadioBox, {
+    type: "radio",
+    disabled: isDisabled,
+    id: id,
+    checked: isChecked,
+    onChange: onChange,
+    name: name
+  }), label && ___EmotionJSX(FieldLabel, {
+    htmlFor: id,
+    className: "radioLabel"
+  }, label), hint && ___EmotionJSX(FieldHint, {
+    className: "radioHint"
+  }, hint));
+};
+Radio.Label = FieldLabel;
+Radio.Box = RadioBox;
+Radio.propTypes = {
+  id: PropTypes.string.isRequired,
+  onChange: PropTypes.func,
+  isDisabled: PropTypes.bool,
+  isChecked: PropTypes.bool,
+  label: PropTypes.string,
+  hint: types.hint,
+  name: PropTypes.string
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flodesk/grain",
-  "version": "11.21.2",
+  "version": "11.22.0",
   "description": "Flodesk design system",
   "module": "es/index.js",
   "author": "Flodesk",