@superdispatch/ui 0.22.2 → 0.23.4

package/dist-web/index.js

@@ -11,7 +11,6 @@ import { useEventHandler, useDeepEqualValue, useValueObserver, useDeepEqualMemo,
 import clsx from 'clsx';
 import flattenChildren from 'react-keyed-flatten-children';
 import NumberFormat from 'react-number-format';
-import { Box, TextBox } from '@superdispatch/ui-lab';
 import createBreakpoints from '@material-ui/core/styles/createBreakpoints';
 
 var _excluded = ["size", "children", "disabled", "isActive", "isLoading", "color"];
@@ -1848,7 +1847,20 @@ var FormControlLabel = /*#__PURE__*/styled(FormControlLabel$1).withConfig({
   displayName: "RadioFieldCard__FormControlLabel",
   componentId: "SD__sc-5etge2-2"
 })(["width:100%;"]);
-var RadioFieldCard = /*#__PURE__*/forwardRef((_ref, ref) => {
+var Content = /*#__PURE__*/styled.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 ? Color.Blue300 : Color.Silver500;
+});
+var Caption = /*#__PURE__*/styled.div.withConfig({
+  displayName: "RadioFieldCard__Caption",
+  componentId: "SD__sc-5etge2-4"
+})(["padding-left:32px;"]);
+var RadioFieldCard = /*#__PURE__*/forwardRef((_ref2, ref) => {
   var {
     name,
     value,
@@ -1858,8 +1870,8 @@ var RadioFieldCard = /*#__PURE__*/forwardRef((_ref, ref) => {
     icon,
     checked,
     onChange
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$k);
+  } = _ref2,
+      props = _objectWithoutProperties(_ref2, _excluded$k);
 
   return /*#__PURE__*/jsx(Card, {
     disabled: disabled,
@@ -1867,12 +1879,8 @@ var RadioFieldCard = /*#__PURE__*/forwardRef((_ref, ref) => {
       name: name,
       disabled: disabled
     }, props), {}, {
-      children: /*#__PURE__*/jsx(Box, {
-        borderRadius: "small",
-        borderWidth: "small",
-        padding: ['small'],
-        width: "100%",
-        borderColor: checked ? 'Blue300' : 'Silver500',
+      children: /*#__PURE__*/jsx(Content, {
+        active: checked,
         children: /*#__PURE__*/jsxs(Columns, {
           space: "small",
           children: [/*#__PURE__*/jsxs(Column, {
@@ -1883,14 +1891,13 @@ var RadioFieldCard = /*#__PURE__*/forwardRef((_ref, ref) => {
                 ref: ref,
                 checked: checked
               }),
-              label: /*#__PURE__*/jsx(TextBox, {
-                variant: "heading-4",
+              label: /*#__PURE__*/jsx(Typography, {
+                variant: "h4",
                 children: label
               })
-            }), /*#__PURE__*/jsx(Box, {
-              paddingLeft: "large",
-              children: /*#__PURE__*/jsx(TextBox, {
-                color: "secondary",
+            }), /*#__PURE__*/jsx(Caption, {
+              children: /*#__PURE__*/jsx(Typography, {
+                color: "textSecondary",
                 variant: "caption",
                 children: caption
               })
@@ -2300,22 +2307,22 @@ var useStyles$c = /*#__PURE__*/makeStyles(theme => ({
       backgroundColor: Color.Dark300
     },
     '&$colorBlue': {
-      backgroundColor: Color.Blue500
+      backgroundColor: Color.Blue300
     },
     '&$colorGreen': {
-      backgroundColor: Color.Green500
+      backgroundColor: Color.Green300
     },
     '&$colorPurple': {
-      backgroundColor: Color.Purple500
+      backgroundColor: Color.Purple300
     },
     '&$colorRed': {
-      backgroundColor: Color.Red500
+      backgroundColor: Color.Red300
     },
     '&$colorTeal': {
-      backgroundColor: Color.Teal500
+      backgroundColor: Color.Teal300
     },
     '&$colorYellow': {
-      backgroundColor: Color.Yellow500
+      backgroundColor: Color.Yellow300
     }
   },
   colorGrey: {},