From 79b421769e61a7f21af97dddaf759c119f3d8786 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Tue, 4 May 2021 07:29:15 +0200
Subject: [PATCH] fix accidental removal of Label component

---
 packages/bbui/src/Label/Label.svelte | 62 ++++++++++++++++++++++++++++
 packages/bbui/src/index.js           |  1 +
 2 files changed, 63 insertions(+)
 create mode 100644 packages/bbui/src/Label/Label.svelte

diff --git a/packages/bbui/src/Label/Label.svelte b/packages/bbui/src/Label/Label.svelte
new file mode 100644
index 0000000000..23494a8455
--- /dev/null
+++ b/packages/bbui/src/Label/Label.svelte
@@ -0,0 +1,62 @@
+<script>
+  export let forAttr = "",
+    extraSmall = false,
+    small = false,
+    medium = false,
+    large = false,
+    extraLarge = false,
+    white = false,
+    grey = false,
+    black = false
+</script>
+
+<label
+  class="bb-label"
+  class:extraSmall
+  class:small
+  class:medium
+  class:large
+  class:extraLarge
+  class:white
+  class:grey
+  class:black
+  for={forAttr}
+>
+  <slot />
+</label>
+
+<style>
+  .bb-label {
+    font-family: var(--font-sans);
+    font-weight: 500;
+    text-rendering: var(--text-render);
+    color: var(--ink);
+    font-size: var(--font-size-s);
+    margin-bottom: var(--spacing-s);
+    display: block;
+  }
+  .extraSmall {
+    font-size: var(--font-size-xs);
+  }
+  .small {
+    font-size: var(--font-size-s);
+  }
+  .medium {
+    font-size: var(--font-size-m);
+  }
+  .large {
+    font-size: var(--font-size-l);
+  }
+  .extraLarge {
+    font-size: var(--font-size-xl);
+  }
+  .white {
+    color: white;
+  }
+  .grey {
+    color: var(--grey-6);
+  }
+  .black {
+    color: var(--ink);
+  }
+</style>
diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js
index 5017480131..e1b68cb35f 100644
--- a/packages/bbui/src/index.js
+++ b/packages/bbui/src/index.js
@@ -26,6 +26,7 @@ export { default as DetailSummary } from "./DetailSummary/DetailSummary.svelte"
 export { default as Popover } from "./Popover/Popover.svelte"
 export { default as ProgressBar } from "./ProgressBar/ProgressBar.svelte"
 export { default as ProgressCircle } from "./ProgressCircle/ProgressCircle.svelte"
+export { default as Label } from "./Label/Label.svelte"
 export { default as Layout } from "./Layout/Layout.svelte"
 export { default as Link } from "./Link/Link.svelte"
 export { default as Menu } from "./Menu/Menu.svelte"