@scania/tegel-lite 0.0.1-beta.0

package/README.dev.md

@@ -0,0 +1,491 @@
+# @scania/tegel-lite
+
+![Status: Beta](https://img.shields.io/badge/status-beta-orange)
+
+> Pure CSS implementation of Tegel Design System - no JavaScript required.
+
+**⚠️ Beta Status:** This package is currently in beta. While functional and ready for testing, the API and structure may change before the stable 1.0.0 release.
+
+Tegel Lite is a **styles-only** component library that provides the same design system as Tegel without relying on Web Components or Stencil.
+
+## 📦 Installation
+
+```bash
+npm install @scania/tegel-lite
+```
+
+## 🚀 Quick Start
+
+### Import all styles (global)
+
+```javascript
+import '@scania/tegel-lite/global.css';
+```
+
+### Import specific components (recommended)
+
+```javascript
+// Import brand variables (Scania or Traton)
+import '@scania/tegel-lite/scania-variables.css';
+
+// Import individual components
+import '@scania/tegel-lite/tl-button.css';
+import '@scania/tegel-lite/tl-header.css';
+```
+
+### HTML Usage
+
+```html
+<button class="tl-button tl-button--primary">
+  <span class="tl-button__label">Click me</span>
+</button>
+```
+
+## 📚 Documentation
+
+For detailed documentation and examples, visit **[tegel.scania.com](https://tegel.scania.com)**
+
+---
+
+## What It Is
+
+Tegel Lite is:
+
+- A **styles-only** component system.
+- Built using **SCSS**, compiled to **CSS** files.
+- Aligned to the same design tokens & variables as the original Tegel.
+
+### How It Works
+
+Tegel Lite’s styles reside in the Tegel Core package, ensuring consistency with existing global styles and enabling Storybook documentation. 
+
+To **generate** the `@scania/tegel-lite` library, first navigate to project root and run: 
+
+```bash
+npm i
+```
+then navigate to `packages/core` and run: 
+
+```bash
+npm i
+```
+
+```bash
+npm run build:tegel-lite
+```
+
+This command will compile all scss files related to Tegel Lite and output the compiled css to the `packages/tegel-lite/dist` folder. It will also copy assets that are needed and add neccessary exports to the `packages/tegel-lite/package.json` .
+
+The files used as source for `@scania/tegel-lite` library are located in `packages/core/src` and are structured as follows:
+
+- **packages/core/src/global/tegel-lite-components.scss**: All Tegel Lite component styles are imported here. This file is imported in the `packages/core/global/global.scss` file and thus enables Storybook documentation for Tegel Lite components.
+
+- **packages/core/src/global/tegel-lite-global.scss**: All global styles and variables are imported here. This file is compiled into a single `global.css` file in the `packages/tegel-lite/dist` folder.
+
+- **packages/core/src/tegel-lite/components**: Each component (e.g., tl-button, tl-header) lives in its own folder with `.scss` files. Each component will be compiled into a separate CSS file in the `packages/tegel-lite/dist` folder. An export will be added to the `packages/tegel-lite/package.json` file to enable importing of the components in the consuming project.
+
+The following scripts are used during build of `Tegel Lite`:
+
+- **packages/core/scripts/compile-tegel-lite-components.js**: Handling compilation of scss files & output css to `packages/tegel-lite/dist`.
+
+- **packages/core/scripts/update-tegel-lite-exports.js**: Handling update of exports in `packages/tegel-lite/package.json`
+
+- **packages/core/scripts/copy-tegel-lite-assets.js**: Handling copy and output of assets neccessary for the `Tegel Lite` library.
+
+- All global styles, variables etc are compiled into a single `global.css` file.
+- Each component (e.g., tl-button, tl-header) lives in its own folder with `.scss` files and is compiled into a separate CSS file.
+- Components classes are prefixed with `tl-` to avoid conflicts with other styles.
+- Classes follow BEM convention: `tl-button`, `tl-button__label`, `tl-button--primary` etc. [Read more about Tegel Lite **Scss** conventions here](#tegel-lite-scss-conventions)
+
+
+### Example usage in consumer app (Examples from Next.js application)
+
+- For globals you import the `global.css` file:
+
+  ```tsx
+  // layout.tsx
+  import "@scania/tegel-lite/global.css"
+  ```
+
+- For components you import only the styles you need:
+
+  ```tsx
+    // TegelButton.tsx
+  import clsx from "clsx"
+  import "@scania/tegel-lite/tl-button.css"
+
+  const TegelButton = ({
+    type = "primary",
+    size = "md",
+    fullBleed = false,
+    disabled = false,
+    label = "Label",
+    className,
+    onClick = () => {}
+  }: {
+    type: "primary" | "secondary" | "ghost" | "danger"
+    size: "xs" | "sm" | "md" | "lg"
+    fullBleed?: boolean
+    disabled?: boolean
+    label: string
+    onClick?: () => void
+  }) => {
+    return (
+      <button
+        disabled={disabled}
+        className={clsx(
+          `tl-button tl-button--${type} tl-button--${size}`,
+          `${fullBleed ? "tl-button--fullbleed" : ""}`,
+          `${disabled ? "tl-button--disabled" : ""}`
+        )}
+        onClick={onClick}
+      >
+        <span className="tl-button__label">{label}</span>
+      </button>
+    )
+  }
+
+  export default TegelButton
+  ```
+
+Checkout the Tegel Storybook documentation for more examples and usage.
+
+---
+
+## Development Setup (Local Development Only)
+
+If you're developing Tegel Lite locally and want to test changes in your app, you can symlink the package:
+
+### Using npx link:
+
+In the root of your app, create a `link.config.json` file with the following content:
+
+```json
+{
+  "packages": ["../tegel/packages/tegel-lite"] // Make sure to add the correct path to the Tegel Lite package on your machine
+}
+```
+
+Then run:
+
+```bash
+npx link
+```
+
+### OR
+
+Using npm link:
+
+In the `tegel/packages/tegel-lite` package:
+
+```bash
+npm link
+```
+
+In your app:
+
+```bash
+npm link @scania/tegel-lite
+```
+
+The above command will symlink the Tegel Lite package into your app. Check node_modules to see if the package is linked correctly.
+You will now be able to import Tegel Lite components in your app.
+
+---
+
+## Tegel Lite SCSS Conventions
+
+These conventions define a clear, maintainable, and scalable SCSS structure for the Tegel Lite design system, using BEM principles and Sass features to support consistency and readability.
+
+
+## JavaScript Requirements for Styling Effects
+
+Some Tegel Lite components require JavaScript to achieve certain styling effects that cannot be accomplished with pure CSS. These components need special handling to ensure their visual effects work correctly.
+
+### Rules for JavaScript-Dependent Styling
+
+1. **Documentation Requirement**: Components that need JavaScript for certain styles must clearly communicate this requirement in their documentation and stories.
+
+2. **Graceful Degradation**: Components should never be completely broken without JavaScript. They should provide a basic, functional state even without JS.
+
+3. **Demo Examples**: Stories must include working JavaScript examples that demonstrate the styling effects.
+
+---
+
+### BEM Structure & Naming
+
+We use strict BEM naming for class structure:
+
+* `.block`
+* `.block__element`
+* `.block--modifier`
+* `.block__element--modifier`
+
+No abbreviations or non-BEM patterns allowed.
+
+---
+
+### Selector Conventions
+
+#### Base Selectors
+
+```scss
+.tl-button {
+  ...
+  }
+.tl-button__icon { 
+  ...
+  }
+```
+
+* Always define base classes as **flat selectors**.
+* Avoid using `&__element` — write elements as top-level selectors for better searchability and clarity.
+
+```scss
+// ❌ Avoid
+.tl-button {
+  &__icon { 
+    ...
+  }
+}
+
+// ✅ Instead
+.tl-button__icon { 
+    ...
+  }
+
+```
+
+#### Class usage
+BEM modifiers like `.tl-button--primary` are not standalone - they must always be used together with the base class (`.tl-button`)
+
+##### ✅ Correct Usage
+
+```html
+<button class="tl-button tl-button--primary">
+  <span class="tl-button__label">Label</span>
+</button>
+
+```
+
+##### ❌ Incorrect Usage
+
+```html
+<button class="tl-button--primary">Label</button>
+```
+
+Always include the base class (.tl-button) when using a modifier like --primary, --disabled, --lg, etc. Modifiers are designed to extend or tweak the base styling, not replace it.
+
+#### Modifiers
+
+Use `&--modifier` **only when the modifier affects the current scope** (block or element itself):
+
+```scss
+.tl-button {
+  &--primary {
+    background-color: var(--primary);
+  }
+}
+
+.tl-button__icon {
+  &--small {
+    font-size: 0.75rem;
+  }
+}
+```
+
+If the modifier affects **other parts** of the component (e.g., an element inside a block), write it in the **affected element's** selector:
+
+```scss
+.tl-button__icon {
+  .tl-button--primary & {
+    fill: currentColor;
+  }
+}
+```
+
+This keeps side effects localized and improves traceability.
+
+##### ❌ Avoid nesting element selectors inside modifiers
+
+```scss
+.tl-button {
+  &--primary {
+    &__icon { // ❌ avoid this
+      ... 
+    } 
+  }
+}
+```
+
+##### ✅ Instead, do this -- place modifier styles in the affected element's selector
+
+```scss
+.tl-button__icon {
+  .tl-button--primary & {
+    ...
+  }
+}
+
+```
+
+---
+
+##  Nesting Rules
+
+
+### ✅ Allowed Uses of `&`
+
+* `&--modifier` (when scoped to self)
+* `&:hover`, `&:focus-visible`, `&:disabled`
+* `&::before`, `&::after`, `&::placeholder`, etc.
+* `&:has(...)` or similar pseudo-classes
+* Media queries (if nested inside a rule)
+
+### ❌ Disallowed
+
+* `&__element` nesting
+* Modifier selectors that affect other scopes
+
+
+
+---
+
+##  TL;DR
+
+| Type                   | Style                         | Example                 |
+| ---------------------- | ----------------------------- | ----------------------- |
+| Block                  | Flat                          | `.tl-button {}`         |
+| Element                | Flat                          | `.tl-button__icon {}`   |
+| Modifier (self-scoped) | `&--mod` inside block/element | `&--primary {}`         |
+| Modifier (cross-scope) | Contextual selector           | `.tl-button--primary &` |
+| Pseudo/state           | Nested with `&`               | `&:hover {}`            |
+
+---
+
+This convention aims to ensure SCSS is maintainable, consistent, and intuitive across all of Tegel Lite.
+
+
+Let us know if you find edge cases that challenge these conventions — this is a living document.
+
+## Creating a New Tegel Lite Component
+
+Follow these steps to create a new component in Tegel Lite.
+
+### 1. Set Up SCSS
+Inside `packages/core/src/tegel-lite/components/`, create a folder matching your component name (use kebab-case and prefix with `tl-`). Add the main SCSS file and any optional partials:
+
+<pre>
+packages/core/src/tegel-lite/components/ 
+
+└── tl-alert/
+    ├── tl-alert.scss # main entrypoint (includes partials) 
+    ├── _variables.scss # optional: internal tokens or values 
+</pre>
+
+
+All **partial files** (helpers) should be prefixed with an underscore (`_`) and be **imported** into the main SCSS file (`tl-alert.scss`). These partials will **not be compiled individually**.
+
+Example main file:
+
+```scss
+// packages/core/src/tegel-lite/components/tl-alert/tl-alert.scss
+
+@import './variables';
+
+.tl-alert {
+  background-color: blue;
+
+  &--success {
+    background-color: green;
+  }
+
+  &--error {
+    background-color: red;
+  }
+}
+```
+
+### 2. Register SCSS to components folder
+Open `core/src/global/tegel-lite-components.scss` and import your new SCSS file there to include it in the build and Storybook.
+
+```scss
+@import '../tegel-lite/components/tl-alert/tl-alert';
+```
+
+This ensures your component is available in Storybook.
+
+### 3. Create a Storybook Story
+
+To document and test the component, create a `.stories.tsx` file in inside the component’s folder. Match the style of existing stories, like `tl-button` or `tl-message`.
+
+```tsx
+
+import formatHtmlPreview from '../../../stories/formatHtmlPreview';
+
+export default {
+  title: 'Tegel Lite (CSS)/Alert',
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    variant: {
+      name: 'Variant',
+      description: 'Visual variant of the alert',
+      control: {
+        type: 'radio',
+      },
+      options: ['info', 'success', 'error'],
+      table: {
+        defaultValue: { summary: 'info' },
+      },
+    },
+    message: {
+      name: 'Message',
+      description: 'Text content of the alert',
+      control: 'text',
+      table: {
+        defaultValue: { summary: 'Hello World' },
+      },
+    },
+  },
+  args: {
+    variant: 'info',
+    message: 'Hello World',
+  },
+};
+
+const Template = ({ variant, message }) =>
+  formatHtmlPreview(`
+      <!-- Required stylesheet 
+    "@scania/tegel-lite/tl-alert.css"
+  -->
+
+    <span class="tl-alert tl-alert--${variant}">${message}</span>
+  `);
+
+export const Default = Template.bind({});
+
+```
+
+### 4. Verify the build
+Once your SCSS are in place, verify that the component compiles correctly.
+
+In the `packages/core` directory, run:
+
+```bash
+npm run build:tegel-lite
+```
+
+This will:
+
+- Compile all Tegel Lite SCSS files.
+
+- Output the compiled .css files into the `packages/tegel-lite/dist/` directory.
+
+- Automatically copy required assets and update the exports in `packages/tegel-lite/package.json`.
+
+After the build, check `packages/tegel-lite/dist/`: You should see a CSS file for your new component (e.g., `tl-alert.css`).
+
+
+

package/README.md

@@ -0,0 +1,107 @@
+# @scania/tegel-lite
+
+![Status: Beta](https://img.shields.io/badge/status-beta-orange)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
+
+> Pure CSS implementation of Tegel Design System - no JavaScript required.
+
+**⚠️ Beta Status:** This package is currently in beta. The API may change before stable 1.0.0. Report issues at [GitHub](https://github.com/scania-digital-design-system/tegel/issues).
+
+## Installation
+
+```bash
+npm install @scania/tegel-lite
+```
+
+## Quick Start
+
+**You must import brand variables separately** - `global.css` only contains component styles.
+
+### Scania Brand
+
+```javascript
+import '@scania/tegel-lite/scania-variables.css';
+import '@scania/tegel-lite'; // All components
+```
+
+### TRATON Brand
+
+```javascript
+import '@scania/tegel-lite/traton-variables.css';
+import '@scania/tegel-lite'; // All components
+```
+
+### Tree-shaking (Import Specific Components)
+
+```javascript
+import '@scania/tegel-lite/scania-variables.css'; // or traton-variables.css
+import '@scania/tegel-lite/tl-button.css';
+import '@scania/tegel-lite/tl-card.css';
+```
+
+> **Important:** Always import a brand variables file first (`scania-variables.css` or `traton-variables.css`) before any components.
+
+**HTML Usage:**
+
+```html
+<button class="tl-button tl-button--primary">
+  <span class="tl-button__label">Click me</span>
+</button>
+```
+
+## Components (35 total)
+
+**Layout:** header, footer, side-menu, breadcrumbs  
+**Forms:** text-field, textarea, checkbox, radio-button, toggle, dropdown, datetime, slider  
+**Buttons:** button, link, chip  
+**Display:** card, table, accordion, stepper, step, badge, divider, block, icon  
+**Overlays:** modal, toast, banner, message, tooltip, popover-menu, popover-canvas, spinner
+
+## Package Contents
+
+```
+dist/
+├── global.css               # All 35 components (no variables)
+├── scania-variables.css     # Scania brand (colors, fonts, tokens)
+├── traton-variables.css     # TRATON brand (colors, fonts, tokens)
+├── tl-*.css                 # Individual components
+└── assets/
+    ├── fonts/               # Latin & Cyrillic fonts
+    ├── icons/               # SVG icons
+    └── logos/               # Brand logos
+```
+
+**Important:** `global.css` does NOT include brand variables. You must import `scania-variables.css` or `traton-variables.css` separately.
+
+## BEM Naming Convention
+
+```css
+.tl-button              /* Block */
+.tl-button__label       /* Element */
+.tl-button--primary     /* Modifier */
+```
+
+All components use the `tl-` prefix.
+
+## Documentation
+
+Full documentation: **[tegel.scania.com](https://tegel.scania.com)**
+
+## Related Packages
+
+- [@scania/tegel](https://www.npmjs.com/package/@scania/tegel) - Web Components version
+- [@scania/tegel-react](https://www.npmjs.com/package/@scania/tegel-react) - React wrappers
+- [@scania/tegel-angular](https://www.npmjs.com/package/@scania/tegel-angular) - Angular wrappers
+
+## Support
+
+- **Issues:** [GitHub Issues](https://github.com/scania-digital-design-system/tegel/issues)
+- **Discussions:** [GitHub Discussions](https://github.com/scania-digital-design-system/tegel/discussions)
+
+## License
+
+MIT © Scania Digital Design System
+
+---
+
+**Development:** See [README.dev.md](./README.dev.md) for build instructions.

package/dist/assets/icons/scania/24v_battery.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32"><path fill="#0D0F13" fill-rule="evenodd" d="M7.455 7a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1h5.077V7a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1h3.493a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-24a2 2 0 0 1-2-2V10a2 2 0 0 1 2-2h3.43V7Zm16.077 3H4.025v14h24V10h-4.493Zm-6 7a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2h-6a1 1 0 0 1-1-1ZM7.455 16a1 1 0 1 0 0 2h2v2a1 1 0 1 0 2 0v-2h2a1 1 0 1 0 0-2h-2v-2a1 1 0 1 0-2 0v2h-2Z" clip-rule="evenodd"/></svg>

package/dist/assets/icons/scania/24v_battery_inactive.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32"><path fill="#0D0F13" fill-rule="evenodd" d="M3.732 2.293a1 1 0 0 0-1.414 1.414l26 26a1 1 0 0 0 1.415-1.414l-26-26ZM30.026 24c0 .49-.176.94-.47 1.288l-1.53-1.53V10H14.268l-4-4h2.187a1 1 0 0 1 1 1v1h5.077V7a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1h3.493a2 2 0 0 1 2 2v14Zm-16.284-6.042L11.783 16h-.328v-.328l-1.959-1.958a1 1 0 0 0-.041.286v2h-2a1 1 0 1 0 0 2h2v2a1 1 0 0 0 2 0v-2h2c.1 0 .195-.015.286-.042ZM4.025 10h1.758L3.796 8.013A2 2 0 0 0 2.026 10v14a2 2 0 0 0 2 2h17.757l-2-2H4.025V10Zm20.507 8h-2.264l-2-2h4.264a1 1 0 1 1 0 2Z" clip-rule="evenodd"/></svg>

package/dist/assets/icons/scania/acceleration.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.2473 10.3164C15.674 10.2722 15.0962 10.3082 14.5307 10.4245C13.7377 10.5876 12.9847 10.9053 12.3145 11.3594C11.6443 11.8136 11.0701 12.3953 10.6247 13.0713C10.1793 13.7473 9.87146 14.5045 9.71862 15.2995C9.62743 15.7741 9.16882 16.0849 8.69427 15.9937C8.21966 15.9025 7.90887 15.4438 8.00012 14.9693C8.19623 13.9486 8.59149 12.9765 9.16333 12.1085C9.73517 11.2406 10.4723 10.4938 11.3328 9.91071C12.1932 9.32764 13.1601 8.9198 14.1781 8.71039C14.7822 8.58618 15.3973 8.5332 16.0109 8.5517L15.4382 7.9801C15.145 7.6875 15.1445 7.21264 15.4371 6.91943C15.7297 6.62622 16.2046 6.62579 16.4978 6.91839L18.602 9.01837C18.8352 9.25104 18.8832 9.599 18.746 9.87921C18.7106 9.9516 18.6629 10.0194 18.6028 10.0797L16.5028 12.1839C16.2102 12.4771 15.7353 12.4776 15.4421 12.185C15.1489 11.8924 15.1484 11.4175 15.441 11.1243L16.2473 10.3164Z" fill="#0D0F13"/>
+<path d="M16 3.5C23.732 3.5 30 9.76801 30 17.5C30 21.8373 28.0276 25.714 24.9309 28.2819C24.758 28.4253 24.539 28.5 24.3144 28.5H7.68561C7.461 28.5 7.24207 28.4253 7.06909 28.2819C3.97235 25.714 2 21.8373 2 17.5C2 9.76801 8.26801 3.5 16 3.5ZM23.9375 26.5C26.4317 24.2985 28 21.0832 28 17.5C28 14.649 27.0058 12.0302 25.3451 9.97144L18.7076 16.6089C18.895 17.0006 19 17.4392 19 17.9023C19 19.5592 17.6569 20.9023 16 20.9023C14.3431 20.9023 13 19.5592 13 17.9023C13 16.2455 14.3431 14.9023 16 14.9023C16.4631 14.9023 16.9018 15.0073 17.2934 15.1947L23.9643 8.5238C21.8456 6.64252 19.0562 5.5 16 5.5C9.37256 5.5 4 10.8726 4 17.5C4 21.0832 5.56824 24.2985 8.0625 26.5H23.9375ZM17 17.9023C17 17.3501 16.5523 16.9023 16 16.9023C15.4477 16.9023 15 17.3501 15 17.9023C15 18.4546 15.4477 18.9023 16 18.9023C16.5523 18.9023 17 18.4546 17 17.9023Z" fill="#0D0F13"/>
+</svg>

package/dist/assets/icons/scania/acceleration_inactive.svg

@@ -0,0 +1,8 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.06251 26.5H22.2574L24.2574 28.5H7.68562C7.46101 28.5 7.24208 28.4253 7.0691 28.2819C3.97236 25.714 2.00001 21.8373 2.00001 17.5C2.00001 14.3333 3.05134 11.4122 4.82405 9.06673L6.25429 10.4969C4.83564 12.4677 4.00001 14.8863 4.00001 17.5C4.00001 21.0832 5.56825 24.2985 8.06251 26.5Z" fill="#0D0F13"/>
+<path d="M3.7071 2.29293L29.7071 28.2929C30.0976 28.6834 30.0976 29.3166 29.7071 29.7071C29.3166 30.0976 28.6834 30.0976 28.2929 29.7071L2.29292 3.70711C1.90236 3.31661 1.90236 2.68343 2.29292 2.29293C2.68342 1.90236 3.3166 1.90236 3.7071 2.29293Z" fill="#0D0F13"/>
+<path d="M16 5.50002C14.1703 5.50002 12.4362 5.9095 10.8845 6.64187L9.39533 5.15273C11.3628 4.0981 13.6116 3.50002 16 3.50002C23.732 3.50002 30 9.76803 30 17.5C30 19.8884 29.4019 22.1372 28.3473 24.1046L26.8585 22.6159C27.591 21.0639 28 19.3299 28 17.5C28 14.649 27.0058 12.0302 25.3451 9.97146L19.7796 15.537L18.3654 14.1227L23.9643 8.52382C21.8456 6.64254 19.0562 5.50002 16 5.50002Z" fill="#0D0F13"/>
+<path d="M15.4053 11.1627C15.4167 11.1496 15.4286 11.1368 15.441 11.1243L16.2473 10.3164C15.7125 10.2751 15.1738 10.3037 14.6448 10.4022L13.2153 8.97268C13.5298 8.86532 13.8513 8.77767 14.1781 8.71041C14.7822 8.5862 15.3973 8.53322 16.0109 8.55172L15.4382 7.98012C15.145 7.68752 15.1445 7.21266 15.4371 6.91945C15.7297 6.62624 16.2046 6.62581 16.4978 6.91841L18.602 9.01839C18.8352 9.25106 18.8832 9.59902 18.746 9.87923C18.7106 9.95162 18.6629 10.0194 18.6028 10.0797L16.5028 12.1839C16.49 12.1967 16.4768 12.209 16.4633 12.2207L15.4053 11.1627Z" fill="#0D0F13"/>
+<path d="M16.5997 20.8424C16.406 20.8817 16.2054 20.9023 16 20.9023C14.3431 20.9023 13 19.5592 13 17.9023C13 17.697 13.0206 17.4964 13.06 17.3026L16.5997 20.8424Z" fill="#0D0F13"/>
+<path d="M8.69428 15.9937C8.21967 15.9025 7.90888 15.4438 8.00013 14.9693C8.1363 14.2605 8.36854 13.5751 8.68922 12.9318L10.0156 14.2582C9.88655 14.5951 9.78706 14.9435 9.71864 15.2995C9.62745 15.7741 9.16883 16.0849 8.69428 15.9937Z" fill="#0D0F13"/>
+</svg>