@khanacademy/wonder-blocks-form 7.1.0 → 7.1.2

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # @khanacademy/wonder-blocks-form
 
+## 7.1.2
+
+### Patch Changes
+
+- 5655b9f: Switch to use `focus.outer` semanticColor token
+- 7bb37a2: Update component docs to include labelling guidelines
+- 8f53293: Rename action tokens: `filled` -> `primary`, `outlined` -> `secondary`.
+- 051f0f8: Rework action.disabled tokens to include properties per kind (border, background, foreground).
+- 7bb37a2: Marking LabeledTextField with `@deprecated` in favour of LabeledField + TextField
+- Updated dependencies [ed26d66]
+- Updated dependencies [5655b9f]
+- Updated dependencies [5655b9f]
+- Updated dependencies [8f53293]
+- Updated dependencies [051f0f8]
+- Updated dependencies [8fc65a9]
+- Updated dependencies [e1b78db]
+- Updated dependencies [051f0f8]
+    - @khanacademy/wonder-blocks-core@12.2.0
+    - @khanacademy/wonder-blocks-tokens@5.0.0
+    - @khanacademy/wonder-blocks-clickable@6.1.2
+    - @khanacademy/wonder-blocks-icon@5.1.2
+    - @khanacademy/wonder-blocks-layout@3.1.2
+    - @khanacademy/wonder-blocks-typography@3.1.2
+
+## 7.1.1
+
+### Patch Changes
+
+- ee8d95a: Rollback rollup version from v4 to v2 to prevent an issue with CJS builds in unit tests
+- Updated dependencies [ee8d95a]
+    - @khanacademy/wonder-blocks-clickable@6.1.1
+    - @khanacademy/wonder-blocks-core@12.1.1
+    - @khanacademy/wonder-blocks-icon@5.1.1
+    - @khanacademy/wonder-blocks-layout@3.1.1
+    - @khanacademy/wonder-blocks-tokens@4.2.1
+    - @khanacademy/wonder-blocks-typography@3.1.1
+
 ## 7.1.0
 
 ### Minor Changes

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

@@ -158,9 +158,13 @@ declare class LabeledTextField extends React.Component<PropsWithForwardRef, Stat
 }
 type ExportProps = OmitConstrained<JSX.LibraryManagedAttributes<typeof LabeledTextField, React.ComponentProps<typeof LabeledTextField>>, "forwardedRef">;
 /**
+ * **DEPRECATED**: Please use `LabeledField` with `TextField` instead.
+ *
  * A LabeledTextField is an element used to accept a single line of text
  * from the user paired with a label, description, and error field elements.
  *
+ * @deprecated
+ *
  * ### Usage
  *
  * ```jsx

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

@@ -1,5 +1,16 @@
 import * as React from "react";
 import { StyleType } from "@khanacademy/wonder-blocks-core";
+/**
+ * A TextArea is an element used to accept text from the user.
+ *
+ * Make sure to provide a label for the field. This can be done by either:
+ * - (recommended) Using the **LabeledField** component to provide a label,
+ * description, and/or error message for the field
+ * - Using a `label` html tag with the `htmlFor` prop set to the unique id of
+ * the field
+ * - Using an `aria-label` attribute on the field
+ * - Using an `aria-labelledby` attribute on the field
+ */
 declare const TextArea: React.ForwardRefExoticComponent<Readonly<import("@khanacademy/wonder-blocks-core").AriaAttributes> & Readonly<{
     role?: import("@khanacademy/wonder-blocks-core").AriaRole;
 }> & {

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

@@ -152,6 +152,13 @@ type ExportProps = OmitConstrained<JSX.LibraryManagedAttributes<typeof TextField
 /**
  * A TextField is an element used to accept a single line of text from the user.
  *
+ * Make sure to provide a label for the field. This can be done by either:
+ * - (recommended) Using the **LabeledField** component to provide a label,
+ * description, and/or error message for the field
+ * - Using a `label` html tag with the `htmlFor` prop set to the unique id of
+ * the field
+ * - Using an `aria-label` attribute on the field
+ * - Using an `aria-labelledby` attribute on the field
  * ### Usage
  *
  * ```jsx

package/dist/es/index.js

@@ -78,8 +78,8 @@ const CheckboxCore = React.forwardRef(function CheckboxCore(props, ref) {
   })), checked || checked == null ? checkboxIcon : React.createElement(React.Fragment, null));
 });
 const disabledState$1 = {
-  border: semanticColor.border.primary,
-  background: semanticColor.action.disabled.secondary
+  border: semanticColor.action.secondary.disabled.border,
+  background: semanticColor.action.secondary.disabled.background
 };
 const sharedStyles$1 = StyleSheet.create({
   inputReset: {
@@ -119,7 +119,7 @@ const _generateStyles$1 = (checked, error) => {
   }
   const isCheckedOrIndeterminate = checked || checked == null;
   const actionType = error ? "destructive" : "progressive";
-  const styleType = isCheckedOrIndeterminate ? "filled" : "outlined";
+  const styleType = isCheckedOrIndeterminate ? "primary" : "secondary";
   const colorAction = semanticColor.action[styleType][actionType];
   const states = {
     default: {
@@ -138,7 +138,7 @@ const _generateStyles$1 = (checked, error) => {
         backgroundColor: states.default.background,
         borderColor: states.default.border,
         ":focus-visible": {
-          outline: `${border.width.thin}px solid ${colorAction.hover.border}`,
+          outline: `${border.width.thin}px solid ${semanticColor.focus.outer}`,
           outlineOffset: 1
         },
         ":hover": {
@@ -160,7 +160,7 @@ const _generateStyles$1 = (checked, error) => {
         borderColor: currentState.border,
         ":focus-visible": {
           backgroundColor: error ? states.error.background : colorAction.hover.background,
-          outline: `${border.width.thin}px solid ${colorAction.hover.border}`,
+          outline: `${border.width.thin}px solid ${semanticColor.focus.outer}`,
           outlineOffset: -1
         },
         ":hover": {
@@ -213,8 +213,8 @@ const RadioCore = React.forwardRef(function RadioCore(props, ref) {
   }));
 });
 const disabledState = {
-  border: semanticColor.border.primary,
-  background: semanticColor.action.disabled.secondary
+  border: semanticColor.action.secondary.disabled.border,
+  background: semanticColor.action.secondary.disabled.background
 };
 const size = 16;
 const disabledChecked = {
@@ -224,7 +224,7 @@ const disabledChecked = {
   height: size / 2,
   width: size / 2,
   borderRadius: "50%",
-  backgroundColor: semanticColor.action.disabled.default
+  backgroundColor: semanticColor.action.primary.disabled.background
 };
 const sharedStyles = StyleSheet.create({
   inputReset: {
@@ -258,7 +258,7 @@ const _generateStyles = (checked, error) => {
     return styles$5[styleKey];
   }
   const actionType = error ? "destructive" : "progressive";
-  const colorAction = semanticColor.action.outlined[actionType];
+  const colorAction = semanticColor.action.secondary[actionType];
   const states = {
     unchecked: {
       border: semanticColor.border.strong,
@@ -281,7 +281,7 @@ const _generateStyles = (checked, error) => {
         borderColor: states.checked.border,
         borderWidth: size / 4,
         ":focus-visible": {
-          outline: `${border.width.thin}px solid ${colorAction.hover.border}`,
+          outline: `${border.width.thin}px solid ${semanticColor.focus.outer}`,
           outlineOffset: 1
         },
         ":hover": {
@@ -303,7 +303,7 @@ const _generateStyles = (checked, error) => {
         borderColor: currentState.border,
         ":focus-visible": {
           backgroundColor: error ? states.error.background : colorAction.hover.background,
-          outline: `${border.width.thin}px solid ${colorAction.hover.border}`,
+          outline: `${border.width.thin}px solid ${semanticColor.focus.outer}`,
           outlineOffset: -1
         },
         ":hover": {
@@ -399,7 +399,7 @@ const styles$4 = StyleSheet.create({
     marginTop: -2
   },
   disabledLabel: {
-    color: semanticColor.text.disabled
+    color: semanticColor.action.secondary.disabled.foreground
   },
   description: {
     marginLeft: spacing.medium_16 + spacing.xSmall_8,
@@ -731,8 +731,8 @@ const states$1 = {
     foreground: semanticColor.text.primary
   },
   disabled: {
-    border: semanticColor.border.primary,
-    background: semanticColor.action.disabled.secondary,
+    border: semanticColor.action.secondary.disabled.border,
+    background: semanticColor.action.secondary.disabled.background,
     foreground: semanticColor.text.secondary
   },
   error: {
@@ -760,8 +760,8 @@ const styles$2 = StyleSheet.create({
   },
   defaultFocus: {
     ":focus-visible": {
-      borderColor: semanticColor.border.focus,
-      outline: `${border.width.hairline}px solid ${semanticColor.border.focus}`,
+      borderColor: semanticColor.focus.outer,
+      outline: `${border.width.hairline}px solid ${semanticColor.focus.outer}`,
       outlineOffset: -2
     }
   },
@@ -773,8 +773,8 @@ const styles$2 = StyleSheet.create({
       color: semanticColor.text.secondary
     },
     ":focus-visible": {
-      outlineColor: states$1.error.border,
-      borderColor: states$1.error.border
+      outlineColor: semanticColor.focus.outer,
+      outline: `${border.width.thin}px solid ${semanticColor.focus.outer}`
     }
   },
   disabled: {
@@ -786,7 +786,7 @@ const styles$2 = StyleSheet.create({
     },
     cursor: "not-allowed",
     ":focus-visible": {
-      outline: `${border.width.thin}px solid ${semanticColor.action.disabled.default}`,
+      outline: `${border.width.thin}px solid ${semanticColor.focus.outer}`,
       outlineOffset: -3
     }
   }
@@ -1090,8 +1090,8 @@ const states = {
     foreground: semanticColor.text.primary
   },
   disabled: {
-    border: semanticColor.border.primary,
-    background: semanticColor.action.disabled.secondary,
+    border: semanticColor.action.secondary.disabled.border,
+    background: semanticColor.action.secondary.disabled.background,
     foreground: semanticColor.text.secondary
   },
   error: {
@@ -1117,8 +1117,8 @@ const styles = StyleSheet.create({
   },
   defaultFocus: {
     ":focus-visible": {
-      borderColor: semanticColor.border.focus,
-      outline: `${border.width.hairline}px solid ${semanticColor.border.focus}`,
+      borderColor: semanticColor.focus.outer,
+      outline: `${border.width.hairline}px solid ${semanticColor.focus.outer}`,
       outlineOffset: -2
     }
   },
@@ -1131,7 +1131,7 @@ const styles = StyleSheet.create({
     },
     cursor: "not-allowed",
     ":focus-visible": {
-      outline: `${border.width.thin}px solid ${semanticColor.action.disabled.default}`,
+      outline: `${border.width.thin}px solid ${semanticColor.focus.outer}`,
       outlineOffset: -3
     }
   },
@@ -1143,7 +1143,7 @@ const styles = StyleSheet.create({
       color: semanticColor.text.secondary
     },
     ":focus-visible": {
-      outlineColor: states.error.border,
+      outline: `${border.width.thin}px solid ${semanticColor.focus.outer}`,
       borderColor: states.error.border
     }
   }

package/dist/index.js

@@ -1,5 +1,7 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var _objectWithoutPropertiesLoose = require('@babel/runtime/helpers/objectWithoutPropertiesLoose');
@@ -12,7 +14,10 @@ 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');
 
-function _interopNamespaceDefault(e) {
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
     var n = Object.create(null);
     if (e) {
         Object.keys(e).forEach(function (k) {
@@ -25,11 +30,15 @@ function _interopNamespaceDefault(e) {
             }
         });
     }
-    n.default = e;
+    n["default"] = e;
     return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var _objectWithoutPropertiesLoose__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutPropertiesLoose);
+var checkIcon__default = /*#__PURE__*/_interopDefaultLegacy(checkIcon);
+var minusIcon__default = /*#__PURE__*/_interopDefaultLegacy(minusIcon);
 
 const _excluded$7 = ["checked", "disabled", "error", "groupName", "id", "testId"];
 function mapCheckedToAriaChecked(value) {
@@ -54,7 +63,7 @@ const CheckboxCore = React__namespace.forwardRef(function CheckboxCore(props, re
       id,
       testId
     } = props,
-    sharedProps = _objectWithoutPropertiesLoose(props, _excluded$7);
+    sharedProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded$7);
   const innerRef = React__namespace.useRef(null);
   React__namespace.useEffect(() => {
     if (innerRef.current != null) {
@@ -68,7 +77,7 @@ const CheckboxCore = React__namespace.forwardRef(function CheckboxCore(props, re
   const defaultStyle = [sharedStyles$1.inputReset, sharedStyles$1.default, !disabled && stateStyles.default, disabled && sharedStyles$1.disabled];
   const checkboxIcon = React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
     color: disabled ? wonderBlocksTokens.semanticColor.icon.disabled : wonderBlocksTokens.semanticColor.icon.inverse,
-    icon: checked ? checkIcon : minusIcon,
+    icon: checked ? checkIcon__default["default"] : minusIcon__default["default"],
     size: "small",
     style: [sharedStyles$1.checkboxIcon, {
       width: checkSize,
@@ -76,7 +85,7 @@ const CheckboxCore = React__namespace.forwardRef(function CheckboxCore(props, re
     }]
   });
   const ariaChecked = mapCheckedToAriaChecked(checked);
-  return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(StyledInput$2, _extends({}, sharedProps, {
+  return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(StyledInput$2, _extends__default["default"]({}, sharedProps, {
     ref: node => {
       innerRef.current = node;
       if (typeof ref === "function") {
@@ -98,8 +107,8 @@ const CheckboxCore = React__namespace.forwardRef(function CheckboxCore(props, re
   })), checked || checked == null ? checkboxIcon : React__namespace.createElement(React__namespace.Fragment, null));
 });
 const disabledState$1 = {
-  border: wonderBlocksTokens.semanticColor.border.primary,
-  background: wonderBlocksTokens.semanticColor.action.disabled.secondary
+  border: wonderBlocksTokens.semanticColor.action.secondary.disabled.border,
+  background: wonderBlocksTokens.semanticColor.action.secondary.disabled.background
 };
 const sharedStyles$1 = aphrodite.StyleSheet.create({
   inputReset: {
@@ -139,7 +148,7 @@ const _generateStyles$1 = (checked, error) => {
   }
   const isCheckedOrIndeterminate = checked || checked == null;
   const actionType = error ? "destructive" : "progressive";
-  const styleType = isCheckedOrIndeterminate ? "filled" : "outlined";
+  const styleType = isCheckedOrIndeterminate ? "primary" : "secondary";
   const colorAction = wonderBlocksTokens.semanticColor.action[styleType][actionType];
   const states = {
     default: {
@@ -158,7 +167,7 @@ const _generateStyles$1 = (checked, error) => {
         backgroundColor: states.default.background,
         borderColor: states.default.border,
         ":focus-visible": {
-          outline: `${wonderBlocksTokens.border.width.thin}px solid ${colorAction.hover.border}`,
+          outline: `${wonderBlocksTokens.border.width.thin}px solid ${wonderBlocksTokens.semanticColor.focus.outer}`,
           outlineOffset: 1
         },
         ":hover": {
@@ -180,7 +189,7 @@ const _generateStyles$1 = (checked, error) => {
         borderColor: currentState.border,
         ":focus-visible": {
           backgroundColor: error ? states.error.background : colorAction.hover.background,
-          outline: `${wonderBlocksTokens.border.width.thin}px solid ${colorAction.hover.border}`,
+          outline: `${wonderBlocksTokens.border.width.thin}px solid ${wonderBlocksTokens.semanticColor.focus.outer}`,
           outlineOffset: -1
         },
         ":hover": {
@@ -214,10 +223,10 @@ const RadioCore = React__namespace.forwardRef(function RadioCore(props, ref) {
       id,
       testId
     } = props,
-    sharedProps = _objectWithoutPropertiesLoose(props, _excluded$6);
+    sharedProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded$6);
   const stateStyles = _generateStyles(checked, error);
   const defaultStyle = [sharedStyles.inputReset, sharedStyles.default, !disabled && stateStyles.default, disabled && sharedStyles.disabled];
-  return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(StyledInput$1, _extends({}, sharedProps, {
+  return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(StyledInput$1, _extends__default["default"]({}, sharedProps, {
     type: "radio",
     "aria-invalid": error,
     checked: checked != null ? checked : undefined,
@@ -233,8 +242,8 @@ const RadioCore = React__namespace.forwardRef(function RadioCore(props, ref) {
   }));
 });
 const disabledState = {
-  border: wonderBlocksTokens.semanticColor.border.primary,
-  background: wonderBlocksTokens.semanticColor.action.disabled.secondary
+  border: wonderBlocksTokens.semanticColor.action.secondary.disabled.border,
+  background: wonderBlocksTokens.semanticColor.action.secondary.disabled.background
 };
 const size = 16;
 const disabledChecked = {
@@ -244,7 +253,7 @@ const disabledChecked = {
   height: size / 2,
   width: size / 2,
   borderRadius: "50%",
-  backgroundColor: wonderBlocksTokens.semanticColor.action.disabled.default
+  backgroundColor: wonderBlocksTokens.semanticColor.action.primary.disabled.background
 };
 const sharedStyles = aphrodite.StyleSheet.create({
   inputReset: {
@@ -278,7 +287,7 @@ const _generateStyles = (checked, error) => {
     return styles$5[styleKey];
   }
   const actionType = error ? "destructive" : "progressive";
-  const colorAction = wonderBlocksTokens.semanticColor.action.outlined[actionType];
+  const colorAction = wonderBlocksTokens.semanticColor.action.secondary[actionType];
   const states = {
     unchecked: {
       border: wonderBlocksTokens.semanticColor.border.strong,
@@ -301,7 +310,7 @@ const _generateStyles = (checked, error) => {
         borderColor: states.checked.border,
         borderWidth: size / 4,
         ":focus-visible": {
-          outline: `${wonderBlocksTokens.border.width.thin}px solid ${colorAction.hover.border}`,
+          outline: `${wonderBlocksTokens.border.width.thin}px solid ${wonderBlocksTokens.semanticColor.focus.outer}`,
           outlineOffset: 1
         },
         ":hover": {
@@ -323,7 +332,7 @@ const _generateStyles = (checked, error) => {
         borderColor: currentState.border,
         ":focus-visible": {
           backgroundColor: error ? states.error.background : colorAction.hover.background,
-          outline: `${wonderBlocksTokens.border.width.thin}px solid ${colorAction.hover.border}`,
+          outline: `${wonderBlocksTokens.border.width.thin}px solid ${wonderBlocksTokens.semanticColor.focus.outer}`,
           outlineOffset: -1
         },
         ":hover": {
@@ -357,7 +366,7 @@ const ChoiceInternal = React__namespace.forwardRef(function ChoiceInternal(props
       className,
       variant
     } = props,
-    coreProps = _objectWithoutPropertiesLoose(props, _excluded$5);
+    coreProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded$5);
   const handleClick = () => {
     if (variant === "radio" && checked) {
       return;
@@ -395,7 +404,7 @@ const ChoiceInternal = React__namespace.forwardRef(function ChoiceInternal(props
       }, React__namespace.createElement(wonderBlocksCore.View, {
         style: styles$4.wrapper,
         tabIndex: -1
-      }, React__namespace.createElement(ChoiceCore, _extends({}, coreProps, {
+      }, React__namespace.createElement(ChoiceCore, _extends__default["default"]({}, coreProps, {
         id: uniqueId,
         checked: checked,
         "aria-describedby": descriptionId,
@@ -419,7 +428,7 @@ const styles$4 = aphrodite.StyleSheet.create({
     marginTop: -2
   },
   disabledLabel: {
-    color: wonderBlocksTokens.semanticColor.text.disabled
+    color: wonderBlocksTokens.semanticColor.action.secondary.disabled.foreground
   },
   description: {
     marginLeft: wonderBlocksTokens.spacing.medium_16 + wonderBlocksTokens.spacing.xSmall_8,
@@ -433,7 +442,7 @@ const Checkbox = React__namespace.forwardRef(function Checkbox(props, ref) {
     disabled = false,
     error = false
   } = props;
-  return React__namespace.createElement(ChoiceInternal, _extends({}, props, {
+  return React__namespace.createElement(ChoiceInternal, _extends__default["default"]({}, props, {
     variant: "checkbox",
     disabled: disabled,
     error: error,
@@ -447,8 +456,8 @@ const Radio = React__namespace.forwardRef(function Radio(props, ref) {
       disabled = false,
       error = false
     } = props,
-    otherProps = _objectWithoutPropertiesLoose(props, _excluded$4);
-  return React__namespace.createElement(ChoiceInternal, _extends({}, otherProps, {
+    otherProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded$4);
+  return React__namespace.createElement(ChoiceInternal, _extends__default["default"]({}, otherProps, {
     variant: "radio",
     disabled: disabled,
     error: error,
@@ -464,7 +473,7 @@ const Choice = React__namespace.forwardRef(function Choice(props, ref) {
       onChange = () => {},
       variant
     } = props,
-    remainingProps = _objectWithoutPropertiesLoose(props, _excluded$3);
+    remainingProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded$3);
   const getChoiceComponent = variant => {
     if (variant === "checkbox") {
       return Checkbox;
@@ -473,7 +482,7 @@ const Choice = React__namespace.forwardRef(function Choice(props, ref) {
     }
   };
   const ChoiceComponent = getChoiceComponent(variant);
-  return React__namespace.createElement(ChoiceComponent, _extends({}, remainingProps, {
+  return React__namespace.createElement(ChoiceComponent, _extends__default["default"]({}, remainingProps, {
     checked: checked,
     disabled: disabled,
     onChange: onChange,
@@ -691,7 +700,7 @@ const TextField = props => {
       onFocus,
       onBlur
     } = props,
-    otherProps = _objectWithoutPropertiesLoose(props, _excluded$2);
+    otherProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded$2);
   const {
     errorMessage,
     onBlurValidation,
@@ -723,7 +732,7 @@ const TextField = props => {
   };
   return React__namespace.createElement(wonderBlocksCore.Id, {
     id: id
-  }, uniqueId => React__namespace.createElement(StyledInput, _extends({
+  }, uniqueId => React__namespace.createElement(StyledInput, _extends__default["default"]({
     style: [styles$2.input, wonderBlocksTypography.styles.LabelMedium, styles$2.default, !disabled && styles$2.defaultFocus, disabled && styles$2.disabled, hasError && styles$2.error, style],
     id: uniqueId,
     type: type,
@@ -751,8 +760,8 @@ const states$1 = {
     foreground: wonderBlocksTokens.semanticColor.text.primary
   },
   disabled: {
-    border: wonderBlocksTokens.semanticColor.border.primary,
-    background: wonderBlocksTokens.semanticColor.action.disabled.secondary,
+    border: wonderBlocksTokens.semanticColor.action.secondary.disabled.border,
+    background: wonderBlocksTokens.semanticColor.action.secondary.disabled.background,
     foreground: wonderBlocksTokens.semanticColor.text.secondary
   },
   error: {
@@ -780,8 +789,8 @@ const styles$2 = aphrodite.StyleSheet.create({
   },
   defaultFocus: {
     ":focus-visible": {
-      borderColor: wonderBlocksTokens.semanticColor.border.focus,
-      outline: `${wonderBlocksTokens.border.width.hairline}px solid ${wonderBlocksTokens.semanticColor.border.focus}`,
+      borderColor: wonderBlocksTokens.semanticColor.focus.outer,
+      outline: `${wonderBlocksTokens.border.width.hairline}px solid ${wonderBlocksTokens.semanticColor.focus.outer}`,
       outlineOffset: -2
     }
   },
@@ -793,8 +802,8 @@ const styles$2 = aphrodite.StyleSheet.create({
       color: wonderBlocksTokens.semanticColor.text.secondary
     },
     ":focus-visible": {
-      outlineColor: states$1.error.border,
-      borderColor: states$1.error.border
+      outlineColor: wonderBlocksTokens.semanticColor.focus.outer,
+      outline: `${wonderBlocksTokens.border.width.thin}px solid ${wonderBlocksTokens.semanticColor.focus.outer}`
     }
   },
   disabled: {
@@ -806,12 +815,12 @@ const styles$2 = aphrodite.StyleSheet.create({
     },
     cursor: "not-allowed",
     ":focus-visible": {
-      outline: `${wonderBlocksTokens.border.width.thin}px solid ${wonderBlocksTokens.semanticColor.action.disabled.default}`,
+      outline: `${wonderBlocksTokens.border.width.thin}px solid ${wonderBlocksTokens.semanticColor.focus.outer}`,
       outlineOffset: -3
     }
   }
 });
-var TextField$1 = React__namespace.forwardRef((props, ref) => React__namespace.createElement(TextField, _extends({}, props, {
+var TextField$1 = React__namespace.forwardRef((props, ref) => React__namespace.createElement(TextField, _extends__default["default"]({}, props, {
   forwardedRef: ref
 })));
 
@@ -964,14 +973,14 @@ class LabeledTextField extends React__namespace.Component {
         ariaDescribedby,
         name
       } = _this$props,
-      otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
+      otherProps = _objectWithoutPropertiesLoose__default["default"](_this$props, _excluded$1);
     return React__namespace.createElement(wonderBlocksCore.Id, {
       id: id
     }, uniqueId => React__namespace.createElement(FieldHeading, {
       id: uniqueId,
       testId: testId,
       style: style,
-      field: React__namespace.createElement(TextField$1, _extends({
+      field: React__namespace.createElement(TextField$1, _extends__default["default"]({
         id: `${uniqueId}-field`,
         "aria-describedby": ariaDescribedby ? ariaDescribedby : `${uniqueId}-error`,
         "aria-required": required ? "true" : "false",
@@ -1003,7 +1012,7 @@ LabeledTextField.defaultProps = {
   type: "text",
   disabled: false
 };
-var labeledTextField = React__namespace.forwardRef((props, ref) => React__namespace.createElement(LabeledTextField, _extends({}, props, {
+var labeledTextField = React__namespace.forwardRef((props, ref) => React__namespace.createElement(LabeledTextField, _extends__default["default"]({}, props, {
   forwardedRef: ref
 })));
 
@@ -1041,7 +1050,7 @@ const TextArea = React__namespace.forwardRef(function TextArea(props, ref) {
       error,
       instantValidation = true
     } = props,
-    otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+    otherProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded);
   const {
     errorMessage,
     onBlurValidation,
@@ -1072,7 +1081,7 @@ const TextArea = React__namespace.forwardRef(function TextArea(props, ref) {
     style: [{
       width: "100%"
     }, rootStyle]
-  }, React__namespace.createElement(StyledTextarea, _extends({
+  }, React__namespace.createElement(StyledTextarea, _extends__default["default"]({
     id: uniqueId,
     "data-testid": testId,
     ref: ref,
@@ -1110,8 +1119,8 @@ const states = {
     foreground: wonderBlocksTokens.semanticColor.text.primary
   },
   disabled: {
-    border: wonderBlocksTokens.semanticColor.border.primary,
-    background: wonderBlocksTokens.semanticColor.action.disabled.secondary,
+    border: wonderBlocksTokens.semanticColor.action.secondary.disabled.border,
+    background: wonderBlocksTokens.semanticColor.action.secondary.disabled.background,
     foreground: wonderBlocksTokens.semanticColor.text.secondary
   },
   error: {
@@ -1137,8 +1146,8 @@ const styles = aphrodite.StyleSheet.create({
   },
   defaultFocus: {
     ":focus-visible": {
-      borderColor: wonderBlocksTokens.semanticColor.border.focus,
-      outline: `${wonderBlocksTokens.border.width.hairline}px solid ${wonderBlocksTokens.semanticColor.border.focus}`,
+      borderColor: wonderBlocksTokens.semanticColor.focus.outer,
+      outline: `${wonderBlocksTokens.border.width.hairline}px solid ${wonderBlocksTokens.semanticColor.focus.outer}`,
       outlineOffset: -2
     }
   },
@@ -1151,7 +1160,7 @@ const styles = aphrodite.StyleSheet.create({
     },
     cursor: "not-allowed",
     ":focus-visible": {
-      outline: `${wonderBlocksTokens.border.width.thin}px solid ${wonderBlocksTokens.semanticColor.action.disabled.default}`,
+      outline: `${wonderBlocksTokens.border.width.thin}px solid ${wonderBlocksTokens.semanticColor.focus.outer}`,
       outlineOffset: -3
     }
   },
@@ -1163,7 +1172,7 @@ const styles = aphrodite.StyleSheet.create({
       color: wonderBlocksTokens.semanticColor.text.secondary
     },
     ":focus-visible": {
-      outlineColor: states.error.border,
+      outline: `${wonderBlocksTokens.border.width.thin}px solid ${wonderBlocksTokens.semanticColor.focus.outer}`,
       borderColor: states.error.border
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-form",
-  "version": "7.1.0",
+  "version": "7.1.2",
   "design": "v1",
   "description": "Form components for Wonder Blocks.",
   "main": "dist/index.js",
@@ -13,12 +13,12 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.24.5",
-    "@khanacademy/wonder-blocks-clickable": "6.1.0",
-    "@khanacademy/wonder-blocks-core": "12.1.0",
-    "@khanacademy/wonder-blocks-icon": "5.1.0",
-    "@khanacademy/wonder-blocks-layout": "3.1.0",
-    "@khanacademy/wonder-blocks-tokens": "4.2.0",
-    "@khanacademy/wonder-blocks-typography": "3.1.0"
+    "@khanacademy/wonder-blocks-clickable": "6.1.2",
+    "@khanacademy/wonder-blocks-core": "12.2.0",
+    "@khanacademy/wonder-blocks-icon": "5.1.2",
+    "@khanacademy/wonder-blocks-layout": "3.1.2",
+    "@khanacademy/wonder-blocks-tokens": "5.0.0",
+    "@khanacademy/wonder-blocks-typography": "3.1.2"
   },
   "peerDependencies": {
     "@phosphor-icons/core": "^2.0.2",
@@ -26,7 +26,7 @@
     "react": "18.2.0"
   },
   "devDependencies": {
-    "@khanacademy/wb-dev-build-settings": "2.1.0"
+    "@khanacademy/wb-dev-build-settings": "2.1.1"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"