@flightlesslabs/dodo-ui 0.2.0 → 0.4.0

package/dist/styles/_minimal-reset.css

@@ -0,0 +1,3 @@
+* {
+  box-sizing: border-box;
+}

package/dist/styles/global.css

@@ -1,3 +1,4 @@
+@import '_minimal-reset.css';
 @import '_colors-base.css';
 @import '_colors.css';
 @import '_breakpoint.css';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flightlesslabs/dodo-ui",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "scripts": {
     "build": "vite build && pnpm run prepack",
     "preview": "vite preview",
@@ -48,42 +48,42 @@
     "svelte": "^5.0.0"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^3",
-    "@eslint/compat": "^1.2.5",
-    "@eslint/js": "^9.18.0",
-    "@storybook/addon-essentials": "^8.6.7",
-    "@storybook/addon-svelte-csf": "^5.0.0-next.0",
-    "@storybook/blocks": "^8.6.7",
-    "@storybook/experimental-addon-test": "^8.6.7",
+    "@chromatic-com/storybook": "^3.2.6",
+    "@eslint/compat": "^1.2.8",
+    "@eslint/js": "^9.24.0",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-svelte-csf": "5.0.0-next.28",
+    "@storybook/blocks": "^8.6.12",
+    "@storybook/experimental-addon-test": "^8.6.12",
     "@storybook/manager-api": "^8.6.12",
-    "@storybook/svelte": "^8.6.7",
-    "@storybook/sveltekit": "^8.6.7",
-    "@storybook/test": "^8.6.7",
+    "@storybook/svelte": "^8.6.12",
+    "@storybook/sveltekit": "^8.6.12",
+    "@storybook/test": "^8.6.12",
     "@storybook/theming": "^8.6.12",
-    "@sveltejs/adapter-auto": "^4.0.0",
-    "@sveltejs/kit": "^2.16.0",
-    "@sveltejs/package": "^2.0.0",
-    "@sveltejs/vite-plugin-svelte": "^5.0.0",
-    "@vitest/browser": "^3.0.9",
-    "@vitest/coverage-v8": "^3.0.9",
-    "eslint": "^9.18.0",
-    "eslint-config-prettier": "^10.0.1",
-    "eslint-plugin-svelte": "^3.0.0",
+    "@sveltejs/adapter-static": "^3.0.8",
+    "@sveltejs/kit": "^2.20.5",
+    "@sveltejs/package": "^2.3.10",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "@vitest/browser": "^3.1.1",
+    "@vitest/coverage-v8": "^3.1.1",
+    "eslint": "^9.24.0",
+    "eslint-config-prettier": "^10.1.1",
+    "eslint-plugin-svelte": "^3.5.1",
     "globals": "^16.0.0",
     "playwright": "^1.51.1",
-    "prettier": "^3.4.2",
+    "prettier": "^3.5.3",
     "prettier-plugin-svelte": "^3.3.3",
-    "publint": "^0.3.2",
-    "sass": "^1.86.0",
-    "storybook": "^8.6.7",
+    "publint": "^0.3.11",
+    "sass": "^1.86.3",
+    "storybook": "^8.6.12",
     "storybook-dark-mode": "^4.0.2",
-    "svelte": "^5.0.0",
-    "svelte-check": "^4.0.0",
+    "svelte": "^5.25.10",
+    "svelte-check": "^4.1.5",
     "svelte-preprocess": "^6.0.3",
-    "typescript": "^5.0.0",
-    "typescript-eslint": "^8.20.0",
-    "vite": "^6.0.0",
-    "vitest": "^3.0.9"
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.29.1",
+    "vite": "^6.2.5",
+    "vitest": "^3.1.1"
   },
   "keywords": [
     "svelte"

package/src/lib/index.ts

@@ -2,6 +2,9 @@ import '$lib/styles/global.css';
 
 export type { ComponentSize, ComponentRoundness, ComponentRoundnessFull } from './types.js';
 
+/** developer tools: components: UtilityButton */
+export { default as UtilityButton } from '$lib/stories/developer tools/components/UtilityButton/UtilityButton.svelte';
+
 /** Form: Button */
 export { default as Button } from '$lib/stories/components/Form/Button/Button.svelte';
 export type {
@@ -10,3 +13,26 @@ export type {
   ButtonLinkTarget,
   ButtonLinkReferrerpolicy,
 } from '$lib/stories/components/Form/Button/Button.svelte';
+
+/** Form: TextInput */
+export { default as TextInput } from '$lib/stories/components/Form/TextInput/TextInput.svelte';
+export type {
+  TextInputRoundness,
+  TextInputType,
+  TextInputFocusEvent,
+  TextInputClipboardEvent,
+} from '$lib/stories/components/Form/TextInput/TextInput.svelte';
+
+/** Form: PasswordInput */
+export { default as PasswordInput } from '$lib/stories/components/Form/PasswordInput/PasswordInput.svelte';
+export type { PasswordInputToggleEvent } from '$lib/stories/components/Form/PasswordInput/PasswordInput.svelte';
+
+/** Form: Label */
+export { default as Label } from '$lib/stories/components/Form/Label/Label.svelte';
+
+/** Form: FormControl */
+export { default as FormControl } from '$lib/stories/components/Form/FormControl/FormControl.svelte';
+
+/** Form: Message */
+export { default as Message } from '$lib/stories/components/Form/Message/Message.svelte';
+export type { MessageColor } from '$lib/stories/components/Form/Message/Message.svelte';

package/src/lib/stories/components/Form/Button/Button.stories.svelte

@@ -19,7 +19,7 @@
     },
     roundness: {
       control: { type: 'select' },
-      options: [false, 1, 2, 3, 'full'],
+      options: [false, '1x', '2x', '3x', 'full'],
     },
     size: {
       control: { type: 'select' },
@@ -54,20 +54,25 @@
   <Button>Click me!</Button>
 </Story>
 
-<Story name="Disabled" args={{ disabled: true }}>
-  <Button disabled>Click me!</Button>
-</Story>
-
 <!-- Button with border around it -->
 <Story name="Outline" args={{ outline: true }}>
   <Button outline>Click me!</Button>
 </Story>
 
+<Story name="Disabled" args={{ disabled: true }}>
+  <Button disabled>Click me!</Button>
+</Story>
+
 <!-- Form submit button -->
 <Story name="Sumbit Button" args={{ type: 'submit' }}>
   <Button type="submit">Submit Form</Button>
 </Story>
 
+<!-- Form submit button -->
+<Story name="Full width Button" args={{ fullWidth: true }}>
+  <Button fullWidth>Click me!</Button>
+</Story>
+
 <!-- Anchor Link styled like a Button -->
 <Story
   name="Link Button"

package/src/lib/stories/components/Form/Button/Button.svelte

@@ -15,14 +15,19 @@
 <script lang="ts">
   import type { ComponentRoundness, ComponentRoundnessFull, ComponentSize } from '$lib/types.js';
   import type { Snippet } from 'svelte';
+  import type { MouseEventHandler } from 'svelte/elements';
 
   interface ButtonProps {
-    /** Button contents goes here*/
+    /** Button contents goes here */
     children?: Snippet;
+    /** Button ref */
+    ref?: HTMLButtonElement | HTMLAnchorElement;
     /** Regular button or submit button? */
     type?: 'button' | 'submit';
     /** How large should the button be? */
     size?: ComponentSize;
+    /** Full width button? */
+    fullWidth?: boolean;
     /** What color to use? */
     color?: ButtonColor;
     /** How round should the border radius be? */
@@ -48,7 +53,7 @@
     /** Custom css class*/
     class?: string;
     /** The onclick event handler */
-    onclick?: (e: MouseEvent) => void;
+    onclick?: MouseEventHandler<HTMLButtonElement>;
     /** Turn Button into link */
     href?: string;
     /** Link button: download  */
@@ -72,7 +77,7 @@
     _unsafeChildrenStringForTesting?: string;
   }
 
-  const {
+  let {
     children,
     type = 'button',
     size = 'normal',
@@ -81,6 +86,7 @@
     variant = 'text',
     outline = false,
     compact = false,
+    fullWidth = false,
     name,
     id,
     title,
@@ -99,12 +105,13 @@
     anchorMediaType,
     referrerpolicy,
     _unsafeChildrenStringForTesting,
+    ref = $bindable<HTMLButtonElement | HTMLAnchorElement>(),
   }: ButtonProps = $props();
 </script>
 
 {#snippet buttonContent()}
   {#if before}
-    <span class="button-content--before">
+    <span class="content--before">
       {@render before()}
     </span>
   {/if}
@@ -116,7 +123,7 @@
   {/if}
 
   {#if after}
-    <span class="button-content--after">
+    <span class="content--after">
       {@render after()}
     </span>
   {/if}
@@ -138,14 +145,16 @@
     class:outline
     class:compact
     class:disabled
+    class:fullWidth
     class={[
-      'dodo-ui-button',
+      'dodo-ui-Button',
       `size--${size}`,
       `color--${color}`,
       `variant--${variant}`,
       `roundness--${roundness}`,
       className,
     ].join(' ')}
+    bind:this={ref}
   >
     {@render buttonContent()}
   </a>
@@ -153,8 +162,9 @@
   <button
     class:outline
     class:compact
+    class:fullWidth
     class={[
-      'dodo-ui-button',
+      'dodo-ui-Button',
       `size--${size}`,
       `color--${color}`,
       `variant--${variant}`,
@@ -167,6 +177,7 @@
     {title}
     {disabled}
     {onclick}
+    bind:this={ref}
   >
     {@render buttonContent()}
   </button>
@@ -176,8 +187,8 @@
   @use 'utils/scss/mixins.scss' as *;
 
   :global(:root) {
-    --dodo-ui-button-disabled-color: var(--dodo-color-default-400);
-    --dodo-ui-button-disabled-bg: var(--dodo-color-default-200);
+    --dodo-ui-Button-disabled-color: var(--dodo-color-default-400);
+    --dodo-ui-Button-disabled-bg: var(--dodo-color-default-200);
 
     @include generate-dodo-ui-button-colors(default);
     @include generate-dodo-ui-button-colors(primary);
@@ -188,8 +199,8 @@
   }
 
   :global(.dodo-theme--dark) {
-    --dodo-ui-button-disabled-bg: var(--dodo-color-default-100);
-    --dodo-ui-button-disabled-color: var(--dodo-color-default-500);
+    --dodo-ui-Button-disabled-bg: var(--dodo-color-default-100);
+    --dodo-ui-Button-disabled-color: var(--dodo-color-default-500);
 
     @include generate-dodo-ui-button-colors-dark(default);
     @include generate-dodo-ui-button-colors-dark(primary);
@@ -199,7 +210,7 @@
     @include generate-dodo-ui-button-colors-dark(info);
   }
 
-  .dodo-ui-button {
+  .dodo-ui-Button {
     cursor: pointer;
     outline: none;
     transition: all 150ms;
@@ -209,13 +220,14 @@
     justify-content: center;
     align-items: center;
     font-family: inherit;
-    font-weight: 500;
     background-color: transparent;
-    border: 1px solid;
+    border-style: solid;
+    border-width: var(--dodo-ui-element-border-width);
     border-color: transparent;
     outline: 0;
     color: inherit;
     letter-spacing: 0.3px;
+    font-family: inherit;
 
     &.size {
       &--normal {
@@ -242,15 +254,15 @@
 
     &.roundness {
       &--1x {
-        border-radius: var(--dodo-ui-element-roundness-1);
+        border-radius: var(--dodo-ui-element-roundness-1x);
       }
 
       &--2x {
-        border-radius: var(--dodo-ui-element-roundness-2);
+        border-radius: var(--dodo-ui-element-roundness-2x);
       }
 
       &--3x {
-        border-radius: var(--dodo-ui-element-roundness-3);
+        border-radius: var(--dodo-ui-element-roundness-3x);
       }
 
       &--full {
@@ -273,17 +285,17 @@
       &.variant {
         &--text,
         &--solid {
-          background-color: var(--dodo-ui-button-disabled-bg);
-          color: var(--dodo-ui-button-disabled-color);
+          background-color: var(--dodo-ui-Button-disabled-bg);
+          color: var(--dodo-ui-Button-disabled-color);
 
           &:hover {
-            background-color: var(--dodo-ui-button-disabled-bg);
-            color: var(--dodo-ui-button-disabled-color);
+            background-color: var(--dodo-ui-Button-disabled-bg);
+            color: var(--dodo-ui-Button-disabled-color);
           }
 
           &:active {
-            background-color: var(--dodo-ui-button-disabled-bg);
-            color: var(--dodo-ui-button-disabled-color);
+            background-color: var(--dodo-ui-Button-disabled-bg);
+            color: var(--dodo-ui-Button-disabled-color);
           }
 
           &.outline {
@@ -316,7 +328,11 @@
       }
     }
 
-    .button-content {
+    &.fullWidth {
+      width: 100%;
+    }
+
+    .content {
       &--after,
       &--before {
         display: inline-flex;

package/src/lib/stories/components/Form/Button/Events/Events.stories.svelte

@@ -0,0 +1,42 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { fn } from '@storybook/test';
+  import Button from '../Button.svelte';
+  import { storyButtonArgTypes } from '../Button.stories.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: Button,
+    tags: ['autodocs'],
+    argTypes: storyButtonArgTypes,
+    args: {
+      onclick: fn(),
+    },
+  });
+</script>
+
+<Story
+  name="Click"
+  args={{
+    outline: false,
+    disabled: false,
+    compact: false,
+    onclick: (e: Event) => {
+      const target = e.target as HTMLButtonElement;
+
+      alert('Button Clicked');
+      console.log('Button Clicked', target);
+    },
+  }}
+>
+  <Button
+    onclick={(e: Event) => {
+      const target = e.target as HTMLButtonElement;
+
+      alert('Button Clicked');
+      console.log('Button Clicked', target);
+    }}
+  >
+    Click me!
+  </Button>
+</Story>

package/src/lib/stories/components/Form/Button/utils/scss/mixins.scss

@@ -3,15 +3,15 @@
 /// across different interaction states (default, hover, active).
 /// @param {String} $color-name - The theme color name (e.g., "primary", "safe", etc.)
 @mixin generate-dodo-ui-button-colors($color-name) {
-  --dodo-ui-button-outline-#{$color-name}: var(--dodo-color-#{$color-name}-400);
+  --dodo-ui-Button-outline-#{$color-name}: var(--dodo-color-#{$color-name}-400);
 
-  --dodo-ui-button-text-#{$color-name}-bg: var(--dodo-color-#{$color-name}-100);
-  --dodo-ui-button-text-#{$color-name}-hover-bg: var(--dodo-color-#{$color-name}-200);
-  --dodo-ui-button-text-#{$color-name}-active-bg: var(--dodo-color-#{$color-name}-300);
+  --dodo-ui-Button-text-#{$color-name}-bg: var(--dodo-color-#{$color-name}-100);
+  --dodo-ui-Button-text-#{$color-name}-hover-bg: var(--dodo-color-#{$color-name}-200);
+  --dodo-ui-Button-text-#{$color-name}-active-bg: var(--dodo-color-#{$color-name}-300);
 
-  --dodo-ui-button-solid-#{$color-name}-bg: var(--dodo-color-#{$color-name}-500);
-  --dodo-ui-button-solid-#{$color-name}-hover-bg: var(--dodo-color-#{$color-name}-600);
-  --dodo-ui-button-solid-#{$color-name}-active-bg: var(--dodo-color-#{$color-name}-700);
+  --dodo-ui-Button-solid-#{$color-name}-bg: var(--dodo-color-#{$color-name}-500);
+  --dodo-ui-Button-solid-#{$color-name}-hover-bg: var(--dodo-color-#{$color-name}-600);
+  --dodo-ui-Button-solid-#{$color-name}-active-bg: var(--dodo-color-#{$color-name}-700);
 }
 
 /// Mixin: generate-dodo-ui-button-colors
@@ -19,15 +19,15 @@
 /// across different interaction states (default, hover, active).
 /// @param {String} $color-name - The theme color name (e.g., "primary", "safe", etc.)
 @mixin generate-dodo-ui-button-colors-dark($color-name) {
-  --dodo-ui-button-outline-#{$color-name}: var(--dodo-color-#{$color-name}-300);
+  --dodo-ui-Button-outline-#{$color-name}: var(--dodo-color-#{$color-name}-300);
 
-  --dodo-ui-button-text-#{$color-name}-bg: var(--dodo-color-#{$color-name}-50);
-  --dodo-ui-button-text-#{$color-name}-hover-bg: var(--dodo-color-#{$color-name}-100);
-  --dodo-ui-button-text-#{$color-name}-active-bg: var(--dodo-color-#{$color-name}-200);
+  --dodo-ui-Button-text-#{$color-name}-bg: var(--dodo-color-#{$color-name}-50);
+  --dodo-ui-Button-text-#{$color-name}-hover-bg: var(--dodo-color-#{$color-name}-100);
+  --dodo-ui-Button-text-#{$color-name}-active-bg: var(--dodo-color-#{$color-name}-200);
 
-  --dodo-ui-button-solid-#{$color-name}-bg: var(--dodo-color-#{$color-name}-300);
-  --dodo-ui-button-solid-#{$color-name}-hover-bg: var(--dodo-color-#{$color-name}-200);
-  --dodo-ui-button-solid-#{$color-name}-active-bg: var(--dodo-color-#{$color-name}-100);
+  --dodo-ui-Button-solid-#{$color-name}-bg: var(--dodo-color-#{$color-name}-300);
+  --dodo-ui-Button-solid-#{$color-name}-hover-bg: var(--dodo-color-#{$color-name}-200);
+  --dodo-ui-Button-solid-#{$color-name}-active-bg: var(--dodo-color-#{$color-name}-100);
 }
 
 /// Mixin: generate-dodo-ui-button-color
@@ -38,31 +38,31 @@
     &.variant {
       &--text {
         color: var(--dodo-color-#{$theme}-800);
-        background-color: var(--dodo-ui-button-text-#{$theme}-bg);
+        background-color: var(--dodo-ui-Button-text-#{$theme}-bg);
 
         &:hover {
-          background-color: var(--dodo-ui-button-text-#{$theme}-hover-bg);
+          background-color: var(--dodo-ui-Button-text-#{$theme}-hover-bg);
         }
 
         &:active {
-          background-color: var(--dodo-ui-button-text-#{$theme}-active-bg);
+          background-color: var(--dodo-ui-Button-text-#{$theme}-active-bg);
         }
 
         &.outline {
-          border-color: var(--dodo-ui-button-outline-#{$theme});
+          border-color: var(--dodo-ui-Button-outline-#{$theme});
         }
       }
 
       &--solid {
         color: var(--dodo-color-constant-white);
-        background-color: var(--dodo-ui-button-solid-#{$theme}-bg);
+        background-color: var(--dodo-ui-Button-solid-#{$theme}-bg);
 
         &:hover {
-          background-color: var(--dodo-ui-button-solid-#{$theme}-hover-bg);
+          background-color: var(--dodo-ui-Button-solid-#{$theme}-hover-bg);
         }
 
         &:active {
-          background-color: var(--dodo-ui-button-solid-#{$theme}-active-bg);
+          background-color: var(--dodo-ui-Button-solid-#{$theme}-active-bg);
         }
       }
     }

package/src/lib/stories/components/Form/FormControl/FormControl.stories.svelte

@@ -0,0 +1,29 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import FormControl from './FormControl.svelte';
+  import TextInput from '../TextInput/TextInput.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: FormControl,
+    tags: ['autodocs'],
+  });
+</script>
+
+<Story name="Default" args={{ label: 'Hello there' }} />
+
+<Story name="Example TextInput" args={{ label: 'Whats your first name?' }}>
+  <FormControl label="Whats your first name?" for="first-name-01">
+    <TextInput placeholder="First name" id="first-name-01" />
+  </FormControl>
+</Story>
+
+<Story name="ErrorMessage" args={{ label: 'Whats your first name?' }}>
+  <FormControl
+    label="Whats your first name?"
+    for="first-name-02"
+    errorMessage="This is an error message"
+  >
+    <TextInput value="John Smith" id="first-name-02" error />
+  </FormControl>
+</Story>

package/src/lib/stories/components/Form/FormControl/FormControl.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import Label from '../Label/Label.svelte';
+  import Message from '../Message/Message.svelte';
+
+  interface FormControlProps {
+    /** FormControl contents goes here */
+    children?: Snippet;
+    /** Label for FormControl */
+    label?: string;
+    /** is there any associated Error Message ? */
+    errorMessage?: string;
+    /** Label ref */
+    ref?: HTMLDivElement;
+    /** id of the form element the label should be bound to */
+    for?: string;
+    /** Specifies which form the label belongs to */
+    form?: string;
+    /** Custom css class*/
+    class?: string;
+  }
+
+  let {
+    children,
+    label,
+    class: className = '',
+    for: htmlFor,
+    form,
+    ref = $bindable<HTMLDivElement>(),
+    errorMessage,
+  }: FormControlProps = $props();
+</script>
+
+<div class={['dodo-ui-FormControl', className].join(' ')} bind:this={ref}>
+  {#if label}
+    <div class="LabelSection">
+      <Label for={htmlFor} {form}>{label}</Label>
+    </div>
+  {/if}
+  <div class="content">
+    {#if children}
+      {@render children()}
+    {/if}
+  </div>
+  {#if errorMessage}
+    <div class="errorMessage">
+      <Message color="danger">{errorMessage}</Message>
+    </div>
+  {/if}
+</div>
+
+<style lang="scss">
+  :global(:root) {
+    --dodo-ui-FormControl-LabelSection-gap: 8px;
+    --dodo-ui-FormControl-errorMessage-gap: 16px;
+  }
+
+  .dodo-ui-FormControl {
+    .LabelSection {
+      margin-bottom: var(--dodo-ui-FormControl-LabelSection-gap);
+    }
+
+    .errorMessage {
+      margin-top: var(--dodo-ui-FormControl-errorMessage-gap);
+    }
+  }
+</style>

package/src/lib/stories/components/Form/Label/Label.stories.svelte

@@ -0,0 +1,23 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Label from './Label.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: Label,
+    tags: ['autodocs'],
+  });
+</script>
+
+<!-- ⚠️ Test Label: Do not use! -->
+<Story
+  name="Test Label"
+  args={{
+    _unsafeChildrenStringForTesting: 'This is a form label',
+  }}
+/>
+
+<!-- Label with default style -->
+<Story name="Default">
+  <Label>This is a form label</Label>
+</Story>

package/src/lib/stories/components/Form/Label/Label.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface LabelProps {
+    /** Label contents goes here */
+    children?: Snippet;
+    /** Label ref */
+    ref?: HTMLLabelElement;
+    /** id of the form element the label should be bound to */
+    for?: string;
+    /** Specifies which form the label belongs to */
+    form?: string;
+    /** Custom css class*/
+    class?: string;
+    /** Test: ⚠️ Unsafe Children String. Do Not use*/
+    _unsafeChildrenStringForTesting?: string;
+  }
+
+  let {
+    children,
+    class: className = '',
+    for: htmlFor,
+    form,
+    _unsafeChildrenStringForTesting,
+    ref = $bindable<HTMLLabelElement>(),
+  }: LabelProps = $props();
+</script>
+
+<label class={['dodo-ui-Label', className].join(' ')} for={htmlFor} {form} bind:this={ref}>
+  {#if children}
+    {@render children()}
+  {:else if _unsafeChildrenStringForTesting}
+    {_unsafeChildrenStringForTesting}
+  {/if}
+</label>
+
+<style lang="scss">
+  .dodo-ui-Label {
+    font-size: 0.95rem;
+    color: var(--dodo-color-default-700);
+    display: flex;
+    align-items: center;
+    font-family: inherit;
+  }
+</style>