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

Comparing version 0.0.0-PR2231-20240520192816 to 0.0.0-PR2242-20240610182012

CHANGELOG.md

 # @khanacademy/wonder-blocks-typography
 
-## 0.0.0-PR2231-20240520192816
+## 0.0.0-PR2242-20240610182012
 
+### Major Changes
+
+-   3dd4944e: Migrate TextField and Typography to PandaCSS
+
 ### Patch Changes
 
--   Updated dependencies [e384dff4]
-    -   @khanacademy/wonder-blocks-core@0.0.0-PR2231-20240520192816
+-   Updated dependencies [48a65fb3]
+    -   @khanacademy/wonder-blocks-core@0.0.0-PR2242-20240610182012
 
+## 2.1.12
+
+### Patch Changes
+
+-   Updated dependencies [5dfac06e]
+    -   @khanacademy/wonder-blocks-core@6.4.1
+
 ## 2.1.11
@@ -11,0 +22,0 @@

dist/components/body-monospace.d.ts

@@ -53,3 +53,3 @@ import * as React from "react";
     tag?: string | undefined;
-} & React.RefAttributes<unknown>, "style" | "title" | "children" | "key" | "htmlFor" | "className" | "id" | "lang" | "tabIndex" | "role" | "onFocus" | "onBlur" | "onChange" | "onInput" | "onSubmit" | "onInvalid" | "onKeyDown" | "onKeyPress" | "onKeyUp" | "onClick" | "onDoubleClick" | "onDrag" | "onDragEnd" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDragStart" | "onDrop" | "onMouseDown" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseOut" | "onMouseOver" | "onMouseUp" | "onTouchCancel" | "onTouchEnd" | "onTouchMove" | "onTouchStart" | keyof import("../../../wonder-blocks-core/src/util/aria-types").AriaAttributes | "tag" | "testId" | "data-modal-launcher-portal" | "data-placement"> & React.RefAttributes<unknown>>;
+} & React.RefAttributes<unknown>, keyof import("../../../wonder-blocks-core/src/util/aria-types").AriaAttributes | "role" | "style" | "title" | "children" | "tag" | "testId" | "lang" | "className" | "htmlFor" | "tabIndex" | "id" | "data-modal-launcher-portal" | "data-placement" | "onMouseDown" | "onMouseUp" | "onMouseMove" | "onClick" | "onDoubleClick" | "onMouseEnter" | "onMouseLeave" | "onMouseOut" | "onMouseOver" | "onDrag" | "onDragEnd" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDragStart" | "onDrop" | "onKeyDown" | "onKeyPress" | "onKeyUp" | "onChange" | "onInput" | "onInvalid" | "onSubmit" | "onTouchCancel" | "onTouchEnd" | "onTouchMove" | "onTouchStart" | "onFocus" | "onBlur" | "key"> & React.RefAttributes<unknown>>;
 export default BodyMonospace;

dist/components/body-serif-block.d.ts

@@ -53,3 +53,3 @@ import * as React from "react";
     tag?: string | undefined;
-} & React.RefAttributes<unknown>, "style" | "title" | "children" | "key" | "htmlFor" | "className" | "id" | "lang" | "tabIndex" | "role" | "onFocus" | "onBlur" | "onChange" | "onInput" | "onSubmit" | "onInvalid" | "onKeyDown" | "onKeyPress" | "onKeyUp" | "onClick" | "onDoubleClick" | "onDrag" | "onDragEnd" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDragStart" | "onDrop" | "onMouseDown" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseOut" | "onMouseOver" | "onMouseUp" | "onTouchCancel" | "onTouchEnd" | "onTouchMove" | "onTouchStart" | keyof import("../../../wonder-blocks-core/src/util/aria-types").AriaAttributes | "tag" | "testId" | "data-modal-launcher-portal" | "data-placement"> & React.RefAttributes<unknown>>;
+} & React.RefAttributes<unknown>, keyof import("../../../wonder-blocks-core/src/util/aria-types").AriaAttributes | "role" | "style" | "title" | "children" | "tag" | "testId" | "lang" | "className" | "htmlFor" | "tabIndex" | "id" | "data-modal-launcher-portal" | "data-placement" | "onMouseDown" | "onMouseUp" | "onMouseMove" | "onClick" | "onDoubleClick" | "onMouseEnter" | "onMouseLeave" | "onMouseOut" | "onMouseOver" | "onDrag" | "onDragEnd" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDragStart" | "onDrop" | "onKeyDown" | "onKeyPress" | "onKeyUp" | "onChange" | "onInput" | "onInvalid" | "onSubmit" | "onTouchCancel" | "onTouchEnd" | "onTouchMove" | "onTouchStart" | "onFocus" | "onBlur" | "key"> & React.RefAttributes<unknown>>;
 export default BodySerifBlock;

dist/components/body-serif.d.ts

@@ -53,3 +53,3 @@ import * as React from "react";
     tag?: string | undefined;
-} & React.RefAttributes<unknown>, "style" | "title" | "children" | "key" | "htmlFor" | "className" | "id" | "lang" | "tabIndex" | "role" | "onFocus" | "onBlur" | "onChange" | "onInput" | "onSubmit" | "onInvalid" | "onKeyDown" | "onKeyPress" | "onKeyUp" | "onClick" | "onDoubleClick" | "onDrag" | "onDragEnd" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDragStart" | "onDrop" | "onMouseDown" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseOut" | "onMouseOver" | "onMouseUp" | "onTouchCancel" | "onTouchEnd" | "onTouchMove" | "onTouchStart" | keyof import("../../../wonder-blocks-core/src/util/aria-types").AriaAttributes | "tag" | "testId" | "data-modal-launcher-portal" | "data-placement"> & React.RefAttributes<unknown>>;
+} & React.RefAttributes<unknown>, keyof import("../../../wonder-blocks-core/src/util/aria-types").AriaAttributes | "role" | "style" | "title" | "children" | "tag" | "testId" | "lang" | "className" | "htmlFor" | "tabIndex" | "id" | "data-modal-launcher-portal" | "data-placement" | "onMouseDown" | "onMouseUp" | "onMouseMove" | "onClick" | "onDoubleClick" | "onMouseEnter" | "onMouseLeave" | "onMouseOut" | "onMouseOver" | "onDrag" | "onDragEnd" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDragStart" | "onDrop" | "onKeyDown" | "onKeyPress" | "onKeyUp" | "onChange" | "onInput" | "onInvalid" | "onSubmit" | "onTouchCancel" | "onTouchEnd" | "onTouchMove" | "onTouchStart" | "onFocus" | "onBlur" | "key"> & React.RefAttributes<unknown>>;
 export default BodySerif;

dist/components/body.d.ts

@@ -53,3 +53,3 @@ import * as React from "react";
     tag?: string | undefined;
-} & React.RefAttributes<unknown>, "style" | "title" | "children" | "key" | "htmlFor" | "className" | "id" | "lang" | "tabIndex" | "role" | "onFocus" | "onBlur" | "onChange" | "onInput" | "onSubmit" | "onInvalid" | "onKeyDown" | "onKeyPress" | "onKeyUp" | "onClick" | "onDoubleClick" | "onDrag" | "onDragEnd" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDragStart" | "onDrop" | "onMouseDown" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseOut" | "onMouseOver" | "onMouseUp" | "onTouchCancel" | "onTouchEnd" | "onTouchMove" | "onTouchStart" | keyof import("../../../wonder-blocks-core/src/util/aria-types").AriaAttributes | "tag" | "testId" | "data-modal-launcher-portal" | "data-placement"> & React.RefAttributes<unknown>>;
+} & React.RefAttributes<unknown>, keyof import("../../../wonder-blocks-core/src/util/aria-types").AriaAttributes | "role" | "style" | "title" | "children" | "tag" | "testId" | "lang" | "className" | "htmlFor" | "tabIndex" | "id" | "data-modal-launcher-portal" | "data-placement" | "onMouseDown" | "onMouseUp" | "onMouseMove" | "onClick" | "onDoubleClick" | "onMouseEnter" | "onMouseLeave" | "onMouseOut" | "onMouseOver" | "onDrag" | "onDragEnd" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDragStart" | "onDrop" | "onKeyDown" | "onKeyPress" | "onKeyUp" | "onChange" | "onInput" | "onInvalid" | "onSubmit" | "onTouchCancel" | "onTouchEnd" | "onTouchMove" | "onTouchStart" | "onFocus" | "onBlur" | "key"> & React.RefAttributes<unknown>>;
 export default Body;

dist/components/caption.d.ts

@@ -53,3 +53,3 @@ import * as React from "react";
     tag?: string | undefined;
-} & React.RefAttributes<unknown>, "style" | "title" | "children" | "key" | "htmlFor" | "className" | "id" | "lang" | "tabIndex" | "role" | "onFocus" | "onBlur" | "onChange" | "onInput" | "onSubmit" | "onInvalid" | "onKeyDown" | "onKeyPress" | "onKeyUp" | "onClick" | "onDoubleClick" | "onDrag" | "onDragEnd" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDragStart" | "onDrop" | "onMouseDown" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseOut" | "onMouseOver" | "onMouseUp" | "onTouchCancel" | "onTouchEnd" | "onTouchMove" | "onTouchStart" | keyof import("../../../wonder-blocks-core/src/util/aria-types").AriaAttributes | "tag" | "testId" | "data-modal-launcher-portal" | "data-placement"> & React.RefAttributes<unknown>>;
+} & React.RefAttributes<unknown>, keyof import("../../../wonder-blocks-core/src/util/aria-types").AriaAttributes | "role" | "style" | "title" | "children" | "tag" | "testId" | "lang" | "className" | "htmlFor" | "tabIndex" | "id" | "data-modal-launcher-portal" | "data-placement" | "onMouseDown" | "onMouseUp" | "onMouseMove" | "onClick" | "onDoubleClick" | "onMouseEnter" | "onMouseLeave" | "onMouseOut" | "onMouseOver" | "onDrag" | "onDragEnd" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDragStart" | "onDrop" | "onKeyDown" | "onKeyPress" | "onKeyUp" | "onChange" | "onInput" | "onInvalid" | "onSubmit" | "onTouchCancel" | "onTouchEnd" | "onTouchMove" | "onTouchStart" | "onFocus" | "onBlur" | "key"> & React.RefAttributes<unknown>>;
 export default Caption;

dist/components/footnote.d.ts

@@ -53,3 +53,3 @@ import * as React from "react";
     tag?: string | undefined;
-} & React.RefAttributes<unknown>, "style" | "title" | "children" | "key" | "htmlFor" | "className" | "id" | "lang" | "tabIndex" | "role" | "onFocus" | "onBlur" | "onChange" | "onInput" | "onSubmit" | "onInvalid" | "onKeyDown" | "onKeyPress" | "onKeyUp" | "onClick" | "onDoubleClick" | "onDrag" | "onDragEnd" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDragStart" | "onDrop" | "onMouseDown" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseOut" | "onMouseOver" | "onMouseUp" | "onTouchCancel" | "onTouchEnd" | "onTouchMove" | "onTouchStart" | keyof import("../../../wonder-blocks-core/src/util/aria-types").AriaAttributes | "tag" | "testId" | "data-modal-launcher-portal" | "data-placement"> & React.RefAttributes<unknown>>;
+} & React.RefAttributes<unknown>, keyof import("../../../wonder-blocks-core/src/util/aria-types").AriaAttributes | "role" | "style" | "title" | "children" | "tag" | "testId" | "lang" | "className" | "htmlFor" | "tabIndex" | "id" | "data-modal-launcher-portal" | "data-placement" | "onMouseDown" | "onMouseUp" | "onMouseMove" | "onClick" | "onDoubleClick" | "onMouseEnter" | "onMouseLeave" | "onMouseOut" | "onMouseOver" | "onDrag" | "onDragEnd" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDragStart" | "onDrop" | "onKeyDown" | "onKeyPress" | "onKeyUp" | "onChange" | "onInput" | "onInvalid" | "onSubmit" | "onTouchCancel" | "onTouchEnd" | "onTouchMove" | "onTouchStart" | "onFocus" | "onBlur" | "key"> & React.RefAttributes<unknown>>;
 export default Footnote;

dist/components/heading-large.d.ts

@@ -53,3 +53,3 @@ import * as React from "react";
     tag?: string | undefined;
-} & React.RefAttributes<unknown>, "style" | "title" | "children" | "key" | "htmlFor" | "className" | "id" | "lang" | "tabIndex" | "role" | "onFocus" | "onBlur" | "onChange" | "onInput" | "onSubmit" | "onInvalid" | "onKeyDown" | "onKeyPress" | "onKeyUp" | "onClick" | "onDoubleClick" | "onDrag" | "onDragEnd" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDragStart" | "onDrop" | "onMouseDown" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseOut" | "onMouseOver" | "onMouseUp" | "onTouchCancel" | "onTouchEnd" | "onTouchMove" | "onTouchStart" | keyof import("../../../wonder-blocks-core/src/util/aria-types").AriaAttributes | "tag" | "testId" | "data-modal-launcher-portal" | "data-placement"> & React.RefAttributes<unknown>>;
+} & React.RefAttributes<unknown>, keyof import("../../../wonder-blocks-core/src/util/aria-types").AriaAttributes | "role" | "style" | "title" | "children" | "tag" | "testId" | "lang" | "className" | "htmlFor" | "tabIndex" | "id" | "data-modal-launcher-portal" | "data-placement" | "onMouseDown" | "onMouseUp" | "onMouseMove" | "onClick" | "onDoubleClick" | "onMouseEnter" | "onMouseLeave" | "onMouseOut" | "onMouseOver" | "onDrag" | "onDragEnd" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDragStart" | "onDrop" | "onKeyDown" | "onKeyPress" | "onKeyUp" | "onChange" | "onInput" | "onInvalid" | "onSubmit" | "onTouchCancel" | "onTouchEnd" | "onTouchMove" | "onTouchStart" | "onFocus" | "onBlur" | "key"> & React.RefAttributes<unknown>>;
 export default HeadingLarge;

dist/components/heading-medium.d.ts

@@ -53,3 +53,3 @@ import * as React from "react";
     tag?: string | undefined;
-} & React.RefAttributes<unknown>, "style" | "title" | "children" | "key" | "htmlFor" | "className" | "id" | "lang" | "tabIndex" | "role" | "onFocus" | "onBlur" | "onChange" | "onInput" | "onSubmit" | "onInvalid" | "onKeyDown" | "onKeyPress" | "onKeyUp" | "onClick" | "onDoubleClick" | "onDrag" | "onDragEnd" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDragStart" | "onDrop" | "onMouseDown" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseOut" | "onMouseOver" | "onMouseUp" | "onTouchCancel" | "onTouchEnd" | "onTouchMove" | "onTouchStart" | keyof import("../../../wonder-blocks-core/src/util/aria-types").AriaAttributes | "tag" | "testId" | "data-modal-launcher-portal" | "data-placement"> & React.RefAttributes<unknown>>;
+} & React.RefAttributes<unknown>, keyof import("../../../wonder-blocks-core/src/util/aria-types").AriaAttributes | "role" | "style" | "title" | "children" | "tag" | "testId" | "lang" | "className" | "htmlFor" | "tabIndex" | "id" | "data-modal-launcher-portal" | "data-placement" | "onMouseDown" | "onMouseUp" | "onMouseMove" | "onClick" | "onDoubleClick" | "onMouseEnter" | "onMouseLeave" | "onMouseOut" | "onMouseOver" | "onDrag" | "onDragEnd" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDragStart" | "onDrop" | "onKeyDown" | "onKeyPress" | "onKeyUp" | "onChange" | "onInput" | "onInvalid" | "onSubmit" | "onTouchCancel" | "onTouchEnd" | "onTouchMove" | "onTouchStart" | "onFocus" | "onBlur" | "key"> & React.RefAttributes<unknown>>;
 export default HeadingMedium;

dist/components/heading-small.d.ts

@@ -53,3 +53,3 @@ import * as React from "react";
     tag?: string | undefined;
-} & React.RefAttributes<unknown>, "style" | "title" | "children" | "key" | "htmlFor" | "className" | "id" | "lang" | "tabIndex" | "role" | "onFocus" | "onBlur" | "onChange" | "onInput" | "onSubmit" | "onInvalid" | "onKeyDown" | "onKeyPress" | "onKeyUp" | "onClick" | "onDoubleClick" | "onDrag" | "onDragEnd" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDragStart" | "onDrop" | "onMouseDown" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseOut" | "onMouseOver" | "onMouseUp" | "onTouchCancel" | "onTouchEnd" | "onTouchMove" | "onTouchStart" | keyof import("../../../wonder-blocks-core/src/util/aria-types").AriaAttributes | "tag" | "testId" | "data-modal-launcher-portal" | "data-placement"> & React.RefAttributes<unknown>>;
+} & React.RefAttributes<unknown>, keyof import("../../../wonder-blocks-core/src/util/aria-types").AriaAttributes | "role" | "style" | "title" | "children" | "tag" | "testId" | "lang" | "className" | "htmlFor" | "tabIndex" | "id" | "data-modal-launcher-portal" | "data-placement" | "onMouseDown" | "onMouseUp" | "onMouseMove" | "onClick" | "onDoubleClick" | "onMouseEnter" | "onMouseLeave" | "onMouseOut" | "onMouseOver" | "onDrag" | "onDragEnd" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDragStart" | "onDrop" | "onKeyDown" | "onKeyPress" | "onKeyUp" | "onChange" | "onInput" | "onInvalid" | "onSubmit" | "onTouchCancel" | "onTouchEnd" | "onTouchMove" | "onTouchStart" | "onFocus" | "onBlur" | "key"> & React.RefAttributes<unknown>>;
 export default HeadingSmall;

dist/components/heading-xsmall.d.ts

@@ -53,3 +53,3 @@ import * as React from "react";
     tag?: string | undefined;
-} & React.RefAttributes<unknown>, "style" | "title" | "children" | "key" | "htmlFor" | "className" | "id" | "lang" | "tabIndex" | "role" | "onFocus" | "onBlur" | "onChange" | "onInput" | "onSubmit" | "onInvalid" | "onKeyDown" | "onKeyPress" | "onKeyUp" | "onClick" | "onDoubleClick" | "onDrag" | "onDragEnd" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDragStart" | "onDrop" | "onMouseDown" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseOut" | "onMouseOver" | "onMouseUp" | "onTouchCancel" | "onTouchEnd" | "onTouchMove" | "onTouchStart" | keyof import("../../../wonder-blocks-core/src/util/aria-types").AriaAttributes | "tag" | "testId" | "data-modal-launcher-portal" | "data-placement"> & React.RefAttributes<unknown>>;
+} & React.RefAttributes<unknown>, keyof import("../../../wonder-blocks-core/src/util/aria-types").AriaAttributes | "role" | "style" | "title" | "children" | "tag" | "testId" | "lang" | "className" | "htmlFor" | "tabIndex" | "id" | "data-modal-launcher-portal" | "data-placement" | "onMouseDown" | "onMouseUp" | "onMouseMove" | "onClick" | "onDoubleClick" | "onMouseEnter" | "onMouseLeave" | "onMouseOut" | "onMouseOver" | "onDrag" | "onDragEnd" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDragStart" | "onDrop" | "onKeyDown" | "onKeyPress" | "onKeyUp" | "onChange" | "onInput" | "onInvalid" | "onSubmit" | "onTouchCancel" | "onTouchEnd" | "onTouchMove" | "onTouchStart" | "onFocus" | "onBlur" | "key"> & React.RefAttributes<unknown>>;
 export default HeadingXSmall;

dist/components/label-large.d.ts

@@ -53,3 +53,3 @@ import * as React from "react";
     tag?: string | undefined;
-} & React.RefAttributes<unknown>, "style" | "title" | "children" | "key" | "htmlFor" | "className" | "id" | "lang" | "tabIndex" | "role" | "onFocus" | "onBlur" | "onChange" | "onInput" | "onSubmit" | "onInvalid" | "onKeyDown" | "onKeyPress" | "onKeyUp" | "onClick" | "onDoubleClick" | "onDrag" | "onDragEnd" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDragStart" | "onDrop" | "onMouseDown" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseOut" | "onMouseOver" | "onMouseUp" | "onTouchCancel" | "onTouchEnd" | "onTouchMove" | "onTouchStart" | keyof import("../../../wonder-blocks-core/src/util/aria-types").AriaAttributes | "tag" | "testId" | "data-modal-launcher-portal" | "data-placement"> & React.RefAttributes<unknown>>;
+} & React.RefAttributes<unknown>, keyof import("../../../wonder-blocks-core/src/util/aria-types").AriaAttributes | "role" | "style" | "title" | "children" | "tag" | "testId" | "lang" | "className" | "htmlFor" | "tabIndex" | "id" | "data-modal-launcher-portal" | "data-placement" | "onMouseDown" | "onMouseUp" | "onMouseMove" | "onClick" | "onDoubleClick" | "onMouseEnter" | "onMouseLeave" | "onMouseOut" | "onMouseOver" | "onDrag" | "onDragEnd" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDragStart" | "onDrop" | "onKeyDown" | "onKeyPress" | "onKeyUp" | "onChange" | "onInput" | "onInvalid" | "onSubmit" | "onTouchCancel" | "onTouchEnd" | "onTouchMove" | "onTouchStart" | "onFocus" | "onBlur" | "key"> & React.RefAttributes<unknown>>;
 export default LabelLarge;

dist/components/label-medium.d.ts

@@ -53,3 +53,3 @@ import * as React from "react";
     tag?: string | undefined;
-} & React.RefAttributes<unknown>, "style" | "title" | "children" | "key" | "htmlFor" | "className" | "id" | "lang" | "tabIndex" | "role" | "onFocus" | "onBlur" | "onChange" | "onInput" | "onSubmit" | "onInvalid" | "onKeyDown" | "onKeyPress" | "onKeyUp" | "onClick" | "onDoubleClick" | "onDrag" | "onDragEnd" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDragStart" | "onDrop" | "onMouseDown" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseOut" | "onMouseOver" | "onMouseUp" | "onTouchCancel" | "onTouchEnd" | "onTouchMove" | "onTouchStart" | keyof import("../../../wonder-blocks-core/src/util/aria-types").AriaAttributes | "tag" | "testId" | "data-modal-launcher-portal" | "data-placement"> & React.RefAttributes<unknown>>;
+} & React.RefAttributes<unknown>, keyof import("../../../wonder-blocks-core/src/util/aria-types").AriaAttributes | "role" | "style" | "title" | "children" | "tag" | "testId" | "lang" | "className" | "htmlFor" | "tabIndex" | "id" | "data-modal-launcher-portal" | "data-placement" | "onMouseDown" | "onMouseUp" | "onMouseMove" | "onClick" | "onDoubleClick" | "onMouseEnter" | "onMouseLeave" | "onMouseOut" | "onMouseOver" | "onDrag" | "onDragEnd" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDragStart" | "onDrop" | "onKeyDown" | "onKeyPress" | "onKeyUp" | "onChange" | "onInput" | "onInvalid" | "onSubmit" | "onTouchCancel" | "onTouchEnd" | "onTouchMove" | "onTouchStart" | "onFocus" | "onBlur" | "key"> & React.RefAttributes<unknown>>;
 export default LabelMedium;

dist/components/label-small.d.ts

@@ -53,3 +53,3 @@ import * as React from "react";
     tag?: string | undefined;
-} & React.RefAttributes<unknown>, "style" | "title" | "children" | "key" | "htmlFor" | "className" | "id" | "lang" | "tabIndex" | "role" | "onFocus" | "onBlur" | "onChange" | "onInput" | "onSubmit" | "onInvalid" | "onKeyDown" | "onKeyPress" | "onKeyUp" | "onClick" | "onDoubleClick" | "onDrag" | "onDragEnd" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDragStart" | "onDrop" | "onMouseDown" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseOut" | "onMouseOver" | "onMouseUp" | "onTouchCancel" | "onTouchEnd" | "onTouchMove" | "onTouchStart" | keyof import("../../../wonder-blocks-core/src/util/aria-types").AriaAttributes | "tag" | "testId" | "data-modal-launcher-portal" | "data-placement"> & React.RefAttributes<unknown>>;
+} & React.RefAttributes<unknown>, keyof import("../../../wonder-blocks-core/src/util/aria-types").AriaAttributes | "role" | "style" | "title" | "children" | "tag" | "testId" | "lang" | "className" | "htmlFor" | "tabIndex" | "id" | "data-modal-launcher-portal" | "data-placement" | "onMouseDown" | "onMouseUp" | "onMouseMove" | "onClick" | "onDoubleClick" | "onMouseEnter" | "onMouseLeave" | "onMouseOut" | "onMouseOver" | "onDrag" | "onDragEnd" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDragStart" | "onDrop" | "onKeyDown" | "onKeyPress" | "onKeyUp" | "onChange" | "onInput" | "onInvalid" | "onSubmit" | "onTouchCancel" | "onTouchEnd" | "onTouchMove" | "onTouchStart" | "onFocus" | "onBlur" | "key"> & React.RefAttributes<unknown>>;
 export default LabelSmall;

dist/components/label-xsmall.d.ts

@@ -53,3 +53,3 @@ import * as React from "react";
     tag?: string | undefined;
-} & React.RefAttributes<unknown>, "style" | "title" | "children" | "key" | "htmlFor" | "className" | "id" | "lang" | "tabIndex" | "role" | "onFocus" | "onBlur" | "onChange" | "onInput" | "onSubmit" | "onInvalid" | "onKeyDown" | "onKeyPress" | "onKeyUp" | "onClick" | "onDoubleClick" | "onDrag" | "onDragEnd" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDragStart" | "onDrop" | "onMouseDown" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseOut" | "onMouseOver" | "onMouseUp" | "onTouchCancel" | "onTouchEnd" | "onTouchMove" | "onTouchStart" | keyof import("../../../wonder-blocks-core/src/util/aria-types").AriaAttributes | "tag" | "testId" | "data-modal-launcher-portal" | "data-placement"> & React.RefAttributes<unknown>>;
+} & React.RefAttributes<unknown>, keyof import("../../../wonder-blocks-core/src/util/aria-types").AriaAttributes | "role" | "style" | "title" | "children" | "tag" | "testId" | "lang" | "className" | "htmlFor" | "tabIndex" | "id" | "data-modal-launcher-portal" | "data-placement" | "onMouseDown" | "onMouseUp" | "onMouseMove" | "onClick" | "onDoubleClick" | "onMouseEnter" | "onMouseLeave" | "onMouseOut" | "onMouseOver" | "onDrag" | "onDragEnd" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDragStart" | "onDrop" | "onKeyDown" | "onKeyPress" | "onKeyUp" | "onChange" | "onInput" | "onInvalid" | "onSubmit" | "onTouchCancel" | "onTouchEnd" | "onTouchMove" | "onTouchStart" | "onFocus" | "onBlur" | "key"> & React.RefAttributes<unknown>>;
 export default LabelXSmall;

dist/components/tagline.d.ts

@@ -53,3 +53,3 @@ import * as React from "react";
     tag?: string | undefined;
-} & React.RefAttributes<unknown>, "style" | "title" | "children" | "key" | "htmlFor" | "className" | "id" | "lang" | "tabIndex" | "role" | "onFocus" | "onBlur" | "onChange" | "onInput" | "onSubmit" | "onInvalid" | "onKeyDown" | "onKeyPress" | "onKeyUp" | "onClick" | "onDoubleClick" | "onDrag" | "onDragEnd" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDragStart" | "onDrop" | "onMouseDown" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseOut" | "onMouseOver" | "onMouseUp" | "onTouchCancel" | "onTouchEnd" | "onTouchMove" | "onTouchStart" | keyof import("../../../wonder-blocks-core/src/util/aria-types").AriaAttributes | "tag" | "testId" | "data-modal-launcher-portal" | "data-placement"> & React.RefAttributes<unknown>>;
+} & React.RefAttributes<unknown>, keyof import("../../../wonder-blocks-core/src/util/aria-types").AriaAttributes | "role" | "style" | "title" | "children" | "tag" | "testId" | "lang" | "className" | "htmlFor" | "tabIndex" | "id" | "data-modal-launcher-portal" | "data-placement" | "onMouseDown" | "onMouseUp" | "onMouseMove" | "onClick" | "onDoubleClick" | "onMouseEnter" | "onMouseLeave" | "onMouseOut" | "onMouseOver" | "onDrag" | "onDragEnd" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDragStart" | "onDrop" | "onKeyDown" | "onKeyPress" | "onKeyUp" | "onChange" | "onInput" | "onInvalid" | "onSubmit" | "onTouchCancel" | "onTouchEnd" | "onTouchMove" | "onTouchStart" | "onFocus" | "onBlur" | "key"> & React.RefAttributes<unknown>>;
 export default Tagline;

dist/components/title.d.ts

@@ -53,3 +53,3 @@ import * as React from "react";
     tag?: string | undefined;
-} & React.RefAttributes<unknown>, "style" | "title" | "children" | "key" | "htmlFor" | "className" | "id" | "lang" | "tabIndex" | "role" | "onFocus" | "onBlur" | "onChange" | "onInput" | "onSubmit" | "onInvalid" | "onKeyDown" | "onKeyPress" | "onKeyUp" | "onClick" | "onDoubleClick" | "onDrag" | "onDragEnd" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDragStart" | "onDrop" | "onMouseDown" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseOut" | "onMouseOver" | "onMouseUp" | "onTouchCancel" | "onTouchEnd" | "onTouchMove" | "onTouchStart" | keyof import("../../../wonder-blocks-core/src/util/aria-types").AriaAttributes | "tag" | "testId" | "data-modal-launcher-portal" | "data-placement"> & React.RefAttributes<unknown>>;
+} & React.RefAttributes<unknown>, keyof import("../../../wonder-blocks-core/src/util/aria-types").AriaAttributes | "role" | "style" | "title" | "children" | "tag" | "testId" | "lang" | "className" | "htmlFor" | "tabIndex" | "id" | "data-modal-launcher-portal" | "data-placement" | "onMouseDown" | "onMouseUp" | "onMouseMove" | "onClick" | "onDoubleClick" | "onMouseEnter" | "onMouseLeave" | "onMouseOut" | "onMouseOver" | "onDrag" | "onDragEnd" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDragStart" | "onDrop" | "onKeyDown" | "onKeyPress" | "onKeyUp" | "onChange" | "onInput" | "onInvalid" | "onSubmit" | "onTouchCancel" | "onTouchEnd" | "onTouchMove" | "onTouchStart" | "onFocus" | "onBlur" | "key"> & React.RefAttributes<unknown>>;
 export default Title;

dist/es/index.js

@@ -1,2 +0,2 @@
-import { StyleSheet } from 'aphrodite';
+import { css } from '@/styled-system/css';
 import * as React from 'react';
@@ -31,4 +31,4 @@ import { Text } from '@khanacademy/wonder-blocks-core';
 const InconsolataFamily = "Inconsolata, monospace";
-const styles = StyleSheet.create({
-  Title: _extends({}, common, {
+const styles = {
+  Title: css.raw(_extends({}, common, {
     fontFamily: SansFamily,
@@ -44,4 +44,4 @@ fontWeight: Black,
     }
-  }),
-  Tagline: _extends({}, common, {
+  })),
+  Tagline: css.raw(_extends({}, common, {
     fontFamily: SansFamily,
@@ -51,4 +51,4 @@ fontWeight: Regular,
     lineHeight: "24px"
-  }),
-  HeadingLarge: _extends({}, common, {
+  })),
+  HeadingLarge: css.raw(_extends({}, common, {
     fontFamily: SansFamily,
@@ -64,4 +64,4 @@ fontWeight: Bold,
     }
-  }),
-  HeadingMedium: _extends({}, common, {
+  })),
+  HeadingMedium: css.raw(_extends({}, common, {
     fontFamily: SansFamily,
@@ -77,4 +77,4 @@ fontWeight: Bold,
     }
-  }),
-  HeadingSmall: _extends({}, common, {
+  })),
+  HeadingSmall: css.raw(_extends({}, common, {
     fontFamily: SansFamily,
@@ -84,4 +84,4 @@ fontWeight: Bold,
     lineHeight: "24px"
-  }),
-  HeadingXSmall: _extends({}, common, {
+  })),
+  HeadingXSmall: css.raw(_extends({}, common, {
     fontFamily: SansFamily,
@@ -93,4 +93,4 @@ fontWeight: Bold,
     textTransform: "uppercase"
-  }),
-  BodySerifBlock: _extends({}, common, {
+  })),
+  BodySerifBlock: css.raw(_extends({}, common, {
     fontFamily: SerifFamily,
@@ -100,4 +100,4 @@ fontWeight: Regular,
     lineHeight: "28px"
-  }),
-  BodySerif: _extends({}, common, {
+  })),
+  BodySerif: css.raw(_extends({}, common, {
     fontFamily: SerifFamily,
@@ -107,4 +107,4 @@ fontWeight: Regular,
     lineHeight: "22px"
-  }),
-  BodyMonospace: _extends({}, common, {
+  })),
+  BodyMonospace: css.raw(_extends({}, common, {
     fontFamily: InconsolataFamily,
@@ -114,4 +114,4 @@ fontWeight: Regular,
     lineHeight: "22px"
-  }),
-  Body: _extends({}, common, {
+  })),
+  Body: css.raw(_extends({}, common, {
     fontFamily: SansFamily,
@@ -121,4 +121,4 @@ fontWeight: Regular,
     lineHeight: "22px"
-  }),
-  LabelLarge: _extends({}, common, {
+  })),
+  LabelLarge: css.raw(_extends({}, common, {
     fontFamily: SansFamily,
@@ -128,4 +128,4 @@ fontWeight: Bold,
     lineHeight: "20px"
-  }),
-  LabelMedium: _extends({}, common, {
+  })),
+  LabelMedium: css.raw(_extends({}, common, {
     fontFamily: SansFamily,
@@ -135,4 +135,4 @@ fontWeight: Regular,
     lineHeight: "20px"
-  }),
-  LabelSmall: _extends({}, common, {
+  })),
+  LabelSmall: css.raw(_extends({}, common, {
     fontFamily: SansFamily,
@@ -142,4 +142,4 @@ fontWeight: Regular,
     lineHeight: "18px"
-  }),
-  LabelXSmall: _extends({}, common, {
+  })),
+  LabelXSmall: css.raw(_extends({}, common, {
     fontFamily: SansFamily,
@@ -149,4 +149,4 @@ fontWeight: Regular,
     lineHeight: "16px"
-  }),
-  Caption: _extends({}, common, {
+  })),
+  Caption: css.raw(_extends({}, common, {
     fontFamily: SansFamily,
@@ -156,4 +156,4 @@ fontWeight: Regular,
     lineHeight: "20px"
-  }),
-  Footnote: _extends({}, common, {
+  })),
+  Footnote: css.raw(_extends({}, common, {
     fontFamily: SansFamily,
@@ -163,4 +163,4 @@ fontWeight: Regular,
     lineHeight: "18px"
-  })
-});
+  }))
+};
 
@@ -167,0 +167,0 @@ function _objectWithoutPropertiesLoose(source, excluded) {

dist/index.js

@@ -5,3 +5,3 @@ 'use strict';
 
-var aphrodite = require('aphrodite');
+var css = require('@/styled-system/css');
 var React = require('react');
@@ -56,4 +56,4 @@ var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
 const InconsolataFamily = "Inconsolata, monospace";
-const styles = aphrodite.StyleSheet.create({
-  Title: _extends({}, common, {
+const styles = {
+  Title: css.css.raw(_extends({}, common, {
     fontFamily: SansFamily,
@@ -69,4 +69,4 @@ fontWeight: Black,
     }
-  }),
-  Tagline: _extends({}, common, {
+  })),
+  Tagline: css.css.raw(_extends({}, common, {
     fontFamily: SansFamily,
@@ -76,4 +76,4 @@ fontWeight: Regular,
     lineHeight: "24px"
-  }),
-  HeadingLarge: _extends({}, common, {
+  })),
+  HeadingLarge: css.css.raw(_extends({}, common, {
     fontFamily: SansFamily,
@@ -89,4 +89,4 @@ fontWeight: Bold,
     }
-  }),
-  HeadingMedium: _extends({}, common, {
+  })),
+  HeadingMedium: css.css.raw(_extends({}, common, {
     fontFamily: SansFamily,
@@ -102,4 +102,4 @@ fontWeight: Bold,
     }
-  }),
-  HeadingSmall: _extends({}, common, {
+  })),
+  HeadingSmall: css.css.raw(_extends({}, common, {
     fontFamily: SansFamily,
@@ -109,4 +109,4 @@ fontWeight: Bold,
     lineHeight: "24px"
-  }),
-  HeadingXSmall: _extends({}, common, {
+  })),
+  HeadingXSmall: css.css.raw(_extends({}, common, {
     fontFamily: SansFamily,
@@ -118,4 +118,4 @@ fontWeight: Bold,
     textTransform: "uppercase"
-  }),
-  BodySerifBlock: _extends({}, common, {
+  })),
+  BodySerifBlock: css.css.raw(_extends({}, common, {
     fontFamily: SerifFamily,
@@ -125,4 +125,4 @@ fontWeight: Regular,
     lineHeight: "28px"
-  }),
-  BodySerif: _extends({}, common, {
+  })),
+  BodySerif: css.css.raw(_extends({}, common, {
     fontFamily: SerifFamily,
@@ -132,4 +132,4 @@ fontWeight: Regular,
     lineHeight: "22px"
-  }),
-  BodyMonospace: _extends({}, common, {
+  })),
+  BodyMonospace: css.css.raw(_extends({}, common, {
     fontFamily: InconsolataFamily,
@@ -139,4 +139,4 @@ fontWeight: Regular,
     lineHeight: "22px"
-  }),
-  Body: _extends({}, common, {
+  })),
+  Body: css.css.raw(_extends({}, common, {
     fontFamily: SansFamily,
@@ -146,4 +146,4 @@ fontWeight: Regular,
     lineHeight: "22px"
-  }),
-  LabelLarge: _extends({}, common, {
+  })),
+  LabelLarge: css.css.raw(_extends({}, common, {
     fontFamily: SansFamily,
@@ -153,4 +153,4 @@ fontWeight: Bold,
     lineHeight: "20px"
-  }),
-  LabelMedium: _extends({}, common, {
+  })),
+  LabelMedium: css.css.raw(_extends({}, common, {
     fontFamily: SansFamily,
@@ -160,4 +160,4 @@ fontWeight: Regular,
     lineHeight: "20px"
-  }),
-  LabelSmall: _extends({}, common, {
+  })),
+  LabelSmall: css.css.raw(_extends({}, common, {
     fontFamily: SansFamily,
@@ -167,4 +167,4 @@ fontWeight: Regular,
     lineHeight: "18px"
-  }),
-  LabelXSmall: _extends({}, common, {
+  })),
+  LabelXSmall: css.css.raw(_extends({}, common, {
     fontFamily: SansFamily,
@@ -174,4 +174,4 @@ fontWeight: Regular,
     lineHeight: "16px"
-  }),
-  Caption: _extends({}, common, {
+  })),
+  Caption: css.css.raw(_extends({}, common, {
     fontFamily: SansFamily,
@@ -181,4 +181,4 @@ fontWeight: Regular,
     lineHeight: "20px"
-  }),
-  Footnote: _extends({}, common, {
+  })),
+  Footnote: css.css.raw(_extends({}, common, {
     fontFamily: SansFamily,
@@ -188,4 +188,4 @@ fontWeight: Regular,
     lineHeight: "18px"
-  })
-});
+  }))
+};
 
@@ -192,0 +192,0 @@ function _objectWithoutPropertiesLoose(source, excluded) {

dist/util/styles.d.ts

@@ -1,3 +0,3 @@
-import type { StyleDeclaration } from "aphrodite";
-declare const styles: StyleDeclaration;
+import { SystemStyleObject } from "@/styled-system/types";
+declare const styles: Record<string, SystemStyleObject>;
 export { styles as default };

package.json

 {
   "name": "@khanacademy/wonder-blocks-typography",
-  "version": "0.0.0-PR2231-20240520192816",
+  "version": "0.0.0-PR2242-20240610182012",
   "design": "v2",
@@ -19,3 +19,3 @@ "publishConfig": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-core": "0.0.0-PR2231-20240520192816"
+    "@khanacademy/wonder-blocks-core": "0.0.0-PR2242-20240610182012"
   },
@@ -22,0 +22,0 @@ "peerDependencies": {

src/util/styles.ts

@@ -1,3 +0,5 @@
-import {StyleSheet} from "aphrodite";
-import type {StyleDeclaration} from "aphrodite";
+import {css} from "@/styled-system/css";
+import {SystemStyleObject} from "@/styled-system/types";
+// import {StyleSheet} from "aphrodite";
+// import type {StyleDeclaration} from "aphrodite";
 
@@ -20,4 +22,4 @@ const Regular = 400;
 
-const styles: StyleDeclaration = StyleSheet.create({
-    Title: {
+const styles: Record<string, SystemStyleObject> = {
+    Title: css.raw({
         ...common,
@@ -34,4 +36,4 @@ fontFamily: SansFamily,
         },
-    },
-    Tagline: {
+    }),
+    Tagline: css.raw({
         ...common,
@@ -42,4 +44,4 @@ fontFamily: SansFamily,
         lineHeight: "24px",
-    },
-    HeadingLarge: {
+    }),
+    HeadingLarge: css.raw({
         ...common,
@@ -56,4 +58,4 @@ fontFamily: SansFamily,
         },
-    },
-    HeadingMedium: {
+    }),
+    HeadingMedium: css.raw({
         ...common,
@@ -70,4 +72,4 @@ fontFamily: SansFamily,
         },
-    },
-    HeadingSmall: {
+    }),
+    HeadingSmall: css.raw({
         ...common,
@@ -78,4 +80,4 @@ fontFamily: SansFamily,
         lineHeight: "24px",
-    },
-    HeadingXSmall: {
+    }),
+    HeadingXSmall: css.raw({
         ...common,
@@ -88,4 +90,4 @@ fontFamily: SansFamily,
         textTransform: "uppercase",
-    },
-    BodySerifBlock: {
+    }),
+    BodySerifBlock: css.raw({
         ...common,
@@ -96,4 +98,4 @@ fontFamily: SerifFamily,
         lineHeight: "28px",
-    },
-    BodySerif: {
+    }),
+    BodySerif: css.raw({
         ...common,
@@ -104,4 +106,4 @@ fontFamily: SerifFamily,
         lineHeight: "22px",
-    },
-    BodyMonospace: {
+    }),
+    BodyMonospace: css.raw({
         ...common,
@@ -112,4 +114,4 @@ fontFamily: InconsolataFamily,
         lineHeight: "22px",
-    },
-    Body: {
+    }),
+    Body: css.raw({
         ...common,
@@ -120,4 +122,4 @@ fontFamily: SansFamily,
         lineHeight: "22px",
-    },
-    LabelLarge: {
+    }),
+    LabelLarge: css.raw({
         ...common,
@@ -128,4 +130,4 @@ fontFamily: SansFamily,
         lineHeight: "20px",
-    },
-    LabelMedium: {
+    }),
+    LabelMedium: css.raw({
         ...common,
@@ -136,4 +138,4 @@ fontFamily: SansFamily,
         lineHeight: "20px",
-    },
-    LabelSmall: {
+    }),
+    LabelSmall: css.raw({
         ...common,
@@ -144,4 +146,4 @@ fontFamily: SansFamily,
         lineHeight: "18px",
-    },
-    LabelXSmall: {
+    }),
+    LabelXSmall: css.raw({
         ...common,
@@ -152,4 +154,4 @@ fontFamily: SansFamily,
         lineHeight: "16px",
-    },
-    Caption: {
+    }),
+    Caption: css.raw({
         ...common,
@@ -160,4 +162,4 @@ fontFamily: SansFamily,
         lineHeight: "20px",
-    },
-    Footnote: {
+    }),
+    Footnote: css.raw({
         ...common,
@@ -168,5 +170,5 @@ fontFamily: SansFamily,
         lineHeight: "18px",
-    },
-});
+    }),
+};
 
 export {styles as default};

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

189821

increased by6.64%

Lines of code

2290

increased by0.09%

Dependency changes

• + Added@khanacademy/wonder-blocks-core@0.0.0-PR2242-20240610182012(transitive)

• - Removed@khanacademy/wonder-blocks-core@0.0.0-PR2231-20240520192816(transitive)

• Updated@khanacademy/wonder-blocks-core@0.0.0-PR2242-20240610182012