@swisspost/design-system-styles 9.0.0-next.2 → 9.0.0-next.21

package/variables/components/_pagination.scss

@@ -3,14 +3,18 @@
 @use './../type';
 @use './../commons';
 @use './button';
+@use '../../tokens/utilities';
+@use '../../functions/tokens';
+
+tokens.$default-map: utilities.$post-spacing;
 
 // Pagination
 
-$pagination-padding-y: spacing.$size-mini !default;
+$pagination-padding-y: tokens.get('utility-gap-8') !default;
 $pagination-padding-x: 0 !default;
-$pagination-padding-y-sm: spacing.$size-micro !default;
+$pagination-padding-y-sm: tokens.get('utility-gap-4') !default;
 $pagination-padding-x-sm: 0 !default;
-$pagination-padding-y-lg: spacing.$size-small-regular !default;
+$pagination-padding-y-lg: tokens.get('utility-gap-12') !default;
 $pagination-padding-x-lg: 0 !default;
 $pagination-line-height: 1.25 !default;
 
@@ -35,8 +39,12 @@ $pagination-disabled-bg: color.$light !default;
 $pagination-disabled-border-color: color.$gray-10 !default;
 
 $pagination-height-border: $pagination-border-width * 2 !default;
-$pagination-height-inner: (type.$font-size-base * $pagination-line-height) +
-  ($pagination-padding-y * 2) !default;
-$pagination-height: calc(#{$pagination-height-inner} + #{$pagination-height-border}) !default;
+$pagination-height-inner: calc(
+  (type.$font-size-base * $pagination-line-height) + ($pagination-padding-y * 2)
+) !default;
+$pagination-height: calc(
+  ((type.$font-size-base * $pagination-line-height) + (tokens.get('utility-gap-8') * 2)) +
+    $pagination-height-border
+) !default;
 
 $pagination-width: $pagination-height !default;

package/variables/components/_spinners.scss

@@ -4,6 +4,11 @@
 @use './../type';
 @use './../../functions/sizing';
 
+@use './../../functions/tokens';
+@use './../../tokens/utilities';
+
+tokens.$default-map: utilities.$post-spacing;
+
 // Spinners
 
 $spinner-color-primary: color.$yellow !default;
@@ -27,7 +32,7 @@ $spinner-size-map: (
 
 // DEPRECATED
 $spinner-size-sm: type.$font-size-40 !default;
-$spinner-border-width-sm: spacing.$size-micro !default;
+$spinner-border-width-sm: tokens.get('utility-gap-4') !default;
 
 $spinner-size-xs: type.$font-size-16 !default;
-$spinner-border-width-xs: spacing.$size-line !default;
+$spinner-border-width-xs: tokens.get('utility-gap-2') !default;

package/variables/components/_stepper.scss

@@ -5,23 +5,28 @@
 
 @use './../../functions/icons' as icon-fn;
 
-$stepper-bar-height: spacing.$size-micro;
+@use '../../tokens/utilities';
+@use '../../functions/tokens';
+
+tokens.$default-map: utilities.$post-spacing;
+
+$stepper-bar-height: tokens.get('utility-gap-4');
 $stepper-bar-color: color.$gray-40;
 $stepper-bar-fill-color: color.$yellow;
 
-$stepper-indicator-size: spacing.$size-bigger-big;
-$stepper-indicator-border-width: spacing.$size-micro;
+$stepper-indicator-size: tokens.get('utility-gap-40');
+$stepper-indicator-border-width: tokens.get('utility-gap-4');
 $stepper-indicator-border-color: rgb(var(--post-bg-rgb, 255 255 255));
 $stepper-indicator-font-weight: type.$font-weight-bold;
 $stepper-indicator-bg: color.$yellow;
 $stepper-indicator-color: color.$black;
-$stepper-indicator-check-size: spacing.$size-large;
+$stepper-indicator-check-size: tokens.get('utility-gap-24');
 $stepper-indicator-transition:
   color animation.$transition-base-timing,
   background-color animation.$transition-base-timing;
 
-$stepper-indicator-hover-color: var(--post-contrast-color-inverted);
-$stepper-indicator-hover-bg: var(--post-contrast-color);
+$stepper-indicator-hover-color: color.$white;
+$stepper-indicator-hover-bg: color.$black;
 
 $stepper-indicator-future-bg: color.$gray-60;
 $stepper-indicator-future-color: color.$white;
@@ -29,9 +34,9 @@ $stepper-indicator-check-icon: url('#{icon-fn.get-colored-svg-url('2105', $stepp
 $stepper-indicator-check-icon-size: $stepper-indicator-check-size;
 
 $stepper-link-line-height: type.$line-height-sm;
-$stepper-link-gap: spacing.$size-mini;
-$stepper-link-spacing: spacing.$size-regular;
-$stepper-link-color: var(--post-gray-60);
+$stepper-link-gap: tokens.get('utility-gap-8');
+$stepper-link-spacing: tokens.get('utility-gap-16');
+$stepper-link-color: color.$gray-60;
 
-$stepper-link-current-color: var(--post-gray-80);
+$stepper-link-current-color: color.$gray-80;
 $stepper-link-current-font-weight: type.$font-weight-bold;

package/variables/components/_subnavigation.scss

@@ -3,6 +3,10 @@
 @use './../commons';
 @use './../spacing';
 @use './../../functions/sizing';
+@use '../../tokens/utilities';
+@use '../../functions/tokens';
+
+tokens.$default-map: utilities.$post-spacing;
 
 // Subnavigation
 
@@ -17,16 +21,14 @@ $subnavigation-height-xs: sizing.px-to-rem(56);
 $subnavigation-height-lg: sizing.px-to-rem(64);
 $subnavigation-height-xl: sizing.px-to-rem(72);
 
-$subnavigation-link-color: rgba(var(--post-contrast-color-rgb), 0.6);
-$subnavigation-link-color-hover: var(--post-contrast-color);
+$subnavigation-link-color: color.$black-alpha-60;
+$subnavigation-link-color-hover: color.$black;
 
-$subnavigation-link-underscore-height: map.get(spacing.$post-sizes, 'micro');
+$subnavigation-link-underscore-height: tokens.get('utility-gap-4');
 $subnavigation-link-underscore-color-active: color.$yellow;
-$subnavigation-link-underscore-color-hover: rgba(var(--post-contrast-color-rgb), 0.4);
+$subnavigation-link-underscore-color-hover: color.$black-alpha-40;
 
-$subnavigation-link-padding-xs: map.get(spacing.$post-sizes, 'regular')
-  map.get(spacing.$post-sizes, 'small-regular');
-$subnavigation-link-padding-lg: map.get(spacing.$post-sizes, 'small-large')
-  map.get(spacing.$post-sizes, 'regular');
+$subnavigation-link-padding-xs: tokens.get('utility-gap-16') tokens.get('utility-gap-12');
+$subnavigation-link-padding-lg: 1.25rem tokens.get('utility-gap-16');
 
-$subnavigation-result-margin-left: map.get(spacing.$post-sizes, 'mini');
+$subnavigation-result-margin-left: tokens.get('utility-gap-8');

package/variables/components/_tables.scss

@@ -4,13 +4,18 @@
 @use './../spacing';
 @use './../type';
 
+@use '../../tokens/utilities';
+@use '../../functions/tokens';
+
+tokens.$default-map: utilities.$post-spacing;
+
 // Bootstrap variables
-$table-cell-padding-y: spacing.$size-small-regular !default;
-$table-cell-padding-x: spacing.$size-mini !default;
-$table-cell-padding-y-sm: spacing.$size-mini !default;
-$table-cell-padding-x-sm: spacing.$size-micro !default;
+$table-cell-padding-y: tokens.get('utility-gap-12') !default;
+$table-cell-padding-x: tokens.get('utility-gap-4') !default;
+$table-cell-padding-y-sm: tokens.get('utility-gap-8') !default;
+$table-cell-padding-x-sm: tokens.get('utility-gap-4') !default;
 $table-cell-vertical-align: top !default;
-$table-color: var(--post-contrast-color) !default;
+$table-color: color.$black !default;
 $table-bg: transparent !default;
 $table-accent-bg: transparent !default;
 $table-th-font-weight: type.$font-weight-bold !default;
@@ -29,7 +34,7 @@ $table-border-color: color.$gray-10 !default;
 $table-striped-order: odd !default;
 $table-striped-columns-order: even !default;
 $table-group-separator-color: color.$gray-10 !default;
-$table-caption-color: var(--post-gray-60) !default;
+$table-caption-color: color.$gray-60 !default;
 $table-bg-scale: -80% !default;
 
 // Custom variables

package/variables/components/_tag.scss

@@ -1,19 +1,22 @@
 @use './../color' as color;
 @use './../spacing' as spacing;
 @use './../type' as type;
-@use '../../functions/sizing' as sizing;
+@use '../../functions/tokens';
+@use '../../tokens/utilities';
 
-$tag-gap: spacing.$size-micro;
+tokens.$default-map: utilities.$post-spacing;
+
+$tag-gap: tokens.get('utility-gap-4');
 $tag-padding-y: 0;
-$tag-padding-x: spacing.$size-mini;
+$tag-padding-x: tokens.get('utility-gap-8');
 $tag-max-width: 100%;
-$tag-border-width: spacing.$size-hair;
-$tag-border-radius: spacing.$size-micro;
+$tag-border-width: tokens.get('utility-gap-1');
+$tag-border-radius: tokens.get('utility-gap-4');
 $tag-font-size: type.$font-size-16;
-$tag-line-height: spacing.$size-big - (sizing.px-to-rem($tag-border-width) * 2);
+$tag-line-height: calc(tokens.get('utility-gap-32') - ($tag-border-width * 2));
 $tag-icon-size: $tag-font-size * 1.25;
 
-$tag-sm-line-height: spacing.$size-large;
+$tag-sm-line-height: tokens.get('utility-gap-24');
 $tag-sm-icon-size: $tag-font-size;
 
 $tag-default-background: color.$gray-10;

package/components/accordion.css

@@ -1 +0,0 @@
-.accordion-item,.bg-yellow .accordion-item,.bg-white .accordion-item,.bg-light .accordion-item,.bg-gray .accordion-item,.bg-dark .accordion-item,.bg-black .accordion-item,.bg-primary .accordion-item,.bg-secondary .accordion-item,.bg-success .accordion-item,.bg-warning .accordion-item,.bg-error .accordion-item,.bg-info .accordion-item,.bg-success-background .accordion-item,.bg-warning-background .accordion-item,.bg-error-background .accordion-item,.bg-nightblue .accordion-item,.bg-nightblue-bright .accordion-item,.bg-petrol .accordion-item,.bg-petrol-bright .accordion-item,.bg-coral .accordion-item,.bg-coral-bright .accordion-item,.bg-olive .accordion-item,.bg-olive-bright .accordion-item,.bg-purple .accordion-item,.bg-purple-bright .accordion-item,.bg-aubergine .accordion-item,.bg-aubergine-bright .accordion-item{--post-bg-opacity: 1;background-color:rgba(var(--post-bg-rgb), var(--post-bg-opacity)) !important;color:var(--post-contrast-color) !important}.accordion-item,.bg-yellow .accordion-item,.bg-white .accordion-item,.bg-light .accordion-item,.bg-gray .accordion-item,.bg-dark .accordion-item,.bg-black .accordion-item,.bg-primary .accordion-item,.bg-secondary .accordion-item,.bg-success .accordion-item,.bg-warning .accordion-item,.bg-error .accordion-item,.bg-info .accordion-item,.bg-success-background .accordion-item,.bg-warning-background .accordion-item,.bg-error-background .accordion-item,.bg-nightblue .accordion-item,.bg-nightblue-bright .accordion-item,.bg-petrol .accordion-item,.bg-petrol-bright .accordion-item,.bg-coral .accordion-item,.bg-coral-bright .accordion-item,.bg-olive .accordion-item,.bg-olive-bright .accordion-item,.bg-purple .accordion-item,.bg-purple-bright .accordion-item,.bg-aubergine .accordion-item,.bg-aubergine-bright .accordion-item{--post-contrast-color: #000;--post-focus-color: #1976c8;--post-contrast-color-inverted: #fff;--post-gray-10: hsl(0, 0%, 90%);--post-gray-20: hsl(0, 0%, 80%);--post-gray-40: hsl(0, 0%, 60%);--post-gray-60: hsl(0, 0%, 40%);--post-gray-80: hsl(0, 0%, 20%);--post-yellow: #fc0;--post-white: #fff;--post-light: #faf9f8;--post-gray: #f4f3f1;--post-dark: hsl(0, 0%, 20%);--post-black: #000;--post-primary: hsl(0, 0%, 20%);--post-secondary: hsl(0, 0%, 40%);--post-success: #2c871d;--post-warning: #f49e00;--post-error: #a51728;--post-info: #cce4ee;--post-success-background: #c0debb;--post-warning-background: #fce2b2;--post-error-background: #ffdade;--post-nightblue: #004976;--post-nightblue-bright: #0076a8;--post-petrol: #006d68;--post-petrol-bright: #00968f;--post-coral: #9e2a2f;--post-coral-bright: #e03c31;--post-olive: #716135;--post-olive-bright: #aa9d2e;--post-purple: #80276c;--post-purple-bright: #c5299b;--post-aubergine: #523178;--post-aubergine-bright: #7566a0;--post-contrast-color-rgb: 0, 0, 0;--post-contrast-color-inverted-rgb: 255, 255, 255;--post-gray-10-rgb: 230, 230, 230;--post-gray-20-rgb: 204, 204, 204;--post-gray-40-rgb: 153, 153, 153;--post-gray-60-rgb: 102, 102, 102;--post-gray-80-rgb: 51, 51, 51;--post-black-alpha-10-rgba: rgba(0, 0, 0, 0.1);--post-black-alpha-20-rgba: rgba(0, 0, 0, 0.2);--post-black-alpha-40-rgba: rgba(0, 0, 0, 0.4);--post-black-alpha-60-rgba: rgba(0, 0, 0, 0.6);--post-black-alpha-80-rgba: rgba(0, 0, 0, 0.8);--post-white-alpha-10-rgba: rgba(255, 255, 255, 0.1);--post-white-alpha-20-rgba: rgba(255, 255, 255, 0.2);--post-white-alpha-40-rgba: rgba(255, 255, 255, 0.4);--post-white-alpha-60-rgba: rgba(255, 255, 255, 0.6);--post-white-alpha-80-rgba: rgba(255, 255, 255, 0.8);--post-yellow-rgb: 255, 204, 0;--post-white-rgb: 255, 255, 255;--post-light-rgb: 250, 249, 248;--post-gray-rgb: 244, 243, 241;--post-dark-rgb: 51, 51, 51;--post-black-rgb: 0, 0, 0;--post-primary-rgb: 51, 51, 51;--post-secondary-rgb: 102, 102, 102;--post-success-rgb: 44, 135, 29;--post-warning-rgb: 244, 158, 0;--post-error-rgb: 165, 23, 40;--post-info-rgb: 204, 228, 238;--post-success-background-rgb: 192, 222, 187;--post-warning-background-rgb: 252, 226, 178;--post-error-background-rgb: 255, 218, 222;--post-nightblue-rgb: 0, 73, 118;--post-nightblue-bright-rgb: 0, 118, 168;--post-petrol-rgb: 0, 109, 104;--post-petrol-bright-rgb: 0, 150, 143;--post-coral-rgb: 158, 42, 47;--post-coral-bright-rgb: 224, 60, 49;--post-olive-rgb: 113, 97, 53;--post-olive-bright-rgb: 170, 157, 46;--post-purple-rgb: 128, 39, 108;--post-purple-bright-rgb: 197, 41, 155;--post-aubergine-rgb: 82, 49, 120;--post-aubergine-bright-rgb: 117, 102, 160}.accordion-item{border-block:2px solid #666;--post-bg-rgb: 244, 243, 241}.bg-yellow .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-white .accordion-item{--post-bg-rgb: 244, 243, 241}.bg-light .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-gray .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-dark .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-black .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-primary .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-secondary .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-success .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-warning .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-error .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-info .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-success-background .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-warning-background .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-error-background .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-nightblue .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-nightblue-bright .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-petrol .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-petrol-bright .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-coral .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-coral-bright .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-olive .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-olive-bright .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-purple .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-purple-bright .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-aubergine .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-aubergine-bright .accordion-item{--post-bg-rgb: 255, 255, 255}.accordion-item+.accordion-item{border-block-start:0}.accordion-header{color:#333;font-size:1rem;font-weight:700;line-height:1.5;margin:0}.accordion-button{padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;appearance:button;width:100%;position:relative;padding-block:1rem;padding-inline-start:1rem;padding-inline-end:3rem;text-align:start;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;outline:none}.accordion-button:focus-visible{outline:2px solid #1976c8}.accordion-button:hover{color:#000;background-color:#e6e6e6}.accordion-button:disabled{opacity:.4;pointer-events:none}.accordion-button::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m23.6 18.3-.9.9-6.7-6.6-6.6 6.6-.9-.9 7.5-7.6z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m23.6 18.3-.9.9-6.7-6.6-6.6 6.6-.9-.9 7.5-7.6z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;content:"";display:block;height:1.5rem;width:1.5rem;position:absolute;inset-inline-end:1rem;inset-block-start:50%;transform:translateY(-50%);transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}.accordion-button.collapsed::after{transform:translateY(-50%) rotate(-180deg)}.accordion-button>.text-truncate{display:block}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button:hover:not(:disabled),.accordion-button:focus-visible:not(:disabled){outline:2px solid Highlight}.accordion-button:disabled{opacity:1 !important}}.accordion-body{padding:.5rem 1rem 1rem;font-weight:400}.accordion-button>*,.accordion-body>:first-child{margin-block-start:0 !important}.accordion-button>*,.accordion-body>:last-child{margin-block-end:0 !important}

package/components/accordion.scss

@@ -1,100 +0,0 @@
-@forward './../variables/options';
-
-@use './../mixins/accordion' as accordion-mx;
-@use './../mixins/button' as button-mx;
-@use './../mixins/focus' as focus-mx;
-@use './../mixins/icons' as icon-mx;
-@use './../mixins/utilities' as utility-mx;
-
-@use './../variables/components/accordion';
-
-.accordion-item {
-  border-block: accordion.$accordion-border-width solid accordion.$accordion-border-color;
-  @include accordion-mx.background-color;
-
-  & + & {
-    border-block-start: 0;
-  }
-}
-
-.accordion-header {
-  color: accordion.$accordion-header-color;
-  font-size: accordion.$accordion-header-font-size;
-  font-weight: accordion.$accordion-header-font-weight;
-  line-height: accordion.$accordion-header-line-height;
-  margin: 0;
-}
-
-.accordion-button {
-  @include button-mx.reset-button;
-  width: 100%;
-  position: relative;
-  padding-block: accordion.$accordion-button-padding;
-  padding-inline-start: accordion.$accordion-button-padding;
-  padding-inline-end: accordion.$accordion-button-padding + accordion.$accordion-icon-size +
-    accordion.$accordion-gap;
-  text-align: start;
-  transition: accordion.$accordion-button-transition;
-  @include focus-mx.focus-ring;
-
-  &:hover {
-    color: accordion.$accordion-button-hover-color;
-    background-color: accordion.$accordion-button-hover-bg;
-  }
-
-  &:disabled {
-    opacity: accordion.$accordion-button-disabled-opacity;
-    pointer-events: none;
-  }
-
-  &::after {
-    @include icon-mx.icon(accordion.$accordion-icon-name);
-    content: '';
-    display: block;
-    height: accordion.$accordion-icon-size;
-    width: accordion.$accordion-icon-size;
-
-    // use absolute positioning instead of flex to allow easy title truncation
-    position: absolute;
-    inset-inline-end: accordion.$accordion-button-padding;
-    inset-block-start: 50%;
-    transform: translateY(-50%);
-    transition: accordion.$accordion-icon-transition;
-  }
-
-  &.collapsed::after {
-    transform: translateY(-50%) accordion.$accordion-icon-transform;
-  }
-
-  > .text-truncate {
-    display: block;
-  }
-
-  @include utility-mx.high-contrast-mode() {
-    &:hover,
-    &:focus-visible {
-      &:not(:disabled) {
-        outline: accordion.$accordion-border-width solid Highlight;
-      }
-    }
-
-    &:disabled {
-      opacity: 1 !important;
-    }
-  }
-}
-
-.accordion-body {
-  padding: accordion.$accordion-body-padding;
-  font-weight: accordion.$accordion-body-font-weight;
-}
-
-.accordion-button > *,
-.accordion-body > :first-child {
-  margin-block-start: 0 !important;
-}
-
-.accordion-button > *,
-.accordion-body > :last-child {
-  margin-block-end: 0 !important;
-}

package/components/alert.css

@@ -1 +0,0 @@
-.alert-primary,.alert-success,.alert-warning,.alert-danger,.alert-info,.alert-gray,.alert-notification,.alert-error{background-color:rgb(var(--post-bg-rgb)) !important;color:var(--post-contrast-color) !important}.alert-warning,.alert-info,.alert-gray{--post-contrast-color: #000;--post-focus-color: #1976c8;--post-contrast-color-inverted: #fff;--post-gray-10: hsl(0, 0%, 90%);--post-gray-20: hsl(0, 0%, 80%);--post-gray-40: hsl(0, 0%, 60%);--post-gray-60: hsl(0, 0%, 40%);--post-gray-80: hsl(0, 0%, 20%);--post-yellow: #fc0;--post-white: #fff;--post-light: #faf9f8;--post-gray: #f4f3f1;--post-dark: hsl(0, 0%, 20%);--post-black: #000;--post-primary: hsl(0, 0%, 20%);--post-secondary: hsl(0, 0%, 40%);--post-success: #2c871d;--post-warning: #f49e00;--post-error: #a51728;--post-info: #cce4ee;--post-success-background: #c0debb;--post-warning-background: #fce2b2;--post-error-background: #ffdade;--post-nightblue: #004976;--post-nightblue-bright: #0076a8;--post-petrol: #006d68;--post-petrol-bright: #00968f;--post-coral: #9e2a2f;--post-coral-bright: #e03c31;--post-olive: #716135;--post-olive-bright: #aa9d2e;--post-purple: #80276c;--post-purple-bright: #c5299b;--post-aubergine: #523178;--post-aubergine-bright: #7566a0;--post-contrast-color-rgb: 0, 0, 0;--post-contrast-color-inverted-rgb: 255, 255, 255;--post-gray-10-rgb: 230, 230, 230;--post-gray-20-rgb: 204, 204, 204;--post-gray-40-rgb: 153, 153, 153;--post-gray-60-rgb: 102, 102, 102;--post-gray-80-rgb: 51, 51, 51;--post-black-alpha-10-rgba: rgba(0, 0, 0, 0.1);--post-black-alpha-20-rgba: rgba(0, 0, 0, 0.2);--post-black-alpha-40-rgba: rgba(0, 0, 0, 0.4);--post-black-alpha-60-rgba: rgba(0, 0, 0, 0.6);--post-black-alpha-80-rgba: rgba(0, 0, 0, 0.8);--post-white-alpha-10-rgba: rgba(255, 255, 255, 0.1);--post-white-alpha-20-rgba: rgba(255, 255, 255, 0.2);--post-white-alpha-40-rgba: rgba(255, 255, 255, 0.4);--post-white-alpha-60-rgba: rgba(255, 255, 255, 0.6);--post-white-alpha-80-rgba: rgba(255, 255, 255, 0.8);--post-yellow-rgb: 255, 204, 0;--post-white-rgb: 255, 255, 255;--post-light-rgb: 250, 249, 248;--post-gray-rgb: 244, 243, 241;--post-dark-rgb: 51, 51, 51;--post-black-rgb: 0, 0, 0;--post-primary-rgb: 51, 51, 51;--post-secondary-rgb: 102, 102, 102;--post-success-rgb: 44, 135, 29;--post-warning-rgb: 244, 158, 0;--post-error-rgb: 165, 23, 40;--post-info-rgb: 204, 228, 238;--post-success-background-rgb: 192, 222, 187;--post-warning-background-rgb: 252, 226, 178;--post-error-background-rgb: 255, 218, 222;--post-nightblue-rgb: 0, 73, 118;--post-nightblue-bright-rgb: 0, 118, 168;--post-petrol-rgb: 0, 109, 104;--post-petrol-bright-rgb: 0, 150, 143;--post-coral-rgb: 158, 42, 47;--post-coral-bright-rgb: 224, 60, 49;--post-olive-rgb: 113, 97, 53;--post-olive-bright-rgb: 170, 157, 46;--post-purple-rgb: 128, 39, 108;--post-purple-bright-rgb: 197, 41, 155;--post-aubergine-rgb: 82, 49, 120;--post-aubergine-bright-rgb: 117, 102, 160}.alert-primary,.alert-success,.alert-danger,.alert-notification,.alert-error{--post-contrast-color: #fff;--post-focus-color: #fff;--post-contrast-color-inverted: #000;--post-dark: #faf9f8;--post-light: hsl(0, 0%, 20%);--post-gray-80: hsl(0, 0%, 90%);--post-gray-60: hsl(0, 0%, 80%);--post-gray-40: hsl(0, 0%, 60%);--post-gray-20: hsl(0, 0%, 40%);--post-gray-10: hsl(0, 0%, 20%);--post-contrast-color-rgb: 255, 255, 255;--post-contrast-color-inverted-rgb: 0, 0, 0;--post-dark-rgb: 250, 249, 248;--post-light-rgb: 51, 51, 51;--post-gray-80-rgb: 230, 230, 230;--post-gray-60-rgb: 204, 204, 204;--post-gray-40-rgb: 153, 153, 153;--post-gray-20-rgb: 102, 102, 102;--post-gray-10-rgb: 51, 51, 51}.alert{position:relative;box-sizing:border-box;min-height:5rem;box-shadow:0 2px 4px 0 rgba(0,0,0,.2);border-radius:4px;padding:1rem 1.25rem;padding-inline-start:5.5rem;margin-block-end:1rem;font-size:1rem;font-weight:400}.alert.no-icon{min-height:3.5rem;padding-inline-start:1.25rem}.alert[class^=pi-],.alert[class*=" pi-"]{background-size:3rem;background-position:1.25rem 1rem;background-repeat:no-repeat}.alert[class^=pi-].no-icon,.alert[class*=" pi-"].no-icon{background-image:none}.alert::before{content:"";display:block}.alert::before,.alert>post-icon{position:absolute;height:3rem;width:3rem;left:1.25rem;top:1rem}.alert.no-icon::before,.alert[class^=pi-]::before,.alert[class*=" pi-"]::before{content:unset}.alert.no-icon>post-icon,.alert[class^=pi-]>post-icon,.alert[class*=" pi-"]>post-icon{display:none}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.alert{filter:none !important;border:2px solid CanvasText}}.alert:not(.alert-action){display:flex;flex-direction:column;justify-content:center;gap:.25rem}.alert:not(.alert-action) a{font-weight:400}.alert:not(.alert-action) hr{margin-block:.5rem .75rem !important}.alert:not(.alert-action)>:only-child,.alert:not(.alert-action)>post-icon:first-child+:last-child{font-size:1.0625rem;font-weight:700}.alert:not(.alert-action)>*{margin:0}.alert-heading{font-size:1.0625rem;font-weight:700}.alert-dismissible{pointer-events:auto;position:relative;padding-inline-end:4rem}.alert-dismissible>.btn-close{position:absolute;inset-block-start:1rem;inset-inline-end:1.25rem}.alert-dismissible>.btn-close:first-child+:last-child{font-size:1.0625rem;font-weight:700}.alert-action{display:flex;flex-direction:row;align-items:center;gap:1.25rem}.alert-action>.alert-content{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;gap:.25rem}.alert-action>.alert-content a{font-weight:400}.alert-action>.alert-content hr{margin-block:.5rem .75rem !important}.alert-action>.alert-content>:only-child,.alert-action>.alert-content>post-icon:first-child+:last-child{font-size:1.0625rem;font-weight:700}.alert-action>.alert-content>*{margin:0}.alert-action>.alert-buttons{flex:0 0 auto;display:flex;align-items:center;gap:.5rem}@media(min-width: 780px){.alert-action.alert-dismissible>.btn-close{inset-block-start:calc(50% - 0.75rem)}}@media(max-width: 779.98px){.alert-action{flex-direction:column;align-items:stretch;padding-inline:1.25rem}.alert-action>.alert-content{padding-inline-start:4.25rem;padding-inline-end:2.75rem}.alert-action.no-icon>.alert-content{padding-inline-start:0}.alert-action>.alert-buttons{display:flex}.alert-action>.alert-buttons>.btn,.alert-action>.alert-buttons>::slotted(.btn){flex:1 0 0;width:100%}.alert-action>.alert-buttons>.btn:first-child,.alert-action>.alert-buttons>::slotted(.btn:first-child){margin-inline-start:0}}.alert-fixed-bottom{position:fixed;inset-block-end:0;inset-inline-start:0;inset-inline-end:0;margin-bottom:0;border-radius:0;z-index:1030}@media(min-width: 1440px){.alert-fixed-bottom{padding-inline-end:calc((100% - 1439px) / 2 + 120px + 1.25rem);padding-inline-start:calc((100% - 1439px) / 2 + 120px + 1.25rem + 3rem + 1.25rem);background-position-x:calc((100% - 1439px) / 2 + 120px + 1.25rem + 1.5rem)}.alert-fixed-bottom::before{left:calc((100% - 1439px) / 2 + 120px + 1.25rem)}.alert-fixed-bottom.no-icon{padding-inline-start:calc((100% - 1439px) / 2 + 120px + 1.25rem)}.alert-fixed-bottom.alert-dismissible{padding-inline-end:calc((100% - 1439px) / 2 + 120px + 1.25rem + 1.25rem + 1.5rem)}.alert-fixed-bottom.alert-dismissible>.btn-close{inset-inline-end:calc((100% - 1439px) / 2 + 120px + 1.25rem)}}.alert-primary{--post-bg-rgb: 51, 51, 51}.alert-primary:not(.no-icon,[class^=pi-],[class*=" pi-"])::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30.533 26.933c-3.333-4.8-5.867-12.667-5.867-18.267 0-4.8-3.867-8.667-8.667-8.667S7.332 3.866 7.332 8.666c0 5.6-2.533 13.467-5.867 18.267L1.998 28h11.333v4h5.333v-4h11.333l.533-1.067zm-13.2 3.734h-2.667V28h2.667zm-14.133-4c3.2-5.067 5.467-12.533 5.467-18 0-4 3.333-7.333 7.333-7.333s7.333 3.333 7.333 7.333c0 5.467 2.267 12.933 5.467 18z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30.533 26.933c-3.333-4.8-5.867-12.667-5.867-18.267 0-4.8-3.867-8.667-8.667-8.667S7.332 3.866 7.332 8.666c0 5.6-2.533 13.467-5.867 18.267L1.998 28h11.333v4h5.333v-4h11.333l.533-1.067zm-13.2 3.734h-2.667V28h2.667zm-14.133-4c3.2-5.067 5.467-12.533 5.467-18 0-4 3.333-7.333 7.333-7.333s7.333 3.333 7.333 7.333c0 5.467 2.267 12.933 5.467 18z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color}.alert-primary:has(>post-icon)::before{content:none}.alert-primary>post-icon{background-color:#333}.alert-success{--post-bg-rgb: 44, 135, 29}.alert-success:not(.no-icon,[class^=pi-],[class*=" pi-"])::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12.667 24.533-7.6-7.6 1.867-1.867 5.733 5.733 12.4-12.4 1.867 1.867z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12.667 24.533-7.6-7.6 1.867-1.867 5.733 5.733 12.4-12.4 1.867 1.867z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color}.alert-success:has(>post-icon)::before{content:none}.alert-success>post-icon{background-color:#2c871d}.alert-warning{--post-bg-rgb: 244, 158, 0}.alert-warning:not(.no-icon,[class^=pi-],[class*=" pi-"])::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.67 4h2.67v18.67h-2.67zm0 21.33h2.67V28h-2.67z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.67 4h2.67v18.67h-2.67zm0 21.33h2.67V28h-2.67z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color}.alert-warning:has(>post-icon)::before{content:none}.alert-warning>post-icon{background-color:#f49e00}.alert-danger{--post-bg-rgb: 165, 23, 40}.alert-danger:not(.no-icon,[class^=pi-],[class*=" pi-"])::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.67 4h2.67v18.67h-2.67zm0 21.33h2.67V28h-2.67z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.67 4h2.67v18.67h-2.67zm0 21.33h2.67V28h-2.67z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color}.alert-danger:has(>post-icon)::before{content:none}.alert-danger>post-icon{background-color:#a51728}.alert-info{--post-bg-rgb: 204, 228, 238}.alert-info:not(.no-icon,[class^=pi-],[class*=" pi-"])::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.33 25.33v-16h-4.67V12h2v13.33h-2V28h6.67v-2.67zM14.67 4h2.67v2.67h-2.67z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.33 25.33v-16h-4.67V12h2v13.33h-2V28h6.67v-2.67zM14.67 4h2.67v2.67h-2.67z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color}.alert-info:has(>post-icon)::before{content:none}.alert-info>post-icon{background-color:#cce4ee}.alert-gray{--post-bg-rgb: 244, 243, 241}.alert-gray:not(.no-icon,[class^=pi-],[class*=" pi-"])::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M31.986 15.73c-.503.16-1.03.27-1.586.27a5.24 5.24 0 0 1-4.43-2.448c-.73.382-1.547.62-2.427.62a5.257 5.257 0 0 1-5.257-5.258c0-.88.237-1.698.62-2.427a5.24 5.24 0 0 1-2.449-4.43c0-.714.145-1.393.403-2.014C16.574.028 16.29 0 16 0 7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16c0-.091-.012-.18-.014-.27M16 30.667c-8.087 0-14.667-6.58-14.667-14.667 0-7.806 6.13-14.207 13.828-14.643a6.54 6.54 0 0 0 2.116 5.56 6.3 6.3 0 0 0-.325 1.997 6.6 6.6 0 0 0 6.59 6.59c.677 0 1.346-.108 1.998-.324a6.54 6.54 0 0 0 5.067 2.15C29.933 24.796 23.639 30.667 16 30.667M11.352 14.17a2.667 2.667 0 1 0-5.333 0 2.667 2.667 0 0 0 5.333 0m-4 0a1.335 1.335 0 1 1 1.334 1.334 1.336 1.336 0 0 1-1.334-1.334m13.981 8.496a2.667 2.667 0 1 0-5.333 0 2.667 2.667 0 0 0 5.333 0m-4 0a1.335 1.335 0 0 1 2.667 0c0 .735-.598 1.333-1.333 1.333a1.335 1.335 0 0 1-1.334-1.333m-7.276-1.829a2 2 0 1 0 0 4 2 2 0 0 0 0-4m0 2.667a.667.667 0 1 1 .002-1.335.667.667 0 0 1-.002 1.335m7.772-6a2 2 0 1 0-4 0 2 2 0 0 0 4 0m-2 .666a.667.667 0 1 1 .001-1.334.667.667 0 0 1-.001 1.334M11.505 5.505a2 2 0 1 0 0 4 2 2 0 0 0 0-4m0 2.666a.667.667 0 1 1 .001-1.334.667.667 0 0 1-.001 1.334M28.93 18.548a13.2 13.2 0 0 1-4.335 7.357.663.663 0 0 1-.94-.073.666.666 0 0 1 .073-.94 11.84 11.84 0 0 0 3.894-6.61.668.668 0 0 1 1.307.266m-6.668 8.212a.667.667 0 0 1-.295.896c-.837.423-1.722.757-2.63.99a.665.665 0 1 1-.33-1.292 11.7 11.7 0 0 0 2.359-.888.67.67 0 0 1 .896.294M4 15.921a.666.666 0 1 1-1.333 0 13.13 13.13 0 0 1 4.597-9.984.666.666 0 1 1 .867 1.013A11.8 11.8 0 0 0 4 15.92'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M31.986 15.73c-.503.16-1.03.27-1.586.27a5.24 5.24 0 0 1-4.43-2.448c-.73.382-1.547.62-2.427.62a5.257 5.257 0 0 1-5.257-5.258c0-.88.237-1.698.62-2.427a5.24 5.24 0 0 1-2.449-4.43c0-.714.145-1.393.403-2.014C16.574.028 16.29 0 16 0 7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16c0-.091-.012-.18-.014-.27M16 30.667c-8.087 0-14.667-6.58-14.667-14.667 0-7.806 6.13-14.207 13.828-14.643a6.54 6.54 0 0 0 2.116 5.56 6.3 6.3 0 0 0-.325 1.997 6.6 6.6 0 0 0 6.59 6.59c.677 0 1.346-.108 1.998-.324a6.54 6.54 0 0 0 5.067 2.15C29.933 24.796 23.639 30.667 16 30.667M11.352 14.17a2.667 2.667 0 1 0-5.333 0 2.667 2.667 0 0 0 5.333 0m-4 0a1.335 1.335 0 1 1 1.334 1.334 1.336 1.336 0 0 1-1.334-1.334m13.981 8.496a2.667 2.667 0 1 0-5.333 0 2.667 2.667 0 0 0 5.333 0m-4 0a1.335 1.335 0 0 1 2.667 0c0 .735-.598 1.333-1.333 1.333a1.335 1.335 0 0 1-1.334-1.333m-7.276-1.829a2 2 0 1 0 0 4 2 2 0 0 0 0-4m0 2.667a.667.667 0 1 1 .002-1.335.667.667 0 0 1-.002 1.335m7.772-6a2 2 0 1 0-4 0 2 2 0 0 0 4 0m-2 .666a.667.667 0 1 1 .001-1.334.667.667 0 0 1-.001 1.334M11.505 5.505a2 2 0 1 0 0 4 2 2 0 0 0 0-4m0 2.666a.667.667 0 1 1 .001-1.334.667.667 0 0 1-.001 1.334M28.93 18.548a13.2 13.2 0 0 1-4.335 7.357.663.663 0 0 1-.94-.073.666.666 0 0 1 .073-.94 11.84 11.84 0 0 0 3.894-6.61.668.668 0 0 1 1.307.266m-6.668 8.212a.667.667 0 0 1-.295.896c-.837.423-1.722.757-2.63.99a.665.665 0 1 1-.33-1.292 11.7 11.7 0 0 0 2.359-.888.67.67 0 0 1 .896.294M4 15.921a.666.666 0 1 1-1.333 0 13.13 13.13 0 0 1 4.597-9.984.666.666 0 1 1 .867 1.013A11.8 11.8 0 0 0 4 15.92'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color}.alert-gray:has(>post-icon)::before{content:none}.alert-gray>post-icon{background-color:#f4f3f1}.alert-notification{--post-bg-rgb: 51, 51, 51}.alert-notification:not(.no-icon,[class^=pi-],[class*=" pi-"])::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30.533 26.933c-3.333-4.8-5.867-12.667-5.867-18.267 0-4.8-3.867-8.667-8.667-8.667S7.332 3.866 7.332 8.666c0 5.6-2.533 13.467-5.867 18.267L1.998 28h11.333v4h5.333v-4h11.333l.533-1.067zm-13.2 3.734h-2.667V28h2.667zm-14.133-4c3.2-5.067 5.467-12.533 5.467-18 0-4 3.333-7.333 7.333-7.333s7.333 3.333 7.333 7.333c0 5.467 2.267 12.933 5.467 18z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30.533 26.933c-3.333-4.8-5.867-12.667-5.867-18.267 0-4.8-3.867-8.667-8.667-8.667S7.332 3.866 7.332 8.666c0 5.6-2.533 13.467-5.867 18.267L1.998 28h11.333v4h5.333v-4h11.333l.533-1.067zm-13.2 3.734h-2.667V28h2.667zm-14.133-4c3.2-5.067 5.467-12.533 5.467-18 0-4 3.333-7.333 7.333-7.333s7.333 3.333 7.333 7.333c0 5.467 2.267 12.933 5.467 18z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color}.alert-notification:has(>post-icon)::before{content:none}.alert-notification>post-icon{background-color:#333}.alert-error{--post-bg-rgb: 165, 23, 40}.alert-error:not(.no-icon,[class^=pi-],[class*=" pi-"])::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.67 4h2.67v18.67h-2.67zm0 21.33h2.67V28h-2.67z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.67 4h2.67v18.67h-2.67zm0 21.33h2.67V28h-2.67z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color}.alert-error:has(>post-icon)::before{content:none}.alert-error>post-icon{background-color:#a51728}

package/components/alert.scss

@@ -1,137 +0,0 @@
-@forward './../variables/options';
-
-@use 'sass:map';
-
-@use './../themes/bootstrap/core' as *;
-
-@use './../mixins/notification' as notification-mx;
-
-@use './../variables/breakpoints';
-@use './../variables/commons';
-@use './../variables/grid';
-@use './../variables/components/close';
-@use './../variables/components/notification';
-
-.alert {
-  @include notification-mx.notification-size(alert);
-
-  &:not(.alert-action) {
-    @include notification-mx.notification-body(alert);
-  }
-}
-
-.alert-heading {
-  @include notification-mx.notification-heading(alert);
-}
-
-.alert-dismissible {
-  @include notification-mx.notification-dismissible(alert);
-}
-
-.alert-action {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: notification.$notification-gap;
-
-  > .alert-content {
-    flex: 1 1 auto;
-    @include notification-mx.notification-body(alert);
-  }
-
-  > .alert-buttons {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-    gap: notification.$notification-buttons-gap;
-  }
-
-  @include media-breakpoint-up(md) {
-    &.alert-dismissible > .btn-close {
-      inset-block-start: calc(50% - #{0.5 * close.$close-size});
-    }
-  }
-
-  @include media-breakpoint-down(md) {
-    flex-direction: column;
-    align-items: stretch;
-    padding-inline: map.get(notification.$notification-padding-x-map, alert);
-
-    > .alert-content {
-      $icon-size: map.get(notification.$notification-icon-size-map, alert);
-
-      padding-inline-start: notification.$notification-gap + $icon-size;
-      padding-inline-end: notification.$notification-gap + close.$close-size;
-    }
-
-    &.no-icon > .alert-content {
-      padding-inline-start: 0;
-    }
-
-    > .alert-buttons {
-      display: flex;
-
-      > .btn,
-      > ::slotted(.btn) {
-        flex: 1 0 0;
-        width: 100%;
-      }
-
-      > .btn:first-child,
-      > ::slotted(.btn:first-child) {
-        margin-inline-start: 0;
-      }
-    }
-  }
-}
-
-.alert-fixed-bottom {
-  position: fixed;
-  inset-block-end: 0;
-  inset-inline-start: 0;
-  inset-inline-end: 0;
-  margin-bottom: 0;
-  border-radius: 0;
-  z-index: commons.$zindex-fixed;
-
-  @include media-breakpoint-up(xxl) {
-    $container-max-width: map.get(breakpoints.$grid-breakpoints, 'xxl') - 1;
-    $container-padding-x: map.get(grid.$grid-container-padding, 'xxl');
-    $alert-padding-x: map.get(notification.$notification-padding-x-map, alert);
-    $alert-icon-size: map.get(notification.$notification-icon-size-map, alert);
-    $fixed-alert-padding-x: '(100% - #{$container-max-width}) / 2 + #{$container-padding-x} + #{$alert-padding-x}';
-
-    padding-inline-end: calc(#{$fixed-alert-padding-x});
-    padding-inline-start: calc(
-      #{$fixed-alert-padding-x} + #{$alert-icon-size} + #{notification.$notification-gap}
-    );
-
-    // for alerts with .pi-* icons (deprecated)
-    background-position-x: calc(#{$fixed-alert-padding-x} + #{0.5 * $alert-icon-size});
-
-    // for alerts with mask-image icons
-    &::before {
-      left: calc(#{$fixed-alert-padding-x});
-    }
-
-    &.no-icon {
-      padding-inline-start: calc(#{$fixed-alert-padding-x});
-    }
-
-    &.alert-dismissible {
-      padding-inline-end: calc(
-        #{$fixed-alert-padding-x} + #{notification.$notification-gap} + #{close.$close-size}
-      );
-
-      > .btn-close {
-        inset-inline-end: calc(#{$fixed-alert-padding-x});
-      }
-    }
-  }
-}
-
-@each $name, $color, $icon in notification.$notification-variants {
-  .alert-#{$name} {
-    @include notification-mx.notification-variant($color, $icon);
-  }
-}

package/components/carousel.css

@@ -1 +0,0 @@
-.carousel{position:relative}.carousel.pointer-event{touch-action:pan-y}.carousel-inner{position:relative;width:100%;overflow:hidden}.carousel-inner::after{display:block;clear:both;content:""}.carousel-item{position:relative;display:none;float:left;width:100%;margin-right:-100%;backface-visibility:hidden;transition:transform .6s ease-in-out}@media(prefers-reduced-motion: reduce){.carousel-item{transition:none}}.carousel-item.active,.carousel-item-next,.carousel-item-prev{display:block}.carousel-item-next:not(.carousel-item-start),.active.carousel-item-end{transform:translateX(100%)}.carousel-item-prev:not(.carousel-item-end),.active.carousel-item-start{transform:translateX(-100%)}.carousel-fade .carousel-item{opacity:0;transition-property:opacity;transform:none}.carousel-fade .carousel-item.active,.carousel-fade .carousel-item-next.carousel-item-start,.carousel-fade .carousel-item-prev.carousel-item-end{z-index:1;opacity:1}.carousel-fade .active.carousel-item-start,.carousel-fade .active.carousel-item-end{z-index:0;opacity:0;transition:opacity 0s .6s}@media(prefers-reduced-motion: reduce){.carousel-fade .active.carousel-item-start,.carousel-fade .active.carousel-item-end{transition:none}}.carousel-control-prev,.carousel-control-next{position:absolute;top:0;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;padding:0;color:#fff;text-align:center;background:none;border:0;opacity:.5;transition:opacity .15s ease}@media(prefers-reduced-motion: reduce){.carousel-control-prev,.carousel-control-next{transition:none}}.carousel-control-prev:hover,.carousel-control-prev:focus,.carousel-control-next:hover,.carousel-control-next:focus{color:#fff;text-decoration:none;outline:0;opacity:.9}.carousel-control-prev{left:0}.carousel-control-next{right:0}.carousel-control-prev-icon,.carousel-control-next-icon{display:inline-block;width:20px;height:20px;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}.carousel-control-prev-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e") /*rtl:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e")*/}.carousel-control-next-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e") /*rtl:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e")*/}.carousel-indicators{position:absolute;right:0;bottom:0;left:0;z-index:2;display:flex;justify-content:center;padding:0;margin-right:15%;margin-bottom:1rem;margin-left:15%}.carousel-indicators [data-bs-target]{box-sizing:content-box;flex:0 1 auto;width:30px;height:3px;padding:0;margin-right:3px;margin-left:3px;text-indent:-999px;cursor:pointer;background-color:#fff;background-clip:padding-box;border:0;border-top:10px solid rgba(0,0,0,0);border-bottom:10px solid rgba(0,0,0,0);opacity:.5;transition:opacity .6s ease}@media(prefers-reduced-motion: reduce){.carousel-indicators [data-bs-target]{transition:none}}.carousel-indicators .active{opacity:1}.carousel-caption{position:absolute;right:15%;bottom:1.25rem;left:15%;padding-top:1.25rem;padding-bottom:1.25rem;color:#fff;text-align:center}.carousel-dark .carousel-control-prev-icon,.carousel-dark .carousel-control-next-icon{filter:invert(1) grayscale(100)}.carousel-dark .carousel-indicators [data-bs-target]{background-color:#000}.carousel-dark .carousel-caption{color:#000}[data-bs-theme=dark] .carousel .carousel-control-prev-icon,[data-bs-theme=dark] .carousel .carousel-control-next-icon,[data-bs-theme=dark].carousel .carousel-control-prev-icon,[data-bs-theme=dark].carousel .carousel-control-next-icon{filter:invert(1) grayscale(100)}[data-bs-theme=dark] .carousel .carousel-indicators [data-bs-target],[data-bs-theme=dark].carousel .carousel-indicators [data-bs-target]{background-color:#000}[data-bs-theme=dark] .carousel .carousel-caption,[data-bs-theme=dark].carousel .carousel-caption{color:#000}.carousel:focus-visible{outline:rgba(0,0,0,0);box-shadow:0 0 0 2px #fff,0 0 0 4px #000,0 0 12px 5px rgba(0,0,0,.24)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.carousel:focus-visible{border-radius:4px;outline:2px solid highlight;outline-offset:.25rem;box-shadow:none}}.carousel-inner{padding-bottom:calc(10% - .5rem)}@media(max-width: 599.98px){.carousel-inner{padding-bottom:1.5rem}}@media(max-width: 779.98px){.carousel-inner{padding-bottom:calc(10% - 1rem)}}.carousel-inner img{aspect-ratio:16/9;object-fit:cover}.carousel-caption{bottom:-5rem;left:0;width:40%;padding:2rem;padding-bottom:5rem;background-color:rgba(0,73,118,.85);color:#fff;text-align:left}@media(min-width: 1024px){.carousel-caption{bottom:-7rem}}@media(max-width: 1023.98px){.carousel-caption{width:50%;padding:1.5rem;padding-bottom:5rem}}@media(max-width: 779.98px){.carousel-caption{width:55%}}@media(max-width: 599.98px){.carousel-caption{position:relative;bottom:0;width:75%;margin-top:-7rem}}@media(max-width: 399.98px){.carousel-caption{width:calc(100% - 2rem);margin-top:-3rem;margin-left:1rem}}.carousel-caption .bold{margin-bottom:0;font-size:1.75rem;font-weight:700}.carousel-caption .subtitle,.carousel-caption .light{font-size:1.75rem;font-weight:300}.carousel-caption::before{content:"";position:absolute;z-index:0;bottom:3rem;left:0;width:192px;border-bottom:10px solid #fc0}@media(max-width: 1023.98px){.carousel-caption::before{bottom:2.5rem}}.caption-right .carousel-caption{right:0;left:auto}.caption-light .carousel-caption{background-color:rgba(250,249,248,.85);color:#000}.carousel-indicators{right:2%;bottom:3.5rem;left:inherit;margin:0;float:right;text-align:right}@media(max-width: 1023.98px){.carousel-indicators{bottom:2rem}}@media(max-width: 599.98px){.carousel-indicators{bottom:1.5rem}}@media(max-width: 399.98px){.carousel-indicators{right:0;bottom:.8rem;left:0}}.caption-right .carousel-indicators{right:auto;left:2%;float:left;text-align:left}.carousel-indicators [data-bs-target]{width:.75rem;height:.75rem;border:1px #000 solid;border-radius:50%;background-color:rgba(0,0,0,0)}.carousel-indicators [data-bs-target]:not(:last-child){margin-right:1rem}.carousel-indicators [data-bs-target].active{border-color:#fc0;background-color:#fc0}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.carousel-indicators [data-bs-target].active{border-color:highlight;background-color:highlight}}.carousel-control-prev,.carousel-control-next{display:none}