@bonniernews/dn-design-system-web 21.2.1-beta.0 → 22.0.0

package/components/teaser-breaking/teaser-breaking.njk

@@ -1,46 +0,0 @@
-{% from '@bonniernews/dn-design-system-web/components/teaser-card/teaser-card.njk' import TeaserCard %}
-
-{% macro TeaserBreaking(params) %}
-  {% set componentClassName = "ds-teaser" %}
-  {% set classNamePrefix = componentClassName + "--" %}
-
-  {% set extraClasses = [
-    "ds-teaser--breaking",
-    params.classNames if params.classNames
-  ] | join(" ") %}
-
-  {% call TeaserCard({
-    targetLink: params.targetLink,
-    areaType: params.areaType,
-    theme: params.theme,
-    attributes: params.attributes,
-    classNames: extraClasses
-  }) %}
-    <div class="{{ componentClassName + '__content'}}">
-      <div class="ds-teaser__content-inner">
-        {% if params.vignette %}
-          <div class="ds-teaser__vignette">
-            {{ params.vignette }}
-          </div>
-        {% endif %}
-        <h2 class="ds-teaser__title">
-          {% if params.highlight %}
-            <span class="{{ componentClassName + '__highlight'}}">{{ params.highlight }}</span>
-          {% endif %}
-          {{ params.title }}
-        </h2>
-
-        {% if params.text %}
-          <p class="{{ componentClassName + '__text' }}">
-            {{ params.text }}
-          </p>
-        {% endif %}
-      </div>
-    </div>
-    {% if params.mediaHtml %}
-      <div class="{{ componentClassName + '__media'}}">
-        {{ params.mediaHtml }}
-      </div>
-    {% endif %}
-  {% endcall %}
-{% endmacro %}

package/components/teaser-breaking/teaser-breaking.scss

@@ -1,52 +0,0 @@
-@use "../../foundations/helpers/forward.helpers.scss" as *;
-@use "../../assets/teaser/teaser.scss" as *;
-
-.ds-teaser.ds-teaser--breaking {
-  display: flex;
-  flex-direction: column;
-  position: relative;
-
-  .ds-teaser__media {
-    padding: ds-spacing(0 0 $ds-s-100);
-
-    video {
-      max-width: 100%;
-    }
-  }
-
-  .ds-teaser__content {
-    display: flex;
-    flex-direction: row;
-    padding: ds-spacing($ds-s-075 $ds-s-100 $ds-s-100);
-    text-align: center;
-
-    .ds-teaser__content-inner {
-      display: flex;
-      flex-direction: column;
-      flex: 1;
-    }
-  }
-
-  &:focus-visible {
-    outline: none !important; /* stylelint-disable-line declaration-no-important */
-
-    .ds-teaser__content {
-      @include ds-teaser-focus(-8px, false);
-    }
-  }
-
-  .ds-teaser__vignette {
-    margin-top: ds-spacing($ds-s-025);
-  }
-
-  .ds-teaser__title {
-    @include ds-typography($ds-typography-detailteaser-breaking);
-    text-align: center;
-  }
-
-  @include ds-hover(true) {
-    .ds-teaser__title {
-      @include ds-underline(3px);
-    }
-  }
-}

package/components/teaser-card/teaser-card.tsx

@@ -1,44 +0,0 @@
-import { formatClassString } from "@bonniernews/dn-design-system-web/helpers/formatClassString.ts";
-
-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;
-}
-
-/**
- * - GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-card](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-card)
- * - Storybook: [Subcomponents > TeaserCard](https://designsystem.dn.se/?path=/docs/section-subcomponents-teaserdot--docs)
- *
- * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:
- * `@use '@bonniernews/dn-design-system-web/assets/teaser/teaser.scss'`
- */
-export const TeaserCard = ({ areaType, targetLink, theme = 'nyheter', classes, attributes, children }: TeaserCardsProps) => {
-  const componentClassName = 'ds-teaser';
-
-  const classNames = formatClassString([
-    componentClassName,
-    areaType && `${componentClassName}--${areaType}`,
-    areaType == 'bauta' && 'ds-dark',
-    `ds-theme--${theme}`,
-    classes,
-  ])
-
-  if (targetLink) {
-    return (
-      <a className={classNames} href={targetLink } {...attributes}>
-        { children }
-      </a>
-    );
-  }
-
-  return (
-    <div className={classNames}{...attributes}>
-      { children }
-    </div>
-  );
-};

package/components/teaser-onsite/teaser-onsite.tsx

@@ -1,43 +0,0 @@
-import { TeaserCard } from "@bonniernews/dn-design-system-web/components/teaser-card/teaser-card.tsx";
-import { formatClassString } from "@bonniernews/dn-design-system-web/helpers/formatClassString.ts";
-import { Body, Content, Media, Title } from "@bonniernews/dn-design-system-web/helpers/teaser.tsx";
-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;
-}
-
-/**
- * Also known as "På Plats-puffen".
- *
- * In the CMS title will be set to a location like "Kiev, Ukraina" or "USA" and text is usually set to some author names like "Jan Banan och Kalle Kula"
- *
- * - GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-onsite](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-onsite)
- * - Storybook: [TeaserOnSite](https://designsystem.dn.se/?path=/docs/section-teaseronsite--docs)
- *
- * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:
- * `@use '@bonniernews/dn-design-system-web/components/teaser-onsite/teaser-onsite.scss'`
- */
-export const TeaserOnSite = ({ areaType, targetLink, theme = 'nyheter', classNames, attributes, mediaHtml, title, text }: TeaserOnSiteProps) => {
-
-  const classes = formatClassString([
-    "ds-teaser--onsite",
-    classNames,
-  ])
-
-  return (
-    <TeaserCard { ...{ areaType, targetLink, theme, classes, attributes }}>
-      <Media { ...{ mediaHtml, rounded: true }}  />
-      <Content>
-        <Title title={`PÅ PLATS | ${title}`} />
-        <Body { ...{ text }} />
-      </Content>
-    </TeaserCard>
-  );
-};

package/components/thematic-break/thematic-break.tsx

@@ -1,27 +0,0 @@
-import { formatClassString } from "@bonniernews/dn-design-system-web/helpers/formatClassString.ts";
-
-export interface ThematicBreakProps {
-  classNames?: string;
-  attributes?: object;
-}
-
-/**
- * - GitHub: [BonnierNews/dn-design-system/../web/src/components/thematic-break](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/thematic-break)
- * - Storybook: [ThematicBreak](https://designsystem.dn.se/?path=/docs/article-thematicbreak--docs)
- *
- * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:
- * `@use '@bonniernews/dn-design-system-web/components/thematic-break/thematic-break.scss'`
- */
-
-export const ThematicBreak = ({ classNames, attributes }: ThematicBreakProps) => {
-  const classes = formatClassString([
-    'ds-thematic-break',
-    classNames
-  ])
-
-  return (
-    <div className={classes} {...attributes}><hr /></div>
-  );
-};
-
-export default ThematicBreak;

package/helpers/teaser.tsx

@@ -1,32 +0,0 @@
-interface MediaProps {
-  mediaHtml?: string;
-  rounded?: boolean;
-}
-
-export const Media = ({ mediaHtml, rounded }: MediaProps) => {
-  const classNames = 'ds-teaser__media' + (rounded ? ' ds-teaser__media--rounded' : '');
-  return mediaHtml && (<div className={classNames} dangerouslySetInnerHTML={{ __html: mediaHtml }} />)
-}
-
-interface ContentProps {
-  children: any;
-}
-export const Content = ({ children }: ContentProps) => {
-  return (<div className="ds-teaser__content">
-    {children}
-  </div>)
-}
-
-interface TitleProps {
-  title?: string;
-}
-export const Title = ({ title }: TitleProps) => {
-  return title && (<h2 className="ds-teaser__title">{title}</h2>)
-}
-
-interface BodyProps {
-  text?: string;
-}
-export const Body = ({ text }: BodyProps) => {
-  return text && (<p className="ds-teaser__text">{text}</p>)
-}

package/index.tsx

@@ -1,8 +0,0 @@
-import { Divider } from "./components/divider/divider";
-export { Divider };
-
-import { ThematicBreak } from "./components/thematic-break/thematic-break";
-export { ThematicBreak };
-
-import { Quote } from "./components/quote/quote";
-export { Quote };

package/preact/components.cjs

@@ -1,68 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// ../src/index.tsx
-var src_exports = {};
-__export(src_exports, {
-  Divider: () => Divider,
-  Quote: () => Quote,
-  ThematicBreak: () => ThematicBreak
-});
-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("preact/jsx-runtime");
-var Divider = ({ variant = "soft", classNames, attributes }) => {
-  const classes = formatClassString([
-    "ds-divider",
-    `ds-divider--${variant}`,
-    classNames
-  ]);
-  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("preact/jsx-runtime");
-var ThematicBreak = ({ classNames, attributes }) => {
-  const classes = formatClassString([
-    "ds-thematic-break",
-    classNames
-  ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: classes, ...attributes, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("hr", {}) });
-};
-
-// ../src/components/quote/quote.tsx
-var import_jsx_runtime3 = require("preact/jsx-runtime");
-var Quote = ({ bodyHtml, theme = "nyheter", classNames, attributes, forcePx }) => {
-  const componentClassName = "ds-quote";
-  const classes = formatClassString([
-    componentClassName,
-    `ds-theme--${theme}`,
-    forcePx && "ds-force-px",
-    classNames
-  ]);
-  const quoteHtml = `<span class="${componentClassName}__border"></span> ${bodyHtml}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("blockquote", { dangerouslySetInnerHTML: { __html: quoteHtml }, className: classes, ...attributes });
-};
-//# sourceMappingURL=components.cjs.map

package/preact/components.cjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "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\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/divider](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/divider)\n * - Storybook: [Divider](https://designsystem.dn.se/?path=/docs/basic-divider--docs)\n *\n * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:\n * `@use '@bonniernews/dn-design-system-web/components/divider/divider.scss'`\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\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/thematic-break](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/thematic-break)\n * - Storybook: [ThematicBreak](https://designsystem.dn.se/?path=/docs/article-thematicbreak--docs)\n *\n * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:\n * `@use '@bonniernews/dn-design-system-web/components/thematic-break/thematic-break.scss'`\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\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/quote](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/quote)\n * - Storybook: [Quote](https://designsystem.dn.se/?path=/docs/article-quote--docs)\n *\n * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:\n * `@use '@bonniernews/dn-design-system-web/components/quote/quote.scss'`\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;;;ACqB6C;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;;;ACH6C,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;;;ACOI,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/preact/components.esm.js

@@ -1,45 +0,0 @@
-// ../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 classes = formatClassString([
-    "ds-divider",
-    `ds-divider--${variant}`,
-    classNames
-  ]);
-  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 classes = formatClassString([
-    "ds-thematic-break",
-    classNames
-  ]);
-  return /* @__PURE__ */ jsx2("div", { className: classes, ...attributes, children: /* @__PURE__ */ jsx2("hr", {}) });
-};
-
-// ../src/components/quote/quote.tsx
-import { jsx as jsx3 } from "preact/jsx-runtime";
-var Quote = ({ bodyHtml, theme = "nyheter", classNames, attributes, forcePx }) => {
-  const componentClassName = "ds-quote";
-  const classes = formatClassString([
-    componentClassName,
-    `ds-theme--${theme}`,
-    forcePx && "ds-force-px",
-    classNames
-  ]);
-  const quoteHtml = `<span class="${componentClassName}__border"></span> ${bodyHtml}`;
-  return /* @__PURE__ */ jsx3("blockquote", { dangerouslySetInnerHTML: { __html: quoteHtml }, className: classes, ...attributes });
-};
-export {
-  Divider,
-  Quote,
-  ThematicBreak
-};
-//# sourceMappingURL=components.esm.js.map

package/preact/components.esm.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "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\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/divider](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/divider)\n * - Storybook: [Divider](https://designsystem.dn.se/?path=/docs/basic-divider--docs)\n *\n * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:\n * `@use '@bonniernews/dn-design-system-web/components/divider/divider.scss'`\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\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/thematic-break](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/thematic-break)\n * - Storybook: [ThematicBreak](https://designsystem.dn.se/?path=/docs/article-thematicbreak--docs)\n *\n * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:\n * `@use '@bonniernews/dn-design-system-web/components/thematic-break/thematic-break.scss'`\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\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/quote](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/quote)\n * - Storybook: [Quote](https://designsystem.dn.se/?path=/docs/article-quote--docs)\n *\n * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:\n * `@use '@bonniernews/dn-design-system-web/components/quote/quote.scss'`\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;;;ACqB6C;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;;;ACH6C,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;;;ACOI,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/preact/index.d.ts

@@ -1,6 +0,0 @@
-import { Divider } from "./components/divider/divider";
-export { Divider };
-import { ThematicBreak } from "./components/thematic-break/thematic-break";
-export { ThematicBreak };
-import { Quote } from "./components/quote/quote";
-export { Quote };

package/react/components/divider/divider.d.ts

@@ -1,14 +0,0 @@
-export interface DividerProps {
-    variant?: 'soft' | 'medium' | 'hard';
-    classNames?: string;
-    attributes?: object;
-}
-/**
- * - GitHub: [BonnierNews/dn-design-system/../web/src/components/divider](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/divider)
- * - Storybook: [Divider](https://designsystem.dn.se/?path=/docs/basic-divider--docs)
- *
- * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:
- * `@use '@bonniernews/dn-design-system-web/components/divider/divider.scss'`
- */
-export declare const Divider: ({ variant, classNames, attributes }: DividerProps) => import("react/jsx-runtime").JSX.Element;
-export default Divider;

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

@@ -1,16 +0,0 @@
-export interface QuoteProps {
-    bodyHtml: string;
-    theme?: 'kultur' | 'nyheter' | 'sport' | 'ekonomi' | 'sthlm';
-    classNames?: string;
-    /** Ex. { target: "_blank", "data-test": "lorem ipsum" } */
-    attributes?: object;
-    forcePx?: boolean;
-}
-/**
- * - GitHub: [BonnierNews/dn-design-system/../web/src/components/quote](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/quote)
- * - Storybook: [Quote](https://designsystem.dn.se/?path=/docs/article-quote--docs)
- *
- * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:
- * `@use '@bonniernews/dn-design-system-web/components/quote/quote.scss'`
- */
-export declare const Quote: ({ bodyHtml, theme, classNames, attributes, forcePx }: QuoteProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,17 +0,0 @@
-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;
-}
-/**
- * - GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-card](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-card)
- * - Storybook: [Subcomponents > TeaserCard](https://designsystem.dn.se/?path=/docs/section-subcomponents-teaserdot--docs)
- *
- * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:
- * `@use '@bonniernews/dn-design-system-web/assets/teaser/teaser.scss'`
- */
-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

@@ -1,23 +0,0 @@
-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;
-}
-/**
- * Also known as "På Plats-puffen".
- *
- * In the CMS title will be set to a location like "Kiev, Ukraina" or "USA" and text is usually set to some author names like "Jan Banan och Kalle Kula"
- *
- * - GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-onsite](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-onsite)
- * - Storybook: [TeaserOnSite](https://designsystem.dn.se/?path=/docs/section-teaseronsite--docs)
- *
- * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:
- * `@use '@bonniernews/dn-design-system-web/components/teaser-onsite/teaser-onsite.scss'`
- */
-export declare const TeaserOnSite: ({ areaType, targetLink, theme, classNames, attributes, mediaHtml, title, text }: TeaserOnSiteProps) => import("react/jsx-runtime").JSX.Element;

package/react/components/thematic-break/thematic-break.d.ts

@@ -1,13 +0,0 @@
-export interface ThematicBreakProps {
-    classNames?: string;
-    attributes?: object;
-}
-/**
- * - GitHub: [BonnierNews/dn-design-system/../web/src/components/thematic-break](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/thematic-break)
- * - Storybook: [ThematicBreak](https://designsystem.dn.se/?path=/docs/article-thematicbreak--docs)
- *
- * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:
- * `@use '@bonniernews/dn-design-system-web/components/thematic-break/thematic-break.scss'`
- */
-export declare const ThematicBreak: ({ classNames, attributes }: ThematicBreakProps) => import("react/jsx-runtime").JSX.Element;
-export default ThematicBreak;

package/react/components.cjs

@@ -1,68 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// ../src/index.tsx
-var src_exports = {};
-__export(src_exports, {
-  Divider: () => Divider,
-  Quote: () => Quote,
-  ThematicBreak: () => ThematicBreak
-});
-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 classes = formatClassString([
-    "ds-divider",
-    `ds-divider--${variant}`,
-    classNames
-  ]);
-  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 classes = formatClassString([
-    "ds-thematic-break",
-    classNames
-  ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: classes, ...attributes, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("hr", {}) });
-};
-
-// ../src/components/quote/quote.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var Quote = ({ bodyHtml, theme = "nyheter", classNames, attributes, forcePx }) => {
-  const componentClassName = "ds-quote";
-  const classes = formatClassString([
-    componentClassName,
-    `ds-theme--${theme}`,
-    forcePx && "ds-force-px",
-    classNames
-  ]);
-  const quoteHtml = `<span class="${componentClassName}__border"></span> ${bodyHtml}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("blockquote", { dangerouslySetInnerHTML: { __html: quoteHtml }, className: classes, ...attributes });
-};
-//# sourceMappingURL=components.cjs.map

package/react/components.cjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "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\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/divider](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/divider)\n * - Storybook: [Divider](https://designsystem.dn.se/?path=/docs/basic-divider--docs)\n *\n * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:\n * `@use '@bonniernews/dn-design-system-web/components/divider/divider.scss'`\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\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/thematic-break](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/thematic-break)\n * - Storybook: [ThematicBreak](https://designsystem.dn.se/?path=/docs/article-thematicbreak--docs)\n *\n * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:\n * `@use '@bonniernews/dn-design-system-web/components/thematic-break/thematic-break.scss'`\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\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/quote](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/quote)\n * - Storybook: [Quote](https://designsystem.dn.se/?path=/docs/article-quote--docs)\n *\n * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:\n * `@use '@bonniernews/dn-design-system-web/components/quote/quote.scss'`\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;;;ACqB6C;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;;;ACH6C,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;;;ACOI,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,45 +0,0 @@
-// ../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 classes = formatClassString([
-    "ds-divider",
-    `ds-divider--${variant}`,
-    classNames
-  ]);
-  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 classes = formatClassString([
-    "ds-thematic-break",
-    classNames
-  ]);
-  return /* @__PURE__ */ jsx2("div", { className: classes, ...attributes, children: /* @__PURE__ */ jsx2("hr", {}) });
-};
-
-// ../src/components/quote/quote.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
-var Quote = ({ bodyHtml, theme = "nyheter", classNames, attributes, forcePx }) => {
-  const componentClassName = "ds-quote";
-  const classes = formatClassString([
-    componentClassName,
-    `ds-theme--${theme}`,
-    forcePx && "ds-force-px",
-    classNames
-  ]);
-  const quoteHtml = `<span class="${componentClassName}__border"></span> ${bodyHtml}`;
-  return /* @__PURE__ */ jsx3("blockquote", { dangerouslySetInnerHTML: { __html: quoteHtml }, className: classes, ...attributes });
-};
-export {
-  Divider,
-  Quote,
-  ThematicBreak
-};
-//# sourceMappingURL=components.esm.js.map