@energinet/watt 0.0.1

package/core/color/+storybook/storybook-colors-overview.component.scss

@@ -0,0 +1,50 @@
+// Copyright 2020 Energinet DataHub A/S
+//
+// Licensed under the Apache License, Version 2.0 (the "License2");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+:host {
+  display: block;
+}
+
+.color-grid {
+  display: flex;
+  flex-wrap: wrap;
+  max-width: 688px;
+}
+
+figure {
+  margin: 10px;
+}
+
+.color-sample {
+  position: relative;
+  height: 150px;
+  width: 150px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  border: 1px solid var(--watt-color-neutral-grey-300);
+
+  &:hover:before {
+    position: absolute;
+    content: "Copy to clipboard";
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    background-color: var(--watt-color-primary-light);
+    color: var(--watt-color-primary-light-contrast);
+  }
+}

package/core/color/color-helper.service.d.ts

@@ -0,0 +1,12 @@
+import { WattCssCustomPropertiesService } from '@energinet/watt/utils/css';
+import { WattColorType } from './colors';
+import * as i0 from "@angular/core";
+export declare class WattColorHelperService {
+    private cssCustomPropertiesService;
+    private colorContrastSuffix;
+    constructor(cssCustomPropertiesService: WattCssCustomPropertiesService);
+    getColor(color: WattColorType): string;
+    getColorContrast(color: WattColorType): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WattColorHelperService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<WattColorHelperService>;
+}

package/core/color/colors.d.ts

@@ -0,0 +1,51 @@
+/**
+ * @license
+ * Copyright 2020 Energinet DataHub A/S
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License2");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export declare const WattColor: {
+    primary: "--watt-color-primary";
+    primaryLight: "--watt-color-primary-light";
+    primaryDark: "--watt-color-primary-dark";
+    primaryDarker: "--watt-color-primary-darker";
+    primaryUltralight: "--watt-color-primary-ultralight";
+    secondary: "--watt-color-secondary";
+    secondaryLight: "--watt-color-secondary-light";
+    secondaryDark: "--watt-color-secondary-dark";
+    secondaryUltralight: "--watt-color-secondary-ultralight";
+    data1: "--watt-color-data-1";
+    data2: "--watt-color-data-2";
+    data3: "--watt-color-data-3";
+    black: "--watt-color-neutral-black";
+    white: "--watt-color-neutral-white";
+    grey50: "--watt-color-neutral-grey-50";
+    grey100: "--watt-color-neutral-grey-100";
+    grey200: "--watt-color-neutral-grey-200";
+    grey300: "--watt-color-neutral-grey-300";
+    grey400: "--watt-color-neutral-grey-400";
+    grey500: "--watt-color-neutral-grey-500";
+    grey600: "--watt-color-neutral-grey-600";
+    grey700: "--watt-color-neutral-grey-700";
+    grey800: "--watt-color-neutral-grey-800";
+    grey900: "--watt-color-neutral-grey-900";
+    danger: "--watt-color-state-danger";
+    dangerLight: "--watt-color-state-danger-light";
+    warning: "--watt-color-state-warning";
+    warningLight: "--watt-color-state-warning-light";
+    success: "--watt-color-state-success";
+    successLight: "--watt-color-state-success-light";
+    info: "--watt-color-state-info";
+    infoLight: "--watt-color-state-info-light";
+};
+export type WattColorType = keyof typeof WattColor;

package/core/color/index.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright 2020 Energinet DataHub A/S
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License2");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export { WattColor } from './colors';
+export { WattColorHelperService } from './color-helper.service';

package/core/date/dayjs.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright 2020 Energinet DataHub A/S
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License2");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import dayjs from 'dayjs';
+import 'dayjs/plugin/customParseFormat';
+import 'dayjs/plugin/utc';
+import 'dayjs/plugin/timezone';
+import 'dayjs/plugin/duration';
+export { dayjs };

package/core/date/index.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright 2020 Energinet DataHub A/S
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License2");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export { dayjs } from './dayjs';
+export { danishDatetimeProviders } from './watt-danish-datetime.providers';
+export { WattDateAdapter, WattSupportedLocales } from './watt-date-adapter';
+export { type WattRange, type WattDateRange } from './watt-date-range';
+export { WattDatePipe } from './watt-date.pipe';
+export { wattFormatDate } from './watt-format-date';
+export { WattLocaleService } from './watt-locale.service';

package/core/date/watt-danish-datetime.providers.d.ts

@@ -0,0 +1 @@
+export declare const danishDatetimeProviders: import("@angular/core").EnvironmentProviders;

package/core/date/watt-date-adapter.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright 2020 Energinet DataHub A/S
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License2");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { NativeDateAdapter } from '@angular/material/core';
+export type WattSupportedLocales = 'da' | 'en';
+export declare class WattDateAdapter extends NativeDateAdapter {
+    setActiveLocale(language: WattSupportedLocales): void;
+    /**
+     * This is necessary to remove the dots from the date (ordinals) for danish locale in the calendar view.
+     * due to `Intl.DateTimeFormat`
+     */
+    getDateNames(): string[];
+    /**
+     * Our week starts on Monday
+     * @returns 0 for Sunday, 1 for Monday, etc.
+     */
+    getFirstDayOfWeek(): number;
+}

package/core/date/watt-date-range.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright 2020 Energinet DataHub A/S
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License2");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export interface WattRange<T> {
+    start: T;
+    end: T | null;
+}
+/**
+ * This is included for legacy reasons, components should return Date objects instead of strings.
+ * @deprecated Avoid using strings as dates, use Date objects instead.
+ */
+export type WattDateRange = WattRange<string>;

package/core/date/watt-date.pipe.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @license
+ * Copyright 2020 Energinet DataHub A/S
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License2");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { PipeTransform } from '@angular/core';
+import { WattRange } from './watt-date-range';
+import { formatStrings } from './watt-format-date';
+import * as i0 from "@angular/core";
+export declare class WattDatePipe implements PipeTransform {
+    /**
+     * @param input WattDateRange or string in ISO 8601 format or unix timestamp number
+     */
+    transform(input?: WattRange<Date> | WattRange<string> | Date | string | number | null, format?: keyof typeof formatStrings, timeZone?: string): string | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WattDatePipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<WattDatePipe, "wattDate", true>;
+}

package/core/date/watt-format-date.d.ts

@@ -0,0 +1,11 @@
+import { WattRange } from './watt-date-range';
+export declare const formatStrings: {
+    monthYear: string;
+    short: string;
+    shortAbbr: string;
+    long: string;
+    longAbbr: string;
+    time: string;
+    longAbbrWithSeconds: string;
+};
+export declare function wattFormatDate(input?: WattRange<Date> | WattRange<string> | Date | string | number | null, format?: keyof typeof formatStrings, timeZone?: string): string | null;

package/core/date/watt-locale.service.d.ts

@@ -0,0 +1,13 @@
+import { DateAdapter } from '@angular/material/core';
+import { WattSupportedLocales } from './watt-date-adapter';
+import * as i0 from "@angular/core";
+export declare class WattLocaleService {
+    private dateAdapter;
+    locale: import("@angular/core").WritableSignal<WattSupportedLocales>;
+    isDanish: import("@angular/core").Signal<boolean>;
+    isEnglish: import("@angular/core").Signal<boolean>;
+    constructor(dateAdapter: DateAdapter<unknown>);
+    setActiveLocale(locale: WattSupportedLocales): Promise<void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WattLocaleService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<WattLocaleService>;
+}

package/core/styles/@energinet-datahub/watt/_index.scss

@@ -0,0 +1,52 @@
+// Copyright 2020 Energinet DataHub A/S
+//
+// Licensed under the Apache License, Version 2.0 (the "License2");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+@use "./theme/light-theme.scss";
+@use "./theme/material-overwrites/datepicker";
+@use "./theme/material-overwrites/snack-bar";
+
+@use "../../box-sizing";
+@use "../../chips";
+@use "../../elevation";
+@use "../../hr";
+@use "../../table";
+@use "../../tokens";
+@use "../../tooltip";
+@use "../../variables";
+@use "../../vater";
+@use "../../spacing";
+@use "../../typography";
+
+html,
+body {
+  height: 100%;
+}
+body {
+  margin: 0;
+  font-family: "Open Sans", sans-serif;
+}
+
+input,
+textarea {
+  font: inherit;
+}
+
+/**
+  * Fix dropdown overlay positioning
+  * We use the attribute selector to make sure we only target the dropdowns
+  * ex. time- and datepicker has other classes appended to the '.cdk-overlay-pane' element
+  * and therefore won't be hitted by this selector.
+  */
+.cdk-overlay-pane[class="cdk-overlay-pane"] {
+  transform: none !important;
+}

package/core/styles/@energinet-datahub/watt/_utils.scss

@@ -0,0 +1,16 @@
+// Copyright 2020 Energinet DataHub A/S
+//
+// Licensed under the Apache License, Version 2.0 (the "License2");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+@forward "../../../breakpoints/breakpoints.import";
+@forward "../../typography/typography.import" as typography-*;
+@forward "../../spacing/spacing.import" as space-*;

package/core/styles/@energinet-datahub/watt/theme/light-theme.scss

@@ -0,0 +1,71 @@
+// Copyright 2020 Energinet DataHub A/S
+//
+// Licensed under the Apache License, Version 2.0 (the "License2");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+@use "@angular/material" as mat;
+@use "@angular/cdk";
+
+$palette: (
+  "primary": var(--watt-color-primary),
+  "primary-light": var(--watt-color-primary-light),
+  "primary-dark": var(--watt-color-primary-dark),
+  "contrast": (
+    "primary": var(--watt-color-primary-contrast),
+    "primary-light": var(--watt-color-primary-light-contrast),
+    "primary-dark": var(--watt-color-primary-dark-contrast),
+  ),
+);
+
+$watt-palette: mat.m2-define-palette($palette, "primary", "primary-light", "primary-dark");
+
+$watt-typography: mat.m2-define-typography-config(
+  $font-family: "Open Sans, sans-serif",
+);
+
+$watt-theme: mat.m2-define-light-theme(
+  (
+    color: (
+      primary: $watt-palette,
+      accent: $watt-palette,
+    ),
+    typography: $watt-typography,
+  )
+);
+
+@include cdk.a11y-visually-hidden();
+
+@include mat.core();
+
+@include mat.autocomplete-theme($watt-theme);
+@include mat.badge-theme($watt-theme);
+@include mat.button-theme($watt-theme);
+@include mat.button-toggle-theme($watt-theme);
+@include mat.card-theme($watt-theme);
+@include mat.chips-theme($watt-theme);
+@include mat.core-theme($watt-theme);
+@include mat.datepicker-theme($watt-theme);
+@include mat.dialog-theme($watt-theme);
+@include mat.expansion-theme($watt-theme);
+@include mat.form-field-theme($watt-theme);
+@include mat.icon-theme($watt-theme);
+@include mat.input-theme($watt-theme);
+@include mat.select-theme($watt-theme);
+@include mat.sidenav-theme($watt-theme);
+@include mat.table-theme($watt-theme);
+@include mat.tabs-theme($watt-theme);
+@include mat.tooltip-theme($watt-theme);
+@include mat.menu-theme($watt-theme);
+@include mat.toolbar-theme($watt-theme);
+@include mat.stepper-theme($watt-theme);
+@include mat.divider-theme($watt-theme);
+@include mat.slide-toggle-theme($watt-theme);
+@include mat.progress-bar-theme($watt-theme);

package/core/styles/@energinet-datahub/watt/theme/material-overwrites/datepicker.scss

@@ -0,0 +1,69 @@
+// Copyright 2020 Energinet DataHub A/S
+//
+// Licensed under the Apache License, Version 2.0 (the "License2");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+@use "../../utils" as watt;
+
+// The following selectors are taken from Material
+
+.mat-calendar .mat-calendar-header {
+  margin-top: -10px;
+}
+
+.mat-calendar-body-in-range {
+  --mat-datepicker-calendar-date-in-range-state-background-color: var(--watt-color-primary-light);
+}
+
+.mat-calendar-body-today:not(.mat-calendar-body-selected):not(
+    .mat-calendar-body-comparison-identical
+  ) {
+  border-color: var(--watt-color-neutral-black);
+}
+
+// Set styling on "todays date"
+.cdk-program-focused
+  .mat-calendar-body-active
+  > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(
+    .mat-calendar-body-comparison-identical
+  ) {
+  background-color: transparent;
+  color: var(--watt-color-neutral-black);
+}
+
+// Set styling on "hover" on "todays date"
+.mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover
+  > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(
+    .mat-calendar-body-comparison-identical
+  ) {
+  background-color: var(--watt-color-primary);
+  color: var(--watt-color-neutral-white);
+}
+
+// Set styling on dates when navigating with the keyboard
+.cdk-keyboard-focused
+  .mat-calendar-body-active
+  > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(
+    .mat-calendar-body-comparison-identical
+  ) {
+  color: var(--watt-color-neutral-white);
+}
+
+.mat-calendar-next-button,
+.mat-calendar-previous-button {
+  color: var(--watt-color-primary);
+}
+
+.mat-calendar-body-in-preview .mat-calendar-body-cell-preview {
+  background-color: var(--watt-color-secondary-light);
+  border-bottom: 1px solid var(--watt-color-secondary);
+  border-top: 1px solid var(--watt-color-secondary);
+}

package/core/styles/@energinet-datahub/watt/theme/material-overwrites/snack-bar.scss

@@ -0,0 +1,26 @@
+// Copyright 2020 Energinet DataHub A/S
+//
+// Licensed under the Apache License, Version 2.0 (the "License2");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+.mdc-snackbar.mat-mdc-snack-bar-container {
+  max-width: 704px;
+  margin-bottom: 30px;
+
+  .mdc-snackbar__label,
+  .mdc-snackbar__surface {
+    padding: 0;
+  }
+
+  .mdc-snackbar__surface {
+    box-shadow: none;
+  }
+}

package/core/styles/_box-sizing.scss

@@ -0,0 +1,22 @@
+// Copyright 2020 Energinet DataHub A/S
+//
+// Licensed under the Apache License, Version 2.0 (the "License2");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+html {
+  box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}

package/core/styles/_chips.scss

@@ -0,0 +1,22 @@
+// Copyright 2020 Energinet DataHub A/S
+//
+// Licensed under the Apache License, Version 2.0 (the "License2");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+@use "@energinet-datahub/watt/utils" as watt;
+
+.watt-chip-label {
+  @include watt.typography-watt-label;
+  display: inline-block;
+  background: var(--watt-color-state-info-light);
+  padding: 0 12px;
+  border-radius: 32px;
+}

package/core/styles/_elevation.scss

@@ -0,0 +1,18 @@
+// Copyright 2020 Energinet DataHub A/S
+//
+// Licensed under the Apache License, Version 2.0 (the "License2");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+.watt-elevation:not([class*="mat-elevation-z"]) {
+  box-shadow:
+    0px 1px 6px rgba(11, 60, 93, 0.12),
+    0px 4px 18px 3px rgba(46, 50, 52, 0.08);
+}

package/core/styles/_hr.scss

@@ -0,0 +1,20 @@
+// Copyright 2020 Energinet DataHub A/S
+//
+// Licensed under the Apache License, Version 2.0 (the "License2");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+.watt-divider {
+  all: unset;
+  display: block;
+  border-top: 1px solid var(--watt-color-neutral-grey-300);
+  margin: var(--watt-space-m) 0;
+  width: 100%;
+}