@abstraks-dev/ui-library 1.0.1

package/dist/components/Label.js

@@ -0,0 +1,256 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Label = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+/**
+ * Label - Accessible form label component with validation and help text support
+ *
+ * Features:
+ * - Semantic HTML label element with proper form association
+ * - Required field indicators with multiple display options
+ * - Validation states with contextual messaging
+ * - Help text support for user guidance
+ * - Multiple size and weight variants
+ * - Full ARIA support for screen readers
+ * - Error, success, and warning state handling
+ *
+ * Accessibility:
+ * - Uses semantic <label> element with htmlFor association
+ * - Proper ARIA attributes for form control relationships
+ * - Screen reader announcements for validation states
+ * - Required field indicators with semantic meaning
+ * - Help text and error messages properly associated
+ * - Focus management and keyboard navigation support
+ *
+ * @component
+ * @example
+ * // Basic form label
+ * <Label labelFor="email" labelText="Email Address">
+ *   <input id="email" type="email" />
+ * </Label>
+ *
+ * @example
+ * // Required field with validation
+ * <Label
+ *   labelFor="password"
+ *   labelText="Password"
+ *   required={true}
+ *   validationState="error"
+ *   errorText="Password must be at least 8 characters"
+ * >
+ *   <input id="password" type="password" />
+ * </Label>
+ *
+ * @example
+ * // With help text and custom styling
+ * <Label
+ *   labelFor="username"
+ *   labelText="Username"
+ *   helpText="Choose a unique username"
+ *   size="large"
+ *   weight="bold"
+ *   className="custom-label"
+ * >
+ *   <input id="username" type="text" />
+ * </Label>
+ */
+const Label = exports.Label = /*#__PURE__*/(0, _react.forwardRef)(({
+  // Core props
+  labelFor = '',
+  labelText = '',
+  children = null,
+  required = false,
+  // Layout props
+  className = '',
+  size = 'medium',
+  weight = 'medium',
+  disabled = false,
+  // Validation props
+  validationState = 'default',
+  requiredIndicator = 'asterisk',
+  helpText = '',
+  errorText = '',
+  successText = '',
+  // Accessibility props
+  ariaDescribedBy = '',
+  // Legacy props (for backward compatibility - internal use only)
+  additionalClassName = '',
+  componentName = 'label',
+  testId = 'label',
+  ...restProps
+}, ref) => {
+  // Handle legacy prop mapping
+  const finalClassName = className || additionalClassName;
+
+  // Generate unique IDs for accessibility
+  const helpId = helpText ? `${testId}-help` : '';
+  const errorId = errorText ? `${testId}-error` : '';
+  const successId = successText ? `${testId}-success` : '';
+
+  // Build aria-describedby attribute
+  const describedBy = [ariaDescribedBy, helpId, errorId, successId].filter(Boolean).join(' ');
+
+  // Build CSS classes
+  const labelClasses = [componentName, finalClassName, `${componentName}--${size}`, `${componentName}--${weight}`, validationState !== 'default' && `${componentName}--${validationState}`, disabled && `${componentName}--disabled`, required && `${componentName}--required`].filter(Boolean).join(' ');
+
+  // Required indicator rendering
+  const renderRequiredIndicator = () => {
+    if (!required) return null;
+    switch (requiredIndicator) {
+      case 'asterisk':
+        return /*#__PURE__*/_react.default.createElement("span", {
+          className: "required",
+          "aria-label": "required"
+        }, "*");
+      case 'text':
+        return /*#__PURE__*/_react.default.createElement("span", {
+          className: "required-text"
+        }, "(required)");
+      case 'none':
+        return null;
+      default:
+        return /*#__PURE__*/_react.default.createElement("span", {
+          className: `${componentName}__required`,
+          "aria-label": "required"
+        }, "*");
+    }
+  };
+
+  // Validation message rendering
+  const renderValidationMessage = () => {
+    if (validationState === 'error' && errorText) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        id: errorId,
+        className: `${componentName}__message ${componentName}__message--error`,
+        role: "alert",
+        "aria-live": "polite"
+      }, errorText);
+    }
+    if (validationState === 'success' && successText) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        id: successId,
+        className: `${componentName}__message ${componentName}__message--success`,
+        role: "status",
+        "aria-live": "polite"
+      }, successText);
+    }
+    return null;
+  };
+
+  // Help text rendering
+  const renderHelpText = () => {
+    if (!helpText) return null;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      id: helpId,
+      className: `${componentName}__help`
+    }, helpText);
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: `${componentName}-wrapper`,
+    "data-testid": testId
+  }, /*#__PURE__*/_react.default.createElement("label", _extends({
+    ref: ref,
+    className: labelClasses,
+    htmlFor: labelFor,
+    "aria-describedby": describedBy || undefined
+  }, restProps), /*#__PURE__*/_react.default.createElement("span", {
+    className: "label-text"
+  }, labelText && labelText, required && renderRequiredIndicator())), renderHelpText(), children, renderValidationMessage());
+});
+Label.propTypes = {
+  // ===========================================
+  // Core Props
+  // ===========================================
+  /**
+   * ID of the form control this label is associated with (required for accessibility)
+   */
+  labelFor: _propTypes.string,
+  /**
+   * The text content of the label (required)
+   */
+  labelText: _propTypes.string,
+  // ===========================================
+  // Content Props
+  // ===========================================
+  /**
+   * Form control element(s) to be labeled
+   */
+  children: _propTypes.node,
+  // ===========================================
+  // Appearance Props
+  // ===========================================
+  /**
+   * Additional CSS classes to apply to the label wrapper
+   */
+  className: _propTypes.string,
+  /**
+   * Size variant of the label
+   */
+  size: (0, _propTypes.oneOf)(['small', 'medium', 'large']),
+  /**
+   * Font weight of the label text
+   */
+  weight: (0, _propTypes.oneOf)(['light', 'normal', 'medium', 'bold']),
+  // ===========================================
+  // Behavior Props
+  // ===========================================
+  /**
+   * Whether the associated form control is required
+   */
+  required: _propTypes.bool,
+  /**
+   * Whether the associated form control is disabled
+   */
+  disabled: _propTypes.bool,
+  // ===========================================
+  // Validation Props
+  // ===========================================
+  /**
+   * Validation state of the associated form control
+   */
+  validationState: (0, _propTypes.oneOf)(['default', 'success', 'warning', 'error']),
+  /**
+   * How to display the required indicator
+   */
+  requiredIndicator: (0, _propTypes.oneOf)(['asterisk', 'text', 'none']),
+  /**
+   * Helpful text to display below the label
+   */
+  helpText: _propTypes.string,
+  /**
+   * Error message to display when validationState is 'error'
+   */
+  errorText: _propTypes.string,
+  /**
+   * Success message to display when validationState is 'success'
+   */
+  successText: _propTypes.string,
+  // ===========================================
+  // Accessibility Props
+  // ===========================================
+  /**
+   * Space-separated list of element IDs that describe the label
+   */
+  ariaDescribedBy: _propTypes.string,
+  /**
+   * Use className instead
+   */
+  additionalClassName: _propTypes.string,
+  /**
+   * Use labelFor/id for identification
+   * Base CSS class name for the component
+   */
+  componentName: _propTypes.string,
+  /**
+   * Test ID for testing and automation
+   */
+  testId: _propTypes.string
+};
+Label.displayName = 'Label';
+var _default = exports.default = Label;

package/dist/components/Loader.js

@@ -0,0 +1,302 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Loader = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Animation = _interopRequireDefault(require("./Animation"));
+var _propTypes = require("prop-types");
+var _Heading = _interopRequireDefault(require("./Heading"));
+var _icons = require("../icons");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+/**
+ * Loader - Accessible loading component for full-page or section loading states
+ *
+ * Features:
+ * - Multiple size variants with responsive design (sm, md, lg, xl)
+ * - Multiple animation variants (svg, spinner, dots, pulse)
+ * - Optional heading text with customizable size
+ * - Comprehensive ARIA labeling and screen reader support
+ * - Respects prefers-reduced-motion for accessibility
+ * - High contrast mode support
+ * - Keyboard navigation friendly
+ * - Semantic HTML structure with proper loading states
+ *
+ * Accessibility:
+ * - Uses proper ARIA roles (status) and labels
+ * - Announces loading state to screen readers with aria-live
+ * - Respects user motion preferences
+ * - High contrast mode compatible
+ * - Focus management ready
+ * - Screen reader friendly announcements
+ *
+ * @component
+ * @example
+ * // Basic usage
+ * <Loader />
+ *
+ * @example
+ * // With custom text and variant
+ * <Loader
+ *   size="lg"
+ *   variant="pulse"
+ *   headerText="Loading your dashboard..."
+ *   aria-label="Dashboard loading in progress"
+ * />
+ *
+ * @example
+ * // Minimal loader without header
+ * <Loader
+ *   size="sm"
+ *   showHeader={false}
+ *   variant="dots"
+ *   className="custom-loader"
+ * />
+ */
+// Helper functions moved outside for clarity and performance
+const sizeMap = {
+  sm: {
+    container: '150px',
+    spinner: 24,
+    dots: 6
+  },
+  md: {
+    container: '200px',
+    spinner: 32,
+    dots: 8
+  },
+  lg: {
+    container: '250px',
+    spinner: 40,
+    dots: 10
+  },
+  xl: {
+    container: '300px',
+    spinner: 48,
+    dots: 12
+  }
+};
+function getClassNames(componentName, size, variant, finalClassName) {
+  const classes = [componentName, `${componentName}--${size}`, `${componentName}--${variant}`, finalClassName].filter(Boolean);
+  return classes.join(' ');
+}
+function renderDots(componentName, currentSize, fill) {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: `${componentName}__dots`,
+    "aria-hidden": "true"
+  }, [...Array(3)].map((_, index) => /*#__PURE__*/_react.default.createElement("div", {
+    key: index,
+    className: `${componentName}__dot`,
+    style: {
+      width: currentSize.dots,
+      height: currentSize.dots,
+      backgroundColor: fill,
+      animationDelay: `${index * 0.2}s`
+    }
+  })));
+}
+function renderPulse(componentName, currentSize, fill) {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: `${componentName}__pulse`,
+    style: {
+      width: currentSize.container,
+      height: currentSize.container,
+      backgroundColor: fill
+    },
+    "aria-hidden": "true"
+  });
+}
+function renderSpinner(variant, componentName, currentSize, fill) {
+  switch (variant) {
+    case 'spinner':
+      return /*#__PURE__*/_react.default.createElement(_icons.LoadingSpinner, {
+        componentName: `${componentName}__spinner`,
+        dimensions: currentSize.spinner,
+        fill: fill
+      });
+    case 'dots':
+      return renderDots(componentName, currentSize, fill);
+    case 'pulse':
+      return renderPulse(componentName, currentSize, fill);
+    case 'svg':
+    default:
+      // Default SVG animation variant
+      return /*#__PURE__*/_react.default.createElement("svg", {
+        className: `${componentName}__svg`,
+        version: "1.1",
+        x: "0px",
+        y: "0px",
+        viewBox: "0 0 100 100",
+        enableBackground: "new 0 0 0 0",
+        width: currentSize.container,
+        height: currentSize.container,
+        "aria-hidden": "true",
+        role: "img",
+        focusable: "false"
+      }, /*#__PURE__*/_react.default.createElement("path", {
+        className: `${componentName}__path`,
+        fill: fill,
+        d: "M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"
+      }, /*#__PURE__*/_react.default.createElement("animateTransform", {
+        attributeName: "transform",
+        attributeType: "XML",
+        type: "rotate",
+        dur: "1s",
+        from: "0 50 50",
+        to: "360 50 50",
+        repeatCount: "indefinite"
+      })));
+  }
+}
+const Loader = exports.Loader = /*#__PURE__*/(0, _react.forwardRef)(function Loader({
+  headerText,
+  children,
+  className,
+  size = 'md',
+  variant = 'svg',
+  fill = '#333',
+  showHeader = true,
+  titleSize = 3,
+  ariaLabel,
+  additionalClassName,
+  componentName = 'ui-loader',
+  testId,
+  ...props
+}, ref) {
+  // Remove svgSize from props before spreading onto the root div
+  const {
+    svgSize,
+    ...restProps
+  } = props;
+  const finalClassName = className || additionalClassName;
+  const currentSize = sizeMap[size] || sizeMap.md;
+
+  // Always show a heading, defaulting to 'Loading...' if headerText is not provided
+  const headingText = showHeader ? headerText || 'Loading...' : null;
+  function renderSpinnerWithSvgSize(variant, componentName, currentSize, fill, svgSize) {
+    if (variant === 'svg' && svgSize) {
+      return /*#__PURE__*/_react.default.createElement("svg", {
+        className: `${componentName}__svg`,
+        version: "1.1",
+        x: "0px",
+        y: "0px",
+        viewBox: "0 0 100 100",
+        enableBackground: "new 0 0 0 0",
+        width: svgSize,
+        height: svgSize,
+        "aria-hidden": "true",
+        role: "img",
+        focusable: "false"
+      }, /*#__PURE__*/_react.default.createElement("path", {
+        className: `${componentName}__path`,
+        fill: fill,
+        d: "M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"
+      }, /*#__PURE__*/_react.default.createElement("animateTransform", {
+        attributeName: "transform",
+        attributeType: "XML",
+        type: "rotate",
+        dur: "1s",
+        from: "0 50 50",
+        to: "360 50 50",
+        repeatCount: "indefinite"
+      })));
+    }
+    return renderSpinner(variant, componentName, currentSize, fill);
+  }
+  const loaderContent = /*#__PURE__*/_react.default.createElement("div", _extends({
+    ref: ref,
+    className: getClassNames(componentName, size, variant, finalClassName),
+    "data-testid": testId || componentName,
+    role: "status",
+    "aria-label": ariaLabel || headingText,
+    "aria-live": "polite",
+    "aria-busy": "true"
+  }, restProps), showHeader && /*#__PURE__*/_react.default.createElement(_Heading.default, {
+    variant: titleSize,
+    componentName: `${componentName}__heading`,
+    id: `${componentName}-heading`
+  }, headingText), /*#__PURE__*/_react.default.createElement("div", {
+    className: `${componentName}__wrapper`,
+    "aria-describedby": showHeader ? `${componentName}-heading` : undefined
+  }, renderSpinnerWithSvgSize(variant, componentName, currentSize, fill, svgSize)), children && /*#__PURE__*/_react.default.createElement("div", {
+    className: `${componentName}__content`
+  }, children));
+
+  // Animation wrapper for entrance effect
+  return /*#__PURE__*/_react.default.createElement(_Animation.default, {
+    fadingEntrances: "fadeIn",
+    duration: "faster"
+  }, loaderContent);
+});
+Loader.propTypes = {
+  // ===========================================
+  // Core Props
+  // ===========================================
+  /**
+   * Header text to display above the loader
+   * @required Recommended for screen reader accessibility
+   */
+  headerText: _propTypes.string,
+  // ===========================================
+  // Content Props
+  // ===========================================
+  /**
+   * Additional content to display below the loader
+   */
+  children: _propTypes.node,
+  // ===========================================
+  // Appearance Props
+  // ===========================================
+  /**
+   * Additional CSS classes to apply to the loader wrapper
+   */
+  className: _propTypes.string,
+  /**
+   * Size variant for the loader - affects overall dimensions and spacing
+   * @required Recommended to be explicit about sizing for consistent UX
+   */
+  size: (0, _propTypes.oneOf)(['sm', 'md', 'lg', 'xl']),
+  /**
+   * Loader animation variant - different visual styles for various contexts
+   * @required Recommended for intentional animation choice
+   */
+  variant: (0, _propTypes.oneOf)(['svg', 'spinner', 'dots', 'pulse']),
+  /**
+   * Fill color for the loader animations - should match design system
+   */
+  fill: _propTypes.string,
+  /**
+   * Whether to show the header text - should be true for accessibility unless redundant
+   */
+  showHeader: _propTypes.bool,
+  /**
+   * Heading size variant (1-6) - semantic heading level
+   */
+  titleSize: (0, _propTypes.oneOf)([1, 2, 3, 4, 5, 6]),
+  // ===========================================
+  // Accessibility Props
+  // ===========================================
+  /**
+   * Accessible label for the loader - overrides headerText for ARIA
+   */
+  // aria-label is used as a prop, not ariaLabel
+
+  /**
+   * Use className instead
+   */
+  additionalClassName: _propTypes.string,
+  /**
+   * Use className/id for identification
+   * Base CSS class name for the component
+   */
+  componentName: _propTypes.string,
+  /**
+   * Custom test ID for automated testing
+   */
+  testId: _propTypes.string
+};
+Loader.displayName = 'Loader';
+var _default = exports.default = Loader;

package/dist/components/MenuHover.js

@@ -0,0 +1,114 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MenuHover = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var _uuid = require("uuid");
+var _ChevronDown = require("../icons/ChevronDown");
+var _ArrowRight = require("../icons/ArrowRight");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+/**
+ * MenuHover Component
+ *
+ * A stateless toggle component that displays different content based on its open/closed state.
+ * Features keyboard navigation and accessibility support.
+ *
+ * @component
+ * @example
+ * ```jsx
+ * <MenuHover
+ *   isOpen={isMenuOpen}
+ *   onToggle={(isOpen) => setMenuOpen(isOpen)}
+ *   isOpenChildren={<div>Open menu content</div>}
+ *   isClosedChildren={<div>Closed menu content</div>}
+ *   ariaLabel="Navigation menu"
+ * />
+ * ```
+ *
+ * @param {object} props - Component props
+ * @param {React.ReactNode} props.isOpenChildren - Content to display when menu is open
+ * @param {React.ReactNode} props.isClosedChildren - Content to display when menu is closed
+ * @param {boolean} props.isOpen - Whether the menu is currently open (controlled state)
+ * @param {function} props.onToggle - Callback when menu toggle is triggered
+ * @param {string} [props.className=''] - Additional CSS classes to apply
+ * @param {string} [props.id] - Unique identifier for the component
+ * @param {string} [props.ariaLabel] - Accessible label for the menu
+ * @returns {JSX.Element} The MenuHover component
+ */
+const MenuHover = exports.MenuHover = /*#__PURE__*/(0, _react.forwardRef)(({
+  // Core props
+  id,
+  className = '',
+  // Content props
+  isOpenChildren,
+  isClosedChildren,
+  // Behavior props
+  isOpen = false,
+  // Event props
+  onToggle = () => {},
+  // Accessibility props
+  'aria-label': ariaLabel = 'Menu',
+  // Legacy props (for backward compatibility - internal use only)
+  componentName = 'menu-hover',
+  additionalClassName = '',
+  ...restProps
+}, ref) => {
+  // Handle legacy prop mapping
+  const finalId = id || `menu-hover-${Math.random().toString(36).substr(2, 9)}`;
+  const finalClassName = className || additionalClassName;
+
+  // Handle click and keyboard interactions
+  const handleToggle = () => {
+    onToggle(!isOpen);
+  };
+  const handleKeyDown = event => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      handleToggle();
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement("div", _extends({
+    ref: ref,
+    id: finalId,
+    className: `${componentName} ${isOpen ? 'open' : ''} ${finalClassName}`,
+    "data-testid": componentName,
+    role: "button",
+    tabIndex: 0,
+    "aria-label": ariaLabel,
+    "aria-expanded": isOpen,
+    onClick: handleToggle,
+    onKeyDown: handleKeyDown
+  }, restProps), isOpen ? isOpenChildren : isClosedChildren);
+});
+
+// Configure component PropTypes
+MenuHover.propTypes = {
+  // Core props
+  /** Unique identifier for the component */
+  id: _propTypes.string,
+  /** Additional CSS classes to apply */
+  className: _propTypes.string,
+  // Content props
+  /** Content to display when menu is open */
+  isOpenChildren: _propTypes.node,
+  /** Content to display when menu is closed */
+  isClosedChildren: _propTypes.node,
+  // Behavior props
+  /** Whether the menu is currently open (controlled state) */
+  isOpen: _propTypes.bool,
+  // Event props
+  /** Callback when menu toggle is triggered */
+  onToggle: _propTypes.func,
+  // Accessibility props
+  /** Accessible label for the menu */
+  'aria-label': _propTypes.string,
+  // Legacy props (for backward compatibility - internal use only)
+  /** Base component name for CSS classes and data attributes */
+  componentName: _propTypes.string,
+  /** Additional CSS class name for custom styling */
+  additionalClassName: _propTypes.string
+};