@ndla/ui 56.0.142-alpha.0 → 56.0.143-alpha.0

package/lib/Embed/UnknownEmbed.js

@@ -1,7 +1,10 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
-const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
-const react_i18next = require_rolldown_runtime.__toESM(require("react-i18next"));
-const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+let __ndla_primitives = require("@ndla/primitives");
+__ndla_primitives = require_rolldown_runtime.__toESM(__ndla_primitives);
+let react_i18next = require("react-i18next");
+react_i18next = require_rolldown_runtime.__toESM(react_i18next);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/Embed/UnknownEmbed.tsx
 const UnknownEmbed = ({ embed }) => {
@@ -17,5 +20,5 @@ const UnknownEmbed = ({ embed }) => {
 var UnknownEmbed_default = UnknownEmbed;
 
 //#endregion
-exports.UnknownEmbed_default = UnknownEmbed_default;
+exports.default = UnknownEmbed_default;
 //# sourceMappingURL=UnknownEmbed.js.map

package/lib/Embed/UnknownEmbed.js.map

@@ -1 +1 @@
-{"version":3,"file":"UnknownEmbed.js","names":["Text"],"sources":["../../src/Embed/UnknownEmbed.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 { useTranslation } from \"react-i18next\";\nimport { Text } from \"@ndla/primitives\";\nimport type { MetaData } from \"@ndla/types-embed\";\n\ninterface Props {\n  embed: MetaData<any, any>;\n}\n\nconst UnknownEmbed = ({ embed }: Props) => {\n  const { t } = useTranslation();\n  return (\n    <Text color=\"text.error\" asChild consumeCss data-embed-type=\"unknown\">\n      <span>{t(\"embed.unsupported\", { type: embed.resource })}</span>\n    </Text>\n  );\n};\n\nexport default UnknownEmbed;\n"],"mappings":";;;;;;AAgBA,MAAM,eAAe,CAAC,EAAE,OAAc,KAAK;CACzC,MAAM,EAAE,GAAG,GAAG,mCAAgB;AAC9B,wBACE,2BAACA;EAAK,OAAM;EAAa;EAAQ;EAAW,mBAAgB;4BAC1D,2BAAC,oBAAM,EAAE,qBAAqB,EAAE,MAAM,MAAM,SAAU,EAAC,GAAQ;GAC1D;AAEV;AAED,2BAAe"}
+{"version":3,"file":"UnknownEmbed.js","names":["Text"],"sources":["../../src/Embed/UnknownEmbed.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 { useTranslation } from \"react-i18next\";\nimport { Text } from \"@ndla/primitives\";\nimport type { MetaData } from \"@ndla/types-embed\";\n\ninterface Props {\n  embed: MetaData<any, any>;\n}\n\nconst UnknownEmbed = ({ embed }: Props) => {\n  const { t } = useTranslation();\n  return (\n    <Text color=\"text.error\" asChild consumeCss data-embed-type=\"unknown\">\n      <span>{t(\"embed.unsupported\", { type: embed.resource })}</span>\n    </Text>\n  );\n};\n\nexport default UnknownEmbed;\n"],"mappings":";;;;;;;;;AAgBA,MAAM,gBAAgB,EAAE,YAAmB;CACzC,MAAM,EAAE,yCAAsB;AAC9B,QACE,2CAACA;EAAK,OAAM;EAAa;EAAQ;EAAW,mBAAgB;YAC1D,2CAAC,oBAAM,EAAE,qBAAqB,EAAE,MAAM,MAAM,UAAU,CAAC,GAAQ;GAC1D;;AAIX,2BAAe"}

package/lib/Embed/UuDisclaimerEmbed.js

@@ -1,11 +1,18 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
-const react = require_rolldown_runtime.__toESM(require("react"));
-const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
-const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
-const react_i18next = require_rolldown_runtime.__toESM(require("react-i18next"));
-const __ndla_icons = require_rolldown_runtime.__toESM(require("@ndla/icons"));
-const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
-const __ark_ui_react = require_rolldown_runtime.__toESM(require("@ark-ui/react"));
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let __ndla_primitives = require("@ndla/primitives");
+__ndla_primitives = require_rolldown_runtime.__toESM(__ndla_primitives);
+let __ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
+__ndla_styled_system_jsx = require_rolldown_runtime.__toESM(__ndla_styled_system_jsx);
+let react_i18next = require("react-i18next");
+react_i18next = require_rolldown_runtime.__toESM(react_i18next);
+let __ndla_icons = require("@ndla/icons");
+__ndla_icons = require_rolldown_runtime.__toESM(__ndla_icons);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+let __ark_ui_react = require("@ark-ui/react");
+__ark_ui_react = require_rolldown_runtime.__toESM(__ark_ui_react);
 
 //#region src/Embed/UuDisclaimerEmbed.tsx
 const DisclaimerWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
@@ -51,5 +58,5 @@ const UuDisclaimerEmbed = ({ embed, transformedDisclaimer, children }) => {
 var UuDisclaimerEmbed_default = UuDisclaimerEmbed;
 
 //#endregion
-exports.UuDisclaimerEmbed_default = UuDisclaimerEmbed_default;
+exports.default = UuDisclaimerEmbed_default;
 //# sourceMappingURL=UuDisclaimerEmbed.js.map

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 { type ReactNode } from \"react\";\nimport { useTranslation } from \"react-i18next\";\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\";\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\nconst 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\nexport default UuDisclaimerEmbed;\n"],"mappings":";;;;;;;;;;AAsBA,MAAM,oBAAoB,qCAAO,OAAO,EACtC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,OAAO;AACR,EACF,EAAC;AAEF,MAAM,mBAAmB,qCAAOA,8BAAY,EAC1C,MAAM,EACJ,WAAW,WACZ,EACF,EAAC;AAEF,MAAM,yBAAyB,qCAAOC,+BAAkB,EACtD,MAAM;CACJ,WAAW;CACX,MAAM;AACP,EACF,EAAC;AAEF,MAAM,uBAAuB,qCAAOC,kCAAgB,EAClD,MAAM;CACJ,OAAO;CACP,WAAW;CACX,WAAW;AACZ,EACF,EAAC;AAEF,MAAM,oBAAoB,CAAC,EAAE,OAAO,uBAAuB,UAAiB,KAAK;CAC/E,MAAM,EAAE,GAAG,GAAG,mCAAgB;AAC9B,KAAI,MAAM,WAAW,QACnB,wBACE,4BAAC,gDACC,2BAAC;EACC,cAAY,EAAE,oBAAoB,EAAE,MAAM,EAAE,wBAAwB,CAAE,EAAC;EACvE,OAAO,EAAE,oBAAoB,EAAE,MAAM,EAAE,wBAAwB,CAAE,EAAC;GAClE,EACD,YACiB;AAIxB,wBACE,4BAAC;EAAkB,MAAK;EAAS,mBAAgB;6BAC/C,4BAACC,4DACC,2BAACC;GAAe;6BACd,2BAAC;IACC,MAAK;IACL,SAAQ;IACR,cAAY,EAAE,qBAAqB;IACnC,OAAO,EAAE,qBAAqB;8BAE9B,2BAACC,mCAAoB;KACJ;IACJ,kBACjB,2BAACC,mDACC,2BAAC,kDACC,2BAAC,mBAAK,wBAA4B,GACb,GAChB,IACG,kBACd,2BAAC;GAAI,mBAAgB;GAAI;IAAe;GACtB;AAEvB;AAED,gCAAe"}
+{"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 { type ReactNode } from \"react\";\nimport { useTranslation } from \"react-i18next\";\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\";\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\nconst 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\nexport default UuDisclaimerEmbed;\n"],"mappings":";;;;;;;;;;;;;;;;;AAsBA,MAAM,yDAA2B,OAAO,EACtC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,OAAO;CACR,EACF,CAAC;AAEF,MAAM,wDAA0BA,8BAAY,EAC1C,MAAM,EACJ,WAAW,YACZ,EACF,CAAC;AAEF,MAAM,8DAAgCC,+BAAkB,EACtD,MAAM;CACJ,WAAW;CACX,MAAM;CACP,EACF,CAAC;AAEF,MAAM,4DAA8BC,kCAAgB,EAClD,MAAM;CACJ,OAAO;CACP,WAAW;CACX,WAAW;CACZ,EACF,CAAC;AAEF,MAAM,qBAAqB,EAAE,OAAO,uBAAuB,eAAsB;CAC/E,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,4CACC,2CAACC;GAAe;aACd,2CAAC;IACC,MAAK;IACL,SAAQ;IACR,cAAY,EAAE,qBAAqB;IACnC,OAAO,EAAE,qBAAqB;cAE9B,2CAACC,mCAAoB;KACJ;IACJ,EACjB,2CAACC,mCACC,2CAAC,kCACC,2CAAC,mBAAK,wBAA4B,GACb,GAChB,IACG,EACd,2CAAC;GAAI,mBAAgB;GAAI;IAAe;GACtB;;AAIxB,gCAAe"}

package/lib/FactBox/FactBox.js

@@ -1,10 +1,16 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
-const react = require_rolldown_runtime.__toESM(require("react"));
-const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
-const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
-const react_i18next = require_rolldown_runtime.__toESM(require("react-i18next"));
-const __ndla_icons = require_rolldown_runtime.__toESM(require("@ndla/icons"));
-const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let __ndla_primitives = require("@ndla/primitives");
+__ndla_primitives = require_rolldown_runtime.__toESM(__ndla_primitives);
+let __ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
+__ndla_styled_system_jsx = require_rolldown_runtime.__toESM(__ndla_styled_system_jsx);
+let react_i18next = require("react-i18next");
+react_i18next = require_rolldown_runtime.__toESM(react_i18next);
+let __ndla_icons = require("@ndla/icons");
+__ndla_icons = require_rolldown_runtime.__toESM(__ndla_icons);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/FactBox/FactBox.tsx
 const StyledAside = (0, __ndla_styled_system_jsx.styled)("aside", {
@@ -118,5 +124,5 @@ const FactBox = (0, react.forwardRef)(({ children, open, onOpenChange, defaultOp
 var FactBox_default = FactBox;
 
 //#endregion
-exports.FactBox_default$1 = FactBox_default;
+exports.default = FactBox_default;
 //# 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 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\";\nimport { ArrowDownShortLine } from \"@ndla/icons\";\nimport { IconButton } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\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\nconst 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\nexport default FactBox;\n"],"mappings":";;;;;;;;;AA8BA,MAAM,cAAc,qCAAO,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,MACnB;EACD,SAAS,EACP,QAAQ;GACN,UAAU;GACV,WAAW;EACZ,EACF;EACD,WAAW,EACT,WAAW,kBACZ;CACF;CACD,UAAU,EACR,gBAAgB,EACd,MAAM,EACJ,WAAW,EACT,UAAU,SACX,EACF,EACF,EACF;AACF,EAAC;AAEF,MAAM,gBAAgB,qCAAO,OAAO,EAClC,MAAM;CACJ,UAAU;CACV,OAAO;CAEP,kBAAkB,EAChB,kBAAkB,IACnB;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;CAChB;CACD,QAAQ;EACN,UAAU;EACV,QAAQ,EACN,SAAS,OACV;CACF;CACD,OAAO;EACL,iBAAiB;EACjB,QAAQ,EACN,SAAS,IACV;CACF;AACF,EACF,EAAC;AAEF,MAAM,mBAAmB,qCAAOA,8BAAY,EAC1C,MAAM;CACJ,UAAU;CACV,QAAQ;CACR,QAAQ;CACR,SAAS;EACP,oBAAoB;EACpB,0BAA0B;EAC1B,oBAAoB;CACrB;CACD,OAAO,EACL,SAAS,EACP,WAAW,iBACZ,EACF;CACD,QAAQ,EACN,SAAS,OACV;AACF,EACF,EAAC;AAIF,MAAM,UAAU,sBACd,CAAC,EAAE,UAAU,MAAM,cAAc,cAAc,MAAO,GAAG,MAAM,EAAE,QAAQ;CACvE,MAAM,EAAE,GAAG,GAAG,mCAAgB;CAC9B,MAAM,CAAC,OAAO,SAAS,GAAG,oBAA4B,cAAc,SAAS,SAAS;CACtF,MAAM,CAAC,gBAAgB,kBAAkB,GAAG,qBAAU,YAAY;CAClE,MAAM,YAAY,kBAAO;CAIzB,MAAM,iBAAiB,mBAAQ,MAAM;AACnC,SAAO,UAAU,WAAW,EAAE,cAAcC,cAAM,QAAQ,aAAa,OAAO,GAAI,IAAG,CAAE;CACxF,GAAE,CAAC,KAAM,EAAC;AAEX,sBAAU,MAAM;AACd,MAAI,gBACF,UAAS,OAAO,SAAS,SAAS;CAErC,GAAE,CAAC,IAAK,EAAC;CAEV,MAAM,UAAU,uBAAY,MAAM;EAChC,MAAM,WAAW,UAAU,SAAS,WAAW;AAC/C,WAAS,SAAS;AAClB,iBAAe,aAAa,OAAO;CACpC,GAAE,CAAC,OAAO,YAAa,EAAC;AAEzB,wBACE,4BAAC;EACC,cAAY;EACZ,mBAAgB;EAChB,GAAI;EACC;EACW;EAChB,mBAAmB,CAAC,MAAM;AACxB,OAAI,EAAE,WAAW,EAAE,iBAAiB,UAAU,SAC5C,mBAAkB,KAAK;EAE1B;EACD,iBAAiB,CAAC,MAAM;AACtB,OAAI,EAAE,WAAW,EAAE,iBAAiB,UAAU,OAC5C,mBAAkB,MAAM;EAE3B;6BAED,2BAAC;GACC,cAAY;GACH;GACT,iBAAiB;GACjB,iBAAe,UAAU;GACzB,iBAAe;GACf,cAAY,GAAG,UAAU,UAAU,SAAS,UAAU,OAAO,EAAE;6BAE/D,2BAACC,oCAAqB;IACL,kBACnB,2BAAC;GAAc,IAAI;GAAW,cAAY;GAAO,eAAa,UAAU;GAAU,GAAI;GACnF;IACa;GACJ;AAEjB,EACF;AAED,sBAAe"}
+{"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 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\";\nimport { ArrowDownShortLine } from \"@ndla/icons\";\nimport { IconButton } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\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\nconst 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\nexport default FactBox;\n"],"mappings":";;;;;;;;;;;;;;;AA8BA,MAAM,mDAAqB,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,qDAAuB,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,wDAA0BA,8BAAY,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,MAAM,iCACH,EAAE,UAAU,MAAM,cAAc,cAAc,MAAO,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,oCAAqB;IACL,EACnB,2CAAC;GAAc,IAAI;GAAW,cAAY;GAAO,eAAa,UAAU;GAAU,GAAI;GACnF;IACa;GACJ;EAGnB;AAED,sBAAe"}

package/lib/FileList/File.js

@@ -1,13 +1,21 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
-const require__Users_jec_code_ndla_frontend_packages_packages_ndla_ui_src_FileList_FileList = require('./FileList.js');
-const react = require_rolldown_runtime.__toESM(require("react"));
-const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
-const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
-const react_i18next = require_rolldown_runtime.__toESM(require("react-i18next"));
-const __ndla_icons = require_rolldown_runtime.__toESM(require("@ndla/icons"));
-const __ndla_safelink = require_rolldown_runtime.__toESM(require("@ndla/safelink"));
-const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
-const __ndla_styled_system_patterns = require_rolldown_runtime.__toESM(require("@ndla/styled-system/patterns"));
+const require_FileList = require('./FileList.js');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let __ndla_primitives = require("@ndla/primitives");
+__ndla_primitives = require_rolldown_runtime.__toESM(__ndla_primitives);
+let __ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
+__ndla_styled_system_jsx = require_rolldown_runtime.__toESM(__ndla_styled_system_jsx);
+let react_i18next = require("react-i18next");
+react_i18next = require_rolldown_runtime.__toESM(react_i18next);
+let __ndla_icons = require("@ndla/icons");
+__ndla_icons = require_rolldown_runtime.__toESM(__ndla_icons);
+let __ndla_safelink = require("@ndla/safelink");
+__ndla_safelink = require_rolldown_runtime.__toESM(__ndla_safelink);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+let __ndla_styled_system_patterns = require("@ndla/styled-system/patterns");
+__ndla_styled_system_patterns = require_rolldown_runtime.__toESM(__ndla_styled_system_patterns);
 
 //#region src/FileList/File.tsx
 const StyledSafeLink = (0, __ndla_styled_system_jsx.styled)(__ndla_safelink.SafeLink, { base: {
@@ -15,48 +23,52 @@ const StyledSafeLink = (0, __ndla_styled_system_jsx.styled)(__ndla_safelink.Safe
 	textDecoration: "underline",
 	_hover: { textDecoration: "none" }
 } });
-const StyledHStack = (0, __ndla_styled_system_jsx.styled)(__ndla_styled_system_jsx.HStack, { base: {
+const FileContainer = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "space-between",
 	position: "relative",
 	paddingBlock: "small",
 	paddingInlineEnd: "medium",
 	paddingInlineStart: "small",
 	width: "100%"
 } });
+const InfoContainer = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+	display: "flex",
+	gap: "xxsmall",
+	alignItems: "center"
+} });
 const File = (0, react.forwardRef)(({ title, url, fileExists, fileType, fileSize,...rest }, ref) => {
 	const { t } = (0, react_i18next.useTranslation)();
 	const filename = `${title}-${url.split("/").pop() ?? ""}`;
 	const downloadUrl = `${url}?download=${filename}`;
 	const tooltip = `${t("download")} ${filename}`;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledHStack, {
-		justify: "space-between",
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(FileContainer, {
 		ref,
 		...rest,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ndla_styled_system_jsx.HStack, {
-			gap: "xxsmall",
-			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.DownloadLine, {}),
-				fileExists ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledSafeLink, {
-					unstyled: true,
-					css: __ndla_styled_system_patterns.linkOverlay.raw(),
-					to: downloadUrl,
-					title: tooltip,
-					children: title
-				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Text, {
-					textStyle: "label.medium",
-					children: title
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Text, {
-					textStyle: "label.large",
-					asChild: true,
-					consumeCss: true,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
-						"(",
-						fileType?.toUpperCase(),
-						")"
-					] })
-				})
-			]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Text, {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(InfoContainer, { children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.DownloadLine, {}),
+			fileExists ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledSafeLink, {
+				unstyled: true,
+				css: __ndla_styled_system_patterns.linkOverlay.raw(),
+				to: downloadUrl,
+				title: tooltip,
+				children: title
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Text, {
+				textStyle: "label.medium",
+				children: title
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Text, {
+				textStyle: "label.large",
+				asChild: true,
+				consumeCss: true,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
+					"(",
+					fileType?.toUpperCase(),
+					")"
+				] })
+			})
+		] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Text, {
 			textStyle: "label.large",
 			asChild: true,
 			consumeCss: true,
@@ -64,7 +76,7 @@ const File = (0, react.forwardRef)(({ title, url, fileExists, fileType, fileSize
 		})]
 	});
 });
-const FileListElement = ({ title, url, fileExists, fileType, fileSize }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__Users_jec_code_ndla_frontend_packages_packages_ndla_ui_src_FileList_FileList.FileListItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(File, {
+const FileListElement = ({ title, url, fileExists, fileType, fileSize }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FileList.FileListItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(File, {
 	title,
 	url,
 	fileExists,

package/lib/FileList/File.js.map

@@ -1 +1 @@
-{"version":3,"file":"File.js","names":["SafeLink","HStack","DownloadLine","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 { type ComponentPropsWithRef, forwardRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { DownloadLine } from \"@ndla/icons\";\nimport { Text } from \"@ndla/primitives\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { HStack, styled } from \"@ndla/styled-system/jsx\";\nimport { linkOverlay } from \"@ndla/styled-system/patterns\";\nimport { FileListItem } from \".\";\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 StyledHStack = styled(HStack, {\n  base: {\n    position: \"relative\",\n    paddingBlock: \"small\",\n    paddingInlineEnd: \"medium\",\n    paddingInlineStart: \"small\",\n    width: \"100%\",\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=${filename}`;\n    const tooltip = `${t(\"download\")} ${filename}`;\n\n    return (\n      <StyledHStack justify=\"space-between\" ref={ref} {...rest}>\n        <HStack gap=\"xxsmall\">\n          <DownloadLine />\n          {fileExists ? (\n            <StyledSafeLink unstyled 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        </HStack>\n        <Text textStyle=\"label.large\" asChild consumeCss>\n          <span>{fileSize}</span>\n        </Text>\n      </StyledHStack>\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,iBAAiB,qCAAOA,0BAAU,EACtC,MAAM;CACJ,qBAAqB;CACrB,gBAAgB;CAChB,QAAQ,EACN,gBAAgB,OACjB;AACF,EACF,EAAC;AAEF,MAAM,eAAe,qCAAOC,iCAAQ,EAClC,MAAM;CACJ,UAAU;CACV,cAAc;CACd,kBAAkB;CAClB,oBAAoB;CACpB,OAAO;AACR,EACF,EAAC;AAEF,MAAa,OAAO,sBAClB,CAAC,EAAE,OAAO,KAAK,YAAY,UAAU,SAAU,GAAG,MAAM,EAAE,QAAQ;CAChE,MAAM,EAAE,GAAG,GAAG,mCAAgB;CAC9B,MAAM,YAAY,EAAE,MAAM,GAAG,IAAI,MAAM,IAAI,CAAC,KAAK,IAAI,GAAG;CACxD,MAAM,eAAe,EAAE,IAAI,YAAY,SAAS;CAChD,MAAM,WAAW,EAAE,EAAE,WAAW,CAAC,GAAG,SAAS;AAE7C,wBACE,4BAAC;EAAa,SAAQ;EAAqB;EAAK,GAAI;6BAClD,4BAACA;GAAO,KAAI;;oBACV,2BAACC,8BAAe;IACf,6BACC,2BAAC;KAAe;KAAS,KAAK,0CAAY,KAAK;KAAE,IAAI;KAAa,OAAO;eACtE;MACc,mBAEjB,2BAACC;KAAK,WAAU;eAAgB;MAAa;oBAE/C,2BAACA;KAAK,WAAU;KAAc;KAAQ;+BACpC,4BAAC;MAAK;MAAE,UAAU,aAAa;MAAC;SAAQ;MACnC;;IACA,kBACT,2BAACA;GAAK,WAAU;GAAc;GAAQ;6BACpC,2BAAC,oBAAM,WAAgB;IAClB;GACM;AAElB,EACF;AAED,MAAa,kBAAkB,CAAC,EAAE,OAAO,KAAK,YAAY,UAAU,UAAqB,qBACvF,2BAACC,gIACC,2BAAC;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 { type ComponentPropsWithRef, forwardRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\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 { 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=${filename}`;\n    const tooltip = `${t(\"download\")} ${filename}`;\n\n    return (\n      <FileContainer ref={ref} {...rest}>\n        <InfoContainer>\n          <DownloadLine />\n          {fileExists ? (\n            <StyledSafeLink unstyled 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,sDAAwBA,0BAAU,EACtC,MAAM;CACJ,qBAAqB;CACrB,gBAAgB;CAChB,QAAQ,EACN,gBAAgB,QACjB;CACF,EACF,CAAC;AAEF,MAAM,qDAAuB,OAAO,EAClC,MAAM;CACJ,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,UAAU;CACV,cAAc;CACd,kBAAkB;CAClB,oBAAoB;CACpB,OAAO;CACR,EACF,CAAC;AAEF,MAAM,qDAAuB,OAAO,EAClC,MAAM;CACJ,SAAS;CACT,KAAK;CACL,YAAY;CACb,EACF,CAAC;AAEF,MAAa,8BACV,EAAE,OAAO,KAAK,YAAY,UAAU,SAAU,GAAG,QAAQ,QAAQ;CAChE,MAAM,EAAE,yCAAsB;CAC9B,MAAM,WAAW,GAAG,MAAM,GAAG,IAAI,MAAM,IAAI,CAAC,KAAK,IAAI;CACrD,MAAM,cAAc,GAAG,IAAI,YAAY;CACvC,MAAM,UAAU,GAAG,EAAE,WAAW,CAAC,GAAG;AAEpC,QACE,4CAAC;EAAmB;EAAK,GAAI;aAC3B,4CAAC;GACC,2CAACC,8BAAe;GACf,aACC,2CAAC;IAAe;IAAS,KAAKC,0CAAY,KAAK;IAAE,IAAI;IAAa,OAAO;cACtE;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"}

package/lib/FileList/FileList.js

@@ -1,8 +1,12 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
-const react = require_rolldown_runtime.__toESM(require("react"));
-const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
-const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
-const __ark_ui_react = require_rolldown_runtime.__toESM(require("@ark-ui/react"));
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let __ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
+__ndla_styled_system_jsx = require_rolldown_runtime.__toESM(__ndla_styled_system_jsx);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+let __ark_ui_react = require("@ark-ui/react");
+__ark_ui_react = require_rolldown_runtime.__toESM(__ark_ui_react);
 
 //#region src/FileList/FileList.tsx
 const FileListWrapper = (0, __ndla_styled_system_jsx.styled)(__ark_ui_react.ark.ul, { base: {

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 { type ComponentPropsWithoutRef } from \"react\";\nimport { ark } from \"@ark-ui/react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\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,kBAAkB,qCAC7BA,mBAAI,IACJ,EACE,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,OAAO;AACR,EACF,GACD,EAAE,eAAe,KAAM,EACxB;AAED,MAAa,eAAe,qCAC1BA,mBAAI,IACJ,EACE,MAAM;CACJ,WAAW;CACX,YAAY;CACZ,gBAAgB;CAChB,aAAa;CACb,SAAS;CACT,gBAAgB;CAEhB,QAAQ,EACN,iBAAiB,2BAClB;AACF,EACF,GACD,EAAE,eAAe,KAAM,EACxB;AAED,MAAa,gBAAgB,CAAC,EAAE,SAAU,GAAG,MAAa,KAAK;AAC7D,wBACE,2BAAC;EAAgB,GAAI;EAAM,mBAAgB;EACxC;GACe;AAErB"}
+{"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 { type ComponentPropsWithoutRef } from \"react\";\nimport { ark } from \"@ark-ui/react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\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,uDACXA,mBAAI,IACJ,EACE,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,OAAO;CACR,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAED,MAAa,oDACXA,mBAAI,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,SAAU,GAAG,WAAkB;AAC7D,QACE,2CAAC;EAAgB,GAAI;EAAM,mBAAgB;EACxC;GACe"}

package/lib/FileList/PdfFile.js

@@ -1,7 +1,10 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
-const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
-const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
-const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+let __ndla_primitives = require("@ndla/primitives");
+__ndla_primitives = require_rolldown_runtime.__toESM(__ndla_primitives);
+let __ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
+__ndla_styled_system_jsx = require_rolldown_runtime.__toESM(__ndla_styled_system_jsx);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/FileList/PdfFile.tsx
 const StyledIframe = (0, __ndla_styled_system_jsx.styled)("iframe", { base: { width: "100%" } });

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,eAAe,qCAAO,UAAU,EACpC,MAAM,EACJ,OAAO,OACR,EACF,EAAC;AAEF,MAAM,oBAAoB,qCAAO,MAAM,EACrC,MAAM,EACJ,WAAW,OACZ,EACF,EAAC;AAEF,MAAM,eAAe,qCAAOA,0BAAQ,EAClC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;AACN,EACF,EAAC;AAEF,MAAa,UAAU,CAAC,EAAE,OAAO,KAAY,KAAK;AAChD,wBACE,2BAAC,+CACC,4BAAC,2CACC,2BAACC;EAAQ;EAAQ;EAAW,WAAU;4BACpC,2BAAC,kBAAI,QAAW;GACR,kBACV,2BAAC;EAAoB;EAAO,QAAO;EAAO,KAAK;GAAO,IACzC,GACG;AAEvB"}
+{"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,oDAAsB,UAAU,EACpC,MAAM,EACJ,OAAO,QACR,EACF,CAAC;AAEF,MAAM,yDAA2B,MAAM,EACrC,MAAM,EACJ,WAAW,QACZ,EACF,CAAC;AAEF,MAAM,oDAAsBA,0BAAQ,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"}

package/lib/Gloss/Gloss.js

@@ -1,26 +1,32 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
-const require__Users_jec_code_ndla_frontend_packages_packages_ndla_ui_src_AudioPlayer_SpeechControl = require('../AudioPlayer/SpeechControl.js');
-const require__Users_jec_code_ndla_frontend_packages_packages_ndla_ui_src_Gloss_GlossExample = require('./GlossExample.js');
-const react = require_rolldown_runtime.__toESM(require("react"));
-const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
-const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
-const html_react_parser = require_rolldown_runtime.__toESM(require("html-react-parser"));
-const react_i18next = require_rolldown_runtime.__toESM(require("react-i18next"));
-const __ndla_icons = require_rolldown_runtime.__toESM(require("@ndla/icons"));
-const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
-const __ark_ui_react = require_rolldown_runtime.__toESM(require("@ark-ui/react"));
+const require_SpeechControl = require('../AudioPlayer/SpeechControl.js');
+const require_GlossExample = require('./GlossExample.js');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let __ndla_primitives = require("@ndla/primitives");
+__ndla_primitives = require_rolldown_runtime.__toESM(__ndla_primitives);
+let __ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
+__ndla_styled_system_jsx = require_rolldown_runtime.__toESM(__ndla_styled_system_jsx);
+let html_react_parser = require("html-react-parser");
+html_react_parser = require_rolldown_runtime.__toESM(html_react_parser);
+let react_i18next = require("react-i18next");
+react_i18next = require_rolldown_runtime.__toESM(react_i18next);
+let __ndla_icons = require("@ndla/icons");
+__ndla_icons = require_rolldown_runtime.__toESM(__ndla_icons);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+let __ark_ui_react = require("@ark-ui/react");
+__ark_ui_react = require_rolldown_runtime.__toESM(__ark_ui_react);
 
 //#region src/Gloss/Gloss.tsx
 const getFilteredExamples = (glossData, exampleIds, exampleLangs) => {
 	if (exampleIds !== void 0 || exampleLangs !== void 0) {
 		const exampleIdsList = exampleIds?.toString()?.split(",") ?? [];
 		const exampleLangsList = exampleLangs?.split(",") ?? [];
-		const filteredExamples = glossData?.examples?.map((examples, i) => {
+		return (glossData?.examples?.map((examples, i) => {
 			if (exampleIdsList.includes(i.toString())) return examples.filter((e) => exampleLangsList.includes(e.language));
 			return [];
-		}) ?? [];
-		const examplesWithoutEmpty = filteredExamples.filter((el) => !!el.length);
-		return examplesWithoutEmpty;
+		}) ?? []).filter((el) => !!el.length);
 	}
 	return glossData?.examples ?? [];
 };
@@ -105,7 +111,7 @@ const Gloss = ({ title, glossData, audio, exampleIds, exampleLangs, variant }) =
 							children: t(`wordClass.${glossData.wordClass}`).toLowerCase()
 						})
 					})
-				] }), !!audio?.src && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__Users_jec_code_ndla_frontend_packages_packages_ndla_ui_src_AudioPlayer_SpeechControl.SpeechControl_default, {
+				] }), !!audio?.src && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SpeechControl.default, {
 					src: audio.src,
 					title: audio.title,
 					type: "gloss"
@@ -130,7 +136,7 @@ const Gloss = ({ title, glossData, audio, exampleIds, exampleLangs, variant }) =
 						})
 					})
 				})] }),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledAccordionItemContent, { children: filteredExamples.map((examples, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__Users_jec_code_ndla_frontend_packages_packages_ndla_ui_src_Gloss_GlossExample.GlossExample_default, {
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledAccordionItemContent, { children: filteredExamples.map((examples, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_GlossExample.default, {
 					examples,
 					originalLanguage: glossData.originalLanguage
 				}, `gloss-example-${index}`)) })
@@ -141,5 +147,5 @@ const Gloss = ({ title, glossData, audio, exampleIds, exampleLangs, variant }) =
 var Gloss_default = Gloss;
 
 //#endregion
-exports.Gloss_default = Gloss_default;
+exports.default = Gloss_default;
 //# sourceMappingURL=Gloss.js.map

package/lib/Gloss/Gloss.js.map

@@ -1 +1 @@
-{"version":3,"file":"Gloss.js","names":["glossData: IGlossDataDTO | undefined","exampleIds: string | undefined","exampleLangs: string | undefined","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 parse from \"html-react-parser\";\nimport { useMemo } from \"react\";\nimport { useTranslation } from \"react-i18next\";\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, IGlossDataDTO, IGlossExampleDTO } from \"@ndla/types-backend/concept-api\";\nimport GlossExample from \"./GlossExample\";\nimport SpeechControl from \"../AudioPlayer/SpeechControl\";\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: IGlossDataDTO | undefined,\n  exampleIds: string | undefined,\n  exampleLangs: string | undefined,\n): IGlossExampleDTO[][] => {\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?: IGlossDataDTO;\n  audio?: {\n    title: string;\n    src?: string;\n  };\n  exampleIds?: string;\n  exampleLangs?: string;\n}\n\nconst 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\")}>{t(`wordClass.${glossData.wordClass}`).toLowerCase()}</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\nexport default Gloss;\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 parse from \"html-react-parser\";\nimport { useMemo } from \"react\";\nimport { useTranslation } from \"react-i18next\";\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, IGlossDataDTO, IGlossExampleDTO } from \"@ndla/types-backend/concept-api\";\nimport GlossExample from \"./GlossExample\";\nimport SpeechControl from \"../AudioPlayer/SpeechControl\";\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: IGlossDataDTO | undefined,\n  exampleIds: string | undefined,\n  exampleLangs: string | undefined,\n): IGlossExampleDTO[][] => {\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?: IGlossDataDTO;\n  audio?: {\n    title: string;\n    src?: string;\n  };\n  exampleIds?: string;\n  exampleLangs?: string;\n}\n\nconst 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\")}>{t(`wordClass.${glossData.wordClass}`).toLowerCase()}</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\nexport default Gloss;\n"],"mappings":"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"}

package/lib/Gloss/GlossExample.js

@@ -1,8 +1,12 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
-const react = require_rolldown_runtime.__toESM(require("react"));
-const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
-const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
-const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let __ndla_primitives = require("@ndla/primitives");
+__ndla_primitives = require_rolldown_runtime.__toESM(__ndla_primitives);
+let __ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
+__ndla_styled_system_jsx = require_rolldown_runtime.__toESM(__ndla_styled_system_jsx);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/Gloss/GlossExample.tsx
 const StyledGlossExample = (0, __ndla_styled_system_jsx.styled)("div", { base: {
@@ -43,5 +47,5 @@ const GlossExample = ({ examples, originalLanguage }) => {
 var GlossExample_default = GlossExample;
 
 //#endregion
-exports.GlossExample_default = GlossExample_default;
+exports.default = GlossExample_default;
 //# sourceMappingURL=GlossExample.js.map

package/lib/Gloss/GlossExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"GlossExample.js","names":["Text","examples","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 { Fragment } from \"react\";\nimport { Text } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { IGlossExampleDTO } from \"@ndla/types-backend/concept-api\";\n\ninterface Props {\n  examples: IGlossExampleDTO[];\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\nconst 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\nexport default GlossExample;\n"],"mappings":";;;;;;;AAkBA,MAAM,qBAAqB,qCAAO,OAAO,EACvC,MAAM;CACJ,WAAW;CACX,aAAa;CACb,cAAc;CACd,eAAe;CACf,QAAQ;EACN,YAAY;EACZ,aAAa;EACb,OAAO,EACL,YAAY,OACb;CACF;AACF,EACF,EAAC;AAEF,MAAM,aAAa,qCAAOA,wBAAM,EAC9B,MAAM,EACJ,WAAW,SACZ,EACF,EAAC;AAEF,MAAM,eAAe,CAAC,EAAE,UAAU,kBAAyB,KAAK;AAC9D,wBACE,2BAAC,mBACE,SAAS,IAAI,CAACC,YAAU,0BACvB,4BAACC;kBACC,2BAAC;GAAmB,MAAMD,WAAS;6BACjC,2BAACD;IAAK,WAAU;IAAe,MAAMC,WAAS;cAC3CA,WAAS;KACL;IACY;IAClBA,WAAS,eAAe,0BACzB,2BAAC,gDACC,2BAAC;GAAW,eAAY;GAAG,MAAM;GAAkB,WAAU;aAC1DA,WAAS,gBAAgB;IACf,GACM;IAEpBA,WAAS,gBAAgB,+BAC1B,2BAAC,gDACC,2BAACD;GAAK,WAAU;GAAe,MAAM;aAClCC,WAAS,eAAe;IACpB,GACY;MAlBV,MAoBJ,CACX,GACE;AAET;AAED,2BAAe"}
+{"version":3,"file":"GlossExample.js","names":["Text","Fragment","examples"],"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 { Fragment } from \"react\";\nimport { Text } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { IGlossExampleDTO } from \"@ndla/types-backend/concept-api\";\n\ninterface Props {\n  examples: IGlossExampleDTO[];\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\nconst 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\nexport default GlossExample;\n"],"mappings":";;;;;;;;;;;AAkBA,MAAM,0DAA4B,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,kDAAoBA,wBAAM,EAC9B,MAAM,EACJ,WAAW,UACZ,EACF,CAAC;AAEF,MAAM,gBAAgB,EAAE,UAAU,uBAA8B;AAC9D,QACE,2CAAC,mBACE,SAAS,KAAK,YAAU,UACvB,4CAACC;EACC,2CAAC;GAAmB,MAAMC,WAAS;aACjC,2CAACF;IAAK,WAAU;IAAe,MAAME,WAAS;cAC3CA,WAAS;KACL;IACY;EACpB,CAAC,CAACA,WAAS,eAAe,UACzB,2CAAC,gCACC,2CAAC;GAAW,eAAY;GAAG,MAAM;GAAkB,WAAU;aAC1DA,WAAS,gBAAgB;IACf,GACM;EAEtB,CAAC,CAACA,WAAS,gBAAgB,eAC1B,2CAAC,gCACC,2CAACF;GAAK,WAAU;GAAe,MAAM;aAClCE,WAAS,eAAe;IACpB,GACY;MAlBV,MAoBJ,CACX,GACE;;AAIV,2BAAe"}

package/lib/Grid/Grid.js

@@ -1,7 +1,10 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
-const react = require_rolldown_runtime.__toESM(require("react"));
-const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
-const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let __ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
+__ndla_styled_system_jsx = require_rolldown_runtime.__toESM(__ndla_styled_system_jsx);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/Grid/Grid.tsx
 const GridContainer = (0, __ndla_styled_system_jsx.styled)("div", {

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 { type ComponentProps, type ReactNode } from \"react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\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    backgroundColor: \"background.subtle\",\n    minWidth: \"surface.xxsmall\",\n    gridTemplateColumns: \"repeat(2, minmax(0, 1fr))\",\n\n    \"& :not(div[data-parallax-cell='true']) > 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    background: {\n      white: { backgroundColor: \"surface.default\" },\n      transparent: { backgroundColor: \"transparent\" },\n      gray: { backgroundColor: \"background.subtle\" },\n    },\n    border: {\n      lightBlue: {\n        padding: \"xsmall\",\n        border: \"1px solid\",\n        borderColor: \"surface.brand.2\",\n      },\n    },\n  },\n});\n\nexport interface GridProps extends ComponentProps<\"div\"> {\n  columns: \"2\" | \"3\" | \"4\" | \"2x2\";\n  border?: \"none\" | \"lightBlue\";\n  background?: \"transparent\" | \"white\" | \"gray\";\n  children?: ReactNode[];\n}\n\nexport const Grid = ({ columns, border, children, background = \"gray\", ...rest }: GridProps) => {\n  const amountOfColumns = children?.length === 3 ? \"3\" : columns;\n\n  return (\n    <GridContainer\n      data-embed-type=\"grid\"\n      border={border === \"none\" ? undefined : border}\n      columns={amountOfColumns}\n      background={background}\n      {...rest}\n    >\n      {children}\n    </GridContainer>\n  );\n};\n"],"mappings":";;;;;;AAWA,MAAM,gBAAgB,qCAAO,OAAO;CAClC,MAAM;EACJ,SAAS;EACT,gBAAgB;EAChB,cAAc;EACd,YAAY;EACZ,eAAe;EACf,OAAO;EACP,iBAAiB;EACjB,UAAU;EACV,qBAAqB;EAErB,yEAAyE;GACvE,QAAQ;GACR,mBAAmB,EACjB,WAAW,OACZ;EACF;EACD,YAAY,EACV,qBAAqB,4BACtB;EACD,iBAAiB;GACf,qBAAqB;GACrB,mCAAmC;IACjC,SAAS;IACT,UAAU;IACV,gBAAgB;IAChB,YAAY;IACZ,YAAY;GACb;EACF;CACF;CACD,UAAU;EACR,SAAS;GACP,KAAK,CAAE;GACP,OAAO,CAAE;GACT,KAAK,EAAE,SAAS,EAAE,qBAAqB,4BAA6B,EAAE;GACtE,KAAK,EAAE,SAAS,EAAE,qBAAqB,4BAA6B,EAAE;EACvE;EACD,YAAY;GACV,OAAO,EAAE,iBAAiB,kBAAmB;GAC7C,aAAa,EAAE,iBAAiB,cAAe;GAC/C,MAAM,EAAE,iBAAiB,oBAAqB;EAC/C;EACD,QAAQ,EACN,WAAW;GACT,SAAS;GACT,QAAQ;GACR,aAAa;EACd,EACF;CACF;AACF,EAAC;AASF,MAAa,OAAO,CAAC,EAAE,SAAS,QAAQ,UAAU,aAAa,OAAQ,GAAG,MAAiB,KAAK;CAC9F,MAAM,kBAAkB,UAAU,WAAW,IAAI,MAAM;AAEvD,wBACE,2BAAC;EACC,mBAAgB;EAChB,QAAQ,WAAW,kBAAqB;EACxC,SAAS;EACG;EACZ,GAAI;EAEH;GACa;AAEnB"}
+{"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 { type ComponentProps, type ReactNode } from \"react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\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    backgroundColor: \"background.subtle\",\n    minWidth: \"surface.xxsmall\",\n    gridTemplateColumns: \"repeat(2, minmax(0, 1fr))\",\n\n    \"& :not(div[data-parallax-cell='true']) > 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    background: {\n      white: { backgroundColor: \"surface.default\" },\n      transparent: { backgroundColor: \"transparent\" },\n      gray: { backgroundColor: \"background.subtle\" },\n    },\n    border: {\n      lightBlue: {\n        padding: \"xsmall\",\n        border: \"1px solid\",\n        borderColor: \"surface.brand.2\",\n      },\n    },\n  },\n});\n\nexport interface GridProps extends ComponentProps<\"div\"> {\n  columns: \"2\" | \"3\" | \"4\" | \"2x2\";\n  border?: \"none\" | \"lightBlue\";\n  background?: \"transparent\" | \"white\" | \"gray\";\n  children?: ReactNode[];\n}\n\nexport const Grid = ({ columns, border, children, background = \"gray\", ...rest }: GridProps) => {\n  const amountOfColumns = children?.length === 3 ? \"3\" : columns;\n\n  return (\n    <GridContainer\n      data-embed-type=\"grid\"\n      border={border === \"none\" ? undefined : border}\n      columns={amountOfColumns}\n      background={background}\n      {...rest}\n    >\n      {children}\n    </GridContainer>\n  );\n};\n"],"mappings":";;;;;;;;;AAWA,MAAM,qDAAuB,OAAO;CAClC,MAAM;EACJ,SAAS;EACT,gBAAgB;EAChB,cAAc;EACd,YAAY;EACZ,eAAe;EACf,OAAO;EACP,iBAAiB;EACjB,UAAU;EACV,qBAAqB;EAErB,yEAAyE;GACvE,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,YAAY;GACV,OAAO,EAAE,iBAAiB,mBAAmB;GAC7C,aAAa,EAAE,iBAAiB,eAAe;GAC/C,MAAM,EAAE,iBAAiB,qBAAqB;GAC/C;EACD,QAAQ,EACN,WAAW;GACT,SAAS;GACT,QAAQ;GACR,aAAa;GACd,EACF;EACF;CACF,CAAC;AASF,MAAa,QAAQ,EAAE,SAAS,QAAQ,UAAU,aAAa,OAAQ,GAAG,WAAsB;CAC9F,MAAM,kBAAkB,UAAU,WAAW,IAAI,MAAM;AAEvD,QACE,2CAAC;EACC,mBAAgB;EAChB,QAAQ,WAAW,SAAS,SAAY;EACxC,SAAS;EACG;EACZ,GAAI;EAEH;GACa"}