commons-shared-web-ui 0.0.23 → 0.0.25

package/index.d.ts

@@ -6,7 +6,7 @@ import { FormGroup, FormBuilder, FormArray, FormControl, ValidatorFn, ControlVal
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import * as i3$2 from '@angular/router';
 import { Router, ActivatedRoute } from '@angular/router';
-import { Observable, Subject } from 'rxjs';
+import { BehaviorSubject, Subject, Observable } from 'rxjs';
 import * as i2 from '@angular/material/snack-bar';
 import { MatSnackBar, MatSnackBarRef } from '@angular/material/snack-bar';
 import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
@@ -921,7 +921,10 @@ declare class SmartFormController {
     labels: any;
     /** Custom label keys for form actions (Next, Submit, Add, etc.) */
     actionLabels?: FormLabels;
-    private fieldSubjects;
+    fieldSubjects: Map<string, BehaviorSubject<any>>;
+    fileAdded$: Subject<any>;
+    fileUploadFinished$: Subject<any>;
+    fileRemoved$: Subject<any>;
     initialize(initialData: {
         [key: string]: any;
     }): void;
@@ -1013,6 +1016,9 @@ declare class SmartFormComponent implements OnInit, OnChanges, OnDestroy {
     valueChange: EventEmitter<{
         [key: string]: any;
     }>;
+    fileAdded: EventEmitter<any>;
+    fileUploadFinished: EventEmitter<any>;
+    fileRemoved: EventEmitter<any>;
     formSchema: FormSchema;
     formGroup: FormGroup;
     fieldList: FieldConfig[];
@@ -1072,7 +1078,7 @@ declare class SmartFormComponent implements OnInit, OnChanges, OnDestroy {
     private getButtonByActionKind;
     private navigateTo;
     static ɵfac: i0.ɵɵFactoryDeclaration<SmartFormComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SmartFormComponent, "lib-smart-form", never, { "formJson": { "alias": "formJson"; "required": false; }; "initialValues": { "alias": "initialValues"; "required": false; }; "enableDraftAutoSave": { "alias": "enableDraftAutoSave"; "required": false; }; "labels": { "alias": "labels"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; }, { "submit": "submit"; "draftSave": "draftSave"; "actionClick": "actionClick"; "valueChange": "valueChange"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SmartFormComponent, "lib-smart-form", never, { "formJson": { "alias": "formJson"; "required": false; }; "initialValues": { "alias": "initialValues"; "required": false; }; "enableDraftAutoSave": { "alias": "enableDraftAutoSave"; "required": false; }; "labels": { "alias": "labels"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; }, { "submit": "submit"; "draftSave": "draftSave"; "actionClick": "actionClick"; "valueChange": "valueChange"; "fileAdded": "fileAdded"; "fileUploadFinished": "fileUploadFinished"; "fileRemoved": "fileRemoved"; }, never, never, false, never>;
 }
 
 declare class FormSectionComponent implements OnInit, OnDestroy {
@@ -1845,7 +1851,7 @@ interface RadioConfig {
     disabled?: boolean;
     required?: boolean;
     labelPosition?: 'before' | 'after';
-    color?: 'primary' | 'accent' | 'warn';
+    color?: 'primary' | 'warning' | 'danger' | 'success' | 'accent' | 'warn' | string;
     layout?: 'vertical' | 'horizontal';
     gap?: string;
     labelColor?: string;
@@ -1872,7 +1878,7 @@ declare class RadioComponent implements ControlValueAccessor, OnInit {
     disabled: boolean;
     required: boolean;
     labelPosition: 'before' | 'after';
-    color: 'primary' | 'accent' | 'warn';
+    color: 'primary' | 'warning' | 'danger' | 'success' | 'accent' | 'warn' | string;
     layout: 'vertical' | 'horizontal';
     labels: RadioLabels;
     gap?: string;
@@ -1904,8 +1910,9 @@ declare class RadioComponent implements ControlValueAccessor, OnInit {
     registerOnChange(fn: any): void;
     registerOnTouched(fn: any): void;
     setDisabledState(isDisabled: boolean): void;
-    onRadioChange(event: any): void;
+    onRadioChange(option: RadioOption): void;
     private getStyleValue;
+    private getThemeColor;
     get wrapperStyles(): {
         [key: string]: string | undefined;
     };
@@ -1922,7 +1929,7 @@ interface ToggleConfig {
     disabled?: boolean;
     required?: boolean;
     labelPosition?: 'before' | 'after';
-    color?: string;
+    color?: 'primary' | 'warning' | 'danger' | 'success' | string;
     uncheckedColor?: string;
     checkedColor?: string;
     thumbColor?: string;
@@ -1976,6 +1983,7 @@ declare class ToggleComponent implements ControlValueAccessor, OnInit, OnChanges
     setDisabledState(isDisabled: boolean): void;
     onToggleChange(event: any): void;
     private getStyleValue;
+    private getThemeColor;
     get wrapperStyles(): {
         [key: string]: string | undefined;
     };
@@ -2339,6 +2347,8 @@ declare class ButtonDropdownComponent {
 declare class ConfirmationModalComponent implements OnInit, OnDestroy {
     config: ConfirmationModalConfig;
     isOpen: boolean;
+    confirmDisabled: boolean;
+    confirmLoading: boolean;
     confirm: EventEmitter<void>;
     cancel: EventEmitter<void>;
     close: EventEmitter<void>;
@@ -2346,6 +2356,7 @@ declare class ConfirmationModalComponent implements OnInit, OnDestroy {
     private defaultConfig;
     mergedConfig: ConfirmationModalConfig;
     private previousActiveElement;
+    private isSubmitting;
     ngOnInit(): void;
     ngOnChanges(): void;
     private updateConfig;
@@ -2364,7 +2375,7 @@ declare class ConfirmationModalComponent implements OnInit, OnDestroy {
     getIconValue(icon: any): string;
     getIconColor(icon: any): string | undefined;
     static ɵfac: i0.ɵɵFactoryDeclaration<ConfirmationModalComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ConfirmationModalComponent, "cc-confirmation-modal", never, { "config": { "alias": "config"; "required": false; }; "isOpen": { "alias": "isOpen"; "required": false; }; }, { "confirm": "confirm"; "cancel": "cancel"; "close": "close"; "showCodeSnippet": "showCodeSnippet"; }, never, ["*", "[cc-modal-footer]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ConfirmationModalComponent, "cc-confirmation-modal", never, { "config": { "alias": "config"; "required": false; }; "isOpen": { "alias": "isOpen"; "required": false; }; "confirmDisabled": { "alias": "confirmDisabled"; "required": false; }; "confirmLoading": { "alias": "confirmLoading"; "required": false; }; }, { "confirm": "confirm"; "cancel": "cancel"; "close": "close"; "showCodeSnippet": "showCodeSnippet"; }, never, ["*", "[cc-modal-footer]"], false, never>;
 }
 
 declare class ConfirmationModalModule {
@@ -3128,7 +3139,7 @@ interface TableFilter {
 }
 interface TableActionItem {
     label: string;
-    type: 'api' | 'callback' | 'route';
+    type: 'api' | 'callback' | 'route' | 'delete';
     icon?: string;
     apiUrl?: string;
     apiMethod?: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
@@ -3136,6 +3147,15 @@ interface TableActionItem {
     confirmationNeeded?: boolean;
     confirmationMessage?: string;
     callback?: (row: any) => void;
+    /** Config for native 'delete' action type — drives the built-in confirmation modal */
+    deleteConfig?: {
+        apiUrl: string;
+        idField?: string;
+        modalTitle?: string;
+        modalMessage?: string;
+        confirmLabel?: string;
+        cancelLabel?: string;
+    };
 }
 interface TableAction {
     label: string;
@@ -3182,7 +3202,7 @@ interface QueryParamsConfig {
 }
 interface TableConfig {
     columns: TableColumn[];
-    apiUrl: string;
+    apiUrl?: string;
     apiMethod?: 'GET' | 'POST';
     apiPayload?: any;
     dataResponsePath?: string;
@@ -3220,6 +3240,22 @@ interface TableLabels {
     itemsPerPageLabel?: string;
     defaultConfirmationMessage?: string;
 }
+/**
+ * Emitted by the SmartTableComponent when operating in external-data mode
+ * (i.e. when [tableData] input is provided by the parent).
+ * The parent is responsible for fetching updated data based on this event
+ * and providing it back via [tableData] and [totalItemsCount].
+ */
+interface TableDataChangeEvent {
+    page: number;
+    pageSize: number;
+    sortBy?: string;
+    orderBy?: 'ASC' | 'DESC';
+    searchTerm?: string;
+    filters?: {
+        [key: string]: any;
+    };
+}
 
 declare class SmartTableComponent implements OnInit, OnChanges, AfterViewInit, OnDestroy {
     private http;
@@ -3227,6 +3263,18 @@ declare class SmartTableComponent implements OnInit, OnChanges, AfterViewInit, O
     private cdr;
     private ngZone;
     config: TableConfig;
+    /**
+     * External data mode: pass table rows directly from the parent.
+     * When this input is provided, the component will NOT make any internal API calls.
+     * Instead, it emits sortChange / pageChange / searchChange / filterChange events
+     * so the parent can fetch and supply updated data.
+     */
+    tableData?: any[];
+    /**
+     * Total number of items — used by the pagination component when operating in
+     * external-data mode. Must be kept in sync by the parent.
+     */
+    totalItemsCount?: number;
     action: EventEmitter<{
         action: TableAction;
         row: any;
@@ -3241,6 +3289,12 @@ declare class SmartTableComponent implements OnInit, OnChanges, AfterViewInit, O
         row: any;
         column: string;
     }>;
+    /** Emitted in external-data mode when the user changes the sort column/direction. */
+    sortChange: EventEmitter<TableDataChangeEvent>;
+    /** Emitted in external-data mode when the user changes the page or page size. */
+    pageChange: EventEmitter<TableDataChangeEvent>;
+    /** Emitted in external-data mode when the user types in the search box. */
+    searchChange: EventEmitter<TableDataChangeEvent>;
     data: any[];
     totalItems: number;
     currentPage: number;
@@ -3249,6 +3303,7 @@ declare class SmartTableComponent implements OnInit, OnChanges, AfterViewInit, O
         key: string;
         direction: 'ASC' | 'DESC';
     };
+    private isSortActive;
     activeFilters: {
         [key: string]: any;
     };
@@ -3259,6 +3314,14 @@ declare class SmartTableComponent implements OnInit, OnChanges, AfterViewInit, O
     };
     hasStickyColumns: boolean;
     openDropdownId: string | null;
+    /** Viewport-relative position used to render the dropdown as position:fixed. */
+    dropdownPosition: {
+        top: number;
+        right: number;
+    };
+    deleteModalOpen: boolean;
+    deleteModalConfig: any;
+    private pendingDeleteAction;
     searchSubject: Subject<string>;
     stickyHeaders: QueryList<ElementRef>;
     private resizeObserver;
@@ -3276,8 +3339,17 @@ declare class SmartTableComponent implements OnInit, OnChanges, AfterViewInit, O
     onSort(col: TableColumn): void;
     onSearch(event: Event): void;
     onFilterChange(key: string, event: Event): void;
+    /**
+     * Assembles the current table state into a `TableDataChangeEvent` object.
+     * Emitted to the parent in external-data mode so it can fetch and supply new data.
+     */
+    private buildChangeEvent;
     onAction(action: TableAction, row: any): void;
     onActionItemClick(item: any, row: any, event: Event): void;
+    private openDeleteConfirmModal;
+    deleteModalMessage: string;
+    onDeleteConfirm(): void;
+    onDeleteCancel(): void;
     onTopAction(action: TableAction): void;
     private executeApiAction;
     onSelectAll(event: Event): void;
@@ -3297,12 +3369,12 @@ declare class SmartTableComponent implements OnInit, OnChanges, AfterViewInit, O
     toggleDropdown(id: string, event: Event): void;
     closeDropdown(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SmartTableComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SmartTableComponent, "lib-smart-table", never, { "config": { "alias": "config"; "required": false; }; }, { "action": "action"; "topAction": "topAction"; "filterChange": "filterChange"; "rowSelect": "rowSelect"; "columnClick": "columnClick"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SmartTableComponent, "lib-smart-table", never, { "config": { "alias": "config"; "required": false; }; "tableData": { "alias": "tableData"; "required": false; }; "totalItemsCount": { "alias": "totalItemsCount"; "required": false; }; }, { "action": "action"; "topAction": "topAction"; "filterChange": "filterChange"; "rowSelect": "rowSelect"; "columnClick": "columnClick"; "sortChange": "sortChange"; "pageChange": "pageChange"; "searchChange": "searchChange"; }, never, never, false, never>;
 }
 
 declare class SmartTableModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<SmartTableModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<SmartTableModule, [typeof SmartTableComponent], [typeof i2$1.CommonModule, typeof i3$1.FormsModule, typeof PaginationModule, typeof ButtonModule, typeof MaterialModule], [typeof SmartTableComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SmartTableModule, [typeof SmartTableComponent], [typeof i2$1.CommonModule, typeof i3$1.FormsModule, typeof PaginationModule, typeof ButtonModule, typeof MaterialModule, typeof ConfirmationModalModule], [typeof SmartTableComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<SmartTableModule>;
 }
 
@@ -3356,4 +3428,4 @@ declare class SnackbarModule {
 }
 
 export { AlertComponent, AlertModule, ButtonComponent, ButtonDropdownComponent, ButtonDropdownModule, ButtonModule, CheckboxComponent, ConfigurableFormComponent, configurableForm_examples_d as ConfigurableFormExamples, ConfigurableFormModule, ConfirmationModalComponent, ConfirmationModalModule, DEFAULT_ITEMS_PER_PAGE, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_SIDE_NAV_TOOLTIP_POSITION, DatepickerComponent, DropdownComponent, ExpressionService, FieldConfiguratorComponent, FieldSelectionComponent, FilterComponent, FilterModule, FilterSidebarComponent, FilterSidebarModule, FormBuilderModule, FormComponentsModule, InputComponent, MaterialModule, NAV_ORIENTATION_DEFAULT, NAV_VARIANT_DEFAULT, NavComponent, NavModule, PAGINATION_THEME_DARK, PAGINATION_THEME_DEFAULT, PaginationComponent, PaginationModule, RadioComponent, SearchComponent, SharedUiModule, SideNavComponent, SideNavModule, SmartFormComponent, SmartFormController, smartForm_examples_d as SmartFormExamples, SmartFormModule, SmartTableComponent, SmartTableModule, SnackbarComponent, SnackbarModule, SnackbarService, StringUtils, SummaryCardComponent, SummaryCardModule, ToggleComponent, ValidationUtils, appendBaseUrlRecursively, clearLocalStorage, clearSessionStorage, getLocalStorageItem, getSessionStorageItem, removeLocalStorageItem, removeSessionStorageItem, setLocalStorageItem, setSessionStorageItem, translateConfig };
-export type { AlertLabels, AlertVariant, AttachmentConfig, ButtonLabels, ButtonVariant, CheckboxConfig, CheckboxLabels, CheckboxOption, ConfirmationModalConfig, DateConfig, DatePickerConfig, DatepickerLabels, DropdownAction, DropdownConfig, DropdownLabels, DropdownOption, EmailConfig, FieldConfig, FieldType, FilterChangeEvent, FilterConfig, FilterItem, FilterItemType, FilterOutput, FilterSearchConfig, FilterSidebarChangeEvent, FilterSidebarConfig, FilterSidebarOutput, FormConfig, FormField, FormOption, FormSchema, FormSection, GeneratedConfig, IconInput, InputConfig, InputLabels, InputType, JsonFieldConfig, JsonFormConfig, KeyType, LengthConstraint, LocationConfig, NavItem, NavStyleConfig, NestedStringConfig, NumberConfig, OptionConfig, OptionDTO, OptionItem, PaginationConfig, PaginationLabels, PhoneConfig, QueryParamsConfig, RadioConfig, RadioLabels, RadioOption, RangeConfig, RatingConfig, SearchConfig, SearchLabels, SectionConfig, SideNavItem, SideNavSection, SideNavStyleConfig, SnackbarConfig, SnackbarVariant, StepperConfig, SubmitConfig, SummaryCardConfig, SummaryCardLabels, SummaryCardMeta, TableAction, TableActionItem, TableColumn, TableConfig, TableFilter, TableFilterChangeEvent, TableFilterColumn, TableFilterConfig, TableFilterItem, TableFilterLabels, TableFilterOutput, TableLabels, TableOption, TableTheme, TextConfig, ToggleConfig, ToggleLabels, UIConfig, UISubType, UIType, UploadedFile, ValidationResult, ValidationRules };
+export type { AlertLabels, AlertVariant, AttachmentConfig, ButtonLabels, ButtonVariant, CheckboxConfig, CheckboxLabels, CheckboxOption, ConfirmationModalConfig, DateConfig, DatePickerConfig, DatepickerLabels, DropdownAction, DropdownConfig, DropdownLabels, DropdownOption, EmailConfig, FieldConfig, FieldType, FilterChangeEvent, FilterConfig, FilterItem, FilterItemType, FilterOutput, FilterSearchConfig, FilterSidebarChangeEvent, FilterSidebarConfig, FilterSidebarOutput, FormConfig, FormField, FormOption, FormSchema, FormSection, GeneratedConfig, IconInput, InputConfig, InputLabels, InputType, JsonFieldConfig, JsonFormConfig, KeyType, LengthConstraint, LocationConfig, NavItem, NavStyleConfig, NestedStringConfig, NumberConfig, OptionConfig, OptionDTO, OptionItem, PaginationConfig, PaginationLabels, PhoneConfig, QueryParamsConfig, RadioConfig, RadioLabels, RadioOption, RangeConfig, RatingConfig, SearchConfig, SearchLabels, SectionConfig, SideNavItem, SideNavSection, SideNavStyleConfig, SnackbarConfig, SnackbarVariant, StepperConfig, SubmitConfig, SummaryCardConfig, SummaryCardLabels, SummaryCardMeta, TableAction, TableActionItem, TableColumn, TableConfig, TableDataChangeEvent, TableFilter, TableFilterChangeEvent, TableFilterColumn, TableFilterConfig, TableFilterItem, TableFilterLabels, TableFilterOutput, TableLabels, TableOption, TableTheme, TextConfig, ToggleConfig, ToggleLabels, UIConfig, UISubType, UIType, UploadedFile, ValidationResult, ValidationRules };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "commons-shared-web-ui",
-  "version": "0.0.23",
+  "version": "0.0.25",
   "peerDependencies": {
     "@angular/animations": "20.3.15",
     "@angular/cdk": "20.2.14",

package/src/lib/modules/confirmation-modal/confirmation-modal.theme.scss

@@ -13,7 +13,7 @@ $default-confirmation-modal-config: (
     // 24px
     header-border-bottom: 0.0625rem solid #E5E7EB,
     // 1px
-    title-font-size: 1.25rem,
+    title-font-size: 0.875rem,
     // 20px
     title-font-weight: 600,
     title-color: #111827,

package/src/lib/modules/smart-table/smart-table.theme.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use '../confirmation-modal/confirmation-modal.theme' as confirmation-modal;
 
 // Default Smart Table Theme
 $smart-table-theme-defaults: (
@@ -215,4 +216,7 @@ $smart-table-theme-defaults: (
 
   // --- Misc ---
   --st-sort-icon-size: #{map.get($theme, sort-icon-size)};
+
+  // --- Confirmation Modal (bundled so delete modal renders correctly) ---
+  @include confirmation-modal.confirmation-modal-theme();
 }

package/src/lib/styles/utilities.scss

@@ -0,0 +1,250 @@
+/* utilities.scss */
+
+/* Display Classes */
+.d-flex { display: flex; }
+.d-inline-flex { display: inline-flex; }
+.d-grid { display: grid; }
+.d-block { display: block; }
+.d-none { display: none; }
+
+/* Flexbox Directions & Wraps */
+.flex-column { flex-direction: column; }
+.flex-row { flex-direction: row; }
+.flex-row-reverse { flex-direction: row-reverse; }
+.flex-wrap { flex-wrap: wrap; }
+.flex-1 { flex: 1; }
+
+/* Alignments */
+.align-items-center { align-items: center; }
+.align-items-start { align-items: flex-start; }
+.align-items-end { align-items: flex-end; }
+.justify-content-center { justify-content: center; }
+.justify-content-between { justify-content: space-between; }
+.justify-content-start { justify-content: flex-start; }
+.justify-content-end { justify-content: flex-end; }
+
+/* Grid */
+.grid-cols-12 { grid-template-columns: repeat(12, 1fr); }
+
+/* Width & Height (Percentages) */
+.w-100 { width: 100%; }
+.h-100 { height: 100%; }
+
+/* Positioning */
+.position-relative { position: relative; }
+.position-absolute { position: absolute; }
+
+/* Text Alignment */
+.text-center { text-align: center; }
+.text-left { text-align: left; }
+.text-right { text-align: right; }
+
+/* Fonts */
+.font-poppins { font-family: var(--cc-sf-font-family, 'Poppins', sans-serif); }
+.font-weight-400 { font-weight: 400; }
+.font-weight-500 { font-weight: 500; }
+.font-weight-600 { font-weight: 600; }
+
+.text-13 { font-size: 13px; }
+.text-14 { font-size: 14px; }
+.text-16 { font-size: 16px; }
+
+/* Colors (from variables) */
+.color-white { color: #ffffff; }
+.color-dark { color: #111827; }
+.color-gray { color: #6B7280; }
+.color-error { color: var(--cc-sf-error-text-color, #DC2626); }
+.bg-white { background-color: #ffffff; }
+.bg-transparent { background-color: transparent; }
+
+/* Margins */
+.m-0 { margin: 0; }
+.mt-4 { margin-top: 4px; }
+.mt-8 { margin-top: 8px; }
+.mt-10 { margin-top: 10px; }
+.mt-12 { margin-top: 12px; }
+.mt-16 { margin-top: 16px; }
+.mt-20 { margin-top: 20px; }
+.mt-24 { margin-top: 24px; }
+
+.mb-0 { margin-bottom: 0px; }
+.mb-4 { margin-bottom: 4px; }
+.mb-8 { margin-bottom: 8px; }
+.mb-10 { margin-bottom: 10px; }
+.mb-12 { margin-bottom: 12px; }
+.mb-16 { margin-bottom: 16px; }
+.mb-20 { margin-bottom: 20px; }
+.mb-24 { margin-bottom: 24px; }
+
+.ml-16 { margin-left: 16px; }
+.ml-20 { margin-left: 20px; }
+
+/* Paddings */
+.p-0 { padding: 0; }
+.p-16 { padding: 16px; }
+.p-20 { padding: 20px; }
+.p-24 { padding: 24px; }
+.pt-20 { padding-top: 20px; }
+.pb-10 { padding-bottom: 10px; }
+
+/* Gaps */
+.gap-4 { gap: 4px; }
+.gap-6 { gap: 6px; }
+.gap-8 { gap: 8px; }
+.gap-10 { gap: 10px; }
+.gap-12 { gap: 12px; }
+.gap-16 { gap: 16px; }
+.gap-20 { gap: 20px; }
+
+/* Border Radius */
+.rounded-4 { border-radius: 4px; }
+.rounded-6 { border-radius: 6px; }
+.rounded-8 { border-radius: 8px; }
+.rounded-10 { border-radius: 10px; }
+.rounded-12 { border-radius: 12px; }
+.rounded-20 { border-radius: 20px; }
+.rounded-24 { border-radius: 24px; }
+.rounded-50 { border-radius: 50%; }
+
+/* Utilities */
+.cursor-pointer { cursor: pointer; }
+.overflow-hidden { overflow: hidden; }
+.resize-vertical { resize: vertical; }
+.box-sizing-border { box-sizing: border-box; }
+
+/* Form Auto Extracted Utilities 2 */
+.border-none { border: none !important; }
+.mb-16px { margin-bottom: var(--cc-sf-grid-gap, 16px) !important; }
+.c-DC2626 { color: var(--cc-sf-label-required-color, #DC2626) !important; }
+.ml-0-125rem { margin-left: 0.125rem !important; }
+.fs-0-875rem { font-size: 0.875rem !important; }
+.c-111827 { color: var(--cc-sf-label-color, #111827) !important; }
+.br-7px { border-radius: var(--cc-sf-input-radius, 7px) !important; }
+.c-6B7280 { color: var(--cc-sf-hint-color, #6B7280) !important; }
+.fs-0-75rem { font-size: var(--cc-sf-error-text-size, 0.75rem) !important; }
+.b-none { background: none !important; }
+.p-32px-24px { padding: 32px 24px !important; }
+.us-none { user-select: none !important; }
+.c-1E293B { color: var(--cc-sf-label-color, #1E293B) !important; }
+.c-3B82F6 { color: var(--cc-sf-chip-selected-bg, #3B82F6) !important; }
+.fs-0-78rem { font-size: 0.78rem !important; }
+.p-10px-14px { padding: 10px 14px !important; }
+.fs-0-85rem { font-size: 0.85rem !important; }
+.fs-0-72rem { font-size: 0.72rem !important; }
+.c-94A3B8 { color: #94A3B8 !important; }
+.p-4px { padding: 4px !important; }
+.br-8px { border-radius: var(--cc-sf-input-radius, 8px) !important; }
+.bc-F3F4F6 { background-color: var(--cc-sf-input-disabled-bg, #F3F4F6) !important; }
+.br-none { border-right: none !important; }
+.bl-none { border-left: none !important; }
+.pe-none { pointer-events: none !important; }
+.fs-1-1rem { font-size: 1.1rem !important; }
+.c-9CA3AF { color: var(--cc-sf-hint-color, #9CA3AF) !important; }
+.pl-2-4rem { padding-left: 2.4rem !important; }
+.fs-0-8125rem { font-size: 0.8125rem !important; }
+.ls-none { list-style: none !important; }
+.br-12px { border-radius: var(--mu-carousel-radius, 12px) !important; }
+.b-FFFAF1 { background: var(--cc-sf-dropzone-bg, #FFFAF1) !important; }
+.fs-18px { font-size: 18px !important; }
+.b-FEF2F2 { background: var(--cc-sf-error-bg, #FEF2F2) !important; }
+
+/* Form Auto Extracted Utilities 3 */
+.bc-DC2626 { border-color: var(--cc-sf-error-border, #DC2626) !important; }
+.c-202124 { color: var(--cc-sf-label-color, #202124) !important; }
+.fs-18px { font-size: var(--cc-sf-label-size, 18px) !important; }
+.mb-0-5rem { margin-bottom: 0.5rem !important; }
+.pt-0-625rem { padding-top: var(--cc-sf-input-padding-y, 0.625rem) !important; }
+.pb-0-625rem { padding-bottom: var(--cc-sf-input-padding-y, 0.625rem) !important; }
+.pl-16px { padding-left: var(--cc-sf-input-padding-x, 16px) !important; }
+.pr-16px { padding-right: var(--cc-sf-input-padding-x, 16px) !important; }
+.bc-ffffff { background-color: var(--cc-sf-section-bg, #ffffff) !important; }
+.b-1px-solid-D1D5DB { border: 1px solid var(--cc-sf-input-border, #D1D5DB) !important; }
+.fs-0-75rem { font-size: 0.75rem !important; }
+.c-1F2937 { color: var(--cc-sf-section-label-color, #1F2937) !important; }
+.p-6px-14px { padding: var(--cc-sf-chip-padding, 6px 14px) !important; }
+.b-ffffff { background: var(--loc-suggestion-bg, #ffffff) !important; }
+.c-374151 { color: var(--cc-sf-label-color, #374151) !important; }
+.br-20px { border-radius: var(--cc-sf-chip-radius, 20px) !important; }
+.fs-0-875rem { font-size: var(--cc-sf-btn-font-size, 0.875rem) !important; }
+.bc-D1D5DB { background-color: var(--cc-sf-switch-track-off, #D1D5DB) !important; }
+.pr-2-75rem { padding-right: 2.75rem !important; }
+.p-0-25rem { padding: 0.25rem !important; }
+.p-0-625rem-0-875rem { padding: var(--cc-sf-generated-padding, 0.625rem 0.875rem) !important; }
+.b-F3F4F6 { background: var(--cc-sf-generated-bg, #F3F4F6) !important; }
+.b-1px-solid-E5E7EB { border: 1px solid var(--cc-sf-input-disabled-border, #E5E7EB) !important; }
+.br-8px { border-radius: var(--cc-sf-uploaded-item-radius, 8px) !important; }
+.c-6B7280 { color: var(--ms-desc-color, #6B7280) !important; }
+.mb-20px { margin-bottom: var(--cc-sf-section-gap, 20px) !important; }
+.br-10px { border-radius: var(--cc-sf-input-radius, 10px) !important; }
+.p-20px { padding: var(--cc-sf-section-padding, 20px) !important; }
+.fs-1rem { font-size: 1rem !important; }
+.m-0-0-16px-0 { margin: 0 0 16px 0 !important; }
+.bb-2px-solid-E5E7EB { border-bottom: var(--cc-sf-section-label-border, 2px solid #E5E7EB) !important; }
+.p-16px { padding: var(--cc-sf-instance-padding, 16px) !important; }
+.b-F9FAFB { background: var(--loc-tba-bg, #F9FAFB) !important; }
+.bb-1px-dashed-D1D5DB { border-bottom: var(--cc-sf-instance-divider, 1px dashed #D1D5DB) !important; }
+.c-4B5563 { color: var(--cc-sf-instance-num-color, #4B5563) !important; }
+.fs-0-8125rem { font-size: var(--cc-sf-hint-size, 0.8125rem) !important; }
+.pb-0 { padding-bottom: 0 !important; }
+.p-18px-24px { padding: 18px 24px !important; }
+.c-111827 { color: var(--ms-title-color, #111827) !important; }
+.bt-1px-solid-E5E7EB { border-top: 1px solid #E5E7EB !important; }
+.p-4px-10px { padding: 4px 10px !important; }
+.b-FFF5F5 { background: var(--cc-sf-btn-remove-bg, #FFF5F5) !important; }
+.c-E53E3E { color: var(--loc-delete-color, #E53E3E) !important; }
+.b-1px-solid-FED7D7 { border: var(--cc-sf-btn-remove-border, 1px solid #FED7D7) !important; }
+.br-4px { border-radius: var(--cc-sf-btn-remove-radius, 4px) !important; }
+.p-8px-16px { padding: 8px 16px !important; }
+.b-transparent { background: var(--cc-sf-btn-add-bg, transparent) !important; }
+.c-3B82F6 { color: var(--cc-sf-input-focus-border, #3B82F6) !important; }
+.b-1px-dashed-CBD5E1 { border: var(--cc-sf-btn-add-border, 1px dashed #CBD5E1) !important; }
+.br-6px { border-radius: var(--cc-sf-btn-add-radius, 6px) !important; }
+.b-1-5px-dashed-CBD5E1 { border: var(--cc-sf-dropzone-border, 1.5px dashed #CBD5E1) !important; }
+.br-12px { border-radius: var(--cc-sf-dropzone-radius, 12px) !important; }
+.bc-FFFAF1 { background-color: var(--cc-sf-dropzone-bg, #FFFAF1) !important; }
+.c-94A3B8 { color: var(--cc-sf-uploaded-remove-color, #94A3B8) !important; }
+.fs-0-9rem { font-size: var(--cc-sf-input-font-size, 0.9rem) !important; }
+.c-64748B { color: var(--cc-sf-dropzone-hint-color, #64748B) !important; }
+.b-1px-solid-E2E8F0 { border: var(--cc-sf-uploaded-item-border, 1px solid #E2E8F0) !important; }
+.b-2px-solid-E2E8F0 { border: 2px solid #E2E8F0 !important; }
+.pr-3-5rem { padding-right: 3.5rem !important; }
+.p-0-0-875rem { padding: 0 0.875rem !important; }
+.bc-FFFFFF { background-color: var(--cc-sf-input-bg, #FFFFFF) !important; }
+.b-1-5px-solid-D1D5DB { border: var(--cc-sf-input-border, 1.5px solid #D1D5DB) !important; }
+.mb-0-75rem { margin-bottom: 0.75rem !important; }
+.mt-6px { margin-top: 6px !important; }
+.pr-2-4rem { padding-right: 2.4rem !important; }
+.p-0-2rem { padding: 0.2rem !important; }
+.fs-1-35rem { font-size: 1.35rem !important; }
+.p-4px-12px { padding: 4px 12px !important; }
+.b-111827 { background: var(--cc-sf-label-color, #111827) !important; }
+.b-2px-dashed-CBD5E1 { border: 2px dashed var(--cc-sf-dropzone-border, #CBD5E1) !important; }
+.fs-52px { font-size: 52px !important; }
+.p-12px-16px { padding: 12px 16px !important; }
+.bb-1px-solid-F3F4F6 { border-bottom: 1px solid var(--cc-sf-input-disabled-border, #F3F4F6) !important; }
+.b-0F172A { background: var(--mu-carousel-bg, #0F172A) !important; }
+.b-3px-solid-rgba-255-255-255-0-15 { border: 3px solid rgba(255, 255, 255, 0.15) !important; }
+.b-rgba-255-255-255-0-85 { background: rgba(255, 255, 255, 0.85) !important; }
+.b-rgba-0-0-0-0-55 { background: rgba(0, 0, 0, 0.55) !important; }
+.b-rgba-255-255-255-0-45 { background: rgba(255, 255, 255, 0.45) !important; }
+.pb-4px { padding-bottom: 4px !important; }
+.b-2px-solid-transparent { border: 2px solid transparent !important; }
+.b-E2E8F0 { background: var(--mu-thumb-bg, #E2E8F0) !important; }
+.b-1E293B { background: #1E293B !important; }
+.c-EF4444 { color: #EF4444 !important; }
+.b-rgba-0-0-0-0-5 { background: rgba(0, 0, 0, 0.5) !important; }
+.br-16px { border-radius: var(--mu-modal-radius, 16px) !important; }
+.p-24px-28px { padding: 24px 28px !important; }
+.bb-1px-solid-E5E7EB { border-bottom: 1px solid var(--cc-sf-input-disabled-border, #E5E7EB) !important; }
+.fs-1-25rem { font-size: 1.25rem !important; }
+.p-48px-24px { padding: 48px 24px !important; }
+.b-3px-solid-E2E8F0 { border: 3px solid #E2E8F0 !important; }
+.p-16px-24px { padding: 16px 24px !important; }
+.p-28px { padding: 28px !important; }
+.b-3px-solid-transparent { border: 3px solid transparent !important; }
+.b-rgba-59-130-246-0-12 { background: rgba(59, 130, 246, 0.12) !important; }
+.p-20px-28px { padding: 20px 28px !important; }
+.c-1A56DB { color: var(--loc-add-color, #1A56DB) !important; }
+.b-1px-dashed-D1D5DB { border: 1px dashed var(--cc-sf-input-disabled-border, #D1D5DB) !important; }
+.fs-40px { font-size: 40px !important; }
+.c-9CA3AF { color: var(--loc-tba-icon-color, #9CA3AF) !important; }