@otto-de/b2b-core-components 1.0.0

package/dist/collection/components/modal/modal.js

@@ -0,0 +1,255 @@
+import { h, Host, } from '@stencil/core';
+import { isFocusable, isHidden, queryShadowRoot } from '../../utils/focus-trap';
+/** Modal component
+ * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-53
+ */
+export class ModalComponent {
+  constructor() {
+    this.focusableElements = [];
+    this.toggleIconHover = () => {
+      this.iconHover = !this.iconHover;
+    };
+    this.emitBeforeClose = (trigger) => {
+      const customEvent = this.b2bBeforeClose.emit({ trigger });
+      const prevented = customEvent.defaultPrevented;
+      if (!prevented) {
+        this.opened = false;
+      }
+    };
+    this.handleBackdropDismiss = () => {
+      this.backdropDismiss && this.emitBeforeClose('BACKDROP');
+    };
+    this.handleClickDismiss = () => {
+      this.emitBeforeClose('CLOSE_BUTTON');
+    };
+    this.handleTopFocus = () => {
+      this.attemptFocus(this.getLastFocusableElement());
+    };
+    this.handleBottomFocus = () => {
+      this.attemptFocus(this.getFirstFocusableElement());
+    };
+    this.heading = undefined;
+    this.opened = false;
+    this.backdropDismiss = false;
+    this.escDismiss = true;
+    this.variant = 'default';
+    this.iconHover = false;
+    this.isOpen = this.opened || false;
+  }
+  handleKeypress(event) {
+    if (!this.isOpen || !this.escDismiss) {
+      return;
+    }
+    if (event.key === 'Escape') {
+      this.emitBeforeClose('ESCAPE_KEY');
+      event.stopPropagation();
+    }
+  }
+  openedChanged(newValue) {
+    if (newValue === true) {
+      this.open();
+    }
+    else {
+      this.close();
+    }
+  }
+  attemptFocus(element) {
+    if (element === undefined || element === null) {
+      this.closeButton.focus();
+      return;
+    }
+    element.focus();
+  }
+  open() {
+    this.isOpen = true;
+  }
+  close() {
+    this.isOpen = false;
+    this.b2bClose.emit();
+  }
+  getFirstFocusableElement() {
+    return this.focusableElements[0];
+  }
+  getLastFocusableElement() {
+    return this.focusableElements[this.focusableElements.length - 1];
+  }
+  componentDidLoad() {
+    // Query all focusable elements and store them in `focusableElements`.
+    // Needed for the "focus trap" functionality.
+    this.focusableElements = queryShadowRoot(this.hostElement.shadowRoot, el => isHidden(el) || el.matches('[data-focus-trap-edge]'), isFocusable);
+  }
+  componentDidRender() {
+    this.attemptFocus(this.getFirstFocusableElement());
+  }
+  render() {
+    return (h(Host, null, h("div", { class: { 'b2b-modal': true, 'b2b-modal--open': this.opened } }, h("div", { "data-focus-trap-edge": true, onFocus: this.handleTopFocus, tabIndex: 0 }), h("div", { class: {
+        'b2b-modal-dialog': true,
+        [`b2b-modal-dialog--${this.variant}`]: true,
+      } }, h("div", { class: "b2b-modal-dialog--header" }, h("b2b-headline", { align: "center", size: "200", noMargin: true }, this.heading), h("button", { type: "button", class: "b2b-modal-dialog--close", onMouseEnter: this.toggleIconHover, onMouseLeave: this.toggleIconHover, onClick: this.handleClickDismiss, ref: el => (this.closeButton = el) }, h("b2b-icon", { icon: "b2b_icon-close", color: this.iconHover ? 'primary' : 'secondary' }))), h("div", { class: "b2b-modal-dialog--body" }, h("slot", null)), h("div", { class: "b2b-modal-dialog--footer" }, h("div", { class: "b2b-modal-dialog--footer-left" }, h("slot", { name: "footer-left" })), h("div", { class: "b2b-modal-dialog--footer-right" }, h("slot", { name: "footer-right" })))), h("div", { "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabIndex: 0 }), h("div", { class: "b2b-modal--backdrop", onClick: this.handleBackdropDismiss }))));
+  }
+  static get is() { return "b2b-modal"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["modal.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["modal.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "heading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The title for the modal. This is required."
+        },
+        "attribute": "heading",
+        "reflect": false
+      },
+      "opened": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether the modal is shown or not. Default is false"
+        },
+        "attribute": "opened",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "backdropDismiss": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "A boolean that indicates whether the modal can be dismissed by clicking\nin the backdrop outside the modal."
+        },
+        "attribute": "backdrop-dismiss",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "escDismiss": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "A boolean to indicate whether the modal can be dismissed by pressing\nthe escape key on the keyboard"
+        },
+        "attribute": "esc-dismiss",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'default' | 'large'",
+          "resolved": "\"default\" | \"large\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The size of the modal. If not specified, will assume the default size"
+        },
+        "attribute": "variant",
+        "reflect": false,
+        "defaultValue": "'default'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "iconHover": {},
+      "isOpen": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "b2bClose",
+        "name": "b2b-close",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "This even will be triggered when the modal is closed"
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
+        "method": "b2bBeforeClose",
+        "name": "b2b-before-close",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "This even will be triggered before the modal is closed"
+        },
+        "complexType": {
+          "original": "BeforeCloseEventDetail",
+          "resolved": "BeforeCloseEventDetail",
+          "references": {
+            "BeforeCloseEventDetail": {
+              "location": "import",
+              "path": "../../utils/interfaces/status.interface"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "hostElement"; }
+  static get watchers() {
+    return [{
+        "propName": "opened",
+        "methodName": "openedChanged"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "keydown",
+        "method": "handleKeypress",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

package/dist/collection/components/modal/modal.stories.js

@@ -0,0 +1,81 @@
+import { screen } from '@storybook/testing-library';
+import { getArgTypes } from '../../docs/config/utils';
+import { useArgs } from '@storybook/client-api';
+import { html } from 'lit-html';
+import modalDocs from './modal.docs.mdx';
+const Template = ({ opened, variant, heading, backdropDismiss, escDismiss, content, }) => {
+  const [_, updateArgs] = useArgs();
+  const openModal = () => {
+    updateArgs({ opened: true, variant, heading, backdropDismiss, escDismiss });
+  };
+  const closeModal = () => {
+    updateArgs({
+      opened: false,
+      variant,
+      heading,
+      backdropDismiss,
+      escDismiss,
+    });
+  };
+  return html `
+    <b2b-button variant="primary" @click=${openModal}>Open Modal</b2b-button>
+
+    <b2b-modal
+      @b2b-close=${closeModal}
+      id="modal"
+      opened="${opened}"
+      variant="${variant}"
+      heading="${heading}"
+      backdrop-dismiss="${backdropDismiss}"
+      esc-dismiss="${escDismiss}">
+      <div>${content}</div>
+      <b2b-paragraph slot="footer-left">* Left Slot</b2b-paragraph>
+      <b2b-button @click=${closeModal} slot="footer-right">Close</b2b-button>
+      <b2b-button slot="footer-right" variant="primary">Save</b2b-button>
+    </b2b-modal>
+  `;
+};
+const defaultArgs = {
+  heading: 'Modal Title',
+  opened: false,
+  escDismiss: false,
+  backdropDismiss: false,
+  variant: 'default',
+  content: 'This is a test modal*',
+};
+const largeContent = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum*.';
+// This play function is implemented for visual regression tests, so we can test modals opened
+const openModal = async () => {
+  const openModalButton = screen.getByText('Open Modal');
+  await openModalButton.click();
+};
+export const story010BackdropDismiss = Template.bind({});
+story010BackdropDismiss.args = Object.assign(Object.assign({}, defaultArgs), { backdropDismiss: true, heading: 'Modal with Backdrop Dismiss' });
+story010BackdropDismiss.storyName = 'Backdrop Dismiss';
+export const story020EscDismiss = Template.bind({});
+story020EscDismiss.args = Object.assign(Object.assign({}, defaultArgs), { escDismiss: true, heading: 'Modal with Escape Dismiss' });
+story020EscDismiss.storyName = 'Escape Dismiss';
+export const story030Default = Template.bind({});
+story030Default.args = Object.assign(Object.assign({}, defaultArgs), { heading: 'Default Modal Title' });
+story030Default.storyName = 'Default (small)';
+story030Default.play = async () => {
+  await openModal();
+};
+export const story040Large = Template.bind({});
+story040Large.args = Object.assign(Object.assign({}, defaultArgs), { variant: 'large', heading: 'Large Modal Title', content: largeContent });
+story040Large.storyName = 'Large';
+story040Large.play = async () => {
+  await openModal();
+};
+const controls = {};
+const modalArgs = getArgTypes('b2b-modal', controls);
+export default {
+  title: 'Components/Status & Feedback/Modal',
+  argTypes: modalArgs,
+  viewmode: 'docs',
+  parameters: {
+    docs: {
+      page: modalDocs,
+    },
+  },
+};

package/dist/collection/components/pagination/pagination.constants.js

@@ -0,0 +1,6 @@
+export var PaginationConstants;
+(function (PaginationConstants) {
+  PaginationConstants["DOTS"] = "...";
+  PaginationConstants["BACK"] = "\u2039";
+  PaginationConstants["NEXT"] = "Weiter \u203A";
+})(PaginationConstants || (PaginationConstants = {}));

package/dist/collection/components/pagination/pagination.css

@@ -0,0 +1,249 @@
+/**
+ * Do not edit directly
+ * Generated on Wed, 26 Apr 2023 14:13:51 GMT
+ */
+:root, :host {
+  --b2b-size-200: 5rem; /* 80px */
+  --b2b-size-160: 4rem; /* 64px */
+  --b2b-size-150: 3.75rem; /* 60px */
+  --b2b-size-140: 3.5rem; /* 56px */
+  --b2b-size-120: 3rem; /* 48px */
+  --b2b-size-100: 2.5rem; /* 40px */
+  --b2b-size-90: 2.25rem; /* 36px */
+  --b2b-size-80: 2rem; /* 32px */
+  --b2b-size-70: 1.75rem; /* 28px */
+  --b2b-size-60: 1.5rem; /* 24px */
+  --b2b-size-55: 1.375rem; /* 22px */
+  --b2b-size-53: 1.3125rem; /* 21px */
+  --b2b-size-50: 1.25rem; /* 20px */
+  --b2b-size-45: 1.125rem; /* 18px */
+  --b2b-size-40: 1rem; /* 16px */
+  --b2b-size-35: 0.875rem; /* 14px */
+  --b2b-size-30: 0.75rem; /* 12px */
+  --b2b-size-25: 0.625rem; /* 10px */
+  --b2b-size-20: 0.5rem; /* 8px */
+  --b2b-size-15: 0.375rem; /* 6px */
+  --b2b-size-10: 0.25rem; /* 4px */
+  --b2b-size-7: 0.1875rem; /* 3px */
+  --b2b-size-5: 0.125rem; /* 2px */
+  --b2b-size-1: 0.0625rem; /* 1px */
+  --b2b-font-weight-bold: 700;
+  --b2b-font-weight-normal: 400;
+  --b2b-font-weight-thin: 100;
+  --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
+  --b2b-color-table-expand-hover: #e6f4ff;
+  --b2b-color-table-selected-hover: #e6f4ff;
+  --b2b-color-table-selected-default: #cce9ff;
+  --b2b-color-table-hover: #e6f4ff;
+  --b2b-color-background-overlay-transparent-40: rgba(34, 34, 34, 0.25);
+  --b2b-color-background-overlay-transparent-80: rgba(34, 34, 34, 0.5);
+  --b2b-color-info-100: #003264;
+  --b2b-color-info-50: #ccd6e0;
+  --b2b-color-success-100: #326400;
+  --b2b-color-success-50: #d6e0cc;
+  --b2b-color-warning-100: #ffb432;
+  --b2b-color-warning-50: #ffd998;
+  --b2b-color-error-100: #e6344b;
+  --b2b-color-primary: #d4021d;
+  --b2b-color-red-200: #bb0004;
+  --b2b-color-red-150: #e6344b;
+  --b2b-color-red-100: #d4021d;
+  --b2b-color-red-50: #ffdde3;
+  --b2b-color-grey-400: #777777;
+  --b2b-color-grey-300: #9e9e9e;
+  --b2b-color-grey-250: #b1b1b1;
+  --b2b-color-grey-200: #c4c4c4;
+  --b2b-color-grey-150: #d5d5d5;
+  --b2b-color-grey-100: #e6e6e6;
+  --b2b-color-grey-50: #eeeeee;
+  --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-white-100: #ffffff;
+  --b2b-color-black-100: #222222;
+  --b2b-color-black-50: #333333;
+  --b2b-size-headline-line-height-400: var(--b2b-size-60);
+  --b2b-size-headline-line-height-200: var(--b2b-size-45);
+  --b2b-size-headline-line-height-100: var(--b2b-size-40);
+  --b2b-size-headline-400: var(--b2b-size-60);
+  --b2b-size-headline-200: var(--b2b-size-45);
+  --b2b-size-headline-100: var(--b2b-size-40);
+  --b2b-size-copy-line-height-300: var(--b2b-size-90);
+  --b2b-size-copy-line-height-200: var(--b2b-size-60);
+  --b2b-size-copy-line-height-125: var(--b2b-size-60);
+  --b2b-size-copy-line-height-100: var(--b2b-size-53); /* Will use 21px until design facelift */
+  --b2b-size-copy-line-height-75: var(--b2b-size-45); /* Will use 18px until design facelift */
+  --b2b-size-copy-line-height-50: var(--b2b-size-40);
+  --b2b-size-copy-300: var(--b2b-size-60);
+  --b2b-size-copy-200: var(--b2b-size-45);
+  --b2b-size-copy-125: var(--b2b-size-40);
+  --b2b-size-copy-100: var(--b2b-size-35);
+  --b2b-size-copy-75: var(--b2b-size-30);
+  --b2b-size-copy-50: var(--b2b-size-25);
+  --b2b-size-border-no-radius-bottom: var(--b2b-size-7) var(--b2b-size-7) 0 0;
+  --b2b-size-border-no-radius-top: 0 0 var(--b2b-size-7) var(--b2b-size-7);
+  --b2b-size-border-no-radius-right: var(--b2b-size-7) 0 0 var(--b2b-size-7);
+  --b2b-size-border-no-radius-left: 0 var(--b2b-size-7) var(--b2b-size-7) 0;
+  --b2b-size-border-radius-100: var(--b2b-size-7);
+  --b2b-size-border-width-150: var(--b2b-size-10);
+  --b2b-size-border-width-100: var(--b2b-size-5);
+  --b2b-size-border-width-50: var(--b2b-size-1);
+  --b2b-size-padding-175: var(--b2b-size-80);
+  --b2b-size-padding-150: var(--b2b-size-60);
+  --b2b-size-padding-100: var(--b2b-size-40);
+  --b2b-size-padding-50: var(--b2b-size-20);
+  --b2b-size-space-300: var(--b2b-size-200);
+  --b2b-size-space-250: var(--b2b-size-160);
+  --b2b-size-space-200: var(--b2b-size-100);
+  --b2b-size-space-175: var(--b2b-size-80);
+  --b2b-size-space-150: var(--b2b-size-60);
+  --b2b-size-space-100: var(--b2b-size-40);
+  --b2b-size-space-75: var(--b2b-size-30);
+  --b2b-size-space-50: var(--b2b-size-20);
+  --b2b-size-space-25: var(--b2b-size-10);
+  --b2b-size-icon-400: var(--b2b-size-120);
+  --b2b-size-icon-200: var(--b2b-size-80);
+  --b2b-size-icon-100: var(--b2b-size-60);
+  --b2b-size-icon-50: var(--b2b-size-40);
+  --b2b-color-table-expand-default: var(--b2b-color-grey-25);
+  --b2b-color-icon-inverted: var(--b2b-color-white-100);
+  --b2b-color-icon-secondary: var(--b2b-color-grey-400);
+  --b2b-color-icon-default: var(--b2b-color-black-100);
+  --b2b-color-headline-inverted: var(--b2b-color-white-100);
+  --b2b-color-headline-default: var(--b2b-color-black-100);
+  --b2b-color-headline-title: var(--b2b-color-red-100);
+  --b2b-color-copy-overlay: var(--b2b-color-white-100);
+  --b2b-color-copy-inverted: var(--b2b-color-white-100);
+  --b2b-color-copy-secondary: var(--b2b-color-grey-400);
+  --b2b-color-copy-default: var(--b2b-color-black-100);
+  --b2b-color-border-100: var(--b2b-color-grey-200);
+  --b2b-color-background-overlay: var(--b2b-color-black-100);
+  --b2b-color-background-card: var(--b2b-color-white-100);
+  --b2b-color-background-box: var(--b2b-color-white-100);
+  --b2b-color-background-page: var(--b2b-color-grey-25);
+  --b2b-color-error-50: var(--b2b-color-red-50);
+}
+/**
+ * Do not edit directly
+ * Generated on Wed, 26 Apr 2023 14:13:51 GMT
+ */
+:root [data-theme="dark"] {
+  --b2b-size-200: 5rem; /* 80px */
+  --b2b-size-160: 4rem; /* 64px */
+  --b2b-size-150: 3.75rem; /* 60px */
+  --b2b-size-140: 3.5rem; /* 56px */
+  --b2b-size-120: 3rem; /* 48px */
+  --b2b-size-100: 2.5rem; /* 40px */
+  --b2b-size-90: 2.25rem; /* 36px */
+  --b2b-size-80: 2rem; /* 32px */
+  --b2b-size-70: 1.75rem; /* 28px */
+  --b2b-size-60: 1.5rem; /* 24px */
+  --b2b-size-55: 1.375rem; /* 22px */
+  --b2b-size-53: 1.3125rem; /* 21px */
+  --b2b-size-50: 1.25rem; /* 20px */
+  --b2b-size-45: 1.125rem; /* 18px */
+  --b2b-size-40: 1rem; /* 16px */
+  --b2b-size-35: 0.875rem; /* 14px */
+  --b2b-size-30: 0.75rem; /* 12px */
+  --b2b-size-25: 0.625rem; /* 10px */
+  --b2b-size-20: 0.5rem; /* 8px */
+  --b2b-size-15: 0.375rem; /* 6px */
+  --b2b-size-10: 0.25rem; /* 4px */
+  --b2b-size-7: 0.1875rem; /* 3px */
+  --b2b-size-5: 0.125rem; /* 2px */
+  --b2b-size-1: 0.0625rem; /* 1px */
+  --b2b-font-weight-bold: 700;
+  --b2b-font-weight-normal: 400;
+  --b2b-font-weight-thin: 100;
+  --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
+  --b2b-color-info-100: #003264;
+  --b2b-color-info-50: #ccd6e0;
+  --b2b-color-success-100: #326400;
+  --b2b-color-success-50: #d6e0cc;
+  --b2b-color-warning-100: #ffb432;
+  --b2b-color-warning-50: #ffd998;
+  --b2b-color-error-100: #e6344b;
+  --b2b-color-primary: #d4021d;
+  --b2b-color-red-200: #bb0004;
+  --b2b-color-red-150: #e6344b;
+  --b2b-color-red-100: #d4021d;
+  --b2b-color-red-50: #ffdde3;
+  --b2b-color-grey-400: #777777;
+  --b2b-color-grey-300: #9e9e9e;
+  --b2b-color-grey-250: #b1b1b1;
+  --b2b-color-grey-200: #c4c4c4;
+  --b2b-color-grey-150: #d5d5d5;
+  --b2b-color-grey-100: #e6e6e6;
+  --b2b-color-grey-50: #eeeeee;
+  --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-white-100: #ffffff;
+  --b2b-color-black-100: #222222;
+  --b2b-color-black-50: #333333;
+  --b2b-color-icon-inverted: var(--b2b-color-black-100);
+  --b2b-color-icon-secondary: var(--b2b-color-grey-400);
+  --b2b-color-icon-default: var(--b2b-color-white-100);
+  --b2b-color-headline-inverted: var(--b2b-color-black-100);
+  --b2b-color-headline-default: var(--b2b-color-white-100);
+  --b2b-color-headline-title: var(--b2b-color-red-50);
+  --b2b-color-copy-inverted: var(--b2b-color-black-100);
+  --b2b-color-copy-secondary: var(--b2b-color-grey-100);
+  --b2b-color-copy-default: var(--b2b-color-white-100);
+  --b2b-color-border-100: var(--b2b-color-white-100);
+  --b2b-color-background-page: var(--b2b-color-grey-100);
+  --b2b-color-background-card: var(--b2b-color-black-50);
+  --b2b-color-background-box: var(--b2b-color-black-50);
+  --b2b-color-error-50: var(--b2b-color-red-50);
+}
+@font-face {
+  font-family: OttoSans;
+  src: url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans.ttf");
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: OttoSans;
+  src: url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.woff") format("woff"), url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.ttf") format("truetype");
+  font-weight: bold;
+  font-style: normal;
+}
+@font-face {
+  font-family: OttoSans;
+  src: url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.woff") format("woff"), url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.ttf") format("truetype");
+  font-weight: 100;
+  font-style: normal;
+}
+@font-face {
+  font-family: ObcIcons;
+  src: url("https://pattern-library.portal.otto.market/static/assets/fonts/obc-icons.woff");
+}
+.b2b-pagination {
+  display: flex;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  /* this is a workaround to force purgecss to include the overwrites of
+     the variables --b2b-border-right and --b2b-border-radius
+  */
+}
+.b2b-pagination li {
+  transition: opacity 0.3s ease, visibility 0.3s ease;
+}
+.b2b-pagination li:first-child:not(.b2b-pagination--first-item) {
+  margin-right: var(--b2b-size-15);
+}
+.b2b-pagination li:last-child:not(.b2b-pagination--last-item) {
+  margin-left: var(--b2b-size-15);
+}
+.b2b-pagination li.b2b-pagination--item b2b-button {
+  --b2b-border-radius: 0;
+  --b2b-border-right: 0;
+}
+.b2b-pagination li.b2b-pagination--first-item b2b-button {
+  --b2b-border-radius: var(--b2b-size-border-no-radius-right);
+}
+.b2b-pagination li.b2b-pagination--last-item b2b-button {
+  --b2b-border-right: 1px solid var(--b2b-button-secondary-border-color);
+  --b2b-border-radius: var(--b2b-size-border-no-radius-left);
+}
+.b2b-pagination .purge-css-include-variables {
+  border-radius: var(--b2b-border-radius);
+  border-right: var(--b2b-border-right);
+}