@design-system-rte/angular 0.4.3 → 0.4.5

package/src/lib/components/icon/icon-map.ts

@@ -1,305 +0,0 @@
-import { isValidIconName as isValidIconNameShared } from "@design-system-rte/core/components/icon/icon-utils";
-
-export const togglableIcons = {
-  "add-circle": ["add_circle_outlined", "add_circle_filled"],
-  "admin-panel-settings": ["admin_panel_settings_outlined", "admin_panel_settings_filled"],
-  analytics: ["analytics_outlined", "analytics_filled"],
-  archive: ["archive_outlined", "archive_filled"],
-  "arrow-circle-chevron-down": ["arrow_circle_chevron_down_outlined", "arrow_circle_chevron_down_filled"],
-  "arrow-circle-chevron-left": ["arrow_circle_chevron_left_outlined", "arrow_circle_chevron_left_filled"],
-  "arrow-circle-chevron-right": ["arrow_circle_chevron_right_outlined", "arrow_circle_chevron_right_filled"],
-  "arrow-circle-chevron-up": ["arrow_circle_chevron_up_outlined", "arrow_circle_chevron_up_filled"],
-  "arrow-circle-down": ["arrow_circle_down_outlined", "arrow_circle_down_filled"],
-  "arrow-circle-left": ["arrow_circle_left_outlined", "arrow_circle_left_filled"],
-  "arrow-circle-right": ["arrow_circle_right_outlined", "arrow_circle_right_filled"],
-  "arrow-circle-up": ["arrow_circle_up_outlined", "arrow_circle_up_filled"],
-  article: ["article_outlined", "article_filled"],
-  "assignment-complete": ["assignment_complete_outlined", "assignment_complete_filled"],
-  assignment: ["assignment_outlined", "assignment_filled"],
-  "battery-alert": ["battery_alert_outlined", "battery_alert_filled"],
-  "battery-charging-full": ["battery_charging_full_outlined", "battery_charging_full_filled"],
-  "bolt-alt-circle": ["bolt_alt_circle_outlined", "bolt_alt_circle_filled"],
-  "bolt-alt": ["bolt_alt_outlined", "bolt_alt_filled"],
-  "bolt-circle": ["bolt_circle_outlined", "bolt_circle_filled"],
-  bolt: ["bolt_outlined", "bolt_filled"],
-  bookmark: ["bookmark_outlined", "bookmark_filled"],
-  bookmarks: ["bookmarks_outlined", "bookmarks_filled"],
-  build: ["build_outlined", "build_filled"],
-  "calendar-available": ["calendar_available_outlined", "calendar_available_filled"],
-  "calendar-busy": ["calendar_busy_outlined", "calendar_busy_filled"],
-  "calendar-month": ["calendar_month_outlined", "calendar_month_filled"],
-  "calendar-today": ["calendar_today_outlined", "calendar_today_filled"],
-  call: ["call_outlined", "call_filled"],
-  category: ["category_outlined", "category_filled"],
-  "chart-add": ["chart_add_outlined", "chart_add_filled"],
-  "chart-area": ["chart_area_outlined", "chart_area_filled"],
-  "chart-pie": ["chart_pie_outlined", "chart_pie_filled"],
-  "chart-table": ["chart_table_outlined", "chart_table_filled"],
-  "chat-alt": ["chat_alt_outlined", "chat_alt_filled"],
-  "chat-alt-unread": ["chat_alt_unread_outlined", "chat_alt_unread_filled"],
-  chat: ["chat_outlined", "chat_filled"],
-  "chat-unread": ["chat_unread_outlined", "chat_unread_filled"],
-  "check-circle": ["check_circle_outlined", "check_circle_filled"],
-  checkbox: ["checkbox_outlined", "checkbox_filled"],
-  "checkbox-indeterminate": ["checkbox_indeterminate_outlined", "checkbox_indeterminate_filled"],
-  clock: ["clock_outlined", "clock_filled"],
-  "cloud-download": ["cloud_download_outlined", "cloud_download_filled"],
-  cloud: ["cloud_outlined", "cloud_filled"],
-  "cloud-off": ["cloud_off_outlined", "cloud_off_filled"],
-  "cloud-upload": ["cloud_upload_outlined", "cloud_upload_filled"],
-  "comment-add": ["comment_add_outlined", "comment_add_filled"],
-  comment: ["comment_outlined", "comment_filled"],
-  copy: ["copy_outlined", "copy_filled"],
-  dangerous: ["dangerous_outlined", "dangerous_filled"],
-  dashboard: ["dashboard_outlined", "dashboard_filled"],
-  database: ["database_outlined", "database_filled"],
-  delete: ["delete_outlined", "delete_filled"],
-  desktop: ["desktop_outlined", "desktop_filled"],
-  devices: ["devices_outlined", "devices_filled"],
-  draft: ["draft_outlined", "draft_filled"],
-  eco: ["eco_outlined", "eco_filled"],
-  edit: ["edit_outlined", "edit_filled"],
-  "electric-meter": ["electric_meter_outlined", "electric_meter_filled"],
-  error: ["error_outlined", "error_filled"],
-  explore: ["explore_outlined", "explore_filled"],
-  "explore-off": ["explore_off_outlined", "explore_off_filled"],
-  "fast-forward": ["fast_forward_outlined", "fast_forward_filled"],
-  "fast-rewind": ["fast_rewind_outlined", "fast_rewind_filled"],
-  feedback: ["feedback_outlined", "feedback_filled"],
-  "file-copy": ["file_copy_outlined", "file_copy_filled"],
-  "file-download": ["file_download_outlined", "file_download_filled"],
-  "file-upload": ["file_upload_outlined", "file_upload_filled"],
-  "filter-alt": ["filter_alt_outlined", "filter_alt_filled"],
-  "filter-alt-off": ["filter_alt_off_outlined", "filter_alt_off_filled"],
-  fire: ["fire_outlined", "fire_filled"],
-  "fit-screen": ["fit_screen_outlined", "fit_screen_filled"],
-  flag: ["flag_outlined", "flag_filled"],
-  flash: ["flash_outlined", "flash_filled"],
-  "flash-off": ["flash_off_outlined", "flash_off_filled"],
-  "folder-add": ["folder_add_outlined", "folder_add_filled"],
-  folder: ["folder_outlined", "folder_filled"],
-  "folder-move": ["folder_move_outlined", "folder_move_filled"],
-  "folder-open": ["folder_open_outlined", "folder_open_filled"],
-  "folder-shared": ["folder_shared_outlined", "folder_shared_filled"],
-  forum: ["forum_outlined", "forum_filled"],
-  "group-add": ["group_add_outlined", "group_add_filled"],
-  group: ["group_outlined", "group_filled"],
-  groups: ["groups_outlined", "groups_filled"],
-  headphones: ["headphones_outlined", "headphones_filled"],
-  heart: ["heart_outlined", "heart_filled"],
-  help: ["help_outlined", "help_filled"],
-  home: ["home_outlined", "home_filled"],
-  hourglass: ["hourglass_outlined", "hourglass_filled"],
-  "image-broken": ["image_broken_outlined", "image_broken_filled"],
-  image: ["image_outlined", "image_filled"],
-  "image-gallery": ["image_gallery_outlined", "image_gallery_filled"],
-  inbox: ["inbox_outlined", "inbox_filled"],
-  info: ["info_outlined", "info_filled"],
-  keep: ["keep_outlined", "keep_filled"],
-  "keep-off": ["keep_off_outlined", "keep_off_filled"],
-  label: ["label_outlined", "label_filled"],
-  laptop: ["laptop_outlined", "laptop_filled"],
-  "left-panel-open": ["left_panel_open_outlined", "left_panel_open_filled"],
-  "left-panel-close": ["left_panel_close_outlined", "left_panel_close_filled"],
-  "light-off": ["light_off_outlined", "light_off_filled"],
-  "lightbulb-alt": ["lightbulb_alt_outlined", "lightbulb_alt_filled"],
-  "lightbulb-circle": ["lightbulb_circle_outlined", "lightbulb_circle_filled"],
-  lightbulb: ["lightbulb_outlined", "lightbulb_filled"],
-  "list-alt": ["list_alt_outlined", "list_alt_filled"],
-  "location-me": ["location_me_outlined", "location_me_filled"],
-  "location-off": ["location_off_outlined", "location_off_filled"],
-  "location-on": ["location_on_outlined", "location_on_filled"],
-  lock: ["lock_outlined", "lock_filled"],
-  "lock-open": ["lock_open_outlined", "lock_open_filled"],
-  "lock-open-right": ["lock_open_right_outlined", "lock_open_right_filled"],
-  mail: ["mail_outlined", "mail_filled"],
-  "mail-unread": ["mail_unread_outlined", "mail_unread_filled"],
-  map: ["map_outlined", "map_filled"],
-  mic: ["mic_outlined", "mic_filled"],
-  "mic-off": ["mic_off_outlined", "mic_off_filled"],
-  "mode-dark": ["mode_dark_outlined", "mode_dark_filled"],
-  "mode-light": ["mode_light_outlined", "mode_light_filled"],
-  notification: ["notification_outlined", "notification_filled"],
-  "notification-important": ["notification_important_outlined", "notification_important_filled"],
-  "notification-off": ["notification_off_outlined", "notification_off_filled"],
-  "notification-unread": ["notification_unread_outlined", "notification_unread_filled"],
-  palette: ["palette_outlined", "palette_filled"],
-  "pause-circle": ["pause_circle_outlined", "pause_circle_filled"],
-  pause: ["pause_outlined", "pause_filled"],
-  "photo-camera": ["photo_camera_outlined", "photo_camera_filled"],
-  "play-circle": ["play_circle_outlined", "play_circle_filled"],
-  play: ["play_outlined", "play_filled"],
-  power: ["power_outlined", "power_filled"],
-  "power-off": ["power_off_outlined", "power_off_filled"],
-  "power-plug-connect": ["power_plug_connect_outlined", "power_plug_connect_filled"],
-  "power-settings-circle": ["power_settings_circle_outlined", "power_settings_circle_filled"],
-  "power-solar": ["power_solar_outlined", "power_solar_filled"],
-  "power-switch": ["power_switch_outlined", "power_switch_filled"],
-  "power-wind": ["power_wind_outlined", "power_wind_filled"],
-  print: ["print_outlined", "print_filled"],
-  "right-panel-close": ["right_panel_close_outlined", "right_panel_close_filled"],
-  "right-panel-open": ["right_panel_open_outlined", "right_panel_open_filled"],
-  save: ["save_outlined", "save_filled"],
-  send: ["send_outlined", "send_filled"],
-  settings: ["settings_outlined", "settings_filled"],
-  share: ["share_outlined", "share_filled"],
-  "skip-next": ["skip_next_outlined", "skip_next_filled"],
-  "skip-previous": ["skip_previous_outlined", "skip_previous_filled"],
-  smartphone: ["smartphone_outlined", "smartphone_filled"],
-  star: ["star_outlined", "star_filled"],
-  "sticky-note": ["sticky_note_outlined", "sticky_note_filled"],
-  "stop-circle": ["stop_circle_outlined", "stop_circle_filled"],
-  stop: ["stop_outlined", "stop_filled"],
-  subtitles: ["subtitles_outlined", "subtitles_filled"],
-  "text-snippet": ["text_snippet_outlined", "text_snippet_filled"],
-  "trash-restore": ["trash_restore_outlined", "trash_restore_filled"],
-  unarchive: ["unarchive_outlined", "unarchive_filled"],
-  "user-add": ["user_add_outlined", "user_add_filled"],
-  "user-circle": ["user_circle_outlined", "user_circle_filled"],
-  user: ["user_outlined", "user_filled"],
-  "user-settings": ["user_settings_outlined", "user_settings_filled"],
-  verified: ["verified_outlined", "verified_filled"],
-  "video-camera": ["video_camera_outlined", "video_camera_filled"],
-  "video-camera-off": ["video_camera_off_outlined", "video_camera_off_filled"],
-  "video-gallery": ["video_gallery_outlined", "video_gallery_filled"],
-  "view-agenda": ["view_agenda_outlined", "view_agenda_filled"],
-  "view-column": ["view_column_outlined", "view_column_filled"],
-  "view-grid": ["view_grid_outlined", "view_grid_filled"],
-  "view-kanban": ["view_kanban_outlined", "view_kanban_filled"],
-  "view-module": ["view_module_outlined", "view_module_filled"],
-  "view-timeline": ["view_timeline_outlined", "view_timeline_filled"],
-  "visibility-hide": ["visibility_hide_outlined", "visibility_hide_filled"],
-  "visibility-show": ["visibility_show_outlined", "visibility_show_filled"],
-  "volume-down": ["volume_down_outlined", "volume_down_filled"],
-  "volume-mute": ["volume_mute_outlined", "volume_mute_filled"],
-  "volume-off": ["volume_off_outlined", "volume_off_filled"],
-  "volume-up": ["volume_up_outlined", "volume_up_filled"],
-  warning: ["warning_outlined", "warning_filled"],
-  waterdrop: ["waterdrop_outlined", "waterdrop_filled"],
-};
-
-export const regularIcons = {
-  add: "add",
-  "alt-route": "alt_route",
-  apps: "apps",
-  "arrow-alt-down": "arrow_alt_down",
-  "arrow-alt-down-left": "arrow_alt_down_left",
-  "arrow-alt-down-right": "arrow_alt_down_right",
-  "arrow-alt-left": "arrow_alt_left",
-  "arrow-alt-right": "arrow_alt_right",
-  "arrow-alt-up": "arrow_alt_up",
-  "arrow-alt-up-left": "arrow_alt_up_left",
-  "arrow-alt-up-right": "arrow_alt_up_right",
-  "arrow-angle-down-left": "arrow_angle_down_left",
-  "arrow-angle-down-right": "arrow_angle_down_right",
-  "arrow-angle-up-left": "arrow_angle_up_left",
-  "arrow-angle-up-right": "arrow_angle_up_right",
-  "arrow-chevron-down": "arrow_chevron_down",
-  "arrow-chevron-left": "arrow_chevron_left",
-  "arrow-chevron-right": "arrow_chevron_right",
-  "arrow-chevron-up": "arrow_chevron_up",
-  "arrow-double-down": "arrow_double_down",
-  "arrow-double-left": "arrow_double_left",
-  "arrow-double-right": "arrow_double_right",
-  "arrow-double-up": "arrow_double_up",
-  "arrow-down": "arrow_down",
-  "arrow-down-left": "arrow_down_left",
-  "arrow-down-right": "arrow_down_right",
-  "arrow-drop-down": "arrow_drop_down",
-  "arrow-drop-up": "arrow_drop_up",
-  "arrow-left": "arrow_left",
-  "arrow-right": "arrow_right",
-  "arrow-up": "arrow_up",
-  "arrow-up-left": "arrow_up_left",
-  "arrow-up-right": "arrow_up_right",
-  asterisk: "asterisk",
-  "attach-file": "attach_file",
-  "battery-alt-empty": "battery_alt_empty",
-  "battery-alt-full": "battery_alt_full",
-  "battery-charging": "battery_charging",
-  "battery-empty": "battery_empty",
-  "battery-full": "battery_full",
-  bluetooth: "bluetooth",
-  "bluetooth-off": "bluetooth_off",
-  "chart-bar": "chart_bar",
-  "chart-bar-stacked": "chart_bar_stacked",
-  check: "check",
-  "check-indeterminate": "check_indeterminate",
-  "check-small": "check_small",
-  "checkbox-empty": "checkbox_empty",
-  close: "close",
-  compare: "compare",
-  "copy-all": "copy_all",
-  "crisis-alert": "crisis_alert",
-  cut: "cut",
-  download: "download",
-  "download-done": "download_done",
-  "drag-handle": "drag_handle",
-  "drag-indicator": "drag_indicator",
-  exclamation: "exclamation",
-  "explore-travel": "explore_travel",
-  "external-link": "external_link",
-  filter: "filter",
-  "filter-off": "filter_off",
-  "first-page": "first_page",
-  forward: "forward",
-  fullscreen: "fullscreen",
-  "fullscreen-exit": "fullscreen_exit",
-  history: "history",
-  "hourglass-empty": "hourglass_empty",
-  "info-i": "info_i",
-  language: "language",
-  "last-page": "last_page",
-  link: "link",
-  "link-off": "link_off",
-  list: "list",
-  "location-disabled": "location_disabled",
-  login: "login",
-  logout: "logout",
-  menu: "menu",
-  "menu-open": "menu_open",
-  monitoring: "monitoring",
-  "more-down": "more_down",
-  "more-horiz": "more_horiz",
-  "more-up": "more_up",
-  "more-vert": "more_vert",
-  ohm: "ohm",
-  "open-in-full": "open_in_full",
-  paste: "paste",
-  "play-pause": "play_pause",
-  "power-input": "power_input",
-  "power-plug": "power_plug",
-  "power-settings": "power_settings",
-  "priority-high": "priority_high",
-  public: "public",
-  publish: "publish",
-  "question-mark": "question_mark",
-  radar: "radar",
-  "radio-button-empty": "radio_button_empty",
-  redo: "redo",
-  reload: "reload",
-  remove: "remove",
-  reply: "reply",
-  "reply-all": "reply_all",
-  route: "route",
-  search: "search",
-  "side-navigation": "side_navigation",
-  sort: "sort",
-  "support-agent": "support_agent",
-  timeline: "timeline",
-  "trending-down": "trending_down",
-  "trending-flat": "trending_flat",
-  "trending-up": "trending_up",
-  tune: "tune",
-  undo: "undo",
-  upload: "upload",
-  water: "water",
-  "water-alt": "water_alt",
-  wifi: "wifi",
-  "wifi-off": "wifi_off",
-  windmill: "windmill",
-  "zoom-out": "zoom_out",
-  "zoom-in": "zoom_in",
-};
-
-export const isValidIconName = (name: string): boolean => isValidIconNameShared(name, regularIcons, togglableIcons);

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

@@ -1 +0,0 @@
-<div class="rte-icon-container" [innerHTML]="svgContent" [style.height]="(size())+'px'" [style.width]="(size())+'px'"></div>

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

@@ -1,3 +0,0 @@
-.rte-icon-container {
-  display: flex
-}

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

@@ -1,58 +0,0 @@
-import { CommonModule } from "@angular/common";
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  DestroyRef,
-  effect,
-  inject,
-  input,
-} from "@angular/core";
-import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
-import { DomSanitizer, SafeHtml } from "@angular/platform-browser";
-import { Observable } from "rxjs";
-
-import { IconService, RegularIconIdKey, TogglableIconIdKey } from "./icon.service";
-
-@Component({
-  selector: "rte-icon",
-  imports: [CommonModule],
-  standalone: true,
-  templateUrl: "./icon.component.html",
-  styleUrl: "./icon.component.scss",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [IconService],
-})
-export class IconComponent {
-  readonly name = input.required<RegularIconIdKey | TogglableIconIdKey>();
-  readonly size = input(20);
-  readonly color = input("currentColor");
-  readonly classes = input("");
-  readonly appearance = input<"outlined" | "filled">();
-  destroyRef = inject(DestroyRef);
-
-  svgContent: SafeHtml | null = null;
-  svg!: Observable<string>;
-
-  private sanitizer = inject(DomSanitizer);
-  private iconService = inject(IconService);
-  private cdr = inject(ChangeDetectorRef);
-
-  constructor() {
-    effect(() => {
-      this.setSvgContent(this.name());
-    });
-  }
-
-  private setSvgContent(svgName: RegularIconIdKey | TogglableIconIdKey) {
-    const svgFile = this.iconService.getSvg(svgName, this.appearance() || "outlined");
-
-    svgFile.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((res) => {
-      const size = this.size();
-      const svgWithSize = res.replace(/<svg([^>]*)>/, `<svg$1 width="${size}" height="${size}">`);
-
-      this.svgContent = this.sanitizer.bypassSecurityTrustHtml(svgWithSize);
-      this.cdr.markForCheck();
-    });
-  }
-}

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

@@ -1,33 +0,0 @@
-import { HttpClient } from "@angular/common/http";
-import { inject, Injectable } from "@angular/core";
-import { Observable } from "rxjs";
-
-import { regularIcons, togglableIcons } from "./icon-map";
-
-export type RegularIconIdKey = keyof typeof regularIcons;
-export type TogglableIconIdKey = keyof typeof togglableIcons;
-
-@Injectable()
-export class IconService {
-  private http = inject(HttpClient);
-
-  getSvg(name: RegularIconIdKey | TogglableIconIdKey, appearance: "outlined" | "filled"): Observable<string> {
-    if (!this.http) {
-      throw new Error("HttpClient is not available");
-    }
-    const toggableIcon = togglableIcons[name as TogglableIconIdKey];
-
-    if (toggableIcon) {
-      const [outlinedIconName, filledIconName] = toggableIcon;
-
-      const iconName = appearance === "filled" ? filledIconName : outlinedIconName;
-      return this.http.get(`assets/icons/${iconName}.svg`, { responseType: "text" });
-    } else {
-      const iconName = regularIcons[name as RegularIconIdKey];
-      if (!iconName) {
-        throw new Error(`Icon ${name} not found`);
-      }
-      return this.http.get(`assets/icons/${iconName}.svg`, { responseType: "text" });
-    }
-  }
-}

package/src/lib/components/icon/icon.stories.ts

@@ -1,84 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/angular";
-
-import { regularIcons as RegularIconsList, togglableIcons as TogglableIconsList } from "./icon-map";
-import { IconComponent } from "./icon.component";
-
-const RegularIconIds = Object.keys(RegularIconsList);
-const TogglableIconIds = Object.keys(TogglableIconsList);
-
-const meta = {
-  title: "Icon",
-  component: IconComponent,
-  tags: ["autodocs"],
-  argTypes: {
-    name: {
-      control: "select",
-      options: [...RegularIconIds, ...TogglableIconIds].sort((a, b) => a.localeCompare(b)),
-      description: "Nom de l’icône à afficher",
-      defaultValue: "check",
-    },
-    appearance: {
-      control: "select",
-      options: ["outlined", "filled"],
-      description: "Apparence de l’icône (pour les icônes togglables)",
-      defaultValue: "outlined",
-    },
-    size: {
-      control: { type: "number", min: 20, step: 1 },
-      description: "Taille de l’icône en pixels",
-      defaultValue: 20,
-    },
-    color: {
-      control: "color",
-      description: "Couleur de l’icône",
-      defaultValue: "#000000",
-    },
-  },
-} satisfies Meta<IconComponent>;
-
-export default meta;
-
-type Story = StoryObj<IconComponent>;
-
-export const Default: Story = {
-  args: {
-    name: "add",
-    size: 20,
-    color: "#000000",
-    appearance: "outlined",
-  },
-};
-
-export const RegularIcons: Story = {
-  render: (args) => ({
-    props: { ...args, iconNames: RegularIconIds },
-    template: `
-    <div style="display: flex; flex-direction: column; flex-wrap: wrap; gap: 10px; height: 700px">
-      <div *ngFor="let iconName of iconNames" style="display: flex; align-items: center; gap: 5px; border: 1px solid #ccc; padding: 5px">
-        <rte-icon
-          [name]="iconName"
-        />
-      <span>{{iconName}}</span>
-      </div>
-    </div>`,
-  }),
-};
-
-export const TogglableIcons: Story = {
-  render: (args) => ({
-    props: { ...args, iconNames: TogglableIconIds },
-    template: `
-    <div style="display: flex; flex-direction: column; flex-wrap: wrap; gap: 10px; height: 700px">
-      <div *ngFor="let iconName of iconNames" style="display: flex; align-items: center; gap: 5px; border: 1px solid #ccc; padding: 5px">
-        <rte-icon
-          [name]="iconName"
-        />
-         <rte-icon
-          [name]="iconName"
-          appearance="filled"
-        />
-      <span>{{iconName}}</span>
-      </div>
-    </div>`,
-  }),
-};

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

@@ -1,16 +0,0 @@
-<button
-  *ngIf="isValidIconName"
-  class="rte-icon-button {{ variant() }} size-{{ size() }}"
-  [class.compact-spacing]="compactSpacing()"
-  [disabled]="disabled()"
-  [attr.aria-label]="ariaLabel()"
-  [attr.aria-labelledby]="ariaLabelledBy()"
-  [type]="type()"
-  (click)="onClick($event)"
->
-  <rte-icon
-    [name]="name()"
-    [appearance]="appearance()"
-    [size]="buttonIconSize()"
-  />
-</button>

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

@@ -1,165 +0,0 @@
-@use '@design-system-rte/core/design-tokens/main.scss' as *;
-
-.rte-icon-button {
-    display: inline-flex;
-    cursor: pointer;
-    height: 24px;
-    align-items: center;
-    gap: $positive-spacing_0;
-    flex-shrink: 0;
-
-    &:focus-visible {
-        outline: none;
-        position: relative;
-
-        &::after {
-            content: '';
-            position: absolute;
-            inset: -4px;
-            border-radius: 6px;
-            pointer-events: none;
-            box-shadow: 0 0 0 1px var(--border-brand-focused);
-        }
-    }
-
-    &.size-s {
-        border-radius: $radius-s;
-        height: 24px;
-        padding: $positive-spacing_025 $positive-spacing_050;
-
-        &.compact-spacing {
-            height: 16px;
-        }
-    }
-
-    &.size-m {
-        border-radius: $radius-s;
-        height: 32px;
-        padding: $positive-spacing_050 $positive-spacing_075;
-
-        &.compact-spacing {
-            height: 20px;
-        }
-    }
-
-    &.size-l {
-        border-radius: $radius-m;
-        height: 40px;
-        padding: $positive-spacing_075 $positive-spacing_100;
-
-        &.compact-spacing {
-            height: 24px;
-        }
-    }
-
-    &.primary {
-        background: var(--background-brand-default);
-        border: var(--border-brand-default);
-        color: var(--content-primary-inverse);
-
-        &:hover {
-            background: var(--background-brand-hover);
-            border: var(--background-brand-hover);
-        }
-
-        &:active {
-            background: var(--background-brand-pressed);
-        }
-
-        &:disabled {
-            background: var(--background-disabled);
-            border: solid $width-xs var(--border-disabled);
-            box-shadow: none;
-            color: var(--content-disabled);
-            cursor: default;
-        }
-    }
-
-    &.secondary {
-        background: var(--background-default);
-        border: solid $width-xs var(--border-brand-default);
-        color: var(--content-brand-default);
-
-        &:hover {
-            background: var(--background-brand-inverse-hover);
-            border: solid $width-xs var(--border-brand-default);
-        }
-
-        &:active {
-            background: var(--background-brand-inverse-pressed);
-        }
-
-        &:disabled {
-            background: var(--background-disabled);
-            border: solid $width-xs 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-press);
-        }
-
-        &:disabled {
-            box-shadow: none;
-            background-color: var(--background-disabled);
-            color: var(--content-disabled);
-            cursor: default;
-        }
-    }
-
-    &.danger {
-        background: var(--background-danger-default);
-        border: none;
-        color: var(--content-primary-inverse);
-
-        &:hover {
-            background: var(--background-danger-hover);
-        }
-
-        &:active {
-            background: var(--background-danger-pressed);
-        }
-
-        &:disabled {
-            background: var(--background-disabled);
-            border: solid $width-xs var(--border-disabled);
-            color: var(--content-disabled);
-            cursor: default;
-        }
-    }
-
-    &.compact-spacing {
-        padding: $positive-spacing_0;
-    }
-}