@ndla/primitives 1.0.129-alpha.0 → 1.0.132-alpha.0

package/lib/Hero.js.map

@@ -1 +1 @@
-{"version":3,"file":"Hero.js","names":["ark"],"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,iBAAA,qCAAA,CAAA,qBAAA,GAAA,wBAAA,KA7GC;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,CAEkE,CAAC;AAQpE,MAAa,OAAO,aAAaA,cAAAA,IAAI,KAAK,QAAQ,EAAE,eAAe,MAAM,CAAC;AAI1E,MAAa,iBAAiB,YAAYA,cAAAA,IAAI,KAAK,cAAc,EAAE,eAAe,MAAM,CAAC;AAIzF,MAAa,cAAc,YAAYA,cAAAA,IAAI,KAAK,WAAW,EAAE,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Hero.js","names":["ark"],"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/factory\";\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,iBAAA,GAAA,wBAAA,qBAAA,GAAA,wBAAA,KA7GC;CACrB,OAAO;EAAC;EAAQ;EAAc;CAAS;CACvC,MAAM;EACJ,MAAM;GACJ,OAAO;GACP,UAAU;EACZ;EACA,YAAY;GACV,QAAQ;GACR,OAAO;GACP,QAAQ;GACR,UAAU;GACV,UAAU;GACV,QAAQ,EACN,YAAY,OACd;EACF;EACA,SAAS;GACP,SAAS;GACT,UAAU;GACV,YAAY;GACZ,cAAc;GACd,QAAQ,EACN,mBAAmB,UACrB;EACF;CACF;CACA,iBAAiB;EACf,SAAS;EACT,UAAU;CACZ;CACA,UAAU;EACR,UAAU,EACR,MAAM,EACJ,YAAY,EACV,UAAU,WACZ,EACF,EACF;EACA,SAAS;GACP,SAAS;IACP,YAAY,EACV,YAAY,UACd;IACA,SAAS,EACP,oBAAoB,EAClB,OAAO,gBACT,EACF;GACF;GACA,YAAY;IACV,YAAY,EACV,YAAY,uBACd;IACA,SAAS,EACP,oBAAoB,EAClB,OAAO,gBACT,EACF;GACF;GACA,QAAQ,EACN,YAAY,EACV,YAAY,kBACd,EACF;GACA,gBAAgB,EACd,YAAY,EACV,YAAY,2BACd,EACF;GACA,QAAQ,EACN,YAAY,EACV,YAAY,kBACd,EACF;GACA,cAAc,EACZ,YAAY,EACV,YAAY,yBACd,EACF;GACA,gBAAgB,EACd,YAAY,EACV,YAAY,2BACd,EACF;GACA,gBAAgB,EACd,YAAY,EACV,YAAY,2BACd,EACF;GACA,gBAAgB,EACd,YAAY,EACV,YAAY,2BACd,EACF;GACA,gBAAgB,EACd,YAAY,EACV,YAAY,2BACd,EACF;GACA,SAAS,EACP,YAAY,EACV,YAAY,qBACd,EACF;EACF;CACF;AACF,CAEkE,CAAC;AAQnE,MAAa,OAAO,aAAaA,sBAAAA,IAAI,KAAK,QAAQ,EAAE,eAAe,KAAK,CAAC;AAIzE,MAAa,iBAAiB,YAAYA,sBAAAA,IAAI,KAAK,cAAc,EAAE,eAAe,KAAK,CAAC;AAIxF,MAAa,cAAc,YAAYA,sBAAAA,IAAI,KAAK,WAAW,EAAE,eAAe,KAAK,CAAC"}

package/lib/Image.js

@@ -1,6 +1,6 @@
-let _ark_ui_react = require("@ark-ui/react");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react_jsx_runtime = require("react/jsx-runtime");
+let _ark_ui_react_factory = require("@ark-ui/react/factory");
 let react = require("react");
 //#region src/Image.tsx
 /**
@@ -91,7 +91,7 @@ const StyledImage = (0, _ndla_styled_system_jsx.styled)("img", {
 		rounded: { borderRadius: "xsmall" }
 	} }
 });
-const StyledFallbackElement = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react.ark.div, { base: {
+const StyledFallbackElement = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react_factory.ark.div, { base: {
 	display: "flex",
 	alignItems: "center",
 	justifyContent: "center"

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 { 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.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/factory\";\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,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { type HTMLArkProps } from "@ark-ui/react";
+import { type HTMLArkProps } from "@ark-ui/react/factory";
 import type { RecipeVariantProps, StyledProps } from "@ndla/styled-system/types";
 interface InputContainerProps extends HTMLArkProps<"div">, StyledProps {
 }

package/lib/Input.js

@@ -1,8 +1,9 @@
-let _ark_ui_react = require("@ark-ui/react");
 let _ndla_styled_system_css = require("@ndla/styled-system/css");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react_jsx_runtime = require("react/jsx-runtime");
+let _ark_ui_react_factory = require("@ark-ui/react/factory");
 let react = require("react");
+let _ark_ui_react_field = require("@ark-ui/react/field");
 let _ndla_util = require("@ndla/util");
 //#region src/Input.tsx
 /**
@@ -37,7 +38,7 @@ const inputCss = _ndla_styled_system_css.css.raw({
 		_hover: { boxShadowColor: "stroke.subtle" }
 	}
 });
-const StyledInputContainer = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react.ark.div, { base: {
+const StyledInputContainer = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react_factory.ark.div, { base: {
 	width: "100%",
 	display: "flex",
 	alignItems: "center",
@@ -75,7 +76,7 @@ const baseTextAreaCss = _ndla_styled_system_css.css.raw({
 	resize: "none",
 	overflowY: "hidden"
 });
-const StyledInput = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react.ark.input, {}, { baseComponent: true });
+const StyledInput = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react_factory.ark.input, {}, { baseComponent: true });
 const inputRecipe = (0, _ndla_styled_system_css.cva)({
 	defaultVariants: { componentSize: "medium" },
 	variants: { componentSize: {
@@ -97,13 +98,13 @@ const Input = (0, react.forwardRef)(({ css: cssProp, componentSize, ...props },
 		...props
 	});
 });
-const FieldInput = (0, react.forwardRef)((props, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react.Field.Input, {
+const FieldInput = (0, react.forwardRef)((props, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_field.Field.Input, {
 	asChild: true,
 	...props,
 	ref,
 	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Input, {})
 }));
-const StyledTextArea = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react.ark.textarea, {}, { baseComponent: true });
+const StyledTextArea = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react_factory.ark.textarea, {}, { baseComponent: true });
 const TextArea = (0, react.forwardRef)(({ css: cssProp, autoResize = true, ...props }, ref) => {
 	const context = (0, react.useContext)(InputContext);
 	const localRef = (0, react.useRef)(null);
@@ -128,7 +129,7 @@ const TextArea = (0, react.forwardRef)(({ css: cssProp, autoResize = true, ...pr
 		...props
 	});
 });
-const FieldTextArea = (0, react.forwardRef)((props, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react.Field.Textarea, {
+const FieldTextArea = (0, react.forwardRef)((props, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_field.Field.Textarea, {
 	asChild: true,
 	...props,
 	ref,

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 { 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.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 HTMLArkProps, ark } from \"@ark-ui/react/factory\";\nimport { Field } from \"@ark-ui/react/field\";\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,7 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { Fieldset, type HTMLArkProps } from "@ark-ui/react";
+import { type HTMLArkProps } from "@ark-ui/react/factory";
+import { Fieldset } from "@ark-ui/react/fieldset";
 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

@@ -1,8 +1,10 @@
-let _ark_ui_react = require("@ark-ui/react");
 let _ndla_styled_system_css = require("@ndla/styled-system/css");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react_jsx_runtime = require("react/jsx-runtime");
+let _ark_ui_react_factory = require("@ark-ui/react/factory");
 let react = require("react");
+let _ark_ui_react_field = require("@ark-ui/react/field");
+let _ark_ui_react_fieldset = require("@ark-ui/react/fieldset");
 //#region src/Label.tsx
 /**
 * Copyright (c) 2024-present, NDLA.
@@ -11,7 +13,7 @@ let react = require("react");
 * LICENSE file in the root directory of this source tree.
 *
 */
-const StyledLegend = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react.ark.legend, { base: {
+const StyledLegend = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react_factory.ark.legend, { base: {
 	float: "left",
 	width: "inherit",
 	_disabled: { color: "text.subtle" }
@@ -26,13 +28,13 @@ const Legend = (0, react.forwardRef)(({ textStyle = "label.medium", fontWeight =
 	...rest,
 	ref
 }));
-const FieldsetLegend = (0, react.forwardRef)(({ children, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react.Fieldset.Legend, {
+const FieldsetLegend = (0, react.forwardRef)(({ children, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_fieldset.Fieldset.Legend, {
 	asChild: true,
 	...props,
 	ref,
 	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Legend, { children })
 }));
-const StyledLabel = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react.ark.label, { base: {
+const StyledLabel = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react_factory.ark.label, { base: {
 	display: "inline-block",
 	_disabled: { color: "text.subtle" }
 } }, { baseComponent: true });
@@ -46,7 +48,7 @@ const Label = (0, react.forwardRef)(({ textStyle = "label.medium", fontWeight =
 	...rest,
 	ref
 }));
-const FieldLabel = (0, react.forwardRef)(({ children, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react.Field.Label, {
+const FieldLabel = (0, react.forwardRef)(({ children, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_field.Field.Label, {
 	asChild: true,
 	...props,
 	ref,

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 { 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,gBAAA,GAAA,wBAAA,QACJA,cAAAA,IAAI,QACJ,EACE,MAAM;CACJ,OAAO;CACP,OAAO;CACP,WAAW,EACT,OAAO,eACR;CACF,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAID,MAAa,UAAA,GAAA,MAAA,aACV,EAAE,YAAY,gBAAgB,aAAa,QAAQ,KAAK,SAAS,QAAQ,OAAO,GAAG,QAAQ,QAC1F,iBAAA,GAAA,kBAAA,KAAC,cAAD;CAAc,KAAKC,wBAAAA,IAAI,IAAI;EAAE;EAAW;EAAY;EAAQ;EAAO,EAAE,QAAQ;CAAE,GAAI;CAAW;CAAO,CAAA,CAExG;AAID,MAAa,kBAAA,GAAA,MAAA,aAA6D,EAAE,UAAU,GAAG,SAAS,QAChG,iBAAA,GAAA,kBAAA,KAACC,cAAAA,SAAS,QAAV;CAAiB,SAAA;CAAQ,GAAI;CAAY;WACvC,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAS,UAAkB,CAAA;CACX,CAAA,CAClB;AAEF,MAAM,eAAA,GAAA,wBAAA,QACJF,cAAAA,IAAI,OACJ,EACE,MAAM;CACJ,SAAS;CACT,WAAW,EACT,OAAO,eACR;CACF,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAID,MAAa,SAAA,GAAA,MAAA,aACV,EAAE,YAAY,gBAAgB,aAAa,QAAQ,KAAK,SAAS,QAAQ,OAAO,GAAG,QAAQ,QAC1F,iBAAA,GAAA,kBAAA,KAAC,aAAD;CAAa,KAAKC,wBAAAA,IAAI,IAAI;EAAE;EAAW;EAAY;EAAQ;EAAO,EAAE,QAAQ;CAAE,GAAI;CAAW;CAAO,CAAA,CAEvG;AAED,MAAa,cAAA,GAAA,MAAA,aAAuD,EAAE,UAAU,GAAG,SAAS,QAC1F,iBAAA,GAAA,kBAAA,KAACE,cAAAA,MAAM,OAAP;CAAa,SAAA;CAAQ,GAAI;CAAY;WACnC,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAQ,UAAiB,CAAA;CACb,CAAA,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 { type HTMLArkProps, ark } from \"@ark-ui/react/factory\";\nimport { Field } from \"@ark-ui/react/field\";\nimport { Fieldset } from \"@ark-ui/react/fieldset\";\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":";;;;;;;;;;;;;;;AAiBA,MAAM,gBAAA,GAAA,wBAAA,QACJA,sBAAAA,IAAI,QACJ,EACE,MAAM;CACJ,OAAO;CACP,OAAO;CACP,WAAW,EACT,OAAO,cACT;AACF,EACF,GACA,EAAE,eAAe,KAAK,CACxB;AAIA,MAAa,UAAA,GAAA,MAAA,aACV,EAAE,YAAY,gBAAgB,aAAa,QAAQ,KAAK,SAAS,QAAQ,OAAO,GAAG,QAAQ,QAC1F,iBAAA,GAAA,kBAAA,KAAC,cAAD;CAAc,KAAKC,wBAAAA,IAAI,IAAI;EAAE;EAAW;EAAY;EAAQ;CAAM,GAAG,OAAO;CAAG,GAAI;CAAW;AAAM,CAAA,CAExG;AAIA,MAAa,kBAAA,GAAA,MAAA,aAA6D,EAAE,UAAU,GAAG,SAAS,QAChG,iBAAA,GAAA,kBAAA,KAACC,uBAAAA,SAAS,QAAV;CAAiB,SAAA;CAAQ,GAAI;CAAY;WACvC,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAS,SAAiB,CAAA;AACX,CAAA,CAClB;AAED,MAAM,eAAA,GAAA,wBAAA,QACJF,sBAAAA,IAAI,OACJ,EACE,MAAM;CACJ,SAAS;CACT,WAAW,EACT,OAAO,cACT;AACF,EACF,GACA,EAAE,eAAe,KAAK,CACxB;AAIA,MAAa,SAAA,GAAA,MAAA,aACV,EAAE,YAAY,gBAAgB,aAAa,QAAQ,KAAK,SAAS,QAAQ,OAAO,GAAG,QAAQ,QAC1F,iBAAA,GAAA,kBAAA,KAAC,aAAD;CAAa,KAAKC,wBAAAA,IAAI,IAAI;EAAE;EAAW;EAAY;EAAQ;CAAM,GAAG,OAAO;CAAG,GAAI;CAAW;AAAM,CAAA,CAEvG;AAEA,MAAa,cAAA,GAAA,MAAA,aAAuD,EAAE,UAAU,GAAG,SAAS,QAC1F,iBAAA,GAAA,kBAAA,KAACE,oBAAAA,MAAM,OAAP;CAAa,SAAA;CAAQ,GAAI;CAAY;WACnC,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAQ,SAAgB,CAAA;AACb,CAAA,CACd"}

package/lib/Layout/PageContainer.d.ts

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

package/lib/Layout/PageContainer.js

@@ -1,7 +1,7 @@
 const require_PageContent = require("./PageContent.js");
-require("@ark-ui/react");
 let _ndla_styled_system_css = require("@ndla/styled-system/css");
 let react_jsx_runtime = require("react/jsx-runtime");
+require("@ark-ui/react/factory");
 let react = require("react");
 //#region src/Layout/PageContainer.tsx
 /**

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 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,uBAAA,GAAA,wBAAA,KAA0B;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,iBAAA,GAAA,MAAA,aACV,EAAE,SAAS,KAAK,SAAS,GAAG,SAAS,QACpC,iBAAA,GAAA,kBAAA,KAACA,oBAAAA,aAAD;CAAa,KAAKC,wBAAAA,IAAI,IAAI,oBAAoB,IAAI,EAAE,SAAS,CAAC,EAAE,QAAQ;CAAE,GAAI;CAAY;CAAO,CAAA,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/factory\";\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,uBAAA,GAAA,wBAAA,KAA0B;CAC9B,iBAAiB,EACf,SAAS,SACX;CACA,UAAU,EACR,SAAS;EACP,MAAM,CAAC;EACP,OAAO;GACL,mBAAmB;GACnB,iBAAiB;EACnB;EACA,QAAQ;GACN,mBAAmB;GACnB,iBAAiB;EACnB;EACA,OAAO;GACL,mBAAmB;GACnB,iBAAiB;EACnB;CACF,EACF;AACF,CAAC;AAOD,MAAa,iBAAA,GAAA,MAAA,aACV,EAAE,SAAS,KAAK,SAAS,GAAG,SAAS,QACpC,iBAAA,GAAA,kBAAA,KAACA,oBAAAA,aAAD;CAAa,KAAKC,wBAAAA,IAAI,IAAI,oBAAoB,IAAI,EAAE,QAAQ,CAAC,GAAG,OAAO;CAAG,GAAI;CAAY;AAAM,CAAA,CAEpG"}

package/lib/Layout/PageContent.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { type HTMLArkProps } from "@ark-ui/react";
+import { type HTMLArkProps } from "@ark-ui/react/factory";
 import type { StyledProps, RecipeVariantProps } from "@ndla/styled-system/types";
 declare const pageRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<{
     variant: {
@@ -50,5 +50,5 @@ export type PageContentVariantProps = NonNullable<RecipeVariantProps<typeof page
 export interface PageContentProps extends HTMLArkProps<"div">, StyledProps, PageContentVariantProps {
 }
 export declare const PageContent: import("react").ForwardRefExoticComponent<PageContentProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const BleedPageContent: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@ark-ui/react").PolymorphicProps>, {}>;
+export declare const BleedPageContent: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@ark-ui/react/factory").PolymorphicProps>, {}>;
 export {};

package/lib/Layout/PageContent.js

@@ -1,7 +1,7 @@
-let _ark_ui_react = require("@ark-ui/react");
 let _ndla_styled_system_css = require("@ndla/styled-system/css");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react_jsx_runtime = require("react/jsx-runtime");
+let _ark_ui_react_factory = require("@ark-ui/react/factory");
 let react = require("react");
 //#region src/Layout/PageContent.tsx
 /**
@@ -58,7 +58,7 @@ const pageRecipe = (0, _ndla_styled_system_css.cva)({
 		}
 	}
 });
-const StyledPageContent = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react.ark.div, {}, { baseComponent: true });
+const StyledPageContent = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react_factory.ark.div, {}, { baseComponent: true });
 const PageContent = (0, react.forwardRef)(({ variant, gutters, css: cssProp, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledPageContent, {
 	css: _ndla_styled_system_css.css.raw(pageRecipe.raw({
 		variant,
@@ -67,7 +67,7 @@ const PageContent = (0, react.forwardRef)(({ variant, gutters, css: cssProp, ...
 	ref,
 	...props
 }));
-const BleedPageContent = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react.ark.div, { base: { "& ": {
+const BleedPageContent = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react_factory.ark.div, { base: { "& ": {
 	width: "100%",
 	gridColumnStart: "1",
 	gridColumnEnd: "-1"

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 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,cAAA,GAAA,wBAAA,KAAiB;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,qBAAA,GAAA,wBAAA,QAA2BA,cAAAA,IAAI,KAAK,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAMtE,MAAa,eAAA,GAAA,MAAA,aACV,EAAE,SAAS,SAAS,KAAK,SAAS,GAAG,SAAS,QAC7C,iBAAA,GAAA,kBAAA,KAAC,mBAAD;CAAmB,KAAKC,wBAAAA,IAAI,IAAI,WAAW,IAAI;EAAE;EAAS;EAAS,CAAC,EAAE,QAAQ;CAAO;CAAK,GAAI;CAAS,CAAA,CAE1G;AAED,MAAa,oBAAA,GAAA,wBAAA,QACXD,cAAAA,IAAI,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/factory\";\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,cAAA,GAAA,wBAAA,KAAiB;CACrB,MAAM;EACJ,SAAS;EACT,oBAAoB;EACpB,oBAAoB;EACpB,0BAA0B;EAC1B,cAAc;;;;;;EAMd,eAAe;EACf,qBAAqB;EACrB,SAAS;GACP,iBAAiB;GACjB,eAAe;EACjB;CACF;CACA,iBAAiB;EACf,SAAS;EACT,SAAS;CACX;CACA,UAAU;EACR,SAAS;GACP,SAAS,EACP,UAAU,2BACZ;GACA,SAAS,EACP,UAAU,2BACZ;GACA,MAAM,EACJ,UAAU,wBACZ;GACA,MAAM,EACJ,UAAU,wBACZ;EACF;EACA,SAAS;GACP,OAAO,EACL,YAAY,MACd;GACA,UAAU;IACR,YAAY;IACZ,YAAY,EACV,YAAY,iBACd;GACF;GACA,UAAU;IACR,YAAY;IACZ,QAAQ,EACN,YAAY,iBACd;GACF;GACA,QAAQ;IACN,YAAY;IACZ,QAAQ,EACN,YAAY,iBACd;GACF;EACF;CACF;AACF,CAAC;AAED,MAAM,qBAAA,GAAA,wBAAA,QAA2BA,sBAAAA,IAAI,KAAK,CAAC,GAAG,EAAE,eAAe,KAAK,CAAC;AAMrE,MAAa,eAAA,GAAA,MAAA,aACV,EAAE,SAAS,SAAS,KAAK,SAAS,GAAG,SAAS,QAC7C,iBAAA,GAAA,kBAAA,KAAC,mBAAD;CAAmB,KAAKC,wBAAAA,IAAI,IAAI,WAAW,IAAI;EAAE;EAAS;CAAQ,CAAC,GAAG,OAAO;CAAQ;CAAK,GAAI;AAAQ,CAAA,CAE1G;AAEA,MAAa,oBAAA,GAAA,wBAAA,QACXD,sBAAAA,IAAI,KACJ,EACE,MAAM,EACJ,MAAM;CACJ,OAAO;CACP,iBAAiB;CACjB,eAAe;AACjB,EACF,EACF,GACA,EAAE,eAAe,KAAK,CACxB"}

package/lib/ListItem/ListItem.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { type HTMLArkProps } from "@ark-ui/react";
+import { type HTMLArkProps } from "@ark-ui/react/factory";
 import type { StyledProps, RecipeVariantProps } from "@ndla/styled-system/types";
 import { type ImageProps } from "../Image";
 import { type TextProps } from "../Text";
@@ -38,7 +38,7 @@ export declare const listItemRecipe: import("@ndla/styled-system/types").SlotRec
 export type ListItemVariantProps = NonNullable<RecipeVariantProps<typeof listItemRecipe>>;
 export interface ListItemProps extends HTMLArkProps<"div">, StyledProps, ListItemVariantProps {
 }
-export declare const ListItemRoot: import("@ndla/styled-system/jsx").StyleContextProvider<import("react").ForwardRefExoticComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@ark-ui/react").PolymorphicProps>, import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"root" | "content" | "title" | "image", {
+export declare const ListItemRoot: import("@ndla/styled-system/jsx").StyleContextProvider<import("react").ForwardRefExoticComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@ark-ui/react/factory").PolymorphicProps>, import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"root" | "content" | "title" | "image", {
     nonInteractive: {
         false: {
             root: {
@@ -67,6 +67,6 @@ export declare const ListItemRoot: import("@ndla/styled-system/jsx").StyleContex
 interface ListItemHeadingProps extends Omit<HTMLArkProps<"p">, "color">, TextProps {
 }
 export declare const ListItemHeading: import("@ndla/styled-system/jsx").StyleContextConsumer<import("react").ForwardRefExoticComponent<ListItemHeadingProps & import("react").RefAttributes<HTMLHeadingElement>>>;
-export declare const ListItemContent: import("@ndla/styled-system/jsx").StyleContextConsumer<import("react").ForwardRefExoticComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@ark-ui/react").PolymorphicProps>>;
+export declare const ListItemContent: import("@ndla/styled-system/jsx").StyleContextConsumer<import("react").ForwardRefExoticComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@ark-ui/react/factory").PolymorphicProps>>;
 export declare const ListItemImage: import("react").ForwardRefExoticComponent<Omit<ImageProps, "ref"> & import("react").RefAttributes<HTMLImageElement>>;
 export {};

package/lib/ListItem/ListItem.js

@@ -1,9 +1,9 @@
 const require_Image = require("../Image.js");
 const require_Text = require("../Text.js");
-let _ark_ui_react = require("@ark-ui/react");
 let _ndla_styled_system_css = require("@ndla/styled-system/css");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react_jsx_runtime = require("react/jsx-runtime");
+let _ark_ui_react_factory = require("@ark-ui/react/factory");
 let react = require("react");
 //#region src/ListItem/ListItem.tsx
 /**
@@ -77,14 +77,14 @@ const listItemRecipe = (0, _ndla_styled_system_css.sva)({
 	} } }
 });
 const { withProvider, withContext } = (0, _ndla_styled_system_jsx.createStyleContext)(listItemRecipe);
-const ListItemRoot = withProvider(_ark_ui_react.ark.div, "root", { baseComponent: true });
+const ListItemRoot = withProvider(_ark_ui_react_factory.ark.div, "root", { baseComponent: true });
 const ListItemHeading = withContext((0, react.forwardRef)(({ textStyle = "label.medium", fontWeight = "bold", ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Heading, {
 	textStyle,
 	fontWeight,
 	...props,
 	ref
 })), "title");
-const ListItemContent = withContext(_ark_ui_react.ark.div, "content", { baseComponent: true });
+const ListItemContent = withContext(_ark_ui_react_factory.ark.div, "content", { baseComponent: true });
 const InternalListItemImage = withContext(require_Image.Image, "image");
 const ListItemImage = (0, react.forwardRef)(({ variant = "rounded", ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalListItemImage, {
 	variant,

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 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,kBAAA,GAAA,wBAAA,KAAqB;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,iBAAA,GAAA,wBAAA,oBAAmC,eAAe;AAMxE,MAAa,eAAe,aAAaA,cAAAA,IAAI,KAAK,QAAQ,EAAE,eAAe,MAAM,CAAC;AAUlF,MAAa,kBAAkB,aANzB,GAAA,MAAA,aACH,EAAE,YAAY,gBAAgB,aAAa,QAAQ,GAAG,SAAS,QAC9D,iBAAA,GAAA,kBAAA,KAACC,aAAAA,SAAD;CAAoB;CAAuB;CAAY,GAAI;CAAY;CAAO,CAAA,CAIvC,EAAyB,QAAQ;AAE5E,MAAa,kBAAkB,YAAYD,cAAAA,IAAI,KAAK,WAAW,EAAE,eAAe,MAAM,CAAC;AAEvF,MAAM,wBAAwB,YAAYE,cAAAA,OAAO,QAAQ;AAEzD,MAAa,iBAAA,GAAA,MAAA,aAA0D,EAAE,UAAU,WAAW,GAAG,SAAS,QACxG,iBAAA,GAAA,kBAAA,KAAC,uBAAD;CAAgC;CAAS,GAAI;CAAY;CAAO,CAAA,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/factory\";\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,kBAAA,GAAA,wBAAA,KAAqB;CAChC,OAAO;EAAC;EAAQ;EAAS;EAAW;CAAO;CAC3C,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;EACb;EACA,SAAS;GACP,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,KAAK;GACL,OAAO;EACT;EACA,OAAO;GACL,WAAW;GACX,WAAW;GACX,UAAU;GACV,UAAU;GACV,WAAW;EACb;CACF;CACA,iBAAiB,EACf,gBAAgB,MAClB;CACA,UAAU,EACR,gBAAgB,EACd,OAAO;EACL,MAAM;GACJ,cAAc;IACZ,aAAa;IACb,iBAAiB;GACnB;GACA,QAAQ;IACN,aAAa;IACb,iBAAiB;GACnB;GACA,SAAS;IACP,aAAa;IACb,iBAAiB;GACnB;EACF;EACA,OAAO;GACL,gBAAgB;GAChB,QAAQ,EACN,gBAAgB,OAClB;EACF;CACF,EACF,EACF;AACF,CAAC;AAED,MAAM,EAAE,cAAc,iBAAA,GAAA,wBAAA,oBAAmC,cAAc;AAMvE,MAAa,eAAe,aAAaA,sBAAAA,IAAI,KAAK,QAAQ,EAAE,eAAe,KAAK,CAAC;AAUjF,MAAa,kBAAkB,aANzB,GAAA,MAAA,aACH,EAAE,YAAY,gBAAgB,aAAa,QAAQ,GAAG,SAAS,QAC9D,iBAAA,GAAA,kBAAA,KAACC,aAAAA,SAAD;CAAoB;CAAuB;CAAY,GAAI;CAAY;AAAM,CAAA,CAItC,GAAyB,OAAO;AAE3E,MAAa,kBAAkB,YAAYD,sBAAAA,IAAI,KAAK,WAAW,EAAE,eAAe,KAAK,CAAC;AAEtF,MAAM,wBAAwB,YAAYE,cAAAA,OAAO,OAAO;AAExD,MAAa,iBAAA,GAAA,MAAA,aAA0D,EAAE,UAAU,WAAW,GAAG,SAAS,QACxG,iBAAA,GAAA,kBAAA,KAAC,uBAAD;CAAgC;CAAS,GAAI;CAAY;AAAM,CAAA,CAChE"}

package/lib/Menu.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { Menu } from "@ark-ui/react";
+import { Menu } from "@ark-ui/react/menu";
 import type { RecipeVariantProps, StyledProps } from "@ndla/styled-system/types";
 import { type RefAttributes } from "react";
 import { type TextProps } from "./Text";

package/lib/Menu.js

@@ -1,9 +1,9 @@
 const require_Text = require("./Text.js");
-let _ark_ui_react = require("@ark-ui/react");
 let _ndla_styled_system_css = require("@ndla/styled-system/css");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
+let _ark_ui_react_menu = require("@ark-ui/react/menu");
 //#region src/Menu.tsx
 /**
 * Copyright (c) 2024-present, NDLA.
@@ -65,7 +65,7 @@ const itemCva = (0, _ndla_styled_system_css.cva)({
 	} }
 });
 const { withRootProvider, withContext } = (0, _ndla_styled_system_jsx.createStyleContext)((0, _ndla_styled_system_css.sva)({
-	slots: _ark_ui_react.menuAnatomy.keys(),
+	slots: _ark_ui_react_menu.menuAnatomy.keys(),
 	base: {
 		item: itemStyle,
 		triggerItem: itemStyle,
@@ -99,18 +99,18 @@ const { withRootProvider, withContext } = (0, _ndla_styled_system_jsx.createStyl
 		positioner: { zIndex: "dropdown" }
 	}
 }));
-const InternalMenuRoot = withRootProvider(_ark_ui_react.Menu.Root);
+const InternalMenuRoot = withRootProvider(_ark_ui_react_menu.Menu.Root);
 const MenuRoot = ({ lazyMount = true, unmountOnExit = true, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalMenuRoot, {
 	lazyMount,
 	unmountOnExit,
 	...props
 });
-const MenuContentStandalone = withContext(_ark_ui_react.Menu.Content, "content", { baseComponent: true });
+const MenuContentStandalone = withContext(_ark_ui_react_menu.Menu.Content, "content", { baseComponent: true });
 const MenuContent = (0, react.forwardRef)((props, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuPositioner, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuContentStandalone, {
 	ref,
 	...props
 }) }));
-const InternalMenuItemGroupLabel = withContext(_ark_ui_react.Menu.ItemGroupLabel, "itemGroupLabel");
+const InternalMenuItemGroupLabel = withContext(_ark_ui_react_menu.Menu.ItemGroupLabel, "itemGroupLabel");
 const MenuItemGroupLabel = ({ textStyle = "label.medium", fontWeight = "bold", children, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalMenuItemGroupLabel, {
 	...props,
 	asChild: true,
@@ -120,23 +120,23 @@ const MenuItemGroupLabel = ({ textStyle = "label.medium", fontWeight = "bold", c
 		children
 	})
 });
-const MenuItemGroup = withContext(_ark_ui_react.Menu.ItemGroup, "itemGroup", { baseComponent: true });
-const InternalMenuItem = withContext(_ark_ui_react.Menu.Item, "item", { baseComponent: true });
+const MenuItemGroup = withContext(_ark_ui_react_menu.Menu.ItemGroup, "itemGroup", { baseComponent: true });
+const InternalMenuItem = withContext(_ark_ui_react_menu.Menu.Item, "item", { baseComponent: true });
 const MenuItem = (0, react.forwardRef)(({ css: cssProp = {}, variant, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalMenuItem, {
 	css: [itemCva.raw({ variant }), ...Array.isArray(cssProp) ? cssProp : [cssProp]],
 	...props,
 	ref
 }));
-const MenuPositioner = withContext(_ark_ui_react.Menu.Positioner, "positioner", { baseComponent: true });
-const InternalMenuTriggerItem = withContext(_ark_ui_react.Menu.TriggerItem, "triggerItem", { baseComponent: true });
+const MenuPositioner = withContext(_ark_ui_react_menu.Menu.Positioner, "positioner", { baseComponent: true });
+const InternalMenuTriggerItem = withContext(_ark_ui_react_menu.Menu.TriggerItem, "triggerItem", { baseComponent: true });
 const MenuTriggerItem = (0, react.forwardRef)(({ css: cssProp = {}, variant, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalMenuTriggerItem, {
 	css: [itemCva.raw({ variant }), ...Array.isArray(cssProp) ? cssProp : [cssProp]],
 	...props,
 	ref
 }));
-const MenuTrigger = withContext(_ark_ui_react.Menu.Trigger, "trigger", { baseComponent: true });
-const MenuSeparator = withContext(_ark_ui_react.Menu.Separator, "separator", { baseComponent: true });
-const MenuItemText = withContext(_ark_ui_react.Menu.ItemText, "itemText", { baseComponent: true });
+const MenuTrigger = withContext(_ark_ui_react_menu.Menu.Trigger, "trigger", { baseComponent: true });
+const MenuSeparator = withContext(_ark_ui_react_menu.Menu.Separator, "separator", { baseComponent: true });
+const MenuItemText = withContext(_ark_ui_react_menu.Menu.ItemText, "itemText", { baseComponent: true });
 //#endregion
 exports.MenuContent = MenuContent;
 exports.MenuContentStandalone = MenuContentStandalone;