@otto-de/b2b-core-components 1.5.0 → 1.6.1

package/dist/collection/components/radio-group/radio-group.spec.js

@@ -0,0 +1,31 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { h } from '@stencil/core';
+import { RadioButtonGroupComponent } from './radio-group';
+it('should render the checkbox group and not show a hint or an error unless specified', async () => {
+  const page = await newSpecPage({
+    components: [RadioButtonGroupComponent],
+    template: () => (h("b2b-radio-group", { label: "test", name: "radio-test" })),
+  });
+  expect(page.root).toMatchSnapshot();
+});
+it('should render a group hint if a hint string is specified', async () => {
+  const page = await newSpecPage({
+    components: [RadioButtonGroupComponent],
+    template: () => (h("b2b-radio-group", { label: "test", hint: "this is a test hint", name: "radio-test" })),
+  });
+  expect(page.root).toMatchSnapshot();
+});
+it('should render a group error if a hint string and an error are specified and the group is set to invalid', async () => {
+  const page = await newSpecPage({
+    components: [RadioButtonGroupComponent],
+    template: () => (h("b2b-radio-group", { label: "test", name: "radio-test", hint: "this is a test hint", error: "this is a test error", invalid: true })),
+  });
+  expect(page.root).toMatchSnapshot();
+});
+it('should switch to horizontal alignment if specified', async () => {
+  const page = await newSpecPage({
+    components: [RadioButtonGroupComponent],
+    template: () => (h("b2b-radio-group", { label: "test", name: "radio-test", alignment: "horizontal" })),
+  });
+  expect(page.root).toMatchSnapshot();
+});

package/dist/collection/components/required-separator/required-separator.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 03 Jul 2023 11:38:27 GMT
+ * Generated on Tue, 22 Aug 2023 12:55:37 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 03 Jul 2023 11:38:27 GMT
+ * Generated on Tue, 22 Aug 2023 12:55:37 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -217,9 +217,9 @@
   font-size: var(--b2b-size-copy-100);
   font-family: var(--b2b-font-family-default);
 }
-:host .b2b-required-separator--label {
+:host .b2b-required-separator__label {
   margin-bottom: var(--b2b-size-20);
 }
-:host .b2b-required-separator--asterisk {
+:host .b2b-required-separator__asterisk {
   color: var(--b2b-color-red-100);
 }

package/dist/collection/components/required-separator/required-separator.e2e.js

@@ -0,0 +1,17 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('B2B Required Separator', () => {
+  let page;
+  it('should render', async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-required-separator></b2b-required-separator>`);
+    const element = await page.find('b2b-required-separator');
+    expect(element).not.toBeNull();
+  });
+  it('should change the label', async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-required-separator label="Required"></b2b-required-separator>`);
+    const element = await page.find({ text: 'Required' });
+    const label = element.textContent;
+    expect(label).toEqualText('Required');
+  });
+});

package/dist/collection/components/required-separator/required-separator.js

@@ -4,7 +4,7 @@ export class B2BRequiredSeparator {
     this.label = 'Pflichtfeld';
   }
   render() {
-    return (h(Host, null, h("div", { class: "b2b-required-separator--label" }, h("span", { class: "b2b-required-separator--asterisk" }, "* "), h("span", null, this.label)), h("b2b-separator", null)));
+    return (h(Host, null, h("div", { class: "b2b-required-separator__label" }, h("span", { class: "b2b-required-separator__asterisk" }, "* "), h("span", null, this.label)), h("b2b-separator", null)));
   }
   static get is() { return "b2b-required-separator"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/rounded-icon/rounded-icon.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 03 Jul 2023 11:38:27 GMT
+ * Generated on Tue, 22 Aug 2023 12:55:37 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 03 Jul 2023 11:38:27 GMT
+ * Generated on Tue, 22 Aug 2023 12:55:37 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/scrollable-container/scrollable-container.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 03 Jul 2023 11:38:27 GMT
+ * Generated on Tue, 22 Aug 2023 12:55:37 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 03 Jul 2023 11:38:27 GMT
+ * Generated on Tue, 22 Aug 2023 12:55:37 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/search/search.e2e.js

@@ -0,0 +1,97 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('B2B-Search', () => {
+  let page;
+  const optionsList = ['option1', 'option2', 'option3'];
+  const setOptionsList = async () => {
+    const search = await page.find('b2b-search');
+    search.setProperty('optionsList', optionsList);
+    await page.waitForChanges();
+  };
+  const typeInput = async (key = '8') => {
+    let input = await page.find('b2b-search >>> b2b-input-list');
+    // focus on input element, focus method did not work
+    await input.click();
+    await input.press(key);
+    await page.waitForChanges();
+  };
+  beforeEach(async () => {
+    page = await newE2EPage();
+    await page.setContent(`
+      <b2b-search placeholder='search here'></b2b-search>
+    `);
+  });
+  it('should register input text when enabled', async () => {
+    const search = await page.find('b2b-search');
+    await typeInput('8');
+    let inputValue = search.getAttribute('value');
+    expect(inputValue).toBe('8');
+  });
+  it('should not receive input text when disabled', async () => {
+    const search = await page.find('b2b-search');
+    search.setAttribute('disabled', true);
+    await page.waitForChanges();
+    await typeInput();
+    let inputValue = search.getAttribute('value');
+    expect(inputValue).toBe(null);
+  });
+  it('should emit search event when clicking search button', async () => {
+    const searchEventSpy = await page.spyOnEvent('b2b-search');
+    const button = await page.find('b2b-search >>> b2b-button');
+    await button.click();
+    expect(searchEventSpy).toHaveReceivedEvent();
+  });
+  it('should emit search event with search input data', async () => {
+    const searchString = 'some search value';
+    const searchEventSpy = await page.spyOnEvent('b2b-search');
+    const searchInputEventSpy = await page.spyOnEvent('b2b-input');
+    const input = await page.find('b2b-search >>> b2b-input-list');
+    await input.triggerEvent('b2b-input', { detail: { value: searchString } });
+    await page.waitForChanges();
+    const button = await page.find('b2b-search >>> b2b-button');
+    await button.click();
+    expect(searchInputEventSpy).toHaveReceivedEvent();
+    expect(searchEventSpy).toHaveReceivedEventDetail({
+      searchTerm: searchString,
+    });
+  });
+  it('should emit search event on enter press', async () => {
+    const searchString = 'some search value';
+    const searchEventSpy = await page.spyOnEvent('b2b-search');
+    const searchInputEventSpy = await page.spyOnEvent('b2b-input');
+    const input = await page.find('b2b-search >>> b2b-input-list');
+    await input.triggerEvent('b2b-input', { detail: { value: searchString } });
+    await page.waitForChanges();
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Enter');
+    expect(searchInputEventSpy).toHaveReceivedEvent();
+    expect(searchEventSpy).toHaveReceivedEventDetail({
+      searchTerm: searchString,
+    });
+  });
+  it('should emit input event when typing on input', async () => {
+    const searchString = 'some search value';
+    const inputEventSpy = await page.spyOnEvent('b2b-input');
+    const input = await page.find('b2b-search >>> b2b-input-list');
+    await input.triggerEvent('b2b-input', { detail: { value: searchString } });
+    await page.waitForChanges();
+    expect(inputEventSpy).toHaveReceivedEvent();
+    expect(inputEventSpy).toHaveReceivedEventDetail({ value: searchString });
+  });
+  it('should emit selected option when clicking search button', async () => {
+    await setOptionsList();
+    const searchEventSpy = await page.spyOnEvent('b2b-search');
+    const input = await page.find('b2b-search >>> b2b-input-list');
+    // focus on input element, focus method did not work
+    await input.click();
+    await input.press('8');
+    await page.waitForChanges();
+    // Click first option on the list
+    const option = await page.find({ text: optionsList[0] });
+    await option.click();
+    const button = await page.find('b2b-search >>> b2b-button');
+    await button.click();
+    expect(searchEventSpy).toHaveReceivedEventDetail({
+      searchTerm: optionsList[0],
+    });
+  });
+});

package/dist/collection/components/separator/separator.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 03 Jul 2023 11:38:27 GMT
+ * Generated on Tue, 22 Aug 2023 12:55:37 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 03 Jul 2023 11:38:27 GMT
+ * Generated on Tue, 22 Aug 2023 12:55:37 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/separator/separator.e2e.js

@@ -0,0 +1,22 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('B2B-Separator', () => {
+  let page;
+  it('renders', async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-separator></b2b-separator>`);
+    const element = await page.find('b2b-separator');
+    expect(element).not.toBeNull();
+  });
+  it('displays a vertical separator', async () => {
+    page = await newE2EPage();
+    await page.setContent(`<div style="height: 18px;"><b2b-separator alignment="vertical"></b2b-separator></div>`);
+    const element = await page.find('b2b-separator >>> div');
+    expect(element).toHaveClass('b2b-separator--vertical');
+  });
+  it('displays a horizontal separator', async () => {
+    page = await newE2EPage();
+    await page.setContent(`<div style="width: 18px;"><b2b-separator alignment="horizontal"></b2b-separator></div>`);
+    const element = await page.find('b2b-separator >>> div');
+    expect(element).toHaveClass('b2b-separator--horizontal');
+  });
+});

package/dist/collection/components/spinner/spinner.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 03 Jul 2023 11:38:27 GMT
+ * Generated on Tue, 22 Aug 2023 12:55:37 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 03 Jul 2023 11:38:27 GMT
+ * Generated on Tue, 22 Aug 2023 12:55:37 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/spinner/spinner.e2e.js

@@ -0,0 +1,12 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('B2B-Spinner', () => {
+  let page;
+  beforeEach(async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-spinner></b2b-spinner>`);
+  });
+  it('should render spinner component', async () => {
+    const element = await page.find('b2b-spinner');
+    expect(element).not.toBeNull();
+  });
+});

package/dist/collection/components/spinner/spinner.spec.js

@@ -0,0 +1,41 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { h } from '@stencil/core';
+import { SpinnerComponent } from './spinner';
+describe('B2B-Spinner', () => {
+  async function renderPage(template) {
+    return newSpecPage({
+      components: [SpinnerComponent],
+      template: () => template,
+    });
+  }
+  it('should render spinner with default attributes', async () => {
+    const page = await renderPage(h("b2b-spinner", null));
+    expect(page.root).toEqualHtml(`
+      <b2b-spinner>
+        <mock:shadow-root>
+          <div class="b2b-spinner b2b-spinner--size-100 b2b-spinner--color-primary"></div>
+        </mock:shadow-root>
+      </b2b-spinner>
+		`);
+  });
+  it('should render spinner with small size', async () => {
+    const page = await renderPage(h("b2b-spinner", { size: "50" }));
+    expect(page.root).toEqualHtml(`
+      <b2b-spinner>
+        <mock:shadow-root>
+          <div class="b2b-spinner b2b-spinner--size-50 b2b-spinner--color-primary"></div>
+        </mock:shadow-root>
+    	</b2b-spinner>
+		`);
+  });
+  it('should render spinner with inverse color', async () => {
+    const page = await renderPage(h("b2b-spinner", { color: "inverse" }));
+    expect(page.root).toEqualHtml(`
+      <b2b-spinner>
+        <mock:shadow-root>
+          <div class="b2b-spinner b2b-spinner--size-100 b2b-spinner--color-inverse"></div>
+        </mock:shadow-root>
+    	</b2b-spinner>
+		`);
+  });
+});

package/dist/collection/components/tab/tab.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 03 Jul 2023 11:38:27 GMT
+ * Generated on Tue, 22 Aug 2023 12:55:37 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 03 Jul 2023 11:38:27 GMT
+ * Generated on Tue, 22 Aug 2023 12:55:37 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/tab/tab.e2e.js

@@ -0,0 +1,35 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('B2B Tab', () => {
+  let page;
+  beforeEach(async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-tab>Tab 1</b2b-tab>`);
+  });
+  it('should render the tab component', async () => {
+    const element = await page.find('b2b-tab');
+    expect(element).not.toBeNull();
+  });
+  it('should emit when selected changes', async () => {
+    const selectedSpy = await page.spyOnEvent('b2b-change');
+    await page.$eval('b2b-tab', (element) => {
+      element.selected = true;
+    });
+    await page.waitForChanges();
+    expect(selectedSpy).toHaveReceivedEvent();
+  });
+  it('should focus on the tab if it is selected', async () => {
+    const element = await page.find('b2b-tab');
+    const selectedBefore = await element.getProperty('selected');
+    expect(selectedBefore).toBe(false);
+    await page.$eval('b2b-tab', (element) => {
+      element.selected = true;
+    });
+    await page.waitForChanges();
+    const selectedAfter = await element.getProperty('selected');
+    expect(selectedAfter).toBe(true);
+    const focus = await page.evaluate(() => {
+      return document.activeElement.ariaSelected;
+    });
+    expect(focus).not.toBeNull();
+  });
+});

package/dist/collection/components/tab/tab.spec.js

@@ -0,0 +1,31 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { h } from '@stencil/core';
+import { B2bTabComponent } from './tab';
+it('should match the snapshot', async () => {
+  const page = await newSpecPage({
+    components: [B2bTabComponent],
+    template: () => h("b2b-tab", null, "Tab 1"),
+  });
+  expect(page.root).toMatchSnapshot();
+});
+it('should not be selected by default', async () => {
+  const page = await newSpecPage({
+    components: [B2bTabComponent],
+    template: () => h("b2b-tab", null, "Tab 1"),
+  });
+  expect(page.rootInstance.selected).toBe(false);
+});
+it('should not have an error by default', async () => {
+  const page = await newSpecPage({
+    components: [B2bTabComponent],
+    template: () => h("b2b-tab", null, "Tab 1"),
+  });
+  expect(page.rootInstance.invalid).toBe(false);
+});
+it('should not be disabled by default', async () => {
+  const page = await newSpecPage({
+    components: [B2bTabComponent],
+    template: () => h("b2b-tab", null, "Tab 1"),
+  });
+  expect(page.rootInstance.disabled).toBe(false);
+});

package/dist/collection/components/tab-group/tab-group.e2e.js

@@ -0,0 +1,98 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('B2B Tab Group', () => {
+  let page;
+  beforeEach(async () => {
+    page = await newE2EPage();
+    await page.setContent(`
+        <b2b-tab-group>
+        <b2b-tab slot="tab">
+          First Tab
+        </b2b-tab>
+        <b2b-tab-panel slot="panel">
+          First Panel
+        </b2b-tab-panel>
+        <b2b-tab slot="tab">
+          Second Tab
+        </b2b-tab>
+        <b2b-tab-panel slot="panel">
+          Second Panel
+        </b2b-tab-panel>
+        <b2b-tab slot="tab" disabled="true">
+        Disabled Tab
+      </b2b-tab>
+      <b2b-tab-panel slot="panel">
+        Disabled Panel
+      </b2b-tab-panel>
+      </b2b-tab-group>
+        `);
+  });
+  it('should render the tab group', async () => {
+    const element = await page.find('b2b-tab-group');
+    expect(element).not.toBeNull();
+  });
+  it('should select the first tab by default', async () => {
+    const tab = await page.find('b2b-tab');
+    const selected = await tab.getProperty('selected');
+    expect(selected).toBe(true);
+  });
+  it('should show the panel associated with the tab that is selected', async () => {
+    const tab = await page.find({ text: 'First Tab' });
+    const selected = await tab.getProperty('selected');
+    expect(selected).toBe(true);
+    const panel = await page.find({ text: 'First Panel' });
+    expect(await panel.isVisible()).toBe(true);
+  });
+  it('should not select a disabled tab', async () => {
+    const tab = await page.find({ text: 'Disabled Tab' });
+    const panel = await page.find({ text: 'Disabled Panel' });
+    const selected = await tab.getProperty('selected');
+    expect(selected).toBe(false);
+    await tab.click();
+    await page.waitForChanges();
+    const selectedAfter = await tab.getProperty('selected');
+    expect(selectedAfter).toBe(false);
+    expect(await panel.isVisible()).toBe(false);
+  });
+  it('should navigate to the next enabled tab using the keyboard', async () => {
+    const tabs = await page.findAll('b2b-tab');
+    expect(await tabs[0].getProperty('selected')).toBe(true);
+    await page.keyboard.down('ArrowRight');
+    await page.waitForChanges();
+    expect(await tabs[1].getProperty('selected')).toBe(true);
+    await page.keyboard.press('ArrowRight');
+    await page.waitForChanges();
+    expect(await tabs[2].getProperty('selected')).toBe(false);
+    expect(await tabs[0].getProperty('selected')).toBe(true);
+  });
+  it('should navigate to the previous tab using the keyboard', async () => {
+    const tabs = await page.findAll('b2b-tab');
+    expect(await tabs[0].getProperty('selected')).toBe(true);
+    await page.keyboard.down('ArrowLeft');
+    await page.waitForChanges();
+    // second tab is selected because it is first enabled from last
+    expect(await tabs[1].getProperty('selected')).toBe(true);
+    await page.keyboard.press('ArrowLeft');
+    await page.waitForChanges();
+    // first tab is selected because last tab is disabled
+    expect(await tabs[0].getProperty('selected')).toBe(true);
+  });
+  it('should emit when a new tab is selected', async () => {
+    const changeSpy = await page.spyOnEvent('b2b-selected');
+    const secondTab = await page.find({ text: 'Second Tab' });
+    await secondTab.click();
+    await page.waitForChanges();
+    expect(changeSpy).toHaveReceivedEvent();
+  });
+  it('should not navigate when external navigation is used', async () => {
+    const tabGroup = await page.find('b2b-tab-group');
+    await tabGroup.setProperty('useRouter', true);
+    await page.waitForChanges();
+    const tabs = await page.findAll('b2b-tab');
+    expect(await tabs[0].getProperty('selected')).toBe(true);
+    await page.keyboard.press('ArrowRight');
+    await page.waitForChanges();
+    await tabs[1].click();
+    await page.waitForChanges();
+    expect(await tabs[1].getProperty('selected')).toBe(false);
+  });
+});

package/dist/collection/components/tab-panel/tab-panel.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 03 Jul 2023 11:38:27 GMT
+ * Generated on Tue, 22 Aug 2023 12:55:37 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 03 Jul 2023 11:38:27 GMT
+ * Generated on Tue, 22 Aug 2023 12:55:37 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/tab-panel/tab-panel.e2e.js

@@ -0,0 +1,12 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('B2B Tab Panel', () => {
+  let page;
+  beforeEach(async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-tab-panel name="tab-1">Tab 1</b2b-tab-panel>`);
+  });
+  it('should render the tab panel', async () => {
+    const element = await page.find('b2b-tab-panel');
+    expect(element).not.toBeNull();
+  });
+});

package/dist/collection/components/tab-panel/tab-panel.spec.js

@@ -0,0 +1,10 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { h } from '@stencil/core';
+import { B2bTabPanelComponent } from './tab-panel';
+it('should match the snapshot', async () => {
+  const page = await newSpecPage({
+    components: [B2bTabPanelComponent],
+    template: () => h("b2b-tab-panel", null, "Tab 1"),
+  });
+  expect(page.root).toMatchSnapshot();
+});

package/dist/collection/components/table/stories.data.js

@@ -6,36 +6,36 @@ export const sampleData = {
       'Name A',
       'Content 1',
       'Content 1',
-      html ` <b2b-button>Action</b2b-button>`,
+      html ` <b2b-button size="50">Action</b2b-button>`,
     ],
     [
       'Name B',
       'Content 2',
       'Content 2',
-      html ` <b2b-button>Action</b2b-button>`,
+      html ` <b2b-button size="50">Action</b2b-button>`,
     ],
     [
       'Name C',
       'Content 3',
       'Content 3',
-      html ` <b2b-button>Action</b2b-button>`,
+      html ` <b2b-button size="50">Action</b2b-button>`,
     ],
     [
       'Name D',
       'Content 4',
       'Very, very, long, long data text that wraps over to next line',
-      html ` <b2b-button>Action</b2b-button>`,
+      html ` <b2b-button size="50">Action</b2b-button>`,
     ],
   ],
 };
 export const smallSampleData = {
   columns: ['Column 1', 'Column 2', 'Column 3'],
   rows: [
-    ['Name A', 'Content 1', html ` <b2b-button>Action</b2b-button>`],
+    ['Name A', 'Content 1', html ` <b2b-button size="50">Action</b2b-button>`],
     [
       'Name D',
       'Very long data text that wraps over to next line, Very long data text that wraps over to next line',
-      html ` <b2b-button>Action</b2b-button>`,
+      html ` <b2b-button size="50">Action</b2b-button>`,
     ],
   ],
 };

package/dist/collection/components/table/table-cell/table-cell.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 03 Jul 2023 11:38:27 GMT
+ * Generated on Tue, 22 Aug 2023 12:55:37 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 03 Jul 2023 11:38:27 GMT
+ * Generated on Tue, 22 Aug 2023 12:55:37 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */