@khanacademy/wonder-blocks-form 4.3.19 → 4.4.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @khanacademy/wonder-blocks-form
 
+## 4.4.1
+
+### Patch Changes
+
+-   60aba5b8: Update internal spacing references (from wb-spacing to wb-tokens)
+-   7c51f377: Migrate wb-color imports to use tokens.color
+-   Updated dependencies [60aba5b8]
+-   Updated dependencies [7cd7f6cc]
+-   Updated dependencies [7c51f377]
+-   Updated dependencies [7c51f377]
+    -   @khanacademy/wonder-blocks-layout@2.0.26
+    -   @khanacademy/wonder-blocks-tokens@0.2.0
+    -   @khanacademy/wonder-blocks-clickable@4.0.13
+
+## 4.4.0
+
+### Minor Changes
+
+-   0c329565: `name` prop has been added to SearchField and TextField
+
 ## 4.3.19
 
 ### Patch Changes

package/dist/components/text-field.d.ts

@@ -17,6 +17,11 @@ type Props = AriaProps & {
      * The input value.
      */
     value: string;
+    /**
+     * The name for the input control. This is submitted along with
+     * the form data.
+     */
+    name?: string;
     /**
      * Makes a read-only input field that cannot be focused. Defaults to false.
      */

package/dist/es/index.js

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { StyleSheet } from 'aphrodite';
-import Color, { mix, fade } from '@khanacademy/wonder-blocks-color';
 import { addStyle, UniqueIDProvider, View, IDProvider } from '@khanacademy/wonder-blocks-core';
 import { Strut } from '@khanacademy/wonder-blocks-layout';
-import Spacing from '@khanacademy/wonder-blocks-spacing';
+import { spacing, color } from '@khanacademy/wonder-blocks-tokens';
 import { LabelMedium, LabelSmall, styles as styles$6 } from '@khanacademy/wonder-blocks-typography';
+import { mix } from '@khanacademy/wonder-blocks-color';
 import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
 import checkIcon from '@phosphor-icons/core/bold/check-bold.svg';
 import minusIcon from '@phosphor-icons/core/bold/minus-bold.svg';
@@ -56,9 +56,9 @@ const {
   offBlack16: offBlack16$1,
   offBlack32: offBlack32$1,
   offBlack50: offBlack50$1
-} = Color;
-const size$1 = Spacing.medium_16;
-const checkSize = Spacing.small_12;
+} = color;
+const size$1 = spacing.medium_16;
+const checkSize = spacing.small_12;
 const StyledInput$2 = addStyle("input");
 const CheckboxCore = React.forwardRef(function CheckboxCore(props, ref) {
   const {
@@ -142,20 +142,20 @@ const sharedStyles$1 = StyleSheet.create({
     margin: (size$1 - checkSize) / 2
   }
 });
-const fadedBlue$1 = mix(fade(blue$1, 0.16), white$1);
-const activeBlue$1 = mix(offBlack32$1, blue$1);
-const fadedRed$1 = mix(fade(red$1, 0.08), white$1);
-const activeRed$1 = mix(offBlack32$1, red$1);
+const fadedBlue$1 = mix(color.fadedBlue16, white$1);
+const activeBlue = color.activeBlue;
+const fadedRed$1 = mix(color.fadedRed8, white$1);
+const activeRed = color.activeRed;
 const colors$1 = {
   default: {
     faded: fadedBlue$1,
     base: blue$1,
-    active: activeBlue$1
+    active: activeBlue
   },
   error: {
     faded: fadedRed$1,
     base: red$1,
-    active: activeRed$1
+    active: activeRed
   }
 };
 const styles$5 = {};
@@ -200,7 +200,7 @@ const _generateStyles$1 = (checked, error) => {
         },
         ":active": {
           backgroundColor: palette.faded,
-          borderColor: error ? activeRed$1 : blue$1,
+          borderColor: error ? activeRed : blue$1,
           borderWidth: 2
         }
       }
@@ -219,7 +219,7 @@ const {
   offBlack16,
   offBlack32,
   offBlack50
-} = Color;
+} = color;
 const StyledInput$1 = addStyle("input");
 const RadioCore = React.forwardRef(function RadioCore(props, ref) {
   const handleChange = () => {
@@ -286,20 +286,18 @@ const sharedStyles = StyleSheet.create({
     borderWidth: 1
   }
 });
-const fadedBlue = mix(fade(blue, 0.16), white);
-const activeBlue = mix(offBlack32, blue);
-const fadedRed = mix(fade(red, 0.08), white);
-const activeRed = mix(offBlack32, red);
+const fadedBlue = mix(color.fadedBlue16, white);
+const fadedRed = mix(color.fadedRed8, white);
 const colors = {
   default: {
     faded: fadedBlue,
     base: blue,
-    active: activeBlue
+    active: color.activeBlue
   },
   error: {
     faded: fadedRed,
     base: red,
-    active: activeRed
+    active: color.activeRed
   }
 };
 const styles$4 = {};
@@ -345,7 +343,7 @@ const _generateStyles = (checked, error) => {
         },
         ":active": {
           backgroundColor: palette.faded,
-          borderColor: error ? activeRed : blue,
+          borderColor: error ? color.activeRed : blue,
           borderWidth: 2
         }
       }
@@ -418,7 +416,7 @@ const ChoiceInternal = React.forwardRef(function ChoiceInternal(props, ref) {
       error: error,
       ref: ref
     })), React.createElement(Strut, {
-      size: Spacing.xSmall_8
+      size: spacing.xSmall_8
     }), label && getLabel(uniqueId)), description && getDescription(descriptionId));
   });
 });
@@ -432,12 +430,12 @@ const styles$3 = StyleSheet.create({
     marginTop: -2
   },
   disabledLabel: {
-    color: Color.offBlack32
+    color: color.offBlack32
   },
   description: {
-    marginLeft: Spacing.medium_16 + Spacing.xSmall_8,
-    marginTop: Spacing.xxxSmall_4,
-    color: Color.offBlack64
+    marginLeft: spacing.medium_16 + spacing.xSmall_8,
+    marginTop: spacing.xxxSmall_4,
+    color: color.offBlack64
   }
 });
 
@@ -504,15 +502,15 @@ const styles$2 = StyleSheet.create({
     padding: 0
   },
   description: {
-    marginTop: Spacing.xxxSmall_4,
-    color: Color.offBlack64
+    marginTop: spacing.xxxSmall_4,
+    color: color.offBlack64
   },
   error: {
-    marginTop: Spacing.xxxSmall_4,
-    color: Color.red
+    marginTop: spacing.xxxSmall_4,
+    color: color.red
   },
   defaultLineGap: {
-    marginTop: Spacing.xSmall_8
+    marginTop: spacing.xSmall_8
   }
 });
 
@@ -553,7 +551,7 @@ const CheckboxGroup = React.forwardRef(function CheckboxGroup(props, ref) {
   }, description), errorMessage && React.createElement(LabelSmall, {
     style: styles$2.error
   }, errorMessage), (label || description || errorMessage) && React.createElement(Strut, {
-    size: Spacing.small_12
+    size: spacing.small_12
   }), allChildren.map((child, index) => {
     const {
       style,
@@ -601,7 +599,7 @@ const RadioGroup = React.forwardRef(function RadioGroup(props, ref) {
   }, description), errorMessage && React.createElement(LabelSmall, {
     style: styles$2.error
   }, errorMessage), (label || description || errorMessage) && React.createElement(Strut, {
-    size: Spacing.small_12
+    size: spacing.small_12
   }), allChildren.map((child, index) => {
     const {
       style,
@@ -621,7 +619,7 @@ const RadioGroup = React.forwardRef(function RadioGroup(props, ref) {
   })));
 });
 
-const _excluded = ["id", "type", "value", "disabled", "onKeyDown", "placeholder", "light", "style", "testId", "readOnly", "autoFocus", "autoComplete", "forwardedRef", "onFocus", "onBlur", "onValidate", "validate", "onChange", "required"];
+const _excluded = ["id", "type", "value", "name", "disabled", "onKeyDown", "placeholder", "light", "style", "testId", "readOnly", "autoFocus", "autoComplete", "forwardedRef", "onFocus", "onBlur", "onValidate", "validate", "onChange", "required"];
 const defaultErrorMessage = "This field is required.";
 const StyledInput = addStyle("input");
 class TextField extends React.Component {
@@ -705,6 +703,7 @@ class TextField extends React.Component {
         id,
         type,
         value,
+        name,
         disabled,
         onKeyDown,
         placeholder,
@@ -723,6 +722,7 @@ class TextField extends React.Component {
       type: type,
       placeholder: placeholder,
       value: value,
+      name: name,
       disabled: disabled,
       onChange: this.handleChange,
       onKeyDown: onKeyDown,
@@ -747,48 +747,48 @@ const styles$1 = StyleSheet.create({
     height: 40,
     borderRadius: 4,
     boxSizing: "border-box",
-    paddingLeft: Spacing.medium_16,
+    paddingLeft: spacing.medium_16,
     margin: 0,
     outline: "none",
     boxShadow: "none"
   },
   default: {
-    background: Color.white,
-    border: `1px solid ${Color.offBlack16}`,
-    color: Color.offBlack,
+    background: color.white,
+    border: `1px solid ${color.offBlack16}`,
+    color: color.offBlack,
     "::placeholder": {
-      color: Color.offBlack64
+      color: color.offBlack64
     }
   },
   error: {
-    background: `${mix(fade(Color.red, 0.06), Color.white)}`,
-    border: `1px solid ${Color.red}`,
-    color: Color.offBlack,
+    background: `${mix(color.fadedRed8, color.white)}`,
+    border: `1px solid ${color.red}`,
+    color: color.offBlack,
     "::placeholder": {
-      color: Color.offBlack64
+      color: color.offBlack64
     }
   },
   disabled: {
-    background: Color.offWhite,
-    border: `1px solid ${Color.offBlack16}`,
-    color: Color.offBlack64,
+    background: color.offWhite,
+    border: `1px solid ${color.offBlack16}`,
+    color: color.offBlack64,
     "::placeholder": {
-      color: Color.offBlack32
+      color: color.offBlack32
     }
   },
   focused: {
-    background: Color.white,
-    border: `1px solid ${Color.blue}`,
-    color: Color.offBlack,
+    background: color.white,
+    border: `1px solid ${color.blue}`,
+    color: color.offBlack,
     "::placeholder": {
-      color: Color.offBlack64
+      color: color.offBlack64
     }
   },
   defaultLight: {
-    boxShadow: `0px 0px 0px 1px ${Color.blue}, 0px 0px 0px 2px ${Color.white}`
+    boxShadow: `0px 0px 0px 1px ${color.blue}, 0px 0px 0px 2px ${color.white}`
   },
   errorLight: {
-    boxShadow: `0px 0px 0px 1px ${Color.red}, 0px 0px 0px 2px ${Color.white}`
+    boxShadow: `0px 0px 0px 1px ${color.red}, 0px 0px 0px 2px ${color.white}`
   }
 });
 var TextField$1 = React.forwardRef((props, ref) => React.createElement(TextField, _extends({}, props, {
@@ -814,7 +814,7 @@ class FieldHeading extends React.Component {
       htmlFor: id && `${id}-field`,
       testId: testId && `${testId}-label`
     }, label, required && requiredIcon), React.createElement(Strut, {
-      size: Spacing.xxxSmall_4
+      size: spacing.xxxSmall_4
     }));
   }
   maybeRenderDescription() {
@@ -829,7 +829,7 @@ class FieldHeading extends React.Component {
       style: styles.description,
       testId: testId && `${testId}-description`
     }, description), React.createElement(Strut, {
-      size: Spacing.xxxSmall_4
+      size: spacing.xxxSmall_4
     }));
   }
   maybeRenderError() {
@@ -842,7 +842,7 @@ class FieldHeading extends React.Component {
       return null;
     }
     return React.createElement(React.Fragment, null, React.createElement(Strut, {
-      size: Spacing.small_12
+      size: spacing.small_12
     }), React.createElement(LabelSmall, {
       style: styles.error,
       role: "alert",
@@ -858,22 +858,22 @@ class FieldHeading extends React.Component {
     return React.createElement(View, {
       style: style
     }, this.renderLabel(), this.maybeRenderDescription(), React.createElement(Strut, {
-      size: Spacing.xSmall_8
+      size: spacing.xSmall_8
     }), field, this.maybeRenderError());
   }
 }
 const styles = StyleSheet.create({
   label: {
-    color: Color.offBlack
+    color: color.offBlack
   },
   description: {
-    color: Color.offBlack64
+    color: color.offBlack64
   },
   error: {
-    color: Color.red
+    color: color.red
   },
   required: {
-    color: Color.red
+    color: color.red
   }
 });
 

package/dist/index.js

@@ -4,11 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var aphrodite = require('aphrodite');
-var Color = require('@khanacademy/wonder-blocks-color');
 var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
 var wonderBlocksLayout = require('@khanacademy/wonder-blocks-layout');
-var Spacing = require('@khanacademy/wonder-blocks-spacing');
+var wonderBlocksTokens = require('@khanacademy/wonder-blocks-tokens');
 var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
+var wonderBlocksColor = require('@khanacademy/wonder-blocks-color');
 var wonderBlocksIcon = require('@khanacademy/wonder-blocks-icon');
 var checkIcon = require('@phosphor-icons/core/bold/check-bold.svg');
 var minusIcon = require('@phosphor-icons/core/bold/minus-bold.svg');
@@ -34,8 +34,6 @@ function _interopNamespace(e) {
 }
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var Color__default = /*#__PURE__*/_interopDefaultLegacy(Color);
-var Spacing__default = /*#__PURE__*/_interopDefaultLegacy(Spacing);
 var checkIcon__default = /*#__PURE__*/_interopDefaultLegacy(checkIcon);
 var minusIcon__default = /*#__PURE__*/_interopDefaultLegacy(minusIcon);
 
@@ -86,9 +84,9 @@ const {
   offBlack16: offBlack16$1,
   offBlack32: offBlack32$1,
   offBlack50: offBlack50$1
-} = Color__default["default"];
-const size$1 = Spacing__default["default"].medium_16;
-const checkSize = Spacing__default["default"].small_12;
+} = wonderBlocksTokens.color;
+const size$1 = wonderBlocksTokens.spacing.medium_16;
+const checkSize = wonderBlocksTokens.spacing.small_12;
 const StyledInput$2 = wonderBlocksCore.addStyle("input");
 const CheckboxCore = React__namespace.forwardRef(function CheckboxCore(props, ref) {
   const {
@@ -172,20 +170,20 @@ const sharedStyles$1 = aphrodite.StyleSheet.create({
     margin: (size$1 - checkSize) / 2
   }
 });
-const fadedBlue$1 = Color.mix(Color.fade(blue$1, 0.16), white$1);
-const activeBlue$1 = Color.mix(offBlack32$1, blue$1);
-const fadedRed$1 = Color.mix(Color.fade(red$1, 0.08), white$1);
-const activeRed$1 = Color.mix(offBlack32$1, red$1);
+const fadedBlue$1 = wonderBlocksColor.mix(wonderBlocksTokens.color.fadedBlue16, white$1);
+const activeBlue = wonderBlocksTokens.color.activeBlue;
+const fadedRed$1 = wonderBlocksColor.mix(wonderBlocksTokens.color.fadedRed8, white$1);
+const activeRed = wonderBlocksTokens.color.activeRed;
 const colors$1 = {
   default: {
     faded: fadedBlue$1,
     base: blue$1,
-    active: activeBlue$1
+    active: activeBlue
   },
   error: {
     faded: fadedRed$1,
     base: red$1,
-    active: activeRed$1
+    active: activeRed
   }
 };
 const styles$5 = {};
@@ -230,7 +228,7 @@ const _generateStyles$1 = (checked, error) => {
         },
         ":active": {
           backgroundColor: palette.faded,
-          borderColor: error ? activeRed$1 : blue$1,
+          borderColor: error ? activeRed : blue$1,
           borderWidth: 2
         }
       }
@@ -249,7 +247,7 @@ const {
   offBlack16,
   offBlack32,
   offBlack50
-} = Color__default["default"];
+} = wonderBlocksTokens.color;
 const StyledInput$1 = wonderBlocksCore.addStyle("input");
 const RadioCore = React__namespace.forwardRef(function RadioCore(props, ref) {
   const handleChange = () => {
@@ -316,20 +314,18 @@ const sharedStyles = aphrodite.StyleSheet.create({
     borderWidth: 1
   }
 });
-const fadedBlue = Color.mix(Color.fade(blue, 0.16), white);
-const activeBlue = Color.mix(offBlack32, blue);
-const fadedRed = Color.mix(Color.fade(red, 0.08), white);
-const activeRed = Color.mix(offBlack32, red);
+const fadedBlue = wonderBlocksColor.mix(wonderBlocksTokens.color.fadedBlue16, white);
+const fadedRed = wonderBlocksColor.mix(wonderBlocksTokens.color.fadedRed8, white);
 const colors = {
   default: {
     faded: fadedBlue,
     base: blue,
-    active: activeBlue
+    active: wonderBlocksTokens.color.activeBlue
   },
   error: {
     faded: fadedRed,
     base: red,
-    active: activeRed
+    active: wonderBlocksTokens.color.activeRed
   }
 };
 const styles$4 = {};
@@ -375,7 +371,7 @@ const _generateStyles = (checked, error) => {
         },
         ":active": {
           backgroundColor: palette.faded,
-          borderColor: error ? activeRed : blue,
+          borderColor: error ? wonderBlocksTokens.color.activeRed : blue,
           borderWidth: 2
         }
       }
@@ -448,7 +444,7 @@ const ChoiceInternal = React__namespace.forwardRef(function ChoiceInternal(props
       error: error,
       ref: ref
     })), React__namespace.createElement(wonderBlocksLayout.Strut, {
-      size: Spacing__default["default"].xSmall_8
+      size: wonderBlocksTokens.spacing.xSmall_8
     }), label && getLabel(uniqueId)), description && getDescription(descriptionId));
   });
 });
@@ -462,12 +458,12 @@ const styles$3 = aphrodite.StyleSheet.create({
     marginTop: -2
   },
   disabledLabel: {
-    color: Color__default["default"].offBlack32
+    color: wonderBlocksTokens.color.offBlack32
   },
   description: {
-    marginLeft: Spacing__default["default"].medium_16 + Spacing__default["default"].xSmall_8,
-    marginTop: Spacing__default["default"].xxxSmall_4,
-    color: Color__default["default"].offBlack64
+    marginLeft: wonderBlocksTokens.spacing.medium_16 + wonderBlocksTokens.spacing.xSmall_8,
+    marginTop: wonderBlocksTokens.spacing.xxxSmall_4,
+    color: wonderBlocksTokens.color.offBlack64
   }
 });
 
@@ -534,15 +530,15 @@ const styles$2 = aphrodite.StyleSheet.create({
     padding: 0
   },
   description: {
-    marginTop: Spacing__default["default"].xxxSmall_4,
-    color: Color__default["default"].offBlack64
+    marginTop: wonderBlocksTokens.spacing.xxxSmall_4,
+    color: wonderBlocksTokens.color.offBlack64
   },
   error: {
-    marginTop: Spacing__default["default"].xxxSmall_4,
-    color: Color__default["default"].red
+    marginTop: wonderBlocksTokens.spacing.xxxSmall_4,
+    color: wonderBlocksTokens.color.red
   },
   defaultLineGap: {
-    marginTop: Spacing__default["default"].xSmall_8
+    marginTop: wonderBlocksTokens.spacing.xSmall_8
   }
 });
 
@@ -583,7 +579,7 @@ const CheckboxGroup = React__namespace.forwardRef(function CheckboxGroup(props,
   }, description), errorMessage && React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
     style: styles$2.error
   }, errorMessage), (label || description || errorMessage) && React__namespace.createElement(wonderBlocksLayout.Strut, {
-    size: Spacing__default["default"].small_12
+    size: wonderBlocksTokens.spacing.small_12
   }), allChildren.map((child, index) => {
     const {
       style,
@@ -631,7 +627,7 @@ const RadioGroup = React__namespace.forwardRef(function RadioGroup(props, ref) {
   }, description), errorMessage && React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
     style: styles$2.error
   }, errorMessage), (label || description || errorMessage) && React__namespace.createElement(wonderBlocksLayout.Strut, {
-    size: Spacing__default["default"].small_12
+    size: wonderBlocksTokens.spacing.small_12
   }), allChildren.map((child, index) => {
     const {
       style,
@@ -651,7 +647,7 @@ const RadioGroup = React__namespace.forwardRef(function RadioGroup(props, ref) {
   })));
 });
 
-const _excluded = ["id", "type", "value", "disabled", "onKeyDown", "placeholder", "light", "style", "testId", "readOnly", "autoFocus", "autoComplete", "forwardedRef", "onFocus", "onBlur", "onValidate", "validate", "onChange", "required"];
+const _excluded = ["id", "type", "value", "name", "disabled", "onKeyDown", "placeholder", "light", "style", "testId", "readOnly", "autoFocus", "autoComplete", "forwardedRef", "onFocus", "onBlur", "onValidate", "validate", "onChange", "required"];
 const defaultErrorMessage = "This field is required.";
 const StyledInput = wonderBlocksCore.addStyle("input");
 class TextField extends React__namespace.Component {
@@ -735,6 +731,7 @@ class TextField extends React__namespace.Component {
         id,
         type,
         value,
+        name,
         disabled,
         onKeyDown,
         placeholder,
@@ -753,6 +750,7 @@ class TextField extends React__namespace.Component {
       type: type,
       placeholder: placeholder,
       value: value,
+      name: name,
       disabled: disabled,
       onChange: this.handleChange,
       onKeyDown: onKeyDown,
@@ -777,48 +775,48 @@ const styles$1 = aphrodite.StyleSheet.create({
     height: 40,
     borderRadius: 4,
     boxSizing: "border-box",
-    paddingLeft: Spacing__default["default"].medium_16,
+    paddingLeft: wonderBlocksTokens.spacing.medium_16,
     margin: 0,
     outline: "none",
     boxShadow: "none"
   },
   default: {
-    background: Color__default["default"].white,
-    border: `1px solid ${Color__default["default"].offBlack16}`,
-    color: Color__default["default"].offBlack,
+    background: wonderBlocksTokens.color.white,
+    border: `1px solid ${wonderBlocksTokens.color.offBlack16}`,
+    color: wonderBlocksTokens.color.offBlack,
     "::placeholder": {
-      color: Color__default["default"].offBlack64
+      color: wonderBlocksTokens.color.offBlack64
     }
   },
   error: {
-    background: `${Color.mix(Color.fade(Color__default["default"].red, 0.06), Color__default["default"].white)}`,
-    border: `1px solid ${Color__default["default"].red}`,
-    color: Color__default["default"].offBlack,
+    background: `${wonderBlocksColor.mix(wonderBlocksTokens.color.fadedRed8, wonderBlocksTokens.color.white)}`,
+    border: `1px solid ${wonderBlocksTokens.color.red}`,
+    color: wonderBlocksTokens.color.offBlack,
     "::placeholder": {
-      color: Color__default["default"].offBlack64
+      color: wonderBlocksTokens.color.offBlack64
     }
   },
   disabled: {
-    background: Color__default["default"].offWhite,
-    border: `1px solid ${Color__default["default"].offBlack16}`,
-    color: Color__default["default"].offBlack64,
+    background: wonderBlocksTokens.color.offWhite,
+    border: `1px solid ${wonderBlocksTokens.color.offBlack16}`,
+    color: wonderBlocksTokens.color.offBlack64,
     "::placeholder": {
-      color: Color__default["default"].offBlack32
+      color: wonderBlocksTokens.color.offBlack32
     }
   },
   focused: {
-    background: Color__default["default"].white,
-    border: `1px solid ${Color__default["default"].blue}`,
-    color: Color__default["default"].offBlack,
+    background: wonderBlocksTokens.color.white,
+    border: `1px solid ${wonderBlocksTokens.color.blue}`,
+    color: wonderBlocksTokens.color.offBlack,
     "::placeholder": {
-      color: Color__default["default"].offBlack64
+      color: wonderBlocksTokens.color.offBlack64
     }
   },
   defaultLight: {
-    boxShadow: `0px 0px 0px 1px ${Color__default["default"].blue}, 0px 0px 0px 2px ${Color__default["default"].white}`
+    boxShadow: `0px 0px 0px 1px ${wonderBlocksTokens.color.blue}, 0px 0px 0px 2px ${wonderBlocksTokens.color.white}`
   },
   errorLight: {
-    boxShadow: `0px 0px 0px 1px ${Color__default["default"].red}, 0px 0px 0px 2px ${Color__default["default"].white}`
+    boxShadow: `0px 0px 0px 1px ${wonderBlocksTokens.color.red}, 0px 0px 0px 2px ${wonderBlocksTokens.color.white}`
   }
 });
 var TextField$1 = React__namespace.forwardRef((props, ref) => React__namespace.createElement(TextField, _extends({}, props, {
@@ -844,7 +842,7 @@ class FieldHeading extends React__namespace.Component {
       htmlFor: id && `${id}-field`,
       testId: testId && `${testId}-label`
     }, label, required && requiredIcon), React__namespace.createElement(wonderBlocksLayout.Strut, {
-      size: Spacing__default["default"].xxxSmall_4
+      size: wonderBlocksTokens.spacing.xxxSmall_4
     }));
   }
   maybeRenderDescription() {
@@ -859,7 +857,7 @@ class FieldHeading extends React__namespace.Component {
       style: styles.description,
       testId: testId && `${testId}-description`
     }, description), React__namespace.createElement(wonderBlocksLayout.Strut, {
-      size: Spacing__default["default"].xxxSmall_4
+      size: wonderBlocksTokens.spacing.xxxSmall_4
     }));
   }
   maybeRenderError() {
@@ -872,7 +870,7 @@ class FieldHeading extends React__namespace.Component {
       return null;
     }
     return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(wonderBlocksLayout.Strut, {
-      size: Spacing__default["default"].small_12
+      size: wonderBlocksTokens.spacing.small_12
     }), React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
       style: styles.error,
       role: "alert",
@@ -888,22 +886,22 @@ class FieldHeading extends React__namespace.Component {
     return React__namespace.createElement(wonderBlocksCore.View, {
       style: style
     }, this.renderLabel(), this.maybeRenderDescription(), React__namespace.createElement(wonderBlocksLayout.Strut, {
-      size: Spacing__default["default"].xSmall_8
+      size: wonderBlocksTokens.spacing.xSmall_8
     }), field, this.maybeRenderError());
   }
 }
 const styles = aphrodite.StyleSheet.create({
   label: {
-    color: Color__default["default"].offBlack
+    color: wonderBlocksTokens.color.offBlack
   },
   description: {
-    color: Color__default["default"].offBlack64
+    color: wonderBlocksTokens.color.offBlack64
   },
   error: {
-    color: Color__default["default"].red
+    color: wonderBlocksTokens.color.red
   },
   required: {
-    color: Color__default["default"].red
+    color: wonderBlocksTokens.color.red
   }
 });