@ndla/ui 55.0.13-alpha.0 → 55.0.14-alpha.0

package/lib/styles.css

@@ -35,6 +35,30 @@
       font-size: calc(var(--font-sizes-medium) * 1.11);
       line-height: calc(var(--line-heights-medium) * 1.11);
 }
+
+    .textStyle_body\.medium {
+      font-family: var(--fonts-sans);
+      font-weight: var(--font-weights-normal);
+      font-size: var(--font-sizes-small);
+      line-height: var(--line-heights-small);
+}
+
+    .textStyle_body\.medium:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
+      font-size: calc(var(--font-sizes-small) * 1.11);
+      line-height: calc(var(--line-heights-small) * 1.11);
+}
+
+    .\[\&_a\]\:textStyle_label\.xsmall a {
+      font-family: var(--fonts-sans);
+      font-weight: var(--font-weights-normal);
+      font-size: var(--font-sizes-xxsmall);
+      line-height: var(--line-heights-xxsmall);
+}
+
+    .\[\&_a\]\:textStyle_label\.xsmall a:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
+      font-size: calc(var(--font-sizes-xxsmall) * 1.11);
+      line-height: calc(var(--line-heights-xxsmall) * 1.11);
+}
 }
 
   .bd_1px_solid {
@@ -230,6 +254,26 @@
     max-width: 8xl;
 }
 
+  .max-w_surface\.xsmall {
+    max-width: var(--sizes-surface-xsmall);
+}
+
+  .gap_xxsmall {
+    gap: var(--spacing-xxsmall);
+}
+
+  .td_underline {
+    text-decoration: underline;
+}
+
+  .h_215px {
+    height: 215px;
+}
+
+  .c_inherit {
+    color: inherit;
+}
+
   .bd-l_4px_solid {
     border-left: 4px solid;
 }
@@ -246,6 +290,26 @@
     white-space: pre;
 }
 
+  .d_inline {
+    display: inline;
+}
+
+  .ms_xsmall {
+    margin-inline-start: var(--spacing-xsmall);
+}
+
+  .h_auto {
+    height: auto;
+}
+
+  .w_surface\.xlarge {
+    width: var(--sizes-surface-xlarge);
+}
+
+  .c_text\.error {
+    color: var(--colors-text-error);
+}
+
   .h_surface\.xsmall {
     height: var(--sizes-surface-xsmall);
 }
@@ -295,6 +359,82 @@
     border-radius: var(--radii-large);
 }
 
+  .ov_visible {
+    overflow: visible;
+}
+
+  .bd-b_1px_solid {
+    border-bottom: 1px solid;
+}
+
+  .py_4xsmall {
+    padding-block: var(--spacing-4xsmall);
+}
+
+  .px_4xsmall {
+    padding-inline: var(--spacing-4xsmall);
+}
+
+  .ta_center {
+    text-align: center;
+}
+
+  .my_xxlarge {
+    margin-block: var(--spacing-xxlarge);
+}
+
+  .p_medium {
+    padding: var(--spacing-medium);
+}
+
+  .max-h_surface\.xxsmall {
+    max-height: var(--sizes-surface-xxsmall);
+}
+
+  .gap_small {
+    gap: var(--spacing-small);
+}
+
+  .px_0 {
+    padding-inline: 0;
+}
+
+  .mbs_3xsmall {
+    margin-block-start: var(--spacing-3xsmall);
+}
+
+  .py_small {
+    padding-block: var(--spacing-small);
+}
+
+  .bd-t_1px_solid {
+    border-top: 1px solid;
+}
+
+  .bg_surface\.default {
+    background: var(--colors-surface-default);
+}
+
+  .c_icon\.strong {
+    color: var(--colors-icon-strong);
+}
+
+  .li-s_none {
+    list-style: none;
+}
+
+  .d_grid {
+    display: grid;
+}
+
+  .mbs_xsmall {
+    margin-block-start: var(--spacing-xsmall);
+}
+
+  .asp_1\/1 {
+    aspect-ratio: 1/1;
+}
+
   .bd-c_stroke\.default {
     border-color: var(--colors-stroke-default);
 }
@@ -342,6 +482,10 @@
     transition-timing-function: var(--easings-default);
 }
 
+  .as_center {
+    align-self: center;
+}
+
   .bd-l-c_stroke\.default {
     border-left-color: var(--colors-stroke-default);
 }
@@ -413,6 +557,65 @@
     background-color: var(--colors-surface-action);
 }
 
+  .border-style_dashed {
+    border-style: dashed;
+}
+
+  .bd-c_stroke\.hover {
+    border-color: var(--colors-stroke-hover);
+}
+
+  .mb_medium {
+    margin-bottom: var(--spacing-medium);
+}
+
+  .mt_3xsmall {
+    margin-top: var(--spacing-3xsmall);
+}
+
+  .ml_3xsmall {
+    margin-left: var(--spacing-3xsmall);
+}
+
+  .trs-prop_max-height {
+    --transition-prop: max-height;
+    transition-property: max-height;
+}
+
+  .trs-dur_slow {
+    --transition-duration: var(--durations-slow);
+    transition-duration: var(--durations-slow);
+}
+
+  .trs-tmf_ease-in-out {
+    --transition-easing: ease-in-out;
+    transition-timing-function: ease-in-out;
+}
+
+  .bottom_-medium {
+    bottom: calc(var(--spacing-medium) * -1);
+}
+
+  .jc_space-between {
+    justify-content: space-between;
+}
+
+  .font-style_italic {
+    font-style: italic;
+}
+
+  .grid-tc_repeat\(2\,_1fr\) {
+    grid-template-columns: repeat(2, 1fr);
+}
+
+  .\[\&\[data-align\=\"center\"\]\]\:ta_center[data-align="center"] {
+    text-align: center;
+}
+
+  .\[\&\:has\(span\[dir\=\"rtl\"\]\)\]\:direction_rtl:has(span[dir="rtl"]) {
+    direction: rtl;
+}
+
   .\[\&_img\]\:w_100\% img {
     width: 100%;
 }
@@ -517,10 +720,18 @@
     opacity: 0.7;
 }
 
+  .\[\&_p\]\:d_inline p {
+    display: inline;
+}
+
   .\[\&_\>_\*\:not\(\:where\(\:first-child\)\)\]\:mbs_xsmall > *:not(:where(:first-child)) {
     margin-block-start: var(--spacing-xsmall);
 }
 
+  .\[\&_li\]\:d_block li {
+    display: block;
+}
+
   .\[\&_svg\]\:fill_text\.subtle svg {
     fill: var(--colors-text-subtle);
 }
@@ -541,10 +752,93 @@
     margin-block-start: var(--spacing-3xsmall);
 }
 
+  .\[\&_iframe\]\:h_auto iframe {
+    height: auto;
+}
+
+  .\[\&_iframe\]\:w_100\% iframe {
+    width: 100%;
+}
+
+  .\[\&_a\]\:ms_1 a {
+    margin-inline-start: var(--spacing-1);
+}
+
   .\[\&_svg\]\:fill_primary svg {
     fill: var(--colors-primary);
 }
 
+  .\[\&_a\]\:c_text\.strong a {
+    color: var(--colors-text-strong);
+}
+
+  .open\:max-h_500vh:is([open], [data-open], [data-state="open"]) {
+    max-height: 500vh;
+}
+
+  .\[\&_\:first-child\]\:mbs_0 :first-child {
+    margin-block-start: 0;
+}
+
+  .after\:ta_center::after {
+    text-align: center;
+}
+
+  .after\:pos_absolute::after {
+    position: absolute;
+}
+
+  .after\:inset_0::after {
+    inset: 0;
+}
+
+  .after\:grad-from_surface\.default\/00::after {
+    --mix---gradient-from: color-mix(in srgb, var(--colors-surface-default) 00%, transparent);
+    --gradient-from: var(--mix---gradient-from, var(--colors-surface-default));
+}
+
+  .after\:grad-to_surface\.default::after {
+    --gradient-to: var(--colors-surface-default);
+}
+
+  .after\:bg-grad_to-b::after {
+    --gradient-stops: var(--gradient-via-stops, var(--gradient-from) var(--gradient-from-position), var(--gradient-to) var(--gradient-to-position));
+    --gradient: var(--gradient-via-stops, var(--gradient-stops));
+    background-image: linear-gradient(to bottom, var(--gradient));
+}
+
+  .after\:op_1::after {
+    opacity: 1;
+}
+
+  .after\:z_base::after {
+    z-index: var(--z-index-base);
+}
+
+  .open\:pbe_xsmall:is([open], [data-open], [data-state="open"]) {
+    padding-block-end: var(--spacing-xsmall);
+}
+
+  .first\:bg_surface\.brand\.1\.subtle:first-child {
+    background: var(--colors-surface-brand-1-subtle);
+}
+
+  .\[\&_h3\]\:td_underline h3 {
+    text-decoration: underline;
+}
+
+  .before\:pos_absolute::before {
+    position: absolute;
+}
+
+  .before\:inset_0::before {
+    inset: 0;
+}
+
+  .before\:z_0::before {
+    z-index: 0;
+}
+
   .\[\&_\.linenumber\]\:bd-c_stroke\.subtle .linenumber {
     border-color: var(--colors-stroke-subtle);
 }
@@ -576,6 +870,71 @@
     transition-timing-function: ease-out;
 }
 
+  .\[\&_h1\]\:mt_0 h1 {
+    margin-top: 0;
+}
+
+  .after\:content_\"\"::after {
+    content: "";
+}
+
+  .after\:trs-prop_opacity::after {
+    --transition-prop: opacity;
+    transition-property: opacity;
+}
+
+  .after\:trs-dur_slow::after {
+    --transition-duration: var(--durations-slow);
+    transition-duration: var(--durations-slow);
+}
+
+  .after\:trs-tmf_ease-out::after {
+    --transition-easing: ease-out;
+    transition-timing-function: ease-out;
+}
+
+  .\[\&_svg\]\:trs-tmf_ease-in-out svg {
+    --transition-easing: ease-in-out;
+    transition-timing-function: ease-in-out;
+}
+
+  .\[\&_svg\]\:trs-dur_fast svg {
+    --transition-duration: var(--durations-fast);
+    transition-duration: var(--durations-fast);
+}
+
+  .first\:bd-c_stroke\.default:first-child {
+    border-color: var(--colors-stroke-default);
+}
+
+  .\[\&_\[data-forward\]\]\:trs-prop_width\,_height [data-forward] {
+    --transition-prop: width, height;
+    transition-property: width, height;
+}
+
+  .\[\&_\[data-forward\]\]\:trs-tmf_ease-in-out [data-forward] {
+    --transition-easing: ease-in-out;
+    transition-timing-function: ease-in-out;
+}
+
+  .\[\&_\[data-forward\]\]\:trs-dur_fast [data-forward] {
+    --transition-duration: var(--durations-fast);
+    transition-duration: var(--durations-fast);
+}
+
+  .before\:content_\"\"::before {
+    content: "";
+}
+
+  .focusVisible\:ring_none:is(:focus-visible, [data-focus-visible]) {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+}
+
+  .focusVisible\:bdr_0:is(:focus-visible, [data-focus-visible]) {
+    border-radius: 0;
+}
+
   .\[\&\:hover\,_\&\:focus-visible\]\:bd-c_stroke\.hover:hover,.\[\&\:hover\,_\&\:focus-visible\]\:bd-c_stroke\.hover:focus-visible {
     border-color: var(--colors-stroke-hover);
 }
@@ -584,14 +943,82 @@
     background-color: var(--colors-surface-action-subtle-hover);
 }
 
+  .hover\:td_none:is(:hover, [data-hover]) {
+    text-decoration: none;
+}
+
+  .hover\:bg_surface\.actionSubtle\.hover:is(:hover, [data-hover]) {
+    background: var(--colors-surface-action-subtle-hover);
+}
+
+  .hover\:bd-c_text\.link:is(:hover, [data-hover]) {
+    border-color: var(--colors-text-link);
+}
+
+  .active\:bg_surface\.actionSubtle\.active:is(:active, [data-active]) {
+    background: var(--colors-surface-action-subtle-active);
+}
+
+  .active\:bd-c_text\.link:is(:active, [data-active]) {
+    border-color: var(--colors-text-link);
+}
+
   .\[\&_button\[data-expanded\=\'true\'\]\]\:\[\&_svg\]\:trf_rotate\(-45deg\) button[data-expanded='true'] svg {
     transform: rotate(-45deg);
 }
 
+  .open\:after\:op_0:is([open], [data-open], [data-state="open"])::after {
+    opacity: 0;
+}
+
+  .open\:after\:z_hide:is([open], [data-open], [data-state="open"])::after {
+    z-index: var(--z-index-hide);
+}
+
+  .open\:\[\&_svg\]\:trf_rotate\(180deg\):is([open], [data-open], [data-state="open"]) svg {
+    transform: rotate(180deg);
+}
+
+  .first\:\[\&_p\]\:fw_bold:first-child p {
+    font-weight: var(--font-weights-bold);
+}
+
   .\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:hover h1,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:hover h2,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:hover h3,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:hover h4,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:hover h5,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:hover h6,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:focus-visible h1,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:focus-visible h2,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:focus-visible h3,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:focus-visible h4,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:focus-visible h5,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:focus-visible h6 {
     text-decoration: underline;
 }
 
+  .focusVisible\:after\:pos_absolute:is(:focus-visible, [data-focus-visible])::after {
+    position: absolute;
+}
+
+  .focusVisible\:after\:inset_0:is(:focus-visible, [data-focus-visible])::after {
+    inset: 0;
+}
+
+  .focusVisible\:after\:ring_3px:is(:focus-visible, [data-focus-visible])::after {
+    outline: 3px;
+}
+
+  .focusVisible\:after\:bdr_xsmall:is(:focus-visible, [data-focus-visible])::after {
+    border-radius: var(--radii-xsmall);
+}
+
+  .focusVisible\:after\:ring-o_3px:is(:focus-visible, [data-focus-visible])::after {
+    outline-offset: 3px;
+}
+
+  .focusVisible\:after\:content_\"\":is(:focus-visible, [data-focus-visible])::after {
+    content: "";
+}
+
+  .focusVisible\:after\:ring-c_stroke\.default:is(:focus-visible, [data-focus-visible])::after {
+    outline-color: var(--colors-stroke-default);
+}
+
+  .focusVisible\:after\:outline-style_solid:is(:focus-visible, [data-focus-visible])::after {
+    outline-style: solid;
+}
+
   .hover\:\[\&_\[data-byline-button\]\]\:bg_background\.default:is(:hover, [data-hover]) [data-byline-button] {
     background: var(--colors-background-default);
 }
@@ -600,9 +1027,33 @@
     transform: scale(1.2);
 }
 
+  .hover\:\[\&_h3\]\:td_none:is(:hover, [data-hover]) h3 {
+    text-decoration: none;
+}
+
+  .hover\:\[\&_\[data-forward\]\]\:w_large:is(:hover, [data-hover]) [data-forward] {
+    width: var(--sizes-large);
+}
+
+  .hover\:\[\&_\[data-forward\]\]\:h_large:is(:hover, [data-hover]) [data-forward] {
+    height: var(--sizes-large);
+}
+
+  @media screen and (min-width: 29.75rem) {
+    .mobileWide\:max-w_surface\.medium {
+      max-width: var(--sizes-surface-medium);
+}
+}
+
   @media screen and (min-width: 37.5625rem) {
     .tablet\:px_medium {
       padding-inline: var(--spacing-medium);
+}
+    .tablet\:mt_xxlarge {
+      margin-top: var(--spacing-xxlarge);
+}
+    .tablet\:mb_xxlarge {
+      margin-bottom: var(--spacing-xxlarge);
 }
     .\[\&\[data-has-image\=\'true\'\]\]\:tablet\:py_xsmall[data-has-image='true'] {
       padding-block: var(--spacing-xsmall);
@@ -621,6 +1072,9 @@
 }
     .tabletWide\:max-w_532px {
       max-width: 532px;
+}
+    .tabletWide\:max-w_1100px {
+      max-width: 1100px;
 }
     .tabletWide\:flex-d_row {
       flex-direction: row;
@@ -636,6 +1090,9 @@
 }
     .desktop\:h_260px {
       height: 260px;
+}
+    .desktop\:h_340px {
+      height: 340px;
 }
 }
 
@@ -663,6 +1120,9 @@
 }
     .tabletWideDown\:px_xsmall {
       padding-inline: var(--spacing-xsmall);
+}
+    .tabletWideDown\:p_xsmall {
+      padding: var(--spacing-xsmall);
 }
     .tabletWideDown\:grid-tc_1fr_repeat\(5\,_auto\)_1fr {
       grid-template-columns: 1fr repeat(5, auto) 1fr;
@@ -670,6 +1130,30 @@
     .tabletWideDown\:grid-template-areas_\"track_track_track_track_track_track_track\"_\"\._speed_backwards_play_forwards_volume_\.\" {
       grid-template-areas: "track track track track track track track" ". speed backwards play forwards volume .";
 }
+}
+
+  @media screen and (max-width: 37.56rem) {
+    .tabletDown\:gap_0 {
+      gap: 0;
+}
+    .tabletDown\:p_0 {
+      padding: 0;
+}
+    .tabletDown\:p_xsmall {
+      padding: var(--spacing-xsmall);
+}
+    .tabletDown\:w_100\% {
+      width: 100%;
+}
+    .tabletDown\:bdr_0 {
+      border-radius: 0;
+}
+    .tabletDown\:grid-tc_1fr {
+      grid-template-columns: 1fr;
+}
+    .tabletDown\:flex-d_column {
+      flex-direction: column;
+}
 }
 
   @media screen and (max-width: 29.7475rem) {
@@ -682,5 +1166,32 @@
     .mobileDown\:px_xsmall {
       padding-inline: var(--spacing-xsmall);
 }
+}
+
+  @media print {
+    .print\:ov_visible {
+      overflow: visible;
+}
+    .print\:d_none {
+      display: none;
+}
+}
+
+  @media print {
+    .closed\:print\:ov_visible:is([closed], [data-closed], [data-state="closed"]) {
+      overflow: visible;
+}
+}
+
+  @media print {
+    .closed\:print\:max-h_500vh:is([closed], [data-closed], [data-state="closed"]) {
+      max-height: 500vh;
+}
+}
+
+  @media print {
+    .print\:after\:d_none::after {
+      display: none;
+}
 }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "55.0.13-alpha.0",
+  "version": "55.0.14-alpha.0",
   "description": "UI component library for NDLA",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -33,17 +33,17 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/accordion": "^5.0.6-alpha.0",
-    "@ndla/button": "^14.0.6-alpha.0",
+    "@ndla/accordion": "^5.0.7-alpha.0",
+    "@ndla/button": "^14.0.7-alpha.0",
     "@ndla/core": "^5.0.1",
     "@ndla/dropdown-menu": "^1.0.38",
-    "@ndla/forms": "^9.0.6-alpha.0",
+    "@ndla/forms": "^9.0.7-alpha.0",
     "@ndla/hooks": "^2.1.8",
-    "@ndla/icons": "^7.0.7-alpha.0",
+    "@ndla/icons": "^7.0.8-alpha.0",
     "@ndla/licenses": "^8.0.0-alpha.0",
-    "@ndla/modal": "^7.0.6-alpha.0",
-    "@ndla/primitives": "^0.0.17",
-    "@ndla/safelink": "^6.0.0-alpha.0",
+    "@ndla/modal": "^7.0.7-alpha.0",
+    "@ndla/primitives": "^0.0.18",
+    "@ndla/safelink": "^6.0.1-alpha.0",
     "@ndla/styled-system": "^0.0.8",
     "@ndla/tooltip": "^8.0.1",
     "@ndla/typography": "^0.4.23",
@@ -54,9 +54,7 @@
     "i18next-browser-languagedetector": "^7.1.0",
     "lodash.throttle": "^4.1.1",
     "punycode.js": "^2.3.1",
-    "react-device-detect": "^2.2.3",
-    "react-select": "^5.8.0",
-    "react-swipeable": "^7.0.0"
+    "react-device-detect": "^2.2.3"
   },
   "peerDependencies": {
     "@emotion/react": "^11.10.4",
@@ -68,7 +66,7 @@
     "react-router-dom": "> 6.0.0"
   },
   "devDependencies": {
-    "@ndla/preset-panda": "^0.0.10",
+    "@ndla/preset-panda": "^0.0.11",
     "@ndla/types-backend": "^0.2.86",
     "@ndla/types-embed": "^4.1.8",
     "@pandacss/dev": "^0.42.0",
@@ -81,5 +79,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "93dde6fe4aaca52642f8fa0a27f4acad359207cb"
+  "gitHead": "6fdfbed9f18bbd725c837fb74de2f093e80d5605"
 }

package/src/Article/ArticleParagraph.tsx

@@ -7,19 +7,21 @@
  */
 
 import { ComponentPropsWithoutRef, ReactNode } from "react";
-import styled from "@emotion/styled";
+import { styled } from "@ndla/styled-system/jsx";
 
 interface Props extends ComponentPropsWithoutRef<"p"> {
   children?: ReactNode;
 }
 
-const StyledParagraph = styled.p`
-  &[data-align="center"] {
-    text-align: center;
-  }
-  &:has(span[dir="rtl"]) {
-    direction: rtl;
-  }
-`;
+const StyledParagraph = styled("p", {
+  base: {
+    '&[data-align="center"]': {
+      textAlign: "center",
+    },
+    '&:has(span[dir="rtl"])': {
+      direction: "rtl",
+    },
+  },
+});
 
 export const ArticleParagraph = (props: Props) => <StyledParagraph {...props} />;