@juspay/blend-design-system 0.0.37-beta.2 → 0.0.37-beta.3

package/lib/components/KeyValuePair/accessibility/KeyValuePairAccessibilityReport.ts

@@ -0,0 +1,317 @@
+/**
+ * KeyValuePair Component Accessibility Report Data
+ * WCAG 2.0, 2.1, 2.2 Level AA Compliance Analysis
+ *
+ * Note: Items marked with "unsure" require manual verification
+ * All WCAG criteria evaluated based on component implementation and test coverage
+ */
+
+import type { AccessibilityReport } from '../../Button/accessibility/ButtonAccessibilityReport'
+
+export const keyValuePairAccessibilityReport: AccessibilityReport = {
+    componentName: 'KeyValuePair',
+    wcagVersion: '2.1',
+    reportDate: new Date().toISOString().split('T')[0],
+    conformanceLevel: 'Level AA',
+    overallStatus: 'compliant',
+    summary:
+        'The KeyValuePair component demonstrates full compliance with WCAG 2.0, 2.1, and 2.2 Level AA standards. The component uses semantic HTML structure with role="group", role="term", and role="definition" to establish key-value relationships. It provides proper ARIA attributes (aria-label, aria-labelledby) for programmatic relationships, supports text overflow handling with accessible tooltips, and maintains logical reading order. The component fully meets Level A requirements, fully meets Level AA requirements, and partially meets Level AAA requirements. Currently compliant AAA criteria: 1.4.8 Visual Presentation, 1.4.9 Images of Text, 2.1.3 Keyboard (No Exception), 2.2.3 No Timing, 2.2.4 Interruptions, 3.2.5 Change on Request. Non-compliant AAA criteria: 1.4.6 Contrast (Enhanced) - requires 7:1 contrast ratio (currently designed for AA standard of 4.5:1), 2.5.5 Target Size - Interactive elements in slots (buttons, links) may not meet 44x44px minimum for AAA compliance. To achieve full AAA compliance, ensure all interactive elements in slots meet 44x44px minimum touch target size and verify contrast ratios meet AAA standard of 7:1.',
+    criteria: [
+        {
+            id: '1.1.1',
+            level: 'A',
+            title: 'Non-text Content',
+            status: 'compliant',
+            description:
+                'All non-text content that is presented to the user has a text alternative that serves the equivalent purpose.',
+            implementation:
+                'Decorative icons in slots should be marked with aria-hidden="true" by users. Interactive elements in slots (buttons, links) maintain their own accessible names. Key and value text provide text alternatives for all information.',
+            testResults:
+                'Verified: Users add aria-hidden="true" to decorative icons. Interactive elements maintain accessibility. Confirmed in KeyValuePair.accessibility.test.tsx (lines 119-160).',
+        },
+        {
+            id: '1.3.1',
+            level: 'A',
+            title: 'Info and Relationships',
+            status: 'compliant',
+            description:
+                'Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.',
+            implementation:
+                'Component uses semantic HTML structure with role="group" for container, role="term" for key, and role="definition" for value. Key-value relationship established via aria-labelledby linking value to key. Unique IDs generated using React useId() hook for stable relationships.',
+            testResults:
+                'Verified: Proper semantic structure with roles and aria-labelledby relationships. Confirmed in KeyValuePair.tsx (lines 155-207) and KeyValuePair.accessibility.test.tsx (lines 73-117).',
+        },
+        {
+            id: '1.3.2',
+            level: 'A',
+            title: 'Meaningful Sequence',
+            status: 'compliant',
+            description:
+                'When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.',
+            implementation:
+                'Key-value pairs maintain logical reading order: key appears before value in both vertical and horizontal layouts. DOM order matches visual presentation. Slots maintain logical position (keySlot before key, valueLeftSlot before value, valueRightSlot after value).',
+            testResults:
+                'Verified: Logical reading order maintained in both vertical and horizontal layouts. Confirmed in KeyValuePair.accessibility.test.tsx (lines 260-310).',
+        },
+        {
+            id: '1.4.1',
+            level: 'A',
+            title: 'Use of Color',
+            status: 'compliant',
+            description:
+                'Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.',
+            implementation:
+                'Key-value pairs use text labels to convey information, not solely color. Icons in slots are supplementary and have text alternatives. Information is conveyed through text content primarily.',
+            testResults:
+                'Verified: Information conveyed through text, not solely by color. Confirmed in KeyValuePair.accessibility.test.tsx (lines 162-179).',
+        },
+        {
+            id: '1.4.3',
+            level: 'AA',
+            title: 'Contrast (Minimum)',
+            status: 'compliant',
+            description:
+                'The visual presentation of text and images of text has a contrast ratio of at least 4.5:1.',
+            implementation:
+                'Text colors (key and value) use theme tokens that meet WCAG AA contrast requirements (4.5:1 for normal text). Colors are inherited from theme configuration ensuring sufficient contrast.',
+            testResults:
+                'Verified: Automated axe-core tests confirm sufficient contrast. Confirmed in KeyValuePair.accessibility.test.tsx (lines 55-70, 181-198).',
+        },
+        {
+            id: '1.4.4',
+            level: 'AA',
+            title: 'Resize Text',
+            status: 'compliant',
+            description:
+                'Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.',
+            implementation:
+                'Component uses relative font sizes (rem/em) and flexible layouts. Text overflow modes (truncate, wrap, wrap-clamp) allow text to scale without loss of functionality. maxWidth can be adjusted for responsive behavior.',
+            testResults:
+                'Verified: Text scales up to 200% without loss of content or functionality. Confirmed in KeyValuePair.accessibility.test.tsx (lines 200-218).',
+        },
+        {
+            id: '1.4.11',
+            level: 'AA',
+            title: 'Non-text Contrast',
+            status: 'compliant',
+            description:
+                'The visual presentation of user interface components and graphical objects has a contrast ratio of at least 3:1 against adjacent colors.',
+            implementation:
+                'Icons in slots, borders, and visual separators use theme colors with sufficient contrast (3:1). Visual indicators are clearly distinguishable from background.',
+            testResults:
+                'Verified: Non-text contrast meets AA requirements. Theme tokens ensure sufficient contrast for visual elements.',
+        },
+        {
+            id: '2.4.6',
+            level: 'AA',
+            title: 'Headings and Labels',
+            status: 'compliant',
+            description: 'Headings and labels describe topic or purpose.',
+            implementation:
+                'Key labels (keyString prop) serve as descriptive labels for values. Labels are contextually appropriate and describe the purpose of the associated value. Empty values are handled gracefully.',
+            testResults:
+                'Verified: Key labels are descriptive and contextually appropriate. Confirmed in KeyValuePair.accessibility.test.tsx (lines 220-235).',
+        },
+        {
+            id: '4.1.2',
+            level: 'A',
+            title: 'Name, Role, Value',
+            status: 'compliant',
+            description:
+                'For all user interface components, the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.',
+            implementation:
+                'Component has role="group" with aria-label describing the key-value pair. Key has role="term" with aria-label. Value has role="definition" with aria-labelledby linking to key. All text content is programmatically determinable.',
+            testResults:
+                'Verified: Roles and accessible names are programmatically determinable. Key-value relationship established via aria-labelledby. Confirmed in KeyValuePair.tsx (lines 155-207) and KeyValuePair.accessibility.test.tsx (lines 237-258).',
+        },
+        {
+            id: '1.4.6',
+            level: 'AAA',
+            title: 'Contrast (Enhanced)',
+            status: 'non-compliant',
+            description:
+                'The visual presentation of text and images of text has a contrast ratio of at least 7:1.',
+            implementation:
+                'Text colors are designed for WCAG AA standard (4.5:1 contrast ratio). To meet AAA standard, contrast ratios need to be increased to 7:1. This would require updating theme tokens.',
+            testResults:
+                'Non-compliant: Current design meets AA standard (4.5:1) but not AAA standard (7:1). Requires theme token updates for AAA compliance.',
+        },
+        {
+            id: '1.4.8',
+            level: 'AAA',
+            title: 'Visual Presentation',
+            status: 'compliant',
+            description:
+                'For the visual presentation of blocks of text, a mechanism is available to achieve text width, line height, spacing, alignment, and no background images.',
+            implementation:
+                'Component supports text overflow modes (truncate, wrap, wrap-clamp) allowing users to control text presentation. maxWidth prop allows width control. Text spacing and alignment are adjustable via CSS.',
+            testResults:
+                'Verified: Text presentation is adjustable. Text overflow modes provide flexibility. Confirmed in KeyValuePair.accessibility.test.tsx (lines 312-363).',
+        },
+        {
+            id: '1.4.9',
+            level: 'AAA',
+            title: 'Images of Text',
+            status: 'compliant',
+            description:
+                'Images of text are only used for pure decoration or where a particular presentation of text is essential to the information being conveyed.',
+            implementation:
+                'Component uses actual text content, not images of text. All text is rendered as HTML text elements, ensuring full accessibility.',
+            testResults:
+                'Verified: No images of text used. All content is actual text. Confirmed in component implementation.',
+        },
+        {
+            id: '2.1.3',
+            level: 'AAA',
+            title: 'Keyboard (No Exception)',
+            status: 'compliant',
+            description:
+                'All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes.',
+            implementation:
+                'KeyValuePair is a presentational component with no interactive functionality of its own. Interactive elements in slots (buttons, links) are keyboard accessible. No timing requirements.',
+            testResults:
+                'Verified: Component is presentational. Interactive elements in slots maintain keyboard accessibility. Confirmed in KeyValuePair.accessibility.test.tsx.',
+        },
+        {
+            id: '2.2.3',
+            level: 'AAA',
+            title: 'No Timing',
+            status: 'compliant',
+            description:
+                'Timing is not an essential part of the event or activity presented by the content.',
+            implementation:
+                'Component has no time limits or timing requirements. Tooltip display on hover is user-controlled and has no timeout.',
+            testResults:
+                'Verified: No timing requirements. Tooltip display is user-controlled. Confirmed in component implementation.',
+        },
+        {
+            id: '2.2.4',
+            level: 'AAA',
+            title: 'Interruptions',
+            status: 'compliant',
+            description:
+                'Interruptions can be postponed or suppressed by the user, except interruptions involving an emergency.',
+            implementation:
+                'Component does not cause interruptions. Tooltip display is user-initiated (hover) and can be dismissed by moving cursor away.',
+            testResults:
+                'Verified: No interruptions caused. Tooltip is user-controlled. Confirmed in component implementation.',
+        },
+        {
+            id: '2.5.5',
+            level: 'AAA',
+            title: 'Target Size',
+            status: 'unsure',
+            description:
+                'The size of the target for pointer inputs is at least 44 by 44 CSS pixels.',
+            implementation:
+                'Component itself is not interactive. Interactive elements in slots (buttons, links) may not meet 44x44px minimum depending on implementation. Users should ensure interactive elements meet AAA target size requirements.',
+            testResults:
+                'Unsure: Component is presentational. Interactive elements in slots need manual verification for 44x44px minimum touch target size.',
+        },
+        {
+            id: '3.2.5',
+            level: 'AAA',
+            title: 'Change on Request',
+            status: 'compliant',
+            description:
+                'Changes of context are initiated only by user request or a mechanism is available to turn off such changes.',
+            implementation:
+                'Component does not cause context changes. Tooltip display is user-initiated (hover). No automatic context changes.',
+            testResults:
+                'Verified: No context changes. Tooltip is user-initiated. Confirmed in component implementation.',
+        },
+    ],
+    strengths: [
+        'Semantic HTML structure with proper roles (group, term, definition)',
+        'Proper ARIA relationships via aria-labelledby linking value to key',
+        'Stable ID generation using React useId() hook',
+        'Support for text overflow modes (truncate, wrap, wrap-clamp)',
+        'Accessible tooltip support for truncated text',
+        'Logical reading order maintained in both vertical and horizontal layouts',
+        'Good color contrast for text (Level AA)',
+        'Text resizing up to 200% without loss of content or functionality',
+        'Flexible slot system for icons and interactive elements',
+        'Full Level A and AA compliance',
+        'Partial AAA compliance for several criteria',
+    ],
+    recommendations: [
+        'MANUAL VERIFICATION REQUIRED: For WCAG 2.5.5 Target Size (AAA), ensure all interactive elements in slots (buttons, links) meet 44x44px minimum touch target size.',
+        'Users should add aria-hidden="true" to decorative icons in slots to meet WCAG 1.1.1 requirements.',
+        'For AAA compliance, consider updating theme tokens to meet 7:1 contrast ratio requirement (currently designed for 4.5:1 AA standard).',
+        'When using interactive elements in slots, ensure they have proper accessible names and keyboard support.',
+        'Consider documenting best practices for using KeyValuePair with interactive elements to ensure accessibility.',
+    ],
+    wcagVersions: {
+        '2.0': [
+            'All Level A and AA criteria from WCAG 2.0 are evaluated',
+            'WCAG 2.0 was published in 2008 and forms the foundation',
+            'All criteria remain valid in WCAG 2.1 and 2.2',
+        ],
+        '2.1': [
+            'WCAG 2.1 added 17 new success criteria (published 2018)',
+            'This report evaluates WCAG 2.1 criteria relevant to the KeyValuePair component',
+            'KeyValuePair aligns with WCAG 2.1 requirements through existing implementations',
+        ],
+        '2.2': [
+            'WCAG 2.2 added 9 new success criteria (published 2023)',
+            'KeyValuePair component aligns with WCAG 2.2 requirements through existing implementations',
+            'Note: WCAG 2.2 criteria are evaluated where applicable to KeyValuePair components',
+        ],
+    },
+    testMethodology: {
+        automated: [
+            'jest-axe library (axe-core integration) for automated accessibility testing (26 tests)',
+            'axe-core violation detection: Tests for no accessibility violations using axe(container).toHaveNoViolations()',
+            'Test coverage: Basic key-value pair, slots, horizontal/vertical layouts, text overflow modes, different sizes, edge cases, contrast validation.',
+            'Test file: packages/blend/__tests__/components/KeyValuePair/KeyValuePair.accessibility.test.tsx',
+            'ARIA attribute validation: role="group", role="term", role="definition", aria-label, aria-labelledby.',
+            'Contrast validation: Automated color-contrast rule checks for WCAG AA compliance.',
+            'DOM structure validation: Checking for presence of roles, relationships, and logical order.',
+        ],
+        manual: [
+            'REQUIRED: Manual verification of WCAG 2.5.5 Target Size (AAA) for interactive elements in slots using browser DevTools to measure touch target size (should be 44x44px minimum).',
+            'Screen reader testing with NVDA (Windows), JAWS (Windows), VoiceOver (macOS/iOS) for announcements of key-value relationships, role="term" and role="definition" semantics, and aria-labelledby relationships.',
+            'Keyboard navigation testing: Verify interactive elements in slots are keyboard accessible and maintain proper focus order.',
+            'Focus indicator visibility verification: Visual inspection of focus outline clarity and contrast for interactive elements in slots.',
+            'Color contrast verification for all text using WebAIM Contrast Checker (https://webaim.org/resources/contrastchecker/) or Colour Contrast Analyser.',
+            'Text resizing: Browser zoom to 200% to ensure no loss of content or functionality.',
+            'Tooltip accessibility: Verify tooltip content is accessible to screen readers and keyboard users.',
+        ],
+        verificationTools: [
+            'WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/',
+            'Colour Contrast Analyser (CCA): https://www.tpgi.com/color-contrast-checker/',
+            'axe DevTools Browser Extension',
+            'WAVE Browser Extension',
+            'Lighthouse Accessibility Audit',
+            'NVDA Screen Reader (Windows)',
+            'JAWS Screen Reader (Windows)',
+            'VoiceOver Screen Reader (macOS/iOS)',
+            'Keyboard-only navigation testing',
+        ],
+        wcagLevels: {
+            A: [
+                '1.1.1 Non-text Content',
+                '1.3.1 Info and Relationships',
+                '1.3.2 Meaningful Sequence',
+                '1.4.1 Use of Color',
+                '4.1.2 Name, Role, Value',
+            ],
+            AA: [
+                '1.4.3 Contrast (Minimum)',
+                '1.4.4 Resize Text',
+                '1.4.11 Non-text Contrast',
+                '2.4.6 Headings and Labels',
+            ],
+            AAA: [
+                '1.4.6 Contrast (Enhanced) - Non-compliant (requires 7:1 contrast ratio)',
+                '1.4.8 Visual Presentation - Compliant (Text presentation adjustable)',
+                '1.4.9 Images of Text - Compliant (No images of text)',
+                '2.1.3 Keyboard (No Exception) - Compliant (No timing requirements)',
+                '2.2.3 No Timing - Compliant (No time limits)',
+                '2.2.4 Interruptions - Compliant (Does not cause interruptions)',
+                '2.5.5 Target Size - Unsure (Requires manual verification for interactive elements in slots)',
+                '3.2.5 Change on Request - Compliant (Changes only on user request)',
+            ],
+        },
+    },
+}

package/lib/components/KeyValuePair/accessibility/index.ts

@@ -0,0 +1,2 @@
+export { keyValuePairAccessibilityReport } from './KeyValuePairAccessibilityReport'
+export { default as KeyValuePairAccessibility } from './KeyValuePairAccessibility'

package/lib/components/KeyValuePair/index.ts

@@ -0,0 +1,3 @@
+export { default as KeyValuePair } from './KeyValuePair'
+export * from './KeyValuePair.tokens'
+export * from './types'

package/lib/components/KeyValuePair/types.ts

@@ -0,0 +1,45 @@
+export enum KeyValuePairStateType {
+    vertical,
+    horizontal,
+}
+
+export enum KeyValuePairSize {
+    SMALL = 'sm',
+    MEDIUM = 'md',
+    LARGE = 'lg',
+}
+
+export type TextOverflowMode = 'truncate' | 'wrap' | 'wrap-clamp'
+
+export type KeyValuePairPropTypes = {
+    keyString: string
+    size?: KeyValuePairSize
+    value?: string
+    keySlot?: React.ReactNode
+    valueLeftSlot?: React.ReactNode
+    valueRightSlot?: React.ReactNode
+    keyValuePairState?: KeyValuePairStateType
+    maxWidth?: string
+    /**
+     * Controls how text overflow is handled for both key and value
+     * - 'truncate': Single line with ellipsis (default, all browsers)
+     * - 'wrap': Allow natural text wrapping (all browsers)
+     * - 'wrap-clamp': Wrap with line limit and ellipsis (Chrome/Edge/Safari/Firefox 68+, graceful fallback for older browsers)
+     *
+     * Note: 'wrap-clamp' uses -webkit-line-clamp which is widely supported but non-standard.
+     * In unsupported browsers, text will wrap naturally without the line limit.
+     *
+     * @default 'truncate'
+     */
+    textOverflow?: TextOverflowMode
+    /**
+     * Maximum number of lines to display when textOverflow is 'wrap-clamp'
+     * @default 2
+     */
+    maxLines?: number
+    /**
+     * Show tooltip on hover when text is truncated
+     * @default true
+     */
+    showTooltipOnTruncate?: boolean
+}

package/lib/components/KeyValuePair/utils.ts

@@ -0,0 +1,113 @@
+import type { CSSObject } from 'styled-components'
+import { TextOverflowMode, KeyValuePairStateType } from './types'
+import { KeyValuePairTokensType } from './KeyValuePair.tokens'
+
+/**
+ * Get text styles based on overflow mode
+ */
+export const getTextStyles = (
+    textOverflow: TextOverflowMode,
+    maxLines: number,
+    slotPresent: boolean
+): CSSObject => {
+    const baseStyles: CSSObject = !slotPresent
+        ? {
+              width: '100%',
+          }
+        : {}
+
+    const ellipsisStyles: CSSObject = {
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+    }
+
+    switch (textOverflow) {
+        case 'truncate':
+            return {
+                ...baseStyles,
+                ...ellipsisStyles,
+            }
+        case 'wrap':
+            return {
+                ...baseStyles,
+                whiteSpace: 'normal',
+                wordBreak: 'break-word',
+            }
+        case 'wrap-clamp':
+            return {
+                ...baseStyles,
+                display: '-webkit-box',
+                WebkitLineClamp: maxLines,
+                WebkitBoxOrient: 'vertical',
+                overflow: 'hidden',
+                wordBreak: 'break-word',
+            }
+        default:
+            return baseStyles
+    }
+}
+
+/**
+ * Get PrimitiveText styles based on overflow mode
+ */
+export const getPrimitiveTextStyles = (
+    textOverflow: TextOverflowMode
+): CSSObject => {
+    const baseStyles: CSSObject = {
+        display: 'block',
+    }
+
+    if (textOverflow === 'truncate') {
+        return {
+            ...baseStyles,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+        }
+    }
+
+    return baseStyles
+}
+
+/**
+ * Get container styles based on text overflow mode and max width
+ */
+export const getContainerStyles = (
+    textOverflow: TextOverflowMode,
+    maxWidth: string
+): CSSObject => {
+    return {
+        width: textOverflow === 'wrap' ? '100%' : maxWidth,
+        maxWidth: textOverflow === 'wrap' ? maxWidth : undefined,
+    }
+}
+
+/**
+ * Get flex direction and gap based on layout state
+ */
+export const getLayoutStyles = (
+    keyValuePairState: KeyValuePairStateType,
+    keyValuePairTokens: KeyValuePairTokensType
+): CSSObject => {
+    const isVertical = keyValuePairState === KeyValuePairStateType.vertical
+
+    return {
+        display: 'flex',
+        flexDirection: isVertical ? 'column' : 'row',
+        justifyContent: isVertical ? 'flex-start' : 'space-between',
+        gap: isVertical
+            ? keyValuePairTokens.gap.vertical
+            : keyValuePairTokens.gap.horizontal,
+    }
+}
+
+/**
+ * Get slot container styles
+ */
+export const getSlotStyles = (): CSSObject => ({
+    flexShrink: 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+})

package/lib/components/KeyValuePairV2/KeyValuePairLayout.tsx

@@ -0,0 +1,89 @@
+import React, { forwardRef } from 'react'
+import Block from '../Primitives/Block/Block'
+
+export type KeyValuePairLayoutProps = {
+    containerStyle: React.CSSProperties
+    keyContainerStyle: React.CSSProperties
+    valueContainerStyle: React.CSSProperties
+    keySlotStyle: React.CSSProperties
+    keyContent: React.ReactNode
+    valueContent: React.ReactNode
+    keySlot?: React.ReactNode
+    valueLeftSlot?: React.ReactNode
+    valueRightSlot?: React.ReactNode
+    dataKeyValuePair?: string
+    ariaLabel?: string
+    keyDataElement?: string
+    keyDataId?: string
+    valueDataElement?: string
+    valueDataId?: string
+}
+
+/**
+ * Layout-only presentational component for KeyValuePair.
+ * Renders the structure: container > key block (content + slot) | value block (left slot + content + right slot).
+ * No tokens or business logic; receives pre-computed styles and content.
+ */
+export const KeyValuePairLayout = forwardRef<
+    HTMLDivElement,
+    KeyValuePairLayoutProps
+>(function KeyValuePairLayout(
+    {
+        containerStyle,
+        keyContainerStyle,
+        valueContainerStyle,
+        keySlotStyle,
+        keyContent,
+        valueContent,
+        keySlot,
+        valueLeftSlot,
+        valueRightSlot,
+        dataKeyValuePair = 'keyvaluepair',
+        ariaLabel,
+        keyDataElement = 'key',
+        keyDataId,
+        valueDataElement = 'value',
+        valueDataId,
+    },
+    ref
+) {
+    return (
+        <Block
+            ref={ref}
+            data-keyvaluepair={dataKeyValuePair}
+            style={containerStyle}
+            aria-label={ariaLabel}
+        >
+            <Block
+                data-element={keyDataElement}
+                data-id={keyDataId}
+                style={keyContainerStyle}
+            >
+                {keyContent}
+                {keySlot != null && (
+                    <Block data-element="key-slot" style={keySlotStyle}>
+                        {keySlot}
+                    </Block>
+                )}
+            </Block>
+
+            <Block
+                data-element={valueDataElement}
+                data-id={valueDataId}
+                style={valueContainerStyle}
+            >
+                {valueLeftSlot != null && (
+                    <Block data-element="value-left-slot" style={keySlotStyle}>
+                        {valueLeftSlot}
+                    </Block>
+                )}
+                {valueContent}
+                {valueRightSlot != null && (
+                    <Block data-element="value-right-slot" style={keySlotStyle}>
+                        {valueRightSlot}
+                    </Block>
+                )}
+            </Block>
+        </Block>
+    )
+})