@sarasanalytics-com/design-system 0.0.113 → 0.0.115

package/lib/chips/chips.component.d.ts

@@ -21,3 +21,11 @@ export declare class ChipsComponent {
     static ɵfac: i0.ɵɵFactoryDeclaration<ChipsComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ChipsComponent, "sa-chip", never, { "id": { "alias": "id"; "required": false; }; "iconPath": { "alias": "iconPath"; "required": false; }; "text": { "alias": "text"; "required": false; }; "type": { "alias": "type"; "required": false; }; "state": { "alias": "state"; "required": false; }; "filling": { "alias": "filling"; "required": false; }; "iconPosition": { "alias": "iconPosition"; "required": false; }; "largeStateIcon": { "alias": "largeStateIcon"; "required": false; }; "largeStateText": { "alias": "largeStateText"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; }, { "onClickEvent": "onClickEvent"; }, never, never, true, never>;
 }
+export interface IChip {
+    id?: string | number;
+    text: string;
+    status?: 'active' | 'inactive' | 'disabled';
+    type?: 'small' | 'regular' | 'large';
+    state?: 'primary' | 'secondary' | 'neutral' | 'error' | 'warning' | 'success';
+    filling?: 'filled' | 'outline';
+}

package/lib/icon/icon.component.d.ts

@@ -27,3 +27,11 @@ export declare class IconComponent {
     static ɵfac: i0.ɵɵFactoryDeclaration<IconComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<IconComponent, "sa-icon", never, { "img": { "alias": "img"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "size": { "alias": "size"; "required": false; }; "color": { "alias": "color"; "required": false; }; "iconPath": { "alias": "iconPath"; "required": false; }; "iconUrl": { "alias": "iconUrl"; "required": false; }; "customClass": { "alias": "customClass"; "required": false; }; "href": { "alias": "href"; "required": false; }; "hrefTarget": { "alias": "hrefTarget"; "required": false; }; }, { "onClickEvent": "onClickEvent"; }, never, never, true, never>;
 }
+export interface saIcon {
+    icon?: IconName;
+    iconPath?: string;
+    iconUrl?: string;
+    size?: string;
+    color?: string;
+    customClass?: string;
+}

package/lib/left-nav/left-nav.component.d.ts

@@ -1,26 +1,32 @@
 import { EventEmitter } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { MatTooltip } from '@angular/material/tooltip';
+import { IMenu } from '../menu/menu.directive';
 import * as i0 from "@angular/core";
 export declare class LeftNavComponent {
     private route;
     private router;
+    templateItemContainer: any;
     data: ILeftNav;
     clickEvent: EventEmitter<ILeftNavClickEvent>;
     hoverEvent: EventEmitter<ILeftNavBlurEvent>;
+    onEvent: EventEmitter<any>;
     private activeItem;
     constructor(route: ActivatedRoute, router: Router);
     ngOnInit(): void;
+    ngAfterViewInit(): void;
     setItemActive(index: number): void;
     onNavItemClick(item: ILeftNavItem, index: number, event?: any): void;
     onFooterItemClick(item: ILeftNavItem, index: number, event?: any): void;
     onFooterItemBlur(item: ILeftNavItem, index: number, event: any, tooltip: MatTooltip): void;
     onNavItemBlur(item: ILeftNavItem, index: number, event: any, tooltip: MatTooltip): void;
+    onMenuEvent(event: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<LeftNavComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LeftNavComponent, "sa-left-nav", never, { "data": { "alias": "data"; "required": false; }; }, { "clickEvent": "clickEvent"; "hoverEvent": "hoverEvent"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LeftNavComponent, "sa-left-nav", never, { "data": { "alias": "data"; "required": false; }; }, { "clickEvent": "clickEvent"; "hoverEvent": "hoverEvent"; "onEvent": "onEvent"; }, never, ["*"], true, never>;
 }
 export interface ILeftNav {
     items?: ILeftNavItem[];
+    templateItems?: Array<any>;
     footerItems?: ILeftNavItem[];
 }
 export interface ILeftNavItem {
@@ -32,7 +38,9 @@ export interface ILeftNavItem {
     path?: string;
     active?: boolean;
     type?: 'ICON' | 'AVATAR';
+    menu?: IMenu;
     altText?: string;
+    ShowSearch?: boolean;
     iconLabel?: string;
 }
 export interface ILeftNavClickEvent {

package/lib/menu/menu-list/menu-item.component.d.ts

@@ -0,0 +1,7 @@
+import { IMenuItem } from '../menu.directive';
+import * as i0 from "@angular/core";
+export declare class SAMenuItemComponent {
+    item: IMenuItem;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SAMenuItemComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SAMenuItemComponent, "sa-menu-item", never, { "item": { "alias": "item"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/menu/menu.component.d.ts

@@ -0,0 +1,22 @@
+import { SimpleChanges, EventEmitter } from '@angular/core';
+import { Overlay } from '@angular/cdk/overlay';
+import { IMenu, IMenuItem } from './menu.directive';
+import * as i0 from "@angular/core";
+export declare class SAMenuComponent {
+    private overlay;
+    position: 'left' | 'right' | 'top' | 'bottom';
+    menu: IMenu;
+    hostEl: any;
+    onEvent: EventEmitter<any>;
+    onKeyUpEvent: EventEmitter<any>;
+    closeEvent: EventEmitter<any>;
+    isExpanded: boolean;
+    constructor(overlay: Overlay);
+    ngOnChanges(changes: SimpleChanges): void;
+    ngAfterViewInit(): void;
+    setPosition(): void;
+    onMenuItemClick(event: any, item: IMenuItem): void;
+    onSearch(event: any): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SAMenuComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SAMenuComponent, "sa-menu", never, { "position": { "alias": "position"; "required": false; }; "menu": { "alias": "menu"; "required": false; }; "hostEl": { "alias": "hostEl"; "required": false; }; }, { "onEvent": "onEvent"; "onKeyUpEvent": "onKeyUpEvent"; "closeEvent": "closeEvent"; }, never, never, true, never>;
+}

package/lib/menu/menu.directive.d.ts

@@ -0,0 +1,50 @@
+import { Overlay } from '@angular/cdk/overlay';
+import { ElementRef, EventEmitter, TemplateRef, ViewContainerRef } from '@angular/core';
+import { IChip } from '../chips/chips.component';
+import { saIcon } from '../icon/icon.component';
+import * as i0 from "@angular/core";
+export declare class MenuDirective {
+    private overlay;
+    private elRef;
+    saMenuRef: ViewContainerRef | TemplateRef<ElementRef> | null;
+    onMenuEvent: EventEmitter<any>;
+    onEvent: EventEmitter<any>;
+    _saMenu: IMenu;
+    _position: 'left' | 'right' | 'top' | 'bottom';
+    get saMenu(): IMenu;
+    set saMenu(value: IMenu);
+    get position(): 'left' | 'right' | 'top' | 'bottom';
+    set position(value: 'left' | 'right' | 'top' | 'bottom');
+    constructor(overlay: Overlay, elRef: ElementRef);
+    onClick(e: any): void;
+    ngAfterViewInit(): void;
+    attachMenu(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MenuDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MenuDirective, "[saMenu]", never, { "saMenuRef": { "alias": "saMenuRef"; "required": false; }; "saMenu": { "alias": "saMenu"; "required": false; }; "position": { "alias": "saManuPosition"; "required": false; }; }, { "onMenuEvent": "onMenuEvent"; "onEvent": "onEvent"; }, never, never, true, never>;
+}
+export interface IMenu {
+    width?: string;
+    title?: string;
+    showTray?: boolean;
+    items?: IMenuItem[];
+    showSearch?: boolean;
+    showAddIcon?: boolean;
+    searchPlaceholder?: string;
+    itemGroups?: IMenuGroup[];
+    overlayConfig?: {
+        offsetX?: number;
+        offsetY?: number;
+    };
+}
+export interface IMenuItem {
+    label?: string;
+    isSelected?: boolean;
+    id?: string | number;
+    status?: 'active' | 'inactive' | 'disabled';
+    chips?: Array<IChip>;
+    icon?: saIcon;
+}
+export interface IMenuGroup {
+    groupTitle?: string;
+    items?: IMenuItem[];
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sarasanalytics-com/design-system",
-  "version": "0.0.113",
+  "version": "0.0.115",
   "peerDependencies": {
     "@angular/common": "^17.2.0",
     "@angular/core": "^17.2.0"
@@ -22,4 +22,4 @@
       "default": "./fesm2022/sarasanalytics-com-design-system.mjs"
     }
   }
-}
+}

package/styles/styles.css

@@ -1,428 +0,0 @@
-/*
-  1. Use a more-intuitive box-sizing model.
-*/
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-html,
-body {
-  height: 100%;
-}
-
-body {
-  margin: 0;
-  font-family: Roboto, "Helvetica Neue", sans-serif;
-}
-
-:root {
-  --font: 'Roboto';
-  --font-family: 'Roboto';
-  --font-roboto: 'Roboto';
-  --font-inter: 'Inter';
-  --font-poppins: "Poppins";
-  --font-helvetica: "Helvetica";
-  --small-2px: 2px;
-  --small-3px: 3px;
-  --small-4px: 4px;
-  --small-6px: 6px;
-  --small-8px: 8px;
-  --small-10px: 10px;
-  --small-12px: 12px;
-  --small-14px: 14px;
-  --small-16px: 16px;
-  --small-18px: 18px;
-  --medium-20px: 20px;
-  --medium-22px: 22px;
-  --medium-24px: 24px;
-  --medium-28px: 28px;
-  --medium-32px: 32px;
-  --medium-36px: 36px;
-  --large-40px: 40px;
-  --large-42px: 42px;
-  --large-44px: 44px;
-  --large-48px: 48px;
-  --large-56px: 56px;
-  --large-64px: 64px;
-  --form-email-icon-color: #33961F;
-
-  --sa-skeleton-background: #e9ecef;
-  --sa-skeleton-shine: rgba(255, 255, 255, 0.3);
-  --sa-skeleton-radius: 4px;
-  --sa-skeleton-animation-duration: 1.5s;
-  --sa-skeleton-gap: 1rem;
-  --sa-skeleton-padding: 1rem;
-}
-
-.insights-theme {
-  --primary-50: #EAFFFD;
-  --primary-100: #CAFFFB;
-  --primary-200: #9CFFFA;
-  --primary-300: #00DDEA;
-  --primary-400: #00AFC4;
-  --primary-500: #008597;
-  --primary-600: #0B6E7F;
-  --primary-700: #0E5B6B;
-  --primary-800: #023D4A;
-  --primary-900: #01303A;
-  --secondary-50: #FFF3EB;
-  --secondary-100: #FFD8C0;
-  --secondary-200: #FFC6A2;
-  --secondary-300: #FEAB78;
-  --secondary-400: #FE9B5D;
-  --secondary-500: #FE8235;
-  --secondary-600: #E77630;
-  --secondary-700: #B45C26;
-  --secondary-800: #8C481D;
-  --secondary-900: #6B3716;
-  --grey-50: #E9EAEB;
-  --grey-100: #BAC0C1;
-  --grey-200: #98A1A3;
-  --grey-300: #697779;
-  --grey-400: #4C5C5F;
-  --grey-500: #1F3437;
-  --grey-600: #1C2F32;
-  --grey-700: #162527;
-  --grey-800: #111C1E;
-  --grey-900: #0D1517;
-  --semantic-success-50: #EBF5E9;
-  --semantic-success-100: #C0DEBA;
-  --semantic-success-200: #A1CF98;
-  --semantic-success-300: #76B969;
-  --semantic-success-400: #5CAB4C;
-  --semantic-success-500: #33961F;
-  --semantic-success-600: #2E891C;
-  --semantic-success-700: #246B16;
-  --semantic-success-800: #1C5311;
-  --semantic-success-900: #153F0D;
-  --semantic-error-50: #F8E9E9;
-  --semantic-error-100: #EBBCB9;
-  --semantic-error-200: #E19C98;
-  --semantic-error-300: #D36E68;
-  --semantic-error-400: #CA524B;
-  --semantic-error-500: #BD271E;
-  --semantic-error-600: #AC231B;
-  --semantic-error-700: #861C15;
-  --semantic-error-800: #681511;
-  --semantic-error-900: #4F100D;
-  --semantic-purple-50: #F3EFFD;
-  --semantic-purple-100: #D8CCFA;
-  --semantic-purple-200: #C6B4F7;
-  --semantic-purple-300: #AB92F4;
-  --semantic-purple-400: #9B7DF1;
-  --semantic-purple-500: #815BED;
-  --semantic-purple-600: #7654D9;
-  --semantic-purple-700: #5C41A9;
-  --semantic-purple-800: #483383;
-  --semantic-purple-900: #372764;
-  --semantic-yellow-50: #FEF6E6;
-  --semantic-yellow-100: #FBE2B3;
-  --semantic-yellow-200: #F9D58E;
-  --semantic-yellow-300: #F6C15A;
-  --semantic-yellow-400: #F5B53A;
-  --text-highemphasis: #1B1F20;
-  --text-mediumemphasis: #697779;
-  --text-lowemphasis: #98A2A3;
-  --text-white: #FFFFFF;
-  --text-primary: #008597;
-  --text-success: #33961F;
-  --text-error: #BD271E;
-  --icon-white: #FFFFFF;
-  --semantic-yellow-500: #F2A209;
-  --semantic-yellow-600: #DC9408;
-  --semantic-yellow-700: #AC7406;
-  --semantic-yellow-800: #855A05;
-  --semantic-yellow-900: #664404;
-  --structural-white: #FFFFFF;
-  --icon-grey1: #757575;
-  --structural-primarytint: #F5F9FA;
-  --structural-neutral1: #F9F9F9;
-  --structural-neutral2: #FFFAFA;
-  --structural-neutral3: #FAFAFA;
-  --logo-color-primary: #008597;
-  --logo-color-secondary: #9CFFFA;
-}
-
-.saras-theme {
-  --primary-50: #E8F1FC;
-  --primary-100: #B8D4F7;
-  --primary-200: #96C0F3;
-  --primary-300: #66A2ED;
-  --primary-400: #4992E9;
-  --primary-500: #1B77E4;
-  --primary-600: #196CCF;
-  --primary-700: #1354A2;
-  --primary-800: #0F417D;
-  --primary-900: #0B3160;
-  --secondary-50: #FFF3EB;
-  --secondary-100: #FFD8C0;
-  --secondary-200: #FFC6A2;
-  --secondary-300: #FEAB78;
-  --secondary-400: #FE9B5D;
-  --secondary-500: #FE8235;
-  --secondary-600: #E77630;
-  --secondary-700: #B45C26;
-  --secondary-800: #8C481D;
-  --secondary-900: #6B3716;
-  --grey-50: #E9E9EB;
-  --grey-100: #BABDC1;
-  --grey-200: #989CA3;
-  --grey-300: #697079;
-  --grey-400: #4C545F;
-  --grey-500: #1F2937;
-  --grey-600: #1C2532;
-  --grey-700: #161D27;
-  --grey-800: #11161E;
-  --grey-900: #0D1117;
-  --semantic-success-50: #EBF5E9;
-  --semantic-success-100: #C0DEBA;
-  --semantic-success-200: #A1CF98;
-  --semantic-success-300: #76B969;
-  --semantic-success-400: #5CAB4C;
-  --semantic-success-500: #33961F;
-  --semantic-success-600: #2E891C;
-  --semantic-success-700: #246B16;
-  --semantic-success-800: #1C5311;
-  --semantic-success-900: #153F0D;
-  --semantic-error-50: #F8E9E9;
-  --semantic-error-100: #EBBCB9;
-  --semantic-error-200: #E19C98;
-  --semantic-error-300: #D36E68;
-  --semantic-error-400: #CA524B;
-  --semantic-error-500: #BD271E;
-  --semantic-error-600: #AC231B;
-  --semantic-error-700: #861C15;
-  --semantic-error-800: #681511;
-  --semantic-error-900: #4F100D;
-  --semantic-purple-50: #F3EFFD;
-  --semantic-purple-100: #D8CCFA;
-  --semantic-purple-200: #C6B4F7;
-  --semantic-purple-300: #AB92F4;
-  --semantic-purple-400: #9B7DF1;
-  --semantic-purple-500: #815BED;
-  --semantic-purple-600: #7654D9;
-  --semantic-purple-700: #5C41A9;
-  --semantic-purple-800: #483383;
-  --semantic-purple-900: #372764;
-  --semantic-yellow-50: #FEF6E6;
-  --semantic-yellow-100: #FBE2B3;
-  --semantic-yellow-200: #F9D58E;
-  --semantic-yellow-300: #F6C15A;
-  --semantic-yellow-400: #F5B53A;
-  --text-highemphasis: #1B1D20;
-  --text-mediumemphasis: #697079;
-  --text-lowemphasis: #989CA3;
-  --text-white: #FFFFFF;
-  --text-primary: #1B77E4;
-  --text-success: #33961F;
-  --text-error: #BD271E;
-  --icon-white: #FFFFFF;
-  --semantic-yellow-500: #F2A209;
-  --semantic-yellow-600: #DC9408;
-  --semantic-yellow-700: #AC7406;
-  --semantic-yellow-800: #855A05;
-  --semantic-yellow-900: #664404;
-  --structural-white: #FFFFFF;
-  --icon-grey1: #757575;
-  --structural-primarytint: #FAFCFF;
-  --structural-neutral1: #F9F9F9;
-  --structural-neutral2: #FFFAFA;
-  --structural-neutral3: #FAFAFA;
-  --logo-color-primary: #1B77E4;
-  --logo-color-secondary: #96C0F3;
-}
-
-.purple-theme {
-  --primary-50: #F4EBFF;
-  --primary-100: #E9D7FE;
-  --primary-200: #D6BBFB;
-  --primary-300: #B692F6;
-  --primary-400: #9E77ED;
-  --primary-500: #7F56D9;
-  --primary-600: #53389E;
-  --primary-700: #53389E;
-  --primary-800: #42307D;
-  --primary-900: #2C1C5F;
-  --secondary-50: #FFF3EB;
-  --secondary-100: #FFD8C0;
-  --secondary-200: #FFC6A2;
-  --secondary-300: #FEAB78;
-  --secondary-400: #FE9B5D;
-  --secondary-500: #FE8235;
-  --secondary-600: #E77630;
-  --secondary-700: #B45C26;
-  --secondary-800: #8C481D;
-  --secondary-900: #6B3716;
-  --grey-50: #F2F4F7;
-  --grey-100: #EAECF0;
-  --grey-200: #D0D5DD;
-  --grey-300: #98A2B3;
-  --grey-400: #475467;
-  --grey-500: #344054;
-  --grey-600: #1D2939;
-  --grey-700: #1D2939;
-  --grey-800: #101828;
-  --grey-900: #0C111D;
-  --semantic-success-50: #EBF5E9;
-  --semantic-success-100: #C0DEBA;
-  --semantic-success-200: #A1CF98;
-  --semantic-success-300: #76B969;
-  --semantic-success-400: #5CAB4C;
-  --semantic-success-500: #33961F;
-  --semantic-success-600: #2E891C;
-  --semantic-success-700: #246B16;
-  --semantic-success-800: #1C5311;
-  --semantic-success-900: #153F0D;
-  --semantic-error-50: #F8E9E9;
-  --semantic-error-100: #EBBCB9;
-  --semantic-error-200: #E19C98;
-  --semantic-error-300: #D36E68;
-  --semantic-error-400: #CA524B;
-  --semantic-error-500: #BD271E;
-  --semantic-error-600: #AC231B;
-  --semantic-error-700: #861C15;
-  --semantic-error-800: #681511;
-  --semantic-error-900: #4F100D;
-  --semantic-purple-50: #F3EFFD;
-  --semantic-purple-100: #D8CCFA;
-  --semantic-purple-200: #C6B4F7;
-  --semantic-purple-300: #AB92F4;
-  --semantic-purple-400: #9B7DF1;
-  --semantic-purple-500: #815BED;
-  --semantic-purple-600: #7654D9;
-  --semantic-purple-700: #5C41A9;
-  --semantic-purple-800: #483383;
-  --semantic-purple-900: #372764;
-  --semantic-yellow-50: #FEF6E6;
-  --semantic-yellow-100: #FBE2B3;
-  --semantic-yellow-200: #F9D58E;
-  --semantic-yellow-300: #F6C15A;
-  --semantic-yellow-400: #F5B53A;
-  --text-highemphasis: #1C1B20;
-  --text-mediumemphasis: #6D6979;
-  --text-lowemphasis: #9A98A3;
-  --text-white: #FFFFFF;
-  --text-primary: #815BED;
-  --text-success: #33961F;
-  --text-error: #BD271E;
-  --icon-white: #FFFFFF;
-  --semantic-yellow-500: #F2A209;
-  --semantic-yellow-600: #DC9408;
-  --semantic-yellow-700: #AC7406;
-  --semantic-yellow-800: #855A05;
-  --semantic-yellow-900: #664404;
-  --structural-white: #FFFFFF;
-  --icon-grey1: #757575;
-  --structural-primarytint: #FBFAFF;
-  --structural-neutral1: #F9F9F9;
-  --structural-neutral2: #FFFAFA;
-  --structural-neutral3: #FAFAFA;
-  --logo-color-primary: #7F56D9;
-  --logo-color-secondary: #D6BBFB;
-}
-
-.ag-header {
-  font-family: var(--font);
-  font-size: 14px;
-  font-weight: 400;
-  height: 20px;
-  line-height: 20px;
-}
-
-.ag-header-cell lib-grid-cell {
-  width: 100%;
-}
-
-.ag-header-cell-label {
-  font-family: var(--font);
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 20px;
-  margin-left: 10px;
-}
-
-.checkbox-card-group {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, 38.875rem);
-  gap: 1.75rem 2rem;
-  max-width: -webkit-fill-available;
-  margin-bottom: 1.5rem;
-}
-
-.form-field-helpText,
-.form-field-description {
-  color: var(--text-mediumemphasis, #6D6979);
-  font-family: var(--font-roboto, Roboto);
-  font-size: var(--small-14px);
-  font-style: normal;
-  font-weight: 400;
-  line-height: var(--medium-24px);
-  letter-spacing: 0.5px;
-  margin: 0px;
-}
-
-.form-field-title {
-  color: var(--text-highemphasis, #1C1B20);
-  font-family: var(--font-roboto, Roboto);
-  font-size: var(--medium-22px);
-  font-style: normal;
-  font-weight: 500;
-  line-height: var(--medium-36px);
-  margin: 0px;
-}
-
-.title-container {
-  display: flex;
-  flex-direction: column;
-  gap: var(--small-8px);
-}
-
-.formly-field-container {
-  display: flex;
-  flex-direction: column;
-  gap: var(--medium-24px);
-}
-
-.accordion-group-container {
-  display: flex;
-  flex-direction: column;
-  gap: var(--small-16px);
-}
-
-.accordions-group-container {
-  display: flex;
-  flex-direction: column;
-  gap: var(--small-16px);
-}
-
-/* for invalid input field color */
-.sa-input-container .support-label.customValidationWrapper {
-  color: var(--semantic-error-500, #BD271E);
-  font-family: var(--font);
-  font-size: 11px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: var(--small-16px);
-  letter-spacing: 0.5px;
-  padding: var(--small-4px) var(--small-16px) 0px 0px;
-}
-
-.sa-input-container .support-label.invalid.customValidationWrapper {
-  color: var(--semantic-error-500, #BD271E);
-}
-
-.customField .customInputContainer .sa-input .sa-input-field.invalid>input,
-.customField .customInputContainer .sa-input .sa-input-field.invalid sa-icon,
-.customField .customInputContainer .sa-input .sa-input-field.invalid .sa-input-pretext {
-  color: var(--semantic-error-500, #BD271E);
-}
-
-.customInputContainer .sa-input .sa-input-field.invalid {
-  --border: 1px solid var(--semantic-error-500, #BD271E);
-}
-
-/* end */