Attempt to port https://github.com/radix-ui/design-system/blob/master/components/Heading.tsx to helix , clojurescript

heading.cljs

(ns stitches.componentes.heading
  (:require
    ["lodash.merge" :as js-merge]
    ["react" :as React]
    [applied-science.js-interop :as j]
    [crudis.util.helix :refer [defnc]]
    [helix.core :refer [$]]
    [stitches.componentes.text :refer [Text]]
    ))

(def default-tag "h1")

(def ^:private textSize
  (j/lit
    {"1" {"@initial" "4", "@bp2" "5"}
     "2" {"@initial" "6", "@bp2" "7"}
     "3" {"@initial" "7", "@bp2" "8"}
     "4" {"@initial" "8", "@bp2" "9"}
     }))

(def ^:private  textCss
  (j/lit
    {"1" {"fontWeight" 500, "lineHeight" "20px", "@bp2" {"lineHeight" "23px"}}
     "2" {"fontWeight" 500, "lineHeight" "25px", "@bp2" {"lineHeight" "30px"}}
     "3" {"fontWeight" 500, "lineHeight" "33px", "@bp2" {"lineHeight" "41px"}}
     "4" {"fontWeight" 500, "lineHeight" "35px", "@bp2" {"lineHeight" "55px"}}
     }))

(defnc Heading
  [{:keys [size css]
    :or {size "1"}
    :as props} ref]
  {:wrap [(React/forwardRef)]}
  (let [css (js-merge
              #js {:fontVariantNumeric  "proportional-nums"}
              (j/get textCss size)
              css)]
    ($ Text
       {:as default-tag
        :& (dissoc props :size :css)
        :ref ref
        :size (j/get textSize size)
        :css css})))