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

package/lib/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","names":["dialogAnatomy","Dialog","Text","Heading","_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 type { StyledProps } from \"@ndla/styled-system/types\";\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 { 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,iGArSD;CACvB,OAAOA,4BAAc,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,iBAAiBC,qBAAO,KAAK;AAE/D,MAAa,cAAc,EAAE,YAAY,MAAM,gBAAgB,MAAM,GAAG,YACtE,2CAAC;CAA8B;CAA0B;CAAe,GAAI;EAAS;AAGvF,MAAa,iBAAiB,YAAYA,qBAAO,UAAU,YAAY,EAAE,eAAe,MAAM,CAAC;AAE/F,MAAa,0BAA0B,YAAYA,qBAAO,SAAS,WAAW,EAAE,eAAe,MAAM,CAAC;AAEtG,MAAa,mBAAmB,YAAYA,qBAAO,YAAY,cAAc,EAAE,eAAe,MAAM,CAAC;AAIrG,MAAa,uCAAgE,OAAO,QAClF,qFACE,2CAAC,mBAAiB,EAClB,2CAAC,8BACC,2CAAC;CAA6B;CAAK,GAAI;EAAS,GAC/B,IAClB,CACH;AAEF,MAAM,4BAA4B,YAAYA,qBAAO,aAAa,cAAc;AAKhF,MAAa,qBAAqB,EAAE,YAAY,cAAc,UAAU,GAAG,WAAmC;AAC5G,QACE,2CAAC;EAA0B;YACzB,2CAACC;GAAgB;GAAW,GAAI;GAC7B;IACI;GACmB;;AAIhC,MAAM,sBAAsB,YAAYD,qBAAO,OAAO,QAAQ;AAK9D,MAAa,eAAe,EAAE,YAAY,gBAAgB,UAAU,GAAG,WACrE,2CAAC;CAAoB;WACnB,2CAACE;EAAmB;EAAW,GAAI;EAChC;GACO;EACU;AAGxB,MAAa,gBAAgB,YAAYF,qBAAO,SAAS,WAAW,EAAE,eAAe,MAAM,CAAC;AAE5F,MAAa,qBAAqB,YAAYA,qBAAO,cAAc,gBAAgB,EAAE,eAAe,MAAM,CAAC;AAE3G,MAAa,mDAAsB,OAAO,EACxC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,mBAAmB;CACnB,gBAAgB;CAChB,YAAY;CACZ,KAAK;CACN,EACF,CAAC;AAEF,MAAa,iDAAoB,OAAO,EACtC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,eAAe;CACf,mBAAmB;CACnB,iBAAiB;CAClB,EACF,CAAC;AAEF,MAAa,mDAAsB,OAAO,EACxC,MAAM;CACJ,SAAS;CACT,KAAK;CACL,YAAY;CACZ,gBAAgB;CAChB,eAAe;CACf,mBAAmB;CACnB,iBAAiB;CAClB,EACF,CAAC;AAEF,MAAa,qBAAqB,iBAAiBA,qBAAO,aAAa;AAEvE,MAAa,YAAYG"}
+{"version":3,"file":"Dialog.js","names":["dialogAnatomy","Dialog","Text","Heading","_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,iGArSD;CACvB,OAAOA,4BAAc,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,iBAAiBC,qBAAO,KAAK;AAE/D,MAAa,cAAc,EAAE,YAAY,MAAM,gBAAgB,MAAM,GAAG,YACtE,2CAAC;CAA8B;CAA0B;CAAe,GAAI;EAAS;AAGvF,MAAa,iBAAiB,YAAYA,qBAAO,UAAU,YAAY,EAAE,eAAe,MAAM,CAAC;AAE/F,MAAa,0BAA0B,YAAYA,qBAAO,SAAS,WAAW,EAAE,eAAe,MAAM,CAAC;AAEtG,MAAa,mBAAmB,YAAYA,qBAAO,YAAY,cAAc,EAAE,eAAe,MAAM,CAAC;AAIrG,MAAa,uCAAgE,OAAO,QAClF,qFACE,2CAAC,mBAAiB,EAClB,2CAAC,8BACC,2CAAC;CAA6B;CAAK,GAAI;EAAS,GAC/B,IAClB,CACH;AAEF,MAAM,4BAA4B,YAAYA,qBAAO,aAAa,cAAc;AAKhF,MAAa,qBAAqB,EAAE,YAAY,cAAc,UAAU,GAAG,WAAmC;AAC5G,QACE,2CAAC;EAA0B;YACzB,2CAACC;GAAgB;GAAW,GAAI;GAC7B;IACI;GACmB;;AAIhC,MAAM,sBAAsB,YAAYD,qBAAO,OAAO,QAAQ;AAK9D,MAAa,eAAe,EAAE,YAAY,gBAAgB,UAAU,GAAG,WACrE,2CAAC;CAAoB;WACnB,2CAACE;EAAmB;EAAW,GAAI;EAChC;GACO;EACU;AAGxB,MAAa,gBAAgB,YAAYF,qBAAO,SAAS,WAAW,EAAE,eAAe,MAAM,CAAC;AAE5F,MAAa,qBAAqB,YAAYA,qBAAO,cAAc,gBAAgB,EAAE,eAAe,MAAM,CAAC;AAE3G,MAAa,mDAAsB,OAAO,EACxC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,mBAAmB;CACnB,gBAAgB;CAChB,YAAY;CACZ,KAAK;CACN,EACF,CAAC;AAEF,MAAa,iDAAoB,OAAO,EACtC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,eAAe;CACf,mBAAmB;CACnB,iBAAiB;CAClB,EACF,CAAC;AAEF,MAAa,mDAAsB,OAAO,EACxC,MAAM;CACJ,SAAS;CACT,KAAK;CACL,YAAY;CACZ,gBAAgB;CAChB,eAAe;CACf,mBAAmB;CACnB,iBAAiB;CAClB,EACF,CAAC;AAEF,MAAa,qBAAqB,iBAAiBA,qBAAO,aAAa;AAEvE,MAAa,YAAYG"}

package/lib/ErrorMessage/ErrorMessage.d.ts

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import type { StyledProps } from "@ndla/styled-system/types";
 import { type HTMLArkProps } from "@ark-ui/react";
+import type { StyledProps } from "@ndla/styled-system/types";
 import { type TextProps } from "../Text";
 export declare const ErrorMessageRoot: import("@ndla/styled-system/jsx").StyleContextProvider<import("react").ForwardRefExoticComponent<import("react").ClassAttributes<HTMLElement> & import("react").HTMLAttributes<HTMLElement> & import("@ark-ui/react").PolymorphicProps>, import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"root" | "content" | "title" | "description" | "actions", import("@ndla/styled-system/types").SlotRecipeVariantRecord<"root" | "content" | "title" | "description" | "actions">>>;
 export declare const ErrorMessageContent: import("@ndla/styled-system/jsx").StyleContextConsumer<import("react").ForwardRefExoticComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@ark-ui/react").PolymorphicProps>>;

package/lib/ErrorMessage/ErrorMessage.js

@@ -6,6 +6,13 @@ let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
 
 //#region src/ErrorMessage/ErrorMessage.tsx
+/**
+* Copyright (c) 2024-present, NDLA.
+*
+* This source code is licensed under the GPLv3 license found in the
+* LICENSE file in the root directory of this source tree.
+*
+*/
 const { withProvider, withContext } = (0, _ndla_styled_system_jsx.createStyleContext)((0, _ndla_styled_system_css.sva)({
 	slots: [
 		"root",

package/lib/ErrorMessage/ErrorMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorMessage.js","names":["ark","Heading","Text"],"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 { StyledProps } from \"@ndla/styled-system/types\";\nimport { type HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport { forwardRef } from \"react\";\nimport { 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,iGA9BS;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,aAAaA,kBAAI,SAAS,QAAQ,EAAE,eAAe,MAAM,CAAC;AAE1F,MAAa,sBAAsB,YAAYA,kBAAI,KAAK,WAAW,EAAE,eAAe,MAAM,CAAC;AAE3F,MAAa,sBAAsB,YAAYA,kBAAI,KAAK,WAAW,EAAE,eAAe,MAAM,CAAC;AAI3F,MAAM,mDACH,EAAE,YAAY,iBAAiB,GAAG,SAAS,QAAQ,2CAACC;CAAmB;CAAW,GAAI;CAAY;EAAO,CAC3G;AAED,MAAa,oBAAoB,YAAY,2BAA2B,QAAQ;AAIhF,MAAM,yDACH,EAAE,YAAY,eAAe,GAAG,SAAS,QAAQ,2CAACC;CAAgB;CAAW,GAAI;CAAY;EAAO,CACtG;AAED,MAAa,0BAA0B,YAAY,iCAAiC,cAAc"}
+{"version":3,"file":"ErrorMessage.js","names":["ark","Heading","Text"],"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,iGA9BS;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,aAAaA,kBAAI,SAAS,QAAQ,EAAE,eAAe,MAAM,CAAC;AAE1F,MAAa,sBAAsB,YAAYA,kBAAI,KAAK,WAAW,EAAE,eAAe,MAAM,CAAC;AAE3F,MAAa,sBAAsB,YAAYA,kBAAI,KAAK,WAAW,EAAE,eAAe,MAAM,CAAC;AAI3F,MAAM,mDACH,EAAE,YAAY,iBAAiB,GAAG,SAAS,QAAQ,2CAACC;CAAmB;CAAW,GAAI;CAAY;EAAO,CAC3G;AAED,MAAa,oBAAoB,YAAY,2BAA2B,QAAQ;AAIhF,MAAM,yDACH,EAAE,YAAY,eAAe,GAAG,SAAS,QAAQ,2CAACC;CAAgB;CAAW,GAAI;CAAY;EAAO,CACtG;AAED,MAAa,0BAA0B,YAAY,iCAAiC,cAAc"}

package/lib/ExpandableBox.d.ts

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

package/lib/ExpandableBox.js

@@ -4,6 +4,13 @@ let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
 
 //#region src/ExpandableBox.tsx
+/**
+* Copyright (c) 2024-present, NDLA.
+*
+* This source code is licensed under the GPLv3 license found in the
+* LICENSE file in the root directory of this source tree.
+*
+*/
 const StyledExpandableBox = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react.ark.details, { base: {
 	transitionDuration: "fast",
 	width: "100%",

package/lib/ExpandableBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandableBox.js","names":["ark"],"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 { StyledProps } from \"@ndla/styled-system/types\";\nimport { type HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\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,0DACJA,kBAAI,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,uCAAoE,OAAO,QAAQ;AAC9F,4BAAgB;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,2CAAC;EAAoB,GAAI;EAAO,mBAAgB;EAAsB;GAAO;EACpF;AAIF,MAAM,iEACJA,kBAAI,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,8CAA2E,OAAO,QAC7F,2CAAC;CAA2B,GAAI;CAAO,mBAAgB;CAA8B;EAAO,CAC5F"}
+{"version":3,"file":"ExpandableBox.js","names":["ark"],"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,0DACJA,kBAAI,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,uCAAoE,OAAO,QAAQ;AAC9F,4BAAgB;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,2CAAC;EAAoB,GAAI;EAAO,mBAAgB;EAAsB;GAAO;EACpF;AAIF,MAAM,iEACJA,kBAAI,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,8CAA2E,OAAO,QAC7F,2CAAC;CAA2B,GAAI;CAAO,mBAAgB;CAA8B;EAAO,CAC5F"}

package/lib/Field.js

@@ -2,6 +2,13 @@ let _ark_ui_react = require("@ark-ui/react");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 
 //#region src/Field.tsx
+/**
+* Copyright (c) 2024-present, NDLA.
+*
+* This source code is licensed under the GPLv3 license found in the
+* LICENSE file in the root directory of this source tree.
+*
+*/
 const rootStyle = {
 	display: "flex",
 	flexDirection: "column",

package/lib/Field.js.map

@@ -1 +1 @@
-{"version":3,"file":"Field.js","names":["Field","Fieldset"],"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 type { SystemStyleObject } from \"@ndla/styled-system/types\";\nimport { Field, Fieldset } from \"@ark-ui/react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\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,gDAAmBA,oBAAM,MAAM,EAAE,MAAM,WAAW,EAAE,EAAE,eAAe,MAAM,CAAC;AAEzF,MAAa,mDAAsBC,uBAAS,MAAM,EAAE,MAAM,WAAW,EAAE,EAAE,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Field.js","names":["Field","Fieldset"],"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,gDAAmBA,oBAAM,MAAM,EAAE,MAAM,WAAW,EAAE,EAAE,eAAe,MAAM,CAAC;AAEzF,MAAa,mDAAsBC,uBAAS,MAAM,EAAE,MAAM,WAAW,EAAE,EAAE,eAAe,MAAM,CAAC"}

package/lib/FieldErrorMessage.d.ts

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

package/lib/FieldErrorMessage.js

@@ -5,6 +5,13 @@ let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
 
 //#region src/FieldErrorMessage.tsx
+/**
+* Copyright (c) 2024-present, NDLA.
+*
+* This source code is licensed under the GPLv3 license found in the
+* LICENSE file in the root directory of this source tree.
+*
+*/
 const errorTextStyling = {
 	color: "text.error",
 	whiteSpace: "pre-line",

package/lib/FieldErrorMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldErrorMessage.js","names":["Field","css","Fieldset"],"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 type { StyledProps, SystemStyleObject } from \"@ndla/styled-system/types\";\nimport { Field, Fieldset } from \"@ark-ui/react\";\nimport { css } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { forwardRef } from \"react\";\nimport type { TextProps } from \"./Text\";\n\nconst 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,2DACJA,oBAAM,WACN,EACE,MAAM,kBACP,EACD,EAAE,eAAe,MAAM,CACxB;AAID,MAAa,2CACV,EAAE,YAAY,eAAe,YAAY,KAAK,SAAS,OAAO,QAAQ,GAAG,SAAS,QACjF,2CAAC;CAAqB,KAAKC,4BAAI,IAAI;EAAE;EAAW;EAAY;EAAO;EAAQ,EAAE,QAAQ;CAAE,GAAI;CAAY;EAAO,CAEjH;AAED,MAAM,8DACJC,uBAAS,WACT,EACE,MAAM,kBACP,EACD,EAAE,eAAe,MAAM,CACxB;AAID,MAAa,2CACV,EAAE,YAAY,eAAe,YAAY,KAAK,SAAS,OAAO,QAAQ,GAAG,SAAS,QACjF,2CAAC;CAAwB,KAAKD,4BAAI,IAAI;EAAE;EAAW;EAAY;EAAO;EAAQ,EAAE,QAAQ;CAAE,GAAI;CAAY;EAAO,CAEpH"}
+{"version":3,"file":"FieldErrorMessage.js","names":["Field","css","Fieldset"],"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,2DACJA,oBAAM,WACN,EACE,MAAM,kBACP,EACD,EAAE,eAAe,MAAM,CACxB;AAID,MAAa,2CACV,EAAE,YAAY,eAAe,YAAY,KAAK,SAAS,OAAO,QAAQ,GAAG,SAAS,QACjF,2CAAC;CAAqB,KAAKC,4BAAI,IAAI;EAAE;EAAW;EAAY;EAAO;EAAQ,EAAE,QAAQ;CAAE,GAAI;CAAY;EAAO,CAEjH;AAED,MAAM,8DACJC,uBAAS,WACT,EACE,MAAM,kBACP,EACD,EAAE,eAAe,MAAM,CACxB;AAID,MAAa,2CACV,EAAE,YAAY,eAAe,YAAY,KAAK,SAAS,OAAO,QAAQ,GAAG,SAAS,QACjF,2CAAC;CAAwB,KAAKD,4BAAI,IAAI;EAAE;EAAW;EAAY;EAAO;EAAQ,EAAE,QAAQ;CAAE,GAAI;CAAY;EAAO,CAEpH"}

package/lib/FieldHelper.d.ts

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

package/lib/FieldHelper.js

@@ -5,6 +5,13 @@ let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
 
 //#region src/FieldHelper.tsx
+/**
+* Copyright (c) 2025-present, NDLA.
+*
+* This source code is licensed under the GPLv3 license found in the
+* LICENSE file in the root directory of this source tree.
+*
+*/
 const StyledFieldHelper = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react.Field.HelperText, {}, { baseComponent: true });
 const FieldHelper = (0, react.forwardRef)(({ textStyle = "label.small", fontWeight, color, srOnly, css: cssProp, ...props }, ref) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledFieldHelper, {

package/lib/FieldHelper.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldHelper.js","names":["Field","css","Fieldset"],"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 type { StyledProps } from \"@ndla/styled-system/types\";\nimport { Field, Fieldset } from \"@ark-ui/react\";\nimport { css } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { forwardRef } from \"react\";\nimport type { TextProps } from \"./Text\";\n\nconst 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,wDAA2BA,oBAAM,YAAY,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAI/E,MAAa,qCACV,EAAE,YAAY,eAAe,YAAY,OAAO,QAAQ,KAAK,SAAS,GAAG,SAAS,QAAQ;AACzF,QAAO,2CAAC;EAAkB,KAAKC,4BAAI,IAAI;GAAE;GAAW;GAAY;GAAO;GAAQ,EAAE,QAAQ;EAAE,GAAI;EAAY;GAAO;EAErH;AAED,MAAM,2DAA8BC,uBAAS,YAAY,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAIrF,MAAa,wCACV,EAAE,YAAY,eAAe,YAAY,OAAO,QAAQ,KAAK,SAAS,GAAG,SAAS,QAAQ;AACzF,QACE,2CAAC;EAAqB,KAAKD,4BAAI,IAAI;GAAE;GAAW;GAAY;GAAO;GAAQ,EAAE,QAAQ;EAAE,GAAI;EAAY;GAAO;EAGnH"}
+{"version":3,"file":"FieldHelper.js","names":["Field","css","Fieldset"],"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,wDAA2BA,oBAAM,YAAY,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAI/E,MAAa,qCACV,EAAE,YAAY,eAAe,YAAY,OAAO,QAAQ,KAAK,SAAS,GAAG,SAAS,QAAQ;AACzF,QAAO,2CAAC;EAAkB,KAAKC,4BAAI,IAAI;GAAE;GAAW;GAAY;GAAO;GAAQ,EAAE,QAAQ;EAAE,GAAI;EAAY;GAAO;EAErH;AAED,MAAM,2DAA8BC,uBAAS,YAAY,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAIrF,MAAa,wCACV,EAAE,YAAY,eAAe,YAAY,OAAO,QAAQ,KAAK,SAAS,GAAG,SAAS,QAAQ;AACzF,QACE,2CAAC;EAAqB,KAAKD,4BAAI,IAAI;GAAE;GAAW;GAAY;GAAO;GAAQ,EAAE,QAAQ;EAAE,GAAI;EAAY;GAAO;EAGnH"}

package/lib/Figure.d.ts

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

package/lib/Figure.js

@@ -5,6 +5,13 @@ let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
 
 //#region src/Figure.tsx
+/**
+* Copyright (c) 2024-present, NDLA.
+*
+* This source code is licensed under the GPLv3 license found in the
+* LICENSE file in the root directory of this source tree.
+*
+*/
 const figureRecipe = (0, _ndla_styled_system_css.cva)({
 	base: {
 		position: "relative",

package/lib/Figure.js.map

@@ -1 +1 @@
-{"version":3,"file":"Figure.js","names":["ark","css"],"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 { RecipeVariant, StyledProps } from \"@ndla/styled-system/types\";\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 { 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,gDAAmB;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,mDAAsBA,kBAAI,QAAQ,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAEpE,MAAa,gCAA+C,EAAE,MAAM,OAAO,KAAK,SAAS,GAAG,SAAS,QAAQ;AAC3G,QAAO,2CAAC;EAAa,KAAKC,4BAAI,IAAI,aAAa,IAAI;GAAE;GAAM;GAAO,CAAC,EAAE,QAAQ;EAAE,GAAI;EAAY;GAAO;EACtG"}
+{"version":3,"file":"Figure.js","names":["ark","css"],"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,gDAAmB;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,mDAAsBA,kBAAI,QAAQ,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAEpE,MAAa,gCAA+C,EAAE,MAAM,OAAO,KAAK,SAAS,GAAG,SAAS,QAAQ;AAC3G,QAAO,2CAAC;EAAa,KAAKC,4BAAI,IAAI,aAAa,IAAI;GAAE;GAAM;GAAO,CAAC,EAAE,QAAQ;EAAE,GAAI;EAAY;GAAO;EACtG"}

package/lib/FileUpload.d.ts

@@ -5,9 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import type { StyledProps } from "@ndla/styled-system/types";
 import { FileUpload } from "@ark-ui/react";
 import { type RecipeVariantProps } from "@ndla/styled-system/css";
+import type { StyledProps } from "@ndla/styled-system/types";
 import { type RefAttributes } from "react";
 import { type TextProps } from "./Text";
 declare const fileUploadRecipe: import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"root" | "item" | "label" | "itemGroup" | "trigger" | "clearTrigger" | "dropzone" | "itemDeleteTrigger" | "itemName" | "itemPreview" | "itemPreviewImage" | "itemSizeText", import("@ndla/styled-system/types").SlotRecipeVariantRecord<"root" | "item" | "label" | "itemGroup" | "trigger" | "clearTrigger" | "dropzone" | "itemDeleteTrigger" | "itemName" | "itemPreview" | "itemPreviewImage" | "itemSizeText">>;

package/lib/FileUpload.js

@@ -7,6 +7,13 @@ let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
 
 //#region src/FileUpload.tsx
+/**
+* Copyright (c) 2024-present, NDLA.
+*
+* This source code is licensed under the GPLv3 license found in the
+* LICENSE file in the root directory of this source tree.
+*
+*/
 const { withProvider, withContext } = (0, _ndla_styled_system_jsx.createStyleContext)((0, _ndla_styled_system_css.sva)({
 	slots: _ark_ui_react.fileUploadAnatomy.keys(),
 	base: {

package/lib/FileUpload.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileUpload.js","names":["fileUploadAnatomy","FileUpload","Text","Label"],"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 type { StyledProps } from \"@ndla/styled-system/types\";\nimport { FileUpload, fileUploadAnatomy } from \"@ark-ui/react\";\nimport { type RecipeVariantProps, sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\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,iGA/EO;CAC3B,OAAOA,gCAAkB,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,wBAAwBC,yBAAW;AAChD,MAAa,oBAAoBA,yBAAW;AAE5C,MAAa,iBAAiB,aAAaA,yBAAW,MAAM,QAAQ,EAAE,eAAe,MAAM,CAAC;AAE5F,MAAa,qBAAqB,YAAYA,yBAAW,UAAU,YAAY,EAAE,eAAe,MAAM,CAAC;AAEvG,MAAa,oBAAoB,YAAYA,yBAAW,SAAS,WAAW,EAAE,eAAe,MAAM,CAAC;AAEpG,MAAa,sBAAsB,YAAYA,yBAAW,WAAW,aAAa,EAAE,eAAe,MAAM,CAAC;AAE1G,MAAa,wBAAwB,YAAYA,yBAAW,aAAa,eAAe,EAAE,eAAe,MAAM,CAAC;AAEhH,MAAa,iBAAiB,YAAYA,yBAAW,MAAM,QAAQ,EAAE,eAAe,MAAM,CAAC;AAE3F,MAAa,8BAA8B,YAAYA,yBAAW,mBAAmB,qBAAqB,EACxG,eAAe,MAChB,CAAC;AAEF,MAAa,6BAA6B,YAAYA,yBAAW,kBAAkB,oBAAoB,EACrG,eAAe,MAChB,CAAC;AAEF,MAAM,6BAA6B,YAAYA,yBAAW,UAAU,YAAY,EAAE,eAAe,MAAM,CAAC;AAKxG,MAAa,4CACV,EAAE,YAAY,gBAAgB,aAAa,QAAQ,GAAG,SAAS,QAC9D,2CAACC;CAAgB;CAAuB;CAAY;CAAQ,GAAI;CAAY;WAE1E,2CAAC,+BAA6B;EACzB,CAEV;AAED,MAAM,iCAAiC,YAAYD,yBAAW,cAAc,gBAAgB,EAAE,eAAe,MAAM,CAAC;AAKpH,MAAa,gDACV,EAAE,YAAY,eAAe,GAAG,SAAS,QACxC,2CAACC;CAAgB;CAAgB;CAAK;CAAQ,GAAI;WAChD,2CAAC,mCAAiC;EAC7B,CAEV;AAED,MAAM,0BAA0B,YAAYD,yBAAW,OAAO,QAAQ;AAKtE,MAAa,yCACV,EAAE,YAAY,gBAAgB,aAAa,SAAS,UAAU,GAAG,SAAS,QACzE,2CAAC;CAA6B;CAAK;WACjC,2CAACE;EAAiB;EAAuB;EAAY,GAAI;EACtD;GACK;EACgB,CAE7B"}
+{"version":3,"file":"FileUpload.js","names":["fileUploadAnatomy","FileUpload","Text","Label"],"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,iGA/EO;CAC3B,OAAOA,gCAAkB,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,wBAAwBC,yBAAW;AAChD,MAAa,oBAAoBA,yBAAW;AAE5C,MAAa,iBAAiB,aAAaA,yBAAW,MAAM,QAAQ,EAAE,eAAe,MAAM,CAAC;AAE5F,MAAa,qBAAqB,YAAYA,yBAAW,UAAU,YAAY,EAAE,eAAe,MAAM,CAAC;AAEvG,MAAa,oBAAoB,YAAYA,yBAAW,SAAS,WAAW,EAAE,eAAe,MAAM,CAAC;AAEpG,MAAa,sBAAsB,YAAYA,yBAAW,WAAW,aAAa,EAAE,eAAe,MAAM,CAAC;AAE1G,MAAa,wBAAwB,YAAYA,yBAAW,aAAa,eAAe,EAAE,eAAe,MAAM,CAAC;AAEhH,MAAa,iBAAiB,YAAYA,yBAAW,MAAM,QAAQ,EAAE,eAAe,MAAM,CAAC;AAE3F,MAAa,8BAA8B,YAAYA,yBAAW,mBAAmB,qBAAqB,EACxG,eAAe,MAChB,CAAC;AAEF,MAAa,6BAA6B,YAAYA,yBAAW,kBAAkB,oBAAoB,EACrG,eAAe,MAChB,CAAC;AAEF,MAAM,6BAA6B,YAAYA,yBAAW,UAAU,YAAY,EAAE,eAAe,MAAM,CAAC;AAKxG,MAAa,4CACV,EAAE,YAAY,gBAAgB,aAAa,QAAQ,GAAG,SAAS,QAC9D,2CAACC;CAAgB;CAAuB;CAAY;CAAQ,GAAI;CAAY;WAE1E,2CAAC,+BAA6B;EACzB,CAEV;AAED,MAAM,iCAAiC,YAAYD,yBAAW,cAAc,gBAAgB,EAAE,eAAe,MAAM,CAAC;AAKpH,MAAa,gDACV,EAAE,YAAY,eAAe,GAAG,SAAS,QACxC,2CAACC;CAAgB;CAAgB;CAAK;CAAQ,GAAI;WAChD,2CAAC,mCAAiC;EAC7B,CAEV;AAED,MAAM,0BAA0B,YAAYD,yBAAW,OAAO,QAAQ;AAKtE,MAAa,yCACV,EAAE,YAAY,gBAAgB,aAAa,SAAS,UAAU,GAAG,SAAS,QACzE,2CAAC;CAA6B;CAAK;WACjC,2CAACE;EAAiB;EAAuB;EAAY,GAAI;EACtD;GACK;EACgB,CAE7B"}

package/lib/FramedContent.d.ts

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

package/lib/FramedContent.js

@@ -5,6 +5,13 @@ let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
 
 //#region src/FramedContent.tsx
+/**
+* Copyright (c) 2024-present, NDLA.
+*
+* This source code is licensed under the GPLv3 license found in the
+* LICENSE file in the root directory of this source tree.
+*
+*/
 const framedContentRecipe = (0, _ndla_styled_system_css.cva)({
 	base: {
 		padding: "medium",

package/lib/FramedContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"FramedContent.js","names":["ark","css"],"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 { StyledProps, RecipeVariantProps } from \"@ndla/styled-system/types\";\nimport { type HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { forwardRef } from \"react\";\n\nconst 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,uDAA0B;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,0DAA6BA,kBAAI,KAAK,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAExE,MAAa,uCACV,EAAE,YAAY,KAAK,SAAS,GAAG,SAAS,QACvC,2CAAC;CACC,mBAAgB;CAChB,KAAKC,4BAAI,IAAI,oBAAoB,IAAI,EAAE,YAAY,CAAC,EAAE,QAAQ;CAC9D,GAAI;CACC;EACL,CAEL"}
+{"version":3,"file":"FramedContent.js","names":["ark","css"],"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,uDAA0B;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,0DAA6BA,kBAAI,KAAK,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAExE,MAAa,uCACV,EAAE,YAAY,KAAK,SAAS,GAAG,SAAS,QACvC,2CAAC;CACC,mBAAgB;CAChB,KAAKC,4BAAI,IAAI,oBAAoB,IAAI,EAAE,YAAY,CAAC,EAAE,QAAQ;CAC9D,GAAI;CACC;EACL,CAEL"}

package/lib/Hero.d.ts

@@ -5,9 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import type { StyledProps } from "@ndla/styled-system/types";
 import { type HTMLArkProps } from "@ark-ui/react";
 import { type RecipeVariantProps } from "@ndla/styled-system/css";
+import type { StyledProps } from "@ndla/styled-system/types";
 declare const heroRecipe: import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"root" | "background" | "content", {
     absolute: {
         true: {
@@ -52,6 +52,11 @@ declare const heroRecipe: import("@ndla/styled-system/types").SlotRecipeRuntimeF
                 background: "surface.brand.1";
             };
         };
+        brand1Subtle: {
+            background: {
+                background: "surface.brand.1.subtle";
+            };
+        };
         brand1Moderate: {
             background: {
                 background: "surface.brand.1.moderate";
@@ -127,6 +132,11 @@ export declare const Hero: import("@ndla/styled-system/jsx").StyleContextProvide
                 background: "surface.brand.1";
             };
         };
+        brand1Subtle: {
+            background: {
+                background: "surface.brand.1.subtle";
+            };
+        };
         brand1Moderate: {
             background: {
                 background: "surface.brand.1.moderate";

package/lib/Hero.js

@@ -3,6 +3,13 @@ let _ndla_styled_system_css = require("@ndla/styled-system/css");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 
 //#region src/Hero.tsx
+/**
+* Copyright (c) 2024-present, NDLA.
+*
+* This source code is licensed under the GPLv3 license found in the
+* LICENSE file in the root directory of this source tree.
+*
+*/
 const { withProvider, withContext } = (0, _ndla_styled_system_jsx.createStyleContext)((0, _ndla_styled_system_css.sva)({
 	slots: [
 		"root",
@@ -48,6 +55,7 @@ const { withProvider, withContext } = (0, _ndla_styled_system_jsx.createStyleCon
 			brand2: { background: { background: "surface.brand.2" } },
 			brand2Moderate: { background: { background: "surface.brand.2.moderate" } },
 			brand1: { background: { background: "surface.brand.1" } },
+			brand1Subtle: { background: { background: "surface.brand.1.subtle" } },
 			brand1Moderate: { background: { background: "surface.brand.1.moderate" } },
 			brand3Moderate: { background: { background: "surface.brand.3.moderate" } },
 			brand4Moderate: { background: { background: "surface.brand.4.moderate" } },

package/lib/Hero.js.map

@@ -1 +1 @@
-{"version":3,"file":"Hero.js","names":["ark"],"sources":["../src/Hero.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { type HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { type RecipeVariantProps, sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\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      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":";;;;;AAqHA,MAAM,EAAE,cAAc,iGAxGC;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,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,aAAaA,kBAAI,KAAK,QAAQ,EAAE,eAAe,MAAM,CAAC;AAI1E,MAAa,iBAAiB,YAAYA,kBAAI,KAAK,cAAc,EAAE,eAAe,MAAM,CAAC;AAIzF,MAAa,cAAc,YAAYA,kBAAI,KAAK,WAAW,EAAE,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Hero.js","names":["ark"],"sources":["../src/Hero.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type HTMLArkProps, ark } from \"@ark-ui/react\";\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,iGA7GC;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,aAAaA,kBAAI,KAAK,QAAQ,EAAE,eAAe,MAAM,CAAC;AAI1E,MAAa,iBAAiB,YAAYA,kBAAI,KAAK,cAAc,EAAE,eAAe,MAAM,CAAC;AAIzF,MAAa,cAAc,YAAYA,kBAAI,KAAK,WAAW,EAAE,eAAe,MAAM,CAAC"}

package/lib/Image.js

@@ -4,6 +4,13 @@ let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
 
 //#region src/Image.tsx
+/**
+* Copyright (c) 2024-present, NDLA.
+*
+* This source code is licensed under the GPLv3 license found in the
+* LICENSE file in the root directory of this source tree.
+*
+*/
 const makeSrcQueryString = ({ width, crop, focalPoint, imageLanguage }) => {
 	const params = [];
 	if (width) params.push(`width=${width}`);