@prokodo/ui 0.0.40 → 0.0.42

package/dist/ui.css

@@ -1554,8 +1554,9 @@ html[data-theme=dark] .prokodo-Button--icon-only {
   background: none;
 }
 .prokodo-Button--has-fullWidth {
-  width: 100%;
+  display: flex;
   justify-content: center;
+  width: 100%;
 }
 .prokodo-Button--is-disabled {
   cursor: default;
@@ -3303,7 +3304,7 @@ html[data-theme=dark] .prokodo-Card__background {
   border-color: var(--color-grey-500);
   color: var(--color-black);
   font-weight: 500;
-  font-size: 1.5rem;
+  font-size: 1.125rem;
   font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   font-style: normal;
   line-height: 1.55;
@@ -3944,7 +3945,7 @@ html[data-theme=dark] .prokodo-Input__helperText {
   font-weight: 400;
   display: block;
   font-weight: 500;
-  font-size: 1.5rem;
+  font-size: 1.125rem;
   font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   font-style: normal;
   line-height: 1.55;
@@ -4209,6 +4210,43 @@ html[data-theme=dark] .prokodo-Label__text {
   justify-content: space-between;
   padding-bottom: 1rem;
 }
+.prokodo-Dialog__header__button {
+  display: flex;
+  align-items: center;
+  border: none;
+  background: none;
+  color: var(--color-grey-900);
+  cursor: pointer;
+  font-weight: 400;
+  font-size: 1rem;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.45;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Dialog__header__button {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Dialog__header__button {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+.prokodo-Dialog__header__button__icon {
+  margin-right: 0.25rem;
+}
+.prokodo-Dialog__header__button:focus {
+  outline: 3px solid #1E90FF;
+  outline-offset: 4px;
+  border-radius: 1.5rem;
+}
 .prokodo-Dialog__close {
   display: flex;
   align-items: center;
@@ -4632,6 +4670,223 @@ html[data-theme=dark] .prokodo-Label__text {
   padding: 1rem;
   overflow-y: auto;
   max-height: calc(100% - 3rem);
+}
+/* stylelint-disable */
+/**
+ * Calculates a rem-based value by a given pixel size.
+ */
+/* stylelint-disable */
+/**
+ * Gradient move, mainly for text
+ */
+@keyframes gradientMove {
+  from {
+    background-position: 0% 50%;
+  }
+  to {
+    background-position: 100% 50%;
+  }
+}
+/**
+ * Fade in
+ */
+@keyframes fadeInKeyframe {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+/* stylelint-disable */
+/**
+ * Applies flex-column and gap.
+ */
+/*
+    As example (light, primary)
+    See defined modes in designsystem/config/gradients
+*/
+/**
+ * Mixin that renders a media query that target screens that are larger than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens that are smaller than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens in between the given range.
+ */
+/**
+ * Mixin that renders a media query that target screens that have height larger than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens that have height smaller than the
+ * given size.
+ */
+/* stylelint-disable */
+/* M3/Elevation Light/1 */
+/* M3/Elevation Light/2 */
+/* M3/Elevation/5 */
+/* M3/Elevation/1 Text */
+/* Inner elevations */
+/* stylelint-disable */
+/**
+ * Visually hides an element but not removes them for screen readers.
+ */
+/**
+ * The inverse of the `hidden` helper to reset a previously hidden element to be
+ * visible for users.
+ */
+/**
+ * Creates a selector for :hover effects depending on the current user input
+ * device. If the input device is a mouse, this hover effect will appear.
+ * Keyboard and touch inputs are ignored.
+ *
+ * Example usage:
+ * .link {
+ *   color: blue;
+ *
+ *   @include when-hovered() {
+ *     color: green;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :active effects depending on the current user input
+ * device. The state applies when the input device is a mouse or keyboard. Touch
+ * devices will not show a pressed state.
+ *
+ * Example usage:
+ * .link {
+ *   box-shadow: none;
+ *
+ *   @include when-pressed() {
+ *     box-shadow: inset 0 2px 4px grey;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :focus effects depending on the current user input
+ * device. When the user navigates using a keyboard, the focus effect defined in
+ * here is applied. For other input devices they don't show up.
+ *
+ * Example usage:
+ * .link {
+ *   text-decoration: none;
+ *
+ *   @include when-focused() {
+ *     text-decoration: underline;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :focus-within effects depending on the current user
+ * input device. When the user navigates using a keyboard, the focus effect
+ * defined in here is applied. For other input devices they don't show up.
+ *
+ * Example usage:
+ * .link {
+ *   img {
+ *     opacity: 0.75;
+ *
+ *     @include when-focused-within() {
+ *       opacity: 1;
+ *     }
+ *   }
+ * }
+ */
+/**
+ * Wrapper for media query "prefers-reduced-motion".
+ */
+/**
+ * This helper hides the outline but still makes it visible for
+ * Windows high-contrast users. Use this instead of `outline: 0;`.
+ */
+/**
+ * This helper hides the outline but still makes it visible for
+ * Windows high-contrast users. Use this instead of `outline: 0;`.
+ */
+/**
+ * Renders an alternative, but application consistent focus-ring.
+ */
+/**
+ * Specifies the outer layout for all contents across breakpoints. Apply this
+ * mixin to the container element, to center the contents on the screen within
+ * the layout offsets.
+ */
+/**
+ * This mixin specifies basic text-styles for components that render a richtext
+ * content.
+ */
+.prokodo-DynamicList {
+  border: none;
+  padding: 0;
+  /* ───────────────── helper / error text */
+}
+.prokodo-DynamicList__list {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 1rem;
+  list-style-type: none;
+  padding: 0;
+}
+.prokodo-DynamicList__list__item {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  width: 100%;
+}
+.prokodo-DynamicList__list__item--is-multi {
+  align-items: flex-start;
+}
+.prokodo-DynamicList__field--is-multi {
+  margin-bottom: 1rem;
+}
+.prokodo-DynamicList__field--is-multi:last-of-type {
+  margin-bottom: 0;
+}
+.prokodo-DynamicList__delete__button--is-multi {
+  margin-top: 0.5rem;
+}
+.prokodo-DynamicList__helperText {
+  padding-left: 1.5rem;
+  padding-top: 0.75rem;
+  display: flex;
+  color: var(--color-grey-300);
+  width: 80%;
+  font-weight: 400;
+  font-size: 1rem;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.45;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-DynamicList__helperText {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-DynamicList__helperText {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+html[data-theme=dark] .prokodo-DynamicList__helperText {
+  color: var(--color-grey-700);
+}
+.prokodo-DynamicList__helperText__content {
+  width: 100%;
+}
+.prokodo-DynamicList__helperText__content--is-error {
+  color: var(--color-error);
 }/* stylelint-disable */
 /**
  * Calculates a rem-based value by a given pixel size.
@@ -5906,6 +6161,7 @@ html[data-theme=dark] .prokodo-Select__helperText {
   position: relative;
   width: 42px;
   height: 26px;
+  min-width: 42px;
   background-color: var(--color-grey-500);
   border-radius: 13px;
   transition: background-color 0.3s ease;
@@ -5950,6 +6206,7 @@ html[data-theme=dark] .prokodo-Select__helperText {
 }
 .prokodo-Switch__thumb--checked {
   transform: translateY(-50%) translateX(13px);
+  left: 5px;
 }
 .prokodo-Switch__thumb--disabled {
   background-color: var(--color-grey-200);
@@ -6516,7 +6773,7 @@ html[data-theme=dark] .prokodo-Select__helperText {
   display: block;
   padding-bottom: 1rem;
   font-weight: 500;
-  font-size: 1.5rem;
+  font-size: 1.125rem;
   font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   font-style: normal;
   line-height: 1.55;
@@ -6710,6 +6967,9 @@ html[data-theme=dark] .prokodo-Select__helperText {
   text-align: left;
   text-decoration: none;
 }
+.prokodo-List__item--has-icon {
+  flex-wrap: nowrap;
+}
 .prokodo-List__item__card {
   margin: 0.75rem 0;
 }
@@ -8028,7 +8288,7 @@ html[data-theme=dark] .prokodo-List__item__icon {
   padding-left: 0.75rem;
   color: var(--color-grey-500);
   font-weight: 500;
-  font-size: 1.5rem;
+  font-size: 1.125rem;
   font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   font-style: normal;
   line-height: 1.55;
@@ -8871,14 +9131,241 @@ html[data-theme=dark] .prokodo-List__item__icon {
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
-.prokodo-Quote {
-  margin: 0;
-}
-.prokodo-Quote__headline {
-  padding-bottom: 1rem;
-}
-.prokodo-Quote__quote {
-  margin: 0;
+@keyframes gradientShift {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+@keyframes indeterminateMove {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(400%);
+  }
+}
+.prokodo-ProgressBar {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.prokodo-ProgressBar__track {
+  width: 100%;
+  height: 1rem;
+  border-radius: 0.75rem;
+  background-color: var(--color-grey-100);
+  overflow: hidden;
+  box-shadow: var(--elevation-2);
+}
+.prokodo-ProgressBar__bar {
+  height: 100%;
+  width: 0%;
+  background-image: inherit;
+  background-size: 200% 100%;
+  animation: gradientShift 2s linear;
+  transition: width 0.4s ease-out;
+}
+.prokodo-ProgressBar__bar--primary {
+  background-image: var(--gradient-background-primary-secondary);
+}
+.prokodo-ProgressBar__bar--secondary {
+  background-image: var(--gradient-background-secondary);
+}
+.prokodo-ProgressBar__bar--info {
+  background-image: var(--gradient-background-info);
+}
+.prokodo-ProgressBar__bar--success {
+  background-image: var(--gradient-background-success);
+}
+.prokodo-ProgressBar__bar--warning {
+  background-image: var(--gradient-background-warning);
+}
+.prokodo-ProgressBar__bar--error {
+  background-image: var(--gradient-background-error);
+}
+.prokodo-ProgressBar__bar--infinity {
+  animation: gradientShift 2s linear infinite;
+}
+.prokodo-ProgressBar__bar--indeterminate {
+  width: 25%;
+  animation: gradientShift 2s linear, indeterminateMove 2s ease-in-out;
+}
+.prokodo-ProgressBar__bar--indeterminate--infinity {
+  animation: gradientShift 2s linear infinite, indeterminateMove 2s ease-in-out infinite;
+}
+.prokodo-ProgressBar__label {
+  margin-top: 0.25rem;
+  font-size: 0.875rem;
+  text-align: center;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.prokodo-ProgressBar--animated .ProgressBar__bar:not(.ProgressBar__bar--indeterminate) {
+  animation: gradientShift 2s linear infinite;
+}
+.prokodo-ProgressBar--animated .ProgressBar__bar--indeterminate {
+  animation: gradientShift 2s linear infinite, indeterminateMove 2s ease-in-out infinite;
+}/* stylelint-disable */
+/**
+ * Calculates a rem-based value by a given pixel size.
+ */
+/* stylelint-disable */
+/**
+ * Gradient move, mainly for text
+ */
+@keyframes gradientMove {
+  from {
+    background-position: 0% 50%;
+  }
+  to {
+    background-position: 100% 50%;
+  }
+}
+/**
+ * Fade in
+ */
+@keyframes fadeInKeyframe {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+/* stylelint-disable */
+/**
+ * Applies flex-column and gap.
+ */
+/*
+    As example (light, primary)
+    See defined modes in designsystem/config/gradients
+*/
+/**
+ * Mixin that renders a media query that target screens that are larger than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens that are smaller than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens in between the given range.
+ */
+/**
+ * Mixin that renders a media query that target screens that have height larger than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens that have height smaller than the
+ * given size.
+ */
+/* stylelint-disable */
+/* M3/Elevation Light/1 */
+/* M3/Elevation Light/2 */
+/* M3/Elevation/5 */
+/* M3/Elevation/1 Text */
+/* Inner elevations */
+/* stylelint-disable */
+/**
+ * Visually hides an element but not removes them for screen readers.
+ */
+/**
+ * The inverse of the `hidden` helper to reset a previously hidden element to be
+ * visible for users.
+ */
+/**
+ * Creates a selector for :hover effects depending on the current user input
+ * device. If the input device is a mouse, this hover effect will appear.
+ * Keyboard and touch inputs are ignored.
+ *
+ * Example usage:
+ * .link {
+ *   color: blue;
+ *
+ *   @include when-hovered() {
+ *     color: green;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :active effects depending on the current user input
+ * device. The state applies when the input device is a mouse or keyboard. Touch
+ * devices will not show a pressed state.
+ *
+ * Example usage:
+ * .link {
+ *   box-shadow: none;
+ *
+ *   @include when-pressed() {
+ *     box-shadow: inset 0 2px 4px grey;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :focus effects depending on the current user input
+ * device. When the user navigates using a keyboard, the focus effect defined in
+ * here is applied. For other input devices they don't show up.
+ *
+ * Example usage:
+ * .link {
+ *   text-decoration: none;
+ *
+ *   @include when-focused() {
+ *     text-decoration: underline;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :focus-within effects depending on the current user
+ * input device. When the user navigates using a keyboard, the focus effect
+ * defined in here is applied. For other input devices they don't show up.
+ *
+ * Example usage:
+ * .link {
+ *   img {
+ *     opacity: 0.75;
+ *
+ *     @include when-focused-within() {
+ *       opacity: 1;
+ *     }
+ *   }
+ * }
+ */
+/**
+ * Wrapper for media query "prefers-reduced-motion".
+ */
+/**
+ * This helper hides the outline but still makes it visible for
+ * Windows high-contrast users. Use this instead of `outline: 0;`.
+ */
+/**
+ * This helper hides the outline but still makes it visible for
+ * Windows high-contrast users. Use this instead of `outline: 0;`.
+ */
+/**
+ * Renders an alternative, but application consistent focus-ring.
+ */
+/**
+ * Specifies the outer layout for all contents across breakpoints. Apply this
+ * mixin to the container element, to center the contents on the screen within
+ * the layout offsets.
+ */
+/**
+ * This mixin specifies basic text-styles for components that render a richtext
+ * content.
+ */
+.prokodo-Quote {
+  margin: 0;
+}
+.prokodo-Quote__headline {
+  padding-bottom: 1rem;
+}
+.prokodo-Quote__quote {
+  margin: 0;
 }
 .prokodo-Quote__quote__content {
   margin: 0 0 1rem 0;
@@ -9207,14 +9694,14 @@ html[data-theme=dark] .prokodo-List__item__icon {
   border-radius: 0.25rem;
   transition: background-color 120ms;
 }
-.prokodo-SideNav__link:hover {
+.prokodo-SideNav__link--is-active, .prokodo-SideNav__link:hover {
   text-decoration: none;
   background: var(--color-grey-50);
 }
-.prokodo-SideNav__link:hover > div:first-of-type {
+.prokodo-SideNav__link--is-active > div:first-of-type, .prokodo-SideNav__link:hover > div:first-of-type {
   position: relative;
 }
-.prokodo-SideNav__link:hover > div:first-of-type:before {
+.prokodo-SideNav__link--is-active > div:first-of-type:before, .prokodo-SideNav__link:hover > div:first-of-type:before {
   content: "";
   position: absolute;
   left: 0;
@@ -9323,6 +9810,248 @@ html[data-theme=dark] .prokodo-List__item__icon {
 /* M3/Elevation/1 Text */
 /* Inner elevations */
 /* stylelint-disable */
+/**
+ * Visually hides an element but not removes them for screen readers.
+ */
+/**
+ * The inverse of the `hidden` helper to reset a previously hidden element to be
+ * visible for users.
+ */
+/**
+ * Creates a selector for :hover effects depending on the current user input
+ * device. If the input device is a mouse, this hover effect will appear.
+ * Keyboard and touch inputs are ignored.
+ *
+ * Example usage:
+ * .link {
+ *   color: blue;
+ *
+ *   @include when-hovered() {
+ *     color: green;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :active effects depending on the current user input
+ * device. The state applies when the input device is a mouse or keyboard. Touch
+ * devices will not show a pressed state.
+ *
+ * Example usage:
+ * .link {
+ *   box-shadow: none;
+ *
+ *   @include when-pressed() {
+ *     box-shadow: inset 0 2px 4px grey;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :focus effects depending on the current user input
+ * device. When the user navigates using a keyboard, the focus effect defined in
+ * here is applied. For other input devices they don't show up.
+ *
+ * Example usage:
+ * .link {
+ *   text-decoration: none;
+ *
+ *   @include when-focused() {
+ *     text-decoration: underline;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :focus-within effects depending on the current user
+ * input device. When the user navigates using a keyboard, the focus effect
+ * defined in here is applied. For other input devices they don't show up.
+ *
+ * Example usage:
+ * .link {
+ *   img {
+ *     opacity: 0.75;
+ *
+ *     @include when-focused-within() {
+ *       opacity: 1;
+ *     }
+ *   }
+ * }
+ */
+/**
+ * Wrapper for media query "prefers-reduced-motion".
+ */
+/**
+ * This helper hides the outline but still makes it visible for
+ * Windows high-contrast users. Use this instead of `outline: 0;`.
+ */
+/**
+ * This helper hides the outline but still makes it visible for
+ * Windows high-contrast users. Use this instead of `outline: 0;`.
+ */
+/**
+ * Renders an alternative, but application consistent focus-ring.
+ */
+/**
+ * Specifies the outer layout for all contents across breakpoints. Apply this
+ * mixin to the container element, to center the contents on the screen within
+ * the layout offsets.
+ */
+/**
+ * This mixin specifies basic text-styles for components that render a richtext
+ * content.
+ */
+.prokodo-Snackbar {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  min-width: 288px;
+  max-width: 430px;
+  padding: 1rem 1.5rem;
+  border-radius: 8px;
+  box-shadow: var(--elevation-2);
+  background-color: var(--color-grey-900);
+  color: var(--color-white);
+}
+.prokodo-Snackbar--success {
+  background-color: var(--color-success);
+}
+.prokodo-Snackbar--error {
+  background-color: var(--color-error);
+}
+.prokodo-Snackbar--warning {
+  background-color: var(--color-warning);
+}
+.prokodo-Snackbar--info {
+  background-color: var(--color-info);
+}
+.prokodo-Snackbar__message {
+  flex: 1 1;
+}
+.prokodo-Snackbar__action {
+  margin-left: auto;
+}
+.prokodo-Snackbar__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+.prokodo-Snackbar__close:focus-visible {
+  outline: 2px solid var(--color-primary-500);
+  outline-offset: 2px;
+}
+.prokodo-Snackbar__close:hover {
+  opacity: 0.8;
+}
+.prokodo-Snackbar--readonly {
+  pointer-events: none;
+}
+
+.prokodo-SnackbarProvider {
+  position: "fixed";
+  display: "flex";
+  flex-direction: "column";
+  gap: 8;
+  z-index: 9000;
+  pointer-events: "none";
+}
+.prokodo-SnackbarProvider--is-top {
+  inset-block-start: 16px;
+  inset-block-end: auto;
+}
+.prokodo-SnackbarProvider--is-bottom {
+  inset-block-start: auto;
+  inset-block-end: 16px;
+}
+.prokodo-SnackbarProvider--is-left {
+  inset-inline-start: 16px;
+  inset-inline-end: auto;
+}
+.prokodo-SnackbarProvider--is-right {
+  inset-inline-start: auto;
+  inset-inline-end: 16px;
+}
+.prokodo-SnackbarProvider__snackbar {
+  pointer-events: auto;
+  margin: 0 0 1rem 0;
+}
+.prokodo-SnackbarProvider__snackbar--is-top {
+  margin-top: 1rem;
+}
+.prokodo-SnackbarProvider__snackbar--is-bottom {
+  margin-bottom: 1rem;
+}
+.prokodo-SnackbarProvider__snackbar--is-left {
+  margin-left: 1rem;
+}
+.prokodo-SnackbarProvider__snackbar--is-right {
+  margin-right: 1rem;
+}/* stylelint-disable */
+/**
+ * Calculates a rem-based value by a given pixel size.
+ */
+/* stylelint-disable */
+/**
+ * Gradient move, mainly for text
+ */
+@keyframes gradientMove {
+  from {
+    background-position: 0% 50%;
+  }
+  to {
+    background-position: 100% 50%;
+  }
+}
+/**
+ * Fade in
+ */
+@keyframes fadeInKeyframe {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+/* stylelint-disable */
+/**
+ * Applies flex-column and gap.
+ */
+/*
+    As example (light, primary)
+    See defined modes in designsystem/config/gradients
+*/
+/**
+ * Mixin that renders a media query that target screens that are larger than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens that are smaller than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens in between the given range.
+ */
+/**
+ * Mixin that renders a media query that target screens that have height larger than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens that have height smaller than the
+ * given size.
+ */
+/* stylelint-disable */
+/* M3/Elevation Light/1 */
+/* M3/Elevation Light/2 */
+/* M3/Elevation/5 */
+/* M3/Elevation/1 Text */
+/* Inner elevations */
+/* stylelint-disable */
 /**
  * Visually hides an element but not removes them for screen readers.
  */