@bonniernews/dn-design-system-web 21.1.0-beta.5 → 21.1.1

package/preact/components.esm.js

@@ -1,24 +1,26 @@
+// ../src/helpers/formatClassString.ts
+var formatClassString = (classesArray) => {
+  return classesArray.filter((x) => !!x).join(" ");
+};
+
 // ../src/components/divider/divider.tsx
 import { jsx } from "preact/jsx-runtime";
 var Divider = ({ variant = "soft", classNames, attributes }) => {
-  const componentClassName = "ds-divider";
-  const classNamePrefix = `${componentClassName}--`;
-  const classes = [
-    componentClassName,
-    `${classNamePrefix}${variant}`,
+  const classes = formatClassString([
+    "ds-divider",
+    `ds-divider--${variant}`,
     classNames
-  ].filter(Boolean).join(" ");
+  ]);
   return /* @__PURE__ */ jsx("div", { className: classes, ...attributes, children: /* @__PURE__ */ jsx("hr", {}) });
 };
 
 // ../src/components/thematic-break/thematic-break.tsx
 import { jsx as jsx2 } from "preact/jsx-runtime";
 var ThematicBreak = ({ classNames, attributes }) => {
-  const componentClassName = "ds-thematic-break";
-  const classes = [
-    componentClassName,
+  const classes = formatClassString([
+    "ds-thematic-break",
     classNames
-  ].filter(Boolean).join(" ");
+  ]);
   return /* @__PURE__ */ jsx2("div", { className: classes, ...attributes, children: /* @__PURE__ */ jsx2("hr", {}) });
 };
 
@@ -26,12 +28,12 @@ var ThematicBreak = ({ classNames, attributes }) => {
 import { jsx as jsx3 } from "preact/jsx-runtime";
 var Quote = ({ bodyHtml, theme = "nyheter", classNames, attributes, forcePx }) => {
   const componentClassName = "ds-quote";
-  const classes = [
+  const classes = formatClassString([
     componentClassName,
     `ds-theme--${theme}`,
     forcePx && "ds-force-px",
     classNames
-  ].filter(Boolean).join(" ");
+  ]);
   const quoteHtml = `<span class="${componentClassName}__border"></span> ${bodyHtml}`;
   return /* @__PURE__ */ jsx3("blockquote", { dangerouslySetInnerHTML: { __html: quoteHtml }, className: classes, ...attributes });
 };

package/preact/components.esm.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../components/divider/divider.tsx", "../components/thematic-break/thematic-break.tsx", "../components/quote/quote.tsx"],
-  "sourcesContent": ["export interface DividerProps {\n  variant?: 'soft' | 'medium' | 'hard';\n  classNames?: string;\n  attributes?: object;\n}\n\nexport const Divider = ({ variant = 'soft', classNames, attributes }: DividerProps) => {\n  const componentClassName = 'ds-divider';\n  const classNamePrefix = `${componentClassName}--`;\n  const classes = [\n    componentClassName,\n    `${classNamePrefix}${variant}`,\n    classNames\n  ].filter(Boolean).join(' ');\n\n  return (\n    <div className={classes} {...attributes}><hr /></div>\n  );\n};\n\nexport default Divider;\n", "export interface ThematicBreakProps {\n  classNames?: string;\n  attributes?: object;\n}\n\nexport const ThematicBreak = ({ classNames, attributes }: ThematicBreakProps) => {\n  const componentClassName = 'ds-thematic-break';\n  const classes = [\n    componentClassName,\n    classNames\n  ].filter(Boolean).join(' ');\n\n  return (\n    <div className={classes} {...attributes}><hr /></div>\n  );\n};\n\nexport default ThematicBreak;\n", "export interface QuoteProps {\n  bodyHtml: string;\n  theme?: 'kultur' | 'nyheter' | 'sport' | 'ekonomi' | 'sthlm';\n  classNames?: string;\n  attributes?: object;\n  forcePx?: boolean;\n}\n\nexport const Quote = ({ bodyHtml, theme = 'nyheter', classNames, attributes, forcePx }: QuoteProps) => {\n  const componentClassName = 'ds-quote';\n  const classes = [\n    componentClassName,\n    `ds-theme--${theme}`,\n    forcePx && 'ds-force-px',\n    classNames\n  ].filter(Boolean).join(' ');\n\n  const quoteHtml = `<span class=\"${componentClassName}__border\"></span> ${bodyHtml}`\n\n  return (\n    <blockquote dangerouslySetInnerHTML={{ __html: quoteHtml }} className={classes} {...attributes} />\n  );\n};\n"],
-  "mappings": ";AAgB6C;AAVtC,IAAM,UAAU,CAAC,EAAE,UAAU,QAAQ,YAAY,WAAW,MAAoB;AACrF,QAAM,qBAAqB;AAC3B,QAAM,kBAAkB,GAAG,kBAAkB;AAC7C,QAAM,UAAU;AAAA,IACd;AAAA,IACA,GAAG,eAAe,GAAG,OAAO;AAAA,IAC5B;AAAA,EACF,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAE1B,SACE,oBAAC,SAAI,WAAW,SAAU,GAAG,YAAY,8BAAC,QAAG,GAAE;AAEnD;;;ACL6C,gBAAAA,YAAA;AARtC,IAAM,gBAAgB,CAAC,EAAE,YAAY,WAAW,MAA0B;AAC/E,QAAM,qBAAqB;AAC3B,QAAM,UAAU;AAAA,IACd;AAAA,IACA;AAAA,EACF,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAE1B,SACE,gBAAAA,KAAC,SAAI,WAAW,SAAU,GAAG,YAAY,0BAAAA,KAAC,QAAG,GAAE;AAEnD;;;ACKI,gBAAAC,YAAA;AAZG,IAAM,QAAQ,CAAC,EAAE,UAAU,QAAQ,WAAW,YAAY,YAAY,QAAQ,MAAkB;AACrG,QAAM,qBAAqB;AAC3B,QAAM,UAAU;AAAA,IACd;AAAA,IACA,aAAa,KAAK;AAAA,IAClB,WAAW;AAAA,IACX;AAAA,EACF,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAE1B,QAAM,YAAY,gBAAgB,kBAAkB,qBAAqB,QAAQ;AAEjF,SACE,gBAAAA,KAAC,gBAAW,yBAAyB,EAAE,QAAQ,UAAU,GAAG,WAAW,SAAU,GAAG,YAAY;AAEpG;",
+  "sources": ["../helpers/formatClassString.ts", "../components/divider/divider.tsx", "../components/thematic-break/thematic-break.tsx", "../components/quote/quote.tsx"],
+  "sourcesContent": ["export const formatClassString = (classesArray: (string|undefined|false)[]): string => {\n  return classesArray.filter(x => !!x).join(' ');\n}\n", "import { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\n\nexport interface DividerProps {\n  variant?: 'soft' | 'medium' | 'hard';\n  classNames?: string;\n  attributes?: object;\n}\n\nexport const Divider = ({ variant = 'soft', classNames, attributes }: DividerProps) => {\n  const classes = formatClassString([\n    'ds-divider',\n    `ds-divider--${variant}`,\n    classNames\n  ])\n\n  return (\n    <div className={classes} {...attributes}><hr /></div>\n  );\n};\n\nexport default Divider;\n", "import { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\n\nexport interface ThematicBreakProps {\n  classNames?: string;\n  attributes?: object;\n}\n\nexport const ThematicBreak = ({ classNames, attributes }: ThematicBreakProps) => {\n  const classes = formatClassString([\n    'ds-thematic-break',\n    classNames\n  ])\n\n  return (\n    <div className={classes} {...attributes}><hr /></div>\n  );\n};\n\nexport default ThematicBreak;\n", "import { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\n\nexport interface QuoteProps {\n  bodyHtml: string;\n  theme?: 'kultur' | 'nyheter' | 'sport' | 'ekonomi' | 'sthlm';\n  classNames?: string;\n   /** Ex. { target: \"_blank\", \"data-test\": \"lorem ipsum\" } */\n  attributes?: object;\n  forcePx?: boolean;\n}\n\nexport const Quote = ({ bodyHtml, theme = 'nyheter', classNames, attributes, forcePx }: QuoteProps) => {\n  const componentClassName = 'ds-quote';\n\n  const classes = formatClassString([\n    componentClassName,\n    `ds-theme--${theme}`,\n    forcePx && 'ds-force-px',\n    classNames,\n  ])\n\n  const quoteHtml = `<span class=\"${componentClassName}__border\"></span> ${bodyHtml}`\n\n  return (\n    <blockquote dangerouslySetInnerHTML={{ __html: quoteHtml }} className={classes} {...attributes} />\n  );\n};\n"],
+  "mappings": ";AAAO,IAAM,oBAAoB,CAAC,iBAAqD;AACrF,SAAO,aAAa,OAAO,OAAK,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG;AAC/C;;;ACc6C;AARtC,IAAM,UAAU,CAAC,EAAE,UAAU,QAAQ,YAAY,WAAW,MAAoB;AACrF,QAAM,UAAU,kBAAkB;AAAA,IAChC;AAAA,IACA,eAAe,OAAO;AAAA,IACtB;AAAA,EACF,CAAC;AAED,SACE,oBAAC,SAAI,WAAW,SAAU,GAAG,YAAY,8BAAC,QAAG,GAAE;AAEnD;;;ACJ6C,gBAAAA,YAAA;AAPtC,IAAM,gBAAgB,CAAC,EAAE,YAAY,WAAW,MAA0B;AAC/E,QAAM,UAAU,kBAAkB;AAAA,IAChC;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE,gBAAAA,KAAC,SAAI,WAAW,SAAU,GAAG,YAAY,0BAAAA,KAAC,QAAG,GAAE;AAEnD;;;ACQI,gBAAAC,YAAA;AAbG,IAAM,QAAQ,CAAC,EAAE,UAAU,QAAQ,WAAW,YAAY,YAAY,QAAQ,MAAkB;AACrG,QAAM,qBAAqB;AAE3B,QAAM,UAAU,kBAAkB;AAAA,IAChC;AAAA,IACA,aAAa,KAAK;AAAA,IAClB,WAAW;AAAA,IACX;AAAA,EACF,CAAC;AAED,QAAM,YAAY,gBAAgB,kBAAkB,qBAAqB,QAAQ;AAEjF,SACE,gBAAAA,KAAC,gBAAW,yBAAyB,EAAE,QAAQ,UAAU,GAAG,WAAW,SAAU,GAAG,YAAY;AAEpG;",
   "names": ["jsx", "jsx"]
 }

package/react/components/quote/quote.d.ts

@@ -2,6 +2,7 @@ export interface QuoteProps {
     bodyHtml: string;
     theme?: 'kultur' | 'nyheter' | 'sport' | 'ekonomi' | 'sthlm';
     classNames?: string;
+    /** Ex. { target: "_blank", "data-test": "lorem ipsum" } */
     attributes?: object;
     forcePx?: boolean;
 }

package/react/components/teaser-card/teaser-card.d.ts

@@ -0,0 +1,10 @@
+export interface TeaserCardsProps {
+    areaType?: 'right' | 'bauta' | 'bautaxl';
+    targetLink?: string;
+    theme?: 'kultur' | 'nyheter' | 'sport' | 'ekonomi' | 'sthlm';
+    classes?: string;
+    /** Ex. { target: "_blank", "data-test": "lorem ipsum" } */
+    attributes?: object;
+    children: any;
+}
+export declare const TeaserCard: ({ areaType, targetLink, theme, classes, attributes, children }: TeaserCardsProps) => import("react/jsx-runtime").JSX.Element;

package/react/components/teaser-onsite/teaser-onsite.d.ts

@@ -0,0 +1,12 @@
+export interface TeaserOnSiteProps {
+    areaType?: 'right' | 'bauta' | 'bautaxl';
+    targetLink?: string;
+    theme?: 'kultur' | 'nyheter' | 'sport' | 'ekonomi' | 'sthlm';
+    classNames?: string;
+    /** Ex. { target: "_blank", "data-test": "lorem ipsum" } */
+    attributes?: object;
+    mediaHtml?: string;
+    title?: string;
+    text?: string;
+}
+export declare const TeaserOnSite: ({ areaType, targetLink, theme, classNames, attributes, mediaHtml, title, text }: TeaserOnSiteProps) => import("react/jsx-runtime").JSX.Element;

package/react/components.cjs

@@ -26,27 +26,29 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 
+// ../src/helpers/formatClassString.ts
+var formatClassString = (classesArray) => {
+  return classesArray.filter((x) => !!x).join(" ");
+};
+
 // ../src/components/divider/divider.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var Divider = ({ variant = "soft", classNames, attributes }) => {
-  const componentClassName = "ds-divider";
-  const classNamePrefix = `${componentClassName}--`;
-  const classes = [
-    componentClassName,
-    `${classNamePrefix}${variant}`,
+  const classes = formatClassString([
+    "ds-divider",
+    `ds-divider--${variant}`,
     classNames
-  ].filter(Boolean).join(" ");
+  ]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: classes, ...attributes, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("hr", {}) });
 };
 
 // ../src/components/thematic-break/thematic-break.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var ThematicBreak = ({ classNames, attributes }) => {
-  const componentClassName = "ds-thematic-break";
-  const classes = [
-    componentClassName,
+  const classes = formatClassString([
+    "ds-thematic-break",
     classNames
-  ].filter(Boolean).join(" ");
+  ]);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: classes, ...attributes, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("hr", {}) });
 };
 
@@ -54,12 +56,12 @@ var ThematicBreak = ({ classNames, attributes }) => {
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var Quote = ({ bodyHtml, theme = "nyheter", classNames, attributes, forcePx }) => {
   const componentClassName = "ds-quote";
-  const classes = [
+  const classes = formatClassString([
     componentClassName,
     `ds-theme--${theme}`,
     forcePx && "ds-force-px",
     classNames
-  ].filter(Boolean).join(" ");
+  ]);
   const quoteHtml = `<span class="${componentClassName}__border"></span> ${bodyHtml}`;
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("blockquote", { dangerouslySetInnerHTML: { __html: quoteHtml }, className: classes, ...attributes });
 };

package/react/components.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../index.tsx", "../components/divider/divider.tsx", "../components/thematic-break/thematic-break.tsx", "../components/quote/quote.tsx"],
-  "sourcesContent": ["import { Divider } from \"./components/divider/divider\";\nexport { Divider };\n\nimport { ThematicBreak } from \"./components/thematic-break/thematic-break\";\nexport { ThematicBreak };\n\nimport { Quote } from \"./components/quote/quote\";\nexport { Quote };\n", "export interface DividerProps {\n  variant?: 'soft' | 'medium' | 'hard';\n  classNames?: string;\n  attributes?: object;\n}\n\nexport const Divider = ({ variant = 'soft', classNames, attributes }: DividerProps) => {\n  const componentClassName = 'ds-divider';\n  const classNamePrefix = `${componentClassName}--`;\n  const classes = [\n    componentClassName,\n    `${classNamePrefix}${variant}`,\n    classNames\n  ].filter(Boolean).join(' ');\n\n  return (\n    <div className={classes} {...attributes}><hr /></div>\n  );\n};\n\nexport default Divider;\n", "export interface ThematicBreakProps {\n  classNames?: string;\n  attributes?: object;\n}\n\nexport const ThematicBreak = ({ classNames, attributes }: ThematicBreakProps) => {\n  const componentClassName = 'ds-thematic-break';\n  const classes = [\n    componentClassName,\n    classNames\n  ].filter(Boolean).join(' ');\n\n  return (\n    <div className={classes} {...attributes}><hr /></div>\n  );\n};\n\nexport default ThematicBreak;\n", "export interface QuoteProps {\n  bodyHtml: string;\n  theme?: 'kultur' | 'nyheter' | 'sport' | 'ekonomi' | 'sthlm';\n  classNames?: string;\n  attributes?: object;\n  forcePx?: boolean;\n}\n\nexport const Quote = ({ bodyHtml, theme = 'nyheter', classNames, attributes, forcePx }: QuoteProps) => {\n  const componentClassName = 'ds-quote';\n  const classes = [\n    componentClassName,\n    `ds-theme--${theme}`,\n    forcePx && 'ds-force-px',\n    classNames\n  ].filter(Boolean).join(' ');\n\n  const quoteHtml = `<span class=\"${componentClassName}__border\"></span> ${bodyHtml}`\n\n  return (\n    <blockquote dangerouslySetInnerHTML={{ __html: quoteHtml }} className={classes} {...attributes} />\n  );\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACgB6C;AAVtC,IAAM,UAAU,CAAC,EAAE,UAAU,QAAQ,YAAY,WAAW,MAAoB;AACrF,QAAM,qBAAqB;AAC3B,QAAM,kBAAkB,GAAG,kBAAkB;AAC7C,QAAM,UAAU;AAAA,IACd;AAAA,IACA,GAAG,eAAe,GAAG,OAAO;AAAA,IAC5B;AAAA,EACF,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAE1B,SACE,4CAAC,SAAI,WAAW,SAAU,GAAG,YAAY,sDAAC,QAAG,GAAE;AAEnD;;;ACL6C,IAAAA,sBAAA;AARtC,IAAM,gBAAgB,CAAC,EAAE,YAAY,WAAW,MAA0B;AAC/E,QAAM,qBAAqB;AAC3B,QAAM,UAAU;AAAA,IACd;AAAA,IACA;AAAA,EACF,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAE1B,SACE,6CAAC,SAAI,WAAW,SAAU,GAAG,YAAY,uDAAC,QAAG,GAAE;AAEnD;;;ACKI,IAAAC,sBAAA;AAZG,IAAM,QAAQ,CAAC,EAAE,UAAU,QAAQ,WAAW,YAAY,YAAY,QAAQ,MAAkB;AACrG,QAAM,qBAAqB;AAC3B,QAAM,UAAU;AAAA,IACd;AAAA,IACA,aAAa,KAAK;AAAA,IAClB,WAAW;AAAA,IACX;AAAA,EACF,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAE1B,QAAM,YAAY,gBAAgB,kBAAkB,qBAAqB,QAAQ;AAEjF,SACE,6CAAC,gBAAW,yBAAyB,EAAE,QAAQ,UAAU,GAAG,WAAW,SAAU,GAAG,YAAY;AAEpG;",
+  "sources": ["../index.tsx", "../helpers/formatClassString.ts", "../components/divider/divider.tsx", "../components/thematic-break/thematic-break.tsx", "../components/quote/quote.tsx"],
+  "sourcesContent": ["import { Divider } from \"./components/divider/divider\";\nexport { Divider };\n\nimport { ThematicBreak } from \"./components/thematic-break/thematic-break\";\nexport { ThematicBreak };\n\nimport { Quote } from \"./components/quote/quote\";\nexport { Quote };\n", "export const formatClassString = (classesArray: (string|undefined|false)[]): string => {\n  return classesArray.filter(x => !!x).join(' ');\n}\n", "import { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\n\nexport interface DividerProps {\n  variant?: 'soft' | 'medium' | 'hard';\n  classNames?: string;\n  attributes?: object;\n}\n\nexport const Divider = ({ variant = 'soft', classNames, attributes }: DividerProps) => {\n  const classes = formatClassString([\n    'ds-divider',\n    `ds-divider--${variant}`,\n    classNames\n  ])\n\n  return (\n    <div className={classes} {...attributes}><hr /></div>\n  );\n};\n\nexport default Divider;\n", "import { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\n\nexport interface ThematicBreakProps {\n  classNames?: string;\n  attributes?: object;\n}\n\nexport const ThematicBreak = ({ classNames, attributes }: ThematicBreakProps) => {\n  const classes = formatClassString([\n    'ds-thematic-break',\n    classNames\n  ])\n\n  return (\n    <div className={classes} {...attributes}><hr /></div>\n  );\n};\n\nexport default ThematicBreak;\n", "import { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\n\nexport interface QuoteProps {\n  bodyHtml: string;\n  theme?: 'kultur' | 'nyheter' | 'sport' | 'ekonomi' | 'sthlm';\n  classNames?: string;\n   /** Ex. { target: \"_blank\", \"data-test\": \"lorem ipsum\" } */\n  attributes?: object;\n  forcePx?: boolean;\n}\n\nexport const Quote = ({ bodyHtml, theme = 'nyheter', classNames, attributes, forcePx }: QuoteProps) => {\n  const componentClassName = 'ds-quote';\n\n  const classes = formatClassString([\n    componentClassName,\n    `ds-theme--${theme}`,\n    forcePx && 'ds-force-px',\n    classNames,\n  ])\n\n  const quoteHtml = `<span class=\"${componentClassName}__border\"></span> ${bodyHtml}`\n\n  return (\n    <blockquote dangerouslySetInnerHTML={{ __html: quoteHtml }} className={classes} {...attributes} />\n  );\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAO,IAAM,oBAAoB,CAAC,iBAAqD;AACrF,SAAO,aAAa,OAAO,OAAK,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG;AAC/C;;;ACc6C;AARtC,IAAM,UAAU,CAAC,EAAE,UAAU,QAAQ,YAAY,WAAW,MAAoB;AACrF,QAAM,UAAU,kBAAkB;AAAA,IAChC;AAAA,IACA,eAAe,OAAO;AAAA,IACtB;AAAA,EACF,CAAC;AAED,SACE,4CAAC,SAAI,WAAW,SAAU,GAAG,YAAY,sDAAC,QAAG,GAAE;AAEnD;;;ACJ6C,IAAAA,sBAAA;AAPtC,IAAM,gBAAgB,CAAC,EAAE,YAAY,WAAW,MAA0B;AAC/E,QAAM,UAAU,kBAAkB;AAAA,IAChC;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE,6CAAC,SAAI,WAAW,SAAU,GAAG,YAAY,uDAAC,QAAG,GAAE;AAEnD;;;ACQI,IAAAC,sBAAA;AAbG,IAAM,QAAQ,CAAC,EAAE,UAAU,QAAQ,WAAW,YAAY,YAAY,QAAQ,MAAkB;AACrG,QAAM,qBAAqB;AAE3B,QAAM,UAAU,kBAAkB;AAAA,IAChC;AAAA,IACA,aAAa,KAAK;AAAA,IAClB,WAAW;AAAA,IACX;AAAA,EACF,CAAC;AAED,QAAM,YAAY,gBAAgB,kBAAkB,qBAAqB,QAAQ;AAEjF,SACE,6CAAC,gBAAW,yBAAyB,EAAE,QAAQ,UAAU,GAAG,WAAW,SAAU,GAAG,YAAY;AAEpG;",
   "names": ["import_jsx_runtime", "import_jsx_runtime"]
 }

package/react/components.esm.js

@@ -1,24 +1,26 @@
+// ../src/helpers/formatClassString.ts
+var formatClassString = (classesArray) => {
+  return classesArray.filter((x) => !!x).join(" ");
+};
+
 // ../src/components/divider/divider.tsx
 import { jsx } from "react/jsx-runtime";
 var Divider = ({ variant = "soft", classNames, attributes }) => {
-  const componentClassName = "ds-divider";
-  const classNamePrefix = `${componentClassName}--`;
-  const classes = [
-    componentClassName,
-    `${classNamePrefix}${variant}`,
+  const classes = formatClassString([
+    "ds-divider",
+    `ds-divider--${variant}`,
     classNames
-  ].filter(Boolean).join(" ");
+  ]);
   return /* @__PURE__ */ jsx("div", { className: classes, ...attributes, children: /* @__PURE__ */ jsx("hr", {}) });
 };
 
 // ../src/components/thematic-break/thematic-break.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
 var ThematicBreak = ({ classNames, attributes }) => {
-  const componentClassName = "ds-thematic-break";
-  const classes = [
-    componentClassName,
+  const classes = formatClassString([
+    "ds-thematic-break",
     classNames
-  ].filter(Boolean).join(" ");
+  ]);
   return /* @__PURE__ */ jsx2("div", { className: classes, ...attributes, children: /* @__PURE__ */ jsx2("hr", {}) });
 };
 
@@ -26,12 +28,12 @@ var ThematicBreak = ({ classNames, attributes }) => {
 import { jsx as jsx3 } from "react/jsx-runtime";
 var Quote = ({ bodyHtml, theme = "nyheter", classNames, attributes, forcePx }) => {
   const componentClassName = "ds-quote";
-  const classes = [
+  const classes = formatClassString([
     componentClassName,
     `ds-theme--${theme}`,
     forcePx && "ds-force-px",
     classNames
-  ].filter(Boolean).join(" ");
+  ]);
   const quoteHtml = `<span class="${componentClassName}__border"></span> ${bodyHtml}`;
   return /* @__PURE__ */ jsx3("blockquote", { dangerouslySetInnerHTML: { __html: quoteHtml }, className: classes, ...attributes });
 };

package/react/components.esm.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../components/divider/divider.tsx", "../components/thematic-break/thematic-break.tsx", "../components/quote/quote.tsx"],
-  "sourcesContent": ["export interface DividerProps {\n  variant?: 'soft' | 'medium' | 'hard';\n  classNames?: string;\n  attributes?: object;\n}\n\nexport const Divider = ({ variant = 'soft', classNames, attributes }: DividerProps) => {\n  const componentClassName = 'ds-divider';\n  const classNamePrefix = `${componentClassName}--`;\n  const classes = [\n    componentClassName,\n    `${classNamePrefix}${variant}`,\n    classNames\n  ].filter(Boolean).join(' ');\n\n  return (\n    <div className={classes} {...attributes}><hr /></div>\n  );\n};\n\nexport default Divider;\n", "export interface ThematicBreakProps {\n  classNames?: string;\n  attributes?: object;\n}\n\nexport const ThematicBreak = ({ classNames, attributes }: ThematicBreakProps) => {\n  const componentClassName = 'ds-thematic-break';\n  const classes = [\n    componentClassName,\n    classNames\n  ].filter(Boolean).join(' ');\n\n  return (\n    <div className={classes} {...attributes}><hr /></div>\n  );\n};\n\nexport default ThematicBreak;\n", "export interface QuoteProps {\n  bodyHtml: string;\n  theme?: 'kultur' | 'nyheter' | 'sport' | 'ekonomi' | 'sthlm';\n  classNames?: string;\n  attributes?: object;\n  forcePx?: boolean;\n}\n\nexport const Quote = ({ bodyHtml, theme = 'nyheter', classNames, attributes, forcePx }: QuoteProps) => {\n  const componentClassName = 'ds-quote';\n  const classes = [\n    componentClassName,\n    `ds-theme--${theme}`,\n    forcePx && 'ds-force-px',\n    classNames\n  ].filter(Boolean).join(' ');\n\n  const quoteHtml = `<span class=\"${componentClassName}__border\"></span> ${bodyHtml}`\n\n  return (\n    <blockquote dangerouslySetInnerHTML={{ __html: quoteHtml }} className={classes} {...attributes} />\n  );\n};\n"],
-  "mappings": ";AAgB6C;AAVtC,IAAM,UAAU,CAAC,EAAE,UAAU,QAAQ,YAAY,WAAW,MAAoB;AACrF,QAAM,qBAAqB;AAC3B,QAAM,kBAAkB,GAAG,kBAAkB;AAC7C,QAAM,UAAU;AAAA,IACd;AAAA,IACA,GAAG,eAAe,GAAG,OAAO;AAAA,IAC5B;AAAA,EACF,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAE1B,SACE,oBAAC,SAAI,WAAW,SAAU,GAAG,YAAY,8BAAC,QAAG,GAAE;AAEnD;;;ACL6C,gBAAAA,YAAA;AARtC,IAAM,gBAAgB,CAAC,EAAE,YAAY,WAAW,MAA0B;AAC/E,QAAM,qBAAqB;AAC3B,QAAM,UAAU;AAAA,IACd;AAAA,IACA;AAAA,EACF,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAE1B,SACE,gBAAAA,KAAC,SAAI,WAAW,SAAU,GAAG,YAAY,0BAAAA,KAAC,QAAG,GAAE;AAEnD;;;ACKI,gBAAAC,YAAA;AAZG,IAAM,QAAQ,CAAC,EAAE,UAAU,QAAQ,WAAW,YAAY,YAAY,QAAQ,MAAkB;AACrG,QAAM,qBAAqB;AAC3B,QAAM,UAAU;AAAA,IACd;AAAA,IACA,aAAa,KAAK;AAAA,IAClB,WAAW;AAAA,IACX;AAAA,EACF,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAE1B,QAAM,YAAY,gBAAgB,kBAAkB,qBAAqB,QAAQ;AAEjF,SACE,gBAAAA,KAAC,gBAAW,yBAAyB,EAAE,QAAQ,UAAU,GAAG,WAAW,SAAU,GAAG,YAAY;AAEpG;",
+  "sources": ["../helpers/formatClassString.ts", "../components/divider/divider.tsx", "../components/thematic-break/thematic-break.tsx", "../components/quote/quote.tsx"],
+  "sourcesContent": ["export const formatClassString = (classesArray: (string|undefined|false)[]): string => {\n  return classesArray.filter(x => !!x).join(' ');\n}\n", "import { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\n\nexport interface DividerProps {\n  variant?: 'soft' | 'medium' | 'hard';\n  classNames?: string;\n  attributes?: object;\n}\n\nexport const Divider = ({ variant = 'soft', classNames, attributes }: DividerProps) => {\n  const classes = formatClassString([\n    'ds-divider',\n    `ds-divider--${variant}`,\n    classNames\n  ])\n\n  return (\n    <div className={classes} {...attributes}><hr /></div>\n  );\n};\n\nexport default Divider;\n", "import { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\n\nexport interface ThematicBreakProps {\n  classNames?: string;\n  attributes?: object;\n}\n\nexport const ThematicBreak = ({ classNames, attributes }: ThematicBreakProps) => {\n  const classes = formatClassString([\n    'ds-thematic-break',\n    classNames\n  ])\n\n  return (\n    <div className={classes} {...attributes}><hr /></div>\n  );\n};\n\nexport default ThematicBreak;\n", "import { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\n\nexport interface QuoteProps {\n  bodyHtml: string;\n  theme?: 'kultur' | 'nyheter' | 'sport' | 'ekonomi' | 'sthlm';\n  classNames?: string;\n   /** Ex. { target: \"_blank\", \"data-test\": \"lorem ipsum\" } */\n  attributes?: object;\n  forcePx?: boolean;\n}\n\nexport const Quote = ({ bodyHtml, theme = 'nyheter', classNames, attributes, forcePx }: QuoteProps) => {\n  const componentClassName = 'ds-quote';\n\n  const classes = formatClassString([\n    componentClassName,\n    `ds-theme--${theme}`,\n    forcePx && 'ds-force-px',\n    classNames,\n  ])\n\n  const quoteHtml = `<span class=\"${componentClassName}__border\"></span> ${bodyHtml}`\n\n  return (\n    <blockquote dangerouslySetInnerHTML={{ __html: quoteHtml }} className={classes} {...attributes} />\n  );\n};\n"],
+  "mappings": ";AAAO,IAAM,oBAAoB,CAAC,iBAAqD;AACrF,SAAO,aAAa,OAAO,OAAK,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG;AAC/C;;;ACc6C;AARtC,IAAM,UAAU,CAAC,EAAE,UAAU,QAAQ,YAAY,WAAW,MAAoB;AACrF,QAAM,UAAU,kBAAkB;AAAA,IAChC;AAAA,IACA,eAAe,OAAO;AAAA,IACtB;AAAA,EACF,CAAC;AAED,SACE,oBAAC,SAAI,WAAW,SAAU,GAAG,YAAY,8BAAC,QAAG,GAAE;AAEnD;;;ACJ6C,gBAAAA,YAAA;AAPtC,IAAM,gBAAgB,CAAC,EAAE,YAAY,WAAW,MAA0B;AAC/E,QAAM,UAAU,kBAAkB;AAAA,IAChC;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE,gBAAAA,KAAC,SAAI,WAAW,SAAU,GAAG,YAAY,0BAAAA,KAAC,QAAG,GAAE;AAEnD;;;ACQI,gBAAAC,YAAA;AAbG,IAAM,QAAQ,CAAC,EAAE,UAAU,QAAQ,WAAW,YAAY,YAAY,QAAQ,MAAkB;AACrG,QAAM,qBAAqB;AAE3B,QAAM,UAAU,kBAAkB;AAAA,IAChC;AAAA,IACA,aAAa,KAAK;AAAA,IAClB,WAAW;AAAA,IACX;AAAA,EACF,CAAC;AAED,QAAM,YAAY,gBAAgB,kBAAkB,qBAAqB,QAAQ;AAEjF,SACE,gBAAAA,KAAC,gBAAW,yBAAyB,EAAE,QAAQ,UAAU,GAAG,WAAW,SAAU,GAAG,YAAY;AAEpG;",
   "names": ["jsx", "jsx"]
 }

package/tokens/colors-css-variables.json

@@ -12,7 +12,6 @@
   "text-body-link": "var(--ds-color-text-body-link)",
   "text-body-link-visited": "var(--ds-color-text-body-link-visited)",
   "text-positive": "var(--ds-color-text-positive)",
-  "text-culture": "var(--ds-color-text-culture)",
   "icon-primary": "var(--ds-color-icon-primary)",
   "icon-primary-02": "var(--ds-color-icon-primary-02)",
   "icon-secondary": "var(--ds-color-icon-secondary)",
@@ -23,7 +22,6 @@
   "icon-brand": "var(--ds-color-icon-brand)",
   "icon-on-critical": "var(--ds-color-icon-on-critical)",
   "icon-on-success": "var(--ds-color-icon-on-success)",
-  "icon-culture": "var(--ds-color-icon-culture)",
   "component-brand": "var(--ds-color-component-brand)",
   "component-business": "var(--ds-color-component-business)",
   "component-primary": "var(--ds-color-component-primary)",
@@ -48,7 +46,6 @@
   "surface-sudoko": "var(--ds-color-surface-sudoko)",
   "surface-brand": "var(--ds-color-surface-brand)",
   "surface-inverted": "var(--ds-color-surface-inverted)",
-  "surface-breaking": "var(--ds-color-surface-breaking)",
   "border-primary": "var(--ds-color-border-primary)",
   "border-primary-02": "var(--ds-color-border-primary-02)",
   "border-primary-03": "var(--ds-color-border-primary-03)",
@@ -60,7 +57,6 @@
   "border-focus-03": "var(--ds-color-border-focus-03)",
   "border-focus-04": "var(--ds-color-border-focus-04)",
   "border-brand": "var(--ds-color-border-brand)",
-  "border-culture": "var(--ds-color-border-culture)",
   "background-primary": "var(--ds-color-background-primary)",
   "static-red-100": "var(--ds-color-static-red-100)",
   "static-black": "var(--ds-color-static-black)",
@@ -86,4 +82,4 @@
   "gradient-content-fade-right": "var(--ds-color-gradient-content-fade-right)",
   "gradient-content-fade-up": "var(--ds-color-gradient-content-fade-up)",
   "gradient-content-fade-down": "var(--ds-color-gradient-content-fade-down)"
-}
+}

package/tokens/colors-dark-mode.json

@@ -1,75 +1,71 @@
 {
   "text": {
-    "primary": "#ededed",
-    "primary-02": "#b8b8b8",
+    "primary": "#EDEDED",
+    "primary-02": "#B8B8B8",
     "secondary": "#050505",
-    "critical": "#fd2330",
-    "disabled": "#b8b8b8",
+    "critical": "#FD2330",
+    "disabled": "#B8B8B8",
     "on-brand": "#ffffff",
     "on-business": "#ffffff",
     "on-critical": "#ffffff",
     "on-success": "#ffffff",
-    "brand": "#fd2330",
-    "body-link": "#65a0fc",
-    "body-link-visited": "#65a0fc",
-    "positive": "#3a8352",
-    "culture": "#4293d7"
+    "brand": "#FD2330",
+    "body-link": "#65A0FC",
+    "body-link-visited": "#65A0FC",
+    "positive": "#3A8352"
   },
   "icon": {
-    "primary": "#ededed",
-    "primary-02": "#cfcfcf",
+    "primary": "#EDEDED",
+    "primary-02": "#CFCFCF",
     "secondary": "#050505",
-    "critical": "#fd2330",
-    "disabled": "#b8b8b8",
+    "critical": "#FD2330",
+    "disabled": "#B8B8B8",
     "on-brand": "#141414",
     "on-critical": "#ffffff",
     "on-success": "#ffffff",
     "on-business": "#ffffff",
-    "brand": "#fd2330",
-    "culture": "#4293d7"
+    "brand": "#FD2330"
   },
   "component": {
-    "brand": "#fd2330",
-    "business": "#3a8352",
-    "primary": "#ededed",
-    "primary-overlay": "rgba(255, 255, 255, 0.13)",
-    "primary-overlay-02": "#9e9e9e",
+    "brand": "#FD2330",
+    "business": "#3A8352",
+    "primary": "#EDEDED",
+    "primary-overlay": "#ffffff21",
+    "primary-overlay-02": "#9E9E9E",
     "secondary": "#050505",
-    "secondary-overlay": "rgba(8, 8, 8, 0.13)",
-    "secondary-overlay-02": "rgba(8, 8, 8, 0.2)",
-    "critical": "#ef7171",
-    "critical-overlay": "#a51d24",
+    "secondary-overlay": "#08080821",
+    "secondary-overlay-02": "#08080833",
+    "critical": "#EF7171",
+    "critical-overlay": "#A51D24",
     "static-white": "#ffffff",
-    "positive": "#3a8352",
-    "primary-02": "#cfcfcf"
+    "positive": "#3A8352",
+    "primary-02": "#CFCFCF"
   },
   "surface": {
-    "below": "#171717",
+    "below": "#262626",
     "background": "#050505",
-    "raised": "#2b2b2b",
-    "native-article": "#2b2b2b",
-    "elevated": "#2b2b2b",
+    "raised": "#2B2B2B",
+    "native-article": "#2B2B2B",
+    "elevated": "#2B2B2B",
     "inverted": "#ffffff",
-    "overlay": "rgba(5, 5, 5, 0.5)",
-    "quiz": "#ea3e3f",
-    "korsord": "#8bb6e8",
-    "sudoko": "#90d0bd",
-    "brand": "#da000d",
-    "breaking": "#300407"
+    "overlay": "#05050580",
+    "quiz": "#EA3E3F",
+    "korsord": "#8BB6E8",
+    "sudoko": "#90D0BD",
+    "brand": "#DA000D"
   },
   "border": {
-    "primary": "rgba(255, 255, 255, 0.19)",
-    "primary-02": "rgba(255, 255, 255, 0.4)",
-    "primary-03": "#ededed",
+    "primary": "#3B3B3B",
+    "primary-02": "#ffffff66",
+    "primary-03": "#EDEDED",
     "secondary": "#141414",
-    "business": "#3a8352",
-    "critical": "#fd2330",
-    "focus": "#fd2330",
+    "business": "#3A8352",
+    "critical": "#FD2330",
+    "focus": "#FD2330",
     "focus-02": "#ffffff",
-    "focus-03": "#fd2330",
-    "focus-04": "#3a8352",
-    "brand": "#fd2330",
-    "culture": "#4293d7"
+    "focus-03": "#FD2330",
+    "focus-04": "#3A8352",
+    "brand": "#DA000D"
   },
   "background": {
     "primary": "#141414"
@@ -82,25 +78,25 @@
     "content-fade-down": "linear-gradient(0deg, #05050500 0%, #050505 100%)"
   },
   "static": {
-    "red-100": "#fad4d4",
+    "red-100": "#FAD4D4",
     "black": "#141414",
-    "transparent-black": "rgba(20, 20, 20, 0.6)",
+    "transparent-black": "#14141499",
     "white": "#ffffff",
-    "transparent-white": "rgba(255, 255, 255, 0.5)",
-    "green-100": "#cee4d6",
-    "red-300": "#ef7171",
-    "transparent-white-10": "rgba(255, 255, 255, 0.13)",
-    "kultur": "#568cbb",
-    "economy": "#60bca1",
-    "sport": "#f58d2d",
-    "neutral-200": "#e0e0e0",
-    "sthlm": "#ff589b",
-    "ad-yellow": "#ffeac2",
-    "neutral-100": "#ededed",
-    "neutral-500": "#9e9e9e",
-    "red-500": "#da000d",
-    "yellow": "#ffe600",
-    "red-200": "#f6acad",
-    "red-0": "#fce8e8"
+    "transparent-white": "#ffffff80",
+    "green-100": "#CEE4D6",
+    "red-300": "#EF7171",
+    "transparent-white-10": "#ffffff21",
+    "kultur": "#568CBB",
+    "economy": "#60BCA1",
+    "sport": "#F58D2D",
+    "neutral-200": "#E0E0E0",
+    "sthlm": "#FF589B",
+    "ad-yellow": "#FFEAC2",
+    "neutral-100": "#EDEDED",
+    "neutral-500": "#9E9E9E",
+    "red-500": "#DA000D",
+    "yellow": "#FFE600",
+    "red-200": "#F6ACAD",
+    "red-0": "#FCE8E8"
   }
 }

package/tokens/colors-light-mode.json

@@ -3,98 +3,94 @@
     "primary": "#050505",
     "primary-02": "#666666",
     "secondary": "#ffffff",
-    "critical": "#da000d",
+    "critical": "#DA000D",
     "disabled": "#666666",
     "on-brand": "#ffffff",
     "on-business": "#ffffff",
     "on-critical": "#ffffff",
     "on-success": "#ffffff",
-    "brand": "#da000d",
-    "body-link": "#4373ce",
-    "body-link-visited": "#4373ce",
-    "positive": "#3a8352",
-    "culture": "#227ac3"
+    "brand": "#DA000D",
+    "body-link": "#4373CE",
+    "body-link-visited": "#4373CE",
+    "positive": "#3A8352"
   },
   "icon": {
     "primary": "#050505",
     "primary-02": "#666666",
     "secondary": "#ffffff",
-    "critical": "#da000d",
+    "critical": "#DA000D",
     "disabled": "#666666",
     "on-brand": "#ffffff",
     "on-business": "#ffffff",
-    "brand": "#da000d",
+    "brand": "#DA000D",
     "on-critical": "#ffffff",
-    "on-success": "#ffffff",
-    "culture": "#227ac3"
+    "on-success": "#ffffff"
   },
   "component": {
-    "brand": "#da000d",
-    "business": "#3a8352",
+    "brand": "#DA000D",
+    "business": "#3A8352",
     "primary": "#141414",
-    "primary-overlay": "rgba(8, 8, 8, 0.13)",
-    "primary-overlay-02": "rgba(8, 8, 8, 0.2)",
+    "primary-overlay": "#08080821",
+    "primary-overlay-02": "#08080833",
     "secondary": "#ffffff",
-    "secondary-overlay": "rgba(255, 255, 255, 0.13)",
-    "secondary-overlay-02": "rgba(255, 255, 255, 0.2)",
-    "critical": "#ea3e3f",
-    "critical-overlay": "#a51d24",
+    "secondary-overlay": "#ffffff21",
+    "secondary-overlay-02": "#ffffff33",
+    "critical": "#EA3E3F",
+    "critical-overlay": "#A51D24",
     "static-white": "#ffffff",
-    "positive": "#3a8352",
-    "primary-02": "#cfcfcf"
+    "positive": "#3A8352",
+    "primary-02": "#CFCFCF"
   },
   "surface": {
-    "below": "#f2f2f2",
-    "native-article": "#ededed",
+    "below": "#EDEDED",
+    "native-article": "#EDEDED",
     "background": "#ffffff",
-    "raised": "#ededed",
+    "raised": "#EDEDED",
     "elevated": "#ffffff",
-    "overlay": "rgba(5, 5, 5, 0.5)",
-    "quiz": "#ea3e3f",
-    "korsord": "#8bb6e8",
-    "sudoko": "#90d0bd",
-    "brand": "#da000d",
-    "inverted": "#141414",
-    "breaking": "#300407"
+    "overlay": "#05050580",
+    "quiz": "#EA3E3F",
+    "korsord": "#8BB6E8",
+    "sudoko": "#90D0BD",
+    "brand": "#DA000D",
+    "inverted": "#141414"
   },
   "border": {
-    "primary": "rgba(5, 5, 5, 0.13)",
-    "primary-02": "rgba(8, 8, 8, 0.4)",
+    "primary": "#08080821",
+    "primary-02": "#08080866",
     "primary-03": "#050505",
     "secondary": "#ffffff",
-    "business": "#3a8352",
-    "critical": "#da000d",
-    "focus": "#da000d",
+    "business": "#3A8352",
+    "critical": "#DA000D",
+    "focus": "#DA000D",
     "focus-02": "#141414",
-    "focus-03": "#da000d",
-    "focus-04": "#3a8352",
-    "brand": "#da000d",
-    "culture": "#227ac3"
+    "focus-03": "#DA000D",
+    "focus-04": "#3A8352",
+    "brand": "#DA000D"
   },
   "background": {
     "primary": "#ffffff"
   },
   "static": {
-    "red-100": "#fad4d4",
+    "red-100": "#FAD4D4",
     "black": "#141414",
-    "transparent-black": "rgba(20, 20, 20, 0.6)",
+    "transparent-black": "#14141499",
     "white": "#ffffff",
-    "transparent-white": "rgba(255, 255, 255, 0.5)",
-    "green-100": "#cee4d6",
-    "red-300": "#ef7171",
-    "transparent-white-10": "rgba(255, 255, 255, 0.13)",
-    "kultur": "#568cbb",
-    "economy": "#60bca1",
-    "sport": "#f58d2d",
-    "neutral-200": "#e0e0e0",
-    "sthlm": "#ff589b",
-    "ad-yellow": "#ffeac2",
-    "neutral-100": "#ededed",
-    "neutral-500": "#9e9e9e",
-    "red-500": "#da000d",
-    "yellow": "#ffe600",
-    "red-200": "#f6acad",
-    "red-0": "#fce8e8"
+    "transparent-white": "#ffffff80",
+    "green-100": "#CEE4D6",
+    "red-300": "#EF7171",
+    "transparent-white-10": "#ffffff21",
+    "kultur": "#568CBB",
+    "economy": "#60BCA1",
+    "sport": "#F58D2D",
+    "neutral-200": "#E0E0E0",
+    "sthlm": "#FF589B",
+    "ad-yellow": "#FFEAC2",
+    "neutral-100": "#EDEDED",
+    "neutral-500": "#9E9E9E",
+    "red-500": "#DA000D",
+    "yellow": "#FFE600",
+    "red-200": "#F6ACAD",
+    "red-0": "#FCE8E8"
   },
   "gradient": {
     "content-fade-left": "linear-gradient(90deg, #ffffff00 0%, #ffffff 100%)",

package/tokens/typography-list.json

@@ -16,7 +16,6 @@
   "detailteaser-standard-compact": "'detailteaser-standard-compact'",
   "detailteaser-standard-compact-opinion": "'detailteaser-standard-compact-opinion'",
   "detailteaser-large": "'detailteaser-large'",
-  "detailteaser-breaking": "'detailteaser-breaking'",
   "detailteaser-large-opinion": "'detailteaser-large-opinion'",
   "detailteaser-large-storRubrik": "'detailteaser-large-storRubrik'",
   "detailteaser-standard": "'detailteaser-standard'",