@eocrm/design-system 0.6.24 → 0.7.0

package/dist/components/Table/Table.module.js

@@ -0,0 +1,52 @@
+import "./Table.css";
+// src/components/Table/Table.module.scss
+var scrollWrap = "Table__scrollWrap__Qh9vw";
+var table = "Table__table___hVNP";
+var layoutFixed = "Table__layoutFixed__Uwcdz";
+var td = "Table__td__5ehjm";
+var th = "Table__th__CetKc";
+var cellLink = "Table__cellLink__L39oq";
+var caption = "Table__caption__VFUzT";
+var thead = "Table__thead__cqF1f";
+var tr = "Table__tr__jXQaL";
+var tbody = "Table__tbody__76-ES";
+var tfoot = "Table__tfoot__O8r1M";
+var striped = "Table__striped__KNAT7";
+var hover = "Table__hover__sq0b_";
+var bordered = "Table__bordered__YZtzU";
+var selected = "Table__selected__-Lspk";
+var thInner = "Table__thInner__6bcmR";
+var sortable = "Table__sortable__feJsS";
+var sortIcon = "Table__sortIcon__OdSDO";
+var sortableInactive = "Table__sortableInactive__a1M1e";
+var stickyHeader = "Table__stickyHeader__kwveZ";
+var truncate = "Table__truncate__WHroM";
+var Table_module_default = {
+	scrollWrap,
+	table,
+	layoutFixed,
+	"density-comfortable": "Table__density-comfortable__O7Iq8",
+	td,
+	th,
+	"density-dense": "Table__density-dense__Vvl8F",
+	cellLink,
+	caption,
+	thead,
+	tr,
+	tbody,
+	tfoot,
+	striped,
+	hover,
+	bordered,
+	selected,
+	thInner,
+	"align-start": "Table__align-start__UXny9",
+	"align-center": "Table__align-center__1z65S",
+	"align-end": "Table__align-end__a0CpV",
+	sortable,
+	sortIcon,
+	sortableInactive,
+	stickyHeader,
+	truncate
+};
+export { bordered, caption, cellLink, Table_module_default as default, hover, layoutFixed, scrollWrap, selected, sortIcon, sortable, sortableInactive, stickyHeader, striped, table, tbody, td, tfoot, th, thInner, thead, tr, truncate };

package/dist/components/Table/index.d.ts

@@ -0,0 +1,2 @@
+export { Table } from './Table.js';
+export type { TableProps, TableCaptionProps, TableSectionProps, TableRowProps, TableHeaderCellProps, TableCellProps, TableCellLinkProps, TableCellTone, TableLayout, TableDensity, TableCellAlign, TableSortDirection, } from './Table.js';

package/dist/components/TableOfContents/TableOfContents.css

@@ -0,0 +1,70 @@
+.TableOfContents__root__uL0_x {
+  display: flex;
+  flex-direction: column;
+  gap: var(--table-of-contents-gap);
+}
+
+.TableOfContents__probe__8Yyy6 {
+  position: absolute;
+  inline-size: 0;
+  block-size: var(--table-of-contents-scroll-offset);
+  visibility: hidden;
+  pointer-events: none;
+  transform: translateY(-100%);
+}
+
+.TableOfContents__list__LiPs1 {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  list-style: none;
+}
+
+.TableOfContents__link__vF5ZX {
+  display: block;
+  padding-block: var(--table-of-contents-link-padding-y);
+  padding-inline: var(--table-of-contents-link-padding-x);
+  border-inline-start: var(--table-of-contents-bar-width) solid var(--table-of-contents-rail-color);
+  font-size: var(--table-of-contents-link-font-size);
+  color: var(--table-of-contents-link-fg);
+  text-decoration: none;
+}
+.TableOfContents__link__vF5ZX:hover {
+  color: var(--table-of-contents-link-fg-hover);
+}
+.TableOfContents__link__vF5ZX:focus-visible {
+  outline: var(--ring-width) solid var(--ring-accent);
+  outline-offset: var(--ring-offset);
+}
+.TableOfContents__link__vF5ZX[aria-current=location] {
+  border-inline-start-color: var(--table-of-contents-bar-color);
+  color: var(--table-of-contents-link-fg-active);
+}
+
+.TableOfContents__nested__znrPP {
+  padding-inline-start: calc(var(--table-of-contents-link-padding-x) + var(--table-of-contents-nested-indent));
+}
+
+.TableOfContents__summary__xYgqe {
+  padding-block: var(--table-of-contents-link-padding-y);
+  font-size: var(--table-of-contents-link-font-size);
+  font-weight: var(--font-weight-semibold);
+  color: var(--table-of-contents-summary-fg);
+  cursor: pointer;
+}
+.TableOfContents__summary__xYgqe:focus-visible {
+  outline: var(--ring-width) solid var(--ring-accent);
+  outline-offset: var(--ring-offset);
+}
+
+.TableOfContents__details__chzlm[open] > .TableOfContents__summary__xYgqe {
+  padding-block-end: var(--table-of-contents-gap);
+}
+
+@media (forced-colors: active) {
+  .TableOfContents__root__uL0_x {
+    --table-of-contents-bar-color: Highlight;
+    --table-of-contents-link-fg-active: Highlight;
+    --table-of-contents-rail-color: Canvas;
+  }
+}

package/dist/components/TableOfContents/TableOfContents.d.ts

@@ -0,0 +1,25 @@
+import { type HTMLAttributes } from 'react';
+/** One entry: a heading already on the page, found by `id`. */
+export interface TableOfContentsItem {
+    /** The heading element's `id`. The link is `#id`; a missing element still renders and falls back to native hash navigation. */
+    id: string;
+    /** Visible link text — usually the heading's own text. */
+    label: string;
+    /** Heading level. `2` sits flush; `3` is indented under the `2` before it. */
+    level: 2 | 3;
+}
+export interface TableOfContentsProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    /** Entries in document order. An empty list renders nothing. */
+    items: readonly TableOfContentsItem[];
+    /**
+     * Render a `<details>` disclosure (summary "On this page · <active>") instead
+     * of the heading + list. Use where there is no room for a side rail, e.g. on
+     * narrow viewports above the content. Default `false`.
+     */
+    collapsed?: boolean;
+}
+/**
+ * "On this page" navigation for a long page's h2/h3 headings, with scroll-spy and offset-aware click-scroll.
+ * @see docs/components/TableOfContents.md
+ */
+export declare const TableOfContents: import("react").ForwardRefExoticComponent<TableOfContentsProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/TableOfContents/TableOfContents.js

@@ -0,0 +1,133 @@
+'use client';
+import { useTranslation } from "../../i18n/useTranslation.js";
+import { Text } from "../Text/Text.js";
+import { pickActiveSection } from "./activeSection.js";
+import TableOfContents_module_default from "./TableOfContents.module.js";
+import { forwardRef, useEffect, useRef, useState } from "react";
+import clsx from "clsx";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+// src/components/TableOfContents/TableOfContents.tsx
+function prefersReducedMotion() {
+	return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+/**
+* "On this page" navigation for a long page's h2/h3 headings, with scroll-spy and offset-aware click-scroll.
+* @see docs/components/TableOfContents.md
+*/
+var TableOfContents = forwardRef(function TableOfContents({ items, collapsed = false, className, ...props }, ref) {
+	const t = useTranslation();
+	const [activeId, setActiveId] = useState();
+	const probeRef = useRef(null);
+	const detailsRef = useRef(null);
+	const offsetRef = useRef(0);
+	const pausedRef = useRef(false);
+	const resumeRef = useRef(void 0);
+	const idKey = items.map((item) => item.id).join(" ");
+	useEffect(() => {
+		if (!idKey) return;
+		const ids = idKey.split(" ");
+		let frame = 0;
+		const readOffset = () => {
+			offsetRef.current = probeRef.current?.offsetHeight ?? 0;
+		};
+		const update = () => {
+			frame = 0;
+			if (pausedRef.current) return;
+			const headings = ids.flatMap((id) => {
+				const el = document.getElementById(id);
+				return el ? [{
+					id,
+					top: el.getBoundingClientRect().top
+				}] : [];
+			});
+			const atBottom = window.innerHeight + window.scrollY >= document.documentElement.scrollHeight - 2;
+			setActiveId(pickActiveSection(headings, offsetRef.current + 1, atBottom));
+		};
+		const onScroll = () => {
+			if (!frame) frame = requestAnimationFrame(update);
+		};
+		const onResize = () => {
+			readOffset();
+			onScroll();
+		};
+		readOffset();
+		update();
+		window.addEventListener("scroll", onScroll, { passive: true });
+		window.addEventListener("resize", onResize);
+		return () => {
+			cancelAnimationFrame(frame);
+			window.removeEventListener("scroll", onScroll);
+			window.removeEventListener("resize", onResize);
+		};
+	}, [idKey]);
+	useEffect(() => () => resumeRef.current?.(), []);
+	if (items.length === 0) return null;
+	const onLinkClick = (event, id) => {
+		if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+		if (detailsRef.current) detailsRef.current.open = false;
+		const target = document.getElementById(id);
+		if (!target) return;
+		event.preventDefault();
+		window.scrollTo({
+			top: target.getBoundingClientRect().top + window.scrollY - offsetRef.current,
+			behavior: prefersReducedMotion() ? "auto" : "smooth"
+		});
+		let same = false;
+		try {
+			same = decodeURIComponent(location.hash.slice(1)) === id;
+		} catch {}
+		if (same) history.replaceState(null, "", `#${id}`);
+		else history.pushState(null, "", `#${id}`);
+		setActiveId(id);
+		resumeRef.current?.();
+		pausedRef.current = true;
+		const resume = () => {
+			pausedRef.current = false;
+			window.clearTimeout(timer);
+			window.removeEventListener("scrollend", resume);
+			resumeRef.current = void 0;
+		};
+		const timer = window.setTimeout(resume, 1e3);
+		window.addEventListener("scrollend", resume);
+		resumeRef.current = resume;
+		if (target.tabIndex < 0 && !target.hasAttribute("tabindex")) target.setAttribute("tabindex", "-1");
+		target.focus({ preventScroll: true });
+	};
+	const label = t("tableOfContents.label");
+	const activeLabel = items.find((item) => item.id === activeId)?.label;
+	const list = /* @__PURE__ */ jsx("ul", {
+		className: TableOfContents_module_default.list,
+		children: items.map((item) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", {
+			href: `#${item.id}`,
+			className: clsx(TableOfContents_module_default.link, item.level === 3 && TableOfContents_module_default.nested),
+			"aria-current": item.id === activeId ? "location" : void 0,
+			onClick: (event) => onLinkClick(event, item.id),
+			children: item.label
+		}) }, item.id))
+	});
+	return /* @__PURE__ */ jsxs("nav", {
+		ref,
+		"aria-label": label,
+		className: clsx(TableOfContents_module_default.root, className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			ref: probeRef,
+			className: TableOfContents_module_default.probe,
+			"aria-hidden": true
+		}), collapsed ? /* @__PURE__ */ jsxs("details", {
+			ref: detailsRef,
+			className: TableOfContents_module_default.details,
+			children: [/* @__PURE__ */ jsxs("summary", {
+				className: TableOfContents_module_default.summary,
+				children: [label, activeLabel ? ` · ${activeLabel}` : null]
+			}), list]
+		}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Text, {
+			size: "xs",
+			weight: "semibold",
+			tone: "muted",
+			"aria-hidden": true,
+			children: label
+		}), list] })]
+	});
+});
+export { TableOfContents };

package/dist/components/TableOfContents/TableOfContents.module.js

@@ -0,0 +1,19 @@
+import "./TableOfContents.css";
+// src/components/TableOfContents/TableOfContents.module.scss
+var root = "TableOfContents__root__uL0_x";
+var probe = "TableOfContents__probe__8Yyy6";
+var list = "TableOfContents__list__LiPs1";
+var link = "TableOfContents__link__vF5ZX";
+var nested = "TableOfContents__nested__znrPP";
+var summary = "TableOfContents__summary__xYgqe";
+var details = "TableOfContents__details__chzlm";
+var TableOfContents_module_default = {
+	root,
+	probe,
+	list,
+	link,
+	nested,
+	summary,
+	details
+};
+export { TableOfContents_module_default as default, details, link, list, nested, probe, root, summary };

package/dist/components/TableOfContents/activeSection.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Picks the heading the scroll-spy should highlight.
+ * `top` is viewport-relative (`getBoundingClientRect().top`); `line` is the
+ * viewport y that counts as "reached". Headings are in document order.
+ */
+export declare function pickActiveSection(headings: readonly {
+    id: string;
+    top: number;
+}[], line: number, atBottom: boolean): string | undefined;

package/dist/components/TableOfContents/activeSection.js

@@ -0,0 +1,14 @@
+// src/components/TableOfContents/activeSection.ts
+/**
+* Picks the heading the scroll-spy should highlight.
+* `top` is viewport-relative (`getBoundingClientRect().top`); `line` is the
+* viewport y that counts as "reached". Headings are in document order.
+*/
+function pickActiveSection(headings, line, atBottom) {
+	if (headings.length === 0) return void 0;
+	if (atBottom) return headings[headings.length - 1].id;
+	let active = headings[0].id;
+	for (const heading of headings) if (heading.top <= line) active = heading.id;
+	return active;
+}
+export { pickActiveSection };

package/dist/components/TableOfContents/index.d.ts

@@ -0,0 +1,2 @@
+export { TableOfContents } from './TableOfContents.js';
+export type { TableOfContentsItem, TableOfContentsProps } from './TableOfContents.js';

package/dist/components/Tabs/Tabs.css

@@ -0,0 +1,273 @@
+:root {
+  --tabs-gap: var(--space-1);
+  --tabs-border-color: var(--color-border);
+  --tabs-endcontent-gap: var(--space-2);
+  --tabs-cell-gap: var(--space-1);
+  --tabs-tab-padding-y: var(--space-2);
+  --tabs-tab-padding-x: var(--space-3);
+  --tabs-tab-gap: var(--space-2);
+  --tabs-tab-fg: var(--color-fg-muted);
+  --tabs-tab-fg-hover: var(--color-fg);
+  --tabs-tab-fg-active: var(--color-accent);
+  --tabs-tab-font-size: var(--font-size-md);
+  --tabs-tab-font-weight: var(--font-weight-medium);
+  --tabs-tab-ring: var(--ring-accent);
+  --tabs-tab-radius: var(--radius-sm);
+  --tabs-action-fg: var(--color-fg-subtle);
+  --tabs-action-opacity-disabled: var(--opacity-disabled);
+  --tabs-indicator-bg: var(--color-accent);
+  --tabs-vertical-gap: var(--space-1);
+  --tabs-vertical-tab-padding-y: var(--space-2);
+  --tabs-vertical-tab-padding-x: var(--space-3);
+  --tabs-vertical-tab-radius: var(--radius-sm);
+  --tabs-vertical-tab-bg-hover: var(--color-bg-muted);
+  --tabs-vertical-tab-bg-active: var(--color-accent-subtle-bg);
+  --tabs-vertical-indicator-width: var(--border-width-strong);
+  --tabs-vertical-indicator-radius: var(--radius-sm);
+  --tabs-count-bg: var(--color-bg-muted);
+  --tabs-count-fg: var(--color-fg-muted);
+  --tabs-count-bg-active: var(--color-accent-subtle-bg);
+  --tabs-count-fg-active: var(--color-accent);
+  --tabs-count-radius: var(--radius-sm);
+  --tabs-count-padding-x: var(--space-1);
+  --tabs-count-font-size: var(--font-size-xs);
+  --tabs-count-font-weight: var(--font-weight-semibold);
+}
+
+.Tabs__scrollWrap__LfkUW {
+  min-width: 0;
+  overflow-x: auto;
+}
+.Tabs__scrollWrap__LfkUW[data-fits]:not(.Tabs__scrollWrapVertical__4tqhB) {
+  overflow-x: hidden;
+}
+
+.Tabs__tabs__IOpuq {
+  position: relative;
+  display: inline-flex;
+  gap: var(--tabs-gap);
+  border-bottom: var(--border-width-emphasis) solid var(--tabs-border-color);
+  min-width: 100%;
+}
+
+.Tabs__tab__C64TX {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--tabs-tab-gap);
+  padding: var(--tabs-tab-padding-y) var(--tabs-tab-padding-x);
+  border: none;
+  background: transparent;
+  color: var(--tabs-tab-fg);
+  font-family: inherit;
+  font-size: var(--tabs-tab-font-size);
+  font-weight: var(--tabs-tab-font-weight);
+  cursor: pointer;
+  transition: color var(--transition-fast);
+}
+.Tabs__tab__C64TX:not(.Tabs__active__Ji4-a):hover {
+  color: var(--tabs-tab-fg-hover);
+}
+.Tabs__tab__C64TX:focus-visible {
+  outline: var(--ring-width) solid var(--tabs-tab-ring);
+  outline-offset: calc(-1 * var(--ring-offset));
+  border-radius: var(--tabs-tab-radius);
+}
+
+.Tabs__active__Ji4-a {
+  color: var(--tabs-tab-fg-active);
+}
+
+.Tabs__action__NYIFa {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--tabs-tab-gap);
+  padding: var(--tabs-tab-padding-y) var(--tabs-tab-padding-x);
+  border: none;
+  background: transparent;
+  color: var(--tabs-action-fg);
+  font-family: inherit;
+  font-size: var(--tabs-tab-font-size);
+  font-weight: var(--tabs-tab-font-weight);
+  cursor: pointer;
+  transition: color var(--transition-fast);
+}
+.Tabs__action__NYIFa:hover:not(:disabled) {
+  color: var(--tabs-tab-fg-hover);
+}
+.Tabs__action__NYIFa:focus-visible {
+  outline: var(--ring-width) solid var(--tabs-tab-ring);
+  outline-offset: calc(-1 * var(--ring-offset));
+  border-radius: var(--tabs-tab-radius);
+}
+.Tabs__action__NYIFa:disabled {
+  opacity: var(--tabs-action-opacity-disabled);
+  cursor: not-allowed;
+}
+
+.Tabs__icon__ulrTX {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: inherit;
+}
+
+.Tabs__main__wzzmq {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--tabs-tab-gap);
+  min-width: 0;
+}
+
+.Tabs__label__qV9VW {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.Tabs__leading__3Lf1K,
+.Tabs__trailing__gJt9Z {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.Tabs__count__7CVbq {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--size-badge);
+  height: var(--size-chip);
+  padding: 0 var(--tabs-count-padding-x);
+  border-radius: var(--tabs-count-radius);
+  background: var(--tabs-count-bg);
+  color: var(--tabs-count-fg);
+  font-size: var(--tabs-count-font-size);
+  font-weight: var(--tabs-count-font-weight);
+}
+.Tabs__active__Ji4-a .Tabs__count__7CVbq {
+  background: var(--tabs-count-bg-active);
+  color: var(--tabs-count-fg-active);
+}
+
+.Tabs__indicator__vZQJF {
+  position: absolute;
+  left: 0;
+  bottom: calc(-1 * var(--border-width-emphasis));
+  height: var(--border-width-emphasis);
+  width: 0;
+  background: var(--tabs-indicator-bg);
+  transform: translateX(0);
+  transition: transform var(--transition-base), width var(--transition-base), height var(--transition-base);
+  will-change: transform, width, height;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .Tabs__indicator__vZQJF {
+    transition: none;
+  }
+}
+.Tabs__scrollWrapVertical__4tqhB {
+  overflow-x: visible;
+}
+
+.Tabs__vertical__c2YKR {
+  flex-direction: column;
+  gap: var(--tabs-vertical-gap);
+  border-bottom: none;
+  width: 100%;
+}
+.Tabs__vertical__c2YKR .Tabs__tab__C64TX {
+  width: 100%;
+  justify-content: space-between;
+  padding: var(--tabs-vertical-tab-padding-y) var(--tabs-vertical-tab-padding-x);
+  border-radius: var(--tabs-vertical-tab-radius);
+  text-align: left;
+  transition: color var(--transition-fast), background var(--transition-fast);
+}
+.Tabs__vertical__c2YKR .Tabs__tab__C64TX:not(.Tabs__active__Ji4-a):hover {
+  background: var(--tabs-vertical-tab-bg-hover);
+}
+.Tabs__vertical__c2YKR .Tabs__active__Ji4-a {
+  background: var(--tabs-vertical-tab-bg-active);
+}
+.Tabs__vertical__c2YKR .Tabs__action__NYIFa {
+  width: 100%;
+  justify-content: flex-start;
+  padding: var(--tabs-vertical-tab-padding-y) var(--tabs-vertical-tab-padding-x);
+  border-radius: var(--tabs-vertical-tab-radius);
+  text-align: left;
+  transition: color var(--transition-fast), background var(--transition-fast);
+}
+.Tabs__vertical__c2YKR .Tabs__action__NYIFa:hover:not(:disabled) {
+  background: var(--tabs-vertical-tab-bg-hover);
+}
+.Tabs__vertical__c2YKR .Tabs__indicator__vZQJF {
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  bottom: auto;
+  width: var(--tabs-vertical-indicator-width);
+  height: 0;
+  border-radius: var(--tabs-vertical-indicator-radius);
+}
+.Tabs__vertical__c2YKR .Tabs__cell__Nk7fD {
+  width: 100%;
+  justify-content: space-between;
+  padding-inline-end: var(--tabs-vertical-tab-padding-x);
+}
+.Tabs__vertical__c2YKR .Tabs__cell__Nk7fD > .Tabs__tab__C64TX {
+  flex: 0 1 auto;
+  width: auto;
+}
+.Tabs__vertical__c2YKR .Tabs__cell__Nk7fD:has(> .Tabs__tab__C64TX.Tabs__active__Ji4-a) {
+  background: var(--tabs-vertical-tab-bg-active);
+  border-radius: var(--tabs-vertical-tab-radius);
+}
+.Tabs__vertical__c2YKR .Tabs__cell__Nk7fD > .Tabs__tab__C64TX.Tabs__active__Ji4-a {
+  background: transparent;
+}
+
+.Tabs__root__8rLb9 {
+  display: flex;
+  align-items: flex-end;
+}
+.Tabs__root__8rLb9 .Tabs__scrollWrap__LfkUW {
+  flex: 1;
+  min-width: 0;
+}
+
+.Tabs__endContent__K6acZ {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  padding-inline-start: var(--tabs-endcontent-gap);
+  border-bottom: var(--border-width-emphasis) solid var(--tabs-border-color);
+}
+
+.Tabs__rootVertical__mkM2j {
+  flex-direction: column;
+  align-items: flex-start;
+}
+.Tabs__rootVertical__mkM2j .Tabs__scrollWrap__LfkUW {
+  flex: initial;
+  width: 100%;
+}
+.Tabs__rootVertical__mkM2j .Tabs__endContent__K6acZ {
+  padding-inline-start: var(--tabs-endcontent-gap);
+  justify-content: flex-start;
+  border-bottom: none;
+  transform: translateX(calc(-1 * var(--tabs-endcontent-gap)));
+}
+
+.Tabs__cell__Nk7fD {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--tabs-cell-gap);
+  padding-inline-end: var(--tabs-tab-padding-x);
+}
+
+.Tabs__tabActions__YbQGj {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}