@superdispatch/ui 0.22.2 → 0.23.0

package/dist-src/avatar/AvatarOverrides.js

@@ -1,5 +1,5 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import { Color } from "../color/Color.js";
+import { Color } from "../theme/Color.js";
 export function overrideAvatar(theme) {
   theme.overrides.MuiAvatar = {
     root: _objectSpread(_objectSpread({}, theme.typography.h5), {}, {

package/dist-src/avatar-button/AvatarButton.js

@@ -6,7 +6,7 @@ import { Avatar, ButtonBase, CircularProgress } from '@material-ui/core';
 import { makeStyles } from '@material-ui/styles';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
-import { Color } from "../color/Color.js";
+import { Color } from "../theme/Color.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var useStyles = /*#__PURE__*/makeStyles(theme => {

package/dist-src/button/ButtonOverrides.js

@@ -1,4 +1,4 @@
-import { Color } from "../color/Color.js";
+import { Color } from "../theme/Color.js";
 
 function outlineShadow() {
   var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;

package/dist-src/card-button/CardButton.js

@@ -5,7 +5,7 @@ import { ButtonBase, Typography } from '@material-ui/core';
 import { makeStyles } from '@material-ui/styles';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
-import { Color } from "../color/Color.js";
+import { Color } from "../theme/Color.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";

package/dist-src/checkbox/CheckboxOverrides.js

@@ -1,5 +1,5 @@
 import { SvgIcon } from '@material-ui/core';
-import { Color } from "../color/Color.js";
+import { Color } from "../theme/Color.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export function overrideCheckbox(theme) {

package/dist-src/chip/ChipOverrides.js

@@ -1,6 +1,6 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import { SvgIcon } from '@material-ui/core';
-import { Color } from "../color/Color.js";
+import { Color } from "../theme/Color.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function overrideChip(theme) {
   var sm = theme.breakpoints.up('sm');

package/dist-src/description-list/DescriptionList.js

@@ -5,8 +5,8 @@ import { SvgIcon, Typography } from '@material-ui/core';
 import { makeStyles } from '@material-ui/styles';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
-import { Color } from "../color/Color.js";
 import { OverflowText } from "../overflow-text/OverflowText.js";
+import { Color } from "../theme/Color.js";
 import { isEmptyReactNode } from "../utils/isEmptyReactNode.js";
 import { useUID } from "../utils/useUID.js";
 import { jsx as _jsx } from "react/jsx-runtime";

package/dist-src/drawer/DrawerActions.js

@@ -5,7 +5,7 @@ import { AppBar, Toolbar } from '@material-ui/core';
 import { makeStyles } from '@material-ui/styles';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
-import { Color } from "../color/Color.js";
+import { Color } from "../theme/Color.js";
 import { VisibilityObserver } from "../utils/VisibilityObserver.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";

package/dist-src/drawer/DrawerTitle.js

@@ -5,7 +5,7 @@ import { AppBar, Grid, Toolbar, Typography } from '@material-ui/core';
 import { makeStyles } from '@material-ui/styles';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
-import { Color } from "../color/Color.js";
+import { Color } from "../theme/Color.js";
 import { VisibilityObserver } from "../utils/VisibilityObserver.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";

package/dist-src/icon-button/IconButtonOverrides.js

@@ -1,4 +1,4 @@
-import { Color } from "../color/Color.js";
+import { Color } from "../theme/Color.js";
 export function overrideIconButton(theme) {
   theme.overrides.MuiIconButton = {
     root: {

package/dist-src/index.js

@@ -5,7 +5,6 @@ export * from "./button/Button.js";
 export * from "./card-button/CardButton.js";
 export * from "./checkbox/CheckboxField.js";
 export * from "./checkbox/CheckboxGroudField.js";
-export * from "./color/Color.js";
 export * from "./columns/Column.js";
 export * from "./columns/Columns.js";
 export * from "./description-list/DescriptionList.js";
@@ -36,6 +35,7 @@ export * from "./snackbar/SnackbarContent.js";
 export * from "./snackbar/SnackbarStack.js";
 export * from "./stack/Stack.js";
 export * from "./tag/Tag.js";
+export * from "./theme/Color.js";
 export * from "./theme/SuperDispatchTheme.js";
 export * from "./theme/ThemeProvider.js";
 export * from "./tiles/Tiles.js";

package/dist-src/link/LinkOverrides.js

@@ -1,4 +1,4 @@
-import { Color } from "../color/Color.js";
+import { Color } from "../theme/Color.js";
 
 function line(color) {
   return "linear-gradient(to right, ".concat(color, " 0%, ").concat(color, " 100%)");

package/dist-src/list/ListOverrides.js

@@ -1,4 +1,4 @@
-import { Color } from "../color/Color.js";
+import { Color } from "../theme/Color.js";
 export function overrideList(theme) {
   theme.overrides.MuiListItem = {
     root: {

package/dist-src/overflow-text/OverflowText.js

@@ -6,7 +6,7 @@ import { Tooltip, Typography } from '@material-ui/core';
 import { makeStyles } from '@material-ui/styles';
 import clsx from 'clsx';
 import { forwardRef, useState } from 'react';
-import { Color } from "../color/Color.js";
+import { Color } from "../theme/Color.js";
 import { VisibilityObserver } from "../utils/VisibilityObserver.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";

package/dist-src/pagination/PaginationOverrides.js

@@ -1,4 +1,4 @@
-import { Color } from "../color/Color.js";
+import { Color } from "../theme/Color.js";
 export function overridePagination(theme) {
   var props = {};
   var overrides = {

package/dist-src/paper/PaperOverrides.js

@@ -1,4 +1,4 @@
-import { Color } from "../color/Color.js";
+import { Color } from "../theme/Color.js";
 export function overridePaper(theme) {
   theme.props.MuiPaper = {
     elevation: 0

package/dist-src/radio/RadioFieldCard.js

@@ -1,12 +1,12 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["name", "value", "label", "caption", "disabled", "icon", "checked", "onChange"];
-import { ButtonBase, Card as MuiCard, FormControlLabel as MuiFormControlLabel, Radio } from '@material-ui/core';
-import { Box, TextBox } from '@superdispatch/ui-lab';
+import { ButtonBase, Card as MuiCard, FormControlLabel as MuiFormControlLabel, Radio, Typography } from '@material-ui/core';
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 import { Column } from "../columns/Column.js";
 import { Columns } from "../columns/Columns.js";
+import { Color } from "../theme/Color.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var ClickableCard = /*#__PURE__*/styled(ButtonBase).withConfig({
@@ -21,7 +21,20 @@ var FormControlLabel = /*#__PURE__*/styled(MuiFormControlLabel).withConfig({
   displayName: "RadioFieldCard__FormControlLabel",
   componentId: "SD__sc-5etge2-2"
 })(["width:100%;"]);
-export 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;"]);
+export var RadioFieldCard = /*#__PURE__*/forwardRef((_ref2, ref) => {
   var {
     name,
     value,
@@ -31,8 +44,8 @@ export var RadioFieldCard = /*#__PURE__*/forwardRef((_ref, ref) => {
     icon,
     checked,
     onChange
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded);
+  } = _ref2,
+      props = _objectWithoutProperties(_ref2, _excluded);
 
   return /*#__PURE__*/_jsx(Card, {
     disabled: disabled,
@@ -40,12 +53,8 @@ export 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, {
@@ -56,14 +65,13 @@ export 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
               })

package/dist-src/radio/RadioOverrides.js

@@ -1,5 +1,5 @@
 import { SvgIcon } from '@material-ui/core';
-import { Color } from "../color/Color.js";
+import { Color } from "../theme/Color.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export function overrideRadio(theme) {

package/dist-src/snackbar/SnackbarContent.js

@@ -7,7 +7,7 @@ import { CheckCircle, Close, Warning } from '@material-ui/icons';
 import { makeStyles } from '@material-ui/styles';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
-import { Color } from "../color/Color.js";
+import { Color } from "../theme/Color.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";

package/dist-src/svg-icon/SvgIconOverrides.js

@@ -1,4 +1,4 @@
-import { Color } from "../color/Color.js";
+import { Color } from "../theme/Color.js";
 export function overrideSvgIcon(theme) {
   var sm = theme.breakpoints.up('sm');
   theme.overrides.MuiSvgIcon = {

package/dist-src/switch/SwitchOverrides.js

@@ -1,4 +1,4 @@
-import { Color } from "../color/Color.js";
+import { Color } from "../theme/Color.js";
 export function overrideSwitch(theme) {
   var sm = theme.breakpoints.up('sm');
   theme.props.MuiSwitch = {

package/dist-src/tabs/TabsOverrides.js

@@ -1,5 +1,5 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import { Color } from "../color/Color.js";
+import { Color } from "../theme/Color.js";
 export function overrideTabs(theme) {
   theme.props.MuiTabs = {
     variant: 'scrollable',

package/dist-src/tag/Tag.js

@@ -5,7 +5,7 @@ import { Typography } from '@material-ui/core';
 import { makeStyles } from '@material-ui/styles';
 import cx from 'clsx';
 import { forwardRef } from 'react';
-import { Color } from "../color/Color.js";
+import { Color } from "../theme/Color.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 var useStyles = /*#__PURE__*/makeStyles(theme => ({
   root: {

package/dist-src/text-field/TextFieldOverrides.js

@@ -1,7 +1,7 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import { SvgIcon } from '@material-ui/core';
 import { forwardRef } from 'react';
-import { Color } from "../color/Color.js";
+import { Color } from "../theme/Color.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 var SelectIcon = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/_jsx(SvgIcon, _objectSpread(_objectSpread({
   ref: ref

package/dist-src/theme/ThemeProvider.js

@@ -10,7 +10,6 @@ import { overrideButton } from "../button/ButtonOverrides.js";
 import { overrideCard } from "../card/CardOverrides.js";
 import { overrideCheckbox } from "../checkbox/CheckboxOverrides.js";
 import { overrideChip } from "../chip/ChipOverrides.js";
-import { Color } from "../color/Color.js";
 import { overrideDialog } from "../dialog/DialogOverrides.js";
 import { overrideDrawer } from "../drawer/DrawerOverrides.js";
 import { overrideIconButton } from "../icon-button/IconButtonOverrides.js";
@@ -30,6 +29,7 @@ import { overrideTextField } from "../text-field/TextFieldOverrides.js";
 import { overrideToolbar } from "../toolbar/ToolbarOverrides.js";
 import { overrideTooltip } from "../tooltip/TooltipOverrides.js";
 import { createTypographyOptions, overrideTypography } from "../typography/TypographyOverrides.js";
+import { Color } from "./Color.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 

package/dist-src/tooltip/TooltipOverrides.js

@@ -1,5 +1,5 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import { Color } from "../color/Color.js";
+import { Color } from "../theme/Color.js";
 export function overrideTooltip(theme) {
   theme.props.MuiTooltip = {
     arrow: true

package/dist-types/index.d.ts

@@ -96,115 +96,6 @@ interface CheckboxGroupFieldProps extends Omit<FormControlProps, 'hiddenLabel' |
 }
 declare const CheckboxGroupField: ForwardRefExoticComponent<CheckboxGroupFieldProps>;
 
-declare type ColorVariant = 'grey' | 'silver' | 'blue' | 'green' | 'purple' | 'red' | 'teal' | 'yellow';
-declare enum Color {
-    White = "#fff",
-    White50 = "rgba(255, 255, 255, 0.5)",
-    White40 = "rgba(255, 255, 255, 0.4)",
-    White20 = "rgba(255, 255, 255, 0.2)",
-    White10 = "rgba(255, 255, 255, 0.1)",
-    White08 = "rgba(255, 255, 255, 0.08)",
-    Transparent = "rgba(0, 0, 0, 0)",
-    Black = "#000",
-    Black50 = "rgba(0, 0, 0, 0.5)",
-    Black20 = "rgba(0, 0, 0, 0.2)",
-    /**@deprecated Use Dark100 */
-    Grey100 = "#8F949E",
-    /**@deprecated Use Dark200 */
-    Grey200 = "#6A707C",
-    /**@deprecated Use Dark300 */
-    Grey300 = "#5B6371",
-    /**@deprecated Use Dark400 */
-    Grey400 = "#323C4E",
-    /**@deprecated Use Dark450 */
-    Grey450 = "#222F44",
-    /**@deprecated Use Dark500 */
-    Grey500 = "#192334",
-    Dark100 = "#8F949E",
-    Dark200 = "#6A707C",
-    Dark300 = "#5B6371",
-    /**@deprecated */
-    Dark400 = "#323C4E",
-    /**@deprecated */
-    Dark450 = "#222F44",
-    Dark500 = "#192334",
-    /**@deprecated */
-    Silver100 = "#F6F7F8",
-    Silver200 = "#F3F5F8",
-    /**@deprecated */
-    Silver300 = "#E8ECF0",
-    Silver400 = "#E1E5EA",
-    Silver500 = "#C4CDD5",
-    Blue50 = "#EBF4FF",
-    /** @deprecated */
-    Blue75 = "#CCE5FF",
-    /** @deprecated */
-    Blue100 = "#A8D1FF",
-    /** @deprecated */
-    Blue200 = "#66ADFF",
-    Blue300 = "#0070F5",
-    /** @deprecated */
-    Blue400 = "#0063DB",
-    Blue500 = "#0063DB",
-    Green50 = "#ECF9EF",
-    /** @deprecated */
-    Green75 = "#C8F4D1",
-    /** @deprecated */
-    Green100 = "#90EAAE",
-    /** @deprecated */
-    Green200 = "#5DDA87",
-    Green300 = "#03872F",
-    /** @deprecated */
-    Green400 = "#1E8F46",
-    Green500 = "#007A29",
-    Purple50 = "#EFEEFC",
-    /** @deprecated */
-    Purple75 = "#DCDBF5",
-    /** @deprecated */
-    Purple100 = "#CBC8EE",
-    /** @deprecated */
-    Purple200 = "#A7A1E8",
-    Purple300 = "#6559CF",
-    /** @deprecated */
-    Purple400 = "#473ABB",
-    Purple500 = "#473ABB",
-    Red50 = "#FFEDEB",
-    /** @deprecated */
-    Red75 = "#FDD9D3",
-    /** @deprecated */
-    Red100 = "#FDC2BA",
-    /** @deprecated */
-    Red200 = "#FE988B",
-    Red300 = "#E5230D",
-    /** @deprecated */
-    Red400 = "#D9210D",
-    Red500 = "#C31909",
-    Teal50 = "#E3F6FC",
-    /** @deprecated */
-    Teal75 = "#BEEDF9",
-    /** @deprecated */
-    Teal100 = "#91E3F8",
-    /** @deprecated */
-    Teal200 = "#61D3EF",
-    Teal300 = "#007EAB",
-    /** @deprecated */
-    Teal400 = "#008DB8",
-    Teal500 = "#00678A",
-    Yellow50 = "#FFF7DC",
-    /** @deprecated */
-    Yellow75 = "#FFF1C2",
-    /** @deprecated */
-    Yellow100 = "#FFE494",
-    /** @deprecated */
-    Yellow200 = "#FFDC6B",
-    Yellow300 = "#E8671C",
-    /** @deprecated */
-    Yellow400 = "#FFA91F",
-    Yellow500 = "#B84807"
-}
-declare type ColorProp = keyof typeof Color;
-declare function isColorProp(name: unknown): name is ColorProp;
-
 declare type ResponsivePropPrimitive = boolean | number | string;
 declare type ResponsivePropTupleInit<T extends ResponsivePropPrimitive> = readonly [mobile: T, tablet?: T, desktop?: T];
 declare type ResponsiveProp<T extends ResponsivePropPrimitive> = T | ResponsivePropTupleInit<T>;
@@ -462,6 +353,115 @@ interface TagProps extends RefAttributes<unknown>, Omit<TypographyProps, 'ref' |
 }
 declare const Tag: ForwardRefExoticComponent<TagProps>;
 
+declare type ColorVariant = 'grey' | 'silver' | 'blue' | 'green' | 'purple' | 'red' | 'teal' | 'yellow';
+declare enum Color {
+    White = "#fff",
+    White50 = "rgba(255, 255, 255, 0.5)",
+    White40 = "rgba(255, 255, 255, 0.4)",
+    White20 = "rgba(255, 255, 255, 0.2)",
+    White10 = "rgba(255, 255, 255, 0.1)",
+    White08 = "rgba(255, 255, 255, 0.08)",
+    Transparent = "rgba(0, 0, 0, 0)",
+    Black = "#000",
+    Black50 = "rgba(0, 0, 0, 0.5)",
+    Black20 = "rgba(0, 0, 0, 0.2)",
+    /**@deprecated Use Dark100 */
+    Grey100 = "#8F949E",
+    /**@deprecated Use Dark200 */
+    Grey200 = "#6A707C",
+    /**@deprecated Use Dark300 */
+    Grey300 = "#5B6371",
+    /**@deprecated Use Dark400 */
+    Grey400 = "#323C4E",
+    /**@deprecated Use Dark450 */
+    Grey450 = "#222F44",
+    /**@deprecated Use Dark500 */
+    Grey500 = "#192334",
+    Dark100 = "#8F949E",
+    Dark200 = "#6A707C",
+    Dark300 = "#5B6371",
+    /**@deprecated */
+    Dark400 = "#323C4E",
+    /**@deprecated */
+    Dark450 = "#222F44",
+    Dark500 = "#192334",
+    /**@deprecated */
+    Silver100 = "#F6F7F8",
+    Silver200 = "#F3F5F8",
+    /**@deprecated */
+    Silver300 = "#E8ECF0",
+    Silver400 = "#E1E5EA",
+    Silver500 = "#C4CDD5",
+    Blue50 = "#EBF4FF",
+    /** @deprecated */
+    Blue75 = "#CCE5FF",
+    /** @deprecated */
+    Blue100 = "#A8D1FF",
+    /** @deprecated */
+    Blue200 = "#66ADFF",
+    Blue300 = "#0070F5",
+    /** @deprecated */
+    Blue400 = "#0063DB",
+    Blue500 = "#0063DB",
+    Green50 = "#ECF9EF",
+    /** @deprecated */
+    Green75 = "#C8F4D1",
+    /** @deprecated */
+    Green100 = "#90EAAE",
+    /** @deprecated */
+    Green200 = "#5DDA87",
+    Green300 = "#03872F",
+    /** @deprecated */
+    Green400 = "#1E8F46",
+    Green500 = "#007A29",
+    Purple50 = "#EFEEFC",
+    /** @deprecated */
+    Purple75 = "#DCDBF5",
+    /** @deprecated */
+    Purple100 = "#CBC8EE",
+    /** @deprecated */
+    Purple200 = "#A7A1E8",
+    Purple300 = "#6559CF",
+    /** @deprecated */
+    Purple400 = "#473ABB",
+    Purple500 = "#473ABB",
+    Red50 = "#FFEDEB",
+    /** @deprecated */
+    Red75 = "#FDD9D3",
+    /** @deprecated */
+    Red100 = "#FDC2BA",
+    /** @deprecated */
+    Red200 = "#FE988B",
+    Red300 = "#E5230D",
+    /** @deprecated */
+    Red400 = "#D9210D",
+    Red500 = "#C31909",
+    Teal50 = "#E3F6FC",
+    /** @deprecated */
+    Teal75 = "#BEEDF9",
+    /** @deprecated */
+    Teal100 = "#91E3F8",
+    /** @deprecated */
+    Teal200 = "#61D3EF",
+    Teal300 = "#007EAB",
+    /** @deprecated */
+    Teal400 = "#008DB8",
+    Teal500 = "#00678A",
+    Yellow50 = "#FFF7DC",
+    /** @deprecated */
+    Yellow75 = "#FFF1C2",
+    /** @deprecated */
+    Yellow100 = "#FFE494",
+    /** @deprecated */
+    Yellow200 = "#FFDC6B",
+    Yellow300 = "#E8671C",
+    /** @deprecated */
+    Yellow400 = "#FFA91F",
+    Yellow500 = "#B84807"
+}
+declare type ColorProp = keyof typeof Color;
+declare function isColorProp(name: unknown): name is ColorProp;
+
 declare type SuperDispatchTheme = Readonly<Required<Theme>>;
 
 interface ThemeProviderProps {

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
               })