@scania/tegel 0.0.61 → 0.0.71-beta

package/dist/collection/foundations-stories/spacing/spacing-element.stories.js

@@ -1,101 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Foundations/Spacing',
-  parameters: {
-    layout: 'fullscreen',
-  },
-};
-const Template = () => formatHtmlPreview(`
-  <style>
-    /* Demo code for presentation purposes */
-    .sdds-spacing-element-demo-box {
-      background-color: var(--sdds-red-500);
-      display: inline-block;
-    }
-    table th, table td {
-      padding: 8px;
-      text-align: center;
-    }
-
-    th:last-child {
-        text-align: left;
-    }
-    th:last-child,
-    td:last-child {
-      text-align: left;
-    }
-  </style>
-
-  <h4>Spacing Element</h4>
-  <table>
-    <tr>
-      <th>Px</th>
-      <th>Token</th>
-      <th>CSS</th>
-      <th>Scale</th>
-    </tr>
-    <tr>
-      <td>2px</td>
-      <td><code>$spacing-element-2</code></td>
-      <td><code>.sdds-spacing-element-2</code></td>
-      <td><span class="sdds-spacing-element-demo-box" style="width: var(--sdds-spacing-element-2); height: var(--sdds-spacing-element-2)"></span></td>
-    </tr>
-    <tr>
-      <td>4px</td>
-      <td><code>$spacing-element-4</code></td>
-      <td><code>.sdds-spacing-element-4</code></td>
-      <td><span class="sdds-spacing-element-demo-box" style="width: var(--sdds-spacing-element-4); height: var(--sdds-spacing-element-4)"></span></td>
-    </tr>
-    <tr>
-      <td>8px</td>
-      <td><code>$spacing-element-8</code></td>
-      <td><code>.sdds-spacing-element-8</code></td>
-      <td><span class="sdds-spacing-element-demo-box" style="width: var(--sdds-spacing-element-8); height: var(--sdds-spacing-element-8)"></span></td>
-    </tr>
-    <tr>
-      <td>12px</td>
-      <td><code>$spacing-element-12</code></td>
-      <td><code>.sdds-spacing-element-12</code></td>
-      <td><span class="sdds-spacing-element-demo-box" style="width: var(--sdds-spacing-element-12); height: var(--sdds-spacing-element-12);"></span></td>
-    </tr>
-    <tr>
-      <td>16px</td>
-      <td><code>$spacing-element-16</code></td>
-      <td><code>.sdds-spacing-element-16</code></td>
-      <td><span class="sdds-spacing-element-demo-box" style="width: var(--sdds-spacing-element-16); height: var(--sdds-spacing-element-16);"></span></td>
-    </tr>
-    <tr>
-      <td>20px</td>
-      <td><code>$spacing-element-20</code></td>
-      <td><code>.sdds-spacing-element-20</code></td>
-      <td><span class="sdds-spacing-element-demo-box" style="width: var(--sdds-spacing-element-20); height: var(--sdds-spacing-element-20);"></span></td>
-    </tr>
-    <tr>
-      <td>24px</td>
-      <td><code>$spacing-element-24</code></td>
-      <td><code>.sdds-spacing-element-24</code></td>
-      <td><span class="sdds-spacing-element-demo-box" style="width: var(--sdds-spacing-element-24); height: var(--sdds-spacing-element-24);"></span></td>
-    </tr>
-    <tr>
-      <td>32px</td>
-      <td><code>$spacing-element-32</code></td>
-      <td><code>.sdds-spacing-element-32</code></td>
-      <td><span class="sdds-spacing-element-demo-box" style="width: var(--sdds-spacing-element-32); height: var(--sdds-spacing-element-32);"></span></td>
-    </tr>
-    <tr>
-      <td>40px</td>
-      <td><code>$spacing-element-40</code></td>
-      <td><code>.sdds-spacing-element-40</code></td>
-      <td><span class="sdds-spacing-element-demo-box" style="width: var(--sdds-spacing-element-40); height: var(--sdds-spacing-element-40);"></span></td>
-    </tr>
-    <tr>
-      <td>48px</td>
-      <td><code>$spacing-element-48</code></td>
-      <td><code>.sdds-spacing-element-48</code></td>
-      <td><span class="sdds-spacing-element-demo-box" style="width: var(--sdds-spacing-element-48); height: var(--sdds-spacing-element-48);"></span></td>
-    </tr>
-  </table>
-  `);
-export const SpacingElement = Template.bind({});
-SpacingElement.args = {};
-//# sourceMappingURL=spacing-element.stories.js.map

package/dist/collection/foundations-stories/spacing/spacing-element.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"spacing-element.stories.js","sourceRoot":"","sources":["../../../src/foundations-stories/spacing/spacing-element.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,qBAAqB;EAC5B,UAAU,EAAE;IACV,MAAM,EAAE,YAAY;GACrB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,GAAG,EAAE,CACpB,iBAAiB,CACf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0FD,CACA,CAAC;AAEJ,MAAM,CAAC,MAAM,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,cAAc,CAAC,IAAI,GAAG,EAAE,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Foundations/Spacing',\n  parameters: {\n    layout: 'fullscreen',\n  },\n};\n\nconst Template = () =>\n  formatHtmlPreview(\n    `\n  <style>\n    /* Demo code for presentation purposes */\n    .sdds-spacing-element-demo-box {\n      background-color: var(--sdds-red-500);\n      display: inline-block;\n    }\n    table th, table td {\n      padding: 8px;\n      text-align: center;\n    }\n\n    th:last-child {\n        text-align: left;\n    }\n    th:last-child,\n    td:last-child {\n      text-align: left;\n    }\n  </style>\n\n  <h4>Spacing Element</h4>\n  <table>\n    <tr>\n      <th>Px</th>\n      <th>Token</th>\n      <th>CSS</th>\n      <th>Scale</th>\n    </tr>\n    <tr>\n      <td>2px</td>\n      <td><code>$spacing-element-2</code></td>\n      <td><code>.sdds-spacing-element-2</code></td>\n      <td><span class=\"sdds-spacing-element-demo-box\" style=\"width: var(--sdds-spacing-element-2); height: var(--sdds-spacing-element-2)\"></span></td>\n    </tr>\n    <tr>\n      <td>4px</td>\n      <td><code>$spacing-element-4</code></td>\n      <td><code>.sdds-spacing-element-4</code></td>\n      <td><span class=\"sdds-spacing-element-demo-box\" style=\"width: var(--sdds-spacing-element-4); height: var(--sdds-spacing-element-4)\"></span></td>\n    </tr>\n    <tr>\n      <td>8px</td>\n      <td><code>$spacing-element-8</code></td>\n      <td><code>.sdds-spacing-element-8</code></td>\n      <td><span class=\"sdds-spacing-element-demo-box\" style=\"width: var(--sdds-spacing-element-8); height: var(--sdds-spacing-element-8)\"></span></td>\n    </tr>\n    <tr>\n      <td>12px</td>\n      <td><code>$spacing-element-12</code></td>\n      <td><code>.sdds-spacing-element-12</code></td>\n      <td><span class=\"sdds-spacing-element-demo-box\" style=\"width: var(--sdds-spacing-element-12); height: var(--sdds-spacing-element-12);\"></span></td>\n    </tr>\n    <tr>\n      <td>16px</td>\n      <td><code>$spacing-element-16</code></td>\n      <td><code>.sdds-spacing-element-16</code></td>\n      <td><span class=\"sdds-spacing-element-demo-box\" style=\"width: var(--sdds-spacing-element-16); height: var(--sdds-spacing-element-16);\"></span></td>\n    </tr>\n    <tr>\n      <td>20px</td>\n      <td><code>$spacing-element-20</code></td>\n      <td><code>.sdds-spacing-element-20</code></td>\n      <td><span class=\"sdds-spacing-element-demo-box\" style=\"width: var(--sdds-spacing-element-20); height: var(--sdds-spacing-element-20);\"></span></td>\n    </tr>\n    <tr>\n      <td>24px</td>\n      <td><code>$spacing-element-24</code></td>\n      <td><code>.sdds-spacing-element-24</code></td>\n      <td><span class=\"sdds-spacing-element-demo-box\" style=\"width: var(--sdds-spacing-element-24); height: var(--sdds-spacing-element-24);\"></span></td>\n    </tr>\n    <tr>\n      <td>32px</td>\n      <td><code>$spacing-element-32</code></td>\n      <td><code>.sdds-spacing-element-32</code></td>\n      <td><span class=\"sdds-spacing-element-demo-box\" style=\"width: var(--sdds-spacing-element-32); height: var(--sdds-spacing-element-32);\"></span></td>\n    </tr>\n    <tr>\n      <td>40px</td>\n      <td><code>$spacing-element-40</code></td>\n      <td><code>.sdds-spacing-element-40</code></td>\n      <td><span class=\"sdds-spacing-element-demo-box\" style=\"width: var(--sdds-spacing-element-40); height: var(--sdds-spacing-element-40);\"></span></td>\n    </tr>\n    <tr>\n      <td>48px</td>\n      <td><code>$spacing-element-48</code></td>\n      <td><code>.sdds-spacing-element-48</code></td>\n      <td><span class=\"sdds-spacing-element-demo-box\" style=\"width: var(--sdds-spacing-element-48); height: var(--sdds-spacing-element-48);\"></span></td>\n    </tr>\n  </table>\n  `,\n  );\n\nexport const SpacingElement = Template.bind({});\nSpacingElement.args = {};\n"]}

package/dist/collection/foundations-stories/spacing/spacing-layout.stories.js

@@ -1,95 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Foundations/Spacing',
-  parameters: {
-    layout: 'fullscreen',
-  },
-};
-const Template = () => formatHtmlPreview(`
-  <style>
-   /* Demo code for presentation purposes */
-    .demo-wrapper {
-      background-color: var(--sdds-blue-500);
-      display: inline-block;
-    }
-    table th, table td {
-      padding: 8px;
-    }
-    th:last-child,
-    td:last-child {
-      text-align: left;
-    }
-  </style>
-
-  <table>
-    <tr>
-      <th>Px</th>
-      <th>Token</th>
-      <th>CSS</th>
-      <th>Scale</th>
-    </tr>
-    <tr>
-      <td>8px</td>
-      <td><code>$spacing-layout-8</code></td>
-      <td><code>.sdds-spacing-layout-8</code></td>
-      <td><span class="demo-wrapper" style="width: var(--sdds-spacing-layout-8); height: var(--sdds-spacing-layout-8)"></span></td>
-    </tr>
-    <tr>
-      <td>16px</td>
-      <td><code>$spacing-layout-16</code></td>
-      <td><code>.sdds-spacing-layout-16</code></td>
-      <td><span class="demo-wrapper" style="width: var(--sdds-spacing-layout-16); height: var(--sdds-spacing-layout-16);"></span></td>
-    </tr>
-    <tr>
-      <td>24px</td>
-      <td><code>$spacing-layout-24</code></td>
-      <td><code>.sdds-spacing-layout-24</code></td>
-      <td><span class="demo-wrapper" style="width: var(--sdds-spacing-layout-24); height: var(--sdds-spacing-layout-24);"></span></td>
-    </tr>
-    <tr>
-      <td>32px</td>
-      <td><code>$spacing-layout-32</code></td>
-      <td><code>.sdds-spacing-layout-32</code></td>
-      <td><span class="demo-wrapper" style="width: var(--sdds-spacing-layout-32); height: var(--sdds-spacing-layout-32);"></span></td>
-    </tr>
-    <tr>
-      <td>48px</td>
-      <td><code>$spacing-layout-48</code></td>
-      <td><code>.sdds-spacing-layout-48</code></td>
-      <td><span class="demo-wrapper" style="width: var(--sdds-spacing-layout-48); height: var(--sdds-spacing-layout-48);"></span></td>
-    </tr>
-    <tr>
-      <td>64px</td>
-      <td><code>$spacing-layout-64</code></td>
-      <td><code>.sdds-spacing-layout-64</code></td>
-      <td><span class="demo-wrapper" style="width: var(--sdds-spacing-layout-64); height: var(--sdds-spacing-layout-64);"></span></td>
-    </tr>
-    <tr>
-      <td>72px</td>
-      <td><code>$spacing-layout-72</code></td>
-      <td><code>.sdds-spacing-layout-72</code></td>
-      <td><span class="demo-wrapper" style="width: var(--sdds-spacing-layout-72); height: var(--sdds-spacing-layout-72);"></span></td>
-    </tr>
-    <tr>
-      <td>96px</td>
-      <td><code>$spacing-layout-96</code></td>
-      <td><code>.sdds-spacing-layout-96</code></td>
-      <td><span class="demo-wrapper" style="width: var(--sdds-spacing-layout-96); height: var(--sdds-spacing-layout-96);"></span></td>
-    </tr>
-    <tr>
-      <td>128px</td>
-      <td><code>$spacing-layout-128</code></td>
-      <td><code>.sdds-spacing-layout-128</code></td>
-      <td><span class="demo-wrapper" style="width: var(--sdds-spacing-layout-128); height: var(--sdds-spacing-layout-128);"></span></td>
-    </tr>
-    <tr>
-      <td>160px</td>
-      <td><code>$spacing-layout-160</code></td>
-      <td><code>.sdds-spacing-layout-160</code></td>
-      <td><span class="demo-wrapper" style="width: var(--sdds-spacing-layout-160); height: var(--sdds-spacing-layout-160);"></span></td>
-    </tr>
-  </table>
-  `);
-export const SpacingLayout = Template.bind({});
-SpacingLayout.args = {};
-//# sourceMappingURL=spacing-layout.stories.js.map

package/dist/collection/foundations-stories/spacing/spacing-layout.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"spacing-layout.stories.js","sourceRoot":"","sources":["../../../src/foundations-stories/spacing/spacing-layout.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,qBAAqB;EAC5B,UAAU,EAAE;IACV,MAAM,EAAE,YAAY;GACrB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,GAAG,EAAE,CACpB,iBAAiB,CACf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoFD,CACA,CAAC;AAEJ,MAAM,CAAC,MAAM,aAAa,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC/C,aAAa,CAAC,IAAI,GAAG,EAAE,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Foundations/Spacing',\n  parameters: {\n    layout: 'fullscreen',\n  },\n};\n\nconst Template = () =>\n  formatHtmlPreview(\n    `\n  <style>\n   /* Demo code for presentation purposes */\n    .demo-wrapper {\n      background-color: var(--sdds-blue-500);\n      display: inline-block;\n    }\n    table th, table td {\n      padding: 8px;\n    }\n    th:last-child,\n    td:last-child {\n      text-align: left;\n    }\n  </style>\n\n  <table>\n    <tr>\n      <th>Px</th>\n      <th>Token</th>\n      <th>CSS</th>\n      <th>Scale</th>\n    </tr>\n    <tr>\n      <td>8px</td>\n      <td><code>$spacing-layout-8</code></td>\n      <td><code>.sdds-spacing-layout-8</code></td>\n      <td><span class=\"demo-wrapper\" style=\"width: var(--sdds-spacing-layout-8); height: var(--sdds-spacing-layout-8)\"></span></td>\n    </tr>\n    <tr>\n      <td>16px</td>\n      <td><code>$spacing-layout-16</code></td>\n      <td><code>.sdds-spacing-layout-16</code></td>\n      <td><span class=\"demo-wrapper\" style=\"width: var(--sdds-spacing-layout-16); height: var(--sdds-spacing-layout-16);\"></span></td>\n    </tr>\n    <tr>\n      <td>24px</td>\n      <td><code>$spacing-layout-24</code></td>\n      <td><code>.sdds-spacing-layout-24</code></td>\n      <td><span class=\"demo-wrapper\" style=\"width: var(--sdds-spacing-layout-24); height: var(--sdds-spacing-layout-24);\"></span></td>\n    </tr>\n    <tr>\n      <td>32px</td>\n      <td><code>$spacing-layout-32</code></td>\n      <td><code>.sdds-spacing-layout-32</code></td>\n      <td><span class=\"demo-wrapper\" style=\"width: var(--sdds-spacing-layout-32); height: var(--sdds-spacing-layout-32);\"></span></td>\n    </tr>\n    <tr>\n      <td>48px</td>\n      <td><code>$spacing-layout-48</code></td>\n      <td><code>.sdds-spacing-layout-48</code></td>\n      <td><span class=\"demo-wrapper\" style=\"width: var(--sdds-spacing-layout-48); height: var(--sdds-spacing-layout-48);\"></span></td>\n    </tr>\n    <tr>\n      <td>64px</td>\n      <td><code>$spacing-layout-64</code></td>\n      <td><code>.sdds-spacing-layout-64</code></td>\n      <td><span class=\"demo-wrapper\" style=\"width: var(--sdds-spacing-layout-64); height: var(--sdds-spacing-layout-64);\"></span></td>\n    </tr>\n    <tr>\n      <td>72px</td>\n      <td><code>$spacing-layout-72</code></td>\n      <td><code>.sdds-spacing-layout-72</code></td>\n      <td><span class=\"demo-wrapper\" style=\"width: var(--sdds-spacing-layout-72); height: var(--sdds-spacing-layout-72);\"></span></td>\n    </tr>\n    <tr>\n      <td>96px</td>\n      <td><code>$spacing-layout-96</code></td>\n      <td><code>.sdds-spacing-layout-96</code></td>\n      <td><span class=\"demo-wrapper\" style=\"width: var(--sdds-spacing-layout-96); height: var(--sdds-spacing-layout-96);\"></span></td>\n    </tr>\n    <tr>\n      <td>128px</td>\n      <td><code>$spacing-layout-128</code></td>\n      <td><code>.sdds-spacing-layout-128</code></td>\n      <td><span class=\"demo-wrapper\" style=\"width: var(--sdds-spacing-layout-128); height: var(--sdds-spacing-layout-128);\"></span></td>\n    </tr>\n    <tr>\n      <td>160px</td>\n      <td><code>$spacing-layout-160</code></td>\n      <td><code>.sdds-spacing-layout-160</code></td>\n      <td><span class=\"demo-wrapper\" style=\"width: var(--sdds-spacing-layout-160); height: var(--sdds-spacing-layout-160);\"></span></td>\n    </tr>\n  </table>\n  `,\n  );\n\nexport const SpacingLayout = Template.bind({});\nSpacingLayout.args = {};\n"]}

package/dist/collection/foundations-stories/typography/typography-body.stories.js

@@ -1,17 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Foundations/Typography',
-  parameters: {
-    layout: 'fullscreen',
-  },
-};
-const Template = () => formatHtmlPreview(`
-  <p class='sdds-body-01'>
-  Our larger text style used for body text. We usually use it for paragraphs exceeding 3 lines. The size works well on both larger and smaller breakpoints for reading.
-  </p>
-  <p class='sdds-body-02'>
-  Our smaller text style used for body text. We usually use it for paragraphs with less than 3 lines. The size works well on both larger and smaller breakpoints for reading. It could also be used within certain components.
-  </p>
-  `);
-export const Body = Template.bind({});
-//# sourceMappingURL=typography-body.stories.js.map

package/dist/collection/foundations-stories/typography/typography-body.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"typography-body.stories.js","sourceRoot":"","sources":["../../../src/foundations-stories/typography/typography-body.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,wBAAwB;EAC/B,UAAU,EAAE;IACV,MAAM,EAAE,YAAY;GACrB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,GAAG,EAAE,CACpB,iBAAiB,CACf;;;;;;;GAOD,CACA,CAAC;AAEJ,MAAM,CAAC,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Foundations/Typography',\n  parameters: {\n    layout: 'fullscreen',\n  },\n};\n\nconst Template = () =>\n  formatHtmlPreview(\n    `\n  <p class='sdds-body-01'>\n  Our larger text style used for body text. We usually use it for paragraphs exceeding 3 lines. The size works well on both larger and smaller breakpoints for reading.\n  </p>\n  <p class='sdds-body-02'>\n  Our smaller text style used for body text. We usually use it for paragraphs with less than 3 lines. The size works well on both larger and smaller breakpoints for reading. It could also be used within certain components.\n  </p>\n  `,\n  );\n\nexport const Body = Template.bind({});\n"]}

package/dist/collection/foundations-stories/typography/typography-detail.stories.js

@@ -1,18 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Foundations/Typography',
-  parameters: {
-    layout: 'fullscreen',
-  },
-};
-const Template = () => formatHtmlPreview(`
-  <p class='sdds-detail-01'>This text style is used in components, such as the cookie component.</p>
-  <p class='sdds-detail-02'>This text style is used in components, such as data tables and buttons.</p>
-  <p class='sdds-detail-03'>This text style is used for longer detailed text exceeding 3 lines within Functional applications.</p>
-  <p class='sdds-detail-04'>THIS TEXT STYLE IS USED FOR LABELS AND POTENTIALLY COMPONENTS.</p>
-  <p class='sdds-detail-05'>This text style is used in components, such as the tooltip and as a label for the text field component.</p>
-  <p class='sdds-detail-06'>THIS TEXT STYLE IS USED FOR LABELS AND POTENTIALLY COMPONENTS.</p>
-  <p class='sdds-detail-07'>This text style should only be used for very small instances, for instance as a label inside a text field.</p>
-  `);
-export const Detail = Template.bind({});
-//# sourceMappingURL=typography-detail.stories.js.map

package/dist/collection/foundations-stories/typography/typography-detail.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"typography-detail.stories.js","sourceRoot":"","sources":["../../../src/foundations-stories/typography/typography-detail.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,wBAAwB;EAC/B,UAAU,EAAE;IACV,MAAM,EAAE,YAAY;GACrB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,GAAG,EAAE,CACpB,iBAAiB,CACf;;;;;;;;GAQD,CACA,CAAC;AAEJ,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Foundations/Typography',\n  parameters: {\n    layout: 'fullscreen',\n  },\n};\n\nconst Template = () =>\n  formatHtmlPreview(\n    `\n  <p class='sdds-detail-01'>This text style is used in components, such as the cookie component.</p>\n  <p class='sdds-detail-02'>This text style is used in components, such as data tables and buttons.</p>\n  <p class='sdds-detail-03'>This text style is used for longer detailed text exceeding 3 lines within Functional applications.</p>\n  <p class='sdds-detail-04'>THIS TEXT STYLE IS USED FOR LABELS AND POTENTIALLY COMPONENTS.</p>\n  <p class='sdds-detail-05'>This text style is used in components, such as the tooltip and as a label for the text field component.</p>\n  <p class='sdds-detail-06'>THIS TEXT STYLE IS USED FOR LABELS AND POTENTIALLY COMPONENTS.</p>\n  <p class='sdds-detail-07'>This text style should only be used for very small instances, for instance as a label inside a text field.</p>\n  `,\n  );\n\nexport const Detail = Template.bind({});\n"]}

package/dist/collection/foundations-stories/typography/typography-headline.stories.js

@@ -1,40 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Foundations/Typography',
-  parameters: {
-    layout: 'fullscreen',
-  },
-  argTypes: {
-    type: {
-      name: 'Type',
-      description: 'The type of headline. Functional/Expressive.',
-      control: {
-        type: 'radio',
-      },
-      options: { Functional: 'functional', Expressive: 'expressive' },
-    },
-  },
-};
-const Template = ({ type }) => formatHtmlPreview(`
-    <style>
-    /* Demo code for presentation purposes */
-    .demo-wrapper h1 {
-        margin: 0;
-    }
-    </style>
-
-    <div class="demo-wrapper">
-        <h1 class="sdds-${type === 'expressive' ? `${type}-` : ''}headline-01">Headline</h1>
-        <h2 class="sdds-${type === 'expressive' ? `${type}-` : ''}headline-02">Headline</h2>
-        <h3 class="sdds-${type === 'expressive' ? `${type}-` : ''}headline-03">A headline for page layouts</h3>
-        <h4 class="sdds-${type === 'expressive' ? `${type}-` : ''}headline-04">A headline for page layouts</h4>
-        <h5 class="sdds-${type === 'expressive' ? `${type}-` : ''}headline-05">A sub headline, which is most commonly paired with body-01</h5>
-        <h6 class="sdds-${type === 'expressive' ? `${type}-` : ''}headline-06">A sub headline, which is most commonly paired with body-02</h6>
-        <h7 class="sdds-${type === 'expressive' ? `${type}-` : ''}headline-07">A sub headline, which is most commonly paired with detail-02 </h7>
-    </div>
-  `);
-export const Headlines = Template.bind({});
-Headlines.args = {
-  type: 'functional',
-};
-//# sourceMappingURL=typography-headline.stories.js.map

package/dist/collection/foundations-stories/typography/typography-headline.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"typography-headline.stories.js","sourceRoot":"","sources":["../../../src/foundations-stories/typography/typography-headline.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,wBAAwB;EAC/B,UAAU,EAAE;IACV,MAAM,EAAE,YAAY;GACrB;EACD,QAAQ,EAAE;IACR,IAAI,EAAE;MACJ,IAAI,EAAE,MAAM;MACZ,WAAW,EAAE,8CAA8C;MAC3D,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE;KAChE;GACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAC5B,iBAAiB,CACf;;;;;;;;;0BASsB,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC,CAAC,EAAE;0BACvC,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC,CAAC,EAAE;0BAEvD,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC,CAAC,EACvC;0BAEE,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC,CAAC,EACvC;0BAEE,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC,CAAC,EACvC;0BAEE,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC,CAAC,EACvC;0BAEE,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC,CAAC,EACvC;;GAEL,CACA,CAAC;AAEJ,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,IAAI,GAAG;EACf,IAAI,EAAE,YAAY;CACnB,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Foundations/Typography',\n  parameters: {\n    layout: 'fullscreen',\n  },\n  argTypes: {\n    type: {\n      name: 'Type',\n      description: 'The type of headline. Functional/Expressive.',\n      control: {\n        type: 'radio',\n      },\n      options: { Functional: 'functional', Expressive: 'expressive' },\n    },\n  },\n};\n\nconst Template = ({ type }) =>\n  formatHtmlPreview(\n    `\n    <style>\n    /* Demo code for presentation purposes */\n    .demo-wrapper h1 {\n        margin: 0;\n    }\n    </style>\n\n    <div class=\"demo-wrapper\">\n        <h1 class=\"sdds-${type === 'expressive' ? `${type}-` : ''}headline-01\">Headline</h1>\n        <h2 class=\"sdds-${type === 'expressive' ? `${type}-` : ''}headline-02\">Headline</h2>\n        <h3 class=\"sdds-${\n          type === 'expressive' ? `${type}-` : ''\n        }headline-03\">A headline for page layouts</h3>\n        <h4 class=\"sdds-${\n          type === 'expressive' ? `${type}-` : ''\n        }headline-04\">A headline for page layouts</h4>\n        <h5 class=\"sdds-${\n          type === 'expressive' ? `${type}-` : ''\n        }headline-05\">A sub headline, which is most commonly paired with body-01</h5>\n        <h6 class=\"sdds-${\n          type === 'expressive' ? `${type}-` : ''\n        }headline-06\">A sub headline, which is most commonly paired with body-02</h6>\n        <h7 class=\"sdds-${\n          type === 'expressive' ? `${type}-` : ''\n        }headline-07\">A sub headline, which is most commonly paired with detail-02 </h7>\n    </div>\n  `,\n  );\n\nexport const Headlines = Template.bind({});\nHeadlines.args = {\n  type: 'functional',\n};\n"]}

package/dist/collection/foundations-stories/typography/typography-paragraph.stories.js

@@ -1,13 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Foundations/Typography',
-  parameters: {
-    layout: 'fullscreen',
-  },
-};
-const Template = () => formatHtmlPreview(`
-        <p class='sdds-paragraph-01'>Our large paragraph, which should be used for introduction texts on page layouts.</p>
-        <p class='sdds-paragraph-02'>Our smaller paragraph, mainly present on mobile breakpoints, which should be used for introduction texts on page layouts.</p>
-  `);
-export const Paragraph = Template.bind({});
-//# sourceMappingURL=typography-paragraph.stories.js.map

package/dist/collection/foundations-stories/typography/typography-paragraph.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"typography-paragraph.stories.js","sourceRoot":"","sources":["../../../src/foundations-stories/typography/typography-paragraph.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,wBAAwB;EAC/B,UAAU,EAAE;IACV,MAAM,EAAE,YAAY;GACrB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,GAAG,EAAE,CACpB,iBAAiB,CACf;;;GAGD,CACA,CAAC;AAEJ,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Foundations/Typography',\n  parameters: {\n    layout: 'fullscreen',\n  },\n};\n\nconst Template = () =>\n  formatHtmlPreview(\n    `\n        <p class='sdds-paragraph-01'>Our large paragraph, which should be used for introduction texts on page layouts.</p>\n        <p class='sdds-paragraph-02'>Our smaller paragraph, mainly present on mobile breakpoints, which should be used for introduction texts on page layouts.</p>\n  `,\n  );\n\nexport const Paragraph = Template.bind({});\n"]}

package/dist/collection/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC","sourcesContent":["export * from './components';\n"]}

package/dist/collection/patterns-stories/navigation/navigation-basic.stories.js

@@ -1,85 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-import readme from './readme.md';
-export default {
-  title: 'Patterns/Navigation',
-  parameters: {
-    notes: {
-      Readme: readme,
-    },
-    layout: 'fullscreen',
-    docs: {
-      source: {
-        state: 'closed',
-      },
-    },
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {},
-  args: {},
-};
-const Template = () => formatHtmlPreview(`
-  <sdds-header>
-    <sdds-header-title>
-      Example: default
-    </sdds-header-title>
-    <sdds-header-launcher slot="end" aria-label="Application launcher">
-      <sdds-header-launcher-list-title>Cool apps</sdds-header-launcher-list-title>
-      <sdds-header-launcher-list>
-        <sdds-header-launcher-list-item>
-          <a href="https://tegel.scania.com">Button</a>
-        </sdds-header-launcher-list-item>
-        <sdds-header-launcher-list-item>
-          <a href="https://tegel.scania.com">Button</a>
-        </sdds-header-launcher-list-item>
-        <sdds-header-launcher-list-item>
-          <a href="https://tegel.scania.com">Button</a>
-        </sdds-header-launcher-list-item>
-        <sdds-header-launcher-list-item>
-          <a href="https://tegel.scania.com">Button</a>
-        </sdds-header-launcher-list-item>
-      </sdds-header-launcher-list>
-      <sdds-header-launcher-list-title>Lame apps</sdds-header-launcher-list-title>
-      <sdds-header-launcher-list>
-        <sdds-header-launcher-list-item>
-          <a href="https://tegel.scania.com">Button</a>
-        </sdds-header-launcher-list-item>
-        <sdds-header-launcher-list-item>
-          <a href="https://tegel.scania.com">Button</a>
-        </sdds-header-launcher-list-item>
-        <sdds-header-launcher-list-item>
-          <a href="https://tegel.scania.com">Button</a>
-        </sdds-header-launcher-list-item>
-        <sdds-header-launcher-list-item>
-          <a href="https://tegel.scania.com">Button</a>
-        </sdds-header-launcher-list-item>
-        <sdds-header-launcher-list-item>
-          <a href="https://tegel.scania.com">Button</a>
-        </sdds-header-launcher-list-item>
-        <sdds-header-launcher-list-item>
-          <a href="https://tegel.scania.com">Button</a>
-        </sdds-header-launcher-list-item>
-      </sdds-header-launcher-list>
-    </sdds-header-launcher>
-  
-    <sdds-header-brand-symbol slot="end" link-href="https://design.scania.com" aria-label="Scania - red gryphon on blue shield">
-    </sdds-header-brand-symbol>
-
-  </sdds-header>
-  
-  <main class="sdds-u-w-100 sdds-u-p3" style="box-sizing: border-box;">
-    <p>If the header only contains a title, launcher, and logo, no side menu is needed.</p>
-  </main>
-  `);
-export const Basic = Template.bind({});
-//# sourceMappingURL=navigation-basic.stories.js.map

package/dist/collection/patterns-stories/navigation/navigation-basic.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"navigation-basic.stories.js","sourceRoot":"","sources":["../../../src/patterns-stories/navigation/navigation-basic.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,qBAAqB;EAC5B,UAAU,EAAE;IACV,KAAK,EAAE;MACL,MAAM,EAAE,MAAM;KACf;IACD,MAAM,EAAE,YAAY;IACpB,IAAI,EAAE;MACJ,MAAM,EAAE;QACN,KAAK,EAAE,QAAQ;OAChB;KACF;IACD,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,+GAA+G;OACrH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,+GAA+G;OACrH;KACF;GACF;EACD,QAAQ,EAAE,EAAE;EACZ,IAAI,EAAE,EAAE;CACT,CAAC;AAEF,MAAM,QAAQ,GAAG,GAAG,EAAE,CACpB,iBAAiB,CACf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDD,CACA,CAAC;AAEJ,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Patterns/Navigation',\n  parameters: {\n    notes: {\n      Readme: readme,\n    },\n    layout: 'fullscreen',\n    docs: {\n      source: {\n        state: 'closed',\n      },\n    },\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {},\n  args: {},\n};\n\nconst Template = () =>\n  formatHtmlPreview(\n    `\n  <sdds-header>\n    <sdds-header-title>\n      Example: default\n    </sdds-header-title>\n    <sdds-header-launcher slot=\"end\" aria-label=\"Application launcher\">\n      <sdds-header-launcher-list-title>Cool apps</sdds-header-launcher-list-title>\n      <sdds-header-launcher-list>\n        <sdds-header-launcher-list-item>\n          <a href=\"https://tegel.scania.com\">Button</a>\n        </sdds-header-launcher-list-item>\n        <sdds-header-launcher-list-item>\n          <a href=\"https://tegel.scania.com\">Button</a>\n        </sdds-header-launcher-list-item>\n        <sdds-header-launcher-list-item>\n          <a href=\"https://tegel.scania.com\">Button</a>\n        </sdds-header-launcher-list-item>\n        <sdds-header-launcher-list-item>\n          <a href=\"https://tegel.scania.com\">Button</a>\n        </sdds-header-launcher-list-item>\n      </sdds-header-launcher-list>\n      <sdds-header-launcher-list-title>Lame apps</sdds-header-launcher-list-title>\n      <sdds-header-launcher-list>\n        <sdds-header-launcher-list-item>\n          <a href=\"https://tegel.scania.com\">Button</a>\n        </sdds-header-launcher-list-item>\n        <sdds-header-launcher-list-item>\n          <a href=\"https://tegel.scania.com\">Button</a>\n        </sdds-header-launcher-list-item>\n        <sdds-header-launcher-list-item>\n          <a href=\"https://tegel.scania.com\">Button</a>\n        </sdds-header-launcher-list-item>\n        <sdds-header-launcher-list-item>\n          <a href=\"https://tegel.scania.com\">Button</a>\n        </sdds-header-launcher-list-item>\n        <sdds-header-launcher-list-item>\n          <a href=\"https://tegel.scania.com\">Button</a>\n        </sdds-header-launcher-list-item>\n        <sdds-header-launcher-list-item>\n          <a href=\"https://tegel.scania.com\">Button</a>\n        </sdds-header-launcher-list-item>\n      </sdds-header-launcher-list>\n    </sdds-header-launcher>\n  \n    <sdds-header-brand-symbol slot=\"end\" link-href=\"https://design.scania.com\" aria-label=\"Scania - red gryphon on blue shield\">\n    </sdds-header-brand-symbol>\n\n  </sdds-header>\n  \n  <main class=\"sdds-u-w-100 sdds-u-p3\" style=\"box-sizing: border-box;\">\n    <p>If the header only contains a title, launcher, and logo, no side menu is needed.</p>\n  </main>\n  `,\n  );\n\nexport const Basic = Template.bind({});\n"]}