Add stub for match media for tests

package.json

@@ -56,4 +56,4 @@
     "react-popper": "^2.2.4",
     "react-syntax-highlighter": "^15.3.1"
   }
-}
+}

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

@@ -34,38 +34,40 @@ toggle = do
             ]
         ]
   where
-    mkBasicExample =
+  mkBasicExample =
-      React.reactComponent "Toggle example" \p -> React.do
+    React.reactComponent "Toggle example" \p -> React.do
-        togglePosition /\ setTogglePosition <- React.useState' ToggleIsRight
+      togglePosition /\ setTogglePosition <- React.useState' ToggleIsRight
-        pure
+      pure
-          $ element Toggle.component
+        $ element Toggle.component
-              { togglePosition
+            { togglePosition
-              , setTogglePosition
+            , setTogglePosition
-              }
+            , ariaLabel: "dark-light-toggle"
+            }
 
-    mkDarkLightToggle =
+  mkDarkLightToggle =
-      React.reactComponent "Toggle dark night example" \p -> React.do
+    React.reactComponent "Toggle dark night example" \p -> React.do
-        togglePosition /\ setTogglePosition <- React.useState' ToggleIsLeft
+      togglePosition /\ setTogglePosition <- React.useState' ToggleIsLeft
-        theme /\ setTheme <- React.useState' Nothing
+      theme /\ setTheme <- React.useState' Nothing
-        let
+      let
-          content =
+        content =
-            element Toggle.component
+          element Toggle.component
-              { togglePosition: togglePosition
+            { togglePosition: togglePosition
-              , setTogglePosition:
+            , ariaLabel: "dark-light-toggle"
-                \newTogglePosition -> do
+            , setTogglePosition:
-                  setTogglePosition newTogglePosition
+              \newTogglePosition -> do
-                  setTheme case newTogglePosition of
+                setTogglePosition newTogglePosition
-                    ToggleIsRight -> Just DarkMode
+                setTheme case newTogglePosition of
-                    ToggleIsLeft -> Just LightMode
+                  ToggleIsRight -> Just DarkMode
-              , left: R.text "🌒"
+                  ToggleIsLeft -> Just LightMode
-              , right: R.text "🌞"
+            , left: R.text "🌒"
-              , backgroundLeft:
+            , right: R.text "🌞"
-                Color.hsl 205.0 1.0 0.83
+            , backgroundLeft:
-              , backgroundRight:
+              Color.hsl 205.0 1.0 0.83
-                Color.hsl 260.0 0.7 0.45
+            , backgroundRight:
-              }
+              Color.hsl 260.0 0.7 0.45
-        pure
+            }
-          $ element Block.container
+      pure
-              { content
+        $ element Block.container
-              , themeVariant: theme
+            { content
-              }
+            , themeVariant: theme
+            }

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,18 +24,19 @@ import Yoga.Block.Atom.Toggle.Types (TogglePosition(..), flipToggle)
 import Yoga.Block.Container.Style (colour)
 import Yoga.Block.Icon.SVG as SVGIcon
 
-type PropsF f
+type PropsF f =
-  = ( className ∷ f String
+  ( className ∷ f String
-    , left ∷ f JSX
+  , left ∷ f JSX
-    , right ∷ f JSX
+  , right ∷ f JSX
-    | Style.Props f (MandatoryProps InputProps)
+  | Style.Props f (MandatoryProps InputProps)
-    )
+  )
 
-type MandatoryProps r
+type MandatoryProps r =
-  = ( togglePosition ∷ TogglePosition
+  ( togglePosition ∷ TogglePosition
-    , setTogglePosition ∷ TogglePosition -> Effect Unit
+  , setTogglePosition ∷ TogglePosition -> Effect Unit
-    | r
+  , ariaLabel ∷ String
-    )
+  | r
+  )
 
 data TappingState
   = TapAllowed
@@ -54,11 +55,11 @@ instance showDragState ∷ Show DragState where
     Dragging x -> "Dragging " <> show x
     DragDone x -> "DragDone " <> show x
 
-type Props
+type Props =
-  = PropsF Id
+  PropsF Id
 
-type PropsOptional
+type PropsOptional =
-  = PropsF OptionalProp
+  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
+      let disabled = props.disabled
-        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,44 +116,45 @@ rawComponent =
                 ]
             , toggle
             ]
-
+        container children =
-        container =
+          Motion.elementStyled
-          Motion.button
+            Motion.button
-            </* { className: "ry-toggle" <>? props.className
+            { className: "ry-toggle" <>? props.className
-              , css: Style.button <>? props.css
+            , css: Style.button <>? props.css
-              , transition: Motion.transition { type: "tween", duration: 0.33, ease: "easeOut" }
+            , transition: Motion.transition { type: "tween", duration: 0.33, ease: "easeOut" }
-              , variants: Motion.variants buttonVariants
+            , variants: Motion.variants buttonVariants
-              , animate:
+            , animate:
-                  Motion.animate case props.togglePosition of
+              Motion.animate case props.togglePosition of
-                    ToggleIsRight -> buttonVariant.right
+                ToggleIsRight -> buttonVariant.right
-                    ToggleIsLeft -> buttonVariant.left
+                ToggleIsLeft -> buttonVariant.left
-              , value: show props.togglePosition
+            , value: show props.togglePosition
-              , onClick: handler preventDefault \_ -> props.setTogglePosition (flipToggle props.togglePosition)
+            , onClick: handler preventDefault \_ -> props.setTogglePosition (flipToggle props.togglePosition)
-              , style: props.style
+            , style: props.style
-              , _data: Object.singleton "testid" "toggle-testid"
+            , _data: Object.singleton "testid" "toggle-testid"
-              , role: "switch"
+            , role: "switch"
-              , _aria: Object.singleton "checked" "switch"
+            , _aria:
-              , ref: buttonRef
+              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
+                let ml = b.width - t.width - (2.0 * (t.left - b.left))
-                  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
@@ -239,68 +234,66 @@ toggleCircle =
               , key: if isNothing maxLeft then "initialising" else "ready"
               , dragElastic: Motion.dragElastic false
               , dragConstraints:
-                  Motion.dragConstraints
+                Motion.dragConstraints
-                    { left:
+                  { left:
-                        case togglePosition of
+                    case togglePosition of
-                          ToggleIsLeft -> zero
+                      ToggleIsLeft -> zero
-                          ToggleIsRight -> -(maxLeft <#> (_ - Style.dragWidthDelta) # fromMaybe 0.0)
+                      ToggleIsRight -> -(maxLeft <#> (_ - Style.dragWidthDelta) # fromMaybe 0.0)
-                    , right:
+                  , right:
-                        case togglePosition of
+                    case togglePosition of
-                          ToggleIsRight -> zero
+                      ToggleIsRight -> zero
-                          ToggleIsLeft -> maxLeft <#> (_ - Style.dragWidthDelta) # fromMaybe 0.0
+                      ToggleIsLeft -> maxLeft <#> (_ - Style.dragWidthDelta) # fromMaybe 0.0
-                    }
+                  }
               , variants: Motion.variants toggleVariants
               , transition: Motion.transition { type: "tween", duration: 0.33, ease: "easeOut" }
               , whileTap:
-                  Motion.prop
+                Motion.prop
-                    $ css
+                  $ css
-                        { width: "calc(var(--s2)*0.85 + 10px)"
+                      { width: "calc(var(--s2)*0.85 + 10px)"
-                        , left:
+                      , left:
-                            case togglePosition of
+                        case togglePosition of
-                              ToggleIsLeft -> Style.toggleLeft
+                          ToggleIsLeft -> Style.toggleLeft
-                              ToggleIsRight -> "calc(" <> Style.toggleLeft <> " - 10px)"
+                          ToggleIsRight -> "calc(" <> Style.toggleLeft <> " - 10px)"
-                        , transition: { type: "tween", duration: 0.10, ease: "easeInOut" }
+                      , transition: { type: "tween", duration: 0.10, ease: "easeInOut" }
-                        }
+                      }
               , onTapStart: Motion.onTapStart \_ _ -> writeRef tapState TapAllowed
               , onTap:
-                  Motion.onTap \_ pi -> do
+                Motion.onTap \_ pi -> do
-                    ts <- readRef tapState
+                  ts <- readRef tapState
-                    case ts of
+                  case ts of
-                      TapAllowed -> setTogglePosition (flipToggle togglePosition)
+                    TapAllowed -> setTogglePosition (flipToggle togglePosition)
-                      _ -> mempty
+                    _ -> mempty
-                    mempty
+                  mempty
               , onTapCancel:
-                  Motion.onTapCancel \_ pi -> do
+                Motion.onTapCancel \_ pi -> do
-                    writeRef tapState TapNotAllowed
+                  writeRef tapState TapNotAllowed
-                    mempty
+                  mempty
               , initial: Motion.initial false
               , animate:
-                  Motion.animate case togglePosition of
+                Motion.animate case togglePosition of
-                    ToggleIsLeft -> toggleVariant.left
+                  ToggleIsLeft -> toggleVariant.left
-                    ToggleIsRight -> toggleVariant.right
+                  ToggleIsRight -> toggleVariant.right
               , onDragStart:
-                  Motion.onDragStart \_ pi -> do
+                Motion.onDragStart \_ pi -> do
-                    maybeBBox <- getBoundingBoxFromRef toggleRef
+                  maybeBBox <- getBoundingBoxFromRef toggleRef
-                    let
+                  let x = maybeBBox <#> \bbox -> bbox.left + (bbox.width / 2.0)
-                      x = maybeBBox <#> \bbox -> bbox.left + (bbox.width / 2.0)
+                  setDragState
-                    setDragState
+                    $ Dragging
-                      $ Dragging
+                        { startX: x # fromMaybe pi.point.x, currentX: pi.point.x
-                          { startX: x # fromMaybe pi.point.x, currentX: pi.point.x
+                        }
-                          }
               , onDrag:
-                  Motion.onDrag \_ pi -> do
+                Motion.onDrag \_ pi -> do
-                    case dragState of
+                  case dragState of
-                      Dragging { startX } -> do
+                    Dragging { startX } -> do
-                        setDragState $ Dragging { startX, currentX: pi.point.x }
+                      setDragState $ Dragging { startX, currentX: pi.point.x }
-                      other -> Console.warn $ i "Unexpected drag state " (show other) " in onDragEvent"
+                    other -> Console.warn $ i "Unexpected drag state " (show other) " in onDragEvent"
               , onDragEnd:
-                  Motion.onDragEnd \_ pi -> do
+                Motion.onDragEnd \_ pi -> do
-                    case dragState of
+                  case dragState of
-                      Dragging { startX } -> do
+                    Dragging { startX } -> do
-                        maybeBBox <- getBoundingBoxFromRef toggleRef
+                      maybeBBox <- getBoundingBoxFromRef toggleRef
-                        let
+                      let x = maybeBBox <#> \bbox -> bbox.left + (bbox.width / 2.0)
-                          x = maybeBBox <#> \bbox -> bbox.left + (bbox.width / 2.0)
+                      setDragState (DragDone { startX, endX: x # fromMaybe' \_ -> unsafeCrashWith "shit" })
-                        setDragState (DragDone { startX, endX: x # fromMaybe' \_ -> unsafeCrashWith "shit" })
+                    other -> Console.warn $ i "Unexpected drag state " (show other) " in onDragEvent"
-                      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.matchMedia = string => window => () => {
-exports.matches = matchMedia => () => matchMedia.matches
+    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
+newtype UseResize hooks = UseResize (UseLayoutEffect Unit (UseState { width ∷ Number, height ∷ Number } 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 }
+    size /\ setSize <- React.useState' zero
-    let
-      setSize = updateSize <<< const
     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 }
+newtype UseOnResize hooks = UseOnResize
-useResize' eff =
+  ( 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
+      layoutEffect ∷ Effect (Effect Unit)
-    useLayoutEffect unit do
+      layoutEffect = do
-      setSizeFromWindow setSize
+        setSizeFromWindow (setSize ∷ Dimensions -> Effect Unit)
-      listener <- makeListener (setSize >=> const eff)
+        listener ∷ EventListener <-
-      registerListener listener
+          makeListener \(dimensions ∷ Dimensions) -> do
-    pure size
+            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

src/Yoga/Block/Layout/Sidebar/Style.purs

@@ -19,39 +19,39 @@ type Props f r =
 sidebar ∷ ∀ p. { | Props OptionalProp p } -> Style
 sidebar props = styles <>? props.css
   where
-    adjustedSpace = props.space <#> \s -> if s == "0" then "0px" else s
+  adjustedSpace = props.space <#> \s -> if s == "0" then "0px" else s
 
-    space = adjustedSpace ?|| "1rem"
+  space = adjustedSpace ?|| "1rem"
 
-    side = props.side ?|| SidebarLeft
+  side = props.side ?|| SidebarLeft
 
-    contentMin = props.contentMin ?|| "50%"
+  contentMin = props.contentMin ?|| "50%"
 
-    nonSidebarStyle =
+  nonSidebarStyle =
-      nest
+    nest
-        { flexBasis: _0
+      { flexBasis: _0
-        , flexGrow: "999" # str
+      , flexGrow: "999" # str
-        , minWidth: "calc(" <> contentMin <> " - " <> space <> ")" # str
+      , minWidth: "calc(" <> contentMin <> " - " <> space <> ")" # str
-        }
+      }
 
-    styles =
+  styles =
-      css
+    css
-        { overflow: hidden
+      { overflow: hidden
-        , "& > *":
+      , "& > *":
-          nest
+        nest
-            { display: flex
+          { display: flex
-            , flexWrap: wrap
+          , flexWrap: wrap
-            , margin: "calc(" <> space <> "/2 * -1)" # str
+          , margin: "calc(" <> space <> "/2 * -1)" # str
-            , alignItems: props.noStretch # ifTrue "flex-start" "" # str
+          , alignItems: props.noStretch # ifTrue "flex-start" "" # str
-            }
+          }
-        , "& > * > *":
+      , "& > * > *":
-          nest
+        nest
-            { margin: "calc(" <> space <> "/2)" # str
+          { margin: "calc(" <> space <> "/2)" # str
-            , flexGrow: "1" # str
+          , flexGrow: "1" # str
-            , flexBasis: props.sideWidth # foldMap str
+          , flexBasis: props.sideWidth # foldMap str
-            }
+          }
-            <> foldMap (nest <<< { flexBasis: _ } <<< str) props.sideWidth
+          <> foldMap (nest <<< { flexBasis: _ } <<< str) props.sideWidth
-        }
+      }
-        <> case side of
+      <> case side of
-            SidebarLeft -> css { "& > * > :last-child": nonSidebarStyle }
+          SidebarLeft -> css { "& > * > :last-child": nonSidebarStyle }
-            SidebarRight -> css { "& > * > :first-child": nonSidebarStyle }
+          SidebarRight -> css { "& > * > :first-child": nonSidebarStyle }

src/Yoga/Block/Layout/Switcher/Style.purs

@@ -16,38 +16,38 @@ type Props f r =
 switcher ∷ ∀ p. { | Props OptionalProp p } -> Style
 switcher props = styles <>? props.css
   where
-    limit = props.limit ?|| 4
+  limit = props.limit ?|| 4
 
-    space = (props.space <#> \s -> if s == "0" then "0px" else s) ?|| "var(--s1)"
+  space = (props.space <#> \s -> if s == "0" then "0px" else s) ?|| "var(--s1)"
 
-    threshold = props.threshold ?|| "60ch"
+  threshold = props.threshold ?|| "60ch"
 
-    lastKey ∷ String
+  lastKey ∷ String
-    lastKey =
+  lastKey =
-      "" -- this is for readability
+    "" -- this is for readability
-        <> i "& > * > :nth-last-child(n+" (limit + 1) "), "
+      <> i "& > * > :nth-last-child(n+" (limit + 1) "), "
-        <> i "& > * > :nth-last-child(n+" (limit + 1) ") ~ *"
+      <> i "& > * > :nth-last-child(n+" (limit + 1) ") ~ *"
 
-    nthLastChild ∷ Style
+  nthLastChild ∷ Style
-    nthLastChild =
+  nthLastChild =
-      unsafeCoerce
+    unsafeCoerce
-        (Object.singleton lastKey { flexBasis: _100percent })
+      (Object.singleton lastKey { flexBasis: _100percent })
 
-    styles ∷ Style
+  styles ∷ Style
-    styles =
+  styles =
-      nthLastChild
+    nthLastChild
-        <> css
+      <> css
-            { "& > *":
+          { "& > *":
-              nest
+            nest
-                { display: flex
+              { display: flex
-                , flexWrap: wrap
+              , flexWrap: wrap
-                , margin: i "calc((" space " / 2) * -1)" # str
+              , margin: i "calc((" space " / 2) * -1)" # str
-                }
+              }
-            , "& > * > *":
+          , "& > * > *":
-              nest
+            nest
-                { flexGrow: str "1"
+              { flexGrow: str "1"
-                , flexBasis:
+              , flexBasis:
-                  i "calc((" threshold " - (100% - var(--s1))) * 999)" # str
+                i "calc((" threshold " - (100% - var(--s1))) * 999)" # str
-                , margin: "calc((" <> space <> "/ 2)" # str
+              , margin: "calc((" <> space <> "/ 2)" # str
-                }
+              }
-            }
+          }

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)