Update framer motion

.storybook/main.js

@@ -1,4 +1,7 @@
 module.exports = {
-  stories: ['../output/**/*.Story/index.js'],
-  addons: []
-};
+  core: {
+    builder: "webpack5",
+  },
+  stories: ["../output/**/*.Story/index.js"],
+  addons: [],
+}

.vscode/settings.json

@@ -1,6 +1,6 @@
 {
   "editor.formatOnSave": true,
-  "workbench.colorTheme": "Kai Light Accent",
+  "workbench.colorTheme": "Abyss",
   "search.useGlobalIgnoreFiles": true,
   "files.watcherExclude": {
     "**/.spago/**": true,

package.json

@@ -9,9 +9,11 @@
   "devDependencies": {
     "@babel/core": "^7.10.5",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.4.2",
-    "@storybook/addons": "^6.3.4",
-    "@storybook/react": "^6.3.4",
-    "@storybook/theming": "^6.3.4",
+    "@storybook/addons": "^6.4.9",
+    "@storybook/builder-webpack5": "^6.4.9",
+    "@storybook/manager-webpack5": "^6.4.9",
+    "@storybook/react": "^6.4.9",
+    "@storybook/theming": "^6.4.9",
     "@testing-library/react": "^11.0.4",
     "@testing-library/user-event": "^12.1.7",
     "babel-loader": "^8.1.0",
@@ -20,17 +22,15 @@
     "html-webpack-plugin": "^4.5.0",
     "jsdom": "^16.3.0",
     "jsdom-global": "^3.0.2",
-    "purescript": "^0.14.3",
     "react-refresh": "^0.8.3",
     "rimraf": "^3.0.2",
     "source-map": "GerHobbelt/source-map#patch-8",
     "source-map-loader": "^1.1.2",
-    "spago": "^0.20.3",
     "svg2psreact": "^2.1.0",
-    "webpack": "^4.0.0",
-    "webpack-cli": "^4.0.0",
-    "webpack-dev-server": "^3.11.0",
-    "webpack-merge": "^5.0.9"
+    "webpack": "^5.0.0",
+    "webpack-cli": "^4.9.1",
+    "webpack-dev-server": "^4.6.0",
+    "webpack-merge": "^5.8.0"
   },
   "scripts": {
     "clean": "rimraf node_modules output dce-output .spago dist/* *.lock dist",
@@ -55,9 +55,9 @@
     "@emotion/react": "^11.4.0",
     "@popperjs/core": "^2.6.0",
     "downshift": "^6.1.2",
-    "framer-motion": "^4.0.3",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0",
+    "framer-motion": "^5.3.3",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
     "react-intersection-observer": "^8.32.0",
     "react-popper": "^2.2.4",
     "react-syntax-highlighter": "^15.3.1"

src/Yoga/Block/Atom/Segmented/View/ActiveIndicator.purs

@@ -6,6 +6,7 @@ import Control.MonadZero as MZ
 import Data.Traversable (traverse)
 import Data.TwoOrMore (TwoOrMore)
 import Data.TwoOrMore as TwoOrMore
+import Effect.Class.Console as Console
 import Effect.Unsafe (unsafePerformEffect)
 import Foreign.Object as Object
 import Framer.Motion (VariantLabel)
@@ -40,7 +41,7 @@ component =
         \(props ∷ Props) -> React.do
           maybeAnimationVariants /\ setVariants <- useState' Nothing
           variantIndex /\ modVariantIndex <- useState props.activeItemIndex
-          maybeDragX /\ setDragX <- useState' Nothing
+          maybeDragXRef <- useRef Nothing
           { scrollX, scrollY } <- useScrollPosition
           activeLeft <- useMotionValue 0.0
           activeWidth <- useMotionValue 0.0
@@ -50,14 +51,16 @@ component =
               unless (maybeAnimationVariants == Just styles) do
                 setVariants (Just styles)
             mempty
-          useLayoutEffect maybeDragX do
-            case maybeDragX, maybeAnimationVariants of
-              Just x, Just animationVariants -> do
-                let { left, width } = handleDrag { activeItemIndex: props.activeItemIndex, animationVariants, x }
-                activeLeft # MotionValue.set left
-                activeWidth # MotionValue.set width
-              _, _ -> mempty
-            mempty
+          let
+            setDragXRef new = do
+              writeRef maybeDragXRef new
+              maybeDragX <- readRef maybeDragXRef
+              case maybeDragX, maybeAnimationVariants of
+                Just x, Just animationVariants -> do
+                  let { left, width } = handleDrag { activeItemIndex: props.activeItemIndex, animationVariants, x }
+                  activeLeft # MotionValue.set left
+                  activeWidth # MotionValue.set width
+                _, _ -> mempty
           useEffect props.activeItemIndex do
             modVariantIndex (const props.activeItemIndex)
             mempty
@@ -84,63 +87,66 @@ component =
                   { className: "ry-active-segmented-element-wrapper"
                   , css: Style.activeElementWrapper
                   , children:
-                    [ Emotion.element Motion.div
-                        { css: Style.activeElement
-                        , layout: Motion.layout true
-                        , custom: Motion.customProp (({ childRefs: props.activeItemRefs, scrollX, scrollY }) ∷ Custom)
-                        , variants
-                        , className: "ry-active-segmented-element"
-                        , initial: Motion.initial $ indexToVariant props.activeItemIndex
-                        , drag: Motion.drag "x"
-                        , dragMomentum: Motion.dragMomentum false
-                        , animate: Motion.animate $ indexToVariant variantIndex
-                        , style:
-                          css
-                            { left: activeLeft
-                            , width: activeWidth
-                            }
-                        , whileTap: Motion.whileTap $ css { scaleY: 0.8, scaleX: 0.95, y: -1.0 }
-                        , onDragStart:
-                          Motion.onDragStart \_ pi -> do
-                            maybeBbox <- getBoundingBoxFromRef (TwoOrMore.head props.activeItemRefs)
-                            for_ maybeBbox \bbox ->
-                              setDragX (Just (pi.point.x - bbox.left))
-                        , onDrag:
-                          Motion.onDrag \_ pi -> do
-                            when (isJust maybeDragX) do
-                              maybeBbox <- getBoundingBoxFromRef (TwoOrMore.head props.activeItemRefs)
-                              for_ maybeBbox \bbox ->
-                                setDragX (Just (pi.point.x - bbox.left))
-                        , onDragEnd:
-                          Motion.onDragEnd \_ _ -> do
-                            let
-                              x = maybeDragX # fromMaybe' \_ -> unsafeCrashWith "no x"
-                              newIdx =
-                                findOverlapping
-                                  props.activeItemIndex
-                                  animationVariants
-                                  x
-                              newItem = fromMaybe'
-                                (\_ -> TwoOrMore.head props.buttonContents) 
-                                (props.buttonContents TwoOrMore.!! newIdx) 
-                              v =
-                                animationVariants TwoOrMore.!! newIdx
-                                  # fromMaybe' \_ -> unsafeCrashWith "omg"
-                            activeLeft # MotionValue.set v.left
-                            activeWidth # MotionValue.set v.width
-                            props.updateActiveItem newItem newIdx
-                            setDragX Nothing
-                        , dragElastic: Motion.dragElastic false
-                        , dragConstraints: Motion.dragConstraintsBoundingBox { left: 0, right: 0, top: 0, bottom: 0 }
-                        , transition:
-                          Motion.transition
-                            { type: "tween"
-                            , duration: if isJust maybeDragX then 0.0 else 0.167
-                            , ease: "easeOut"
-                            }
-                        , _aria: Object.fromHomogeneous { hidden: "true" }
-                        }
-                    ]
+                      [ Emotion.element Motion.div
+                          { css: Style.activeElement
+                          , layout: Motion.layout true
+                          , custom: Motion.customProp (({ childRefs: props.activeItemRefs, scrollX, scrollY }) ∷ Custom)
+                          , variants
+                          , className: "ry-active-segmented-element"
+                          , initial: Motion.initial $ indexToVariant props.activeItemIndex
+                          , drag: Motion.drag "x"
+                          , dragMomentum: Motion.dragMomentum false
+                          , animate: Motion.animate $ indexToVariant variantIndex
+                          , style:
+                              css
+                                { left: activeLeft
+                                , width: activeWidth
+                                }
+                          , whileTap: Motion.whileTap $ css { scaleY: 0.8, scaleX: 0.95, y: -1.0 }
+                          , onDragStart:
+                              Motion.onDragStart \_ pi -> do
+                                maybeBbox <- getBoundingBoxFromRef (TwoOrMore.head props.activeItemRefs)
+                                for_ maybeBbox \bbox ->
+                                  setDragXRef (Just (pi.point.x - bbox.left))
+                          , onDrag:
+                              Motion.onDrag \_ pi -> do
+                                Console.log "Marlene on the wall"
+                                maybeDragX <- readRef maybeDragXRef
+                                when (isJust maybeDragX) do
+                                  maybeBbox <- getBoundingBoxFromRef (TwoOrMore.head props.activeItemRefs)
+                                  for_ maybeBbox \bbox ->
+                                    setDragXRef (Just (pi.point.x - bbox.left))
+                          , onDragEnd:
+                              Motion.onDragEnd \_ _ -> do
+                                maybeDragX <- readRef maybeDragXRef
+                                let
+                                  x = maybeDragX # fromMaybe' \_ -> unsafeCrashWith "no x"
+                                  newIdx =
+                                    findOverlapping
+                                      props.activeItemIndex
+                                      animationVariants
+                                      x
+                                  newItem = fromMaybe'
+                                    (\_ -> TwoOrMore.head props.buttonContents)
+                                    (props.buttonContents TwoOrMore.!! newIdx)
+                                  v =
+                                    animationVariants TwoOrMore.!! newIdx
+                                      # fromMaybe' \_ -> unsafeCrashWith "omg"
+                                activeLeft # MotionValue.set v.left
+                                activeWidth # MotionValue.set v.width
+                                props.updateActiveItem newItem newIdx
+                                writeRef maybeDragXRef Nothing
+                          , dragElastic: Motion.dragElastic false
+                          , dragConstraints: Motion.dragConstraintsBoundingBox { left: 0, right: 0, top: 0, bottom: 0 }
+                          , transition:
+                              Motion.transition
+                                { type: "tween"
+                                , duration: if isJust (unsafePerformEffect (readRef maybeDragXRef)) then 0.0 else 0.167
+                                , ease: "easeOut"
+                                }
+                          , _aria: Object.fromHomogeneous { hidden: "true" }
+                          }
+                      ]
                   }
 
 getStyles ∷ TwoOrMore (Ref (Nullable Node)) -> Effect (TwoOrMore BBox)
@@ -177,12 +183,12 @@ findOverlapping activeIndex styles x =
     let tooFarRight = MZ.guard (x >= lst.left) $> TwoOrMore.length styles - 1
     TwoOrMore.findIndex inside styles <|> tooFarLeft <|> tooFarRight
 
-handleDrag ∷
-  { activeItemIndex ∷ Int
-  , animationVariants ∷ TwoOrMore BBox
-  , x ∷ Number
-  } ->
-  { left ∷ Number, width ∷ Number }
+handleDrag
+  ∷ { activeItemIndex ∷ Int
+    , animationVariants ∷ TwoOrMore BBox
+    , x ∷ Number
+    }
+  -> { left ∷ Number, width ∷ Number }
 handleDrag { x, activeItemIndex, animationVariants } = do
   let idx = findOverlapping activeItemIndex animationVariants x
   let av = animationVariants
@@ -223,8 +229,7 @@ handleDrag { x, activeItemIndex, animationVariants } = do
   let width = right - left
   if x < firstVariant.left then
     { left: firstVariant.left, width: firstVariant.width }
-  else
-    if x >= lastVariant.left + lastVariant.width then do
-      { left: lastVariant.left, width: lastVariant.width }
-    else do
-      { left, width }
+  else if x >= lastVariant.left + lastVariant.width then do
+    { left: lastVariant.left, width: lastVariant.width }
+  else do
+    { left, width }

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

@@ -71,32 +71,34 @@ rawComponent =
       buttonRef <- useRef null
       toggleRef <- useRef null
       tapState <- useRef TapNotAllowed
-      dragState /\ setDragState <- React.useState' NotDragging
-      useEffect dragState do
-        case dragState of
-          NotDragging -> mempty
-          Dragging _ -> do
-            writeRef tapState TapNotAllowed
-          DragDone { startX, endX } -> do
-            maybeBbox <- getBoundingBoxFromRef buttonRef
-            for_ maybeBbox \bbox -> do
-              if endX - startX <= (bbox.left - startX) + (bbox.width / 2.0) then do
-                setTogglePosition ToggleIsLeft
-              else do
-                setTogglePosition ToggleIsRight
-        mempty
+      dragStateRef <- useRef NotDragging
+      let
+        setDragState new = do
+          writeRef dragStateRef new
+          dragState <- readRef dragStateRef
+          case dragState of
+            NotDragging -> mempty
+            Dragging _ -> do
+              writeRef tapState TapNotAllowed
+            DragDone { startX, endX } -> do
+              maybeBbox <- getBoundingBoxFromRef buttonRef
+              for_ maybeBbox \bbox -> do
+                if endX - startX <= (bbox.left - startX) + (bbox.width / 2.0) then do
+                  setTogglePosition ToggleIsLeft
+                else do
+                  setTogglePosition ToggleIsRight
       let
         buttonVariants =
           { left:
-            { backgroundColor:
-              (Emotion.str <<< Color.cssStringRGBA <$> props.backgroundLeft)
-                ?|| (Emotion.str colour.backgroundLayer3)
-            }
+              { backgroundColor:
+                  (Emotion.str <<< Color.cssStringRGBA <$> props.backgroundLeft)
+                    ?|| (Emotion.str colour.backgroundLayer3)
+              }
           , right:
-            { backgroundColor:
-              (Emotion.str <<< Color.cssStringRGBA <$> props.backgroundRight)
-                ?|| (Emotion.str colour.success)
-            }
+              { backgroundColor:
+                  (Emotion.str <<< Color.cssStringRGBA <$> props.backgroundRight)
+                    ?|| (Emotion.str colour.success)
+              }
           }
         buttonVariant = Motion.makeVariantLabels buttonVariants
       -- components
@@ -108,40 +110,43 @@ rawComponent =
             , css: Style.button <>? props.css
             , variants: Motion.variants buttonVariants
             , initial:
-              Motion.initial case togglePosition of
-                ToggleIsRight -> buttonVariant.right
-                ToggleIsLeft -> buttonVariant.left
+                Motion.initial case togglePosition of
+                  ToggleIsRight -> buttonVariant.right
+                  ToggleIsLeft -> buttonVariant.left
             , animate:
-              Motion.animate case togglePosition of
-                ToggleIsRight -> buttonVariant.right
-                ToggleIsLeft -> buttonVariant.left
+                Motion.animate case togglePosition of
+                  ToggleIsRight -> buttonVariant.right
+                  ToggleIsLeft -> buttonVariant.left
             , value: show togglePosition
             , onClick: handler preventDefault \_ -> setTogglePosition (flipToggle togglePosition)
             , style: props.style
             , _data: Object.singleton "testid" "toggle-testid"
             , role: "switch"
             , _aria:
-              Object.fromHomogeneous
-                { checked:
-                  case togglePosition of
-                    ToggleIsLeft -> "false"
-                    ToggleIsRight -> "true"
-                }
-                <>? (props.ariaLabel <#> Object.singleton "label")
+                Object.fromHomogeneous
+                  { checked:
+                      case togglePosition of
+                        ToggleIsLeft -> "false"
+                        ToggleIsRight -> "true"
+                  }
+                  <>? (props.ariaLabel <#> Object.singleton "label")
             , ref: buttonRef
             , children
             }
         textContainer =
           div
-            </* { className: "ry-toggle-text"
+            </*
+              { className: "ry-toggle-text"
               , css: Style.toggleTextContainer
               }
         textOnContainer =
           div
-            </* { className: "ry-toggle-text-on"
+            </*
+              { className: "ry-toggle-text-on"
               , css: Style.toggleText
               }
-            /> [ guard (togglePosition == ToggleIsRight)
+            />
+              [ guard (togglePosition == ToggleIsRight)
                   $ textOn
                       [ props.left
                           ?|| (Icon.component </> { icon: SVGIcon.on, stroke: Style.successTextColour })
@@ -149,10 +154,12 @@ rawComponent =
               ]
         textOffContainer =
           div
-            </* { className: "ry-toggle-text-off"
+            </*
+              { className: "ry-toggle-text-off"
               , css: Style.toggleText
               }
-            /> [ guard (togglePosition == ToggleIsLeft)
+            />
+              [ guard (togglePosition == ToggleIsLeft)
                   $ textOff
                       [ props.right
                           ?|| (Icon.component </> { icon: SVGIcon.off, stroke: Style.disabledTextColour })
@@ -160,7 +167,8 @@ rawComponent =
               ]
         textOn =
           Motion.div
-            </ { className: "ry-toggle-text-container"
+            </
+              { className: "ry-toggle-text-container"
               , key: "ry-toggle-text-on-container"
               , initial: Motion.initial $ false
               , animate: Motion.animate $ css { scale: 1, opacity: 1 }
@@ -168,7 +176,8 @@ rawComponent =
               }
         textOff =
           Motion.div
-            </ { className: "ry-toggle-text-container"
+            </
+              { className: "ry-toggle-text-container"
               , key: "ry-toggle-text-off-container"
               , initial: Motion.initial $ false
               , animate: Motion.animate $ css { scale: 1, opacity: 1 }
@@ -177,11 +186,12 @@ rawComponent =
         animateTextPresence = Motion.animatePresence </ {}
         toggle =
           toggleCircle
-            </> { buttonRef
+            </>
+              { buttonRef
               , toggleRef
               , togglePosition
               , onChange: setTogglePosition
-              , dragState
+              , dragStateRef
               , setDragState
               , tapState
               }
@@ -198,7 +208,7 @@ toggleCircle ∷
     , toggleRef ∷ NodeRef
     , buttonRef ∷ NodeRef
     , togglePosition ∷ TogglePosition
-    , dragState ∷ DragState
+    , dragStateRef ∷ Ref DragState
     , setDragState ∷ DragState -> Effect Unit
     , tapState ∷ Ref TappingState
     }
@@ -206,14 +216,14 @@ toggleCircle =
   unsafePerformEffect
     $ reactComponent "ToggleCircle" do
         \( { togglePosition
-          , onChange
-          , toggleRef
-          , buttonRef
-          , dragState
-          , setDragState
-          , tapState
-          }
-        ) -> React.do
+           , onChange
+           , toggleRef
+           , buttonRef
+           , dragStateRef
+           , setDragState
+           , tapState
+           }
+         ) -> React.do
           maxLeft /\ setMaxLeft <- useState' Nothing
           yPos /\ setYPos <- useState' Nothing
           useEffectAlways do
@@ -236,7 +246,8 @@ toggleCircle =
             toggleVariant = Motion.makeVariantLabels toggleVariants
           pure
             $ Motion.div
-            </*> { className: "ry-toggle-toggle"
+            </*>
+              { className: "ry-toggle-toggle"
               , layout: Motion.layout true
               , onClick: handler stopPropagation mempty
               , onTouchStart: handler stopPropagation mempty
@@ -247,67 +258,70 @@ toggleCircle =
               , key: if isNothing maxLeft then "initialising" else show yPos
               , dragElastic: Motion.dragElastic false
               , dragConstraints:
-                Motion.dragConstraintsBoundingBox
-                  { left:
-                    case togglePosition of
-                      ToggleIsLeft -> zero
-                      ToggleIsRight -> -(maxLeft <#> (_ - Style.dragWidthDelta) # fromMaybe 0.0)
-                  , right:
-                    case togglePosition of
-                      ToggleIsRight -> zero
-                      ToggleIsLeft -> maxLeft <#> (_ - Style.dragWidthDelta) # fromMaybe 0.0
-                  }
+                  Motion.dragConstraintsBoundingBox
+                    { left:
+                        case togglePosition of
+                          ToggleIsLeft -> zero
+                          ToggleIsRight -> 10.0 -- [WARN] Maybe this breaks down
+                    , right:
+                        case togglePosition of
+                          ToggleIsRight -> 26.0 -- [WARN] Maybe this breaks down
+                          ToggleIsLeft -> maxLeft <#> (_ - Style.dragWidthDelta) # fromMaybe 0.0
+                    }
               , variants: Motion.variants toggleVariants
               , transition: Motion.transition { type: "tween", duration: 0.33, ease: "easeOut" }
               , whileTap:
-                Motion.prop
-                  $ css
-                      { width: "calc(var(--s2)*0.85 + 10px)"
-                      , left:
-                        case togglePosition of
-                          ToggleIsLeft -> Style.toggleLeft
-                          ToggleIsRight -> "calc(" <> Style.toggleLeft <> " - 10px)"
-                      , transition: { type: "tween", duration: 0.10, ease: "easeInOut" }
-                      }
+                  Motion.prop
+                    $ css
+                        { width: "calc(var(--s2)*0.85 + 10px)"
+                        , left:
+                            case togglePosition of
+                              ToggleIsLeft -> Style.toggleLeft
+                              ToggleIsRight -> "calc(" <> Style.toggleLeft <> " - 10px)"
+                        , transition: { type: "tween", duration: 0.10, ease: "easeInOut" }
+                        }
               , onTapStart:
-                Motion.onTapStart \_ _ -> writeRef tapState TapAllowed
+                  Motion.onTapStart \_ _ -> writeRef tapState TapAllowed
               , onTap:
-                Motion.onTap \_ _ -> do
-                  ts <- readRef tapState
-                  case ts of
-                    TapAllowed -> onChange (flipToggle togglePosition)
-                    _ -> mempty
-                  mempty
+                  Motion.onTap \_ _ -> do
+                    ts <- readRef tapState
+                    case ts of
+                      TapAllowed -> onChange (flipToggle togglePosition)
+                      _ -> mempty
+                    mempty
               , onTapCancel:
-                Motion.onTapCancel \_ _ -> do
-                  writeRef tapState TapNotAllowed
-                  mempty
+                  Motion.onTapCancel \_ _ -> do
+                    writeRef tapState TapNotAllowed
+                    mempty
               , initial: Motion.initial false
               , animate:
-                Motion.animate case togglePosition of
-                  ToggleIsLeft -> toggleVariant.left
-                  ToggleIsRight -> toggleVariant.right
+                  Motion.animate case togglePosition of
+                    ToggleIsLeft -> toggleVariant.left
+                    ToggleIsRight -> toggleVariant.right
               , onDragStart:
-                Motion.onDragStart \_ pi -> do
-                  maybeBBox <- getBoundingBoxFromRef toggleRef
-                  let x = maybeBBox <#> \bbox -> bbox.left + (bbox.width / 2.0)
-                  setDragState
-                    $ Dragging
-                        { startX: x # fromMaybe pi.point.x, currentX: pi.point.x
-                        }
+                  Motion.onDragStart \_ pi -> do
+                    maybeBBox <- getBoundingBoxFromRef toggleRef
+                    let x = maybeBBox <#> \bbox -> bbox.left + (bbox.width / 2.0)
+                    setDragState
+                      $ Dragging
+                          { startX: x # fromMaybe pi.point.x
+                          , currentX: pi.point.x
+                          }
               , onDrag:
-                Motion.onDrag \_ pi -> do
-                  case dragState of
-                    Dragging { startX } -> do
-                      setDragState $ Dragging { startX, currentX: pi.point.x }
-                    other -> Console.warn $ i "Unexpected drag state " (show other) " in onDragEvent"
+                  Motion.onDrag \_ pi -> do
+                    dragState <- readRef dragStateRef
+                    case dragState of
+                      Dragging { startX } -> do
+                        setDragState $ Dragging { startX, currentX: pi.point.x }
+                      other -> Console.warn $ i "Unexpected drag state " (show other) " in onDragEvent"
               , onDragEnd:
-                Motion.onDragEnd \_ _ -> do
-                  case dragState of
-                    Dragging { startX } -> do
-                      maybeBBox <- getBoundingBoxFromRef toggleRef
-                      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 onDragEndEvent"
+                  Motion.onDragEnd \_ _ -> do
+                    dragState <- readRef dragStateRef
+                    case dragState of
+                      Dragging { startX } -> do
+                        maybeBBox <- getBoundingBoxFromRef toggleRef
+                        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 onDragEndEvent"
               , ref: toggleRef
               }

src/Yoga/Block/Icon/SVG/BG.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 800 800"><path fill="#303" d="M0 0h800v800H0z"/><g fill="none" stroke="#404" stroke-width="4.1"><path d="m769 229 268 31.9M927 880 731 737l-211-77-211-122-269 61 255 165-168.5 115.5L40 599l-237-106 299-111-133-153L126.5 79.5-69-63"/><path d="m-31 229 268 32 153 121 213 111-294.5 44.5-207-156M370 905l-75-141"/><path d="m520 660 58 182 153-105 109-138-237-106-83 167-225 104 14-226 81-156 149-113 230-40L577.5 41.5 370 105 295-36 126.5 79.5 237 261 102 382 40 599-69 737l196 143"/><path d="m520-140 58.5 182.5L731-63M603 493l-64-224-302-8 133-156m532 277L539 269M390 382H102"/><path d="m-222 42 348.5 37.5L370 105l169 164 38.5-227.5L927 80 769 229l133 153-299 111 128 244M295-36l282.5 77.5M578 842l-283-78M40-201l87 281m-25 302-363-113"/></g><g fill="#505"><circle cx="769" cy="229" r="7"/><circle cx="539" cy="269" r="7"/><circle cx="603" cy="493" r="7"/><circle cx="731" cy="737" r="7"/><circle cx="520" cy="660" r="7"/><circle cx="309" cy="538" r="7"/><circle cx="295" cy="764" r="7"/><circle cx="40" cy="599" r="7"/><circle cx="102" cy="382" r="7"/><circle cx="127" cy="80" r="7"/><circle cx="370" cy="105" r="7"/><circle cx="578" cy="42" r="7"/><circle cx="237" cy="261" r="7"/><circle cx="390" cy="382" r="7"/></g></svg>

src/Yoga/Block/Icon/SVG/Bg.purs

@@ -0,0 +1,116 @@
+module Yoga.Block.Icon.SVG.Bg where
+
+import React.Basic (JSX)
+import React.Basic.DOM as R
+import React.Basic.DOM.SVG as SVG
+
+bg :: JSX
+bg = SVG.svg
+     { xmlns: "http://www.w3.org/2000/svg"
+     , width: "200"
+     , height: "200"
+     , viewBox: "0 0 800 800"
+     , children: 
+     [ SVG.path
+       { fill: "#303"
+       , d: "M0 0h800v800H0z"
+       }
+     , SVG.g
+       { fill: "none"
+       , stroke: "#404"
+       , strokeWidth: "4.1"
+       , children: 
+       [ SVG.path
+         { d: "m769 229 268 31.9M927 880 731 737l-211-77-211-122-269 61 255 165-168.5 115.5L40 599l-237-106 299-111-133-153L126.5 79.5-69-63"
+         }
+       , SVG.path
+         { d: "m-31 229 268 32 153 121 213 111-294.5 44.5-207-156M370 905l-75-141"
+         }
+       , SVG.path
+         { d: "m520 660 58 182 153-105 109-138-237-106-83 167-225 104 14-226 81-156 149-113 230-40L577.5 41.5 370 105 295-36 126.5 79.5 237 261 102 382 40 599-69 737l196 143"
+         }
+       , SVG.path
+         { d: "m520-140 58.5 182.5L731-63M603 493l-64-224-302-8 133-156m532 277L539 269M390 382H102"
+         }
+       , SVG.path
+         { d: "m-222 42 348.5 37.5L370 105l169 164 38.5-227.5L927 80 769 229l133 153-299 111 128 244M295-36l282.5 77.5M578 842l-283-78M40-201l87 281m-25 302-363-113"
+         }
+       ]
+       }
+     , SVG.g
+       { fill: "#505"
+       , children: 
+       [ SVG.circle
+         { cx: "769"
+         , cy: "229"
+         , r: "7"
+         }
+       , SVG.circle
+         { cx: "539"
+         , cy: "269"
+         , r: "7"
+         }
+       , SVG.circle
+         { cx: "603"
+         , cy: "493"
+         , r: "7"
+         }
+       , SVG.circle
+         { cx: "731"
+         , cy: "737"
+         , r: "7"
+         }
+       , SVG.circle
+         { cx: "520"
+         , cy: "660"
+         , r: "7"
+         }
+       , SVG.circle
+         { cx: "309"
+         , cy: "538"
+         , r: "7"
+         }
+       , SVG.circle
+         { cx: "295"
+         , cy: "764"
+         , r: "7"
+         }
+       , SVG.circle
+         { cx: "40"
+         , cy: "599"
+         , r: "7"
+         }
+       , SVG.circle
+         { cx: "102"
+         , cy: "382"
+         , r: "7"
+         }
+       , SVG.circle
+         { cx: "127"
+         , cy: "80"
+         , r: "7"
+         }
+       , SVG.circle
+         { cx: "370"
+         , cy: "105"
+         , r: "7"
+         }
+       , SVG.circle
+         { cx: "578"
+         , cy: "42"
+         , r: "7"
+         }
+       , SVG.circle
+         { cx: "237"
+         , cy: "261"
+         , r: "7"
+         }
+       , SVG.circle
+         { cx: "390"
+         , cy: "382"
+         , r: "7"
+         }
+       ]
+       }
+     ]
+     }

src/Yoga/Block/Icon/SVG/HeroiconCalendar.purs

@@ -0,0 +1,22 @@
+module Yoga.Block.Icon.SVG.HeroiconCalendar where
+
+import React.Basic (JSX)
+import React.Basic.DOM as R
+import React.Basic.DOM.SVG as SVG
+
+heroiconCalendar :: JSX
+heroiconCalendar = SVG.svg
+     { xmlns: "http://www.w3.org/2000/svg"
+     , className:"h-6 w-6"
+     , fill: "none"
+     , viewBox: "0 0 24 24"
+     , stroke: "currentColor"
+     , children: 
+     [ SVG.path
+       { strokeLinecap: "round"
+       , strokeLinejoin: "round"
+       , strokeWidth: "2"
+       , d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2z"
+       }
+     ]
+     }

src/Yoga/Block/Icon/SVG/HeroiconCalendar.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2z"/></svg>

src/Yoga/Block/Icon/SVG/HeroiconClock.purs

@@ -0,0 +1,22 @@
+module Yoga.Block.Icon.SVG.HeroiconClock where
+
+import React.Basic (JSX)
+import React.Basic.DOM as R
+import React.Basic.DOM.SVG as SVG
+
+heroiconClock :: JSX
+heroiconClock = SVG.svg
+     { xmlns: "http://www.w3.org/2000/svg"
+     , className:"h-6 w-6"
+     , fill: "none"
+     , viewBox: "0 0 24 24"
+     , stroke: "currentColor"
+     , children: 
+     [ SVG.path
+       { strokeLinecap: "round"
+       , strokeLinejoin: "round"
+       , strokeWidth: "2"
+       , d: "M12 8v4l3 3m6-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0z"
+       }
+     ]
+     }

src/Yoga/Block/Icon/SVG/HeroiconClock.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0z"/></svg>

src/Yoga/Block/Icon/SVG/HeroiconGroup.purs

@@ -0,0 +1,22 @@
+module Yoga.Block.Icon.SVG.HeroiconGroup where
+
+import React.Basic (JSX)
+import React.Basic.DOM as R
+import React.Basic.DOM.SVG as SVG
+
+heroiconGroup :: JSX
+heroiconGroup = SVG.svg
+     { xmlns: "http://www.w3.org/2000/svg"
+     , className:"h-6 w-6"
+     , fill: "none"
+     , viewBox: "0 0 24 24"
+     , stroke: "currentColor"
+     , children: 
+     [ SVG.path
+       { strokeLinecap: "round"
+       , strokeLinejoin: "round"
+       , strokeWidth: "2"
+       , d: "M17 20h5v-2a3 3 0 0 0-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 0 1 5.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 0 1 9.288 0M15 7a3 3 0 1 1-6 0 3 3 0 0 1 6 0zm6 3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zM7 10a2 2 0 1 1-4 0 2 2 0 0 1 4 0z"
+       }
+     ]
+     }

src/Yoga/Block/Icon/SVG/HeroiconGroup.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 0 0-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 0 1 5.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 0 1 9.288 0M15 7a3 3 0 1 1-6 0 3 3 0 0 1 6 0zm6 3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zM7 10a2 2 0 1 1-4 0 2 2 0 0 1 4 0z"/></svg>

src/Yoga/Block/Icon/SVG/HeroiconMoon.purs

@@ -0,0 +1,22 @@
+module Yoga.Block.Icon.SVG.HeroiconMoon where
+
+import React.Basic (JSX)
+import React.Basic.DOM as R
+import React.Basic.DOM.SVG as SVG
+
+heroiconMoon :: JSX
+heroiconMoon = SVG.svg
+     { xmlns: "http://www.w3.org/2000/svg"
+     , className:"h-6 w-6"
+     , fill: "none"
+     , viewBox: "0 0 24 24"
+     , stroke: "currentColor"
+     , children: 
+     [ SVG.path
+       { strokeLinecap: "round"
+       , strokeLinejoin: "round"
+       , strokeWidth: "2"
+       , d: "M20.354 15.354A9 9 0 0 1 8.646 3.646 9.003 9.003 0 0 0 12 21a9.003 9.003 0 0 0 8.354-5.646z"
+       }
+     ]
+     }

src/Yoga/Block/Icon/SVG/HeroiconMoon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 0 1 8.646 3.646 9.003 9.003 0 0 0 12 21a9.003 9.003 0 0 0 8.354-5.646z"/></svg>

src/Yoga/Block/Icon/SVG/HeroiconSun.purs

@@ -0,0 +1,22 @@
+module Yoga.Block.Icon.SVG.HeroiconSun where
+
+import React.Basic (JSX)
+import React.Basic.DOM as R
+import React.Basic.DOM.SVG as SVG
+
+heroiconSun :: JSX
+heroiconSun = SVG.svg
+     { xmlns: "http://www.w3.org/2000/svg"
+     , className:"h-6 w-6"
+     , fill: "none"
+     , viewBox: "0 0 24 24"
+     , stroke: "currentColor"
+     , children: 
+     [ SVG.path
+       { strokeLinecap: "round"
+       , strokeLinejoin: "round"
+       , strokeWidth: "2"
+       , d: "M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364-.707-.707M6.343 6.343l-.707-.707m12.728 0-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 1 1-8 0 4 4 0 0 1 8 0z"
+       }
+     ]
+     }

src/Yoga/Block/Icon/SVG/HeroiconSun.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364-.707-.707M6.343 6.343l-.707-.707m12.728 0-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 1 1-8 0 4 4 0 0 1 8 0z"/></svg>

src/Yoga/Block/Icon/SVG/TMP.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 1200 1527" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"><path d="m0 503.083 22-3.409c22-3.409 67-10.227 111-13.635 45-3.409 89-3.409 134 6.817 44 10.227 89 30.679 133 34.088 44 3.409 89-10.226 133-13.635 45-3.409 89 3.409 134 27.27 44 23.862 89 64.767 133 68.176 44 3.409 89-30.679 133-44.314 45-13.635 89-6.818 134 6.817 44 13.635 89 34.088 111 44.314l22 10.227V1211H0V503.083z" style="fill:url(#a)" transform="translate(0 -484)"/><path d="m0 655.221 22-1.901c22-1.901 67-5.703 111-3.802 45 1.901 89 9.505 134 20.911 44 11.405 89 26.613 133 26.613s89-15.208 133-15.208c45 0 89 15.208 134 22.812 44 7.603 89 7.603 133-5.703 44-13.307 89-39.92 133-41.821 45-1.901 89 20.91 134 34.217 44 13.307 89 17.109 111 19.01l22 1.9V1318H0V655.221z" style="fill:url(#b)" transform="translate(0 -484)"/><path d="m0 848.096 33 8.219c34 8.219 100 24.658 167 20.548 67-4.11 133-28.767 200-45.205C467 815.219 533 807 600 807s133 8.219 200 20.548c67 12.329 133 28.767 200 28.767s133-16.438 167-24.657l33-8.22V1377H0V848.096z" style="fill:url(#c)" transform="translate(0 -484)"/><path d="m0 925.667 50 18c50 18 150 54 250 54s200-36 300-60 200-36 300-18 200 66 250 90.003l50 24V1683H0V925.667z" style="fill:url(#d)" transform="translate(0 -484)"/><path d="m0 1056.25 25-2.42c25-2.42 75-7.26 125 0s100 26.62 150 38.72c50 12.1 100 16.94 150 14.52 50-2.42 100-12.1 150-16.94 50-4.84 100-4.84 150 2.42s100 21.77 150 36.29 100 29.04 150 26.62c50-2.42 100-21.78 125-31.46l25-9.68V1669H0v-612.75z" style="fill:url(#e)" transform="translate(0 -484)"/><path d="M0 1737v-528.85c28.5-.02 100 12.03 150 0s100-18.9 150-10.31c50 8.59 100 32.66 150 32.66s100-24.07 150-25.79c50-1.71 100 18.91 150 32.66 50 13.75 100 20.63 150 15.47 50-5.16 100-22.34 150-24.06 50-1.72 100 12.03 125 18.9l25 6.88V1737H0z" style="fill:url(#f)" transform="translate(0 -484)"/><path d="m0 1315 40 13.4c40 13.41 120 40.21 200 58.08 80 17.87 160 26.81 240 13.41 80-13.41 160-49.15 240-35.75 80 13.41 160 75.96 240 89.36 80 13.4 160-22.34 200-40.21l40-17.87V2011H0v-696z" style="fill:#5c0bc2" transform="translate(0 -484)"/><defs><linearGradient id="a" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="rotate(90 58 542) scale(427)"><stop offset="0" style="stop-color:#e683ff;stop-opacity:1"/><stop offset="1" style="stop-color:#ff97f5;stop-opacity:1"/></linearGradient><linearGradient id="b" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 124.08 -124.08 0 600 649)"><stop offset="0" style="stop-color:#cc60ff;stop-opacity:1"/><stop offset="1" style="stop-color:#e062ff;stop-opacity:1"/></linearGradient><linearGradient id="c" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 238.356 -238.356 0 600 731.658)"><stop offset="0" style="stop-color:#a32eff;stop-opacity:1"/><stop offset="1" style="stop-color:#c03cff;stop-opacity:1"/></linearGradient><linearGradient id="d" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 452 -452 0 600 911)"><stop offset="0" style="stop-color:#8600f0;stop-opacity:1"/><stop offset="1" style="stop-color:#b659ff;stop-opacity:1"/></linearGradient><linearGradient id="e" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 359 -359 0 600 1050)"><stop offset="0" style="stop-color:#ca33ff;stop-opacity:1"/><stop offset="0" style="stop-color:#7d17ff;stop-opacity:1"/><stop offset="1" style="stop-color:#843dde;stop-opacity:1"/></linearGradient><linearGradient id="f" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 121.48 -121.48 0 600 1362.52)"><stop offset="0" style="stop-color:#6706e3;stop-opacity:1"/><stop offset="1" style="stop-color:#682de7;stop-opacity:1"/></linearGradient></defs></svg>

src/Yoga/Block/Icon/SVG/Tmp.purs

@@ -0,0 +1,172 @@
+module Yoga.Block.Icon.SVG.Tmp where
+
+import React.Basic (JSX)
+import React.Basic.DOM as R
+import React.Basic.DOM.SVG as SVG
+
+tmp :: JSX
+tmp = SVG.svg
+     { viewBox: "0 0 1200 1527"
+     , xmlns: "http://www.w3.org/2000/svg"
+     , xmlSpace: "preserve"
+     , style: R.css { fillRule: "evenodd", clipRule: "evenodd", strokeLinejoin: "round", strokeMiterlimit: "2" }
+     , children: 
+     [ SVG.path
+       { d: "m0 503.083 22-3.409c22-3.409 67-10.227 111-13.635 45-3.409 89-3.409 134 6.817 44 10.227 89 30.679 133 34.088 44 3.409 89-10.226 133-13.635 45-3.409 89 3.409 134 27.27 44 23.862 89 64.767 133 68.176 44 3.409 89-30.679 133-44.314 45-13.635 89-6.818 134 6.817 44 13.635 89 34.088 111 44.314l22 10.227V1211H0V503.083z"
+       , style: R.css { fill: "url(#a)" }
+       , transform: "translate(0 -484)"
+       }
+     , SVG.path
+       { d: "m0 655.221 22-1.901c22-1.901 67-5.703 111-3.802 45 1.901 89 9.505 134 20.911 44 11.405 89 26.613 133 26.613s89-15.208 133-15.208c45 0 89 15.208 134 22.812 44 7.603 89 7.603 133-5.703 44-13.307 89-39.92 133-41.821 45-1.901 89 20.91 134 34.217 44 13.307 89 17.109 111 19.01l22 1.9V1318H0V655.221z"
+       , style: R.css { fill: "url(#b)" }
+       , transform: "translate(0 -484)"
+       }
+     , SVG.path
+       { d: "m0 848.096 33 8.219c34 8.219 100 24.658 167 20.548 67-4.11 133-28.767 200-45.205C467 815.219 533 807 600 807s133 8.219 200 20.548c67 12.329 133 28.767 200 28.767s133-16.438 167-24.657l33-8.22V1377H0V848.096z"
+       , style: R.css { fill: "url(#c)" }
+       , transform: "translate(0 -484)"
+       }
+     , SVG.path
+       { d: "m0 925.667 50 18c50 18 150 54 250 54s200-36 300-60 200-36 300-18 200 66 250 90.003l50 24V1683H0V925.667z"
+       , style: R.css { fill: "url(#d)" }
+       , transform: "translate(0 -484)"
+       }
+     , SVG.path
+       { d: "m0 1056.25 25-2.42c25-2.42 75-7.26 125 0s100 26.62 150 38.72c50 12.1 100 16.94 150 14.52 50-2.42 100-12.1 150-16.94 50-4.84 100-4.84 150 2.42s100 21.77 150 36.29 100 29.04 150 26.62c50-2.42 100-21.78 125-31.46l25-9.68V1669H0v-612.75z"
+       , style: R.css { fill: "url(#e)" }
+       , transform: "translate(0 -484)"
+       }
+     , SVG.path
+       { d: "M0 1737v-528.85c28.5-.02 100 12.03 150 0s100-18.9 150-10.31c50 8.59 100 32.66 150 32.66s100-24.07 150-25.79c50-1.71 100 18.91 150 32.66 50 13.75 100 20.63 150 15.47 50-5.16 100-22.34 150-24.06 50-1.72 100 12.03 125 18.9l25 6.88V1737H0z"
+       , style: R.css { fill: "url(#f)" }
+       , transform: "translate(0 -484)"
+       }
+     , SVG.path
+       { d: "m0 1315 40 13.4c40 13.41 120 40.21 200 58.08 80 17.87 160 26.81 240 13.41 80-13.41 160-49.15 240-35.75 80 13.41 160 75.96 240 89.36 80 13.4 160-22.34 200-40.21l40-17.87V2011H0v-696z"
+       , style: R.css { fill: "#5c0bc2" }
+       , transform: "translate(0 -484)"
+       }
+     , SVG.defs
+       { children: 
+       [ SVG.linearGradient
+         { id: "a"
+         , x1: "0"
+         , y1: "0"
+         , x2: "1"
+         , y2: "0"
+         , gradientUnits: "userSpaceOnUse"
+         , gradientTransform: "rotate(90 58 542) scale(427)"
+         , children: 
+         [ SVG.stop
+           { offset: "0"
+           , style: R.css { stopColor: "#e683ff", stopOpacity: "1" }
+           }
+         , SVG.stop
+           { offset: "1"
+           , style: R.css { stopColor: "#ff97f5", stopOpacity: "1" }
+           }
+         ]
+         }
+       , SVG.linearGradient
+         { id: "b"
+         , x1: "0"
+         , y1: "0"
+         , x2: "1"
+         , y2: "0"
+         , gradientUnits: "userSpaceOnUse"
+         , gradientTransform: "matrix(0 124.08 -124.08 0 600 649)"
+         , children: 
+         [ SVG.stop
+           { offset: "0"
+           , style: R.css { stopColor: "#cc60ff", stopOpacity: "1" }
+           }
+         , SVG.stop
+           { offset: "1"
+           , style: R.css { stopColor: "#e062ff", stopOpacity: "1" }
+           }
+         ]
+         }
+       , SVG.linearGradient
+         { id: "c"
+         , x1: "0"
+         , y1: "0"
+         , x2: "1"
+         , y2: "0"
+         , gradientUnits: "userSpaceOnUse"
+         , gradientTransform: "matrix(0 238.356 -238.356 0 600 731.658)"
+         , children: 
+         [ SVG.stop
+           { offset: "0"
+           , style: R.css { stopColor: "#a32eff", stopOpacity: "1" }
+           }
+         , SVG.stop
+           { offset: "1"
+           , style: R.css { stopColor: "#c03cff", stopOpacity: "1" }
+           }
+         ]
+         }
+       , SVG.linearGradient
+         { id: "d"
+         , x1: "0"
+         , y1: "0"
+         , x2: "1"
+         , y2: "0"
+         , gradientUnits: "userSpaceOnUse"
+         , gradientTransform: "matrix(0 452 -452 0 600 911)"
+         , children: 
+         [ SVG.stop
+           { offset: "0"
+           , style: R.css { stopColor: "#8600f0", stopOpacity: "1" }
+           }
+         , SVG.stop
+           { offset: "1"
+           , style: R.css { stopColor: "#b659ff", stopOpacity: "1" }
+           }
+         ]
+         }
+       , SVG.linearGradient
+         { id: "e"
+         , x1: "0"
+         , y1: "0"
+         , x2: "1"
+         , y2: "0"
+         , gradientUnits: "userSpaceOnUse"
+         , gradientTransform: "matrix(0 359 -359 0 600 1050)"
+         , children: 
+         [ SVG.stop
+           { offset: "0"
+           , style: R.css { stopColor: "#ca33ff", stopOpacity: "1" }
+           }
+         , SVG.stop
+           { offset: "0"
+           , style: R.css { stopColor: "#7d17ff", stopOpacity: "1" }
+           }
+         , SVG.stop
+           { offset: "1"
+           , style: R.css { stopColor: "#843dde", stopOpacity: "1" }
+           }
+         ]
+         }
+       , SVG.linearGradient
+         { id: "f"
+         , x1: "0"
+         , y1: "0"
+         , x2: "1"
+         , y2: "0"
+         , gradientUnits: "userSpaceOnUse"
+         , gradientTransform: "matrix(0 121.48 -121.48 0 600 1362.52)"
+         , children: 
+         [ SVG.stop
+           { offset: "0"
+           , style: R.css { stopColor: "#6706e3", stopOpacity: "1" }
+           }
+         , SVG.stop
+           { offset: "1"
+           , style: R.css { stopColor: "#682de7", stopOpacity: "1" }
+           }
+         ]
+         }
+       ]
+       }
+     ]
+     }

src/Yoga/Block/Icon/SVG/WhatsAppLogo.purs

@@ -0,0 +1,77 @@
+module Yoga.Block.Icon.SVG.WhatsAppLogo where
+
+import React.Basic (JSX)
+import React.Basic.DOM as R
+import React.Basic.DOM.SVG as SVG
+
+whatsAppLogo :: JSX
+whatsAppLogo = SVG.svg
+     { viewBox: "0 0 1281 1067"
+     , xmlns: "http://www.w3.org/2000/svg"
+     , xmlSpace: "preserve"
+     , style: R.css { fillRule: "evenodd", clipRule: "evenodd", strokeLinejoin: "round", strokeMiterlimit: "2" }
+     , children: 
+     [ SVG.path
+       { d: "m0 287.286 6.333 3.754c26.611 15.791 57.12 24.143 88.231 24.16h.068c95.544 0 173.307-77.745 173.348-173.297.014-46.307-17.997-89.849-50.727-122.603-32.732-32.753-76.251-50.802-122.556-50.821-95.62 0-173.381 77.734-173.419 173.283-.013 32.743 9.148 64.631 26.502 92.224l4.126 6.555-17.517 63.947L0 287.286zm-115.686 66.737 29.589-108.039c-18.25-31.619-27.852-67.489-27.838-104.236.046-114.958 93.603-208.485 208.567-208.485 55.789.024 108.153 21.738 147.533 61.145 39.374 39.41 61.05 91.795 61.031 147.509-.049 114.952-93.619 208.496-208.564 208.496-.008 0 .005 0 0 0h-.09c-34.903-.014-69.202-8.768-99.664-25.381l-110.564 28.991z"
+       , style: R.css { fill: "#fff", fillRule: "nonzero" }
+       , transform: "translate(546.49 392.227)"
+       }
+     , SVG.path
+       { d: "M.505.494A.488.488 0 0 1 .257.427L0 .498.069.235a.496.496 0 1 1 .436.259zM.009-.002zm0 0z"
+       , style: R.css { fill: "url(#a)", fillRule: "nonzero" }
+       , transform: "matrix(0 -406.194 -406.194 0 640.266 738.97)"
+       }
+     , SVG.path
+       { d: "M.505.494A.488.488 0 0 1 .257.427L0 .498.069.235a.496.496 0 1 1 .436.259zM.27.337l.015.01a.412.412 0 1 0-.193-.349c0 .074.02.147.058.21l.009.015-.041.156L.27.337zM.009-.002zm0 0z"
+       , style: R.css { fill: "url(#b)", fillRule: "nonzero" }
+       , transform: "matrix(0 -420.76 -420.76 0 640.264 746.25)"
+       }
+     , SVG.path
+       { d: "M0-181.636c-3.904-8.678-8.013-8.852-11.727-9.004-3.037-.13-6.515-.122-9.987-.122-3.474 0-9.121 1.305-13.895 6.52-4.778 5.215-18.242 17.821-18.242 43.46 0 25.642 18.676 50.417 21.279 53.897 2.606 3.475 36.052 57.771 89.021 78.66 44.022 17.359 52.98 13.906 62.535 13.038 9.555-.869 30.832-12.604 35.175-24.773 4.343-12.167 4.343-22.596 3.04-24.776-1.303-2.172-4.777-3.475-9.989-6.081-5.212-2.606-30.832-15.215-35.61-16.952-4.777-1.737-8.252-2.606-11.726 2.611-3.475 5.212-13.456 16.947-16.497 20.422-3.04 3.483-6.08 3.917-11.292 1.311-5.212-2.614-21.996-8.111-41.907-25.864-15.492-13.812-25.951-30.87-28.992-36.087-3.04-5.212-.325-8.035 2.289-10.633 2.34-2.335 5.212-6.083 7.818-9.126 2.6-3.043 3.469-5.215 5.206-8.69 1.737-3.48.869-6.523-.434-9.129S4.634-171.332 0-181.636"
+       , style: R.css { fill: "#fff" }
+       , transform: "translate(588.995 628.453)"
+       }
+     , SVG.defs
+       { children: 
+       [ SVG.linearGradient
+         { id: "a"
+         , x1: "0"
+         , y1: "0"
+         , x2: "1"
+         , y2: "0"
+         , gradientUnits: "userSpaceOnUse"
+         , gradientTransform: "scale(1 -1)"
+         , children: 
+         [ SVG.stop
+           { offset: "0"
+           , style: R.css { stopColor: "#20b038", stopOpacity: "1" }
+           }
+         , SVG.stop
+           { offset: "1"
+           , style: R.css { stopColor: "#60d66a", stopOpacity: "1" }
+           }
+         ]
+         }
+       , SVG.linearGradient
+         { id: "b"
+         , x1: "0"
+         , y1: "0"
+         , x2: "1"
+         , y2: "0"
+         , gradientUnits: "userSpaceOnUse"
+         , gradientTransform: "scale(1 -1)"
+         , children: 
+         [ SVG.stop
+           { offset: "0"
+           , style: R.css { stopColor: "#f9f9f9", stopOpacity: "1" }
+           }
+         , SVG.stop
+           { offset: "1"
+           , style: R.css { stopColor: "white", stopOpacity: "1" }
+           }
+         ]
+         }
+       ]
+       }
+     ]
+     }

src/Yoga/Block/Icon/SVG/WhatsAppLogo.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 1281 1067" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"><path d="m0 287.286 6.333 3.754c26.611 15.791 57.12 24.143 88.231 24.16h.068c95.544 0 173.307-77.745 173.348-173.297.014-46.307-17.997-89.849-50.727-122.603-32.732-32.753-76.251-50.802-122.556-50.821-95.62 0-173.381 77.734-173.419 173.283-.013 32.743 9.148 64.631 26.502 92.224l4.126 6.555-17.517 63.947L0 287.286zm-115.686 66.737 29.589-108.039c-18.25-31.619-27.852-67.489-27.838-104.236.046-114.958 93.603-208.485 208.567-208.485 55.789.024 108.153 21.738 147.533 61.145 39.374 39.41 61.05 91.795 61.031 147.509-.049 114.952-93.619 208.496-208.564 208.496-.008 0 .005 0 0 0h-.09c-34.903-.014-69.202-8.768-99.664-25.381l-110.564 28.991z" style="fill:#fff;fill-rule:nonzero" transform="translate(546.49 392.227)"/><path d="M.505.494A.488.488 0 0 1 .257.427L0 .498.069.235a.496.496 0 1 1 .436.259zM.009-.002zm0 0z" style="fill:url(#a);fill-rule:nonzero" transform="matrix(0 -406.194 -406.194 0 640.266 738.97)"/><path d="M.505.494A.488.488 0 0 1 .257.427L0 .498.069.235a.496.496 0 1 1 .436.259zM.27.337l.015.01a.412.412 0 1 0-.193-.349c0 .074.02.147.058.21l.009.015-.041.156L.27.337zM.009-.002zm0 0z" style="fill:url(#b);fill-rule:nonzero" transform="matrix(0 -420.76 -420.76 0 640.264 746.25)"/><path d="M0-181.636c-3.904-8.678-8.013-8.852-11.727-9.004-3.037-.13-6.515-.122-9.987-.122-3.474 0-9.121 1.305-13.895 6.52-4.778 5.215-18.242 17.821-18.242 43.46 0 25.642 18.676 50.417 21.279 53.897 2.606 3.475 36.052 57.771 89.021 78.66 44.022 17.359 52.98 13.906 62.535 13.038 9.555-.869 30.832-12.604 35.175-24.773 4.343-12.167 4.343-22.596 3.04-24.776-1.303-2.172-4.777-3.475-9.989-6.081-5.212-2.606-30.832-15.215-35.61-16.952-4.777-1.737-8.252-2.606-11.726 2.611-3.475 5.212-13.456 16.947-16.497 20.422-3.04 3.483-6.08 3.917-11.292 1.311-5.212-2.614-21.996-8.111-41.907-25.864-15.492-13.812-25.951-30.87-28.992-36.087-3.04-5.212-.325-8.035 2.289-10.633 2.34-2.335 5.212-6.083 7.818-9.126 2.6-3.043 3.469-5.215 5.206-8.69 1.737-3.48.869-6.523-.434-9.129S4.634-171.332 0-181.636" style="fill:#fff" transform="translate(588.995 628.453)"/><defs><linearGradient id="a" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="scale(1 -1)"><stop offset="0" style="stop-color:#20b038;stop-opacity:1"/><stop offset="1" style="stop-color:#60d66a;stop-opacity:1"/></linearGradient><linearGradient id="b" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="scale(1 -1)"><stop offset="0" style="stop-color:#f9f9f9;stop-opacity:1"/><stop offset="1" style="stop-color:white;stop-opacity:1"/></linearGradient></defs></svg>

webpack.common.js

@@ -1,6 +1,6 @@
-"use strict";
+"use strict"
 
-const { CleanWebpackPlugin } = require("clean-webpack-plugin");
+const { CleanWebpackPlugin } = require("clean-webpack-plugin")
 
 module.exports = {
   plugins: [
@@ -8,4 +8,4 @@ module.exports = {
     // `./dist` in our case
     new CleanWebpackPlugin(),
   ],
-};
+}