@ndla/ui 56.0.160-alpha.0 → 56.0.163-alpha.0

package/dist/panda.buildinfo.json

@@ -1,5 +1,5 @@
 {
-  "schemaVersion": "1.3.1",
+  "schemaVersion": "1.7.0",
   "styles": {
     "atomic": [
       "background]___[value:background.default",
@@ -294,10 +294,9 @@
       "fontStyle]___[value:italic",
       "gridRowGap]___[value:large",
       "gridColumnGap]___[value:medium",
-      "backgroundColor]___[value:background.subtle",
       "gridTemplateColumns]___[value:repeat(2, minmax(0, 1fr))",
-      "height]___[value:100%]___[cond:& :not(div[data-parallax-cell='true']) > div[data-embed-type='pitch']",
-      "marginTop]___[value:auto]___[cond:& :not(div[data-parallax-cell='true']) > div[data-embed-type='pitch']<___>& > :last-child",
+      "height]___[value:100%]___[cond:& div[data-embed-type='pitch']",
+      "marginTop]___[value:auto]___[cond:& div[data-embed-type='pitch']<___>& > :last-child",
       "gridTemplateColumns]___[value:repeat(1, minmax(0, 1fr))]___[cond:tabletDown",
       "gridTemplateColumns]___[value:repeat(2, minmax(0, 1fr))]___[cond:tabletToDesktop",
       "display]___[value:flex]___[cond:tabletToDesktop<___>& > div:nth-child(3):last-child",
@@ -307,11 +306,8 @@
       "gridColumn]___[value:span 2]___[cond:tabletToDesktop<___>& > div:nth-child(3):last-child",
       "gridTemplateColumns]___[value:repeat(3, minmax(0, 1fr))]___[cond:desktop",
       "gridTemplateColumns]___[value:repeat(4, minmax(0, 1fr))]___[cond:desktop",
-      "backgroundColor]___[value:surface.default",
-      "backgroundColor]___[value:transparent",
       "borderColor]___[value:surface.brand.2",
-      "top]___[value:var(--masthead-height, 0px)]___[cond:& > div",
-      "position]___[value:sticky]___[cond:& > div",
+      "outline]___[value:1px solid",
       "paddingBlock]___[value:xxlarge]___[cond:&:not(:has(> img))",
       "width]___[value:surface.3xsmall",
       "textStyle]___[value:heading.large",

package/dist/styles.css

@@ -316,6 +316,10 @@
     border-color: var(--colors-surface-brand-2);
 }
 
+  .ring_1px_solid {
+    outline: 1px solid;
+}
+
   .bd-c_stroke\.error {
     border-color: var(--colors-stroke-error);
 }
@@ -587,22 +591,10 @@
     grid-column-gap: var(--spacing-medium);
 }
 
-  .bg-c_background\.subtle {
-    background-color: var(--colors-background-subtle);
-}
-
   .grid-tc_repeat\(2\,_minmax\(0\,_1fr\)\) {
     grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
-  .bg-c_surface\.default {
-    background-color: var(--colors-surface-default);
-}
-
-  .bg-c_transparent {
-    background-color: transparent;
-}
-
   .c_text\.subtle {
     color: var(--colors-text-subtle);
 }
@@ -1007,10 +999,6 @@
     z-index: 0;
 }
 
-  .\[\&_\>_div\]\:pos_sticky > div {
-    position: sticky;
-}
-
   .\[\&_\[data-forward\]\]\:trs-prop_width\,_height [data-forward] {
     --transition-prop: width, height;
     transition-property: width, height;
@@ -1078,14 +1066,10 @@
     min-height: var(--sizes-surface-3xsmall);
 }
 
-  .\[\&_\:not\(div\[data-parallax-cell\=\'true\'\]\)_\>_div\[data-embed-type\=\'pitch\'\]\]\:h_100\% :not(div[data-parallax-cell='true']) > div[data-embed-type='pitch'] {
+  .\[\&_div\[data-embed-type\=\'pitch\'\]\]\:h_100\% div[data-embed-type='pitch'] {
     height: 100%;
 }
 
-  .\[\&_\>_div\]\:top_var\(--masthead-height\,_0px\) > div {
-    top: var(--masthead-height, 0px);
-}
-
   .focusWithin\:td_none:focus-within {
     text-decoration: none;
 }
@@ -1151,7 +1135,7 @@
     font-weight: var(--font-weights-bold);
 }
 
-  .\[\&_\:not\(div\[data-parallax-cell\=\'true\'\]\)_\>_div\[data-embed-type\=\'pitch\'\]\]\:\[\&_\>_\:last-child\]\:mt_auto :not(div[data-parallax-cell='true']) > div[data-embed-type='pitch'] > :last-child {
+  .\[\&_div\[data-embed-type\=\'pitch\'\]\]\:\[\&_\>_\:last-child\]\:mt_auto div[data-embed-type='pitch'] > :last-child {
     margin-top: auto;
 }
 

package/es/Grid/Grid.mjs

@@ -11,10 +11,9 @@ const GridContainer = styled("div", {
 		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']": {
+		"& div[data-embed-type='pitch']": {
 			height: "100%",
 			"& > :last-child": { marginTop: "auto" }
 		},
@@ -37,11 +36,6 @@ const GridContainer = styled("div", {
 			"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",
@@ -49,18 +43,32 @@ const GridContainer = styled("div", {
 		} }
 	}
 });
-const Grid = ({ columns, border, children, background = "gray", ...rest }) => {
+const StyledGridItem = styled("div", {
+	base: {},
+	variants: { border: { true: {
+		outline: "1px solid",
+		borderColor: "stroke.default"
+	} } }
+});
+const Grid = ({ columns, border, children, ...rest }) => {
 	const amountOfColumns = children?.length === 3 ? "3" : columns;
 	return /* @__PURE__ */ jsx(GridContainer, {
 		"data-embed-type": "grid",
-		border: border === "none" ? void 0 : border,
+		border,
 		columns: amountOfColumns,
-		background,
+		...rest,
+		children
+	});
+};
+const GridItem = ({ border, children, ...rest }) => {
+	return /* @__PURE__ */ jsx(StyledGridItem, {
+		"data-embed-type": "grid-item",
+		border,
 		...rest,
 		children
 	});
 };
 
 //#endregion
-export { Grid };
+export { Grid, GridItem };
 //# sourceMappingURL=Grid.mjs.map

package/es/Grid/Grid.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.mjs","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,OAAO,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,QACZ;GACF;EACD,YAAY,EACV,qBAAqB,6BACtB;EACD,iBAAiB;GACf,qBAAqB;GACrB,mCAAmC;IACjC,SAAS;IACT,UAAU;IACV,gBAAgB;IAChB,YAAY;IACZ,YAAY;IACb;GACF;EACF;CACD,UAAU;EACR,SAAS;GACP,KAAK,EAAE;GACP,OAAO,EAAE;GACT,KAAK,EAAE,SAAS,EAAE,qBAAqB,6BAA6B,EAAE;GACtE,KAAK,EAAE,SAAS,EAAE,qBAAqB,6BAA6B,EAAE;GACvE;EACD,YAAY;GACV,OAAO,EAAE,iBAAiB,mBAAmB;GAC7C,aAAa,EAAE,iBAAiB,eAAe;GAC/C,MAAM,EAAE,iBAAiB,qBAAqB;GAC/C;EACD,QAAQ,EACN,WAAW;GACT,SAAS;GACT,QAAQ;GACR,aAAa;GACd,EACF;EACF;CACF,CAAC;AASF,MAAa,QAAQ,EAAE,SAAS,QAAQ,UAAU,aAAa,QAAQ,GAAG,WAAsB;CAC9F,MAAM,kBAAkB,UAAU,WAAW,IAAI,MAAM;AAEvD,QACE,oBAAC;EACC,mBAAgB;EAChB,QAAQ,WAAW,SAAS,SAAY;EACxC,SAAS;EACG;EACZ,GAAI;EAEH;GACa"}
+{"version":3,"file":"Grid.mjs","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\";\nimport type { StyledVariantProps } from \"@ndla/styled-system/types\";\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    minWidth: \"surface.xxsmall\",\n    gridTemplateColumns: \"repeat(2, minmax(0, 1fr))\",\n\n    \"& 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    border: {\n      lightBlue: {\n        padding: \"xsmall\",\n        border: \"1px solid\",\n        borderColor: \"surface.brand.2\",\n      },\n    },\n  },\n});\n\nconst StyledGridItem = styled(\"div\", {\n  base: {},\n  variants: {\n    border: {\n      true: {\n        outline: \"1px solid\",\n        borderColor: \"stroke.default\",\n      },\n    },\n  },\n});\n\ntype GridVariantProps = NonNullable<StyledVariantProps<typeof GridContainer>>;\n\nexport interface GridProps extends ComponentProps<\"div\">, GridVariantProps {\n  children?: ReactNode[];\n  columns: NonNullable<GridVariantProps[\"columns\"]>;\n}\n\ntype GridItemVariantProps = NonNullable<StyledVariantProps<typeof StyledGridItem>>;\n\nexport interface GridItemProps extends ComponentProps<\"div\">, GridItemVariantProps {}\n\nexport const Grid = ({ columns, border, children, ...rest }: GridProps) => {\n  const amountOfColumns = children?.length === 3 ? \"3\" : columns;\n\n  return (\n    <GridContainer data-embed-type=\"grid\" border={border} columns={amountOfColumns} {...rest}>\n      {children}\n    </GridContainer>\n  );\n};\n\nexport const GridItem = ({ border, children, ...rest }: GridItemProps) => {\n  return (\n    <StyledGridItem data-embed-type=\"grid-item\" border={border} {...rest}>\n      {children}\n    </StyledGridItem>\n  );\n};\n"],"mappings":";;;;;AAYA,MAAM,gBAAgB,OAAO,OAAO;CAClC,MAAM;EACJ,SAAS;EACT,gBAAgB;EAChB,cAAc;EACd,YAAY;EACZ,eAAe;EACf,OAAO;EACP,UAAU;EACV,qBAAqB;EAErB,kCAAkC;GAChC,QAAQ;GACR,mBAAmB,EACjB,WAAW,QACZ;GACF;EACD,YAAY,EACV,qBAAqB,6BACtB;EACD,iBAAiB;GACf,qBAAqB;GACrB,mCAAmC;IACjC,SAAS;IACT,UAAU;IACV,gBAAgB;IAChB,YAAY;IACZ,YAAY;IACb;GACF;EACF;CACD,UAAU;EACR,SAAS;GACP,KAAK,EAAE;GACP,OAAO,EAAE;GACT,KAAK,EAAE,SAAS,EAAE,qBAAqB,6BAA6B,EAAE;GACtE,KAAK,EAAE,SAAS,EAAE,qBAAqB,6BAA6B,EAAE;GACvE;EACD,QAAQ,EACN,WAAW;GACT,SAAS;GACT,QAAQ;GACR,aAAa;GACd,EACF;EACF;CACF,CAAC;AAEF,MAAM,iBAAiB,OAAO,OAAO;CACnC,MAAM,EAAE;CACR,UAAU,EACR,QAAQ,EACN,MAAM;EACJ,SAAS;EACT,aAAa;EACd,EACF,EACF;CACF,CAAC;AAaF,MAAa,QAAQ,EAAE,SAAS,QAAQ,UAAU,GAAG,WAAsB;CACzE,MAAM,kBAAkB,UAAU,WAAW,IAAI,MAAM;AAEvD,QACE,oBAAC;EAAc,mBAAgB;EAAe;EAAQ,SAAS;EAAiB,GAAI;EACjF;GACa;;AAIpB,MAAa,YAAY,EAAE,QAAQ,UAAU,GAAG,WAA0B;AACxE,QACE,oBAAC;EAAe,mBAAgB;EAAoB;EAAQ,GAAI;EAC7D;GACc"}

package/es/index.mjs

@@ -55,10 +55,9 @@ import { Pitch } from "./Pitch/Pitch.mjs";
 import { KeyFigure } from "./KeyFigure/KeyFigure.mjs";
 import { ContactBlock, contactBlockBackgrounds } from "./ContactBlock/ContactBlock.mjs";
 import { CampaignBlock } from "./CampaignBlock/CampaignBlock.mjs";
-import { Grid } from "./Grid/Grid.mjs";
-import { GridParallaxItem } from "./Grid/GridParallaxItem.mjs";
+import { Grid, GridItem } from "./Grid/Grid.mjs";
 import { LinkBlock } from "./LinkBlock/LinkBlock.mjs";
 import { LinkBlockSection } from "./LinkBlock/LinkBlockSection.mjs";
 import { ZendeskButton } from "./ZendeskButton/ZendeskButton.mjs";
 
-export { Article, ArticleByline, ArticleBylineAccordionItem, ArticleContent, ArticleFootNotes, ArticleFooter, ArticleHGroup, ArticleHeader, ArticleTitle, ArticleWrapper, AudioEmbed, AudioPlayer, BadgesContainer, BlockConcept, Breadcrumb, BrightcoveEmbed, CampaignBlock, CodeBlock, CodeEmbed, Concept, ConceptEmbed, ConceptInlineTriggerButton, ContactBlock, ContentLinkEmbed, ContentTypeBadge, CopyParagraphButton, CopyrightEmbed, EmbedByline, EmbedWrapper, ExternalEmbed, FactBox, File, FileListElement, FileListEmbed, FileListItem, FileListWrapper, FootnoteEmbed, Gloss, GlossExample, Grid, GridParallaxItem, H5pEmbed, HomeBreadcrumb, IframeEmbed, ImageEmbed, InlineConcept, InlineTriggerButton, KeyFigure, LicenseLink, LinkBlock, LinkBlockSection, PdfFile, Pitch, RelatedArticle, RelatedArticleList, RelatedContentEmbed, ResourceBox, TagSelectorClearTrigger, TagSelectorControl, TagSelectorInput, TagSelectorInputBase, TagSelectorItemInput, TagSelectorLabel, TagSelectorRoot, TagSelectorTrigger, UnknownEmbed, UuDisclaimerEmbed, ZendeskButton, codeLanguageOptions, constants, contactBlockBackgrounds, contentTypeMapping, contentTypeToBadgeVariantMap, contentTypes, formatNestedMessages, getCrop, getFocalPoint, getPossiblyRelativeUrl, licenseAttributes, messages_en_default as messagesEN, messages_nb_default as messagesNB, messages_nn_default as messagesNN, messages_se_default as messagesSE, resourceEmbedTypeMapping, subjectCategories, subjectTypes, useAudioSearchTranslations, useComboboxTranslations, useDatePickerTranslations, useImageSearchTranslations, usePaginationTranslations, useTagSelectorTranslations, useTagsInputTranslations, useVideoSearchTranslations, wordClass };
+export { Article, ArticleByline, ArticleBylineAccordionItem, ArticleContent, ArticleFootNotes, ArticleFooter, ArticleHGroup, ArticleHeader, ArticleTitle, ArticleWrapper, AudioEmbed, AudioPlayer, BadgesContainer, BlockConcept, Breadcrumb, BrightcoveEmbed, CampaignBlock, CodeBlock, CodeEmbed, Concept, ConceptEmbed, ConceptInlineTriggerButton, ContactBlock, ContentLinkEmbed, ContentTypeBadge, CopyParagraphButton, CopyrightEmbed, EmbedByline, EmbedWrapper, ExternalEmbed, FactBox, File, FileListElement, FileListEmbed, FileListItem, FileListWrapper, FootnoteEmbed, Gloss, GlossExample, Grid, GridItem, H5pEmbed, HomeBreadcrumb, IframeEmbed, ImageEmbed, InlineConcept, InlineTriggerButton, KeyFigure, LicenseLink, LinkBlock, LinkBlockSection, PdfFile, Pitch, RelatedArticle, RelatedArticleList, RelatedContentEmbed, ResourceBox, TagSelectorClearTrigger, TagSelectorControl, TagSelectorInput, TagSelectorInputBase, TagSelectorItemInput, TagSelectorLabel, TagSelectorRoot, TagSelectorTrigger, UnknownEmbed, UuDisclaimerEmbed, ZendeskButton, codeLanguageOptions, constants, contactBlockBackgrounds, contentTypeMapping, contentTypeToBadgeVariantMap, contentTypes, formatNestedMessages, getCrop, getFocalPoint, getPossiblyRelativeUrl, licenseAttributes, messages_en_default as messagesEN, messages_nb_default as messagesNB, messages_nn_default as messagesNN, messages_se_default as messagesSE, resourceEmbedTypeMapping, subjectCategories, subjectTypes, useAudioSearchTranslations, useComboboxTranslations, useDatePickerTranslations, useImageSearchTranslations, usePaginationTranslations, useTagSelectorTranslations, useTagsInputTranslations, useVideoSearchTranslations, wordClass };

package/lib/Gloss/Gloss.d.ts

@@ -7,9 +7,9 @@
  */
 import type { StyledVariantProps } from "@ndla/styled-system/types";
 import type { ConceptTitleDTO, GlossDataDTO } from "@ndla/types-backend/concept-api";
-declare const StyledAccordionItem: import("@ndla/styled-system/types").StyledComponent<import("react").ComponentClass<import("@ndla/styled-system/types").JsxHTMLProps<import("@ark-ui/react").AccordionItemProps & import("react").RefAttributes<HTMLDivElement> & import("@ndla/styled-system/jsx").UnstyledProps, import("@ndla/styled-system/types").JsxStyleProps>, any>, {
+declare const StyledAccordionItem: import("@ndla/styled-system/types").StyledComponent<import("react").ComponentClass<import("@ndla/styled-system/types").JsxHTMLProps<import("@ark-ui/react").AccordionItemProps & import("react").RefAttributes<HTMLDivElement> & import("@ndla/styled-system/jsx").UnstyledProps & import("@ndla/styled-system/types").AsProps, import("@ndla/styled-system/types").JsxStyleProps>, any>, {
     variant?: "simple" | "bordered" | undefined;
-}> | import("@ndla/styled-system/types").StyledComponent<import("react").FunctionComponent<import("@ndla/styled-system/types").JsxHTMLProps<import("@ark-ui/react").AccordionItemProps & import("react").RefAttributes<HTMLDivElement> & import("@ndla/styled-system/jsx").UnstyledProps, import("@ndla/styled-system/types").JsxStyleProps>>, {
+}> | import("@ndla/styled-system/types").StyledComponent<import("react").FunctionComponent<import("@ndla/styled-system/types").JsxHTMLProps<import("@ark-ui/react").AccordionItemProps & import("react").RefAttributes<HTMLDivElement> & import("@ndla/styled-system/jsx").UnstyledProps & import("@ndla/styled-system/types").AsProps, import("@ndla/styled-system/types").JsxStyleProps>>, {
     variant?: "simple" | "bordered" | undefined;
 }>;
 type GlossVariantProps = StyledVariantProps<typeof StyledAccordionItem>;

package/lib/Grid/Grid.d.ts

@@ -6,10 +6,22 @@
  *
  */
 import { type ComponentProps, type ReactNode } from "react";
-export interface GridProps extends ComponentProps<"div"> {
-    columns: "2" | "3" | "4" | "2x2";
-    border?: "none" | "lightBlue";
-    background?: "transparent" | "white" | "gray";
+import type { StyledVariantProps } from "@ndla/styled-system/types";
+declare const GridContainer: import("@ndla/styled-system/types").StyledComponent<"div", {
+    columns?: "2" | "3" | "4" | "2x2" | undefined;
+    border?: "lightBlue" | undefined;
+}>;
+declare const StyledGridItem: import("@ndla/styled-system/types").StyledComponent<"div", {
+    border?: boolean | undefined;
+}>;
+type GridVariantProps = NonNullable<StyledVariantProps<typeof GridContainer>>;
+export interface GridProps extends ComponentProps<"div">, GridVariantProps {
     children?: ReactNode[];
+    columns: NonNullable<GridVariantProps["columns"]>;
 }
-export declare const Grid: ({ columns, border, children, background, ...rest }: GridProps) => import("react/jsx-runtime").JSX.Element;
+type GridItemVariantProps = NonNullable<StyledVariantProps<typeof StyledGridItem>>;
+export interface GridItemProps extends ComponentProps<"div">, GridItemVariantProps {
+}
+export declare const Grid: ({ columns, border, children, ...rest }: GridProps) => import("react/jsx-runtime").JSX.Element;
+export declare const GridItem: ({ border, children, ...rest }: GridItemProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/Grid/Grid.js

@@ -19,10 +19,9 @@ const GridContainer = (0, __ndla_styled_system_jsx.styled)("div", {
 		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']": {
+		"& div[data-embed-type='pitch']": {
 			height: "100%",
 			"& > :last-child": { marginTop: "auto" }
 		},
@@ -45,11 +44,6 @@ const GridContainer = (0, __ndla_styled_system_jsx.styled)("div", {
 			"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",
@@ -57,13 +51,27 @@ const GridContainer = (0, __ndla_styled_system_jsx.styled)("div", {
 		} }
 	}
 });
-const Grid = ({ columns, border, children, background = "gray", ...rest }) => {
+const StyledGridItem = (0, __ndla_styled_system_jsx.styled)("div", {
+	base: {},
+	variants: { border: { true: {
+		outline: "1px solid",
+		borderColor: "stroke.default"
+	} } }
+});
+const Grid = ({ columns, border, children, ...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,
+		border,
 		columns: amountOfColumns,
-		background,
+		...rest,
+		children
+	});
+};
+const GridItem = ({ border, children, ...rest }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledGridItem, {
+		"data-embed-type": "grid-item",
+		border,
 		...rest,
 		children
 	});
@@ -71,4 +79,5 @@ const Grid = ({ columns, border, children, background = "gray", ...rest }) => {
 
 //#endregion
 exports.Grid = Grid;
+exports.GridItem = GridItem;
 //# sourceMappingURL=Grid.js.map

package/lib/Grid/Grid.js.map

@@ -1 +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,qDAAuB,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,QACZ;GACF;EACD,YAAY,EACV,qBAAqB,6BACtB;EACD,iBAAiB;GACf,qBAAqB;GACrB,mCAAmC;IACjC,SAAS;IACT,UAAU;IACV,gBAAgB;IAChB,YAAY;IACZ,YAAY;IACb;GACF;EACF;CACD,UAAU;EACR,SAAS;GACP,KAAK,EAAE;GACP,OAAO,EAAE;GACT,KAAK,EAAE,SAAS,EAAE,qBAAqB,6BAA6B,EAAE;GACtE,KAAK,EAAE,SAAS,EAAE,qBAAqB,6BAA6B,EAAE;GACvE;EACD,YAAY;GACV,OAAO,EAAE,iBAAiB,mBAAmB;GAC7C,aAAa,EAAE,iBAAiB,eAAe;GAC/C,MAAM,EAAE,iBAAiB,qBAAqB;GAC/C;EACD,QAAQ,EACN,WAAW;GACT,SAAS;GACT,QAAQ;GACR,aAAa;GACd,EACF;EACF;CACF,CAAC;AASF,MAAa,QAAQ,EAAE,SAAS,QAAQ,UAAU,aAAa,QAAQ,GAAG,WAAsB;CAC9F,MAAM,kBAAkB,UAAU,WAAW,IAAI,MAAM;AAEvD,QACE,2CAAC;EACC,mBAAgB;EAChB,QAAQ,WAAW,SAAS,SAAY;EACxC,SAAS;EACG;EACZ,GAAI;EAEH;GACa"}
+{"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\";\nimport type { StyledVariantProps } from \"@ndla/styled-system/types\";\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    minWidth: \"surface.xxsmall\",\n    gridTemplateColumns: \"repeat(2, minmax(0, 1fr))\",\n\n    \"& 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    border: {\n      lightBlue: {\n        padding: \"xsmall\",\n        border: \"1px solid\",\n        borderColor: \"surface.brand.2\",\n      },\n    },\n  },\n});\n\nconst StyledGridItem = styled(\"div\", {\n  base: {},\n  variants: {\n    border: {\n      true: {\n        outline: \"1px solid\",\n        borderColor: \"stroke.default\",\n      },\n    },\n  },\n});\n\ntype GridVariantProps = NonNullable<StyledVariantProps<typeof GridContainer>>;\n\nexport interface GridProps extends ComponentProps<\"div\">, GridVariantProps {\n  children?: ReactNode[];\n  columns: NonNullable<GridVariantProps[\"columns\"]>;\n}\n\ntype GridItemVariantProps = NonNullable<StyledVariantProps<typeof StyledGridItem>>;\n\nexport interface GridItemProps extends ComponentProps<\"div\">, GridItemVariantProps {}\n\nexport const Grid = ({ columns, border, children, ...rest }: GridProps) => {\n  const amountOfColumns = children?.length === 3 ? \"3\" : columns;\n\n  return (\n    <GridContainer data-embed-type=\"grid\" border={border} columns={amountOfColumns} {...rest}>\n      {children}\n    </GridContainer>\n  );\n};\n\nexport const GridItem = ({ border, children, ...rest }: GridItemProps) => {\n  return (\n    <StyledGridItem data-embed-type=\"grid-item\" border={border} {...rest}>\n      {children}\n    </StyledGridItem>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AAYA,MAAM,qDAAuB,OAAO;CAClC,MAAM;EACJ,SAAS;EACT,gBAAgB;EAChB,cAAc;EACd,YAAY;EACZ,eAAe;EACf,OAAO;EACP,UAAU;EACV,qBAAqB;EAErB,kCAAkC;GAChC,QAAQ;GACR,mBAAmB,EACjB,WAAW,QACZ;GACF;EACD,YAAY,EACV,qBAAqB,6BACtB;EACD,iBAAiB;GACf,qBAAqB;GACrB,mCAAmC;IACjC,SAAS;IACT,UAAU;IACV,gBAAgB;IAChB,YAAY;IACZ,YAAY;IACb;GACF;EACF;CACD,UAAU;EACR,SAAS;GACP,KAAK,EAAE;GACP,OAAO,EAAE;GACT,KAAK,EAAE,SAAS,EAAE,qBAAqB,6BAA6B,EAAE;GACtE,KAAK,EAAE,SAAS,EAAE,qBAAqB,6BAA6B,EAAE;GACvE;EACD,QAAQ,EACN,WAAW;GACT,SAAS;GACT,QAAQ;GACR,aAAa;GACd,EACF;EACF;CACF,CAAC;AAEF,MAAM,sDAAwB,OAAO;CACnC,MAAM,EAAE;CACR,UAAU,EACR,QAAQ,EACN,MAAM;EACJ,SAAS;EACT,aAAa;EACd,EACF,EACF;CACF,CAAC;AAaF,MAAa,QAAQ,EAAE,SAAS,QAAQ,UAAU,GAAG,WAAsB;CACzE,MAAM,kBAAkB,UAAU,WAAW,IAAI,MAAM;AAEvD,QACE,2CAAC;EAAc,mBAAgB;EAAe;EAAQ,SAAS;EAAiB,GAAI;EACjF;GACa;;AAIpB,MAAa,YAAY,EAAE,QAAQ,UAAU,GAAG,WAA0B;AACxE,QACE,2CAAC;EAAe,mBAAgB;EAAoB;EAAQ,GAAI;EAC7D;GACc"}

package/lib/index.d.ts

@@ -63,9 +63,8 @@ export { KeyFigure } from "./KeyFigure/KeyFigure";
 export { ContactBlock, contactBlockBackgrounds } from "./ContactBlock/ContactBlock";
 export type { ContactBlockBackground } from "./ContactBlock/ContactBlock";
 export { CampaignBlock } from "./CampaignBlock/CampaignBlock";
-export { Grid } from "./Grid/Grid";
-export { GridParallaxItem } from "./Grid/GridParallaxItem";
-export type { GridProps as GridType } from "./Grid/Grid";
+export { Grid, GridItem } from "./Grid/Grid";
+export type { GridProps as GridType, GridItemProps } from "./Grid/Grid";
 export { Gloss } from "./Gloss/Gloss";
 export { GlossExample } from "./Gloss/GlossExample";
 export { LinkBlock } from "./LinkBlock/LinkBlock";

package/lib/index.js

@@ -56,7 +56,6 @@ const require_KeyFigure = require('./KeyFigure/KeyFigure.js');
 const require_ContactBlock = require('./ContactBlock/ContactBlock.js');
 const require_CampaignBlock = require('./CampaignBlock/CampaignBlock.js');
 const require_Grid = require('./Grid/Grid.js');
-const require_GridParallaxItem = require('./Grid/GridParallaxItem.js');
 const require_LinkBlock = require('./LinkBlock/LinkBlock.js');
 const require_LinkBlockSection = require('./LinkBlock/LinkBlockSection.js');
 const require_ZendeskButton = require('./ZendeskButton/ZendeskButton.js');
@@ -101,7 +100,7 @@ exports.FootnoteEmbed = require_FootnoteEmbed.FootnoteEmbed;
 exports.Gloss = require_Gloss.Gloss;
 exports.GlossExample = require_GlossExample.GlossExample;
 exports.Grid = require_Grid.Grid;
-exports.GridParallaxItem = require_GridParallaxItem.GridParallaxItem;
+exports.GridItem = require_Grid.GridItem;
 exports.H5pEmbed = require_H5pEmbed.H5pEmbed;
 exports.HomeBreadcrumb = require_HomeBreadcrumb.HomeBreadcrumb;
 exports.IframeEmbed = require_IframeEmbed.IframeEmbed;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ndla/ui",
   "type": "module",
-  "version": "56.0.160-alpha.0",
+  "version": "56.0.163-alpha.0",
   "description": "UI component library for NDLA",
   "license": "GPL-3.0",
   "exports": {
@@ -38,11 +38,11 @@
   "dependencies": {
     "@ark-ui/react": "^5.25.0",
     "@ndla/core": "^6.0.6-alpha.0",
-    "@ndla/icons": "^8.0.73-alpha.0",
-    "@ndla/licenses": "^10.0.6-alpha.0",
-    "@ndla/primitives": "^1.0.112-alpha.0",
-    "@ndla/safelink": "^7.0.115-alpha.0",
-    "@ndla/styled-system": "^0.0.44",
+    "@ndla/icons": "^8.0.75-alpha.0",
+    "@ndla/licenses": "^10.0.8-alpha.0",
+    "@ndla/primitives": "^1.0.114-alpha.0",
+    "@ndla/safelink": "^7.0.117-alpha.0",
+    "@ndla/styled-system": "^0.0.46",
     "@ndla/util": "^5.0.17-alpha.0",
     "html-react-parser": "^5.2.8"
   },
@@ -54,13 +54,13 @@
     "react-router": ">= 7.0.0"
   },
   "devDependencies": {
-    "@ndla/preset-panda": "^0.0.66",
-    "@ndla/types-backend": "^1.0.82",
-    "@ndla/types-embed": "^5.0.19-alpha.0",
-    "@pandacss/dev": "^1.3.1"
+    "@ndla/preset-panda": "^0.0.68",
+    "@ndla/types-backend": "^1.0.89",
+    "@ndla/types-embed": "^5.0.20-alpha.0",
+    "@pandacss/dev": "^1.7.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "fbbf55cf6f16fd70d57f4a657acafcef02479efd"
+  "gitHead": "c0f8b4abd2b55f334932d50dfcbff0b00294e571"
 }

package/src/Concept/Concept.stories.tsx

@@ -25,6 +25,7 @@ const visualElementData: ConceptData["visualElement"] = {
   },
   data: {
     id: "61181",
+    inactive: false,
     metaUrl: "https://api.test.ndla.no/image-api/v3/images/61181",
     title: {
       title: "\nHigh angle view of teenage girl with tousled dyed hair dancing at skateboard park\n",

package/src/ContactBlock/ContactBlock.stories.tsx

@@ -16,6 +16,7 @@ export default {
   args: {
     image: {
       id: "65750",
+      inactive: false,
       metaUrl: "https://api.test.ndla.no/image-api/v3/images/65750",
       title: {
         title: "Sigurd Trageton",

package/src/Embed/AudioEmbed.stories.tsx

@@ -124,6 +124,7 @@ const podcastSuccessData: AudioMeta = {
   updated: "2022-03-26T07:49:09Z",
   imageMeta: {
     id: "60913",
+    inactive: false,
     metaUrl: "https://api.test.ndla.no/image-api/v3/images/60913",
     title: {
       title: "Podkastserie: Lytt deg gjennom mediefaget (samme på bm og nn)",

package/src/Embed/ConceptEmbed.stories.tsx

@@ -77,6 +77,7 @@ const visualElementData: ConceptData["visualElement"] = {
   },
   data: {
     id: "52863",
+    inactive: false,
     metaUrl: "https://api.test.ndla.no/image-api/v3/images/52863",
     title: {
       title: "Skin - formasjonsskade",

package/src/Embed/ExternalEmbed.stories.tsx

@@ -113,6 +113,7 @@ const opensInNewMetaData: OembedData = {
   },
   iframeImage: {
     id: "65086",
+    inactive: false,
     metaUrl: "https://api.test.ndla.no/image-api/v3/images/65086",
     title: {
       title: "\nSamtale ",

package/src/Embed/IframeEmbed.stories.tsx

@@ -73,6 +73,7 @@ const opensInNewEmbedData: IframeEmbedData = {
 const opensInnewMetaData: IframeData = {
   iframeImage: {
     id: "65086",
+    inactive: false,
     metaUrl: "https://api.test.ndla.no/image-api/v3/images/65086",
     title: {
       title: "\nSamtale ",

package/src/Embed/ImageEmbed.stories.tsx

@@ -29,6 +29,7 @@ const embedData: ImageEmbedData = {
 
 const metaData: ImageMetaInformationV3DTO = {
   id: "61181",
+  inactive: false,
   metaUrl: "https://api.test.ndla.no/image-api/v3/images/61181",
   title: {
     title: "\nHigh angle view of teenage girl with tousled dyed hair dancing at skateboard park\n",

package/src/Grid/Grid.stories.tsx

@@ -9,7 +9,7 @@
 import type { Meta, StoryFn } from "@storybook/react";
 import { PageContent } from "@ndla/primitives";
 import { ArticleContent, ArticleWrapper } from "@ndla/ui";
-import { Grid } from "./Grid";
+import { Grid, GridItem } from "./Grid";
 import { Plain } from "../KeyFigure/KeyFigure.stories";
 import { Default as PitchStory } from "../Pitch/Pitch.stories";
 
@@ -23,8 +23,6 @@ export default {
   },
   args: {
     columns: "3",
-    border: "none",
-    background: "gray",
   },
   decorators: [
     (Story) => (
@@ -51,9 +49,9 @@ export const GridKeyPerformanceStory: StoryFn<typeof Grid> = ({ ...args }) => {
   const items = new Array(columns).fill(0).map((_, idx) => {
     const args = keyFigureArgs[idx % keyFigureArgs.length];
     return (
-      <div key={idx} data-type="grid-cell" data-parallax-cell="false">
+      <GridItem key={idx} data-type="grid-cell">
         <Plain key={idx} {...args} />
-      </div>
+      </GridItem>
     );
   });
   return <Grid {...args}>{items}</Grid>;
@@ -62,7 +60,7 @@ export const GridKeyPerformanceStory: StoryFn<typeof Grid> = ({ ...args }) => {
 export const GridPitchStory: StoryFn<typeof Grid> = ({ ...args }) => {
   const columns = args.columns === "2x2" ? 4 : parseInt(args.columns);
   const items = new Array(columns).fill(
-    <div data-type="grid-cell" data-parallax-cell="false">
+    <GridItem data-type="grid-cell">
       <PitchStory
         // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
         metaImage={PitchStory.args?.metaImage!}
@@ -72,7 +70,37 @@ export const GridPitchStory: StoryFn<typeof Grid> = ({ ...args }) => {
         url={PitchStory.args?.url!}
         description={PitchStory.args?.description}
       />
-    </div>,
+    </GridItem>,
   );
   return <Grid {...args}>{items}</Grid>;
 };
+
+export const GridItemsWithBorders: StoryFn<typeof Grid> = ({ ...args }) => {
+  const columns = args.columns === "2x2" ? 4 : parseInt(args.columns);
+  const items = new Array(columns).fill(0).map((_, idx) => {
+    const args = keyFigureArgs[idx % keyFigureArgs.length];
+    return (
+      <GridItem key={idx} data-type="grid-cell" border={idx % 2 === 0}>
+        <Plain key={idx} {...args} />
+      </GridItem>
+    );
+  });
+  return <Grid {...args}>{items}</Grid>;
+};
+
+export const GridItemsWithBordersInsideGridWithBorder: StoryFn<typeof Grid> = ({ ...args }) => {
+  const columns = args.columns === "2x2" ? 4 : parseInt(args.columns);
+  const items = new Array(columns).fill(0).map((_, idx) => {
+    const args = keyFigureArgs[idx % keyFigureArgs.length];
+    return (
+      <GridItem key={idx} data-type="grid-cell" border={true}>
+        <Plain key={idx} {...args} />
+      </GridItem>
+    );
+  });
+  return (
+    <Grid {...args} border="lightBlue">
+      {items}
+    </Grid>
+  );
+};

package/src/Grid/Grid.tsx

@@ -8,6 +8,7 @@
 
 import { type ComponentProps, type ReactNode } from "react";
 import { styled } from "@ndla/styled-system/jsx";
+import type { StyledVariantProps } from "@ndla/styled-system/types";
 
 const GridContainer = styled("div", {
   base: {
@@ -17,11 +18,10 @@ const GridContainer = styled("div", {
     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']": {
+    "& div[data-embed-type='pitch']": {
       height: "100%",
       "& > :last-child": {
         marginTop: "auto",
@@ -48,11 +48,6 @@ const GridContainer = styled("div", {
       "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",
@@ -63,25 +58,43 @@ const GridContainer = styled("div", {
   },
 });
 
-export interface GridProps extends ComponentProps<"div"> {
-  columns: "2" | "3" | "4" | "2x2";
-  border?: "none" | "lightBlue";
-  background?: "transparent" | "white" | "gray";
+const StyledGridItem = styled("div", {
+  base: {},
+  variants: {
+    border: {
+      true: {
+        outline: "1px solid",
+        borderColor: "stroke.default",
+      },
+    },
+  },
+});
+
+type GridVariantProps = NonNullable<StyledVariantProps<typeof GridContainer>>;
+
+export interface GridProps extends ComponentProps<"div">, GridVariantProps {
   children?: ReactNode[];
+  columns: NonNullable<GridVariantProps["columns"]>;
 }
 
-export const Grid = ({ columns, border, children, background = "gray", ...rest }: GridProps) => {
+type GridItemVariantProps = NonNullable<StyledVariantProps<typeof StyledGridItem>>;
+
+export interface GridItemProps extends ComponentProps<"div">, GridItemVariantProps {}
+
+export const Grid = ({ columns, border, children, ...rest }: GridProps) => {
   const amountOfColumns = children?.length === 3 ? "3" : columns;
 
   return (
-    <GridContainer
-      data-embed-type="grid"
-      border={border === "none" ? undefined : border}
-      columns={amountOfColumns}
-      background={background}
-      {...rest}
-    >
+    <GridContainer data-embed-type="grid" border={border} columns={amountOfColumns} {...rest}>
       {children}
     </GridContainer>
   );
 };
+
+export const GridItem = ({ border, children, ...rest }: GridItemProps) => {
+  return (
+    <StyledGridItem data-embed-type="grid-item" border={border} {...rest}>
+      {children}
+    </StyledGridItem>
+  );
+};

package/src/Pitch/Pitch.stories.tsx

@@ -43,11 +43,11 @@ export default {
 
 export const Default = ({ ...args }: Props) => {
   return (
-    <Grid columns="2" background="transparent">
-      <div data-type="grid-cell" data-parallax-cell="false">
+    <Grid columns="2">
+      <div data-type="grid-cell">
         <Pitch {...args} />
       </div>
-      <div data-type="grid-cell" data-parallax-cell="false">
+      <div data-type="grid-cell">
         <Pitch {...args} description="Kortere beskrivelse" />
       </div>
     </Grid>

package/src/index.ts

@@ -109,9 +109,8 @@ export { KeyFigure } from "./KeyFigure/KeyFigure";
 export { ContactBlock, contactBlockBackgrounds } from "./ContactBlock/ContactBlock";
 export type { ContactBlockBackground } from "./ContactBlock/ContactBlock";
 export { CampaignBlock } from "./CampaignBlock/CampaignBlock";
-export { Grid } from "./Grid/Grid";
-export { GridParallaxItem } from "./Grid/GridParallaxItem";
-export type { GridProps as GridType } from "./Grid/Grid";
+export { Grid, GridItem } from "./Grid/Grid";
+export type { GridProps as GridType, GridItemProps } from "./Grid/Grid";
 
 export { Gloss } from "./Gloss/Gloss";
 export { GlossExample } from "./Gloss/GlossExample";

package/es/Grid/GridParallaxItem.mjs

@@ -1,21 +0,0 @@
-import "react";
-import { styled } from "@ndla/styled-system/jsx";
-import { jsx } from "react/jsx-runtime";
-
-//#region src/Grid/GridParallaxItem.tsx
-const StyledGridParallaxItem = styled("div", { base: {
-	position: "relative",
-	"& > div": {
-		top: "var(--masthead-height, 0px)",
-		position: "sticky"
-	}
-} });
-const GridParallaxItem = ({ children, ...rest }) => /* @__PURE__ */ jsx(StyledGridParallaxItem, {
-	...rest,
-	"data-embed-type": "grid-parallax",
-	children: /* @__PURE__ */ jsx("div", { children })
-});
-
-//#endregion
-export { GridParallaxItem };
-//# sourceMappingURL=GridParallaxItem.mjs.map

package/es/Grid/GridParallaxItem.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"GridParallaxItem.mjs","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,OAAO,OAAO,EAC3C,MAAM;CACJ,UAAU;CACV,WAAW;EACT,KAAK;EACL,UAAU;EACX;CACF,EACF,CAAC;AAEF,MAAa,oBAAoB,EAAE,UAAU,GAAG,WAC9C,oBAAC;CAAuB,GAAI;CAAM,mBAAgB;WAChD,oBAAC,SAAK,WAAe;EACE"}

package/lib/Grid/GridParallaxItem.d.ts

@@ -1,9 +0,0 @@
-/**
- * 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 { type HTMLAttributes } from "react";
-export declare const GridParallaxItem: ({ children, ...rest }: HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;

package/lib/Grid/GridParallaxItem.js

@@ -1,29 +0,0 @@
-const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
-let react = require("react");
-let __ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
-let react_jsx_runtime = require("react/jsx-runtime");
-
-//#region src/Grid/GridParallaxItem.tsx
-/**
-* 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, __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 })
-});
-
-//#endregion
-exports.GridParallaxItem = GridParallaxItem;
-//# sourceMappingURL=GridParallaxItem.js.map

package/lib/Grid/GridParallaxItem.js.map

@@ -1 +0,0 @@
-{"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,8DAAgC,OAAO,EAC3C,MAAM;CACJ,UAAU;CACV,WAAW;EACT,KAAK;EACL,UAAU;EACX;CACF,EACF,CAAC;AAEF,MAAa,oBAAoB,EAAE,UAAU,GAAG,WAC9C,2CAAC;CAAuB,GAAI;CAAM,mBAAgB;WAChD,2CAAC,SAAK,WAAe;EACE"}

package/src/Grid/GridParallaxItem.tsx

@@ -1,26 +0,0 @@
-/**
- * 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 { type HTMLAttributes } from "react";
-import { styled } from "@ndla/styled-system/jsx";
-
-const StyledGridParallaxItem = styled("div", {
-  base: {
-    position: "relative",
-    "& > div": {
-      top: "var(--masthead-height, 0px)",
-      position: "sticky",
-    },
-  },
-});
-
-export const GridParallaxItem = ({ children, ...rest }: HTMLAttributes<HTMLDivElement>) => (
-  <StyledGridParallaxItem {...rest} data-embed-type="grid-parallax">
-    <div>{children}</div>
-  </StyledGridParallaxItem>
-);