@ndla/ui 56.0.123-alpha.0 → 56.0.124-alpha.0

package/lib/Grid/Grid.js

@@ -1,101 +1,67 @@
-"use strict";
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
+const react = require_rolldown_runtime.__toESM(require("react"));
+const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
+const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
+//#region src/Grid/Grid.tsx
+const GridContainer = (0, __ndla_styled_system_jsx.styled)("div", {
+	base: {
+		display: "grid",
+		justifyContent: "center",
+		borderRadius: "xsmall",
+		gridRowGap: "large",
+		gridColumnGap: "medium",
+		width: "100%",
+		backgroundColor: "background.subtle",
+		minWidth: "surface.xxsmall",
+		gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
+		"& :not(div[data-parallax-cell='true']) > div[data-embed-type='pitch']": {
+			height: "100%",
+			"& > :last-child": { marginTop: "auto" }
+		},
+		tabletDown: { gridTemplateColumns: "repeat(1, minmax(0, 1fr))" },
+		tabletToDesktop: {
+			gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
+			"& > div:nth-child(3):last-child": {
+				display: "flex",
+				flexFlow: "column",
+				justifyContent: "center",
+				alignItems: "center",
+				gridColumn: "span 2"
+			}
+		}
+	},
+	variants: {
+		columns: {
+			"2": {},
+			"2x2": {},
+			"3": { desktop: { gridTemplateColumns: "repeat(3, minmax(0, 1fr))" } },
+			"4": { desktop: { gridTemplateColumns: "repeat(4, minmax(0, 1fr))" } }
+		},
+		background: {
+			white: { backgroundColor: "surface.default" },
+			transparent: { backgroundColor: "transparent" },
+			gray: { backgroundColor: "background.subtle" }
+		},
+		border: { lightBlue: {
+			padding: "xsmall",
+			border: "1px solid",
+			borderColor: "surface.brand.2"
+		} }
+	}
 });
-exports.Grid = void 0;
-var _jsx2 = require("@ndla/styled-system/jsx");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * Copyright (c) 2023-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-const GridContainer = (0, _jsx2.styled)("div", {
-  base: {
-    display: "grid",
-    justifyContent: "center",
-    borderRadius: "xsmall",
-    gridRowGap: "large",
-    gridColumnGap: "medium",
-    width: "100%",
-    backgroundColor: "background.subtle",
-    minWidth: "surface.xxsmall",
-    gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
-    "& :not(div[data-parallax-cell='true']) > div[data-embed-type='pitch']": {
-      height: "100%",
-      "& > :last-child": {
-        marginTop: "auto"
-      }
-    },
-    tabletDown: {
-      gridTemplateColumns: "repeat(1, minmax(0, 1fr))"
-    },
-    tabletToDesktop: {
-      gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
-      "& > div:nth-child(3):last-child": {
-        display: "flex",
-        flexFlow: "column",
-        justifyContent: "center",
-        alignItems: "center",
-        gridColumn: "span 2"
-      }
-    }
-  },
-  variants: {
-    columns: {
-      "2": {},
-      "2x2": {},
-      "3": {
-        desktop: {
-          gridTemplateColumns: "repeat(3, minmax(0, 1fr))"
-        }
-      },
-      "4": {
-        desktop: {
-          gridTemplateColumns: "repeat(4, minmax(0, 1fr))"
-        }
-      }
-    },
-    background: {
-      white: {
-        backgroundColor: "surface.default"
-      },
-      transparent: {
-        backgroundColor: "transparent"
-      },
-      gray: {
-        backgroundColor: "background.subtle"
-      }
-    },
-    border: {
-      lightBlue: {
-        padding: "xsmall",
-        border: "1px solid",
-        borderColor: "surface.brand.2"
-      }
-    }
-  }
-});
-const Grid = _ref => {
-  let {
-    columns,
-    border,
-    children,
-    background = "gray",
-    ...rest
-  } = _ref;
-  const amountOfColumns = children?.length === 3 ? "3" : columns;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridContainer, {
-    "data-embed-type": "grid",
-    border: border === "none" ? undefined : border,
-    columns: amountOfColumns,
-    background: background,
-    ...rest,
-    children: children
-  });
+const Grid = ({ columns, border, children, background = "gray",...rest }) => {
+	const amountOfColumns = children?.length === 3 ? "3" : columns;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GridContainer, {
+		"data-embed-type": "grid",
+		border: border === "none" ? void 0 : border,
+		columns: amountOfColumns,
+		background,
+		...rest,
+		children
+	});
 };
-exports.Grid = Grid;
+
+//#endregion
+exports.Grid = Grid;
+//# sourceMappingURL=Grid.js.map

package/lib/Grid/Grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.js","names":[],"sources":["../../src/Grid/Grid.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-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 ComponentProps, type ReactNode } from \"react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\nconst GridContainer = styled(\"div\", {\n  base: {\n    display: \"grid\",\n    justifyContent: \"center\",\n    borderRadius: \"xsmall\",\n    gridRowGap: \"large\",\n    gridColumnGap: \"medium\",\n    width: \"100%\",\n    backgroundColor: \"background.subtle\",\n    minWidth: \"surface.xxsmall\",\n    gridTemplateColumns: \"repeat(2, minmax(0, 1fr))\",\n\n    \"& :not(div[data-parallax-cell='true']) > div[data-embed-type='pitch']\": {\n      height: \"100%\",\n      \"& > :last-child\": {\n        marginTop: \"auto\",\n      },\n    },\n    tabletDown: {\n      gridTemplateColumns: \"repeat(1, minmax(0, 1fr))\",\n    },\n    tabletToDesktop: {\n      gridTemplateColumns: \"repeat(2, minmax(0, 1fr))\",\n      \"& > div:nth-child(3):last-child\": {\n        display: \"flex\",\n        flexFlow: \"column\",\n        justifyContent: \"center\",\n        alignItems: \"center\",\n        gridColumn: \"span 2\",\n      },\n    },\n  },\n  variants: {\n    columns: {\n      \"2\": {},\n      \"2x2\": {},\n      \"3\": { desktop: { gridTemplateColumns: \"repeat(3, minmax(0, 1fr))\" } },\n      \"4\": { desktop: { gridTemplateColumns: \"repeat(4, minmax(0, 1fr))\" } },\n    },\n    background: {\n      white: { backgroundColor: \"surface.default\" },\n      transparent: { backgroundColor: \"transparent\" },\n      gray: { backgroundColor: \"background.subtle\" },\n    },\n    border: {\n      lightBlue: {\n        padding: \"xsmall\",\n        border: \"1px solid\",\n        borderColor: \"surface.brand.2\",\n      },\n    },\n  },\n});\n\nexport interface GridProps extends ComponentProps<\"div\"> {\n  columns: \"2\" | \"3\" | \"4\" | \"2x2\";\n  border?: \"none\" | \"lightBlue\";\n  background?: \"transparent\" | \"white\" | \"gray\";\n  children?: ReactNode[];\n}\n\nexport const Grid = ({ columns, border, children, background = \"gray\", ...rest }: GridProps) => {\n  const amountOfColumns = children?.length === 3 ? \"3\" : columns;\n\n  return (\n    <GridContainer\n      data-embed-type=\"grid\"\n      border={border === \"none\" ? undefined : border}\n      columns={amountOfColumns}\n      background={background}\n      {...rest}\n    >\n      {children}\n    </GridContainer>\n  );\n};\n"],"mappings":";;;;;;AAWA,MAAM,gBAAgB,qCAAO,OAAO;CAClC,MAAM;EACJ,SAAS;EACT,gBAAgB;EAChB,cAAc;EACd,YAAY;EACZ,eAAe;EACf,OAAO;EACP,iBAAiB;EACjB,UAAU;EACV,qBAAqB;EAErB,yEAAyE;GACvE,QAAQ;GACR,mBAAmB,EACjB,WAAW,OACZ;EACF;EACD,YAAY,EACV,qBAAqB,4BACtB;EACD,iBAAiB;GACf,qBAAqB;GACrB,mCAAmC;IACjC,SAAS;IACT,UAAU;IACV,gBAAgB;IAChB,YAAY;IACZ,YAAY;GACb;EACF;CACF;CACD,UAAU;EACR,SAAS;GACP,KAAK,CAAE;GACP,OAAO,CAAE;GACT,KAAK,EAAE,SAAS,EAAE,qBAAqB,4BAA6B,EAAE;GACtE,KAAK,EAAE,SAAS,EAAE,qBAAqB,4BAA6B,EAAE;EACvE;EACD,YAAY;GACV,OAAO,EAAE,iBAAiB,kBAAmB;GAC7C,aAAa,EAAE,iBAAiB,cAAe;GAC/C,MAAM,EAAE,iBAAiB,oBAAqB;EAC/C;EACD,QAAQ,EACN,WAAW;GACT,SAAS;GACT,QAAQ;GACR,aAAa;EACd,EACF;CACF;AACF,EAAC;AASF,MAAa,OAAO,CAAC,EAAE,SAAS,QAAQ,UAAU,aAAa,OAAQ,GAAG,MAAiB,KAAK;CAC9F,MAAM,kBAAkB,UAAU,WAAW,IAAI,MAAM;AAEvD,wBACE,2BAAC;EACC,mBAAgB;EAChB,QAAQ,WAAW,kBAAqB;EACxC,SAAS;EACG;EACZ,GAAI;EAEH;GACa;AAEnB"}

package/lib/Grid/GridParallaxItem.js

@@ -1,39 +1,22 @@
-"use strict";
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
+const react = require_rolldown_runtime.__toESM(require("react"));
+const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
+const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
+//#region src/Grid/GridParallaxItem.tsx
+const StyledGridParallaxItem = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+	position: "relative",
+	"& > div": {
+		top: "var(--masthead-height, 0px)",
+		position: "sticky"
+	}
+} });
+const GridParallaxItem = ({ children,...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledGridParallaxItem, {
+	...rest,
+	"data-embed-type": "grid-parallax",
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children })
 });
-exports.GridParallaxItem = void 0;
-var _jsx2 = require("@ndla/styled-system/jsx");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * 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.
- *
- */
 
-const StyledGridParallaxItem = (0, _jsx2.styled)("div", {
-  base: {
-    position: "relative",
-    "& > div": {
-      top: "var(--masthead-height, 0px)",
-      position: "sticky"
-    }
-  }
-});
-const GridParallaxItem = _ref => {
-  let {
-    children,
-    ...rest
-  } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledGridParallaxItem, {
-    ...rest,
-    "data-embed-type": "grid-parallax",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      children: children
-    })
-  });
-};
-exports.GridParallaxItem = GridParallaxItem;
+//#endregion
+exports.GridParallaxItem = GridParallaxItem;
+//# sourceMappingURL=GridParallaxItem.js.map

package/lib/Grid/GridParallaxItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridParallaxItem.js","names":[],"sources":["../../src/Grid/GridParallaxItem.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 HTMLAttributes } from \"react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\nconst StyledGridParallaxItem = styled(\"div\", {\n  base: {\n    position: \"relative\",\n    \"& > div\": {\n      top: \"var(--masthead-height, 0px)\",\n      position: \"sticky\",\n    },\n  },\n});\n\nexport const GridParallaxItem = ({ children, ...rest }: HTMLAttributes<HTMLDivElement>) => (\n  <StyledGridParallaxItem {...rest} data-embed-type=\"grid-parallax\">\n    <div>{children}</div>\n  </StyledGridParallaxItem>\n);\n"],"mappings":";;;;;;AAWA,MAAM,yBAAyB,qCAAO,OAAO,EAC3C,MAAM;CACJ,UAAU;CACV,WAAW;EACT,KAAK;EACL,UAAU;CACX;AACF,EACF,EAAC;AAEF,MAAa,mBAAmB,CAAC,EAAE,SAAU,GAAG,MAAsC,qBACpF,2BAAC;CAAuB,GAAI;CAAM,mBAAgB;2BAChD,2BAAC,SAAK,WAAe;EACE"}

package/lib/KeyFigure/KeyFigure.js

@@ -1,70 +1,47 @@
-"use strict";
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
+const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
+const html_react_parser = require_rolldown_runtime.__toESM(require("html-react-parser"));
+const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _htmlReactParser = _interopRequireDefault(require("html-react-parser"));
-var _jsx2 = require("@ndla/styled-system/jsx");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/**
- * Copyright (c) 2023-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-const ContentWrapper = (0, _jsx2.styled)("div", {
-  base: {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: "xsmall",
-    "&:not(:has(> img))": {
-      paddingBlock: "xxlarge"
-    }
-  }
-});
-const StyledImage = (0, _jsx2.styled)("img", {
-  base: {
-    height: "surface.3xsmall",
-    width: "surface.3xsmall",
-    borderRadius: "xsmall"
-  }
-});
-const TitleWrapper = (0, _jsx2.styled)("div", {
-  base: {
-    textStyle: "heading.large",
-    textAlign: "center"
-  }
-});
-const SubTitleWrapper = (0, _jsx2.styled)("div", {
-  base: {
-    textStyle: "title.medium",
-    textAlign: "center"
-  }
-});
-const KeyFigure = _ref => {
-  let {
-    image,
-    title,
-    subtitle
-  } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ContentWrapper, {
-    "data-embed-type": "key-figure",
-    children: [!!image && /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledImage, {
-      src: `${image?.src}?width=150`,
-      width: 150,
-      height: 150,
-      alt: image?.alt
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(TitleWrapper, {
-      children: (0, _htmlReactParser.default)(title)
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(SubTitleWrapper, {
-      children: (0, _htmlReactParser.default)(subtitle)
-    })]
-  });
+//#region src/KeyFigure/KeyFigure.tsx
+const ContentWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+	display: "flex",
+	flexDirection: "column",
+	alignItems: "center",
+	justifyContent: "center",
+	gap: "xsmall",
+	"&:not(:has(> img))": { paddingBlock: "xxlarge" }
+} });
+const StyledImage = (0, __ndla_styled_system_jsx.styled)("img", { base: {
+	height: "surface.3xsmall",
+	width: "surface.3xsmall",
+	borderRadius: "xsmall"
+} });
+const TitleWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+	textStyle: "heading.large",
+	textAlign: "center"
+} });
+const SubTitleWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+	textStyle: "title.medium",
+	textAlign: "center"
+} });
+const KeyFigure = ({ image, title, subtitle }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ContentWrapper, {
+		"data-embed-type": "key-figure",
+		children: [
+			!!image && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledImage, {
+				src: `${image?.src}?width=150`,
+				width: 150,
+				height: 150,
+				alt: image?.alt
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TitleWrapper, { children: (0, html_react_parser.default)(title) }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubTitleWrapper, { children: (0, html_react_parser.default)(subtitle) })
+		]
+	});
 };
-var _default = exports.default = KeyFigure;
+var KeyFigure_default = KeyFigure;
+
+//#endregion
+exports.KeyFigure_default = KeyFigure_default;
+//# sourceMappingURL=KeyFigure.js.map

package/lib/KeyFigure/KeyFigure.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KeyFigure.js","names":[],"sources":["../../src/KeyFigure/KeyFigure.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-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 parse from \"html-react-parser\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\nconst ContentWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    gap: \"xsmall\",\n\n    \"&:not(:has(> img))\": {\n      paddingBlock: \"xxlarge\",\n    },\n  },\n});\n\nconst StyledImage = styled(\"img\", {\n  base: {\n    height: \"surface.3xsmall\",\n    width: \"surface.3xsmall\",\n    borderRadius: \"xsmall\",\n  },\n});\n\nconst TitleWrapper = styled(\"div\", {\n  base: {\n    textStyle: \"heading.large\",\n    textAlign: \"center\",\n  },\n});\n\nconst SubTitleWrapper = styled(\"div\", {\n  base: {\n    textStyle: \"title.medium\",\n    textAlign: \"center\",\n  },\n});\n\nexport interface Props {\n  image?: {\n    src?: string;\n    alt?: string;\n  };\n  title: string;\n  subtitle: string;\n}\n\nconst KeyFigure = ({ image, title, subtitle }: Props) => {\n  return (\n    <ContentWrapper data-embed-type=\"key-figure\">\n      {!!image && <StyledImage src={`${image?.src}?width=150`} width={150} height={150} alt={image?.alt} />}\n      <TitleWrapper>{parse(title)}</TitleWrapper>\n      <SubTitleWrapper>{parse(subtitle)}</SubTitleWrapper>\n    </ContentWrapper>\n  );\n};\n\nexport default KeyFigure;\n"],"mappings":";;;;;;AAWA,MAAM,iBAAiB,qCAAO,OAAO,EACnC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,YAAY;CACZ,gBAAgB;CAChB,KAAK;CAEL,sBAAsB,EACpB,cAAc,UACf;AACF,EACF,EAAC;AAEF,MAAM,cAAc,qCAAO,OAAO,EAChC,MAAM;CACJ,QAAQ;CACR,OAAO;CACP,cAAc;AACf,EACF,EAAC;AAEF,MAAM,eAAe,qCAAO,OAAO,EACjC,MAAM;CACJ,WAAW;CACX,WAAW;AACZ,EACF,EAAC;AAEF,MAAM,kBAAkB,qCAAO,OAAO,EACpC,MAAM;CACJ,WAAW;CACX,WAAW;AACZ,EACF,EAAC;AAWF,MAAM,YAAY,CAAC,EAAE,OAAO,OAAO,UAAiB,KAAK;AACvD,wBACE,4BAAC;EAAe,mBAAgB;;KAC3B,yBAAS,2BAAC;IAAY,MAAM,EAAE,OAAO,IAAI;IAAa,OAAO;IAAK,QAAQ;IAAK,KAAK,OAAO;KAAO;mBACrG,2BAAC,0BAAc,+BAAM,MAAM,GAAgB;mBAC3C,2BAAC,6BAAiB,+BAAM,SAAS,GAAmB;;GACrC;AAEpB;AAED,wBAAe"}