@guardian/stand 0.0.37 → 0.0.39

package/dist/styleD/build/typescript/component/avatar.cjs

@@ -7,10 +7,10 @@ const componentAvatar = {
         text: "#24491d",
         background: "#cde4c9",
         border: "unset",
-        ":hover": {
+        hover: {
           background: "#aed2a6"
         },
-        ":active": {
+        active: {
           background: "#8ec183"
         }
       },
@@ -18,10 +18,10 @@ const componentAvatar = {
         text: "#092f62",
         background: "#c5d9f4",
         border: "unset",
-        ":hover": {
+        hover: {
           background: "#93b9ec"
         },
-        ":active": {
+        active: {
           background: "#699ee5"
         }
       },
@@ -29,10 +29,10 @@ const componentAvatar = {
         text: "#65170e",
         background: "#f5c6c0",
         border: "unset",
-        ":hover": {
+        hover: {
           background: "#eea198"
         },
-        ":active": {
+        active: {
           background: "#e87c6f"
         }
       },
@@ -40,10 +40,10 @@ const componentAvatar = {
         text: "#00344e",
         background: "#b8d8e7",
         border: "unset",
-        ":hover": {
+        hover: {
           background: "#8abed7"
         },
-        ":active": {
+        active: {
           background: "#5ca5c8"
         }
       },
@@ -51,32 +51,32 @@ const componentAvatar = {
         text: "#0e2729",
         background: "#c5dfe1",
         border: "unset",
-        ":hover": {
+        hover: {
           background: "#a0cace"
         },
-        ":active": {
+        active: {
           background: "#7bb5bb"
         }
       },
-      "cool-purple": {
+      coolPurple: {
         text: "#394069",
         background: "#dbdff7",
         border: "unset",
-        ":hover": {
+        hover: {
           background: "#c3caf3"
         },
-        ":active": {
+        active: {
           background: "#acb5ee"
         }
       },
-      "warm-purple": {
+      warmPurple: {
         text: "#381350",
         background: "#dac3e8",
         border: "unset",
-        ":hover": {
+        hover: {
           background: "#c29dd9"
         },
-        ":active": {
+        active: {
           background: "#aa76cb"
         }
       },
@@ -84,10 +84,10 @@ const componentAvatar = {
         text: "#581734",
         background: "#edc6d7",
         border: "unset",
-        ":hover": {
+        hover: {
           background: "#e2a1be"
         },
-        ":active": {
+        active: {
           background: "#d67ca4"
         }
       },
@@ -95,10 +95,10 @@ const componentAvatar = {
         text: "#693c16",
         background: "#fcddc6",
         border: "unset",
-        ":hover": {
+        hover: {
           background: "#fac7a1"
         },
-        ":active": {
+        active: {
           background: "#f9b27c"
         }
       },
@@ -106,10 +106,10 @@ const componentAvatar = {
         text: "#5b4a0b",
         background: "#fbeebf",
         border: "unset",
-        ":hover": {
+        hover: {
           background: "#f9e396"
         },
-        ":active": {
+        active: {
           background: "#f6d86d"
         }
       },
@@ -117,35 +117,35 @@ const componentAvatar = {
         text: "#000000",
         background: "none",
         border: "0.0625rem solid #8d8d8d",
-        ":hover": {
+        hover: {
           background: "#ededed"
         },
-        ":active": {
+        active: {
           background: "#dcdcdc"
         }
       }
     },
     display: "inline-flex",
-    "align-items": "center",
-    "justify-content": "center",
+    alignItems: "center",
+    justifyContent: "center",
     overflow: "hidden",
-    "flex-shrink": "0",
-    "border-radius": "50%",
-    "user-select": "none",
+    flexShrink: "0",
+    borderRadius: "50%",
+    userSelect: "none",
     link: {
       width: "fit-content",
-      ":focus-visible": {
+      focusVisible: {
         outline: "0.125rem solid #0072a9",
-        "outline-offset": "0.125rem"
+        outlineOffset: "0.125rem"
       },
-      "text-decoration": "none"
+      textDecoration: "none"
     },
     button: {
       background: "none",
       border: "none",
       padding: "0",
       cursor: "pointer",
-      ":disabled": {
+      disabled: {
         cursor: "not-allowed"
       }
     }

package/dist/styleD/build/typescript/component/avatar.js

@@ -5,10 +5,10 @@ const componentAvatar = {
         text: "#24491d",
         background: "#cde4c9",
         border: "unset",
-        ":hover": {
+        hover: {
           background: "#aed2a6"
         },
-        ":active": {
+        active: {
           background: "#8ec183"
         }
       },
@@ -16,10 +16,10 @@ const componentAvatar = {
         text: "#092f62",
         background: "#c5d9f4",
         border: "unset",
-        ":hover": {
+        hover: {
           background: "#93b9ec"
         },
-        ":active": {
+        active: {
           background: "#699ee5"
         }
       },
@@ -27,10 +27,10 @@ const componentAvatar = {
         text: "#65170e",
         background: "#f5c6c0",
         border: "unset",
-        ":hover": {
+        hover: {
           background: "#eea198"
         },
-        ":active": {
+        active: {
           background: "#e87c6f"
         }
       },
@@ -38,10 +38,10 @@ const componentAvatar = {
         text: "#00344e",
         background: "#b8d8e7",
         border: "unset",
-        ":hover": {
+        hover: {
           background: "#8abed7"
         },
-        ":active": {
+        active: {
           background: "#5ca5c8"
         }
       },
@@ -49,32 +49,32 @@ const componentAvatar = {
         text: "#0e2729",
         background: "#c5dfe1",
         border: "unset",
-        ":hover": {
+        hover: {
           background: "#a0cace"
         },
-        ":active": {
+        active: {
           background: "#7bb5bb"
         }
       },
-      "cool-purple": {
+      coolPurple: {
         text: "#394069",
         background: "#dbdff7",
         border: "unset",
-        ":hover": {
+        hover: {
           background: "#c3caf3"
         },
-        ":active": {
+        active: {
           background: "#acb5ee"
         }
       },
-      "warm-purple": {
+      warmPurple: {
         text: "#381350",
         background: "#dac3e8",
         border: "unset",
-        ":hover": {
+        hover: {
           background: "#c29dd9"
         },
-        ":active": {
+        active: {
           background: "#aa76cb"
         }
       },
@@ -82,10 +82,10 @@ const componentAvatar = {
         text: "#581734",
         background: "#edc6d7",
         border: "unset",
-        ":hover": {
+        hover: {
           background: "#e2a1be"
         },
-        ":active": {
+        active: {
           background: "#d67ca4"
         }
       },
@@ -93,10 +93,10 @@ const componentAvatar = {
         text: "#693c16",
         background: "#fcddc6",
         border: "unset",
-        ":hover": {
+        hover: {
           background: "#fac7a1"
         },
-        ":active": {
+        active: {
           background: "#f9b27c"
         }
       },
@@ -104,10 +104,10 @@ const componentAvatar = {
         text: "#5b4a0b",
         background: "#fbeebf",
         border: "unset",
-        ":hover": {
+        hover: {
           background: "#f9e396"
         },
-        ":active": {
+        active: {
           background: "#f6d86d"
         }
       },
@@ -115,35 +115,35 @@ const componentAvatar = {
         text: "#000000",
         background: "none",
         border: "0.0625rem solid #8d8d8d",
-        ":hover": {
+        hover: {
           background: "#ededed"
         },
-        ":active": {
+        active: {
           background: "#dcdcdc"
         }
       }
     },
     display: "inline-flex",
-    "align-items": "center",
-    "justify-content": "center",
+    alignItems: "center",
+    justifyContent: "center",
     overflow: "hidden",
-    "flex-shrink": "0",
-    "border-radius": "50%",
-    "user-select": "none",
+    flexShrink: "0",
+    borderRadius: "50%",
+    userSelect: "none",
     link: {
       width: "fit-content",
-      ":focus-visible": {
+      focusVisible: {
         outline: "0.125rem solid #0072a9",
-        "outline-offset": "0.125rem"
+        outlineOffset: "0.125rem"
       },
-      "text-decoration": "none"
+      textDecoration: "none"
     },
     button: {
       background: "none",
       border: "none",
       padding: "0",
       cursor: "pointer",
-      ":disabled": {
+      disabled: {
         cursor: "not-allowed"
       }
     }

package/dist/styleD/build/typescript/component/button.cjs

@@ -3,19 +3,19 @@
 const componentButton = {
   shared: {
     display: "inline-flex",
-    "-webkit-appearance": "none",
-    "text-align": "inherit",
-    "box-shadow": "none",
+    webkitAppearance: "none",
+    textAlign: "inherit",
+    boxShadow: "none",
     cursor: "pointer",
-    "justify-content": "center",
-    "align-items": "center",
-    "text-decoration": "none",
-    ":disabled": {
+    justifyContent: "center",
+    alignItems: "center",
+    textDecoration: "none",
+    disabled: {
       cursor: "not-allowed"
     },
-    ":focus-visible": {
+    focusVisible: {
       outline: "0.125rem solid #0072a9",
-      "outline-offset": "0.125rem"
+      outlineOffset: "0.125rem"
     }
   },
   primary: {
@@ -24,15 +24,15 @@ const componentButton = {
       backgroundColor: "#0d4289",
       borderRadius: "0.25rem",
       border: "0.0625rem solid #0d4289",
-      ":hover": {
+      hover: {
         backgroundColor: "#092f62",
         border: "0.0625rem solid #092f62"
       },
-      ":active": {
+      active: {
         backgroundColor: "#061d3c",
         border: "0.0625rem solid #061d3c"
       },
-      ":disabled": {
+      disabled: {
         color: "#999999",
         backgroundColor: "#dcdcdc",
         border: "0.0625rem solid #dcdcdc"
@@ -149,15 +149,15 @@ const componentButton = {
       backgroundColor: "#545454",
       borderRadius: "0.25rem",
       border: "0.0625rem solid #545454",
-      ":hover": {
+      hover: {
         backgroundColor: "#333333",
         border: "0.0625rem solid #333333"
       },
-      ":active": {
+      active: {
         backgroundColor: "#121212",
         border: "0.0625rem solid #121212"
       },
-      ":disabled": {
+      disabled: {
         color: "#999999",
         backgroundColor: "#dcdcdc",
         border: "0.0625rem solid #dcdcdc"
@@ -274,15 +274,15 @@ const componentButton = {
       backgroundColor: "none",
       borderRadius: "0.25rem",
       border: "0.0625rem solid #545454",
-      ":hover": {
+      hover: {
         backgroundColor: "#f6f6f6",
         border: "0.0625rem solid #545454"
       },
-      ":active": {
+      active: {
         backgroundColor: "#ededed",
         border: "0.0625rem solid #545454"
       },
-      ":disabled": {
+      disabled: {
         color: "#999999",
         backgroundColor: "none",
         border: "0.0625rem solid #dcdcdc"

package/dist/styleD/build/typescript/component/button.js

@@ -1,19 +1,19 @@
 const componentButton = {
   shared: {
     display: "inline-flex",
-    "-webkit-appearance": "none",
-    "text-align": "inherit",
-    "box-shadow": "none",
+    webkitAppearance: "none",
+    textAlign: "inherit",
+    boxShadow: "none",
     cursor: "pointer",
-    "justify-content": "center",
-    "align-items": "center",
-    "text-decoration": "none",
-    ":disabled": {
+    justifyContent: "center",
+    alignItems: "center",
+    textDecoration: "none",
+    disabled: {
       cursor: "not-allowed"
     },
-    ":focus-visible": {
+    focusVisible: {
       outline: "0.125rem solid #0072a9",
-      "outline-offset": "0.125rem"
+      outlineOffset: "0.125rem"
     }
   },
   primary: {
@@ -22,15 +22,15 @@ const componentButton = {
       backgroundColor: "#0d4289",
       borderRadius: "0.25rem",
       border: "0.0625rem solid #0d4289",
-      ":hover": {
+      hover: {
         backgroundColor: "#092f62",
         border: "0.0625rem solid #092f62"
       },
-      ":active": {
+      active: {
         backgroundColor: "#061d3c",
         border: "0.0625rem solid #061d3c"
       },
-      ":disabled": {
+      disabled: {
         color: "#999999",
         backgroundColor: "#dcdcdc",
         border: "0.0625rem solid #dcdcdc"
@@ -147,15 +147,15 @@ const componentButton = {
       backgroundColor: "#545454",
       borderRadius: "0.25rem",
       border: "0.0625rem solid #545454",
-      ":hover": {
+      hover: {
         backgroundColor: "#333333",
         border: "0.0625rem solid #333333"
       },
-      ":active": {
+      active: {
         backgroundColor: "#121212",
         border: "0.0625rem solid #121212"
       },
-      ":disabled": {
+      disabled: {
         color: "#999999",
         backgroundColor: "#dcdcdc",
         border: "0.0625rem solid #dcdcdc"
@@ -272,15 +272,15 @@ const componentButton = {
       backgroundColor: "none",
       borderRadius: "0.25rem",
       border: "0.0625rem solid #545454",
-      ":hover": {
+      hover: {
         backgroundColor: "#f6f6f6",
         border: "0.0625rem solid #545454"
       },
-      ":active": {
+      active: {
         backgroundColor: "#ededed",
         border: "0.0625rem solid #545454"
       },
-      ":disabled": {
+      disabled: {
         color: "#999999",
         backgroundColor: "none",
         border: "0.0625rem solid #dcdcdc"

package/dist/styleD/build/typescript/component/checkbox.cjs

@@ -6,16 +6,16 @@ const componentCheckbox = {
       display: "flex",
       position: "relative",
       gap: "0.5rem",
-      "align-items": "flex-start",
+      alignItems: "flex-start",
       color: "#000000",
       cursor: "pointer",
       indicator: {
         display: "flex",
-        "align-items": "center",
-        "justify-content": "center",
-        "flex-shrink": 0,
+        alignItems: "center",
+        justifyContent: "center",
+        flexShrink: 0,
         border: "0.0625rem solid #545454",
-        "border-radius": "0.25rem",
+        borderRadius: "0.25rem",
         transition: "all 200ms",
         svg: {
           fill: "none"
@@ -29,23 +29,23 @@ const componentCheckbox = {
           height: "2px"
         },
         selected: {
-          "background-color": "#005d8b",
+          backgroundColor: "#005d8b",
           border: "0.0625rem solid #0072a9",
           svg: {
             fill: "#ffffff"
           }
         },
-        ":focus-visible": {
+        focusVisible: {
           outline: "0.125rem solid #0072a9",
-          "outline-offset": "0.125rem"
+          outlineOffset: "0.125rem"
         },
         error: {
-          "background-color": "#b42a19",
+          backgroundColor: "#b42a19",
           border: "0.0625rem solid #b42a19"
         }
       },
       label: {
-        "align-self": "center"
+        alignSelf: "center"
       },
       disabled: {
         color: "#999999",
@@ -53,7 +53,7 @@ const componentCheckbox = {
         indicator: {
           border: "0.0625rem solid #dcdcdc",
           selected: {
-            "background-color": "#dcdcdc"
+            backgroundColor: "#dcdcdc"
           }
         }
       }
@@ -82,17 +82,17 @@ const componentCheckbox = {
   group: {
     shared: {
       display: "flex",
-      "flex-direction": "column"
+      flexDirection: "column"
     },
     sm: {
       gap: "1rem",
-      "margin-top": "0.5rem",
-      "margin-bottom": "0.5rem"
+      marginTop: "0.5rem",
+      marginBottom: "0.5rem"
     },
     md: {
       gap: "1.25rem",
-      "margin-top": "0.75rem",
-      "margin-bottom": "0.75rem"
+      marginTop: "0.75rem",
+      marginBottom: "0.75rem"
     }
   }
 };

package/dist/styleD/build/typescript/component/checkbox.js

@@ -4,16 +4,16 @@ const componentCheckbox = {
       display: "flex",
       position: "relative",
       gap: "0.5rem",
-      "align-items": "flex-start",
+      alignItems: "flex-start",
       color: "#000000",
       cursor: "pointer",
       indicator: {
         display: "flex",
-        "align-items": "center",
-        "justify-content": "center",
-        "flex-shrink": 0,
+        alignItems: "center",
+        justifyContent: "center",
+        flexShrink: 0,
         border: "0.0625rem solid #545454",
-        "border-radius": "0.25rem",
+        borderRadius: "0.25rem",
         transition: "all 200ms",
         svg: {
           fill: "none"
@@ -27,23 +27,23 @@ const componentCheckbox = {
           height: "2px"
         },
         selected: {
-          "background-color": "#005d8b",
+          backgroundColor: "#005d8b",
           border: "0.0625rem solid #0072a9",
           svg: {
             fill: "#ffffff"
           }
         },
-        ":focus-visible": {
+        focusVisible: {
           outline: "0.125rem solid #0072a9",
-          "outline-offset": "0.125rem"
+          outlineOffset: "0.125rem"
         },
         error: {
-          "background-color": "#b42a19",
+          backgroundColor: "#b42a19",
           border: "0.0625rem solid #b42a19"
         }
       },
       label: {
-        "align-self": "center"
+        alignSelf: "center"
       },
       disabled: {
         color: "#999999",
@@ -51,7 +51,7 @@ const componentCheckbox = {
         indicator: {
           border: "0.0625rem solid #dcdcdc",
           selected: {
-            "background-color": "#dcdcdc"
+            backgroundColor: "#dcdcdc"
           }
         }
       }
@@ -80,17 +80,17 @@ const componentCheckbox = {
   group: {
     shared: {
       display: "flex",
-      "flex-direction": "column"
+      flexDirection: "column"
     },
     sm: {
       gap: "1rem",
-      "margin-top": "0.5rem",
-      "margin-bottom": "0.5rem"
+      marginTop: "0.5rem",
+      marginBottom: "0.5rem"
     },
     md: {
       gap: "1.25rem",
-      "margin-top": "0.75rem",
-      "margin-bottom": "0.75rem"
+      marginTop: "0.75rem",
+      marginBottom: "0.75rem"
     }
   }
 };