@neo-ui-kit/react 0.0.0-stage → 1.0.0

package/dist/components/feedback/KeyValueList/styles.css

@@ -0,0 +1,51 @@
+/* Styles owned by KeyValueList: rows slide in one by one and highlight on hover. */
+.ad-key-value-list {
+  display: grid;
+  gap: 0.125rem;
+  margin: 0;
+  font-size: 0.8125rem;
+}
+.ad-key-value-list > div {
+  display: grid;
+  min-width: 0;
+  /* Neither column may push the list wider than its container. */
+  grid-template-columns: minmax(min(7.5rem, 40%), 1fr) minmax(0, 1.2fr);
+  align-items: center;
+  gap: 1.125rem;
+  padding: 0.45rem 0.6rem;
+  border-radius: 0.5rem;
+  transition: background 0.25s;
+  animation: ad-kv-row 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
+}
+.ad-key-value-list > div:nth-child(2) {
+  animation-delay: 0.07s;
+}
+.ad-key-value-list > div:nth-child(3) {
+  animation-delay: 0.14s;
+}
+.ad-key-value-list > div:nth-child(n + 4) {
+  animation-delay: 0.21s;
+}
+.ad-key-value-list > div:hover {
+  background: #ffffff08;
+}
+.ad-key-value-list dt {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  color: var(--ad-muted);
+  transition: color 0.25s;
+}
+.ad-key-value-list > div:hover dt {
+  color: var(--ad-pink);
+}
+.ad-key-value-list dd {
+  min-width: 0;
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+@keyframes ad-kv-row {
+  from {
+    opacity: 0;
+    transform: translateX(-0.6rem);
+  }
+}

package/dist/components/feedback/Menu/Menu.d.ts

@@ -0,0 +1,2 @@
+import type { MenuProps } from "../shared";
+export declare const Menu: (p: MenuProps) => import("react").JSX.Element;

package/dist/components/feedback/Menu/styles.css

@@ -0,0 +1,123 @@
+/* Premium floating action menu. */
+.ad.ad-menu {
+  --ad-menu-radius: 1.08rem;
+  --ad-menu-caret-size: 0.72rem;
+  position: fixed;
+  inset: auto;
+  min-inline-size: min(clamp(16rem, 24vw, 21rem), var(--ad-popover-available-width, calc(100vw - 1.25rem)));
+  max-inline-size: min(26rem, var(--ad-popover-available-width, calc(100vw - 1.25rem)));
+  padding: 0.62rem;
+  border: 0.0625rem solid transparent;
+  border-radius: var(--ad-menu-radius);
+  color: var(--ad-text);
+  overflow: visible;
+  isolation: isolate;
+  backdrop-filter: blur(1.35rem) saturate(1.18);
+  background:
+    radial-gradient(
+        120% 92% at 50% -12%,
+        rgb(from var(--ad-primary-600) r g b / 0.23) 0%,
+        rgb(from var(--ad-primary-800) r g b / 0.16) 25%,
+        transparent 57%
+      )
+      padding-box,
+    radial-gradient(90% 120% at 0 100%, rgb(from var(--ad-primary-800) r g b / 0.13) 0%, transparent 65%)
+      padding-box,
+    linear-gradient(145deg, rgb(from var(--ad-neutral-850) r g b / 0.93), rgb(from var(--ad-neutral-900) r g b / 0.94) 56%, rgb(from var(--ad-neutral-850) r g b / 0.93)) padding-box,
+    linear-gradient(
+        140deg,
+        rgb(from var(--ad-secondary-200) r g b / 0.72) 0%,
+        rgb(from var(--ad-primary) r g b / 0.55) 14%,
+        rgb(from var(--ad-primary-700) r g b / 0.34) 40%,
+        rgb(from var(--ad-secondary) r g b / 0.63) 76%,
+        rgb(from var(--ad-primary-700) r g b / 0.34) 100%
+      )
+      border-box;
+  box-shadow:
+    inset 0 0.0625rem 0.125rem rgb(from var(--ad-neutral-200) r g b / 0.29),
+    inset 0 0 1.2rem rgb(from var(--ad-primary) r g b / 0.1),
+    0 0.9rem 2.8rem #000c,
+    0 0 1.35rem rgb(from var(--ad-primary) r g b / 0.23),
+    0 0 3rem rgb(from var(--ad-primary) r g b / 0.09);
+  transform-origin: var(--ad-popover-anchor-x, 50%) top;
+  animation: ad-menu-enter 0.19s cubic-bezier(0.18, 0.82, 0.28, 1) both;
+}
+.ad.ad-menu::after {
+  content: "";
+  position: absolute;
+  inset: 0.18rem;
+  border-radius: calc(var(--ad-menu-radius) - 0.18rem);
+  border: 0.0625rem solid #ffffff09;
+  box-shadow: inset 0 0.0625rem 0.1rem #ffffff18;
+  pointer-events: none;
+  z-index: 4;
+}
+.ad.ad-menu::before {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  inline-size: var(--ad-menu-caret-size);
+  block-size: var(--ad-menu-caret-size);
+  left: clamp(
+    1.3rem,
+    calc(var(--ad-popover-anchor-x, 50%) - var(--ad-menu-caret-size) / 2),
+    calc(100% - 2rem)
+  );
+  top: calc(var(--ad-menu-caret-size) * -0.49);
+  transform: rotate(45deg);
+  border-left: 0.0625rem solid rgb(from var(--ad-secondary) r g b / 0.56);
+  border-top: 0.0625rem solid rgb(from var(--ad-secondary-200) r g b / 0.69);
+  border-radius: 0.15rem 0 0 0;
+  background: linear-gradient(135deg, var(--ad-primary-800), var(--ad-neutral-850) 66%);
+  box-shadow: -0.18rem -0.18rem 0.65rem rgb(from var(--ad-primary) r g b / 0.23);
+}
+.ad.ad-menu[data-ad-side="above"] {
+  transform-origin: var(--ad-popover-anchor-x, 50%) bottom;
+  animation-name: ad-menu-enter-above;
+}
+.ad.ad-menu[data-ad-side="above"]::before {
+  top: auto;
+  bottom: calc(var(--ad-menu-caret-size) * -0.49);
+  transform: rotate(225deg);
+}
+.ad-menu > .ad-divider {
+  margin: 0.16rem 0.72rem;
+  inline-size: auto;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgb(from var(--ad-primary) r g b / 0.17) 14%,
+    rgb(from var(--ad-secondary) r g b / 0.23) 50%,
+    rgb(from var(--ad-primary) r g b / 0.17) 86%,
+    transparent
+  );
+}
+@keyframes ad-menu-enter {
+  from {
+    opacity: 0;
+    transform: translateY(-0.38rem) scale(0.975);
+    filter: blur(0.08rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+    filter: blur(0);
+  }
+}
+@keyframes ad-menu-enter-above {
+  from {
+    opacity: 0;
+    transform: translateY(0.38rem) scale(0.975);
+    filter: blur(0.08rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+    filter: blur(0);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ad.ad-menu {
+    animation: none;
+  }
+}

package/dist/components/feedback/MenuItem/MenuItem.d.ts

@@ -0,0 +1,2 @@
+import type { MenuItemProps } from "../shared";
+export declare const MenuItem: (p: MenuItemProps) => import("react").JSX.Element;

package/dist/components/feedback/MenuItem/styles.css

@@ -0,0 +1,71 @@
+/* Menu row: plain icon and label, a soft highlight on hover or keyboard focus. */
+.ad-menu-item {
+  --ad-menu-item-tone: var(--ad-neutral-200);
+  appearance: none;
+  inline-size: 100%;
+  min-inline-size: 0;
+  min-block-size: 2.5rem;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 0.7rem;
+  padding: 0.4rem 0.7rem;
+  border: 0;
+  border-radius: calc(var(--ad-radius) * 0.65);
+  background: transparent;
+  color: var(--ad-menu-item-tone);
+  text-align: left;
+  font-family: inherit;
+  font-size: var(--ad-font-size-body-sm);
+  font-weight: 600;
+  line-height: 1.2;
+  cursor: pointer;
+  transition:
+    background 0.14s,
+    color 0.14s;
+}
+.ad-menu-item:hover:not(:disabled),
+.ad-menu-item:focus-visible {
+  outline: 0;
+  background: #ffffff10;
+  color: #fff;
+}
+.ad-menu-item:active:not(:disabled) {
+  background: #ffffff1a;
+}
+.ad-menu-item:disabled {
+  opacity: 0.38;
+  cursor: not-allowed;
+}
+.ad-menu-item-icon,
+.ad-menu-item-end {
+  display: grid;
+  place-items: center;
+  color: var(--ad-neutral-400);
+}
+.ad-menu-item-icon > .ad-icon {
+  --ad-icon-size: 1.15rem;
+}
+.ad-menu-item:hover:not(:disabled) .ad-menu-item-icon {
+  color: var(--ad-pink);
+}
+.ad-menu-item-label {
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ad-menu-item-end > .ad-icon {
+  --ad-icon-size: 1rem;
+}
+.ad-menu-item[data-ad-tone="error"] {
+  --ad-menu-item-tone: var(--ad-secondary);
+}
+.ad-menu-item[data-ad-tone="error"] .ad-menu-item-icon {
+  color: var(--ad-secondary);
+}
+.ad-menu-item[data-ad-tone="error"]:hover:not(:disabled),
+.ad-menu-item[data-ad-tone="error"]:focus-visible {
+  background: rgb(from var(--ad-primary) r g b / 0.13);
+  color: var(--ad-secondary-200);
+}

package/dist/components/feedback/MessageBar/MessageBar.d.ts

@@ -0,0 +1,2 @@
+import type { MessageBarProps } from "../shared";
+export declare const MessageBar: ({ action, tone, ...p }: MessageBarProps) => import("react").JSX.Element;

package/dist/components/feedback/MessageBar/styles.css

@@ -0,0 +1,116 @@
+/* Styles owned by MessageBar: tone strip, glowing icon ring, a scan line on arrival. */
+.ad-message-bar {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.8rem;
+  align-items: center;
+  min-width: 0;
+  padding: 0.7rem 1rem 0.7rem 1.1rem;
+  font-size: var(--ad-font-size-body-sm);
+  line-height: 1.5;
+  color: var(--ad-neutral-200);
+  border: 0.0625rem solid color-mix(in srgb, var(--ad-tone) 35%, transparent);
+  border-radius: calc(var(--ad-radius) * 0.8);
+  background:
+    linear-gradient(
+      90deg,
+      color-mix(in srgb, var(--ad-tone) 16%, transparent),
+      transparent 70%
+    ),
+    rgb(from var(--ad-neutral-900) r g b / 0.95);
+  overflow: hidden;
+  animation: ad-message-in 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.15) both;
+}
+/* Tone strip on the leading edge. */
+.ad-message-bar::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0.45rem;
+  bottom: 0.45rem;
+  width: 0.1875rem;
+  border-radius: 0 999rem 999rem 0;
+  background: var(--ad-tone);
+  box-shadow: 0 0 0.75rem var(--ad-tone);
+}
+/* Scan line passing once when the message appears. */
+.ad-message-bar::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    100deg,
+    transparent 30%,
+    color-mix(in srgb, var(--ad-tone) 30%, transparent) 50%,
+    transparent 70%
+  );
+  translate: -100% 0;
+  animation: ad-message-scan 1.1s 0.15s ease-out both;
+  pointer-events: none;
+}
+.ad-message-bar-icon {
+  display: grid;
+  place-items: center;
+  flex: none;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+  color: var(--ad-tone);
+  background: color-mix(in srgb, var(--ad-tone) 14%, var(--ad-neutral-900));
+  box-shadow:
+    inset 0 0 0 0.0625rem color-mix(in srgb, var(--ad-tone) 50%, transparent),
+    0 0 0.75rem color-mix(in srgb, var(--ad-tone) 30%, transparent);
+}
+.ad-message-bar-icon > .ad-icon {
+  --ad-icon-size: 1.1rem;
+}
+.ad-message-bar-icon {
+  position: relative;
+}
+.ad-message-bar:is([data-ad-tone="error"], [data-ad-tone="warning"]) .ad-message-bar-icon::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  box-shadow: inset 0 0 0 0.0625rem var(--ad-tone), 0 0 1.1rem color-mix(in srgb, var(--ad-tone) 55%, transparent);
+  opacity: 0;
+  animation: ad-message-alert 2s ease-in-out infinite;
+}
+.ad-message-bar-text {
+  flex: 1 1 12ch;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+.ad-message-bar-action {
+  flex: 0 1 auto;
+  max-width: 100%;
+  margin-inline-start: auto;
+  overflow-wrap: anywhere;
+}
+.ad-message-bar-action .ad-button {
+  max-width: 100%;
+  height: auto;
+  min-height: var(--ad-size-h);
+  padding-block: 0.5em;
+  white-space: normal;
+}
+.ad-message-bar-action .ad-button-label {
+  white-space: normal;
+}
+@keyframes ad-message-in {
+  from {
+    opacity: 0;
+    transform: translateY(-0.4rem);
+  }
+}
+@keyframes ad-message-scan {
+  to {
+    translate: 100% 0;
+  }
+}
+@keyframes ad-message-alert {
+  50% {
+    opacity: 1;
+  }
+}

package/dist/components/feedback/Popover/Popover.d.ts

@@ -0,0 +1,2 @@
+import { type PopoverProps } from "../shared";
+export declare const Popover: (p: PopoverProps) => import("react").JSX.Element | null;

package/dist/components/feedback/Popover/styles.css

@@ -0,0 +1,44 @@
+/* Styles owned by Popover: unfolds from its anchor side, rows arrive in a quick cascade. */
+.ad-popover {
+  min-width: min(14.6875rem, var(--ad-popover-available-width, calc(100vw - 1rem)));
+  max-width: min(21.875rem, var(--ad-popover-available-width, calc(100vw - 1rem)));
+  max-height: var(--ad-popover-available-height, calc(100dvh - 1rem));
+  overflow: auto;
+  overflow-wrap: anywhere;
+  transform-origin: var(--ad-popover-anchor-x, 50%) top;
+  animation: ad-popover-in 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
+}
+.ad-popover[data-ad-side="above"] {
+  transform-origin: var(--ad-popover-anchor-x, 50%) bottom;
+}
+:is(.ad-option-list, .ad-menu) > :is(.ad-option, .ad-menu-item) {
+  animation: ad-row-in 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both;
+}
+:is(.ad-option-list, .ad-menu) > :nth-child(2) {
+  animation-delay: 0.03s;
+}
+:is(.ad-option-list, .ad-menu) > :nth-child(3) {
+  animation-delay: 0.06s;
+}
+:is(.ad-option-list, .ad-menu) > :nth-child(4) {
+  animation-delay: 0.09s;
+}
+:is(.ad-option-list, .ad-menu) > :nth-child(5) {
+  animation-delay: 0.12s;
+}
+:is(.ad-option-list, .ad-menu) > :nth-child(n + 6) {
+  animation-delay: 0.15s;
+}
+@keyframes ad-popover-in {
+  from {
+    opacity: 0;
+    transform: translateY(-0.35rem) scale(0.96);
+    filter: blur(0.25rem);
+  }
+}
+@keyframes ad-row-in {
+  from {
+    opacity: 0;
+    transform: translateX(-0.4rem);
+  }
+}

package/dist/components/feedback/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,2 @@
+import { type ProgressBarProps } from "../shared";
+export declare const ProgressBar: (p: ProgressBarProps) => import("react").JSX.Element;

package/dist/components/feedback/ProgressBar/styles.css

@@ -0,0 +1,76 @@
+/* Styles owned by ProgressBar: the fill glides to its value with a glint running through it. */
+.ad-progress-bar {
+  height: 0.5625rem;
+  border: 0.0625rem solid var(--ad-primary-600);
+  border-radius: 0.5rem;
+  background: linear-gradient(var(--ad-neutral-900), var(--ad-neutral-900));
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+}
+.ad-progress-bar > span {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  border-radius: inherit;
+  overflow: hidden;
+  background: linear-gradient(90deg, var(--ad-primary), var(--ad-secondary));
+  box-shadow:
+    inset 0 0.0625rem 0.0625rem rgb(from var(--ad-secondary-200) r g b / 0.47),
+    0 0 0.6rem rgb(from var(--ad-primary) r g b / 0.33);
+  transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+/* The glint running through the fill. */
+.ad-progress-bar > span::after {
+  content: "";
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 60%;
+  background: linear-gradient(100deg, transparent 30%, #ffffff66 50%, transparent 70%);
+  transform: translateX(-100%);
+  animation: ad-progress-glint 2.2s ease-in-out infinite;
+}
+.ad-progress-bar[data-indeterminate] > span {
+  animation: ad-progress-run 1.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
+}
+@keyframes ad-progress-glint {
+  to {
+    transform: translateX(270%);
+  }
+}
+@keyframes ad-progress-run {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(290%);
+  }
+}
+/* Wave variant: the bars light up from the left as the work advances. */
+.ad-progress-bar[data-variant="wave"] {
+  height: 1.75rem;
+  border: 0;
+  background: none;
+  overflow: visible;
+}
+.ad-progress-bar[data-variant="wave"] > svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.ad-progress-wave-idle {
+  fill: rgb(from var(--ad-neutral-200) r g b / 0.18);
+}
+.ad-progress-wave-done {
+  fill: var(--ad-primary);
+  filter: drop-shadow(0 0 0.2rem rgb(from var(--ad-primary) r g b / 0.7));
+}
+.ad-progress-bar[data-variant="wave"][data-indeterminate] .ad-progress-wave-done {
+  animation: ad-progress-wave-run 1.6s ease-in-out infinite;
+}
+@keyframes ad-progress-wave-run {
+  50% {
+    opacity: 0.35;
+  }
+}

package/dist/components/feedback/SignalBars/SignalBars.d.ts

@@ -0,0 +1,11 @@
+import { type CommonProps } from "../../../core/base";
+export interface SignalBarsProps extends CommonProps {
+    /** How many bars are lit, 0…`bars`. */
+    level?: number;
+    bars?: number;
+    /** A weak or broken link: the lit bars turn to the warning colour. */
+    weak?: boolean;
+    label?: string;
+}
+/** Signal strength as rising bars, like a phone's reception; the lit ones glow. */
+export declare function SignalBars({ level, bars, weak, label, ...p }: SignalBarsProps): import("react").JSX.Element;

package/dist/components/feedback/SignalBars/styles.css

@@ -0,0 +1,31 @@
+/* Styles owned by SignalBars: rising bars; lit ones glow, the top one breathes. */
+.ad-signal-bars {
+  --ad-signal-tone: var(--ad-primary);
+  display: inline-flex;
+  align-items: flex-end;
+  gap: 0.18em;
+  width: 1.4em;
+  height: 1.4em;
+}
+.ad-signal-bars[data-weak] {
+  --ad-signal-tone: var(--ad-warning);
+}
+.ad-signal-bars > i {
+  flex: 1;
+  border-radius: 0.12em;
+  background: rgb(from var(--ad-neutral-200) r g b / 0.16);
+  transition: background 0.4s, box-shadow 0.4s;
+}
+.ad-signal-bars > i[data-lit] {
+  background: linear-gradient(var(--ad-secondary-100), var(--ad-signal-tone));
+  box-shadow: 0 0 0.45em rgb(from var(--ad-signal-tone) r g b / 0.55);
+}
+.ad-signal-bars > i[data-lit]:has(+ i:not([data-lit])),
+.ad-signal-bars > i[data-lit]:last-child {
+  animation: ad-signal-breathe 2.4s ease-in-out infinite;
+}
+@keyframes ad-signal-breathe {
+  50% {
+    opacity: 0.6;
+  }
+}

package/dist/components/feedback/StatusIndicator/StatusIndicator.d.ts

@@ -0,0 +1,2 @@
+import type { StatusIndicatorProps } from "../shared";
+export declare const StatusIndicator: ({ status, ...p }: StatusIndicatorProps) => import("react").JSX.Element;

package/dist/components/feedback/StatusIndicator/styles.css

@@ -0,0 +1,88 @@
+/* Styles owned by StatusIndicator: a live LED whose motion tells the state at a glance. */
+.ad-status-indicator {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.55rem;
+  font-size: var(--ad-font-size-body-sm);
+  min-width: 0;
+  color: var(--ad-neutral-300);
+  /* Short labels stay on one line; a long one wraps instead of pushing its container wider. */
+  overflow-wrap: anywhere;
+}
+.ad-status-dot {
+  position: relative;
+  display: grid;
+  place-items: center;
+  flex: none;
+  width: 1rem;
+  height: 1rem;
+}
+/* The LED itself. */
+.ad-status-dot > i {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  background: radial-gradient(circle at 35% 30%, #fff, var(--ad-tone) 55%);
+  box-shadow: 0 0 0.5rem var(--ad-tone);
+}
+/* Rings around it: radar for success, a spinning arc for processing. */
+.ad-status-dot::before,
+.ad-status-dot::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+}
+[data-ad-tone="success"] > .ad-status-dot::before,
+[data-ad-tone="success"] > .ad-status-dot::after {
+  border: 0.0625rem solid var(--ad-tone);
+  animation: ad-status-radar 2.4s ease-out infinite;
+}
+[data-ad-tone="success"] > .ad-status-dot::after {
+  animation-delay: 1.2s;
+}
+[data-ad-tone="processing"] > .ad-status-dot::before {
+  inset: -0.125rem;
+  background: conic-gradient(from 0deg, transparent 0 55%, var(--ad-tone));
+  mask: radial-gradient(closest-side, transparent 72%, #000 75%);
+  animation: ad-status-spin 0.9s linear infinite;
+}
+:is([data-ad-tone="error"], [data-ad-tone="warning"]) > .ad-status-dot > i {
+  animation: ad-status-blink 1.1s steps(2, jump-none) infinite;
+}
+[data-ad-tone="pending"] > .ad-status-dot > i {
+  animation: ad-status-breathe 2.4s ease-in-out infinite;
+}
+[data-ad-tone="offline"] > .ad-status-dot > i {
+  background: var(--ad-neutral-600);
+  box-shadow: none;
+}
+.ad-status-indicator[data-ad-tone="offline"] {
+  color: var(--ad-muted);
+}
+@keyframes ad-status-radar {
+  from {
+    opacity: 0.9;
+    scale: 0.4;
+  }
+  to {
+    opacity: 0;
+    scale: 1.8;
+  }
+}
+@keyframes ad-status-spin {
+  to {
+    rotate: 1turn;
+  }
+}
+@keyframes ad-status-blink {
+  50% {
+    opacity: 0.3;
+  }
+}
+@keyframes ad-status-breathe {
+  50% {
+    scale: 0.7;
+    opacity: 0.55;
+  }
+}

package/dist/components/feedback/Steps/Steps.d.ts

@@ -0,0 +1,2 @@
+import { type StepsProps } from "../shared";
+export declare const Steps: (p: StepsProps) => import("react").JSX.Element;