boxwood 2.4.3 → 2.4.5

package/index.js

@@ -320,7 +320,20 @@ const attributes = (options) => {
           continue
         }
         const result = value[param]
-        if (result) {
+        if (
+          (param === "padding" || param === "margin") &&
+          typeof result === "object"
+        ) {
+          const top = result.top || "0"
+          const right = result.right || "0"
+          const bottom = result.bottom || "0"
+          const left = result.left || "0"
+          styles.push(
+            `${decamelize(param)}:${escapeHTML(
+              `${top} ${right} ${bottom} ${left}`
+            )}`
+          )
+        } else if (typeof result === "string" || typeof result === "number") {
           styles.push(`${decamelize(param)}:${escapeHTML(result)}`)
         }
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "boxwood",
-  "version": "2.4.3",
+  "version": "2.4.5",
   "description": "Compile HTML templates into JS",
   "main": "index.js",
   "types": "index.d.ts",

package/ui/grid/index.js

@@ -1,6 +1,13 @@
 const { component, css, Div } = require("../..")
 const { normalizeGap, normalizeBreakpoint } = require("../normalize")
 
+const BREAKPOINTS = {
+  xl: "1199px",
+  lg: "1023px",
+  md: "767px",
+  sm: "575px",
+}
+
 function Grid({ className, columns = 3, gap, breakpoint, style }, children) {
   gap = normalizeGap(gap)
   breakpoint = normalizeBreakpoint(breakpoint)
@@ -17,11 +24,18 @@ function Grid({ className, columns = 3, gap, breakpoint, style }, children) {
     }),
     ...(typeof columns === "object" &&
       Object.keys(columns).reduce((object, key) => {
+        const value =
+          typeof columns[key] === "number"
+            ? `repeat(${columns[key]}, 1fr)`
+            : columns[key]
         if (key === "default") {
-          object["grid-template-columns"] = columns[key]
-        } else {
-          object[`@media (min-width: ${key}px)`] = {
-            "grid-template-columns": columns[key],
+          object["grid-template-columns"] = value
+        } else if (typeof key === "string") {
+          const maxWidth =
+            BREAKPOINTS[key] || (key.endsWith("px") ? key : `${key}px`)
+
+          object[`@media (max-width: ${maxWidth})`] = {
+            "grid-template-columns": value,
           }
         }
         return object