@ndla/primitives 1.0.124-alpha.0 → 1.0.126-alpha.0

package/es/FramedContent.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FramedContent.mjs","names":[],"sources":["../src/FramedContent.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 HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps, RecipeVariantProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\n\nconst framedContentRecipe = cva({\n  base: {\n    padding: \"medium\",\n    border: \"1px solid\",\n    borderRadius: \"small\",\n    clear: \"both\",\n    overflow: \"hidden\",\n  },\n  variants: {\n    colorTheme: {\n      neutral: {\n        backgroundColor: \"surface.default\",\n        borderColor: \"stroke.subtle\",\n      },\n      brand1: {\n        backgroundColor: \"surface.brand.1.subtle\",\n        borderColor: \"surface.brand.1.strong\",\n      },\n      brand2: {\n        backgroundColor: \"surface.brand.2.subtle\",\n        borderColor: \"surface.brand.2.strong\",\n      },\n    },\n  },\n  defaultVariants: {\n    colorTheme: \"neutral\",\n  },\n});\n\nexport type FramedContentVariantProps = NonNullable<RecipeVariantProps<typeof framedContentRecipe>>;\n\nexport interface FramedContentProps extends HTMLArkProps<\"div\">, StyledProps, FramedContentVariantProps {}\n\nconst StyledFramedContent = styled(ark.div, {}, { baseComponent: true });\n\nexport const FramedContent = forwardRef<HTMLDivElement, FramedContentProps>(\n  ({ colorTheme, css: cssProp, ...props }, ref) => (\n    <StyledFramedContent\n      data-embed-type=\"framed-content\"\n      css={css.raw(framedContentRecipe.raw({ colorTheme }), cssProp)}\n      {...props}\n      ref={ref}\n    />\n  ),\n);\n"],"mappings":";;;;;;;;;;;;;;AAcA,MAAM,sBAAsB,IAAI;CAC9B,MAAM;EACJ,SAAS;EACT,QAAQ;EACR,cAAc;EACd,OAAO;EACP,UAAU;EACX;CACD,UAAU,EACR,YAAY;EACV,SAAS;GACP,iBAAiB;GACjB,aAAa;GACd;EACD,QAAQ;GACN,iBAAiB;GACjB,aAAa;GACd;EACD,QAAQ;GACN,iBAAiB;GACjB,aAAa;GACd;EACF,EACF;CACD,iBAAiB,EACf,YAAY,WACb;CACF,CAAC;AAMF,MAAM,sBAAsB,OAAO,IAAI,KAAK,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAExE,MAAa,gBAAgB,YAC1B,EAAE,YAAY,KAAK,SAAS,GAAG,SAAS,QACvC,oBAAC;CACC,mBAAgB;CAChB,KAAK,IAAI,IAAI,oBAAoB,IAAI,EAAE,YAAY,CAAC,EAAE,QAAQ;CAC9D,GAAI;CACC;EACL,CAEL"}
+{"version":3,"file":"FramedContent.mjs","names":[],"sources":["../src/FramedContent.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 HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps, RecipeVariantProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\n\nconst framedContentRecipe = cva({\n  base: {\n    padding: \"medium\",\n    border: \"1px solid\",\n    borderRadius: \"small\",\n    clear: \"both\",\n    overflow: \"hidden\",\n  },\n  variants: {\n    colorTheme: {\n      neutral: {\n        backgroundColor: \"surface.default\",\n        borderColor: \"stroke.subtle\",\n      },\n      brand1: {\n        backgroundColor: \"surface.brand.1.subtle\",\n        borderColor: \"surface.brand.1.strong\",\n      },\n      brand2: {\n        backgroundColor: \"surface.brand.2.subtle\",\n        borderColor: \"surface.brand.2.strong\",\n      },\n    },\n  },\n  defaultVariants: {\n    colorTheme: \"neutral\",\n  },\n});\n\nexport type FramedContentVariantProps = NonNullable<RecipeVariantProps<typeof framedContentRecipe>>;\n\nexport interface FramedContentProps extends HTMLArkProps<\"div\">, StyledProps, FramedContentVariantProps {}\n\nconst StyledFramedContent = styled(ark.div, {}, { baseComponent: true });\n\nexport const FramedContent = forwardRef<HTMLDivElement, FramedContentProps>(\n  ({ colorTheme, css: cssProp, ...props }, ref) => (\n    <StyledFramedContent\n      data-embed-type=\"framed-content\"\n      css={css.raw(framedContentRecipe.raw({ colorTheme }), cssProp)}\n      {...props}\n      ref={ref}\n    />\n  ),\n);\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,sBAAsB,IAAI;CAC9B,MAAM;EACJ,SAAS;EACT,QAAQ;EACR,cAAc;EACd,OAAO;EACP,UAAU;EACX;CACD,UAAU,EACR,YAAY;EACV,SAAS;GACP,iBAAiB;GACjB,aAAa;GACd;EACD,QAAQ;GACN,iBAAiB;GACjB,aAAa;GACd;EACD,QAAQ;GACN,iBAAiB;GACjB,aAAa;GACd;EACF,EACF;CACD,iBAAiB,EACf,YAAY,WACb;CACF,CAAC;AAMF,MAAM,sBAAsB,OAAO,IAAI,KAAK,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAExE,MAAa,gBAAgB,YAC1B,EAAE,YAAY,KAAK,SAAS,GAAG,SAAS,QACvC,oBAAC,qBAAD;CACE,mBAAgB;CAChB,KAAK,IAAI,IAAI,oBAAoB,IAAI,EAAE,YAAY,CAAC,EAAE,QAAQ;CAC9D,GAAI;CACC;CACL,CAAA,CAEL"}

package/es/Hero.mjs

@@ -1,7 +1,6 @@
 import { ark } from "@ark-ui/react";
 import { sva } from "@ndla/styled-system/css";
 import { createStyleContext } from "@ndla/styled-system/jsx";
-
 //#region src/Hero.tsx
 /**
 * Copyright (c) 2024-present, NDLA.
@@ -67,7 +66,7 @@ const { withProvider, withContext } = createStyleContext(sva({
 const Hero = withProvider(ark.div, "root", { baseComponent: true });
 const HeroBackground = withContext(ark.div, "background", { baseComponent: true });
 const HeroContent = withContext(ark.div, "content", { baseComponent: true });
-
 //#endregion
 export { Hero, HeroBackground, HeroContent };
+
 //# sourceMappingURL=Hero.mjs.map

package/es/Hero.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Hero.mjs","names":[],"sources":["../src/Hero.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 HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { type RecipeVariantProps, sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\n\nconst heroRecipe = sva({\n  slots: [\"root\", \"background\", \"content\"],\n  base: {\n    root: {\n      width: \"100%\",\n      position: \"relative\",\n    },\n    background: {\n      height: \"350px\",\n      width: \"100%\",\n      zIndex: \"hide\",\n      overflow: \"hidden\",\n      clipPath: \"polygon(0 0, 100% 0, 100% calc(100% - 5vw), 0 100%)\",\n      _print: {\n        background: \"none\",\n      },\n    },\n    content: {\n      display: \"flex\",\n      flexWrap: \"wrap\",\n      alignItems: \"flex-end\",\n      paddingBlock: \"xsmall\",\n      tablet: {\n        paddingBlockStart: \"xxlarge\",\n      },\n    },\n  },\n  defaultVariants: {\n    variant: \"primary\",\n    absolute: true,\n  },\n  variants: {\n    absolute: {\n      true: {\n        background: {\n          position: \"absolute\",\n        },\n      },\n    },\n    variant: {\n      primary: {\n        background: {\n          background: \"primary\",\n        },\n        content: {\n          \"@media not print\": {\n            color: \"text.onAction\",\n          },\n        },\n      },\n      brand2Bold: {\n        background: {\n          background: \"surface.brand.2.bold\",\n        },\n        content: {\n          \"@media not print\": {\n            color: \"text.onAction\",\n          },\n        },\n      },\n      brand2: {\n        background: {\n          background: \"surface.brand.2\",\n        },\n      },\n      brand2Moderate: {\n        background: {\n          background: \"surface.brand.2.moderate\",\n        },\n      },\n      brand1: {\n        background: {\n          background: \"surface.brand.1\",\n        },\n      },\n      brand1Subtle: {\n        background: {\n          background: \"surface.brand.1.subtle\",\n        },\n      },\n      brand1Moderate: {\n        background: {\n          background: \"surface.brand.1.moderate\",\n        },\n      },\n      brand3Moderate: {\n        background: {\n          background: \"surface.brand.3.moderate\",\n        },\n      },\n      brand4Moderate: {\n        background: {\n          background: \"surface.brand.4.moderate\",\n        },\n      },\n      brand5Moderate: {\n        background: {\n          background: \"surface.brand.5.moderate\",\n        },\n      },\n      neutral: {\n        background: {\n          background: \"surface.infoSubtle\",\n        },\n      },\n    },\n  },\n});\n\nconst { withProvider, withContext } = createStyleContext(heroRecipe);\n\nexport type HeroVariantProps = NonNullable<RecipeVariantProps<typeof heroRecipe>>;\n\nexport type HeroVariant = NonNullable<HeroVariantProps>[\"variant\"];\n\nexport interface HeroProps extends HTMLArkProps<\"div\">, StyledProps, HeroVariantProps {}\n\nexport const Hero = withProvider(ark.div, \"root\", { baseComponent: true });\n\nexport interface HeroBackgroundProps extends HTMLArkProps<\"div\">, StyledProps {}\n\nexport const HeroBackground = withContext(ark.div, \"background\", { baseComponent: true });\n\nexport interface HeroContentProps extends HTMLArkProps<\"div\">, StyledProps {}\n\nexport const HeroContent = withContext(ark.div, \"content\", { baseComponent: true });\n"],"mappings":";;;;;;;;;;;;AA0HA,MAAM,EAAE,cAAc,gBAAgB,mBA7GnB,IAAI;CACrB,OAAO;EAAC;EAAQ;EAAc;EAAU;CACxC,MAAM;EACJ,MAAM;GACJ,OAAO;GACP,UAAU;GACX;EACD,YAAY;GACV,QAAQ;GACR,OAAO;GACP,QAAQ;GACR,UAAU;GACV,UAAU;GACV,QAAQ,EACN,YAAY,QACb;GACF;EACD,SAAS;GACP,SAAS;GACT,UAAU;GACV,YAAY;GACZ,cAAc;GACd,QAAQ,EACN,mBAAmB,WACpB;GACF;EACF;CACD,iBAAiB;EACf,SAAS;EACT,UAAU;EACX;CACD,UAAU;EACR,UAAU,EACR,MAAM,EACJ,YAAY,EACV,UAAU,YACX,EACF,EACF;EACD,SAAS;GACP,SAAS;IACP,YAAY,EACV,YAAY,WACb;IACD,SAAS,EACP,oBAAoB,EAClB,OAAO,iBACR,EACF;IACF;GACD,YAAY;IACV,YAAY,EACV,YAAY,wBACb;IACD,SAAS,EACP,oBAAoB,EAClB,OAAO,iBACR,EACF;IACF;GACD,QAAQ,EACN,YAAY,EACV,YAAY,mBACb,EACF;GACD,gBAAgB,EACd,YAAY,EACV,YAAY,4BACb,EACF;GACD,QAAQ,EACN,YAAY,EACV,YAAY,mBACb,EACF;GACD,cAAc,EACZ,YAAY,EACV,YAAY,0BACb,EACF;GACD,gBAAgB,EACd,YAAY,EACV,YAAY,4BACb,EACF;GACD,gBAAgB,EACd,YAAY,EACV,YAAY,4BACb,EACF;GACD,gBAAgB,EACd,YAAY,EACV,YAAY,4BACb,EACF;GACD,gBAAgB,EACd,YAAY,EACV,YAAY,4BACb,EACF;GACD,SAAS,EACP,YAAY,EACV,YAAY,sBACb,EACF;GACF;EACF;CACF,CAAC,CAEkE;AAQpE,MAAa,OAAO,aAAa,IAAI,KAAK,QAAQ,EAAE,eAAe,MAAM,CAAC;AAI1E,MAAa,iBAAiB,YAAY,IAAI,KAAK,cAAc,EAAE,eAAe,MAAM,CAAC;AAIzF,MAAa,cAAc,YAAY,IAAI,KAAK,WAAW,EAAE,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Hero.mjs","names":[],"sources":["../src/Hero.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 HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { type RecipeVariantProps, sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\n\nconst heroRecipe = sva({\n  slots: [\"root\", \"background\", \"content\"],\n  base: {\n    root: {\n      width: \"100%\",\n      position: \"relative\",\n    },\n    background: {\n      height: \"350px\",\n      width: \"100%\",\n      zIndex: \"hide\",\n      overflow: \"hidden\",\n      clipPath: \"polygon(0 0, 100% 0, 100% calc(100% - 5vw), 0 100%)\",\n      _print: {\n        background: \"none\",\n      },\n    },\n    content: {\n      display: \"flex\",\n      flexWrap: \"wrap\",\n      alignItems: \"flex-end\",\n      paddingBlock: \"xsmall\",\n      tablet: {\n        paddingBlockStart: \"xxlarge\",\n      },\n    },\n  },\n  defaultVariants: {\n    variant: \"primary\",\n    absolute: true,\n  },\n  variants: {\n    absolute: {\n      true: {\n        background: {\n          position: \"absolute\",\n        },\n      },\n    },\n    variant: {\n      primary: {\n        background: {\n          background: \"primary\",\n        },\n        content: {\n          \"@media not print\": {\n            color: \"text.onAction\",\n          },\n        },\n      },\n      brand2Bold: {\n        background: {\n          background: \"surface.brand.2.bold\",\n        },\n        content: {\n          \"@media not print\": {\n            color: \"text.onAction\",\n          },\n        },\n      },\n      brand2: {\n        background: {\n          background: \"surface.brand.2\",\n        },\n      },\n      brand2Moderate: {\n        background: {\n          background: \"surface.brand.2.moderate\",\n        },\n      },\n      brand1: {\n        background: {\n          background: \"surface.brand.1\",\n        },\n      },\n      brand1Subtle: {\n        background: {\n          background: \"surface.brand.1.subtle\",\n        },\n      },\n      brand1Moderate: {\n        background: {\n          background: \"surface.brand.1.moderate\",\n        },\n      },\n      brand3Moderate: {\n        background: {\n          background: \"surface.brand.3.moderate\",\n        },\n      },\n      brand4Moderate: {\n        background: {\n          background: \"surface.brand.4.moderate\",\n        },\n      },\n      brand5Moderate: {\n        background: {\n          background: \"surface.brand.5.moderate\",\n        },\n      },\n      neutral: {\n        background: {\n          background: \"surface.infoSubtle\",\n        },\n      },\n    },\n  },\n});\n\nconst { withProvider, withContext } = createStyleContext(heroRecipe);\n\nexport type HeroVariantProps = NonNullable<RecipeVariantProps<typeof heroRecipe>>;\n\nexport type HeroVariant = NonNullable<HeroVariantProps>[\"variant\"];\n\nexport interface HeroProps extends HTMLArkProps<\"div\">, StyledProps, HeroVariantProps {}\n\nexport const Hero = withProvider(ark.div, \"root\", { baseComponent: true });\n\nexport interface HeroBackgroundProps extends HTMLArkProps<\"div\">, StyledProps {}\n\nexport const HeroBackground = withContext(ark.div, \"background\", { baseComponent: true });\n\nexport interface HeroContentProps extends HTMLArkProps<\"div\">, StyledProps {}\n\nexport const HeroContent = withContext(ark.div, \"content\", { baseComponent: true });\n"],"mappings":";;;;;;;;;;;AA0HA,MAAM,EAAE,cAAc,gBAAgB,mBA7GnB,IAAI;CACrB,OAAO;EAAC;EAAQ;EAAc;EAAU;CACxC,MAAM;EACJ,MAAM;GACJ,OAAO;GACP,UAAU;GACX;EACD,YAAY;GACV,QAAQ;GACR,OAAO;GACP,QAAQ;GACR,UAAU;GACV,UAAU;GACV,QAAQ,EACN,YAAY,QACb;GACF;EACD,SAAS;GACP,SAAS;GACT,UAAU;GACV,YAAY;GACZ,cAAc;GACd,QAAQ,EACN,mBAAmB,WACpB;GACF;EACF;CACD,iBAAiB;EACf,SAAS;EACT,UAAU;EACX;CACD,UAAU;EACR,UAAU,EACR,MAAM,EACJ,YAAY,EACV,UAAU,YACX,EACF,EACF;EACD,SAAS;GACP,SAAS;IACP,YAAY,EACV,YAAY,WACb;IACD,SAAS,EACP,oBAAoB,EAClB,OAAO,iBACR,EACF;IACF;GACD,YAAY;IACV,YAAY,EACV,YAAY,wBACb;IACD,SAAS,EACP,oBAAoB,EAClB,OAAO,iBACR,EACF;IACF;GACD,QAAQ,EACN,YAAY,EACV,YAAY,mBACb,EACF;GACD,gBAAgB,EACd,YAAY,EACV,YAAY,4BACb,EACF;GACD,QAAQ,EACN,YAAY,EACV,YAAY,mBACb,EACF;GACD,cAAc,EACZ,YAAY,EACV,YAAY,0BACb,EACF;GACD,gBAAgB,EACd,YAAY,EACV,YAAY,4BACb,EACF;GACD,gBAAgB,EACd,YAAY,EACV,YAAY,4BACb,EACF;GACD,gBAAgB,EACd,YAAY,EACV,YAAY,4BACb,EACF;GACD,gBAAgB,EACd,YAAY,EACV,YAAY,4BACb,EACF;GACD,SAAS,EACP,YAAY,EACV,YAAY,sBACb,EACF;GACF;EACF;CACF,CAAC,CAEkE;AAQpE,MAAa,OAAO,aAAa,IAAI,KAAK,QAAQ,EAAE,eAAe,MAAM,CAAC;AAI1E,MAAa,iBAAiB,YAAY,IAAI,KAAK,cAAc,EAAE,eAAe,MAAM,CAAC;AAIzF,MAAa,cAAc,YAAY,IAAI,KAAK,WAAW,EAAE,eAAe,MAAM,CAAC"}

package/es/Image.mjs

@@ -2,7 +2,6 @@ import { ark } from "@ark-ui/react";
 import { styled } from "@ndla/styled-system/jsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useState } from "react";
-
 //#region src/Image.tsx
 /**
 * Copyright (c) 2024-present, NDLA.
@@ -167,7 +166,7 @@ const Image = forwardRef(({ srcSet: srcSetProp, crop, focalPoint, src, contentTy
 		})
 	] });
 });
-
 //#endregion
 export { Image, Img, Picture, getSrcSet, makeSrcQueryString };
+
 //# sourceMappingURL=Image.mjs.map

package/es/Image.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Image.mjs","names":[],"sources":["../src/Image.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { ark } from \"@ark-ui/react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps, StyledVariantProps } from \"@ndla/styled-system/types\";\nimport type { ImageVariantDTO, ImageVariantSize } from \"@ndla/types-backend/image-api\";\nimport { type ComponentPropsWithRef, type ReactNode, forwardRef, useEffect, useState } from \"react\";\n\nexport interface ImageCrop {\n  startX: number;\n  startY: number;\n  endX: number;\n  endY: number;\n}\n\nexport interface ImageFocalPoint {\n  x: number;\n  y: number;\n}\n\ninterface SrcQueryStringOptions {\n  width?: number;\n  crop?: ImageCrop;\n  focalPoint?: ImageFocalPoint;\n  imageLanguage?: string;\n}\n\nexport const makeSrcQueryString = ({ width, crop, focalPoint, imageLanguage }: SrcQueryStringOptions) => {\n  const params = [];\n  if (width) {\n    params.push(`width=${width}`);\n  }\n  if (crop) {\n    params.push(`cropStartX=${crop.startX}&cropEndX=${crop.endX}&cropStartY=${crop.startY}&cropEndY=${crop.endY}`);\n  }\n  if (focalPoint) {\n    params.push(`focalX=${focalPoint.x}&focalY=${focalPoint.y}`);\n  }\n  if (imageLanguage) {\n    params.push(`language=${imageLanguage}`);\n  }\n  return params.join(\"&\");\n};\n\ninterface SrcSetOptions {\n  crop?: ImageCrop;\n  focalPoint?: ImageFocalPoint;\n  imageLanguage?: string;\n  src?: string;\n}\n\nexport const VAR_WIDTHS: Record<ImageVariantSize, number> = {\n  icon: 240,\n  xsmall: 480,\n  small: 800,\n  medium: 1080,\n  large: 1440,\n  xlarge: 1920,\n  xxlarge: 2560,\n};\n\nconst IMAGE_WIDTHS = [2720, 2080, 1760, 1440, 1120, 1000, 960, 800, 640, 480, 320, 240, 180];\n\nexport const getVariantSrcSet = (variants: ImageVariantDTO[]) => {\n  return variants\n    .map((variant) => {\n      return `${variant.variantUrl} ${VAR_WIDTHS[variant.size]}w`;\n    })\n    .join(\", \");\n};\n\nexport const getVariantSizes = (variants: ImageVariantDTO[]) => {\n  return variants\n    .map((variant, i) => {\n      if (i === variants.length - 1) {\n        return `${VAR_WIDTHS[variant.size]}px`;\n      }\n      return `(max-width: ${VAR_WIDTHS[variant.size]}px) ${VAR_WIDTHS[variant.size]}px`;\n    })\n    .join(\", \");\n};\n\nexport const getSrcSet = ({ src, crop, focalPoint, imageLanguage }: SrcSetOptions) => {\n  if (!src) return undefined;\n  return IMAGE_WIDTHS.map((width) => {\n    const queryString = makeSrcQueryString({ width, crop, focalPoint, imageLanguage });\n    const query = queryString.length ? `?${queryString}` : \"\";\n    return `${src}${query} ${width}w`;\n  }).join(\", \");\n};\n\nconst FALLBACK_WIDTH = 1024;\n\nconst FALLBACK_SIZES = \"(min-width: 1024px) 1024px, 100vw\";\n\nexport interface PictureProps extends StyledProps, ComponentPropsWithRef<\"picture\"> {\n  src: string;\n  sizes?: string;\n  contentType?: string;\n  srcSet?: string;\n  crop?: ImageCrop;\n  focalPoint?: ImageFocalPoint;\n  imageLanguage?: string;\n}\n\nexport const Picture = forwardRef<HTMLPictureElement, PictureProps>(\n  (\n    {\n      children,\n      srcSet: srcSetProp,\n      crop,\n      focalPoint,\n      src,\n      imageLanguage,\n      contentType,\n      sizes = FALLBACK_SIZES,\n      ...props\n    },\n    ref,\n  ) => {\n    const srcSet = srcSetProp ?? getSrcSet({ src, crop, focalPoint, imageLanguage });\n\n    return (\n      <styled.picture {...props} ref={ref}>\n        {contentType !== \"image/gif\" && <source type={contentType} srcSet={srcSet} sizes={sizes} />}\n        {children}\n      </styled.picture>\n    );\n  },\n);\n\nconst StyledImage = styled(\"img\", {\n  defaultVariants: { variant: \"regular\" },\n  variants: {\n    variant: {\n      regular: {},\n      rounded: {\n        borderRadius: \"xsmall\",\n      },\n    },\n  },\n});\n\nconst StyledFallbackElement = styled(\n  ark.div,\n  {\n    base: {\n      display: \"flex\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n    },\n  },\n  { baseComponent: true },\n);\n\ntype ImageVariantProps = StyledVariantProps<typeof StyledImage>;\n\nexport interface ImgProps extends StyledProps, ComponentPropsWithRef<\"img\">, ImageVariantProps {\n  alt: string;\n  src: string;\n  fallbackWidth?: number;\n  contentType?: string;\n  crop?: ImageCrop;\n  imageLanguage?: string;\n  focalPoint?: ImageFocalPoint;\n}\n\nexport const Img = forwardRef<HTMLImageElement, ImgProps>(\n  ({ fallbackWidth = FALLBACK_WIDTH, crop, focalPoint, imageLanguage, contentType, src, alt, ...props }, ref) => {\n    const queryString = makeSrcQueryString({ width: fallbackWidth, crop, focalPoint, imageLanguage });\n    const srcWithParms = queryString ? `${src}?${queryString}` : src;\n    return <StyledImage alt={alt} src={contentType === \"image/gif\" ? src : srcWithParms} {...props} ref={ref} />;\n  },\n);\n\nexport interface ImageProps extends StyledProps, ComponentPropsWithRef<\"img\">, ImageVariantProps {\n  alt: string;\n  src?: string;\n  sizes?: string;\n  fallbackWidth?: number;\n  contentType?: string;\n  imageLanguage?: string;\n  crop?: ImageCrop;\n  fallbackElement?: ReactNode;\n  focalPoint?: ImageFocalPoint;\n  variants?: ImageVariantDTO[];\n}\n\nexport const Image = forwardRef<HTMLImageElement, ImageProps>(\n  (\n    {\n      srcSet: srcSetProp,\n      crop,\n      focalPoint,\n      src,\n      contentType,\n      imageLanguage,\n      fallbackWidth = FALLBACK_WIDTH,\n      sizes: sizesProp,\n      alt,\n      fallbackElement,\n      variants,\n      ...props\n    },\n    ref,\n  ) => {\n    const [hasError, setHasError] = useState(false);\n\n    useEffect(() => {\n      setHasError(false);\n    }, [src, srcSetProp, sizesProp, variants]);\n\n    if (!src?.length && !variants?.length && fallbackElement) {\n      return (\n        <StyledFallbackElement {...props} ref={ref}>\n          {fallbackElement}\n        </StyledFallbackElement>\n      );\n    }\n\n    const queryString = makeSrcQueryString({ width: fallbackWidth, crop, focalPoint, imageLanguage });\n    const fallbackSrc = src && queryString ? `${src}?${queryString}` : src;\n\n    return (\n      <picture>\n        {!!variants?.length && !crop && !focalPoint && contentType !== \"image/gif\" && (\n          <source\n            type={\"image/webp\"}\n            srcSet={getVariantSrcSet(variants)}\n            sizes={sizesProp ?? getVariantSizes(variants)}\n          />\n        )}\n        {contentType !== \"image/gif\" && (\n          <source\n            type={contentType}\n            srcSet={getSrcSet({ src, crop, focalPoint, imageLanguage })}\n            sizes={sizesProp ?? FALLBACK_SIZES}\n          />\n        )}\n        <StyledImage\n          alt={alt}\n          src={contentType === \"image/gif\" ? src : fallbackSrc}\n          {...props}\n          ref={ref}\n          data-error={hasError ? \"\" : undefined}\n          onError={(e) => {\n            setHasError(true);\n            props.onError?.(e);\n          }}\n          onLoad={(e) => {\n            setHasError(false);\n            props.onLoad?.(e);\n          }}\n        />\n      </picture>\n    );\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"Image.mjs","names":[],"sources":["../src/Image.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { ark } from \"@ark-ui/react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps, StyledVariantProps } from \"@ndla/styled-system/types\";\nimport type { ImageVariantDTO, ImageVariantSize } from \"@ndla/types-backend/image-api\";\nimport { type ComponentPropsWithRef, type ReactNode, forwardRef, useEffect, useState } from \"react\";\n\nexport interface ImageCrop {\n  startX: number;\n  startY: number;\n  endX: number;\n  endY: number;\n}\n\nexport interface ImageFocalPoint {\n  x: number;\n  y: number;\n}\n\ninterface SrcQueryStringOptions {\n  width?: number;\n  crop?: ImageCrop;\n  focalPoint?: ImageFocalPoint;\n  imageLanguage?: string;\n}\n\nexport const makeSrcQueryString = ({ width, crop, focalPoint, imageLanguage }: SrcQueryStringOptions) => {\n  const params = [];\n  if (width) {\n    params.push(`width=${width}`);\n  }\n  if (crop) {\n    params.push(`cropStartX=${crop.startX}&cropEndX=${crop.endX}&cropStartY=${crop.startY}&cropEndY=${crop.endY}`);\n  }\n  if (focalPoint) {\n    params.push(`focalX=${focalPoint.x}&focalY=${focalPoint.y}`);\n  }\n  if (imageLanguage) {\n    params.push(`language=${imageLanguage}`);\n  }\n  return params.join(\"&\");\n};\n\ninterface SrcSetOptions {\n  crop?: ImageCrop;\n  focalPoint?: ImageFocalPoint;\n  imageLanguage?: string;\n  src?: string;\n}\n\nexport const VAR_WIDTHS: Record<ImageVariantSize, number> = {\n  icon: 240,\n  xsmall: 480,\n  small: 800,\n  medium: 1080,\n  large: 1440,\n  xlarge: 1920,\n  xxlarge: 2560,\n};\n\nconst IMAGE_WIDTHS = [2720, 2080, 1760, 1440, 1120, 1000, 960, 800, 640, 480, 320, 240, 180];\n\nexport const getVariantSrcSet = (variants: ImageVariantDTO[]) => {\n  return variants\n    .map((variant) => {\n      return `${variant.variantUrl} ${VAR_WIDTHS[variant.size]}w`;\n    })\n    .join(\", \");\n};\n\nexport const getVariantSizes = (variants: ImageVariantDTO[]) => {\n  return variants\n    .map((variant, i) => {\n      if (i === variants.length - 1) {\n        return `${VAR_WIDTHS[variant.size]}px`;\n      }\n      return `(max-width: ${VAR_WIDTHS[variant.size]}px) ${VAR_WIDTHS[variant.size]}px`;\n    })\n    .join(\", \");\n};\n\nexport const getSrcSet = ({ src, crop, focalPoint, imageLanguage }: SrcSetOptions) => {\n  if (!src) return undefined;\n  return IMAGE_WIDTHS.map((width) => {\n    const queryString = makeSrcQueryString({ width, crop, focalPoint, imageLanguage });\n    const query = queryString.length ? `?${queryString}` : \"\";\n    return `${src}${query} ${width}w`;\n  }).join(\", \");\n};\n\nconst FALLBACK_WIDTH = 1024;\n\nconst FALLBACK_SIZES = \"(min-width: 1024px) 1024px, 100vw\";\n\nexport interface PictureProps extends StyledProps, ComponentPropsWithRef<\"picture\"> {\n  src: string;\n  sizes?: string;\n  contentType?: string;\n  srcSet?: string;\n  crop?: ImageCrop;\n  focalPoint?: ImageFocalPoint;\n  imageLanguage?: string;\n}\n\nexport const Picture = forwardRef<HTMLPictureElement, PictureProps>(\n  (\n    {\n      children,\n      srcSet: srcSetProp,\n      crop,\n      focalPoint,\n      src,\n      imageLanguage,\n      contentType,\n      sizes = FALLBACK_SIZES,\n      ...props\n    },\n    ref,\n  ) => {\n    const srcSet = srcSetProp ?? getSrcSet({ src, crop, focalPoint, imageLanguage });\n\n    return (\n      <styled.picture {...props} ref={ref}>\n        {contentType !== \"image/gif\" && <source type={contentType} srcSet={srcSet} sizes={sizes} />}\n        {children}\n      </styled.picture>\n    );\n  },\n);\n\nconst StyledImage = styled(\"img\", {\n  defaultVariants: { variant: \"regular\" },\n  variants: {\n    variant: {\n      regular: {},\n      rounded: {\n        borderRadius: \"xsmall\",\n      },\n    },\n  },\n});\n\nconst StyledFallbackElement = styled(\n  ark.div,\n  {\n    base: {\n      display: \"flex\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n    },\n  },\n  { baseComponent: true },\n);\n\ntype ImageVariantProps = StyledVariantProps<typeof StyledImage>;\n\nexport interface ImgProps extends StyledProps, ComponentPropsWithRef<\"img\">, ImageVariantProps {\n  alt: string;\n  src: string;\n  fallbackWidth?: number;\n  contentType?: string;\n  crop?: ImageCrop;\n  imageLanguage?: string;\n  focalPoint?: ImageFocalPoint;\n}\n\nexport const Img = forwardRef<HTMLImageElement, ImgProps>(\n  ({ fallbackWidth = FALLBACK_WIDTH, crop, focalPoint, imageLanguage, contentType, src, alt, ...props }, ref) => {\n    const queryString = makeSrcQueryString({ width: fallbackWidth, crop, focalPoint, imageLanguage });\n    const srcWithParms = queryString ? `${src}?${queryString}` : src;\n    return <StyledImage alt={alt} src={contentType === \"image/gif\" ? src : srcWithParms} {...props} ref={ref} />;\n  },\n);\n\nexport interface ImageProps extends StyledProps, ComponentPropsWithRef<\"img\">, ImageVariantProps {\n  alt: string;\n  src?: string;\n  sizes?: string;\n  fallbackWidth?: number;\n  contentType?: string;\n  imageLanguage?: string;\n  crop?: ImageCrop;\n  fallbackElement?: ReactNode;\n  focalPoint?: ImageFocalPoint;\n  variants?: ImageVariantDTO[];\n}\n\nexport const Image = forwardRef<HTMLImageElement, ImageProps>(\n  (\n    {\n      srcSet: srcSetProp,\n      crop,\n      focalPoint,\n      src,\n      contentType,\n      imageLanguage,\n      fallbackWidth = FALLBACK_WIDTH,\n      sizes: sizesProp,\n      alt,\n      fallbackElement,\n      variants,\n      ...props\n    },\n    ref,\n  ) => {\n    const [hasError, setHasError] = useState(false);\n\n    useEffect(() => {\n      setHasError(false);\n    }, [src, srcSetProp, sizesProp, variants]);\n\n    if (!src?.length && !variants?.length && fallbackElement) {\n      return (\n        <StyledFallbackElement {...props} ref={ref}>\n          {fallbackElement}\n        </StyledFallbackElement>\n      );\n    }\n\n    const queryString = makeSrcQueryString({ width: fallbackWidth, crop, focalPoint, imageLanguage });\n    const fallbackSrc = src && queryString ? `${src}?${queryString}` : src;\n\n    return (\n      <picture>\n        {!!variants?.length && !crop && !focalPoint && contentType !== \"image/gif\" && (\n          <source\n            type={\"image/webp\"}\n            srcSet={getVariantSrcSet(variants)}\n            sizes={sizesProp ?? getVariantSizes(variants)}\n          />\n        )}\n        {contentType !== \"image/gif\" && (\n          <source\n            type={contentType}\n            srcSet={getSrcSet({ src, crop, focalPoint, imageLanguage })}\n            sizes={sizesProp ?? FALLBACK_SIZES}\n          />\n        )}\n        <StyledImage\n          alt={alt}\n          src={contentType === \"image/gif\" ? src : fallbackSrc}\n          {...props}\n          ref={ref}\n          data-error={hasError ? \"\" : undefined}\n          onError={(e) => {\n            setHasError(true);\n            props.onError?.(e);\n          }}\n          onLoad={(e) => {\n            setHasError(false);\n            props.onLoad?.(e);\n          }}\n        />\n      </picture>\n    );\n  },\n);\n"],"mappings":"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"}

package/es/Input.mjs

@@ -4,7 +4,6 @@ import { styled } from "@ndla/styled-system/jsx";
 import { jsx } from "react/jsx-runtime";
 import { createContext, forwardRef, useCallback, useContext, useEffect, useRef } from "react";
 import { composeRefs } from "@ndla/util";
-
 //#region src/Input.tsx
 /**
 * Copyright (c) 2024-present, NDLA.
@@ -135,7 +134,7 @@ const FieldTextArea = forwardRef((props, ref) => /* @__PURE__ */ jsx(Field.Texta
 	ref,
 	children: /* @__PURE__ */ jsx(TextArea, {})
 }));
-
 //#endregion
 export { FieldInput, FieldTextArea, Input, InputContainer, TextArea };
+
 //# sourceMappingURL=Input.mjs.map

package/es/Input.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Input.mjs","names":[],"sources":["../src/Input.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 { Field, type HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { RecipeVariantProps, StyledProps } from \"@ndla/styled-system/types\";\nimport { composeRefs } from \"@ndla/util\";\nimport { createContext, forwardRef, useCallback, useContext, useEffect, useRef } from \"react\";\n\ninterface InputContextType {}\n\nconst InputContext = createContext<InputContextType | undefined>(undefined);\n\nconst inputCss = css.raw({\n  boxShadowColor: \"stroke.subtle\",\n  boxShadow: \"inset 0 0 0 1px var(--shadow-color)\",\n  background: \"background.default\",\n  borderRadius: \"xsmall\",\n  _ariaInvalid: {\n    boxShadowColor: \"stroke.error\",\n    _hover: {\n      boxShadowColor: \"stroke.error\",\n    },\n    _focusWithin: {\n      boxShadowColor: \"stroke.error\",\n      _hover: {\n        boxShadowColor: \"stroke.error\",\n      },\n    },\n  },\n  _hover: {\n    boxShadowColor: \"stroke.hover\",\n  },\n  _focusWithin: {\n    boxShadow: \"inset 0 0 0 2px var(--shadow-color)\",\n    boxShadowColor: \"stroke.default\",\n    _hover: {\n      boxShadowColor: \"stroke.default\",\n    },\n  },\n  \"&:disabled, &:has(:disabled)\": {\n    boxShadowColor: \"stroke.subtle\",\n    _hover: {\n      boxShadowColor: \"stroke.subtle\",\n    },\n  },\n});\n\nconst StyledInputContainer = styled(\n  ark.div,\n  {\n    base: {\n      width: \"100%\",\n      display: \"flex\",\n      alignItems: \"center\",\n      \"& svg\": {\n        width: \"medium\",\n        height: \"medium\",\n      },\n      \"&:not(:has(input:first-child,textarea:first-child))\": {\n        paddingInlineStart: \"xsmall\",\n      },\n      \"&:not(:has(input:last-child,textarea:last-child))\": {\n        paddingInlineEnd: \"xsmall\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\ninterface InputContainerProps extends HTMLArkProps<\"div\">, StyledProps {}\n\nexport const InputContainer = forwardRef<HTMLDivElement, InputContainerProps>(\n  ({ children, css: cssProp, ...rest }, ref) => (\n    <InputContext.Provider value={{}}>\n      <StyledInputContainer css={css.raw(inputCss, cssProp)} {...rest} ref={ref}>\n        {children}\n      </StyledInputContainer>\n    </InputContext.Provider>\n  ),\n);\n\nconst baseInputCss = css.raw({\n  width: \"100%\",\n  color: \"text.default\",\n  outline: \"none\",\n  background: \"none\",\n  border: \"0\",\n  _disabled: {\n    cursor: \"not-allowed\",\n  },\n  // Chrome messes with input styling when autofilling. Having a really long transitions cancels this out.\n  _autofill: {\n    transition: \"background-color 600000s 0s, color 600000s 0s\",\n  },\n  _focus: {\n    appearance: \"none\",\n  },\n  _placeholder: {\n    color: \"text.subtle\",\n  },\n});\n\nconst baseTextAreaCss = css.raw({\n  padding: \"xsmall\",\n  minHeight: \"xxlarge\",\n  height: \"xxlarge\",\n  resize: \"none\",\n  overflowY: \"hidden\",\n});\n\nconst StyledInput = styled(ark.input, {}, { baseComponent: true });\n\nconst inputRecipe = cva({\n  defaultVariants: {\n    componentSize: \"medium\",\n  },\n  variants: {\n    componentSize: {\n      small: {\n        paddingBlock: \"4xsmall\",\n        paddingInline: \"xsmall\",\n      },\n      medium: {\n        minHeight: \"xxlarge\",\n        padding: \"xsmall\",\n      },\n    },\n  },\n});\n\ntype InputVariantProps = NonNullable<RecipeVariantProps<typeof inputRecipe>>;\n\nexport interface InputProps extends HTMLArkProps<\"input\">, StyledProps, InputVariantProps {}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(({ css: cssProp, componentSize, ...props }, ref) => {\n  const context = useContext(InputContext);\n  return (\n    <StyledInput\n      css={css.raw(inputRecipe.raw({ componentSize }), baseInputCss, context ? undefined : inputCss, cssProp)}\n      ref={ref}\n      {...props}\n    />\n  );\n});\n\nexport const FieldInput = forwardRef<HTMLInputElement, InputProps>((props, ref) => (\n  <Field.Input asChild {...props} ref={ref}>\n    <Input />\n  </Field.Input>\n));\n\ninterface TextAreaProps extends HTMLArkProps<\"textarea\">, StyledProps {\n  autoResize?: boolean;\n}\n\nconst StyledTextArea = styled(ark.textarea, {}, { baseComponent: true });\n\nexport const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  ({ css: cssProp, autoResize = true, ...props }, ref) => {\n    const context = useContext(InputContext);\n    const localRef = useRef<HTMLTextAreaElement>(null);\n\n    // Automatically resize a textarea based on its content\n    const resize = useCallback(() => {\n      if (!localRef.current) return;\n      localRef.current.style.height = \"0\";\n      // TODO: Figure out if we need to add the 3 extra pixels, maybe related to scroll?\n      localRef.current.style.height = `${localRef.current.scrollHeight + 3}px`;\n    }, []);\n\n    useEffect(() => {\n      if (!autoResize) return;\n      window.addEventListener(\"input\", resize);\n      window.addEventListener(\"resize\", resize);\n      resize();\n      return () => {\n        window.removeEventListener(\"input\", resize);\n        window.removeEventListener(\"resize\", resize);\n      };\n    }, [resize, autoResize]);\n\n    return (\n      <StyledTextArea\n        css={css.raw(baseInputCss, context ? undefined : inputCss, baseTextAreaCss, cssProp)}\n        ref={composeRefs(ref, localRef)}\n        {...props}\n      />\n    );\n  },\n);\n\nexport const FieldTextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>((props, ref) => (\n  <Field.Textarea asChild {...props} ref={ref}>\n    <TextArea />\n  </Field.Textarea>\n));\n"],"mappings":"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"}
+{"version":3,"file":"Input.mjs","names":[],"sources":["../src/Input.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 { Field, type HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { RecipeVariantProps, StyledProps } from \"@ndla/styled-system/types\";\nimport { composeRefs } from \"@ndla/util\";\nimport { createContext, forwardRef, useCallback, useContext, useEffect, useRef } from \"react\";\n\ninterface InputContextType {}\n\nconst InputContext = createContext<InputContextType | undefined>(undefined);\n\nconst inputCss = css.raw({\n  boxShadowColor: \"stroke.subtle\",\n  boxShadow: \"inset 0 0 0 1px var(--shadow-color)\",\n  background: \"background.default\",\n  borderRadius: \"xsmall\",\n  _ariaInvalid: {\n    boxShadowColor: \"stroke.error\",\n    _hover: {\n      boxShadowColor: \"stroke.error\",\n    },\n    _focusWithin: {\n      boxShadowColor: \"stroke.error\",\n      _hover: {\n        boxShadowColor: \"stroke.error\",\n      },\n    },\n  },\n  _hover: {\n    boxShadowColor: \"stroke.hover\",\n  },\n  _focusWithin: {\n    boxShadow: \"inset 0 0 0 2px var(--shadow-color)\",\n    boxShadowColor: \"stroke.default\",\n    _hover: {\n      boxShadowColor: \"stroke.default\",\n    },\n  },\n  \"&:disabled, &:has(:disabled)\": {\n    boxShadowColor: \"stroke.subtle\",\n    _hover: {\n      boxShadowColor: \"stroke.subtle\",\n    },\n  },\n});\n\nconst StyledInputContainer = styled(\n  ark.div,\n  {\n    base: {\n      width: \"100%\",\n      display: \"flex\",\n      alignItems: \"center\",\n      \"& svg\": {\n        width: \"medium\",\n        height: \"medium\",\n      },\n      \"&:not(:has(input:first-child,textarea:first-child))\": {\n        paddingInlineStart: \"xsmall\",\n      },\n      \"&:not(:has(input:last-child,textarea:last-child))\": {\n        paddingInlineEnd: \"xsmall\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\ninterface InputContainerProps extends HTMLArkProps<\"div\">, StyledProps {}\n\nexport const InputContainer = forwardRef<HTMLDivElement, InputContainerProps>(\n  ({ children, css: cssProp, ...rest }, ref) => (\n    <InputContext.Provider value={{}}>\n      <StyledInputContainer css={css.raw(inputCss, cssProp)} {...rest} ref={ref}>\n        {children}\n      </StyledInputContainer>\n    </InputContext.Provider>\n  ),\n);\n\nconst baseInputCss = css.raw({\n  width: \"100%\",\n  color: \"text.default\",\n  outline: \"none\",\n  background: \"none\",\n  border: \"0\",\n  _disabled: {\n    cursor: \"not-allowed\",\n  },\n  // Chrome messes with input styling when autofilling. Having a really long transitions cancels this out.\n  _autofill: {\n    transition: \"background-color 600000s 0s, color 600000s 0s\",\n  },\n  _focus: {\n    appearance: \"none\",\n  },\n  _placeholder: {\n    color: \"text.subtle\",\n  },\n});\n\nconst baseTextAreaCss = css.raw({\n  padding: \"xsmall\",\n  minHeight: \"xxlarge\",\n  height: \"xxlarge\",\n  resize: \"none\",\n  overflowY: \"hidden\",\n});\n\nconst StyledInput = styled(ark.input, {}, { baseComponent: true });\n\nconst inputRecipe = cva({\n  defaultVariants: {\n    componentSize: \"medium\",\n  },\n  variants: {\n    componentSize: {\n      small: {\n        paddingBlock: \"4xsmall\",\n        paddingInline: \"xsmall\",\n      },\n      medium: {\n        minHeight: \"xxlarge\",\n        padding: \"xsmall\",\n      },\n    },\n  },\n});\n\ntype InputVariantProps = NonNullable<RecipeVariantProps<typeof inputRecipe>>;\n\nexport interface InputProps extends HTMLArkProps<\"input\">, StyledProps, InputVariantProps {}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(({ css: cssProp, componentSize, ...props }, ref) => {\n  const context = useContext(InputContext);\n  return (\n    <StyledInput\n      css={css.raw(inputRecipe.raw({ componentSize }), baseInputCss, context ? undefined : inputCss, cssProp)}\n      ref={ref}\n      {...props}\n    />\n  );\n});\n\nexport const FieldInput = forwardRef<HTMLInputElement, InputProps>((props, ref) => (\n  <Field.Input asChild {...props} ref={ref}>\n    <Input />\n  </Field.Input>\n));\n\ninterface TextAreaProps extends HTMLArkProps<\"textarea\">, StyledProps {\n  autoResize?: boolean;\n}\n\nconst StyledTextArea = styled(ark.textarea, {}, { baseComponent: true });\n\nexport const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  ({ css: cssProp, autoResize = true, ...props }, ref) => {\n    const context = useContext(InputContext);\n    const localRef = useRef<HTMLTextAreaElement>(null);\n\n    // Automatically resize a textarea based on its content\n    const resize = useCallback(() => {\n      if (!localRef.current) return;\n      localRef.current.style.height = \"0\";\n      // TODO: Figure out if we need to add the 3 extra pixels, maybe related to scroll?\n      localRef.current.style.height = `${localRef.current.scrollHeight + 3}px`;\n    }, []);\n\n    useEffect(() => {\n      if (!autoResize) return;\n      window.addEventListener(\"input\", resize);\n      window.addEventListener(\"resize\", resize);\n      resize();\n      return () => {\n        window.removeEventListener(\"input\", resize);\n        window.removeEventListener(\"resize\", resize);\n      };\n    }, [resize, autoResize]);\n\n    return (\n      <StyledTextArea\n        css={css.raw(baseInputCss, context ? undefined : inputCss, baseTextAreaCss, cssProp)}\n        ref={composeRefs(ref, localRef)}\n        {...props}\n      />\n    );\n  },\n);\n\nexport const FieldTextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>((props, ref) => (\n  <Field.Textarea asChild {...props} ref={ref}>\n    <TextArea />\n  </Field.Textarea>\n));\n"],"mappings":"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"}

package/es/Label.mjs

@@ -3,7 +3,6 @@ import { css } from "@ndla/styled-system/css";
 import { styled } from "@ndla/styled-system/jsx";
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-
 //#region src/Label.tsx
 /**
 * Copyright (c) 2024-present, NDLA.
@@ -53,7 +52,7 @@ const FieldLabel = forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ j
 	ref,
 	children: /* @__PURE__ */ jsx(Label, { children })
 }));
-
 //#endregion
 export { FieldLabel, FieldsetLegend, Label, Legend };
+
 //# sourceMappingURL=Label.mjs.map

package/es/Label.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Label.mjs","names":[],"sources":["../src/Label.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 { Field, Fieldset, type HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { css } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\nimport { type TextProps } from \"./Text\";\n\nconst StyledLegend = styled(\n  ark.legend,\n  {\n    base: {\n      float: \"left\",\n      width: \"inherit\",\n      _disabled: {\n        color: \"text.subtle\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\nexport interface LegendProps extends Omit<HTMLArkProps<\"legend\">, \"color\">, StyledProps, TextProps {}\n\nexport const Legend = forwardRef<HTMLLegendElement, LegendProps>(\n  ({ textStyle = \"label.medium\", fontWeight = \"bold\", css: cssProp, srOnly, color, ...rest }, ref) => (\n    <StyledLegend css={css.raw({ textStyle, fontWeight, srOnly, color }, cssProp)} {...rest} ref={ref} />\n  ),\n);\n\nexport interface FieldsetLegendProps extends Omit<Fieldset.LegendProps, \"color\">, TextProps, StyledProps {}\n\nexport const FieldsetLegend = forwardRef<HTMLLegendElement, LegendProps>(({ children, ...props }, ref) => (\n  <Fieldset.Legend asChild {...props} ref={ref}>\n    <Legend>{children}</Legend>\n  </Fieldset.Legend>\n));\n\nconst StyledLabel = styled(\n  ark.label,\n  {\n    base: {\n      display: \"inline-block\",\n      _disabled: {\n        color: \"text.subtle\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\nexport interface LabelProps extends Omit<HTMLArkProps<\"label\">, \"color\">, TextProps, StyledProps {}\n\nexport const Label = forwardRef<HTMLLabelElement, LabelProps>(\n  ({ textStyle = \"label.medium\", fontWeight = \"bold\", css: cssProp, srOnly, color, ...rest }, ref) => (\n    <StyledLabel css={css.raw({ textStyle, fontWeight, srOnly, color }, cssProp)} {...rest} ref={ref} />\n  ),\n);\n\nexport const FieldLabel = forwardRef<HTMLLabelElement, LabelProps>(({ children, ...props }, ref) => (\n  <Field.Label asChild {...props} ref={ref}>\n    <Label>{children}</Label>\n  </Field.Label>\n));\n"],"mappings":";;;;;;;;;;;;;;AAeA,MAAM,eAAe,OACnB,IAAI,QACJ,EACE,MAAM;CACJ,OAAO;CACP,OAAO;CACP,WAAW,EACT,OAAO,eACR;CACF,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAID,MAAa,SAAS,YACnB,EAAE,YAAY,gBAAgB,aAAa,QAAQ,KAAK,SAAS,QAAQ,OAAO,GAAG,QAAQ,QAC1F,oBAAC;CAAa,KAAK,IAAI,IAAI;EAAE;EAAW;EAAY;EAAQ;EAAO,EAAE,QAAQ;CAAE,GAAI;CAAW;EAAO,CAExG;AAID,MAAa,iBAAiB,YAA4C,EAAE,UAAU,GAAG,SAAS,QAChG,oBAAC,SAAS;CAAO;CAAQ,GAAI;CAAY;WACvC,oBAAC,UAAQ,WAAkB;EACX,CAClB;AAEF,MAAM,cAAc,OAClB,IAAI,OACJ,EACE,MAAM;CACJ,SAAS;CACT,WAAW,EACT,OAAO,eACR;CACF,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAID,MAAa,QAAQ,YAClB,EAAE,YAAY,gBAAgB,aAAa,QAAQ,KAAK,SAAS,QAAQ,OAAO,GAAG,QAAQ,QAC1F,oBAAC;CAAY,KAAK,IAAI,IAAI;EAAE;EAAW;EAAY;EAAQ;EAAO,EAAE,QAAQ;CAAE,GAAI;CAAW;EAAO,CAEvG;AAED,MAAa,aAAa,YAA0C,EAAE,UAAU,GAAG,SAAS,QAC1F,oBAAC,MAAM;CAAM;CAAQ,GAAI;CAAY;WACnC,oBAAC,SAAO,WAAiB;EACb,CACd"}
+{"version":3,"file":"Label.mjs","names":[],"sources":["../src/Label.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 { Field, Fieldset, type HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { css } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\nimport { type TextProps } from \"./Text\";\n\nconst StyledLegend = styled(\n  ark.legend,\n  {\n    base: {\n      float: \"left\",\n      width: \"inherit\",\n      _disabled: {\n        color: \"text.subtle\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\nexport interface LegendProps extends Omit<HTMLArkProps<\"legend\">, \"color\">, StyledProps, TextProps {}\n\nexport const Legend = forwardRef<HTMLLegendElement, LegendProps>(\n  ({ textStyle = \"label.medium\", fontWeight = \"bold\", css: cssProp, srOnly, color, ...rest }, ref) => (\n    <StyledLegend css={css.raw({ textStyle, fontWeight, srOnly, color }, cssProp)} {...rest} ref={ref} />\n  ),\n);\n\nexport interface FieldsetLegendProps extends Omit<Fieldset.LegendProps, \"color\">, TextProps, StyledProps {}\n\nexport const FieldsetLegend = forwardRef<HTMLLegendElement, LegendProps>(({ children, ...props }, ref) => (\n  <Fieldset.Legend asChild {...props} ref={ref}>\n    <Legend>{children}</Legend>\n  </Fieldset.Legend>\n));\n\nconst StyledLabel = styled(\n  ark.label,\n  {\n    base: {\n      display: \"inline-block\",\n      _disabled: {\n        color: \"text.subtle\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\nexport interface LabelProps extends Omit<HTMLArkProps<\"label\">, \"color\">, TextProps, StyledProps {}\n\nexport const Label = forwardRef<HTMLLabelElement, LabelProps>(\n  ({ textStyle = \"label.medium\", fontWeight = \"bold\", css: cssProp, srOnly, color, ...rest }, ref) => (\n    <StyledLabel css={css.raw({ textStyle, fontWeight, srOnly, color }, cssProp)} {...rest} ref={ref} />\n  ),\n);\n\nexport const FieldLabel = forwardRef<HTMLLabelElement, LabelProps>(({ children, ...props }, ref) => (\n  <Field.Label asChild {...props} ref={ref}>\n    <Label>{children}</Label>\n  </Field.Label>\n));\n"],"mappings":";;;;;;;;;;;;;AAeA,MAAM,eAAe,OACnB,IAAI,QACJ,EACE,MAAM;CACJ,OAAO;CACP,OAAO;CACP,WAAW,EACT,OAAO,eACR;CACF,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAID,MAAa,SAAS,YACnB,EAAE,YAAY,gBAAgB,aAAa,QAAQ,KAAK,SAAS,QAAQ,OAAO,GAAG,QAAQ,QAC1F,oBAAC,cAAD;CAAc,KAAK,IAAI,IAAI;EAAE;EAAW;EAAY;EAAQ;EAAO,EAAE,QAAQ;CAAE,GAAI;CAAW;CAAO,CAAA,CAExG;AAID,MAAa,iBAAiB,YAA4C,EAAE,UAAU,GAAG,SAAS,QAChG,oBAAC,SAAS,QAAV;CAAiB,SAAA;CAAQ,GAAI;CAAY;WACvC,oBAAC,QAAD,EAAS,UAAkB,CAAA;CACX,CAAA,CAClB;AAEF,MAAM,cAAc,OAClB,IAAI,OACJ,EACE,MAAM;CACJ,SAAS;CACT,WAAW,EACT,OAAO,eACR;CACF,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAID,MAAa,QAAQ,YAClB,EAAE,YAAY,gBAAgB,aAAa,QAAQ,KAAK,SAAS,QAAQ,OAAO,GAAG,QAAQ,QAC1F,oBAAC,aAAD;CAAa,KAAK,IAAI,IAAI;EAAE;EAAW;EAAY;EAAQ;EAAO,EAAE,QAAQ;CAAE,GAAI;CAAW;CAAO,CAAA,CAEvG;AAED,MAAa,aAAa,YAA0C,EAAE,UAAU,GAAG,SAAS,QAC1F,oBAAC,MAAM,OAAP;CAAa,SAAA;CAAQ,GAAI;CAAY;WACnC,oBAAC,OAAD,EAAQ,UAAiB,CAAA;CACb,CAAA,CACd"}

package/es/Layout/PageContainer.mjs

@@ -3,7 +3,6 @@ import "@ark-ui/react";
 import { css, cva } from "@ndla/styled-system/css";
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-
 //#region src/Layout/PageContainer.tsx
 const pageContainerRecipe = cva({
 	defaultVariants: { padding: "medium" },
@@ -28,7 +27,7 @@ const PageContainer = forwardRef(({ padding, css: cssProp, ...props }, ref) => /
 	...props,
 	ref
 }));
-
 //#endregion
 export { PageContainer };
+
 //# sourceMappingURL=PageContainer.mjs.map

package/es/Layout/PageContainer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PageContainer.mjs","names":[],"sources":["../../src/Layout/PageContainer.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 HTMLArkProps } from \"@ark-ui/react\";\nimport { css, cva } from \"@ndla/styled-system/css\";\nimport type { StyledProps, RecipeVariantProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\nimport { PageContent, type PageContentVariantProps } from \"./PageContent\";\n\nconst pageContainerRecipe = cva({\n  defaultVariants: {\n    padding: \"medium\",\n  },\n  variants: {\n    padding: {\n      none: {},\n      small: {\n        paddingBlockStart: \"medium\",\n        paddingBlockEnd: \"5xlarge\",\n      },\n      medium: {\n        paddingBlockStart: \"xxlarge\",\n        paddingBlockEnd: \"5xlarge\",\n      },\n      large: {\n        paddingBlockStart: \"4xlarge\",\n        paddingBlockEnd: \"5xlarge\",\n      },\n    },\n  },\n});\n\nexport type PageContainerVariantProps = NonNullable<RecipeVariantProps<typeof pageContainerRecipe>>;\n\nexport interface PageContainerProps\n  extends HTMLArkProps<\"div\">, StyledProps, PageContentVariantProps, PageContainerVariantProps {}\n\nexport const PageContainer = forwardRef<HTMLDivElement, PageContainerProps>(\n  ({ padding, css: cssProp, ...props }, ref) => (\n    <PageContent css={css.raw(pageContainerRecipe.raw({ padding }), cssProp)} {...props} ref={ref} />\n  ),\n);\n"],"mappings":";;;;;;;AAcA,MAAM,sBAAsB,IAAI;CAC9B,iBAAiB,EACf,SAAS,UACV;CACD,UAAU,EACR,SAAS;EACP,MAAM,EAAE;EACR,OAAO;GACL,mBAAmB;GACnB,iBAAiB;GAClB;EACD,QAAQ;GACN,mBAAmB;GACnB,iBAAiB;GAClB;EACD,OAAO;GACL,mBAAmB;GACnB,iBAAiB;GAClB;EACF,EACF;CACF,CAAC;AAOF,MAAa,gBAAgB,YAC1B,EAAE,SAAS,KAAK,SAAS,GAAG,SAAS,QACpC,oBAAC;CAAY,KAAK,IAAI,IAAI,oBAAoB,IAAI,EAAE,SAAS,CAAC,EAAE,QAAQ;CAAE,GAAI;CAAY;EAAO,CAEpG"}
+{"version":3,"file":"PageContainer.mjs","names":[],"sources":["../../src/Layout/PageContainer.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 HTMLArkProps } from \"@ark-ui/react\";\nimport { css, cva } from \"@ndla/styled-system/css\";\nimport type { StyledProps, RecipeVariantProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\nimport { PageContent, type PageContentVariantProps } from \"./PageContent\";\n\nconst pageContainerRecipe = cva({\n  defaultVariants: {\n    padding: \"medium\",\n  },\n  variants: {\n    padding: {\n      none: {},\n      small: {\n        paddingBlockStart: \"medium\",\n        paddingBlockEnd: \"5xlarge\",\n      },\n      medium: {\n        paddingBlockStart: \"xxlarge\",\n        paddingBlockEnd: \"5xlarge\",\n      },\n      large: {\n        paddingBlockStart: \"4xlarge\",\n        paddingBlockEnd: \"5xlarge\",\n      },\n    },\n  },\n});\n\nexport type PageContainerVariantProps = NonNullable<RecipeVariantProps<typeof pageContainerRecipe>>;\n\nexport interface PageContainerProps\n  extends HTMLArkProps<\"div\">, StyledProps, PageContentVariantProps, PageContainerVariantProps {}\n\nexport const PageContainer = forwardRef<HTMLDivElement, PageContainerProps>(\n  ({ padding, css: cssProp, ...props }, ref) => (\n    <PageContent css={css.raw(pageContainerRecipe.raw({ padding }), cssProp)} {...props} ref={ref} />\n  ),\n);\n"],"mappings":";;;;;;AAcA,MAAM,sBAAsB,IAAI;CAC9B,iBAAiB,EACf,SAAS,UACV;CACD,UAAU,EACR,SAAS;EACP,MAAM,EAAE;EACR,OAAO;GACL,mBAAmB;GACnB,iBAAiB;GAClB;EACD,QAAQ;GACN,mBAAmB;GACnB,iBAAiB;GAClB;EACD,OAAO;GACL,mBAAmB;GACnB,iBAAiB;GAClB;EACF,EACF;CACF,CAAC;AAOF,MAAa,gBAAgB,YAC1B,EAAE,SAAS,KAAK,SAAS,GAAG,SAAS,QACpC,oBAAC,aAAD;CAAa,KAAK,IAAI,IAAI,oBAAoB,IAAI,EAAE,SAAS,CAAC,EAAE,QAAQ;CAAE,GAAI;CAAY;CAAO,CAAA,CAEpG"}

package/es/Layout/PageContent.mjs

@@ -3,7 +3,6 @@ import { css, cva } from "@ndla/styled-system/css";
 import { styled } from "@ndla/styled-system/jsx";
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-
 //#region src/Layout/PageContent.tsx
 /**
 * Copyright (c) 2024-present, NDLA.
@@ -68,7 +67,7 @@ const BleedPageContent = styled(ark.div, { base: { "& ": {
 	gridColumnStart: "1",
 	gridColumnEnd: "-1"
 } } }, { baseComponent: true });
-
 //#endregion
 export { BleedPageContent, PageContent };
+
 //# sourceMappingURL=PageContent.mjs.map

package/es/Layout/PageContent.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PageContent.mjs","names":[],"sources":["../../src/Layout/PageContent.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 HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps, RecipeVariantProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\n\nconst pageRecipe = cva({\n  base: {\n    display: \"grid\",\n    transitionProperty: \"all\",\n    transitionDuration: \"default\",\n    transitionTimingFunction: \"default\",\n    alignContent: \"start\",\n    /**\n     * var(--size) is the max width of the content\n     * calc(100% - (var(--gutter, 0) * 2)) is the max width of the page, minus the gutters (inline padding without being actual padding).\n     * In effect, this will center the content on the page, and constrain it to either the content width or the page width, whichever is smaller.\n     */\n    gridColumnGap: \"var(--gutter, 0)\",\n    gridTemplateColumns: \"1fr min(var(--size), calc(100% - (var(--gutter, 0) * 2))) 1fr\",\n    \"& > *\": {\n      gridColumnStart: \"2\",\n      gridColumnEnd: \"2\",\n    },\n  },\n  defaultVariants: {\n    variant: \"page\",\n    gutters: \"always\",\n  },\n  variants: {\n    variant: {\n      content: {\n        \"--size\": \"sizes.surface.contentMax\",\n      },\n      article: {\n        \"--size\": \"sizes.surface.articleMax\",\n      },\n      page: {\n        \"--size\": \"sizes.surface.pageMax\",\n      },\n      wide: {\n        \"--size\": \"sizes.surface.wideMax\",\n      },\n    },\n    gutters: {\n      never: {\n        \"--gutter\": \"0px\",\n      },\n      mobileUp: {\n        \"--gutter\": \"0px\",\n        mobileWide: {\n          \"--gutter\": \"spacing.medium\",\n        },\n      },\n      tabletUp: {\n        \"--gutter\": \"0px\",\n        tablet: {\n          \"--gutter\": \"spacing.medium\",\n        },\n      },\n      always: {\n        \"--gutter\": \"spacing.small\",\n        tablet: {\n          \"--gutter\": \"spacing.medium\",\n        },\n      },\n    },\n  },\n});\n\nconst StyledPageContent = styled(ark.div, {}, { baseComponent: true });\n\nexport type PageContentVariantProps = NonNullable<RecipeVariantProps<typeof pageRecipe>>;\n\nexport interface PageContentProps extends HTMLArkProps<\"div\">, StyledProps, PageContentVariantProps {}\n\nexport const PageContent = forwardRef<HTMLDivElement, PageContentProps>(\n  ({ variant, gutters, css: cssProp, ...props }, ref) => (\n    <StyledPageContent css={css.raw(pageRecipe.raw({ variant, gutters }), cssProp)} ref={ref} {...props} />\n  ),\n);\n\nexport const BleedPageContent = styled(\n  ark.div,\n  {\n    base: {\n      \"& \": {\n        width: \"100%\",\n        gridColumnStart: \"1\",\n        gridColumnEnd: \"-1\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n"],"mappings":";;;;;;;;;;;;;;AAcA,MAAM,aAAa,IAAI;CACrB,MAAM;EACJ,SAAS;EACT,oBAAoB;EACpB,oBAAoB;EACpB,0BAA0B;EAC1B,cAAc;EAMd,eAAe;EACf,qBAAqB;EACrB,SAAS;GACP,iBAAiB;GACjB,eAAe;GAChB;EACF;CACD,iBAAiB;EACf,SAAS;EACT,SAAS;EACV;CACD,UAAU;EACR,SAAS;GACP,SAAS,EACP,UAAU,4BACX;GACD,SAAS,EACP,UAAU,4BACX;GACD,MAAM,EACJ,UAAU,yBACX;GACD,MAAM,EACJ,UAAU,yBACX;GACF;EACD,SAAS;GACP,OAAO,EACL,YAAY,OACb;GACD,UAAU;IACR,YAAY;IACZ,YAAY,EACV,YAAY,kBACb;IACF;GACD,UAAU;IACR,YAAY;IACZ,QAAQ,EACN,YAAY,kBACb;IACF;GACD,QAAQ;IACN,YAAY;IACZ,QAAQ,EACN,YAAY,kBACb;IACF;GACF;EACF;CACF,CAAC;AAEF,MAAM,oBAAoB,OAAO,IAAI,KAAK,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAMtE,MAAa,cAAc,YACxB,EAAE,SAAS,SAAS,KAAK,SAAS,GAAG,SAAS,QAC7C,oBAAC;CAAkB,KAAK,IAAI,IAAI,WAAW,IAAI;EAAE;EAAS;EAAS,CAAC,EAAE,QAAQ;CAAO;CAAK,GAAI;EAAS,CAE1G;AAED,MAAa,mBAAmB,OAC9B,IAAI,KACJ,EACE,MAAM,EACJ,MAAM;CACJ,OAAO;CACP,iBAAiB;CACjB,eAAe;CAChB,EACF,EACF,EACD,EAAE,eAAe,MAAM,CACxB"}
+{"version":3,"file":"PageContent.mjs","names":[],"sources":["../../src/Layout/PageContent.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 HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps, RecipeVariantProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\n\nconst pageRecipe = cva({\n  base: {\n    display: \"grid\",\n    transitionProperty: \"all\",\n    transitionDuration: \"default\",\n    transitionTimingFunction: \"default\",\n    alignContent: \"start\",\n    /**\n     * var(--size) is the max width of the content\n     * calc(100% - (var(--gutter, 0) * 2)) is the max width of the page, minus the gutters (inline padding without being actual padding).\n     * In effect, this will center the content on the page, and constrain it to either the content width or the page width, whichever is smaller.\n     */\n    gridColumnGap: \"var(--gutter, 0)\",\n    gridTemplateColumns: \"1fr min(var(--size), calc(100% - (var(--gutter, 0) * 2))) 1fr\",\n    \"& > *\": {\n      gridColumnStart: \"2\",\n      gridColumnEnd: \"2\",\n    },\n  },\n  defaultVariants: {\n    variant: \"page\",\n    gutters: \"always\",\n  },\n  variants: {\n    variant: {\n      content: {\n        \"--size\": \"sizes.surface.contentMax\",\n      },\n      article: {\n        \"--size\": \"sizes.surface.articleMax\",\n      },\n      page: {\n        \"--size\": \"sizes.surface.pageMax\",\n      },\n      wide: {\n        \"--size\": \"sizes.surface.wideMax\",\n      },\n    },\n    gutters: {\n      never: {\n        \"--gutter\": \"0px\",\n      },\n      mobileUp: {\n        \"--gutter\": \"0px\",\n        mobileWide: {\n          \"--gutter\": \"spacing.medium\",\n        },\n      },\n      tabletUp: {\n        \"--gutter\": \"0px\",\n        tablet: {\n          \"--gutter\": \"spacing.medium\",\n        },\n      },\n      always: {\n        \"--gutter\": \"spacing.small\",\n        tablet: {\n          \"--gutter\": \"spacing.medium\",\n        },\n      },\n    },\n  },\n});\n\nconst StyledPageContent = styled(ark.div, {}, { baseComponent: true });\n\nexport type PageContentVariantProps = NonNullable<RecipeVariantProps<typeof pageRecipe>>;\n\nexport interface PageContentProps extends HTMLArkProps<\"div\">, StyledProps, PageContentVariantProps {}\n\nexport const PageContent = forwardRef<HTMLDivElement, PageContentProps>(\n  ({ variant, gutters, css: cssProp, ...props }, ref) => (\n    <StyledPageContent css={css.raw(pageRecipe.raw({ variant, gutters }), cssProp)} ref={ref} {...props} />\n  ),\n);\n\nexport const BleedPageContent = styled(\n  ark.div,\n  {\n    base: {\n      \"& \": {\n        width: \"100%\",\n        gridColumnStart: \"1\",\n        gridColumnEnd: \"-1\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,aAAa,IAAI;CACrB,MAAM;EACJ,SAAS;EACT,oBAAoB;EACpB,oBAAoB;EACpB,0BAA0B;EAC1B,cAAc;EAMd,eAAe;EACf,qBAAqB;EACrB,SAAS;GACP,iBAAiB;GACjB,eAAe;GAChB;EACF;CACD,iBAAiB;EACf,SAAS;EACT,SAAS;EACV;CACD,UAAU;EACR,SAAS;GACP,SAAS,EACP,UAAU,4BACX;GACD,SAAS,EACP,UAAU,4BACX;GACD,MAAM,EACJ,UAAU,yBACX;GACD,MAAM,EACJ,UAAU,yBACX;GACF;EACD,SAAS;GACP,OAAO,EACL,YAAY,OACb;GACD,UAAU;IACR,YAAY;IACZ,YAAY,EACV,YAAY,kBACb;IACF;GACD,UAAU;IACR,YAAY;IACZ,QAAQ,EACN,YAAY,kBACb;IACF;GACD,QAAQ;IACN,YAAY;IACZ,QAAQ,EACN,YAAY,kBACb;IACF;GACF;EACF;CACF,CAAC;AAEF,MAAM,oBAAoB,OAAO,IAAI,KAAK,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAMtE,MAAa,cAAc,YACxB,EAAE,SAAS,SAAS,KAAK,SAAS,GAAG,SAAS,QAC7C,oBAAC,mBAAD;CAAmB,KAAK,IAAI,IAAI,WAAW,IAAI;EAAE;EAAS;EAAS,CAAC,EAAE,QAAQ;CAAO;CAAK,GAAI;CAAS,CAAA,CAE1G;AAED,MAAa,mBAAmB,OAC9B,IAAI,KACJ,EACE,MAAM,EACJ,MAAM;CACJ,OAAO;CACP,iBAAiB;CACjB,eAAe;CAChB,EACF,EACF,EACD,EAAE,eAAe,MAAM,CACxB"}

package/es/ListItem/ListItem.mjs

@@ -5,16 +5,7 @@ import { sva } from "@ndla/styled-system/css";
 import { createStyleContext } from "@ndla/styled-system/jsx";
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-
-//#region src/ListItem/ListItem.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 listItemRecipe = sva({
+const { withProvider, withContext } = createStyleContext(sva({
 	slots: [
 		"root",
 		"title",
@@ -76,16 +67,14 @@ const listItemRecipe = sva({
 			_hover: { textDecoration: "none" }
 		}
 	} } }
-});
-const { withProvider, withContext } = createStyleContext(listItemRecipe);
+}));
 const ListItemRoot = withProvider(ark.div, "root", { baseComponent: true });
-const InternalListItemHeading = forwardRef(({ textStyle = "label.medium", fontWeight = "bold", ...props }, ref) => /* @__PURE__ */ jsx(Heading, {
+const ListItemHeading = withContext(forwardRef(({ textStyle = "label.medium", fontWeight = "bold", ...props }, ref) => /* @__PURE__ */ jsx(Heading, {
 	textStyle,
 	fontWeight,
 	...props,
 	ref
-}));
-const ListItemHeading = withContext(InternalListItemHeading, "title");
+})), "title");
 const ListItemContent = withContext(ark.div, "content", { baseComponent: true });
 const InternalListItemImage = withContext(Image, "image");
 const ListItemImage = forwardRef(({ variant = "rounded", ...props }, ref) => /* @__PURE__ */ jsx(InternalListItemImage, {
@@ -93,7 +82,7 @@ const ListItemImage = forwardRef(({ variant = "rounded", ...props }, ref) => /*
 	...props,
 	ref
 }));
-
 //#endregion
 export { ListItemContent, ListItemHeading, ListItemImage, ListItemRoot };
+
 //# sourceMappingURL=ListItem.mjs.map

package/es/ListItem/ListItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.mjs","names":[],"sources":["../../src/ListItem/ListItem.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 HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps, RecipeVariantProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\nimport { Image, type ImageProps } from \"../Image\";\nimport { Heading, type TextProps } from \"../Text\";\n\nexport const listItemRecipe = sva({\n  slots: [\"root\", \"title\", \"content\", \"image\"],\n  base: {\n    root: {\n      minHeight: \"3xlarge\",\n      borderStyle: \"solid\",\n      borderWidth: \"1px\",\n      borderColor: \"stroke.subtle\",\n      backgroundColor: \"background.default\",\n      color: \"text.default\",\n      position: \"relative\",\n      display: \"flex\",\n      gap: \"small\",\n      alignItems: \"center\",\n      paddingBlock: \"xsmall\",\n      paddingInline: \"xxsmall\",\n      transitionProperty: \"background-color, border-color, color\",\n      transitionDuration: \"superFast\",\n      transitionTimingFunction: \"ease-in-out\",\n      boxShadow: \"xsmall\",\n    },\n    content: {\n      display: \"flex\",\n      alignItems: \"center\",\n      justifyContent: \"space-between\",\n      gap: \"xsmall\",\n      width: \"100%\",\n    },\n    image: {\n      minHeight: \"50px\",\n      maxHeight: \"50px\",\n      minWidth: \"70px\",\n      maxWidth: \"70px\",\n      objectFit: \"cover\",\n    },\n  },\n  defaultVariants: {\n    nonInteractive: false,\n  },\n  variants: {\n    nonInteractive: {\n      false: {\n        root: {\n          _highlighted: {\n            borderColor: \"stroke.hover\",\n            backgroundColor: \"surface.hover\",\n          },\n          _hover: {\n            borderColor: \"stroke.hover\",\n            backgroundColor: \"surface.hover\",\n          },\n          _active: {\n            borderColor: \"stroke.hover\",\n            backgroundColor: \"surface.active\",\n          },\n        },\n        title: {\n          textDecoration: \"underline\",\n          _hover: {\n            textDecoration: \"none\",\n          },\n        },\n      },\n    },\n  },\n});\n\nconst { withProvider, withContext } = createStyleContext(listItemRecipe);\n\nexport type ListItemVariantProps = NonNullable<RecipeVariantProps<typeof listItemRecipe>>;\n\nexport interface ListItemProps extends HTMLArkProps<\"div\">, StyledProps, ListItemVariantProps {}\n\nexport const ListItemRoot = withProvider(ark.div, \"root\", { baseComponent: true });\n\ninterface ListItemHeadingProps extends Omit<HTMLArkProps<\"p\">, \"color\">, TextProps {}\n\nconst InternalListItemHeading = forwardRef<HTMLHeadingElement, ListItemHeadingProps>(\n  ({ textStyle = \"label.medium\", fontWeight = \"bold\", ...props }, ref) => (\n    <Heading textStyle={textStyle} fontWeight={fontWeight} {...props} ref={ref} />\n  ),\n);\n\nexport const ListItemHeading = withContext(InternalListItemHeading, \"title\");\n\nexport const ListItemContent = withContext(ark.div, \"content\", { baseComponent: true });\n\nconst InternalListItemImage = withContext(Image, \"image\");\n\nexport const ListItemImage = forwardRef<HTMLImageElement, ImageProps>(({ variant = \"rounded\", ...props }, ref) => (\n  <InternalListItemImage variant={variant} {...props} ref={ref} />\n));\n"],"mappings":";;;;;;;;;;;;;;;;AAgBA,MAAa,iBAAiB,IAAI;CAChC,OAAO;EAAC;EAAQ;EAAS;EAAW;EAAQ;CAC5C,MAAM;EACJ,MAAM;GACJ,WAAW;GACX,aAAa;GACb,aAAa;GACb,aAAa;GACb,iBAAiB;GACjB,OAAO;GACP,UAAU;GACV,SAAS;GACT,KAAK;GACL,YAAY;GACZ,cAAc;GACd,eAAe;GACf,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,WAAW;GACZ;EACD,SAAS;GACP,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,KAAK;GACL,OAAO;GACR;EACD,OAAO;GACL,WAAW;GACX,WAAW;GACX,UAAU;GACV,UAAU;GACV,WAAW;GACZ;EACF;CACD,iBAAiB,EACf,gBAAgB,OACjB;CACD,UAAU,EACR,gBAAgB,EACd,OAAO;EACL,MAAM;GACJ,cAAc;IACZ,aAAa;IACb,iBAAiB;IAClB;GACD,QAAQ;IACN,aAAa;IACb,iBAAiB;IAClB;GACD,SAAS;IACP,aAAa;IACb,iBAAiB;IAClB;GACF;EACD,OAAO;GACL,gBAAgB;GAChB,QAAQ,EACN,gBAAgB,QACjB;GACF;EACF,EACF,EACF;CACF,CAAC;AAEF,MAAM,EAAE,cAAc,gBAAgB,mBAAmB,eAAe;AAMxE,MAAa,eAAe,aAAa,IAAI,KAAK,QAAQ,EAAE,eAAe,MAAM,CAAC;AAIlF,MAAM,0BAA0B,YAC7B,EAAE,YAAY,gBAAgB,aAAa,QAAQ,GAAG,SAAS,QAC9D,oBAAC;CAAmB;CAAuB;CAAY,GAAI;CAAY;EAAO,CAEjF;AAED,MAAa,kBAAkB,YAAY,yBAAyB,QAAQ;AAE5E,MAAa,kBAAkB,YAAY,IAAI,KAAK,WAAW,EAAE,eAAe,MAAM,CAAC;AAEvF,MAAM,wBAAwB,YAAY,OAAO,QAAQ;AAEzD,MAAa,gBAAgB,YAA0C,EAAE,UAAU,WAAW,GAAG,SAAS,QACxG,oBAAC;CAA+B;CAAS,GAAI;CAAY;EAAO,CAChE"}
+{"version":3,"file":"ListItem.mjs","names":[],"sources":["../../src/ListItem/ListItem.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 HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps, RecipeVariantProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\nimport { Image, type ImageProps } from \"../Image\";\nimport { Heading, type TextProps } from \"../Text\";\n\nexport const listItemRecipe = sva({\n  slots: [\"root\", \"title\", \"content\", \"image\"],\n  base: {\n    root: {\n      minHeight: \"3xlarge\",\n      borderStyle: \"solid\",\n      borderWidth: \"1px\",\n      borderColor: \"stroke.subtle\",\n      backgroundColor: \"background.default\",\n      color: \"text.default\",\n      position: \"relative\",\n      display: \"flex\",\n      gap: \"small\",\n      alignItems: \"center\",\n      paddingBlock: \"xsmall\",\n      paddingInline: \"xxsmall\",\n      transitionProperty: \"background-color, border-color, color\",\n      transitionDuration: \"superFast\",\n      transitionTimingFunction: \"ease-in-out\",\n      boxShadow: \"xsmall\",\n    },\n    content: {\n      display: \"flex\",\n      alignItems: \"center\",\n      justifyContent: \"space-between\",\n      gap: \"xsmall\",\n      width: \"100%\",\n    },\n    image: {\n      minHeight: \"50px\",\n      maxHeight: \"50px\",\n      minWidth: \"70px\",\n      maxWidth: \"70px\",\n      objectFit: \"cover\",\n    },\n  },\n  defaultVariants: {\n    nonInteractive: false,\n  },\n  variants: {\n    nonInteractive: {\n      false: {\n        root: {\n          _highlighted: {\n            borderColor: \"stroke.hover\",\n            backgroundColor: \"surface.hover\",\n          },\n          _hover: {\n            borderColor: \"stroke.hover\",\n            backgroundColor: \"surface.hover\",\n          },\n          _active: {\n            borderColor: \"stroke.hover\",\n            backgroundColor: \"surface.active\",\n          },\n        },\n        title: {\n          textDecoration: \"underline\",\n          _hover: {\n            textDecoration: \"none\",\n          },\n        },\n      },\n    },\n  },\n});\n\nconst { withProvider, withContext } = createStyleContext(listItemRecipe);\n\nexport type ListItemVariantProps = NonNullable<RecipeVariantProps<typeof listItemRecipe>>;\n\nexport interface ListItemProps extends HTMLArkProps<\"div\">, StyledProps, ListItemVariantProps {}\n\nexport const ListItemRoot = withProvider(ark.div, \"root\", { baseComponent: true });\n\ninterface ListItemHeadingProps extends Omit<HTMLArkProps<\"p\">, \"color\">, TextProps {}\n\nconst InternalListItemHeading = forwardRef<HTMLHeadingElement, ListItemHeadingProps>(\n  ({ textStyle = \"label.medium\", fontWeight = \"bold\", ...props }, ref) => (\n    <Heading textStyle={textStyle} fontWeight={fontWeight} {...props} ref={ref} />\n  ),\n);\n\nexport const ListItemHeading = withContext(InternalListItemHeading, \"title\");\n\nexport const ListItemContent = withContext(ark.div, \"content\", { baseComponent: true });\n\nconst InternalListItemImage = withContext(Image, \"image\");\n\nexport const ListItemImage = forwardRef<HTMLImageElement, ImageProps>(({ variant = \"rounded\", ...props }, ref) => (\n  <InternalListItemImage variant={variant} {...props} ref={ref} />\n));\n"],"mappings":";;;;;;;AAmFA,MAAM,EAAE,cAAc,gBAAgB,mBAnER,IAAI;CAChC,OAAO;EAAC;EAAQ;EAAS;EAAW;EAAQ;CAC5C,MAAM;EACJ,MAAM;GACJ,WAAW;GACX,aAAa;GACb,aAAa;GACb,aAAa;GACb,iBAAiB;GACjB,OAAO;GACP,UAAU;GACV,SAAS;GACT,KAAK;GACL,YAAY;GACZ,cAAc;GACd,eAAe;GACf,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,WAAW;GACZ;EACD,SAAS;GACP,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,KAAK;GACL,OAAO;GACR;EACD,OAAO;GACL,WAAW;GACX,WAAW;GACX,UAAU;GACV,UAAU;GACV,WAAW;GACZ;EACF;CACD,iBAAiB,EACf,gBAAgB,OACjB;CACD,UAAU,EACR,gBAAgB,EACd,OAAO;EACL,MAAM;GACJ,cAAc;IACZ,aAAa;IACb,iBAAiB;IAClB;GACD,QAAQ;IACN,aAAa;IACb,iBAAiB;IAClB;GACD,SAAS;IACP,aAAa;IACb,iBAAiB;IAClB;GACF;EACD,OAAO;GACL,gBAAgB;GAChB,QAAQ,EACN,gBAAgB,QACjB;GACF;EACF,EACF,EACF;CACF,CAAC,CAEsE;AAMxE,MAAa,eAAe,aAAa,IAAI,KAAK,QAAQ,EAAE,eAAe,MAAM,CAAC;AAUlF,MAAa,kBAAkB,YANC,YAC7B,EAAE,YAAY,gBAAgB,aAAa,QAAQ,GAAG,SAAS,QAC9D,oBAAC,SAAD;CAAoB;CAAuB;CAAY,GAAI;CAAY;CAAO,CAAA,CAEjF,EAEmE,QAAQ;AAE5E,MAAa,kBAAkB,YAAY,IAAI,KAAK,WAAW,EAAE,eAAe,MAAM,CAAC;AAEvF,MAAM,wBAAwB,YAAY,OAAO,QAAQ;AAEzD,MAAa,gBAAgB,YAA0C,EAAE,UAAU,WAAW,GAAG,SAAS,QACxG,oBAAC,uBAAD;CAAgC;CAAS,GAAI;CAAY;CAAO,CAAA,CAChE"}

package/es/Menu.mjs

@@ -4,7 +4,6 @@ import { css, cva, sva } from "@ndla/styled-system/css";
 import { createStyleContext } from "@ndla/styled-system/jsx";
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-
 //#region src/Menu.tsx
 /**
 * Copyright (c) 2024-present, NDLA.
@@ -138,7 +137,7 @@ const MenuTriggerItem = forwardRef(({ css: cssProp = {}, variant, ...props }, re
 const MenuTrigger = withContext(Menu.Trigger, "trigger", { baseComponent: true });
 const MenuSeparator = withContext(Menu.Separator, "separator", { baseComponent: true });
 const MenuItemText = withContext(Menu.ItemText, "itemText", { baseComponent: true });
-
 //#endregion
 export { MenuContent, MenuContentStandalone, MenuItem, MenuItemGroup, MenuItemGroupLabel, MenuItemText, MenuPositioner, MenuRoot, MenuSeparator, MenuTrigger, MenuTriggerItem };
+
 //# sourceMappingURL=Menu.mjs.map

package/es/Menu.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.mjs","names":[],"sources":["../src/Menu.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 { Menu, menuAnatomy } from \"@ark-ui/react\";\nimport { css, cva, sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { RecipeVariantProps, StyledProps, SystemStyleObject } from \"@ndla/styled-system/types\";\nimport { forwardRef, type RefAttributes } from \"react\";\nimport { Text, type TextProps } from \"./Text\";\n\nconst itemStyle: SystemStyleObject = css.raw({\n  display: \"flex\",\n  alignItems: \"center\",\n  borderRadius: \"xsmall\",\n  cursor: \"pointer\",\n  textStyle: \"label.medium\",\n  paddingBlock: \"4xsmall\",\n  paddingInline: \"xsmall\",\n  gap: \"xsmall\",\n  transitionDuration: \"fast\",\n  transitionProperty: \"background, color\",\n  transitionTimingFunction: \"default\",\n  outline: \"none\",\n  _hover: {\n    textDecoration: \"underline\",\n  },\n  _highlighted: {\n    textDecoration: \"underline\",\n  },\n  _disabled: {\n    color: \"text.disabled\",\n    cursor: \"not-allowed\",\n    \"& svg\": {\n      color: \"stroke.disabled\",\n    },\n    _hover: {\n      color: \"text.disabled\",\n      textDecoration: \"none\",\n      background: \"surface.default\",\n      \"& svg\": {\n        color: \"stroke.disabled\",\n      },\n    },\n  },\n});\n\nconst itemCva = cva({\n  defaultVariants: {\n    variant: \"action\",\n  },\n  variants: {\n    variant: {\n      action: {\n        _hover: {\n          background: \"surface.hover\",\n        },\n        _highlighted: {\n          background: \"surface.hover\",\n        },\n        _active: {\n          background: \"surface.active\",\n        },\n      },\n      destructive: {\n        color: \"text.error\",\n        \"& svg\": {\n          color: \"icon.error\",\n        },\n        _hover: {\n          color: \"text.default\",\n          \"& svg\": {\n            color: \"icon.default\",\n          },\n          background: \"surface.dangerSubtle.hover\",\n        },\n        _highlighted: {\n          color: \"text.default\",\n          \"& svg\": {\n            color: \"icon.default\",\n          },\n          background: \"surface.dangerSubtle.hover\",\n        },\n        _active: {\n          background: \"surface.dangerSubtle.active\",\n        },\n      },\n    },\n  },\n});\n\nconst menuRecipe = sva({\n  slots: menuAnatomy.keys(),\n  base: {\n    item: itemStyle,\n    triggerItem: itemStyle,\n    content: {\n      color: \"text.default\",\n      display: \"flex\",\n      flexDirection: \"column\",\n      width: \"fit-content\",\n      minWidth: \"surface.xxsmall\",\n      padding: \"3xsmall\",\n      gap: \"3xsmall\",\n      background: \"surface.default\",\n      boxShadow: \"small\",\n      borderRadius: \"xsmall\",\n      outline: \"none\",\n      zIndex: \"dropdown\",\n      _open: {\n        animation: \"fade-shift-in 0.25s ease-out\",\n        _motionReduce: {\n          animation: \"none\",\n        },\n      },\n      _closed: {\n        animation: \"fade-shift-out 0.25s ease-out\",\n        _motionReduce: {\n          animation: \"none\",\n        },\n      },\n    },\n    itemGroup: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"3xsmall\",\n    },\n    positioner: {\n      zIndex: \"dropdown\",\n    },\n  },\n});\n\nconst { withRootProvider, withContext } = createStyleContext(menuRecipe);\n\nexport type MenuRootProps = Menu.RootProps;\n\nconst InternalMenuRoot = withRootProvider(Menu.Root);\n\nexport const MenuRoot = ({ lazyMount = true, unmountOnExit = true, ...props }: MenuRootProps) => (\n  <InternalMenuRoot lazyMount={lazyMount} unmountOnExit={unmountOnExit} {...props} />\n);\n\nexport const MenuContentStandalone = withContext(Menu.Content, \"content\", { baseComponent: true });\n\ninterface MenuContentProps extends Menu.ContentProps, StyledProps {}\n\nexport const MenuContent = forwardRef<HTMLDivElement, MenuContentProps>((props, ref) => (\n  <MenuPositioner>\n    <MenuContentStandalone ref={ref} {...props} />\n  </MenuPositioner>\n));\n\nconst InternalMenuItemGroupLabel = withContext(Menu.ItemGroupLabel, \"itemGroupLabel\");\n\ninterface MenuItemGroupLabelProps\n  extends Omit<Menu.ItemGroupLabelProps, \"color\">, StyledProps, TextProps, RefAttributes<HTMLDivElement> {}\n\nexport const MenuItemGroupLabel = ({\n  textStyle = \"label.medium\",\n  fontWeight = \"bold\",\n  children,\n  ...props\n}: MenuItemGroupLabelProps) => (\n  <InternalMenuItemGroupLabel {...props} asChild>\n    <Text textStyle={textStyle} fontWeight={fontWeight}>\n      {children}\n    </Text>\n  </InternalMenuItemGroupLabel>\n);\n\nexport const MenuItemGroup = withContext(Menu.ItemGroup, \"itemGroup\", { baseComponent: true });\n\nconst InternalMenuItem = withContext(Menu.Item, \"item\", { baseComponent: true });\n\nexport type MenuItemVariantProps = NonNullable<RecipeVariantProps<typeof itemCva>>;\nexport interface MenuItemProps\n  extends Menu.ItemProps, StyledProps, MenuItemVariantProps, RefAttributes<HTMLDivElement> {}\n\nexport const MenuItem = forwardRef<HTMLDivElement, MenuItemProps>(({ css: cssProp = {}, variant, ...props }, ref) => (\n  <InternalMenuItem\n    css={[itemCva.raw({ variant }), ...(Array.isArray(cssProp) ? cssProp : [cssProp])]}\n    {...props}\n    ref={ref}\n  />\n));\n\nexport const MenuPositioner = withContext(Menu.Positioner, \"positioner\", { baseComponent: true });\n\nconst InternalMenuTriggerItem = withContext(Menu.TriggerItem, \"triggerItem\", { baseComponent: true });\n\ninterface MenuTriggerItemProps\n  extends Menu.TriggerItemProps, StyledProps, MenuItemVariantProps, RefAttributes<HTMLButtonElement> {}\n\nexport const MenuTriggerItem = forwardRef<HTMLDivElement, MenuTriggerItemProps>(\n  ({ css: cssProp = {}, variant, ...props }, ref) => (\n    <InternalMenuTriggerItem\n      css={[itemCva.raw({ variant }), ...(Array.isArray(cssProp) ? cssProp : [cssProp])]}\n      {...props}\n      ref={ref}\n    />\n  ),\n);\n\nexport const MenuTrigger = withContext(Menu.Trigger, \"trigger\", { baseComponent: true });\n\nexport const MenuSeparator = withContext(Menu.Separator, \"separator\", { baseComponent: true });\n\nexport const MenuItemText = withContext(Menu.ItemText, \"itemText\", { baseComponent: true });\n"],"mappings":"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"}
+{"version":3,"file":"Menu.mjs","names":[],"sources":["../src/Menu.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 { Menu, menuAnatomy } from \"@ark-ui/react\";\nimport { css, cva, sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { RecipeVariantProps, StyledProps, SystemStyleObject } from \"@ndla/styled-system/types\";\nimport { forwardRef, type RefAttributes } from \"react\";\nimport { Text, type TextProps } from \"./Text\";\n\nconst itemStyle: SystemStyleObject = css.raw({\n  display: \"flex\",\n  alignItems: \"center\",\n  borderRadius: \"xsmall\",\n  cursor: \"pointer\",\n  textStyle: \"label.medium\",\n  paddingBlock: \"4xsmall\",\n  paddingInline: \"xsmall\",\n  gap: \"xsmall\",\n  transitionDuration: \"fast\",\n  transitionProperty: \"background, color\",\n  transitionTimingFunction: \"default\",\n  outline: \"none\",\n  _hover: {\n    textDecoration: \"underline\",\n  },\n  _highlighted: {\n    textDecoration: \"underline\",\n  },\n  _disabled: {\n    color: \"text.disabled\",\n    cursor: \"not-allowed\",\n    \"& svg\": {\n      color: \"stroke.disabled\",\n    },\n    _hover: {\n      color: \"text.disabled\",\n      textDecoration: \"none\",\n      background: \"surface.default\",\n      \"& svg\": {\n        color: \"stroke.disabled\",\n      },\n    },\n  },\n});\n\nconst itemCva = cva({\n  defaultVariants: {\n    variant: \"action\",\n  },\n  variants: {\n    variant: {\n      action: {\n        _hover: {\n          background: \"surface.hover\",\n        },\n        _highlighted: {\n          background: \"surface.hover\",\n        },\n        _active: {\n          background: \"surface.active\",\n        },\n      },\n      destructive: {\n        color: \"text.error\",\n        \"& svg\": {\n          color: \"icon.error\",\n        },\n        _hover: {\n          color: \"text.default\",\n          \"& svg\": {\n            color: \"icon.default\",\n          },\n          background: \"surface.dangerSubtle.hover\",\n        },\n        _highlighted: {\n          color: \"text.default\",\n          \"& svg\": {\n            color: \"icon.default\",\n          },\n          background: \"surface.dangerSubtle.hover\",\n        },\n        _active: {\n          background: \"surface.dangerSubtle.active\",\n        },\n      },\n    },\n  },\n});\n\nconst menuRecipe = sva({\n  slots: menuAnatomy.keys(),\n  base: {\n    item: itemStyle,\n    triggerItem: itemStyle,\n    content: {\n      color: \"text.default\",\n      display: \"flex\",\n      flexDirection: \"column\",\n      width: \"fit-content\",\n      minWidth: \"surface.xxsmall\",\n      padding: \"3xsmall\",\n      gap: \"3xsmall\",\n      background: \"surface.default\",\n      boxShadow: \"small\",\n      borderRadius: \"xsmall\",\n      outline: \"none\",\n      zIndex: \"dropdown\",\n      _open: {\n        animation: \"fade-shift-in 0.25s ease-out\",\n        _motionReduce: {\n          animation: \"none\",\n        },\n      },\n      _closed: {\n        animation: \"fade-shift-out 0.25s ease-out\",\n        _motionReduce: {\n          animation: \"none\",\n        },\n      },\n    },\n    itemGroup: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"3xsmall\",\n    },\n    positioner: {\n      zIndex: \"dropdown\",\n    },\n  },\n});\n\nconst { withRootProvider, withContext } = createStyleContext(menuRecipe);\n\nexport type MenuRootProps = Menu.RootProps;\n\nconst InternalMenuRoot = withRootProvider(Menu.Root);\n\nexport const MenuRoot = ({ lazyMount = true, unmountOnExit = true, ...props }: MenuRootProps) => (\n  <InternalMenuRoot lazyMount={lazyMount} unmountOnExit={unmountOnExit} {...props} />\n);\n\nexport const MenuContentStandalone = withContext(Menu.Content, \"content\", { baseComponent: true });\n\ninterface MenuContentProps extends Menu.ContentProps, StyledProps {}\n\nexport const MenuContent = forwardRef<HTMLDivElement, MenuContentProps>((props, ref) => (\n  <MenuPositioner>\n    <MenuContentStandalone ref={ref} {...props} />\n  </MenuPositioner>\n));\n\nconst InternalMenuItemGroupLabel = withContext(Menu.ItemGroupLabel, \"itemGroupLabel\");\n\ninterface MenuItemGroupLabelProps\n  extends Omit<Menu.ItemGroupLabelProps, \"color\">, StyledProps, TextProps, RefAttributes<HTMLDivElement> {}\n\nexport const MenuItemGroupLabel = ({\n  textStyle = \"label.medium\",\n  fontWeight = \"bold\",\n  children,\n  ...props\n}: MenuItemGroupLabelProps) => (\n  <InternalMenuItemGroupLabel {...props} asChild>\n    <Text textStyle={textStyle} fontWeight={fontWeight}>\n      {children}\n    </Text>\n  </InternalMenuItemGroupLabel>\n);\n\nexport const MenuItemGroup = withContext(Menu.ItemGroup, \"itemGroup\", { baseComponent: true });\n\nconst InternalMenuItem = withContext(Menu.Item, \"item\", { baseComponent: true });\n\nexport type MenuItemVariantProps = NonNullable<RecipeVariantProps<typeof itemCva>>;\nexport interface MenuItemProps\n  extends Menu.ItemProps, StyledProps, MenuItemVariantProps, RefAttributes<HTMLDivElement> {}\n\nexport const MenuItem = forwardRef<HTMLDivElement, MenuItemProps>(({ css: cssProp = {}, variant, ...props }, ref) => (\n  <InternalMenuItem\n    css={[itemCva.raw({ variant }), ...(Array.isArray(cssProp) ? cssProp : [cssProp])]}\n    {...props}\n    ref={ref}\n  />\n));\n\nexport const MenuPositioner = withContext(Menu.Positioner, \"positioner\", { baseComponent: true });\n\nconst InternalMenuTriggerItem = withContext(Menu.TriggerItem, \"triggerItem\", { baseComponent: true });\n\ninterface MenuTriggerItemProps\n  extends Menu.TriggerItemProps, StyledProps, MenuItemVariantProps, RefAttributes<HTMLButtonElement> {}\n\nexport const MenuTriggerItem = forwardRef<HTMLDivElement, MenuTriggerItemProps>(\n  ({ css: cssProp = {}, variant, ...props }, ref) => (\n    <InternalMenuTriggerItem\n      css={[itemCva.raw({ variant }), ...(Array.isArray(cssProp) ? cssProp : [cssProp])]}\n      {...props}\n      ref={ref}\n    />\n  ),\n);\n\nexport const MenuTrigger = withContext(Menu.Trigger, \"trigger\", { baseComponent: true });\n\nexport const MenuSeparator = withContext(Menu.Separator, \"separator\", { baseComponent: true });\n\nexport const MenuItemText = withContext(Menu.ItemText, \"itemText\", { baseComponent: true });\n"],"mappings":";;;;;;;;;;;;;;AAeA,MAAM,YAA+B,IAAI,IAAI;CAC3C,SAAS;CACT,YAAY;CACZ,cAAc;CACd,QAAQ;CACR,WAAW;CACX,cAAc;CACd,eAAe;CACf,KAAK;CACL,oBAAoB;CACpB,oBAAoB;CACpB,0BAA0B;CAC1B,SAAS;CACT,QAAQ,EACN,gBAAgB,aACjB;CACD,cAAc,EACZ,gBAAgB,aACjB;CACD,WAAW;EACT,OAAO;EACP,QAAQ;EACR,SAAS,EACP,OAAO,mBACR;EACD,QAAQ;GACN,OAAO;GACP,gBAAgB;GAChB,YAAY;GACZ,SAAS,EACP,OAAO,mBACR;GACF;EACF;CACF,CAAC;AAEF,MAAM,UAAU,IAAI;CAClB,iBAAiB,EACf,SAAS,UACV;CACD,UAAU,EACR,SAAS;EACP,QAAQ;GACN,QAAQ,EACN,YAAY,iBACb;GACD,cAAc,EACZ,YAAY,iBACb;GACD,SAAS,EACP,YAAY,kBACb;GACF;EACD,aAAa;GACX,OAAO;GACP,SAAS,EACP,OAAO,cACR;GACD,QAAQ;IACN,OAAO;IACP,SAAS,EACP,OAAO,gBACR;IACD,YAAY;IACb;GACD,cAAc;IACZ,OAAO;IACP,SAAS,EACP,OAAO,gBACR;IACD,YAAY;IACb;GACD,SAAS,EACP,YAAY,+BACb;GACF;EACF,EACF;CACF,CAAC;AA4CF,MAAM,EAAE,kBAAkB,gBAAgB,mBA1CvB,IAAI;CACrB,OAAO,YAAY,MAAM;CACzB,MAAM;EACJ,MAAM;EACN,aAAa;EACb,SAAS;GACP,OAAO;GACP,SAAS;GACT,eAAe;GACf,OAAO;GACP,UAAU;GACV,SAAS;GACT,KAAK;GACL,YAAY;GACZ,WAAW;GACX,cAAc;GACd,SAAS;GACT,QAAQ;GACR,OAAO;IACL,WAAW;IACX,eAAe,EACb,WAAW,QACZ;IACF;GACD,SAAS;IACP,WAAW;IACX,eAAe,EACb,WAAW,QACZ;IACF;GACF;EACD,WAAW;GACT,SAAS;GACT,eAAe;GACf,KAAK;GACN;EACD,YAAY,EACV,QAAQ,YACT;EACF;CACF,CAAC,CAEsE;AAIxE,MAAM,mBAAmB,iBAAiB,KAAK,KAAK;AAEpD,MAAa,YAAY,EAAE,YAAY,MAAM,gBAAgB,MAAM,GAAG,YACpE,oBAAC,kBAAD;CAA6B;CAA0B;CAAe,GAAI;CAAS,CAAA;AAGrF,MAAa,wBAAwB,YAAY,KAAK,SAAS,WAAW,EAAE,eAAe,MAAM,CAAC;AAIlG,MAAa,cAAc,YAA8C,OAAO,QAC9E,oBAAC,gBAAD,EAAA,UACE,oBAAC,uBAAD;CAA4B;CAAK,GAAI;CAAS,CAAA,EAC/B,CAAA,CACjB;AAEF,MAAM,6BAA6B,YAAY,KAAK,gBAAgB,iBAAiB;AAKrF,MAAa,sBAAsB,EACjC,YAAY,gBACZ,aAAa,QACb,UACA,GAAG,YAEH,oBAAC,4BAAD;CAA4B,GAAI;CAAO,SAAA;WACrC,oBAAC,MAAD;EAAiB;EAAuB;EACrC;EACI,CAAA;CACoB,CAAA;AAG/B,MAAa,gBAAgB,YAAY,KAAK,WAAW,aAAa,EAAE,eAAe,MAAM,CAAC;AAE9F,MAAM,mBAAmB,YAAY,KAAK,MAAM,QAAQ,EAAE,eAAe,MAAM,CAAC;AAMhF,MAAa,WAAW,YAA2C,EAAE,KAAK,UAAU,EAAE,EAAE,SAAS,GAAG,SAAS,QAC3G,oBAAC,kBAAD;CACE,KAAK,CAAC,QAAQ,IAAI,EAAE,SAAS,CAAC,EAAE,GAAI,MAAM,QAAQ,QAAQ,GAAG,UAAU,CAAC,QAAQ,CAAE;CAClF,GAAI;CACC;CACL,CAAA,CACF;AAEF,MAAa,iBAAiB,YAAY,KAAK,YAAY,cAAc,EAAE,eAAe,MAAM,CAAC;AAEjG,MAAM,0BAA0B,YAAY,KAAK,aAAa,eAAe,EAAE,eAAe,MAAM,CAAC;AAKrG,MAAa,kBAAkB,YAC5B,EAAE,KAAK,UAAU,EAAE,EAAE,SAAS,GAAG,SAAS,QACzC,oBAAC,yBAAD;CACE,KAAK,CAAC,QAAQ,IAAI,EAAE,SAAS,CAAC,EAAE,GAAI,MAAM,QAAQ,QAAQ,GAAG,UAAU,CAAC,QAAQ,CAAE;CAClF,GAAI;CACC;CACL,CAAA,CAEL;AAED,MAAa,cAAc,YAAY,KAAK,SAAS,WAAW,EAAE,eAAe,MAAM,CAAC;AAExF,MAAa,gBAAgB,YAAY,KAAK,WAAW,aAAa,EAAE,eAAe,MAAM,CAAC;AAE9F,MAAa,eAAe,YAAY,KAAK,UAAU,YAAY,EAAE,eAAe,MAAM,CAAC"}

package/es/MessageBox.mjs

@@ -3,7 +3,6 @@ import { css, cva } from "@ndla/styled-system/css";
 import { styled } from "@ndla/styled-system/jsx";
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-
 //#region src/MessageBox.tsx
 /**
 * Copyright (c) 2024-present, NDLA.
@@ -47,7 +46,7 @@ const MessageBox = forwardRef(({ variant, css: cssProp, ...props }, ref) => /* @
 	...props,
 	ref
 }));
-
 //#endregion
 export { MessageBox };
+
 //# sourceMappingURL=MessageBox.mjs.map

package/es/MessageBox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MessageBox.mjs","names":[],"sources":["../src/MessageBox.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 HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps, RecipeVariantProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\n\nconst messageBoxRecipe = cva({\n  base: {\n    display: \"flex\",\n    alignItems: \"flex-start\",\n    gap: \"small\",\n    padding: \"medium\",\n    border: \"1px solid\",\n    borderRadius: \"xsmall\",\n  },\n  defaultVariants: {\n    variant: \"info\",\n  },\n  variants: {\n    variant: {\n      info: {\n        background: \"surface.infoSubtle\",\n        borderColor: \"stroke.subtle\",\n      },\n      warning: {\n        background: \"surface.warningSubtle\",\n        borderColor: \"stroke.warning\",\n      },\n      success: {\n        background: \"surface.successSubtle\",\n        borderColor: \"stroke.success\",\n      },\n      error: {\n        background: \"surface.errorSubtle\",\n        borderColor: \"stroke.error\",\n      },\n    },\n  },\n});\n\nexport type MessageBoxVariantProps = NonNullable<RecipeVariantProps<typeof messageBoxRecipe>>;\n\nexport interface MessageBoxProps extends HTMLArkProps<\"div\">, StyledProps, MessageBoxVariantProps {}\n\nconst StyledMessageBox = styled(ark.div, {}, { baseComponent: true });\n\nexport const MessageBox = forwardRef<HTMLDivElement, MessageBoxProps>(({ variant, css: cssProp, ...props }, ref) => (\n  <StyledMessageBox css={css.raw(messageBoxRecipe.raw({ variant }), cssProp)} {...props} ref={ref} />\n));\n"],"mappings":";;;;;;;;;;;;;;AAcA,MAAM,mBAAmB,IAAI;CAC3B,MAAM;EACJ,SAAS;EACT,YAAY;EACZ,KAAK;EACL,SAAS;EACT,QAAQ;EACR,cAAc;EACf;CACD,iBAAiB,EACf,SAAS,QACV;CACD,UAAU,EACR,SAAS;EACP,MAAM;GACJ,YAAY;GACZ,aAAa;GACd;EACD,SAAS;GACP,YAAY;GACZ,aAAa;GACd;EACD,SAAS;GACP,YAAY;GACZ,aAAa;GACd;EACD,OAAO;GACL,YAAY;GACZ,aAAa;GACd;EACF,EACF;CACF,CAAC;AAMF,MAAM,mBAAmB,OAAO,IAAI,KAAK,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAErE,MAAa,aAAa,YAA6C,EAAE,SAAS,KAAK,SAAS,GAAG,SAAS,QAC1G,oBAAC;CAAiB,KAAK,IAAI,IAAI,iBAAiB,IAAI,EAAE,SAAS,CAAC,EAAE,QAAQ;CAAE,GAAI;CAAY;EAAO,CACnG"}
+{"version":3,"file":"MessageBox.mjs","names":[],"sources":["../src/MessageBox.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 HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps, RecipeVariantProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\n\nconst messageBoxRecipe = cva({\n  base: {\n    display: \"flex\",\n    alignItems: \"flex-start\",\n    gap: \"small\",\n    padding: \"medium\",\n    border: \"1px solid\",\n    borderRadius: \"xsmall\",\n  },\n  defaultVariants: {\n    variant: \"info\",\n  },\n  variants: {\n    variant: {\n      info: {\n        background: \"surface.infoSubtle\",\n        borderColor: \"stroke.subtle\",\n      },\n      warning: {\n        background: \"surface.warningSubtle\",\n        borderColor: \"stroke.warning\",\n      },\n      success: {\n        background: \"surface.successSubtle\",\n        borderColor: \"stroke.success\",\n      },\n      error: {\n        background: \"surface.errorSubtle\",\n        borderColor: \"stroke.error\",\n      },\n    },\n  },\n});\n\nexport type MessageBoxVariantProps = NonNullable<RecipeVariantProps<typeof messageBoxRecipe>>;\n\nexport interface MessageBoxProps extends HTMLArkProps<\"div\">, StyledProps, MessageBoxVariantProps {}\n\nconst StyledMessageBox = styled(ark.div, {}, { baseComponent: true });\n\nexport const MessageBox = forwardRef<HTMLDivElement, MessageBoxProps>(({ variant, css: cssProp, ...props }, ref) => (\n  <StyledMessageBox css={css.raw(messageBoxRecipe.raw({ variant }), cssProp)} {...props} ref={ref} />\n));\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,mBAAmB,IAAI;CAC3B,MAAM;EACJ,SAAS;EACT,YAAY;EACZ,KAAK;EACL,SAAS;EACT,QAAQ;EACR,cAAc;EACf;CACD,iBAAiB,EACf,SAAS,QACV;CACD,UAAU,EACR,SAAS;EACP,MAAM;GACJ,YAAY;GACZ,aAAa;GACd;EACD,SAAS;GACP,YAAY;GACZ,aAAa;GACd;EACD,SAAS;GACP,YAAY;GACZ,aAAa;GACd;EACD,OAAO;GACL,YAAY;GACZ,aAAa;GACd;EACF,EACF;CACF,CAAC;AAMF,MAAM,mBAAmB,OAAO,IAAI,KAAK,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAErE,MAAa,aAAa,YAA6C,EAAE,SAAS,KAAK,SAAS,GAAG,SAAS,QAC1G,oBAAC,kBAAD;CAAkB,KAAK,IAAI,IAAI,iBAAiB,IAAI,EAAE,SAAS,CAAC,EAAE,QAAQ;CAAE,GAAI;CAAY;CAAO,CAAA,CACnG"}

package/es/NdlaLogo.mjs

@@ -2,7 +2,6 @@ import { css } from "@ndla/styled-system/css";
 import { styled } from "@ndla/styled-system/jsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
-
 //#region src/NdlaLogo.tsx
 /**
 * Copyright (c) 2024-present, NDLA.
@@ -206,7 +205,7 @@ const NdlaLogoText = (props) => /* @__PURE__ */ jsx(BaseSvg, {
 		]
 	})
 });
-
 //#endregion
 export { NdlaLogoEn, NdlaLogoNb, NdlaLogoText };
+
 //# sourceMappingURL=NdlaLogo.mjs.map