@ascentgl/ads-ui 20.0.6 → 20.0.7

package/index.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { OnChanges, SimpleChanges, OnDestroy, ElementRef, SimpleChange, OnInit, AfterContentInit, Renderer2, AfterViewInit, ChangeDetectorRef, EventEmitter, TemplateRef, PipeTransform, Signal } from '@angular/core';
+import { OnChanges, SimpleChanges, OnDestroy, ElementRef, SimpleChange, OnInit, AfterContentInit, Renderer2, AfterViewInit, ChangeDetectorRef, EventEmitter, TemplateRef, PipeTransform } from '@angular/core';
 import * as i4 from '@ascentgl/ads-icons';
 import { AdsIconRegistry, IconThemes } from '@ascentgl/ads-icons';
 import * as i2 from '@angular/common';
@@ -46,8 +46,6 @@ import { MatExpansionPanel, MatAccordion } from '@angular/material/expansion';
 import * as ag_grid_community from 'ag-grid-community';
 import { GridOptions, ColDef, GridApi, GridReadyEvent, FirstDataRenderedEvent } from 'ag-grid-community';
 import * as i4$6 from 'ag-grid-angular';
-import * as i5$4 from '@angular/google-maps';
-import { GoogleMap } from '@angular/google-maps';
 import * as i4$7 from '@angular/material/menu';
 import { MatMenu } from '@angular/material/menu';
 import * as i4$8 from 'angular-split';
@@ -138,7 +136,7 @@ declare class AdsNumericBadgeComponent extends AdsIconHoverComponent {
     /** provide icon name. NOTE: the icon must be registered in icon registry **/
     name: i0.InputSignal<adsIcon>;
     /** choose ads icon theme **/
-    theme: i0.InputSignal<"primary" | "iconPrimary" | "success" | "warn" | "white">;
+    theme: i0.InputSignal<"iconPrimary" | "primary" | "success" | "warn" | "white">;
     /** set badge value as number **/
     value: i0.InputSignal<number>;
     /** @ignore **/
@@ -2317,131 +2315,6 @@ declare class AdsTableModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<AdsTableModule>;
 }
 
-type MapMarker = {
-    title: string;
-    position: google.maps.LatLngLiteral;
-    active?: boolean;
-    description?: string;
-};
-
-import AdvancedMarkerElementOptions = google.maps.marker.AdvancedMarkerElementOptions;
-
-declare class MapMarkersService {
-    markers: i0.WritableSignal<MapMarker[]>;
-    markerOptions: i0.WritableSignal<AdvancedMarkerElementOptions[]>;
-    container?: HTMLElement;
-    private readonly appRef;
-    constructor();
-    private createMarkerComponent;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MapMarkersService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<MapMarkersService>;
-}
-
-import MapOptions = google.maps.MapOptions;
-
-declare class MapOptionsService {
-    options: i0.WritableSignal<MapOptions>;
-    center: i0.Signal<google.maps.LatLngLiteral | google.maps.LatLng | null | undefined>;
-    mapOptions: i0.Signal<MapOptions>;
-    private readonly defaultMapOptions;
-    private readonly mapMarkersService;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MapOptionsService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<MapOptionsService>;
-}
-
-declare enum CustomMapTypeId {
-    CUSTOM_LIGHT = "customLight",
-    CUSTOM_DARK = "customDark"
-}
-
-declare class MapConstructorService {
-    mapTypeId: i0.WritableSignal<CustomMapTypeId>;
-    isLoaded: i0.WritableSignal<boolean>;
-    map: Signal<GoogleMap | undefined>;
-    private readonly lightStyles;
-    private readonly darkStyles;
-    private readonly mapsLoader;
-    constructor();
-    configure(): void;
-    private createCenterControl;
-    private toggleTheme;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MapConstructorService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<MapConstructorService>;
-}
-
-import DirectionsResult = google.maps.DirectionsResult;
-
-declare class MapDirectionsService {
-    directions: i0.WritableSignal<DirectionsResult | null>;
-    constructor();
-    static ɵfac: i0.ɵɵFactoryDeclaration<MapDirectionsService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<MapDirectionsService>;
-}
-
-declare class MapPolylineService {
-    markers: i0.WritableSignal<MapMarker[]>;
-    map: Signal<GoogleMap | undefined>;
-    readonly polyline: i0.WritableSignal<google.maps.Polyline | undefined>;
-    constructor();
-    static ɵfac: i0.ɵɵFactoryDeclaration<MapPolylineService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<MapPolylineService>;
-}
-
-import MapTypeId = google.maps.MapTypeId;
-
-declare class AdsMapComponent {
-    markers: i0.ModelSignal<MapMarker[]>;
-    map: i0.Signal<GoogleMap | undefined>;
-    readonly mapOptionsService: MapOptionsService;
-    readonly mapMarkersService: MapMarkersService;
-    readonly mapDirectionsService: MapDirectionsService;
-    readonly mapPolylineService: MapPolylineService;
-    readonly mapConstructorService: MapConstructorService;
-    private readonly ref;
-    constructor();
-    getMapTypeId(): MapTypeId;
-    getIsLoaded(): boolean;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AdsMapComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AdsMapComponent, "ads-map", never, { "markers": { "alias": "markers"; "required": false; "isSignal": true; }; }, { "markers": "markersChange"; }, never, never, false, never>;
-}
-
-declare class AdsMapMarkerComponent implements OnInit {
-    index: i0.InputSignal<number>;
-    marker: i0.Signal<MapMarker>;
-    container: i0.InputSignal<HTMLElement>;
-    private tooltipRef?;
-    private element;
-    private parentElement;
-    private uniqueIdentifier;
-    private readonly mapMarkersService;
-    private readonly ref;
-    private readonly appRef;
-    constructor();
-    ngOnInit(): void;
-    onClick(): void;
-    onMouseEnter(): void;
-    onMouseLeave(): void;
-    private getElement;
-    private getParentElement;
-    private setParentZIndex;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AdsMapMarkerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AdsMapMarkerComponent, "ads-map-marker", never, { "index": { "alias": "index"; "required": true; "isSignal": true; }; "container": { "alias": "container"; "required": true; "isSignal": true; }; }, {}, never, never, false, never>;
-}
-
-declare class AdsMapMarkerTooltipComponent {
-    index: i0.InputSignal<number>;
-    marker: i0.Signal<MapMarker>;
-    private readonly mapMarkersService;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AdsMapMarkerTooltipComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AdsMapMarkerTooltipComponent, "ads-map-marker-tooltip", never, { "index": { "alias": "index"; "required": true; "isSignal": true; }; }, {}, never, never, false, never>;
-}
-
-declare class AdsMapModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<AdsMapModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AdsMapModule, [typeof AdsMapComponent, typeof AdsMapMarkerComponent, typeof AdsMapMarkerTooltipComponent], [typeof i2.CommonModule, typeof i5$4.GoogleMap, typeof i5$4.MapDirectionsRenderer, typeof i5$4.MapAdvancedMarker], [typeof AdsMapComponent, typeof AdsMapMarkerComponent, typeof AdsMapMarkerTooltipComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<AdsMapModule>;
-}
-
 type NavMenuItem = {
     template?: TemplateRef<unknown>;
     label?: string;
@@ -3143,5 +3016,5 @@ declare class AdsInternationalPhoneFieldModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<AdsInternationalPhoneFieldModule>;
 }
 
-export { AdsAscentLogoComponent, AdsAscentLogoModule, AdsAvatarComponent, AdsAvatarModule, AdsBreadcrumbComponent, AdsBreadcrumbModule, AdsBubbleComponent, AdsBubbleModule, AdsButtonComponent, AdsButtonContainerComponent, AdsButtonContainerModule, AdsButtonModule, AdsCardComponent, AdsCardModule, AdsCheckboxComponent, AdsCheckboxModule, AdsChipComponent, AdsChipModule, AdsCreateTagComponent, AdsCreateTagModule, AdsDatepickerComponent, AdsDatepickerModule, AdsDatetimepickerComponent, AdsDatetimepickerModule, AdsDividerModule, AdsDragAndDropListComponent, AdsDragAndDropListModule, AdsDropdownComponent, AdsDropdownModule, AdsErrorPageCodeComponent, AdsErrorPageCodeModule, AdsErrorPageComponent, AdsErrorPageModule, AdsExpansionPanelComponent, AdsExpansionPanelModule, AdsFooterComponent, AdsFooterContainerComponent, AdsFooterContainerModule, AdsFooterModule, AdsHeaderComponent, AdsHeaderContainerComponent, AdsHeaderContainerModule, AdsHeaderModule, AdsHorizontalNavBarComponent, AdsHorizontalNavBarModule, AdsIconButtonComponent, AdsIconButtonModule, AdsIconHoverComponent, AdsIconHoverModule, AdsInputComponent, AdsInputDropdownComponent, AdsInputDropdownModule, AdsInputModule, AdsInternationalPhoneFieldComponent, AdsInternationalPhoneFieldModule, AdsLinkButtonComponent, AdsLinkButtonModule, AdsMainMenuComponent, AdsMainMenuModule, AdsMapComponent, AdsMapMarkerComponent, AdsMapMarkerTooltipComponent, AdsMapModule, AdsModalComponent, AdsModalModule, AdsMultiSelectDropdownComponent, AdsMultiSelectDropdownModule, AdsNavMenuComponent, AdsNavMenuModule, AdsNavigationCollapseHandleComponent, AdsNavigationCollapseHandleModule, AdsNavigationComponent, AdsNavigationHeaderComponent, AdsNavigationHeaderModule, AdsNavigationItemComponent, AdsNavigationItemModule, AdsNavigationItemsContainerComponent, AdsNavigationItemsContainerModule, AdsNavigationModule, AdsNumericBadgeComponent, AdsNumericBadgeModule, AdsNumericStepperComponent, AdsNumericStepperModule, AdsOrgDisplayTextComponent, AdsOrgDisplayTextModule, AdsPeakEssentialsLogoComponent, AdsPeakEssentialsLogoModule, AdsPeakMarketplaceLogoComponent, AdsPeakMarketplaceLogoModule, AdsPeakOrderManagementLogoComponent, AdsPeakOrderManagementLogoModule, AdsPhoneFieldComponent, AdsPhoneFieldModule, AdsPrimaryLogoComponent, AdsPrimaryLogoModule, AdsProgressBarComponent, AdsProgressBarModule, AdsProgressIndicatorSpinnerComponent, AdsProgressIndicatorSpinnerModule, AdsProgressSpinnerComponent, AdsProgressSpinnerModule, AdsRadioButtonComponent, AdsRadioButtonModule, AdsScmsLogoComponent, AdsScmsLogoModule, AdsScmsSideNavBarComponent, AdsScmsSideNavBarModule, AdsSearchDropdownComponent, AdsSearchDropdownModule, AdsSearchInputComponent, AdsSearchInputModule, AdsShellLayoutModule, AdsSideNavBarComponent, AdsSideNavBarModule, AdsSlideToggle, AdsSlideToggleComponent, AdsSliderComponent, AdsSliderModule, AdsSnackbarComponent, AdsSnackbarModule, AdsSplashPageComponent, AdsSplashPageModule, AdsStepperComponent, AdsStepperModule, AdsTableComponent, AdsTableModule, AdsTabsComponent, AdsTabsModule, AdsTagComponent, AdsTagContainerComponent, AdsTagContainerModule, AdsTagModule, AdsTextareaComponent, AdsTextareaModule, AdsTimeFieldComponent, AdsTimeFieldModule, AdsTimepickerComponent, AdsTimepickerModule, AdsWizardStepperComponent, AdsWizardStepperModule, BadgeColor, Colors, CustomDatetimeAdapter, DividerComponent, ErrorPageDefault, MainMenuService, ModalActionType, ModalPanelClass, PanelClass, ShellLayoutComponent, SpinnerSize, StepStatus, TableBreakpoint, ViewportService, WindowService, WizardStepStatus };
-export type { AdsModalData, Breadcrumb, Copyright, DROP_CALLBACK_INDEXES, DividerStyle, ErrorPageConfig, ErrorPageInfoColumn, HorizontalNavLink, IconButtonSize, Link, MainMenuItem, MapMarker, NavItem, NavMenuItem, NumericStep, ScmsNavItem, ScmsNavSubItem, Size, Step, Tab, Tag, UNSUBSCRIBE_FUNCTIONS_COLLECTION, Variant, WizardStep };
+export { AdsAscentLogoComponent, AdsAscentLogoModule, AdsAvatarComponent, AdsAvatarModule, AdsBreadcrumbComponent, AdsBreadcrumbModule, AdsBubbleComponent, AdsBubbleModule, AdsButtonComponent, AdsButtonContainerComponent, AdsButtonContainerModule, AdsButtonModule, AdsCardComponent, AdsCardModule, AdsCheckboxComponent, AdsCheckboxModule, AdsChipComponent, AdsChipModule, AdsCreateTagComponent, AdsCreateTagModule, AdsDatepickerComponent, AdsDatepickerModule, AdsDatetimepickerComponent, AdsDatetimepickerModule, AdsDividerModule, AdsDragAndDropListComponent, AdsDragAndDropListModule, AdsDropdownComponent, AdsDropdownModule, AdsErrorPageCodeComponent, AdsErrorPageCodeModule, AdsErrorPageComponent, AdsErrorPageModule, AdsExpansionPanelComponent, AdsExpansionPanelModule, AdsFooterComponent, AdsFooterContainerComponent, AdsFooterContainerModule, AdsFooterModule, AdsHeaderComponent, AdsHeaderContainerComponent, AdsHeaderContainerModule, AdsHeaderModule, AdsHorizontalNavBarComponent, AdsHorizontalNavBarModule, AdsIconButtonComponent, AdsIconButtonModule, AdsIconHoverComponent, AdsIconHoverModule, AdsInputComponent, AdsInputDropdownComponent, AdsInputDropdownModule, AdsInputModule, AdsInternationalPhoneFieldComponent, AdsInternationalPhoneFieldModule, AdsLinkButtonComponent, AdsLinkButtonModule, AdsMainMenuComponent, AdsMainMenuModule, AdsModalComponent, AdsModalModule, AdsMultiSelectDropdownComponent, AdsMultiSelectDropdownModule, AdsNavMenuComponent, AdsNavMenuModule, AdsNavigationCollapseHandleComponent, AdsNavigationCollapseHandleModule, AdsNavigationComponent, AdsNavigationHeaderComponent, AdsNavigationHeaderModule, AdsNavigationItemComponent, AdsNavigationItemModule, AdsNavigationItemsContainerComponent, AdsNavigationItemsContainerModule, AdsNavigationModule, AdsNumericBadgeComponent, AdsNumericBadgeModule, AdsNumericStepperComponent, AdsNumericStepperModule, AdsOrgDisplayTextComponent, AdsOrgDisplayTextModule, AdsPeakEssentialsLogoComponent, AdsPeakEssentialsLogoModule, AdsPeakMarketplaceLogoComponent, AdsPeakMarketplaceLogoModule, AdsPeakOrderManagementLogoComponent, AdsPeakOrderManagementLogoModule, AdsPhoneFieldComponent, AdsPhoneFieldModule, AdsPrimaryLogoComponent, AdsPrimaryLogoModule, AdsProgressBarComponent, AdsProgressBarModule, AdsProgressIndicatorSpinnerComponent, AdsProgressIndicatorSpinnerModule, AdsProgressSpinnerComponent, AdsProgressSpinnerModule, AdsRadioButtonComponent, AdsRadioButtonModule, AdsScmsLogoComponent, AdsScmsLogoModule, AdsScmsSideNavBarComponent, AdsScmsSideNavBarModule, AdsSearchDropdownComponent, AdsSearchDropdownModule, AdsSearchInputComponent, AdsSearchInputModule, AdsShellLayoutModule, AdsSideNavBarComponent, AdsSideNavBarModule, AdsSlideToggle, AdsSlideToggleComponent, AdsSliderComponent, AdsSliderModule, AdsSnackbarComponent, AdsSnackbarModule, AdsSplashPageComponent, AdsSplashPageModule, AdsStepperComponent, AdsStepperModule, AdsTableComponent, AdsTableModule, AdsTabsComponent, AdsTabsModule, AdsTagComponent, AdsTagContainerComponent, AdsTagContainerModule, AdsTagModule, AdsTextareaComponent, AdsTextareaModule, AdsTimeFieldComponent, AdsTimeFieldModule, AdsTimepickerComponent, AdsTimepickerModule, AdsWizardStepperComponent, AdsWizardStepperModule, BadgeColor, Colors, CustomDatetimeAdapter, DividerComponent, ErrorPageDefault, MainMenuService, ModalActionType, ModalPanelClass, PanelClass, ShellLayoutComponent, SpinnerSize, StepStatus, TableBreakpoint, ViewportService, WindowService, WizardStepStatus };
+export type { AdsModalData, Breadcrumb, Copyright, DROP_CALLBACK_INDEXES, DividerStyle, ErrorPageConfig, ErrorPageInfoColumn, HorizontalNavLink, IconButtonSize, Link, MainMenuItem, NavItem, NavMenuItem, NumericStep, ScmsNavItem, ScmsNavSubItem, Size, Step, Tab, Tag, UNSUBSCRIBE_FUNCTIONS_COLLECTION, Variant, WizardStep };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ascentgl/ads-ui",
-  "version": "20.0.6",
+  "version": "20.0.7",
   "peerDependencies": {
     "@ascentgl/ads-icons": ">=0.0.0",
     "@ascentgl/ads-utils": ">=0.0.0",
@@ -32,30 +32,26 @@
       "types": "./src/lib/components/avatar/index.d.ts",
       "default": "./fesm2022/ascentgl-ads-ui-src-lib-components-avatar.mjs"
     },
-    "./src/lib/components/footer": {
-      "types": "./src/lib/components/footer/index.d.ts",
-      "default": "./fesm2022/ascentgl-ads-ui-src-lib-components-footer.mjs"
-    },
     "./src/lib/components/drag-and-drop-list": {
       "types": "./src/lib/components/drag-and-drop-list/index.d.ts",
       "default": "./fesm2022/ascentgl-ads-ui-src-lib-components-drag-and-drop-list.mjs"
     },
-    "./src/lib/components/map": {
-      "types": "./src/lib/components/map/index.d.ts",
-      "default": "./fesm2022/ascentgl-ads-ui-src-lib-components-map.mjs"
+    "./src/lib/components/footer": {
+      "types": "./src/lib/components/footer/index.d.ts",
+      "default": "./fesm2022/ascentgl-ads-ui-src-lib-components-footer.mjs"
     },
     "./src/lib/components/header": {
       "types": "./src/lib/components/header/index.d.ts",
       "default": "./fesm2022/ascentgl-ads-ui-src-lib-components-header.mjs"
     },
-    "./src/lib/components/splash-page": {
-      "types": "./src/lib/components/splash-page/index.d.ts",
-      "default": "./fesm2022/ascentgl-ads-ui-src-lib-components-splash-page.mjs"
-    },
     "./src/lib/components/shell-layout": {
       "types": "./src/lib/components/shell-layout/index.d.ts",
       "default": "./fesm2022/ascentgl-ads-ui-src-lib-components-shell-layout.mjs"
     },
+    "./src/lib/components/splash-page": {
+      "types": "./src/lib/components/splash-page/index.d.ts",
+      "default": "./fesm2022/ascentgl-ads-ui-src-lib-components-splash-page.mjs"
+    },
     "./src/lib/components/buttons/button-container": {
       "types": "./src/lib/components/buttons/button-container/index.d.ts",
       "default": "./fesm2022/ascentgl-ads-ui-src-lib-components-buttons-button-container.mjs"
@@ -68,26 +64,26 @@
       "types": "./src/lib/components/footer/container/index.d.ts",
       "default": "./fesm2022/ascentgl-ads-ui-src-lib-components-footer-container.mjs"
     },
-    "./src/lib/components/logo/primary-logo": {
-      "types": "./src/lib/components/logo/primary-logo/index.d.ts",
-      "default": "./fesm2022/ascentgl-ads-ui-src-lib-components-logo-primary-logo.mjs"
-    },
     "./src/lib/components/header/container": {
       "types": "./src/lib/components/header/container/index.d.ts",
       "default": "./fesm2022/ascentgl-ads-ui-src-lib-components-header-container.mjs"
     },
+    "./src/lib/components/logo/primary-logo": {
+      "types": "./src/lib/components/logo/primary-logo/index.d.ts",
+      "default": "./fesm2022/ascentgl-ads-ui-src-lib-components-logo-primary-logo.mjs"
+    },
     "./src/lib/components/progress-indicators/progress-bar": {
       "types": "./src/lib/components/progress-indicators/progress-bar/index.d.ts",
       "default": "./fesm2022/ascentgl-ads-ui-src-lib-components-progress-indicators-progress-bar.mjs"
     },
-    "./src/lib/components/progress-indicators/progress-indicator-spinner": {
-      "types": "./src/lib/components/progress-indicators/progress-indicator-spinner/index.d.ts",
-      "default": "./fesm2022/ascentgl-ads-ui-src-lib-components-progress-indicators-progress-indicator-spinner.mjs"
-    },
     "./src/lib/components/progress-indicators/progress-spinner": {
       "types": "./src/lib/components/progress-indicators/progress-spinner/index.d.ts",
       "default": "./fesm2022/ascentgl-ads-ui-src-lib-components-progress-indicators-progress-spinner.mjs"
     },
+    "./src/lib/components/progress-indicators/progress-indicator-spinner": {
+      "types": "./src/lib/components/progress-indicators/progress-indicator-spinner/index.d.ts",
+      "default": "./fesm2022/ascentgl-ads-ui-src-lib-components-progress-indicators-progress-indicator-spinner.mjs"
+    },
     "./src/lib/components/tags/tag-container": {
       "types": "./src/lib/components/tags/tag-container/index.d.ts",
       "default": "./fesm2022/ascentgl-ads-ui-src-lib-components-tags-tag-container.mjs"

package/src/assets/sass/ads-ui/abstracts/_functions.scss

@@ -1,18 +1,18 @@
-@use 'sass:map';
-@use 'variables' as *;
-
-@function color($key) {
-  @return var(--color- + $key);
-}
-
-@function font-weight($key) {
-  @return map.get($font-weights, $key);
-}
-
-@function font-size($key) {
-  @return map.get($font-sizes, $key);
-}
-
-@function spacing($key) {
-  @return map.get($spacings, $key);
-}
+@use 'sass:map';
+@use 'variables' as *;
+
+@function color($key) {
+  @return var(--color- + $key);
+}
+
+@function font-weight($key) {
+  @return map.get($font-weights, $key);
+}
+
+@function font-size($key) {
+  @return map.get($font-sizes, $key);
+}
+
+@function spacing($key) {
+  @return map.get($spacings, $key);
+}

package/src/assets/sass/ads-ui/abstracts/_mixins.scss

@@ -1,90 +1,90 @@
-// Media Queries
-@use 'functions' as *;
-
-@mixin breakpoint($breakpoint) {
-  @if $breakpoint == xs {
-    @media screen and (min-width: 320px) and (max-width: 480px) {
-      @content;
-    }
-  } @else if $breakpoint == sm {
-    @media screen and (min-width: 481px) and (max-width: 768px) {
-      @content;
-    }
-  } @else if $breakpoint == md {
-    @media screen and (min-width: 769px) and (max-width: 1024px) {
-      @content;
-    }
-  } @else if $breakpoint == lg {
-    @media screen and (min-width: 1025px) and (max-width: 1200px) {
-      @content;
-    }
-  } @else if $breakpoint == xl {
-    @media screen and (min-width: 1201px) {
-      @content;
-    }
-  } @else if $breakpoint == lt-sm {
-    @media screen and (max-width: 480px) {
-      @content;
-    }
-  } @else if $breakpoint == lt-md {
-    @media screen and (max-width: 768px) {
-      @content;
-    }
-  } @else if $breakpoint == lt-lg {
-    @media screen and (max-width: 1024px) {
-      @content;
-    }
-  } @else if $breakpoint == lt-xl {
-    @media screen and (max-width: 1200px) {
-      @content;
-    }
-  } @else if $breakpoint == gt-xs {
-    @media screen and (min-width: 481px) {
-      @content;
-    }
-  } @else if $breakpoint == gt-sm {
-    @media screen and (min-width: 769px) {
-      @content;
-    }
-  } @else if $breakpoint == gt-md {
-    @media screen and (min-width: 1025px) {
-      @content;
-    }
-  } @else if $breakpoint == gt-lg {
-    @media screen and (min-width: 1201px) {
-      @content;
-    }
-  }
-}
-
-@mixin font-size($breakpoint: base) {
-  @if $breakpoint == xs {
-    font-size: 0.75rem;
-  } @else if $breakpoint == sm {
-    font-size: 0.875rem;
-  } @else if $breakpoint == base {
-    font-size: 1rem;
-  } @else if $breakpoint == lg {
-    font-size: 1.125rem;
-  } @else if $breakpoint == xl {
-    font-size: 1.25rem;
-  } @else if $breakpoint == 2xl {
-    font-size: 1.5rem;
-  } @else if $breakpoint == 3xl {
-    font-size: 1.875rem;
-  } @else if $breakpoint == 4xl {
-    font-size: 2.25rem;
-  } @else if $breakpoint == 5xl {
-    font-size: 3rem;
-  } @else if $breakpoint == 6xl {
-    font-size: 4rem;
-  }
-}
-
-@mixin background-color($theme: primary) {
-  background-color: color($theme);
-}
-
-@mixin color($theme: dark) {
-  color: color($theme);
-}
+// Media Queries
+@use 'functions' as *;
+
+@mixin breakpoint($breakpoint) {
+  @if $breakpoint == xs {
+    @media screen and (min-width: 320px) and (max-width: 480px) {
+      @content;
+    }
+  } @else if $breakpoint == sm {
+    @media screen and (min-width: 481px) and (max-width: 768px) {
+      @content;
+    }
+  } @else if $breakpoint == md {
+    @media screen and (min-width: 769px) and (max-width: 1024px) {
+      @content;
+    }
+  } @else if $breakpoint == lg {
+    @media screen and (min-width: 1025px) and (max-width: 1200px) {
+      @content;
+    }
+  } @else if $breakpoint == xl {
+    @media screen and (min-width: 1201px) {
+      @content;
+    }
+  } @else if $breakpoint == lt-sm {
+    @media screen and (max-width: 480px) {
+      @content;
+    }
+  } @else if $breakpoint == lt-md {
+    @media screen and (max-width: 768px) {
+      @content;
+    }
+  } @else if $breakpoint == lt-lg {
+    @media screen and (max-width: 1024px) {
+      @content;
+    }
+  } @else if $breakpoint == lt-xl {
+    @media screen and (max-width: 1200px) {
+      @content;
+    }
+  } @else if $breakpoint == gt-xs {
+    @media screen and (min-width: 481px) {
+      @content;
+    }
+  } @else if $breakpoint == gt-sm {
+    @media screen and (min-width: 769px) {
+      @content;
+    }
+  } @else if $breakpoint == gt-md {
+    @media screen and (min-width: 1025px) {
+      @content;
+    }
+  } @else if $breakpoint == gt-lg {
+    @media screen and (min-width: 1201px) {
+      @content;
+    }
+  }
+}
+
+@mixin font-size($breakpoint: base) {
+  @if $breakpoint == xs {
+    font-size: 0.75rem;
+  } @else if $breakpoint == sm {
+    font-size: 0.875rem;
+  } @else if $breakpoint == base {
+    font-size: 1rem;
+  } @else if $breakpoint == lg {
+    font-size: 1.125rem;
+  } @else if $breakpoint == xl {
+    font-size: 1.25rem;
+  } @else if $breakpoint == 2xl {
+    font-size: 1.5rem;
+  } @else if $breakpoint == 3xl {
+    font-size: 1.875rem;
+  } @else if $breakpoint == 4xl {
+    font-size: 2.25rem;
+  } @else if $breakpoint == 5xl {
+    font-size: 3rem;
+  } @else if $breakpoint == 6xl {
+    font-size: 4rem;
+  }
+}
+
+@mixin background-color($theme: primary) {
+  background-color: color($theme);
+}
+
+@mixin color($theme: dark) {
+  color: color($theme);
+}