@ndla/ui 56.0.181-alpha.0 → 56.0.182-alpha.0

package/lib/Embed/UuDisclaimerEmbed.js.map

@@ -1 +1 @@
-{"version":3,"file":"UuDisclaimerEmbed.js","names":["IconButton","ErrorWarningFill","PopoverContent","PopoverRoot","PopoverTrigger","AccessibilityFill","Portal"],"sources":["../../src/Embed/UuDisclaimerEmbed.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 { Portal } from \"@ark-ui/react\";\nimport { AccessibilityFill, ErrorWarningFill } from \"@ndla/icons\";\nimport { IconButton, PopoverContent, PopoverRoot, PopoverTrigger } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { UuDisclaimerMetaData } from \"@ndla/types-embed\";\nimport { type ReactNode } from \"react\";\nimport { useTranslation } from \"react-i18next\";\n\ninterface Props {\n  embed: UuDisclaimerMetaData;\n  transformedDisclaimer: ReactNode;\n  children?: ReactNode;\n}\n\nconst DisclaimerWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"3xsmall\",\n    clear: \"both\",\n  },\n});\n\nconst StyledIconButton = styled(IconButton, {\n  base: {\n    alignSelf: \"flex-end\",\n  },\n});\n\nconst StyledErrorWarningFill = styled(ErrorWarningFill, {\n  base: {\n    alignSelf: \"flex-end\",\n    fill: \"icon.subtle\",\n  },\n});\n\nconst StyledPopoverContent = styled(PopoverContent, {\n  base: {\n    width: \"surface.xlarge\",\n    maxHeight: \"50vh\",\n    overflowY: \"auto\",\n  },\n});\n\nexport const UuDisclaimerEmbed = ({ embed, transformedDisclaimer, children }: Props) => {\n  const { t } = useTranslation();\n  if (embed.status === \"error\") {\n    return (\n      <DisclaimerWrapper>\n        <StyledErrorWarningFill\n          aria-label={t(\"embed.embedError\", { type: t(\"embed.type.disclaimer\") })}\n          title={t(\"embed.embedError\", { type: t(\"embed.type.disclaimer\") })}\n        />\n        {children}\n      </DisclaimerWrapper>\n    );\n  }\n\n  return (\n    <DisclaimerWrapper role=\"region\" data-embed-type=\"uu-disclaimer\">\n      <PopoverRoot>\n        <PopoverTrigger asChild>\n          <StyledIconButton\n            size=\"small\"\n            variant=\"secondary\"\n            aria-label={t(\"uuDisclaimer.title\")}\n            title={t(\"uuDisclaimer.title\")}\n          >\n            <AccessibilityFill />\n          </StyledIconButton>\n        </PopoverTrigger>\n        <Portal>\n          <StyledPopoverContent>\n            <div>{transformedDisclaimer}</div>\n          </StyledPopoverContent>\n        </Portal>\n      </PopoverRoot>\n      <div data-uu-content=\"\">{children}</div>\n    </DisclaimerWrapper>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AAsBA,MAAM,wDAA2B,OAAO,EACtC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,OAAO;CACR,EACF,CAAC;AAEF,MAAM,uDAA0BA,6BAAY,EAC1C,MAAM,EACJ,WAAW,YACZ,EACF,CAAC;AAEF,MAAM,6DAAgCC,8BAAkB,EACtD,MAAM;CACJ,WAAW;CACX,MAAM;CACP,EACF,CAAC;AAEF,MAAM,2DAA8BC,iCAAgB,EAClD,MAAM;CACJ,OAAO;CACP,WAAW;CACX,WAAW;CACZ,EACF,CAAC;AAEF,MAAa,qBAAqB,EAAE,OAAO,uBAAuB,eAAsB;CACtF,MAAM,EAAE,yCAAsB;AAC9B,KAAI,MAAM,WAAW,QACnB,QACE,4CAAC,gCACC,2CAAC;EACC,cAAY,EAAE,oBAAoB,EAAE,MAAM,EAAE,wBAAwB,EAAE,CAAC;EACvE,OAAO,EAAE,oBAAoB,EAAE,MAAM,EAAE,wBAAwB,EAAE,CAAC;GAClE,EACD,YACiB;AAIxB,QACE,4CAAC;EAAkB,MAAK;EAAS,mBAAgB;aAC/C,4CAACC,2CACC,2CAACC;GAAe;aACd,2CAAC;IACC,MAAK;IACL,SAAQ;IACR,cAAY,EAAE,qBAAqB;IACnC,OAAO,EAAE,qBAAqB;cAE9B,2CAACC,kCAAoB;KACJ;IACJ,EACjB,2CAACC,kCACC,2CAAC,kCACC,2CAAC,mBAAK,wBAA4B,GACb,GAChB,IACG,EACd,2CAAC;GAAI,mBAAgB;GAAI;IAAe;GACtB"}
+{"version":3,"file":"UuDisclaimerEmbed.js","names":["IconButton","ErrorWarningFill","PopoverContent","PopoverRoot","PopoverTrigger","AccessibilityFill","Portal"],"sources":["../../src/Embed/UuDisclaimerEmbed.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 { Portal } from \"@ark-ui/react\";\nimport { AccessibilityFill, ErrorWarningFill } from \"@ndla/icons\";\nimport { IconButton, PopoverContent, PopoverRoot, PopoverTrigger } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { UuDisclaimerMetaData } from \"@ndla/types-embed\";\nimport { type ReactNode } from \"react\";\nimport { useTranslation } from \"react-i18next\";\n\ninterface Props {\n  embed: UuDisclaimerMetaData;\n  transformedDisclaimer: ReactNode;\n  children?: ReactNode;\n}\n\nconst DisclaimerWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"3xsmall\",\n    clear: \"both\",\n  },\n});\n\nconst StyledIconButton = styled(IconButton, {\n  base: {\n    alignSelf: \"flex-end\",\n  },\n});\n\nconst StyledErrorWarningFill = styled(ErrorWarningFill, {\n  base: {\n    alignSelf: \"flex-end\",\n    fill: \"icon.subtle\",\n  },\n});\n\nconst StyledPopoverContent = styled(PopoverContent, {\n  base: {\n    width: \"surface.xlarge\",\n    maxHeight: \"50vh\",\n    overflowY: \"auto\",\n  },\n});\n\nexport const UuDisclaimerEmbed = ({ embed, transformedDisclaimer, children }: Props) => {\n  const { t } = useTranslation();\n  if (embed.status === \"error\") {\n    return (\n      <DisclaimerWrapper>\n        <StyledErrorWarningFill\n          aria-label={t(\"embed.embedError\", { type: t(\"embed.type.disclaimer\") })}\n          title={t(\"embed.embedError\", { type: t(\"embed.type.disclaimer\") })}\n        />\n        {children}\n      </DisclaimerWrapper>\n    );\n  }\n\n  return (\n    <DisclaimerWrapper role=\"region\" data-embed-type=\"uu-disclaimer\">\n      <PopoverRoot>\n        <PopoverTrigger asChild>\n          <StyledIconButton\n            size=\"small\"\n            variant=\"secondary\"\n            aria-label={t(\"uuDisclaimer.title\")}\n            title={t(\"uuDisclaimer.title\")}\n          >\n            <AccessibilityFill />\n          </StyledIconButton>\n        </PopoverTrigger>\n        <Portal>\n          <StyledPopoverContent>\n            <div>{transformedDisclaimer}</div>\n          </StyledPopoverContent>\n        </Portal>\n      </PopoverRoot>\n      <div data-uu-content=\"\">{children}</div>\n    </DisclaimerWrapper>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;AAsBA,MAAM,qBAAA,GAAA,wBAAA,QAA2B,OAAO,EACtC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,OAAO;CACR,EACF,CAAC;AAEF,MAAM,oBAAA,GAAA,wBAAA,QAA0BA,iBAAAA,YAAY,EAC1C,MAAM,EACJ,WAAW,YACZ,EACF,CAAC;AAEF,MAAM,0BAAA,GAAA,wBAAA,QAAgCC,YAAAA,kBAAkB,EACtD,MAAM;CACJ,WAAW;CACX,MAAM;CACP,EACF,CAAC;AAEF,MAAM,wBAAA,GAAA,wBAAA,QAA8BC,iBAAAA,gBAAgB,EAClD,MAAM;CACJ,OAAO;CACP,WAAW;CACX,WAAW;CACZ,EACF,CAAC;AAEF,MAAa,qBAAqB,EAAE,OAAO,uBAAuB,eAAsB;CACtF,MAAM,EAAE,OAAA,GAAA,cAAA,iBAAsB;AAC9B,KAAI,MAAM,WAAW,QACnB,QACE,iBAAA,GAAA,kBAAA,MAAC,mBAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAC,wBAAD;EACE,cAAY,EAAE,oBAAoB,EAAE,MAAM,EAAE,wBAAwB,EAAE,CAAC;EACvE,OAAO,EAAE,oBAAoB,EAAE,MAAM,EAAE,wBAAwB,EAAE,CAAC;EAClE,CAAA,EACD,SACiB,EAAA,CAAA;AAIxB,QACE,iBAAA,GAAA,kBAAA,MAAC,mBAAD;EAAmB,MAAK;EAAS,mBAAgB;YAAjD,CACE,iBAAA,GAAA,kBAAA,MAACC,iBAAAA,aAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,gBAAD;GAAgB,SAAA;aACd,iBAAA,GAAA,kBAAA,KAAC,kBAAD;IACE,MAAK;IACL,SAAQ;IACR,cAAY,EAAE,qBAAqB;IACnC,OAAO,EAAE,qBAAqB;cAE9B,iBAAA,GAAA,kBAAA,KAACC,YAAAA,mBAAD,EAAqB,CAAA;IACJ,CAAA;GACJ,CAAA,EACjB,iBAAA,GAAA,kBAAA,KAACC,cAAAA,QAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAC,sBAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAA,UAAM,uBAA4B,CAAA,EACb,CAAA,EAChB,CAAA,CACG,EAAA,CAAA,EACd,iBAAA,GAAA,kBAAA,KAAC,OAAD;GAAK,mBAAgB;GAAI;GAAe,CAAA,CACtB"}

package/lib/FactBox/FactBox.js

@@ -1,4 +1,4 @@
-const require_runtime = require('../_virtual/_rolldown/runtime.js');
+const require_runtime = require("../_virtual/_rolldown/runtime.js");
 let _ndla_primitives = require("@ndla/primitives");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react = require("react");
@@ -6,7 +6,6 @@ react = require_runtime.__toESM(react);
 let react_i18next = require("react-i18next");
 let _ndla_icons = require("@ndla/icons");
 let react_jsx_runtime = require("react/jsx-runtime");
-
 //#region src/FactBox/FactBox.tsx
 /**
 * Copyright (c) 2016-present, NDLA.
@@ -123,7 +122,7 @@ const FactBox = (0, react.forwardRef)(({ children, open, onOpenChange, defaultOp
 		})]
 	});
 });
-
 //#endregion
 exports.FactBox = FactBox;
+
 //# sourceMappingURL=FactBox.js.map

package/lib/FactBox/FactBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"FactBox.js","names":["IconButton","React","ArrowDownShortLine"],"sources":["../../src/FactBox/FactBox.tsx"],"sourcesContent":["/**\n * Copyright (c) 2016-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 { ArrowDownShortLine } from \"@ndla/icons\";\nimport { IconButton } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport React, {\n  type ComponentProps,\n  type ReactNode,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useState,\n} from \"react\";\nimport { useTranslation } from \"react-i18next\";\n\ninterface Props extends ComponentProps<\"aside\"> {\n  children?: ReactNode;\n  defaultOpen?: boolean;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n}\n\nconst StyledAside = styled(\"aside\", {\n  base: {\n    position: \"relative\",\n    padding: \"medium\",\n    display: \"grid\",\n    gridTemplateRows: \"0fr\",\n    transitionProperty: \"grid-template-rows\",\n    transitionDuration: \"slow\",\n    transitionTimingFunction: \"ease-in-out\",\n    justifyItems: \"center\",\n    border: \"1px solid\",\n    borderColor: \"stroke.default\",\n    borderRadius: \"xsmall\",\n    clear: \"both\",\n    _open: {\n      gridTemplateRows: \"1fr\",\n    },\n    _closed: {\n      _print: {\n        overflow: \"visible\",\n        maxHeight: \"500vh\",\n      },\n    },\n    \"& > div\": {\n      minHeight: \"surface.3xsmall\",\n    },\n  },\n  variants: {\n    overflowHidden: {\n      true: {\n        \"& > div\": {\n          overflow: \"hidden\",\n        },\n      },\n    },\n  },\n});\n\nconst StyledContent = styled(\"div\", {\n  base: {\n    position: \"relative\",\n    width: \"100%\",\n    // Reset the top margin of the very first child.\n    \"& :first-child\": {\n      marginBlockStart: \"0\",\n    },\n    _after: {\n      content: '\"\"',\n      textAlign: \"center\",\n      position: \"absolute\",\n      inset: \"0\",\n      transitionProperty: \"opacity\",\n      transitionDuration: \"slow\",\n      transitionTimingFunction: \"ease-in-out\",\n      gradientFrom: \"surface.default/20\",\n      gradientTo: \"surface.default/95\",\n      backgroundGradient: \"to-b\",\n      opacity: \"1\",\n      zIndex: \"base\",\n      pointerEvents: \"none\",\n    },\n    _print: {\n      overflow: \"visible\",\n      _after: {\n        display: \"none\",\n      },\n    },\n    _open: {\n      paddingBlockEnd: \"xsmall\",\n      _after: {\n        opacity: \"0\",\n      },\n    },\n  },\n});\n\nconst StyledIconButton = styled(IconButton, {\n  base: {\n    position: \"absolute\",\n    bottom: \"-medium\",\n    zIndex: \"base\",\n    \"& svg\": {\n      transitionProperty: \"transform\",\n      transitionTimingFunction: \"ease-in-out\",\n      transitionDuration: \"fast\",\n    },\n    _open: {\n      \"& svg\": {\n        transform: \"rotate(180deg)\",\n      },\n    },\n    _print: {\n      display: \"none\",\n    },\n  },\n});\n\n// TODO: Consider moving the open trigger depending on whether the content is open or closed.\n\nexport const FactBox = forwardRef<HTMLElement, Props>(\n  ({ children, open, onOpenChange, defaultOpen = false, ...rest }, ref) => {\n    const { t } = useTranslation();\n    const [state, setState] = useState<\"open\" | \"closed\">(defaultOpen ? \"open\" : \"closed\");\n    const [overflowHidden, setOverflowHidden] = useState(!defaultOpen);\n    const contentId = useId();\n    // Inert has existed since early 2023. It allows us to disable tabindex inside the content if it is closed, allowing us to be accessible for users with newish browsers. React 18 removes this because it doesn't recognize the attribute. This is a workaround for that.\n    // When running in React 18, we need to use an empty string instead of true.\n    // TODO: Remove this hack once we upgrade to React 19 as a peer dep.\n    const inertAttribute = useMemo(() => {\n      return state === \"closed\" ? { inert: typeof React.use === \"function\" ? true : \"\" } : {};\n    }, [state]) as { inert?: boolean };\n\n    useEffect(() => {\n      if (open !== undefined) {\n        setState(open ? \"open\" : \"closed\");\n      }\n    }, [open]);\n\n    const onClick = useCallback(() => {\n      const newState = state === \"open\" ? \"closed\" : \"open\";\n      setState(newState);\n      onOpenChange?.(newState === \"open\");\n    }, [state, onOpenChange]);\n\n    return (\n      <StyledAside\n        data-state={state}\n        data-embed-type=\"factbox\"\n        {...rest}\n        ref={ref}\n        overflowHidden={overflowHidden}\n        onTransitionStart={(e) => {\n          if (e.target === e.currentTarget && state === \"closed\") {\n            setOverflowHidden(true);\n          }\n        }}\n        onTransitionEnd={(e) => {\n          if (e.target === e.currentTarget && state === \"open\") {\n            setOverflowHidden(false);\n          }\n        }}\n      >\n        <StyledIconButton\n          data-state={state}\n          onClick={onClick}\n          contentEditable={false}\n          aria-expanded={state === \"open\"}\n          aria-controls={contentId}\n          aria-label={t(`factbox.${state === \"open\" ? \"close\" : \"open\"}`)}\n        >\n          <ArrowDownShortLine />\n        </StyledIconButton>\n        <StyledContent id={contentId} data-state={state} aria-hidden={state === \"closed\"} {...inertAttribute}>\n          {children}\n        </StyledContent>\n      </StyledAside>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;AA8BA,MAAM,kDAAqB,SAAS;CAClC,MAAM;EACJ,UAAU;EACV,SAAS;EACT,SAAS;EACT,kBAAkB;EAClB,oBAAoB;EACpB,oBAAoB;EACpB,0BAA0B;EAC1B,cAAc;EACd,QAAQ;EACR,aAAa;EACb,cAAc;EACd,OAAO;EACP,OAAO,EACL,kBAAkB,OACnB;EACD,SAAS,EACP,QAAQ;GACN,UAAU;GACV,WAAW;GACZ,EACF;EACD,WAAW,EACT,WAAW,mBACZ;EACF;CACD,UAAU,EACR,gBAAgB,EACd,MAAM,EACJ,WAAW,EACT,UAAU,UACX,EACF,EACF,EACF;CACF,CAAC;AAEF,MAAM,oDAAuB,OAAO,EAClC,MAAM;CACJ,UAAU;CACV,OAAO;CAEP,kBAAkB,EAChB,kBAAkB,KACnB;CACD,QAAQ;EACN,SAAS;EACT,WAAW;EACX,UAAU;EACV,OAAO;EACP,oBAAoB;EACpB,oBAAoB;EACpB,0BAA0B;EAC1B,cAAc;EACd,YAAY;EACZ,oBAAoB;EACpB,SAAS;EACT,QAAQ;EACR,eAAe;EAChB;CACD,QAAQ;EACN,UAAU;EACV,QAAQ,EACN,SAAS,QACV;EACF;CACD,OAAO;EACL,iBAAiB;EACjB,QAAQ,EACN,SAAS,KACV;EACF;CACF,EACF,CAAC;AAEF,MAAM,uDAA0BA,6BAAY,EAC1C,MAAM;CACJ,UAAU;CACV,QAAQ;CACR,QAAQ;CACR,SAAS;EACP,oBAAoB;EACpB,0BAA0B;EAC1B,oBAAoB;EACrB;CACD,OAAO,EACL,SAAS,EACP,WAAW,kBACZ,EACF;CACD,QAAQ,EACN,SAAS,QACV;CACF,EACF,CAAC;AAIF,MAAa,iCACV,EAAE,UAAU,MAAM,cAAc,cAAc,OAAO,GAAG,QAAQ,QAAQ;CACvE,MAAM,EAAE,yCAAsB;CAC9B,MAAM,CAAC,OAAO,gCAAwC,cAAc,SAAS,SAAS;CACtF,MAAM,CAAC,gBAAgB,yCAA8B,CAAC,YAAY;CAClE,MAAM,8BAAmB;CAIzB,MAAM,0CAA+B;AACnC,SAAO,UAAU,WAAW,EAAE,OAAO,OAAOC,cAAM,QAAQ,aAAa,OAAO,IAAI,GAAG,EAAE;IACtF,CAAC,MAAM,CAAC;AAEX,4BAAgB;AACd,MAAI,SAAS,OACX,UAAS,OAAO,SAAS,SAAS;IAEnC,CAAC,KAAK,CAAC;CAEV,MAAM,uCAA4B;EAChC,MAAM,WAAW,UAAU,SAAS,WAAW;AAC/C,WAAS,SAAS;AAClB,iBAAe,aAAa,OAAO;IAClC,CAAC,OAAO,aAAa,CAAC;AAEzB,QACE,4CAAC;EACC,cAAY;EACZ,mBAAgB;EAChB,GAAI;EACC;EACW;EAChB,oBAAoB,MAAM;AACxB,OAAI,EAAE,WAAW,EAAE,iBAAiB,UAAU,SAC5C,mBAAkB,KAAK;;EAG3B,kBAAkB,MAAM;AACtB,OAAI,EAAE,WAAW,EAAE,iBAAiB,UAAU,OAC5C,mBAAkB,MAAM;;aAI5B,2CAAC;GACC,cAAY;GACH;GACT,iBAAiB;GACjB,iBAAe,UAAU;GACzB,iBAAe;GACf,cAAY,EAAE,WAAW,UAAU,SAAS,UAAU,SAAS;aAE/D,2CAACC,mCAAqB;IACL,EACnB,2CAAC;GAAc,IAAI;GAAW,cAAY;GAAO,eAAa,UAAU;GAAU,GAAI;GACnF;IACa;GACJ;EAGnB"}
+{"version":3,"file":"FactBox.js","names":["IconButton","React","ArrowDownShortLine"],"sources":["../../src/FactBox/FactBox.tsx"],"sourcesContent":["/**\n * Copyright (c) 2016-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 { ArrowDownShortLine } from \"@ndla/icons\";\nimport { IconButton } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport React, {\n  type ComponentProps,\n  type ReactNode,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useState,\n} from \"react\";\nimport { useTranslation } from \"react-i18next\";\n\ninterface Props extends ComponentProps<\"aside\"> {\n  children?: ReactNode;\n  defaultOpen?: boolean;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n}\n\nconst StyledAside = styled(\"aside\", {\n  base: {\n    position: \"relative\",\n    padding: \"medium\",\n    display: \"grid\",\n    gridTemplateRows: \"0fr\",\n    transitionProperty: \"grid-template-rows\",\n    transitionDuration: \"slow\",\n    transitionTimingFunction: \"ease-in-out\",\n    justifyItems: \"center\",\n    border: \"1px solid\",\n    borderColor: \"stroke.default\",\n    borderRadius: \"xsmall\",\n    clear: \"both\",\n    _open: {\n      gridTemplateRows: \"1fr\",\n    },\n    _closed: {\n      _print: {\n        overflow: \"visible\",\n        maxHeight: \"500vh\",\n      },\n    },\n    \"& > div\": {\n      minHeight: \"surface.3xsmall\",\n    },\n  },\n  variants: {\n    overflowHidden: {\n      true: {\n        \"& > div\": {\n          overflow: \"hidden\",\n        },\n      },\n    },\n  },\n});\n\nconst StyledContent = styled(\"div\", {\n  base: {\n    position: \"relative\",\n    width: \"100%\",\n    // Reset the top margin of the very first child.\n    \"& :first-child\": {\n      marginBlockStart: \"0\",\n    },\n    _after: {\n      content: '\"\"',\n      textAlign: \"center\",\n      position: \"absolute\",\n      inset: \"0\",\n      transitionProperty: \"opacity\",\n      transitionDuration: \"slow\",\n      transitionTimingFunction: \"ease-in-out\",\n      gradientFrom: \"surface.default/20\",\n      gradientTo: \"surface.default/95\",\n      backgroundGradient: \"to-b\",\n      opacity: \"1\",\n      zIndex: \"base\",\n      pointerEvents: \"none\",\n    },\n    _print: {\n      overflow: \"visible\",\n      _after: {\n        display: \"none\",\n      },\n    },\n    _open: {\n      paddingBlockEnd: \"xsmall\",\n      _after: {\n        opacity: \"0\",\n      },\n    },\n  },\n});\n\nconst StyledIconButton = styled(IconButton, {\n  base: {\n    position: \"absolute\",\n    bottom: \"-medium\",\n    zIndex: \"base\",\n    \"& svg\": {\n      transitionProperty: \"transform\",\n      transitionTimingFunction: \"ease-in-out\",\n      transitionDuration: \"fast\",\n    },\n    _open: {\n      \"& svg\": {\n        transform: \"rotate(180deg)\",\n      },\n    },\n    _print: {\n      display: \"none\",\n    },\n  },\n});\n\n// TODO: Consider moving the open trigger depending on whether the content is open or closed.\n\nexport const FactBox = forwardRef<HTMLElement, Props>(\n  ({ children, open, onOpenChange, defaultOpen = false, ...rest }, ref) => {\n    const { t } = useTranslation();\n    const [state, setState] = useState<\"open\" | \"closed\">(defaultOpen ? \"open\" : \"closed\");\n    const [overflowHidden, setOverflowHidden] = useState(!defaultOpen);\n    const contentId = useId();\n    // Inert has existed since early 2023. It allows us to disable tabindex inside the content if it is closed, allowing us to be accessible for users with newish browsers. React 18 removes this because it doesn't recognize the attribute. This is a workaround for that.\n    // When running in React 18, we need to use an empty string instead of true.\n    // TODO: Remove this hack once we upgrade to React 19 as a peer dep.\n    const inertAttribute = useMemo(() => {\n      return state === \"closed\" ? { inert: typeof React.use === \"function\" ? true : \"\" } : {};\n    }, [state]) as { inert?: boolean };\n\n    useEffect(() => {\n      if (open !== undefined) {\n        setState(open ? \"open\" : \"closed\");\n      }\n    }, [open]);\n\n    const onClick = useCallback(() => {\n      const newState = state === \"open\" ? \"closed\" : \"open\";\n      setState(newState);\n      onOpenChange?.(newState === \"open\");\n    }, [state, onOpenChange]);\n\n    return (\n      <StyledAside\n        data-state={state}\n        data-embed-type=\"factbox\"\n        {...rest}\n        ref={ref}\n        overflowHidden={overflowHidden}\n        onTransitionStart={(e) => {\n          if (e.target === e.currentTarget && state === \"closed\") {\n            setOverflowHidden(true);\n          }\n        }}\n        onTransitionEnd={(e) => {\n          if (e.target === e.currentTarget && state === \"open\") {\n            setOverflowHidden(false);\n          }\n        }}\n      >\n        <StyledIconButton\n          data-state={state}\n          onClick={onClick}\n          contentEditable={false}\n          aria-expanded={state === \"open\"}\n          aria-controls={contentId}\n          aria-label={t(`factbox.${state === \"open\" ? \"close\" : \"open\"}`)}\n        >\n          <ArrowDownShortLine />\n        </StyledIconButton>\n        <StyledContent id={contentId} data-state={state} aria-hidden={state === \"closed\"} {...inertAttribute}>\n          {children}\n        </StyledContent>\n      </StyledAside>\n    );\n  },\n);\n"],"mappings":"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"}

package/lib/FileList/File.js

@@ -1,5 +1,5 @@
-const require_runtime = require('../_virtual/_rolldown/runtime.js');
-const require_FileList = require('./FileList.js');
+require("../_virtual/_rolldown/runtime.js");
+const require_FileList = require("./FileList.js");
 let _ndla_primitives = require("@ndla/primitives");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react = require("react");
@@ -8,7 +8,6 @@ let _ndla_icons = require("@ndla/icons");
 let _ndla_safelink = require("@ndla/safelink");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _ndla_styled_system_patterns = require("@ndla/styled-system/patterns");
-
 //#region src/FileList/File.tsx
 /**
 * Copyright (c) 2023-present, NDLA.
@@ -83,8 +82,8 @@ const FileListElement = ({ title, url, fileExists, fileType, fileSize }) => /* @
 	fileType,
 	fileSize
 }) });
-
 //#endregion
 exports.File = File;
 exports.FileListElement = FileListElement;
+
 //# sourceMappingURL=File.js.map

package/lib/FileList/File.js.map

@@ -1 +1 @@
-{"version":3,"file":"File.js","names":["SafeLink","DownloadLine","linkOverlay","Text","FileListItem"],"sources":["../../src/FileList/File.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-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 { DownloadLine } from \"@ndla/icons\";\nimport { Text } from \"@ndla/primitives\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { linkOverlay } from \"@ndla/styled-system/patterns\";\nimport { type ComponentPropsWithRef, forwardRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { FileListItem } from \"./FileList\";\n\nexport interface FileProps extends ComponentPropsWithRef<\"div\"> {\n  title: string;\n  url: string;\n  fileExists: boolean;\n  fileType: string;\n  fileSize?: string;\n}\n\nexport interface FileType {\n  title: string;\n  formats: FileFormat[];\n  fileExists?: boolean;\n}\n\nexport interface FileFormat {\n  url: string;\n  fileType: string;\n  tooltip: string;\n}\n\nconst StyledSafeLink = styled(SafeLink, {\n  base: {\n    textUnderlineOffset: \"2px\",\n    textDecoration: \"underline\",\n    _hover: {\n      textDecoration: \"none\",\n    },\n  },\n});\n\nconst FileContainer = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n    position: \"relative\",\n    paddingBlock: \"small\",\n    paddingInlineEnd: \"medium\",\n    paddingInlineStart: \"small\",\n    width: \"100%\",\n  },\n});\n\nconst InfoContainer = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    gap: \"xxsmall\",\n    alignItems: \"center\",\n  },\n});\n\nexport const File = forwardRef<HTMLDivElement, FileProps>(\n  ({ title, url, fileExists, fileType, fileSize, ...rest }, ref) => {\n    const { t } = useTranslation();\n    const filename = `${title}-${url.split(\"/\").pop() ?? \"\"}`;\n    const downloadUrl = `${url}?download=true`;\n    const tooltip = `${t(\"download\")} ${filename}`;\n\n    return (\n      <FileContainer ref={ref} {...rest}>\n        <InfoContainer>\n          <DownloadLine />\n          {fileExists ? (\n            <StyledSafeLink unstyled download={filename} css={linkOverlay.raw()} to={downloadUrl} title={tooltip}>\n              {title}\n            </StyledSafeLink>\n          ) : (\n            <Text textStyle=\"label.medium\">{title}</Text>\n          )}\n          <Text textStyle=\"label.large\" asChild consumeCss>\n            <span>({fileType?.toUpperCase()})</span>\n          </Text>\n        </InfoContainer>\n        <Text textStyle=\"label.large\" asChild consumeCss>\n          <span>{fileSize}</span>\n        </Text>\n      </FileContainer>\n    );\n  },\n);\n\nexport const FileListElement = ({ title, url, fileExists, fileType, fileSize }: FileProps) => (\n  <FileListItem>\n    <File title={title} url={url} fileExists={fileExists} fileType={fileType} fileSize={fileSize} />\n  </FileListItem>\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAqCA,MAAM,qDAAwBA,yBAAU,EACtC,MAAM;CACJ,qBAAqB;CACrB,gBAAgB;CAChB,QAAQ,EACN,gBAAgB,QACjB;CACF,EACF,CAAC;AAEF,MAAM,oDAAuB,OAAO,EAClC,MAAM;CACJ,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,UAAU;CACV,cAAc;CACd,kBAAkB;CAClB,oBAAoB;CACpB,OAAO;CACR,EACF,CAAC;AAEF,MAAM,oDAAuB,OAAO,EAClC,MAAM;CACJ,SAAS;CACT,KAAK;CACL,YAAY;CACb,EACF,CAAC;AAEF,MAAa,8BACV,EAAE,OAAO,KAAK,YAAY,UAAU,UAAU,GAAG,QAAQ,QAAQ;CAChE,MAAM,EAAE,yCAAsB;CAC9B,MAAM,WAAW,GAAG,MAAM,GAAG,IAAI,MAAM,IAAI,CAAC,KAAK,IAAI;CACrD,MAAM,cAAc,GAAG,IAAI;CAC3B,MAAM,UAAU,GAAG,EAAE,WAAW,CAAC,GAAG;AAEpC,QACE,4CAAC;EAAmB;EAAK,GAAI;aAC3B,4CAAC;GACC,2CAACC,6BAAe;GACf,aACC,2CAAC;IAAe;IAAS,UAAU;IAAU,KAAKC,yCAAY,KAAK;IAAE,IAAI;IAAa,OAAO;cAC1F;KACc,GAEjB,2CAACC;IAAK,WAAU;cAAgB;KAAa;GAE/C,2CAACA;IAAK,WAAU;IAAc;IAAQ;cACpC,4CAAC;KAAK;KAAE,UAAU,aAAa;KAAC;QAAQ;KACnC;MACO,EAChB,2CAACA;GAAK,WAAU;GAAc;GAAQ;aACpC,2CAAC,oBAAM,WAAgB;IAClB;GACO;EAGrB;AAED,MAAa,mBAAmB,EAAE,OAAO,KAAK,YAAY,UAAU,eAClE,2CAACC,2CACC,2CAAC;CAAY;CAAY;CAAiB;CAAsB;CAAoB;EAAY,GACnF"}
+{"version":3,"file":"File.js","names":["SafeLink","DownloadLine","linkOverlay","Text","FileListItem"],"sources":["../../src/FileList/File.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-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 { DownloadLine } from \"@ndla/icons\";\nimport { Text } from \"@ndla/primitives\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { linkOverlay } from \"@ndla/styled-system/patterns\";\nimport { type ComponentPropsWithRef, forwardRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { FileListItem } from \"./FileList\";\n\nexport interface FileProps extends ComponentPropsWithRef<\"div\"> {\n  title: string;\n  url: string;\n  fileExists: boolean;\n  fileType: string;\n  fileSize?: string;\n}\n\nexport interface FileType {\n  title: string;\n  formats: FileFormat[];\n  fileExists?: boolean;\n}\n\nexport interface FileFormat {\n  url: string;\n  fileType: string;\n  tooltip: string;\n}\n\nconst StyledSafeLink = styled(SafeLink, {\n  base: {\n    textUnderlineOffset: \"2px\",\n    textDecoration: \"underline\",\n    _hover: {\n      textDecoration: \"none\",\n    },\n  },\n});\n\nconst FileContainer = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n    position: \"relative\",\n    paddingBlock: \"small\",\n    paddingInlineEnd: \"medium\",\n    paddingInlineStart: \"small\",\n    width: \"100%\",\n  },\n});\n\nconst InfoContainer = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    gap: \"xxsmall\",\n    alignItems: \"center\",\n  },\n});\n\nexport const File = forwardRef<HTMLDivElement, FileProps>(\n  ({ title, url, fileExists, fileType, fileSize, ...rest }, ref) => {\n    const { t } = useTranslation();\n    const filename = `${title}-${url.split(\"/\").pop() ?? \"\"}`;\n    const downloadUrl = `${url}?download=true`;\n    const tooltip = `${t(\"download\")} ${filename}`;\n\n    return (\n      <FileContainer ref={ref} {...rest}>\n        <InfoContainer>\n          <DownloadLine />\n          {fileExists ? (\n            <StyledSafeLink unstyled download={filename} css={linkOverlay.raw()} to={downloadUrl} title={tooltip}>\n              {title}\n            </StyledSafeLink>\n          ) : (\n            <Text textStyle=\"label.medium\">{title}</Text>\n          )}\n          <Text textStyle=\"label.large\" asChild consumeCss>\n            <span>({fileType?.toUpperCase()})</span>\n          </Text>\n        </InfoContainer>\n        <Text textStyle=\"label.large\" asChild consumeCss>\n          <span>{fileSize}</span>\n        </Text>\n      </FileContainer>\n    );\n  },\n);\n\nexport const FileListElement = ({ title, url, fileExists, fileType, fileSize }: FileProps) => (\n  <FileListItem>\n    <File title={title} url={url} fileExists={fileExists} fileType={fileType} fileSize={fileSize} />\n  </FileListItem>\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;AAqCA,MAAM,kBAAA,GAAA,wBAAA,QAAwBA,eAAAA,UAAU,EACtC,MAAM;CACJ,qBAAqB;CACrB,gBAAgB;CAChB,QAAQ,EACN,gBAAgB,QACjB;CACF,EACF,CAAC;AAEF,MAAM,iBAAA,GAAA,wBAAA,QAAuB,OAAO,EAClC,MAAM;CACJ,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,UAAU;CACV,cAAc;CACd,kBAAkB;CAClB,oBAAoB;CACpB,OAAO;CACR,EACF,CAAC;AAEF,MAAM,iBAAA,GAAA,wBAAA,QAAuB,OAAO,EAClC,MAAM;CACJ,SAAS;CACT,KAAK;CACL,YAAY;CACb,EACF,CAAC;AAEF,MAAa,QAAA,GAAA,MAAA,aACV,EAAE,OAAO,KAAK,YAAY,UAAU,UAAU,GAAG,QAAQ,QAAQ;CAChE,MAAM,EAAE,OAAA,GAAA,cAAA,iBAAsB;CAC9B,MAAM,WAAW,GAAG,MAAM,GAAG,IAAI,MAAM,IAAI,CAAC,KAAK,IAAI;CACrD,MAAM,cAAc,GAAG,IAAI;CAC3B,MAAM,UAAU,GAAG,EAAE,WAAW,CAAC,GAAG;AAEpC,QACE,iBAAA,GAAA,kBAAA,MAAC,eAAD;EAAoB;EAAK,GAAI;YAA7B,CACE,iBAAA,GAAA,kBAAA,MAAC,eAAD,EAAA,UAAA;GACE,iBAAA,GAAA,kBAAA,KAACC,YAAAA,cAAD,EAAgB,CAAA;GACf,aACC,iBAAA,GAAA,kBAAA,KAAC,gBAAD;IAAgB,UAAA;IAAS,UAAU;IAAU,KAAKC,6BAAAA,YAAY,KAAK;IAAE,IAAI;IAAa,OAAO;cAC1F;IACc,CAAA,GAEjB,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,MAAD;IAAM,WAAU;cAAgB;IAAa,CAAA;GAE/C,iBAAA,GAAA,kBAAA,KAACA,iBAAAA,MAAD;IAAM,WAAU;IAAc,SAAA;IAAQ,YAAA;cACpC,iBAAA,GAAA,kBAAA,MAAC,QAAD,EAAA,UAAA;KAAM;KAAE,UAAU,aAAa;KAAC;KAAQ,EAAA,CAAA;IACnC,CAAA;GACO,EAAA,CAAA,EAChB,iBAAA,GAAA,kBAAA,KAACA,iBAAAA,MAAD;GAAM,WAAU;GAAc,SAAA;GAAQ,YAAA;aACpC,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAA,UAAO,UAAgB,CAAA;GAClB,CAAA,CACO;;EAGrB;AAED,MAAa,mBAAmB,EAAE,OAAO,KAAK,YAAY,UAAU,eAClE,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,cAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAC,MAAD;CAAa;CAAY;CAAiB;CAAsB;CAAoB;CAAY,CAAA,EACnF,CAAA"}

package/lib/FileList/FileList.js

@@ -1,9 +1,8 @@
-const require_runtime = require('../_virtual/_rolldown/runtime.js');
+require("../_virtual/_rolldown/runtime.js");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
-let react = require("react");
+require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _ark_ui_react = require("@ark-ui/react");
-
 //#region src/FileList/FileList.tsx
 /**
 * Copyright (c) 2023-present, NDLA.
@@ -34,9 +33,9 @@ const FileListEmbed = ({ children, ...rest }) => {
 		children
 	});
 };
-
 //#endregion
 exports.FileListEmbed = FileListEmbed;
 exports.FileListItem = FileListItem;
 exports.FileListWrapper = FileListWrapper;
+
 //# sourceMappingURL=FileList.js.map

package/lib/FileList/FileList.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileList.js","names":["ark"],"sources":["../../src/FileList/FileList.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { ark } from \"@ark-ui/react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { type ComponentPropsWithoutRef } from \"react\";\n\ninterface Props extends ComponentPropsWithoutRef<\"ul\"> {}\n\nexport const FileListWrapper = styled(\n  ark.ul,\n  {\n    base: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"xsmall\",\n      clear: \"both\",\n    },\n  },\n  { baseComponent: true },\n);\n\nexport const FileListItem = styled(\n  ark.li,\n  {\n    base: {\n      listStyle: \"none\",\n      background: \"surface.infoSubtle\",\n      borderBlockEnd: \"1px solid\",\n      borderColor: \"stroke.default\",\n      display: \"flex\",\n      justifyContent: \"space-between\",\n\n      _hover: {\n        backgroundColor: \"surface.infoSubtle.hover\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\nexport const FileListEmbed = ({ children, ...rest }: Props) => {\n  return (\n    <FileListWrapper {...rest} data-embed-type=\"file-list\">\n      {children}\n    </FileListWrapper>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;AAcA,MAAa,sDACXA,kBAAI,IACJ,EACE,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,OAAO;CACR,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAED,MAAa,mDACXA,kBAAI,IACJ,EACE,MAAM;CACJ,WAAW;CACX,YAAY;CACZ,gBAAgB;CAChB,aAAa;CACb,SAAS;CACT,gBAAgB;CAEhB,QAAQ,EACN,iBAAiB,4BAClB;CACF,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAED,MAAa,iBAAiB,EAAE,UAAU,GAAG,WAAkB;AAC7D,QACE,2CAAC;EAAgB,GAAI;EAAM,mBAAgB;EACxC;GACe"}
+{"version":3,"file":"FileList.js","names":["ark"],"sources":["../../src/FileList/FileList.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { ark } from \"@ark-ui/react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { type ComponentPropsWithoutRef } from \"react\";\n\ninterface Props extends ComponentPropsWithoutRef<\"ul\"> {}\n\nexport const FileListWrapper = styled(\n  ark.ul,\n  {\n    base: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"xsmall\",\n      clear: \"both\",\n    },\n  },\n  { baseComponent: true },\n);\n\nexport const FileListItem = styled(\n  ark.li,\n  {\n    base: {\n      listStyle: \"none\",\n      background: \"surface.infoSubtle\",\n      borderBlockEnd: \"1px solid\",\n      borderColor: \"stroke.default\",\n      display: \"flex\",\n      justifyContent: \"space-between\",\n\n      _hover: {\n        backgroundColor: \"surface.infoSubtle.hover\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\nexport const FileListEmbed = ({ children, ...rest }: Props) => {\n  return (\n    <FileListWrapper {...rest} data-embed-type=\"file-list\">\n      {children}\n    </FileListWrapper>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAa,mBAAA,GAAA,wBAAA,QACXA,cAAAA,IAAI,IACJ,EACE,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,OAAO;CACR,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAED,MAAa,gBAAA,GAAA,wBAAA,QACXA,cAAAA,IAAI,IACJ,EACE,MAAM;CACJ,WAAW;CACX,YAAY;CACZ,gBAAgB;CAChB,aAAa;CACb,SAAS;CACT,gBAAgB;CAEhB,QAAQ,EACN,iBAAiB,4BAClB;CACF,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAED,MAAa,iBAAiB,EAAE,UAAU,GAAG,WAAkB;AAC7D,QACE,iBAAA,GAAA,kBAAA,KAAC,iBAAD;EAAiB,GAAI;EAAM,mBAAgB;EACxC;EACe,CAAA"}

package/lib/FileList/PdfFile.js

@@ -1,8 +1,7 @@
-const require_runtime = require('../_virtual/_rolldown/runtime.js');
+require("../_virtual/_rolldown/runtime.js");
 let _ndla_primitives = require("@ndla/primitives");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react_jsx_runtime = require("react/jsx-runtime");
-
 //#region src/FileList/PdfFile.tsx
 /**
 * Copyright (c) 2023-present, NDLA.
@@ -30,7 +29,7 @@ const PdfFile = ({ title, url }) => {
 		src: url
 	})] }) });
 };
-
 //#endregion
 exports.PdfFile = PdfFile;
+
 //# sourceMappingURL=PdfFile.js.map

package/lib/FileList/PdfFile.js.map

@@ -1 +1 @@
-{"version":3,"file":"PdfFile.js","names":["Figure","Heading"],"sources":["../../src/FileList/PdfFile.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-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 { Heading, Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\ninterface Props {\n  title: string;\n  url: string;\n}\n\nconst StyledIframe = styled(\"iframe\", {\n  base: {\n    width: \"100%\",\n  },\n});\n\nconst StyledListElement = styled(\"li\", {\n  base: {\n    listStyle: \"none\",\n  },\n});\n\nconst StyledFigure = styled(Figure, {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"xsmall\",\n  },\n});\n\nexport const PdfFile = ({ title, url }: Props) => {\n  return (\n    <StyledListElement>\n      <StyledFigure>\n        <Heading asChild consumeCss textStyle=\"title.medium\">\n          <h4>{title}</h4>\n        </Heading>\n        <StyledIframe title={title} height=\"1050\" src={url} />\n      </StyledFigure>\n    </StyledListElement>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAM,mDAAsB,UAAU,EACpC,MAAM,EACJ,OAAO,QACR,EACF,CAAC;AAEF,MAAM,wDAA2B,MAAM,EACrC,MAAM,EACJ,WAAW,QACZ,EACF,CAAC;AAEF,MAAM,mDAAsBA,yBAAQ,EAClC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACN,EACF,CAAC;AAEF,MAAa,WAAW,EAAE,OAAO,UAAiB;AAChD,QACE,2CAAC,+BACC,4CAAC,2BACC,2CAACC;EAAQ;EAAQ;EAAW,WAAU;YACpC,2CAAC,kBAAI,QAAW;GACR,EACV,2CAAC;EAAoB;EAAO,QAAO;EAAO,KAAK;GAAO,IACzC,GACG"}
+{"version":3,"file":"PdfFile.js","names":["Figure","Heading"],"sources":["../../src/FileList/PdfFile.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-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 { Heading, Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\ninterface Props {\n  title: string;\n  url: string;\n}\n\nconst StyledIframe = styled(\"iframe\", {\n  base: {\n    width: \"100%\",\n  },\n});\n\nconst StyledListElement = styled(\"li\", {\n  base: {\n    listStyle: \"none\",\n  },\n});\n\nconst StyledFigure = styled(Figure, {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"xsmall\",\n  },\n});\n\nexport const PdfFile = ({ title, url }: Props) => {\n  return (\n    <StyledListElement>\n      <StyledFigure>\n        <Heading asChild consumeCss textStyle=\"title.medium\">\n          <h4>{title}</h4>\n        </Heading>\n        <StyledIframe title={title} height=\"1050\" src={url} />\n      </StyledFigure>\n    </StyledListElement>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAgBA,MAAM,gBAAA,GAAA,wBAAA,QAAsB,UAAU,EACpC,MAAM,EACJ,OAAO,QACR,EACF,CAAC;AAEF,MAAM,qBAAA,GAAA,wBAAA,QAA2B,MAAM,EACrC,MAAM,EACJ,WAAW,QACZ,EACF,CAAC;AAEF,MAAM,gBAAA,GAAA,wBAAA,QAAsBA,iBAAAA,QAAQ,EAClC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACN,EACF,CAAC;AAEF,MAAa,WAAW,EAAE,OAAO,UAAiB;AAChD,QACE,iBAAA,GAAA,kBAAA,KAAC,mBAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,MAAC,cAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,SAAD;EAAS,SAAA;EAAQ,YAAA;EAAW,WAAU;YACpC,iBAAA,GAAA,kBAAA,KAAC,MAAD,EAAA,UAAK,OAAW,CAAA;EACR,CAAA,EACV,iBAAA,GAAA,kBAAA,KAAC,cAAD;EAAqB;EAAO,QAAO;EAAO,KAAK;EAAO,CAAA,CACzC,EAAA,CAAA,EACG,CAAA"}

package/lib/Gloss/Gloss.js

@@ -1,6 +1,6 @@
-const require_runtime = require('../_virtual/_rolldown/runtime.js');
-const require_SpeechControl = require('../AudioPlayer/SpeechControl.js');
-const require_GlossExample = require('./GlossExample.js');
+const require_runtime = require("../_virtual/_rolldown/runtime.js");
+const require_SpeechControl = require("../AudioPlayer/SpeechControl.js");
+const require_GlossExample = require("./GlossExample.js");
 let _ndla_primitives = require("@ndla/primitives");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react = require("react");
@@ -10,7 +10,6 @@ let react_i18next = require("react-i18next");
 let _ndla_icons = require("@ndla/icons");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _ark_ui_react = require("@ark-ui/react");
-
 //#region src/Gloss/Gloss.tsx
 /**
 * Copyright (c) 2023-present, NDLA.
@@ -144,7 +143,7 @@ const Gloss = ({ title, glossData, audio, exampleIds, exampleLangs, variant }) =
 		})
 	});
 };
-
 //#endregion
 exports.Gloss = Gloss;
+
 //# sourceMappingURL=Gloss.js.map

package/lib/Gloss/Gloss.js.map

@@ -1 +1 @@
-{"version":3,"file":"Gloss.js","names":["AccordionItemContent","AccordionItem","AccordionRoot","Text","SpeechControl","AccordionItemTrigger","IconButton","AccordionItemIndicator","ArrowDownShortLine","GlossExample"],"sources":["../../src/Gloss/Gloss.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-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 { AccordionItemTrigger } from \"@ark-ui/react\";\nimport { ArrowDownShortLine } from \"@ndla/icons\";\nimport {\n  AccordionItem,\n  AccordionItemContent,\n  AccordionItemIndicator,\n  AccordionRoot,\n  IconButton,\n  Text,\n} from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledVariantProps } from \"@ndla/styled-system/types\";\nimport type { ConceptTitleDTO, GlossDataDTO, GlossExampleDTO } from \"@ndla/types-backend/concept-api\";\nimport parse from \"html-react-parser\";\nimport { useMemo } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { SpeechControl } from \"../AudioPlayer/SpeechControl\";\nimport { GlossExample } from \"./GlossExample\";\n\n// TODO: Figure out padding between bordered and simple variant.\n// The design says that the content above the accordion content should have enough padding to align with the accordion content.\n// When a gloss is bordered there's way too much padding.\n\nconst getFilteredExamples = (\n  glossData: GlossDataDTO | undefined,\n  exampleIds: string | undefined,\n  exampleLangs: string | undefined,\n): GlossExampleDTO[][] => {\n  if (exampleIds !== undefined || exampleLangs !== undefined) {\n    const exampleIdsList = exampleIds?.toString()?.split(\",\") ?? [];\n    const exampleLangsList = exampleLangs?.split(\",\") ?? [];\n\n    const filteredExamples =\n      glossData?.examples?.map((examples, i) => {\n        if (exampleIdsList.includes(i.toString())) {\n          return examples.filter((e) => exampleLangsList.includes(e.language));\n        }\n        return [];\n      }) ?? [];\n    const examplesWithoutEmpty = filteredExamples.filter((el) => !!el.length);\n    return examplesWithoutEmpty;\n  }\n  return glossData?.examples ?? [];\n};\n\nconst Container = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n  },\n});\n\nconst TextWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    gap: \"small\",\n  },\n});\n\nconst StyledAccordionItemContent = styled(AccordionItemContent, {\n  base: {\n    paddingInline: \"0\",\n  },\n});\n\nconst StyledContainer = styled(Container, {\n  base: {\n    marginBlockStart: \"3xsmall\",\n  },\n});\n\nconst StyledAccordionItem = styled(AccordionItem, {\n  base: {\n    paddingBlock: \"small\",\n    paddingInline: \"medium\",\n  },\n  defaultVariants: {\n    variant: \"simple\",\n  },\n  variants: {\n    variant: {\n      simple: {},\n      bordered: {\n        border: \"1px solid\",\n        borderColor: \"stroke.subtle\",\n        borderRadius: \"xsmall\",\n      },\n    },\n  },\n});\n\ntype GlossVariantProps = StyledVariantProps<typeof StyledAccordionItem>;\n\nexport interface Props {\n  title: ConceptTitleDTO;\n  glossData?: GlossDataDTO;\n  audio?: {\n    title: string;\n    src?: string;\n  };\n  exampleIds?: string;\n  exampleLangs?: string;\n}\n\nexport const Gloss = ({ title, glossData, audio, exampleIds, exampleLangs, variant }: Props & GlossVariantProps) => {\n  const { t } = useTranslation();\n\n  const parsedTitle = useMemo(() => parse(title.htmlTitle), [title.htmlTitle]);\n\n  const filteredExamples = useMemo(\n    () => getFilteredExamples(glossData, exampleIds, exampleLangs),\n    [exampleIds, exampleLangs, glossData],\n  );\n\n  if (!glossData) return null;\n\n  return (\n    <AccordionRoot multiple variant=\"clean\">\n      <StyledAccordionItem value=\"gloss\" variant={variant}>\n        <Container>\n          <TextWrapper>\n            <Text textStyle=\"label.medium\" fontWeight=\"bold\" asChild consumeCss lang={glossData.originalLanguage}>\n              <span>{glossData.gloss}</span>\n            </Text>\n            {!!glossData.transcriptions.traditional && (\n              <Text textStyle=\"label.medium\" asChild consumeCss>\n                <span\n                  key={t(\"gloss.transcriptions.traditional\")}\n                  aria-label={t(\"gloss.transcriptions.traditional\")}\n                  lang={glossData.originalLanguage}\n                >\n                  {glossData.transcriptions.traditional}\n                </span>\n              </Text>\n            )}\n            {!!glossData.transcriptions.pinyin && (\n              <Text textStyle=\"label.medium\" asChild consumeCss>\n                <span\n                  data-pinyin=\"\"\n                  key={t(\"gloss.transcriptions.pinyin\")}\n                  aria-label={t(\"gloss.transcriptions.pinyin\")}\n                  lang={glossData.originalLanguage}\n                >\n                  {glossData.transcriptions.pinyin}\n                </span>\n              </Text>\n            )}\n            {!!glossData.wordClass && (\n              <Text textStyle=\"label.medium\" asChild consumeCss>\n                <span aria-label={t(\"gloss.wordClass\")}>\n                  {glossData.wordClass.map((wc) => t(`wordClass.${wc}`).toLowerCase()).join(\" / \")}\n                </span>\n              </Text>\n            )}\n          </TextWrapper>\n          {!!audio?.src && <SpeechControl src={audio.src} title={audio.title} type=\"gloss\" />}\n        </Container>\n        <StyledContainer>\n          <Text textStyle=\"label.medium\" asChild consumeCss>\n            <span lang={title.language}>{parsedTitle}</span>\n          </Text>\n          {!!filteredExamples.length && (\n            <AccordionItemTrigger asChild>\n              <IconButton variant=\"tertiary\" aria-label={t(\"gloss.showExamples\")} title={t(\"gloss.showExamples\")}>\n                <AccordionItemIndicator asChild>\n                  <ArrowDownShortLine size=\"medium\" />\n                </AccordionItemIndicator>\n              </IconButton>\n            </AccordionItemTrigger>\n          )}\n        </StyledContainer>\n        <StyledAccordionItemContent>\n          {filteredExamples.map((examples, index) => (\n            <GlossExample\n              key={`gloss-example-${index}`}\n              examples={examples}\n              originalLanguage={glossData.originalLanguage}\n            />\n          ))}\n        </StyledAccordionItemContent>\n      </StyledAccordionItem>\n    </AccordionRoot>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Gloss.js","names":["AccordionItemContent","AccordionItem","AccordionRoot","Text","SpeechControl","AccordionItemTrigger","IconButton","AccordionItemIndicator","ArrowDownShortLine","GlossExample"],"sources":["../../src/Gloss/Gloss.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-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 { AccordionItemTrigger } from \"@ark-ui/react\";\nimport { ArrowDownShortLine } from \"@ndla/icons\";\nimport {\n  AccordionItem,\n  AccordionItemContent,\n  AccordionItemIndicator,\n  AccordionRoot,\n  IconButton,\n  Text,\n} from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledVariantProps } from \"@ndla/styled-system/types\";\nimport type { ConceptTitleDTO, GlossDataDTO, GlossExampleDTO } from \"@ndla/types-backend/concept-api\";\nimport parse from \"html-react-parser\";\nimport { useMemo } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { SpeechControl } from \"../AudioPlayer/SpeechControl\";\nimport { GlossExample } from \"./GlossExample\";\n\n// TODO: Figure out padding between bordered and simple variant.\n// The design says that the content above the accordion content should have enough padding to align with the accordion content.\n// When a gloss is bordered there's way too much padding.\n\nconst getFilteredExamples = (\n  glossData: GlossDataDTO | undefined,\n  exampleIds: string | undefined,\n  exampleLangs: string | undefined,\n): GlossExampleDTO[][] => {\n  if (exampleIds !== undefined || exampleLangs !== undefined) {\n    const exampleIdsList = exampleIds?.toString()?.split(\",\") ?? [];\n    const exampleLangsList = exampleLangs?.split(\",\") ?? [];\n\n    const filteredExamples =\n      glossData?.examples?.map((examples, i) => {\n        if (exampleIdsList.includes(i.toString())) {\n          return examples.filter((e) => exampleLangsList.includes(e.language));\n        }\n        return [];\n      }) ?? [];\n    const examplesWithoutEmpty = filteredExamples.filter((el) => !!el.length);\n    return examplesWithoutEmpty;\n  }\n  return glossData?.examples ?? [];\n};\n\nconst Container = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n  },\n});\n\nconst TextWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    gap: \"small\",\n  },\n});\n\nconst StyledAccordionItemContent = styled(AccordionItemContent, {\n  base: {\n    paddingInline: \"0\",\n  },\n});\n\nconst StyledContainer = styled(Container, {\n  base: {\n    marginBlockStart: \"3xsmall\",\n  },\n});\n\nconst StyledAccordionItem = styled(AccordionItem, {\n  base: {\n    paddingBlock: \"small\",\n    paddingInline: \"medium\",\n  },\n  defaultVariants: {\n    variant: \"simple\",\n  },\n  variants: {\n    variant: {\n      simple: {},\n      bordered: {\n        border: \"1px solid\",\n        borderColor: \"stroke.subtle\",\n        borderRadius: \"xsmall\",\n      },\n    },\n  },\n});\n\ntype GlossVariantProps = StyledVariantProps<typeof StyledAccordionItem>;\n\nexport interface Props {\n  title: ConceptTitleDTO;\n  glossData?: GlossDataDTO;\n  audio?: {\n    title: string;\n    src?: string;\n  };\n  exampleIds?: string;\n  exampleLangs?: string;\n}\n\nexport const Gloss = ({ title, glossData, audio, exampleIds, exampleLangs, variant }: Props & GlossVariantProps) => {\n  const { t } = useTranslation();\n\n  const parsedTitle = useMemo(() => parse(title.htmlTitle), [title.htmlTitle]);\n\n  const filteredExamples = useMemo(\n    () => getFilteredExamples(glossData, exampleIds, exampleLangs),\n    [exampleIds, exampleLangs, glossData],\n  );\n\n  if (!glossData) return null;\n\n  return (\n    <AccordionRoot multiple variant=\"clean\">\n      <StyledAccordionItem value=\"gloss\" variant={variant}>\n        <Container>\n          <TextWrapper>\n            <Text textStyle=\"label.medium\" fontWeight=\"bold\" asChild consumeCss lang={glossData.originalLanguage}>\n              <span>{glossData.gloss}</span>\n            </Text>\n            {!!glossData.transcriptions.traditional && (\n              <Text textStyle=\"label.medium\" asChild consumeCss>\n                <span\n                  key={t(\"gloss.transcriptions.traditional\")}\n                  aria-label={t(\"gloss.transcriptions.traditional\")}\n                  lang={glossData.originalLanguage}\n                >\n                  {glossData.transcriptions.traditional}\n                </span>\n              </Text>\n            )}\n            {!!glossData.transcriptions.pinyin && (\n              <Text textStyle=\"label.medium\" asChild consumeCss>\n                <span\n                  data-pinyin=\"\"\n                  key={t(\"gloss.transcriptions.pinyin\")}\n                  aria-label={t(\"gloss.transcriptions.pinyin\")}\n                  lang={glossData.originalLanguage}\n                >\n                  {glossData.transcriptions.pinyin}\n                </span>\n              </Text>\n            )}\n            {!!glossData.wordClass && (\n              <Text textStyle=\"label.medium\" asChild consumeCss>\n                <span aria-label={t(\"gloss.wordClass\")}>\n                  {glossData.wordClass.map((wc) => t(`wordClass.${wc}`).toLowerCase()).join(\" / \")}\n                </span>\n              </Text>\n            )}\n          </TextWrapper>\n          {!!audio?.src && <SpeechControl src={audio.src} title={audio.title} type=\"gloss\" />}\n        </Container>\n        <StyledContainer>\n          <Text textStyle=\"label.medium\" asChild consumeCss>\n            <span lang={title.language}>{parsedTitle}</span>\n          </Text>\n          {!!filteredExamples.length && (\n            <AccordionItemTrigger asChild>\n              <IconButton variant=\"tertiary\" aria-label={t(\"gloss.showExamples\")} title={t(\"gloss.showExamples\")}>\n                <AccordionItemIndicator asChild>\n                  <ArrowDownShortLine size=\"medium\" />\n                </AccordionItemIndicator>\n              </IconButton>\n            </AccordionItemTrigger>\n          )}\n        </StyledContainer>\n        <StyledAccordionItemContent>\n          {filteredExamples.map((examples, index) => (\n            <GlossExample\n              key={`gloss-example-${index}`}\n              examples={examples}\n              originalLanguage={glossData.originalLanguage}\n            />\n          ))}\n        </StyledAccordionItemContent>\n      </StyledAccordionItem>\n    </AccordionRoot>\n  );\n};\n"],"mappings":"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"}

package/lib/Gloss/GlossExample.js

@@ -1,9 +1,8 @@
-const require_runtime = require('../_virtual/_rolldown/runtime.js');
+require("../_virtual/_rolldown/runtime.js");
 let _ndla_primitives = require("@ndla/primitives");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
-
 //#region src/Gloss/GlossExample.tsx
 /**
 * Copyright (c) 2023-present, NDLA.
@@ -47,7 +46,7 @@ const GlossExample = ({ examples, originalLanguage }) => {
 		}) })
 	] }, index)) });
 };
-
 //#endregion
 exports.GlossExample = GlossExample;
+
 //# sourceMappingURL=GlossExample.js.map

package/lib/Gloss/GlossExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"GlossExample.js","names":["Text","Fragment"],"sources":["../../src/Gloss/GlossExample.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-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 { Text } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { GlossExampleDTO } from \"@ndla/types-backend/concept-api\";\nimport { Fragment } from \"react\";\n\ninterface Props {\n  examples: GlossExampleDTO[];\n  originalLanguage: string | undefined;\n}\n\nconst StyledGlossExample = styled(\"div\", {\n  base: {\n    borderTop: \"1px solid\",\n    borderColor: \"stroke.subtle\",\n    paddingBlock: \"xsmall\",\n    paddingInline: \"medium\",\n    _first: {\n      background: \"surface.brand.1.subtle\",\n      borderColor: \"stroke.default\",\n      \"& p\": {\n        fontWeight: \"bold\",\n      },\n    },\n  },\n});\n\nconst PinyinText = styled(Text, {\n  base: {\n    fontStyle: \"italic\",\n  },\n});\n\nexport const GlossExample = ({ examples, originalLanguage }: Props) => {\n  return (\n    <div>\n      {examples.map((examples, index) => (\n        <Fragment key={index}>\n          <StyledGlossExample lang={examples.language}>\n            <Text textStyle=\"label.medium\" lang={examples.language}>\n              {examples.example}\n            </Text>\n          </StyledGlossExample>\n          {!!examples.transcriptions.pinyin && (\n            <StyledGlossExample>\n              <PinyinText data-pinyin=\"\" lang={originalLanguage} textStyle=\"label.medium\">\n                {examples.transcriptions?.pinyin}\n              </PinyinText>\n            </StyledGlossExample>\n          )}\n          {!!examples.transcriptions?.traditional && (\n            <StyledGlossExample>\n              <Text textStyle=\"label.medium\" lang={originalLanguage}>\n                {examples.transcriptions.traditional}\n              </Text>\n            </StyledGlossExample>\n          )}\n        </Fragment>\n      ))}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;AAkBA,MAAM,yDAA4B,OAAO,EACvC,MAAM;CACJ,WAAW;CACX,aAAa;CACb,cAAc;CACd,eAAe;CACf,QAAQ;EACN,YAAY;EACZ,aAAa;EACb,OAAO,EACL,YAAY,QACb;EACF;CACF,EACF,CAAC;AAEF,MAAM,iDAAoBA,uBAAM,EAC9B,MAAM,EACJ,WAAW,UACZ,EACF,CAAC;AAEF,MAAa,gBAAgB,EAAE,UAAU,uBAA8B;AACrE,QACE,2CAAC,mBACE,SAAS,KAAK,UAAU,UACvB,4CAACC;EACC,2CAAC;GAAmB,MAAM,SAAS;aACjC,2CAACD;IAAK,WAAU;IAAe,MAAM,SAAS;cAC3C,SAAS;KACL;IACY;EACpB,CAAC,CAAC,SAAS,eAAe,UACzB,2CAAC,gCACC,2CAAC;GAAW,eAAY;GAAG,MAAM;GAAkB,WAAU;aAC1D,SAAS,gBAAgB;IACf,GACM;EAEtB,CAAC,CAAC,SAAS,gBAAgB,eAC1B,2CAAC,gCACC,2CAACA;GAAK,WAAU;GAAe,MAAM;aAClC,SAAS,eAAe;IACpB,GACY;MAlBV,MAoBJ,CACX,GACE"}
+{"version":3,"file":"GlossExample.js","names":["Text","Fragment"],"sources":["../../src/Gloss/GlossExample.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-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 { Text } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { GlossExampleDTO } from \"@ndla/types-backend/concept-api\";\nimport { Fragment } from \"react\";\n\ninterface Props {\n  examples: GlossExampleDTO[];\n  originalLanguage: string | undefined;\n}\n\nconst StyledGlossExample = styled(\"div\", {\n  base: {\n    borderTop: \"1px solid\",\n    borderColor: \"stroke.subtle\",\n    paddingBlock: \"xsmall\",\n    paddingInline: \"medium\",\n    _first: {\n      background: \"surface.brand.1.subtle\",\n      borderColor: \"stroke.default\",\n      \"& p\": {\n        fontWeight: \"bold\",\n      },\n    },\n  },\n});\n\nconst PinyinText = styled(Text, {\n  base: {\n    fontStyle: \"italic\",\n  },\n});\n\nexport const GlossExample = ({ examples, originalLanguage }: Props) => {\n  return (\n    <div>\n      {examples.map((examples, index) => (\n        <Fragment key={index}>\n          <StyledGlossExample lang={examples.language}>\n            <Text textStyle=\"label.medium\" lang={examples.language}>\n              {examples.example}\n            </Text>\n          </StyledGlossExample>\n          {!!examples.transcriptions.pinyin && (\n            <StyledGlossExample>\n              <PinyinText data-pinyin=\"\" lang={originalLanguage} textStyle=\"label.medium\">\n                {examples.transcriptions?.pinyin}\n              </PinyinText>\n            </StyledGlossExample>\n          )}\n          {!!examples.transcriptions?.traditional && (\n            <StyledGlossExample>\n              <Text textStyle=\"label.medium\" lang={originalLanguage}>\n                {examples.transcriptions.traditional}\n              </Text>\n            </StyledGlossExample>\n          )}\n        </Fragment>\n      ))}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AAkBA,MAAM,sBAAA,GAAA,wBAAA,QAA4B,OAAO,EACvC,MAAM;CACJ,WAAW;CACX,aAAa;CACb,cAAc;CACd,eAAe;CACf,QAAQ;EACN,YAAY;EACZ,aAAa;EACb,OAAO,EACL,YAAY,QACb;EACF;CACF,EACF,CAAC;AAEF,MAAM,cAAA,GAAA,wBAAA,QAAoBA,iBAAAA,MAAM,EAC9B,MAAM,EACJ,WAAW,UACZ,EACF,CAAC;AAEF,MAAa,gBAAgB,EAAE,UAAU,uBAA8B;AACrE,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAA,UACG,SAAS,KAAK,UAAU,UACvB,iBAAA,GAAA,kBAAA,MAACC,MAAAA,UAAD,EAAA,UAAA;EACE,iBAAA,GAAA,kBAAA,KAAC,oBAAD;GAAoB,MAAM,SAAS;aACjC,iBAAA,GAAA,kBAAA,KAACD,iBAAAA,MAAD;IAAM,WAAU;IAAe,MAAM,SAAS;cAC3C,SAAS;IACL,CAAA;GACY,CAAA;EACpB,CAAC,CAAC,SAAS,eAAe,UACzB,iBAAA,GAAA,kBAAA,KAAC,oBAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAC,YAAD;GAAY,eAAY;GAAG,MAAM;GAAkB,WAAU;aAC1D,SAAS,gBAAgB;GACf,CAAA,EACM,CAAA;EAEtB,CAAC,CAAC,SAAS,gBAAgB,eAC1B,iBAAA,GAAA,kBAAA,KAAC,oBAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAACA,iBAAAA,MAAD;GAAM,WAAU;GAAe,MAAM;aAClC,SAAS,eAAe;GACpB,CAAA,EACY,CAAA;EAEd,EAAA,EApBI,MAoBJ,CACX,EACE,CAAA"}

package/lib/Grid/Grid.js

@@ -1,8 +1,7 @@
-const require_runtime = require('../_virtual/_rolldown/runtime.js');
+require("../_virtual/_rolldown/runtime.js");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
-let react = require("react");
+require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
-
 //#region src/Grid/Grid.tsx
 /**
 * Copyright (c) 2023-present, NDLA.
@@ -76,8 +75,8 @@ const GridItem = ({ border, children, ...rest }) => {
 		children
 	});
 };
-
 //#endregion
 exports.Grid = Grid;
 exports.GridItem = GridItem;
+
 //# sourceMappingURL=Grid.js.map

package/lib/Grid/Grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.js","names":[],"sources":["../../src/Grid/Grid.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-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 { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledVariantProps } from \"@ndla/styled-system/types\";\nimport { type ComponentProps, type ReactNode } from \"react\";\n\nconst GridContainer = styled(\"div\", {\n  base: {\n    display: \"grid\",\n    justifyContent: \"center\",\n    borderRadius: \"xsmall\",\n    gridRowGap: \"large\",\n    gridColumnGap: \"medium\",\n    width: \"100%\",\n    minWidth: \"surface.xxsmall\",\n    gridTemplateColumns: \"repeat(2, minmax(0, 1fr))\",\n\n    \"& div[data-embed-type='pitch']\": {\n      height: \"100%\",\n      \"& > :last-child\": {\n        marginTop: \"auto\",\n      },\n    },\n    tabletDown: {\n      gridTemplateColumns: \"repeat(1, minmax(0, 1fr))\",\n    },\n    tabletToDesktop: {\n      gridTemplateColumns: \"repeat(2, minmax(0, 1fr))\",\n      \"& > div:nth-child(3):last-child\": {\n        display: \"flex\",\n        flexFlow: \"column\",\n        justifyContent: \"center\",\n        alignItems: \"center\",\n        gridColumn: \"span 2\",\n      },\n    },\n  },\n  variants: {\n    columns: {\n      \"2\": {},\n      \"2x2\": {},\n      \"3\": { desktop: { gridTemplateColumns: \"repeat(3, minmax(0, 1fr))\" } },\n      \"4\": { desktop: { gridTemplateColumns: \"repeat(4, minmax(0, 1fr))\" } },\n    },\n    border: {\n      lightBlue: {\n        padding: \"xsmall\",\n        border: \"1px solid\",\n        borderColor: \"stroke.subtle\",\n      },\n    },\n  },\n});\n\nconst StyledGridItem = styled(\"div\", {\n  base: {\n    padding: \"medium\",\n  },\n  variants: {\n    border: {\n      true: {\n        outline: \"1px solid\",\n        outlineColor: \"stroke.subtle\",\n      },\n    },\n  },\n});\n\ntype GridVariantProps = NonNullable<StyledVariantProps<typeof GridContainer>>;\n\nexport interface GridProps extends ComponentProps<\"div\">, GridVariantProps {\n  children?: ReactNode[];\n  columns: NonNullable<GridVariantProps[\"columns\"]>;\n}\n\ntype GridItemVariantProps = NonNullable<StyledVariantProps<typeof StyledGridItem>>;\n\nexport interface GridItemProps extends ComponentProps<\"div\">, GridItemVariantProps {}\n\nexport const Grid = ({ columns, border, children, ...rest }: GridProps) => {\n  const amountOfColumns = children?.length === 3 ? \"3\" : columns;\n\n  return (\n    <GridContainer data-embed-type=\"grid\" border={border} columns={amountOfColumns} {...rest}>\n      {children}\n    </GridContainer>\n  );\n};\n\nexport const GridItem = ({ border, children, ...rest }: GridItemProps) => {\n  return (\n    <StyledGridItem data-embed-type=\"grid-cell\" border={border} {...rest}>\n      {children}\n    </StyledGridItem>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AAYA,MAAM,oDAAuB,OAAO;CAClC,MAAM;EACJ,SAAS;EACT,gBAAgB;EAChB,cAAc;EACd,YAAY;EACZ,eAAe;EACf,OAAO;EACP,UAAU;EACV,qBAAqB;EAErB,kCAAkC;GAChC,QAAQ;GACR,mBAAmB,EACjB,WAAW,QACZ;GACF;EACD,YAAY,EACV,qBAAqB,6BACtB;EACD,iBAAiB;GACf,qBAAqB;GACrB,mCAAmC;IACjC,SAAS;IACT,UAAU;IACV,gBAAgB;IAChB,YAAY;IACZ,YAAY;IACb;GACF;EACF;CACD,UAAU;EACR,SAAS;GACP,KAAK,EAAE;GACP,OAAO,EAAE;GACT,KAAK,EAAE,SAAS,EAAE,qBAAqB,6BAA6B,EAAE;GACtE,KAAK,EAAE,SAAS,EAAE,qBAAqB,6BAA6B,EAAE;GACvE;EACD,QAAQ,EACN,WAAW;GACT,SAAS;GACT,QAAQ;GACR,aAAa;GACd,EACF;EACF;CACF,CAAC;AAEF,MAAM,qDAAwB,OAAO;CACnC,MAAM,EACJ,SAAS,UACV;CACD,UAAU,EACR,QAAQ,EACN,MAAM;EACJ,SAAS;EACT,cAAc;EACf,EACF,EACF;CACF,CAAC;AAaF,MAAa,QAAQ,EAAE,SAAS,QAAQ,UAAU,GAAG,WAAsB;CACzE,MAAM,kBAAkB,UAAU,WAAW,IAAI,MAAM;AAEvD,QACE,2CAAC;EAAc,mBAAgB;EAAe;EAAQ,SAAS;EAAiB,GAAI;EACjF;GACa;;AAIpB,MAAa,YAAY,EAAE,QAAQ,UAAU,GAAG,WAA0B;AACxE,QACE,2CAAC;EAAe,mBAAgB;EAAoB;EAAQ,GAAI;EAC7D;GACc"}
+{"version":3,"file":"Grid.js","names":[],"sources":["../../src/Grid/Grid.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-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 { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledVariantProps } from \"@ndla/styled-system/types\";\nimport { type ComponentProps, type ReactNode } from \"react\";\n\nconst GridContainer = styled(\"div\", {\n  base: {\n    display: \"grid\",\n    justifyContent: \"center\",\n    borderRadius: \"xsmall\",\n    gridRowGap: \"large\",\n    gridColumnGap: \"medium\",\n    width: \"100%\",\n    minWidth: \"surface.xxsmall\",\n    gridTemplateColumns: \"repeat(2, minmax(0, 1fr))\",\n\n    \"& div[data-embed-type='pitch']\": {\n      height: \"100%\",\n      \"& > :last-child\": {\n        marginTop: \"auto\",\n      },\n    },\n    tabletDown: {\n      gridTemplateColumns: \"repeat(1, minmax(0, 1fr))\",\n    },\n    tabletToDesktop: {\n      gridTemplateColumns: \"repeat(2, minmax(0, 1fr))\",\n      \"& > div:nth-child(3):last-child\": {\n        display: \"flex\",\n        flexFlow: \"column\",\n        justifyContent: \"center\",\n        alignItems: \"center\",\n        gridColumn: \"span 2\",\n      },\n    },\n  },\n  variants: {\n    columns: {\n      \"2\": {},\n      \"2x2\": {},\n      \"3\": { desktop: { gridTemplateColumns: \"repeat(3, minmax(0, 1fr))\" } },\n      \"4\": { desktop: { gridTemplateColumns: \"repeat(4, minmax(0, 1fr))\" } },\n    },\n    border: {\n      lightBlue: {\n        padding: \"xsmall\",\n        border: \"1px solid\",\n        borderColor: \"stroke.subtle\",\n      },\n    },\n  },\n});\n\nconst StyledGridItem = styled(\"div\", {\n  base: {\n    padding: \"medium\",\n  },\n  variants: {\n    border: {\n      true: {\n        outline: \"1px solid\",\n        outlineColor: \"stroke.subtle\",\n      },\n    },\n  },\n});\n\ntype GridVariantProps = NonNullable<StyledVariantProps<typeof GridContainer>>;\n\nexport interface GridProps extends ComponentProps<\"div\">, GridVariantProps {\n  children?: ReactNode[];\n  columns: NonNullable<GridVariantProps[\"columns\"]>;\n}\n\ntype GridItemVariantProps = NonNullable<StyledVariantProps<typeof StyledGridItem>>;\n\nexport interface GridItemProps extends ComponentProps<\"div\">, GridItemVariantProps {}\n\nexport const Grid = ({ columns, border, children, ...rest }: GridProps) => {\n  const amountOfColumns = children?.length === 3 ? \"3\" : columns;\n\n  return (\n    <GridContainer data-embed-type=\"grid\" border={border} columns={amountOfColumns} {...rest}>\n      {children}\n    </GridContainer>\n  );\n};\n\nexport const GridItem = ({ border, children, ...rest }: GridItemProps) => {\n  return (\n    <StyledGridItem data-embed-type=\"grid-cell\" border={border} {...rest}>\n      {children}\n    </StyledGridItem>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAYA,MAAM,iBAAA,GAAA,wBAAA,QAAuB,OAAO;CAClC,MAAM;EACJ,SAAS;EACT,gBAAgB;EAChB,cAAc;EACd,YAAY;EACZ,eAAe;EACf,OAAO;EACP,UAAU;EACV,qBAAqB;EAErB,kCAAkC;GAChC,QAAQ;GACR,mBAAmB,EACjB,WAAW,QACZ;GACF;EACD,YAAY,EACV,qBAAqB,6BACtB;EACD,iBAAiB;GACf,qBAAqB;GACrB,mCAAmC;IACjC,SAAS;IACT,UAAU;IACV,gBAAgB;IAChB,YAAY;IACZ,YAAY;IACb;GACF;EACF;CACD,UAAU;EACR,SAAS;GACP,KAAK,EAAE;GACP,OAAO,EAAE;GACT,KAAK,EAAE,SAAS,EAAE,qBAAqB,6BAA6B,EAAE;GACtE,KAAK,EAAE,SAAS,EAAE,qBAAqB,6BAA6B,EAAE;GACvE;EACD,QAAQ,EACN,WAAW;GACT,SAAS;GACT,QAAQ;GACR,aAAa;GACd,EACF;EACF;CACF,CAAC;AAEF,MAAM,kBAAA,GAAA,wBAAA,QAAwB,OAAO;CACnC,MAAM,EACJ,SAAS,UACV;CACD,UAAU,EACR,QAAQ,EACN,MAAM;EACJ,SAAS;EACT,cAAc;EACf,EACF,EACF;CACF,CAAC;AAaF,MAAa,QAAQ,EAAE,SAAS,QAAQ,UAAU,GAAG,WAAsB;CACzE,MAAM,kBAAkB,UAAU,WAAW,IAAI,MAAM;AAEvD,QACE,iBAAA,GAAA,kBAAA,KAAC,eAAD;EAAe,mBAAgB;EAAe;EAAQ,SAAS;EAAiB,GAAI;EACjF;EACa,CAAA;;AAIpB,MAAa,YAAY,EAAE,QAAQ,UAAU,GAAG,WAA0B;AACxE,QACE,iBAAA,GAAA,kBAAA,KAAC,gBAAD;EAAgB,mBAAgB;EAAoB;EAAQ,GAAI;EAC7D;EACc,CAAA"}

package/lib/KeyFigure/KeyFigure.js

@@ -1,9 +1,8 @@
-const require_runtime = require('../_virtual/_rolldown/runtime.js');
+const require_runtime = require("../_virtual/_rolldown/runtime.js");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let html_react_parser = require("html-react-parser");
 html_react_parser = require_runtime.__toESM(html_react_parser);
 let react_jsx_runtime = require("react/jsx-runtime");
-
 //#region src/KeyFigure/KeyFigure.tsx
 /**
 * Copyright (c) 2023-present, NDLA.
@@ -48,7 +47,7 @@ const KeyFigure = ({ image, title, subtitle }) => {
 		]
 	});
 };
-
 //#endregion
 exports.KeyFigure = KeyFigure;
+
 //# sourceMappingURL=KeyFigure.js.map

package/lib/KeyFigure/KeyFigure.js.map

@@ -1 +1 @@
-{"version":3,"file":"KeyFigure.js","names":[],"sources":["../../src/KeyFigure/KeyFigure.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-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 { styled } from \"@ndla/styled-system/jsx\";\nimport parse from \"html-react-parser\";\n\nconst ContentWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    gap: \"xsmall\",\n\n    \"&:not(:has(> img))\": {\n      paddingBlock: \"xxlarge\",\n    },\n  },\n});\n\nconst StyledImage = styled(\"img\", {\n  base: {\n    height: \"surface.3xsmall\",\n    width: \"surface.3xsmall\",\n    borderRadius: \"xsmall\",\n  },\n});\n\nconst TitleWrapper = styled(\"div\", {\n  base: {\n    textStyle: \"heading.large\",\n    textAlign: \"center\",\n  },\n});\n\nconst SubTitleWrapper = styled(\"div\", {\n  base: {\n    textStyle: \"title.medium\",\n    textAlign: \"center\",\n  },\n});\n\nexport interface Props {\n  image?: {\n    src?: string;\n    alt?: string;\n  };\n  title: string;\n  subtitle: string;\n}\n\nexport const KeyFigure = ({ image, title, subtitle }: Props) => {\n  return (\n    <ContentWrapper data-embed-type=\"key-figure\">\n      {!!image && <StyledImage src={`${image?.src}?width=150`} width={150} height={150} alt={image?.alt} />}\n      <TitleWrapper>{parse(title)}</TitleWrapper>\n      <SubTitleWrapper>{parse(subtitle)}</SubTitleWrapper>\n    </ContentWrapper>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;AAWA,MAAM,qDAAwB,OAAO,EACnC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,YAAY;CACZ,gBAAgB;CAChB,KAAK;CAEL,sBAAsB,EACpB,cAAc,WACf;CACF,EACF,CAAC;AAEF,MAAM,kDAAqB,OAAO,EAChC,MAAM;CACJ,QAAQ;CACR,OAAO;CACP,cAAc;CACf,EACF,CAAC;AAEF,MAAM,mDAAsB,OAAO,EACjC,MAAM;CACJ,WAAW;CACX,WAAW;CACZ,EACF,CAAC;AAEF,MAAM,sDAAyB,OAAO,EACpC,MAAM;CACJ,WAAW;CACX,WAAW;CACZ,EACF,CAAC;AAWF,MAAa,aAAa,EAAE,OAAO,OAAO,eAAsB;AAC9D,QACE,4CAAC;EAAe,mBAAgB;;GAC7B,CAAC,CAAC,SAAS,2CAAC;IAAY,KAAK,GAAG,OAAO,IAAI;IAAa,OAAO;IAAK,QAAQ;IAAK,KAAK,OAAO;KAAO;GACrG,2CAAC,yDAAoB,MAAM,GAAgB;GAC3C,2CAAC,4DAAuB,SAAS,GAAmB;;GACrC"}
+{"version":3,"file":"KeyFigure.js","names":[],"sources":["../../src/KeyFigure/KeyFigure.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-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 { styled } from \"@ndla/styled-system/jsx\";\nimport parse from \"html-react-parser\";\n\nconst ContentWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    gap: \"xsmall\",\n\n    \"&:not(:has(> img))\": {\n      paddingBlock: \"xxlarge\",\n    },\n  },\n});\n\nconst StyledImage = styled(\"img\", {\n  base: {\n    height: \"surface.3xsmall\",\n    width: \"surface.3xsmall\",\n    borderRadius: \"xsmall\",\n  },\n});\n\nconst TitleWrapper = styled(\"div\", {\n  base: {\n    textStyle: \"heading.large\",\n    textAlign: \"center\",\n  },\n});\n\nconst SubTitleWrapper = styled(\"div\", {\n  base: {\n    textStyle: \"title.medium\",\n    textAlign: \"center\",\n  },\n});\n\nexport interface Props {\n  image?: {\n    src?: string;\n    alt?: string;\n  };\n  title: string;\n  subtitle: string;\n}\n\nexport const KeyFigure = ({ image, title, subtitle }: Props) => {\n  return (\n    <ContentWrapper data-embed-type=\"key-figure\">\n      {!!image && <StyledImage src={`${image?.src}?width=150`} width={150} height={150} alt={image?.alt} />}\n      <TitleWrapper>{parse(title)}</TitleWrapper>\n      <SubTitleWrapper>{parse(subtitle)}</SubTitleWrapper>\n    </ContentWrapper>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AAWA,MAAM,kBAAA,GAAA,wBAAA,QAAwB,OAAO,EACnC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,YAAY;CACZ,gBAAgB;CAChB,KAAK;CAEL,sBAAsB,EACpB,cAAc,WACf;CACF,EACF,CAAC;AAEF,MAAM,eAAA,GAAA,wBAAA,QAAqB,OAAO,EAChC,MAAM;CACJ,QAAQ;CACR,OAAO;CACP,cAAc;CACf,EACF,CAAC;AAEF,MAAM,gBAAA,GAAA,wBAAA,QAAsB,OAAO,EACjC,MAAM;CACJ,WAAW;CACX,WAAW;CACZ,EACF,CAAC;AAEF,MAAM,mBAAA,GAAA,wBAAA,QAAyB,OAAO,EACpC,MAAM;CACJ,WAAW;CACX,WAAW;CACZ,EACF,CAAC;AAWF,MAAa,aAAa,EAAE,OAAO,OAAO,eAAsB;AAC9D,QACE,iBAAA,GAAA,kBAAA,MAAC,gBAAD;EAAgB,mBAAgB;YAAhC;GACG,CAAC,CAAC,SAAS,iBAAA,GAAA,kBAAA,KAAC,aAAD;IAAa,KAAK,GAAG,OAAO,IAAI;IAAa,OAAO;IAAK,QAAQ;IAAK,KAAK,OAAO;IAAO,CAAA;GACrG,iBAAA,GAAA,kBAAA,KAAC,cAAD,EAAA,WAAA,GAAA,kBAAA,SAAqB,MAAM,EAAgB,CAAA;GAC3C,iBAAA,GAAA,kBAAA,KAAC,iBAAD,EAAA,WAAA,GAAA,kBAAA,SAAwB,SAAS,EAAmB,CAAA;GACrC"}

package/lib/LicenseByline/EmbedByline.js

@@ -1,5 +1,5 @@
-const require_runtime = require('../_virtual/_rolldown/runtime.js');
-const require_LicenseLink = require('./LicenseLink.js');
+require("../_virtual/_rolldown/runtime.js");
+const require_LicenseLink = require("./LicenseLink.js");
 let _ndla_primitives = require("@ndla/primitives");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react = require("react");
@@ -7,7 +7,6 @@ let react_i18next = require("react-i18next");
 let _ndla_icons = require("@ndla/icons");
 let _ndla_licenses = require("@ndla/licenses");
 let react_jsx_runtime = require("react/jsx-runtime");
-
 //#region src/LicenseByline/EmbedByline.tsx
 /**
 * Copyright (c) 2023-present, NDLA.
@@ -136,8 +135,8 @@ const LicenseContainerContent = ({ children, copyright, type }) => {
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: content })
 	});
 };
-
 //#endregion
 exports.EmbedByline = EmbedByline;
 exports.LicenseContainerContent = LicenseContainerContent;
+
 //# sourceMappingURL=EmbedByline.js.map

package/lib/LicenseByline/EmbedByline.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmbedByline.js","names":["Text","AlertLine","Button","LicenseLink"],"sources":["../../src/LicenseByline/EmbedByline.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-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 { AlertLine } from \"@ndla/icons\";\nimport { getLicenseByAbbreviation } from \"@ndla/licenses\";\nimport { Button, Text } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { CopyrightDTO as ArticleCopyright } from \"@ndla/types-backend/article-api\";\nimport type { CopyrightDTO as AudioCopyright } from \"@ndla/types-backend/audio-api\";\nimport type { DraftCopyrightDTO as ConceptCopyright } from \"@ndla/types-backend/concept-api\";\nimport type { CopyrightDTO as ImageCopyright } from \"@ndla/types-backend/image-api\";\nimport type { BrightcoveCopyright } from \"@ndla/types-embed\";\nimport { type Dispatch, type ReactNode, type SetStateAction, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { LicenseLink } from \"./LicenseLink\";\n\ninterface BaseProps {\n  description?: ReactNode;\n  children?: ReactNode;\n  visibleAlt?: string;\n  error?: true | false;\n  hideDescription?: boolean;\n  hideCopyright?: boolean;\n}\n\nexport interface EmbedBylineErrorProps extends BaseProps {\n  type: EmbedBylineTypeProps[\"type\"] | \"h5p\" | \"external\" | \"code\";\n  error: true;\n}\n\ninterface ImageProps extends BaseProps {\n  type: \"image\";\n  copyright: ImageCopyright | undefined;\n}\n\ninterface BrightcoveProps extends BaseProps {\n  type: \"video\";\n  copyright: BrightcoveCopyright | undefined;\n}\n\ninterface AudioProps extends BaseProps {\n  type: \"audio\";\n  copyright: AudioCopyright | undefined;\n}\n\ninterface PodcastProps extends BaseProps {\n  type: \"podcast\";\n  copyright: AudioCopyright | undefined;\n}\n\ninterface ConceptProps extends BaseProps {\n  type: \"concept\" | \"gloss\";\n  copyright: ConceptCopyright | undefined;\n}\n\ninterface CopyrightProps extends BaseProps {\n  type: \"copyright\";\n  copyright: ArticleCopyright | undefined;\n}\n\nexport type EmbedBylineTypeProps =\n  | ImageProps\n  | BrightcoveProps\n  | AudioProps\n  | PodcastProps\n  | ConceptProps\n  | CopyrightProps;\n\ntype Props = EmbedBylineTypeProps | EmbedBylineErrorProps;\n\nconst BylineWrapper = styled(\"figcaption\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    paddingBlock: \"xsmall\",\n    textStyle: \"label.medium\",\n    color: \"text.subtle\",\n  },\n});\n\nconst ErrorBylineWrapper = styled(BylineWrapper, {\n  base: {\n    border: \"1px solid\",\n    borderColor: \"stroke.error\",\n    borderRadius: \"xsmall\",\n    background: \"surface.dangerSubtle\",\n    paddingInline: \"medium\",\n    paddingBlock: \"medium\",\n  },\n});\n\nconst StyledText = styled(Text, {\n  base: {\n    fontStyle: \"italic\",\n  },\n});\n\nconst ContentWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    gap: \"xsmall\",\n    alignItems: \"center\",\n    textStyle: \"label.medium\",\n  },\n});\n\nconst BaseDescription = styled(\"div\", {\n  base: {\n    display: \"inline-flex\",\n    whiteSpace: \"pre-wrap\",\n  },\n});\n\nexport const EmbedByline = ({ type, description, children, visibleAlt, hideCopyright, ...props }: Props) => {\n  const { t } = useTranslation();\n\n  if (props.error) {\n    const typeString = type === \"h5p\" ? \"H5P\" : t(`embed.type.${type}`).toLowerCase();\n    return (\n      <ErrorBylineWrapper>\n        <ContentWrapper>\n          <AlertLine />\n          <BaseDescription>\n            <span>{t(\"embed.embedError\", { type: typeString })}</span>\n          </BaseDescription>\n        </ContentWrapper>\n      </ErrorBylineWrapper>\n    );\n  }\n\n  const { copyright } = props;\n  const hideByline = hideCopyright && !description;\n\n  return (\n    <>\n      {!hideByline && (\n        <BylineWrapper>\n          <div>\n            {!!hideCopyright && description}\n            {!hideCopyright && (\n              <LicenseContainerContent type={type} copyright={copyright}>\n                {description}\n              </LicenseContainerContent>\n            )}\n            {children}\n          </div>\n        </BylineWrapper>\n      )}\n      {visibleAlt ? (\n        <StyledText color=\"text.subtle\" textStyle=\"label.medium\" asChild consumeCss>\n          <span>{`Alt: ${visibleAlt}`}</span>\n        </StyledText>\n      ) : null}\n    </>\n  );\n};\n\ninterface LicenseContainerProps {\n  children?: ReactNode;\n  copyright: EmbedBylineTypeProps[\"copyright\"];\n  type: Props[\"type\"];\n}\n\nconst StyledDescription = styled(BaseDescription, {\n  base: {\n    mobileWideDown: {\n      display: \"grid\",\n      gridTemplateColumns: \"1fr auto\",\n      alignItems: \"center\",\n      overflow: \"hidden\",\n      _open: {\n        display: \"inline\",\n      },\n    },\n  },\n});\n\nconst TextContent = styled(\"span\", {\n  base: {\n    mobileWideDown: {\n      whiteSpace: \"nowrap\",\n      maxHeight: \"large\",\n      overflow: \"hidden\",\n      textOverflow: \"ellipsis\",\n      transitionProperty: \"max-height\",\n      transitionDuration: \"slow\",\n      transitionTimingFunction: \"ease-in\",\n      marginInlineEnd: \"4xsmall\",\n      _open: {\n        whiteSpace: \"pre-wrap\",\n        maxHeight: \"none\",\n      },\n    },\n  },\n});\n\nconst StyledButton = styled(Button, {\n  base: {\n    mobileWide: {\n      display: \"none\",\n    },\n  },\n});\n\ninterface LicenseDescriptionProps {\n  children?: ReactNode;\n  isOpen: boolean;\n  setIsOpen: Dispatch<SetStateAction<boolean>>;\n}\n\nconst LicenseDescription = ({ children, isOpen, setIsOpen }: LicenseDescriptionProps) => {\n  const open = isOpen ? { \"data-open\": \"\" } : {};\n  const { t } = useTranslation();\n\n  const handleToggle = () => {\n    setIsOpen(!isOpen);\n  };\n\n  return (\n    <ContentWrapper>\n      <StyledDescription {...open}>\n        <TextContent {...open}>{children}</TextContent>\n        <StyledButton variant=\"link\" size=\"small\" onClick={handleToggle}>\n          {isOpen ? `${t(\"audio.readLessDescriptionLabel\")}` : `${t(\"audio.readMoreDescriptionLabel\")}`}\n        </StyledButton>\n      </StyledDescription>\n    </ContentWrapper>\n  );\n};\n\nexport const LicenseContainerContent = ({ children, copyright, type }: LicenseContainerProps) => {\n  const { t, i18n } = useTranslation();\n  const license = copyright ? getLicenseByAbbreviation(copyright.license?.license ?? \"\", i18n.language) : undefined;\n  const captionAuthors =\n    [copyright?.creators, copyright?.rightsholders, copyright?.processors].find((authors) => authors?.length) ?? [];\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n\n  const content = (\n    <>\n      {children}\n      {` ${t(`embed.type.${type}`)}${captionAuthors.length ? \": \" : \"\"}`}\n      <span>{captionAuthors.map((author) => author.name).join(\", \")}</span>\n      {license ? (\n        <>\n          {\" / \"}\n          {<LicenseLink license={license} hideLink={!isOpen && !!children} />}\n        </>\n      ) : null}\n    </>\n  );\n\n  if (children) {\n    return (\n      <LicenseDescription isOpen={isOpen} setIsOpen={setIsOpen}>\n        {content}\n      </LicenseDescription>\n    );\n  }\n\n  return (\n    <Text textStyle=\"label.medium\" asChild consumeCss>\n      <span>{content}</span>\n    </Text>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"EmbedByline.js","names":["Text","AlertLine","Button","LicenseLink"],"sources":["../../src/LicenseByline/EmbedByline.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-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 { AlertLine } from \"@ndla/icons\";\nimport { getLicenseByAbbreviation } from \"@ndla/licenses\";\nimport { Button, Text } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { CopyrightDTO as ArticleCopyright } from \"@ndla/types-backend/article-api\";\nimport type { CopyrightDTO as AudioCopyright } from \"@ndla/types-backend/audio-api\";\nimport type { DraftCopyrightDTO as ConceptCopyright } from \"@ndla/types-backend/concept-api\";\nimport type { CopyrightDTO as ImageCopyright } from \"@ndla/types-backend/image-api\";\nimport type { BrightcoveCopyright } from \"@ndla/types-embed\";\nimport { type Dispatch, type ReactNode, type SetStateAction, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { LicenseLink } from \"./LicenseLink\";\n\ninterface BaseProps {\n  description?: ReactNode;\n  children?: ReactNode;\n  visibleAlt?: string;\n  error?: true | false;\n  hideDescription?: boolean;\n  hideCopyright?: boolean;\n}\n\nexport interface EmbedBylineErrorProps extends BaseProps {\n  type: EmbedBylineTypeProps[\"type\"] | \"h5p\" | \"external\" | \"code\";\n  error: true;\n}\n\ninterface ImageProps extends BaseProps {\n  type: \"image\";\n  copyright: ImageCopyright | undefined;\n}\n\ninterface BrightcoveProps extends BaseProps {\n  type: \"video\";\n  copyright: BrightcoveCopyright | undefined;\n}\n\ninterface AudioProps extends BaseProps {\n  type: \"audio\";\n  copyright: AudioCopyright | undefined;\n}\n\ninterface PodcastProps extends BaseProps {\n  type: \"podcast\";\n  copyright: AudioCopyright | undefined;\n}\n\ninterface ConceptProps extends BaseProps {\n  type: \"concept\" | \"gloss\";\n  copyright: ConceptCopyright | undefined;\n}\n\ninterface CopyrightProps extends BaseProps {\n  type: \"copyright\";\n  copyright: ArticleCopyright | undefined;\n}\n\nexport type EmbedBylineTypeProps =\n  | ImageProps\n  | BrightcoveProps\n  | AudioProps\n  | PodcastProps\n  | ConceptProps\n  | CopyrightProps;\n\ntype Props = EmbedBylineTypeProps | EmbedBylineErrorProps;\n\nconst BylineWrapper = styled(\"figcaption\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    paddingBlock: \"xsmall\",\n    textStyle: \"label.medium\",\n    color: \"text.subtle\",\n  },\n});\n\nconst ErrorBylineWrapper = styled(BylineWrapper, {\n  base: {\n    border: \"1px solid\",\n    borderColor: \"stroke.error\",\n    borderRadius: \"xsmall\",\n    background: \"surface.dangerSubtle\",\n    paddingInline: \"medium\",\n    paddingBlock: \"medium\",\n  },\n});\n\nconst StyledText = styled(Text, {\n  base: {\n    fontStyle: \"italic\",\n  },\n});\n\nconst ContentWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    gap: \"xsmall\",\n    alignItems: \"center\",\n    textStyle: \"label.medium\",\n  },\n});\n\nconst BaseDescription = styled(\"div\", {\n  base: {\n    display: \"inline-flex\",\n    whiteSpace: \"pre-wrap\",\n  },\n});\n\nexport const EmbedByline = ({ type, description, children, visibleAlt, hideCopyright, ...props }: Props) => {\n  const { t } = useTranslation();\n\n  if (props.error) {\n    const typeString = type === \"h5p\" ? \"H5P\" : t(`embed.type.${type}`).toLowerCase();\n    return (\n      <ErrorBylineWrapper>\n        <ContentWrapper>\n          <AlertLine />\n          <BaseDescription>\n            <span>{t(\"embed.embedError\", { type: typeString })}</span>\n          </BaseDescription>\n        </ContentWrapper>\n      </ErrorBylineWrapper>\n    );\n  }\n\n  const { copyright } = props;\n  const hideByline = hideCopyright && !description;\n\n  return (\n    <>\n      {!hideByline && (\n        <BylineWrapper>\n          <div>\n            {!!hideCopyright && description}\n            {!hideCopyright && (\n              <LicenseContainerContent type={type} copyright={copyright}>\n                {description}\n              </LicenseContainerContent>\n            )}\n            {children}\n          </div>\n        </BylineWrapper>\n      )}\n      {visibleAlt ? (\n        <StyledText color=\"text.subtle\" textStyle=\"label.medium\" asChild consumeCss>\n          <span>{`Alt: ${visibleAlt}`}</span>\n        </StyledText>\n      ) : null}\n    </>\n  );\n};\n\ninterface LicenseContainerProps {\n  children?: ReactNode;\n  copyright: EmbedBylineTypeProps[\"copyright\"];\n  type: Props[\"type\"];\n}\n\nconst StyledDescription = styled(BaseDescription, {\n  base: {\n    mobileWideDown: {\n      display: \"grid\",\n      gridTemplateColumns: \"1fr auto\",\n      alignItems: \"center\",\n      overflow: \"hidden\",\n      _open: {\n        display: \"inline\",\n      },\n    },\n  },\n});\n\nconst TextContent = styled(\"span\", {\n  base: {\n    mobileWideDown: {\n      whiteSpace: \"nowrap\",\n      maxHeight: \"large\",\n      overflow: \"hidden\",\n      textOverflow: \"ellipsis\",\n      transitionProperty: \"max-height\",\n      transitionDuration: \"slow\",\n      transitionTimingFunction: \"ease-in\",\n      marginInlineEnd: \"4xsmall\",\n      _open: {\n        whiteSpace: \"pre-wrap\",\n        maxHeight: \"none\",\n      },\n    },\n  },\n});\n\nconst StyledButton = styled(Button, {\n  base: {\n    mobileWide: {\n      display: \"none\",\n    },\n  },\n});\n\ninterface LicenseDescriptionProps {\n  children?: ReactNode;\n  isOpen: boolean;\n  setIsOpen: Dispatch<SetStateAction<boolean>>;\n}\n\nconst LicenseDescription = ({ children, isOpen, setIsOpen }: LicenseDescriptionProps) => {\n  const open = isOpen ? { \"data-open\": \"\" } : {};\n  const { t } = useTranslation();\n\n  const handleToggle = () => {\n    setIsOpen(!isOpen);\n  };\n\n  return (\n    <ContentWrapper>\n      <StyledDescription {...open}>\n        <TextContent {...open}>{children}</TextContent>\n        <StyledButton variant=\"link\" size=\"small\" onClick={handleToggle}>\n          {isOpen ? `${t(\"audio.readLessDescriptionLabel\")}` : `${t(\"audio.readMoreDescriptionLabel\")}`}\n        </StyledButton>\n      </StyledDescription>\n    </ContentWrapper>\n  );\n};\n\nexport const LicenseContainerContent = ({ children, copyright, type }: LicenseContainerProps) => {\n  const { t, i18n } = useTranslation();\n  const license = copyright ? getLicenseByAbbreviation(copyright.license?.license ?? \"\", i18n.language) : undefined;\n  const captionAuthors =\n    [copyright?.creators, copyright?.rightsholders, copyright?.processors].find((authors) => authors?.length) ?? [];\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n\n  const content = (\n    <>\n      {children}\n      {` ${t(`embed.type.${type}`)}${captionAuthors.length ? \": \" : \"\"}`}\n      <span>{captionAuthors.map((author) => author.name).join(\", \")}</span>\n      {license ? (\n        <>\n          {\" / \"}\n          {<LicenseLink license={license} hideLink={!isOpen && !!children} />}\n        </>\n      ) : null}\n    </>\n  );\n\n  if (children) {\n    return (\n      <LicenseDescription isOpen={isOpen} setIsOpen={setIsOpen}>\n        {content}\n      </LicenseDescription>\n    );\n  }\n\n  return (\n    <Text textStyle=\"label.medium\" asChild consumeCss>\n      <span>{content}</span>\n    </Text>\n  );\n};\n"],"mappings":"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"}

package/lib/LicenseByline/LicenseLink.js

@@ -1,9 +1,8 @@
-const require_runtime = require('../_virtual/_rolldown/runtime.js');
+require("../_virtual/_rolldown/runtime.js");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react = require("react");
 let _ndla_safelink = require("@ndla/safelink");
 let react_jsx_runtime = require("react/jsx-runtime");
-
 //#region src/LicenseByline/LicenseLink.tsx
 const StyledSafeLink = (0, _ndla_styled_system_jsx.styled)(_ndla_safelink.SafeLink, { base: {
 	color: "text.link",
@@ -26,7 +25,7 @@ const LicenseLink = (0, react.forwardRef)(({ license, hideLink, ...rest }, ref)
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: license.abbreviation });
 });
-
 //#endregion
 exports.LicenseLink = LicenseLink;
+
 //# sourceMappingURL=LicenseLink.js.map

package/lib/LicenseByline/LicenseLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"LicenseLink.js","names":["SafeLink"],"sources":["../../src/LicenseByline/LicenseLink.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-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 { LicenseLocaleType } from \"@ndla/licenses\";\nimport { SafeLink, type SafeLinkProps } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { forwardRef } from \"react\";\n\ninterface Props extends Omit<SafeLinkProps, \"to\"> {\n  license: LicenseLocaleType;\n  hideLink?: boolean;\n}\n\nconst StyledSafeLink = styled(SafeLink, {\n  base: {\n    color: \"text.link\",\n    textDecoration: \"underline\",\n    whiteSpace: \"nowrap\",\n    _hover: {\n      textDecoration: \"none\",\n    },\n    _focusWithin: {\n      textDecoration: \"none\",\n    },\n    mobileWideDown: {\n      _disabled: {\n        display: \"none\",\n      },\n    },\n  },\n});\n\nexport const LicenseLink = forwardRef<HTMLAnchorElement, Props>(({ license, hideLink, ...rest }, ref) => {\n  const disabled = hideLink ? { \"data-disabled\": \"\" } : {};\n  if (license.abbreviation === \"unknown\") {\n    return null;\n  }\n  if (license.url?.length) {\n    return (\n      <StyledSafeLink to={license.url} rel=\"license\" {...disabled} {...rest} ref={ref}>\n        {license.abbreviation}\n      </StyledSafeLink>\n    );\n  }\n  return <span>{license.abbreviation}</span>;\n});\n"],"mappings":";;;;;;;AAkBA,MAAM,qDAAwBA,yBAAU,EACtC,MAAM;CACJ,OAAO;CACP,gBAAgB;CAChB,YAAY;CACZ,QAAQ,EACN,gBAAgB,QACjB;CACD,cAAc,EACZ,gBAAgB,QACjB;CACD,gBAAgB,EACd,WAAW,EACT,SAAS,QACV,EACF;CACF,EACF,CAAC;AAEF,MAAa,qCAAoD,EAAE,SAAS,UAAU,GAAG,QAAQ,QAAQ;CACvG,MAAM,WAAW,WAAW,EAAE,iBAAiB,IAAI,GAAG,EAAE;AACxD,KAAI,QAAQ,iBAAiB,UAC3B,QAAO;AAET,KAAI,QAAQ,KAAK,OACf,QACE,2CAAC;EAAe,IAAI,QAAQ;EAAK,KAAI;EAAU,GAAI;EAAU,GAAI;EAAW;YACzE,QAAQ;GACM;AAGrB,QAAO,2CAAC,oBAAM,QAAQ,eAAoB;EAC1C"}
+{"version":3,"file":"LicenseLink.js","names":["SafeLink"],"sources":["../../src/LicenseByline/LicenseLink.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-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 { LicenseLocaleType } from \"@ndla/licenses\";\nimport { SafeLink, type SafeLinkProps } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { forwardRef } from \"react\";\n\ninterface Props extends Omit<SafeLinkProps, \"to\"> {\n  license: LicenseLocaleType;\n  hideLink?: boolean;\n}\n\nconst StyledSafeLink = styled(SafeLink, {\n  base: {\n    color: \"text.link\",\n    textDecoration: \"underline\",\n    whiteSpace: \"nowrap\",\n    _hover: {\n      textDecoration: \"none\",\n    },\n    _focusWithin: {\n      textDecoration: \"none\",\n    },\n    mobileWideDown: {\n      _disabled: {\n        display: \"none\",\n      },\n    },\n  },\n});\n\nexport const LicenseLink = forwardRef<HTMLAnchorElement, Props>(({ license, hideLink, ...rest }, ref) => {\n  const disabled = hideLink ? { \"data-disabled\": \"\" } : {};\n  if (license.abbreviation === \"unknown\") {\n    return null;\n  }\n  if (license.url?.length) {\n    return (\n      <StyledSafeLink to={license.url} rel=\"license\" {...disabled} {...rest} ref={ref}>\n        {license.abbreviation}\n      </StyledSafeLink>\n    );\n  }\n  return <span>{license.abbreviation}</span>;\n});\n"],"mappings":";;;;;;AAkBA,MAAM,kBAAA,GAAA,wBAAA,QAAwBA,eAAAA,UAAU,EACtC,MAAM;CACJ,OAAO;CACP,gBAAgB;CAChB,YAAY;CACZ,QAAQ,EACN,gBAAgB,QACjB;CACD,cAAc,EACZ,gBAAgB,QACjB;CACD,gBAAgB,EACd,WAAW,EACT,SAAS,QACV,EACF;CACF,EACF,CAAC;AAEF,MAAa,eAAA,GAAA,MAAA,aAAoD,EAAE,SAAS,UAAU,GAAG,QAAQ,QAAQ;CACvG,MAAM,WAAW,WAAW,EAAE,iBAAiB,IAAI,GAAG,EAAE;AACxD,KAAI,QAAQ,iBAAiB,UAC3B,QAAO;AAET,KAAI,QAAQ,KAAK,OACf,QACE,iBAAA,GAAA,kBAAA,KAAC,gBAAD;EAAgB,IAAI,QAAQ;EAAK,KAAI;EAAU,GAAI;EAAU,GAAI;EAAW;YACzE,QAAQ;EACM,CAAA;AAGrB,QAAO,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAA,UAAO,QAAQ,cAAoB,CAAA;EAC1C"}

package/lib/LinkBlock/LinkBlock.js

@@ -1,5 +1,5 @@
-const require_runtime = require('../_virtual/_rolldown/runtime.js');
-const require_relativeUrl = require('../utils/relativeUrl.js');
+const require_runtime = require("../_virtual/_rolldown/runtime.js");
+const require_relativeUrl = require("../utils/relativeUrl.js");
 let _ndla_primitives = require("@ndla/primitives");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react = require("react");
@@ -8,7 +8,6 @@ html_react_parser = require_runtime.__toESM(html_react_parser);
 let _ndla_icons = require("@ndla/icons");
 let _ndla_safelink = require("@ndla/safelink");
 let react_jsx_runtime = require("react/jsx-runtime");
-
 //#region src/LinkBlock/LinkBlock.tsx
 /**
 * Copyright (c) 2023-present, NDLA.
@@ -76,7 +75,7 @@ const LinkBlock = ({ title, articleLanguage, date, url, path }) => {
 		}), !!date && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledDateContainer, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledCalendarEd, {}), formattedDate] })] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_icons.ArrowRightLine, { "data-forward": true })]
 	});
 };
-
 //#endregion
 exports.LinkBlock = LinkBlock;
+
 //# sourceMappingURL=LinkBlock.js.map

package/lib/LinkBlock/LinkBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinkBlock.js","names":["SafeLink","CalendarLine","getPossiblyRelativeUrl","Heading","ArrowRightLine"],"sources":["../../src/LinkBlock/LinkBlock.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-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 { ArrowRightLine, CalendarLine } from \"@ndla/icons\";\nimport { Heading } from \"@ndla/primitives\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { LinkBlockEmbedData } from \"@ndla/types-embed\";\nimport parse from \"html-react-parser\";\nimport { useMemo } from \"react\";\nimport { getPossiblyRelativeUrl } from \"../utils/relativeUrl\";\n\nconst InfoWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"xsmall\",\n  },\n});\n\nconst StyledSafeLink = styled(SafeLink, {\n  base: {\n    display: \"flex\",\n    justifyContent: \"space-between\",\n    alignItems: \"center\",\n    background: \"surface.default\",\n    padding: \"medium\",\n    border: \"1px solid\",\n    borderColor: \"stroke.subtle\",\n    borderRadius: \"xsmall\",\n    \"& h3\": {\n      textDecoration: \"underline\",\n    },\n    \"& [data-forward]\": {\n      transitionProperty: \"width, height\",\n      transitionTimingFunction: \"ease-in-out\",\n      transitionDuration: \"fast\",\n    },\n    _hover: {\n      \"& h3\": {\n        textDecoration: \"none\",\n      },\n      \"& [data-forward]\": {\n        width: \"large\",\n        height: \"large\",\n      },\n    },\n  },\n});\n\nconst StyledDateContainer = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    alignItems: \"center\",\n    gap: \"xxsmall\",\n  },\n});\n\nconst StyledCalendarEd = styled(CalendarLine, {\n  base: {\n    color: \"icon.strong\",\n  },\n});\n\ninterface Props extends Omit<LinkBlockEmbedData, \"resource\"> {\n  path?: string;\n  articleLanguage?: string;\n}\n\nexport const LinkBlock = ({ title, articleLanguage, date, url, path }: Props) => {\n  const href = getPossiblyRelativeUrl(url, path);\n  const formattedDate = useMemo(() => {\n    if (!date) return null;\n    return new Intl.DateTimeFormat(articleLanguage, {\n      timeZone: \"CET\",\n      day: \"2-digit\",\n      month: \"long\",\n      year: \"numeric\",\n    }).format(new Date(date));\n  }, [date, articleLanguage]);\n  return (\n    <StyledSafeLink to={href} data-embed-type=\"link-block\">\n      <InfoWrapper>\n        <Heading asChild consumeCss textStyle=\"title.medium\">\n          <h3 data-heading>{parse(title)}</h3>\n        </Heading>\n        {!!date && (\n          <StyledDateContainer>\n            <StyledCalendarEd />\n            {formattedDate}\n          </StyledDateContainer>\n        )}\n      </InfoWrapper>\n      <ArrowRightLine data-forward />\n    </StyledSafeLink>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAiBA,MAAM,kDAAqB,OAAO,EAChC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACN,EACF,CAAC;AAEF,MAAM,qDAAwBA,yBAAU,EACtC,MAAM;CACJ,SAAS;CACT,gBAAgB;CAChB,YAAY;CACZ,YAAY;CACZ,SAAS;CACT,QAAQ;CACR,aAAa;CACb,cAAc;CACd,QAAQ,EACN,gBAAgB,aACjB;CACD,oBAAoB;EAClB,oBAAoB;EACpB,0BAA0B;EAC1B,oBAAoB;EACrB;CACD,QAAQ;EACN,QAAQ,EACN,gBAAgB,QACjB;EACD,oBAAoB;GAClB,OAAO;GACP,QAAQ;GACT;EACF;CACF,EACF,CAAC;AAEF,MAAM,0DAA6B,OAAO,EACxC,MAAM;CACJ,SAAS;CACT,YAAY;CACZ,KAAK;CACN,EACF,CAAC;AAEF,MAAM,uDAA0BC,0BAAc,EAC5C,MAAM,EACJ,OAAO,eACR,EACF,CAAC;AAOF,MAAa,aAAa,EAAE,OAAO,iBAAiB,MAAM,KAAK,WAAkB;CAC/E,MAAM,OAAOC,2CAAuB,KAAK,KAAK;CAC9C,MAAM,yCAA8B;AAClC,MAAI,CAAC,KAAM,QAAO;AAClB,SAAO,IAAI,KAAK,eAAe,iBAAiB;GAC9C,UAAU;GACV,KAAK;GACL,OAAO;GACP,MAAM;GACP,CAAC,CAAC,OAAO,IAAI,KAAK,KAAK,CAAC;IACxB,CAAC,MAAM,gBAAgB,CAAC;AAC3B,QACE,4CAAC;EAAe,IAAI;EAAM,mBAAgB;aACxC,4CAAC,0BACC,2CAACC;GAAQ;GAAQ;GAAW,WAAU;aACpC,2CAAC;IAAG;6CAAoB,MAAM;KAAM;IAC5B,EACT,CAAC,CAAC,QACD,4CAAC,kCACC,2CAAC,qBAAmB,EACnB,iBACmB,IAEZ,EACd,2CAACC,8BAAe,uBAAe;GAChB"}
+{"version":3,"file":"LinkBlock.js","names":["SafeLink","CalendarLine","getPossiblyRelativeUrl","Heading","ArrowRightLine"],"sources":["../../src/LinkBlock/LinkBlock.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-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 { ArrowRightLine, CalendarLine } from \"@ndla/icons\";\nimport { Heading } from \"@ndla/primitives\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { LinkBlockEmbedData } from \"@ndla/types-embed\";\nimport parse from \"html-react-parser\";\nimport { useMemo } from \"react\";\nimport { getPossiblyRelativeUrl } from \"../utils/relativeUrl\";\n\nconst InfoWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"xsmall\",\n  },\n});\n\nconst StyledSafeLink = styled(SafeLink, {\n  base: {\n    display: \"flex\",\n    justifyContent: \"space-between\",\n    alignItems: \"center\",\n    background: \"surface.default\",\n    padding: \"medium\",\n    border: \"1px solid\",\n    borderColor: \"stroke.subtle\",\n    borderRadius: \"xsmall\",\n    \"& h3\": {\n      textDecoration: \"underline\",\n    },\n    \"& [data-forward]\": {\n      transitionProperty: \"width, height\",\n      transitionTimingFunction: \"ease-in-out\",\n      transitionDuration: \"fast\",\n    },\n    _hover: {\n      \"& h3\": {\n        textDecoration: \"none\",\n      },\n      \"& [data-forward]\": {\n        width: \"large\",\n        height: \"large\",\n      },\n    },\n  },\n});\n\nconst StyledDateContainer = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    alignItems: \"center\",\n    gap: \"xxsmall\",\n  },\n});\n\nconst StyledCalendarEd = styled(CalendarLine, {\n  base: {\n    color: \"icon.strong\",\n  },\n});\n\ninterface Props extends Omit<LinkBlockEmbedData, \"resource\"> {\n  path?: string;\n  articleLanguage?: string;\n}\n\nexport const LinkBlock = ({ title, articleLanguage, date, url, path }: Props) => {\n  const href = getPossiblyRelativeUrl(url, path);\n  const formattedDate = useMemo(() => {\n    if (!date) return null;\n    return new Intl.DateTimeFormat(articleLanguage, {\n      timeZone: \"CET\",\n      day: \"2-digit\",\n      month: \"long\",\n      year: \"numeric\",\n    }).format(new Date(date));\n  }, [date, articleLanguage]);\n  return (\n    <StyledSafeLink to={href} data-embed-type=\"link-block\">\n      <InfoWrapper>\n        <Heading asChild consumeCss textStyle=\"title.medium\">\n          <h3 data-heading>{parse(title)}</h3>\n        </Heading>\n        {!!date && (\n          <StyledDateContainer>\n            <StyledCalendarEd />\n            {formattedDate}\n          </StyledDateContainer>\n        )}\n      </InfoWrapper>\n      <ArrowRightLine data-forward />\n    </StyledSafeLink>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAiBA,MAAM,eAAA,GAAA,wBAAA,QAAqB,OAAO,EAChC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACN,EACF,CAAC;AAEF,MAAM,kBAAA,GAAA,wBAAA,QAAwBA,eAAAA,UAAU,EACtC,MAAM;CACJ,SAAS;CACT,gBAAgB;CAChB,YAAY;CACZ,YAAY;CACZ,SAAS;CACT,QAAQ;CACR,aAAa;CACb,cAAc;CACd,QAAQ,EACN,gBAAgB,aACjB;CACD,oBAAoB;EAClB,oBAAoB;EACpB,0BAA0B;EAC1B,oBAAoB;EACrB;CACD,QAAQ;EACN,QAAQ,EACN,gBAAgB,QACjB;EACD,oBAAoB;GAClB,OAAO;GACP,QAAQ;GACT;EACF;CACF,EACF,CAAC;AAEF,MAAM,uBAAA,GAAA,wBAAA,QAA6B,OAAO,EACxC,MAAM;CACJ,SAAS;CACT,YAAY;CACZ,KAAK;CACN,EACF,CAAC;AAEF,MAAM,oBAAA,GAAA,wBAAA,QAA0BC,YAAAA,cAAc,EAC5C,MAAM,EACJ,OAAO,eACR,EACF,CAAC;AAOF,MAAa,aAAa,EAAE,OAAO,iBAAiB,MAAM,KAAK,WAAkB;CAC/E,MAAM,OAAOC,oBAAAA,uBAAuB,KAAK,KAAK;CAC9C,MAAM,iBAAA,GAAA,MAAA,eAA8B;AAClC,MAAI,CAAC,KAAM,QAAO;AAClB,SAAO,IAAI,KAAK,eAAe,iBAAiB;GAC9C,UAAU;GACV,KAAK;GACL,OAAO;GACP,MAAM;GACP,CAAC,CAAC,OAAO,IAAI,KAAK,KAAK,CAAC;IACxB,CAAC,MAAM,gBAAgB,CAAC;AAC3B,QACE,iBAAA,GAAA,kBAAA,MAAC,gBAAD;EAAgB,IAAI;EAAM,mBAAgB;YAA1C,CACE,iBAAA,GAAA,kBAAA,MAAC,aAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,SAAD;GAAS,SAAA;GAAQ,YAAA;GAAW,WAAU;aACpC,iBAAA,GAAA,kBAAA,KAAC,MAAD;IAAI,gBAAA;6CAAoB,MAAM;IAAM,CAAA;GAC5B,CAAA,EACT,CAAC,CAAC,QACD,iBAAA,GAAA,kBAAA,MAAC,qBAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAC,kBAAD,EAAoB,CAAA,EACnB,cACmB,EAAA,CAAA,CAEZ,EAAA,CAAA,EACd,iBAAA,GAAA,kBAAA,KAACC,YAAAA,gBAAD,EAAgB,gBAAA,MAAe,CAAA,CAChB"}