@superdispatch/ui 0.22.2 → 0.23.4

package/dist-node/index.js

@@ -18,7 +18,6 @@ var hooks = require('@superdispatch/hooks');
 var clsx = _interopDefault(require('clsx'));
 var flattenChildren = _interopDefault(require('react-keyed-flatten-children'));
 var NumberFormat = _interopDefault(require('react-number-format'));
-var uiLab = require('@superdispatch/ui-lab');
 var createBreakpoints = _interopDefault(require('@material-ui/core/styles/createBreakpoints'));
 
 var _excluded = ["size", "children", "disabled", "isActive", "isLoading", "color"];
@@ -1853,7 +1852,20 @@ var FormControlLabel = /*#__PURE__*/styled__default(core.FormControlLabel).withC
   displayName: "RadioFieldCard__FormControlLabel",
   componentId: "SD__sc-5etge2-2"
 })(["width:100%;"]);
-var RadioFieldCard = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+var Content = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "RadioFieldCard__Content",
+  componentId: "SD__sc-5etge2-3"
+})(["padding:16px;width:100%;border-radius:4px;border:1px solid ", ";"], _ref => {
+  var {
+    active
+  } = _ref;
+  return active ? exports.Color.Blue300 : exports.Color.Silver500;
+});
+var Caption = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "RadioFieldCard__Caption",
+  componentId: "SD__sc-5etge2-4"
+})(["padding-left:32px;"]);
+var RadioFieldCard = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   var {
     name,
     value,
@@ -1863,8 +1875,8 @@ var RadioFieldCard = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     icon,
     checked,
     onChange
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$k);
+  } = _ref2,
+      props = _objectWithoutProperties(_ref2, _excluded$k);
 
   return /*#__PURE__*/jsxRuntime.jsx(Card, {
     disabled: disabled,
@@ -1872,12 +1884,8 @@ var RadioFieldCard = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       name: name,
       disabled: disabled
     }, props), {}, {
-      children: /*#__PURE__*/jsxRuntime.jsx(uiLab.Box, {
-        borderRadius: "small",
-        borderWidth: "small",
-        padding: ['small'],
-        width: "100%",
-        borderColor: checked ? 'Blue300' : 'Silver500',
+      children: /*#__PURE__*/jsxRuntime.jsx(Content, {
+        active: checked,
         children: /*#__PURE__*/jsxRuntime.jsxs(Columns, {
           space: "small",
           children: [/*#__PURE__*/jsxRuntime.jsxs(Column, {
@@ -1888,14 +1896,13 @@ var RadioFieldCard = /*#__PURE__*/React.forwardRef((_ref, ref) => {
                 ref: ref,
                 checked: checked
               }),
-              label: /*#__PURE__*/jsxRuntime.jsx(uiLab.TextBox, {
-                variant: "heading-4",
+              label: /*#__PURE__*/jsxRuntime.jsx(core.Typography, {
+                variant: "h4",
                 children: label
               })
-            }), /*#__PURE__*/jsxRuntime.jsx(uiLab.Box, {
-              paddingLeft: "large",
-              children: /*#__PURE__*/jsxRuntime.jsx(uiLab.TextBox, {
-                color: "secondary",
+            }), /*#__PURE__*/jsxRuntime.jsx(Caption, {
+              children: /*#__PURE__*/jsxRuntime.jsx(core.Typography, {
+                color: "textSecondary",
                 variant: "caption",
                 children: caption
               })
@@ -2305,22 +2312,22 @@ var useStyles$c = /*#__PURE__*/styles.makeStyles(theme => ({
       backgroundColor: exports.Color.Dark300
     },
     '&$colorBlue': {
-      backgroundColor: exports.Color.Blue500
+      backgroundColor: exports.Color.Blue300
     },
     '&$colorGreen': {
-      backgroundColor: exports.Color.Green500
+      backgroundColor: exports.Color.Green300
     },
     '&$colorPurple': {
-      backgroundColor: exports.Color.Purple500
+      backgroundColor: exports.Color.Purple300
     },
     '&$colorRed': {
-      backgroundColor: exports.Color.Red500
+      backgroundColor: exports.Color.Red300
     },
     '&$colorTeal': {
-      backgroundColor: exports.Color.Teal500
+      backgroundColor: exports.Color.Teal300
     },
     '&$colorYellow': {
-      backgroundColor: exports.Color.Yellow500
+      backgroundColor: exports.Color.Yellow300
     }
   },
   colorGrey: {},