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

package/es/Dialog.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.mjs","names":["useDialog","_useDialog"],"sources":["../src/Dialog.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 { Dialog, dialogAnatomy, useDialog as _useDialog } from \"@ark-ui/react\";\nimport { type RecipeVariantProps, sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext, styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef, type RefAttributes } from \"react\";\nimport { Heading, Text, type TextProps } from \"./Text\";\n\nconst dialogRecipe = sva({\n  slots: dialogAnatomy.keys(),\n  base: {\n    backdrop: {\n      position: \"fixed\",\n      height: \"100vh\",\n      width: \"100vw\",\n      left: \"0\",\n      top: \"0\",\n      // TODO: Consider if this should be a token. It's probably consistent enough between dark and light mode to be a token.\n      background: \"rgba(1, 1, 1, 0.3)\",\n      _open: {\n        animation: \"backdrop-in\",\n        _motionReduce: {\n          animation: \"none\",\n        },\n      },\n      _closed: {\n        animation: \"backdrop-out\",\n        _motionReduce: {\n          animation: \"none\",\n        },\n      },\n    },\n    positioner: {\n      position: \"fixed\",\n      display: \"flex\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n      overflow: \"hidden\",\n      left: \"0\",\n      top: \"0\",\n      width: \"100vw\",\n      height: \"100dvh\",\n    },\n    content: {\n      \"--margin\": \"token(sizes.medium)\",\n      position: \"relative\",\n      background: \"surface.default\",\n      boxShadow: \"xlarge\",\n      height: \"min-content\",\n      maxWidth: \"95%\",\n      maxHeight: \"95%\",\n      margin: \"auto\",\n      overflowY: \"auto\",\n      borderRadius: { base: \"sharp\", tablet: \"small\" },\n      paddingBlockStart: \"env(safe-area-inset-top)\",\n      paddingBlockEnd: \"env(safe-area-inset-bottom)\",\n      paddingInlineStart: \"env(safe-area-inset-left)\",\n      paddingInlineEnd: \"env(safe-area-inset-right)\",\n      tabletDown: {\n        \"--margin\": \"0px\",\n        minWidth: \"100%\",\n        minHeight: \"100%\",\n      },\n    },\n  },\n  defaultVariants: {\n    size: \"medium\",\n    position: \"center\",\n    variant: \"dialog\",\n    context: \"dialog\",\n  },\n  compoundVariants: [\n    {\n      variant: \"drawer\",\n      position: \"left\",\n      css: {\n        content: {\n          minHeight: \"100%\",\n          maxHeight: \"100%\",\n          width: \"var(--size)\",\n          _open: {\n            animation: \"drawer-in-left\",\n            _motionReduce: {\n              animation: \"none\",\n            },\n          },\n          _closed: {\n            animation: \"drawer-out-left\",\n            _motionReduce: {\n              animation: \"none\",\n            },\n          },\n        },\n      },\n    },\n    {\n      variant: \"drawer\",\n      position: \"right\",\n      css: {\n        content: {\n          minHeight: \"100%\",\n          maxHeight: \"100%\",\n          width: \"var(--size)\",\n          _open: {\n            animation: \"drawer-in-right\",\n            _motionReduce: {\n              animation: \"none\",\n            },\n          },\n          _closed: {\n            animation: \"drawer-out-right\",\n            _motionReduce: {\n              animation: \"none\",\n            },\n          },\n        },\n      },\n    },\n    {\n      variant: \"drawer\",\n      position: \"top\",\n      css: {\n        content: {\n          minWidth: \"100%\",\n          maxWidth: \"100%\",\n          height: \"var(--size)\",\n          _open: {\n            animation: \"drawer-in-top\",\n            _motionReduce: {\n              animation: \"none\",\n            },\n          },\n          _closed: {\n            animation: \"drawer-out-top\",\n            _motionReduce: {\n              animation: \"none\",\n            },\n          },\n        },\n      },\n    },\n    {\n      variant: \"drawer\",\n      position: \"bottom\",\n      css: {\n        content: {\n          minWidth: \"100%\",\n          maxWidth: \"100%\",\n          height: \"var(--size)\",\n          _open: {\n            animation: \"drawer-in-bottom\",\n            _motionReduce: {\n              animation: \"none\",\n            },\n          },\n          _closed: {\n            animation: \"drawer-out-bottom\",\n            _motionReduce: {\n              animation: \"none\",\n            },\n          },\n        },\n      },\n    },\n    {\n      variant: \"drawer\",\n      size: \"xsmall\",\n      css: {\n        content: {\n          \"--size\": \"sizes.surface.3xsmall\",\n        },\n      },\n    },\n    {\n      variant: \"drawer\",\n      size: \"small\",\n      css: {\n        content: {\n          \"--size\": \"sizes.surface.xsmall\",\n        },\n      },\n    },\n    {\n      variant: \"drawer\",\n      size: \"medium\",\n      css: {\n        content: {\n          \"--size\": \"sizes.surface.medium\",\n        },\n      },\n    },\n    {\n      variant: \"drawer\",\n      size: \"large\",\n      css: {\n        content: {\n          \"--size\": \"sizes.surface.xlarge\",\n        },\n      },\n    },\n  ],\n  variants: {\n    context: {\n      dialog: {\n        positioner: {\n          zIndex: \"modal\",\n        },\n        backdrop: {\n          zIndex: \"overlay\",\n        },\n      },\n      alert: {\n        positioner: {\n          zIndex: \"alertModal\",\n        },\n        backdrop: {\n          zIndex: \"alertModalOverlay\",\n        },\n      },\n    },\n    variant: {\n      drawer: {\n        content: {\n          \"--margin\": \"0px\",\n          borderRadius: { base: \"sharp\", tablet: \"sharp\" },\n        },\n      },\n      dialog: {\n        content: {\n          width: \"var(--size)\",\n          _open: {\n            animation: \"dialog-in\",\n            _motionReduce: {\n              animation: \"none\",\n            },\n          },\n          _closed: {\n            animation: \"dialog-out\",\n            _motionReduce: {\n              animation: \"none\",\n            },\n          },\n        },\n      },\n    },\n    position: {\n      left: {\n        content: {\n          marginInlineStart: \"var(--margin)\",\n        },\n      },\n      center: {},\n      right: {\n        content: {\n          marginInlineEnd: \"var(--margin)\",\n        },\n      },\n      bottom: {\n        content: {\n          marginBlockEnd: \"var(--margin)\",\n        },\n      },\n      top: {\n        content: {\n          marginBlockStart: \"var(--margin)\",\n        },\n      },\n    },\n    size: {\n      full: {\n        content: {\n          \"--margin\": \"0px\",\n          minHeight: \"100%\",\n          minWidth: \"100%\",\n          borderRadius: \"sharp\",\n        },\n      },\n      xsmall: {\n        content: {\n          \"--size\": \"sizes.surface.xsmall\",\n        },\n      },\n      small: {\n        content: {\n          \"--size\": \"sizes.surface.medium\",\n        },\n      },\n      medium: {\n        content: {\n          \"--size\": \"sizes.surface.xlarge\",\n        },\n      },\n      large: {\n        content: {\n          \"--size\": \"sizes.surface.4xlarge\",\n        },\n      },\n    },\n  },\n});\n\nconst { withRootProvider, withContext } = createStyleContext(dialogRecipe);\n\nexport type DialogVariantProps = NonNullable<RecipeVariantProps<typeof dialogRecipe>>;\n\nexport interface DialogRootProps extends Dialog.RootProps, DialogVariantProps {}\n\nexport const InternalDialogRoot = withRootProvider(Dialog.Root);\n\nexport const DialogRoot = ({ lazyMount = true, unmountOnExit = true, ...props }: DialogRootProps) => (\n  <InternalDialogRoot lazyMount={lazyMount} unmountOnExit={unmountOnExit} {...props} />\n);\n\nexport const DialogBackdrop = withContext(Dialog.Backdrop, \"backdrop\", { baseComponent: true });\n\nexport const DialogStandaloneContent = withContext(Dialog.Content, \"content\", { baseComponent: true });\n\nexport const DialogPositioner = withContext(Dialog.Positioner, \"positioner\", { baseComponent: true });\n\ninterface DialogContentProps extends Dialog.ContentProps, StyledProps {}\n\nexport const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>((props, ref) => (\n  <>\n    <DialogBackdrop />\n    <DialogPositioner>\n      <DialogStandaloneContent ref={ref} {...props} />\n    </DialogPositioner>\n  </>\n));\n\nconst InternalDialogDescription = withContext(Dialog.Description, \"description\");\n\ninterface DialogDescriptionProps\n  extends Omit<Dialog.DescriptionProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLParagraphElement> {}\n\nexport const DialogDescription = ({ textStyle = \"body.large\", children, ...rest }: DialogDescriptionProps) => {\n  return (\n    <InternalDialogDescription asChild>\n      <Text textStyle={textStyle} {...rest}>\n        {children}\n      </Text>\n    </InternalDialogDescription>\n  );\n};\n\nconst InternalDialogTitle = withContext(Dialog.Title, \"title\");\n\ninterface DialogTitleProps\n  extends Omit<Dialog.TitleProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLHeadingElement> {}\n\nexport const DialogTitle = ({ textStyle = \"title.medium\", children, ...rest }: DialogTitleProps) => (\n  <InternalDialogTitle asChild>\n    <Heading textStyle={textStyle} {...rest}>\n      {children}\n    </Heading>\n  </InternalDialogTitle>\n);\n\nexport const DialogTrigger = withContext(Dialog.Trigger, \"trigger\", { baseComponent: true });\n\nexport const DialogCloseTrigger = withContext(Dialog.CloseTrigger, \"closeTrigger\", { baseComponent: true });\n\nexport const DialogHeader = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    paddingInline: \"medium\",\n    paddingBlockStart: \"medium\",\n    justifyContent: \"space-between\",\n    alignItems: \"center\",\n    gap: \"xsmall\",\n  },\n});\n\nexport const DialogBody = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"xsmall\",\n    paddingInline: \"medium\",\n    paddingBlockStart: \"small\",\n    paddingBlockEnd: \"medium\",\n  },\n});\n\nexport const DialogFooter = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    gap: \"3xsmall\",\n    alignItems: \"center\",\n    justifyContent: \"flex-end\",\n    paddingInline: \"medium\",\n    paddingBlockStart: \"small\",\n    paddingBlockEnd: \"medium\",\n  },\n});\n\nexport const DialogRootProvider = withRootProvider(Dialog.RootProvider);\n\nexport const useDialog = _useDialog;\n"],"mappings":";;;;;;;;;;;;;;;AAoTA,MAAM,EAAE,kBAAkB,gBAAgB,mBArSrB,IAAI;CACvB,OAAO,cAAc,MAAM;CAC3B,MAAM;EACJ,UAAU;GACR,UAAU;GACV,QAAQ;GACR,OAAO;GACP,MAAM;GACN,KAAK;GAEL,YAAY;GACZ,OAAO;IACL,WAAW;IACX,eAAe,EACb,WAAW,QACZ;IACF;GACD,SAAS;IACP,WAAW;IACX,eAAe,EACb,WAAW,QACZ;IACF;GACF;EACD,YAAY;GACV,UAAU;GACV,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,UAAU;GACV,MAAM;GACN,KAAK;GACL,OAAO;GACP,QAAQ;GACT;EACD,SAAS;GACP,YAAY;GACZ,UAAU;GACV,YAAY;GACZ,WAAW;GACX,QAAQ;GACR,UAAU;GACV,WAAW;GACX,QAAQ;GACR,WAAW;GACX,cAAc;IAAE,MAAM;IAAS,QAAQ;IAAS;GAChD,mBAAmB;GACnB,iBAAiB;GACjB,oBAAoB;GACpB,kBAAkB;GAClB,YAAY;IACV,YAAY;IACZ,UAAU;IACV,WAAW;IACZ;GACF;EACF;CACD,iBAAiB;EACf,MAAM;EACN,UAAU;EACV,SAAS;EACT,SAAS;EACV;CACD,kBAAkB;EAChB;GACE,SAAS;GACT,UAAU;GACV,KAAK,EACH,SAAS;IACP,WAAW;IACX,WAAW;IACX,OAAO;IACP,OAAO;KACL,WAAW;KACX,eAAe,EACb,WAAW,QACZ;KACF;IACD,SAAS;KACP,WAAW;KACX,eAAe,EACb,WAAW,QACZ;KACF;IACF,EACF;GACF;EACD;GACE,SAAS;GACT,UAAU;GACV,KAAK,EACH,SAAS;IACP,WAAW;IACX,WAAW;IACX,OAAO;IACP,OAAO;KACL,WAAW;KACX,eAAe,EACb,WAAW,QACZ;KACF;IACD,SAAS;KACP,WAAW;KACX,eAAe,EACb,WAAW,QACZ;KACF;IACF,EACF;GACF;EACD;GACE,SAAS;GACT,UAAU;GACV,KAAK,EACH,SAAS;IACP,UAAU;IACV,UAAU;IACV,QAAQ;IACR,OAAO;KACL,WAAW;KACX,eAAe,EACb,WAAW,QACZ;KACF;IACD,SAAS;KACP,WAAW;KACX,eAAe,EACb,WAAW,QACZ;KACF;IACF,EACF;GACF;EACD;GACE,SAAS;GACT,UAAU;GACV,KAAK,EACH,SAAS;IACP,UAAU;IACV,UAAU;IACV,QAAQ;IACR,OAAO;KACL,WAAW;KACX,eAAe,EACb,WAAW,QACZ;KACF;IACD,SAAS;KACP,WAAW;KACX,eAAe,EACb,WAAW,QACZ;KACF;IACF,EACF;GACF;EACD;GACE,SAAS;GACT,MAAM;GACN,KAAK,EACH,SAAS,EACP,UAAU,yBACX,EACF;GACF;EACD;GACE,SAAS;GACT,MAAM;GACN,KAAK,EACH,SAAS,EACP,UAAU,wBACX,EACF;GACF;EACD;GACE,SAAS;GACT,MAAM;GACN,KAAK,EACH,SAAS,EACP,UAAU,wBACX,EACF;GACF;EACD;GACE,SAAS;GACT,MAAM;GACN,KAAK,EACH,SAAS,EACP,UAAU,wBACX,EACF;GACF;EACF;CACD,UAAU;EACR,SAAS;GACP,QAAQ;IACN,YAAY,EACV,QAAQ,SACT;IACD,UAAU,EACR,QAAQ,WACT;IACF;GACD,OAAO;IACL,YAAY,EACV,QAAQ,cACT;IACD,UAAU,EACR,QAAQ,qBACT;IACF;GACF;EACD,SAAS;GACP,QAAQ,EACN,SAAS;IACP,YAAY;IACZ,cAAc;KAAE,MAAM;KAAS,QAAQ;KAAS;IACjD,EACF;GACD,QAAQ,EACN,SAAS;IACP,OAAO;IACP,OAAO;KACL,WAAW;KACX,eAAe,EACb,WAAW,QACZ;KACF;IACD,SAAS;KACP,WAAW;KACX,eAAe,EACb,WAAW,QACZ;KACF;IACF,EACF;GACF;EACD,UAAU;GACR,MAAM,EACJ,SAAS,EACP,mBAAmB,iBACpB,EACF;GACD,QAAQ,EAAE;GACV,OAAO,EACL,SAAS,EACP,iBAAiB,iBAClB,EACF;GACD,QAAQ,EACN,SAAS,EACP,gBAAgB,iBACjB,EACF;GACD,KAAK,EACH,SAAS,EACP,kBAAkB,iBACnB,EACF;GACF;EACD,MAAM;GACJ,MAAM,EACJ,SAAS;IACP,YAAY;IACZ,WAAW;IACX,UAAU;IACV,cAAc;IACf,EACF;GACD,QAAQ,EACN,SAAS,EACP,UAAU,wBACX,EACF;GACD,OAAO,EACL,SAAS,EACP,UAAU,wBACX,EACF;GACD,QAAQ,EACN,SAAS,EACP,UAAU,wBACX,EACF;GACD,OAAO,EACL,SAAS,EACP,UAAU,yBACX,EACF;GACF;EACF;CACF,CAAC,CAEwE;AAM1E,MAAa,qBAAqB,iBAAiB,OAAO,KAAK;AAE/D,MAAa,cAAc,EAAE,YAAY,MAAM,gBAAgB,MAAM,GAAG,YACtE,oBAAC;CAA8B;CAA0B;CAAe,GAAI;EAAS;AAGvF,MAAa,iBAAiB,YAAY,OAAO,UAAU,YAAY,EAAE,eAAe,MAAM,CAAC;AAE/F,MAAa,0BAA0B,YAAY,OAAO,SAAS,WAAW,EAAE,eAAe,MAAM,CAAC;AAEtG,MAAa,mBAAmB,YAAY,OAAO,YAAY,cAAc,EAAE,eAAe,MAAM,CAAC;AAIrG,MAAa,gBAAgB,YAAgD,OAAO,QAClF,4CACE,oBAAC,mBAAiB,EAClB,oBAAC,8BACC,oBAAC;CAA6B;CAAK,GAAI;EAAS,GAC/B,IAClB,CACH;AAEF,MAAM,4BAA4B,YAAY,OAAO,aAAa,cAAc;AAKhF,MAAa,qBAAqB,EAAE,YAAY,cAAc,UAAU,GAAG,WAAmC;AAC5G,QACE,oBAAC;EAA0B;YACzB,oBAAC;GAAgB;GAAW,GAAI;GAC7B;IACI;GACmB;;AAIhC,MAAM,sBAAsB,YAAY,OAAO,OAAO,QAAQ;AAK9D,MAAa,eAAe,EAAE,YAAY,gBAAgB,UAAU,GAAG,WACrE,oBAAC;CAAoB;WACnB,oBAAC;EAAmB;EAAW,GAAI;EAChC;GACO;EACU;AAGxB,MAAa,gBAAgB,YAAY,OAAO,SAAS,WAAW,EAAE,eAAe,MAAM,CAAC;AAE5F,MAAa,qBAAqB,YAAY,OAAO,cAAc,gBAAgB,EAAE,eAAe,MAAM,CAAC;AAE3G,MAAa,eAAe,OAAO,OAAO,EACxC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,mBAAmB;CACnB,gBAAgB;CAChB,YAAY;CACZ,KAAK;CACN,EACF,CAAC;AAEF,MAAa,aAAa,OAAO,OAAO,EACtC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,eAAe;CACf,mBAAmB;CACnB,iBAAiB;CAClB,EACF,CAAC;AAEF,MAAa,eAAe,OAAO,OAAO,EACxC,MAAM;CACJ,SAAS;CACT,KAAK;CACL,YAAY;CACZ,gBAAgB;CAChB,eAAe;CACf,mBAAmB;CACnB,iBAAiB;CAClB,EACF,CAAC;AAEF,MAAa,qBAAqB,iBAAiB,OAAO,aAAa;AAEvE,MAAaA,cAAYC"}
+{"version":3,"file":"Dialog.mjs","names":["useDialog","_useDialog"],"sources":["../src/Dialog.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 { Dialog, dialogAnatomy, useDialog as _useDialog } from \"@ark-ui/react\";\nimport { type RecipeVariantProps, sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext, styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef, type RefAttributes } from \"react\";\nimport { Heading, Text, type TextProps } from \"./Text\";\n\nconst dialogRecipe = sva({\n  slots: dialogAnatomy.keys(),\n  base: {\n    backdrop: {\n      position: \"fixed\",\n      height: \"100vh\",\n      width: \"100vw\",\n      left: \"0\",\n      top: \"0\",\n      // TODO: Consider if this should be a token. It's probably consistent enough between dark and light mode to be a token.\n      background: \"rgba(1, 1, 1, 0.3)\",\n      _open: {\n        animation: \"backdrop-in\",\n        _motionReduce: {\n          animation: \"none\",\n        },\n      },\n      _closed: {\n        animation: \"backdrop-out\",\n        _motionReduce: {\n          animation: \"none\",\n        },\n      },\n    },\n    positioner: {\n      position: \"fixed\",\n      display: \"flex\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n      overflow: \"hidden\",\n      left: \"0\",\n      top: \"0\",\n      width: \"100vw\",\n      height: \"100dvh\",\n    },\n    content: {\n      \"--margin\": \"token(sizes.medium)\",\n      position: \"relative\",\n      background: \"surface.default\",\n      boxShadow: \"xlarge\",\n      height: \"min-content\",\n      maxWidth: \"95%\",\n      maxHeight: \"95%\",\n      margin: \"auto\",\n      overflowY: \"auto\",\n      borderRadius: { base: \"sharp\", tablet: \"small\" },\n      paddingBlockStart: \"env(safe-area-inset-top)\",\n      paddingBlockEnd: \"env(safe-area-inset-bottom)\",\n      paddingInlineStart: \"env(safe-area-inset-left)\",\n      paddingInlineEnd: \"env(safe-area-inset-right)\",\n      tabletDown: {\n        \"--margin\": \"0px\",\n        minWidth: \"100%\",\n        minHeight: \"100%\",\n      },\n    },\n  },\n  defaultVariants: {\n    size: \"medium\",\n    position: \"center\",\n    variant: \"dialog\",\n    context: \"dialog\",\n  },\n  compoundVariants: [\n    {\n      variant: \"drawer\",\n      position: \"left\",\n      css: {\n        content: {\n          minHeight: \"100%\",\n          maxHeight: \"100%\",\n          width: \"var(--size)\",\n          _open: {\n            animation: \"drawer-in-left\",\n            _motionReduce: {\n              animation: \"none\",\n            },\n          },\n          _closed: {\n            animation: \"drawer-out-left\",\n            _motionReduce: {\n              animation: \"none\",\n            },\n          },\n        },\n      },\n    },\n    {\n      variant: \"drawer\",\n      position: \"right\",\n      css: {\n        content: {\n          minHeight: \"100%\",\n          maxHeight: \"100%\",\n          width: \"var(--size)\",\n          _open: {\n            animation: \"drawer-in-right\",\n            _motionReduce: {\n              animation: \"none\",\n            },\n          },\n          _closed: {\n            animation: \"drawer-out-right\",\n            _motionReduce: {\n              animation: \"none\",\n            },\n          },\n        },\n      },\n    },\n    {\n      variant: \"drawer\",\n      position: \"top\",\n      css: {\n        content: {\n          minWidth: \"100%\",\n          maxWidth: \"100%\",\n          height: \"var(--size)\",\n          _open: {\n            animation: \"drawer-in-top\",\n            _motionReduce: {\n              animation: \"none\",\n            },\n          },\n          _closed: {\n            animation: \"drawer-out-top\",\n            _motionReduce: {\n              animation: \"none\",\n            },\n          },\n        },\n      },\n    },\n    {\n      variant: \"drawer\",\n      position: \"bottom\",\n      css: {\n        content: {\n          minWidth: \"100%\",\n          maxWidth: \"100%\",\n          height: \"var(--size)\",\n          _open: {\n            animation: \"drawer-in-bottom\",\n            _motionReduce: {\n              animation: \"none\",\n            },\n          },\n          _closed: {\n            animation: \"drawer-out-bottom\",\n            _motionReduce: {\n              animation: \"none\",\n            },\n          },\n        },\n      },\n    },\n    {\n      variant: \"drawer\",\n      size: \"xsmall\",\n      css: {\n        content: {\n          \"--size\": \"sizes.surface.3xsmall\",\n        },\n      },\n    },\n    {\n      variant: \"drawer\",\n      size: \"small\",\n      css: {\n        content: {\n          \"--size\": \"sizes.surface.xsmall\",\n        },\n      },\n    },\n    {\n      variant: \"drawer\",\n      size: \"medium\",\n      css: {\n        content: {\n          \"--size\": \"sizes.surface.medium\",\n        },\n      },\n    },\n    {\n      variant: \"drawer\",\n      size: \"large\",\n      css: {\n        content: {\n          \"--size\": \"sizes.surface.xlarge\",\n        },\n      },\n    },\n  ],\n  variants: {\n    context: {\n      dialog: {\n        positioner: {\n          zIndex: \"modal\",\n        },\n        backdrop: {\n          zIndex: \"overlay\",\n        },\n      },\n      alert: {\n        positioner: {\n          zIndex: \"alertModal\",\n        },\n        backdrop: {\n          zIndex: \"alertModalOverlay\",\n        },\n      },\n    },\n    variant: {\n      drawer: {\n        content: {\n          \"--margin\": \"0px\",\n          borderRadius: { base: \"sharp\", tablet: \"sharp\" },\n        },\n      },\n      dialog: {\n        content: {\n          width: \"var(--size)\",\n          _open: {\n            animation: \"dialog-in\",\n            _motionReduce: {\n              animation: \"none\",\n            },\n          },\n          _closed: {\n            animation: \"dialog-out\",\n            _motionReduce: {\n              animation: \"none\",\n            },\n          },\n        },\n      },\n    },\n    position: {\n      left: {\n        content: {\n          marginInlineStart: \"var(--margin)\",\n        },\n      },\n      center: {},\n      right: {\n        content: {\n          marginInlineEnd: \"var(--margin)\",\n        },\n      },\n      bottom: {\n        content: {\n          marginBlockEnd: \"var(--margin)\",\n        },\n      },\n      top: {\n        content: {\n          marginBlockStart: \"var(--margin)\",\n        },\n      },\n    },\n    size: {\n      full: {\n        content: {\n          \"--margin\": \"0px\",\n          minHeight: \"100%\",\n          minWidth: \"100%\",\n          borderRadius: \"sharp\",\n        },\n      },\n      xsmall: {\n        content: {\n          \"--size\": \"sizes.surface.xsmall\",\n        },\n      },\n      small: {\n        content: {\n          \"--size\": \"sizes.surface.medium\",\n        },\n      },\n      medium: {\n        content: {\n          \"--size\": \"sizes.surface.xlarge\",\n        },\n      },\n      large: {\n        content: {\n          \"--size\": \"sizes.surface.4xlarge\",\n        },\n      },\n    },\n  },\n});\n\nconst { withRootProvider, withContext } = createStyleContext(dialogRecipe);\n\nexport type DialogVariantProps = NonNullable<RecipeVariantProps<typeof dialogRecipe>>;\n\nexport interface DialogRootProps extends Dialog.RootProps, DialogVariantProps {}\n\nexport const InternalDialogRoot = withRootProvider(Dialog.Root);\n\nexport const DialogRoot = ({ lazyMount = true, unmountOnExit = true, ...props }: DialogRootProps) => (\n  <InternalDialogRoot lazyMount={lazyMount} unmountOnExit={unmountOnExit} {...props} />\n);\n\nexport const DialogBackdrop = withContext(Dialog.Backdrop, \"backdrop\", { baseComponent: true });\n\nexport const DialogStandaloneContent = withContext(Dialog.Content, \"content\", { baseComponent: true });\n\nexport const DialogPositioner = withContext(Dialog.Positioner, \"positioner\", { baseComponent: true });\n\ninterface DialogContentProps extends Dialog.ContentProps, StyledProps {}\n\nexport const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>((props, ref) => (\n  <>\n    <DialogBackdrop />\n    <DialogPositioner>\n      <DialogStandaloneContent ref={ref} {...props} />\n    </DialogPositioner>\n  </>\n));\n\nconst InternalDialogDescription = withContext(Dialog.Description, \"description\");\n\ninterface DialogDescriptionProps\n  extends Omit<Dialog.DescriptionProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLParagraphElement> {}\n\nexport const DialogDescription = ({ textStyle = \"body.large\", children, ...rest }: DialogDescriptionProps) => {\n  return (\n    <InternalDialogDescription asChild>\n      <Text textStyle={textStyle} {...rest}>\n        {children}\n      </Text>\n    </InternalDialogDescription>\n  );\n};\n\nconst InternalDialogTitle = withContext(Dialog.Title, \"title\");\n\ninterface DialogTitleProps\n  extends Omit<Dialog.TitleProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLHeadingElement> {}\n\nexport const DialogTitle = ({ textStyle = \"title.medium\", children, ...rest }: DialogTitleProps) => (\n  <InternalDialogTitle asChild>\n    <Heading textStyle={textStyle} {...rest}>\n      {children}\n    </Heading>\n  </InternalDialogTitle>\n);\n\nexport const DialogTrigger = withContext(Dialog.Trigger, \"trigger\", { baseComponent: true });\n\nexport const DialogCloseTrigger = withContext(Dialog.CloseTrigger, \"closeTrigger\", { baseComponent: true });\n\nexport const DialogHeader = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    paddingInline: \"medium\",\n    paddingBlockStart: \"medium\",\n    justifyContent: \"space-between\",\n    alignItems: \"center\",\n    gap: \"xsmall\",\n  },\n});\n\nexport const DialogBody = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"xsmall\",\n    paddingInline: \"medium\",\n    paddingBlockStart: \"small\",\n    paddingBlockEnd: \"medium\",\n  },\n});\n\nexport const DialogFooter = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    gap: \"3xsmall\",\n    alignItems: \"center\",\n    justifyContent: \"flex-end\",\n    paddingInline: \"medium\",\n    paddingBlockStart: \"small\",\n    paddingBlockEnd: \"medium\",\n  },\n});\n\nexport const DialogRootProvider = withRootProvider(Dialog.RootProvider);\n\nexport const useDialog = _useDialog;\n"],"mappings":";;;;;;;;;;;;;;AAoTA,MAAM,EAAE,kBAAkB,gBAAgB,mBArSrB,IAAI;CACvB,OAAO,cAAc,MAAM;CAC3B,MAAM;EACJ,UAAU;GACR,UAAU;GACV,QAAQ;GACR,OAAO;GACP,MAAM;GACN,KAAK;GAEL,YAAY;GACZ,OAAO;IACL,WAAW;IACX,eAAe,EACb,WAAW,QACZ;IACF;GACD,SAAS;IACP,WAAW;IACX,eAAe,EACb,WAAW,QACZ;IACF;GACF;EACD,YAAY;GACV,UAAU;GACV,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,UAAU;GACV,MAAM;GACN,KAAK;GACL,OAAO;GACP,QAAQ;GACT;EACD,SAAS;GACP,YAAY;GACZ,UAAU;GACV,YAAY;GACZ,WAAW;GACX,QAAQ;GACR,UAAU;GACV,WAAW;GACX,QAAQ;GACR,WAAW;GACX,cAAc;IAAE,MAAM;IAAS,QAAQ;IAAS;GAChD,mBAAmB;GACnB,iBAAiB;GACjB,oBAAoB;GACpB,kBAAkB;GAClB,YAAY;IACV,YAAY;IACZ,UAAU;IACV,WAAW;IACZ;GACF;EACF;CACD,iBAAiB;EACf,MAAM;EACN,UAAU;EACV,SAAS;EACT,SAAS;EACV;CACD,kBAAkB;EAChB;GACE,SAAS;GACT,UAAU;GACV,KAAK,EACH,SAAS;IACP,WAAW;IACX,WAAW;IACX,OAAO;IACP,OAAO;KACL,WAAW;KACX,eAAe,EACb,WAAW,QACZ;KACF;IACD,SAAS;KACP,WAAW;KACX,eAAe,EACb,WAAW,QACZ;KACF;IACF,EACF;GACF;EACD;GACE,SAAS;GACT,UAAU;GACV,KAAK,EACH,SAAS;IACP,WAAW;IACX,WAAW;IACX,OAAO;IACP,OAAO;KACL,WAAW;KACX,eAAe,EACb,WAAW,QACZ;KACF;IACD,SAAS;KACP,WAAW;KACX,eAAe,EACb,WAAW,QACZ;KACF;IACF,EACF;GACF;EACD;GACE,SAAS;GACT,UAAU;GACV,KAAK,EACH,SAAS;IACP,UAAU;IACV,UAAU;IACV,QAAQ;IACR,OAAO;KACL,WAAW;KACX,eAAe,EACb,WAAW,QACZ;KACF;IACD,SAAS;KACP,WAAW;KACX,eAAe,EACb,WAAW,QACZ;KACF;IACF,EACF;GACF;EACD;GACE,SAAS;GACT,UAAU;GACV,KAAK,EACH,SAAS;IACP,UAAU;IACV,UAAU;IACV,QAAQ;IACR,OAAO;KACL,WAAW;KACX,eAAe,EACb,WAAW,QACZ;KACF;IACD,SAAS;KACP,WAAW;KACX,eAAe,EACb,WAAW,QACZ;KACF;IACF,EACF;GACF;EACD;GACE,SAAS;GACT,MAAM;GACN,KAAK,EACH,SAAS,EACP,UAAU,yBACX,EACF;GACF;EACD;GACE,SAAS;GACT,MAAM;GACN,KAAK,EACH,SAAS,EACP,UAAU,wBACX,EACF;GACF;EACD;GACE,SAAS;GACT,MAAM;GACN,KAAK,EACH,SAAS,EACP,UAAU,wBACX,EACF;GACF;EACD;GACE,SAAS;GACT,MAAM;GACN,KAAK,EACH,SAAS,EACP,UAAU,wBACX,EACF;GACF;EACF;CACD,UAAU;EACR,SAAS;GACP,QAAQ;IACN,YAAY,EACV,QAAQ,SACT;IACD,UAAU,EACR,QAAQ,WACT;IACF;GACD,OAAO;IACL,YAAY,EACV,QAAQ,cACT;IACD,UAAU,EACR,QAAQ,qBACT;IACF;GACF;EACD,SAAS;GACP,QAAQ,EACN,SAAS;IACP,YAAY;IACZ,cAAc;KAAE,MAAM;KAAS,QAAQ;KAAS;IACjD,EACF;GACD,QAAQ,EACN,SAAS;IACP,OAAO;IACP,OAAO;KACL,WAAW;KACX,eAAe,EACb,WAAW,QACZ;KACF;IACD,SAAS;KACP,WAAW;KACX,eAAe,EACb,WAAW,QACZ;KACF;IACF,EACF;GACF;EACD,UAAU;GACR,MAAM,EACJ,SAAS,EACP,mBAAmB,iBACpB,EACF;GACD,QAAQ,EAAE;GACV,OAAO,EACL,SAAS,EACP,iBAAiB,iBAClB,EACF;GACD,QAAQ,EACN,SAAS,EACP,gBAAgB,iBACjB,EACF;GACD,KAAK,EACH,SAAS,EACP,kBAAkB,iBACnB,EACF;GACF;EACD,MAAM;GACJ,MAAM,EACJ,SAAS;IACP,YAAY;IACZ,WAAW;IACX,UAAU;IACV,cAAc;IACf,EACF;GACD,QAAQ,EACN,SAAS,EACP,UAAU,wBACX,EACF;GACD,OAAO,EACL,SAAS,EACP,UAAU,wBACX,EACF;GACD,QAAQ,EACN,SAAS,EACP,UAAU,wBACX,EACF;GACD,OAAO,EACL,SAAS,EACP,UAAU,yBACX,EACF;GACF;EACF;CACF,CAAC,CAEwE;AAM1E,MAAa,qBAAqB,iBAAiB,OAAO,KAAK;AAE/D,MAAa,cAAc,EAAE,YAAY,MAAM,gBAAgB,MAAM,GAAG,YACtE,oBAAC,oBAAD;CAA+B;CAA0B;CAAe,GAAI;CAAS,CAAA;AAGvF,MAAa,iBAAiB,YAAY,OAAO,UAAU,YAAY,EAAE,eAAe,MAAM,CAAC;AAE/F,MAAa,0BAA0B,YAAY,OAAO,SAAS,WAAW,EAAE,eAAe,MAAM,CAAC;AAEtG,MAAa,mBAAmB,YAAY,OAAO,YAAY,cAAc,EAAE,eAAe,MAAM,CAAC;AAIrG,MAAa,gBAAgB,YAAgD,OAAO,QAClF,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,gBAAD,EAAkB,CAAA,EAClB,oBAAC,kBAAD,EAAA,UACE,oBAAC,yBAAD;CAA8B;CAAK,GAAI;CAAS,CAAA,EAC/B,CAAA,CAClB,EAAA,CAAA,CACH;AAEF,MAAM,4BAA4B,YAAY,OAAO,aAAa,cAAc;AAKhF,MAAa,qBAAqB,EAAE,YAAY,cAAc,UAAU,GAAG,WAAmC;AAC5G,QACE,oBAAC,2BAAD;EAA2B,SAAA;YACzB,oBAAC,MAAD;GAAiB;GAAW,GAAI;GAC7B;GACI,CAAA;EACmB,CAAA;;AAIhC,MAAM,sBAAsB,YAAY,OAAO,OAAO,QAAQ;AAK9D,MAAa,eAAe,EAAE,YAAY,gBAAgB,UAAU,GAAG,WACrE,oBAAC,qBAAD;CAAqB,SAAA;WACnB,oBAAC,SAAD;EAAoB;EAAW,GAAI;EAChC;EACO,CAAA;CACU,CAAA;AAGxB,MAAa,gBAAgB,YAAY,OAAO,SAAS,WAAW,EAAE,eAAe,MAAM,CAAC;AAE5F,MAAa,qBAAqB,YAAY,OAAO,cAAc,gBAAgB,EAAE,eAAe,MAAM,CAAC;AAE3G,MAAa,eAAe,OAAO,OAAO,EACxC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,mBAAmB;CACnB,gBAAgB;CAChB,YAAY;CACZ,KAAK;CACN,EACF,CAAC;AAEF,MAAa,aAAa,OAAO,OAAO,EACtC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,eAAe;CACf,mBAAmB;CACnB,iBAAiB;CAClB,EACF,CAAC;AAEF,MAAa,eAAe,OAAO,OAAO,EACxC,MAAM;CACJ,SAAS;CACT,KAAK;CACL,YAAY;CACZ,gBAAgB;CAChB,eAAe;CACf,mBAAmB;CACnB,iBAAiB;CAClB,EACF,CAAC;AAEF,MAAa,qBAAqB,iBAAiB,OAAO,aAAa;AAEvE,MAAaA,cAAYC"}

package/es/ErrorMessage/ErrorMessage.mjs

@@ -4,7 +4,6 @@ import { sva } from "@ndla/styled-system/css";
 import { createStyleContext } from "@ndla/styled-system/jsx";
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-
 //#region src/ErrorMessage/ErrorMessage.tsx
 /**
 * Copyright (c) 2024-present, NDLA.
@@ -47,19 +46,17 @@ const { withProvider, withContext } = createStyleContext(sva({
 const ErrorMessageRoot = withProvider(ark.article, "root", { baseComponent: true });
 const ErrorMessageContent = withContext(ark.div, "content", { baseComponent: true });
 const ErrorMessageActions = withContext(ark.div, "actions", { baseComponent: true });
-const InternalErrorMessageTitle = forwardRef(({ textStyle = "heading.small", ...props }, ref) => /* @__PURE__ */ jsx(Heading, {
+const ErrorMessageTitle = withContext(forwardRef(({ textStyle = "heading.small", ...props }, ref) => /* @__PURE__ */ jsx(Heading, {
 	textStyle,
 	...props,
 	ref
-}));
-const ErrorMessageTitle = withContext(InternalErrorMessageTitle, "title");
-const InternalErrorMessageDescription = forwardRef(({ textStyle = "body.xlarge", ...props }, ref) => /* @__PURE__ */ jsx(Text, {
+})), "title");
+const ErrorMessageDescription = withContext(forwardRef(({ textStyle = "body.xlarge", ...props }, ref) => /* @__PURE__ */ jsx(Text, {
 	textStyle,
 	...props,
 	ref
-}));
-const ErrorMessageDescription = withContext(InternalErrorMessageDescription, "description");
-
+})), "description");
 //#endregion
 export { ErrorMessageActions, ErrorMessageContent, ErrorMessageDescription, ErrorMessageRoot, ErrorMessageTitle };
+
 //# sourceMappingURL=ErrorMessage.mjs.map

package/es/ErrorMessage/ErrorMessage.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorMessage.mjs","names":[],"sources":["../../src/ErrorMessage/ErrorMessage.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 } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\nimport { Heading, Text, type TextProps } from \"../Text\";\n\nconst errorMessageRecipe = sva({\n  slots: [\"root\", \"content\", \"actions\", \"title\", \"description\"],\n  base: {\n    root: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"xxlarge\",\n      alignItems: \"center\",\n    },\n    content: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"medium\",\n      alignItems: \"center\",\n    },\n    actions: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"xsmall\",\n      alignItems: \"center\",\n    },\n    title: {\n      textAlign: \"center\",\n    },\n    description: {\n      textAlign: \"center\",\n    },\n  },\n});\n\nconst { withProvider, withContext } = createStyleContext(errorMessageRecipe);\n\nexport const ErrorMessageRoot = withProvider(ark.article, \"root\", { baseComponent: true });\n\nexport const ErrorMessageContent = withContext(ark.div, \"content\", { baseComponent: true });\n\nexport const ErrorMessageActions = withContext(ark.div, \"actions\", { baseComponent: true });\n\ninterface ErrorMessageTitleProps extends Omit<HTMLArkProps<\"h1\">, \"color\">, StyledProps, TextProps {}\n\nconst InternalErrorMessageTitle = forwardRef<HTMLHeadingElement, ErrorMessageTitleProps>(\n  ({ textStyle = \"heading.small\", ...props }, ref) => <Heading textStyle={textStyle} {...props} ref={ref} />,\n);\n\nexport const ErrorMessageTitle = withContext(InternalErrorMessageTitle, \"title\");\n\ninterface ErrorMessageDescriptionProps extends Omit<HTMLArkProps<\"p\">, \"color\">, StyledProps, TextProps {}\n\nconst InternalErrorMessageDescription = forwardRef<HTMLParagraphElement, ErrorMessageDescriptionProps>(\n  ({ textStyle = \"body.xlarge\", ...props }, ref) => <Text textStyle={textStyle} {...props} ref={ref} />,\n);\n\nexport const ErrorMessageDescription = withContext(InternalErrorMessageDescription, \"description\");\n"],"mappings":";;;;;;;;;;;;;;;AA6CA,MAAM,EAAE,cAAc,gBAAgB,mBA9BX,IAAI;CAC7B,OAAO;EAAC;EAAQ;EAAW;EAAW;EAAS;EAAc;CAC7D,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,KAAK;GACL,YAAY;GACb;EACD,SAAS;GACP,SAAS;GACT,eAAe;GACf,KAAK;GACL,YAAY;GACb;EACD,SAAS;GACP,SAAS;GACT,eAAe;GACf,KAAK;GACL,YAAY;GACb;EACD,OAAO,EACL,WAAW,UACZ;EACD,aAAa,EACX,WAAW,UACZ;EACF;CACF,CAAC,CAE0E;AAE5E,MAAa,mBAAmB,aAAa,IAAI,SAAS,QAAQ,EAAE,eAAe,MAAM,CAAC;AAE1F,MAAa,sBAAsB,YAAY,IAAI,KAAK,WAAW,EAAE,eAAe,MAAM,CAAC;AAE3F,MAAa,sBAAsB,YAAY,IAAI,KAAK,WAAW,EAAE,eAAe,MAAM,CAAC;AAI3F,MAAM,4BAA4B,YAC/B,EAAE,YAAY,iBAAiB,GAAG,SAAS,QAAQ,oBAAC;CAAmB;CAAW,GAAI;CAAY;EAAO,CAC3G;AAED,MAAa,oBAAoB,YAAY,2BAA2B,QAAQ;AAIhF,MAAM,kCAAkC,YACrC,EAAE,YAAY,eAAe,GAAG,SAAS,QAAQ,oBAAC;CAAgB;CAAW,GAAI;CAAY;EAAO,CACtG;AAED,MAAa,0BAA0B,YAAY,iCAAiC,cAAc"}
+{"version":3,"file":"ErrorMessage.mjs","names":[],"sources":["../../src/ErrorMessage/ErrorMessage.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 } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\nimport { Heading, Text, type TextProps } from \"../Text\";\n\nconst errorMessageRecipe = sva({\n  slots: [\"root\", \"content\", \"actions\", \"title\", \"description\"],\n  base: {\n    root: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"xxlarge\",\n      alignItems: \"center\",\n    },\n    content: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"medium\",\n      alignItems: \"center\",\n    },\n    actions: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"xsmall\",\n      alignItems: \"center\",\n    },\n    title: {\n      textAlign: \"center\",\n    },\n    description: {\n      textAlign: \"center\",\n    },\n  },\n});\n\nconst { withProvider, withContext } = createStyleContext(errorMessageRecipe);\n\nexport const ErrorMessageRoot = withProvider(ark.article, \"root\", { baseComponent: true });\n\nexport const ErrorMessageContent = withContext(ark.div, \"content\", { baseComponent: true });\n\nexport const ErrorMessageActions = withContext(ark.div, \"actions\", { baseComponent: true });\n\ninterface ErrorMessageTitleProps extends Omit<HTMLArkProps<\"h1\">, \"color\">, StyledProps, TextProps {}\n\nconst InternalErrorMessageTitle = forwardRef<HTMLHeadingElement, ErrorMessageTitleProps>(\n  ({ textStyle = \"heading.small\", ...props }, ref) => <Heading textStyle={textStyle} {...props} ref={ref} />,\n);\n\nexport const ErrorMessageTitle = withContext(InternalErrorMessageTitle, \"title\");\n\ninterface ErrorMessageDescriptionProps extends Omit<HTMLArkProps<\"p\">, \"color\">, StyledProps, TextProps {}\n\nconst InternalErrorMessageDescription = forwardRef<HTMLParagraphElement, ErrorMessageDescriptionProps>(\n  ({ textStyle = \"body.xlarge\", ...props }, ref) => <Text textStyle={textStyle} {...props} ref={ref} />,\n);\n\nexport const ErrorMessageDescription = withContext(InternalErrorMessageDescription, \"description\");\n"],"mappings":";;;;;;;;;;;;;;AA6CA,MAAM,EAAE,cAAc,gBAAgB,mBA9BX,IAAI;CAC7B,OAAO;EAAC;EAAQ;EAAW;EAAW;EAAS;EAAc;CAC7D,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,KAAK;GACL,YAAY;GACb;EACD,SAAS;GACP,SAAS;GACT,eAAe;GACf,KAAK;GACL,YAAY;GACb;EACD,SAAS;GACP,SAAS;GACT,eAAe;GACf,KAAK;GACL,YAAY;GACb;EACD,OAAO,EACL,WAAW,UACZ;EACD,aAAa,EACX,WAAW,UACZ;EACF;CACF,CAAC,CAE0E;AAE5E,MAAa,mBAAmB,aAAa,IAAI,SAAS,QAAQ,EAAE,eAAe,MAAM,CAAC;AAE1F,MAAa,sBAAsB,YAAY,IAAI,KAAK,WAAW,EAAE,eAAe,MAAM,CAAC;AAE3F,MAAa,sBAAsB,YAAY,IAAI,KAAK,WAAW,EAAE,eAAe,MAAM,CAAC;AAQ3F,MAAa,oBAAoB,YAJC,YAC/B,EAAE,YAAY,iBAAiB,GAAG,SAAS,QAAQ,oBAAC,SAAD;CAAoB;CAAW,GAAI;CAAY;CAAO,CAAA,CAC3G,EAEuE,QAAQ;AAQhF,MAAa,0BAA0B,YAJC,YACrC,EAAE,YAAY,eAAe,GAAG,SAAS,QAAQ,oBAAC,MAAD;CAAiB;CAAW,GAAI;CAAY;CAAO,CAAA,CACtG,EAEmF,cAAc"}

package/es/ExpandableBox.mjs

@@ -2,7 +2,6 @@ import { ark } from "@ark-ui/react";
 import { styled } from "@ndla/styled-system/jsx";
 import { jsx } from "react/jsx-runtime";
 import { forwardRef, useEffect } from "react";
-
 //#region src/ExpandableBox.tsx
 /**
 * Copyright (c) 2024-present, NDLA.
@@ -71,7 +70,7 @@ const ExpandableBoxSummary = forwardRef((props, ref) => /* @__PURE__ */ jsx(Styl
 	"data-embed-type": "expandable-box-summary",
 	ref
 }));
-
 //#endregion
 export { ExpandableBox, ExpandableBoxSummary };
+
 //# sourceMappingURL=ExpandableBox.mjs.map

package/es/ExpandableBox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandableBox.mjs","names":[],"sources":["../src/ExpandableBox.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 { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef, useEffect } from \"react\";\n\nexport interface ExpandableBoxProps extends HTMLArkProps<\"details\">, StyledProps {}\n\nconst StyledExpandableBox = styled(\n  ark.details,\n  {\n    base: {\n      transitionDuration: \"fast\",\n      width: \"100%\",\n      position: \"relative\",\n      border: \"1px solid\",\n      borderRadius: \"xsmall\",\n      borderColor: \"stroke.subtle\",\n      padding: \"medium\",\n      clear: \"both\",\n      overflow: \"hidden\",\n      _open: {\n        padding: \"medium\",\n        \"& summary, [data-embed-type='expandable-box-summary']\": {\n          marginBlockEnd: \"-xxsmall\",\n        },\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\nconst onBeforePrint = (_: Event) => {\n  const detailsElements = document.querySelectorAll(\"details\");\n  detailsElements.forEach((details) => {\n    if (!details.hasAttribute(\"open\")) {\n      details.setAttribute(\"data-print-open\", \"true\");\n      details.setAttribute(\"open\", \"true\");\n    }\n  });\n};\n\nconst onAfterPrint = (_: Event) => {\n  const detailsElements = document.querySelectorAll(\"details[data-print-open]\");\n  detailsElements.forEach((details) => {\n    details.removeAttribute(\"data-print-open\");\n    details.removeAttribute(\"open\");\n  });\n};\n\nexport const ExpandableBox = forwardRef<HTMLDetailsElement, ExpandableBoxProps>((props, ref) => {\n  useEffect(() => {\n    window.addEventListener(\"beforeprint\", onBeforePrint);\n    window.addEventListener(\"afterprint\", onAfterPrint);\n    return () => {\n      window.removeEventListener(\"beforeprint\", onBeforePrint);\n      window.removeEventListener(\"afterprint\", onAfterPrint);\n    };\n  }, []);\n  return <StyledExpandableBox {...props} data-embed-type=\"expandable-box\" ref={ref} />;\n});\n\nexport interface ExpandableBoxSummaryProps extends HTMLArkProps<\"summary\">, StyledProps {}\n\nconst StyledExpandableBoxSummary = styled(\n  ark.summary,\n  {\n    base: {\n      cursor: \"pointer\",\n      margin: \"-medium\",\n      padding: \"medium\",\n      textStyle: \"label.large!\",\n      _hover: {\n        color: \"text.action\",\n      },\n      \"& > *\": {\n        display: \"inline!\",\n        textStyle: \"label.large!\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\nexport const ExpandableBoxSummary = forwardRef<HTMLElement, ExpandableBoxSummaryProps>((props, ref) => (\n  <StyledExpandableBoxSummary {...props} data-embed-type=\"expandable-box-summary\" ref={ref} />\n));\n"],"mappings":";;;;;;;;;;;;;AAeA,MAAM,sBAAsB,OAC1B,IAAI,SACJ,EACE,MAAM;CACJ,oBAAoB;CACpB,OAAO;CACP,UAAU;CACV,QAAQ;CACR,cAAc;CACd,aAAa;CACb,SAAS;CACT,OAAO;CACP,UAAU;CACV,OAAO;EACL,SAAS;EACT,yDAAyD,EACvD,gBAAgB,YACjB;EACF;CACF,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAED,MAAM,iBAAiB,MAAa;AAElC,CADwB,SAAS,iBAAiB,UAAU,CAC5C,SAAS,YAAY;AACnC,MAAI,CAAC,QAAQ,aAAa,OAAO,EAAE;AACjC,WAAQ,aAAa,mBAAmB,OAAO;AAC/C,WAAQ,aAAa,QAAQ,OAAO;;GAEtC;;AAGJ,MAAM,gBAAgB,MAAa;AAEjC,CADwB,SAAS,iBAAiB,2BAA2B,CAC7D,SAAS,YAAY;AACnC,UAAQ,gBAAgB,kBAAkB;AAC1C,UAAQ,gBAAgB,OAAO;GAC/B;;AAGJ,MAAa,gBAAgB,YAAoD,OAAO,QAAQ;AAC9F,iBAAgB;AACd,SAAO,iBAAiB,eAAe,cAAc;AACrD,SAAO,iBAAiB,cAAc,aAAa;AACnD,eAAa;AACX,UAAO,oBAAoB,eAAe,cAAc;AACxD,UAAO,oBAAoB,cAAc,aAAa;;IAEvD,EAAE,CAAC;AACN,QAAO,oBAAC;EAAoB,GAAI;EAAO,mBAAgB;EAAsB;GAAO;EACpF;AAIF,MAAM,6BAA6B,OACjC,IAAI,SACJ,EACE,MAAM;CACJ,QAAQ;CACR,QAAQ;CACR,SAAS;CACT,WAAW;CACX,QAAQ,EACN,OAAO,eACR;CACD,SAAS;EACP,SAAS;EACT,WAAW;EACZ;CACF,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAED,MAAa,uBAAuB,YAAoD,OAAO,QAC7F,oBAAC;CAA2B,GAAI;CAAO,mBAAgB;CAA8B;EAAO,CAC5F"}
+{"version":3,"file":"ExpandableBox.mjs","names":[],"sources":["../src/ExpandableBox.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 { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef, useEffect } from \"react\";\n\nexport interface ExpandableBoxProps extends HTMLArkProps<\"details\">, StyledProps {}\n\nconst StyledExpandableBox = styled(\n  ark.details,\n  {\n    base: {\n      transitionDuration: \"fast\",\n      width: \"100%\",\n      position: \"relative\",\n      border: \"1px solid\",\n      borderRadius: \"xsmall\",\n      borderColor: \"stroke.subtle\",\n      padding: \"medium\",\n      clear: \"both\",\n      overflow: \"hidden\",\n      _open: {\n        padding: \"medium\",\n        \"& summary, [data-embed-type='expandable-box-summary']\": {\n          marginBlockEnd: \"-xxsmall\",\n        },\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\nconst onBeforePrint = (_: Event) => {\n  const detailsElements = document.querySelectorAll(\"details\");\n  detailsElements.forEach((details) => {\n    if (!details.hasAttribute(\"open\")) {\n      details.setAttribute(\"data-print-open\", \"true\");\n      details.setAttribute(\"open\", \"true\");\n    }\n  });\n};\n\nconst onAfterPrint = (_: Event) => {\n  const detailsElements = document.querySelectorAll(\"details[data-print-open]\");\n  detailsElements.forEach((details) => {\n    details.removeAttribute(\"data-print-open\");\n    details.removeAttribute(\"open\");\n  });\n};\n\nexport const ExpandableBox = forwardRef<HTMLDetailsElement, ExpandableBoxProps>((props, ref) => {\n  useEffect(() => {\n    window.addEventListener(\"beforeprint\", onBeforePrint);\n    window.addEventListener(\"afterprint\", onAfterPrint);\n    return () => {\n      window.removeEventListener(\"beforeprint\", onBeforePrint);\n      window.removeEventListener(\"afterprint\", onAfterPrint);\n    };\n  }, []);\n  return <StyledExpandableBox {...props} data-embed-type=\"expandable-box\" ref={ref} />;\n});\n\nexport interface ExpandableBoxSummaryProps extends HTMLArkProps<\"summary\">, StyledProps {}\n\nconst StyledExpandableBoxSummary = styled(\n  ark.summary,\n  {\n    base: {\n      cursor: \"pointer\",\n      margin: \"-medium\",\n      padding: \"medium\",\n      textStyle: \"label.large!\",\n      _hover: {\n        color: \"text.action\",\n      },\n      \"& > *\": {\n        display: \"inline!\",\n        textStyle: \"label.large!\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\nexport const ExpandableBoxSummary = forwardRef<HTMLElement, ExpandableBoxSummaryProps>((props, ref) => (\n  <StyledExpandableBoxSummary {...props} data-embed-type=\"expandable-box-summary\" ref={ref} />\n));\n"],"mappings":";;;;;;;;;;;;AAeA,MAAM,sBAAsB,OAC1B,IAAI,SACJ,EACE,MAAM;CACJ,oBAAoB;CACpB,OAAO;CACP,UAAU;CACV,QAAQ;CACR,cAAc;CACd,aAAa;CACb,SAAS;CACT,OAAO;CACP,UAAU;CACV,OAAO;EACL,SAAS;EACT,yDAAyD,EACvD,gBAAgB,YACjB;EACF;CACF,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAED,MAAM,iBAAiB,MAAa;AACV,UAAS,iBAAiB,UAAU,CAC5C,SAAS,YAAY;AACnC,MAAI,CAAC,QAAQ,aAAa,OAAO,EAAE;AACjC,WAAQ,aAAa,mBAAmB,OAAO;AAC/C,WAAQ,aAAa,QAAQ,OAAO;;GAEtC;;AAGJ,MAAM,gBAAgB,MAAa;AACT,UAAS,iBAAiB,2BAA2B,CAC7D,SAAS,YAAY;AACnC,UAAQ,gBAAgB,kBAAkB;AAC1C,UAAQ,gBAAgB,OAAO;GAC/B;;AAGJ,MAAa,gBAAgB,YAAoD,OAAO,QAAQ;AAC9F,iBAAgB;AACd,SAAO,iBAAiB,eAAe,cAAc;AACrD,SAAO,iBAAiB,cAAc,aAAa;AACnD,eAAa;AACX,UAAO,oBAAoB,eAAe,cAAc;AACxD,UAAO,oBAAoB,cAAc,aAAa;;IAEvD,EAAE,CAAC;AACN,QAAO,oBAAC,qBAAD;EAAqB,GAAI;EAAO,mBAAgB;EAAsB;EAAO,CAAA;EACpF;AAIF,MAAM,6BAA6B,OACjC,IAAI,SACJ,EACE,MAAM;CACJ,QAAQ;CACR,QAAQ;CACR,SAAS;CACT,WAAW;CACX,QAAQ,EACN,OAAO,eACR;CACD,SAAS;EACP,SAAS;EACT,WAAW;EACZ;CACF,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAED,MAAa,uBAAuB,YAAoD,OAAO,QAC7F,oBAAC,4BAAD;CAA4B,GAAI;CAAO,mBAAgB;CAA8B;CAAO,CAAA,CAC5F"}

package/es/Field.mjs

@@ -1,6 +1,5 @@
 import { Field, Fieldset } from "@ark-ui/react";
 import { styled } from "@ndla/styled-system/jsx";
-
 //#region src/Field.tsx
 /**
 * Copyright (c) 2024-present, NDLA.
@@ -16,7 +15,7 @@ const rootStyle = {
 };
 const FieldRoot = styled(Field.Root, { base: rootStyle }, { baseComponent: true });
 const FieldsetRoot = styled(Fieldset.Root, { base: rootStyle }, { baseComponent: true });
-
 //#endregion
 export { FieldRoot, FieldsetRoot };
+
 //# sourceMappingURL=Field.mjs.map

package/es/Field.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Field.mjs","names":[],"sources":["../src/Field.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 } from \"@ark-ui/react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { SystemStyleObject } from \"@ndla/styled-system/types\";\n\nconst rootStyle: SystemStyleObject = {\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap: \"3xsmall\",\n};\n\nexport const FieldRoot = styled(Field.Root, { base: rootStyle }, { baseComponent: true });\n\nexport const FieldsetRoot = styled(Fieldset.Root, { base: rootStyle }, { baseComponent: true });\n"],"mappings":";;;;;;;;;;;AAYA,MAAM,YAA+B;CACnC,SAAS;CACT,eAAe;CACf,KAAK;CACN;AAED,MAAa,YAAY,OAAO,MAAM,MAAM,EAAE,MAAM,WAAW,EAAE,EAAE,eAAe,MAAM,CAAC;AAEzF,MAAa,eAAe,OAAO,SAAS,MAAM,EAAE,MAAM,WAAW,EAAE,EAAE,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Field.mjs","names":[],"sources":["../src/Field.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 } from \"@ark-ui/react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { SystemStyleObject } from \"@ndla/styled-system/types\";\n\nconst rootStyle: SystemStyleObject = {\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap: \"3xsmall\",\n};\n\nexport const FieldRoot = styled(Field.Root, { base: rootStyle }, { baseComponent: true });\n\nexport const FieldsetRoot = styled(Fieldset.Root, { base: rootStyle }, { baseComponent: true });\n"],"mappings":";;;;;;;;;;AAYA,MAAM,YAA+B;CACnC,SAAS;CACT,eAAe;CACf,KAAK;CACN;AAED,MAAa,YAAY,OAAO,MAAM,MAAM,EAAE,MAAM,WAAW,EAAE,EAAE,eAAe,MAAM,CAAC;AAEzF,MAAa,eAAe,OAAO,SAAS,MAAM,EAAE,MAAM,WAAW,EAAE,EAAE,eAAe,MAAM,CAAC"}

package/es/FieldErrorMessage.mjs

@@ -3,7 +3,6 @@ import { css } from "@ndla/styled-system/css";
 import { styled } from "@ndla/styled-system/jsx";
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-
 //#region src/FieldErrorMessage.tsx
 /**
 * Copyright (c) 2024-present, NDLA.
@@ -39,7 +38,7 @@ const FieldsetErrorText = forwardRef(({ textStyle = "label.small", fontWeight, c
 	...props,
 	ref
 }));
-
 //#endregion
 export { FieldErrorMessage, FieldsetErrorText };
+
 //# sourceMappingURL=FieldErrorMessage.mjs.map

package/es/FieldErrorMessage.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FieldErrorMessage.mjs","names":[],"sources":["../src/FieldErrorMessage.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 } from \"@ark-ui/react\";\nimport { css } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps, SystemStyleObject } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\nimport type { TextProps } from \"./Text\";\n\nconst errorTextStyling: SystemStyleObject = {\n  color: \"text.error\",\n  whiteSpace: \"pre-line\",\n  justifyContent: \"center\",\n};\n\nconst StyledFieldErrorText = styled(\n  Field.ErrorText,\n  {\n    base: errorTextStyling,\n  },\n  { baseComponent: true },\n);\n\nexport interface FieldErrorMessageProps extends Omit<Field.ErrorTextProps, \"color\">, TextProps, StyledProps {}\n\nexport const FieldErrorMessage = forwardRef<HTMLSpanElement, FieldErrorMessageProps>(\n  ({ textStyle = \"label.small\", fontWeight, css: cssProp, color, srOnly, ...props }, ref) => (\n    <StyledFieldErrorText css={css.raw({ textStyle, fontWeight, color, srOnly }, cssProp)} {...props} ref={ref} />\n  ),\n);\n\nconst StyledFieldsetErrorText = styled(\n  Fieldset.ErrorText,\n  {\n    base: errorTextStyling,\n  },\n  { baseComponent: true },\n);\n\nexport interface FieldsetErrorTextProps extends Omit<Fieldset.ErrorTextProps, \"color\">, TextProps, StyledProps {}\n\nexport const FieldsetErrorText = forwardRef<HTMLSpanElement, FieldsetErrorTextProps>(\n  ({ textStyle = \"label.small\", fontWeight, css: cssProp, color, srOnly, ...props }, ref) => (\n    <StyledFieldsetErrorText css={css.raw({ textStyle, fontWeight, color, srOnly }, cssProp)} {...props} ref={ref} />\n  ),\n);\n"],"mappings":";;;;;;;;;;;;;;AAeA,MAAM,mBAAsC;CAC1C,OAAO;CACP,YAAY;CACZ,gBAAgB;CACjB;AAED,MAAM,uBAAuB,OAC3B,MAAM,WACN,EACE,MAAM,kBACP,EACD,EAAE,eAAe,MAAM,CACxB;AAID,MAAa,oBAAoB,YAC9B,EAAE,YAAY,eAAe,YAAY,KAAK,SAAS,OAAO,QAAQ,GAAG,SAAS,QACjF,oBAAC;CAAqB,KAAK,IAAI,IAAI;EAAE;EAAW;EAAY;EAAO;EAAQ,EAAE,QAAQ;CAAE,GAAI;CAAY;EAAO,CAEjH;AAED,MAAM,0BAA0B,OAC9B,SAAS,WACT,EACE,MAAM,kBACP,EACD,EAAE,eAAe,MAAM,CACxB;AAID,MAAa,oBAAoB,YAC9B,EAAE,YAAY,eAAe,YAAY,KAAK,SAAS,OAAO,QAAQ,GAAG,SAAS,QACjF,oBAAC;CAAwB,KAAK,IAAI,IAAI;EAAE;EAAW;EAAY;EAAO;EAAQ,EAAE,QAAQ;CAAE,GAAI;CAAY;EAAO,CAEpH"}
+{"version":3,"file":"FieldErrorMessage.mjs","names":[],"sources":["../src/FieldErrorMessage.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 } from \"@ark-ui/react\";\nimport { css } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps, SystemStyleObject } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\nimport type { TextProps } from \"./Text\";\n\nconst errorTextStyling: SystemStyleObject = {\n  color: \"text.error\",\n  whiteSpace: \"pre-line\",\n  justifyContent: \"center\",\n};\n\nconst StyledFieldErrorText = styled(\n  Field.ErrorText,\n  {\n    base: errorTextStyling,\n  },\n  { baseComponent: true },\n);\n\nexport interface FieldErrorMessageProps extends Omit<Field.ErrorTextProps, \"color\">, TextProps, StyledProps {}\n\nexport const FieldErrorMessage = forwardRef<HTMLSpanElement, FieldErrorMessageProps>(\n  ({ textStyle = \"label.small\", fontWeight, css: cssProp, color, srOnly, ...props }, ref) => (\n    <StyledFieldErrorText css={css.raw({ textStyle, fontWeight, color, srOnly }, cssProp)} {...props} ref={ref} />\n  ),\n);\n\nconst StyledFieldsetErrorText = styled(\n  Fieldset.ErrorText,\n  {\n    base: errorTextStyling,\n  },\n  { baseComponent: true },\n);\n\nexport interface FieldsetErrorTextProps extends Omit<Fieldset.ErrorTextProps, \"color\">, TextProps, StyledProps {}\n\nexport const FieldsetErrorText = forwardRef<HTMLSpanElement, FieldsetErrorTextProps>(\n  ({ textStyle = \"label.small\", fontWeight, css: cssProp, color, srOnly, ...props }, ref) => (\n    <StyledFieldsetErrorText css={css.raw({ textStyle, fontWeight, color, srOnly }, cssProp)} {...props} ref={ref} />\n  ),\n);\n"],"mappings":";;;;;;;;;;;;;AAeA,MAAM,mBAAsC;CAC1C,OAAO;CACP,YAAY;CACZ,gBAAgB;CACjB;AAED,MAAM,uBAAuB,OAC3B,MAAM,WACN,EACE,MAAM,kBACP,EACD,EAAE,eAAe,MAAM,CACxB;AAID,MAAa,oBAAoB,YAC9B,EAAE,YAAY,eAAe,YAAY,KAAK,SAAS,OAAO,QAAQ,GAAG,SAAS,QACjF,oBAAC,sBAAD;CAAsB,KAAK,IAAI,IAAI;EAAE;EAAW;EAAY;EAAO;EAAQ,EAAE,QAAQ;CAAE,GAAI;CAAY;CAAO,CAAA,CAEjH;AAED,MAAM,0BAA0B,OAC9B,SAAS,WACT,EACE,MAAM,kBACP,EACD,EAAE,eAAe,MAAM,CACxB;AAID,MAAa,oBAAoB,YAC9B,EAAE,YAAY,eAAe,YAAY,KAAK,SAAS,OAAO,QAAQ,GAAG,SAAS,QACjF,oBAAC,yBAAD;CAAyB,KAAK,IAAI,IAAI;EAAE;EAAW;EAAY;EAAO;EAAQ,EAAE,QAAQ;CAAE,GAAI;CAAY;CAAO,CAAA,CAEpH"}

package/es/FieldHelper.mjs

@@ -3,7 +3,6 @@ import { css } from "@ndla/styled-system/css";
 import { styled } from "@ndla/styled-system/jsx";
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-
 //#region src/FieldHelper.tsx
 /**
 * Copyright (c) 2025-present, NDLA.
@@ -38,7 +37,7 @@ const FieldsetHelper = forwardRef(({ textStyle = "label.small", fontWeight, colo
 		ref
 	});
 });
-
 //#endregion
 export { FieldHelper, FieldsetHelper };
+
 //# sourceMappingURL=FieldHelper.mjs.map

package/es/FieldHelper.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FieldHelper.mjs","names":[],"sources":["../src/FieldHelper.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025-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 } 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 StyledFieldHelper = styled(Field.HelperText, {}, { baseComponent: true });\n\nexport interface FieldHelperProps extends Omit<Field.HelperTextProps, \"color\">, TextProps, StyledProps {}\n\nexport const FieldHelper = forwardRef<HTMLSpanElement, FieldHelperProps>(\n  ({ textStyle = \"label.small\", fontWeight, color, srOnly, css: cssProp, ...props }, ref) => {\n    return <StyledFieldHelper css={css.raw({ textStyle, fontWeight, color, srOnly }, cssProp)} {...props} ref={ref} />;\n  },\n);\n\nconst StyledFieldsetHelper = styled(Fieldset.HelperText, {}, { baseComponent: true });\n\nexport interface FieldsetHelperProps extends Omit<Fieldset.HelperTextProps, \"color\">, TextProps, StyledProps {}\n\nexport const FieldsetHelper = forwardRef<HTMLSpanElement, FieldsetHelperProps>(\n  ({ textStyle = \"label.small\", fontWeight, color, srOnly, css: cssProp, ...props }, ref) => {\n    return (\n      <StyledFieldsetHelper css={css.raw({ textStyle, fontWeight, color, srOnly }, cssProp)} {...props} ref={ref} />\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;AAeA,MAAM,oBAAoB,OAAO,MAAM,YAAY,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAI/E,MAAa,cAAc,YACxB,EAAE,YAAY,eAAe,YAAY,OAAO,QAAQ,KAAK,SAAS,GAAG,SAAS,QAAQ;AACzF,QAAO,oBAAC;EAAkB,KAAK,IAAI,IAAI;GAAE;GAAW;GAAY;GAAO;GAAQ,EAAE,QAAQ;EAAE,GAAI;EAAY;GAAO;EAErH;AAED,MAAM,uBAAuB,OAAO,SAAS,YAAY,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAIrF,MAAa,iBAAiB,YAC3B,EAAE,YAAY,eAAe,YAAY,OAAO,QAAQ,KAAK,SAAS,GAAG,SAAS,QAAQ;AACzF,QACE,oBAAC;EAAqB,KAAK,IAAI,IAAI;GAAE;GAAW;GAAY;GAAO;GAAQ,EAAE,QAAQ;EAAE,GAAI;EAAY;GAAO;EAGnH"}
+{"version":3,"file":"FieldHelper.mjs","names":[],"sources":["../src/FieldHelper.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025-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 } 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 StyledFieldHelper = styled(Field.HelperText, {}, { baseComponent: true });\n\nexport interface FieldHelperProps extends Omit<Field.HelperTextProps, \"color\">, TextProps, StyledProps {}\n\nexport const FieldHelper = forwardRef<HTMLSpanElement, FieldHelperProps>(\n  ({ textStyle = \"label.small\", fontWeight, color, srOnly, css: cssProp, ...props }, ref) => {\n    return <StyledFieldHelper css={css.raw({ textStyle, fontWeight, color, srOnly }, cssProp)} {...props} ref={ref} />;\n  },\n);\n\nconst StyledFieldsetHelper = styled(Fieldset.HelperText, {}, { baseComponent: true });\n\nexport interface FieldsetHelperProps extends Omit<Fieldset.HelperTextProps, \"color\">, TextProps, StyledProps {}\n\nexport const FieldsetHelper = forwardRef<HTMLSpanElement, FieldsetHelperProps>(\n  ({ textStyle = \"label.small\", fontWeight, color, srOnly, css: cssProp, ...props }, ref) => {\n    return (\n      <StyledFieldsetHelper css={css.raw({ textStyle, fontWeight, color, srOnly }, cssProp)} {...props} ref={ref} />\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;AAeA,MAAM,oBAAoB,OAAO,MAAM,YAAY,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAI/E,MAAa,cAAc,YACxB,EAAE,YAAY,eAAe,YAAY,OAAO,QAAQ,KAAK,SAAS,GAAG,SAAS,QAAQ;AACzF,QAAO,oBAAC,mBAAD;EAAmB,KAAK,IAAI,IAAI;GAAE;GAAW;GAAY;GAAO;GAAQ,EAAE,QAAQ;EAAE,GAAI;EAAY;EAAO,CAAA;EAErH;AAED,MAAM,uBAAuB,OAAO,SAAS,YAAY,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAIrF,MAAa,iBAAiB,YAC3B,EAAE,YAAY,eAAe,YAAY,OAAO,QAAQ,KAAK,SAAS,GAAG,SAAS,QAAQ;AACzF,QACE,oBAAC,sBAAD;EAAsB,KAAK,IAAI,IAAI;GAAE;GAAW;GAAY;GAAO;GAAQ,EAAE,QAAQ;EAAE,GAAI;EAAY;EAAO,CAAA;EAGnH"}

package/es/Figure.mjs

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

package/es/Figure.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Figure.mjs","names":[],"sources":["../src/Figure.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, css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { RecipeVariant, StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\n\nconst figureRecipe = cva({\n  base: {\n    position: \"relative\",\n    transitionDuration: \"normal\",\n    transitionProperty: \"transform, width, height\",\n    transitionTimingFunction: \"default\",\n    _motionReduce: {\n      transition: \"none\",\n      transitionDuration: \"0s\",\n    },\n  },\n  variants: {\n    size: {\n      full: {\n        width: \"100%\",\n      },\n      medium: {\n        tablet: {\n          width: \"50%\",\n        },\n        desktop: {\n          width: \"65%\",\n        },\n      },\n      small: {\n        tablet: {\n          width: \"35%\",\n        },\n        desktop: {\n          width: \"50%\",\n        },\n      },\n      xsmall: {\n        tablet: {\n          width: \"25%\",\n        },\n        desktop: {\n          width: \"35%\",\n        },\n      },\n    },\n    float: {\n      left: {\n        tablet: {\n          float: \"left\",\n          clear: \"left\",\n        },\n      },\n      right: {\n        tablet: {\n          float: \"right\",\n          clear: \"right\",\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    size: \"full\",\n  },\n  compoundVariants: [\n    {\n      float: [\"left\", \"right\"],\n      css: {\n        zIndex: \"base\",\n        left: \"auto\",\n        marginBlock: \"xsmall\",\n      },\n    },\n    {\n      float: \"left\",\n      size: [\"medium\", \"small\", \"xsmall\"],\n      css: {\n        marginInlineEnd: \"medium\",\n        tabletDown: { marginInlineEnd: \"0\" },\n      },\n    },\n    {\n      float: \"right\",\n      size: [\"medium\", \"small\", \"xsmall\"],\n      css: {\n        marginInlineStart: \"medium\",\n        tabletDown: { marginInlineStart: \"0\" },\n      },\n    },\n    {\n      float: [\"left\", \"right\"],\n      size: [\"full\"],\n      css: {\n        marginInlineStart: \"0\",\n        marginInlineEnd: \"0\",\n      },\n    },\n  ],\n});\n\nexport type FigureVariantProps = NonNullable<RecipeVariantProps<typeof figureRecipe>>;\n\nexport type FigureSize = RecipeVariant<typeof figureRecipe>[\"size\"];\n\nexport type FigureFloat = RecipeVariant<typeof figureRecipe>[\"float\"];\n\nexport interface FigureProps extends HTMLArkProps<\"figure\">, StyledProps, FigureVariantProps {}\n\nconst StyledFigure = styled(ark.figure, {}, { baseComponent: true });\n\nexport const Figure = forwardRef<HTMLElement, FigureProps>(({ size, float, css: cssProp, ...props }, ref) => {\n  return <StyledFigure css={css.raw(figureRecipe.raw({ size, float }), cssProp)} {...props} ref={ref} />;\n});\n"],"mappings":";;;;;;;;;;;;;;AAcA,MAAM,eAAe,IAAI;CACvB,MAAM;EACJ,UAAU;EACV,oBAAoB;EACpB,oBAAoB;EACpB,0BAA0B;EAC1B,eAAe;GACb,YAAY;GACZ,oBAAoB;GACrB;EACF;CACD,UAAU;EACR,MAAM;GACJ,MAAM,EACJ,OAAO,QACR;GACD,QAAQ;IACN,QAAQ,EACN,OAAO,OACR;IACD,SAAS,EACP,OAAO,OACR;IACF;GACD,OAAO;IACL,QAAQ,EACN,OAAO,OACR;IACD,SAAS,EACP,OAAO,OACR;IACF;GACD,QAAQ;IACN,QAAQ,EACN,OAAO,OACR;IACD,SAAS,EACP,OAAO,OACR;IACF;GACF;EACD,OAAO;GACL,MAAM,EACJ,QAAQ;IACN,OAAO;IACP,OAAO;IACR,EACF;GACD,OAAO,EACL,QAAQ;IACN,OAAO;IACP,OAAO;IACR,EACF;GACF;EACF;CACD,iBAAiB,EACf,MAAM,QACP;CACD,kBAAkB;EAChB;GACE,OAAO,CAAC,QAAQ,QAAQ;GACxB,KAAK;IACH,QAAQ;IACR,MAAM;IACN,aAAa;IACd;GACF;EACD;GACE,OAAO;GACP,MAAM;IAAC;IAAU;IAAS;IAAS;GACnC,KAAK;IACH,iBAAiB;IACjB,YAAY,EAAE,iBAAiB,KAAK;IACrC;GACF;EACD;GACE,OAAO;GACP,MAAM;IAAC;IAAU;IAAS;IAAS;GACnC,KAAK;IACH,mBAAmB;IACnB,YAAY,EAAE,mBAAmB,KAAK;IACvC;GACF;EACD;GACE,OAAO,CAAC,QAAQ,QAAQ;GACxB,MAAM,CAAC,OAAO;GACd,KAAK;IACH,mBAAmB;IACnB,iBAAiB;IAClB;GACF;EACF;CACF,CAAC;AAUF,MAAM,eAAe,OAAO,IAAI,QAAQ,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAEpE,MAAa,SAAS,YAAsC,EAAE,MAAM,OAAO,KAAK,SAAS,GAAG,SAAS,QAAQ;AAC3G,QAAO,oBAAC;EAAa,KAAK,IAAI,IAAI,aAAa,IAAI;GAAE;GAAM;GAAO,CAAC,EAAE,QAAQ;EAAE,GAAI;EAAY;GAAO;EACtG"}
+{"version":3,"file":"Figure.mjs","names":[],"sources":["../src/Figure.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, css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { RecipeVariant, StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\n\nconst figureRecipe = cva({\n  base: {\n    position: \"relative\",\n    transitionDuration: \"normal\",\n    transitionProperty: \"transform, width, height\",\n    transitionTimingFunction: \"default\",\n    _motionReduce: {\n      transition: \"none\",\n      transitionDuration: \"0s\",\n    },\n  },\n  variants: {\n    size: {\n      full: {\n        width: \"100%\",\n      },\n      medium: {\n        tablet: {\n          width: \"50%\",\n        },\n        desktop: {\n          width: \"65%\",\n        },\n      },\n      small: {\n        tablet: {\n          width: \"35%\",\n        },\n        desktop: {\n          width: \"50%\",\n        },\n      },\n      xsmall: {\n        tablet: {\n          width: \"25%\",\n        },\n        desktop: {\n          width: \"35%\",\n        },\n      },\n    },\n    float: {\n      left: {\n        tablet: {\n          float: \"left\",\n          clear: \"left\",\n        },\n      },\n      right: {\n        tablet: {\n          float: \"right\",\n          clear: \"right\",\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    size: \"full\",\n  },\n  compoundVariants: [\n    {\n      float: [\"left\", \"right\"],\n      css: {\n        zIndex: \"base\",\n        left: \"auto\",\n        marginBlock: \"xsmall\",\n      },\n    },\n    {\n      float: \"left\",\n      size: [\"medium\", \"small\", \"xsmall\"],\n      css: {\n        marginInlineEnd: \"medium\",\n        tabletDown: { marginInlineEnd: \"0\" },\n      },\n    },\n    {\n      float: \"right\",\n      size: [\"medium\", \"small\", \"xsmall\"],\n      css: {\n        marginInlineStart: \"medium\",\n        tabletDown: { marginInlineStart: \"0\" },\n      },\n    },\n    {\n      float: [\"left\", \"right\"],\n      size: [\"full\"],\n      css: {\n        marginInlineStart: \"0\",\n        marginInlineEnd: \"0\",\n      },\n    },\n  ],\n});\n\nexport type FigureVariantProps = NonNullable<RecipeVariantProps<typeof figureRecipe>>;\n\nexport type FigureSize = RecipeVariant<typeof figureRecipe>[\"size\"];\n\nexport type FigureFloat = RecipeVariant<typeof figureRecipe>[\"float\"];\n\nexport interface FigureProps extends HTMLArkProps<\"figure\">, StyledProps, FigureVariantProps {}\n\nconst StyledFigure = styled(ark.figure, {}, { baseComponent: true });\n\nexport const Figure = forwardRef<HTMLElement, FigureProps>(({ size, float, css: cssProp, ...props }, ref) => {\n  return <StyledFigure css={css.raw(figureRecipe.raw({ size, float }), cssProp)} {...props} ref={ref} />;\n});\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,eAAe,IAAI;CACvB,MAAM;EACJ,UAAU;EACV,oBAAoB;EACpB,oBAAoB;EACpB,0BAA0B;EAC1B,eAAe;GACb,YAAY;GACZ,oBAAoB;GACrB;EACF;CACD,UAAU;EACR,MAAM;GACJ,MAAM,EACJ,OAAO,QACR;GACD,QAAQ;IACN,QAAQ,EACN,OAAO,OACR;IACD,SAAS,EACP,OAAO,OACR;IACF;GACD,OAAO;IACL,QAAQ,EACN,OAAO,OACR;IACD,SAAS,EACP,OAAO,OACR;IACF;GACD,QAAQ;IACN,QAAQ,EACN,OAAO,OACR;IACD,SAAS,EACP,OAAO,OACR;IACF;GACF;EACD,OAAO;GACL,MAAM,EACJ,QAAQ;IACN,OAAO;IACP,OAAO;IACR,EACF;GACD,OAAO,EACL,QAAQ;IACN,OAAO;IACP,OAAO;IACR,EACF;GACF;EACF;CACD,iBAAiB,EACf,MAAM,QACP;CACD,kBAAkB;EAChB;GACE,OAAO,CAAC,QAAQ,QAAQ;GACxB,KAAK;IACH,QAAQ;IACR,MAAM;IACN,aAAa;IACd;GACF;EACD;GACE,OAAO;GACP,MAAM;IAAC;IAAU;IAAS;IAAS;GACnC,KAAK;IACH,iBAAiB;IACjB,YAAY,EAAE,iBAAiB,KAAK;IACrC;GACF;EACD;GACE,OAAO;GACP,MAAM;IAAC;IAAU;IAAS;IAAS;GACnC,KAAK;IACH,mBAAmB;IACnB,YAAY,EAAE,mBAAmB,KAAK;IACvC;GACF;EACD;GACE,OAAO,CAAC,QAAQ,QAAQ;GACxB,MAAM,CAAC,OAAO;GACd,KAAK;IACH,mBAAmB;IACnB,iBAAiB;IAClB;GACF;EACF;CACF,CAAC;AAUF,MAAM,eAAe,OAAO,IAAI,QAAQ,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAEpE,MAAa,SAAS,YAAsC,EAAE,MAAM,OAAO,KAAK,SAAS,GAAG,SAAS,QAAQ;AAC3G,QAAO,oBAAC,cAAD;EAAc,KAAK,IAAI,IAAI,aAAa,IAAI;GAAE;GAAM;GAAO,CAAC,EAAE,QAAQ;EAAE,GAAI;EAAY;EAAO,CAAA;EACtG"}

package/es/FileUpload.mjs

@@ -5,7 +5,6 @@ import { sva } from "@ndla/styled-system/css";
 import { createStyleContext } from "@ndla/styled-system/jsx";
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-
 //#region src/FileUpload.tsx
 /**
 * Copyright (c) 2024-present, NDLA.
@@ -128,7 +127,7 @@ const FileUploadLabel = forwardRef(({ textStyle = "label.medium", fontWeight = "
 		children
 	})
 }));
-
 //#endregion
 export { FileUploadContext, FileUploadDropzone, FileUploadHiddenInput, FileUploadItem, FileUploadItemDeleteTrigger, FileUploadItemGroup, FileUploadItemName, FileUploadItemPreview, FileUploadItemPreviewImage, FileUploadItemSizeText, FileUploadLabel, FileUploadRoot, FileUploadTrigger };
+
 //# sourceMappingURL=FileUpload.mjs.map

package/es/FileUpload.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FileUpload.mjs","names":[],"sources":["../src/FileUpload.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 { FileUpload, fileUploadAnatomy } 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\";\nimport { forwardRef, type RefAttributes } from \"react\";\nimport { Label } from \"./Label\";\nimport { type TextProps, Text } from \"./Text\";\n\nconst fileUploadRecipe = sva({\n  slots: fileUploadAnatomy.keys(),\n  base: {\n    root: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      minHeight: \"100%\",\n    },\n    dropzone: {\n      display: \"flex\",\n      gap: \"small\",\n      flexDirection: \"column\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n      padding: \"4xlarge\",\n      borderRadius: \"xsmall\",\n      border: \"1px solid\",\n      borderColor: \"stroke.subtle\",\n      transitionProperty: \"border, border-color\",\n      transitionTimingFunction: \"default\",\n      transitionDuration: \"normal\",\n      _hover: {\n        borderStyle: \"dashed\",\n        borderColor: \"stroke.hover\",\n        _disabled: {\n          borderStyle: \"solid\",\n          borderColor: \"stroke.subtle\",\n        },\n      },\n    },\n    itemGroup: {\n      paddingBlockStart: \"medium\",\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"xsmall\",\n    },\n    item: {\n      width: \"100%\",\n      display: \"grid\",\n      gridTemplateAreas: `\n      \"preview name delete\" \n      \"preview size delete\"`,\n      gridTemplateColumns: \"auto 1fr auto\",\n      gridColumnGap: \"small\",\n      border: \"1px solid\",\n      borderColor: \"stroke.subtle\",\n      borderRadius: \"xsmall\",\n      padding: \"xsmall\",\n    },\n    itemPreview: {\n      display: \"flex\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n      width: \"xxlarge\",\n      height: \"xxlarge\",\n      gridArea: \"preview\",\n    },\n    itemName: {\n      gridArea: \"name\",\n      whiteSpace: \"nowrap\",\n      overflow: \"hidden\",\n      textOverflow: \"ellipsis\",\n    },\n    itemSizeText: {\n      gridArea: \"size\",\n    },\n    itemDeleteTrigger: {\n      gridArea: \"delete\",\n      alignSelf: \"center\",\n    },\n    itemPreviewImage: {\n      borderRadius: \"xsmall\",\n      objectFit: \"cover\",\n      width: \"100%\",\n      height: \"100%\",\n    },\n  },\n});\n\nconst { withProvider, withContext } = createStyleContext(fileUploadRecipe);\n\nexport type FileUploadVariantProps = NonNullable<RecipeVariantProps<typeof fileUploadRecipe>>;\n\nexport interface FileUploadRootProps extends FileUpload.RootProps, FileUploadVariantProps {}\n\nexport const FileUploadHiddenInput = FileUpload.HiddenInput;\nexport const FileUploadContext = FileUpload.Context;\n\nexport const FileUploadRoot = withProvider(FileUpload.Root, \"root\", { baseComponent: true });\n\nexport const FileUploadDropzone = withContext(FileUpload.Dropzone, \"dropzone\", { baseComponent: true });\n\nexport const FileUploadTrigger = withContext(FileUpload.Trigger, \"trigger\", { baseComponent: true });\n\nexport const FileUploadItemGroup = withContext(FileUpload.ItemGroup, \"itemGroup\", { baseComponent: true });\n\nexport const FileUploadItemPreview = withContext(FileUpload.ItemPreview, \"itemPreview\", { baseComponent: true });\n\nexport const FileUploadItem = withContext(FileUpload.Item, \"item\", { baseComponent: true });\n\nexport const FileUploadItemDeleteTrigger = withContext(FileUpload.ItemDeleteTrigger, \"itemDeleteTrigger\", {\n  baseComponent: true,\n});\n\nexport const FileUploadItemPreviewImage = withContext(FileUpload.ItemPreviewImage, \"itemPreviewImage\", {\n  baseComponent: true,\n});\n\nconst InternalFileUploadItemName = withContext(FileUpload.ItemName, \"itemName\", { baseComponent: true });\n\ninterface FileUploadItemNameProps\n  extends Omit<FileUpload.ItemNameProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLParagraphElement> {}\n\nexport const FileUploadItemName = forwardRef<HTMLDivElement, FileUploadItemNameProps>(\n  ({ textStyle = \"label.medium\", fontWeight = \"bold\", ...props }, ref) => (\n    <Text textStyle={textStyle} fontWeight={fontWeight} asChild {...props} ref={ref}>\n      {/* Do not use children here whatsoever. The component falls back to the file name only if no children are passed in. It should be up to the consumer if they want to pass in children. */}\n      <InternalFileUploadItemName />\n    </Text>\n  ),\n);\n\nconst InternalFileUploadItemSizeText = withContext(FileUpload.ItemSizeText, \"itemSizeText\", { baseComponent: true });\n\ninterface FileUploadItemSizeTextProps\n  extends Omit<FileUpload.ItemSizeTextProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLParagraphElement> {}\n\nexport const FileUploadItemSizeText = forwardRef<HTMLDivElement, FileUploadItemSizeTextProps>(\n  ({ textStyle = \"label.small\", ...props }, ref) => (\n    <Text textStyle={textStyle} ref={ref} asChild {...props}>\n      <InternalFileUploadItemSizeText />\n    </Text>\n  ),\n);\n\nconst InternalFileUploadLabel = withContext(FileUpload.Label, \"label\");\n\ninterface FileUploadLabelProps\n  extends Omit<FileUpload.LabelProps, \"color\">, StyledProps, TextProps, RefAttributes<HTMLLabelElement> {}\n\nexport const FileUploadLabel = forwardRef<HTMLLabelElement, FileUploadLabelProps>(\n  ({ textStyle = \"label.medium\", fontWeight = \"light\", children, ...props }, ref) => (\n    <InternalFileUploadLabel ref={ref} asChild>\n      <Label textStyle={textStyle} fontWeight={fontWeight} {...props}>\n        {children}\n      </Label>\n    </InternalFileUploadLabel>\n  ),\n);\n"],"mappings":";;;;;;;;;;;;;;;;AA+FA,MAAM,EAAE,cAAc,gBAAgB,mBA/Eb,IAAI;CAC3B,OAAO,kBAAkB,MAAM;CAC/B,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,WAAW;GACZ;EACD,UAAU;GACR,SAAS;GACT,KAAK;GACL,eAAe;GACf,YAAY;GACZ,gBAAgB;GAChB,SAAS;GACT,cAAc;GACd,QAAQ;GACR,aAAa;GACb,oBAAoB;GACpB,0BAA0B;GAC1B,oBAAoB;GACpB,QAAQ;IACN,aAAa;IACb,aAAa;IACb,WAAW;KACT,aAAa;KACb,aAAa;KACd;IACF;GACF;EACD,WAAW;GACT,mBAAmB;GACnB,SAAS;GACT,eAAe;GACf,KAAK;GACN;EACD,MAAM;GACJ,OAAO;GACP,SAAS;GACT,mBAAmB;;;GAGnB,qBAAqB;GACrB,eAAe;GACf,QAAQ;GACR,aAAa;GACb,cAAc;GACd,SAAS;GACV;EACD,aAAa;GACX,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,OAAO;GACP,QAAQ;GACR,UAAU;GACX;EACD,UAAU;GACR,UAAU;GACV,YAAY;GACZ,UAAU;GACV,cAAc;GACf;EACD,cAAc,EACZ,UAAU,QACX;EACD,mBAAmB;GACjB,UAAU;GACV,WAAW;GACZ;EACD,kBAAkB;GAChB,cAAc;GACd,WAAW;GACX,OAAO;GACP,QAAQ;GACT;EACF;CACF,CAAC,CAEwE;AAM1E,MAAa,wBAAwB,WAAW;AAChD,MAAa,oBAAoB,WAAW;AAE5C,MAAa,iBAAiB,aAAa,WAAW,MAAM,QAAQ,EAAE,eAAe,MAAM,CAAC;AAE5F,MAAa,qBAAqB,YAAY,WAAW,UAAU,YAAY,EAAE,eAAe,MAAM,CAAC;AAEvG,MAAa,oBAAoB,YAAY,WAAW,SAAS,WAAW,EAAE,eAAe,MAAM,CAAC;AAEpG,MAAa,sBAAsB,YAAY,WAAW,WAAW,aAAa,EAAE,eAAe,MAAM,CAAC;AAE1G,MAAa,wBAAwB,YAAY,WAAW,aAAa,eAAe,EAAE,eAAe,MAAM,CAAC;AAEhH,MAAa,iBAAiB,YAAY,WAAW,MAAM,QAAQ,EAAE,eAAe,MAAM,CAAC;AAE3F,MAAa,8BAA8B,YAAY,WAAW,mBAAmB,qBAAqB,EACxG,eAAe,MAChB,CAAC;AAEF,MAAa,6BAA6B,YAAY,WAAW,kBAAkB,oBAAoB,EACrG,eAAe,MAChB,CAAC;AAEF,MAAM,6BAA6B,YAAY,WAAW,UAAU,YAAY,EAAE,eAAe,MAAM,CAAC;AAKxG,MAAa,qBAAqB,YAC/B,EAAE,YAAY,gBAAgB,aAAa,QAAQ,GAAG,SAAS,QAC9D,oBAAC;CAAgB;CAAuB;CAAY;CAAQ,GAAI;CAAY;WAE1E,oBAAC,+BAA6B;EACzB,CAEV;AAED,MAAM,iCAAiC,YAAY,WAAW,cAAc,gBAAgB,EAAE,eAAe,MAAM,CAAC;AAKpH,MAAa,yBAAyB,YACnC,EAAE,YAAY,eAAe,GAAG,SAAS,QACxC,oBAAC;CAAgB;CAAgB;CAAK;CAAQ,GAAI;WAChD,oBAAC,mCAAiC;EAC7B,CAEV;AAED,MAAM,0BAA0B,YAAY,WAAW,OAAO,QAAQ;AAKtE,MAAa,kBAAkB,YAC5B,EAAE,YAAY,gBAAgB,aAAa,SAAS,UAAU,GAAG,SAAS,QACzE,oBAAC;CAA6B;CAAK;WACjC,oBAAC;EAAiB;EAAuB;EAAY,GAAI;EACtD;GACK;EACgB,CAE7B"}
+{"version":3,"file":"FileUpload.mjs","names":[],"sources":["../src/FileUpload.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 { FileUpload, fileUploadAnatomy } 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\";\nimport { forwardRef, type RefAttributes } from \"react\";\nimport { Label } from \"./Label\";\nimport { type TextProps, Text } from \"./Text\";\n\nconst fileUploadRecipe = sva({\n  slots: fileUploadAnatomy.keys(),\n  base: {\n    root: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      minHeight: \"100%\",\n    },\n    dropzone: {\n      display: \"flex\",\n      gap: \"small\",\n      flexDirection: \"column\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n      padding: \"4xlarge\",\n      borderRadius: \"xsmall\",\n      border: \"1px solid\",\n      borderColor: \"stroke.subtle\",\n      transitionProperty: \"border, border-color\",\n      transitionTimingFunction: \"default\",\n      transitionDuration: \"normal\",\n      _hover: {\n        borderStyle: \"dashed\",\n        borderColor: \"stroke.hover\",\n        _disabled: {\n          borderStyle: \"solid\",\n          borderColor: \"stroke.subtle\",\n        },\n      },\n    },\n    itemGroup: {\n      paddingBlockStart: \"medium\",\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"xsmall\",\n    },\n    item: {\n      width: \"100%\",\n      display: \"grid\",\n      gridTemplateAreas: `\n      \"preview name delete\" \n      \"preview size delete\"`,\n      gridTemplateColumns: \"auto 1fr auto\",\n      gridColumnGap: \"small\",\n      border: \"1px solid\",\n      borderColor: \"stroke.subtle\",\n      borderRadius: \"xsmall\",\n      padding: \"xsmall\",\n    },\n    itemPreview: {\n      display: \"flex\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n      width: \"xxlarge\",\n      height: \"xxlarge\",\n      gridArea: \"preview\",\n    },\n    itemName: {\n      gridArea: \"name\",\n      whiteSpace: \"nowrap\",\n      overflow: \"hidden\",\n      textOverflow: \"ellipsis\",\n    },\n    itemSizeText: {\n      gridArea: \"size\",\n    },\n    itemDeleteTrigger: {\n      gridArea: \"delete\",\n      alignSelf: \"center\",\n    },\n    itemPreviewImage: {\n      borderRadius: \"xsmall\",\n      objectFit: \"cover\",\n      width: \"100%\",\n      height: \"100%\",\n    },\n  },\n});\n\nconst { withProvider, withContext } = createStyleContext(fileUploadRecipe);\n\nexport type FileUploadVariantProps = NonNullable<RecipeVariantProps<typeof fileUploadRecipe>>;\n\nexport interface FileUploadRootProps extends FileUpload.RootProps, FileUploadVariantProps {}\n\nexport const FileUploadHiddenInput = FileUpload.HiddenInput;\nexport const FileUploadContext = FileUpload.Context;\n\nexport const FileUploadRoot = withProvider(FileUpload.Root, \"root\", { baseComponent: true });\n\nexport const FileUploadDropzone = withContext(FileUpload.Dropzone, \"dropzone\", { baseComponent: true });\n\nexport const FileUploadTrigger = withContext(FileUpload.Trigger, \"trigger\", { baseComponent: true });\n\nexport const FileUploadItemGroup = withContext(FileUpload.ItemGroup, \"itemGroup\", { baseComponent: true });\n\nexport const FileUploadItemPreview = withContext(FileUpload.ItemPreview, \"itemPreview\", { baseComponent: true });\n\nexport const FileUploadItem = withContext(FileUpload.Item, \"item\", { baseComponent: true });\n\nexport const FileUploadItemDeleteTrigger = withContext(FileUpload.ItemDeleteTrigger, \"itemDeleteTrigger\", {\n  baseComponent: true,\n});\n\nexport const FileUploadItemPreviewImage = withContext(FileUpload.ItemPreviewImage, \"itemPreviewImage\", {\n  baseComponent: true,\n});\n\nconst InternalFileUploadItemName = withContext(FileUpload.ItemName, \"itemName\", { baseComponent: true });\n\ninterface FileUploadItemNameProps\n  extends Omit<FileUpload.ItemNameProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLParagraphElement> {}\n\nexport const FileUploadItemName = forwardRef<HTMLDivElement, FileUploadItemNameProps>(\n  ({ textStyle = \"label.medium\", fontWeight = \"bold\", ...props }, ref) => (\n    <Text textStyle={textStyle} fontWeight={fontWeight} asChild {...props} ref={ref}>\n      {/* Do not use children here whatsoever. The component falls back to the file name only if no children are passed in. It should be up to the consumer if they want to pass in children. */}\n      <InternalFileUploadItemName />\n    </Text>\n  ),\n);\n\nconst InternalFileUploadItemSizeText = withContext(FileUpload.ItemSizeText, \"itemSizeText\", { baseComponent: true });\n\ninterface FileUploadItemSizeTextProps\n  extends Omit<FileUpload.ItemSizeTextProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLParagraphElement> {}\n\nexport const FileUploadItemSizeText = forwardRef<HTMLDivElement, FileUploadItemSizeTextProps>(\n  ({ textStyle = \"label.small\", ...props }, ref) => (\n    <Text textStyle={textStyle} ref={ref} asChild {...props}>\n      <InternalFileUploadItemSizeText />\n    </Text>\n  ),\n);\n\nconst InternalFileUploadLabel = withContext(FileUpload.Label, \"label\");\n\ninterface FileUploadLabelProps\n  extends Omit<FileUpload.LabelProps, \"color\">, StyledProps, TextProps, RefAttributes<HTMLLabelElement> {}\n\nexport const FileUploadLabel = forwardRef<HTMLLabelElement, FileUploadLabelProps>(\n  ({ textStyle = \"label.medium\", fontWeight = \"light\", children, ...props }, ref) => (\n    <InternalFileUploadLabel ref={ref} asChild>\n      <Label textStyle={textStyle} fontWeight={fontWeight} {...props}>\n        {children}\n      </Label>\n    </InternalFileUploadLabel>\n  ),\n);\n"],"mappings":";;;;;;;;;;;;;;;AA+FA,MAAM,EAAE,cAAc,gBAAgB,mBA/Eb,IAAI;CAC3B,OAAO,kBAAkB,MAAM;CAC/B,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,WAAW;GACZ;EACD,UAAU;GACR,SAAS;GACT,KAAK;GACL,eAAe;GACf,YAAY;GACZ,gBAAgB;GAChB,SAAS;GACT,cAAc;GACd,QAAQ;GACR,aAAa;GACb,oBAAoB;GACpB,0BAA0B;GAC1B,oBAAoB;GACpB,QAAQ;IACN,aAAa;IACb,aAAa;IACb,WAAW;KACT,aAAa;KACb,aAAa;KACd;IACF;GACF;EACD,WAAW;GACT,mBAAmB;GACnB,SAAS;GACT,eAAe;GACf,KAAK;GACN;EACD,MAAM;GACJ,OAAO;GACP,SAAS;GACT,mBAAmB;;;GAGnB,qBAAqB;GACrB,eAAe;GACf,QAAQ;GACR,aAAa;GACb,cAAc;GACd,SAAS;GACV;EACD,aAAa;GACX,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,OAAO;GACP,QAAQ;GACR,UAAU;GACX;EACD,UAAU;GACR,UAAU;GACV,YAAY;GACZ,UAAU;GACV,cAAc;GACf;EACD,cAAc,EACZ,UAAU,QACX;EACD,mBAAmB;GACjB,UAAU;GACV,WAAW;GACZ;EACD,kBAAkB;GAChB,cAAc;GACd,WAAW;GACX,OAAO;GACP,QAAQ;GACT;EACF;CACF,CAAC,CAEwE;AAM1E,MAAa,wBAAwB,WAAW;AAChD,MAAa,oBAAoB,WAAW;AAE5C,MAAa,iBAAiB,aAAa,WAAW,MAAM,QAAQ,EAAE,eAAe,MAAM,CAAC;AAE5F,MAAa,qBAAqB,YAAY,WAAW,UAAU,YAAY,EAAE,eAAe,MAAM,CAAC;AAEvG,MAAa,oBAAoB,YAAY,WAAW,SAAS,WAAW,EAAE,eAAe,MAAM,CAAC;AAEpG,MAAa,sBAAsB,YAAY,WAAW,WAAW,aAAa,EAAE,eAAe,MAAM,CAAC;AAE1G,MAAa,wBAAwB,YAAY,WAAW,aAAa,eAAe,EAAE,eAAe,MAAM,CAAC;AAEhH,MAAa,iBAAiB,YAAY,WAAW,MAAM,QAAQ,EAAE,eAAe,MAAM,CAAC;AAE3F,MAAa,8BAA8B,YAAY,WAAW,mBAAmB,qBAAqB,EACxG,eAAe,MAChB,CAAC;AAEF,MAAa,6BAA6B,YAAY,WAAW,kBAAkB,oBAAoB,EACrG,eAAe,MAChB,CAAC;AAEF,MAAM,6BAA6B,YAAY,WAAW,UAAU,YAAY,EAAE,eAAe,MAAM,CAAC;AAKxG,MAAa,qBAAqB,YAC/B,EAAE,YAAY,gBAAgB,aAAa,QAAQ,GAAG,SAAS,QAC9D,oBAAC,MAAD;CAAiB;CAAuB;CAAY,SAAA;CAAQ,GAAI;CAAY;WAE1E,oBAAC,4BAAD,EAA8B,CAAA;CACzB,CAAA,CAEV;AAED,MAAM,iCAAiC,YAAY,WAAW,cAAc,gBAAgB,EAAE,eAAe,MAAM,CAAC;AAKpH,MAAa,yBAAyB,YACnC,EAAE,YAAY,eAAe,GAAG,SAAS,QACxC,oBAAC,MAAD;CAAiB;CAAgB;CAAK,SAAA;CAAQ,GAAI;WAChD,oBAAC,gCAAD,EAAkC,CAAA;CAC7B,CAAA,CAEV;AAED,MAAM,0BAA0B,YAAY,WAAW,OAAO,QAAQ;AAKtE,MAAa,kBAAkB,YAC5B,EAAE,YAAY,gBAAgB,aAAa,SAAS,UAAU,GAAG,SAAS,QACzE,oBAAC,yBAAD;CAA8B;CAAK,SAAA;WACjC,oBAAC,OAAD;EAAkB;EAAuB;EAAY,GAAI;EACtD;EACK,CAAA;CACgB,CAAA,CAE7B"}

package/es/FramedContent.mjs

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

package/es/FramedContent.mjs.map

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

package/es/Hero.mjs

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

package/es/Hero.mjs.map

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

package/es/Image.mjs

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

package/es/Image.mjs.map

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

package/es/Input.mjs

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

package/es/Input.mjs.map

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