@khanacademy/wonder-blocks-form - npm Package Compare versions

Comparing version 0.0.0-PR2438-20250121233759 to 0.0.0-PR2438-20250127173228

CHANGELOG.md

 # @khanacademy/wonder-blocks-form
 
-## 0.0.0-PR2438-20250121233759
+## 0.0.0-PR2438-20250127173228
 
+### Major Changes
+
+-   8d26588f: Remove `light` variant from LabeledTextField, TextField and TextArea"
+
 ### Patch Changes
 
 -   Updated dependencies [0de25cd8]
-    -   @khanacademy/wonder-blocks-tokens@0.0.0-PR2438-20250121233759
-    -   @khanacademy/wonder-blocks-clickable@0.0.0-PR2438-20250121233759
-    -   @khanacademy/wonder-blocks-layout@0.0.0-PR2438-20250121233759
+    -   @khanacademy/wonder-blocks-tokens@0.0.0-PR2438-20250127173228
+    -   @khanacademy/wonder-blocks-clickable@0.0.0-PR2438-20250127173228
+    -   @khanacademy/wonder-blocks-layout@0.0.0-PR2438-20250127173228
 
@@ -12,0 +16,0 @@ ## 6.0.6

dist/components/checkbox-core.d.ts

@@ -7,3 +7,3 @@ import * as React from "react";
 declare const CheckboxCore: React.ForwardRefExoticComponent<Readonly<import("@khanacademy/wonder-blocks-core").AriaAttributes> & Readonly<{
-    role?: import("@khanacademy/wonder-blocks-core").AriaRole | undefined;
+    role?: import("@khanacademy/wonder-blocks-core").AriaRole;
 }> & {
@@ -13,7 +13,7 @@ checked: Checked;
     error: boolean;
-    groupName?: string | undefined;
-    id?: string | undefined;
-    testId?: string | undefined;
+    groupName?: string;
+    id?: string;
+    testId?: string;
     onClick: () => void;
 } & React.RefAttributes<HTMLInputElement>>;
 export default CheckboxCore;

dist/components/checkbox.d.ts

@@ -26,3 +26,3 @@ import * as React from "react";
 declare const Checkbox: React.ForwardRefExoticComponent<Readonly<import("@khanacademy/wonder-blocks-core").AriaAttributes> & Readonly<{
-    role?: import("@khanacademy/wonder-blocks-core").AriaRole | undefined;
+    role?: import("@khanacademy/wonder-blocks-core").AriaRole;
 }> & {
@@ -36,7 +36,7 @@ /**
      */
-    disabled?: boolean | undefined;
+    disabled?: boolean;
     /**
      * Whether this component should show an error state
      */
-    error?: boolean | undefined;
+    error?: boolean;
     /**
@@ -60,3 +60,3 @@ * Callback when this component is selected. The newCheckedState is the
      */
-    id?: string | undefined;
+    id?: string;
     /**
@@ -69,7 +69,7 @@ * Optional styling for the container. Does not style the component.
      */
-    className?: string | undefined;
+    className?: string;
     /**
      * Optional test ID for e2e testing
      */
-    testId?: string | undefined;
+    testId?: string;
     /**
@@ -80,4 +80,4 @@ * Name for the checkbox or radio button group. Only applicable for group
      */
-    groupName?: string | undefined;
+    groupName?: string;
 } & React.RefAttributes<HTMLInputElement>>;
 export default Checkbox;

dist/components/choice-internal.d.ts

@@ -11,3 +11,3 @@ import * as React from "react";
  */ declare const ChoiceInternal: React.ForwardRefExoticComponent<Readonly<import("@khanacademy/wonder-blocks-core").AriaAttributes> & Readonly<{
-    role?: import("@khanacademy/wonder-blocks-core").AriaRole | undefined;
+    role?: import("@khanacademy/wonder-blocks-core").AriaRole;
 }> & {
@@ -17,5 +17,5 @@ /** Whether this choice is checked. */
     /** Whether this choice option is disabled. */
-    disabled?: boolean | undefined;
+    disabled?: boolean;
     /** Whether this choice is in error mode. */
-    error?: boolean | undefined;
+    error?: boolean;
     /** Returns the new checked state of the component. */
@@ -27,3 +27,3 @@ onChange: (newCheckedState: boolean) => unknown;
      */
-    id?: string | undefined;
+    id?: string;
     /**
@@ -36,7 +36,7 @@ * Optional additional styling.
      */
-    className?: string | undefined;
+    className?: string;
     /**
      * Optional id for testing purposes.
      */
-    testId?: string | undefined;
+    testId?: string;
     /**
@@ -49,3 +49,3 @@ * Label for the field.
     /** Auto-populated by parent's groupName prop if in a group. */
-    groupName?: string | undefined;
+    groupName?: string;
     /** Takes either "radio" or "checkbox" value. */
@@ -52,0 +52,0 @@ variant: "radio" | "checkbox";

dist/components/choice.d.ts

@@ -70,3 +70,3 @@ import * as React from "react";
 declare const Choice: React.ForwardRefExoticComponent<Readonly<import("@khanacademy/wonder-blocks-core").AriaAttributes> & Readonly<{
-    role?: import("@khanacademy/wonder-blocks-core").AriaRole | undefined;
+    role?: import("@khanacademy/wonder-blocks-core").AriaRole;
 }> & {
@@ -80,5 +80,5 @@ /** User-defined. Label for the field. */
     /** User-defined. Whether this choice option is disabled. Default false. */
-    disabled?: boolean | undefined;
+    disabled?: boolean;
     /** User-defined. Optional id for testing purposes. */
-    testId?: string | undefined;
+    testId?: string;
     /** User-defined. Optional additional styling. */
@@ -90,3 +90,3 @@ style?: StyleType;
      */
-    checked?: boolean | undefined;
+    checked?: boolean;
     /**
@@ -97,3 +97,3 @@ * Auto-populated by parent. Whether this choice is in error mode (everything
      */
-    error?: boolean | undefined;
+    error?: boolean;
     /**
@@ -104,3 +104,3 @@ * Auto-populated by parent. Used for accessibility purposes, where the label
      */
-    id?: string | undefined;
+    id?: string;
     /**
@@ -110,3 +110,3 @@ * Auto-populated by parent's groupName prop.
      */
-    groupName?: string | undefined;
+    groupName?: string;
     /**
@@ -116,3 +116,3 @@ * Auto-populated by parent. Returns the new checked state of the component.
      */
-    onChange?: ((newCheckedState: boolean) => unknown) | undefined;
+    onChange?: (newCheckedState: boolean) => unknown;
     /**
@@ -122,4 +122,4 @@ * Auto-populated by parent.
      */
-    variant?: "checkbox" | "radio" | undefined;
+    variant?: "radio" | "checkbox";
 } & React.RefAttributes<HTMLInputElement>>;
 export default Choice;

dist/components/field-heading.d.ts

@@ -39,6 +39,2 @@ import * as React from "react";
     testId?: string;
-    /**
-     * Change the field’s sub-components to fit a dark background.
-     */
-    light?: boolean;
 };
@@ -45,0 +41,0 @@ /**

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

@@ -95,6 +95,2 @@ import * as React from "react";
     /**
-     * Change the field’s sub-components to fit a dark background.
-     */
-    light: boolean;
-    /**
      * Custom styles for the container.
@@ -141,3 +137,2 @@ *
     disabled: PropsWithForwardRef["disabled"];
-    light: PropsWithForwardRef["light"];
 };
@@ -144,0 +139,0 @@ type State = {

dist/components/radio-core.d.ts

@@ -6,3 +6,3 @@ import * as React from "react";
  */ declare const RadioCore: React.ForwardRefExoticComponent<Readonly<import("@khanacademy/wonder-blocks-core").AriaAttributes> & Readonly<{
-    role?: import("@khanacademy/wonder-blocks-core").AriaRole | undefined;
+    role?: import("@khanacademy/wonder-blocks-core").AriaRole;
 }> & {
@@ -12,7 +12,7 @@ checked: Checked;
     error: boolean;
-    groupName?: string | undefined;
-    id?: string | undefined;
-    testId?: string | undefined;
+    groupName?: string;
+    id?: string;
+    testId?: string;
     onClick: () => void;
 } & React.RefAttributes<HTMLInputElement>>;
 export default RadioCore;

dist/components/radio.d.ts

@@ -10,3 +10,3 @@ import * as React from "react";
  */ declare const Radio: React.ForwardRefExoticComponent<Readonly<import("@khanacademy/wonder-blocks-core").AriaAttributes> & Readonly<{
-    role?: import("@khanacademy/wonder-blocks-core").AriaRole | undefined;
+    role?: import("@khanacademy/wonder-blocks-core").AriaRole;
 }> & {
@@ -20,7 +20,7 @@ /**
      */
-    disabled?: boolean | undefined;
+    disabled?: boolean;
     /**
      * Whether this component should show an error state
      */
-    error?: boolean | undefined;
+    error?: boolean;
     /**
@@ -44,3 +44,3 @@ * Callback when this component is selected. The newCheckedState is the
      */
-    id?: string | undefined;
+    id?: string;
     /**
@@ -53,7 +53,7 @@ * Optional styling for the container. Does not style the component.
      */
-    className?: string | undefined;
+    className?: string;
     /**
      * Optional test ID for e2e testing
      */
-    testId?: string | undefined;
+    testId?: string;
     /**
@@ -64,4 +64,4 @@ * Name for the checkbox or radio button group. Only applicable for group
      */
-    groupName?: string | undefined;
+    groupName?: string;
 } & React.RefAttributes<HTMLInputElement>>;
 export default Radio;

dist/components/text-area.d.ts

 import * as React from "react";
 import { StyleType } from "@khanacademy/wonder-blocks-core";
 declare const TextArea: React.ForwardRefExoticComponent<Readonly<import("@khanacademy/wonder-blocks-core").AriaAttributes> & Readonly<{
-    role?: import("@khanacademy/wonder-blocks-core").AriaRole | undefined;
+    role?: import("@khanacademy/wonder-blocks-core").AriaRole;
 }> & {
@@ -18,7 +18,7 @@ /**
      */
-    id?: string | undefined;
+    id?: string;
     /**
      * Optional test ID for e2e testing.
      */
-    testId?: string | undefined;
+    testId?: string;
     /**
@@ -37,15 +37,15 @@ * Custom styles for the textarea element.
      */
-    placeholder?: string | undefined;
+    placeholder?: string;
     /**
      * Whether the text area should be disabled.
      */
-    disabled?: boolean | undefined;
+    disabled?: boolean;
     /**
      * Specifies if the text area is read-only.
      */
-    readOnly?: boolean | undefined;
+    readOnly?: boolean;
     /**
      * Specifies if the text area allows autocomplete.
      */
-    autoComplete?: "off" | "on" | undefined;
+    autoComplete?: "on" | "off";
     /**
@@ -55,11 +55,11 @@ * The name for the text area control. This is submitted along with
      */
-    name?: string | undefined;
+    name?: string;
     /**
      * CSS classes for the textarea element. It is recommended that the style prop is used instead where possible
      */
-    className?: string | undefined;
+    className?: string;
     /**
      * Whether this textarea should autofocus on page load.
      */
-    autoFocus?: boolean | undefined;
+    autoFocus?: boolean;
     /**
@@ -71,3 +71,3 @@ * The number of visible lines of text for the textarea.
      */
-    rows?: number | undefined;
+    rows?: number;
     /**
@@ -81,3 +81,3 @@ * Determines if the textarea should be checked for spelling by the browser/OS.
      */
-    spellCheck?: boolean | undefined;
+    spellCheck?: boolean;
     /**
@@ -88,11 +88,11 @@ * How the control should wrap the value for form submission. If not provided,
      */
-    wrap?: "off" | "hard" | "soft" | undefined;
+    wrap?: "hard" | "soft" | "off";
     /**
      * The minimum number of characters allowed in the textarea.
      */
-    minLength?: number | undefined;
+    minLength?: number;
     /**
      * The maximum number of characters allowed in the textarea.
      */
-    maxLength?: number | undefined;
+    maxLength?: number;
     /**
@@ -102,3 +102,3 @@ * Called when the textarea is clicked.
      */
-    onClick?: React.MouseEventHandler<HTMLTextAreaElement> | undefined;
+    onClick?: React.MouseEventHandler<HTMLTextAreaElement>;
     /**
@@ -108,3 +108,3 @@ * Called when a key is pressed.
      */
-    onKeyDown?: React.KeyboardEventHandler<HTMLTextAreaElement> | undefined;
+    onKeyDown?: React.KeyboardEventHandler<HTMLTextAreaElement>;
     /**
@@ -114,3 +114,3 @@ * Called when a key is released.
      */
-    onKeyUp?: React.KeyboardEventHandler<HTMLTextAreaElement> | undefined;
+    onKeyUp?: React.KeyboardEventHandler<HTMLTextAreaElement>;
     /**
@@ -120,3 +120,3 @@ * Called when the element has been focused.
      */
-    onFocus?: React.FocusEventHandler<HTMLTextAreaElement> | undefined;
+    onFocus?: React.FocusEventHandler<HTMLTextAreaElement>;
     /**
@@ -126,3 +126,3 @@ * Called when the element has been focused.
      */
-    onBlur?: React.FocusEventHandler<HTMLTextAreaElement> | undefined;
+    onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;
     /**
@@ -135,7 +135,7 @@ * Provide a validation for the textarea value.
      */
-    validate?: ((value: string) => string | null | void) | undefined;
+    validate?: (value: string) => string | null | void;
     /**
      * Called right after the textarea is validated.
      */
-    onValidate?: ((errorMessage?: string | null | undefined) => unknown) | undefined;
+    onValidate?: (errorMessage?: string | null | undefined) => unknown;
     /**
@@ -147,3 +147,3 @@ * If true, textarea is validated as the user types (onChange). If false,
      */
-    instantValidation?: boolean | undefined;
+    instantValidation?: boolean;
     /**
@@ -155,3 +155,3 @@ * Whether the textarea is in an error state.
      */
-    error?: boolean | undefined;
+    error?: boolean;
     /**
@@ -179,3 +179,3 @@ * Whether this textarea is required to continue, or the error message to
      */
-    required?: string | boolean | undefined;
+    required?: boolean | string;
     /**
@@ -185,8 +185,4 @@ * Specifies the resizing behaviour for the textarea. Defaults to both
      */
-    resizeType?: "none" | "both" | "horizontal" | "vertical" | undefined;
-    /**
-     * Change the default focus ring color to fit a dark background.
-     */
-    light?: boolean | undefined;
+    resizeType?: "horizontal" | "vertical" | "both" | "none";
 } & React.RefAttributes<HTMLTextAreaElement>>;
 export default TextArea;

dist/components/text-field.d.ts

@@ -105,6 +105,2 @@ import * as React from "react";
     /**
-     * Change the default focus ring color to fit a dark background.
-     */
-    light?: boolean;
-    /**
      * Custom styles for the input.
@@ -111,0 +107,0 @@ */

dist/es/index.js

@@ -651,3 +651,3 @@ import _extends from '@babel/runtime/helpers/extends';
 
-const _excluded$2 = ["id", "type", "value", "name", "disabled", "light", "error", "validate", "onValidate", "required", "placeholder", "style", "testId", "readOnly", "autoFocus", "autoComplete", "forwardedRef", "instantValidation", "onKeyDown", "onChange", "onFocus", "onBlur"];
+const _excluded$2 = ["id", "type", "value", "name", "disabled", "error", "validate", "onValidate", "required", "placeholder", "style", "testId", "readOnly", "autoFocus", "autoComplete", "forwardedRef", "instantValidation", "onKeyDown", "onChange", "onFocus", "onBlur"];
 const StyledInput = addStyle("input");
@@ -661,3 +661,2 @@ const TextField = props => {
       disabled = false,
-      light = false,
       error,
@@ -710,12 +709,6 @@ validate,
   };
-  const getStyles = () => {
-    const baseStyles = [styles$2.input, styles$7.LabelMedium];
-    const defaultStyles = [styles$2.default, !disabled && styles$2.defaultFocus, disabled && styles$2.disabled, hasError && styles$2.error];
-    const lightStyles = [styles$2.light, !disabled && styles$2.lightFocus, disabled && styles$2.lightDisabled, hasError && styles$2.lightError];
-    return [...baseStyles, ...(light ? lightStyles : defaultStyles)];
-  };
   return React.createElement(Id, {
     id: id
   }, uniqueId => React.createElement(StyledInput, _extends({
-    style: [getStyles(), style],
+    style: [styles$2.input, styles$7.LabelMedium, styles$2.default, !disabled && styles$2.defaultFocus, disabled && styles$2.disabled, hasError && styles$2.error, style],
     id: uniqueId,
@@ -788,45 +781,2 @@ type: type,
     }
-  },
-  light: {
-    background: color.white,
-    border: `1px solid ${color.offBlack16}`,
-    color: color.offBlack,
-    "::placeholder": {
-      color: color.offBlack64
-    }
-  },
-  lightFocus: {
-    ":focus-visible": {
-      outline: `3px solid ${color.blue}`,
-      outlineOffset: "-4px",
-      borderColor: color.white
-    }
-  },
-  lightDisabled: {
-    backgroundColor: "transparent",
-    border: `1px solid ${color.white32}`,
-    color: color.white64,
-    "::placeholder": {
-      color: color.white64
-    },
-    cursor: "not-allowed",
-    ":focus-visible": {
-      borderColor: mix(color.white32, color.blue),
-      outline: `3px solid ${color.fadedBlue}`,
-      outlineOffset: "-4px"
-    }
-  },
-  lightError: {
-    background: color.fadedRed8,
-    border: `1px solid ${color.white}`,
-    outline: `2px solid ${color.red}`,
-    outlineOffset: "-3px",
-    color: color.offBlack,
-    "::placeholder": {
-      color: color.offBlack64
-    },
-    ":focus-visible": {
-      outline: `3px solid ${color.red}`,
-      outlineOffset: "-4px"
-    }
   }
@@ -845,11 +795,10 @@ });
       required,
-      testId,
-      light
+      testId
     } = this.props;
     const requiredIcon = React.createElement(StyledSpan, {
-      style: light ? styles$1.lightRequired : styles$1.required,
+      style: styles$1.required,
       "aria-hidden": true
     }, " ", "*");
     return React.createElement(React.Fragment, null, React.createElement(LabelMedium, {
-      style: light ? styles$1.lightLabel : styles$1.label,
+      style: styles$1.label,
       tag: "label",
@@ -865,4 +814,3 @@ htmlFor: id && `${id}-field`,
       description,
-      testId,
-      light
+      testId
     } = this.props;
@@ -873,3 +821,3 @@ if (!description) {
     return React.createElement(React.Fragment, null, React.createElement(LabelSmall, {
-      style: light ? styles$1.lightDescription : styles$1.description,
+      style: styles$1.description,
       testId: testId && `${testId}-description`
@@ -884,4 +832,3 @@ }, description), React.createElement(Strut, {
       id,
-      testId,
-      light
+      testId
     } = this.props;
@@ -894,3 +841,3 @@ if (!error) {
     }), React.createElement(LabelSmall, {
-      style: light ? styles$1.lightError : styles$1.error,
+      style: styles$1.error,
       role: "alert",
@@ -917,26 +864,14 @@ id: id && `${id}-error`,
   },
-  lightLabel: {
-    color: color.white
-  },
   description: {
     color: color.offBlack64
   },
-  lightDescription: {
-    color: color.white64
-  },
   error: {
     color: color.red
   },
-  lightError: {
-    color: color.fadedRed
-  },
   required: {
     color: color.red
-  },
-  lightRequired: {
-    color: color.fadedRed
   }
 });
 
-const _excluded$1 = ["id", "type", "label", "description", "value", "disabled", "required", "validate", "onChange", "onKeyDown", "placeholder", "light", "style", "testId", "readOnly", "autoComplete", "forwardedRef", "ariaDescribedby", "name", "onValidate", "onFocus", "onBlur"];
+const _excluded$1 = ["id", "type", "label", "description", "value", "disabled", "required", "validate", "onChange", "onKeyDown", "placeholder", "style", "testId", "readOnly", "autoComplete", "forwardedRef", "ariaDescribedby", "name", "onValidate", "onFocus", "onBlur"];
 class LabeledTextField extends React.Component {
@@ -1000,3 +935,2 @@ constructor(props) {
         placeholder,
-        light,
         style,
@@ -1017,3 +951,2 @@ testId,
       style: style,
-      light: light,
       field: React.createElement(TextField$1, _extends({
@@ -1035,3 +968,2 @@ id: `${uniqueId}-field`,
         onBlur: this.handleBlur,
-        light: light,
         readOnly: readOnly,
@@ -1051,4 +983,3 @@ autoComplete: autoComplete,
   type: "text",
-  disabled: false,
-  light: false
+  disabled: false
 };
@@ -1059,3 +990,3 @@ var labeledTextField = React.forwardRef((props, ref) => React.createElement(LabeledTextField, _extends({}, props, {
 
-const _excluded = ["onChange", "value", "placeholder", "disabled", "id", "testId", "style", "readOnly", "autoComplete", "name", "className", "autoFocus", "rows", "spellCheck", "wrap", "minLength", "maxLength", "onClick", "onKeyDown", "onKeyUp", "onFocus", "onBlur", "validate", "onValidate", "required", "resizeType", "light", "rootStyle", "error", "instantValidation"];
+const _excluded = ["onChange", "value", "placeholder", "disabled", "id", "testId", "style", "readOnly", "autoComplete", "name", "className", "autoFocus", "rows", "spellCheck", "wrap", "minLength", "maxLength", "onClick", "onKeyDown", "onKeyUp", "onFocus", "onBlur", "validate", "onValidate", "required", "resizeType", "rootStyle", "error", "instantValidation"];
 const StyledTextArea = addStyle("textarea");
@@ -1090,3 +1021,2 @@ const TextArea = React.forwardRef(function TextArea(props, ref) {
       resizeType,
-      light,
       rootStyle,
@@ -1123,8 +1053,2 @@ error,
   };
-  const getStyles = () => {
-    const baseStyles = [styles.textarea, styles$7.LabelMedium, resizeType && resizeStyles[resizeType]];
-    const defaultStyles = [styles.default, !disabled && styles.defaultFocus, disabled && styles.disabled, hasError && styles.error];
-    const lightStyles = [styles.light, !disabled && styles.lightFocus, disabled && styles.lightDisabled, hasError && styles.lightError];
-    return [...baseStyles, ...(light ? lightStyles : defaultStyles)];
-  };
   return React.createElement(View, {
@@ -1139,3 +1063,3 @@ style: [{
     className: className,
-    style: [getStyles(), style],
+    style: [styles.textarea, styles$7.LabelMedium, resizeType && resizeStyles[resizeType], styles.default, !disabled && styles.defaultFocus, disabled && styles.disabled, hasError && styles.error, style],
     value: value,
@@ -1212,45 +1136,2 @@ onChange: handleChange,
     }
-  },
-  light: {
-    background: color.white,
-    border: `1px solid ${color.offBlack16}`,
-    color: color.offBlack,
-    "::placeholder": {
-      color: color.offBlack64
-    }
-  },
-  lightFocus: {
-    ":focus-visible": {
-      outline: `3px solid ${color.blue}`,
-      outlineOffset: "-4px",
-      borderColor: color.white
-    }
-  },
-  lightDisabled: {
-    backgroundColor: "transparent",
-    border: `1px solid ${color.white32}`,
-    color: color.white64,
-    "::placeholder": {
-      color: color.white64
-    },
-    cursor: "not-allowed",
-    ":focus-visible": {
-      borderColor: mix(color.white32, color.blue),
-      outline: `3px solid ${color.fadedBlue}`,
-      outlineOffset: "-4px"
-    }
-  },
-  lightError: {
-    background: color.fadedRed8,
-    border: `1px solid ${color.white}`,
-    outline: `2px solid ${color.red}`,
-    outlineOffset: "-3px",
-    color: color.offBlack,
-    "::placeholder": {
-      color: color.offBlack64
-    },
-    ":focus-visible": {
-      outline: `3px solid ${color.red}`,
-      outlineOffset: "-4px"
-    }
   }
@@ -1257,0 +1138,0 @@ });

dist/index.js

@@ -680,3 +680,3 @@ 'use strict';
 
-const _excluded$2 = ["id", "type", "value", "name", "disabled", "light", "error", "validate", "onValidate", "required", "placeholder", "style", "testId", "readOnly", "autoFocus", "autoComplete", "forwardedRef", "instantValidation", "onKeyDown", "onChange", "onFocus", "onBlur"];
+const _excluded$2 = ["id", "type", "value", "name", "disabled", "error", "validate", "onValidate", "required", "placeholder", "style", "testId", "readOnly", "autoFocus", "autoComplete", "forwardedRef", "instantValidation", "onKeyDown", "onChange", "onFocus", "onBlur"];
 const StyledInput = wonderBlocksCore.addStyle("input");
@@ -690,3 +690,2 @@ const TextField = props => {
       disabled = false,
-      light = false,
       error,
@@ -739,12 +738,6 @@ validate,
   };
-  const getStyles = () => {
-    const baseStyles = [styles$2.input, wonderBlocksTypography.styles.LabelMedium];
-    const defaultStyles = [styles$2.default, !disabled && styles$2.defaultFocus, disabled && styles$2.disabled, hasError && styles$2.error];
-    const lightStyles = [styles$2.light, !disabled && styles$2.lightFocus, disabled && styles$2.lightDisabled, hasError && styles$2.lightError];
-    return [...baseStyles, ...(light ? lightStyles : defaultStyles)];
-  };
   return React__namespace.createElement(wonderBlocksCore.Id, {
     id: id
   }, uniqueId => React__namespace.createElement(StyledInput, _extends__default["default"]({
-    style: [getStyles(), style],
+    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,
@@ -817,45 +810,2 @@ type: type,
     }
-  },
-  light: {
-    background: wonderBlocksTokens.color.white,
-    border: `1px solid ${wonderBlocksTokens.color.offBlack16}`,
-    color: wonderBlocksTokens.color.offBlack,
-    "::placeholder": {
-      color: wonderBlocksTokens.color.offBlack64
-    }
-  },
-  lightFocus: {
-    ":focus-visible": {
-      outline: `3px solid ${wonderBlocksTokens.color.blue}`,
-      outlineOffset: "-4px",
-      borderColor: wonderBlocksTokens.color.white
-    }
-  },
-  lightDisabled: {
-    backgroundColor: "transparent",
-    border: `1px solid ${wonderBlocksTokens.color.white32}`,
-    color: wonderBlocksTokens.color.white64,
-    "::placeholder": {
-      color: wonderBlocksTokens.color.white64
-    },
-    cursor: "not-allowed",
-    ":focus-visible": {
-      borderColor: wonderBlocksTokens.mix(wonderBlocksTokens.color.white32, wonderBlocksTokens.color.blue),
-      outline: `3px solid ${wonderBlocksTokens.color.fadedBlue}`,
-      outlineOffset: "-4px"
-    }
-  },
-  lightError: {
-    background: wonderBlocksTokens.color.fadedRed8,
-    border: `1px solid ${wonderBlocksTokens.color.white}`,
-    outline: `2px solid ${wonderBlocksTokens.color.red}`,
-    outlineOffset: "-3px",
-    color: wonderBlocksTokens.color.offBlack,
-    "::placeholder": {
-      color: wonderBlocksTokens.color.offBlack64
-    },
-    ":focus-visible": {
-      outline: `3px solid ${wonderBlocksTokens.color.red}`,
-      outlineOffset: "-4px"
-    }
   }
@@ -874,11 +824,10 @@ });
       required,
-      testId,
-      light
+      testId
     } = this.props;
     const requiredIcon = React__namespace.createElement(StyledSpan, {
-      style: light ? styles$1.lightRequired : styles$1.required,
+      style: styles$1.required,
       "aria-hidden": true
     }, " ", "*");
     return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
-      style: light ? styles$1.lightLabel : styles$1.label,
+      style: styles$1.label,
       tag: "label",
@@ -894,4 +843,3 @@ htmlFor: id && `${id}-field`,
       description,
-      testId,
-      light
+      testId
     } = this.props;
@@ -902,3 +850,3 @@ if (!description) {
     return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
-      style: light ? styles$1.lightDescription : styles$1.description,
+      style: styles$1.description,
       testId: testId && `${testId}-description`
@@ -913,4 +861,3 @@ }, description), React__namespace.createElement(wonderBlocksLayout.Strut, {
       id,
-      testId,
-      light
+      testId
     } = this.props;
@@ -923,3 +870,3 @@ if (!error) {
     }), React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
-      style: light ? styles$1.lightError : styles$1.error,
+      style: styles$1.error,
       role: "alert",
@@ -946,26 +893,14 @@ id: id && `${id}-error`,
   },
-  lightLabel: {
-    color: wonderBlocksTokens.color.white
-  },
   description: {
     color: wonderBlocksTokens.color.offBlack64
   },
-  lightDescription: {
-    color: wonderBlocksTokens.color.white64
-  },
   error: {
     color: wonderBlocksTokens.color.red
   },
-  lightError: {
-    color: wonderBlocksTokens.color.fadedRed
-  },
   required: {
     color: wonderBlocksTokens.color.red
-  },
-  lightRequired: {
-    color: wonderBlocksTokens.color.fadedRed
   }
 });
 
-const _excluded$1 = ["id", "type", "label", "description", "value", "disabled", "required", "validate", "onChange", "onKeyDown", "placeholder", "light", "style", "testId", "readOnly", "autoComplete", "forwardedRef", "ariaDescribedby", "name", "onValidate", "onFocus", "onBlur"];
+const _excluded$1 = ["id", "type", "label", "description", "value", "disabled", "required", "validate", "onChange", "onKeyDown", "placeholder", "style", "testId", "readOnly", "autoComplete", "forwardedRef", "ariaDescribedby", "name", "onValidate", "onFocus", "onBlur"];
 class LabeledTextField extends React__namespace.Component {
@@ -1029,3 +964,2 @@ constructor(props) {
         placeholder,
-        light,
         style,
@@ -1046,3 +980,2 @@ testId,
       style: style,
-      light: light,
       field: React__namespace.createElement(TextField$1, _extends__default["default"]({
@@ -1064,3 +997,2 @@ id: `${uniqueId}-field`,
         onBlur: this.handleBlur,
-        light: light,
         readOnly: readOnly,
@@ -1080,4 +1012,3 @@ autoComplete: autoComplete,
   type: "text",
-  disabled: false,
-  light: false
+  disabled: false
 };
@@ -1088,3 +1019,3 @@ var labeledTextField = React__namespace.forwardRef((props, ref) => React__namespace.createElement(LabeledTextField, _extends__default["default"]({}, props, {
 
-const _excluded = ["onChange", "value", "placeholder", "disabled", "id", "testId", "style", "readOnly", "autoComplete", "name", "className", "autoFocus", "rows", "spellCheck", "wrap", "minLength", "maxLength", "onClick", "onKeyDown", "onKeyUp", "onFocus", "onBlur", "validate", "onValidate", "required", "resizeType", "light", "rootStyle", "error", "instantValidation"];
+const _excluded = ["onChange", "value", "placeholder", "disabled", "id", "testId", "style", "readOnly", "autoComplete", "name", "className", "autoFocus", "rows", "spellCheck", "wrap", "minLength", "maxLength", "onClick", "onKeyDown", "onKeyUp", "onFocus", "onBlur", "validate", "onValidate", "required", "resizeType", "rootStyle", "error", "instantValidation"];
 const StyledTextArea = wonderBlocksCore.addStyle("textarea");
@@ -1119,3 +1050,2 @@ const TextArea = React__namespace.forwardRef(function TextArea(props, ref) {
       resizeType,
-      light,
       rootStyle,
@@ -1152,8 +1082,2 @@ error,
   };
-  const getStyles = () => {
-    const baseStyles = [styles.textarea, wonderBlocksTypography.styles.LabelMedium, resizeType && resizeStyles[resizeType]];
-    const defaultStyles = [styles.default, !disabled && styles.defaultFocus, disabled && styles.disabled, hasError && styles.error];
-    const lightStyles = [styles.light, !disabled && styles.lightFocus, disabled && styles.lightDisabled, hasError && styles.lightError];
-    return [...baseStyles, ...(light ? lightStyles : defaultStyles)];
-  };
   return React__namespace.createElement(wonderBlocksCore.View, {
@@ -1168,3 +1092,3 @@ style: [{
     className: className,
-    style: [getStyles(), style],
+    style: [styles.textarea, wonderBlocksTypography.styles.LabelMedium, resizeType && resizeStyles[resizeType], styles.default, !disabled && styles.defaultFocus, disabled && styles.disabled, hasError && styles.error, style],
     value: value,
@@ -1241,45 +1165,2 @@ onChange: handleChange,
     }
-  },
-  light: {
-    background: wonderBlocksTokens.color.white,
-    border: `1px solid ${wonderBlocksTokens.color.offBlack16}`,
-    color: wonderBlocksTokens.color.offBlack,
-    "::placeholder": {
-      color: wonderBlocksTokens.color.offBlack64
-    }
-  },
-  lightFocus: {
-    ":focus-visible": {
-      outline: `3px solid ${wonderBlocksTokens.color.blue}`,
-      outlineOffset: "-4px",
-      borderColor: wonderBlocksTokens.color.white
-    }
-  },
-  lightDisabled: {
-    backgroundColor: "transparent",
-    border: `1px solid ${wonderBlocksTokens.color.white32}`,
-    color: wonderBlocksTokens.color.white64,
-    "::placeholder": {
-      color: wonderBlocksTokens.color.white64
-    },
-    cursor: "not-allowed",
-    ":focus-visible": {
-      borderColor: wonderBlocksTokens.mix(wonderBlocksTokens.color.white32, wonderBlocksTokens.color.blue),
-      outline: `3px solid ${wonderBlocksTokens.color.fadedBlue}`,
-      outlineOffset: "-4px"
-    }
-  },
-  lightError: {
-    background: wonderBlocksTokens.color.fadedRed8,
-    border: `1px solid ${wonderBlocksTokens.color.white}`,
-    outline: `2px solid ${wonderBlocksTokens.color.red}`,
-    outlineOffset: "-3px",
-    color: wonderBlocksTokens.color.offBlack,
-    "::placeholder": {
-      color: wonderBlocksTokens.color.offBlack64
-    },
-    ":focus-visible": {
-      outline: `3px solid ${wonderBlocksTokens.color.red}`,
-      outlineOffset: "-4px"
-    }
   }
@@ -1286,0 +1167,0 @@ });

package.json

 {
   "name": "@khanacademy/wonder-blocks-form",
-  "version": "0.0.0-PR2438-20250121233759",
+  "version": "0.0.0-PR2438-20250127173228",
   "design": "v1",
@@ -20,7 +20,7 @@ "description": "Form components for Wonder Blocks.",
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-clickable": "0.0.0-PR2438-20250121233759",
+    "@khanacademy/wonder-blocks-clickable": "0.0.0-PR2438-20250127173228",
     "@khanacademy/wonder-blocks-core": "^11.1.0",
     "@khanacademy/wonder-blocks-icon": "^5.0.5",
-    "@khanacademy/wonder-blocks-layout": "0.0.0-PR2438-20250121233759",
-    "@khanacademy/wonder-blocks-tokens": "0.0.0-PR2438-20250121233759",
+    "@khanacademy/wonder-blocks-layout": "0.0.0-PR2438-20250127173228",
+    "@khanacademy/wonder-blocks-tokens": "0.0.0-PR2438-20250127173228",
     "@khanacademy/wonder-blocks-typography": "^3.0.5"
@@ -27,0 +27,0 @@ },

No alert changes

Worsened metrics

Total package byte prevSize

138725

decreased by-5.67%

Lines of code

3492

decreased by-6.81%

Dependency changes

• + Added@khanacademy/wonder-blocks-clickable@0.0.0-PR2438-20250127173228(transitive)

• + Added@khanacademy/wonder-blocks-layout@0.0.0-PR2438-20250127173228(transitive)

• + Added@khanacademy/wonder-blocks-tokens@0.0.0-PR2438-20250127173228(transitive)

• - Removed@khanacademy/wonder-blocks-clickable@0.0.0-PR2438-20250121233759(transitive)

• - Removed@khanacademy/wonder-blocks-layout@0.0.0-PR2438-20250121233759(transitive)

• - Removed@khanacademy/wonder-blocks-tokens@0.0.0-PR2438-20250121233759(transitive)

• Updated@khanacademy/wonder-blocks-clickable@0.0.0-PR2438-20250127173228

• Updated@khanacademy/wonder-blocks-layout@0.0.0-PR2438-20250127173228

• Updated@khanacademy/wonder-blocks-tokens@0.0.0-PR2438-20250127173228