@ndla/ui 55.0.16-alpha.0 → 55.0.18-alpha.0

package/dist/panda.buildinfo.json

@@ -2,23 +2,42 @@
   "schemaVersion": "0.42.0",
   "styles": {
     "atomic": [
+      "width]___[value:100%",
+      "display]___[value:flex",
+      "flexDirection]___[value:column",
+      "color]___[value:text.default",
+      "gap]___[value:xxlarge",
+      "background]___[value:surface.default",
+      "paddingBlock]___[value:xsmall",
+      "paddingInline]___[value:8%",
+      "alignItems]___[value:center",
+      "overflowWrap]___[value:break-word",
+      "position]___[value:relative",
+      "paddingBlock]___[value:medium]___[cond:tablet",
+      "paddingBlock]___[value:xxlarge]___[cond:desktop",
+      "transform]___[value:scaleY(100) translateY(0.075em)]___[cond:& mjx-stretchy-v > mjx-ext > mjx-c",
+      "content]___[value:]___[cond:_after",
+      "display]___[value:table]___[cond:_after",
+      "clear]___[value:both]___[cond:_after",
+      "alignItems]___[value:flex-start",
+      "gap]___[value:xsmall",
+      "overflowWrap]___[value:anywhere]___[cond:& h1",
+      "position]___[value:absolute",
+      "right]___[value:8%",
+      "top]___[value:xsmall",
+      "top]___[value:medium]___[cond:tablet",
+      "top]___[value:xxlarge]___[cond:desktop",
+      "gap]___[value:medium",
       "marginBlockStart]___[value:medium",
       "paddingBlockStart]___[value:xsmall",
       "borderTop]___[value:1px solid",
       "borderColor]___[value:stroke.subtle",
-      "display]___[value:flex",
       "flexDirection]___[value:column-reverse",
       "gap]___[value:3xsmall",
-      "width]___[value:100%",
       "justifyContent]___[value:space-between",
-      "paddingBlock]___[value:xsmall",
       "textStyle]___[value:body.medium",
       "flexDirection]___[value:row]___[cond:tabletWide",
-      "gap]___[value:xsmall",
       "paddingBlockStart]___[value:xxlarge",
-      "alignItems]___[value:center",
-      "flexDirection]___[value:column",
-      "gap]___[value:medium",
       "listStyle]___[value:none",
       "textAlign]___[value:center]___[cond:&[data-align=\"center\"]",
       "direction]___[value:rtl]___[cond:&:has(span[dir=\"rtl\"])",
@@ -41,7 +60,6 @@
       "maxWidth]___[value:100%]___[cond:tabletWideDown",
       "width]___[value:100%]___[cond:tabletWideDown",
       "height]___[value:auto]___[cond:tabletWideDown",
-      "alignItems]___[value:flex-start",
       "padding]___[value:xsmall",
       "paddingBlock]___[value:xsmall]___[cond:&[data-has-image='true']<___>tablet",
       "paddingInline]___[value:medium]___[cond:&[data-has-image='true']<___>tablet",
@@ -81,7 +99,6 @@
       "gridArea]___[value:speed",
       "height]___[value:surface.3xsmall",
       "srOnly]___[value:true",
-      "color]___[value:text.default",
       "backgroundColor]___[value:background.default",
       "transitionDuration]___[value:fast",
       "transitionProperty]___[value:background-color, border-color, max-width",
@@ -100,18 +117,27 @@
       "border]___[value:0",
       "display]___[value:inline-block",
       "width]___[value:fit-content",
-      "position]___[value:relative",
       "maxWidth]___[value:8xl",
+      "flexWrap]___[value:wrap",
+      "alignItems]___[value:flex-start]___[cond:mobileDown",
+      "justifyContent]___[value:center]___[cond:mobileDown",
+      "flexDirection]___[value:column]___[cond:mobileDown",
+      "gap]___[value:xxsmall]___[cond:mobileDown",
+      "color]___[value:inherit",
+      "gap]___[value:4xsmall",
+      "alignItems]___[value:flex-end",
+      "display]___[value:block]___[cond:tabletDown",
+      "textDecoration]___[value:underline",
+      "textDecoration]___[value:none]___[cond:_hover",
+      "textDecoration]___[value:none]___[cond:_focusVisible",
+      "display]___[value:none]___[cond:tabletDown",
       "maxWidth]___[value:surface.xsmall",
       "maxWidth]___[value:surface.medium]___[cond:mobileWide",
       "maxWidth]___[value:1100px]___[cond:tabletWide",
       "gap]___[value:xxsmall",
-      "textDecoration]___[value:underline",
-      "textDecoration]___[value:none]___[cond:_hover",
       "alignSelf]___[value:center",
       "height]___[value:215px",
       "height]___[value:340px]___[cond:desktop",
-      "color]___[value:inherit",
       "borderLeft]___[value:4px solid",
       "borderLeftColor]___[value:stroke.default",
       "boxSizing]___[value:border-box",
@@ -147,6 +173,60 @@
       "opacity]___[value:0.7]___[cond:& .token.namespace",
       "display]___[value:inline",
       "display]___[value:inline]___[cond:& p",
+      "maxWidth]___[value:744px",
+      "minWidth]___[value:surface.xxsmall",
+      "padding]___[value:medium",
+      "alignItems]___[value:unset]___[cond:tablet",
+      "flexDirection]___[value:row]___[cond:tablet",
+      "zIndex]___[value:base",
+      "content]___[value:\"\"]___[cond:_before",
+      "position]___[value:absolute]___[cond:_before",
+      "top]___[value:-60px]___[cond:_before",
+      "left]___[value:-50px]___[cond:_before",
+      "right]___[value:0]___[cond:_before",
+      "bottom]___[value:0]___[cond:_before",
+      "height]___[value:calc(100% + 50px)]___[cond:_before",
+      "width]___[value:surface.3xlarge]___[cond:_before",
+      "transform]___[value:rotate(-4deg)]___[cond:_before",
+      "zIndex]___[value:hide]___[cond:_before",
+      "backgroundColor]___[value:surface.brand.3]___[cond:_before",
+      "backgroundColor]___[value:surface.brand.3.moderate]___[cond:_before",
+      "backgroundColor]___[value:surface.brand.3.subtle]___[cond:_before",
+      "display]___[value:none]___[cond:tabletDown<___>_before",
+      "justifyContent]___[value:flex-start",
+      "content]___[value:\"\"]___[cond:tabletDown<___>_before",
+      "position]___[value:absolute]___[cond:tabletDown<___>_before",
+      "top]___[value:-50px]___[cond:tabletDown<___>_before",
+      "left]___[value:-50px]___[cond:tabletDown<___>_before",
+      "right]___[value:0]___[cond:tabletDown<___>_before",
+      "bottom]___[value:0]___[cond:tabletDown<___>_before",
+      "height]___[value:surface.xxsmall]___[cond:tabletDown<___>_before",
+      "width]___[value:surface.3xlarge]___[cond:tabletDown<___>_before",
+      "transform]___[value:rotate(-4deg)]___[cond:tabletDown<___>_before",
+      "zIndex]___[value:hide]___[cond:tabletDown<___>_before",
+      "width]___[value:surface.xsmall",
+      "height]___[value:surface.xsmall",
+      "fontFamily]___[value:serif",
+      "display]___[value:inline-flex",
+      "borderRadius]___[value:100%",
+      "color]___[value:var(--icon-color)",
+      "width]___[value:20px",
+      "height]___[value:20px",
+      "width]___[value:10px]___[cond:& svg",
+      "height]___[value:10px]___[cond:& svg",
+      "height]___[value:26px]___[cond:tablet",
+      "width]___[value:26px]___[cond:tablet",
+      "width]___[value:12px]___[cond:& svg<___>tablet",
+      "height]___[value:12px]___[cond:& svg<___>tablet",
+      "width]___[value:34px",
+      "height]___[value:34px",
+      "width]___[value:50px",
+      "height]___[value:50px",
+      "width]___[value:25px]___[cond:& svg",
+      "height]___[value:25px]___[cond:& svg",
+      "border]___[value:2px solid",
+      "borderColor]___[value:var(--icon-color)",
+      "backgroundColor]___[value:var(--background-color)",
       "marginInlineStart]___[value:xsmall",
       "height]___[value:auto",
       "textStyle]___[value:label.large",
@@ -156,7 +236,6 @@
       "display]___[value:block]___[cond:& li",
       "color]___[value:text.error",
       "backgroundColor]___[value:surface.disabled",
-      "height]___[value:surface.xsmall",
       "fill]___[value:text.subtle]___[cond:& svg",
       "height]___[value:90%]___[cond:& svg",
       "width]___[value:90%]___[cond:& svg",
@@ -174,8 +253,6 @@
       "background]___[value:background.default]___[cond:_hover<___>& [data-byline-button]",
       "transform]___[value:scale(1.2)]___[cond:_hover<___>& button[data-expanded]",
       "transform]___[value:rotate(-45deg)]___[cond:& button[data-expanded='true']<___>& svg",
-      "position]___[value:absolute",
-      "zIndex]___[value:base",
       "bottom]___[value:0",
       "right]___[value:0",
       "transitionProperty]___[value:transform, background-color, color",
@@ -187,11 +264,9 @@
       "transitionTimingFunction]___[value:ease-out]___[cond:& svg",
       "fill]___[value:primary]___[cond:& svg",
       "padding]___[value:0",
-      "top]___[value:xsmall",
       "right]___[value:xsmall",
       "width]___[value:medium",
       "height]___[value:medium",
-      "border]___[value:2px solid",
       "borderColor]___[value:background.default",
       "color]___[value:background.default",
       "backgroundColor]___[value:surface.action",
@@ -225,7 +300,6 @@
       "marginBlock]___[value:xxlarge",
       "marginTop]___[value:3xsmall",
       "marginLeft]___[value:3xsmall",
-      "padding]___[value:medium",
       "transitionProperty]___[value:max-height",
       "transitionDuration]___[value:slow",
       "transitionTimingFunction]___[value:ease-in-out",
@@ -264,10 +338,29 @@
       "borderColor]___[value:stroke.default]___[cond:_first",
       "fontWeight]___[value:bold]___[cond:_first<___>& p",
       "fontStyle]___[value:italic",
-      "background]___[value:surface.default",
+      "position]___[value:relative!",
+      "width]___[value:83.333%",
+      "right]___[value:auto !important",
+      "left]___[value:8.333%",
+      "position]___[value:relative!]___[cond:tablet",
+      "width]___[value:83.333%]___[cond:tablet",
+      "right]___[value:auto!]___[cond:tablet",
+      "left]___[value:8.333%]___[cond:tablet",
+      "marginLeft]___[value:auto",
+      "marginRight]___[value:auto",
+      "paddingLeft]___[value:18px",
+      "paddingRight]___[value:18px",
+      "paddingLeft]___[value:medium]___[cond:mobileWide",
+      "paddingRight]___[value:medium]___[cond:mobileWide",
+      "content]___[value:\"\"!]___[cond:_after",
+      "display]___[value:block!]___[cond:_after",
+      "clear]___[value:both!]___[cond:_after",
+      "maxWidth]___[value:1150px",
+      "maxWidth]___[value:1024px",
+      "minHeight]___[value:100vh",
+      "backgroundColor]___[value:#f8f8f8]___[cond:tablet",
       "borderColor]___[value:stroke.error",
       "background]___[value:surface.dangerSubtle",
-      "display]___[value:inline-flex",
       "whiteSpace]___[value:pre-wrap",
       "display]___[value:grid]___[cond:mobileWideDown",
       "gridTemplateColumns]___[value:1fr auto]___[cond:mobileWideDown",
@@ -294,8 +387,6 @@
       "width]___[value:large]___[cond:_hover<___>& [data-forward]",
       "height]___[value:large]___[cond:_hover<___>& [data-forward]",
       "color]___[value:icon.strong",
-      "content]___[value:\"\"]___[cond:_before",
-      "position]___[value:absolute]___[cond:_before",
       "inset]___[value:0]___[cond:_before",
       "zIndex]___[value:0]___[cond:_before",
       "display]___[value:grid",