@bonniernews/dn-design-system-web 20.4.5 → 20.5.1-beta.0

package/CHANGELOG.md

@@ -4,6 +4,15 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [20.5.1-beta.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@20.5.0...@bonniernews/dn-design-system-web@20.5.1-beta.0) (2024-10-02)
+
+## [20.5.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@20.4.5...@bonniernews/dn-design-system-web@20.5.0) (2024-09-26)
+
+
+### Features
+
+* **web:** empty state component ([#1411](https://github.com/BonnierNews/dn-design-system/issues/1411)) ([41e01c9](https://github.com/BonnierNews/dn-design-system/commit/41e01c9ca7bf102596249ffc579128e38a9bd533))
+
 ## [20.4.5](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@20.4.4...@bonniernews/dn-design-system-web@20.4.5) (2024-09-26)
 
 

package/components/divider/divider.tsx

@@ -0,0 +1,21 @@
+export interface DividerProps {
+  variant?: 'soft' | 'medium' | 'hard';
+  classNames?: string;
+  attributes?: object;
+}
+
+export const Divider = ({ variant = 'soft', classNames, attributes }: DividerProps) => {
+  const componentClassName = 'ds-divider';
+  const classNamePrefix = `${componentClassName}--`;
+  const classes = [
+    componentClassName,
+    `${classNamePrefix}${variant}`,
+    classNames
+  ].filter(Boolean).join(' ');
+
+  return (
+    <div className={classes} {...attributes}><hr /></div>
+  );
+};
+
+export default Divider;

package/components/empty-state/README.md

@@ -0,0 +1,40 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/basic/empty-state](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/basic/empty-state)
+- Storybook: [EmptyState](https://designsystem.dn.se/?path=/docs/basic-emptystate--docs)
+- Storybook (Latest): [EmptyState](https://designsystem-latest.dn.se/?path=/docs/basic-emptystate--docs)
+
+----
+
+# Empty state
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+| iconName | String | no | add, arrow_back, delete etc | | For all available icons see: https://designsystem.dn.se/?path=/story/foundations-icons--all-icons |
+| title | String | no | | | Title for empty state |
+| body | String | no | | | Describing text |
+| brandButton | Object | no | text | | Object with text, href (optional), classNames (optional) and attributes (optional).|
+| primaryButton | Object | no | text | | Object with text, href (optional), classNames (optional) and attributes (optional) |
+| classNames | String | no | | | Ex. "my-special-class" |
+| attributes | Object | no | | | Ex. { data-prop: value } |
+
+## Minimum requirement example
+
+### Nunjucks
+
+These are copy paste friendly examples to quickliy get started using a component.
+
+```html
+{% from '@bonniernews/dn-design-system-web/components/empty-state/empty-state.njk' import EmptyState %}
+
+{{ EmptyState({ 
+    iconName: "delete",
+    title: "Attans då...",
+    body: "Din sökning gav tyvärr inga träffar.",
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/basic/empty-state/empty-state" as *;
+```

package/components/empty-state/empty-state.njk

@@ -0,0 +1,62 @@
+{% from '@bonniernews/dn-design-system-web/components/pictogram/pictogram.njk' import Pictogram %}
+{% from '@bonniernews/dn-design-system-web/components/button/button.njk' import Button %}
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
+
+{% macro EmptyState(params) %}
+  {% set componentClassName = "ds-empty-state" %}
+
+  {%- set classes = [
+    componentClassName,
+    params.classNames if params.classNames
+  ] | join(" ") %}
+  {% set attributes = getAttributes(params.attributes) %}
+
+  <div class="{{ classes }}" {{- attributes | safe }}>
+      {% if params.iconName %}
+        {{ Pictogram({
+          variant: "brand",
+          size: "large",
+          iconName: params.iconName,
+          attributes: { "aria-label": params.body if params.body else "" }
+        })}}
+      {% endif %}
+
+      <div class="{{ componentClassName + '__text' }}">
+        {% if params.title %}
+          <h2>{{ params.title }}</h2>
+        {% endif %}
+        {% if params.body %}
+          <span class="{{ componentClassName + '__body' }}">{{ params.body }}</span>
+        {% endif %}
+      </div>
+
+      {% if params.brandButton or params.primaryButton %}
+        <div class="{{ componentClassName + '__button-wrapper' }}">
+          {% if params.brandButton %}
+            {{ Button({
+              text: params.brandButton.text,
+              variant: "brand",
+              href: params.brandButton.href,
+              classNames: params.brandButton.classNames,
+              attributes: params.brandButton.attributes,
+              forcePx: params.forcePx,
+              fullWidth: true
+            })}}
+          {% endif %}
+
+          {% if params.primaryButton %}
+            {{ Button({
+              text: params.primaryButton.text,
+              variant: "primary",
+              emphasis: "outline",
+              href: params.primaryButton.href,
+              classNames: params.primaryButton.classNames,
+              attributes: params.primaryButton.attributes,
+              forcePx: params.forcePx,
+              fullWidth: true
+            })}}
+          {% endif %}
+        </div>
+      {% endif %}
+  </div>
+{% endmacro %}

package/components/empty-state/empty-state.scss

@@ -0,0 +1,35 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../../components/pictogram/pictogram.scss" as *;
+@use "../../components/button/button.scss" as *;
+
+.ds-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+
+  .ds-empty-state__text {
+    margin-top: ds-spacing($ds-s-100);
+
+    h2 {
+      @include ds-typography($ds-typography-functionalheading03);
+      color: $ds-color-text-primary;
+      margin: 0;
+    }
+
+    .ds-empty-state__body {
+      @include ds-typography($ds-typography-functionalbody02);
+      display: block;
+      color: $ds-color-text-primary-02;
+      margin-top: ds-spacing($ds-s-025);
+    }
+  }
+
+  .ds-empty-state__button-wrapper {
+    margin-top: ds-spacing($ds-s-100);
+
+    .ds-btn + .ds-btn {
+      margin-top: ds-spacing($ds-s-050);
+    }
+  }
+}

package/components/list-item/list-item.js

@@ -1,4 +1,4 @@
-import {dsButtonToggle} from '@bonniernews/dn-design-system-web/components/button/button';
+import {dsButtonToggle} from '@bonniernews/dn-design-system-web/components/button/button.js';
 
 export {
   dsListItem,

package/components/teaser-image/teaser-image.scss

@@ -7,15 +7,13 @@
   margin: 0;
 
   .ds-teaser-image__byline {
+    @include ds-typography($ds-typography-functionalmeta01, $lineHeight: $ds-lineheight-l);
     position: absolute;
     bottom: 0;
     right: 0;
     padding: ds-spacing(0 $ds-s-025);
     margin-left: ds-spacing($ds-s-050);
-
-    @include ds-typography($ds-typography-functionalmeta01, $lineHeight: $ds-lineheight-l);
     color: $ds-color-static-white;
-
     background-color: $ds-color-static-transparent-black;
     z-index: 5;
   }

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

@@ -0,0 +1,18 @@
+export interface ThematicBreakProps {
+  classNames?: string;
+  attributes?: object;
+}
+
+export const ThematicBreak = ({ classNames, attributes }: ThematicBreakProps) => {
+  const componentClassName = 'ds-thematic-break';
+  const classes = [
+    componentClassName,
+    classNames
+  ].filter(Boolean).join(' ');
+
+  return (
+    <div className={classes} {...attributes}><hr /></div>
+  );
+};
+
+export default ThematicBreak;

package/index.tsx

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

package/package.json

@@ -1,8 +1,10 @@
 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "20.4.5",
+  "version": "20.5.1-beta.0",
   "description": "DN design system for web.",
-  "main": "index.js",
+  "main": "index.tsx",
+  "type": "module",
+  "source": "index.tsx",
   "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",
   "repository": {
     "type": "git",
@@ -14,18 +16,63 @@
   "bugs": {
     "url": "https://github.com/BonnierNews/dn-design-system/issues"
   },
+  "exports": {
+    "./preact": {
+      "import": "./preact/components.esm.js",
+      "require": "./preact/components.cjs"
+    },
+    "./react": {
+      "import": "./react/components.esm.js",
+      "require": "./react/components.cjs"
+    },
+    "./assets/*.tsx": "./assets/*.tsx",
+    "./assets/*.njk": "./assets/*.njk",
+    "./assets/*.scss": "./assets/*.scss",
+    "./components/*.tsx": "./components/*.tsx",
+    "./components/*.njk": "./components/*.njk",
+    "./components/*.md": "./components/*.md",
+    "./components/*.js": "./components/*.js",
+    "./components/*.scss": "./components/*.scss",
+    "./components/*.css": "./components/*.css",
+    "./introduction/*.md": "./introduction/*.md",
+    "./foundations/*": "./foundations/*",
+    "./tokens/*.json": "./tokens/*.json",
+    "./package.json": "./package.json"
+  },
+  "peerDependencies": {
+    "preact": "^10.24.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "peerDependenciesMeta": {
+    "preact": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
   "devDependencies": {
+    "@bonniernews/tsconfig": "^0.0.2",
     "@commitlint/cli": "^18.4.3",
     "@commitlint/config-conventional": "^18.4.3",
     "@release-it/conventional-changelog": "^8.0.1",
     "conventional-changelog-conventionalcommits": "^6.1.0",
+    "esbuild": "^0.24.0",
     "postcss": "8.4.31",
+    "preact": "^10.24.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "release-it": "^17.0.0",
     "stylelint": "^15.11.0",
     "stylelint-config-recommended-scss": "^13.1.0",
     "stylelint-prettier": "^4.0.2",
     "stylelint-sass-render-errors": "^3.0.1",
-    "stylelint-selector-bem-pattern": "^2.1.1"
+    "stylelint-selector-bem-pattern": "^2.1.1",
+    "typescript": "^5.6.2"
   },
   "scripts": {
     "lint:styles": "yarn stylelint \"**/*.scss\" \"!node_modules/\"",

package/preact/components/divider/divider.d.ts

@@ -0,0 +1,7 @@
+export interface DividerProps {
+    variant?: 'soft' | 'medium' | 'hard';
+    classNames?: string;
+    attributes?: object;
+}
+export declare const Divider: ({ variant, classNames, attributes }: DividerProps) => import("preact").JSX.Element;
+export default Divider;

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

@@ -0,0 +1,6 @@
+export interface ThematicBreakProps {
+    classNames?: string;
+    attributes?: object;
+}
+export declare const ThematicBreak: ({ classNames, attributes }: ThematicBreakProps) => import("preact").JSX.Element;
+export default ThematicBreak;

package/preact/components.cjs

@@ -0,0 +1,51 @@
+"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,
+  ThematicBreak: () => ThematicBreak
+});
+module.exports = __toCommonJS(src_exports);
+
+// ../src/components/divider/divider.tsx
+var import_jsx_runtime = require("preact/jsx-runtime");
+var Divider = ({ variant = "soft", classNames, attributes }) => {
+  const componentClassName = "ds-divider";
+  const classNamePrefix = `${componentClassName}--`;
+  const classes = [
+    componentClassName,
+    `${classNamePrefix}${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("preact/jsx-runtime");
+var ThematicBreak = ({ classNames, attributes }) => {
+  const componentClassName = "ds-thematic-break";
+  const classes = [
+    componentClassName,
+    classNames
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: classes, ...attributes, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("hr", {}) });
+};
+//# sourceMappingURL=components.cjs.map

package/preact/components.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../index.tsx", "../components/divider/divider.tsx", "../components/thematic-break/thematic-break.tsx"],
+  "sourcesContent": ["import { Divider } from \"./components/divider/divider\";\nexport { Divider };\n\nimport { ThematicBreak } from \"./components/thematic-break/thematic-break\";\nexport { ThematicBreak };\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"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;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;",
+  "names": ["import_jsx_runtime"]
+}

package/preact/components.esm.js

@@ -0,0 +1,28 @@
+// ../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}`,
+    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,
+    classNames
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx2("div", { className: classes, ...attributes, children: /* @__PURE__ */ jsx2("hr", {}) });
+};
+export {
+  Divider,
+  ThematicBreak
+};
+//# sourceMappingURL=components.esm.js.map

package/preact/components.esm.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../components/divider/divider.tsx", "../components/thematic-break/thematic-break.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"],
+  "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;",
+  "names": ["jsx"]
+}

package/preact/index.d.ts

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

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

@@ -0,0 +1,7 @@
+export interface DividerProps {
+    variant?: 'soft' | 'medium' | 'hard';
+    classNames?: string;
+    attributes?: object;
+}
+export declare const Divider: ({ variant, classNames, attributes }: DividerProps) => import("react/jsx-runtime").JSX.Element;
+export default Divider;

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

@@ -0,0 +1,6 @@
+export interface ThematicBreakProps {
+    classNames?: string;
+    attributes?: object;
+}
+export declare const ThematicBreak: ({ classNames, attributes }: ThematicBreakProps) => import("react/jsx-runtime").JSX.Element;
+export default ThematicBreak;

package/react/components.cjs

@@ -0,0 +1,51 @@
+"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,
+  ThematicBreak: () => ThematicBreak
+});
+module.exports = __toCommonJS(src_exports);
+
+// ../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}`,
+    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,
+    classNames
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: classes, ...attributes, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("hr", {}) });
+};
+//# sourceMappingURL=components.cjs.map

package/react/components.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../index.tsx", "../components/divider/divider.tsx", "../components/thematic-break/thematic-break.tsx"],
+  "sourcesContent": ["import { Divider } from \"./components/divider/divider\";\nexport { Divider };\n\nimport { ThematicBreak } from \"./components/thematic-break/thematic-break\";\nexport { ThematicBreak };\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"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;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;",
+  "names": ["import_jsx_runtime"]
+}

package/react/components.esm.js

@@ -0,0 +1,28 @@
+// ../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}`,
+    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,
+    classNames
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx2("div", { className: classes, ...attributes, children: /* @__PURE__ */ jsx2("hr", {}) });
+};
+export {
+  Divider,
+  ThematicBreak
+};
+//# sourceMappingURL=components.esm.js.map

package/react/components.esm.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../components/divider/divider.tsx", "../components/thematic-break/thematic-break.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"],
+  "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;",
+  "names": ["jsx"]
+}

package/react/index.d.ts

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

package/tsconfig-preact.json

@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxFactory": "",
+    "jsxFragmentFactory": "",
+    "jsxImportSource": "preact",
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "outDir": "./preact",
+  },
+}

package/tsconfig-react.json

@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxFactory": "",
+    "jsxFragmentFactory": "",
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "outDir": "./react",
+  },
+}

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "extends": "@bonniernews/tsconfig",
+  "include": ["index.tsx", "components/**/*.tsx"] ,
+  "compilerOptions": {
+    "moduleResolution": "Bundler",
+    "allowJs": true,
+    "sourceMap": true,
+    "skipLibCheck": false,
+    "rootDir": "./",
+    "allowUmdGlobalAccess": true,
+    "typeRoots": [
+      "node_modules/@types"
+    ],
+    "jsx": "react-jsx",
+    "jsxFactory": "",
+    "jsxFragmentFactory": "",
+  },
+  "lib": [
+    "ES2022"
+  ]
+}