     ))
 
 
-(defexample sidebar
-  "# Sidebar Example
-
-  **Deprecated** We should be using the drawer component or 2-pane article layout instead.
-  "
-  (let [example-class-modifier (str (if (om/get-state this :sidebar-visible) "" " u-hide")
-                                 (if (om/get-state this :sidebar-collapsed) " is-collapsed" ""))]
-    (dom/div #js {}
-      (dom/button #js {:className "c-button"
-                       :onClick   #(om/update-state! this update :sidebar-visible not)} "Show/Hide Example")
-      (dom/nav #js {:style     #js {:left "50" :top "200" :width "16.25em" :height "300px"}
-                    :className (str "o-sidebar o-sidebar--large" example-class-modifier)}
-        (dom/div #js {:className "o-sidebar__controls"}
-          (dom/input #js {:placeholder "Search library..." :className "c-input"})
-          (dom/button #js {:className "c-button c-button--icon u-absolute--top-right"}
-            (dom/svg #js {:version "1.1" :width "24" :height "24" :aria-labelledby "title" :role "img" :className "c-icon c-icon--search " :viewBox "0 0 24 24"}
-              (dom/title #js {} "Search")
-              (dom/path #js {:d "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"})))
-          (dom/div #js {:className "u-wrapper c-dropdown--picker"}
-            (dom/button #js {:className "c-button c-button--small"} " Filter items "
-              (dom/svg #js {:version "1.1" :width "24" :height "24" :aria-labelledby "title" :role "img" :className "c-icon c-icon--arrow-drop-down" :viewBox "0 0 24 24"}
-                (dom/title #js {} "Arrow Drop Down")
-                (dom/path #js {:d "M7 10l5 5 5-5z"}))))
-          (dom/button #js {:className "c-button c-button--anchor c-button--small"}
-            (dom/svg #js {:version "1.1" :width "24" :height "24" :aria-labelledby "title" :role "img" :className "c-icon c-icon--remove-circle " :viewBox "0 0 24 24"}
-              (dom/title #js {} "Remove Circle")
-              (dom/path #js {:d "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11H7v-2h10v2z"})) " Clear "))
-        (dom/div #js {:className "o-accordion o-accordion--small"}
-          (dom/div #js {:className "o-accordion__title is-nested is-active"} "Title 1")
-          (dom/div #js {:className "o-accordion__content"}
-            (dom/div #js {:className "o-accordion__group"}
-              (dom/div #js {:className "o-accordion__info"} "View 1")
-              (dom/div #js {:className "o-accordion__action"}
-                (dom/svg #js {:xmlns "http://www.w3.org/2000/svg" :width "24" :height "24" :className "c-icon is-informative" :viewBox "0 0 24 24"}
-                  (dom/path #js {:d "M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h4v-2H5V8h14v10h-4v2h4c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm-7 6l-4 4h3v6h2v-6h3l-4-4z"}))))
-            (dom/div #js {:className "o-accordion__group"}
-              (dom/div #js {:className "o-accordion__info"} "View 2.1")
-              (dom/div #js {:className "o-accordion__action"}
-                (dom/svg #js {:xmlns "http://www.w3.org/2000/svg" :width "24" :height "24" :className "c-icon is-informative" :viewBox "0 0 24 24"}
-                  (dom/path #js {:d "M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h4v-2H5V8h14v10h-4v2h4c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm-7 6l-4 4h3v6h2v-6h3l-4-4z"})))))
-          (dom/div #js {:className "o-accordion__title is-selected"} "Title 2")
-          (dom/div #js {:className "o-accordion__title"} "Title 3")
-          (map (fn [n] (dom/div #js {:className "o-accordion__group"}
-                         (dom/div #js {:className "o-accordion__info"} (str "View " n))))
-            (range 3 20))
-
-          (dom/div #js {:className "o-accordion__title is-informative"}
-            (dom/svg #js {:xmlns "http://www.w3.org/2000/svg" :width "24" :height "24" :className "c-icon c-icon--small" :viewBox "0 0 24 24"}
-              (dom/path #js {:d "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"})) " Action 1 "))
-        (dom/div #js {:className "o-sidebar__toggle"})))))
-
-(defexample sidebar-right
-  "# Sidebar Right side and inline example"
-  (let [example-class-modifier (str (if (om/get-state this :sidebar-visible) "" " u-hide")
-                                 (if (om/get-state this :sidebar-collapsed) " is-collapsed" ""))]
-    (dom/div #js {}
-      (dom/button #js {:className "c-button"
-                       :onClick   #(om/update-state! this update :sidebar-visible not)} "Show/Hide Example")
-      (dom/nav #js {:className (str "o-sidebar o-sidebar--right o-sidebar--inline" example-class-modifier)}
-        (dom/textarea #js {:placeholder "Start typing here..." :className "c-input c-input--multi-line c-input--note"})
-        (dom/button #js {:className "c-button"} "Save")
-        (dom/div #js {:className "o-sidebar__toggle o-sidebar__toggle--alt"
-                      :onClick   #(om/update-state! this update :sidebar-collapsed not)})))))
-
 (defexample toolbar
   "# Toolbar Example"
   (let [changed-menu (om/get-state this :changed-menu)

;; OBJECTS start here
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

(defexample accordion
  "# Accordion Example"
  (dom/div #js {}
    (let [accordion (or (om/get-state this :accordion) 0)
          accordion-select (fn [a] (if (not (= accordion a)) (om/update-state! this assoc :accordion a) (om/update-state! this assoc :accordion 0)))
          accordion-active (fn [a] (if (= accordion a) " is-active" ""))]
      (dom/div #js {}
        (dom/div #js {:className "o-accordion"}
          (dom/div #js {:id        "a1"
                        :className (str "o-accordion__title is-nested " (accordion-active 1))
                        :onClick   #(accordion-select 1)}
            (dom/span #js {:className " c-badge c-badge--informative "} " 2 ") " Contacts ")
          (dom/div #js {:className (str " o-accordion__content " (accordion-active 1))}
            (dom/div #js {:className " o-accordion__group "}
              (dom/div #js {:className " o-accordion__info o-accordion__info--critical "}
                (dom/svg #js {:xmlns " http:// www.w3.org /2000/svg" :width "24" :height "24" :className "c-icon is-neutral" :viewBox "0 0 24 24"}
                  (dom/path #js {:d "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"})) " Kennee ")
              (dom/div #js {:className "o-accordion__info"}
                (dom/svg #js {:xmlns "http://www.w3.org/2000/svg" :width "24" :height "24" :className "c-icon is-neutral" :viewBox "0 0 24 24"}
                  (dom/path #js {:d "M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"})) " ilovemicrosoft@yahoo.com ")
              (dom/div #js {:className "o-accordion__info"}
                (dom/svg #js {:xmlns "http://www.w3.org/2000/svg" :width "24" :height "24" :className "c-icon is-neutral" :viewBox "0 0 24 24"}
                  (dom/path #js {:d "M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"})) " 2m ago ")
              (dom/div #js {:className "o-accordion__actions"}
                (dom/span #js {:className "o-accordion__action"}
                  (dom/svg #js {:xmlns "http://www.w3.org/2000/svg" :width "24" :height "24" :className "c-icon is-informative" :viewBox "0 0 24 24"}
                    (dom/path #js {:d "M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h4v-2H5V8h14v10h-4v2h4c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm-7 6l-4 4h3v6h2v-6h3l-4-4z"})))
                (dom/span #js {:className "o-accordion__action o-accordion__action--informative"}
                  (dom/svg #js {:xmlns "http://www.w3.org/2000/svg" :width "24" :height "24" :className "c-icon is-informative" :viewBox "0 0 24 24"}
                    (dom/path #js {:d "M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h4v-2H5V8h14v10h-4v2h4c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm-7 6l-4 4h3v6h2v-6h3l-4-4z"})))
                (dom/span #js {:className "o-accordion__action o-accordion__action--success"}
                  (dom/svg #js {:xmlns "http://www.w3.org/2000/svg" :width "24" :height "24" :className "c-icon is-informative" :viewBox "0 0 24 24"}
                    (dom/path #js {:d "M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h4v-2H5V8h14v10h-4v2h4c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm-7 6l-4 4h3v6h2v-6h3l-4-4z"})))))
            (dom/div #js {:className "o-accordion__group"}
              (dom/div #js {:className "o-accordion__info o-accordion__info--critical"}
                (dom/svg #js {:xmlns "http://www.w3.org/2000/svg" :width "24" :height "24" :className "c-icon is-neutral" :viewBox "0 0 24 24"}
                  (dom/path #js {:d "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"})) " Krassy Pants ")
              (dom/div #js {:className "o-accordion__info"}
                (dom/svg #js {:xmlns "http://www.w3.org/2000/svg" :width "24" :height "24" :className "c-icon is-neutral" :viewBox "0 0 24 24"}
                  (dom/path #js {:d "M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"})) " krass@pants.com ")
              (dom/div #js {:className "o-accordion__info"}
                (dom/svg #js {:xmlns "http://www.w3.org/2000/svg" :width "24" :height "24" :className "c-icon is-neutral" :viewBox "0 0 24 24"}
                  (dom/path #js {:d "M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"})) " 2m ago ")
              (dom/div #js {:className "o-accordion__actions"}
                (dom/span #js {:className "o-accordion__action"}
                  (dom/svg #js {:xmlns "http://www.w3.org/2000/svg" :width "24" :height "24" :className "c-icon is-informative" :viewBox "0 0 24 24"}
                    (dom/path #js {:d "M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h4v-2H5V8h14v10h-4v2h4c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm-7 6l-4 4h3v6h2v-6h3l-4-4z"}))))))
          (dom/div #js {:id        "a2"
                        :className (str "o-accordion__title is-nested" (accordion-active 2))
                        :onClick   #(accordion-select 2)} " What kinds of dogs are there? ")
          (dom/div #js {:className (str "o-accordion__content" (accordion-active 2))}
            (dom/p #js {} "There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of dog that they find to be compatible with their own lifestyle and desires from a companion."))
          (dom/div #js {:id        "a3"
                        :className (str "o-accordion__title is-nested" (accordion-active 3))
                        :onClick   #(accordion-select 3)} " How do you acquire a dog? ")
          (dom/div #js {:className (str "o-accordion__content" (accordion-active 3))}
            (dom/p #js {} "Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.")
            (dom/p #js {:className "is-nested"} "A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your dog from a shelter, helps give a good home to a dog who may not find one so readily."))
          (dom/div #js {:id        "a4"
                        :className (str "o-accordion__title is-nested" (accordion-active 4))
                        :onClick   #(accordion-select 4)} " How do you acquire a dog? ")
          (dom/div #js {:className (str "o-accordion__content" (accordion-active 4))}
            (dom/p #js {} "Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.")
            (dom/p #js {:className "is-nested"} "A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your dog from a shelter, helps give a good home to a dog who may not find one so readily."))
          (dom/div #js {:id        "a5"
                        :className (str "o-accordion__title is-nested" (accordion-active 5))
                        :onClick   #(accordion-select 5)} " How do you acquire a dog? ")
          (dom/div #js {:className (str "o-accordion__content" (accordion-active 5))}
            (dom/p #js {} "Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.")
            (dom/p #js {:className "is-nested"} "A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your dog from a shelter, helps give a good home to a dog who may not find one so readily."))
          (dom/div #js {:className "o-accordion__title"} " Non-nested title ")))
      )))

(defexample accordion-nested
  "### Nested

  Notice how you can add `.is-nested` to any element and it collapses and expands with `.is-active`
  "
  (let [accordion (or (om/get-state this :accordion) 1)
        accordion-select (fn [a] (if (not (= accordion a)) (om/update-state! this assoc :accordion a) (om/update-state! this assoc :accordion 0)))
        accordion-active (fn [a] (if (= accordion a) " is-active" ""))]
    (dom/div #js {}
      (dom/div #js {:className "o-accordion"}
        (dom/div #js {:className "o-accordion__title"} "Recent notes")
        (dom/div #js {:className "o-accordion__content is-active"}
          (dom/div #js {:className "o-accordion__group"}
            (dom/div #js {:className "o-accordion__info"}
              (dom/div #js {:className "o-accordion__meta"}
                (dom/div #js {:className "o-accordion__meta-item"}
                  (dom/svg #js {:xmlns "http://www.w3.org/2000/svg" :width "24" :height "24" :className "c-icon c-icon--small" :viewBox "0 0 24 24"}
                    (dom/path #js {:d "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"})) " Agent Name ")
                (dom/div #js {:className "o-accordion__meta-item"}
                  (dom/svg #js {:xmlns "http://www.w3.org/2000/svg" :width "24" :height "24" :className "c-icon c-icon--small" :viewBox "0 0 24 24"}
                    (dom/path #js {:d "M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"})) " 3 days ago "))
              (dom/p #js {:id        "a1"
                          :className (str "is-nested" (accordion-active 1))
                          :onClick   #(accordion-select 1)} "So strongly and metaphysically did I conceive of my situation then, that while earnestly watching his motions, I seemed distinctly to perceive in the tumultuous business of cutting-in and attending to a whale, there is much running backwards and forwards among the crew.")))
          (dom/div #js {:className "o-accordion__group"}
            (dom/div #js {:className "o-accordion__info"}
              (dom/div #js {:className "o-accordion__meta"}
                (dom/div #js {:className "o-accordion__meta-item"}
                  (dom/svg #js {:xmlns "http://www.w3.org/2000/svg" :width "24" :height "24" :className "c-icon c-icon--small" :viewBox "0 0 24 24"}
                    (dom/path #js {:d "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"})) " Agent Name ")
                (dom/div #js {:className "o-accordion__meta-item"}
                  (dom/svg #js {:xmlns "http://www.w3.org/2000/svg" :width "24" :height "24" :className "c-icon c-icon--small" :viewBox "0 0 24 24"}
                    (dom/path #js {:d "M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"})) " 3 days ago "))
              (dom/p #js {:className "is-nested"} "So strongly and metaphysically did I conceive of my situation then, that while earnestly watching his motions, I seemed distinctly to perceive in the tumultuous business of cutting-in and attending to a whale, there is much running backwards and forwards among the crew.")))
          (dom/div #js {:className "o-accordion__group"}
            (dom/div #js {:className "o-accordion__info"}
              (dom/div #js {:className "o-accordion__meta"}
                (dom/div #js {:className "o-accordion__meta-item"}
                  (dom/svg #js {:xmlns "http://www.w3.org/2000/svg" :width "24" :height "24" :className "c-icon c-icon--small" :viewBox "0 0 24 24"}
                    (dom/path #js {:d "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"})) " Agent Name ")
                (dom/div #js {:className "o-accordion__meta-item"}
                  (dom/svg #js {:xmlns "http://www.w3.org/2000/svg" :width "24" :height "24" :className "c-icon c-icon--small" :viewBox "0 0 24 24"}
                    (dom/path #js {:d "M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"})) " 3 days ago "))
              (dom/p #js {:id        "a2"
                          :className (str "is-nested" (accordion-active 2))
                          :onClick   #(accordion-select 2)} "So strongly and metaphysically did I conceive of my situation then, that while earnestly watching his motions, I seemed distinctly to perceive in the tumultuous business of cutting-in and attending to a whale, there is much running backwards and forwards among the crew."))))))
    ))

;; TODO Fix, accordion sidebar is not appearing
(defexample accordion-sidebar
  "# Accordion inside a Sidebar Example"
  (dom/div #js {}
    (dom/nav #js {:className "o-sidebar [is-collapsed]"}
      (dom/div #js {:className "o-accordion o-accordion--small"}
        (dom/div #js {:className "o-accordion__title is-nested is-active"} " Title 1 ")
        (dom/div #js {:className "o-accordion__content is-active"}
          (dom/div #js {:className "o-accordion__group"}
            (dom/div #js {:className "o-accordion__info"} "View 1")
            (dom/div #js {:className "o-accordion__actions"}
              (dom/span #js {:className "o-accordion__action"}
                (dom/svg #js {:xmlns "http://www.w3.org/2000/svg" :width "24" :height "24" :className "c-icon is-informative" :viewBox "0 0 24 24"}
                  (dom/path #js {:d "M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h4v-2H5V8h14v10h-4v2h4c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm-7 6l-4 4h3v6h2v-6h3l-4-4z"})))))
          (dom/div #js {:className "o-accordion__group"}
            (dom/div #js {:className "o-accordion__info"} "View 2.1")
            (dom/div #js {:className "o-accordion__actions"}
              (dom/span #js {:className "o-accordion__action"}
                (dom/svg #js {:xmlns "http://www.w3.org/2000/svg" :width "24" :height "24" :className "c-icon is-informative" :viewBox "0 0 24 24"}
                  (dom/path #js {:d "M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h4v-2H5V8h14v10h-4v2h4c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm-7 6l-4 4h3v6h2v-6h3l-4-4z"}))))))
        (dom/div #js {:className "o-accordion__title is-selected"} "Title 2")
        (dom/div #js {:className "o-accordion__title"} "Title 3")
        (dom/div #js {:className "o-accordion__title is-informative"}
          (dom/svg #js {:xmlns "http://www.w3.org/2000/svg" :width "24" :height "24" :className "c-icon c-icon--small" :viewBox "0 0 24 24"}
            (dom/path #js {:d "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"})) " Action 1 "))
      (dom/div #js {:className "o-sidebar__toggle"}))))

(defn toggle-pause [this] (om/update-state! this update :pause not))
(defexample button-group
  "# Button Group"

                      textarea
                      input-validation
                      ]}
          ])))

