@ndla/ui 56.0.35-alpha.0 → 56.0.36-alpha.0

package/dist/panda.buildinfo.json

@@ -131,7 +131,8 @@
       "gridTemplateColumns]___[value:minmax(230px, 455px) auto]___[cond:@supports not (container-type: inline-size)<___>tabletWide",
       "gridTemplateColumns]___[value:auto minmax(230px, 455px)]___[cond:@/tablet",
       "gridTemplateColumns]___[value:auto minmax(230px, 455px)]___[cond:@supports not (container-type: inline-size)<___>tabletWide",
-      "fontWeight]___[value:bold",
+      "backgroundColor]___[value:surface.brand.1",
+      "backgroundColor]___[value:surface.brand.3",
       "height]___[value:215px",
       "height]___[value:340px]___[cond:@/tablet",
       "height]___[value:265px]___[cond:@supports not (container-type: inline-size)<___>tablet",
@@ -241,15 +242,15 @@
       "marginInlineStart]___[value:xsmall",
       "height]___[value:auto",
       "textStyle]___[value:label.large",
+      "fontWeight]___[value:bold",
       "marginBlockStart]___[value:xsmall]___[cond:& > *:not(:where(:first-child))",
       "width]___[value:surface.xlarge",
       "maxHeight]___[value:50vh",
       "overflowY]___[value:auto",
-      "backgroundColor]___[value:surface.disabled",
-      "fill]___[value:text.subtle]___[cond:& svg",
-      "height]___[value:90%]___[cond:& svg",
-      "width]___[value:90%]___[cond:& svg",
-      "height]___[value:surface.3xsmall]___[cond:&[data-embed-type='audio']",
+      "background]___[value:background.subtle",
+      "height]___[value:5xlarge]___[cond:& svg",
+      "width]___[value:5xlarge]___[cond:& svg",
+      "fill]___[value:stroke.default]___[cond:& svg",
       "marginBlockStart]___[value:3xsmall]___[cond:& > *:not(:first-child)",
       "height]___[value:auto]___[cond:& iframe",
       "width]___[value:100%]___[cond:& iframe",

package/dist/styles.css

@@ -498,6 +498,10 @@
     max-height: 50vh;
 }
 
+  .bg_background\.subtle {
+    background: var(--colors-background-subtle);
+}
+
   .z_docked {
     z-index: var(--z-index-docked);
 }
@@ -705,8 +709,12 @@
     grid-template-columns: 1fr;
 }
 
-  .fw_bold {
-    font-weight: var(--font-weights-bold);
+  .bg-c_surface\.brand\.1 {
+    background-color: var(--colors-surface-brand-1);
+}
+
+  .bg-c_surface\.brand\.3 {
+    background-color: var(--colors-surface-brand-3);
 }
 
   .bd-l-c_stroke\.default {
@@ -745,12 +753,12 @@
     top: calc(var(--spacing-4xsmall) * -1);
 }
 
-  .ov-y_auto {
-    overflow-y: auto;
+  .fw_bold {
+    font-weight: var(--font-weights-bold);
 }
 
-  .bg-c_surface\.disabled {
-    background-color: var(--colors-surface-disabled);
+  .ov-y_auto {
+    overflow-y: auto;
 }
 
   .top_xsmall {
@@ -1059,20 +1067,16 @@
     margin-block-start: var(--spacing-xsmall);
 }
 
-  .\[\&_svg\]\:fill_text\.subtle svg {
-    fill: var(--colors-text-subtle);
-}
-
-  .\[\&_svg\]\:h_90\% svg {
-    height: 90%;
+  .\[\&_svg\]\:h_5xlarge svg {
+    height: var(--sizes-5xlarge);
 }
 
-  .\[\&_svg\]\:w_90\% svg {
-    width: 90%;
+  .\[\&_svg\]\:w_5xlarge svg {
+    width: var(--sizes-5xlarge);
 }
 
-  .\[\&\[data-embed-type\=\'audio\'\]\]\:h_surface\.3xsmall[data-embed-type='audio'] {
-    height: var(--sizes-surface-3xsmall);
+  .\[\&_svg\]\:fill_stroke\.default svg {
+    fill: var(--colors-stroke-default);
 }
 
   .\[\&_\>_\*\:not\(\:first-child\)\]\:mbs_3xsmall > *:not(:first-child) {

package/es/CampaignBlock/CampaignBlock.js

@@ -9,7 +9,7 @@
 import parse from "html-react-parser";
 import { ArrowRightLine } from "@ndla/icons/common";
 import { Text } from "@ndla/primitives";
-import { SafeLink } from "@ndla/safelink";
+import { SafeLinkButton } from "@ndla/safelink";
 import { styled } from "@ndla/styled-system/jsx";
 import { getPossiblyRelativeUrl } from "../utils/relativeUrl";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -24,7 +24,6 @@ const Container = styled("div", {
   base: {
     display: "grid",
     gridTemplateColumns: "1fr",
-    gap: "medium",
     border: "1px solid",
     borderColor: "stroke.default",
     backgroundColor: "background.default",
@@ -54,31 +53,20 @@ const Container = styled("div", {
           }
         }
       }
+    },
+    background: {
+      neutral: {},
+      brand1: {
+        backgroundColor: "surface.brand.1"
+      },
+      brand3: {
+        backgroundColor: "surface.brand.3"
+      }
     }
   },
   defaultVariants: {
-    imageSide: "left"
-  }
-});
-const LinkText = styled(Text, {
-  base: {
-    display: "flex",
-    gap: "xxsmall",
-    textDecoration: "underline",
-    _hover: {
-      textDecoration: "none"
-    },
-    paddingBlock: "xsmall",
-    fontWeight: "bold"
-  }
-});
-const LinkHeader = styled(Text, {
-  base: {
-    display: "flex",
-    textDecoration: "underline",
-    _hover: {
-      textDecoration: "none"
-    }
+    imageSide: "left",
+    background: "neutral"
   }
 });
 const StyledImg = styled("img", {
@@ -96,7 +84,8 @@ const StyledImg = styled("img", {
       tabletWide: {
         height: "340px"
       }
-    }
+    },
+    backgroundColor: "background.default"
   }
 });
 const ContentWrapper = styled("div", {
@@ -108,7 +97,8 @@ const ContentWrapper = styled("div", {
     alignItems: "flex-start",
     justifyContent: "center",
     paddingBlock: "medium",
-    paddingInline: "medium"
+    paddingInline: "medium",
+    position: "relative"
   }
 });
 const StyledText = styled(Text, {
@@ -122,19 +112,24 @@ const StyledText = styled(Text, {
     }
   }
 });
-const StyledSafeLink = styled(SafeLink, {
+const StyledSafeLinkButton = styled(SafeLinkButton, {
   base: {
-    color: "inherit"
+    boxShadow: "full",
+    border: "1px solid",
+    borderColor: "stroke.default"
   }
 });
-const MaybeLinkText = _ref => {
+const LinkButton = _ref => {
   let {
     url,
     children,
     path
   } = _ref;
-  if (url) return /*#__PURE__*/_jsx(StyledSafeLink, {
+  if (url) return /*#__PURE__*/_jsx(StyledSafeLinkButton, {
     to: getPossiblyRelativeUrl(url, path),
+    target: "_blank",
+    variant: "secondary",
+    rel: "noopener noreferrer",
     children: children
   });
   return children;
@@ -148,7 +143,8 @@ const CampaignBlock = _ref2 => {
     headingLevel: InternalHeading = "h2",
     url,
     path,
-    className
+    className,
+    background
   } = _ref2;
   const imageComponent = image && /*#__PURE__*/_jsx(StyledImg, {
     src: `${image.src}?width=455`,
@@ -156,34 +152,27 @@ const CampaignBlock = _ref2 => {
     width: 455,
     alt: image.alt
   });
-  const HeaderComponent = url?.url ? LinkHeader : Text;
   return /*#__PURE__*/_jsx(Wrapper, {
     children: /*#__PURE__*/_jsxs(Container, {
       className: className,
       "data-embed-type": "campaign-block",
       imageSide: imageSide,
+      background: background,
       children: [imageSide === "left" && imageComponent, /*#__PURE__*/_jsxs(ContentWrapper, {
-        children: [/*#__PURE__*/_jsx(MaybeLinkText, {
-          url: url?.url,
-          path: path,
-          children: /*#__PURE__*/_jsx(HeaderComponent, {
-            asChild: true,
-            consumeCss: true,
-            textStyle: "heading.small",
-            children: /*#__PURE__*/_jsx(InternalHeading, {
-              children: parse(title)
-            })
+        children: [/*#__PURE__*/_jsx(Text, {
+          asChild: true,
+          consumeCss: true,
+          textStyle: "heading.small",
+          children: /*#__PURE__*/_jsx(InternalHeading, {
+            children: parse(title)
           })
         }), /*#__PURE__*/_jsx(StyledText, {
           textStyle: "body.xlarge",
           children: parse(description)
-        }), !!url?.url && /*#__PURE__*/_jsx(MaybeLinkText, {
+        }), !!url?.url && /*#__PURE__*/_jsxs(LinkButton, {
           url: url.url,
           path: path,
-          children: /*#__PURE__*/_jsxs(LinkText, {
-            textStyle: "body.medium",
-            children: [parse(url.text ?? ""), /*#__PURE__*/_jsx(ArrowRightLine, {})]
-          })
+          children: [parse(url.text ?? ""), /*#__PURE__*/_jsx(ArrowRightLine, {})]
         })]
       }), imageSide !== "left" && imageComponent]
     })

package/es/Embed/CodeEmbed.js

@@ -13,9 +13,8 @@ import { CheckLine } from "@ndla/icons/editor";
 import { Button, Figure } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import { copyTextToClipboard } from "@ndla/util";
+import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
 import { CodeBlock, codeLanguageOptions } from "../CodeBlock";
-
-// TODO: We need an error state for this
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const StyledFigCaption = styled("figcaption", {
   base: {
@@ -55,6 +54,11 @@ const CodeEmbed = _ref => {
       };
     }
   }, [isCopied]);
+  if (embed.status === "error") {
+    return /*#__PURE__*/_jsx(EmbedErrorPlaceholder, {
+      type: "code"
+    });
+  }
   return /*#__PURE__*/_jsxs(StyledFigure, {
     "data-embed-type": "code-block",
     children: [/*#__PURE__*/_jsx(StyledFigCaption, {

package/es/Embed/ConceptEmbed.js

@@ -40,6 +40,7 @@ export const ConceptEmbed = _ref => {
     });
   }
   if (embed.status === "error") {
+    // TODO: This could be either concept or gloss. We don't know if it errors out. :)
     return /*#__PURE__*/_jsx(EmbedErrorPlaceholder, {
       type: "gloss"
     });

package/es/Embed/EmbedErrorPlaceholder.js

@@ -6,7 +6,7 @@
  *
  */
 
-import { AlertLine } from "@ndla/icons/common";
+import { Report } from "@ndla/icons/common";
 import { Figure } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import { EmbedByline } from "../LicenseByline";
@@ -16,16 +16,15 @@ const ErrorPlaceholder = styled("div", {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    backgroundColor: "surface.disabled",
+    background: "background.subtle",
     height: "surface.xsmall",
+    border: "1px solid",
+    borderColor: "stroke.default",
     borderRadius: "xsmall",
     "& svg": {
-      fill: "text.subtle",
-      height: "90%",
-      width: "90%"
-    },
-    "&[data-embed-type='audio']": {
-      height: "surface.3xsmall"
+      height: "5xlarge",
+      width: "5xlarge",
+      fill: "stroke.default"
     }
   }
 });
@@ -49,7 +48,7 @@ const EmbedErrorPlaceholder = _ref => {
     "data-embed-type": type,
     children: [children ?? /*#__PURE__*/_jsx(ErrorPlaceholder, {
       "data-embed-type": type,
-      children: /*#__PURE__*/_jsx(AlertLine, {})
+      children: /*#__PURE__*/_jsx(Report, {})
     }), /*#__PURE__*/_jsx(EmbedByline, {
       error: true,
       type: type

package/es/locale/messages-en.js

@@ -1393,7 +1393,8 @@ const messages = {
       h5p: "H5P",
       external: "External resource",
       gloss: "Gloss",
-      copyright: "Text"
+      copyright: "Text",
+      code: "Code block"
     }
   },
   gloss: {

package/es/locale/messages-nb.js

@@ -1393,7 +1393,8 @@ const messages = {
       h5p: "H5P",
       external: "Ekstern ressurs",
       gloss: "Glose",
-      copyright: "Tekst"
+      copyright: "Tekst",
+      code: "Kodeblokk"
     }
   },
   gloss: {

package/es/locale/messages-nn.js

@@ -1393,7 +1393,8 @@ const messages = {
       h5p: "H5P",
       external: "Ekstern ressurs",
       gloss: "Glose",
-      copyright: "Tekst"
+      copyright: "Tekst",
+      code: "Kodeblokk"
     }
   },
   gloss: {

package/es/locale/messages-se.js

@@ -1393,7 +1393,8 @@ const messages = {
       h5p: "H5P",
       external: "Olgguldas resursa",
       gloss: "Glose",
-      copyright: "Tekst"
+      copyright: "Tekst",
+      code: "Kodeblokk"
     }
   },
   gloss: {

package/es/locale/messages-sma.js

@@ -1393,7 +1393,8 @@ const messages = {
       h5p: "H5P",
       external: "Ekstern ressurs",
       gloss: "Glosa",
-      copyright: "Tekst"
+      copyright: "Tekst",
+      code: "Kodeblokk"
     }
   },
   gloss: {

package/lib/CampaignBlock/CampaignBlock.d.ts

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
+import { CampaignBlockEmbedData } from "@ndla/types-embed";
 import { HeadingLevel } from "../types";
 interface Image {
     src: string;
@@ -19,9 +20,10 @@ interface Props {
         text?: string;
     };
     image?: Image;
-    imageSide?: "left" | "right";
+    imageSide?: CampaignBlockEmbedData["imageSide"];
     className?: string;
     path?: string;
+    background?: CampaignBlockEmbedData["background"];
 }
-declare const CampaignBlock: ({ title, image, imageSide, description, headingLevel: InternalHeading, url, path, className, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const CampaignBlock: ({ title, image, imageSide, description, headingLevel: InternalHeading, url, path, className, background, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default CampaignBlock;

package/lib/CampaignBlock/CampaignBlock.js

@@ -31,7 +31,6 @@ const Container = (0, _jsx2.styled)("div", {
   base: {
     display: "grid",
     gridTemplateColumns: "1fr",
-    gap: "medium",
     border: "1px solid",
     borderColor: "stroke.default",
     backgroundColor: "background.default",
@@ -61,31 +60,20 @@ const Container = (0, _jsx2.styled)("div", {
           }
         }
       }
+    },
+    background: {
+      neutral: {},
+      brand1: {
+        backgroundColor: "surface.brand.1"
+      },
+      brand3: {
+        backgroundColor: "surface.brand.3"
+      }
     }
   },
   defaultVariants: {
-    imageSide: "left"
-  }
-});
-const LinkText = (0, _jsx2.styled)(_primitives.Text, {
-  base: {
-    display: "flex",
-    gap: "xxsmall",
-    textDecoration: "underline",
-    _hover: {
-      textDecoration: "none"
-    },
-    paddingBlock: "xsmall",
-    fontWeight: "bold"
-  }
-});
-const LinkHeader = (0, _jsx2.styled)(_primitives.Text, {
-  base: {
-    display: "flex",
-    textDecoration: "underline",
-    _hover: {
-      textDecoration: "none"
-    }
+    imageSide: "left",
+    background: "neutral"
   }
 });
 const StyledImg = (0, _jsx2.styled)("img", {
@@ -103,7 +91,8 @@ const StyledImg = (0, _jsx2.styled)("img", {
       tabletWide: {
         height: "340px"
       }
-    }
+    },
+    backgroundColor: "background.default"
   }
 });
 const ContentWrapper = (0, _jsx2.styled)("div", {
@@ -115,7 +104,8 @@ const ContentWrapper = (0, _jsx2.styled)("div", {
     alignItems: "flex-start",
     justifyContent: "center",
     paddingBlock: "medium",
-    paddingInline: "medium"
+    paddingInline: "medium",
+    position: "relative"
   }
 });
 const StyledText = (0, _jsx2.styled)(_primitives.Text, {
@@ -129,19 +119,24 @@ const StyledText = (0, _jsx2.styled)(_primitives.Text, {
     }
   }
 });
-const StyledSafeLink = (0, _jsx2.styled)(_safelink.SafeLink, {
+const StyledSafeLinkButton = (0, _jsx2.styled)(_safelink.SafeLinkButton, {
   base: {
-    color: "inherit"
+    boxShadow: "full",
+    border: "1px solid",
+    borderColor: "stroke.default"
   }
 });
-const MaybeLinkText = _ref => {
+const LinkButton = _ref => {
   let {
     url,
     children,
     path
   } = _ref;
-  if (url) return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledSafeLink, {
+  if (url) return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledSafeLinkButton, {
     to: (0, _relativeUrl.getPossiblyRelativeUrl)(url, path),
+    target: "_blank",
+    variant: "secondary",
+    rel: "noopener noreferrer",
     children: children
   });
   return children;
@@ -155,7 +150,8 @@ const CampaignBlock = _ref2 => {
     headingLevel: InternalHeading = "h2",
     url,
     path,
-    className
+    className,
+    background
   } = _ref2;
   const imageComponent = image && /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledImg, {
     src: `${image.src}?width=455`,
@@ -163,34 +159,27 @@ const CampaignBlock = _ref2 => {
     width: 455,
     alt: image.alt
   });
-  const HeaderComponent = url?.url ? LinkHeader : _primitives.Text;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
       className: className,
       "data-embed-type": "campaign-block",
       imageSide: imageSide,
+      background: background,
       children: [imageSide === "left" && imageComponent, /*#__PURE__*/(0, _jsxRuntime.jsxs)(ContentWrapper, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(MaybeLinkText, {
-          url: url?.url,
-          path: path,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(HeaderComponent, {
-            asChild: true,
-            consumeCss: true,
-            textStyle: "heading.small",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalHeading, {
-              children: (0, _htmlReactParser.default)(title)
-            })
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Text, {
+          asChild: true,
+          consumeCss: true,
+          textStyle: "heading.small",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalHeading, {
+            children: (0, _htmlReactParser.default)(title)
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledText, {
           textStyle: "body.xlarge",
           children: (0, _htmlReactParser.default)(description)
-        }), !!url?.url && /*#__PURE__*/(0, _jsxRuntime.jsx)(MaybeLinkText, {
+        }), !!url?.url && /*#__PURE__*/(0, _jsxRuntime.jsxs)(LinkButton, {
           url: url.url,
           path: path,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(LinkText, {
-            textStyle: "body.medium",
-            children: [(0, _htmlReactParser.default)(url.text ?? ""), /*#__PURE__*/(0, _jsxRuntime.jsx)(_common.ArrowRightLine, {})]
-          })
+          children: [(0, _htmlReactParser.default)(url.text ?? ""), /*#__PURE__*/(0, _jsxRuntime.jsx)(_common.ArrowRightLine, {})]
         })]
       }), imageSide !== "left" && imageComponent]
     })

package/lib/Embed/CodeEmbed.js

@@ -11,8 +11,10 @@ var _editor = require("@ndla/icons/editor");
 var _primitives = require("@ndla/primitives");
 var _jsx2 = require("@ndla/styled-system/jsx");
 var _util = require("@ndla/util");
+var _EmbedErrorPlaceholder = _interopRequireDefault(require("./EmbedErrorPlaceholder"));
 var _CodeBlock = require("../CodeBlock");
 var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
  * Copyright (c) 2023-present, NDLA.
  *
@@ -21,8 +23,6 @@ var _jsxRuntime = require("react/jsx-runtime");
  *
  */
 
-// TODO: We need an error state for this
-
 const StyledFigCaption = (0, _jsx2.styled)("figcaption", {
   base: {
     textStyle: "label.large",
@@ -61,6 +61,11 @@ const CodeEmbed = _ref => {
       };
     }
   }, [isCopied]);
+  if (embed.status === "error") {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_EmbedErrorPlaceholder.default, {
+      type: "code"
+    });
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledFigure, {
     "data-embed-type": "code-block",
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledFigCaption, {

package/lib/Embed/ConceptEmbed.js

@@ -47,6 +47,7 @@ const ConceptEmbed = _ref => {
     });
   }
   if (embed.status === "error") {
+    // TODO: This could be either concept or gloss. We don't know if it errors out. :)
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_EmbedErrorPlaceholder.default, {
       type: "gloss"
     });

package/lib/Embed/EmbedErrorPlaceholder.js

@@ -22,16 +22,15 @@ const ErrorPlaceholder = (0, _jsx2.styled)("div", {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    backgroundColor: "surface.disabled",
+    background: "background.subtle",
     height: "surface.xsmall",
+    border: "1px solid",
+    borderColor: "stroke.default",
     borderRadius: "xsmall",
     "& svg": {
-      fill: "text.subtle",
-      height: "90%",
-      width: "90%"
-    },
-    "&[data-embed-type='audio']": {
-      height: "surface.3xsmall"
+      height: "5xlarge",
+      width: "5xlarge",
+      fill: "stroke.default"
     }
   }
 });
@@ -55,7 +54,7 @@ const EmbedErrorPlaceholder = _ref => {
     "data-embed-type": type,
     children: [children ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(ErrorPlaceholder, {
       "data-embed-type": type,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_common.AlertLine, {})
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_common.Report, {})
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LicenseByline.EmbedByline, {
       error: true,
       type: type

package/lib/LicenseByline/EmbedByline.d.ts

@@ -20,7 +20,7 @@ interface BaseProps {
     hideCopyright?: boolean;
 }
 export interface EmbedBylineErrorProps extends BaseProps {
-    type: EmbedBylineTypeProps["type"] | "h5p" | "external";
+    type: EmbedBylineTypeProps["type"] | "h5p" | "external" | "code";
     error: true;
 }
 interface ImageProps extends BaseProps {

package/lib/locale/messages-en.d.ts

@@ -1384,6 +1384,7 @@ declare const messages: {
             external: string;
             gloss: string;
             copyright: string;
+            code: string;
         };
     };
     gloss: {

package/lib/locale/messages-en.js

@@ -1400,7 +1400,8 @@ const messages = {
       h5p: "H5P",
       external: "External resource",
       gloss: "Gloss",
-      copyright: "Text"
+      copyright: "Text",
+      code: "Code block"
     }
   },
   gloss: {