@ganpatiinfo/gids-core-web 3.1.0 → 5.0.0

package/dist/css/index.css

@@ -492,6 +492,192 @@ gids-global-styles-start {
   --gidsIcon-color: var(--gids-color-icon-disabled);
 }
 
+.gids-requirements-meter-label {
+  display: flex;
+  align-items: center;
+  gap: var(--gids-gap-100);
+  hyphens: auto;
+  color: var(--gids-color-text-accent-5);
+  --gidsIcon-color: var(--gids-color-icon-accent-5);
+  font-family: var(--gids-typography-paragraph-small__font-family);
+  font-size: var(--gids-typography-paragraph-small__font-size);
+  font-weight: var(--gids-typography-paragraph-small__font-weight);
+  letter-spacing: var(--gids-typography-paragraph-small__letter-spacing);
+  line-height: var(--gids-typography-paragraph-small__line-height);
+  text-transform: var(--gids-typography-paragraph-small__text-transform, inherit);
+  font-variant-caps: var(--gids-typography-paragraph-small__font-variant-caps, inherit);
+}
+.gids-requirements-meter-label--error {
+  color: var(--gids-color-text-accent-1);
+  --gidsIcon-color: var(--gids-color-icon-accent-1);
+}
+.gids-requirements-meter-label--success {
+  color: var(--gids-color-text-accent-3);
+  --gidsIcon-color: var(--gids-color-icon-accent-3);
+}
+.gids-requirements-meter-label--warning {
+  color: var(--gids-color-text-accent-2);
+  --gidsIcon-color: var(--gids-color-icon-accent-2);
+}
+.gids-requirements-meter-label--information {
+  color: var(--gids-color-text-accent-4);
+  --gidsIcon-color: var(--gids-color-icon-accent-4);
+}
+
+.gids-snackbar-container {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: var(--gids-padding-vertical-edge-to-element-200) var(--gids-padding-horizontal-edge-to-element-200);
+  gap: var(--gids-gap-150);
+  border-radius: var(--gids-border-radius-lg);
+  background-color: var(--gids-elevation-surface-overlay-default);
+  box-shadow: var(--gids-elevation-shadow-overlay);
+  hyphens: auto;
+  flex-wrap: wrap;
+}
+.gids-snackbar-container__content {
+  display: flex;
+  flex-grow: 1;
+}
+.gids-snackbar-container__icon {
+  margin-inline-end: var(--gids-padding-horizontal-edge-to-element-150);
+}
+.gids-snackbar-container p {
+  font-family: var(--gids-typography-paragraph-medium__font-family);
+  font-size: var(--gids-typography-paragraph-medium__font-size);
+  font-weight: var(--gids-typography-paragraph-medium__font-weight);
+  letter-spacing: var(--gids-typography-paragraph-medium__letter-spacing);
+  line-height: var(--gids-typography-paragraph-medium__line-height);
+  text-transform: var(--gids-typography-paragraph-medium__text-transform, inherit);
+  font-variant-caps: var(--gids-typography-paragraph-medium__font-variant-caps, inherit);
+  margin: 0;
+  color: var(--gids-color-text-default);
+}
+.gids-snackbar-container--appearance-information {
+  background-color: var(--gids-color-background-accent-4-subtler-default);
+  --gidsIcon-color: var(--gids-color-icon-accent-4);
+}
+.gids-snackbar-container--appearance-warning {
+  background-color: var(--gids-color-background-accent-2-subtler-default);
+  --gidsIcon-color: var(--gids-color-icon-accent-2);
+}
+.gids-snackbar-container--appearance-error {
+  background-color: var(--gids-color-background-accent-1-subtler-default);
+  --gidsIcon-color: var(--gids-color-icon-accent-1);
+}
+.gids-snackbar-container--appearance-success {
+  background-color: var(--gids-color-background-accent-3-subtler-default);
+  --gidsIcon-color: var(--gids-color-icon-accent-3);
+}
+
+.gids-side-menu-item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: var(--gids-padding-vertical-edge-to-element-200) var(--gids-padding-horizontal-edge-to-element-250);
+  gap: var(--gids-gap-100);
+  min-width: var(--gids-width-xs);
+  cursor: pointer;
+  color: var(--gids-color-text-brand);
+  --gidsIcon-color: var(--gids-color-icon-brand);
+  border-radius: var(--gids-border-radius-lg);
+}
+.gids-side-menu-item__label {
+  font-family: var(--gids-typography-label-medium__font-family);
+  font-size: var(--gids-typography-label-medium__font-size);
+  font-weight: var(--gids-typography-label-medium__font-weight);
+  letter-spacing: var(--gids-typography-label-medium__letter-spacing);
+  line-height: var(--gids-typography-label-medium__line-height);
+  text-transform: var(--gids-typography-label-medium__text-transform, inherit);
+  font-variant-caps: var(--gids-typography-label-medium__font-variant-caps, inherit);
+  display: flex;
+  align-self: center;
+  text-align: left;
+  flex: 1;
+}
+.gids-side-menu-item:hover {
+  background-color: var(--gids-color-background-brand-bolder-hovered);
+  color: var(--gids-color-text-inverse);
+  --gidsIcon-color: var(--gids-color-icon-inverse);
+}
+.gids-side-menu-item:active {
+  background-color: var(--gids-color-background-brand-bolder-pressed);
+  color: var(--gids-color-text-inverse);
+  --gidsIcon-color: var(--gids-color-icon-inverse);
+}
+.gids-side-menu-item--default-selected {
+  background-color: var(--gids-color-background-brand-bolder-default);
+  color: var(--gids-color-text-inverse);
+  --gidsIcon-color: var(--gids-color-icon-inverse);
+}
+.gids-side-menu-item--default-selected:hover {
+  background-color: var(--gids-color-background-brand-bolder-hovered);
+  color: var(--gids-color-text-inverse);
+  --gidsIcon-color: var(--gids-color-icon-inverse);
+}
+.gids-side-menu-item--default-selected:active {
+  background-color: var(--gids-color-background-brand-bolder-pressed);
+  color: var(--gids-color-text-inverse);
+  --gidsIcon-color: var(--gids-color-icon-inverse);
+}
+.gids-side-menu-item--inverted-brand {
+  color: var(--gids-color-text-inverse);
+  --gidsIcon-color: var(--gids-color-icon-inverse);
+}
+.gids-side-menu-item--inverted-brand:hover {
+  background-color: var(--gids-color-background-neutral-default);
+  color: var(--gids-color-text-inverse);
+  --gidsIcon-color: var(--gids-color-icon-inverse);
+}
+.gids-side-menu-item--inverted-brand:active {
+  background-color: var(--gids-color-background-neutral-pressed);
+  color: var(--gids-color-text-inverse);
+  --gidsIcon-color: var(--gids-color-icon-inverse);
+}
+.gids-side-menu-item--inverted-brand-selected {
+  background-color: var(--gids-color-background-neutral-hovered);
+  color: var(--gids-color-text-inverse);
+  --gidsIcon-color: var(--gids-color-icon-inverse);
+}
+.gids-side-menu-item--inverted-brand-selected:hover {
+  background-color: var(--gids-color-background-neutral-default);
+  color: var(--gids-color-text-inverse);
+  --gidsIcon-color: var(--gids-color-icon-inverse);
+}
+.gids-side-menu-item--inverted-brand-selected:active {
+  background-color: var(--gids-color-background-neutral-pressed);
+  color: var(--gids-color-text-inverse);
+  --gidsIcon-color: var(--gids-color-icon-inverse);
+}
+.gids-side-menu-item--inverted-scrim {
+  color: var(--gids-color-text-default);
+  --gidsIcon-color: var(--gids-color-icon-default);
+}
+.gids-side-menu-item--inverted-scrim:hover {
+  background-color: var(--gids-color-background-neutral-hovered);
+  color: var(--gids-color-text-inverse);
+  --gidsIcon-color: var(--gids-color-icon-inverse);
+}
+.gids-side-menu-item--inverted-scrim:active {
+  background-color: var(--gids-color-background-neutral-pressed);
+  color: var(--gids-color-text-inverse);
+  --gidsIcon-color: var(--gids-color-icon-inverse);
+}
+.gids-side-menu-item--inverted-scrim-selected {
+  background-color: var(--gids-color-background-neutral-default);
+}
+.gids-side-menu-item--inverted-scrim-selected:hover {
+  background-color: var(--gids-color-background-neutral-hovered);
+  color: var(--gids-color-text-inverse);
+  --gidsIcon-color: var(--gids-color-icon-inverse);
+}
+.gids-side-menu-item--inverted-scrim-selected:active {
+  background-color: var(--gids-color-background-neutral-pressed);
+  color: var(--gids-color-text-inverse);
+  --gidsIcon-color: var(--gids-color-icon-inverse);
+}
+
 /*
 * Components for public
 */
@@ -2085,6 +2271,12 @@ button.gids-input-tag--bold:not(:disabled):active {
   display: flex;
   flex: 1;
 }
+.gids-segmented-tab-item__icons {
+  --gidsIcon-color: var(--gids-color-icon-subtle);
+}
+.gids-segmented-tab-item__selected-icons {
+  --gidsIcon-color: var(--gids-color-icon-selected);
+}
 .gids-segmented-tab-item__label {
   font-family: var(--gids-typography-label-small__font-family);
   font-size: var(--gids-typography-label-small__font-size);
@@ -2112,6 +2304,791 @@ button.gids-input-tag--bold:not(:disabled):active {
   width: var(--gids-width-sm);
 }
 
+.gids-logo__img {
+  display: block;
+  width: 100%;
+}
+.gids-logo__img-height-100 {
+  height: 100px;
+}
+.gids-logo__img-height-120 {
+  height: 120px;
+}
+.gids-logo__img-height-140 {
+  height: 140px;
+}
+.gids-logo__img-height-160 {
+  height: 160px;
+}
+.gids-logo__img-height-180 {
+  height: 180px;
+}
+.gids-logo__img-height-200 {
+  height: 200px;
+}
+.gids-logo__img-height-220 {
+  height: 220px;
+}
+
+.gids-dismiss-button {
+  color: inherit;
+  background-color: transparent;
+  border: none;
+  margin: 0;
+  padding: 0;
+  text-align: inherit;
+  font: inherit;
+  border-radius: 0;
+  appearance: none;
+  outline: 0;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  align-self: flex-start;
+  justify-self: start;
+  border-radius: var(--gids-border-radius-full);
+}
+.gids-dismiss-button:focus-visible {
+  outline: var(--gids-border-width-thick) solid var(--gids-color-border-focused);
+  outline-offset: var(--gids-border-width-thick);
+}
+.gids-dismiss-button {
+  --gidsIcon-color: var(--gids-color-icon-default);
+  --gidsIcon-height: var(--gids-size-160);
+}
+.gids-dismiss-button--bold {
+  --gidsIcon-color: var(--gids-color-icon-inverse);
+}
+.gids-dismiss-button--sm {
+  --gidsIcon-height: var(--gids-size-120);
+}
+.gids-dismiss-button--lg {
+  --gidsIcon-height: var(--gids-size-240);
+}
+.gids-dismiss-button:not(:disabled):hover {
+  background-color: var(--gids-color-background-neutral-subtle-hovered);
+}
+.gids-dismiss-button:not(:disabled):active {
+  background-color: var(--gids-color-background-neutral-subtle-pressed);
+}
+.gids-dismiss-button:disabled .gids-icon {
+  --gidsIcon-color: var(--gids-color-icon-disabled);
+}
+.gids-dismiss-button:disabled {
+  cursor: default;
+}
+
+gids-input {
+  --gidsIcon-height: var(--gids-size-240);
+  display: flex;
+  align-items: center;
+  gap: var(--gids-gap-100);
+  padding: var(--gids-padding-vertical-edge-to-element-100) var(--gids-padding-horizontal-edge-to-element-100);
+  border: none;
+  border-radius: var(--gidsInput-border-radius, var(--gids-border-radius-md));
+}
+gids-input:not([disabled]) {
+  cursor: text;
+}
+gids-input .gids-input__control {
+  font-family: var(--gids-typography-paragraph-medium__font-family);
+  font-size: var(--gids-typography-paragraph-medium__font-size);
+  font-weight: var(--gids-typography-paragraph-medium__font-weight);
+  letter-spacing: var(--gids-typography-paragraph-medium__letter-spacing);
+  line-height: var(--gids-typography-paragraph-medium__line-height);
+  text-transform: var(--gids-typography-paragraph-medium__text-transform, inherit);
+  font-variant-caps: var(--gids-typography-paragraph-medium__font-variant-caps, inherit);
+  border: none;
+  outline: none;
+  background-color: transparent;
+  flex: 1;
+  min-width: 0;
+  padding: 0;
+  color: var(--gids-color-text-default);
+}
+gids-input .gids-input__control::placeholder {
+  color: var(--gids-color-text-subtlest);
+}
+gids-input .gids-input__control:focus {
+  outline: none;
+}
+gids-input .gids-input__control::-webkit-search-cancel-button {
+  display: none;
+}
+gids-input[appearance=default], gids-input:not([appearance]) {
+  background-color: var(--gids-color-background-input-default);
+  outline: var(--gids-border-width-thin) solid var(--gids-color-border-input);
+  outline-offset: calc(-1 * var(--gids-border-width-thin));
+}
+gids-input[appearance=default]:hover:not(:has(input:disabled)):not(:has(input:read-only)), gids-input:not([appearance]):hover:not(:has(input:disabled)):not(:has(input:read-only)) {
+  background-color: var(--gids-color-background-input-hovered);
+}
+gids-input[appearance=default]:focus-within, gids-input:not([appearance]):focus-within {
+  background-color: var(--gids-color-background-input-pressed);
+  outline: var(--gids-border-width-thick) solid var(--gids-color-border-input);
+  outline-offset: calc(-1 * var(--gids-border-width-thick));
+}
+gids-input[appearance=default]:has(input:read-only), gids-input:not([appearance]):has(input:read-only) {
+  background-color: var(--gids-color-background-disabled);
+  outline-color: var(--gids-color-border-disabled);
+}
+gids-input[appearance=default]:has(input:read-only) .gids-input__control, gids-input:not([appearance]):has(input:read-only) .gids-input__control {
+  color: var(--gids-color-text-default);
+}
+gids-input[appearance=default]:has(input:disabled), gids-input:not([appearance]):has(input:disabled) {
+  background-color: var(--gids-color-background-disabled);
+  outline-color: var(--gids-color-border-disabled);
+}
+gids-input[appearance=default]:has(input:disabled) .gids-input__control, gids-input:not([appearance]):has(input:disabled) .gids-input__control {
+  color: var(--gids-color-text-disabled);
+}
+gids-input[appearance=subtle] {
+  background-color: transparent;
+  outline: var(--gids-border-width-thin) solid transparent;
+  outline-offset: calc(-1 * var(--gids-border-width-thin));
+}
+gids-input[appearance=subtle]:hover:not(:has(input:disabled)):not(:has(input:read-only)):not(:focus-within) {
+  background-color: var(--gids-color-background-input-hovered);
+  outline-color: var(--gids-color-border-input);
+}
+gids-input[appearance=subtle]:focus-within {
+  background-color: var(--gids-color-background-input-default);
+  outline: var(--gids-border-width-thick) solid var(--gids-color-border-input);
+  outline-offset: calc(-1 * var(--gids-border-width-thick));
+}
+gids-input[appearance=subtle]:has(input:read-only) .gids-input__control {
+  color: var(--gids-color-text-default);
+}
+gids-input[appearance=subtle]:has(input:disabled) .gids-input__control {
+  color: var(--gids-color-text-disabled);
+}
+gids-input[appearance=none] {
+  background-color: transparent;
+  outline: var(--gids-border-width-thin) solid transparent;
+  outline-offset: calc(-1 * var(--gids-border-width-thin));
+}
+gids-input[appearance=none]:focus-within {
+  outline: none;
+}
+gids-input[appearance=none]:has(input:read-only) .gids-input__control {
+  color: var(--gids-color-text-default);
+}
+gids-input[appearance=none]:has(input:disabled) .gids-input__control {
+  color: var(--gids-color-text-disabled);
+}
+gids-input:not([status]):has(:user-invalid), gids-input[status=implicit]:has(:user-invalid), gids-input[status=error] {
+  outline-color: var(--gids-color-border-danger);
+  outline: var(--gids-border-width-thick) solid var(--gids-color-border-danger);
+  outline-offset: calc(-1 * var(--gids-border-width-thick));
+}
+gids-input:not([status]):has(:user-invalid).gids-input--none, gids-input[status=implicit]:has(:user-invalid).gids-input--none, gids-input[status=error].gids-input--none {
+  outline: none;
+}
+gids-input[status=success] {
+  outline-color: var(--gids-color-border-positive);
+  outline: var(--gids-border-width-thick) solid var(--gids-color-border-positive);
+  outline-offset: calc(-1 * var(--gids-border-width-thick));
+}
+gids-input[status=success].gids-input--none {
+  outline: none;
+}
+gids-input .gids-input__label {
+  font-family: var(--gids-typography-paragraph-medium__font-family);
+  font-size: var(--gids-typography-paragraph-medium__font-size);
+  font-weight: var(--gids-typography-paragraph-medium__font-weight);
+  letter-spacing: var(--gids-typography-paragraph-medium__letter-spacing);
+  line-height: var(--gids-typography-paragraph-medium__line-height);
+  text-transform: var(--gids-typography-paragraph-medium__text-transform, inherit);
+  font-variant-caps: var(--gids-typography-paragraph-medium__font-variant-caps, inherit);
+  color: var(--gids-color-text-subtle);
+}
+gids-input {
+  --gidsIcon-color: var(--gids-color-icon-default);
+}
+gids-input:has(input:disabled) {
+  --gidsIcon-color: var(--gids-color-icon-disabled);
+}
+gids-input .gids-input__warning-icon {
+  --gidsIcon-color: var(--gids-color-icon-warning);
+}
+gids-input .gids-input__positive-icon {
+  --gidsIcon-color: var(--gids-color-icon-positive);
+}
+
+gids-password-field {
+  display: block;
+}
+gids-password-field .gids-password-field__trailing-accessory {
+  display: flex;
+  align-items: center;
+  gap: var(--gids-gap-100);
+}
+gids-password-field .gids-password-field__meters-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gids-gap-200);
+  padding-top: var(--gids-padding-vertical-edge-to-element-200);
+}
+
+gids-field {
+  display: block;
+}
+
+.gids-search-bar gids-input {
+  --gidsInput-border-radius: var(--gids-border-radius-full);
+}
+
+.gids-top-navigation {
+  display: flex;
+  min-height: 72px;
+  padding: var(--gids-padding-vertical-edge-to-element-150) var(--gids-padding-horizontal-edge-to-element-200);
+  align-items: center;
+  align-content: center;
+  justify-content: space-between;
+  gap: var(--gids-gap-100);
+  flex: 1 1 0;
+  background-color: var(--gids-color-background-canvas);
+  flex-wrap: wrap;
+}
+.gids-top-navigation__left-content {
+  display: flex;
+  min-width: 210px;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--gids-padding-horizontal-edge-to-element-200);
+  flex: 1 0 0;
+}
+.gids-top-navigation__middle-content {
+  display: flex;
+  min-width: var(--gids-width-2-xs);
+  padding: var(--gids-padding-vertical-edge-to-element-0) var(--gids-padding-horizontal-edge-to-element-100);
+  align-items: center;
+  justify-content: center;
+  gap: var(--gids-gap-100);
+  flex: 1 0 0;
+  /* Target the search bar child element */
+}
+.gids-top-navigation__middle-content > .gids-search-bar {
+  width: 100%;
+  max-width: 100%; /* Prevents it from overflowing */
+}
+.gids-top-navigation__right-content {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--gids-gap-100);
+  flex: 1 0 0;
+}
+
+.gids-strength-meter {
+  display: flex;
+  gap: var(--gids-gap-050);
+}
+.gids-strength-meter > div[class*=gids-strength-meter__strength-] {
+  flex: 1;
+  height: 4px;
+  border-radius: var(--gids-border-radius-sm);
+  background-color: var(--gids-color-background-accent-5-subtler-default);
+  box-shadow: var(--gids-elevation-shadow-raised);
+  transition: background-color 0.3s ease-in-out;
+}
+.gids-strength-meter > div[class*=gids-strength-meter__strength-].is-active.is-weak {
+  background-color: var(--gids-color-background-accent-1-subtle-default);
+}
+.gids-strength-meter > div[class*=gids-strength-meter__strength-].is-active.is-medium {
+  background-color: var(--gids-color-background-accent-2-subtle-default);
+}
+.gids-strength-meter > div[class*=gids-strength-meter__strength-].is-active.is-good-enough {
+  background-color: var(--gids-color-background-accent-4-subtler-default);
+}
+.gids-strength-meter > div[class*=gids-strength-meter__strength-].is-active.is-good {
+  background-color: var(--gids-color-background-accent-4-subtle-default);
+}
+.gids-strength-meter > div[class*=gids-strength-meter__strength-].is-active.is-strong {
+  background-color: var(--gids-color-background-accent-3-bolder-default);
+}
+
+.gids-requirements-meter {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gids-gap-150);
+}
+
+.gids-stepper {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  gap: var(--gids-gap-150);
+}
+.gids-stepper__label {
+  font-family: var(--gids-typography-paragraph-medium__font-family);
+  font-size: var(--gids-typography-paragraph-medium__font-size);
+  font-weight: var(--gids-typography-paragraph-medium__font-weight);
+  letter-spacing: var(--gids-typography-paragraph-medium__letter-spacing);
+  line-height: var(--gids-typography-paragraph-medium__line-height);
+  text-transform: var(--gids-typography-paragraph-medium__text-transform, inherit);
+  font-variant-caps: var(--gids-typography-paragraph-medium__font-variant-caps, inherit);
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  line-clamp: 1;
+  overflow: auto;
+  color: var(--gids-color-text-default);
+}
+.gids-stepper__label-disabled {
+  color: var(--gids-color-text-disabled);
+}
+
+.gids-status-tag {
+  display: inline-flex;
+  align-items: center;
+  border-radius: var(--gids-border-radius-sm);
+  border-width: 0;
+  border-style: none;
+  border-color: transparent;
+  background-color: transparent;
+  font-family: var(--gids-typography-label-small__font-family);
+  font-size: var(--gids-typography-label-small__font-size);
+  font-weight: var(--gids-typography-label-small__font-weight);
+  letter-spacing: var(--gids-typography-label-small__letter-spacing);
+  line-height: var(--gids-typography-label-small__line-height);
+  text-transform: var(--gids-typography-label-small__text-transform, inherit);
+  font-variant-caps: var(--gids-typography-label-small__font-variant-caps, inherit);
+  --gidsIcon-height: var(--gids-size-160);
+  min-height: var(--gids-size-240);
+  padding: 0 var(--gids-padding-horizontal-edge-to-element-075);
+  gap: var(--gids-gap-100);
+}
+.gids-status-tag--xs {
+  font-family: var(--gids-typography-label-x-small__font-family);
+  font-size: var(--gids-typography-label-x-small__font-size);
+  font-weight: var(--gids-typography-label-x-small__font-weight);
+  letter-spacing: var(--gids-typography-label-x-small__letter-spacing);
+  line-height: var(--gids-typography-label-x-small__line-height);
+  text-transform: var(--gids-typography-label-x-small__text-transform, inherit);
+  font-variant-caps: var(--gids-typography-label-x-small__font-variant-caps, inherit);
+  --gidsIcon-height: var(--gids-size-120);
+  min-height: var(--gids-size-200);
+  padding: 0 var(--gids-padding-horizontal-edge-to-element-050);
+  gap: var(--gids-gap-050);
+}
+.gids-status-tag--md {
+  font-family: var(--gids-typography-label-medium__font-family);
+  font-size: var(--gids-typography-label-medium__font-size);
+  font-weight: var(--gids-typography-label-medium__font-weight);
+  letter-spacing: var(--gids-typography-label-medium__letter-spacing);
+  line-height: var(--gids-typography-label-medium__line-height);
+  text-transform: var(--gids-typography-label-medium__text-transform, inherit);
+  font-variant-caps: var(--gids-typography-label-medium__font-variant-caps, inherit);
+  --gidsIcon-height: var(--gids-size-160);
+  min-height: var(--gids-size-320);
+  padding: 0 var(--gids-padding-horizontal-edge-to-element-100);
+  gap: var(--gids-gap-100);
+}
+.gids-status-tag--lg {
+  font-family: var(--gids-typography-label-large__font-family);
+  font-size: var(--gids-typography-label-large__font-size);
+  font-weight: var(--gids-typography-label-large__font-weight);
+  letter-spacing: var(--gids-typography-label-large__letter-spacing);
+  line-height: var(--gids-typography-label-large__line-height);
+  text-transform: var(--gids-typography-label-large__text-transform, inherit);
+  font-variant-caps: var(--gids-typography-label-large__font-variant-caps, inherit);
+  --gidsIcon-height: var(--gids-size-240);
+  min-height: var(--gids-size-400);
+  padding: 0 var(--gids-padding-horizontal-edge-to-element-150);
+  gap: var(--gids-gap-150);
+}
+.gids-status-tag--subtle {
+  border-width: var(--gids-border-width-thin);
+  border-style: solid;
+}
+.gids-status-tag--bold {
+  --gidsIcon-color: var(--gids-color-icon-inverse);
+  color: var(--gids-color-text-inverse);
+}
+.gids-status-tag--subtlest-new {
+  --gidsIcon-color: var(--gids-color-icon-information);
+  color: var(--gids-color-text-information);
+}
+.gids-status-tag--subtlest-archived {
+  --gidsIcon-color: var(--gids-color-icon-accent-5);
+  color: var(--gids-color-text-accent-5);
+}
+.gids-status-tag--subtlest-cancelled {
+  --gidsIcon-color: var(--gids-color-icon-danger);
+  color: var(--gids-color-text-danger);
+}
+.gids-status-tag--subtlest-draft {
+  --gidsIcon-color: var(--gids-color-icon-information);
+  color: var(--gids-color-text-information);
+}
+.gids-status-tag--subtlest-failed {
+  --gidsIcon-color: var(--gids-color-icon-danger);
+  color: var(--gids-color-text-danger);
+}
+.gids-status-tag--subtlest-in-progress {
+  --gidsIcon-color: var(--gids-color-icon-information);
+  color: var(--gids-color-text-information);
+}
+.gids-status-tag--subtlest-information {
+  --gidsIcon-color: var(--gids-color-icon-information);
+  color: var(--gids-color-text-information);
+}
+.gids-status-tag--subtlest-not-started {
+  --gidsIcon-color: var(--gids-color-icon-subtle);
+  color: var(--gids-color-text-subtle);
+}
+.gids-status-tag--subtlest-paused {
+  --gidsIcon-color: var(--gids-color-icon-subtle);
+  color: var(--gids-color-text-subtle);
+}
+.gids-status-tag--subtlest-pending {
+  --gidsIcon-color: var(--gids-color-icon-subtle);
+  color: var(--gids-color-text-subtle);
+}
+.gids-status-tag--subtlest-scheduled {
+  --gidsIcon-color: var(--gids-color-icon-subtle);
+  color: var(--gids-color-text-subtle);
+}
+.gids-status-tag--subtlest-success {
+  --gidsIcon-color: var(--gids-color-icon-positive);
+  color: var(--gids-color-text-positive);
+}
+.gids-status-tag--subtlest-synced {
+  --gidsIcon-color: var(--gids-color-icon-positive);
+  color: var(--gids-color-text-positive);
+}
+.gids-status-tag--subtlest-syncing {
+  --gidsIcon-color: var(--gids-color-icon-information);
+  color: var(--gids-color-text-information);
+}
+.gids-status-tag--subtlest-unknown {
+  --gidsIcon-color: var(--gids-color-icon-subtle);
+  color: var(--gids-color-text-subtle);
+}
+.gids-status-tag--subtlest-verified {
+  --gidsIcon-color: var(--gids-color-icon-positive);
+  color: var(--gids-color-text-positive);
+}
+.gids-status-tag--subtlest-warning {
+  --gidsIcon-color: var(--gids-color-icon-warning);
+  color: var(--gids-color-text-warning);
+}
+.gids-status-tag--subtle-new {
+  border-color: var(--gids-color-border-information);
+  background-color: var(--gids-color-background-information-default);
+  --gidsIcon-color: var(--gids-color-icon-information);
+  color: var(--gids-color-text-information);
+}
+.gids-status-tag--subtle-archived {
+  border-color: var(--gids-color-border-accent-9);
+  background-color: var(--gids-color-background-accent-5-subtler-default);
+  --gidsIcon-color: var(--gids-color-icon-accent-5);
+  color: var(--gids-color-text-accent-5);
+}
+.gids-status-tag--subtle-cancelled {
+  border-color: var(--gids-color-border-danger);
+  background-color: var(--gids-color-background-danger-default);
+  --gidsIcon-color: var(--gids-color-icon-danger);
+  color: var(--gids-color-text-danger);
+}
+.gids-status-tag--subtle-draft {
+  border-color: var(--gids-color-border-information);
+  background-color: var(--gids-color-background-information-default);
+  --gidsIcon-color: var(--gids-color-icon-information);
+  color: var(--gids-color-text-information);
+}
+.gids-status-tag--subtle-failed {
+  border-color: var(--gids-color-border-danger);
+  background-color: var(--gids-color-background-danger-default);
+  --gidsIcon-color: var(--gids-color-icon-danger);
+  color: var(--gids-color-text-danger);
+}
+.gids-status-tag--subtle-in-progress {
+  border-color: var(--gids-color-border-information);
+  background-color: var(--gids-color-background-information-default);
+  --gidsIcon-color: var(--gids-color-icon-information);
+  color: var(--gids-color-text-information);
+}
+.gids-status-tag--subtle-information {
+  border-color: var(--gids-color-border-information);
+  background-color: var(--gids-color-background-information-default);
+  --gidsIcon-color: var(--gids-color-icon-information);
+  color: var(--gids-color-text-information);
+}
+.gids-status-tag--subtle-not-started {
+  border-color: var(--gids-color-border-default);
+  background-color: var(--gids-color-background-neutral-default);
+  --gidsIcon-color: var(--gids-color-icon-subtle);
+  color: var(--gids-color-text-subtle);
+}
+.gids-status-tag--subtle-paused {
+  border-color: var(--gids-color-border-default);
+  background-color: var(--gids-color-background-neutral-default);
+  --gidsIcon-color: var(--gids-color-icon-subtle);
+  color: var(--gids-color-text-subtle);
+}
+.gids-status-tag--subtle-pending {
+  border-color: var(--gids-color-border-default);
+  background-color: var(--gids-color-background-neutral-default);
+  --gidsIcon-color: var(--gids-color-icon-subtle);
+  color: var(--gids-color-text-subtle);
+}
+.gids-status-tag--subtle-scheduled {
+  border-color: var(--gids-color-border-default);
+  background-color: var(--gids-color-background-neutral-default);
+  --gidsIcon-color: var(--gids-color-icon-subtle);
+  color: var(--gids-color-text-subtle);
+}
+.gids-status-tag--subtle-success {
+  border-color: var(--gids-color-border-positive);
+  background-color: var(--gids-color-background-positive-default);
+  --gidsIcon-color: var(--gids-color-icon-positive);
+  color: var(--gids-color-text-positive);
+}
+.gids-status-tag--subtle-synced {
+  border-color: var(--gids-color-border-positive);
+  background-color: var(--gids-color-background-positive-default);
+  --gidsIcon-color: var(--gids-color-icon-positive);
+  color: var(--gids-color-text-positive);
+}
+.gids-status-tag--subtle-syncing {
+  border-color: var(--gids-color-border-information);
+  background-color: var(--gids-color-background-information-default);
+  --gidsIcon-color: var(--gids-color-icon-information);
+  color: var(--gids-color-text-information);
+}
+.gids-status-tag--subtle-unknown {
+  border-color: var(--gids-color-border-default);
+  background-color: var(--gids-color-background-neutral-default);
+  --gidsIcon-color: var(--gids-color-icon-subtle);
+  color: var(--gids-color-text-subtle);
+}
+.gids-status-tag--subtle-verified {
+  border-color: var(--gids-color-border-positive);
+  background-color: var(--gids-color-background-positive-default);
+  --gidsIcon-color: var(--gids-color-icon-positive);
+  color: var(--gids-color-text-positive);
+}
+.gids-status-tag--subtle-warning {
+  border-color: var(--gids-color-border-warning);
+  background-color: var(--gids-color-background-warning-default);
+  --gidsIcon-color: var(--gids-color-icon-warning);
+  color: var(--gids-color-text-warning);
+}
+.gids-status-tag--bold-new {
+  background-color: var(--gids-color-background-information-bold-default);
+}
+.gids-status-tag--bold-archived {
+  background-color: var(--gids-color-background-accent-5-bolder-default);
+}
+.gids-status-tag--bold-cancelled {
+  background-color: var(--gids-color-background-danger-bold-default);
+}
+.gids-status-tag--bold-draft {
+  background-color: var(--gids-color-background-information-bold-default);
+}
+.gids-status-tag--bold-failed {
+  background-color: var(--gids-color-background-danger-bold-default);
+}
+.gids-status-tag--bold-in-progress {
+  background-color: var(--gids-color-background-information-bold-default);
+}
+.gids-status-tag--bold-information {
+  background-color: var(--gids-color-background-information-bold-default);
+}
+.gids-status-tag--bold-not-started {
+  background-color: var(--gids-color-background-neutral-bold-default);
+}
+.gids-status-tag--bold-paused {
+  background-color: var(--gids-color-background-neutral-bold-default);
+}
+.gids-status-tag--bold-pending {
+  background-color: var(--gids-color-background-neutral-bold-default);
+}
+.gids-status-tag--bold-scheduled {
+  background-color: var(--gids-color-background-neutral-bold-default);
+}
+.gids-status-tag--bold-success {
+  background-color: var(--gids-color-background-positive-bold-default);
+}
+.gids-status-tag--bold-synced {
+  background-color: var(--gids-color-background-positive-bold-default);
+}
+.gids-status-tag--bold-syncing {
+  background-color: var(--gids-color-background-information-bold-default);
+}
+.gids-status-tag--bold-unknown {
+  background-color: var(--gids-color-background-neutral-bold-default);
+}
+.gids-status-tag--bold-verified {
+  background-color: var(--gids-color-background-positive-bold-default);
+}
+.gids-status-tag--bold-warning {
+  background-color: var(--gids-color-background-warning-bold-default);
+}
+
+.gids-heading {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--gids-gap-200);
+}
+.gids-heading__content-container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1 0 0;
+}
+.gids-heading__heading-text-section {
+  font-family: var(--gids-typography-heading-medium__font-family);
+  font-size: var(--gids-typography-heading-medium__font-size);
+  font-weight: var(--gids-typography-heading-medium__font-weight);
+  letter-spacing: var(--gids-typography-heading-medium__letter-spacing);
+  line-height: var(--gids-typography-heading-medium__line-height);
+  text-transform: var(--gids-typography-heading-medium__text-transform, inherit);
+  font-variant-caps: var(--gids-typography-heading-medium__font-variant-caps, inherit);
+  color: var(--gids-color-text-default);
+}
+.gids-heading__heading-text-group {
+  font-family: var(--gids-typography-heading-small__font-family);
+  font-size: var(--gids-typography-heading-small__font-size);
+  font-weight: var(--gids-typography-heading-small__font-weight);
+  letter-spacing: var(--gids-typography-heading-small__letter-spacing);
+  line-height: var(--gids-typography-heading-small__line-height);
+  text-transform: var(--gids-typography-heading-small__text-transform, inherit);
+  font-variant-caps: var(--gids-typography-heading-small__font-variant-caps, inherit);
+  color: var(--gids-color-text-subtle);
+}
+.gids-heading__supporting-text-section {
+  font-family: var(--gids-typography-paragraph-medium__font-family);
+  font-size: var(--gids-typography-paragraph-medium__font-size);
+  font-weight: var(--gids-typography-paragraph-medium__font-weight);
+  letter-spacing: var(--gids-typography-paragraph-medium__letter-spacing);
+  line-height: var(--gids-typography-paragraph-medium__line-height);
+  text-transform: var(--gids-typography-paragraph-medium__text-transform, inherit);
+  font-variant-caps: var(--gids-typography-paragraph-medium__font-variant-caps, inherit);
+  color: var(--gids-color-text-subtlest);
+}
+.gids-heading__supporting-text-group {
+  font-family: var(--gids-typography-paragraph-small__font-family);
+  font-size: var(--gids-typography-paragraph-small__font-size);
+  font-weight: var(--gids-typography-paragraph-small__font-weight);
+  letter-spacing: var(--gids-typography-paragraph-small__letter-spacing);
+  line-height: var(--gids-typography-paragraph-small__line-height);
+  text-transform: var(--gids-typography-paragraph-small__text-transform, inherit);
+  font-variant-caps: var(--gids-typography-paragraph-small__font-variant-caps, inherit);
+  color: var(--gids-color-text-subtlest);
+}
+
+gids-overlay-provider {
+  display: contents;
+  z-index: 1000;
+}
+
+.gids-notification-container {
+  display: flex;
+  max-width: var(--gids-width-md);
+  padding: var(--gids-padding-vertical-edge-to-element-200) var(--gids-padding-horizontal-edge-to-element-200);
+  align-items: flex-start;
+  gap: var(--gids-gap-150);
+  align-self: stretch;
+  border-radius: var(--gids-border-radius-lg);
+  background-color: var(--gids-elevation-surface-overlay-default);
+  box-shadow: var(--gids-elevation-shadow-overlay);
+}
+.gids-notification-container__leading-icon-wrapper {
+  display: flex;
+  padding: var(--gids-padding-vertical-edge-to-element-025);
+  align-items: flex-start;
+}
+.gids-notification-container__content-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gids-gap-200);
+  flex: 1 0 0;
+}
+.gids-notification-container__top-content {
+  display: flex;
+}
+.gids-notification-container__text-content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  align-items: flex-start;
+  gap: var(--gids-gap-025);
+  align-self: stretch;
+  padding-right: var(--gids-padding-horizontal-edge-to-element-400);
+}
+.gids-notification-container__title {
+  font-family: var(--gids-typography-heading-x-small__font-family);
+  font-size: var(--gids-typography-heading-x-small__font-size);
+  font-weight: var(--gids-typography-heading-x-small__font-weight);
+  letter-spacing: var(--gids-typography-heading-x-small__letter-spacing);
+  line-height: var(--gids-typography-heading-x-small__line-height);
+  text-transform: var(--gids-typography-heading-x-small__text-transform, inherit);
+  font-variant-caps: var(--gids-typography-heading-x-small__font-variant-caps, inherit);
+  display: flex;
+  flex: 1;
+  color: var(--gids-color-text-default);
+}
+.gids-notification-container p {
+  margin: 0;
+  padding: 0;
+  font-family: var(--gids-typography-paragraph-medium__font-family);
+  font-size: var(--gids-typography-paragraph-medium__font-size);
+  font-weight: var(--gids-typography-paragraph-medium__font-weight);
+  letter-spacing: var(--gids-typography-paragraph-medium__letter-spacing);
+  line-height: var(--gids-typography-paragraph-medium__line-height);
+  text-transform: var(--gids-typography-paragraph-medium__text-transform, inherit);
+  font-variant-caps: var(--gids-typography-paragraph-medium__font-variant-caps, inherit);
+  color: var(--gids-color-text-default);
+}
+.gids-notification-container__cross-btn-wrapper {
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-start;
+}
+.gids-notification-container__bottom-content {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: var(--gids-gap-150);
+  align-self: stretch;
+}
+.gids-notification-container--appearance-information {
+  background-color: var(--gids-color-background-accent-4-subtler-default);
+  --gidsIcon-color: var(--gids-color-icon-accent-4);
+}
+.gids-notification-container--appearance-warning {
+  background-color: var(--gids-color-background-accent-2-subtler-default);
+  --gidsIcon-color: var(--gids-color-icon-accent-2);
+}
+.gids-notification-container--appearance-error {
+  background-color: var(--gids-color-background-accent-1-subtler-default);
+  --gidsIcon-color: var(--gids-color-icon-accent-1);
+}
+.gids-notification-container--appearance-success {
+  background-color: var(--gids-color-background-accent-3-subtler-default);
+  --gidsIcon-color: var(--gids-color-icon-accent-3);
+}
+
+.gids-scrim {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--gids-color-background-scrim);
+  height: 100vh !important;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1001;
+  align-items: center;
+  justify-content: center;
+  backdrop-filter: blur(calc(var(24px) / 2));
+}
+
 .gids-box-demo__container-with-text {
   border: 1px dashed var(--gids-color-border-brand-default);
 }