@drivenets/design-system 0.14.0 → 0.16.0

package/src/components/ds-toggle/ds-toggle.figma.ts

@@ -0,0 +1,39 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=15035-29699
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-toggle
+// component=DsToggle
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const on = instance.getEnum('On', {
+	Yes: 'yes',
+	No: 'no',
+});
+
+const size = instance.getEnum('Size', {
+	Default: 'default',
+	Small: 'small',
+});
+
+const state = instance.getEnum('State', {
+	Default: 'default',
+	Hover: 'hover',
+	Focus: 'focus',
+	Disabled: 'disabled',
+});
+
+const attrs = [
+	'label="Label"',
+	size === 'small' ? 'size="small"' : '',
+	on === 'yes' ? 'checked' : '',
+	state === 'disabled' ? 'disabled' : '',
+]
+	.filter(Boolean)
+	.join(' ');
+
+export default {
+	example: figma.code`<DsToggle ${attrs} />`,
+	imports: ["import { DsToggle } from '@drivenets/design-system'"],
+	id: 'ds-toggle',
+	metadata: { nestable: true },
+};

package/src/components/ds-toggle/ds-toggle.tsx

@@ -75,4 +75,6 @@ const DsToggle = ({
 	);
 };
 
+DsToggle.displayName = 'DsToggle';
+
 export default DsToggle;

package/src/components/ds-tooltip/ds-tooltip.figma.ts

@@ -0,0 +1,16 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=14845-9203
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-tooltip
+// component=DsTooltip
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const labelNode = instance.findText('Tooltip', { traverseInstances: true });
+const content = labelNode.type === 'TEXT' ? labelNode.textContent : 'Tooltip text';
+
+export default {
+	example: figma.code`<DsTooltip content="${content}">{/* trigger element */}</DsTooltip>`,
+	imports: ["import { DsTooltip } from '@drivenets/design-system'"],
+	id: 'ds-tooltip',
+	metadata: { nestable: false },
+};

package/src/components/ds-tooltip/ds-tooltip.module.scss

@@ -1,4 +1,7 @@
+@use '../../styles/typography';
+
 .tooltip {
+	--arrow-size: 7px;
 	color: var(--font-on-action);
 	background-color: var(--background-brand);
 	padding: var(--xs) var(--sm);
@@ -8,6 +11,10 @@
 	z-index: 9999;
 }
 
+.text {
+	@include typography.body-xs-reg;
+}
+
 .arrow {
-	fill: var(--color-dap-gray-700);
+	--arrow-background: var(--color-dap-gray-700);
 }

package/src/components/ds-tooltip/ds-tooltip.tsx

@@ -1,33 +1,53 @@
 import { type FC, isValidElement } from 'react';
-import * as Tooltip from '@radix-ui/react-tooltip';
+import { Tooltip } from '@ark-ui/react/tooltip';
+import { Portal } from '@ark-ui/react/portal';
 import classNames from 'classnames';
 import styles from './ds-tooltip.module.scss';
 import type { DsTooltipProps } from './ds-tooltip.types';
-import { DsTypography } from '../ds-typography';
 
-const DsTooltip: FC<DsTooltipProps> = ({ content, children, slotProps }) => {
+const OPEN_DELAY_MS = 200;
+const CLOSE_DELAY_MS = 0;
+const TOOLTIP_GUTTER_PX = 0;
+
+const DsTooltip: FC<DsTooltipProps> = ({
+	content,
+	children,
+	placement = 'top',
+	disabled = false,
+	getAnchorRect,
+	slotProps,
+}) => {
 	if (content === undefined) {
 		return children;
 	}
+
 	return (
-		<Tooltip.Provider delayDuration={200}>
-			<Tooltip.Root>
-				<Tooltip.Trigger asChild>{children}</Tooltip.Trigger>
-				<Tooltip.Portal>
+		<Tooltip.Root
+			openDelay={OPEN_DELAY_MS}
+			closeDelay={CLOSE_DELAY_MS}
+			disabled={disabled}
+			positioning={{ placement, gutter: TOOLTIP_GUTTER_PX, getAnchorRect: getAnchorRect ?? undefined }}
+			lazyMount
+			unmountOnExit
+		>
+			<Tooltip.Trigger asChild>{children}</Tooltip.Trigger>
+			<Portal>
+				<Tooltip.Positioner>
 					<Tooltip.Content
 						className={classNames(styles.tooltip, slotProps?.content?.className)}
 						style={slotProps?.content?.style}
-						side="top"
-						align="center"
-						sideOffset={4}
 					>
-						{isValidElement(content) ? content : <DsTypography variant="body-xs-reg">{content}</DsTypography>}
-						<Tooltip.Arrow className={styles.arrow} />
+						{isValidElement(content) ? content : <span className={styles.text}>{content}</span>}
+						<Tooltip.Arrow className={styles.arrow}>
+							<Tooltip.ArrowTip />
+						</Tooltip.Arrow>
 					</Tooltip.Content>
-				</Tooltip.Portal>
-			</Tooltip.Root>
-		</Tooltip.Provider>
+				</Tooltip.Positioner>
+			</Portal>
+		</Tooltip.Root>
 	);
 };
 
+DsTooltip.displayName = 'DsTooltip';
+
 export default DsTooltip;

package/src/components/ds-tooltip/ds-tooltip.types.ts

@@ -1,5 +1,32 @@
 import type { CSSProperties, ReactNode } from 'react';
 
+export const tooltipPlacements = [
+	'top',
+	'top-start',
+	'top-end',
+	'bottom',
+	'bottom-start',
+	'bottom-end',
+	'left',
+	'left-start',
+	'left-end',
+	'right',
+	'right-start',
+	'right-end',
+] as const;
+
+export type TooltipPlacement = (typeof tooltipPlacements)[number];
+
+/**
+ * Viewport-relative rect (CSS pixels) the tooltip anchors to, instead of the trigger.
+ */
+export interface TooltipAnchorRect {
+	x: number;
+	y: number;
+	width: number;
+	height: number;
+}
+
 export interface DsTooltipProps {
 	/**
 	 * Tooltip content
@@ -9,6 +36,19 @@ export interface DsTooltipProps {
 	 * The content to be rendered inside the tooltip
 	 */
 	children: ReactNode;
+	/**
+	 * Placement relative to the trigger; `-start` / `-end` align to that edge.
+	 */
+	placement?: TooltipPlacement;
+	/**
+	 * When true the trigger renders but the tooltip never opens.
+	 */
+	disabled?: boolean;
+	/**
+	 * Anchors the tooltip to a virtual rect instead of the trigger, re-evaluated on
+	 * each reposition. Return `null` to fall back to the trigger.
+	 */
+	getAnchorRect?: () => TooltipAnchorRect | null;
 	/**
 	 * Props forwarded to nested sub-components.
 	 */

package/src/components/ds-tree/ds-tree.tsx

@@ -153,6 +153,22 @@ const DsTreeItemAction = ({ className, style, children, onClick }: DsTreeItemAct
 	</button>
 );
 
+DsTreeRoot.displayName = 'DsTree.Root';
+DsTreeTree.displayName = 'DsTree.Tree';
+Object.defineProperty(TreeView.NodeProvider, 'displayName', { value: 'DsTree.NodeProvider' });
+Object.defineProperty(TreeView.NodeContext, 'displayName', { value: 'DsTree.NodeContext' });
+DsTreeBranch.displayName = 'DsTree.Branch';
+DsTreeBranchControl.displayName = 'DsTree.BranchControl';
+DsTreeBranchIndicator.displayName = 'DsTree.BranchIndicator';
+DsTreeBranchText.displayName = 'DsTree.BranchText';
+DsTreeBranchContent.displayName = 'DsTree.BranchContent';
+DsTreeBranchIndentGuide.displayName = 'DsTree.BranchIndentGuide';
+DsTreeItem.displayName = 'DsTree.Item';
+DsTreeItemText.displayName = 'DsTree.ItemText';
+DsTreeItemIndicator.displayName = 'DsTree.ItemIndicator';
+DsTreeItemAction.displayName = 'DsTree.ItemAction';
+DsTreeNodeCheckbox.displayName = 'DsTree.NodeCheckbox';
+
 export const DsTree = {
 	Root: DsTreeRoot,
 	Tree: DsTreeTree,

package/src/components/ds-typography/ds-typography.config.ts

@@ -30,7 +30,7 @@ export const typographyVariantConfig = {
 	heading4: { element: 'h4', component: ark.h4 },
 } as const;
 
-/** Semantic text colors backed by `--font-*` tokens in `_root_new.scss`. */
+/** Semantic text colors backed by `--font-*` tokens in `_root.scss`. */
 export const typographyColors = [
 	'main',
 	'secondary',

package/src/components/ds-typography/ds-typography.figma.ts

@@ -0,0 +1,63 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=39324-248
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-typography
+// component=DsTypography
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const variant = instance.getEnum('font-style', {
+	heading1: 'heading1',
+	heading2: 'heading2',
+	heading3: 'heading3',
+	heading4: 'heading4',
+	'body-md-reg': 'body-md-reg',
+	'body-md-md': 'body-md-md',
+	'body-md-semi-bold': 'body-md-semi-bold',
+	'body-md-bold': 'body-md-bold',
+	'body-md-link': 'body-md-link',
+	'body-sm-reg': 'body-sm-reg',
+	'body-sm-md': 'body-sm-md',
+	'body-sm-semi-bold': 'body-sm-semi-bold',
+	'body-sm-bold': 'body-sm-bold',
+	'body-sm-link': 'body-sm-link',
+	'body-xs-reg': 'body-xs-reg',
+	'body-xs-md': 'body-xs-md',
+	'body-xs-semi-bold': 'body-xs-semi-bold',
+	'body-xs-bold': 'body-xs-bold',
+	'body-xs-link': 'body-xs-link',
+	'code-sm-reg': 'code-sm-reg',
+	'code-sm-semi-bold': 'code-sm-semi-bold',
+	'code-xs-reg': 'code-xs-reg',
+	'code-xs-semi-bold': 'code-xs-semi-bold',
+});
+
+const color = instance.getEnum('color', {
+	main: 'main',
+	secondary: 'secondary',
+	action: 'action',
+	'action-hover': 'action-hover',
+	'action-secondary': 'action-secondary',
+	'action-secondary-hover': 'action-secondary-hover',
+	disabled: 'disabled',
+	'light-disabled': 'light-disabled',
+	'on-action': 'on-action',
+	'on-disabled': 'on-disabled',
+	placeholder: 'placeholder',
+	highlight: 'highlight',
+	success: 'success',
+	warning: 'warning',
+	error: 'error',
+	code: 'code',
+});
+
+const textNode = instance.children.find((child): child is figma.TextHandle => child.type === 'TEXT');
+const text = textNode?.textContent ?? 'Text';
+
+const colorProp = color === 'main' ? '' : figma.code` color="${color}"`;
+
+export default {
+	example: figma.code`<DsTypography variant="${variant}"${colorProp}>${text}</DsTypography>`,
+	imports: ["import { DsTypography } from '@drivenets/design-system'"],
+	id: 'ds-typography',
+	metadata: { nestable: true },
+};

package/src/components/ds-typography/ds-typography.module.scss

@@ -1,5 +1,21 @@
 @use '../../styles/typography';
 
+.truncateSingle {
+	display: block;
+	max-width: 100%;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+
+.truncateMultiline {
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: var(--ds-typography-line-clamp);
+	line-clamp: var(--ds-typography-line-clamp);
+	overflow: hidden;
+}
+
 .heading1 {
 	@include typography.heading1;
 }

package/src/components/ds-typography/ds-typography.tsx

@@ -1,6 +1,10 @@
+import { type CSSProperties, useRef } from 'react';
 import classNames from 'classnames';
 import type { DsTypographyProps } from './ds-typography.types';
 import { typographyColors, typographyVariantConfig } from './ds-typography.config';
+import { useTruncation } from './hooks/use-truncation';
+import { mergeRefs } from '../../utils/merge-refs';
+import { DsTooltip } from '../ds-tooltip';
 import styles from './ds-typography.module.scss';
 
 const semanticColorSet = new Set<string>(typographyColors);
@@ -8,6 +12,9 @@ const semanticColorSet = new Set<string>(typographyColors);
 const resolveColor = (color: string): string =>
 	semanticColorSet.has(color) ? `var(--font-${color})` : color;
 
+const resolveLineClamp = (truncate: boolean | number): number =>
+	typeof truncate === 'number' ? Math.max(1, Math.floor(truncate)) : 1;
+
 /*
  * Design system Typography component that provides consistent text styling
  */
@@ -18,25 +25,75 @@ const DsTypography = ({
 	className,
 	style,
 	color,
+	truncate = false,
+	tooltip = false,
+	tooltipContent,
 	children,
 	...props
 }: DsTypographyProps) => {
 	const Component = typographyVariantConfig[variant].component;
 
-	return (
+	const internalRef = useRef<HTMLElement>(null);
+
+	const truncationEnabled = truncate !== false;
+	const lineClamp = resolveLineClamp(truncate);
+	const isMultiline = truncationEnabled && lineClamp > 1;
+
+	const tooltipEnabled = truncationEnabled && tooltip;
+	const { isTruncated, getAnchorRect } = useTruncation(internalRef, tooltipEnabled, [children, truncate]);
+
+	let resolvedStyle: CSSProperties | undefined;
+
+	if (color || isMultiline || style) {
+		resolvedStyle = {};
+
+		if (color) {
+			resolvedStyle.color = resolveColor(color);
+		}
+
+		if (isMultiline) {
+			Object.assign(resolvedStyle, { '--ds-typography-line-clamp': lineClamp });
+		}
+
+		if (style) {
+			Object.assign(resolvedStyle, style);
+		}
+	}
+
+	const truncateClass = truncationEnabled
+		? isMultiline
+			? styles.truncateMultiline
+			: styles.truncateSingle
+		: undefined;
+
+	const element = (
 		<Component
-			// very dynamic ref in here
-			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-			// @ts-expect-error
-			ref={ref}
+			ref={mergeRefs(ref, internalRef)}
 			asChild={asChild}
-			className={classNames(styles[variant], className)}
-			style={color ? { color: resolveColor(color), ...style } : style}
+			className={classNames(styles[variant], truncateClass, className)}
+			style={resolvedStyle}
 			{...props}
 		>
 			{children}
 		</Component>
 	);
+
+	if (!tooltipEnabled) {
+		return element;
+	}
+
+	return (
+		<DsTooltip
+			content={tooltipContent ?? children}
+			placement="top"
+			disabled={!isTruncated}
+			getAnchorRect={getAnchorRect}
+		>
+			{element}
+		</DsTooltip>
+	);
 };
 
+DsTypography.displayName = 'DsTypography';
+
 export default DsTypography;

package/src/components/ds-typography/ds-typography.types.ts

@@ -31,6 +31,19 @@ export interface DsTypographyProps {
 	 * When true, composes typography styles onto the child element without extra DOM nodes
 	 */
 	asChild?: boolean;
+	/**
+	 * Truncates overflowing text with an ellipsis. A number clamps to that many lines
+	 * (`true` is a single line). Needs a width-constrained layout context.
+	 */
+	truncate?: boolean | number;
+	/**
+	 * Reveals the full text in a tooltip on hover/focus, but only while it overflows.
+	 */
+	tooltip?: boolean;
+	/**
+	 * Tooltip content override; defaults to `children`.
+	 */
+	tooltipContent?: React.ReactNode;
 	/**
 	 * The content of the component
 	 */

package/src/components/ds-typography/hooks/use-truncation.ts

@@ -0,0 +1,151 @@
+import { type RefObject, useCallback, useLayoutEffect, useState } from 'react';
+import type { TooltipAnchorRect } from '../../ds-tooltip';
+
+const OVERFLOW_TOLERANCE_PX = 1;
+const FALLBACK_LINE_HEIGHT_RATIO = 1.2;
+const DEFAULT_FONT_SIZE_PX = 16;
+const ELLIPSIS = '\u2026';
+
+interface Truncation {
+	isTruncated: boolean;
+	getAnchorRect: () => TooltipAnchorRect | null;
+}
+
+const ellipsisWidthCache = new Map<string, number>();
+let ellipsisMeasureSpan: HTMLSpanElement | null = null;
+
+const measureEllipsisWidth = (computed: CSSStyleDeclaration): number => {
+	const cacheKey = `${computed.fontStyle}|${computed.fontWeight}|${computed.fontSize}|${computed.fontFamily}|${computed.letterSpacing}`;
+	const cached = ellipsisWidthCache.get(cacheKey);
+
+	if (cached !== undefined) {
+		return cached;
+	}
+
+	ellipsisMeasureSpan ??= document.createElement('span');
+	const span = ellipsisMeasureSpan;
+
+	span.textContent = ELLIPSIS;
+	span.style.position = 'absolute';
+	span.style.visibility = 'hidden';
+	span.style.whiteSpace = 'pre';
+	span.style.fontStyle = computed.fontStyle;
+	span.style.fontWeight = computed.fontWeight;
+	span.style.fontSize = computed.fontSize;
+	span.style.fontFamily = computed.fontFamily;
+	span.style.letterSpacing = computed.letterSpacing;
+
+	document.body.appendChild(span);
+	const width = span.getBoundingClientRect().width;
+	span.remove();
+
+	ellipsisWidthCache.set(cacheKey, width);
+	return width;
+};
+
+let measureRange: Range | null = null;
+
+const measureFittingPrefixRight = (textNode: Text, maxRight: number): number => {
+	measureRange ??= document.createRange();
+	const range = measureRange;
+
+	let low = 0;
+	let high = textNode.length;
+	let fittingLength = 0;
+
+	while (low <= high) {
+		const mid = (low + high) >>> 1;
+		range.setStart(textNode, 0);
+		range.setEnd(textNode, mid);
+
+		if (range.getBoundingClientRect().right <= maxRight) {
+			fittingLength = mid;
+			low = mid + 1;
+		} else {
+			high = mid - 1;
+		}
+	}
+
+	range.setStart(textNode, 0);
+	range.setEnd(textNode, fittingLength);
+	return range.getBoundingClientRect().right;
+};
+
+const getFirstTextNode = (element: HTMLElement): Text | null =>
+	element.firstChild instanceof Text ? element.firstChild : null;
+
+export const useTruncation = (
+	ref: RefObject<HTMLElement | null>,
+	enabled: boolean,
+	deps: readonly unknown[] = [],
+): Truncation => {
+	const [isTruncated, setIsTruncated] = useState(false);
+
+	useLayoutEffect(() => {
+		const element = ref.current;
+
+		if (!enabled || !element) {
+			setIsTruncated(false);
+			return;
+		}
+
+		const measure = () => {
+			const overflowsHorizontally = element.scrollWidth - element.clientWidth > OVERFLOW_TOLERANCE_PX;
+			const overflowsVertically = element.scrollHeight - element.clientHeight > OVERFLOW_TOLERANCE_PX;
+
+			setIsTruncated(overflowsHorizontally || overflowsVertically);
+		};
+
+		const rafId = requestAnimationFrame(measure);
+
+		const resizeObserver = new ResizeObserver(() => requestAnimationFrame(measure));
+		resizeObserver.observe(element);
+
+		return () => {
+			cancelAnimationFrame(rafId);
+			resizeObserver.disconnect();
+		};
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ref, enabled, ...deps]);
+
+	const getAnchorRect = useCallback((): TooltipAnchorRect | null => {
+		const element = ref.current;
+
+		if (!element) {
+			return null;
+		}
+
+		const rect = element.getBoundingClientRect();
+		const computed = getComputedStyle(element);
+
+		const paddingRight = parseFloat(computed.paddingRight) || 0;
+		const borderRight = parseFloat(computed.borderRightWidth) || 0;
+		const paddingBottom = parseFloat(computed.paddingBottom) || 0;
+		const borderBottom = parseFloat(computed.borderBottomWidth) || 0;
+
+		const fontSize = parseFloat(computed.fontSize) || DEFAULT_FONT_SIZE_PX;
+		const lineHeight = parseFloat(computed.lineHeight) || fontSize * FALLBACK_LINE_HEIGHT_RATIO;
+
+		const contentRight = rect.right - paddingRight - borderRight;
+		const ellipsisWidth = measureEllipsisWidth(computed);
+
+		const textNode = getFirstTextNode(element);
+		const isSingleLine = computed.whiteSpace === 'nowrap';
+
+		const ellipsisCenterX =
+			isSingleLine && textNode
+				? measureFittingPrefixRight(textNode, contentRight - ellipsisWidth) + ellipsisWidth / 2
+				: contentRight - ellipsisWidth / 2;
+
+		const lastLineBottom = rect.bottom - paddingBottom - borderBottom;
+
+		return {
+			x: ellipsisCenterX,
+			y: lastLineBottom - lineHeight,
+			width: 0,
+			height: lineHeight,
+		};
+	}, [ref]);
+
+	return { isTruncated, getAnchorRect };
+};

package/src/components/ds-user-card/ds-user-card.figma.ts

@@ -0,0 +1,16 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=38540-44159
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-user-card
+// component=DsUserCard
+//
+// `DAP_user-menu-header_v01` (#38540:44159) is a plain composed instance with no
+// variant props, so it maps directly to `DsUserCard`. `name` and `subtitle` are text
+// content and `src` is a photo URL — none are derivable from Figma — so they are
+// emitted as placeholders for the developer to fill in (see `ds-select.figma.ts`).
+import figma from 'figma';
+
+export default {
+	example: figma.code`<DsUserCard name="Full Name" subtitle="subtitle" />`,
+	imports: ["import { DsUserCard } from '@drivenets/design-system'"],
+	id: 'ds-user-card',
+	metadata: { nestable: true },
+};

package/src/components/ds-user-card/ds-user-card.module.scss

@@ -0,0 +1,25 @@
+.userCard {
+	display: flex;
+	align-items: center;
+	gap: var(--xs);
+	padding: var(--sm);
+	border-bottom: 1px solid var(--border-secondary);
+}
+
+.text {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	gap: var(--3xs);
+	padding-top: var(--4xs);
+	min-width: 0;
+}
+
+.name,
+.subtitle {
+	display: block;
+	max-width: 100%;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}

package/src/components/ds-user-card/ds-user-card.tsx

@@ -0,0 +1,31 @@
+import type { FC } from 'react';
+import classNames from 'classnames';
+import styles from './ds-user-card.module.scss';
+import type { DsUserCardProps } from './ds-user-card.types';
+import { DsAvatar } from '../ds-avatar';
+import { DsTypography } from '../ds-typography';
+
+/**
+ * @summary Compact identity header pairing an avatar with a name and optional subtitle.
+ *
+ * Presentational card used as the header of a user menu. Renders a medium
+ * `DsAvatar` (initials fallback derived from `name`) beside a two-line text
+ * block; both lines truncate with an ellipsis when they overflow.
+ */
+export const DsUserCard: FC<DsUserCardProps> = ({ name, subtitle, src, className, style }) => {
+	return (
+		<div className={classNames(styles.userCard, className)} style={style}>
+			<DsAvatar name={name} src={src} size="md" />
+			<div className={styles.text}>
+				<DsTypography variant="heading4" color="main" className={styles.name}>
+					{name}
+				</DsTypography>
+				{subtitle && (
+					<DsTypography variant="body-xs-reg" color="secondary" className={styles.subtitle}>
+						{subtitle}
+					</DsTypography>
+				)}
+			</div>
+		</div>
+	);
+};