pluracore-comps/dist/index.esm.js

Librairie de 20 composants React ultra-personnalisables pour sites vitrines modernes - Button, Card, Hero, Navigation, Input, Modal, Badge, Accordion, Tabs, Toast, Slider, Progress, Avatar, Pagination, Rating, Breadcrumb, Banner, Grid, Section, Gallery

import { useState, forwardRef, useRef, useEffect } from 'react';
import PropTypes from 'prop-types';
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
import { createPortal } from 'react-dom';

function _arrayLikeToArray(r, a) {
  (null == a || a > r.length) && (a = r.length);
  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
  return n;
}
function _arrayWithHoles(r) {
  if (Array.isArray(r)) return r;
}
function _arrayWithoutHoles(r) {
  if (Array.isArray(r)) return _arrayLikeToArray(r);
}
function _defineProperty(e, r, t) {
  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
    value: t,
    enumerable: !0,
    configurable: !0,
    writable: !0
  }) : e[r] = t, e;
}
function _iterableToArray(r) {
  if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
}
function _iterableToArrayLimit(r, l) {
  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
  if (null != t) {
    var e,
      n,
      i,
      u,
      a = [],
      f = !0,
      o = !1;
    try {
      if (i = (t = t.call(r)).next, 0 === l) {
        if (Object(t) !== t) return;
        f = !1;
      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
    } catch (r) {
      o = !0, n = r;
    } finally {
      try {
        if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
      } finally {
        if (o) throw n;
      }
    }
    return a;
  }
}
function _nonIterableRest() {
  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _nonIterableSpread() {
  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function ownKeys(e, r) {
  var t = Object.keys(e);
  if (Object.getOwnPropertySymbols) {
    var o = Object.getOwnPropertySymbols(e);
    r && (o = o.filter(function (r) {
      return Object.getOwnPropertyDescriptor(e, r).enumerable;
    })), t.push.apply(t, o);
  }
  return t;
}
function _objectSpread2(e) {
  for (var r = 1; r < arguments.length; r++) {
    var t = null != arguments[r] ? arguments[r] : {};
    r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
      _defineProperty(e, r, t[r]);
    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
    });
  }
  return e;
}
function _objectWithoutProperties(e, t) {
  if (null == e) return {};
  var o,
    r,
    i = _objectWithoutPropertiesLoose(e, t);
  if (Object.getOwnPropertySymbols) {
    var n = Object.getOwnPropertySymbols(e);
    for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
  }
  return i;
}
function _objectWithoutPropertiesLoose(r, e) {
  if (null == r) return {};
  var t = {};
  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
    if (-1 !== e.indexOf(n)) continue;
    t[n] = r[n];
  }
  return t;
}
function _slicedToArray(r, e) {
  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
}
function _toConsumableArray(r) {
  return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
}
function _toPrimitive(t, r) {
  if ("object" != typeof t || !t) return t;
  var e = t[Symbol.toPrimitive];
  if (void 0 !== e) {
    var i = e.call(t, r || "default");
    if ("object" != typeof i) return i;
    throw new TypeError("@@toPrimitive must return a primitive value.");
  }
  return ("string" === r ? String : Number)(t);
}
function _toPropertyKey(t) {
  var i = _toPrimitive(t, "string");
  return "symbol" == typeof i ? i : i + "";
}
function _typeof(o) {
  "@babel/helpers - typeof";

  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
    return typeof o;
  } : function (o) {
    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
  }, _typeof(o);
}
function _unsupportedIterableToArray(r, a) {
  if (r) {
    if ("string" == typeof r) return _arrayLikeToArray(r, a);
    var t = {}.toString.call(r).slice(8, -1);
    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
  }
}

var _excluded$j = ["children", "variant", "size", "disabled", "loading", "leftIcon", "rightIcon", "fullWidth", "rounded", "shadow", "gradient", "outline", "glow", "animation", "onClick", "className", "style"];
var Button = function Button(_ref) {
  var children = _ref.children,
    _ref$variant = _ref.variant,
    variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
    _ref$size = _ref.size,
    size = _ref$size === void 0 ? 'medium' : _ref$size,
    _ref$disabled = _ref.disabled,
    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
    _ref$loading = _ref.loading,
    loading = _ref$loading === void 0 ? false : _ref$loading,
    leftIcon = _ref.leftIcon,
    rightIcon = _ref.rightIcon,
    _ref$fullWidth = _ref.fullWidth,
    fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
    _ref$rounded = _ref.rounded,
    rounded = _ref$rounded === void 0 ? false : _ref$rounded,
    _ref$shadow = _ref.shadow,
    shadow = _ref$shadow === void 0 ? false : _ref$shadow,
    _ref$gradient = _ref.gradient,
    gradient = _ref$gradient === void 0 ? false : _ref$gradient,
    _ref$outline = _ref.outline,
    outline = _ref$outline === void 0 ? false : _ref$outline,
    _ref$glow = _ref.glow,
    glow = _ref$glow === void 0 ? false : _ref$glow,
    _ref$animation = _ref.animation,
    animation = _ref$animation === void 0 ? 'none' : _ref$animation,
    onClick = _ref.onClick,
    _ref$className = _ref.className,
    className = _ref$className === void 0 ? '' : _ref$className,
    _ref$style = _ref.style,
    style = _ref$style === void 0 ? {} : _ref$style,
    props = _objectWithoutProperties(_ref, _excluded$j);
  var classes = ['plura-button', "plura-button--".concat(variant), "plura-button--".concat(size), fullWidth && 'plura-button--full-width', rounded && 'plura-button--rounded', shadow && 'plura-button--shadow', gradient && 'plura-button--gradient', outline && 'plura-button--outline', glow && 'plura-button--glow', animation !== 'none' && "plura-button--".concat(animation), disabled && 'plura-button--disabled', loading && 'plura-button--loading', className].filter(Boolean).join(' ');
  return /*#__PURE__*/jsxs("button", _objectSpread2(_objectSpread2({
    className: classes,
    disabled: disabled || loading,
    onClick: onClick,
    style: style
  }, props), {}, {
    children: [loading && /*#__PURE__*/jsx("span", {
      className: "plura-button__spinner"
    }), leftIcon && !loading && /*#__PURE__*/jsx("span", {
      className: "plura-button__icon plura-button__icon--left",
      children: leftIcon
    }), /*#__PURE__*/jsx("span", {
      className: "plura-button__text",
      children: children
    }), rightIcon && !loading && /*#__PURE__*/jsx("span", {
      className: "plura-button__icon plura-button__icon--right",
      children: rightIcon
    })]
  }));
};
Button.propTypes = {
  children: PropTypes.node.isRequired,
  variant: PropTypes.oneOf(['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark']),
  size: PropTypes.oneOf(['small', 'medium', 'large', 'xl']),
  disabled: PropTypes.bool,
  loading: PropTypes.bool,
  leftIcon: PropTypes.node,
  rightIcon: PropTypes.node,
  fullWidth: PropTypes.bool,
  rounded: PropTypes.bool,
  shadow: PropTypes.bool,
  gradient: PropTypes.bool,
  outline: PropTypes.bool,
  glow: PropTypes.bool,
  animation: PropTypes.oneOf(['none', 'pulse', 'bounce', 'shake', 'float']),
  onClick: PropTypes.func,
  className: PropTypes.string,
  style: PropTypes.object
};

var _excluded$i = ["children", "variant", "size", "shadow", "hover", "rounded", "border", "borderColor", "background", "padding", "clickable", "loading", "gradient", "glass", "neon", "tilt", "overlay", "overlayColor", "overlayOpacity", "headerTitle", "headerSubtitle", "headerActions", "footerContent", "image", "imagePosition", "imageHeight", "imageFit", "className", "style", "onClick"];
var Card = function Card(_ref) {
  var children = _ref.children,
    _ref$variant = _ref.variant,
    variant = _ref$variant === void 0 ? 'default' : _ref$variant,
    _ref$size = _ref.size,
    size = _ref$size === void 0 ? 'medium' : _ref$size,
    _ref$shadow = _ref.shadow,
    shadow = _ref$shadow === void 0 ? 'medium' : _ref$shadow,
    _ref$hover = _ref.hover,
    hover = _ref$hover === void 0 ? false : _ref$hover,
    _ref$rounded = _ref.rounded,
    rounded = _ref$rounded === void 0 ? 'medium' : _ref$rounded,
    _ref$border = _ref.border,
    border = _ref$border === void 0 ? false : _ref$border,
    _ref$borderColor = _ref.borderColor,
    borderColor = _ref$borderColor === void 0 ? 'gray' : _ref$borderColor,
    _ref$background = _ref.background,
    background = _ref$background === void 0 ? 'white' : _ref$background,
    _ref$padding = _ref.padding,
    padding = _ref$padding === void 0 ? 'medium' : _ref$padding,
    _ref$clickable = _ref.clickable,
    clickable = _ref$clickable === void 0 ? false : _ref$clickable,
    _ref$loading = _ref.loading,
    loading = _ref$loading === void 0 ? false : _ref$loading,
    _ref$gradient = _ref.gradient,
    gradient = _ref$gradient === void 0 ? false : _ref$gradient,
    _ref$glass = _ref.glass,
    glass = _ref$glass === void 0 ? false : _ref$glass,
    _ref$neon = _ref.neon,
    neon = _ref$neon === void 0 ? false : _ref$neon,
    _ref$tilt = _ref.tilt,
    tilt = _ref$tilt === void 0 ? false : _ref$tilt,
    _ref$overlay = _ref.overlay,
    overlay = _ref$overlay === void 0 ? false : _ref$overlay,
    _ref$overlayColor = _ref.overlayColor,
    overlayColor = _ref$overlayColor === void 0 ? 'dark' : _ref$overlayColor,
    _ref$overlayOpacity = _ref.overlayOpacity,
    overlayOpacity = _ref$overlayOpacity === void 0 ? 0.5 : _ref$overlayOpacity,
    headerTitle = _ref.headerTitle,
    headerSubtitle = _ref.headerSubtitle,
    headerActions = _ref.headerActions,
    footerContent = _ref.footerContent,
    image = _ref.image,
    _ref$imagePosition = _ref.imagePosition,
    imagePosition = _ref$imagePosition === void 0 ? 'top' : _ref$imagePosition,
    _ref$imageHeight = _ref.imageHeight,
    imageHeight = _ref$imageHeight === void 0 ? '200px' : _ref$imageHeight,
    _ref$imageFit = _ref.imageFit,
    imageFit = _ref$imageFit === void 0 ? 'cover' : _ref$imageFit,
    _ref$className = _ref.className,
    className = _ref$className === void 0 ? '' : _ref$className,
    _ref$style = _ref.style,
    style = _ref$style === void 0 ? {} : _ref$style,
    onClick = _ref.onClick,
    props = _objectWithoutProperties(_ref, _excluded$i);
  var classes = ['plura-card', "plura-card--".concat(variant), "plura-card--".concat(size), "plura-card--shadow-".concat(shadow), "plura-card--rounded-".concat(rounded), "plura-card--padding-".concat(padding), "plura-card--bg-".concat(background), hover && 'plura-card--hover', border && "plura-card--border plura-card--border-".concat(borderColor), clickable && 'plura-card--clickable', loading && 'plura-card--loading', gradient && 'plura-card--gradient', glass && 'plura-card--glass', neon && 'plura-card--neon', tilt && 'plura-card--tilt', overlay && 'plura-card--overlay', image && "plura-card--with-image plura-card--image-".concat(imagePosition), className].filter(Boolean).join(' ');
  var handleClick = function handleClick(e) {
    if (clickable && onClick && !loading) {
      onClick(e);
    }
  };
  return /*#__PURE__*/jsxs("div", _objectSpread2(_objectSpread2({
    className: classes,
    style: style,
    onClick: handleClick
  }, props), {}, {
    children: [loading && /*#__PURE__*/jsx("div", {
      className: "plura-card__loading",
      children: /*#__PURE__*/jsx("div", {
        className: "plura-card__spinner"
      })
    }), overlay && /*#__PURE__*/jsx("div", {
      className: "plura-card__overlay plura-card__overlay--".concat(overlayColor),
      style: {
        opacity: overlayOpacity
      }
    }), image && (imagePosition === 'top' || imagePosition === 'background') && /*#__PURE__*/jsx("div", {
      className: "plura-card__image",
      style: {
        backgroundImage: "url(".concat(image, ")"),
        height: imagePosition === 'background' ? '100%' : imageHeight,
        backgroundSize: imageFit,
        backgroundPosition: 'center',
        backgroundRepeat: 'no-repeat'
      }
    }), /*#__PURE__*/jsxs("div", {
      className: "plura-card__content",
      children: [(headerTitle || headerSubtitle || headerActions) && /*#__PURE__*/jsxs("div", {
        className: "plura-card__header",
        children: [/*#__PURE__*/jsxs("div", {
          className: "plura-card__header-content",
          children: [headerTitle && /*#__PURE__*/jsx("h3", {
            className: "plura-card__title",
            children: headerTitle
          }), headerSubtitle && /*#__PURE__*/jsx("p", {
            className: "plura-card__subtitle",
            children: headerSubtitle
          })]
        }), headerActions && /*#__PURE__*/jsx("div", {
          className: "plura-card__header-actions",
          children: headerActions
        })]
      }), image && imagePosition === 'left' && /*#__PURE__*/jsxs("div", {
        className: "plura-card__layout plura-card__layout--horizontal",
        children: [/*#__PURE__*/jsx("div", {
          className: "plura-card__image plura-card__image--left",
          style: {
            backgroundImage: "url(".concat(image, ")"),
            backgroundSize: imageFit,
            backgroundPosition: 'center',
            backgroundRepeat: 'no-repeat'
          }
        }), /*#__PURE__*/jsx("div", {
          className: "plura-card__body",
          children: children
        })]
      }), image && imagePosition === 'right' && /*#__PURE__*/jsxs("div", {
        className: "plura-card__layout plura-card__layout--horizontal",
        children: [/*#__PURE__*/jsx("div", {
          className: "plura-card__body",
          children: children
        }), /*#__PURE__*/jsx("div", {
          className: "plura-card__image plura-card__image--right",
          style: {
            backgroundImage: "url(".concat(image, ")"),
            backgroundSize: imageFit,
            backgroundPosition: 'center',
            backgroundRepeat: 'no-repeat'
          }
        })]
      }), (!image || imagePosition === 'top' || imagePosition === 'bottom' || imagePosition === 'background') && /*#__PURE__*/jsx("div", {
        className: "plura-card__body",
        children: children
      }), image && imagePosition === 'bottom' && /*#__PURE__*/jsx("div", {
        className: "plura-card__image",
        style: {
          backgroundImage: "url(".concat(image, ")"),
          height: imageHeight,
          backgroundSize: imageFit,
          backgroundPosition: 'center',
          backgroundRepeat: 'no-repeat'
        }
      }), footerContent && /*#__PURE__*/jsx("div", {
        className: "plura-card__footer",
        children: footerContent
      })]
    }), tilt && /*#__PURE__*/jsx("div", {
      className: "plura-card__tilt-overlay"
    })]
  }));
};
Card.propTypes = {
  children: PropTypes.node.isRequired,
  variant: PropTypes.oneOf(['default', 'elevated', 'outlined', 'filled']),
  size: PropTypes.oneOf(['small', 'medium', 'large', 'xl']),
  shadow: PropTypes.oneOf(['none', 'small', 'medium', 'large', 'xl']),
  hover: PropTypes.bool,
  rounded: PropTypes.oneOf(['none', 'small', 'medium', 'large', 'xl', 'full']),
  border: PropTypes.bool,
  borderColor: PropTypes.oneOf(['gray', 'primary', 'success', 'danger', 'warning', 'info']),
  background: PropTypes.oneOf(['white', 'gray', 'dark', 'transparent']),
  padding: PropTypes.oneOf(['none', 'small', 'medium', 'large', 'xl']),
  clickable: PropTypes.bool,
  loading: PropTypes.bool,
  gradient: PropTypes.bool,
  glass: PropTypes.bool,
  neon: PropTypes.bool,
  tilt: PropTypes.bool,
  overlay: PropTypes.bool,
  overlayColor: PropTypes.oneOf(['light', 'dark', 'primary', 'success', 'danger']),
  overlayOpacity: PropTypes.number,
  headerTitle: PropTypes.node,
  headerSubtitle: PropTypes.node,
  headerActions: PropTypes.node,
  footerContent: PropTypes.node,
  image: PropTypes.string,
  imagePosition: PropTypes.oneOf(['top', 'bottom', 'left', 'right', 'background']),
  imageHeight: PropTypes.string,
  imageFit: PropTypes.oneOf(['cover', 'contain', 'fill']),
  className: PropTypes.string,
  style: PropTypes.object,
  onClick: PropTypes.func
};

var _excluded$h = ["title", "subtitle", "description", "primaryAction", "secondaryAction", "backgroundImage", "backgroundVideo", "backgroundType", "backgroundColor", "overlay", "overlayColor", "overlayOpacity", "height", "alignment", "textColor", "animated", "particles", "gradient", "parallax", "glassmorphism", "split", "splitContent", "splitImagePosition", "splitImage", "className", "style", "children"];
var Hero = function Hero(_ref) {
  var title = _ref.title,
    subtitle = _ref.subtitle,
    description = _ref.description,
    primaryAction = _ref.primaryAction,
    secondaryAction = _ref.secondaryAction,
    backgroundImage = _ref.backgroundImage,
    backgroundVideo = _ref.backgroundVideo,
    _ref$backgroundType = _ref.backgroundType,
    backgroundType = _ref$backgroundType === void 0 ? 'color' : _ref$backgroundType,
    _ref$backgroundColor = _ref.backgroundColor,
    backgroundColor = _ref$backgroundColor === void 0 ? 'primary' : _ref$backgroundColor,
    _ref$overlay = _ref.overlay,
    overlay = _ref$overlay === void 0 ? true : _ref$overlay,
    _ref$overlayColor = _ref.overlayColor,
    overlayColor = _ref$overlayColor === void 0 ? 'dark' : _ref$overlayColor,
    _ref$overlayOpacity = _ref.overlayOpacity,
    overlayOpacity = _ref$overlayOpacity === void 0 ? 0.5 : _ref$overlayOpacity,
    _ref$height = _ref.height,
    height = _ref$height === void 0 ? 'large' : _ref$height,
    _ref$alignment = _ref.alignment,
    alignment = _ref$alignment === void 0 ? 'center' : _ref$alignment,
    _ref$textColor = _ref.textColor,
    textColor = _ref$textColor === void 0 ? 'white' : _ref$textColor,
    _ref$animated = _ref.animated,
    animated = _ref$animated === void 0 ? true : _ref$animated,
    _ref$particles = _ref.particles,
    particles = _ref$particles === void 0 ? false : _ref$particles,
    _ref$gradient = _ref.gradient,
    gradient = _ref$gradient === void 0 ? false : _ref$gradient,
    _ref$parallax = _ref.parallax,
    parallax = _ref$parallax === void 0 ? false : _ref$parallax,
    _ref$glassmorphism = _ref.glassmorphism,
    glassmorphism = _ref$glassmorphism === void 0 ? false : _ref$glassmorphism,
    _ref$split = _ref.split,
    split = _ref$split === void 0 ? false : _ref$split,
    splitContent = _ref.splitContent,
    _ref$splitImagePositi = _ref.splitImagePosition,
    splitImagePosition = _ref$splitImagePositi === void 0 ? 'right' : _ref$splitImagePositi,
    splitImage = _ref.splitImage,
    _ref$className = _ref.className,
    className = _ref$className === void 0 ? '' : _ref$className,
    _ref$style = _ref.style,
    style = _ref$style === void 0 ? {} : _ref$style,
    children = _ref.children,
    props = _objectWithoutProperties(_ref, _excluded$h);
  var classes = ['plura-hero', "plura-hero--".concat(height), "plura-hero--".concat(alignment), "plura-hero--text-".concat(textColor), "plura-hero--bg-".concat(backgroundType), "plura-hero--bg-color-".concat(backgroundColor), animated && 'plura-hero--animated', particles && 'plura-hero--particles', gradient && 'plura-hero--gradient', parallax && 'plura-hero--parallax', glassmorphism && 'plura-hero--glass', split && 'plura-hero--split', split && "plura-hero--split-".concat(splitImagePosition), className].filter(Boolean).join(' ');
  var backgroundStyle = {};
  if (backgroundType === 'image' && backgroundImage) {
    backgroundStyle.backgroundImage = "url(".concat(backgroundImage, ")");
  }
  return /*#__PURE__*/jsxs("section", _objectSpread2(_objectSpread2({
    className: classes,
    style: _objectSpread2(_objectSpread2({}, backgroundStyle), style)
  }, props), {}, {
    children: [backgroundType === 'video' && backgroundVideo && /*#__PURE__*/jsx("video", {
      className: "plura-hero__video",
      autoPlay: true,
      muted: true,
      loop: true,
      playsInline: true,
      children: /*#__PURE__*/jsx("source", {
        src: backgroundVideo,
        type: "video/mp4"
      })
    }), overlay && /*#__PURE__*/jsx("div", {
      className: "plura-hero__overlay plura-hero__overlay--".concat(overlayColor),
      style: {
        opacity: overlayOpacity
      }
    }), particles && /*#__PURE__*/jsx("div", {
      className: "plura-hero__particles",
      children: _toConsumableArray(Array(50)).map(function (_, i) {
        return /*#__PURE__*/jsx("div", {
          className: "plura-hero__particle",
          style: {
            left: "".concat(Math.random() * 100, "%"),
            animationDelay: "".concat(Math.random() * 2, "s"),
            animationDuration: "".concat(2 + Math.random() * 3, "s")
          }
        }, i);
      })
    }), /*#__PURE__*/jsx("div", {
      className: "plura-hero__container",
      children: split ? /*#__PURE__*/jsxs("div", {
        className: "plura-hero__split-layout",
        children: [/*#__PURE__*/jsxs("div", {
          className: "plura-hero__split-content",
          children: [/*#__PURE__*/jsxs("div", {
            className: "plura-hero__content",
            children: [title && /*#__PURE__*/jsx("h1", {
              className: "plura-hero__title",
              children: title
            }), subtitle && /*#__PURE__*/jsx("h2", {
              className: "plura-hero__subtitle",
              children: subtitle
            }), description && /*#__PURE__*/jsx("p", {
              className: "plura-hero__description",
              children: description
            }), (primaryAction || secondaryAction) && /*#__PURE__*/jsxs("div", {
              className: "plura-hero__actions",
              children: [primaryAction && /*#__PURE__*/jsx("div", {
                className: "plura-hero__primary-action",
                children: primaryAction
              }), secondaryAction && /*#__PURE__*/jsx("div", {
                className: "plura-hero__secondary-action",
                children: secondaryAction
              })]
            }), children]
          }), splitContent && /*#__PURE__*/jsx("div", {
            className: "plura-hero__split-extra",
            children: splitContent
          })]
        }), splitImage && /*#__PURE__*/jsx("div", {
          className: "plura-hero__split-image",
          children: /*#__PURE__*/jsx("img", {
            src: splitImage,
            alt: "Hero"
          })
        })]
      }) : /*#__PURE__*/jsxs("div", {
        className: "plura-hero__content",
        children: [title && /*#__PURE__*/jsx("h1", {
          className: "plura-hero__title",
          children: title
        }), subtitle && /*#__PURE__*/jsx("h2", {
          className: "plura-hero__subtitle",
          children: subtitle
        }), description && /*#__PURE__*/jsx("p", {
          className: "plura-hero__description",
          children: description
        }), (primaryAction || secondaryAction) && /*#__PURE__*/jsxs("div", {
          className: "plura-hero__actions",
          children: [primaryAction && /*#__PURE__*/jsx("div", {
            className: "plura-hero__primary-action",
            children: primaryAction
          }), secondaryAction && /*#__PURE__*/jsx("div", {
            className: "plura-hero__secondary-action",
            children: secondaryAction
          })]
        }), children]
      })
    }), animated && /*#__PURE__*/jsx("div", {
      className: "plura-hero__scroll-indicator",
      children: /*#__PURE__*/jsx("div", {
        className: "plura-hero__scroll-arrow"
      })
    })]
  }));
};
Hero.propTypes = {
  title: PropTypes.node,
  subtitle: PropTypes.node,
  description: PropTypes.node,
  primaryAction: PropTypes.node,
  secondaryAction: PropTypes.node,
  backgroundImage: PropTypes.string,
  backgroundVideo: PropTypes.string,
  backgroundType: PropTypes.oneOf(['color', 'image', 'video', 'gradient']),
  backgroundColor: PropTypes.oneOf(['primary', 'secondary', 'dark', 'light', 'success', 'danger', 'warning', 'info']),
  overlay: PropTypes.bool,
  overlayColor: PropTypes.oneOf(['light', 'dark', 'primary', 'success', 'danger']),
  overlayOpacity: PropTypes.number,
  height: PropTypes.oneOf(['small', 'medium', 'large', 'xl', 'full']),
  alignment: PropTypes.oneOf(['left', 'center', 'right']),
  textColor: PropTypes.oneOf(['white', 'dark', 'primary']),
  animated: PropTypes.bool,
  particles: PropTypes.bool,
  gradient: PropTypes.bool,
  parallax: PropTypes.bool,
  glassmorphism: PropTypes.bool,
  split: PropTypes.bool,
  splitContent: PropTypes.node,
  splitImagePosition: PropTypes.oneOf(['left', 'right']),
  splitImage: PropTypes.string,
  className: PropTypes.string,
  style: PropTypes.object,
  children: PropTypes.node
};

var _excluded$g = ["logo", "logoText", "logoSize", "items", "actions", "variant", "position", "background", "transparent", "blur", "shadow", "borderBottom", "sticky", "animated", "mobileBreakpoint", "hamburgerStyle", "dropdownStyle", "alignment", "padding", "maxWidth", "className", "style", "onItemClick"];
var Navigation = function Navigation(_ref) {
  var logo = _ref.logo,
    logoText = _ref.logoText,
    _ref$logoSize = _ref.logoSize,
    logoSize = _ref$logoSize === void 0 ? 'medium' : _ref$logoSize,
    _ref$items = _ref.items,
    items = _ref$items === void 0 ? [] : _ref$items,
    actions = _ref.actions,
    _ref$variant = _ref.variant,
    variant = _ref$variant === void 0 ? 'default' : _ref$variant,
    _ref$position = _ref.position,
    position = _ref$position === void 0 ? 'static' : _ref$position,
    _ref$background = _ref.background,
    background = _ref$background === void 0 ? 'white' : _ref$background,
    _ref$transparent = _ref.transparent,
    transparent = _ref$transparent === void 0 ? false : _ref$transparent,
    _ref$blur = _ref.blur,
    blur = _ref$blur === void 0 ? false : _ref$blur,
    _ref$shadow = _ref.shadow,
    shadow = _ref$shadow === void 0 ? true : _ref$shadow,
    _ref$borderBottom = _ref.borderBottom,
    borderBottom = _ref$borderBottom === void 0 ? false : _ref$borderBottom,
    _ref$sticky = _ref.sticky,
    sticky = _ref$sticky === void 0 ? false : _ref$sticky,
    _ref$animated = _ref.animated,
    animated = _ref$animated === void 0 ? true : _ref$animated;
    _ref.mobileBreakpoint;
    var _ref$hamburgerStyle = _ref.hamburgerStyle,
    hamburgerStyle = _ref$hamburgerStyle === void 0 ? 'default' : _ref$hamburgerStyle,
    _ref$dropdownStyle = _ref.dropdownStyle,
    dropdownStyle = _ref$dropdownStyle === void 0 ? 'default' : _ref$dropdownStyle,
    _ref$alignment = _ref.alignment,
    alignment = _ref$alignment === void 0 ? 'between' : _ref$alignment,
    _ref$padding = _ref.padding,
    padding = _ref$padding === void 0 ? 'medium' : _ref$padding,
    _ref$maxWidth = _ref.maxWidth,
    maxWidth = _ref$maxWidth === void 0 ? '1200px' : _ref$maxWidth,
    _ref$className = _ref.className,
    className = _ref$className === void 0 ? '' : _ref$className,
    _ref$style = _ref.style,
    style = _ref$style === void 0 ? {} : _ref$style,
    onItemClick = _ref.onItemClick,
    props = _objectWithoutProperties(_ref, _excluded$g);
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    mobileMenuOpen = _useState2[0],
    setMobileMenuOpen = _useState2[1];
  var classes = ['plura-nav', "plura-nav--".concat(variant), "plura-nav--".concat(position), "plura-nav--bg-".concat(background), "plura-nav--align-".concat(alignment), "plura-nav--padding-".concat(padding), "plura-nav--logo-".concat(logoSize), transparent && 'plura-nav--transparent', blur && 'plura-nav--blur', shadow && 'plura-nav--shadow', borderBottom && 'plura-nav--border-bottom', sticky && 'plura-nav--sticky', animated && 'plura-nav--animated', mobileMenuOpen && 'plura-nav--mobile-open', className].filter(Boolean).join(' ');
  var handleItemClick = function handleItemClick(item, e) {
    if (item.onClick) {
      item.onClick(e);
    }
    if (onItemClick) {
      onItemClick(item, e);
    }
    // Close mobile menu on item click
    setMobileMenuOpen(false);
  };
  var renderNavItem = function renderNavItem(item, index) {
    var itemClasses = ['plura-nav__item', item.active && 'plura-nav__item--active', item.disabled && 'plura-nav__item--disabled', item.highlight && 'plura-nav__item--highlight', item.dropdown && 'plura-nav__item--dropdown'].filter(Boolean).join(' ');
    if (item.dropdown) {
      return /*#__PURE__*/jsxs("div", {
        className: itemClasses,
        children: [/*#__PURE__*/jsxs("button", {
          className: "plura-nav__link plura-nav__dropdown-trigger",
          disabled: item.disabled,
          children: [item.icon && /*#__PURE__*/jsx("span", {
            className: "plura-nav__icon",
            children: item.icon
          }), /*#__PURE__*/jsx("span", {
            children: item.label
          }), /*#__PURE__*/jsx("span", {
            className: "plura-nav__dropdown-arrow",
            children: "\u25BC"
          })]
        }), /*#__PURE__*/jsx("div", {
          className: "plura-nav__dropdown plura-nav__dropdown--".concat(dropdownStyle),
          children: item.dropdown.map(function (dropItem, dropIndex) {
            return /*#__PURE__*/jsxs("a", {
              href: dropItem.href,
              className: "plura-nav__dropdown-item ".concat(dropItem.active ? 'plura-nav__dropdown-item--active' : ''),
              onClick: function onClick(e) {
                return handleItemClick(dropItem, e);
              },
              children: [dropItem.icon && /*#__PURE__*/jsx("span", {
                className: "plura-nav__icon",
                children: dropItem.icon
              }), /*#__PURE__*/jsxs("div", {
                children: [/*#__PURE__*/jsx("span", {
                  className: "plura-nav__dropdown-label",
                  children: dropItem.label
                }), dropItem.description && /*#__PURE__*/jsx("span", {
                  className: "plura-nav__dropdown-desc",
                  children: dropItem.description
                })]
              })]
            }, dropIndex);
          })
        })]
      }, index);
    }
    var Component = item.href ? 'a' : 'button';
    return /*#__PURE__*/jsx("div", {
      className: itemClasses,
      children: /*#__PURE__*/jsxs(Component, {
        className: "plura-nav__link",
        href: item.href,
        disabled: item.disabled,
        onClick: function onClick(e) {
          return handleItemClick(item, e);
        },
        children: [item.icon && /*#__PURE__*/jsx("span", {
          className: "plura-nav__icon",
          children: item.icon
        }), /*#__PURE__*/jsx("span", {
          children: item.label
        }), item.badge && /*#__PURE__*/jsx("span", {
          className: "plura-nav__badge plura-nav__badge--".concat(item.badge.variant || 'primary'),
          children: item.badge.content
        })]
      })
    }, index);
  };
  return /*#__PURE__*/jsxs("nav", _objectSpread2(_objectSpread2({
    className: classes,
    style: _objectSpread2(_objectSpread2({}, style), {}, {
      maxWidth: maxWidth
    })
  }, props), {}, {
    children: [/*#__PURE__*/jsxs("div", {
      className: "plura-nav__container",
      children: [(logo || logoText) && /*#__PURE__*/jsxs("div", {
        className: "plura-nav__brand",
        children: [logo && /*#__PURE__*/jsx("div", {
          className: "plura-nav__logo",
          children: typeof logo === 'string' ? /*#__PURE__*/jsx("img", {
            src: logo,
            alt: "Logo"
          }) : logo
        }), logoText && /*#__PURE__*/jsx("span", {
          className: "plura-nav__logo-text",
          children: logoText
        })]
      }), /*#__PURE__*/jsx("div", {
        className: "plura-nav__items",
        children: items.map(function (item, index) {
          return renderNavItem(item, index);
        })
      }), actions && /*#__PURE__*/jsx("div", {
        className: "plura-nav__actions",
        children: actions
      }), /*#__PURE__*/jsx("button", {
        className: "plura-nav__mobile-toggle plura-nav__mobile-toggle--".concat(hamburgerStyle),
        onClick: function onClick() {
          return setMobileMenuOpen(!mobileMenuOpen);
        },
        "aria-label": "Toggle mobile menu",
        children: /*#__PURE__*/jsxs("span", {
          className: "plura-nav__hamburger",
          children: [/*#__PURE__*/jsx("span", {}), /*#__PURE__*/jsx("span", {}), /*#__PURE__*/jsx("span", {})]
        })
      })]
    }), /*#__PURE__*/jsx("div", {
      className: "plura-nav__mobile-menu",
      children: /*#__PURE__*/jsxs("div", {
        className: "plura-nav__mobile-items",
        children: [items.map(function (item, index) {
          return /*#__PURE__*/jsx("div", {
            className: "plura-nav__mobile-item",
            children: item.dropdown ? /*#__PURE__*/jsxs("div", {
              className: "plura-nav__mobile-dropdown",
              children: [/*#__PURE__*/jsxs("div", {
                className: "plura-nav__mobile-dropdown-label",
                children: [item.icon && /*#__PURE__*/jsx("span", {
                  className: "plura-nav__icon",
                  children: item.icon
                }), item.label]
              }), /*#__PURE__*/jsx("div", {
                className: "plura-nav__mobile-dropdown-items",
                children: item.dropdown.map(function (dropItem, dropIndex) {
                  return /*#__PURE__*/jsxs("a", {
                    href: dropItem.href,
                    className: "plura-nav__mobile-link",
                    onClick: function onClick(e) {
                      return handleItemClick(dropItem, e);
                    },
                    children: [dropItem.icon && /*#__PURE__*/jsx("span", {
                      className: "plura-nav__icon",
                      children: dropItem.icon
                    }), dropItem.label]
                  }, dropIndex);
                })
              })]
            }) : /*#__PURE__*/jsxs("a", {
              href: item.href,
              className: "plura-nav__mobile-link ".concat(item.active ? 'plura-nav__mobile-link--active' : ''),
              onClick: function onClick(e) {
                return handleItemClick(item, e);
              },
              children: [item.icon && /*#__PURE__*/jsx("span", {
                className: "plura-nav__icon",
                children: item.icon
              }), item.label, item.badge && /*#__PURE__*/jsx("span", {
                className: "plura-nav__badge plura-nav__badge--".concat(item.badge.variant || 'primary'),
                children: item.badge.content
              })]
            })
          }, index);
        }), actions && /*#__PURE__*/jsx("div", {
          className: "plura-nav__mobile-actions",
          children: actions
        })]
      })
    })]
  }));
};
Navigation.propTypes = {
  logo: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
  logoText: PropTypes.string,
  logoSize: PropTypes.oneOf(['small', 'medium', 'large']),
  items: PropTypes.arrayOf(PropTypes.shape({
    label: PropTypes.string.isRequired,
    href: PropTypes.string,
    icon: PropTypes.node,
    active: PropTypes.bool,
    disabled: PropTypes.bool,
    highlight: PropTypes.bool,
    onClick: PropTypes.func,
    badge: PropTypes.shape({
      content: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
      variant: PropTypes.oneOf(['primary', 'secondary', 'success', 'danger', 'warning', 'info'])
    }),
    dropdown: PropTypes.arrayOf(PropTypes.shape({
      label: PropTypes.string.isRequired,
      description: PropTypes.string,
      href: PropTypes.string,
      icon: PropTypes.node,
      active: PropTypes.bool,
      onClick: PropTypes.func
    }))
  })),
  actions: PropTypes.node,
  variant: PropTypes.oneOf(['default', 'minimal', 'bold', 'glass']),
  position: PropTypes.oneOf(['static', 'fixed', 'absolute']),
  background: PropTypes.oneOf(['white', 'dark', 'primary', 'transparent']),
  transparent: PropTypes.bool,
  blur: PropTypes.bool,
  shadow: PropTypes.bool,
  borderBottom: PropTypes.bool,
  sticky: PropTypes.bool,
  animated: PropTypes.bool,
  mobileBreakpoint: PropTypes.number,
  hamburgerStyle: PropTypes.oneOf(['default', 'arrow', 'minimal']),
  dropdownStyle: PropTypes.oneOf(['default', 'card', 'minimal']),
  alignment: PropTypes.oneOf(['left', 'center', 'right', 'between']),
  padding: PropTypes.oneOf(['small', 'medium', 'large']),
  maxWidth: PropTypes.string,
  className: PropTypes.string,
  style: PropTypes.object,
  onItemClick: PropTypes.func
};

var _excluded$f = ["type", "label", "placeholder", "value", "defaultValue", "onChange", "onFocus", "onBlur", "variant", "size", "error", "success", "warning", "helper", "required", "disabled", "readOnly", "fullWidth", "rounded", "leftIcon", "rightIcon", "prefix", "suffix", "multiline", "rows", "autoResize", "maxLength", "showCounter", "validation", "floating", "animated", "bordered", "shadow", "className", "style"];
var Input = /*#__PURE__*/forwardRef(function (_ref, ref) {
  var _ref$type = _ref.type,
    type = _ref$type === void 0 ? 'text' : _ref$type,
    label = _ref.label,
    placeholder = _ref.placeholder,
    value = _ref.value,
    defaultValue = _ref.defaultValue,
    onChange = _ref.onChange,
    onFocus = _ref.onFocus,
    onBlur = _ref.onBlur,
    _ref$variant = _ref.variant,
    variant = _ref$variant === void 0 ? 'default' : _ref$variant,
    _ref$size = _ref.size,
    size = _ref$size === void 0 ? 'medium' : _ref$size,
    error = _ref.error,
    success = _ref.success,
    warning = _ref.warning,
    helper = _ref.helper,
    _ref$required = _ref.required,
    required = _ref$required === void 0 ? false : _ref$required,
    _ref$disabled = _ref.disabled,
    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
    _ref$readOnly = _ref.readOnly,
    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
    _ref$fullWidth = _ref.fullWidth,
    fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
    _ref$rounded = _ref.rounded,
    rounded = _ref$rounded === void 0 ? 'medium' : _ref$rounded,
    leftIcon = _ref.leftIcon,
    rightIcon = _ref.rightIcon,
    prefix = _ref.prefix,
    suffix = _ref.suffix,
    _ref$multiline = _ref.multiline,
    multiline = _ref$multiline === void 0 ? false : _ref$multiline,
    _ref$rows = _ref.rows,
    rows = _ref$rows === void 0 ? 3 : _ref$rows;
    _ref.autoResize;
    var maxLength = _ref.maxLength,
    _ref$showCounter = _ref.showCounter,
    showCounter = _ref$showCounter === void 0 ? false : _ref$showCounter;
    _ref.validation;
    var _ref$floating = _ref.floating,
    floating = _ref$floating === void 0 ? false : _ref$floating,
    _ref$animated = _ref.animated,
    animated = _ref$animated === void 0 ? true : _ref$animated,
    _ref$bordered = _ref.bordered,
    bordered = _ref$bordered === void 0 ? true : _ref$bordered,
    _ref$shadow = _ref.shadow,
    shadow = _ref$shadow === void 0 ? false : _ref$shadow,
    _ref$className = _ref.className,
    className = _ref$className === void 0 ? '' : _ref$className,
    _ref$style = _ref.style,
    style = _ref$style === void 0 ? {} : _ref$style,
    props = _objectWithoutProperties(_ref, _excluded$f);
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    focused = _useState2[0],
    setFocused = _useState2[1];
  var _useState3 = useState(defaultValue || ''),
    _useState4 = _slicedToArray(_useState3, 2),
    internalValue = _useState4[0],
    setInternalValue = _useState4[1];
  var inputValue = value !== undefined ? value : internalValue;
  var isControlled = value !== undefined;
  var classes = ['plura-input', "plura-input--".concat(variant), "plura-input--".concat(size), "plura-input--rounded-".concat(rounded), error && 'plura-input--error', success && 'plura-input--success', warning && 'plura-input--warning', disabled && 'plura-input--disabled', readOnly && 'plura-input--readonly', fullWidth && 'plura-input--full-width', focused && 'plura-input--focused', floating && 'plura-input--floating', floating && inputValue && 'plura-input--has-value', animated && 'plura-input--animated', bordered && 'plura-input--bordered', shadow && 'plura-input--shadow', leftIcon && 'plura-input--with-left-icon', rightIcon && 'plura-input--with-right-icon', prefix && 'plura-input--with-prefix', suffix && 'plura-input--with-suffix', multiline && 'plura-input--multiline', className].filter(Boolean).join(' ');
  var handleChange = function handleChange(e) {
    var newValue = e.target.value;
    if (!isControlled) {
      setInternalValue(newValue);
    }
    if (onChange) {
      onChange(e);
    }
  };
  var handleFocus = function handleFocus(e) {
    setFocused(true);
    if (onFocus) {
      onFocus(e);
    }
  };
  var handleBlur = function handleBlur(e) {
    setFocused(false);
    if (onBlur) {
      onBlur(e);
    }
  };
  var getStatusMessage = function getStatusMessage() {
    if (error) return {
      type: 'error',
      message: error
    };
    if (success) return {
      type: 'success',
      message: success
    };
    if (warning) return {
      type: 'warning',
      message: warning
    };
    if (helper) return {
      type: 'helper',
      message: helper
    };
    return null;
  };
  var statusMessage = getStatusMessage();
  var InputComponent = multiline ? 'textarea' : 'input';
  return /*#__PURE__*/jsxs("div", {
    className: classes,
    style: style,
    children: [label && !floating && /*#__PURE__*/jsxs("label", {
      className: "plura-input__label",
      children: [label, required && /*#__PURE__*/jsx("span", {
        className: "plura-input__required",
        children: "*"
      })]
    }), /*#__PURE__*/jsxs("div", {
      className: "plura-input__wrapper",
      children: [leftIcon && /*#__PURE__*/jsx("div", {
        className: "plura-input__icon plura-input__icon--left",
        children: leftIcon
      }), prefix && /*#__PURE__*/jsx("div", {
        className: "plura-input__prefix",
        children: prefix
      }), /*#__PURE__*/jsxs("div", {
        className: "plura-input__field-wrapper",
        children: [/*#__PURE__*/jsx(InputComponent, _objectSpread2({
          ref: ref,
          type: multiline ? undefined : type,
          placeholder: floating ? ' ' : placeholder,
          value: inputValue,
          onChange: handleChange,
          onFocus: handleFocus,
          onBlur: handleBlur,
          disabled: disabled,
          readOnly: readOnly,
          required: required,
          maxLength: maxLength,
          rows: multiline ? rows : undefined,
          className: "plura-input__field"
        }, props)), floating && label && /*#__PURE__*/jsxs("label", {
          className: "plura-input__floating-label",
          children: [label, required && /*#__PURE__*/jsx("span", {
            className: "plura-input__required",
            children: "*"
          })]
        })]
      }), suffix && /*#__PURE__*/jsx("div", {
        className: "plura-input__suffix",
        children: suffix
      }), rightIcon && /*#__PURE__*/jsx("div", {
        className: "plura-input__icon plura-input__icon--right",
        children: rightIcon
      })]
    }), /*#__PURE__*/jsxs("div", {
      className: "plura-input__footer",
      children: [statusMessage && /*#__PURE__*/jsx("div", {
        className: "plura-input__message plura-input__message--".concat(statusMessage.type),
        children: statusMessage.message
      }), showCounter && maxLength && /*#__PURE__*/jsxs("div", {
        className: "plura-input__counter",
        children: [inputValue.length, "/", maxLength]
      })]
    })]
  });
});
Input.displayName = 'Input';
Input.propTypes = {
  type: PropTypes.oneOf(['text', 'email', 'password', 'number', 'tel', 'url', 'search']),
  label: PropTypes.string,
  placeholder: PropTypes.string,
  value: PropTypes.string,
  defaultValue: PropTypes.string,
  onChange: PropTypes.func,
  onFocus: PropTypes.func,
  onBlur: PropTypes.func,
  variant: PropTypes.oneOf(['default', 'filled', 'outlined', 'minimal']),
  size: PropTypes.oneOf(['small', 'medium', 'large']),
  error: PropTypes.string,
  success: PropTypes.string,
  warning: PropTypes.string,
  helper: PropTypes.string,
  required: PropTypes.bool,
  disabled: PropTypes.bool,
  readOnly: PropTypes.bool,
  fullWidth: PropTypes.bool,
  rounded: PropTypes.oneOf(['none', 'small', 'medium', 'large', 'full']),
  leftIcon: PropTypes.node,
  rightIcon: PropTypes.node,
  prefix: PropTypes.node,
  suffix: PropTypes.node,
  multiline: PropTypes.bool,
  rows: PropTypes.number,
  autoResize: PropTypes.bool,
  maxLength: PropTypes.number,
  showCounter: PropTypes.bool,
  validation: PropTypes.func,
  floating: PropTypes.bool,
  animated: PropTypes.bool,
  bordered: PropTypes.bool,
  shadow: PropTypes.bool,
  className: PropTypes.string,
  style: PropTypes.object
};

var _excluded$e = ["isOpen", "onClose", "title", "children", "footer", "size", "position", "variant", "overlay", "overlayColor", "overlayOpacity", "overlayBlur", "closable", "closeOnOverlay", "closeOnEscape", "animated", "animation", "fullscreen", "scrollable", "padding", "rounded", "shadow", "headerActions", "className", "style", "portalTarget", "zIndex"];
var Modal = function Modal(_ref) {
  var _ref$isOpen = _ref.isOpen,
    isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
    onClose = _ref.onClose,
    title = _ref.title,
    children = _ref.children,
    footer = _ref.footer,
    _ref$size = _ref.size,
    size = _ref$size === void 0 ? 'medium' : _ref$size,
    _ref$position = _ref.position,
    position = _ref$position === void 0 ? 'center' : _ref$position,
    _ref$variant = _ref.variant,
    variant = _ref$variant === void 0 ? 'default' : _ref$variant;
    _ref.overlay;
    var _ref$overlayColor = _ref.overlayColor,
    overlayColor = _ref$overlayColor === void 0 ? 'dark' : _ref$overlayColor,
    _ref$overlayOpacity = _ref.overlayOpacity,
    overlayOpacity = _ref$overlayOpacity === void 0 ? 0.5 : _ref$overlayOpacity,
    _ref$overlayBlur = _ref.overlayBlur,
    overlayBlur = _ref$overlayBlur === void 0 ? false : _ref$overlayBlur,
    _ref$closable = _ref.closable,
    closable = _ref$closable === void 0 ? true : _ref$closable,
    _ref$closeOnOverlay = _ref.closeOnOverlay,
    closeOnOverlay = _ref$closeOnOverlay === void 0 ? true : _ref$closeOnOverlay,
    _ref$closeOnEscape = _ref.closeOnEscape,
    closeOnEscape = _ref$closeOnEscape === void 0 ? true : _ref$closeOnEscape,
    _ref$animated = _ref.animated,
    animated = _ref$animated === void 0 ? true : _ref$animated,
    _ref$animation = _ref.animation,
    animation = _ref$animation === void 0 ? 'fade' : _ref$animation,
    _ref$fullscreen = _ref.fullscreen,
    fullscreen = _ref$fullscreen === void 0 ? false : _ref$fullscreen,
    _ref$scrollable = _ref.scrollable,
    scrollable = _ref$scrollable === void 0 ? true : _ref$scrollable,
    _ref$padding = _ref.padding,
    padding = _ref$padding === void 0 ? 'medium' : _ref$padding,
    _ref$rounded = _ref.rounded,
    rounded = _ref$rounded === void 0 ? 'medium' : _ref$rounded,
    _ref$shadow = _ref.shadow,
    shadow = _ref$shadow === void 0 ? true : _ref$shadow,
    headerActions = _ref.headerActions,
    _ref$className = _ref.className,
    className = _ref$className === void 0 ? '' : _ref$className,
    _ref$style = _ref.style,
    style = _ref$style === void 0 ? {} : _ref$style,
    portalTarget = _ref.portalTarget,
    _ref$zIndex = _ref.zIndex,
    zIndex = _ref$zIndex === void 0 ? 1000 : _ref$zIndex,
    props = _objectWithoutProperties(_ref, _excluded$e);
  var modalRef = useRef(null);
  var previousActiveElement = useRef(null);

  // Focus management
  useEffect(function () {
    if (isOpen) {
      var _modalRef$current;
      previousActiveElement.current = document.activeElement;
      (_modalRef$current = modalRef.current) === null || _modalRef$current === void 0 || _modalRef$current.focus();
    } else {
      var _previousActiveElemen;
      (_previousActiveElemen = previousActiveElement.current) === null || _previousActiveElemen === void 0 || _previousActiveElemen.focus();
    }
  }, [isOpen]);

  // Escape key handling
  useEffect(function () {
    if (!isOpen || !closeOnEscape) return;
    var handleEscape = function handleEscape(e) {
      if (e.key === 'Escape') {
        onClose === null || onClose === void 0 || onClose();
      }
    };
    document.addEventListener('keydown', handleEscape);
    return function () {
      return document.removeEventListener('keydown', handleEscape);
    };
  }, [isOpen, closeOnEscape, onClose]);

  // Body scroll lock
  useEffect(function () {
    if (isOpen) {
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = '';
    }
    return function () {
      document.body.style.overflow = '';
    };
  }, [isOpen]);
  if (!isOpen) return null;
  var classes = ['plura-modal', "plura-modal--".concat(variant), "plura-modal--".concat(size), "plura-modal--".concat(position), "plura-modal--padding-".concat(padding), "plura-mo