@ndla/primitives 1.0.89-alpha.0 → 1.0.90-alpha.0

package/es/Accordion.js

@@ -1,140 +1,110 @@
-/**
- * Copyright (c) 2024-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
+import { createStyleContext } from "./createStyleContext.js";
 import { Accordion, accordionAnatomy } from "@ark-ui/react";
 import { sva } from "@ndla/styled-system/css";
-import { createStyleContext } from "./createStyleContext";
+
+//#region src/Accordion.tsx
 const accordionRecipe = sva({
-  slots: accordionAnatomy.keys(),
-  base: {
-    root: {
-      display: "flex",
-      flexDirection: "column",
-      gap: "3xsmall"
-    },
-    itemTrigger: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "space-between",
-      background: "surface.default",
-      cursor: "pointer",
-      transitionDuration: "fast",
-      transitionTimingFunction: "default",
-      transitionProperty: "background, border-color, border, border-radius",
-      _closed: {
-        transitionProperty: "background, border-color, border, border-radius"
-      },
-      _disabled: {
-        cursor: "not-allowed",
-        background: "surface.disabled.subtle",
-        boxShadowColor: "stroke.disabled",
-        color: "text.disabled",
-        _hover: {
-          background: "surface.disabled.subtle",
-          boxShadowColor: "stroke.disabled",
-          color: "text.disabled"
-        }
-      }
-    },
-    itemIndicator: {
-      color: "icon.strong",
-      transformOrigin: "center",
-      transitionDuration: "normal",
-      transitionProperty: "transform",
-      transitionTimingFunction: "default",
-      _open: {
-        transform: "rotate(180deg)"
-      },
-      _motionReduce: {
-        transition: "none",
-        transitionDuration: "0s"
-      }
-    },
-    itemContent: {
-      overflow: "hidden",
-      // TODO: Is this needed?
-      transitionProperty: "padding-bottom",
-      transitionDuration: "normal",
-      transitionTimingFunction: "default",
-      paddingBlock: "xsmall",
-      paddingInline: "small",
-      _open: {
-        animation: "collapse-in",
-        _motionReduce: {
-          animation: "none"
-        }
-      },
-      _closed: {
-        animation: "collapse-out",
-        _motionReduce: {
-          animation: "none"
-        }
-      }
-    },
-    item: {
-      width: "100%"
-    }
-  },
-  defaultVariants: {
-    variant: "bordered"
-  },
-  variants: {
-    variant: {
-      clean: {},
-      bordered: {
-        itemTrigger: {
-          paddingInline: "medium",
-          paddingBlock: "medium",
-          width: "100%",
-          borderRadius: "xsmall",
-          boxShadowColor: "stroke.subtle",
-          boxShadow: "inset 0 0 0 1px var(--shadow-color)",
-          _hover: {
-            background: "surface.actionSubtle.hover",
-            boxShadowColor: "stroke.hover"
-          },
-          _open: {
-            background: "surface.actionSubtle.active",
-            boxShadowColor: "stroke.default",
-            borderBottomRadius: "sharp"
-          },
-          _focusVisible: {
-            outline: "none",
-            boxShadowColor: "stroke.default",
-            boxShadow: "inset 0 0 0 3px var(--shadow-color)"
-          }
-        },
-        itemContent: {
-          borderBottomRadius: "xsmall",
-          borderWidth: "0 1px 1px",
-          borderStyle: "solid",
-          borderColor: "stroke.default"
-        }
-      }
-    }
-  }
-});
-const {
-  withProvider,
-  withContext
-} = createStyleContext(accordionRecipe);
-export const AccordionRoot = withProvider(Accordion.Root, "root", {
-  baseComponent: true
-});
-export const AccordionItemContent = withContext(Accordion.ItemContent, "itemContent", {
-  baseComponent: true
+	slots: accordionAnatomy.keys(),
+	base: {
+		root: {
+			display: "flex",
+			flexDirection: "column",
+			gap: "3xsmall"
+		},
+		itemTrigger: {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "space-between",
+			background: "surface.default",
+			cursor: "pointer",
+			transitionDuration: "fast",
+			transitionTimingFunction: "default",
+			transitionProperty: "background, border-color, border, border-radius",
+			_closed: { transitionProperty: "background, border-color, border, border-radius" },
+			_disabled: {
+				cursor: "not-allowed",
+				background: "surface.disabled.subtle",
+				boxShadowColor: "stroke.disabled",
+				color: "text.disabled",
+				_hover: {
+					background: "surface.disabled.subtle",
+					boxShadowColor: "stroke.disabled",
+					color: "text.disabled"
+				}
+			}
+		},
+		itemIndicator: {
+			color: "icon.strong",
+			transformOrigin: "center",
+			transitionDuration: "normal",
+			transitionProperty: "transform",
+			transitionTimingFunction: "default",
+			_open: { transform: "rotate(180deg)" },
+			_motionReduce: {
+				transition: "none",
+				transitionDuration: "0s"
+			}
+		},
+		itemContent: {
+			overflow: "hidden",
+			transitionProperty: "padding-bottom",
+			transitionDuration: "normal",
+			transitionTimingFunction: "default",
+			paddingBlock: "xsmall",
+			paddingInline: "small",
+			_open: {
+				animation: "collapse-in",
+				_motionReduce: { animation: "none" }
+			},
+			_closed: {
+				animation: "collapse-out",
+				_motionReduce: { animation: "none" }
+			}
+		},
+		item: { width: "100%" }
+	},
+	defaultVariants: { variant: "bordered" },
+	variants: { variant: {
+		clean: {},
+		bordered: {
+			itemTrigger: {
+				paddingInline: "medium",
+				paddingBlock: "medium",
+				width: "100%",
+				borderRadius: "xsmall",
+				boxShadowColor: "stroke.subtle",
+				boxShadow: "inset 0 0 0 1px var(--shadow-color)",
+				_hover: {
+					background: "surface.actionSubtle.hover",
+					boxShadowColor: "stroke.hover"
+				},
+				_open: {
+					background: "surface.actionSubtle.active",
+					boxShadowColor: "stroke.default",
+					borderBottomRadius: "sharp"
+				},
+				_focusVisible: {
+					outline: "none",
+					boxShadowColor: "stroke.default",
+					boxShadow: "inset 0 0 0 3px var(--shadow-color)"
+				}
+			},
+			itemContent: {
+				borderBottomRadius: "xsmall",
+				borderWidth: "0 1px 1px",
+				borderStyle: "solid",
+				borderColor: "stroke.default"
+			}
+		}
+	} }
 });
-export const AccordionItemIndicator = withContext(Accordion.ItemIndicator, "itemIndicator", {
-  baseComponent: true
-});
-export const AccordionItem = withContext(Accordion.Item, "item", {
-  baseComponent: true
-});
-export const AccordionItemTrigger = withContext(Accordion.ItemTrigger, "itemTrigger", {
-  baseComponent: true
-});
+const { withProvider, withContext } = createStyleContext(accordionRecipe);
+const AccordionRoot = withProvider(Accordion.Root, "root", { baseComponent: true });
+const AccordionItemContent = withContext(Accordion.ItemContent, "itemContent", { baseComponent: true });
+const AccordionItemIndicator = withContext(Accordion.ItemIndicator, "itemIndicator", { baseComponent: true });
+const AccordionItem = withContext(Accordion.Item, "item", { baseComponent: true });
+const AccordionItemTrigger = withContext(Accordion.ItemTrigger, "itemTrigger", { baseComponent: true });
+
+//#endregion
+export { AccordionItem, AccordionItemContent, AccordionItemIndicator, AccordionItemTrigger, AccordionRoot };
+//# sourceMappingURL=Accordion.js.map

package/es/Accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.js","names":[],"sources":["../src/Accordion.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 { Accordion, accordionAnatomy } from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport type { JsxStyleProps, RecipeVariantProps } from \"@ndla/styled-system/types\";\nimport { createStyleContext } from \"./createStyleContext\";\n\nconst accordionRecipe = sva({\n  slots: accordionAnatomy.keys(),\n  base: {\n    root: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"3xsmall\",\n    },\n    itemTrigger: {\n      display: \"flex\",\n      alignItems: \"center\",\n      justifyContent: \"space-between\",\n      background: \"surface.default\",\n      cursor: \"pointer\",\n      transitionDuration: \"fast\",\n      transitionTimingFunction: \"default\",\n      transitionProperty: \"background, border-color, border, border-radius\",\n      _closed: {\n        transitionProperty: \"background, border-color, border, border-radius\",\n      },\n      _disabled: {\n        cursor: \"not-allowed\",\n        background: \"surface.disabled.subtle\",\n        boxShadowColor: \"stroke.disabled\",\n        color: \"text.disabled\",\n        _hover: {\n          background: \"surface.disabled.subtle\",\n          boxShadowColor: \"stroke.disabled\",\n          color: \"text.disabled\",\n        },\n      },\n    },\n    itemIndicator: {\n      color: \"icon.strong\",\n      transformOrigin: \"center\",\n      transitionDuration: \"normal\",\n      transitionProperty: \"transform\",\n      transitionTimingFunction: \"default\",\n      _open: {\n        transform: \"rotate(180deg)\",\n      },\n      _motionReduce: {\n        transition: \"none\",\n        transitionDuration: \"0s\",\n      },\n    },\n    itemContent: {\n      overflow: \"hidden\",\n      // TODO: Is this needed?\n      transitionProperty: \"padding-bottom\",\n      transitionDuration: \"normal\",\n      transitionTimingFunction: \"default\",\n      paddingBlock: \"xsmall\",\n      paddingInline: \"small\",\n      _open: {\n        animation: \"collapse-in\",\n        _motionReduce: {\n          animation: \"none\",\n        },\n      },\n      _closed: {\n        animation: \"collapse-out\",\n        _motionReduce: {\n          animation: \"none\",\n        },\n      },\n    },\n    item: {\n      width: \"100%\",\n    },\n  },\n  defaultVariants: {\n    variant: \"bordered\",\n  },\n  variants: {\n    variant: {\n      clean: {},\n      bordered: {\n        itemTrigger: {\n          paddingInline: \"medium\",\n          paddingBlock: \"medium\",\n          width: \"100%\",\n          borderRadius: \"xsmall\",\n          boxShadowColor: \"stroke.subtle\",\n          boxShadow: \"inset 0 0 0 1px var(--shadow-color)\",\n          _hover: {\n            background: \"surface.actionSubtle.hover\",\n            boxShadowColor: \"stroke.hover\",\n          },\n          _open: {\n            background: \"surface.actionSubtle.active\",\n            boxShadowColor: \"stroke.default\",\n            borderBottomRadius: \"sharp\",\n          },\n          _focusVisible: {\n            outline: \"none\",\n            boxShadowColor: \"stroke.default\",\n            boxShadow: \"inset 0 0 0 3px var(--shadow-color)\",\n          },\n        },\n        itemContent: {\n          borderBottomRadius: \"xsmall\",\n          borderWidth: \"0 1px 1px\",\n          borderStyle: \"solid\",\n          borderColor: \"stroke.default\",\n        },\n      },\n    },\n  },\n});\n\nconst { withProvider, withContext } = createStyleContext(accordionRecipe);\n\nexport type AccordionVariantProps = RecipeVariantProps<typeof accordionRecipe>;\n\nexport interface AccordionRootProps extends JsxStyleProps, Accordion.RootProps {}\n\nexport const AccordionRoot = withProvider<HTMLDivElement, AccordionRootProps & AccordionVariantProps>(\n  Accordion.Root,\n  \"root\",\n  { baseComponent: true },\n);\n\nexport const AccordionItemContent = withContext<HTMLDivElement, JsxStyleProps & Accordion.ItemContentProps>(\n  Accordion.ItemContent,\n  \"itemContent\",\n  { baseComponent: true },\n);\n\nexport const AccordionItemIndicator = withContext<HTMLDivElement, JsxStyleProps & Accordion.ItemIndicatorProps>(\n  Accordion.ItemIndicator,\n  \"itemIndicator\",\n  { baseComponent: true },\n);\n\nexport interface AccordionItemProps extends JsxStyleProps, Accordion.ItemProps {}\n\nexport const AccordionItem = withContext<HTMLDivElement, AccordionItemProps>(Accordion.Item, \"item\", {\n  baseComponent: true,\n});\n\nexport const AccordionItemTrigger = withContext<HTMLButtonElement, JsxStyleProps & Accordion.ItemTriggerProps>(\n  Accordion.ItemTrigger,\n  \"itemTrigger\",\n  { baseComponent: true },\n);\n"],"mappings":";;;;;AAaA,MAAM,kBAAkB,IAAI;CAC1B,OAAO,iBAAiB,MAAM;CAC9B,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,KAAK;EACN;EACD,aAAa;GACX,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,YAAY;GACZ,QAAQ;GACR,oBAAoB;GACpB,0BAA0B;GAC1B,oBAAoB;GACpB,SAAS,EACP,oBAAoB,kDACrB;GACD,WAAW;IACT,QAAQ;IACR,YAAY;IACZ,gBAAgB;IAChB,OAAO;IACP,QAAQ;KACN,YAAY;KACZ,gBAAgB;KAChB,OAAO;IACR;GACF;EACF;EACD,eAAe;GACb,OAAO;GACP,iBAAiB;GACjB,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,OAAO,EACL,WAAW,iBACZ;GACD,eAAe;IACb,YAAY;IACZ,oBAAoB;GACrB;EACF;EACD,aAAa;GACX,UAAU;GAEV,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,cAAc;GACd,eAAe;GACf,OAAO;IACL,WAAW;IACX,eAAe,EACb,WAAW,OACZ;GACF;GACD,SAAS;IACP,WAAW;IACX,eAAe,EACb,WAAW,OACZ;GACF;EACF;EACD,MAAM,EACJ,OAAO,OACR;CACF;CACD,iBAAiB,EACf,SAAS,WACV;CACD,UAAU,EACR,SAAS;EACP,OAAO,CAAE;EACT,UAAU;GACR,aAAa;IACX,eAAe;IACf,cAAc;IACd,OAAO;IACP,cAAc;IACd,gBAAgB;IAChB,WAAW;IACX,QAAQ;KACN,YAAY;KACZ,gBAAgB;IACjB;IACD,OAAO;KACL,YAAY;KACZ,gBAAgB;KAChB,oBAAoB;IACrB;IACD,eAAe;KACb,SAAS;KACT,gBAAgB;KAChB,WAAW;IACZ;GACF;GACD,aAAa;IACX,oBAAoB;IACpB,aAAa;IACb,aAAa;IACb,aAAa;GACd;EACF;CACF,EACF;AACF,EAAC;AAEF,MAAM,EAAE,cAAc,aAAa,GAAG,mBAAmB,gBAAgB;AAMzE,MAAa,gBAAgB,aAC3B,UAAU,MACV,QACA,EAAE,eAAe,KAAM,EACxB;AAED,MAAa,uBAAuB,YAClC,UAAU,aACV,eACA,EAAE,eAAe,KAAM,EACxB;AAED,MAAa,yBAAyB,YACpC,UAAU,eACV,iBACA,EAAE,eAAe,KAAM,EACxB;AAID,MAAa,gBAAgB,YAAgD,UAAU,MAAM,QAAQ,EACnG,eAAe,KAChB,EAAC;AAEF,MAAa,uBAAuB,YAClC,UAAU,aACV,eACA,EAAE,eAAe,KAAM,EACxB"}

package/es/ArticleLists.js

@@ -1,186 +1,122 @@
-/**
- * Copyright (c) 2024-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-import { forwardRef, useMemo } from "react";
 import { ark } from "@ark-ui/react";
 import { css, cva } from "@ndla/styled-system/css";
+import { forwardRef, useMemo } from "react";
 import { styled } from "@ndla/styled-system/jsx";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/ArticleLists.tsx
 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"
-      },
-      _before: {
-        position: "absolute",
-        transform: "translateX(calc(-100% + (token(spacing.small) * -1)))",
-        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) '. '"
-                      }
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      },
-      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) '. '"
-              }
-            }
-          }
-        }
-      }
-    }
-  }
+	base: {
+		marginInlineStart: "small",
+		paddingInlineStart: "small",
+		[LIST_ITEM]: {
+			"& > ul": { marginInlineStart: "0 !important" },
+			_before: {
+				position: "absolute",
+				transform: "translateX(calc(-100% + (token(spacing.small) * -1)))",
+				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) '. '" }
+									}
+								}
+							}
+						}
+					}
+				}
+			}
+		},
+		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) '. '" } }
+				}
+			}
+		}
+	} }
 });
-const StyledOrderedList = styled(ark.ol, {}, {
-  baseComponent: true
+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]);
+	return /* @__PURE__ */ jsx(StyledOrderedList, {
+		"data-embed-type": "ordered-list",
+		"data-variant": variant,
+		"data-count": start !== void 0,
+		css: css.raw(orderedListRecipe.raw({ variant }), cssProp),
+		style,
+		ref,
+		...props
+	});
 });
-export const OrderedList = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    variant,
-    css: cssProp,
-    start,
-    ...props
-  } = _ref;
-  const style = useMemo(() => ({
-    "--start": start ? start - 1 : undefined
-  }), [start]);
-  return /*#__PURE__*/_jsx(StyledOrderedList, {
-    "data-embed-type": "ordered-list",
-    "data-variant": variant,
-    "data-count": start !== undefined,
-    css: css.raw(orderedListRecipe.raw({
-      variant
-    }), cssProp),
-    style: style,
-    ref: ref,
-    ...props
-  });
-});
-export const UnOrderedList = styled("ul", {
-  base: {
-    listStyle: "revert",
-    marginInlineStart: "medium",
-    paddingInlineStart: "small",
-    "& ul": {
-      marginInlineStart: "0"
-    },
-    "& li": {
-      marginBlock: "small",
-      paddingInlineStart: "small",
-      _marker: {
-        color: "icon.strong"
-      },
-      "& > ol": {
-        marginInlineStart: "0 !important"
-      }
-    },
-    listStyleType: "disc",
-    "& > li > ul": {
-      listStyleType: "circle",
-      "& > li > ul": {
-        listStyleType: "square"
-      }
-    }
-  }
-});
-export const DefinitionList = styled("dl", {
-  base: {
-    "& dt": {
-      fontWeight: "bold"
-    },
-    "& dd": {
-      marginInlineStart: "medium"
-    }
-  }
-});
+const UnOrderedList = styled("ul", { base: {
+	listStyle: "revert",
+	marginInlineStart: "medium",
+	paddingInlineStart: "small",
+	"& ul": { marginInlineStart: "0" },
+	"& li": {
+		marginBlock: "small",
+		paddingInlineStart: "small",
+		_marker: { color: "icon.strong" },
+		"& > ol": { marginInlineStart: "0 !important" }
+	},
+	listStyleType: "disc",
+	"& > li > ul": {
+		listStyleType: "circle",
+		"& > li > ul": { listStyleType: "square" }
+	}
+} });
+const DefinitionList = styled("dl", { base: {
+	"& dt": { fontWeight: "bold" },
+	"& dd": { marginInlineStart: "medium" }
+} });
+
+//#endregion
+export { DefinitionList, OrderedList, UnOrderedList };
+//# sourceMappingURL=ArticleLists.js.map

package/es/ArticleLists.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleLists.js","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 { JsxStyleProps, RecipeVariantProps } 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 = RecipeVariantProps<typeof orderedListRecipe>;\n\nexport type OrderedListProps = HTMLArkProps<\"ol\"> & JsxStyleProps & 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 type UnOrderedListProps = HTMLArkProps<\"ul\"> & JsxStyleProps;\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 = HTMLArkProps<\"dl\"> & JsxStyleProps;\n"],"mappings":";;;;;;;AAcA,MAAM,YAAY;AAClB,MAAM,cAAc;AACpB,MAAM,cAAc;AACpB,MAAM,oBAAoB,EAAE,YAAY;AAExC,MAAM,oBAAoB,IAAI;CAC5B,MAAM;EACJ,mBAAmB;EACnB,oBAAoB;GACnB,YAAY;GACX,UAAU,EACR,mBAAmB,eACpB;GACD,SAAS;IACP,UAAU;IACV,WAAW;IACX,oBAAoB;GACrB;EACF;EACD,QAAQ,EACN,aAAa,QACd;CACF;CACD,iBAAiB,EACf,SAAS,UACV;CACD,UAAU,EACR,SAAS;EACP,SAAS;IACN,cAAc;IACb,mBAAmB;IACnB,oBAAoB;GACrB;GACD,cAAc;GACd,wBAAwB,EACtB,cAAc,yBACf;IACA,YAAY;IACX,kBAAkB;IAClB,SAAS,EACP,SAAS,gCACV;KACA,cAAc;KACb,cAAc;KACd,wBAAwB,EACtB,cAAc,yBACf;MACA,YAAY;MACX,mBAAmB;MACnB,kBAAkB;MAClB,SAAS,EACP,SAAS,6DACV;OACA,cAAc;OACb,cAAc;OACd,wBAAwB,EACtB,cAAc,yBACf;QACA,YAAY;QACX,mBAAmB;QACnB,kBAAkB;QAClB,SAAS,EACP,SAAS,0FACV;SACA,cAAc;SACb,cAAc;SACd,wBAAwB,EACtB,cAAc,yBACf;UACA,YAAY;UACX,mBAAmB;UACnB,kBAAkB;UAClB,SAAS,EACP,SACE,wHACH;SACF;QACF;OACF;MACF;KACF;IACF;GACF;EACF;EACD,SAAS;GACP,cAAc;GACd,wBAAwB,EACtB,cAAc,yBACf;IACA,cAAc;IACb,mBAAmB;IACnB,oBAAoB;GACrB;IACA,YAAY;IACX,kBAAkB;IAClB,SAAS,EACP,SAAS,oCACV;KACA,mBAAmB;KAClB,SAAS,EACP,SAAS,oCACV;MACA,mBAAmB,EAClB,SAAS,EACP,SAAS,oCACV,EACF;IACF;GACF;EACF;CACF,EACF;AACF,EAAC;AAMF,MAAM,oBAAoB,OAAO,IAAI,IAAI,CAAE,GAAE,EAAE,eAAe,KAAM,EAAC;AAErE,MAAa,cAAc,WACzB,CAAC,EAAE,SAAS,KAAK,SAAS,MAAO,GAAG,OAAO,EAAE,QAAQ;CACnD,MAAM,QAAQ,QAAQ,OAAO,EAAE,WAAW,QAAQ,QAAQ,WAAe,IAAoB,CAAC,KAAM,EAAC;AACrG,wBACE,IAAC;EACC,mBAAgB;EAChB,gBAAc;EACd,cAAY;EACZ,KAAK,IAAI,IAAI,kBAAkB,IAAI,EAAE,QAAS,EAAC,EAAE,QAAQ;EAClD;EACF;EACL,GAAI;GACJ;AAEL,EACF;AAID,MAAa,gBAAgB,OAAO,MAAM,EACxC,MAAM;CACJ,WAAW;CACX,mBAAmB;CACnB,oBAAoB;CACpB,QAAQ,EACN,mBAAmB,IACpB;CACD,QAAQ;EACN,aAAa;EACb,oBAAoB;EACpB,SAAS,EACP,OAAO,cACR;EAED,UAAU,EACR,mBAAmB,eACpB;CACF;CAED,eAAe;CACf,eAAe;EACb,eAAe;EACf,eAAe,EACb,eAAe,SAChB;CACF;AACF,EACF,EAAC;AAEF,MAAa,iBAAiB,OAAO,MAAM,EACzC,MAAM;CACJ,QAAQ,EACN,YAAY,OACb;CACD,QAAQ,EACN,mBAAmB,SACpB;AACF,EACF,EAAC"}