@design-system-rte/angular 0.2.1 → 0.2.2

package/lib/components/icon/icon.service.d.ts

@@ -0,0 +1,12 @@
+import { Observable } from "rxjs";
+import { regularIcons, togglableIcons } from "./icon-map";
+import * as i0 from "@angular/core";
+export type RegularIconIdKey = keyof typeof regularIcons;
+export type TogglableIconIdKey = keyof typeof togglableIcons;
+export declare class IconService {
+    private http;
+    getSvg(name: RegularIconIdKey | TogglableIconIdKey, appearance: "outlined" | "filled"): Observable<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<IconService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<IconService>;
+}
+//# sourceMappingURL=icon.service.d.ts.map

package/lib/components/icon/icon.service.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.service.d.ts","sourceRoot":"","sources":["../../../../../projects/ds-rte-lib/src/lib/components/icon/icon.service.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AAElC,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;;AAE1D,MAAM,MAAM,gBAAgB,GAAG,MAAM,OAAO,YAAY,CAAC;AACzD,MAAM,MAAM,kBAAkB,GAAG,MAAM,OAAO,cAAc,CAAC;AAE7D,qBACa,WAAW;IACtB,OAAO,CAAC,IAAI,CAAsB;IAElC,MAAM,CAAC,IAAI,EAAE,gBAAgB,GAAG,kBAAkB,EAAE,UAAU,EAAE,UAAU,GAAG,QAAQ,GAAG,UAAU,CAAC,MAAM,CAAC;yCAH/F,WAAW;6CAAX,WAAW;CAsBvB"}

package/lib/components/link/link.component.d.ts

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+export declare class LinkComponent {
+    readonly label: import("@angular/core").InputSignal<string>;
+    readonly href: import("@angular/core").InputSignal<string>;
+    readonly subtle: import("@angular/core").InputSignal<boolean>;
+    readonly externalLink: import("@angular/core").InputSignal<boolean>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LinkComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LinkComponent, "rte-link", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "subtle": { "alias": "subtle"; "required": false; "isSignal": true; }; "externalLink": { "alias": "externalLink"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+//# sourceMappingURL=link.component.d.ts.map

package/lib/components/link/link.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"link.component.d.ts","sourceRoot":"","sources":["../../../../../projects/ds-rte-lib/src/lib/components/link/link.component.ts"],"names":[],"mappings":";AAKA,qBAOa,aAAa;IACxB,QAAQ,CAAC,KAAK,8CAAa;IAC3B,QAAQ,CAAC,IAAI,8CAAsB;IACnC,QAAQ,CAAC,MAAM,+CAAyB;IACxC,QAAQ,CAAC,YAAY,+CAAyB;yCAJnC,aAAa;2CAAb,aAAa;CAKzB"}

package/lib/components/radio-button/radio-button.component.d.ts

@@ -0,0 +1,14 @@
+import * as i0 from "@angular/core";
+export declare class RadioButtonComponent {
+    readonly label: import("@angular/core").InputSignal<string>;
+    readonly groupName: import("@angular/core").InputSignal<string>;
+    readonly showLabel: import("@angular/core").InputSignal<boolean>;
+    readonly disabled: import("@angular/core").InputSignal<boolean>;
+    readonly error: import("@angular/core").InputSignal<boolean>;
+    readonly readOnly: import("@angular/core").InputSignal<boolean>;
+    labelSize: number;
+    readonly isDisplayed: import("@angular/core").Signal<boolean>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RadioButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RadioButtonComponent, "rte-radio-button", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "groupName": { "alias": "groupName"; "required": false; "isSignal": true; }; "showLabel": { "alias": "showLabel"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "readOnly": { "alias": "readOnly"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+//# sourceMappingURL=radio-button.component.d.ts.map

package/lib/components/radio-button/radio-button.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-button.component.d.ts","sourceRoot":"","sources":["../../../../../projects/ds-rte-lib/src/lib/components/radio-button/radio-button.component.ts"],"names":[],"mappings":";AAIA,qBAOa,oBAAoB;IAC/B,QAAQ,CAAC,KAAK,8CAAa;IAC3B,QAAQ,CAAC,SAAS,8CAAa;IAC/B,QAAQ,CAAC,SAAS,+CAAe;IACjC,QAAQ,CAAC,QAAQ,+CAAgB;IACjC,QAAQ,CAAC,KAAK,+CAAgB;IAC9B,QAAQ,CAAC,QAAQ,+CAAgB;IACjC,SAAS,SAAa;IAEtB,QAAQ,CAAC,WAAW,0CAAsD;yCAT/D,oBAAoB;2CAApB,oBAAoB;CAUhC"}

package/lib/components/radio-button-group/radio-button-group.component.d.ts

@@ -0,0 +1,19 @@
+import * as i0 from "@angular/core";
+export declare class RadioButtonGroupComponent {
+    readonly groupName: import("@angular/core").InputSignal<string>;
+    readonly items: import("@angular/core").InputSignal<string[]>;
+    readonly direction: import("@angular/core").InputSignal<string>;
+    readonly showItemsLabel: import("@angular/core").InputSignal<boolean>;
+    readonly groupTitle: import("@angular/core").InputSignal<string>;
+    readonly showGroupTitle: import("@angular/core").InputSignal<boolean>;
+    readonly groupHelpText: import("@angular/core").InputSignal<string>;
+    readonly showHelpText: import("@angular/core").InputSignal<boolean>;
+    readonly errorMessage: import("@angular/core").InputSignal<string>;
+    readonly error: import("@angular/core").InputSignal<boolean>;
+    readonly disabled: import("@angular/core").InputSignal<boolean>;
+    readonly readOnly: import("@angular/core").InputSignal<boolean>;
+    readonly isDisplayed: import("@angular/core").Signal<boolean>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RadioButtonGroupComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RadioButtonGroupComponent, "rte-radio-button-group", never, { "groupName": { "alias": "groupName"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "showItemsLabel": { "alias": "showItemsLabel"; "required": false; "isSignal": true; }; "groupTitle": { "alias": "groupTitle"; "required": false; "isSignal": true; }; "showGroupTitle": { "alias": "showGroupTitle"; "required": false; "isSignal": true; }; "groupHelpText": { "alias": "groupHelpText"; "required": false; "isSignal": true; }; "showHelpText": { "alias": "showHelpText"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readOnly": { "alias": "readOnly"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+//# sourceMappingURL=radio-button-group.component.d.ts.map

package/lib/components/radio-button-group/radio-button-group.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-button-group.component.d.ts","sourceRoot":"","sources":["../../../../../projects/ds-rte-lib/src/lib/components/radio-button-group/radio-button-group.component.ts"],"names":[],"mappings":";AAKA,qBAOa,yBAAyB;IACpC,QAAQ,CAAC,SAAS,8CAAa;IAC/B,QAAQ,CAAC,KAAK,gDAAuB;IACrC,QAAQ,CAAC,SAAS,8CAAuB;IACzC,QAAQ,CAAC,cAAc,+CAAe;IACtC,QAAQ,CAAC,UAAU,8CAAa;IAChC,QAAQ,CAAC,cAAc,+CAAgB;IACvC,QAAQ,CAAC,aAAa,8CAAa;IACnC,QAAQ,CAAC,YAAY,+CAAgB;IACrC,QAAQ,CAAC,YAAY,8CAAa;IAClC,QAAQ,CAAC,KAAK,+CAAgB;IAC9B,QAAQ,CAAC,QAAQ,+CAAgB;IACjC,QAAQ,CAAC,QAAQ,+CAAgB;IAEjC,QAAQ,CAAC,WAAW,0CAAsD;yCAd/D,yBAAyB;2CAAzB,yBAAyB;CAerC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design-system-rte/angular",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Angular components for the Design System RTE",
   "peerDependencies": {
     "@angular/common": "^17.3.0",
@@ -10,5 +10,18 @@
     "@design-system-rte/core": "^0.3.0",
     "tslib": "^2.3.0"
   },
-  "sideEffects": false
-}
+  "sideEffects": false,
+  "module": "fesm2022/design-system-rte-angular.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "esm2022": "./esm2022/design-system-rte-angular.mjs",
+      "esm": "./esm2022/design-system-rte-angular.mjs",
+      "default": "./fesm2022/design-system-rte-angular.mjs"
+    }
+  }
+}

package/{src/public-api.ts → public-api.d.ts}

@@ -7,3 +7,4 @@ export * from "./lib/components/radio-button-group/radio-button-group.component"
 export * from "./lib/components/checkbox/checkbox.component";
 export * from "./lib/components/checkbox-group/checkbox-group.component";
 export * from "./lib/components/icon/icon.component";
+//# sourceMappingURL=public-api.d.ts.map

package/public-api.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"public-api.d.ts","sourceRoot":"","sources":["../../projects/ds-rte-lib/src/public-api.ts"],"names":[],"mappings":"AAAA,cAAc,0CAA0C,CAAC;AACzD,cAAc,sCAAsC,CAAC;AACrD,cAAc,yCAAyC,CAAC;AACxD,cAAc,sCAAsC,CAAC;AACrD,cAAc,sDAAsD,CAAC;AACrE,cAAc,kEAAkE,CAAC;AACjF,cAAc,8CAA8C,CAAC;AAC7D,cAAc,0DAA0D,CAAC;AACzE,cAAc,sCAAsC,CAAC"}

package/ng-package.json

@@ -1,10 +0,0 @@
-{
-  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/lib",
-  "lib": {
-    "entryFile": "src/public-api.ts"
-  },
-  "allowedNonPeerDependencies": [
-    "@design-system-rte/core"
-  ]
-}

package/src/lib/components/button/button.component.html

@@ -1,10 +0,0 @@
-<button
-    class="rte-button {{ variant() }} size-{{ size() }}"
-    [attr.aria-label]="ariaLabel()"
-    [attr.aria-labelledby]="ariaLabelledBy()"
-    [attr.type]="buttonType()"
-    [disabled]="disabled()"
-    (click)="onClick($event)"
->
-    <span class="rte-button-label">{{ label() }}</span>
-</button>

package/src/lib/components/button/button.component.scss

@@ -1,156 +0,0 @@
-@use '@design-system-rte/core/tokens/main.scss' as *;
-
-.rte-button {
-    align-items: center;
-    cursor: pointer;
-    display: inline-flex;
-    flex-shrink: 0;
-    justify-content: center;
-
-    &:focus-visible {
-        outline: 1px solid var(--border-brand-focused);
-        outline-offset: 4px;
-    }
-
-    &.size-s {
-        @include typography-button-s;
-        height: 24px;
-        border-radius: $radius-s;
-        padding: $positive-spacing_050 $positive-spacing_100;
-
-        .rte-button-label {
-            margin: 0 $positive-spacing_050;
-        }
-    }
-
-    &.size-m {
-        @include typography-button-m;
-        height: 32px;
-        border-radius: $radius-s;
-        padding: $positive-spacing_050 $positive-spacing_150;
-
-        .rte-button-label {
-            margin: 0 $positive-spacing_075;
-        }
-    }
-
-    &.size-l {
-        @include typography-button-l;
-        height: 40px;
-        border-radius: $radius-m;
-        padding: $positive-spacing_050 $positive-spacing_200;
-
-        .rte-button-label {
-            margin: 0 $positive-spacing_100;
-        }
-    }
-
-    &.primary {
-        border: var(--border-brand-default);
-        color: var(--content-primary-inverse);
-        background: var(--background-brand-default);
-
-        &:hover {
-            background: var(--background-brand-hover);
-            border: var(--background-brand-hover);
-        }
-
-        &:active {
-            background: var(--background-brand-pressed);
-        }
-
-        &:disabled {
-            background: var(--background-disabled);
-            border: solid  1px var(--border-disabled);
-            color: var(--content-disabled);
-            box-shadow: none;
-            cursor: default;
-        }
-    };
-
-    &.secondary {
-        background: var(--background-default);
-        border: solid 1px var(--border-brand-default);
-        color: var(--content-brand-default);
-
-        &:hover {
-            background: var(--background-brand-inverse-hover);
-            border: solid 1px var(--border-brand-default);
-        }
-
-        &:active {
-            border: var(--background-brand-inverse);
-            background: var(--background-brand-inverse-pressed);
-        }
-
-        &:disabled {
-            background: var(--background-disabled);
-            border: solid 1px var(--border-disabled);
-            color: var(--content-disabled);
-            cursor: default;
-        }
-    };
-
-    &.text {
-        background: transparent;
-        border: none;
-        color: var(--content-brand-default);
-
-        &:hover {
-            background: var(--background-brand-inverse-hover);
-        }
-
-        &:active {
-            background: var(--background-brand-inverse-pressed);
-        }
-
-        &:disabled {
-            background: var(--background-disabled);
-            color: var(--content-disabled);
-            cursor: default;
-        }
-    };
-
-    &.transparent {
-        background: transparent;
-        border: none;
-        color: var(--content-brand-default);
-
-        &:hover {
-            color: var(--content-brand-hover);
-        }
-
-        &:active {
-            color: var(--content-brand-pressed);
-        }
-
-        &:disabled {
-            color: var(--content-disabled);
-            box-shadow: none;
-            cursor: default;
-        }
-    };
-    
-    &.danger {
-        background: var(--background-danger-default);
-        border: none;
-        color: var(--content-primary-inverse);
-        border-radius: $radius-m;
-
-        &:hover {
-            background: var(--background-danger-hover);
-        }
-
-        &:active {
-            background: var(--background-danger-pressed);
-        }
-        
-        &:disabled {
-            background: var(--background-disabled);
-            border: var(--border-disabled);
-            color: var(--content-disabled);
-            box-shadow: none;
-            cursor: default;
-        }
-    }
-}

package/src/lib/components/button/button.component.spec.ts

@@ -1,22 +0,0 @@
-import { ComponentFixture, TestBed } from "@angular/core/testing";
-
-import { ButtonComponent } from "./button.component";
-
-describe("ButtonComponent", () => {
-  let component: ButtonComponent;
-  let fixture: ComponentFixture<ButtonComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [ButtonComponent],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(ButtonComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it("should create", () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/components/button/button.component.stories.ts

@@ -1,99 +0,0 @@
-import { ENTER_KEY, TAB_KEY, SPACE_KEY } from "@design-system-rte/core/constants/keyboard.constants";
-import type { Meta, StoryObj } from "@storybook/angular";
-import { fn, userEvent, within, expect } from "@storybook/test";
-
-import { ButtonComponent } from "./button.component";
-
-const meta: Meta<ButtonComponent> = {
-  title: "Button",
-  component: ButtonComponent,
-  tags: ["autodocs"],
-  argTypes: {
-    variant: {
-      control: "select",
-      options: ["primary", "secondary", "text", "transparent", "danger"],
-    },
-    size: {
-      control: "select",
-      options: ["s", "m", "l"],
-    },
-    disabled: {
-      control: "boolean",
-    },
-  },
-  args: { click: fn() },
-};
-
-export default meta;
-type Story = StoryObj<ButtonComponent>;
-
-const mockFn = fn();
-
-export const Default: Story = {
-  args: {
-    variant: "primary",
-    label: "Button",
-    click: mockFn,
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const button = canvas.getByRole("button");
-    await userEvent.click(button);
-    expect(mockFn).toHaveBeenCalled();
-    button.blur();
-  },
-};
-
-export const Sizing: Story = {
-  render: (args) => ({
-    props: args,
-    template: `
-    <div style="display: flex; gap: 8px;">
-        <rte-button
-          size="s"
-          label="Small"
-          variant="primary"
-          data-testid="small-button"
-          />
-        <rte-button
-          size="m"
-          label="Medium"
-          variant="primary"
-          data-testid="medium-button"
-          />
-          <rte-button
-          size="l"
-          label="Large"
-          variant="primary"
-          data-testid="large-button"
-          />
-    </div>
-    `,
-  }),
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const smallButton = canvas.getByTestId("small-button").getElementsByTagName("button")[0];
-    const mediumButton = canvas.getByTestId("medium-button").getElementsByTagName("button")[0];
-    const largeButton = canvas.getByTestId("large-button").getElementsByTagName("button")[0];
-
-    expect(smallButton.clientHeight).toBe(24);
-    expect(mediumButton.clientHeight).toBe(32);
-    expect(largeButton.clientHeight).toBe(40);
-  },
-};
-
-export const KeyboardInteraction: Story = {
-  args: {
-    ...Default.args,
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const button = canvas.getByRole("button");
-    await userEvent.keyboard(TAB_KEY);
-    expect(button).toHaveFocus();
-    await userEvent.keyboard(ENTER_KEY);
-    await userEvent.keyboard(SPACE_KEY);
-    expect(mockFn).toHaveBeenCalledTimes(2);
-    button.blur();
-  },
-};

package/src/lib/components/button/button.component.ts

@@ -1,27 +0,0 @@
-import { Component, input, output } from "@angular/core";
-import { ButtonSize, ButtonType, ButtonVariant } from "@design-system-rte/core/components/button/button.interface";
-
-@Component({
-  selector: "rte-button",
-  imports: [],
-  standalone: true,
-  templateUrl: "./button.component.html",
-  styleUrl: "./button.component.scss",
-})
-export class ButtonComponent {
-  readonly label = input("");
-  readonly variant = input<ButtonVariant>("primary");
-  readonly size = input<ButtonSize>("m");
-  readonly disabled = input(false);
-  readonly icon = input<string>("");
-  readonly ariaLabel = input<string>("");
-  readonly ariaLabelledBy = input<string>("");
-  readonly buttonType = input<ButtonType>("button");
-
-  readonly click = output<void>();
-
-  onClick(event: MouseEvent | KeyboardEvent): void {
-    event.stopPropagation();
-    this.click.emit();
-  }
-}

package/src/lib/components/checkbox/checkbox.component.html

@@ -1,31 +0,0 @@
-    <div class="rte-checkbox-container">
-        <input
-            type="checkbox"
-            class="rte-checkbox"
-            [id]="id()"
-            [value]="value()"
-            [ngClass]="{'error': error(), 'read-only': readOnly()}"
-            [disabled]="disabled()"
-            [indeterminate]="indeterminate()"
-            [checked]="checked()"
-            (keydown)="onKeydown($event)"
-        />
-            <rte-icon class="rte-checkbox-icons rte-checkbox-icon-selected" name="check-small" [size]="16"/> 
-            <rte-icon class="rte-checkbox-icons rte-checkbox-icon-indeterminated" name="check-indeterminate" [size]="16" /> 
-        <div class="rte-checkbox-text-container">
-            <label 
-            *ngIf="showLabel()" 
-            class="rte-checkbox-label" 
-            [for]="id()"
-            [ngClass]="{
-                'error': error(),
-                'read-only': readOnly(),
-                'disabled': disabled()
-            }"
-            >
-                {{ label() }}
-            </label>
-            <p class="rte-checkbox-description">{{ description() }}</p>
-            <p *ngIf="error() && errorMessage()" class="rte-checkbox-error">{{ errorMessage() }}</p>
-        </div>
-    </div>

package/src/lib/components/checkbox/checkbox.component.scss

@@ -1,170 +0,0 @@
-@use '@design-system-rte/core/tokens/main.scss' as *;
-
-@mixin checked-indeterminate-style {
-  border: 1px solid var(--content-brand-default);
-  background: var(--background-brand-default);
-
-  &:hover {
-    &:not(:disabled):not(:active)::before {
-      opacity: $opacity-20;
-      background: var(--background-brand-default);
-    }
-  }
-
-  &:disabled {
-    border: 1px solid var(--content-disabled);
-    background: var(--background-disabled);
-
-    ~ .rte-checkbox-icons {
-      color: var(--content-disabled);    
-    }
-  }
-
-  &.error {
-    background: var(--background-danger-default);
-  }
-}
-
-.rte-checkbox-container {
-    display: flex;
-    gap: $positive-spacing-150;
-
-  .rte-checkbox {
-    appearance: none;
-    display: flex;
-    width: 16px;
-    height: 16px;
-    border-radius: $radius-xs;
-    border: 1px solid var(--content-tertiary);
-    opacity: $opacity-100;
-    background: var(--background-default);
-    align-items: center;
-    justify-content: center;
-    margin: $positive-spacing_050 0;
-
-    &::before {
-      content: '';
-      display: none;
-      position: absolute;
-      border-radius: $radius-pill;
-      background: var(--background-hover);
-      width: 32px;
-      height: 32px;
-      z-index: -1;
-    }
-
-    &:active::before {
-      opacity: $opacity-100;
-      transform: scale(0);
-      transition: transform 0s, opacity 0s;
-    }
-    
-    &:focus-visible {
-      outline: 1px solid var(--border-brand-focused);
-      outline-offset: 4px;
-    }
-
-    &:hover {
-      cursor: pointer;
-
-      &:not(:disabled)::before {
-        display: inline-block;
-      }
-      &:not(:disabled):not(:active)::before {
-        opacity: $opacity-50;
-        transition: transform 0.15s ease, opacity 0.3s ease;
-      }
-    }
-
-    &:disabled {
-      cursor: default;
-      border: 1px solid var(--content-disabled);
-      background: var(--background-disabled);
-
-      ~ .rte-checkbox-text-container {
-        label,
-        .rte-checkbox-description {
-          color: var(--content-disabled);
-        }
-      }
-    }
-
-    &:checked {
-      @include checked-indeterminate-style;
-
-      &:not(:indeterminate) {
-        ~ .rte-checkbox-icon-selected {
-          display: block;
-        }
-      }
-    }
-
-    &:indeterminate {
-      @include checked-indeterminate-style;
-
-      ~ .rte-checkbox-icon-indeterminated {
-        display: block;
-      }
-    }
-
-    &.read-only {
-      pointer-events: none;
-      cursor: default;
-      border: 1px solid var(--content-tertiary);
-      opacity: $opacity-100;
-      background: var(--background-disabled);
-
-      ~ .rte-checkbox-text-container {
-        label,
-        .checkbox-description {
-          color: var(--content-tertiary);
-        }
-      }
-      ~ .rte-checkbox-icons {
-          color: var(--content-tertiary);
-      }
-
-      &.error {
-        border: 1px solid var(--content-danger);
-        background: var(--background-disabled);
-      }
-    }
-
-    &.error {
-      border: 1px solid var(--content-danger);
-      background: var(--background-default);
-
-      &:hover {
-        &:not(:disabled):not(:active)::before {
-          opacity: $opacity-20;
-          background: var(--background-danger-hover);
-        }
-      }
-    }
-  }
-
-  .rte-checkbox-text-container {
-    label {
-      @include typography-text-l;
-    }
-    .rte-checkbox-description {
-      @include typography-text-s;
-      margin: 0;
-      color: var(--content-tertiary);
-    }
-    .rte-checkbox-error {
-      @include typography-checkbox-error;
-      margin: 0;
-      color: var(--content-danger);
-    }
-  }
-
-  .rte-checkbox-icons {
-    display: none;
-    z-index: 1;
-    pointer-events: none;
-    transform: translateY(4px);
-    position: absolute;
-    color: white;
-  }
-}