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

package/lib/Image.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.js","names":["styled","ark"],"sources":["../src/Image.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport type { StyledProps, StyledVariantProps } from \"@ndla/styled-system/types\";\nimport type { ImageVariantDTO, ImageVariantSize } from \"@ndla/types-backend/image-api\";\nimport { ark } from \"@ark-ui/react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\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.js","names":["styled","ark"],"sources":["../src/Image.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { 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/lib/Input.d.ts

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import type { RecipeVariantProps, StyledProps } from "@ndla/styled-system/types";
 import { type HTMLArkProps } from "@ark-ui/react";
+import type { RecipeVariantProps, StyledProps } from "@ndla/styled-system/types";
 interface InputContainerProps extends HTMLArkProps<"div">, StyledProps {
 }
 export declare const InputContainer: import("react").ForwardRefExoticComponent<InputContainerProps & import("react").RefAttributes<HTMLDivElement>>;

package/lib/Input.js

@@ -6,6 +6,13 @@ let react = require("react");
 let _ndla_util = require("@ndla/util");
 
 //#region src/Input.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 InputContext = (0, react.createContext)(void 0);
 const inputCss = _ndla_styled_system_css.css.raw({
 	boxShadowColor: "stroke.subtle",

package/lib/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":["css","ark","Field"],"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 type { RecipeVariantProps, StyledProps } from \"@ndla/styled-system/types\";\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 { 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":";;;;;;;;AAiBA,MAAM,wCAA2D,OAAU;AAE3E,MAAM,WAAWA,4BAAI,IAAI;CACvB,gBAAgB;CAChB,WAAW;CACX,YAAY;CACZ,cAAc;CACd,cAAc;EACZ,gBAAgB;EAChB,QAAQ,EACN,gBAAgB,gBACjB;EACD,cAAc;GACZ,gBAAgB;GAChB,QAAQ,EACN,gBAAgB,gBACjB;GACF;EACF;CACD,QAAQ,EACN,gBAAgB,gBACjB;CACD,cAAc;EACZ,WAAW;EACX,gBAAgB;EAChB,QAAQ,EACN,gBAAgB,kBACjB;EACF;CACD,gCAAgC;EAC9B,gBAAgB;EAChB,QAAQ,EACN,gBAAgB,iBACjB;EACF;CACF,CAAC;AAEF,MAAM,2DACJC,kBAAI,KACJ,EACE,MAAM;CACJ,OAAO;CACP,SAAS;CACT,YAAY;CACZ,SAAS;EACP,OAAO;EACP,QAAQ;EACT;CACD,uDAAuD,EACrD,oBAAoB,UACrB;CACD,qDAAqD,EACnD,kBAAkB,UACnB;CACF,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAID,MAAa,wCACV,EAAE,UAAU,KAAK,SAAS,GAAG,QAAQ,QACpC,2CAAC,aAAa;CAAS,OAAO,EAAE;WAC9B,2CAAC;EAAqB,KAAKD,4BAAI,IAAI,UAAU,QAAQ;EAAE,GAAI;EAAW;EACnE;GACoB;EACD,CAE3B;AAED,MAAM,eAAeA,4BAAI,IAAI;CAC3B,OAAO;CACP,OAAO;CACP,SAAS;CACT,YAAY;CACZ,QAAQ;CACR,WAAW,EACT,QAAQ,eACT;CAED,WAAW,EACT,YAAY,iDACb;CACD,QAAQ,EACN,YAAY,QACb;CACD,cAAc,EACZ,OAAO,eACR;CACF,CAAC;AAEF,MAAM,kBAAkBA,4BAAI,IAAI;CAC9B,SAAS;CACT,WAAW;CACX,QAAQ;CACR,QAAQ;CACR,WAAW;CACZ,CAAC;AAEF,MAAM,kDAAqBC,kBAAI,OAAO,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAElE,MAAM,+CAAkB;CACtB,iBAAiB,EACf,eAAe,UAChB;CACD,UAAU,EACR,eAAe;EACb,OAAO;GACL,cAAc;GACd,eAAe;GAChB;EACD,QAAQ;GACN,WAAW;GACX,SAAS;GACV;EACF,EACF;CACF,CAAC;AAMF,MAAa,+BAAkD,EAAE,KAAK,SAAS,eAAe,GAAG,SAAS,QAAQ;CAChH,MAAM,gCAAqB,aAAa;AACxC,QACE,2CAAC;EACC,KAAKD,4BAAI,IAAI,YAAY,IAAI,EAAE,eAAe,CAAC,EAAE,cAAc,UAAU,SAAY,UAAU,QAAQ;EAClG;EACL,GAAI;GACJ;EAEJ;AAEF,MAAa,oCAAuD,OAAO,QACzE,2CAACE,oBAAM;CAAM;CAAQ,GAAI;CAAY;WACnC,2CAAC,UAAQ;EACG,CACd;AAMF,MAAM,qDAAwBD,kBAAI,UAAU,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAExE,MAAa,kCACV,EAAE,KAAK,SAAS,aAAa,MAAM,GAAG,SAAS,QAAQ;CACtD,MAAM,gCAAqB,aAAa;CACxC,MAAM,6BAAuC,KAAK;CAGlD,MAAM,sCAA2B;AAC/B,MAAI,CAAC,SAAS,QAAS;AACvB,WAAS,QAAQ,MAAM,SAAS;AAEhC,WAAS,QAAQ,MAAM,SAAS,GAAG,SAAS,QAAQ,eAAe,EAAE;IACpE,EAAE,CAAC;AAEN,4BAAgB;AACd,MAAI,CAAC,WAAY;AACjB,SAAO,iBAAiB,SAAS,OAAO;AACxC,SAAO,iBAAiB,UAAU,OAAO;AACzC,UAAQ;AACR,eAAa;AACX,UAAO,oBAAoB,SAAS,OAAO;AAC3C,UAAO,oBAAoB,UAAU,OAAO;;IAE7C,CAAC,QAAQ,WAAW,CAAC;AAExB,QACE,2CAAC;EACC,KAAKD,4BAAI,IAAI,cAAc,UAAU,SAAY,UAAU,iBAAiB,QAAQ;EACpF,iCAAiB,KAAK,SAAS;EAC/B,GAAI;GACJ;EAGP;AAED,MAAa,uCAAgE,OAAO,QAClF,2CAACE,oBAAM;CAAS;CAAQ,GAAI;CAAY;WACtC,2CAAC,aAAW;EACG,CACjB"}
+{"version":3,"file":"Input.js","names":["css","ark","Field"],"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/lib/Label.d.ts

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import type { StyledProps } from "@ndla/styled-system/types";
 import { Fieldset, type HTMLArkProps } from "@ark-ui/react";
+import type { StyledProps } from "@ndla/styled-system/types";
 import { type TextProps } from "./Text";
 export interface LegendProps extends Omit<HTMLArkProps<"legend">, "color">, StyledProps, TextProps {
 }

package/lib/Label.js

@@ -5,6 +5,13 @@ let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
 
 //#region src/Label.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 StyledLegend = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react.ark.legend, { base: {
 	float: "left",
 	width: "inherit",

package/lib/Label.js.map

@@ -1 +1 @@
-{"version":3,"file":"Label.js","names":["ark","css","Fieldset","Field"],"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 type { StyledProps } from \"@ndla/styled-system/types\";\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 { 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,mDACJA,kBAAI,QACJ,EACE,MAAM;CACJ,OAAO;CACP,OAAO;CACP,WAAW,EACT,OAAO,eACR;CACF,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAID,MAAa,gCACV,EAAE,YAAY,gBAAgB,aAAa,QAAQ,KAAK,SAAS,QAAQ,OAAO,GAAG,QAAQ,QAC1F,2CAAC;CAAa,KAAKC,4BAAI,IAAI;EAAE;EAAW;EAAY;EAAQ;EAAO,EAAE,QAAQ;CAAE,GAAI;CAAW;EAAO,CAExG;AAID,MAAa,wCAA6D,EAAE,UAAU,GAAG,SAAS,QAChG,2CAACC,uBAAS;CAAO;CAAQ,GAAI;CAAY;WACvC,2CAAC,UAAQ,WAAkB;EACX,CAClB;AAEF,MAAM,kDACJF,kBAAI,OACJ,EACE,MAAM;CACJ,SAAS;CACT,WAAW,EACT,OAAO,eACR;CACF,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAID,MAAa,+BACV,EAAE,YAAY,gBAAgB,aAAa,QAAQ,KAAK,SAAS,QAAQ,OAAO,GAAG,QAAQ,QAC1F,2CAAC;CAAY,KAAKC,4BAAI,IAAI;EAAE;EAAW;EAAY;EAAQ;EAAO,EAAE,QAAQ;CAAE,GAAI;CAAW;EAAO,CAEvG;AAED,MAAa,oCAAuD,EAAE,UAAU,GAAG,SAAS,QAC1F,2CAACE,oBAAM;CAAM;CAAQ,GAAI;CAAY;WACnC,2CAAC,SAAO,WAAiB;EACb,CACd"}
+{"version":3,"file":"Label.js","names":["ark","css","Fieldset","Field"],"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,mDACJA,kBAAI,QACJ,EACE,MAAM;CACJ,OAAO;CACP,OAAO;CACP,WAAW,EACT,OAAO,eACR;CACF,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAID,MAAa,gCACV,EAAE,YAAY,gBAAgB,aAAa,QAAQ,KAAK,SAAS,QAAQ,OAAO,GAAG,QAAQ,QAC1F,2CAAC;CAAa,KAAKC,4BAAI,IAAI;EAAE;EAAW;EAAY;EAAQ;EAAO,EAAE,QAAQ;CAAE,GAAI;CAAW;EAAO,CAExG;AAID,MAAa,wCAA6D,EAAE,UAAU,GAAG,SAAS,QAChG,2CAACC,uBAAS;CAAO;CAAQ,GAAI;CAAY;WACvC,2CAAC,UAAQ,WAAkB;EACX,CAClB;AAEF,MAAM,kDACJF,kBAAI,OACJ,EACE,MAAM;CACJ,SAAS;CACT,WAAW,EACT,OAAO,eACR;CACF,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAID,MAAa,+BACV,EAAE,YAAY,gBAAgB,aAAa,QAAQ,KAAK,SAAS,QAAQ,OAAO,GAAG,QAAQ,QAC1F,2CAAC;CAAY,KAAKC,4BAAI,IAAI;EAAE;EAAW;EAAY;EAAQ;EAAO,EAAE,QAAQ;CAAE,GAAI;CAAW;EAAO,CAEvG;AAED,MAAa,oCAAuD,EAAE,UAAU,GAAG,SAAS,QAC1F,2CAACE,oBAAM;CAAM;CAAQ,GAAI;CAAY;WACnC,2CAAC,SAAO,WAAiB;EACb,CACd"}

package/lib/Layout/PageContainer.d.ts

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import type { StyledProps, RecipeVariantProps } from "@ndla/styled-system/types";
 import { type HTMLArkProps } from "@ark-ui/react";
+import type { StyledProps, RecipeVariantProps } from "@ndla/styled-system/types";
 import { type PageContentVariantProps } from "./PageContent";
 declare const pageContainerRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<{
     padding: {

package/lib/Layout/PageContainer.js

@@ -5,6 +5,13 @@ let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
 
 //#region src/Layout/PageContainer.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 pageContainerRecipe = (0, _ndla_styled_system_css.cva)({
 	defaultVariants: { padding: "medium" },
 	variants: { padding: {

package/lib/Layout/PageContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageContainer.js","names":["PageContent","css"],"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 { StyledProps, RecipeVariantProps } from \"@ndla/styled-system/types\";\nimport { type HTMLArkProps } from \"@ark-ui/react\";\nimport { css, cva } from \"@ndla/styled-system/css\";\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,uDAA0B;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,uCACV,EAAE,SAAS,KAAK,SAAS,GAAG,SAAS,QACpC,2CAACA;CAAY,KAAKC,4BAAI,IAAI,oBAAoB,IAAI,EAAE,SAAS,CAAC,EAAE,QAAQ;CAAE,GAAI;CAAY;EAAO,CAEpG"}
+{"version":3,"file":"PageContainer.js","names":["PageContent","css"],"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,uDAA0B;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,uCACV,EAAE,SAAS,KAAK,SAAS,GAAG,SAAS,QACpC,2CAACA;CAAY,KAAKC,4BAAI,IAAI,oBAAoB,IAAI,EAAE,SAAS,CAAC,EAAE,QAAQ;CAAE,GAAI;CAAY;EAAO,CAEpG"}

package/lib/Layout/PageContent.d.ts

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import type { StyledProps, RecipeVariantProps } from "@ndla/styled-system/types";
 import { type HTMLArkProps } from "@ark-ui/react";
+import type { StyledProps, RecipeVariantProps } from "@ndla/styled-system/types";
 declare const pageRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<{
     variant: {
         content: {

package/lib/Layout/PageContent.js

@@ -5,6 +5,13 @@ let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
 
 //#region src/Layout/PageContent.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 pageRecipe = (0, _ndla_styled_system_css.cva)({
 	base: {
 		display: "grid",

package/lib/Layout/PageContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageContent.js","names":["ark","css"],"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 { StyledProps, RecipeVariantProps } from \"@ndla/styled-system/types\";\nimport { type HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\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,8CAAiB;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,wDAA2BA,kBAAI,KAAK,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAMtE,MAAa,qCACV,EAAE,SAAS,SAAS,KAAK,SAAS,GAAG,SAAS,QAC7C,2CAAC;CAAkB,KAAKC,4BAAI,IAAI,WAAW,IAAI;EAAE;EAAS;EAAS,CAAC,EAAE,QAAQ;CAAO;CAAK,GAAI;EAAS,CAE1G;AAED,MAAa,uDACXD,kBAAI,KACJ,EACE,MAAM,EACJ,MAAM;CACJ,OAAO;CACP,iBAAiB;CACjB,eAAe;CAChB,EACF,EACF,EACD,EAAE,eAAe,MAAM,CACxB"}
+{"version":3,"file":"PageContent.js","names":["ark","css"],"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,8CAAiB;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,wDAA2BA,kBAAI,KAAK,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAMtE,MAAa,qCACV,EAAE,SAAS,SAAS,KAAK,SAAS,GAAG,SAAS,QAC7C,2CAAC;CAAkB,KAAKC,4BAAI,IAAI,WAAW,IAAI;EAAE;EAAS;EAAS,CAAC,EAAE,QAAQ;CAAO;CAAK,GAAI;EAAS,CAE1G;AAED,MAAa,uDACXD,kBAAI,KACJ,EACE,MAAM,EACJ,MAAM;CACJ,OAAO;CACP,iBAAiB;CACjB,eAAe;CAChB,EACF,EACF,EACD,EAAE,eAAe,MAAM,CACxB"}

package/lib/ListItem/ListItem.d.ts

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import type { StyledProps, RecipeVariantProps } from "@ndla/styled-system/types";
 import { type HTMLArkProps } from "@ark-ui/react";
+import type { StyledProps, RecipeVariantProps } from "@ndla/styled-system/types";
 import { type ImageProps } from "../Image";
 import { type TextProps } from "../Text";
 export declare const listItemRecipe: import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"root" | "content" | "title" | "image", {

package/lib/ListItem/ListItem.js

@@ -7,6 +7,13 @@ let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("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 = (0, _ndla_styled_system_css.sva)({
 	slots: [
 		"root",

package/lib/ListItem/ListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.js","names":["ark","Heading","Image"],"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 { StyledProps, RecipeVariantProps } from \"@ndla/styled-system/types\";\nimport { type HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\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,kDAAqB;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,gEAAmC,eAAe;AAMxE,MAAa,eAAe,aAAaA,kBAAI,KAAK,QAAQ,EAAE,eAAe,MAAM,CAAC;AAIlF,MAAM,iDACH,EAAE,YAAY,gBAAgB,aAAa,QAAQ,GAAG,SAAS,QAC9D,2CAACC;CAAmB;CAAuB;CAAY,GAAI;CAAY;EAAO,CAEjF;AAED,MAAa,kBAAkB,YAAY,yBAAyB,QAAQ;AAE5E,MAAa,kBAAkB,YAAYD,kBAAI,KAAK,WAAW,EAAE,eAAe,MAAM,CAAC;AAEvF,MAAM,wBAAwB,YAAYE,qBAAO,QAAQ;AAEzD,MAAa,uCAA0D,EAAE,UAAU,WAAW,GAAG,SAAS,QACxG,2CAAC;CAA+B;CAAS,GAAI;CAAY;EAAO,CAChE"}
+{"version":3,"file":"ListItem.js","names":["ark","Heading","Image"],"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,kDAAqB;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,gEAAmC,eAAe;AAMxE,MAAa,eAAe,aAAaA,kBAAI,KAAK,QAAQ,EAAE,eAAe,MAAM,CAAC;AAIlF,MAAM,iDACH,EAAE,YAAY,gBAAgB,aAAa,QAAQ,GAAG,SAAS,QAC9D,2CAACC;CAAmB;CAAuB;CAAY,GAAI;CAAY;EAAO,CAEjF;AAED,MAAa,kBAAkB,YAAY,yBAAyB,QAAQ;AAE5E,MAAa,kBAAkB,YAAYD,kBAAI,KAAK,WAAW,EAAE,eAAe,MAAM,CAAC;AAEvF,MAAM,wBAAwB,YAAYE,qBAAO,QAAQ;AAEzD,MAAa,uCAA0D,EAAE,UAAU,WAAW,GAAG,SAAS,QACxG,2CAAC;CAA+B;CAAS,GAAI;CAAY;EAAO,CAChE"}

package/lib/Menu.d.ts

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import type { RecipeVariantProps, StyledProps } from "@ndla/styled-system/types";
 import { Menu } from "@ark-ui/react";
+import type { RecipeVariantProps, StyledProps } from "@ndla/styled-system/types";
 import { type RefAttributes } from "react";
 import { type TextProps } from "./Text";
 declare const itemCva: import("@ndla/styled-system/types").RecipeRuntimeFn<{
@@ -32,17 +32,17 @@ declare const itemCva: import("@ndla/styled-system/types").RecipeRuntimeFn<{
                 "& svg": {
                     color: "icon.default";
                 };
-                background: "surface.errorSubtle.hover";
+                background: "surface.dangerSubtle.hover";
             };
             _highlighted: {
                 color: "text.default";
                 "& svg": {
                     color: "icon.default";
                 };
-                background: "surface.errorSubtle.hover";
+                background: "surface.dangerSubtle.hover";
             };
             _active: {
-                background: "surface.errorSubtle.active";
+                background: "surface.dangerSubtle.active";
             };
         };
     };

package/lib/Menu.js

@@ -6,6 +6,13 @@ let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
 
 //#region src/Menu.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 itemStyle = _ndla_styled_system_css.css.raw({
 	display: "flex",
 	alignItems: "center",
@@ -47,14 +54,14 @@ const itemCva = (0, _ndla_styled_system_css.cva)({
 			_hover: {
 				color: "text.default",
 				"& svg": { color: "icon.default" },
-				background: "surface.errorSubtle.hover"
+				background: "surface.dangerSubtle.hover"
 			},
 			_highlighted: {
 				color: "text.default",
 				"& svg": { color: "icon.default" },
-				background: "surface.errorSubtle.hover"
+				background: "surface.dangerSubtle.hover"
 			},
-			_active: { background: "surface.errorSubtle.active" }
+			_active: { background: "surface.dangerSubtle.active" }
 		}
 	} }
 });

package/lib/Menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.js","names":["css","menuAnatomy","Menu","Text"],"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 type { RecipeVariantProps, StyledProps, SystemStyleObject } from \"@ndla/styled-system/types\";\nimport { Menu, menuAnatomy } from \"@ark-ui/react\";\nimport { css, cva, sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\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.errorSubtle.hover\",\n        },\n        _highlighted: {\n          color: \"text.default\",\n          \"& svg\": {\n            color: \"icon.default\",\n          },\n          background: \"surface.errorSubtle.hover\",\n        },\n        _active: {\n          background: \"surface.errorSubtle.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.js","names":["css","menuAnatomy","Menu","Text"],"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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"}

package/lib/MessageBox.d.ts

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import type { StyledProps, RecipeVariantProps } from "@ndla/styled-system/types";
 import { type HTMLArkProps } from "@ark-ui/react";
+import type { StyledProps, RecipeVariantProps } from "@ndla/styled-system/types";
 declare const messageBoxRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<{
     variant: {
         info: {

package/lib/MessageBox.js

@@ -5,6 +5,13 @@ let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
 
 //#region src/MessageBox.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 messageBoxRecipe = (0, _ndla_styled_system_css.cva)({
 	base: {
 		display: "flex",

package/lib/MessageBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageBox.js","names":["ark","css"],"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 { StyledProps, RecipeVariantProps } from \"@ndla/styled-system/types\";\nimport { type HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\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,oDAAuB;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,uDAA0BA,kBAAI,KAAK,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAErE,MAAa,oCAA0D,EAAE,SAAS,KAAK,SAAS,GAAG,SAAS,QAC1G,2CAAC;CAAiB,KAAKC,4BAAI,IAAI,iBAAiB,IAAI,EAAE,SAAS,CAAC,EAAE,QAAQ;CAAE,GAAI;CAAY;EAAO,CACnG"}
+{"version":3,"file":"MessageBox.js","names":["ark","css"],"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,oDAAuB;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,uDAA0BA,kBAAI,KAAK,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAErE,MAAa,oCAA0D,EAAE,SAAS,KAAK,SAAS,GAAG,SAAS,QAC1G,2CAAC;CAAiB,KAAKC,4BAAI,IAAI,iBAAiB,IAAI,EAAE,SAAS,CAAC,EAAE,QAAQ;CAAE,GAAI;CAAY;EAAO,CACnG"}

package/lib/NdlaLogo.js

@@ -4,6 +4,13 @@ let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
 
 //#region src/NdlaLogo.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 BaseSvg = ({ color = "primary", "aria-hidden": ariaHidden = true, css: cssProp, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_styled_system_jsx.styled.svg, {
 	xmlns: "http://www.w3.org/2000/svg",
 	"aria-hidden": ariaHidden,