Add stub for match media for tests

src/Framer/Motion.js

@@ -1,5 +1,66 @@
 const framerMotion = require("framer-motion")
+const React = require("react")
+const Emotion = require("@emotion/core")
 
 exports.animatePresence = () => framerMotion.AnimatePresence
 
 exports.animateSharedLayout = () => framerMotion.AnimateSharedLayout
+
+const flattenDataProp = (props) => {
+    let data = null;
+    if (props._data != null) {
+        data = { _data: undefined };
+        Object.entries(props._data).forEach(function (entry) {
+            data["data-" + entry[0]] = entry[1];
+        });
+    }
+    let aria = null;
+    if (props._aria != null) {
+        aria = { _aria: undefined };
+        Object.entries(props._aria).forEach(function (entry) {
+            aria["aria-" + entry[0]] = entry[1];
+        });
+    }
+    if (data == null && aria == null) {
+        return props
+    } else if (aria == null) {
+        return Object.assign({}, props, data);
+    } else if (data == null) {
+        return Object.assign({}, props, aria)
+    } else {
+        return Object.assign({}, props, data, aria)
+    }
+};
+
+exports.motionElement_ = (component, props, areChildrenDynamic) => {
+    const args = [component, flattenDataProp(props)];
+    // const c = React.forwardRef((props, ref) =>
+    //  createElement(el)(flattenDataProp(props, ref))
+    // );
+    return React.createElement.apply(
+        null,
+        areChildrenDynamic || props.children == null
+            ? args
+            : args.concat(props.children)
+    );
+};
+
+exports.motionElementKeyed_ = (component, props) =>
+    exports.motionElement_(component, props, true);
+
+
+exports.styledMotionElement_ = (component, props, areChildrenDynamic) => {
+    const args = [component, flattenDataProp(props)];
+    // const c = React.forwardRef((props, ref) =>
+    //  createElement(el)(flattenDataProp(props, ref))
+    // );
+    return Emotion.jsx.apply(
+        null,
+        areChildrenDynamic || props.children == null
+            ? args
+            : args.concat(props.children)
+    );
+};
+
+exports.styledMotionElementKeyed_ = (component, props) =>
+    exports.styledMotionElement_(component, props, true);

src/Framer/Motion.purs

@@ -5,15 +5,21 @@ module Framer.Motion
   , animateSharedLayout
   , module Framer.Motion.Types
   , module Framer.Motion.MotionComponent
+  , element
+  , elementKeyed
+  , elementStyled
+  , elementStyledKeyed
   ) where
 
 import Prelude hiding (div, map, sub)
+import Data.Function.Uncurried (Fn2, runFn2)
+import Framer.Motion.MotionComponent (_data, abbr, address, area, article, aside, audio, b, base, bdi, bdo, blockquote, body, br, button, canvas, caption, circle, cite, clipPath, code, col, colgroup, custom, datalist, dd, defs, del, desc, details, dfn, dialog, div, dl, dt, ellipse, em, embed, feBlend, feColorMatrix, feComponentTransfer, feComposite, feConvolveMatrix, feDiffuseLighting, feDisplacementMap, feDistantLight, feDropShadow, feFlood, feFuncA, feFuncB, feFuncG, feFuncR, feGaussianBlur, feImage, feMerge, feMergeNode, feMorphology, feOffset, fePointLight, feSpecularLighting, feSpotLight, feTile, feTurbulence, fieldset, figcaption, figure, filter, footer, foreignObject, form, g, h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html, i, iframe, image, img, input, ins, kbd, keygen, label, legend, li, line, linearGradient, link, main, map, mark, marker, mask, menu, menuitem, meta, metadata, meter, motionComponentImpl, nav, noscript, object, ol, optgroup, option, output, p, param, path, pattern, picture, polygon, polyline, pre, progress, q, radialGradient, rect, rp, rt, ruby, s, samp, script, section, select, small, source, span, stop, strong, style, sub, summary, sup, svg, svgAnimate, svgSwitch, symbol, table, tbody, td, text, textPath, textarea, tfoot, th, thead, time, title, tr, track, tspan, u, ul, use, var, video, view, wbr)
 import Framer.Motion.Types (class EffectFnMaker, Animate, AnimatePresenceProps, AnimateSharedLayoutProps, AnimateSharedLayoutType(..), AnimationControls, BoundingBox2D, Drag, DragConstraints, DragElastic, DragMomentum, DragPropagation, EventInfo, Exit, Infinity, Initial, Layout, LayoutId, LayoutTransition, MakeVariantLabel(..), MotionProps, MotionPropsF, OnDrag, OnDragEnd, OnDragStart, OnHoverEnd, OnHoverStart, OnTap, OnTapCancel, OnTapEnd, OnTapStart, PanInfo, Point2D, TapInfo, Target(..), TargetAndTransition, Transition, VariantLabel(..), Variants, WhileHover, WhileTap, animate, boundingBox2D, callback, crossfade, customProp, drag, dragConstraints, dragElastic, dragMomentum, dragPropagation, exit, infinity, initial, layout, layoutId, makeVariantLabels, onDrag, onDragEnd, onDragStart, onHoverEnd, onHoverStart, onTap, onTapCancel, onTapEnd, onTapStart, prop, switch, toEffectFn, transition, variants, variantsFromObject, whileHover, whileTap)
 import Prim.Row (class Nub, class Union)
-import React.Basic (ReactComponent)
+import React.Basic (JSX, ReactComponent)
+import React.Basic.Emotion (Style)
 import Record (disjointUnion)
 import Untagged.Castable (class Castable, cast)
-import Framer.Motion.MotionComponent (_data, abbr, address, area, article, aside, audio, b, base, bdi, bdo, blockquote, body, br, button, canvas, caption, circle, cite, clipPath, code, col, colgroup, custom, datalist, dd, defs, del, desc, details, dfn, dialog, div, dl, dt, ellipse, em, embed, feBlend, feColorMatrix, feComponentTransfer, feComposite, feConvolveMatrix, feDiffuseLighting, feDisplacementMap, feDistantLight, feDropShadow, feFlood, feFuncA, feFuncB, feFuncG, feFuncR, feGaussianBlur, feImage, feMerge, feMergeNode, feMorphology, feOffset, fePointLight, feSpecularLighting, feSpotLight, feTile, feTurbulence, fieldset, figcaption, figure, filter, footer, foreignObject, form, g, h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html, i, iframe, image, img, input, ins, kbd, keygen, label, legend, li, line, linearGradient, link, main, map, mark, marker, mask, menu, menuitem, meta, metadata, meter, motionComponentImpl, nav, noscript, object, ol, optgroup, option, output, p, param, path, pattern, picture, polygon, polyline, pre, progress, q, radialGradient, rect, rp, rt, ruby, s, samp, script, section, select, small, source, span, stop, strong, style, sub, summary, sup, svg, svgAnimate, svgSwitch, symbol, table, tbody, td, text, textPath, textarea, tfoot, th, thead, time, title, tr, track, tspan, u, ul, use, var, video, view, wbr)
 
 withMotion ∷
   ∀ result baseProps motionSubset.
@@ -34,3 +40,48 @@ foreign import animateSharedLayout ∷
   ∀ attrs attrs_.
   Union attrs attrs_ AnimateSharedLayoutProps =>
   ReactComponent { | attrs }
+
+element ∷ ∀ p. ReactComponent { | p } -> { | p } -> JSX
+element = runFn2 motionElement_
+
+foreign import motionElement_ ∷
+  ∀ props. Fn2 (ReactComponent { | props }) { | props } JSX
+
+elementKeyed ∷
+  ∀ props.
+  ReactComponent { | MotionProps props } ->
+  { key ∷ String | MotionProps props } ->
+  JSX
+elementKeyed = runFn2 motionElementKeyed_
+
+foreign import motionElementKeyed_ ∷
+  ∀ props.
+  Fn2 (ReactComponent { | MotionProps props })
+    { key ∷ String | MotionProps props }
+    JSX
+
+elementStyled ∷
+  ∀ props.
+  ReactComponent { className ∷ String | props } ->
+  { className ∷ String, css ∷ Style | props } ->
+  JSX
+elementStyled = runFn2 styledMotionElement_
+
+foreign import styledMotionElement_ ∷
+  ∀ props.
+  Fn2 (ReactComponent { className ∷ String | props })
+    { className ∷ String, css ∷ Style | props }
+    JSX
+
+elementStyledKeyed ∷
+  ∀ props.
+  ReactComponent { className ∷ String | props } ->
+  { className ∷ String, css ∷ Style, key ∷ String | props } ->
+  JSX
+elementStyledKeyed = runFn2 styledMotionElementKeyed_
+
+foreign import styledMotionElementKeyed_ ∷
+  ∀ props.
+  Fn2 (ReactComponent { className ∷ String | props })
+    { className ∷ String, css ∷ Style, key ∷ String | props }
+    JSX

src/Framer/Motion/MotionComponent.purs

@@ -16,506 +16,506 @@ foreign import custom ∷
   Effect (ReactComponent { | MotionProps old })
 
 -- DOM
-abbr :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_abbr) => ReactComponent { | attrs }
+abbr ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_abbr) => ReactComponent { | attrs }
 abbr = motionComponentImpl "abbr"
 
-address :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_address) => ReactComponent { | attrs }
+address ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_address) => ReactComponent { | attrs }
 address = motionComponentImpl "address"
 
-area :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_area) => ReactComponent { | attrs }
+area ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_area) => ReactComponent { | attrs }
 area = motionComponentImpl "area"
 
-article :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_article) => ReactComponent { | attrs }
+article ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_article) => ReactComponent { | attrs }
 article = motionComponentImpl "article"
 
-aside :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_aside) => ReactComponent { | attrs }
+aside ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_aside) => ReactComponent { | attrs }
 aside = motionComponentImpl "aside"
 
-audio :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_audio) => ReactComponent { | attrs }
+audio ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_audio) => ReactComponent { | attrs }
 audio = motionComponentImpl "audio"
 
-b :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_b) => ReactComponent { | attrs }
+b ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_b) => ReactComponent { | attrs }
 b = motionComponentImpl "b"
 
-base :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_base) => ReactComponent { | attrs }
+base ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_base) => ReactComponent { | attrs }
 base = motionComponentImpl "base"
 
-bdi :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_bdi) => ReactComponent { | attrs }
+bdi ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_bdi) => ReactComponent { | attrs }
 bdi = motionComponentImpl "bdi"
 
-bdo :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_bdo) => ReactComponent { | attrs }
+bdo ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_bdo) => ReactComponent { | attrs }
 bdo = motionComponentImpl "bdo"
 
 -- No support in React Basic Hooks
 -- big :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_big) => ReactComponent { | attrs }
 -- big = motionComponentImpl "big"
-blockquote :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_blockquote) => ReactComponent { | attrs }
+blockquote ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_blockquote) => ReactComponent { | attrs }
 blockquote = motionComponentImpl "blockquote"
 
-body :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_body) => ReactComponent { | attrs }
+body ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_body) => ReactComponent { | attrs }
 body = motionComponentImpl "body"
 
-br :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_br) => ReactComponent { | attrs }
+br ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_br) => ReactComponent { | attrs }
 br = motionComponentImpl "br"
 
-button :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_button) => ReactComponent { | attrs }
+button ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_button) => ReactComponent { | attrs }
 button = motionComponentImpl "button"
 
-canvas :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_canvas) => ReactComponent { | attrs }
+canvas ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_canvas) => ReactComponent { | attrs }
 canvas = motionComponentImpl "canvas"
 
-caption :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_caption) => ReactComponent { | attrs }
+caption ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_caption) => ReactComponent { | attrs }
 caption = motionComponentImpl "caption"
 
-cite :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_cite) => ReactComponent { | attrs }
+cite ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_cite) => ReactComponent { | attrs }
 cite = motionComponentImpl "cite"
 
-code :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_code) => ReactComponent { | attrs }
+code ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_code) => ReactComponent { | attrs }
 code = motionComponentImpl "code"
 
-col :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_col) => ReactComponent { | attrs }
+col ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_col) => ReactComponent { | attrs }
 col = motionComponentImpl "col"
 
-colgroup :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_colgroup) => ReactComponent { | attrs }
+colgroup ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_colgroup) => ReactComponent { | attrs }
 colgroup = motionComponentImpl "colgroup"
 
-_data :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_data) => ReactComponent { | attrs }
+_data ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_data) => ReactComponent { | attrs }
 _data = motionComponentImpl "data"
 
-datalist :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_datalist) => ReactComponent { | attrs }
+datalist ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_datalist) => ReactComponent { | attrs }
 datalist = motionComponentImpl "datalist"
 
-dd :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_dd) => ReactComponent { | attrs }
+dd ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_dd) => ReactComponent { | attrs }
 dd = motionComponentImpl "dd"
 
-del :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_del) => ReactComponent { | attrs }
+del ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_del) => ReactComponent { | attrs }
 del = motionComponentImpl "del"
 
-details :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_details) => ReactComponent { | attrs }
+details ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_details) => ReactComponent { | attrs }
 details = motionComponentImpl "details"
 
-dfn :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_dfn) => ReactComponent { | attrs }
+dfn ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_dfn) => ReactComponent { | attrs }
 dfn = motionComponentImpl "dfn"
 
-dialog :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_dialog) => ReactComponent { | attrs }
+dialog ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_dialog) => ReactComponent { | attrs }
 dialog = motionComponentImpl "dialog"
 
-div :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_div) => ReactComponent { | attrs }
+div ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_div) => ReactComponent { | attrs }
 div = motionComponentImpl "div"
 
-dl :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_dl) => ReactComponent { | attrs }
+dl ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_dl) => ReactComponent { | attrs }
 dl = motionComponentImpl "dl"
 
-dt :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_dt) => ReactComponent { | attrs }
+dt ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_dt) => ReactComponent { | attrs }
 dt = motionComponentImpl "dt"
 
-em :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_em) => ReactComponent { | attrs }
+em ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_em) => ReactComponent { | attrs }
 em = motionComponentImpl "em"
 
-embed :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_embed) => ReactComponent { | attrs }
+embed ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_embed) => ReactComponent { | attrs }
 embed = motionComponentImpl "embed"
 
-fieldset :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_fieldset) => ReactComponent { | attrs }
+fieldset ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_fieldset) => ReactComponent { | attrs }
 fieldset = motionComponentImpl "fieldset"
 
-figcaption :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_figcaption) => ReactComponent { | attrs }
+figcaption ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_figcaption) => ReactComponent { | attrs }
 figcaption = motionComponentImpl "figcaption"
 
-figure :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_figure) => ReactComponent { | attrs }
+figure ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_figure) => ReactComponent { | attrs }
 figure = motionComponentImpl "figure"
 
-footer :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_footer) => ReactComponent { | attrs }
+footer ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_footer) => ReactComponent { | attrs }
 footer = motionComponentImpl "footer"
 
-form :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_form) => ReactComponent { | attrs }
+form ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_form) => ReactComponent { | attrs }
 form = motionComponentImpl "form"
 
-h1 :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_h1) => ReactComponent { | attrs }
+h1 ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_h1) => ReactComponent { | attrs }
 h1 = motionComponentImpl "h1"
 
-h2 :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_h2) => ReactComponent { | attrs }
+h2 ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_h2) => ReactComponent { | attrs }
 h2 = motionComponentImpl "h2"
 
-h3 :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_h3) => ReactComponent { | attrs }
+h3 ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_h3) => ReactComponent { | attrs }
 h3 = motionComponentImpl "h3"
 
-h4 :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_h4) => ReactComponent { | attrs }
+h4 ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_h4) => ReactComponent { | attrs }
 h4 = motionComponentImpl "h4"
 
-h5 :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_h5) => ReactComponent { | attrs }
+h5 ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_h5) => ReactComponent { | attrs }
 h5 = motionComponentImpl "h5"
 
-h6 :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_h6) => ReactComponent { | attrs }
+h6 ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_h6) => ReactComponent { | attrs }
 h6 = motionComponentImpl "h6"
 
-head :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_head) => ReactComponent { | attrs }
+head ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_head) => ReactComponent { | attrs }
 head = motionComponentImpl "head"
 
-header :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_header) => ReactComponent { | attrs }
+header ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_header) => ReactComponent { | attrs }
 header = motionComponentImpl "header"
 
-hgroup :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_hgroup) => ReactComponent { | attrs }
+hgroup ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_hgroup) => ReactComponent { | attrs }
 hgroup = motionComponentImpl "hgroup"
 
-hr :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_hr) => ReactComponent { | attrs }
+hr ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_hr) => ReactComponent { | attrs }
 hr = motionComponentImpl "hr"
 
-html :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_html) => ReactComponent { | attrs }
+html ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_html) => ReactComponent { | attrs }
 html = motionComponentImpl "html"
 
-i :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_i) => ReactComponent { | attrs }
+i ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_i) => ReactComponent { | attrs }
 i = motionComponentImpl "i"
 
-iframe :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_iframe) => ReactComponent { | attrs }
+iframe ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_iframe) => ReactComponent { | attrs }
 iframe = motionComponentImpl "iframe"
 
-img :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_img) => ReactComponent { | attrs }
+img ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_img) => ReactComponent { | attrs }
 img = motionComponentImpl "img"
 
-input :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_input) => ReactComponent { | attrs }
+input ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_input) => ReactComponent { | attrs }
 input = motionComponentImpl "input"
 
-ins :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_ins) => ReactComponent { | attrs }
+ins ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_ins) => ReactComponent { | attrs }
 ins = motionComponentImpl "ins"
 
-kbd :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_kbd) => ReactComponent { | attrs }
+kbd ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_kbd) => ReactComponent { | attrs }
 kbd = motionComponentImpl "kbd"
 
-keygen :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_keygen) => ReactComponent { | attrs }
+keygen ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_keygen) => ReactComponent { | attrs }
 keygen = motionComponentImpl "keygen"
 
-label :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_label) => ReactComponent { | attrs }
+label ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_label) => ReactComponent { | attrs }
 label = motionComponentImpl "label"
 
-legend :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_legend) => ReactComponent { | attrs }
+legend ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_legend) => ReactComponent { | attrs }
 legend = motionComponentImpl "legend"
 
-li :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_li) => ReactComponent { | attrs }
+li ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_li) => ReactComponent { | attrs }
 li = motionComponentImpl "li"
 
-link :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_link) => ReactComponent { | attrs }
+link ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_link) => ReactComponent { | attrs }
 link = motionComponentImpl "link"
 
-main :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_main) => ReactComponent { | attrs }
+main ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_main) => ReactComponent { | attrs }
 main = motionComponentImpl "main"
 
-map :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_map) => ReactComponent { | attrs }
+map ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_map) => ReactComponent { | attrs }
 map = motionComponentImpl "map"
 
-mark :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_mark) => ReactComponent { | attrs }
+mark ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_mark) => ReactComponent { | attrs }
 mark = motionComponentImpl "mark"
 
-menu :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_menu) => ReactComponent { | attrs }
+menu ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_menu) => ReactComponent { | attrs }
 menu = motionComponentImpl "menu"
 
-menuitem :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_menuitem) => ReactComponent { | attrs }
+menuitem ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_menuitem) => ReactComponent { | attrs }
 menuitem = motionComponentImpl "menuitem"
 
-meta :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_meta) => ReactComponent { | attrs }
+meta ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_meta) => ReactComponent { | attrs }
 meta = motionComponentImpl "meta"
 
-meter :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_meter) => ReactComponent { | attrs }
+meter ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_meter) => ReactComponent { | attrs }
 meter = motionComponentImpl "meter"
 
-nav :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_nav) => ReactComponent { | attrs }
+nav ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_nav) => ReactComponent { | attrs }
 nav = motionComponentImpl "nav"
 
-noscript :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_noscript) => ReactComponent { | attrs }
+noscript ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_noscript) => ReactComponent { | attrs }
 noscript = motionComponentImpl "noscript"
 
-object :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_object) => ReactComponent { | attrs }
+object ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_object) => ReactComponent { | attrs }
 object = motionComponentImpl "object"
 
-ol :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_ol) => ReactComponent { | attrs }
+ol ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_ol) => ReactComponent { | attrs }
 ol = motionComponentImpl "ol"
 
-optgroup :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_optgroup) => ReactComponent { | attrs }
+optgroup ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_optgroup) => ReactComponent { | attrs }
 optgroup = motionComponentImpl "optgroup"
 
-option :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_option) => ReactComponent { | attrs }
+option ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_option) => ReactComponent { | attrs }
 option = motionComponentImpl "option"
 
-output :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_output) => ReactComponent { | attrs }
+output ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_output) => ReactComponent { | attrs }
 output = motionComponentImpl "output"
 
-p :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_p) => ReactComponent { | attrs }
+p ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_p) => ReactComponent { | attrs }
 p = motionComponentImpl "p"
 
-param :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_param) => ReactComponent { | attrs }
+param ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_param) => ReactComponent { | attrs }
 param = motionComponentImpl "param"
 
-picture :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_picture) => ReactComponent { | attrs }
+picture ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_picture) => ReactComponent { | attrs }
 picture = motionComponentImpl "picture"
 
-pre :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_pre) => ReactComponent { | attrs }
+pre ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_pre) => ReactComponent { | attrs }
 pre = motionComponentImpl "pre"
 
-progress :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_progress) => ReactComponent { | attrs }
+progress ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_progress) => ReactComponent { | attrs }
 progress = motionComponentImpl "progress"
 
-q :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_q) => ReactComponent { | attrs }
+q ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_q) => ReactComponent { | attrs }
 q = motionComponentImpl "q"
 
-rp :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_rp) => ReactComponent { | attrs }
+rp ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_rp) => ReactComponent { | attrs }
 rp = motionComponentImpl "rp"
 
-rt :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_rt) => ReactComponent { | attrs }
+rt ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_rt) => ReactComponent { | attrs }
 rt = motionComponentImpl "rt"
 
-ruby :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_ruby) => ReactComponent { | attrs }
+ruby ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_ruby) => ReactComponent { | attrs }
 ruby = motionComponentImpl "ruby"
 
-s :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_s) => ReactComponent { | attrs }
+s ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_s) => ReactComponent { | attrs }
 s = motionComponentImpl "s"
 
-samp :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_samp) => ReactComponent { | attrs }
+samp ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_samp) => ReactComponent { | attrs }
 samp = motionComponentImpl "samp"
 
-script :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_script) => ReactComponent { | attrs }
+script ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_script) => ReactComponent { | attrs }
 script = motionComponentImpl "script"
 
-section :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_section) => ReactComponent { | attrs }
+section ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_section) => ReactComponent { | attrs }
 section = motionComponentImpl "section"
 
-select :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_select) => ReactComponent { | attrs }
+select ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_select) => ReactComponent { | attrs }
 select = motionComponentImpl "select"
 
-small :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_small) => ReactComponent { | attrs }
+small ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_small) => ReactComponent { | attrs }
 small = motionComponentImpl "small"
 
-source :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_source) => ReactComponent { | attrs }
+source ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_source) => ReactComponent { | attrs }
 source = motionComponentImpl "source"
 
-span :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_span) => ReactComponent { | attrs }
+span ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_span) => ReactComponent { | attrs }
 span = motionComponentImpl "span"
 
-strong :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_strong) => ReactComponent { | attrs }
+strong ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_strong) => ReactComponent { | attrs }
 strong = motionComponentImpl "strong"
 
-style :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_style) => ReactComponent { | attrs }
+style ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_style) => ReactComponent { | attrs }
 style = motionComponentImpl "style"
 
-sub :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_sub) => ReactComponent { | attrs }
+sub ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_sub) => ReactComponent { | attrs }
 sub = motionComponentImpl "sub"
 
-summary :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_summary) => ReactComponent { | attrs }
+summary ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_summary) => ReactComponent { | attrs }
 summary = motionComponentImpl "summary"
 
-sup :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_sup) => ReactComponent { | attrs }
+sup ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_sup) => ReactComponent { | attrs }
 sup = motionComponentImpl "sup"
 
-table :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_table) => ReactComponent { | attrs }
+table ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_table) => ReactComponent { | attrs }
 table = motionComponentImpl "table"
 
-tbody :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_tbody) => ReactComponent { | attrs }
+tbody ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_tbody) => ReactComponent { | attrs }
 tbody = motionComponentImpl "tbody"
 
-td :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_td) => ReactComponent { | attrs }
+td ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_td) => ReactComponent { | attrs }
 td = motionComponentImpl "td"
 
-textarea :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_textarea) => ReactComponent { | attrs }
+textarea ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_textarea) => ReactComponent { | attrs }
 textarea = motionComponentImpl "textarea"
 
-tfoot :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_tfoot) => ReactComponent { | attrs }
+tfoot ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_tfoot) => ReactComponent { | attrs }
 tfoot = motionComponentImpl "tfoot"
 
-th :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_th) => ReactComponent { | attrs }
+th ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_th) => ReactComponent { | attrs }
 th = motionComponentImpl "th"
 
-thead :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_thead) => ReactComponent { | attrs }
+thead ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_thead) => ReactComponent { | attrs }
 thead = motionComponentImpl "thead"
 
-time :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_time) => ReactComponent { | attrs }
+time ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_time) => ReactComponent { | attrs }
 time = motionComponentImpl "time"
 
-title :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_title) => ReactComponent { | attrs }
+title ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_title) => ReactComponent { | attrs }
 title = motionComponentImpl "title"
 
-tr :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_tr) => ReactComponent { | attrs }
+tr ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_tr) => ReactComponent { | attrs }
 tr = motionComponentImpl "tr"
 
-track :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_track) => ReactComponent { | attrs }
+track ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_track) => ReactComponent { | attrs }
 track = motionComponentImpl "track"
 
-u :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_u) => ReactComponent { | attrs }
+u ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_u) => ReactComponent { | attrs }
 u = motionComponentImpl "u"
 
-ul :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_ul) => ReactComponent { | attrs }
+ul ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_ul) => ReactComponent { | attrs }
 ul = motionComponentImpl "ul"
 
-var :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_var) => ReactComponent { | attrs }
+var ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_var) => ReactComponent { | attrs }
 var = motionComponentImpl "var"
 
-video :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_video) => ReactComponent { | attrs }
+video ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_video) => ReactComponent { | attrs }
 video = motionComponentImpl "video"
 
-wbr :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_wbr) => ReactComponent { | attrs }
+wbr ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_wbr) => ReactComponent { | attrs }
 wbr = motionComponentImpl "wbr"
 
 -- No support in React.Basic.Hooks
 -- webview :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_webview) => ReactComponent { | attrs }
 -- webview = motionComponentImpl "webview"
-svgAnimate :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_animate) => ReactComponent { | attrs }
+svgAnimate ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_animate) => ReactComponent { | attrs }
 svgAnimate = motionComponentImpl "animate"
 
-circle :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_circle) => ReactComponent { | attrs }
+circle ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_circle) => ReactComponent { | attrs }
 circle = motionComponentImpl "circle"
 
-clipPath :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_clipPath) => ReactComponent { | attrs }
+clipPath ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_clipPath) => ReactComponent { | attrs }
 clipPath = motionComponentImpl "clipPath"
 
-defs :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_defs) => ReactComponent { | attrs }
+defs ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_defs) => ReactComponent { | attrs }
 defs = motionComponentImpl "defs"
 
-desc :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_desc) => ReactComponent { | attrs }
+desc ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_desc) => ReactComponent { | attrs }
 desc = motionComponentImpl "desc"
 
-ellipse :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_ellipse) => ReactComponent { | attrs }
+ellipse ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_ellipse) => ReactComponent { | attrs }
 ellipse = motionComponentImpl "ellipse"
 
-feBlend :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feBlend) => ReactComponent { | attrs }
+feBlend ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feBlend) => ReactComponent { | attrs }
 feBlend = motionComponentImpl "feBlend"
 
-feColorMatrix :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feColorMatrix) => ReactComponent { | attrs }
+feColorMatrix ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feColorMatrix) => ReactComponent { | attrs }
 feColorMatrix = motionComponentImpl "feColorMatrix"
 
-feComponentTransfer :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feComponentTransfer) => ReactComponent { | attrs }
+feComponentTransfer ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feComponentTransfer) => ReactComponent { | attrs }
 feComponentTransfer = motionComponentImpl "feComponentTransfer"
 
-feComposite :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feComposite) => ReactComponent { | attrs }
+feComposite ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feComposite) => ReactComponent { | attrs }
 feComposite = motionComponentImpl "feComposite"
 
-feConvolveMatrix :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feConvolveMatrix) => ReactComponent { | attrs }
+feConvolveMatrix ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feConvolveMatrix) => ReactComponent { | attrs }
 feConvolveMatrix = motionComponentImpl "feConvolveMatrix"
 
-feDiffuseLighting :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feDiffuseLighting) => ReactComponent { | attrs }
+feDiffuseLighting ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feDiffuseLighting) => ReactComponent { | attrs }
 feDiffuseLighting = motionComponentImpl "feDiffuseLighting"
 
-feDisplacementMap :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feDisplacementMap) => ReactComponent { | attrs }
+feDisplacementMap ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feDisplacementMap) => ReactComponent { | attrs }
 feDisplacementMap = motionComponentImpl "feDisplacementMap"
 
-feDistantLight :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feDistantLight) => ReactComponent { | attrs }
+feDistantLight ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feDistantLight) => ReactComponent { | attrs }
 feDistantLight = motionComponentImpl "feDistantLight"
 
-feDropShadow :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feDropShadow) => ReactComponent { | attrs }
+feDropShadow ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feDropShadow) => ReactComponent { | attrs }
 feDropShadow = motionComponentImpl "feDropShadow"
 
-feFlood :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feFlood) => ReactComponent { | attrs }
+feFlood ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feFlood) => ReactComponent { | attrs }
 feFlood = motionComponentImpl "feFlood"
 
-feFuncA :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feFuncA) => ReactComponent { | attrs }
+feFuncA ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feFuncA) => ReactComponent { | attrs }
 feFuncA = motionComponentImpl "feFuncA"
 
-feFuncB :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feFuncB) => ReactComponent { | attrs }
+feFuncB ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feFuncB) => ReactComponent { | attrs }
 feFuncB = motionComponentImpl "feFuncB"
 
-feFuncG :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feFuncG) => ReactComponent { | attrs }
+feFuncG ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feFuncG) => ReactComponent { | attrs }
 feFuncG = motionComponentImpl "feFuncG"
 
-feFuncR :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feFuncR) => ReactComponent { | attrs }
+feFuncR ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feFuncR) => ReactComponent { | attrs }
 feFuncR = motionComponentImpl "feFuncR"
 
-feGaussianBlur :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feGaussianBlur) => ReactComponent { | attrs }
+feGaussianBlur ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feGaussianBlur) => ReactComponent { | attrs }
 feGaussianBlur = motionComponentImpl "feGaussianBlur"
 
-feImage :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feImage) => ReactComponent { | attrs }
+feImage ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feImage) => ReactComponent { | attrs }
 feImage = motionComponentImpl "feImage"
 
-feMerge :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feMerge) => ReactComponent { | attrs }
+feMerge ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feMerge) => ReactComponent { | attrs }
 feMerge = motionComponentImpl "feMerge"
 
-feMergeNode :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feMergeNode) => ReactComponent { | attrs }
+feMergeNode ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feMergeNode) => ReactComponent { | attrs }
 feMergeNode = motionComponentImpl "feMergeNode"
 
-feMorphology :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feMorphology) => ReactComponent { | attrs }
+feMorphology ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feMorphology) => ReactComponent { | attrs }
 feMorphology = motionComponentImpl "feMorphology"
 
-feOffset :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feOffset) => ReactComponent { | attrs }
+feOffset ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feOffset) => ReactComponent { | attrs }
 feOffset = motionComponentImpl "feOffset"
 
-fePointLight :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_fePointLight) => ReactComponent { | attrs }
+fePointLight ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_fePointLight) => ReactComponent { | attrs }
 fePointLight = motionComponentImpl "fePointLight"
 
-feSpecularLighting :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feSpecularLighting) => ReactComponent { | attrs }
+feSpecularLighting ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feSpecularLighting) => ReactComponent { | attrs }
 feSpecularLighting = motionComponentImpl "feSpecularLighting"
 
-feSpotLight :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feSpotLight) => ReactComponent { | attrs }
+feSpotLight ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feSpotLight) => ReactComponent { | attrs }
 feSpotLight = motionComponentImpl "feSpotLight"
 
-feTile :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feTile) => ReactComponent { | attrs }
+feTile ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feTile) => ReactComponent { | attrs }
 feTile = motionComponentImpl "feTile"
 
-feTurbulence :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feTurbulence) => ReactComponent { | attrs }
+feTurbulence ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feTurbulence) => ReactComponent { | attrs }
 feTurbulence = motionComponentImpl "feTurbulence"
 
-filter :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_filter) => ReactComponent { | attrs }
+filter ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_filter) => ReactComponent { | attrs }
 filter = motionComponentImpl "filter"
 
-foreignObject :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_foreignObject) => ReactComponent { | attrs }
+foreignObject ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_foreignObject) => ReactComponent { | attrs }
 foreignObject = motionComponentImpl "foreignObject"
 
-g :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_g) => ReactComponent { | attrs }
+g ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_g) => ReactComponent { | attrs }
 g = motionComponentImpl "g"
 
-image :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_image) => ReactComponent { | attrs }
+image ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_image) => ReactComponent { | attrs }
 image = motionComponentImpl "image"
 
-line :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_line) => ReactComponent { | attrs }
+line ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_line) => ReactComponent { | attrs }
 line = motionComponentImpl "line"
 
-linearGradient :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_linearGradient) => ReactComponent { | attrs }
+linearGradient ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_linearGradient) => ReactComponent { | attrs }
 linearGradient = motionComponentImpl "linearGradient"
 
-marker :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_marker) => ReactComponent { | attrs }
+marker ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_marker) => ReactComponent { | attrs }
 marker = motionComponentImpl "marker"
 
-mask :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_mask) => ReactComponent { | attrs }
+mask ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_mask) => ReactComponent { | attrs }
 mask = motionComponentImpl "mask"
 
-metadata :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_metadata) => ReactComponent { | attrs }
+metadata ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_metadata) => ReactComponent { | attrs }
 metadata = motionComponentImpl "metadata"
 
-path :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_path) => ReactComponent { | attrs }
+path ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_path) => ReactComponent { | attrs }
 path = motionComponentImpl "path"
 
-pattern :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_pattern) => ReactComponent { | attrs }
+pattern ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_pattern) => ReactComponent { | attrs }
 pattern = motionComponentImpl "pattern"
 
-polygon :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_polygon) => ReactComponent { | attrs }
+polygon ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_polygon) => ReactComponent { | attrs }
 polygon = motionComponentImpl "polygon"
 
-polyline :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_polyline) => ReactComponent { | attrs }
+polyline ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_polyline) => ReactComponent { | attrs }
 polyline = motionComponentImpl "polyline"
 
-radialGradient :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_radialGradient) => ReactComponent { | attrs }
+radialGradient ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_radialGradient) => ReactComponent { | attrs }
 radialGradient = motionComponentImpl "radialGradient"
 
-rect :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_rect) => ReactComponent { | attrs }
+rect ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_rect) => ReactComponent { | attrs }
 rect = motionComponentImpl "rect"
 
-stop :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_stop) => ReactComponent { | attrs }
+stop ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_stop) => ReactComponent { | attrs }
 stop = motionComponentImpl "stop"
 
-svg :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_svg) => ReactComponent { | attrs }
+svg ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_svg) => ReactComponent { | attrs }
 svg = motionComponentImpl "svg"
 
-svgSwitch :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_switch) => ReactComponent { | attrs }
+svgSwitch ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_switch) => ReactComponent { | attrs }
 svgSwitch = motionComponentImpl "switch"
 
-symbol :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_symbol) => ReactComponent { | attrs }
+symbol ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_symbol) => ReactComponent { | attrs }
 symbol = motionComponentImpl "symbol"
 
-text :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_text) => ReactComponent { | attrs }
+text ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_text) => ReactComponent { | attrs }
 text = motionComponentImpl "text"
 
-textPath :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_textPath) => ReactComponent { | attrs }
+textPath ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_textPath) => ReactComponent { | attrs }
 textPath = motionComponentImpl "textPath"
 
-tspan :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_tspan) => ReactComponent { | attrs }
+tspan ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_tspan) => ReactComponent { | attrs }
 tspan = motionComponentImpl "tspan"
 
-use :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_use) => ReactComponent { | attrs }
+use ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_use) => ReactComponent { | attrs }
 use = motionComponentImpl "use"
 
-view :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_view) => ReactComponent { | attrs }
+view ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_view) => ReactComponent { | attrs }
 view = motionComponentImpl "view"

src/React/Basic/SyntaxHighlighter/Component.purs

@@ -57,7 +57,7 @@ mkHighlighterTheme theme =
       }
   , "hljs-keyword":
     css
-      { color: Color.cssStringRGBA theme.highlightColour
+      { color: "var(--highlight)"
       , fontWeight: "normal"
       }
   , "hljs-symbol":

src/Yoga/Block/Atom/Toggle/Spec.purs

@@ -13,4 +13,17 @@ spec =
           $ renderComponent Toggle.component
               { togglePosition: ToggleIsLeft
               , setTogglePosition: mempty
+              , ariaLabel: "Example Toggle"
               }
+      it "has an aria-label" do
+        { findByRole } <-
+          renderComponent Toggle.component
+            { togglePosition: ToggleIsLeft
+            , setTogglePosition: mempty
+            , ariaLabel: "Example Toggle"
+            }
+        elem <- findByRole "switch"
+        shouldHaveAttributeWithValue
+          elem
+          "aria-label"
+          "Example Toggle"

src/Yoga/Block/Atom/Toggle/Story.purs

@@ -41,6 +41,7 @@ toggle = do
         $ element Toggle.component
             { togglePosition
             , setTogglePosition
+            , ariaLabel: "dark-light-toggle"
             }
 
   mkDarkLightToggle =
@@ -51,6 +52,7 @@ toggle = do
         content =
           element Toggle.component
             { togglePosition: togglePosition
+            , ariaLabel: "dark-light-toggle"
             , setTogglePosition:
               \newTogglePosition -> do
                 setTogglePosition newTogglePosition

src/Yoga/Block/Atom/Toggle/Style.purs

@@ -15,7 +15,7 @@ button =
   css
     { position: relative
     , "&:focus": nest { outline: str "none" }
-    , border: str $ "1px solid " <> colour.inputBorder
+    , border: str $ "1px solid " <> colour.backgroundLayer2
     , "&:focus-visible":
       nest
         { boxShadow: str $ "0 0 0 var(--s-4) " <> colour.highlight

src/Yoga/Block/Atom/Toggle/View.purs

@@ -24,16 +24,17 @@ import Yoga.Block.Atom.Toggle.Types (TogglePosition(..), flipToggle)
 import Yoga.Block.Container.Style (colour)
 import Yoga.Block.Icon.SVG as SVGIcon
 
-type PropsF f
-  = ( className ∷ f String
+type PropsF f =
+  ( className ∷ f String
   , left ∷ f JSX
   , right ∷ f JSX
   | Style.Props f (MandatoryProps InputProps)
   )
 
-type MandatoryProps r
-  = ( togglePosition ∷ TogglePosition
+type MandatoryProps r =
+  ( togglePosition ∷ TogglePosition
   , setTogglePosition ∷ TogglePosition -> Effect Unit
+  , ariaLabel ∷ String
   | r
   )
 
@@ -54,11 +55,11 @@ instance showDragState ∷ Show DragState where
     Dragging x -> "Dragging " <> show x
     DragDone x -> "DragDone " <> show x
 
-type Props
-  = PropsF Id
+type Props =
+  PropsF Id
 
-type PropsOptional
-  = PropsF OptionalProp
+type PropsOptional =
+  PropsF OptionalProp
 
 component ∷ ∀ p p_. Union p p_ Props => ReactComponent { | MandatoryProps p }
 component = rawComponent
@@ -67,8 +68,7 @@ rawComponent ∷ ∀ p. ReactComponent (Record p)
 rawComponent =
   mkForwardRefComponent "Toggle" do
     \(props ∷ { | PropsOptional }) ref -> React.do
-      let
-        disabled = props.disabled
+      let disabled = props.disabled
       buttonRef <- useRef null
       toggleRef <- useRef null
       tapState <- useRef TapNotAllowed
@@ -91,7 +91,6 @@ rawComponent =
           { left: { backgroundColor: (Emotion.str <<< Color.cssStringRGBA <$> props.backgroundLeft) ?|| Emotion.str colour.inputBackground }
           , right: { backgroundColor: (Emotion.str <<< Color.cssStringRGBA <$> props.backgroundRight) ?|| Emotion.str colour.success }
           }
-
         buttonVariant = Motion.makeVariantLabels buttonVariants
       -- components
       let
@@ -117,10 +116,10 @@ rawComponent =
                 ]
             , toggle
             ]
-
-        container =
+        container children =
+          Motion.elementStyled
             Motion.button
-            </* { className: "ry-toggle" <>? props.className
+            { className: "ry-toggle" <>? props.className
             , css: Style.button <>? props.css
             , transition: Motion.transition { type: "tween", duration: 0.33, ease: "easeOut" }
             , variants: Motion.variants buttonVariants
@@ -133,28 +132,29 @@ rawComponent =
             , style: props.style
             , _data: Object.singleton "testid" "toggle-testid"
             , role: "switch"
-              , _aria: Object.singleton "checked" "switch"
-              , ref: buttonRef
+            , _aria:
+              Object.fromHomogeneous
+                { checked: "switch"
+                , label: props.ariaLabel
+                }
+            , ref: buttonRef
+            , children
             }
-
         textContainer =
           div
             </* { className: "ry-toggle-text"
               , css: Style.toggleTextContainer
               }
-
         textOnContainer =
           div
             </* { className: "ry-toggle-text-on"
               , css: Style.toggleText
               }
-
         textOffContainer =
           div
             </* { className: "ry-toggle-text-off"
               , css: Style.toggleText
               }
-
         textOn =
           Motion.div
             </ { className: "ry-toggle-text-container"
@@ -163,7 +163,6 @@ rawComponent =
               , animate: Motion.animate $ css { scale: 1, opacity: 1 }
               , exit: Motion.exit $ css { scale: 0, opacity: 0 }
               }
-
         textOff =
           Motion.div
             </ { className: "ry-toggle-text-container"
@@ -172,9 +171,7 @@ rawComponent =
               , animate: Motion.animate $ css { scale: 1, opacity: 1 }
               , exit: Motion.exit $ css { scale: 0, opacity: 0 }
               }
-
         animateTextPresence = Motion.animatePresence </ {}
-
         toggle =
           toggleCircle
             </> { buttonRef
@@ -215,8 +212,7 @@ toggleCircle =
               runMaybeT_ do
                 b <- getBoundingBoxFromRef buttonRef # MaybeT
                 t <- getBoundingBoxFromRef toggleRef # MaybeT
-                let
-                  ml = b.width - t.width - (2.0 * (t.left - b.left))
+                let ml = b.width - t.width - (2.0 * (t.left - b.left))
                 setMaxLeft (Just ml) # lift
             mempty
           let
@@ -224,7 +220,6 @@ toggleCircle =
               { left: { x: 0.0 }
               , right: { x: maxLeft # fromMaybe 0.0 }
               }
-
             toggleVariant = Motion.makeVariantLabels toggleVariants
           pure
             $ Motion.div
@@ -281,8 +276,7 @@ toggleCircle =
               , onDragStart:
                 Motion.onDragStart \_ pi -> do
                   maybeBBox <- getBoundingBoxFromRef toggleRef
-                    let
-                      x = maybeBBox <#> \bbox -> bbox.left + (bbox.width / 2.0)
+                  let x = maybeBBox <#> \bbox -> bbox.left + (bbox.width / 2.0)
                   setDragState
                     $ Dragging
                         { startX: x # fromMaybe pi.point.x, currentX: pi.point.x
@@ -298,8 +292,7 @@ toggleCircle =
                   case dragState of
                     Dragging { startX } -> do
                       maybeBBox <- getBoundingBoxFromRef toggleRef
-                        let
-                          x = maybeBBox <#> \bbox -> bbox.left + (bbox.width / 2.0)
+                      let x = maybeBBox <#> \bbox -> bbox.left + (bbox.width / 2.0)
                       setDragState (DragDone { startX, endX: x # fromMaybe' \_ -> unsafeCrashWith "shit" })
                     other -> Console.warn $ i "Unexpected drag state " (show other) " in onDragEvent"
               , ref: toggleRef

src/Yoga/Block/Container/Style.js

@@ -1,6 +1,27 @@
+// This is for the browser tests to work
+// JSDOM does not have support for matchMedia
+// So we just pretend nothing every matches
+// And never invoke the listeners
+const stubMatchMedia = () => {
+    if (window.matchMedia) return
+    window.matchMedia = (name) =>
+    ({
+        matches: false,
+        addEventListener: () => { },
+        removeEventListener: () => { }
+    })
+}
+
+
 exports.getComputedStyleImpl = (el, window) => window.getComputedStyle(el)
 exports.getPropertyValueImpl = (propName, computedStyle) => computedStyle.getPropertyValue(propName)
 exports.getElementStyle = el => () => el.style
 exports.setStyleProperty = prop => value => style => () => style.setProperty(prop, value)
-exports.matchMedia = string => window => () => window.matchMedia(string)
-exports.matches = matchMedia => () => matchMedia.matches
+exports.matchMedia = string => window => () => {
+    stubMatchMedia()
+    return window.matchMedia(string)
+}
+exports.matches = matchMedia => () => {
+    stubMatchMedia()
+    return matchMedia.matches
+}

src/Yoga/Block/Container/Style.purs

@@ -36,6 +36,7 @@ lightMode = mkGlobal (Just LightMode)
 global ∷ Style
 global = mkGlobal Nothing
 
+-- [TODO] Move this all out
 foreign import data ComputedStyle ∷ Type
 
 foreign import getComputedStyleImpl ∷ EffectFn2 Element Window ComputedStyle
@@ -96,6 +97,8 @@ setDarkOrLightMode desiredMode =
           DarkMode -> "dark"
       # lift
 
+-- [TODO] Move out end
+--
 mkGlobal ∷ Maybe DarkOrLightMode -> Style
 mkGlobal maybeMode =
   css

src/Yoga/Block/Hook/UseResize.purs

@@ -1,13 +1,20 @@
 module Yoga.Block.Hook.UseResize where
 
 import Prelude
+import Data.Foldable (for_)
 import Data.Int (toNumber)
+import Data.Maybe (Maybe(..))
 import Data.Newtype (class Newtype)
+import Data.Time.Duration (class Duration)
+import Data.Time.Duration as Milliseconds
 import Effect (Effect)
-import React.Basic.Hooks (Hook, UseLayoutEffect, UseState, coerceHook, useLayoutEffect, useState, (/\))
+import Effect.Aff (Aff, Fiber, delay, error, killFiber, launchAff, launchAff_)
+import Effect.Class (liftEffect)
+import Math as Math
+import React.Basic.Hooks (Hook, UseLayoutEffect, UseState, coerceHook, useLayoutEffect, useLayoutEffectOnce, (/\))
 import React.Basic.Hooks as React
 import Web.Event.Event (EventType(..))
-import Web.Event.EventTarget (EventListener, addEventListener, eventListener, removeEventListener)
+import Web.Event.EventTarget (EventListener, EventTarget, addEventListener, eventListener, removeEventListener)
 import Web.HTML (window)
 import Web.HTML.Window (innerHeight, innerWidth, toEventTarget)
 
@@ -20,42 +27,75 @@ registerListener listener = do
   addEventListener eventType listener false target
   pure $ removeEventListener eventType listener false target
 
-newtype UseResize hooks
-  = UseResize (UseLayoutEffect Unit (UseState { width ∷ Number, height ∷ Number } hooks))
+newtype UseResize hooks = UseResize (UseLayoutEffect Unit (UseState { width ∷ Number, height ∷ Number } hooks))
+
 derive instance ntUseResize ∷ Newtype (UseResize hooks) _
 
 useResize ∷ Hook UseResize { width ∷ Number, height ∷ Number }
 useResize =
   coerceHook React.do
-    size /\ updateSize <- useState { width: 0.0, height: 0.0 }
-    let
-      setSize = updateSize <<< const
+    size /\ setSize <- React.useState' zero
     useLayoutEffect unit do
       setSizeFromWindow setSize
       listener <- makeListener setSize
       registerListener listener
     pure size
 
-setSizeFromWindow ∷ ({ height ∷ Number, width ∷ Number } -> Effect Unit) -> Effect Unit
+type Dimensions =
+  { height ∷ Number, width ∷ Number }
+
+setSizeFromWindow ∷ (Dimensions -> Effect Unit) -> Effect Unit
 setSizeFromWindow setSize = do
   win <- window
   width <- innerWidth win <#> toNumber
   height <- innerHeight win <#> toNumber
   setSize { width, height }
 
-makeListener ∷ ({ height ∷ Number, width ∷ Number } -> Effect Unit) -> Effect EventListener
+makeListener ∷ (Dimensions -> Effect Unit) -> Effect EventListener
 makeListener setSize = do
   eventListener
     $ const (setSizeFromWindow setSize)
 
-useResize' ∷ Effect Unit -> Hook UseResize { width ∷ Number, height ∷ Number }
-useResize' eff =
+newtype UseOnResize hooks = UseOnResize
+  ( UseLayoutEffect Unit
+      ( UseState Dimensions
+          (UseState (Maybe (Fiber Unit)) hooks)
+      )
+  )
+
+derive instance ntUseOnResize ∷ Newtype (UseOnResize hooks) _
+
+useOnResize ∷
+  ∀ d.
+  Duration d =>
+  d ->
+  ({ width ∷ Number, height ∷ Number, deltaWidth ∷ Number, deltaHeight ∷ Number } -> Effect Unit) ->
+  Hook UseOnResize Unit
+useOnResize debounceBy callback =
   coerceHook React.do
-    size /\ updateSize <- useState { width: 0.0, height: 0.0 }
+    mbFiber /\ setFiber <- React.useState' Nothing
+    size /\ setSize <- React.useState' (zero ∷ Dimensions)
     let
-      setSize = updateSize <<< const
-    useLayoutEffect unit do
-      setSizeFromWindow setSize
-      listener <- makeListener (setSize >=> const eff)
-      registerListener listener
-    pure size
+      layoutEffect ∷ Effect (Effect Unit)
+      layoutEffect = do
+        setSizeFromWindow (setSize ∷ Dimensions -> Effect Unit)
+        listener ∷ EventListener <-
+          makeListener \(dimensions ∷ Dimensions) -> do
+            let
+              aff ∷ Aff Unit
+              aff = do
+                for_ mbFiber (killFiber (error "Fiber cancelled"))
+                delay (Milliseconds.fromDuration debounceBy)
+                let { width, height } = dimensions
+                let deltaWidth = Math.abs (size.width - width)
+                let deltaHeight = Math.abs (size.height - height)
+                setSize dimensions # liftEffect
+                callback { width, height, deltaWidth, deltaHeight } # liftEffect
+            fiber ∷ Fiber _ <- launchAff aff
+            setFiber (Just fiber)
+        target ∷ EventTarget <- window <#> toEventTarget
+        addEventListener eventType listener false target
+        pure
+          $ launchAff_
+          $ for_ mbFiber (killFiber (error "Fiber cancelled"))
+    useLayoutEffectOnce layoutEffect

test/Main.purs

@@ -1,7 +1,6 @@
 module Test.Main where
 
 import Prelude
-
 import Effect (Effect)
 import Effect.Aff (launchAff_)
 import Test.Spec.Discovery (discover)