NoRedInk · caseyWebb · Mar 19, 2024 · Mar 19, 2024 · Mar 19, 2024 · Mar 19, 2024
diff --git a/component-catalog/src/App.elm b/component-catalog/src/App.elm
@@ -8,7 +8,6 @@ import Browser.Navigation exposing (Key)
 import Category exposing (Category)
 import Css exposing (..)
 import Css.Global
-import Css.Media exposing (withMedia)
 import Dict exposing (Dict)
 import Example exposing (Example)
 import Examples
@@ -21,7 +20,7 @@ import Nri.Ui.FocusRing.V1 as FocusRing
 import Nri.Ui.Header.V1 as Header
 import Nri.Ui.Heading.V3 as Heading
 import Nri.Ui.Html.V3 exposing (viewIf)
-import Nri.Ui.MediaQuery.V1 exposing (mobile)
+import Nri.Ui.MediaQuery.V2 as MediaQuery exposing (mobile)
 import Nri.Ui.Page.V3 as Page
 import Nri.Ui.SideNav.V5 as SideNav
 import Nri.Ui.Spacing.V1 as Spacing
@@ -458,7 +457,7 @@ viewLayout model headerExtras content =
         , Html.div
             [ css
                 [ displayFlex
-                , withMedia [ mobile ] [ flexDirection column, alignItems stretch ]
+                , MediaQuery.fromList [ mobile [ flexDirection column, alignItems stretch ] ]
                 , alignItems flexStart
                 , Spacing.centeredContentWithSidePaddingAndCustomWidth (Css.px 1400)
                 , Spacing.pageTopWhitespace

diff --git a/component-catalog/src/CommonControls.elm b/component-catalog/src/CommonControls.elm
@@ -41,7 +41,7 @@ import Examples.Colors
 import Html.Styled as Html exposing (Html)
 import Html.Styled.Attributes as Attributes
 import Http
-import Nri.Ui.ClickableText.V4 as ClickableText
+import Nri.Ui.ClickableText.V5 as ClickableText
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Data.PremiumDisplay as PremiumDisplay exposing (PremiumDisplay)
 import Nri.Ui.Svg.V1 exposing (Svg)

diff --git a/component-catalog/src/Debug/Control/View.elm b/component-catalog/src/Debug/Control/View.elm
@@ -7,7 +7,6 @@ module Debug.Control.View exposing (view, viewWithCustomControls)
 -}
 
 import Css exposing (..)
-import Css.Media exposing (withMedia)
 import Debug.Control as Control exposing (Control)
 import EllieLink
 import Example
@@ -16,7 +15,7 @@ import Html.Styled.Attributes exposing (css)
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Container.V2 as Container
 import Nri.Ui.Heading.V3 as Heading
-import Nri.Ui.MediaQuery.V1 exposing (mobile, notMobile)
+import Nri.Ui.MediaQuery.V2 as MediaQuery exposing (mobile)
 import Nri.Ui.Spacing.V1 as Spacing
 
 
@@ -74,7 +73,7 @@ viewWithCustomControls config =
         [ css
             [ marginTop Spacing.verticalSpacerPx
             , displayFlex
-            , withMedia [ mobile ] [ flexDirection column ]
+            , MediaQuery.fromList [ mobile [ flexDirection column ] ]
             ]
         ]
         [ Container.view
@@ -83,17 +82,19 @@ viewWithCustomControls config =
                 , config.controls
                 ]
             , Container.css
-                [ withMedia [ mobile ]
-                    [ borderBottomLeftRadius zero
-                    , borderBottomRightRadius zero
-                    ]
-                , withMedia [ notMobile ]
-                    [ flexBasis (pct 50)
-                    , flexGrow zero
-                    , flexShrink zero
-                    , paddingRight (px 30)
-                    , borderTopRightRadius zero
-                    , borderBottomRightRadius zero
+                [ MediaQuery.fromList
+                    [ mobile
+                        [ borderBottomLeftRadius zero
+                        , borderBottomRightRadius zero
+                        ]
+                    , MediaQuery.not mobile
+                        [ flexBasis (pct 50)
+                        , flexGrow zero
+                        , flexShrink zero
+                        , paddingRight (px 30)
+                        , borderTopRightRadius zero
+                        , borderBottomRightRadius zero
+                        ]
                     ]
                 ]
             ]
@@ -124,13 +125,15 @@ viewWithCustomControls config =
                 [ padding (px 20)
                 , flexGrow (num 1)
                 , backgroundColor Colors.gray20
-                , withMedia [ mobile ]
-                    [ borderTopLeftRadius zero
-                    , borderTopRightRadius zero
-                    ]
-                , withMedia [ notMobile ]
-                    [ borderTopLeftRadius zero
-                    , borderBottomLeftRadius zero
+                , MediaQuery.fromList
+                    [ mobile
+                        [ borderTopLeftRadius zero
+                        , borderTopRightRadius zero
+                        ]
+                    , MediaQuery.not mobile
+                        [ borderTopLeftRadius zero
+                        , borderBottomLeftRadius zero
+                        ]
                     ]
                 ]
             ]

diff --git a/component-catalog/src/EllieLink.elm b/component-catalog/src/EllieLink.elm
@@ -4,7 +4,7 @@ import Accessibility.Styled.Aria as Aria
 import Dict exposing (Dict)
 import Html.Styled exposing (..)
 import Http
-import Nri.Ui.Button.V10 as Button
+import Nri.Ui.Button.V11 as Button
 import Url.Builder
 
 

diff --git a/component-catalog/src/Example.elm b/component-catalog/src/Example.elm
@@ -6,7 +6,6 @@ module Example exposing (Example, extraLinks, fromRouteName, fullName, preview,
 import Accessibility.Styled.Aria as Aria
 import Category exposing (Category)
 import Css
-import Css.Media exposing (withMedia)
 import EllieLink
 import EventExtras
 import ExampleSection
@@ -15,11 +14,11 @@ import Html.Styled.Attributes as Attributes
 import Html.Styled.Events as Events
 import Html.Styled.Lazy as Lazy
 import KeyboardSupport exposing (KeyboardSupport)
-import Nri.Ui.ClickableText.V4 as ClickableText
+import Nri.Ui.ClickableText.V5 as ClickableText
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Container.V2 as Container
 import Nri.Ui.Header.V1 as Header
-import Nri.Ui.MediaQuery.V1 exposing (mobile)
+import Nri.Ui.MediaQuery.V2 as MediaQuery exposing (mobile)
 
 
 type alias Example state msg =
@@ -143,23 +142,22 @@ preview_ { swallowEvent, navigate, exampleHref } example =
             ]
         , Container.custom [ Events.onClick (navigate example) ]
         , Container.html
-            (Html.span [ EventExtras.onClickStopPropagation swallowEvent ]
+            [ Html.span [ EventExtras.onClickStopPropagation swallowEvent ]
                 [ ClickableText.link example.name
                     [ ClickableText.href (exampleHref example)
                     , ClickableText.css [ Css.marginBottom (Css.px 10) ]
                     , ClickableText.nriDescription "doodad-link"
                     ]
                 ]
-                :: [ Html.div
-                        [ Attributes.css
-                            [ Css.displayFlex
-                            , Css.flexDirection Css.column
-                            ]
-                        , Aria.hidden True
-                        ]
-                        (List.map (Html.map never) example.preview)
-                   ]
-            )
+            , Html.div
+                [ Attributes.css
+                    [ Css.displayFlex
+                    , Css.flexDirection Css.column
+                    ]
+                , Aria.hidden True
+                ]
+                (List.map (Html.map never) example.preview)
+            ]
         ]
 
 
@@ -177,7 +175,7 @@ view_ ellieLinkConfig example state =
             , Css.alignItems Css.stretch
             , Css.flexWrap Css.wrap
             , Css.property "gap" "10px"
-            , withMedia [ mobile ] [ Css.flexDirection Css.column, Css.alignItems Css.stretch ]
+            , MediaQuery.fromList [ mobile [ Css.flexDirection Css.column, Css.alignItems Css.stretch ] ]
             ]
         ]
         [ ExampleSection.aboutSection example.about

diff --git a/component-catalog/src/Examples/Accordion.elm b/component-catalog/src/Examples/Accordion.elm
@@ -25,7 +25,7 @@ import Guidance
 import Html.Styled.Attributes as Attributes exposing (css, src)
 import KeyboardSupport exposing (Key(..))
 import Nri.Ui.Accordion.V4 as Accordion exposing (AccordionEntry(..))
-import Nri.Ui.ClickableText.V4 as ClickableText
+import Nri.Ui.ClickableText.V5 as ClickableText
 import Nri.Ui.Colors.Extra as ColorsExtra
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.FocusRing.V1 as FocusRing

diff --git a/component-catalog/src/Examples/Block.elm b/component-catalog/src/Examples/Block.elm
@@ -21,8 +21,8 @@ import Html.Styled exposing (..)
 import Html.Styled.Attributes exposing (css)
 import Markdown
 import Nri.Ui.Block.V6 as Block
-import Nri.Ui.Button.V10 as Button
-import Nri.Ui.ClickableText.V4 as ClickableText
+import Nri.Ui.Button.V11 as Button
+import Nri.Ui.ClickableText.V5 as ClickableText
 import Nri.Ui.Fonts.V1 as Fonts
 import Nri.Ui.Heading.V3 as Heading
 import Nri.Ui.Spacing.V1 as Spacing

diff --git a/component-catalog/src/Examples/BreadCrumbs.elm b/component-catalog/src/Examples/BreadCrumbs.elm
@@ -18,7 +18,7 @@ import Example exposing (Example)
 import Html.Styled.Attributes exposing (css, href)
 import Nri.Ui.AssignmentIcon.V2 as AssignmentIcon
 import Nri.Ui.BreadCrumbs.V2 as BreadCrumbs exposing (BreadCrumbAttribute, BreadCrumbs)
-import Nri.Ui.ClickableText.V4 as ClickableText
+import Nri.Ui.ClickableText.V5 as ClickableText
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Fonts.V1 as Fonts
 import Nri.Ui.Heading.V3 as Heading

diff --git a/component-catalog/src/Examples/Button.elm b/component-catalog/src/Examples/Button.elm
@@ -19,8 +19,8 @@ import Example exposing (Example)
 import Guidance
 import Html.Styled exposing (..)
 import Html.Styled.Attributes as Attributes exposing (css)
-import Nri.Ui.Button.V10 as Button
-import Nri.Ui.ClickableText.V4 as ClickableText
+import Nri.Ui.Button.V11 as Button
+import Nri.Ui.ClickableText.V5 as ClickableText
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Heading.V3 as Heading
 import Nri.Ui.Spacing.V1 as Spacing

diff --git a/component-catalog/src/Examples/Carousel.elm b/component-catalog/src/Examples/Carousel.elm
@@ -26,7 +26,7 @@ import Html.Styled.Attributes as Attributes exposing (class, css)
 import KeyboardSupport exposing (Key(..))
 import Nri.Ui.Carousel.V2 as Carousel exposing (Role(..))
 import Nri.Ui.ClickableSvg.V2 as ClickableSvg
-import Nri.Ui.ClickableText.V4 as ClickableText
+import Nri.Ui.ClickableText.V5 as ClickableText
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Container.V2 as Container
 import Nri.Ui.FocusRing.V1 as FocusRing

diff --git a/component-catalog/src/Examples/Checkbox.elm b/component-catalog/src/Examples/Checkbox.elm
@@ -20,7 +20,7 @@ import Html.Styled exposing (..)
 import Html.Styled.Attributes exposing (css)
 import KeyboardSupport exposing (Key(..))
 import Nri.Ui.Checkbox.V7 as Checkbox
-import Nri.Ui.ClickableText.V4 as ClickableText
+import Nri.Ui.ClickableText.V5 as ClickableText
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Fonts.V1 as Fonts
 import Nri.Ui.Heading.V3 as Heading

diff --git a/component-catalog/src/Examples/ClickableText.elm b/component-catalog/src/Examples/ClickableText.elm
@@ -19,7 +19,7 @@ import Example exposing (Example)
 import Guidance
 import Html.Styled exposing (..)
 import Html.Styled.Attributes exposing (css)
-import Nri.Ui.ClickableText.V4 as ClickableText
+import Nri.Ui.ClickableText.V5 as ClickableText
 import Nri.Ui.Heading.V3 as Heading
 import Nri.Ui.Spacing.V1 as Spacing
 import Nri.Ui.Table.V7 as Table

diff --git a/component-catalog/src/Examples/Colors.elm b/component-catalog/src/Examples/Colors.elm
@@ -15,7 +15,7 @@ import Css
 import Example exposing (Example)
 import Html.Styled as Html
 import Html.Styled.Attributes as Attributes exposing (css)
-import Nri.Ui.ClickableText.V4 as ClickableText
+import Nri.Ui.ClickableText.V5 as ClickableText
 import Nri.Ui.Colors.Extra exposing (fromCssColor)
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Fonts.V1 as Fonts

diff --git a/component-catalog/src/Examples/Confetti.elm b/component-catalog/src/Examples/Confetti.elm
@@ -14,7 +14,7 @@ import Css exposing (Color)
 import Debug.Control as Control exposing (Control)
 import Debug.Control.View as ControlView
 import Example exposing (Example)
-import Nri.Ui.Button.V10 as Button
+import Nri.Ui.Button.V11 as Button
 import Nri.Ui.Colors.Extra as ColorsExtra
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Confetti.V2 as Confetti

diff --git a/component-catalog/src/Examples/FocusRing.elm b/component-catalog/src/Examples/FocusRing.elm
@@ -14,14 +14,14 @@ import Html.Styled as Html exposing (..)
 import Html.Styled.Attributes exposing (css, href)
 import Markdown
 import Nri.Ui.Accordion.V4 as Accordion exposing (AccordionEntry(..))
-import Nri.Ui.Button.V10 as Button
+import Nri.Ui.Button.V11 as Button
 import Nri.Ui.Checkbox.V7 as Checkbox
 import Nri.Ui.ClickableSvg.V2 as ClickableSvg
-import Nri.Ui.ClickableText.V4 as ClickableText
+import Nri.Ui.ClickableText.V5 as ClickableText
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.FocusRing.V1 as FocusRing
 import Nri.Ui.Heading.V3 as Heading
-import Nri.Ui.Message.V4 as Message
+import Nri.Ui.Message.V5 as Message
 import Nri.Ui.RadioButton.V4 as RadioButton
 import Nri.Ui.SegmentedControl.V14 as SegmentedControl
 import Nri.Ui.Spacing.V1 as Spacing

diff --git a/component-catalog/src/Examples/Fonts.elm b/component-catalog/src/Examples/Fonts.elm
@@ -11,7 +11,7 @@ import Css exposing (Style)
 import Example exposing (Example)
 import Html.Styled as Html exposing (Html)
 import Html.Styled.Attributes exposing (css)
-import Nri.Ui.ClickableText.V4 as ClickableText
+import Nri.Ui.ClickableText.V5 as ClickableText
 import Nri.Ui.Fonts.V1 as Fonts
 import Nri.Ui.Heading.V3 as Heading
 import Nri.Ui.Spacing.V1 as Spacing

diff --git a/component-catalog/src/Examples/Header.elm b/component-catalog/src/Examples/Header.elm
@@ -17,7 +17,7 @@ import Example exposing (Example)
 import Html.Styled exposing (..)
 import Html.Styled.Attributes exposing (css)
 import Nri.Ui.BreadCrumbs.V2 as BreadCrumbs
-import Nri.Ui.ClickableText.V4 as ClickableText
+import Nri.Ui.ClickableText.V5 as ClickableText
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Fonts.V1 as Fonts
 import Nri.Ui.Header.V1 as Header
@@ -77,7 +77,7 @@ example =
                 , mainType = Just "RootHtml.Html msg"
                 , extraCode =
                     [ "import Nri.Ui.BreadCrumbs.V2 as BreadCrumbs"
-                    , "import Nri.Ui.ClickableText.V4 as ClickableText"
+                    , "import Nri.Ui.ClickableText.V5 as ClickableText"
                     ]
                 , renderExample = Code.unstyledView
                 , toExampleCode =

diff --git a/component-catalog/src/Examples/Heading.elm b/component-catalog/src/Examples/Heading.elm
@@ -15,7 +15,7 @@ import Debug.Control.Extra as ControlExtra
 import Debug.Control.View as ControlView
 import Example exposing (Example)
 import Html.Styled exposing (..)
-import Nri.Ui.ClickableText.V4 as ClickableText
+import Nri.Ui.ClickableText.V5 as ClickableText
 import Nri.Ui.Heading.V3 as Heading
 import Nri.Ui.Spacing.V1 as Spacing
 import Nri.Ui.Text.V6 as Text

diff --git a/component-catalog/src/Examples/Highlighter.elm b/component-catalog/src/Examples/Highlighter.elm
@@ -19,8 +19,8 @@ import Html.Styled exposing (..)
 import Html.Styled.Attributes exposing (css)
 import List.Extra
 import Maybe.Extra
-import Nri.Ui.Button.V10 as Button
-import Nri.Ui.ClickableText.V4 as ClickableText
+import Nri.Ui.Button.V11 as Button
+import Nri.Ui.ClickableText.V5 as ClickableText
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Fonts.V1 as Fonts
 import Nri.Ui.Heading.V3 as Heading

diff --git a/component-catalog/src/Examples/Loading.elm b/component-catalog/src/Examples/Loading.elm
@@ -14,7 +14,7 @@ import Guidance
 import Html.Styled as Html exposing (Html)
 import Html.Styled.Events as Events
 import Json.Decode
-import Nri.Ui.Button.V10 as Button
+import Nri.Ui.Button.V11 as Button
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Heading.V3 as Heading
 import Nri.Ui.Loading.V1 as Loading

diff --git a/component-catalog/src/Examples/Menu.elm b/component-catalog/src/Examples/Menu.elm
@@ -25,9 +25,9 @@ import Examples.ClickableText
 import Guidance
 import Html.Styled.Attributes exposing (css)
 import KeyboardSupport exposing (Key(..))
-import Nri.Ui.Button.V10 as Button
+import Nri.Ui.Button.V11 as Button
 import Nri.Ui.ClickableSvg.V2 as ClickableSvg
-import Nri.Ui.ClickableText.V4 as ClickableText
+import Nri.Ui.ClickableText.V5 as ClickableText
 import Nri.Ui.Colors.Extra as ColorsExtra
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Fonts.V1 as Fonts
@@ -154,9 +154,9 @@ view ellieLinkConfig state =
         , settings = state.settings
         , mainType = Just "RootHtml.Html Msg"
         , extraCode =
-            [ "import Nri.Ui.Button.V10 as Button"
+            [ "import Nri.Ui.Button.V11 as Button"
             , "import Nri.Ui.ClickableSvg.V2 as ClickableSvg"
-            , "import Nri.Ui.ClickableText.V4 as ClickableText"
+            , "import Nri.Ui.ClickableText.V5 as ClickableText"
             , "import Nri.Ui.Tooltip.V3 as Tooltip"
             , Code.newlines
             , Code.unionType "Msg"

diff --git a/component-catalog/src/Examples/Message.elm b/component-catalog/src/Examples/Message.elm
@@ -11,10 +11,10 @@ import Debug.Control.View as ControlView
 import Example exposing (Example)
 import Guidance
 import Http
-import Nri.Ui.ClickableText.V4 as ClickableText
+import Nri.Ui.ClickableText.V5 as ClickableText
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Heading.V3 as Heading
-import Nri.Ui.Message.V4 as Message
+import Nri.Ui.Message.V5 as Message
 import Nri.Ui.Spacing.V1 as Spacing
 import Nri.Ui.Table.V7 as Table
 import ViewHelpers exposing (viewExamples)

diff --git a/component-catalog/src/Examples/Modal.elm b/component-catalog/src/Examples/Modal.elm
@@ -20,9 +20,9 @@ import Guidance
 import Html.Styled as Html exposing (Html, div, text)
 import Html.Styled.Attributes as Attributes exposing (css)
 import KeyboardSupport
-import Nri.Ui.Button.V10 as Button
+import Nri.Ui.Button.V11 as Button
 import Nri.Ui.ClickableSvg.V2 as ClickableSvg
-import Nri.Ui.ClickableText.V4 as ClickableText
+import Nri.Ui.ClickableText.V5 as ClickableText
 import Nri.Ui.Colors.Extra
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Fonts.V1 as Fonts