npm - @ndla/primitives - Versions diffs - 1.0.116-alpha.0 → 1.0.118-alpha.0 - Mend

@ndla/primitives 1.0.116-alpha.0 → 1.0.118-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/dist/panda.buildinfo.json +16 -31
package/dist/styles.css +31 -95
package/es/ArticleLists.mjs +42 -61
package/es/ArticleLists.mjs.map +1 -1
package/es/Image.mjs +20 -2
package/es/Image.mjs.map +1 -1
package/lib/ArticleLists.d.ts +23 -59
package/lib/ArticleLists.js +41 -60
package/lib/ArticleLists.js.map +1 -1
package/lib/Combobox.d.ts +1 -1
package/lib/DatePicker.d.ts +1 -1
package/lib/FileUpload.d.ts +2 -2
package/lib/Image.js +19 -1
package/lib/Image.js.map +1 -1
package/lib/Pagination.d.ts +1 -1
package/package.json +4 -4

package/dist/panda.buildinfo.json CHANGED Viewed

@@ -53,42 +53,27 @@
       "borderWidth]___[value:0 1px 1px",
       "borderStyle]___[value:solid",
       "borderColor]___[value:stroke.default",
-      "marginInlineStart]___[value:small",
-      "paddingInlineStart]___[value:small",
-      "marginInlineStart]___[value:0 !important]___[cond:& > li<___>& > ul",
+      "paddingInlineStart]___[value:large",
+      "marginBlock]___[value:small]___[cond:& > li",
       "position]___[value:absolute]___[cond:& > li<___>_before",
-      "transform]___[value:translateX(calc(-100% + (token(spacing.small) * -1)))]___[cond:& > li<___>_before",
+      "transform]___[value:translateX(calc(-100% - token(spacing.small)))]___[cond:& > li<___>_before",
       "fontVariantNumeric]___[value:tabular-nums]___[cond:& > li<___>_before",
-      "marginBlock]___[value:small]___[cond:& li",
-      "marginInlineStart]___[value:0]___[cond:& > ol:not([data-variant='letters'])",
-      "paddingInlineStart]___[value:0]___[cond:& > ol:not([data-variant='letters'])",
-      "counterReset]___[value:level1",
-      "counterReset]___[value:level1 var(--start, 0)]___[cond:&[data-count='true']",
-      "counterIncrement]___[value:level1]___[cond:& > li",
-      "content]___[value:counter(level1, decimal) '. ']___[cond:& > li<___>_before",
-      "counterReset]___[value:level2]___[cond:& > li<___>& > ol:not([data-variant='letters'])",
-      "counterReset]___[value:level2 var(--start, 0)]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>&[data-count='true']",
-      "marginInlineStart]___[value:small]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li",
-      "counterIncrement]___[value:level2]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li",
-      "content]___[value:counter(level1, decimal) '.' counter(level2, decimal) '. ']___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>_before",
-      "counterReset]___[value:level3]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])",
-      "counterReset]___[value:level3 var(--start, 0)]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>&[data-count='true']",
-      "marginInlineStart]___[value:calc(1.5ch + token(spacing.small))]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > li",
-      "counterIncrement]___[value:level3]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > li",
-      "content]___[value:counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '. ']___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>_before",
-      "counterReset]___[value:level4]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])",
-      "counterReset]___[value:level4 var(--start, 0)]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>&[data-count='true']",
-      "marginInlineStart]___[value:calc(3ch + token(spacing.small))]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > li",
-      "counterIncrement]___[value:level4]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > li",
-      "content]___[value:counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '.' counter(level4, decimal) '. ']___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>_before",
-      "marginInlineStart]___[value:0]___[cond:& > ol[data-variant='letters']",
-      "paddingInlineStart]___[value:0]___[cond:& > ol[data-variant='letters']",
-      "content]___[value:counter(level1, upper-alpha) '. ']___[cond:& > li<___>_before",
-      "content]___[value:counter(level1, lower-alpha) '. ']___[cond:& > li<___>& > ol[data-variant='letters'] > li<___>_before",
-      "content]___[value:counter(level1, lower-roman) '. ']___[cond:& > li<___>& > ol[data-variant='letters'] > li<___>& > ol[data-variant='letters'] > li<___>_before",
+      "counterReset]___[value:var(--counter-name, numbers) var(--start, 0)",
+      "counterIncrement]___[value:var(--counter-name, numbers)]___[cond:& > li",
+      "content]___[value:counters(var(--counter-name, numbers), \".\") \". \"]___[cond:& > li<___>_before",
+      "paddingInlineStart]___[value:small]___[cond:& > li<___>& > ol:not([data-variant='letters']) > li",
+      "paddingInlineStart]___[value:large]___[cond:& > li<___>& > ol:not([data-variant='letters']) > li<___>& > ol:not([data-variant='letters']) > li",
+      "paddingInlineStart]___[value:xxlarge]___[cond:& > li<___>& > ol:not([data-variant='letters']) > li<___>& > ol:not([data-variant='letters']) > li<___>& > ol:not([data-variant='letters']) > li",
+      "counterReset]___[value:letters var(--start, 0)",
+      "counterIncrement]___[value:letters]___[cond:& > li",
+      "content]___[value:counter(letters, upper-alpha) \". \"]___[cond:& > li<___>_before",
+      "content]___[value:counter(letters, lower-alpha) \". \"]___[cond:& > li<___>& > ol[data-variant='letters'] > li<___>_before",
+      "content]___[value:counter(letters, lower-roman) \". \"]___[cond:& > li<___>& > ol[data-variant='letters'] > li<___>& > ol[data-variant='letters'] > li<___>_before",
       "listStyle]___[value:revert",
       "marginInlineStart]___[value:medium",
+      "paddingInlineStart]___[value:small",
       "marginInlineStart]___[value:0]___[cond:& ul",
+      "marginBlock]___[value:small]___[cond:& li",
       "paddingInlineStart]___[value:small]___[cond:& li",
       "color]___[value:icon.strong]___[cond:& li<___>_marker",
       "marginInlineStart]___[value:0 !important]___[cond:& li<___>& > ol",

package/dist/styles.css CHANGED Viewed

@@ -661,22 +661,26 @@
     border-bottom-right-radius: var(--radii-xsmall);
 }
-  .ms_small {
-    margin-inline-start: var(--spacing-small);
+  .ps_large {
+    padding-inline-start: var(--spacing-large);
 }
-  .ps_small {
-    padding-inline-start: var(--spacing-small);
+  .counter-reset_var\(--counter-name\,_numbers\)_var\(--start\,_0\) {
+    counter-reset: var(--counter-name, numbers) var(--start, 0);
 }
-  .counter-reset_level1 {
-    counter-reset: level1;
+  .counter-reset_letters_var\(--start\,_0\) {
+    counter-reset: letters var(--start, 0);
 }
   .ms_medium {
     margin-inline-start: var(--spacing-medium);
 }
+  .ps_small {
+    padding-inline-start: var(--spacing-small);
+}
   .li-t_disc {
     list-style-type: disc;
 }
@@ -1633,7 +1637,7 @@
     background: var(--colors-surface-default);
 }
-  .\[\&_li\]\:my_small li {
+  .\[\&_\>_li\]\:my_small > li,.\[\&_li\]\:my_small li {
     margin-block: var(--spacing-small);
 }
@@ -1767,28 +1771,12 @@
     transform: rotate(180deg);
 }
-  .\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:ms_0 > ol:not([data-variant='letters']) {
-    margin-inline-start: 0;
-}
-  .\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:ps_0 > ol:not([data-variant='letters']) {
-    padding-inline-start: 0;
-}
-  .\[\&\[data-count\=\'true\'\]\]\:counter-reset_level1_var\(--start\,_0\)[data-count='true'] {
-    counter-reset: level1 var(--start, 0);
+  .\[\&_\>_li\]\:counter-increment_var\(--counter-name\,_numbers\) > li {
+    counter-increment: var(--counter-name, numbers);
 }
-  .\[\&_\>_li\]\:counter-increment_level1 > li {
-    counter-increment: level1;
-}
-  .\[\&_\>_ol\[data-variant\=\'letters\'\]\]\:ms_0 > ol[data-variant='letters'] {
-    margin-inline-start: 0;
-}
-  .\[\&_\>_ol\[data-variant\=\'letters\'\]\]\:ps_0 > ol[data-variant='letters'] {
-    padding-inline-start: 0;
+  .\[\&_\>_li\]\:counter-increment_letters > li {
+    counter-increment: letters;
 }
   .\[\&_ul\]\:ms_0 ul {
@@ -2547,32 +2535,28 @@
     color: var(--colors-text-disabled);
 }
-  .\[\&_\>_li\]\:\[\&_\>_ul\]\:ms_0\! > li > ul {
-    margin-inline-start: 0 !important;
-}
   .\[\&_\>_li\]\:before\:pos_absolute > li::before {
     position: absolute;
 }
-  .\[\&_\>_li\]\:before\:trf_translateX\(calc\(-100\%_\+_\(token\(spacing\.small\)_\*_-1\)\)\) > li::before {
-    transform: translateX(calc(-100% + (var(--spacing-small) * -1)));
+  .\[\&_\>_li\]\:before\:trf_translateX\(calc\(-100\%_-_token\(spacing\.small\)\)\) > li::before {
+    transform: translateX(calc(-100% - var(--spacing-small)));
 }
   .\[\&_\>_li\]\:before\:fv-num_tabular-nums > li::before {
     font-variant-numeric: tabular-nums;
 }
-  .\[\&_\>_li\]\:before\:content_counter\(level1\,_decimal\)_\'\._\' > li::before {
-    content: counter(level1, decimal) '. ';
+  .\[\&_\>_li\]\:before\:content_counters\(var\(--counter-name\,_numbers\)\,_\"\.\"\)_\"\._\" > li::before {
+    content: counters(var(--counter-name, numbers), ".") ". ";
 }
-  .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:counter-reset_level2 > li > ol:not([data-variant='letters']) {
-    counter-reset: level2;
+  .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)_\>_li\]\:ps_small > li > ol:not([data-variant='letters']) > li {
+    padding-inline-start: var(--spacing-small);
 }
-  .\[\&_\>_li\]\:before\:content_counter\(level1\,_upper-alpha\)_\'\._\' > li::before {
-    content: counter(level1, upper-alpha) '. ';
+  .\[\&_\>_li\]\:before\:content_counter\(letters\,_upper-alpha\)_\"\._\" > li::before {
+    content: counter(letters, upper-alpha) ". ";
 }
   .\[\&_li\]\:marker\:c_icon\.strong li::marker,.\[\&_li\]\:marker\:c_icon\.strong li::-webkit-details-marker {
@@ -2789,20 +2773,12 @@
     border-color: var(--colors-stroke-hover);
 }
-  .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&\[data-count\=\'true\'\]\]\:counter-reset_level2_var\(--start\,_0\) > li > ol:not([data-variant='letters'])[data-count='true'] {
-    counter-reset: level2 var(--start, 0);
-}
-  .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:ms_small > li > ol:not([data-variant='letters']) > li {
-    margin-inline-start: var(--spacing-small);
+  .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)_\>_li\]\:ps_large > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) > li {
+    padding-inline-start: var(--spacing-large);
 }
-  .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:counter-increment_level2 > li > ol:not([data-variant='letters']) > li {
-    counter-increment: level2;
-}
-  .\[\&_\>_li\]\:\[\&_\>_ol\[data-variant\=\'letters\'\]_\>_li\]\:before\:content_counter\(level1\,_lower-alpha\)_\'\._\' > li > ol[data-variant='letters'] > li::before {
-    content: counter(level1, lower-alpha) '. ';
+  .\[\&_\>_li\]\:\[\&_\>_ol\[data-variant\=\'letters\'\]_\>_li\]\:before\:content_counter\(letters\,_lower-alpha\)_\"\._\" > li > ol[data-variant='letters'] > li::before {
+    content: counter(letters, lower-alpha) ". ";
 }
   .disabled\:checked\:hover\:c_text\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:hover, [data-hover]) {
@@ -2825,52 +2801,12 @@
     transform: translateX(120%);
 }
-  .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:before\:content_counter\(level1\,_decimal\)_\'\.\'_counter\(level2\,_decimal\)_\'\._\' > li > ol:not([data-variant='letters']) > li::before {
-    content: counter(level1, decimal) '.' counter(level2, decimal) '. ';
-}
-  .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:counter-reset_level3 > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) {
-    counter-reset: level3;
-}
-  .\[\&_\>_li\]\:\[\&_\>_ol\[data-variant\=\'letters\'\]_\>_li\]\:\[\&_\>_ol\[data-variant\=\'letters\'\]_\>_li\]\:before\:content_counter\(level1\,_lower-roman\)_\'\._\' > li > ol[data-variant='letters'] > li > ol[data-variant='letters'] > li::before {
-    content: counter(level1, lower-roman) '. ';
-}
-  .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&\[data-count\=\'true\'\]\]\:counter-reset_level3_var\(--start\,_0\) > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters'])[data-count='true'] {
-    counter-reset: level3 var(--start, 0);
-}
-  .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:ms_calc\(1\.5ch_\+_token\(spacing\.small\)\) > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) > li {
-    margin-inline-start: calc(1.5ch + var(--spacing-small));
-}
-  .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:counter-increment_level3 > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) > li {
-    counter-increment: level3;
-}
-  .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:before\:content_counter\(level1\,_decimal\)_\'\.\'_counter\(level2\,_decimal\)_\'\.\'_counter\(level3\,_decimal\)_\'\._\' > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) > li::before {
-    content: counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '. ';
-}
-  .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:counter-reset_level4 > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) {
-    counter-reset: level4;
-}
-  .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&\[data-count\=\'true\'\]\]\:counter-reset_level4_var\(--start\,_0\) > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters'])[data-count='true'] {
-    counter-reset: level4 var(--start, 0);
-}
-  .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:ms_calc\(3ch_\+_token\(spacing\.small\)\) > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) > li {
-    margin-inline-start: calc(3ch + var(--spacing-small));
-}
-  .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:counter-increment_level4 > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) > li {
-    counter-increment: level4;
+  .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)_\>_li\]\:ps_xxlarge > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) > li {
+    padding-inline-start: var(--spacing-xxlarge);
 }
-  .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:before\:content_counter\(level1\,_decimal\)_\'\.\'_counter\(level2\,_decimal\)_\'\.\'_counter\(level3\,_decimal\)_\'\.\'_counter\(level4\,_decimal\)_\'\._\' > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) > li::before {
-    content: counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '.' counter(level4, decimal) '. ';
+  .\[\&_\>_li\]\:\[\&_\>_ol\[data-variant\=\'letters\'\]_\>_li\]\:\[\&_\>_ol\[data-variant\=\'letters\'\]_\>_li\]\:before\:content_counter\(letters\,_lower-roman\)_\"\._\" > li > ol[data-variant='letters'] > li > ol[data-variant='letters'] > li::before {
+    content: counter(letters, lower-roman) ". ";
 }
   @media screen and (min-width: 29.75rem) {

package/es/ArticleLists.mjs CHANGED Viewed

@@ -2,7 +2,7 @@ import { ark } from "@ark-ui/react";
 import { css, cva } from "@ndla/styled-system/css";
 import { styled } from "@ndla/styled-system/jsx";
 import { jsx } from "react/jsx-runtime";
-import { forwardRef, useMemo } from "react";
+import { forwardRef, useId, useMemo } from "react";
 //#region src/ArticleLists.tsx
 /**
@@ -12,78 +12,42 @@ import { forwardRef, useMemo } from "react";
 * LICENSE file in the root directory of this source tree.
 *
 */
-const LIST_ITEM = "& > li";
-const LETTER_LIST = "& > ol[data-variant='letters']";
-const NUMBER_LIST = "& > ol:not([data-variant='letters'])";
-const LETTER_LIST_ITEM = `${LETTER_LIST} > li`;
 const orderedListRecipe = cva({
 	base: {
-		marginInlineStart: "small",
-		paddingInlineStart: "small",
-		[LIST_ITEM]: {
-			"& > ul": { marginInlineStart: "0 !important" },
+		paddingInlineStart: "large",
+		"& > li": {
+			marginBlock: "small",
 			_before: {
 				position: "absolute",
-				transform: "translateX(calc(-100% + (token(spacing.small) * -1)))",
+				transform: "translateX(calc(-100% - token(spacing.small)))",
 				fontVariantNumeric: "tabular-nums"
 			}
-		},
-		"& li": { marginBlock: "small" }
+		}
 	},
 	defaultVariants: { variant: "numbers" },
 	variants: { variant: {
 		numbers: {
-			[NUMBER_LIST]: {
-				marginInlineStart: "0",
-				paddingInlineStart: "0"
-			},
-			counterReset: "level1",
-			"&[data-count='true']": { counterReset: "level1 var(--start, 0)" },
-			[LIST_ITEM]: {
-				counterIncrement: "level1",
-				_before: { content: "counter(level1, decimal) '. '" },
-				[NUMBER_LIST]: {
-					counterReset: "level2",
-					"&[data-count='true']": { counterReset: "level2 var(--start, 0)" },
-					[LIST_ITEM]: {
-						marginInlineStart: "small",
-						counterIncrement: "level2",
-						_before: { content: "counter(level1, decimal) '.' counter(level2, decimal) '. '" },
-						[NUMBER_LIST]: {
-							counterReset: "level3",
-							"&[data-count='true']": { counterReset: "level3 var(--start, 0)" },
-							[LIST_ITEM]: {
-								marginInlineStart: "calc(1.5ch + token(spacing.small))",
-								counterIncrement: "level3",
-								_before: { content: "counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '. '" },
-								[NUMBER_LIST]: {
-									counterReset: "level4",
-									"&[data-count='true']": { counterReset: "level4 var(--start, 0)" },
-									[LIST_ITEM]: {
-										marginInlineStart: "calc(3ch + token(spacing.small))",
-										counterIncrement: "level4",
-										_before: { content: "counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '.' counter(level4,  decimal) '. '" }
-									}
-								}
-							}
-						}
+			counterReset: "var(--counter-name, numbers) var(--start, 0)",
+			"& > li": {
+				counterIncrement: "var(--counter-name, numbers)",
+				_before: { content: `counters(var(--counter-name, numbers), ".") ". "` },
+				"& > ol:not([data-variant='letters']) > li": {
+					paddingInlineStart: "small",
+					"& > ol:not([data-variant='letters']) > li": {
+						paddingInlineStart: "large",
+						"& > ol:not([data-variant='letters']) > li": { paddingInlineStart: "xxlarge" }
 					}
 				}
 			}
 		},
 		letters: {
-			counterReset: "level1",
-			"&[data-count='true']": { counterReset: "level1 var(--start, 0)" },
-			[LETTER_LIST]: {
-				marginInlineStart: "0",
-				paddingInlineStart: "0"
-			},
-			[LIST_ITEM]: {
-				counterIncrement: "level1",
-				_before: { content: "counter(level1, upper-alpha) '. '" },
-				[LETTER_LIST_ITEM]: {
-					_before: { content: "counter(level1, lower-alpha) '. '" },
-					[LETTER_LIST_ITEM]: { _before: { content: "counter(level1, lower-roman) '. '" } }
+			counterReset: "letters var(--start, 0)",
+			"& > li": {
+				counterIncrement: "letters",
+				_before: { content: `counter(letters, upper-alpha) ". "` },
+				"& > ol[data-variant='letters'] > li": {
+					_before: { content: `counter(letters, lower-alpha) ". "` },
+					"& > ol[data-variant='letters'] > li": { _before: { content: `counter(letters, lower-roman) ". "` } }
 				}
 			}
 		}
@@ -91,18 +55,27 @@ const orderedListRecipe = cva({
 });
 const StyledOrderedList = styled(ark.ol, {}, { baseComponent: true });
 const OrderedList = forwardRef(({ variant, css: cssProp, start, ...props }, ref) => {
-	const style = useMemo(() => ({ "--start": start ? start - 1 : void 0 }), [start]);
+	const counterId = useId();
+	const style = useMemo(() => ({
+		"--start": start ? start - 1 : 0,
+		"--counter-name": variant === "letters" ? counterId : void 0
+	}), [
+		counterId,
+		start,
+		variant
+	]);
 	return /* @__PURE__ */ jsx(StyledOrderedList, {
 		"data-embed-type": "ordered-list",
 		"data-variant": variant,
-		"data-count": start !== void 0,
+		start,
+		type: variant === "letters" ? "A" : void 0,
 		css: css.raw(orderedListRecipe.raw({ variant }), cssProp),
 		style,
 		ref,
 		...props
 	});
 });
-const UnOrderedList = styled("ul", { base: {
+const StyledUnOrderedList = styled("ul", { base: {
 	listStyle: "revert",
 	marginInlineStart: "medium",
 	paddingInlineStart: "small",
@@ -119,6 +92,14 @@ const UnOrderedList = styled("ul", { base: {
 		"& > li > ul": { listStyleType: "square" }
 	}
 } });
+const UnOrderedList = forwardRef((props, ref) => {
+	const counterId = useId();
+	return /* @__PURE__ */ jsx(StyledUnOrderedList, {
+		ref,
+		style: useMemo(() => ({ "--counter-name": counterId }), [counterId]),
+		...props
+	});
+});
 const DefinitionList = styled("dl", { base: {
 	"& dt": { fontWeight: "bold" },
 	"& dd": { marginInlineStart: "medium" }

package/es/ArticleLists.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ArticleLists.mjs","names":[],"sources":["../src/ArticleLists.tsx"],"sourcesContent":["/*\n Copyright (c) 2024-present, NDLA.\n \n This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n \n /\n\nimport { type CSSProperties, forwardRef, useMemo } from \"react\";\nimport { type HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { HTMLStyledProps, RecipeVariantProps, StyledProps } from \"@ndla/styled-system/types\";\n\nconst LIST_ITEM = \"& > li\";\nconst LETTER_LIST = \"& > ol[data-variant='letters']\";\nconst NUMBER_LIST = \"& > ol:not([data-variant='letters'])\";\nconst LETTER_LIST_ITEM = `${LETTER_LIST} > li`;\n\nconst orderedListRecipe = cva({\n base: {\n ~~marginInlineStart: \"small\",\n~~ paddingInlineStart: \"~~small~~\",\n ~~[LIST_ITEM]: {~~\~~n \~~"& > ul\": {\n ~~marginInlineStart~~: \"~~0 !important~~\",\n ~~},\n~~ _before: {\n position: \"absolute\",\n transform: \"translateX(calc(-100% + (token(spacing.small) * -1)))\",\n fontVariantNumeric: \"tabular-nums\",\n },\n },\n ~~\"& li\": {\n marginBlock: \"small\",\n },\n~~ },\n defaultVariants: {\n variant: \"numbers\",\n },\n variants: {\n variant: {\n numbers: {\n ~~[NUMBER_LIST]:~~ ~~{\n marginInlineStart:~~ ~~\"0\",\n paddingInlineStart:~~ ~~\"0\",\n },\n counterReset:~~ ~~\"level1\",\n \"&[data-count='true']\":~~ ~~{\n counterReset:~~ ~~\"level1~~ ~~var(--start,~~ ~~0)\",\n },\n [LIST_ITEM]:~~ ~~{\n counterIncrement:~~ ~~\"level1\",\n _before:~~ {\n ~~content:~~ ~~\"counter(level1~~, ~~decimal)~~ '. '~~\",\n },\n [NUMBER_LIST]:~~ ~~{\n counterReset:~~ \"~~level2~~\",\n ~~\"&[data-count='true']\":~~ {\n ~~counterReset:~~ ~~\"level2~~ ~~var~~(~~--start, 0~~)~~\",\n },\n [LIST_ITEM]:~~ ~~{\n marginInlineStart:~~ ~~\"small\",\~~n ~~counterIncrement:~~ ~~\"level2\",\n _before:~~ {\n ~~content:~~ ~~\"counter~~(~~level1, decimal~~) '.' ~~counter~~(~~level2~~, ~~decimal)~~ '. '\~~",\~~n ~~},\~~n ~~[NUMBER_LIST]: {\n~~ counterReset: \"~~level3~~\",\n \"&~~[data-count='true']~~\": {\n ~~counterReset~~: \"~~level3~~ var(--~~start~~, 0)\",\n ~~},\n [LIST_ITEM]~~: {\n ~~marginInlineStart~~: ~~\"calc~~(~~1.5ch~~ + ~~token(spacing.small))~~\"~~,\n counterIncrement:~~ \"~~level3~~\",\n ~~_before:~~ ~~{\n content:~~ ~~\"counter(level1,~~ ~~decimal)~~ ~~'.'~~ ~~counter(level2,~~ ~~decimal)~~ ~~'.'~~ ~~counter(level3~~, ~~decimal)~~ '. '\"~~,\n },\n~~ [~~NUMBER_LIST~~]: {\n ~~counterReset~~: \"~~level4~~\",\n \"&[data-~~count~~='~~true~~']\": {\n ~~counterReset~~: \"~~level4 var(--start, 0)~~\",\n ~~},\n [LIST_ITEM]: {~~\~~n marginInlineStart: \~~"~~calc(3ch~~ + ~~token~~(~~spacing.small~~))\"~~,\n counterIncrement~~: \~~"level4\",\~~n ~~_before~~: {\~~n content:\n \~~"~~counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '.' counter(level4, decimal) '. '~~\",\n ~~},\n },\n },\n },\n~~ },\n },\n },\n },\n },\n letters: {\n counterReset: \"~~level1\",\n \"&[data-count='true']\":~~ ~~{\n counterReset: \"level1~~ var(--start, 0)\",\n ~~},\n [LETTER_LIST]: {~~\~~n marginInlineStart: \~~"~~0\",\n paddingInlineStart:~~ \"~~0\",\n },\n [LIST_ITEM]~~: {\n counterIncrement: \"~~level1~~\",\n _before: {\n content: \"counter(~~level1~~, upper-alpha) '. '\",\n },\n [~~LETTER_LIST_ITEM~~]: {\n _before: {\n content: \"counter(~~level1~~, lower-alpha) '. '\",\n },\n [~~LETTER_LIST_ITEM~~]: {\n _before: {\n content: \"counter(~~level1~~, lower-roman) '. '\",\n },\n },\n },\n },\n },\n },\n },\n});\n\nexport type OrderedListVariantProps = NonNullable<RecipeVariantProps<typeof orderedListRecipe>>;\n\nexport interface OrderedListProps extends StyledProps, HTMLArkProps<\"ol\">, OrderedListVariantProps {}\n\nconst StyledOrderedList = styled(ark.ol, {}, { baseComponent: true });\n\nexport const OrderedList = forwardRef<HTMLOListElement, OrderedListProps>(\n ({ variant, css: cssProp, start, ...props }, ref) => {\n const style = useMemo(() => ({ \"--start\": start ? start - 1 : undefined }) as CSSProperties, [start]);\n return (\n <StyledOrderedList\n data-embed-type=\"ordered-list\"\n data-variant={variant}\n ~~data-count~~={start ~~!==~~ undefined}\n css={css.raw(orderedListRecipe.raw({ variant }), cssProp)}\n style={style}\n ref={ref}\n {...props}\n />\n );\n },\n);\n\nexport interface UnOrderedListProps extends StyledProps, HTMLArkProps<\"ul\"> {}\n\nexport const ~~UnOrderedList~~ = styled(\"ul\", {\n base: {\n listStyle: \"revert\",\n marginInlineStart: \"medium\",\n paddingInlineStart: \"small\",\n \"& ul\": {\n marginInlineStart: \"0\",\n },\n \"& li\": {\n marginBlock: \"small\",\n paddingInlineStart: \"small\",\n _marker: {\n color: \"icon.strong\",\n },\n\n \"& > ol\": {\n marginInlineStart: \"0 !important\",\n },\n },\n\n listStyleType: \"disc\",\n \"& > li > ul\": {\n listStyleType: \"circle\",\n \"& > li > ul\": {\n listStyleType: \"square\",\n },\n },\n },\n});\n\nexport const DefinitionList = styled(\"dl\", {\n base: {\n \"& dt\": {\n fontWeight: \"bold\",\n },\n \"& dd\": {\n marginInlineStart: \"medium\",\n },\n },\n});\n\nexport type DefinitionListProps = HTMLStyledProps<\"dl\">;\n"],"mappings":";;;;;;;;;;;;;;AAcA,MAAM,~~YAAY;AAClB,MAAM,cAAc;AACpB,MAAM,cAAc;AACpB,MAAM,mBAAmB,GAAG,YAAY;AAExC,MAAM,~~oBAAoB,IAAI;CAC5B,MAAM;EACJ,~~mBAAmB;EACnB,~~oBAAoB;~~GACnB~~,~~YAAY~~;~~GACX~~,~~UAAU,EACR,mBAAmB,gBACpB~~;~~GACD~~,SAAS;IACP,UAAU;IACV,WAAW;IACX,oBAAoB;IACrB;GACF;~~EACD,QAAQ,EACN,aAAa,SACd;~~EACF;CACD,iBAAiB,EACf,SAAS,WACV;CACD,UAAU,EACR,SAAS;EACP,SAAS;~~IACN~~,cAAc;~~IACb,mBAAmB;IACnB,oBAAoB;IACrB;GACD,cAAc;~~GACd,~~wBAAwB,EACtB,cAAc,0BACf~~;~~IACA~~,~~YAAY;IACX,~~kBAAkB;IAClB,SAAS,EACP,SAAS,~~iCACV~~;~~KACA~~,~~cAAc~~;~~KACb~~,~~cAAc~~;~~KACd~~,~~wBAAwB,EACtB,cAAc,0BACf~~;~~MACA~~,~~YAAY~~;~~MACX~~,~~mBAAmB;MACnB~~,~~kBAAkB;MAClB~~,~~SAAS~~,~~EACP,SAAS,8DACV~~;OACA,cAAc;OACb,cAAc;OACd,wBAAwB,EACtB,cAAc,0BACf;QACA,YAAY;QACX,mBAAmB;QACnB,kBAAkB;QAClB,SAAS,EACP,SAAS,2FACV;SACA,cAAc;SACb,cAAc;SACd,wBAAwB,EACtB,cAAc,0BACf;UACA,YAAY;UACX,mBAAmB;UACnB,kBAAkB;UAClB,SAAS,EACP,SACE,yHACH;UACF;SACF;QACF;OACF;MACF;KACF;IACF;GACF;EACD,SAAS;GACP,cAAc;GACd,~~wBAAwB,EACtB,cAAc,0BACf~~;~~IACA~~,~~cAAc;IACb,mBAAmB;IACnB,oBAAoB;IACrB;IACA,YAAY;IACX,~~kBAAkB;IAClB,SAAS,EACP,SAAS,~~qCACV~~;~~KACA~~,~~mBAAmB~~;~~KAClB~~,SAAS,EACP,SAAS,~~qCACV~~;~~MACA~~,~~mBAAmB~~,~~EAClB~~,SAAS,EACP,SAAS,~~qCACV~~,EACF;KACF;IACF;GACF;EACF,EACF;CACF,CAAC;AAMF,MAAM,oBAAoB,OAAO,IAAI,IAAI,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAErE,MAAa,cAAc,YACxB,EAAE,SAAS,KAAK,SAAS,OAAO,GAAG,SAAS,QAAQ;CACnD,MAAM,QAAQ,~~eAAe~~,~~EAAE,~~WAAW,QAAQ,QAAQ,IAAI,~~QAAW~~,~~GAAoB~~,~~CAAC~~,~~MAAM~~,~~CAAC~~;~~AACrG~~,QACE,oBAAC;EACC,mBAAgB;EAChB,gBAAc;~~EACd~~,~~cAAY~~,~~UAAU~~;~~EACtB~~,KAAK,IAAI,IAAI,kBAAkB,IAAI,EAAE,SAAS,CAAC,EAAE,QAAQ;EAClD;EACF;EACL,GAAI;GACJ;EAGP;AAID,MAAa,~~gBAAgB~~,OAAO,MAAM,~~EACxC~~,MAAM;CACJ,WAAW;CACX,mBAAmB;CACnB,oBAAoB;CACpB,QAAQ,EACN,mBAAmB,KACpB;CACD,QAAQ;EACN,aAAa;EACb,oBAAoB;EACpB,SAAS,EACP,OAAO,eACR;EAED,UAAU,EACR,mBAAmB,gBACpB;EACF;CAED,eAAe;CACf,eAAe;EACb,eAAe;EACf,eAAe,EACb,eAAe,UAChB;EACF;CACF,EACF,CAAC;AAEF,MAAa,iBAAiB,OAAO,MAAM,EACzC,MAAM;CACJ,QAAQ,EACN,YAAY,QACb;CACD,QAAQ,EACN,mBAAmB,UACpB;CACF,EACF,CAAC"}
1	+ {"version":3,"file":"ArticleLists.mjs","names":[],"sources":["../src/ArticleLists.tsx"],"sourcesContent":["/*\n Copyright (c) 2024-present, NDLA.\n \n This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n \n /\n\nimport { type CSSProperties, forwardRef, useId, useMemo } from \"react\";\nimport { type HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { HTMLStyledProps, RecipeVariantProps, StyledProps } from \"@ndla/styled-system/types\";\n\nconst orderedListRecipe = cva({\n base: {\n paddingInlineStart: \"large\",\n \"& > li\": {\n marginBlock: \"small\",\n _before: {\n position: \"absolute\",\n transform: \"translateX(calc(-100% - token(spacing.small)))\",\n fontVariantNumeric: \"tabular-nums\",\n },\n },\n },\n defaultVariants: {\n variant: \"numbers\",\n },\n variants: {\n variant: {\n numbers: {\n /** We utilize a CSS variable for the counter name to correctly reset counters when nested inside a letter list.\n * This way, the nested number list won't pick up on any other counters named \"numbers\" higher up in the DOM tree.\n * This fixes the following scenario\n * ol (numbers) -> 1.\n * ol(letters) -> A.\n * ol (numbers) -> 1. (Without the CSS variable, this would be 1.1)\n */\n counterReset: \"var(--counter-name, numbers) var(--start, 0)\",\n \"& > li\": {\n counterIncrement: \"var(--counter-name, numbers)\",\n _before: {\n content: `counters(var(--counter-name, numbers), \".\") \". \"`,\n },\n // If a nested OL is not a letters variant, it's a numbers variant. Keep increasing the margin to account for wider numbers.\n \"& > ol:not([data-variant='letters']) > li\": {\n paddingInlineStart: \"small\",\n \"& > ol:not([data-variant='letters']) > li\": {\n paddingInlineStart: \"large\",\n \"& > ol:not([data-variant='letters']) > li\": {\n paddingInlineStart: \"xxlarge\",\n },\n },\n },\n },\n },\n letters: {\n counterReset: \"letters var(--start, 0)\",\n \"& > li\": {\n counterIncrement: \"letters\",\n _before: {\n content: `counter(letters, upper-alpha) \". \"`,\n },\n \"& > ol[data-variant='letters'] > li\": {\n _before: {\n content: `counter(letters, lower-alpha) \". \"`,\n },\n \"& > ol[data-variant='letters'] > li\": {\n _before: {\n content: `counter(letters, lower-roman) \". \"`,\n },\n },\n },\n },\n },\n },\n },\n});\n\nexport type OrderedListVariantProps = NonNullable<RecipeVariantProps<typeof orderedListRecipe>>;\n\nexport interface OrderedListProps extends StyledProps, HTMLArkProps<\"ol\">, OrderedListVariantProps {}\n\nconst StyledOrderedList = styled(ark.ol, {}, { baseComponent: true });\n\nexport const OrderedList = forwardRef<HTMLOListElement, OrderedListProps>(\n ({ variant, css: cssProp, start, ...props }, ref) => {\n const counterId = useId();\n const style = useMemo(\n () =>\n ({\n \"--start\": start ? start - 1 : 0,\n \"--counter-name\": variant === \"letters\" ? counterId : undefined,\n }) as CSSProperties,\n [counterId, start, variant],\n );\n return (\n <StyledOrderedList\n data-embed-type=\"ordered-list\"\n data-variant={variant}\n start={start}\n type={variant === \"letters\" ? \"A\" : undefined}\n css={css.raw(orderedListRecipe.raw({ variant }), cssProp)}\n style={style}\n ref={ref}\n {...props}\n />\n );\n },\n);\n\nexport interface UnOrderedListProps extends StyledProps, HTMLArkProps<\"ul\"> {}\n\nexport const StyledUnOrderedList = styled(\"ul\", {\n base: {\n listStyle: \"revert\",\n marginInlineStart: \"medium\",\n paddingInlineStart: \"small\",\n \"& ul\": {\n marginInlineStart: \"0\",\n },\n \"& li\": {\n marginBlock: \"small\",\n paddingInlineStart: \"small\",\n _marker: {\n color: \"icon.strong\",\n },\n\n \"& > ol\": {\n marginInlineStart: \"0 !important\",\n },\n },\n\n listStyleType: \"disc\",\n \"& > li > ul\": {\n listStyleType: \"circle\",\n \"& > li > ul\": {\n listStyleType: \"square\",\n },\n },\n },\n});\n\nexport const UnOrderedList = forwardRef<HTMLUListElement, UnOrderedListProps>((props, ref) => {\n const counterId = useId();\n\n const style = useMemo(\n () =>\n ({\n \"--counter-name\": counterId,\n }) as CSSProperties,\n [counterId],\n );\n\n return <StyledUnOrderedList ref={ref} style={style} {...props} />;\n});\n\nexport const DefinitionList = styled(\"dl\", {\n base: {\n \"& dt\": {\n fontWeight: \"bold\",\n },\n \"& dd\": {\n marginInlineStart: \"medium\",\n },\n },\n});\n\nexport type DefinitionListProps = HTMLStyledProps<\"dl\">;\n"],"mappings":";;;;;;;;;;;;;;AAcA,MAAM,oBAAoB,IAAI;CAC5B,MAAM;EACJ,oBAAoB;EACpB,UAAU;GACR,aAAa;GACb,SAAS;IACP,UAAU;IACV,WAAW;IACX,oBAAoB;IACrB;GACF;EACF;CACD,iBAAiB,EACf,SAAS,WACV;CACD,UAAU,EACR,SAAS;EACP,SAAS;GAQP,cAAc;GACd,UAAU;IACR,kBAAkB;IAClB,SAAS,EACP,SAAS,oDACV;IAED,6CAA6C;KAC3C,oBAAoB;KACpB,6CAA6C;MAC3C,oBAAoB;MACpB,6CAA6C,EAC3C,oBAAoB,WACrB;MACF;KACF;IACF;GACF;EACD,SAAS;GACP,cAAc;GACd,UAAU;IACR,kBAAkB;IAClB,SAAS,EACP,SAAS,sCACV;IACD,uCAAuC;KACrC,SAAS,EACP,SAAS,sCACV;KACD,uCAAuC,EACrC,SAAS,EACP,SAAS,sCACV,EACF;KACF;IACF;GACF;EACF,EACF;CACF,CAAC;AAMF,MAAM,oBAAoB,OAAO,IAAI,IAAI,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAErE,MAAa,cAAc,YACxB,EAAE,SAAS,KAAK,SAAS,OAAO,GAAG,SAAS,QAAQ;CACnD,MAAM,YAAY,OAAO;CACzB,MAAM,QAAQ,eAET;EACC,WAAW,QAAQ,QAAQ,IAAI;EAC/B,kBAAkB,YAAY,YAAY,YAAY;EACvD,GACH;EAAC;EAAW;EAAO;EAAQ,CAC5B;AACD,QACE,oBAAC;EACC,mBAAgB;EAChB,gBAAc;EACP;EACP,MAAM,YAAY,YAAY,MAAM;EACpC,KAAK,IAAI,IAAI,kBAAkB,IAAI,EAAE,SAAS,CAAC,EAAE,QAAQ;EAClD;EACF;EACL,GAAI;GACJ;EAGP;AAID,MAAa,sBAAsB,OAAO,MAAM,EAC9C,MAAM;CACJ,WAAW;CACX,mBAAmB;CACnB,oBAAoB;CACpB,QAAQ,EACN,mBAAmB,KACpB;CACD,QAAQ;EACN,aAAa;EACb,oBAAoB;EACpB,SAAS,EACP,OAAO,eACR;EAED,UAAU,EACR,mBAAmB,gBACpB;EACF;CAED,eAAe;CACf,eAAe;EACb,eAAe;EACf,eAAe,EACb,eAAe,UAChB;EACF;CACF,EACF,CAAC;AAEF,MAAa,gBAAgB,YAAkD,OAAO,QAAQ;CAC5F,MAAM,YAAY,OAAO;AAUzB,QAAO,oBAAC;EAAyB;EAAK,OARxB,eAET,EACC,kBAAkB,WACnB,GACH,CAAC,UAAU,CACZ;EAEmD,GAAI;GAAS;EACjE;AAEF,MAAa,iBAAiB,OAAO,MAAM,EACzC,MAAM;CACJ,QAAQ,EACN,YAAY,QACb;CACD,QAAQ,EACN,mBAAmB,UACpB;CACF,EACF,CAAC"}

package/es/Image.mjs CHANGED Viewed

@@ -1,7 +1,7 @@
 import { ark } from "@ark-ui/react";
 import { styled } from "@ndla/styled-system/jsx";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import { forwardRef, useEffect, useState } from "react";
 //#region src/Image.tsx
 /**
@@ -113,6 +113,15 @@ const Img = forwardRef(({ fallbackWidth = FALLBACK_WIDTH, crop, focalPoint, imag
 	});
 });
 const Image = forwardRef(({ srcSet: srcSetProp, crop, focalPoint, src, contentType, imageLanguage, fallbackWidth = FALLBACK_WIDTH, sizes: sizesProp, alt, fallbackElement, variants, ...props }, ref) => {
+	const [hasError, setHasError] = useState(false);
+	useEffect(() => {
+		setHasError(false);
+	}, [
+		src,
+		srcSetProp,
+		sizesProp,
+		variants
+	]);
 	if (!src?.length && !variants?.length && fallbackElement) return /* @__PURE__ */ jsx(StyledFallbackElement, {
 		...props,
 		ref,
@@ -145,7 +154,16 @@ const Image = forwardRef(({ srcSet: srcSetProp, crop, focalPoint, src, contentTy
 			alt,
 			src: contentType === "image/gif" ? src : fallbackSrc,
 			...props,
-			ref
+			ref,
+			"data-error": hasError ? "" : void 0,
+			onError: (e) => {
+				setHasError(true);
+				props.onError?.(e);
+			},
+			onLoad: (e) => {
+				setHasError(false);
+				props.onLoad?.(e);
+			}
 		})
 	] });
 });

package/es/Image.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Image.mjs","names":[],"sources":["../src/Image.tsx"],"sourcesContent":["/*\n Copyright (c) 2024-present, NDLA.\n \n This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n \n /\n\nimport { type ComponentPropsWithRef, type ReactNode, forwardRef } from \"react\";\nimport { ark } from \"@ark-ui/react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps, StyledVariantProps } from \"@ndla/styled-system/types\";\nimport type { ImageVariantDTO, ImageVariantSize } from \"@ndla/types-backend/image-api\";\n\nexport interface ImageCrop {\n startX: number;\n startY: number;\n endX: number;\n endY: number;\n}\n\nexport interface ImageFocalPoint {\n x: number;\n y: number;\n}\n\ninterface SrcQueryStringOptions {\n width?: number;\n crop?: ImageCrop;\n focalPoint?: ImageFocalPoint;\n imageLanguage?: string;\n}\n\nexport const makeSrcQueryString = ({ width, crop, focalPoint, imageLanguage }: SrcQueryStringOptions) => {\n const params = [];\n if (width) {\n params.push(`width=${width}`);\n }\n if (crop) {\n params.push(`cropStartX=${crop.startX}&cropEndX=${crop.endX}&cropStartY=${crop.startY}&cropEndY=${crop.endY}`);\n }\n if (focalPoint) {\n params.push(`focalX=${focalPoint.x}&focalY=${focalPoint.y}`);\n }\n if (imageLanguage) {\n params.push(`language=${imageLanguage}`);\n }\n return params.join(\"&\");\n};\n\ninterface SrcSetOptions {\n crop?: ImageCrop;\n focalPoint?: ImageFocalPoint;\n imageLanguage?: string;\n src?: string;\n}\n\nexport const VAR_WIDTHS: Record<ImageVariantSize, number> = {\n icon: 240,\n xsmall: 480,\n small: 800,\n medium: 1080,\n large: 1440,\n xlarge: 1920,\n xxlarge: 2560,\n};\n\nconst IMAGE_WIDTHS = [2720, 2080, 1760, 1440, 1120, 1000, 960, 800, 640, 480, 320, 240, 180];\n\nexport const getVariantSrcSet = (variants: ImageVariantDTO[]) => {\n return variants\n .map((variant) => {\n return `${variant.variantUrl} ${VAR_WIDTHS[variant.size]}w`;\n })\n .join(\", \");\n};\n\nexport const getVariantSizes = (variants: ImageVariantDTO[]) => {\n return variants\n .map((variant, i) => {\n if (i === variants.length - 1) {\n return `${VAR_WIDTHS[variant.size]}px`;\n }\n return `(max-width: ${VAR_WIDTHS[variant.size]}px) ${VAR_WIDTHS[variant.size]}px`;\n })\n .join(\", \");\n};\n\nexport const getSrcSet = ({ src, crop, focalPoint, imageLanguage }: SrcSetOptions) => {\n if (!src) return undefined;\n return IMAGE_WIDTHS.map((width) => {\n const queryString = makeSrcQueryString({ width, crop, focalPoint, imageLanguage });\n const query = queryString.length ? `?${queryString}` : \"\";\n return `${src}${query} ${width}w`;\n }).join(\", \");\n};\n\nconst FALLBACK_WIDTH = 1024;\n\nconst FALLBACK_SIZES = \"(min-width: 1024px) 1024px, 100vw\";\n\nexport interface PictureProps extends StyledProps, ComponentPropsWithRef<\"picture\"> {\n src: string;\n sizes?: string;\n contentType?: string;\n srcSet?: string;\n crop?: ImageCrop;\n focalPoint?: ImageFocalPoint;\n imageLanguage?: string;\n}\n\nexport const Picture = forwardRef<HTMLPictureElement, PictureProps>(\n (\n {\n children,\n srcSet: srcSetProp,\n crop,\n focalPoint,\n src,\n imageLanguage,\n contentType,\n sizes = FALLBACK_SIZES,\n ...props\n },\n ref,\n ) => {\n const srcSet = srcSetProp ?? getSrcSet({ src, crop, focalPoint, imageLanguage });\n\n return (\n <styled.picture {...props} ref={ref}>\n {contentType !== \"image/gif\" && <source type={contentType} srcSet={srcSet} sizes={sizes} />}\n {children}\n </styled.picture>\n );\n },\n);\n\nconst StyledImage = styled(\"img\", {\n defaultVariants: { variant: \"regular\" },\n variants: {\n variant: {\n regular: {},\n rounded: {\n borderRadius: \"xsmall\",\n },\n },\n },\n});\n\nconst StyledFallbackElement = styled(\n ark.div,\n {\n base: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n },\n },\n { baseComponent: true },\n);\n\ntype ImageVariantProps = StyledVariantProps<typeof StyledImage>;\n\nexport interface ImgProps extends StyledProps, ComponentPropsWithRef<\"img\">, ImageVariantProps {\n alt: string;\n src: string;\n fallbackWidth?: number;\n contentType?: string;\n crop?: ImageCrop;\n imageLanguage?: string;\n focalPoint?: ImageFocalPoint;\n}\n\nexport const Img = forwardRef<HTMLImageElement, ImgProps>(\n ({ fallbackWidth = FALLBACK_WIDTH, crop, focalPoint, imageLanguage, contentType, src, alt, ...props }, ref) => {\n const queryString = makeSrcQueryString({ width: fallbackWidth, crop, focalPoint, imageLanguage });\n const srcWithParms = queryString ? `${src}?${queryString}` : src;\n return <StyledImage alt={alt} src={contentType === \"image/gif\" ? src : srcWithParms} {...props} ref={ref} />;\n },\n);\n\nexport interface ImageProps extends StyledProps, ComponentPropsWithRef<\"img\">, ImageVariantProps {\n alt: string;\n src?: string;\n sizes?: string;\n fallbackWidth?: number;\n contentType?: string;\n imageLanguage?: string;\n crop?: ImageCrop;\n fallbackElement?: ReactNode;\n focalPoint?: ImageFocalPoint;\n variants?: ImageVariantDTO[];\n}\n\nexport const Image = forwardRef<HTMLImageElement, ImageProps>(\n (\n {\n srcSet: srcSetProp,\n crop,\n focalPoint,\n src,\n contentType,\n imageLanguage,\n fallbackWidth = FALLBACK_WIDTH,\n sizes: sizesProp,\n alt,\n fallbackElement,\n variants,\n ...props\n },\n ref,\n ) => {\n if (!src?.length && !variants?.length && fallbackElement) {\n return (\n <StyledFallbackElement {...props} ref={ref}>\n {fallbackElement}\n </StyledFallbackElement>\n );\n }\n\n const queryString = makeSrcQueryString({ width: fallbackWidth, crop, focalPoint, imageLanguage });\n const fallbackSrc = src && queryString ? `${src}?${queryString}` : src;\n\n return (\n <picture>\n {!!variants?.length && !crop && !focalPoint && contentType !== \"image/gif\" && (\n <source\n type={\"image/webp\"}\n srcSet={getVariantSrcSet(variants)}\n sizes={sizesProp ?? getVariantSizes(variants)}\n />\n )}\n {contentType !== \"image/gif\" && (\n <source\n type={contentType}\n srcSet={getSrcSet({ src, crop, focalPoint, imageLanguage })}\n sizes={sizesProp ?? FALLBACK_SIZES}\n />\n )}\n <StyledImage alt={alt} src={contentType === \"image/gif\" ? src : fallbackSrc} {...props} ref={ref} />\n </picture>\n );\n },\n);\n"],"mappings":"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"}
1	+ {"version":3,"file":"Image.mjs","names":[],"sources":["../src/Image.tsx"],"sourcesContent":["/*\n Copyright (c) 2024-present, NDLA.\n \n This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n \n /\n\nimport { type ComponentPropsWithRef, type ReactNode, forwardRef, useEffect, useState } from \"react\";\nimport { ark } from \"@ark-ui/react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps, StyledVariantProps } from \"@ndla/styled-system/types\";\nimport type { ImageVariantDTO, ImageVariantSize } from \"@ndla/types-backend/image-api\";\n\nexport interface ImageCrop {\n startX: number;\n startY: number;\n endX: number;\n endY: number;\n}\n\nexport interface ImageFocalPoint {\n x: number;\n y: number;\n}\n\ninterface SrcQueryStringOptions {\n width?: number;\n crop?: ImageCrop;\n focalPoint?: ImageFocalPoint;\n imageLanguage?: string;\n}\n\nexport const makeSrcQueryString = ({ width, crop, focalPoint, imageLanguage }: SrcQueryStringOptions) => {\n const params = [];\n if (width) {\n params.push(`width=${width}`);\n }\n if (crop) {\n params.push(`cropStartX=${crop.startX}&cropEndX=${crop.endX}&cropStartY=${crop.startY}&cropEndY=${crop.endY}`);\n }\n if (focalPoint) {\n params.push(`focalX=${focalPoint.x}&focalY=${focalPoint.y}`);\n }\n if (imageLanguage) {\n params.push(`language=${imageLanguage}`);\n }\n return params.join(\"&\");\n};\n\ninterface SrcSetOptions {\n crop?: ImageCrop;\n focalPoint?: ImageFocalPoint;\n imageLanguage?: string;\n src?: string;\n}\n\nexport const VAR_WIDTHS: Record<ImageVariantSize, number> = {\n icon: 240,\n xsmall: 480,\n small: 800,\n medium: 1080,\n large: 1440,\n xlarge: 1920,\n xxlarge: 2560,\n};\n\nconst IMAGE_WIDTHS = [2720, 2080, 1760, 1440, 1120, 1000, 960, 800, 640, 480, 320, 240, 180];\n\nexport const getVariantSrcSet = (variants: ImageVariantDTO[]) => {\n return variants\n .map((variant) => {\n return `${variant.variantUrl} ${VAR_WIDTHS[variant.size]}w`;\n })\n .join(\", \");\n};\n\nexport const getVariantSizes = (variants: ImageVariantDTO[]) => {\n return variants\n .map((variant, i) => {\n if (i === variants.length - 1) {\n return `${VAR_WIDTHS[variant.size]}px`;\n }\n return `(max-width: ${VAR_WIDTHS[variant.size]}px) ${VAR_WIDTHS[variant.size]}px`;\n })\n .join(\", \");\n};\n\nexport const getSrcSet = ({ src, crop, focalPoint, imageLanguage }: SrcSetOptions) => {\n if (!src) return undefined;\n return IMAGE_WIDTHS.map((width) => {\n const queryString = makeSrcQueryString({ width, crop, focalPoint, imageLanguage });\n const query = queryString.length ? `?${queryString}` : \"\";\n return `${src}${query} ${width}w`;\n }).join(\", \");\n};\n\nconst FALLBACK_WIDTH = 1024;\n\nconst FALLBACK_SIZES = \"(min-width: 1024px) 1024px, 100vw\";\n\nexport interface PictureProps extends StyledProps, ComponentPropsWithRef<\"picture\"> {\n src: string;\n sizes?: string;\n contentType?: string;\n srcSet?: string;\n crop?: ImageCrop;\n focalPoint?: ImageFocalPoint;\n imageLanguage?: string;\n}\n\nexport const Picture = forwardRef<HTMLPictureElement, PictureProps>(\n (\n {\n children,\n srcSet: srcSetProp,\n crop,\n focalPoint,\n src,\n imageLanguage,\n contentType,\n sizes = FALLBACK_SIZES,\n ...props\n },\n ref,\n ) => {\n const srcSet = srcSetProp ?? getSrcSet({ src, crop, focalPoint, imageLanguage });\n\n return (\n <styled.picture {...props} ref={ref}>\n {contentType !== \"image/gif\" && <source type={contentType} srcSet={srcSet} sizes={sizes} />}\n {children}\n </styled.picture>\n );\n },\n);\n\nconst StyledImage = styled(\"img\", {\n defaultVariants: { variant: \"regular\" },\n variants: {\n variant: {\n regular: {},\n rounded: {\n borderRadius: \"xsmall\",\n },\n },\n },\n});\n\nconst StyledFallbackElement = styled(\n ark.div,\n {\n base: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n },\n },\n { baseComponent: true },\n);\n\ntype ImageVariantProps = StyledVariantProps<typeof StyledImage>;\n\nexport interface ImgProps extends StyledProps, ComponentPropsWithRef<\"img\">, ImageVariantProps {\n alt: string;\n src: string;\n fallbackWidth?: number;\n contentType?: string;\n crop?: ImageCrop;\n imageLanguage?: string;\n focalPoint?: ImageFocalPoint;\n}\n\nexport const Img = forwardRef<HTMLImageElement, ImgProps>(\n ({ fallbackWidth = FALLBACK_WIDTH, crop, focalPoint, imageLanguage, contentType, src, alt, ...props }, ref) => {\n const queryString = makeSrcQueryString({ width: fallbackWidth, crop, focalPoint, imageLanguage });\n const srcWithParms = queryString ? `${src}?${queryString}` : src;\n return <StyledImage alt={alt} src={contentType === \"image/gif\" ? src : srcWithParms} {...props} ref={ref} />;\n },\n);\n\nexport interface ImageProps extends StyledProps, ComponentPropsWithRef<\"img\">, ImageVariantProps {\n alt: string;\n src?: string;\n sizes?: string;\n fallbackWidth?: number;\n contentType?: string;\n imageLanguage?: string;\n crop?: ImageCrop;\n fallbackElement?: ReactNode;\n focalPoint?: ImageFocalPoint;\n variants?: ImageVariantDTO[];\n}\n\nexport const Image = forwardRef<HTMLImageElement, ImageProps>(\n (\n {\n srcSet: srcSetProp,\n crop,\n focalPoint,\n src,\n contentType,\n imageLanguage,\n fallbackWidth = FALLBACK_WIDTH,\n sizes: sizesProp,\n alt,\n fallbackElement,\n variants,\n ...props\n },\n ref,\n ) => {\n const [hasError, setHasError] = useState(false);\n\n useEffect(() => {\n setHasError(false);\n }, [src, srcSetProp, sizesProp, variants]);\n\n if (!src?.length && !variants?.length && fallbackElement) {\n return (\n <StyledFallbackElement {...props} ref={ref}>\n {fallbackElement}\n </StyledFallbackElement>\n );\n }\n\n const queryString = makeSrcQueryString({ width: fallbackWidth, crop, focalPoint, imageLanguage });\n const fallbackSrc = src && queryString ? `${src}?${queryString}` : src;\n\n return (\n <picture>\n {!!variants?.length && !crop && !focalPoint && contentType !== \"image/gif\" && (\n <source\n type={\"image/webp\"}\n srcSet={getVariantSrcSet(variants)}\n sizes={sizesProp ?? getVariantSizes(variants)}\n />\n )}\n {contentType !== \"image/gif\" && (\n <source\n type={contentType}\n srcSet={getSrcSet({ src, crop, focalPoint, imageLanguage })}\n sizes={sizesProp ?? FALLBACK_SIZES}\n />\n )}\n <StyledImage\n alt={alt}\n src={contentType === \"image/gif\" ? src : fallbackSrc}\n {...props}\n ref={ref}\n data-error={hasError ? \"\" : undefined}\n onError={(e) => {\n setHasError(true);\n props.onError?.(e);\n }}\n onLoad={(e) => {\n setHasError(false);\n props.onLoad?.(e);\n }}\n />\n </picture>\n );\n },\n);\n"],"mappings":";;;;;;;;;;;;;AAiCA,MAAa,sBAAsB,EAAE,OAAO,MAAM,YAAY,oBAA2C;CACvG,MAAM,SAAS,EAAE;AACjB,KAAI,MACF,QAAO,KAAK,SAAS,QAAQ;AAE/B,KAAI,KACF,QAAO,KAAK,cAAc,KAAK,OAAO,YAAY,KAAK,KAAK,cAAc,KAAK,OAAO,YAAY,KAAK,OAAO;AAEhH,KAAI,WACF,QAAO,KAAK,UAAU,WAAW,EAAE,UAAU,WAAW,IAAI;AAE9D,KAAI,cACF,QAAO,KAAK,YAAY,gBAAgB;AAE1C,QAAO,OAAO,KAAK,IAAI;;AAUzB,MAAa,aAA+C;CAC1D,MAAM;CACN,QAAQ;CACR,OAAO;CACP,QAAQ;CACR,OAAO;CACP,QAAQ;CACR,SAAS;CACV;AAED,MAAM,eAAe;CAAC;CAAM;CAAM;CAAM;CAAM;CAAM;CAAM;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAI;AAE5F,MAAa,oBAAoB,aAAgC;AAC/D,QAAO,SACJ,KAAK,YAAY;AAChB,SAAO,GAAG,QAAQ,WAAW,GAAG,WAAW,QAAQ,MAAM;GACzD,CACD,KAAK,KAAK;;AAGf,MAAa,mBAAmB,aAAgC;AAC9D,QAAO,SACJ,KAAK,SAAS,MAAM;AACnB,MAAI,MAAM,SAAS,SAAS,EAC1B,QAAO,GAAG,WAAW,QAAQ,MAAM;AAErC,SAAO,eAAe,WAAW,QAAQ,MAAM,MAAM,WAAW,QAAQ,MAAM;GAC9E,CACD,KAAK,KAAK;;AAGf,MAAa,aAAa,EAAE,KAAK,MAAM,YAAY,oBAAmC;AACpF,KAAI,CAAC,IAAK,QAAO;AACjB,QAAO,aAAa,KAAK,UAAU;EACjC,MAAM,cAAc,mBAAmB;GAAE;GAAO;GAAM;GAAY;GAAe,CAAC;AAElF,SAAO,GAAG,MADI,YAAY,SAAS,IAAI,gBAAgB,GACjC,GAAG,MAAM;GAC/B,CAAC,KAAK,KAAK;;AAGf,MAAM,iBAAiB;AAEvB,MAAM,iBAAiB;AAYvB,MAAa,UAAU,YAEnB,EACE,UACA,QAAQ,YACR,MACA,YACA,KACA,eACA,aACA,QAAQ,gBACR,GAAG,SAEL,QACG;CACH,MAAM,SAAS,cAAc,UAAU;EAAE;EAAK;EAAM;EAAY;EAAe,CAAC;AAEhF,QACE,qBAAC,OAAO;EAAQ,GAAI;EAAY;aAC7B,gBAAgB,eAAe,oBAAC;GAAO,MAAM;GAAqB;GAAe;IAAS,EAC1F;GACc;EAGtB;AAED,MAAM,cAAc,OAAO,OAAO;CAChC,iBAAiB,EAAE,SAAS,WAAW;CACvC,UAAU,EACR,SAAS;EACP,SAAS,EAAE;EACX,SAAS,EACP,cAAc,UACf;EACF,EACF;CACF,CAAC;AAEF,MAAM,wBAAwB,OAC5B,IAAI,KACJ,EACE,MAAM;CACJ,SAAS;CACT,YAAY;CACZ,gBAAgB;CACjB,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAcD,MAAa,MAAM,YAChB,EAAE,gBAAgB,gBAAgB,MAAM,YAAY,eAAe,aAAa,KAAK,KAAK,GAAG,SAAS,QAAQ;CAC7G,MAAM,cAAc,mBAAmB;EAAE,OAAO;EAAe;EAAM;EAAY;EAAe,CAAC;CACjG,MAAM,eAAe,cAAc,GAAG,IAAI,GAAG,gBAAgB;AAC7D,QAAO,oBAAC;EAAiB;EAAK,KAAK,gBAAgB,cAAc,MAAM;EAAc,GAAI;EAAY;GAAO;EAE/G;AAeD,MAAa,QAAQ,YAEjB,EACE,QAAQ,YACR,MACA,YACA,KACA,aACA,eACA,gBAAgB,gBAChB,OAAO,WACP,KACA,iBACA,UACA,GAAG,SAEL,QACG;CACH,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM;AAE/C,iBAAgB;AACd,cAAY,MAAM;IACjB;EAAC;EAAK;EAAY;EAAW;EAAS,CAAC;AAE1C,KAAI,CAAC,KAAK,UAAU,CAAC,UAAU,UAAU,gBACvC,QACE,oBAAC;EAAsB,GAAI;EAAY;YACpC;GACqB;CAI5B,MAAM,cAAc,mBAAmB;EAAE,OAAO;EAAe;EAAM;EAAY;EAAe,CAAC;CACjG,MAAM,cAAc,OAAO,cAAc,GAAG,IAAI,GAAG,gBAAgB;AAEnE,QACE,qBAAC;EACE,CAAC,CAAC,UAAU,UAAU,CAAC,QAAQ,CAAC,cAAc,gBAAgB,eAC7D,oBAAC;GACC,MAAM;GACN,QAAQ,iBAAiB,SAAS;GAClC,OAAO,aAAa,gBAAgB,SAAS;IAC7C;EAEH,gBAAgB,eACf,oBAAC;GACC,MAAM;GACN,QAAQ,UAAU;IAAE;IAAK;IAAM;IAAY;IAAe,CAAC;GAC3D,OAAO,aAAa;IACpB;EAEJ,oBAAC;GACM;GACL,KAAK,gBAAgB,cAAc,MAAM;GACzC,GAAI;GACC;GACL,cAAY,WAAW,KAAK;GAC5B,UAAU,MAAM;AACd,gBAAY,KAAK;AACjB,UAAM,UAAU,EAAE;;GAEpB,SAAS,MAAM;AACb,gBAAY,MAAM;AAClB,UAAM,SAAS,EAAE;;IAEnB;KACM;EAGf"}

package/lib/ArticleLists.d.ts CHANGED Viewed

@@ -10,81 +10,44 @@ import type { HTMLStyledProps, RecipeVariantProps, StyledProps } from "@ndla/sty
 declare const orderedListRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<{
     variant: {
         numbers: {
-            "& > ol:not([data-variant='letters'])": {
-                marginInlineStart: "0";
-                paddingInlineStart: "0";
-            };
-            counterReset: "level1";
-            "&[data-count='true']": {
-                counterReset: "level1 var(--start, 0)";
-            };
+            /** We utilize a CSS variable for the counter name to correctly reset counters when nested inside a letter list.
+             * This way, the nested number list won't pick up on any other counters named "numbers" higher up in the DOM tree.
+             * This fixes the following scenario
+             * ol (numbers) -> 1.
+             *  ol(letters) -> A.
+             *    ol (numbers) -> 1. (Without the CSS variable, this would be 1.1)
+             */
+            counterReset: "var(--counter-name, numbers) var(--start, 0)";
             "& > li": {
-                counterIncrement: "level1";
+                counterIncrement: "var(--counter-name, numbers)";
                 _before: {
-                    content: "counter(level1, decimal) '. '";
+                    content: "counters(var(--counter-name, numbers), \".\") \". \"";
                 };
-                "& > ol:not([data-variant='letters'])": {
-                    counterReset: "level2";
-                    "&[data-count='true']": {
-                        counterReset: "level2 var(--start, 0)";
-                    };
-                    "& > li": {
-                        marginInlineStart: "small";
-                        counterIncrement: "level2";
-                        _before: {
-                            content: "counter(level1, decimal) '.' counter(level2, decimal) '. '";
-                        };
-                        "& > ol:not([data-variant='letters'])": {
-                            counterReset: "level3";
-                            "&[data-count='true']": {
-                                counterReset: "level3 var(--start, 0)";
-                            };
-                            "& > li": {
-                                marginInlineStart: "calc(1.5ch + token(spacing.small))";
-                                counterIncrement: "level3";
-                                _before: {
-                                    content: "counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '. '";
-                                };
-                                "& > ol:not([data-variant='letters'])": {
-                                    counterReset: "level4";
-                                    "&[data-count='true']": {
-                                        counterReset: "level4 var(--start, 0)";
-                                    };
-                                    "& > li": {
-                                        marginInlineStart: "calc(3ch + token(spacing.small))";
-                                        counterIncrement: "level4";
-                                        _before: {
-                                            content: "counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '.' counter(level4,  decimal) '. '";
-                                        };
-                                    };
-                                };
-                            };
+                "& > ol:not([data-variant='letters']) > li": {
+                    paddingInlineStart: "small";
+                    "& > ol:not([data-variant='letters']) > li": {
+                        paddingInlineStart: "large";
+                        "& > ol:not([data-variant='letters']) > li": {
+                            paddingInlineStart: "xxlarge";
                         };
                     };
                 };
             };
         };
         letters: {
-            counterReset: "level1";
-            "&[data-count='true']": {
-                counterReset: "level1 var(--start, 0)";
-            };
-            "& > ol[data-variant='letters']": {
-                marginInlineStart: "0";
-                paddingInlineStart: "0";
-            };
+            counterReset: "letters var(--start, 0)";
             "& > li": {
-                counterIncrement: "level1";
+                counterIncrement: "letters";
                 _before: {
-                    content: "counter(level1, upper-alpha) '. '";
+                    content: "counter(letters, upper-alpha) \". \"";
                 };
                 "& > ol[data-variant='letters'] > li": {
                     _before: {
-                        content: "counter(level1, lower-alpha) '. '";
+                        content: "counter(letters, lower-alpha) \". \"";
                     };
                     "& > ol[data-variant='letters'] > li": {
                         _before: {
-                            content: "counter(level1, lower-roman) '. '";
+                            content: "counter(letters, lower-roman) \". \"";
                         };
                     };
                 };
@@ -98,7 +61,8 @@ export interface OrderedListProps extends StyledProps, HTMLArkProps<"ol">, Order
 export declare const OrderedList: import("react").ForwardRefExoticComponent<OrderedListProps & import("react").RefAttributes<HTMLOListElement>>;
 export interface UnOrderedListProps extends StyledProps, HTMLArkProps<"ul"> {
 }
-export declare const UnOrderedList: import("@ndla/styled-system/types").StyledComponent<"ul", {}>;
+export declare const StyledUnOrderedList: import("@ndla/styled-system/types").StyledComponent<"ul", {}>;
+export declare const UnOrderedList: import("react").ForwardRefExoticComponent<UnOrderedListProps & import("react").RefAttributes<HTMLUListElement>>;
 export declare const DefinitionList: import("@ndla/styled-system/types").StyledComponent<"dl", {}>;
 export type DefinitionListProps = HTMLStyledProps<"dl">;
 export {};

package/lib/ArticleLists.js CHANGED Viewed

@@ -12,78 +12,42 @@ let react = require("react");
 * LICENSE file in the root directory of this source tree.
 *
 */
-const LIST_ITEM = "& > li";
-const LETTER_LIST = "& > ol[data-variant='letters']";
-const NUMBER_LIST = "& > ol:not([data-variant='letters'])";
-const LETTER_LIST_ITEM = `${LETTER_LIST} > li`;
 const orderedListRecipe = (0, _ndla_styled_system_css.cva)({
 	base: {
-		marginInlineStart: "small",
-		paddingInlineStart: "small",
-		[LIST_ITEM]: {
-			"& > ul": { marginInlineStart: "0 !important" },
+		paddingInlineStart: "large",
+		"& > li": {
+			marginBlock: "small",
 			_before: {
 				position: "absolute",
-				transform: "translateX(calc(-100% + (token(spacing.small) * -1)))",
+				transform: "translateX(calc(-100% - token(spacing.small)))",
 				fontVariantNumeric: "tabular-nums"
 			}
-		},
-		"& li": { marginBlock: "small" }
+		}
 	},
 	defaultVariants: { variant: "numbers" },
 	variants: { variant: {
 		numbers: {
-			[NUMBER_LIST]: {
-				marginInlineStart: "0",
-				paddingInlineStart: "0"
-			},
-			counterReset: "level1",
-			"&[data-count='true']": { counterReset: "level1 var(--start, 0)" },
-			[LIST_ITEM]: {
-				counterIncrement: "level1",
-				_before: { content: "counter(level1, decimal) '. '" },
-				[NUMBER_LIST]: {
-					counterReset: "level2",
-					"&[data-count='true']": { counterReset: "level2 var(--start, 0)" },
-					[LIST_ITEM]: {
-						marginInlineStart: "small",
-						counterIncrement: "level2",
-						_before: { content: "counter(level1, decimal) '.' counter(level2, decimal) '. '" },
-						[NUMBER_LIST]: {
-							counterReset: "level3",
-							"&[data-count='true']": { counterReset: "level3 var(--start, 0)" },
-							[LIST_ITEM]: {
-								marginInlineStart: "calc(1.5ch + token(spacing.small))",
-								counterIncrement: "level3",
-								_before: { content: "counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '. '" },
-								[NUMBER_LIST]: {
-									counterReset: "level4",
-									"&[data-count='true']": { counterReset: "level4 var(--start, 0)" },
-									[LIST_ITEM]: {
-										marginInlineStart: "calc(3ch + token(spacing.small))",
-										counterIncrement: "level4",
-										_before: { content: "counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '.' counter(level4,  decimal) '. '" }
-									}
-								}
-							}
-						}
+			counterReset: "var(--counter-name, numbers) var(--start, 0)",
+			"& > li": {
+				counterIncrement: "var(--counter-name, numbers)",
+				_before: { content: `counters(var(--counter-name, numbers), ".") ". "` },
+				"& > ol:not([data-variant='letters']) > li": {
+					paddingInlineStart: "small",
+					"& > ol:not([data-variant='letters']) > li": {
+						paddingInlineStart: "large",
+						"& > ol:not([data-variant='letters']) > li": { paddingInlineStart: "xxlarge" }
 					}
 				}
 			}
 		},
 		letters: {
-			counterReset: "level1",
-			"&[data-count='true']": { counterReset: "level1 var(--start, 0)" },
-			[LETTER_LIST]: {
-				marginInlineStart: "0",
-				paddingInlineStart: "0"
-			},
-			[LIST_ITEM]: {
-				counterIncrement: "level1",
-				_before: { content: "counter(level1, upper-alpha) '. '" },
-				[LETTER_LIST_ITEM]: {
-					_before: { content: "counter(level1, lower-alpha) '. '" },
-					[LETTER_LIST_ITEM]: { _before: { content: "counter(level1, lower-roman) '. '" } }
+			counterReset: "letters var(--start, 0)",
+			"& > li": {
+				counterIncrement: "letters",
+				_before: { content: `counter(letters, upper-alpha) ". "` },
+				"& > ol[data-variant='letters'] > li": {
+					_before: { content: `counter(letters, lower-alpha) ". "` },
+					"& > ol[data-variant='letters'] > li": { _before: { content: `counter(letters, lower-roman) ". "` } }
 				}
 			}
 		}
@@ -91,18 +55,27 @@ const orderedListRecipe = (0, _ndla_styled_system_css.cva)({
 });
 const StyledOrderedList = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react.ark.ol, {}, { baseComponent: true });
 const OrderedList = (0, react.forwardRef)(({ variant, css: cssProp, start, ...props }, ref) => {
-	const style = (0, react.useMemo)(() => ({ "--start": start ? start - 1 : void 0 }), [start]);
+	const counterId = (0, react.useId)();
+	const style = (0, react.useMemo)(() => ({
+		"--start": start ? start - 1 : 0,
+		"--counter-name": variant === "letters" ? counterId : void 0
+	}), [
+		counterId,
+		start,
+		variant
+	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledOrderedList, {
 		"data-embed-type": "ordered-list",
 		"data-variant": variant,
-		"data-count": start !== void 0,
+		start,
+		type: variant === "letters" ? "A" : void 0,
 		css: _ndla_styled_system_css.css.raw(orderedListRecipe.raw({ variant }), cssProp),
 		style,
 		ref,
 		...props
 	});
 });
-const UnOrderedList = (0, _ndla_styled_system_jsx.styled)("ul", { base: {
+const StyledUnOrderedList = (0, _ndla_styled_system_jsx.styled)("ul", { base: {
 	listStyle: "revert",
 	marginInlineStart: "medium",
 	paddingInlineStart: "small",
@@ -119,6 +92,14 @@ const UnOrderedList = (0, _ndla_styled_system_jsx.styled)("ul", { base: {
 		"& > li > ul": { listStyleType: "square" }
 	}
 } });
+const UnOrderedList = (0, react.forwardRef)((props, ref) => {
+	const counterId = (0, react.useId)();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledUnOrderedList, {
+		ref,
+		style: (0, react.useMemo)(() => ({ "--counter-name": counterId }), [counterId]),
+		...props
+	});
+});
 const DefinitionList = (0, _ndla_styled_system_jsx.styled)("dl", { base: {
 	"& dt": { fontWeight: "bold" },
 	"& dd": { marginInlineStart: "medium" }

package/lib/ArticleLists.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ArticleLists.js","names":["ark","css"],"sources":["../src/ArticleLists.tsx"],"sourcesContent":["/*\n Copyright (c) 2024-present, NDLA.\n \n This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n \n /\n\nimport { type CSSProperties, forwardRef, useMemo } from \"react\";\nimport { type HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { HTMLStyledProps, RecipeVariantProps, StyledProps } from \"@ndla/styled-system/types\";\n\nconst LIST_ITEM = \"& > li\";\nconst LETTER_LIST = \"& > ol[data-variant='letters']\";\nconst NUMBER_LIST = \"& > ol:not([data-variant='letters'])\";\nconst LETTER_LIST_ITEM = `${LETTER_LIST} > li`;\n\nconst orderedListRecipe = cva({\n base: {\n ~~marginInlineStart: \"small\",\n~~ paddingInlineStart: \"~~small~~\",\n ~~[LIST_ITEM]: {~~\~~n \~~"& > ul\": {\n ~~marginInlineStart~~: \"~~0 !important~~\",\n ~~},\n~~ _before: {\n position: \"absolute\",\n transform: \"translateX(calc(-100% + (token(spacing.small) * -1)))\",\n fontVariantNumeric: \"tabular-nums\",\n },\n },\n ~~\"& li\": {\n marginBlock: \"small\",\n },\n~~ },\n defaultVariants: {\n variant: \"numbers\",\n },\n variants: {\n variant: {\n numbers: {\n ~~[NUMBER_LIST]:~~ ~~{\n marginInlineStart:~~ ~~\"0\",\n paddingInlineStart:~~ ~~\"0\",\n },\n counterReset:~~ ~~\"level1\",\n \"&[data-count='true']\":~~ ~~{\n counterReset:~~ ~~\"level1~~ ~~var(--start,~~ ~~0)\",\n },\n [LIST_ITEM]:~~ ~~{\n counterIncrement:~~ ~~\"level1\",\n _before:~~ {\n ~~content:~~ ~~\"counter(level1~~, ~~decimal)~~ '. '~~\",\n },\n [NUMBER_LIST]:~~ ~~{\n counterReset:~~ \"~~level2~~\",\n ~~\"&[data-count='true']\":~~ {\n ~~counterReset:~~ ~~\"level2~~ ~~var~~(~~--start, 0~~)~~\",\n },\n [LIST_ITEM]:~~ ~~{\n marginInlineStart:~~ ~~\"small\",\~~n ~~counterIncrement:~~ ~~\"level2\",\n _before:~~ {\n ~~content:~~ ~~\"counter~~(~~level1, decimal~~) '.' ~~counter~~(~~level2~~, ~~decimal)~~ '. '\~~",\~~n ~~},\~~n ~~[NUMBER_LIST]: {\n~~ counterReset: \"~~level3~~\",\n \"&~~[data-count='true']~~\": {\n ~~counterReset~~: \"~~level3~~ var(--~~start~~, 0)\",\n ~~},\n [LIST_ITEM]~~: {\n ~~marginInlineStart~~: ~~\"calc~~(~~1.5ch~~ + ~~token(spacing.small))~~\"~~,\n counterIncrement:~~ \"~~level3~~\",\n ~~_before:~~ ~~{\n content:~~ ~~\"counter(level1,~~ ~~decimal)~~ ~~'.'~~ ~~counter(level2,~~ ~~decimal)~~ ~~'.'~~ ~~counter(level3~~, ~~decimal)~~ '. '\"~~,\n },\n~~ [~~NUMBER_LIST~~]: {\n ~~counterReset~~: \"~~level4~~\",\n \"&[data-~~count~~='~~true~~']\": {\n ~~counterReset~~: \"~~level4 var(--start, 0)~~\",\n ~~},\n [LIST_ITEM]: {~~\~~n marginInlineStart: \~~"~~calc(3ch~~ + ~~token~~(~~spacing.small~~))\"~~,\n counterIncrement~~: \~~"level4\",\~~n ~~_before~~: {\~~n content:\n \~~"~~counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '.' counter(level4, decimal) '. '~~\",\n ~~},\n },\n },\n },\n~~ },\n },\n },\n },\n },\n letters: {\n counterReset: \"~~level1\",\n \"&[data-count='true']\":~~ ~~{\n counterReset: \"level1~~ var(--start, 0)\",\n ~~},\n [LETTER_LIST]: {~~\~~n marginInlineStart: \~~"~~0\",\n paddingInlineStart:~~ \"~~0\",\n },\n [LIST_ITEM]~~: {\n counterIncrement: \"~~level1~~\",\n _before: {\n content: \"counter(~~level1~~, upper-alpha) '. '\",\n },\n [~~LETTER_LIST_ITEM~~]: {\n _before: {\n content: \"counter(~~level1~~, lower-alpha) '. '\",\n },\n [~~LETTER_LIST_ITEM~~]: {\n _before: {\n content: \"counter(~~level1~~, lower-roman) '. '\",\n },\n },\n },\n },\n },\n },\n },\n});\n\nexport type OrderedListVariantProps = NonNullable<RecipeVariantProps<typeof orderedListRecipe>>;\n\nexport interface OrderedListProps extends StyledProps, HTMLArkProps<\"ol\">, OrderedListVariantProps {}\n\nconst StyledOrderedList = styled(ark.ol, {}, { baseComponent: true });\n\nexport const OrderedList = forwardRef<HTMLOListElement, OrderedListProps>(\n ({ variant, css: cssProp, start, ...props }, ref) => {\n const style = useMemo(() => ({ \"--start\": start ? start - 1 : undefined }) as CSSProperties, [start]);\n return (\n <StyledOrderedList\n data-embed-type=\"ordered-list\"\n data-variant={variant}\n ~~data-count~~={start ~~!==~~ undefined}\n css={css.raw(orderedListRecipe.raw({ variant }), cssProp)}\n style={style}\n ref={ref}\n {...props}\n />\n );\n },\n);\n\nexport interface UnOrderedListProps extends StyledProps, HTMLArkProps<\"ul\"> {}\n\nexport const ~~UnOrderedList~~ = styled(\"ul\", {\n base: {\n listStyle: \"revert\",\n marginInlineStart: \"medium\",\n paddingInlineStart: \"small\",\n \"& ul\": {\n marginInlineStart: \"0\",\n },\n \"& li\": {\n marginBlock: \"small\",\n paddingInlineStart: \"small\",\n _marker: {\n color: \"icon.strong\",\n },\n\n \"& > ol\": {\n marginInlineStart: \"0 !important\",\n },\n },\n\n listStyleType: \"disc\",\n \"& > li > ul\": {\n listStyleType: \"circle\",\n \"& > li > ul\": {\n listStyleType: \"square\",\n },\n },\n },\n});\n\nexport const DefinitionList = styled(\"dl\", {\n base: {\n \"& dt\": {\n fontWeight: \"bold\",\n },\n \"& dd\": {\n marginInlineStart: \"medium\",\n },\n },\n});\n\nexport type DefinitionListProps = HTMLStyledProps<\"dl\">;\n"],"mappings":";;;;;;;;;;;;;;AAcA,MAAM,~~YAAY;AAClB,MAAM,cAAc;AACpB,MAAM,cAAc;AACpB,MAAM,mBAAmB,GAAG,YAAY;AAExC,MAAM,~~qDAAwB;CAC5B,MAAM;EACJ,~~mBAAmB;EACnB,~~oBAAoB;~~GACnB~~,~~YAAY~~;~~GACX~~,~~UAAU,EACR,mBAAmB,gBACpB~~;~~GACD~~,SAAS;IACP,UAAU;IACV,WAAW;IACX,oBAAoB;IACrB;GACF;~~EACD,QAAQ,EACN,aAAa,SACd;~~EACF;CACD,iBAAiB,EACf,SAAS,WACV;CACD,UAAU,EACR,SAAS;EACP,SAAS;~~IACN~~,cAAc;~~IACb,mBAAmB;IACnB,oBAAoB;IACrB;GACD,cAAc;~~GACd,~~wBAAwB,EACtB,cAAc,0BACf~~;~~IACA~~,~~YAAY;IACX,~~kBAAkB;IAClB,SAAS,EACP,SAAS,~~iCACV~~;~~KACA~~,~~cAAc~~;~~KACb~~,~~cAAc~~;~~KACd~~,~~wBAAwB,EACtB,cAAc,0BACf~~;~~MACA~~,~~YAAY~~;~~MACX~~,~~mBAAmB;MACnB~~,~~kBAAkB;MAClB~~,~~SAAS~~,~~EACP,SAAS,8DACV~~;OACA,cAAc;OACb,cAAc;OACd,wBAAwB,EACtB,cAAc,0BACf;QACA,YAAY;QACX,mBAAmB;QACnB,kBAAkB;QAClB,SAAS,EACP,SAAS,2FACV;SACA,cAAc;SACb,cAAc;SACd,wBAAwB,EACtB,cAAc,0BACf;UACA,YAAY;UACX,mBAAmB;UACnB,kBAAkB;UAClB,SAAS,EACP,SACE,yHACH;UACF;SACF;QACF;OACF;MACF;KACF;IACF;GACF;EACD,SAAS;GACP,cAAc;GACd,~~wBAAwB,EACtB,cAAc,0BACf~~;~~IACA~~,~~cAAc;IACb,mBAAmB;IACnB,oBAAoB;IACrB;IACA,YAAY;IACX,~~kBAAkB;IAClB,SAAS,EACP,SAAS,~~qCACV~~;~~KACA~~,~~mBAAmB~~;~~KAClB~~,SAAS,EACP,SAAS,~~qCACV~~;~~MACA~~,~~mBAAmB~~,~~EAClB~~,SAAS,EACP,SAAS,~~qCACV~~,EACF;KACF;IACF;GACF;EACF,EACF;CACF,CAAC;AAMF,MAAM,wDAA2BA,kBAAI,IAAI,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAErE,MAAa,qCACV,EAAE,SAAS,KAAK,SAAS,OAAO,GAAG,SAAS,QAAQ;CACnD,MAAM,~~kCAAuB~~,~~EAAE~~,WAAW,QAAQ,QAAQ,IAAI,~~QAAW~~,~~GAAoB~~,~~CAAC~~,~~MAAM~~,~~CAAC~~;~~AACrG~~,QACE,2CAAC;EACC,mBAAgB;EAChB,gBAAc;~~EACd~~,~~cAAY~~,~~UAAU~~;~~EACtB~~,KAAKC,4BAAI,IAAI,kBAAkB,IAAI,EAAE,SAAS,CAAC,EAAE,QAAQ;EAClD;EACF;EACL,GAAI;GACJ;EAGP;AAID,MAAa,~~oDAAuB~~,MAAM,~~EACxC~~,MAAM;CACJ,WAAW;CACX,mBAAmB;CACnB,oBAAoB;CACpB,QAAQ,EACN,mBAAmB,KACpB;CACD,QAAQ;EACN,aAAa;EACb,oBAAoB;EACpB,SAAS,EACP,OAAO,eACR;EAED,UAAU,EACR,mBAAmB,gBACpB;EACF;CAED,eAAe;CACf,eAAe;EACb,eAAe;EACf,eAAe,EACb,eAAe,UAChB;EACF;CACF,EACF,CAAC;AAEF,MAAa,qDAAwB,MAAM,EACzC,MAAM;CACJ,QAAQ,EACN,YAAY,QACb;CACD,QAAQ,EACN,mBAAmB,UACpB;CACF,EACF,CAAC"}
1	+ {"version":3,"file":"ArticleLists.js","names":["ark","css"],"sources":["../src/ArticleLists.tsx"],"sourcesContent":["/*\n Copyright (c) 2024-present, NDLA.\n \n This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n \n /\n\nimport { type CSSProperties, forwardRef, useId, useMemo } from \"react\";\nimport { type HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { HTMLStyledProps, RecipeVariantProps, StyledProps } from \"@ndla/styled-system/types\";\n\nconst orderedListRecipe = cva({\n base: {\n paddingInlineStart: \"large\",\n \"& > li\": {\n marginBlock: \"small\",\n _before: {\n position: \"absolute\",\n transform: \"translateX(calc(-100% - token(spacing.small)))\",\n fontVariantNumeric: \"tabular-nums\",\n },\n },\n },\n defaultVariants: {\n variant: \"numbers\",\n },\n variants: {\n variant: {\n numbers: {\n /** We utilize a CSS variable for the counter name to correctly reset counters when nested inside a letter list.\n * This way, the nested number list won't pick up on any other counters named \"numbers\" higher up in the DOM tree.\n * This fixes the following scenario\n * ol (numbers) -> 1.\n * ol(letters) -> A.\n * ol (numbers) -> 1. (Without the CSS variable, this would be 1.1)\n */\n counterReset: \"var(--counter-name, numbers) var(--start, 0)\",\n \"& > li\": {\n counterIncrement: \"var(--counter-name, numbers)\",\n _before: {\n content: `counters(var(--counter-name, numbers), \".\") \". \"`,\n },\n // If a nested OL is not a letters variant, it's a numbers variant. Keep increasing the margin to account for wider numbers.\n \"& > ol:not([data-variant='letters']) > li\": {\n paddingInlineStart: \"small\",\n \"& > ol:not([data-variant='letters']) > li\": {\n paddingInlineStart: \"large\",\n \"& > ol:not([data-variant='letters']) > li\": {\n paddingInlineStart: \"xxlarge\",\n },\n },\n },\n },\n },\n letters: {\n counterReset: \"letters var(--start, 0)\",\n \"& > li\": {\n counterIncrement: \"letters\",\n _before: {\n content: `counter(letters, upper-alpha) \". \"`,\n },\n \"& > ol[data-variant='letters'] > li\": {\n _before: {\n content: `counter(letters, lower-alpha) \". \"`,\n },\n \"& > ol[data-variant='letters'] > li\": {\n _before: {\n content: `counter(letters, lower-roman) \". \"`,\n },\n },\n },\n },\n },\n },\n },\n});\n\nexport type OrderedListVariantProps = NonNullable<RecipeVariantProps<typeof orderedListRecipe>>;\n\nexport interface OrderedListProps extends StyledProps, HTMLArkProps<\"ol\">, OrderedListVariantProps {}\n\nconst StyledOrderedList = styled(ark.ol, {}, { baseComponent: true });\n\nexport const OrderedList = forwardRef<HTMLOListElement, OrderedListProps>(\n ({ variant, css: cssProp, start, ...props }, ref) => {\n const counterId = useId();\n const style = useMemo(\n () =>\n ({\n \"--start\": start ? start - 1 : 0,\n \"--counter-name\": variant === \"letters\" ? counterId : undefined,\n }) as CSSProperties,\n [counterId, start, variant],\n );\n return (\n <StyledOrderedList\n data-embed-type=\"ordered-list\"\n data-variant={variant}\n start={start}\n type={variant === \"letters\" ? \"A\" : undefined}\n css={css.raw(orderedListRecipe.raw({ variant }), cssProp)}\n style={style}\n ref={ref}\n {...props}\n />\n );\n },\n);\n\nexport interface UnOrderedListProps extends StyledProps, HTMLArkProps<\"ul\"> {}\n\nexport const StyledUnOrderedList = styled(\"ul\", {\n base: {\n listStyle: \"revert\",\n marginInlineStart: \"medium\",\n paddingInlineStart: \"small\",\n \"& ul\": {\n marginInlineStart: \"0\",\n },\n \"& li\": {\n marginBlock: \"small\",\n paddingInlineStart: \"small\",\n _marker: {\n color: \"icon.strong\",\n },\n\n \"& > ol\": {\n marginInlineStart: \"0 !important\",\n },\n },\n\n listStyleType: \"disc\",\n \"& > li > ul\": {\n listStyleType: \"circle\",\n \"& > li > ul\": {\n listStyleType: \"square\",\n },\n },\n },\n});\n\nexport const UnOrderedList = forwardRef<HTMLUListElement, UnOrderedListProps>((props, ref) => {\n const counterId = useId();\n\n const style = useMemo(\n () =>\n ({\n \"--counter-name\": counterId,\n }) as CSSProperties,\n [counterId],\n );\n\n return <StyledUnOrderedList ref={ref} style={style} {...props} />;\n});\n\nexport const DefinitionList = styled(\"dl\", {\n base: {\n \"& dt\": {\n fontWeight: \"bold\",\n },\n \"& dd\": {\n marginInlineStart: \"medium\",\n },\n },\n});\n\nexport type DefinitionListProps = HTMLStyledProps<\"dl\">;\n"],"mappings":";;;;;;;;;;;;;;AAcA,MAAM,qDAAwB;CAC5B,MAAM;EACJ,oBAAoB;EACpB,UAAU;GACR,aAAa;GACb,SAAS;IACP,UAAU;IACV,WAAW;IACX,oBAAoB;IACrB;GACF;EACF;CACD,iBAAiB,EACf,SAAS,WACV;CACD,UAAU,EACR,SAAS;EACP,SAAS;GAQP,cAAc;GACd,UAAU;IACR,kBAAkB;IAClB,SAAS,EACP,SAAS,oDACV;IAED,6CAA6C;KAC3C,oBAAoB;KACpB,6CAA6C;MAC3C,oBAAoB;MACpB,6CAA6C,EAC3C,oBAAoB,WACrB;MACF;KACF;IACF;GACF;EACD,SAAS;GACP,cAAc;GACd,UAAU;IACR,kBAAkB;IAClB,SAAS,EACP,SAAS,sCACV;IACD,uCAAuC;KACrC,SAAS,EACP,SAAS,sCACV;KACD,uCAAuC,EACrC,SAAS,EACP,SAAS,sCACV,EACF;KACF;IACF;GACF;EACF,EACF;CACF,CAAC;AAMF,MAAM,wDAA2BA,kBAAI,IAAI,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAErE,MAAa,qCACV,EAAE,SAAS,KAAK,SAAS,OAAO,GAAG,SAAS,QAAQ;CACnD,MAAM,8BAAmB;CACzB,MAAM,kCAED;EACC,WAAW,QAAQ,QAAQ,IAAI;EAC/B,kBAAkB,YAAY,YAAY,YAAY;EACvD,GACH;EAAC;EAAW;EAAO;EAAQ,CAC5B;AACD,QACE,2CAAC;EACC,mBAAgB;EAChB,gBAAc;EACP;EACP,MAAM,YAAY,YAAY,MAAM;EACpC,KAAKC,4BAAI,IAAI,kBAAkB,IAAI,EAAE,SAAS,CAAC,EAAE,QAAQ;EAClD;EACF;EACL,GAAI;GACJ;EAGP;AAID,MAAa,0DAA6B,MAAM,EAC9C,MAAM;CACJ,WAAW;CACX,mBAAmB;CACnB,oBAAoB;CACpB,QAAQ,EACN,mBAAmB,KACpB;CACD,QAAQ;EACN,aAAa;EACb,oBAAoB;EACpB,SAAS,EACP,OAAO,eACR;EAED,UAAU,EACR,mBAAmB,gBACpB;EACF;CAED,eAAe;CACf,eAAe;EACb,eAAe;EACf,eAAe,EACb,eAAe,UAChB;EACF;CACF,EACF,CAAC;AAEF,MAAa,uCAAkE,OAAO,QAAQ;CAC5F,MAAM,8BAAmB;AAUzB,QAAO,2CAAC;EAAyB;EAAK,iCANjC,EACC,kBAAkB,WACnB,GACH,CAAC,UAAU,CACZ;EAEmD,GAAI;GAAS;EACjE;AAEF,MAAa,qDAAwB,MAAM,EACzC,MAAM;CACJ,QAAQ,EACN,YAAY,QACb;CACD,QAAQ,EACN,mBAAmB,UACpB;CACF,EACF,CAAC"}

package/lib/Combobox.d.ts CHANGED Viewed

@@ -9,7 +9,7 @@ import { type RefAttributes } from "react";
 import { Combobox } from "@ark-ui/react";
 import type { RecipeVariantProps, StyledProps } from "@ndla/styled-system/types";
 import { type TextProps } from "./Text";
-declare const comboboxRecipe: import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"root" | "item" | "itemIndicator" | "content" | "input" | "label" | "list" | "control" | "trigger" | "positioner" | "clearTrigger" | "itemGroup" | "itemGroupLabel" | "itemText" | "empty", {
+declare const comboboxRecipe: import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"root" | "item" | "itemIndicator" | "content" | "input" | "label" | "list" | "control" | "itemGroup" | "trigger" | "positioner" | "clearTrigger" | "itemGroupLabel" | "itemText" | "empty", {
     context: {
         standalone: {
             content: {

package/lib/DatePicker.d.ts CHANGED Viewed

@@ -13,7 +13,7 @@ export interface DatePickerRootProps extends DatePicker.RootProps, StyledProps {
     translations: DatePicker.RootProps["translations"];
     locale: DatePicker.RootProps["locale"];
 }
-export declare const DatePickerRoot: import("@ndla/styled-system/jsx").StyleContextProvider<import("react").ForwardRefExoticComponent<DatePicker.RootProps & RefAttributes<HTMLDivElement>>, import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"root" | "content" | "table" | "input" | "label" | "view" | "control" | "trigger" | "positioner" | "clearTrigger" | "monthSelect" | "nextTrigger" | "presetTrigger" | "prevTrigger" | "rangeText" | "tableBody" | "tableCell" | "tableCellTrigger" | "tableHead" | "tableHeader" | "tableRow" | "viewControl" | "viewTrigger" | "yearSelect", import("@ndla/styled-system/types").SlotRecipeVariantRecord<"root" | "content" | "table" | "input" | "label" | "view" | "control" | "trigger" | "positioner" | "clearTrigger" | "monthSelect" | "nextTrigger" | "presetTrigger" | "prevTrigger" | "rangeText" | "tableBody" | "tableCell" | "tableCellTrigger" | "tableHead" | "tableHeader" | "tableRow" | "viewControl" | "viewTrigger" | "yearSelect">>>;
+export declare const DatePickerRoot: import("@ndla/styled-system/jsx").StyleContextProvider<import("react").ForwardRefExoticComponent<DatePicker.RootProps & RefAttributes<HTMLDivElement>>, import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"root" | "content" | "table" | "input" | "label" | "view" | "control" | "trigger" | "positioner" | "clearTrigger" | "nextTrigger" | "prevTrigger" | "monthSelect" | "presetTrigger" | "rangeText" | "tableBody" | "tableCell" | "tableCellTrigger" | "tableHead" | "tableHeader" | "tableRow" | "viewControl" | "viewTrigger" | "yearSelect", import("@ndla/styled-system/types").SlotRecipeVariantRecord<"root" | "content" | "table" | "input" | "label" | "view" | "control" | "trigger" | "positioner" | "clearTrigger" | "nextTrigger" | "prevTrigger" | "monthSelect" | "presetTrigger" | "rangeText" | "tableBody" | "tableCell" | "tableCellTrigger" | "tableHead" | "tableHeader" | "tableRow" | "viewControl" | "viewTrigger" | "yearSelect">>>;
 export declare const DatePickerClearTrigger: import("@ndla/styled-system/jsx").StyleContextConsumer<import("react").ForwardRefExoticComponent<DatePicker.ClearTriggerProps & RefAttributes<HTMLButtonElement>>>;
 interface DatePickerContentProps extends DatePicker.ContentProps, StyledProps {
 }

package/lib/FileUpload.d.ts CHANGED Viewed

@@ -10,13 +10,13 @@ import { FileUpload } from "@ark-ui/react";
 import { type RecipeVariantProps } from "@ndla/styled-system/css";
 import type { StyledProps } from "@ndla/styled-system/types";
 import { type TextProps } from "./Text";
-declare const fileUploadRecipe: import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"root" | "item" | "label" | "trigger" | "clearTrigger" | "itemGroup" | "dropzone" | "itemDeleteTrigger" | "itemName" | "itemPreview" | "itemPreviewImage" | "itemSizeText", import("@ndla/styled-system/types").SlotRecipeVariantRecord<"root" | "item" | "label" | "trigger" | "clearTrigger" | "itemGroup" | "dropzone" | "itemDeleteTrigger" | "itemName" | "itemPreview" | "itemPreviewImage" | "itemSizeText">>;
+declare const fileUploadRecipe: import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"root" | "item" | "label" | "itemGroup" | "trigger" | "clearTrigger" | "dropzone" | "itemDeleteTrigger" | "itemName" | "itemPreview" | "itemPreviewImage" | "itemSizeText", import("@ndla/styled-system/types").SlotRecipeVariantRecord<"root" | "item" | "label" | "itemGroup" | "trigger" | "clearTrigger" | "dropzone" | "itemDeleteTrigger" | "itemName" | "itemPreview" | "itemPreviewImage" | "itemSizeText">>;
 export type FileUploadVariantProps = NonNullable<RecipeVariantProps<typeof fileUploadRecipe>>;
 export interface FileUploadRootProps extends FileUpload.RootProps, FileUploadVariantProps {
 }
 export declare const FileUploadHiddenInput: import("react").ForwardRefExoticComponent<FileUpload.HiddenInputProps & RefAttributes<HTMLInputElement>>;
 export declare const FileUploadContext: (props: FileUpload.ContextProps) => import("react").ReactNode;
-export declare const FileUploadRoot: import("@ndla/styled-system/jsx").StyleContextProvider<import("react").ForwardRefExoticComponent<FileUpload.RootProps & RefAttributes<HTMLDivElement>>, import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"root" | "item" | "label" | "trigger" | "clearTrigger" | "itemGroup" | "dropzone" | "itemDeleteTrigger" | "itemName" | "itemPreview" | "itemPreviewImage" | "itemSizeText", import("@ndla/styled-system/types").SlotRecipeVariantRecord<"root" | "item" | "label" | "trigger" | "clearTrigger" | "itemGroup" | "dropzone" | "itemDeleteTrigger" | "itemName" | "itemPreview" | "itemPreviewImage" | "itemSizeText">>>;
+export declare const FileUploadRoot: import("@ndla/styled-system/jsx").StyleContextProvider<import("react").ForwardRefExoticComponent<FileUpload.RootProps & RefAttributes<HTMLDivElement>>, import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"root" | "item" | "label" | "itemGroup" | "trigger" | "clearTrigger" | "dropzone" | "itemDeleteTrigger" | "itemName" | "itemPreview" | "itemPreviewImage" | "itemSizeText", import("@ndla/styled-system/types").SlotRecipeVariantRecord<"root" | "item" | "label" | "itemGroup" | "trigger" | "clearTrigger" | "dropzone" | "itemDeleteTrigger" | "itemName" | "itemPreview" | "itemPreviewImage" | "itemSizeText">>>;
 export declare const FileUploadDropzone: import("@ndla/styled-system/jsx").StyleContextConsumer<import("react").ForwardRefExoticComponent<FileUpload.DropzoneProps & RefAttributes<HTMLDivElement>>>;
 export declare const FileUploadTrigger: import("@ndla/styled-system/jsx").StyleContextConsumer<import("react").ForwardRefExoticComponent<FileUpload.TriggerProps & RefAttributes<HTMLButtonElement>>>;
 export declare const FileUploadItemGroup: import("@ndla/styled-system/jsx").StyleContextConsumer<import("react").ForwardRefExoticComponent<FileUpload.ItemGroupProps & RefAttributes<HTMLUListElement>>>;

package/lib/Image.js CHANGED Viewed

@@ -113,6 +113,15 @@ const Img = (0, react.forwardRef)(({ fallbackWidth = FALLBACK_WIDTH, crop, focal
 	});
 });
 const Image = (0, react.forwardRef)(({ srcSet: srcSetProp, crop, focalPoint, src, contentType, imageLanguage, fallbackWidth = FALLBACK_WIDTH, sizes: sizesProp, alt, fallbackElement, variants, ...props }, ref) => {
+	const [hasError, setHasError] = (0, react.useState)(false);
+	(0, react.useEffect)(() => {
+		setHasError(false);
+	}, [
+		src,
+		srcSetProp,
+		sizesProp,
+		variants
+	]);
 	if (!src?.length && !variants?.length && fallbackElement) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledFallbackElement, {
 		...props,
 		ref,
@@ -145,7 +154,16 @@ const Image = (0, react.forwardRef)(({ srcSet: srcSetProp, crop, focalPoint, src
 			alt,
 			src: contentType === "image/gif" ? src : fallbackSrc,
 			...props,
-			ref
+			ref,
+			"data-error": hasError ? "" : void 0,
+			onError: (e) => {
+				setHasError(true);
+				props.onError?.(e);
+			},
+			onLoad: (e) => {
+				setHasError(false);
+				props.onLoad?.(e);
+			}
 		})
 	] });
 });

package/lib/Image.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Image.js","names":["styled","ark"],"sources":["../src/Image.tsx"],"sourcesContent":["/*\n Copyright (c) 2024-present, NDLA.\n \n This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n \n /\n\nimport { type ComponentPropsWithRef, type ReactNode, forwardRef } from \"react\";\nimport { ark } from \"@ark-ui/react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps, StyledVariantProps } from \"@ndla/styled-system/types\";\nimport type { ImageVariantDTO, ImageVariantSize } from \"@ndla/types-backend/image-api\";\n\nexport interface ImageCrop {\n startX: number;\n startY: number;\n endX: number;\n endY: number;\n}\n\nexport interface ImageFocalPoint {\n x: number;\n y: number;\n}\n\ninterface SrcQueryStringOptions {\n width?: number;\n crop?: ImageCrop;\n focalPoint?: ImageFocalPoint;\n imageLanguage?: string;\n}\n\nexport const makeSrcQueryString = ({ width, crop, focalPoint, imageLanguage }: SrcQueryStringOptions) => {\n const params = [];\n if (width) {\n params.push(`width=${width}`);\n }\n if (crop) {\n params.push(`cropStartX=${crop.startX}&cropEndX=${crop.endX}&cropStartY=${crop.startY}&cropEndY=${crop.endY}`);\n }\n if (focalPoint) {\n params.push(`focalX=${focalPoint.x}&focalY=${focalPoint.y}`);\n }\n if (imageLanguage) {\n params.push(`language=${imageLanguage}`);\n }\n return params.join(\"&\");\n};\n\ninterface SrcSetOptions {\n crop?: ImageCrop;\n focalPoint?: ImageFocalPoint;\n imageLanguage?: string;\n src?: string;\n}\n\nexport const VAR_WIDTHS: Record<ImageVariantSize, number> = {\n icon: 240,\n xsmall: 480,\n small: 800,\n medium: 1080,\n large: 1440,\n xlarge: 1920,\n xxlarge: 2560,\n};\n\nconst IMAGE_WIDTHS = [2720, 2080, 1760, 1440, 1120, 1000, 960, 800, 640, 480, 320, 240, 180];\n\nexport const getVariantSrcSet = (variants: ImageVariantDTO[]) => {\n return variants\n .map((variant) => {\n return `${variant.variantUrl} ${VAR_WIDTHS[variant.size]}w`;\n })\n .join(\", \");\n};\n\nexport const getVariantSizes = (variants: ImageVariantDTO[]) => {\n return variants\n .map((variant, i) => {\n if (i === variants.length - 1) {\n return `${VAR_WIDTHS[variant.size]}px`;\n }\n return `(max-width: ${VAR_WIDTHS[variant.size]}px) ${VAR_WIDTHS[variant.size]}px`;\n })\n .join(\", \");\n};\n\nexport const getSrcSet = ({ src, crop, focalPoint, imageLanguage }: SrcSetOptions) => {\n if (!src) return undefined;\n return IMAGE_WIDTHS.map((width) => {\n const queryString = makeSrcQueryString({ width, crop, focalPoint, imageLanguage });\n const query = queryString.length ? `?${queryString}` : \"\";\n return `${src}${query} ${width}w`;\n }).join(\", \");\n};\n\nconst FALLBACK_WIDTH = 1024;\n\nconst FALLBACK_SIZES = \"(min-width: 1024px) 1024px, 100vw\";\n\nexport interface PictureProps extends StyledProps, ComponentPropsWithRef<\"picture\"> {\n src: string;\n sizes?: string;\n contentType?: string;\n srcSet?: string;\n crop?: ImageCrop;\n focalPoint?: ImageFocalPoint;\n imageLanguage?: string;\n}\n\nexport const Picture = forwardRef<HTMLPictureElement, PictureProps>(\n (\n {\n children,\n srcSet: srcSetProp,\n crop,\n focalPoint,\n src,\n imageLanguage,\n contentType,\n sizes = FALLBACK_SIZES,\n ...props\n },\n ref,\n ) => {\n const srcSet = srcSetProp ?? getSrcSet({ src, crop, focalPoint, imageLanguage });\n\n return (\n <styled.picture {...props} ref={ref}>\n {contentType !== \"image/gif\" && <source type={contentType} srcSet={srcSet} sizes={sizes} />}\n {children}\n </styled.picture>\n );\n },\n);\n\nconst StyledImage = styled(\"img\", {\n defaultVariants: { variant: \"regular\" },\n variants: {\n variant: {\n regular: {},\n rounded: {\n borderRadius: \"xsmall\",\n },\n },\n },\n});\n\nconst StyledFallbackElement = styled(\n ark.div,\n {\n base: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n },\n },\n { baseComponent: true },\n);\n\ntype ImageVariantProps = StyledVariantProps<typeof StyledImage>;\n\nexport interface ImgProps extends StyledProps, ComponentPropsWithRef<\"img\">, ImageVariantProps {\n alt: string;\n src: string;\n fallbackWidth?: number;\n contentType?: string;\n crop?: ImageCrop;\n imageLanguage?: string;\n focalPoint?: ImageFocalPoint;\n}\n\nexport const Img = forwardRef<HTMLImageElement, ImgProps>(\n ({ fallbackWidth = FALLBACK_WIDTH, crop, focalPoint, imageLanguage, contentType, src, alt, ...props }, ref) => {\n const queryString = makeSrcQueryString({ width: fallbackWidth, crop, focalPoint, imageLanguage });\n const srcWithParms = queryString ? `${src}?${queryString}` : src;\n return <StyledImage alt={alt} src={contentType === \"image/gif\" ? src : srcWithParms} {...props} ref={ref} />;\n },\n);\n\nexport interface ImageProps extends StyledProps, ComponentPropsWithRef<\"img\">, ImageVariantProps {\n alt: string;\n src?: string;\n sizes?: string;\n fallbackWidth?: number;\n contentType?: string;\n imageLanguage?: string;\n crop?: ImageCrop;\n fallbackElement?: ReactNode;\n focalPoint?: ImageFocalPoint;\n variants?: ImageVariantDTO[];\n}\n\nexport const Image = forwardRef<HTMLImageElement, ImageProps>(\n (\n {\n srcSet: srcSetProp,\n crop,\n focalPoint,\n src,\n contentType,\n imageLanguage,\n fallbackWidth = FALLBACK_WIDTH,\n sizes: sizesProp,\n alt,\n fallbackElement,\n variants,\n ...props\n },\n ref,\n ) => {\n if (!src?.length && !variants?.length && fallbackElement) {\n return (\n <StyledFallbackElement {...props} ref={ref}>\n {fallbackElement}\n </StyledFallbackElement>\n );\n }\n\n const queryString = makeSrcQueryString({ width: fallbackWidth, crop, focalPoint, imageLanguage });\n const fallbackSrc = src && queryString ? `${src}?${queryString}` : src;\n\n return (\n <picture>\n {!!variants?.length && !crop && !focalPoint && contentType !== \"image/gif\" && (\n <source\n type={\"image/webp\"}\n srcSet={getVariantSrcSet(variants)}\n sizes={sizesProp ?? getVariantSizes(variants)}\n />\n )}\n {contentType !== \"image/gif\" && (\n <source\n type={contentType}\n srcSet={getSrcSet({ src, crop, focalPoint, imageLanguage })}\n sizes={sizesProp ?? FALLBACK_SIZES}\n />\n )}\n <StyledImage alt={alt} src={contentType === \"image/gif\" ? src : fallbackSrc} {...props} ref={ref} />\n </picture>\n );\n },\n);\n"],"mappings":"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"}
1	+ {"version":3,"file":"Image.js","names":["styled","ark"],"sources":["../src/Image.tsx"],"sourcesContent":["/*\n Copyright (c) 2024-present, NDLA.\n \n This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n \n /\n\nimport { type ComponentPropsWithRef, type ReactNode, forwardRef, useEffect, useState } from \"react\";\nimport { ark } from \"@ark-ui/react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps, StyledVariantProps } from \"@ndla/styled-system/types\";\nimport type { ImageVariantDTO, ImageVariantSize } from \"@ndla/types-backend/image-api\";\n\nexport interface ImageCrop {\n startX: number;\n startY: number;\n endX: number;\n endY: number;\n}\n\nexport interface ImageFocalPoint {\n x: number;\n y: number;\n}\n\ninterface SrcQueryStringOptions {\n width?: number;\n crop?: ImageCrop;\n focalPoint?: ImageFocalPoint;\n imageLanguage?: string;\n}\n\nexport const makeSrcQueryString = ({ width, crop, focalPoint, imageLanguage }: SrcQueryStringOptions) => {\n const params = [];\n if (width) {\n params.push(`width=${width}`);\n }\n if (crop) {\n params.push(`cropStartX=${crop.startX}&cropEndX=${crop.endX}&cropStartY=${crop.startY}&cropEndY=${crop.endY}`);\n }\n if (focalPoint) {\n params.push(`focalX=${focalPoint.x}&focalY=${focalPoint.y}`);\n }\n if (imageLanguage) {\n params.push(`language=${imageLanguage}`);\n }\n return params.join(\"&\");\n};\n\ninterface SrcSetOptions {\n crop?: ImageCrop;\n focalPoint?: ImageFocalPoint;\n imageLanguage?: string;\n src?: string;\n}\n\nexport const VAR_WIDTHS: Record<ImageVariantSize, number> = {\n icon: 240,\n xsmall: 480,\n small: 800,\n medium: 1080,\n large: 1440,\n xlarge: 1920,\n xxlarge: 2560,\n};\n\nconst IMAGE_WIDTHS = [2720, 2080, 1760, 1440, 1120, 1000, 960, 800, 640, 480, 320, 240, 180];\n\nexport const getVariantSrcSet = (variants: ImageVariantDTO[]) => {\n return variants\n .map((variant) => {\n return `${variant.variantUrl} ${VAR_WIDTHS[variant.size]}w`;\n })\n .join(\", \");\n};\n\nexport const getVariantSizes = (variants: ImageVariantDTO[]) => {\n return variants\n .map((variant, i) => {\n if (i === variants.length - 1) {\n return `${VAR_WIDTHS[variant.size]}px`;\n }\n return `(max-width: ${VAR_WIDTHS[variant.size]}px) ${VAR_WIDTHS[variant.size]}px`;\n })\n .join(\", \");\n};\n\nexport const getSrcSet = ({ src, crop, focalPoint, imageLanguage }: SrcSetOptions) => {\n if (!src) return undefined;\n return IMAGE_WIDTHS.map((width) => {\n const queryString = makeSrcQueryString({ width, crop, focalPoint, imageLanguage });\n const query = queryString.length ? `?${queryString}` : \"\";\n return `${src}${query} ${width}w`;\n }).join(\", \");\n};\n\nconst FALLBACK_WIDTH = 1024;\n\nconst FALLBACK_SIZES = \"(min-width: 1024px) 1024px, 100vw\";\n\nexport interface PictureProps extends StyledProps, ComponentPropsWithRef<\"picture\"> {\n src: string;\n sizes?: string;\n contentType?: string;\n srcSet?: string;\n crop?: ImageCrop;\n focalPoint?: ImageFocalPoint;\n imageLanguage?: string;\n}\n\nexport const Picture = forwardRef<HTMLPictureElement, PictureProps>(\n (\n {\n children,\n srcSet: srcSetProp,\n crop,\n focalPoint,\n src,\n imageLanguage,\n contentType,\n sizes = FALLBACK_SIZES,\n ...props\n },\n ref,\n ) => {\n const srcSet = srcSetProp ?? getSrcSet({ src, crop, focalPoint, imageLanguage });\n\n return (\n <styled.picture {...props} ref={ref}>\n {contentType !== \"image/gif\" && <source type={contentType} srcSet={srcSet} sizes={sizes} />}\n {children}\n </styled.picture>\n );\n },\n);\n\nconst StyledImage = styled(\"img\", {\n defaultVariants: { variant: \"regular\" },\n variants: {\n variant: {\n regular: {},\n rounded: {\n borderRadius: \"xsmall\",\n },\n },\n },\n});\n\nconst StyledFallbackElement = styled(\n ark.div,\n {\n base: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n },\n },\n { baseComponent: true },\n);\n\ntype ImageVariantProps = StyledVariantProps<typeof StyledImage>;\n\nexport interface ImgProps extends StyledProps, ComponentPropsWithRef<\"img\">, ImageVariantProps {\n alt: string;\n src: string;\n fallbackWidth?: number;\n contentType?: string;\n crop?: ImageCrop;\n imageLanguage?: string;\n focalPoint?: ImageFocalPoint;\n}\n\nexport const Img = forwardRef<HTMLImageElement, ImgProps>(\n ({ fallbackWidth = FALLBACK_WIDTH, crop, focalPoint, imageLanguage, contentType, src, alt, ...props }, ref) => {\n const queryString = makeSrcQueryString({ width: fallbackWidth, crop, focalPoint, imageLanguage });\n const srcWithParms = queryString ? `${src}?${queryString}` : src;\n return <StyledImage alt={alt} src={contentType === \"image/gif\" ? src : srcWithParms} {...props} ref={ref} />;\n },\n);\n\nexport interface ImageProps extends StyledProps, ComponentPropsWithRef<\"img\">, ImageVariantProps {\n alt: string;\n src?: string;\n sizes?: string;\n fallbackWidth?: number;\n contentType?: string;\n imageLanguage?: string;\n crop?: ImageCrop;\n fallbackElement?: ReactNode;\n focalPoint?: ImageFocalPoint;\n variants?: ImageVariantDTO[];\n}\n\nexport const Image = forwardRef<HTMLImageElement, ImageProps>(\n (\n {\n srcSet: srcSetProp,\n crop,\n focalPoint,\n src,\n contentType,\n imageLanguage,\n fallbackWidth = FALLBACK_WIDTH,\n sizes: sizesProp,\n alt,\n fallbackElement,\n variants,\n ...props\n },\n ref,\n ) => {\n const [hasError, setHasError] = useState(false);\n\n useEffect(() => {\n setHasError(false);\n }, [src, srcSetProp, sizesProp, variants]);\n\n if (!src?.length && !variants?.length && fallbackElement) {\n return (\n <StyledFallbackElement {...props} ref={ref}>\n {fallbackElement}\n </StyledFallbackElement>\n );\n }\n\n const queryString = makeSrcQueryString({ width: fallbackWidth, crop, focalPoint, imageLanguage });\n const fallbackSrc = src && queryString ? `${src}?${queryString}` : src;\n\n return (\n <picture>\n {!!variants?.length && !crop && !focalPoint && contentType !== \"image/gif\" && (\n <source\n type={\"image/webp\"}\n srcSet={getVariantSrcSet(variants)}\n sizes={sizesProp ?? getVariantSizes(variants)}\n />\n )}\n {contentType !== \"image/gif\" && (\n <source\n type={contentType}\n srcSet={getSrcSet({ src, crop, focalPoint, imageLanguage })}\n sizes={sizesProp ?? FALLBACK_SIZES}\n />\n )}\n <StyledImage\n alt={alt}\n src={contentType === \"image/gif\" ? src : fallbackSrc}\n {...props}\n ref={ref}\n data-error={hasError ? \"\" : undefined}\n onError={(e) => {\n setHasError(true);\n props.onError?.(e);\n }}\n onLoad={(e) => {\n setHasError(false);\n props.onLoad?.(e);\n }}\n />\n </picture>\n );\n },\n);\n"],"mappings":";;;;;;;;;;;;;AAiCA,MAAa,sBAAsB,EAAE,OAAO,MAAM,YAAY,oBAA2C;CACvG,MAAM,SAAS,EAAE;AACjB,KAAI,MACF,QAAO,KAAK,SAAS,QAAQ;AAE/B,KAAI,KACF,QAAO,KAAK,cAAc,KAAK,OAAO,YAAY,KAAK,KAAK,cAAc,KAAK,OAAO,YAAY,KAAK,OAAO;AAEhH,KAAI,WACF,QAAO,KAAK,UAAU,WAAW,EAAE,UAAU,WAAW,IAAI;AAE9D,KAAI,cACF,QAAO,KAAK,YAAY,gBAAgB;AAE1C,QAAO,OAAO,KAAK,IAAI;;AAUzB,MAAa,aAA+C;CAC1D,MAAM;CACN,QAAQ;CACR,OAAO;CACP,QAAQ;CACR,OAAO;CACP,QAAQ;CACR,SAAS;CACV;AAED,MAAM,eAAe;CAAC;CAAM;CAAM;CAAM;CAAM;CAAM;CAAM;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAI;AAE5F,MAAa,oBAAoB,aAAgC;AAC/D,QAAO,SACJ,KAAK,YAAY;AAChB,SAAO,GAAG,QAAQ,WAAW,GAAG,WAAW,QAAQ,MAAM;GACzD,CACD,KAAK,KAAK;;AAGf,MAAa,mBAAmB,aAAgC;AAC9D,QAAO,SACJ,KAAK,SAAS,MAAM;AACnB,MAAI,MAAM,SAAS,SAAS,EAC1B,QAAO,GAAG,WAAW,QAAQ,MAAM;AAErC,SAAO,eAAe,WAAW,QAAQ,MAAM,MAAM,WAAW,QAAQ,MAAM;GAC9E,CACD,KAAK,KAAK;;AAGf,MAAa,aAAa,EAAE,KAAK,MAAM,YAAY,oBAAmC;AACpF,KAAI,CAAC,IAAK,QAAO;AACjB,QAAO,aAAa,KAAK,UAAU;EACjC,MAAM,cAAc,mBAAmB;GAAE;GAAO;GAAM;GAAY;GAAe,CAAC;AAElF,SAAO,GAAG,MADI,YAAY,SAAS,IAAI,gBAAgB,GACjC,GAAG,MAAM;GAC/B,CAAC,KAAK,KAAK;;AAGf,MAAM,iBAAiB;AAEvB,MAAM,iBAAiB;AAYvB,MAAa,iCAET,EACE,UACA,QAAQ,YACR,MACA,YACA,KACA,eACA,aACA,QAAQ,gBACR,GAAG,SAEL,QACG;CACH,MAAM,SAAS,cAAc,UAAU;EAAE;EAAK;EAAM;EAAY;EAAe,CAAC;AAEhF,QACE,4CAACA,+BAAO;EAAQ,GAAI;EAAY;aAC7B,gBAAgB,eAAe,2CAAC;GAAO,MAAM;GAAqB;GAAe;IAAS,EAC1F;GACc;EAGtB;AAED,MAAM,kDAAqB,OAAO;CAChC,iBAAiB,EAAE,SAAS,WAAW;CACvC,UAAU,EACR,SAAS;EACP,SAAS,EAAE;EACX,SAAS,EACP,cAAc,UACf;EACF,EACF;CACF,CAAC;AAEF,MAAM,4DACJC,kBAAI,KACJ,EACE,MAAM;CACJ,SAAS;CACT,YAAY;CACZ,gBAAgB;CACjB,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAcD,MAAa,6BACV,EAAE,gBAAgB,gBAAgB,MAAM,YAAY,eAAe,aAAa,KAAK,KAAK,GAAG,SAAS,QAAQ;CAC7G,MAAM,cAAc,mBAAmB;EAAE,OAAO;EAAe;EAAM;EAAY;EAAe,CAAC;CACjG,MAAM,eAAe,cAAc,GAAG,IAAI,GAAG,gBAAgB;AAC7D,QAAO,2CAAC;EAAiB;EAAK,KAAK,gBAAgB,cAAc,MAAM;EAAc,GAAI;EAAY;GAAO;EAE/G;AAeD,MAAa,+BAET,EACE,QAAQ,YACR,MACA,YACA,KACA,aACA,eACA,gBAAgB,gBAChB,OAAO,WACP,KACA,iBACA,UACA,GAAG,SAEL,QACG;CACH,MAAM,CAAC,UAAU,mCAAwB,MAAM;AAE/C,4BAAgB;AACd,cAAY,MAAM;IACjB;EAAC;EAAK;EAAY;EAAW;EAAS,CAAC;AAE1C,KAAI,CAAC,KAAK,UAAU,CAAC,UAAU,UAAU,gBACvC,QACE,2CAAC;EAAsB,GAAI;EAAY;YACpC;GACqB;CAI5B,MAAM,cAAc,mBAAmB;EAAE,OAAO;EAAe;EAAM;EAAY;EAAe,CAAC;CACjG,MAAM,cAAc,OAAO,cAAc,GAAG,IAAI,GAAG,gBAAgB;AAEnE,QACE,4CAAC;EACE,CAAC,CAAC,UAAU,UAAU,CAAC,QAAQ,CAAC,cAAc,gBAAgB,eAC7D,2CAAC;GACC,MAAM;GACN,QAAQ,iBAAiB,SAAS;GAClC,OAAO,aAAa,gBAAgB,SAAS;IAC7C;EAEH,gBAAgB,eACf,2CAAC;GACC,MAAM;GACN,QAAQ,UAAU;IAAE;IAAK;IAAM;IAAY;IAAe,CAAC;GAC3D,OAAO,aAAa;IACpB;EAEJ,2CAAC;GACM;GACL,KAAK,gBAAgB,cAAc,MAAM;GACzC,GAAI;GACC;GACL,cAAY,WAAW,KAAK;GAC5B,UAAU,MAAM;AACd,gBAAY,KAAK;AACjB,UAAM,UAAU,EAAE;;GAEpB,SAAS,MAAM;AACb,gBAAY,MAAM;AAClB,UAAM,SAAS,EAAE;;IAEnB;KACM;EAGf"}

package/lib/Pagination.d.ts CHANGED Viewed

@@ -10,7 +10,7 @@ import type { StyledProps } from "@ndla/styled-system/types";
 export interface PaginationRootProps extends Pagination.RootProps, StyledProps {
     translations: Pagination.RootProps["translations"];
 }
-export declare const PaginationRoot: import("@ndla/styled-system/jsx").StyleContextProvider<import("react").ForwardRefExoticComponent<Pagination.RootProps & import("react").RefAttributes<HTMLElement>>, import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"root" | "item" | "ellipsis" | "nextTrigger" | "prevTrigger", import("@ndla/styled-system/types").SlotRecipeVariantRecord<"root" | "item" | "ellipsis" | "nextTrigger" | "prevTrigger">>>;
+export declare const PaginationRoot: import("@ndla/styled-system/jsx").StyleContextProvider<import("react").ForwardRefExoticComponent<Pagination.RootProps & import("react").RefAttributes<HTMLElement>>, import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"root" | "item" | "ellipsis" | "nextTrigger" | "prevTrigger" | "firstTrigger" | "lastTrigger", import("@ndla/styled-system/types").SlotRecipeVariantRecord<"root" | "item" | "ellipsis" | "nextTrigger" | "prevTrigger" | "firstTrigger" | "lastTrigger">>>;
 export declare const PaginationItem: import("@ndla/styled-system/jsx").StyleContextConsumer<import("react").ForwardRefExoticComponent<Pagination.ItemProps & import("react").RefAttributes<HTMLButtonElement>>>;
 export declare const PaginationEllipsis: import("@ndla/styled-system/jsx").StyleContextConsumer<import("react").ForwardRefExoticComponent<Pagination.EllipsisProps & import("react").RefAttributes<HTMLDivElement>>>;
 export declare const PaginationContext: (props: Pagination.ContextProps) => import("react").ReactNode;

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@ndla/primitives",
   "type": "module",
-  "version": "1.0.116-alpha.0",
+  "version": "1.0.118-alpha.0",
   "description": "Primitive components for NDLA.",
   "license": "GPL-3.0",
   "exports": {
@@ -32,12 +32,12 @@
     "lib"
   ],
   "dependencies": {
-    "@ark-ui/react": "^5.25.0",
+    "@ark-ui/react": "^5.30.0",
     "@ndla/styled-system": "^0.0.46",
     "@ndla/util": "^5.0.18-alpha.0"
   },
   "devDependencies": {
-    "@ndla/preset-panda": "^0.0.69",
+    "@ndla/preset-panda": "^0.0.70",
     "@pandacss/dev": "^1.7.0"
   },
   "peerDependencies": {
@@ -47,5 +47,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "121f4f2b6e0468246e98b17315ea35a4b2195c15"
+  "gitHead": "53ce5c27affb5122415e71963518dac75fb694a6"
 }