jvetrau-ds 0.1.0 → 0.1.2

package/index.cjs

@@ -1,12 +1,12 @@
 'use strict';
 
-var React4 = require('react');
+var React3 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var Hls = require('hls.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React4__default = /*#__PURE__*/_interopDefault(React4);
+var React3__default = /*#__PURE__*/_interopDefault(React3);
 var Hls__default = /*#__PURE__*/_interopDefault(Hls);
 
 // src/components/button/button.tsx
@@ -194,9 +194,9 @@ var Button = ({
     "button--icon-only": isIconOnly
   });
   let resolvedIcon = icon;
-  if (React4.isValidElement(icon) && icon.type === icon_default) {
+  if (React3.isValidElement(icon) && icon.type === icon_default) {
     const iconElement = icon;
-    resolvedIcon = React4.cloneElement(iconElement, {
+    resolvedIcon = React3.cloneElement(iconElement, {
       size: iconElement.props.size ?? "s",
       className: classnames("button__icon", iconElement.props.className),
       "aria-hidden": iconElement.props["aria-hidden"] ?? true,
@@ -323,9 +323,9 @@ var Dropdown = ({
   className = "",
   ...props
 }) => {
-  const dropdownRef = React4.useRef(null);
-  const [isOpen, setIsOpen] = React4.useState(false);
-  const [internalValue, setInternalValue] = React4.useState(defaultValue);
+  const dropdownRef = React3.useRef(null);
+  const [isOpen, setIsOpen] = React3.useState(false);
+  const [internalValue, setInternalValue] = React3.useState(defaultValue);
   const selectedValue = value ?? internalValue;
   const classes = classnames("dropdown", className, {
     "dropdown--open": isOpen,
@@ -339,7 +339,7 @@ var Dropdown = ({
     "dropdown__trigger",
     triggerElement.props.className
   );
-  const resolvedTrigger = React4.cloneElement(triggerElement, {
+  const resolvedTrigger = React3.cloneElement(triggerElement, {
     className: triggerClasses,
     "aria-haspopup": "menu",
     "aria-expanded": isOpen,
@@ -358,7 +358,7 @@ var Dropdown = ({
     onChange?.(option.value);
     setIsOpen(false);
   };
-  React4.useEffect(() => {
+  React3.useEffect(() => {
     if (!isOpen) {
       return;
     }
@@ -512,23 +512,93 @@ var Field = ({
   ] });
 };
 var field_default = Field;
+function getInitialValue(value, defaultValue, items) {
+  if (value !== void 0) {
+    return value;
+  }
+  if (defaultValue !== void 0) {
+    return defaultValue;
+  }
+  return items[0]?.value;
+}
 var Menu = ({
-  state = "default",
+  items,
+  value,
+  defaultValue,
+  label = "Menu",
   className = "",
-  children,
-  //  disabled = false,
+  onValueChange,
   ...props
 }) => {
-  const classes = classnames("menu", className, {
-    error: state === "error",
-    success: state === "success"
-  });
+  const [internalValue, setInternalValue] = React3__default.default.useState(
+    getInitialValue(value, defaultValue, items)
+  );
+  const currentValue = value ?? internalValue;
+  React3__default.default.useEffect(() => {
+    if (value !== void 0) {
+      return;
+    }
+    setInternalValue(getInitialValue(value, defaultValue, items));
+  }, [value, defaultValue, items]);
+  const handleItemClick = (itemValue, disabled) => {
+    if (disabled) {
+      return;
+    }
+    if (value === void 0) {
+      setInternalValue(itemValue);
+    }
+    onValueChange?.(itemValue);
+  };
+  const classes = classnames("menu", className, {});
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
+    "nav",
     {
       className: classes,
+      "aria-label": label,
       ...props,
-      children
+      children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "menu__list", children: items.map((item) => {
+        const isActive = item.value === currentValue;
+        const itemClasses = classnames("menu__control", {
+          "menu__control--active": isActive,
+          "menu__control--disabled": item.disabled
+        });
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "li",
+          {
+            className: "menu__item",
+            children: item.href ? /* @__PURE__ */ jsxRuntime.jsx(
+              "a",
+              {
+                className: itemClasses,
+                href: item.href,
+                "aria-current": isActive ? "page" : void 0,
+                "aria-disabled": item.disabled || void 0,
+                onClick: (event) => {
+                  if (item.disabled) {
+                    event.preventDefault();
+                    return;
+                  }
+                  handleItemClick(item.value);
+                },
+                children: item.label
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                className: itemClasses,
+                type: "button",
+                disabled: item.disabled,
+                onClick: () => handleItemClick(
+                  item.value,
+                  item.disabled
+                ),
+                children: item.label
+              }
+            )
+          },
+          item.value
+        );
+      }) })
     }
   );
 };
@@ -607,7 +677,7 @@ var ProgressBar = ({
   onValueCommit,
   ...props
 }) => {
-  const trackRef = React4.useRef(null);
+  const trackRef = React3.useRef(null);
   const safeValue = getClampedValue(
     value,
     max
@@ -752,29 +822,20 @@ var ProgressBar = ({
 };
 var progressbar_default = ProgressBar;
 function getClampedValue2(value, min, max) {
-  return Math.min(
-    Math.max(value, min),
-    max
-  );
+  return Math.min(Math.max(value, min), max);
 }
 function formatTime(value) {
-  if (!Number.isFinite(value)) {
-    return "0:00";
-  }
+  if (!Number.isFinite(value)) return "0:00";
   const minutes = Math.floor(value / 60);
   const seconds = Math.floor(value % 60);
   return `${minutes}:${String(seconds).padStart(2, "0")}`;
 }
 function getBufferedEnd(video) {
-  if (video.buffered.length === 0) {
-    return 0;
-  }
+  if (video.buffered.length === 0) return 0;
   return video.buffered.end(video.buffered.length - 1);
 }
 function getVideoSource(src, qualities, selectedQuality) {
-  const selectedQualityItem = qualities.find(
-    (quality) => quality.value === selectedQuality
-  );
+  const selectedQualityItem = qualities.find((quality) => quality.value === selectedQuality);
   return selectedQualityItem?.src ?? src;
 }
 function getQualityOptions(qualities) {
@@ -784,28 +845,26 @@ function getQualityOptions(qualities) {
     disabled: quality.disabled
   }));
 }
-var defaultQualities = [
-  {
-    value: "360p",
-    label: "360p"
-  },
-  {
-    value: "720p",
-    label: "720p"
-  },
-  {
-    value: "1080p",
-    label: "1080p"
-  }
-];
+function getVideoProgressState(video) {
+  const duration = video.duration || 0;
+  const currentTime = video.currentTime || 0;
+  return {
+    currentTime,
+    duration,
+    completed: video.ended || duration > 0 && currentTime >= duration * 0.9
+  };
+}
+var defaultQualities = [];
 var Video = ({
   src,
   cover,
   qualities = defaultQualities,
-  defaultQuality = "1080p",
+  defaultQuality = "",
   label = "Video player",
   initialVolume = 1,
   initialMuted = false,
+  initialTime = 0,
+  progressCommitIntervalSec = 15,
   className = "",
   autoPlay,
   loop,
@@ -815,32 +874,36 @@ var Video = ({
   onQualityChange,
   onPlay,
   onPause,
+  onEnded,
   onLoadedMetadata,
   onTimeUpdate,
   onProgress,
   onVolumeChange,
+  onProgressCommit,
   children,
   ...props
 }) => {
-  const videoRef = React4.useRef(null);
-  const [isPlaying, setIsPlaying] = React4.useState(false);
-  const [isVolumeOpen, setIsVolumeOpen] = React4.useState(false);
-  const [selectedQuality, setSelectedQuality] = React4.useState(defaultQuality);
-  const [currentTime, setCurrentTime] = React4.useState(0);
-  const [duration, setDuration] = React4.useState(0);
-  const [buffered, setBuffered] = React4.useState(0);
-  const [volume, setVolume] = React4.useState(initialVolume);
-  const [isMuted, setIsMuted] = React4.useState(muted ?? initialMuted);
-  const videoSrc = getVideoSource(
-    src,
-    qualities,
-    selectedQuality
-  );
-  React4__default.default.useEffect(() => {
+  const videoRef = React3.useRef(null);
+  const [isPlaying, setIsPlaying] = React3.useState(false);
+  const [isVolumeOpen, setIsVolumeOpen] = React3.useState(false);
+  const [selectedQuality, setSelectedQuality] = React3.useState(defaultQuality);
+  const [currentTime, setCurrentTime] = React3.useState(0);
+  const [duration, setDuration] = React3.useState(0);
+  const [buffered, setBuffered] = React3.useState(0);
+  const [volume, setVolume] = React3.useState(initialVolume);
+  const [isMuted, setIsMuted] = React3.useState(muted ?? initialMuted);
+  const hasAppliedInitialTimeRef = React3.useRef(false);
+  const lastProgressCommitAtRef = React3.useRef(0);
+  const videoSrc = getVideoSource(src, qualities, selectedQuality);
+  const qualityOptions = getQualityOptions(qualities);
+  const hasQualityOptions = qualityOptions.length > 0;
+  React3.useEffect(() => {
     const video = videoRef.current;
-    if (!video || !videoSrc) {
-      return;
-    }
+    hasAppliedInitialTimeRef.current = false;
+    lastProgressCommitAtRef.current = 0;
+    if (!video || !videoSrc) return;
+    video.removeAttribute("src");
+    video.load();
     if (video.canPlayType("application/vnd.apple.mpegurl")) {
       video.src = videoSrc;
       return;
@@ -859,9 +922,6 @@ var Video = ({
       hls.destroy();
     };
   }, [videoSrc]);
-  const qualityOptions = getQualityOptions(
-    qualities
-  );
   const hasStarted = currentTime > 0 || isPlaying;
   const hasControls = hasStarted;
   const hasVolume = isVolumeOpen;
@@ -871,9 +931,7 @@ var Video = ({
   });
   const syncMediaState = () => {
     const video = videoRef.current;
-    if (!video) {
-      return;
-    }
+    if (!video) return;
     setCurrentTime(video.currentTime);
     setDuration(video.duration || 0);
     setBuffered(getBufferedEnd(video));
@@ -881,39 +939,45 @@ var Video = ({
     setIsMuted(video.muted);
     setIsPlaying(!video.paused);
   };
-  const handlePlayToggle = () => {
-    const video = videoRef.current;
-    if (!video) {
+  const commitProgress = (video) => {
+    if (!onProgressCommit) {
       return;
     }
+    onProgressCommit(
+      getVideoProgressState(video)
+    );
+  };
+  const handlePlayToggle = async () => {
+    const video = videoRef.current;
+    if (!video) return;
+    console.log("play click", {
+      paused: video.paused,
+      readyState: video.readyState,
+      src: video.currentSrc,
+      networkState: video.networkState,
+      error: video.error
+    });
     if (video.paused) {
-      video.play().catch(() => void 0);
+      try {
+        await video.play();
+        console.log("play success");
+      } catch (error) {
+        console.error("play failed", error);
+      }
       return;
     }
     video.pause();
   };
   const handleSeek = (nextValue) => {
     const video = videoRef.current;
-    if (!video) {
-      return;
-    }
-    video.currentTime = getClampedValue2(
-      nextValue,
-      0,
-      duration
-    );
+    if (!video) return;
+    video.currentTime = getClampedValue2(nextValue, 0, duration);
     setCurrentTime(video.currentTime);
   };
   const handleVolumeChange = (nextValue) => {
     const video = videoRef.current;
-    if (!video) {
-      return;
-    }
-    const nextVolume = getClampedValue2(
-      nextValue,
-      0,
-      1
-    );
+    if (!video) return;
+    const nextVolume = getClampedValue2(nextValue, 0, 1);
     video.volume = nextVolume;
     video.muted = nextVolume === 0;
     setVolume(nextVolume);
@@ -921,17 +985,13 @@ var Video = ({
   };
   const handleSoundToggle = () => {
     const video = videoRef.current;
-    if (!video) {
-      return;
-    }
+    if (!video) return;
     video.muted = !video.muted;
     setIsMuted(video.muted);
   };
   const handleFullscreen = () => {
     const video = videoRef.current;
-    if (!video) {
-      return;
-    }
+    if (!video) return;
     video.requestFullscreen?.();
   };
   const handleQualityChange = (quality) => {
@@ -939,11 +999,24 @@ var Video = ({
     onQualityChange?.(quality);
   };
   const handleLoadedMetadata = (event) => {
+    const video = event.currentTarget;
+    if (!hasAppliedInitialTimeRef.current && initialTime > 0) {
+      video.currentTime = Math.min(
+        initialTime,
+        video.duration || initialTime
+      );
+      hasAppliedInitialTimeRef.current = true;
+    }
     syncMediaState();
     onLoadedMetadata?.(event);
   };
   const handleTimeUpdate = (event) => {
+    const video = event.currentTarget;
     syncMediaState();
+    if (onProgressCommit && video.currentTime - lastProgressCommitAtRef.current >= progressCommitIntervalSec) {
+      lastProgressCommitAtRef.current = video.currentTime;
+      commitProgress(video);
+    }
     onTimeUpdate?.(event);
   };
   const handleProgress = (event) => {
@@ -956,133 +1029,122 @@ var Video = ({
   };
   const handlePause = (event) => {
     setIsPlaying(false);
+    commitProgress(event.currentTarget);
     onPause?.(event);
   };
+  const handleEnded = (event) => {
+    syncMediaState();
+    commitProgress(event.currentTarget);
+    onEnded?.(event);
+  };
   const handleNativeVolumeChange = (event) => {
     syncMediaState();
     onVolumeChange?.(event);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: classes,
-      "aria-label": label,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "video__surface", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "video",
-            {
-              ...props,
-              ref: videoRef,
-              className: "video__media",
-              poster: cover,
-              autoPlay,
-              loop,
-              muted: isMuted,
-              playsInline,
-              preload,
-              controls: false,
-              onLoadedMetadata: handleLoadedMetadata,
-              onTimeUpdate: handleTimeUpdate,
-              onProgress: handleProgress,
-              onPlay: handlePlay,
-              onPause: handlePause,
-              onVolumeChange: handleNativeVolumeChange,
-              children
-            }
-          ),
-          !hasStarted && /* @__PURE__ */ jsxRuntime.jsx(
-            button_icon_default,
-            {
-              className: "video__main-action",
-              icon: "play",
-              label: "Play video",
-              onClick: handlePlayToggle
-            }
-          )
-        ] }),
-        hasControls && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "video__controls", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            button_icon_default,
-            {
-              icon: isPlaying ? "pause" : "play",
-              label: isPlaying ? "Pause video" : "Play video",
-              onClick: handlePlayToggle
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "video__time", children: formatTime(currentTime) }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            progressbar_default,
-            {
-              className: "video__progress",
-              mode: "player",
-              value: currentTime,
-              buffered,
-              max: duration || 1,
-              step: 1,
-              label: "Video progress",
-              onValueChange: handleSeek
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            button_icon_default,
-            {
-              icon: "fullscreen",
-              label: "Fullscreen",
-              onClick: handleFullscreen
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              className: "video__sound-control",
-              onMouseLeave: () => setIsVolumeOpen(false),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  button_icon_default,
-                  {
-                    icon: isMuted ? "sound-off" : "sound",
-                    label: isMuted ? "Unmute video" : "Mute video",
-                    onClick: handleSoundToggle,
-                    onMouseEnter: () => setIsVolumeOpen(true),
-                    onFocus: () => setIsVolumeOpen(true)
-                  }
-                ),
-                hasVolume && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "video__volume", children: /* @__PURE__ */ jsxRuntime.jsx(
-                  progressbar_default,
-                  {
-                    mode: "level",
-                    value: isMuted ? 0 : volume,
-                    max: 1,
-                    step: 0.05,
-                    label: "Volume",
-                    onValueChange: handleVolumeChange
-                  }
-                ) })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            dropdown_default,
-            {
-              align: "top-end",
-              value: selectedQuality,
-              options: qualityOptions,
-              label: "Video quality",
-              onChange: handleQualityChange,
-              trigger: /* @__PURE__ */ jsxRuntime.jsx(
-                button_icon_default,
-                {
-                  icon: "settings",
-                  label: "Video quality"
-                }
-              )
-            }
-          )
-        ] })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes, "aria-label": label, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "video__surface", children: [
+      cover && !hasStarted ? /* @__PURE__ */ jsxRuntime.jsx(
+        "img",
+        {
+          className: "video__cover",
+          src: cover,
+          alt: "",
+          "aria-hidden": "true"
+        }
+      ) : null,
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "video",
+        {
+          ...props,
+          ref: videoRef,
+          className: "video__media",
+          poster: cover,
+          autoPlay,
+          loop,
+          muted: isMuted,
+          playsInline,
+          preload,
+          controls: false,
+          onLoadedMetadata: handleLoadedMetadata,
+          onTimeUpdate: handleTimeUpdate,
+          onProgress: handleProgress,
+          onPlay: handlePlay,
+          onPause: handlePause,
+          onEnded: handleEnded,
+          onVolumeChange: handleNativeVolumeChange,
+          children
+        }
+      ),
+      !hasStarted && /* @__PURE__ */ jsxRuntime.jsx(
+        button_icon_default,
+        {
+          className: "video__main-action",
+          icon: "play",
+          label: "Play video",
+          onClick: handlePlayToggle
+        }
+      )
+    ] }),
+    hasControls && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "video__controls", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        button_icon_default,
+        {
+          icon: isPlaying ? "pause" : "play",
+          label: isPlaying ? "Pause video" : "Play video",
+          onClick: handlePlayToggle
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "video__time", children: formatTime(currentTime) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        progressbar_default,
+        {
+          className: "video__progress",
+          mode: "player",
+          value: currentTime,
+          buffered,
+          max: duration || 1,
+          step: 1,
+          label: "Video progress",
+          onValueChange: handleSeek
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(button_icon_default, { icon: "fullscreen", label: "Fullscreen", onClick: handleFullscreen }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "video__sound-control", onMouseLeave: () => setIsVolumeOpen(false), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          button_icon_default,
+          {
+            icon: isMuted ? "sound-off" : "sound",
+            label: isMuted ? "Unmute video" : "Mute video",
+            onClick: handleSoundToggle,
+            onMouseEnter: () => setIsVolumeOpen(true),
+            onFocus: () => setIsVolumeOpen(true)
+          }
+        ),
+        hasVolume && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "video__volume", children: /* @__PURE__ */ jsxRuntime.jsx(
+          progressbar_default,
+          {
+            mode: "level",
+            value: isMuted ? 0 : volume,
+            max: 1,
+            step: 0.05,
+            label: "Volume",
+            onValueChange: handleVolumeChange
+          }
+        ) })
+      ] }),
+      hasQualityOptions && /* @__PURE__ */ jsxRuntime.jsx(
+        dropdown_default,
+        {
+          align: "top-end",
+          value: selectedQuality,
+          options: qualityOptions,
+          label: "Video quality",
+          onChange: handleQualityChange,
+          trigger: /* @__PURE__ */ jsxRuntime.jsx(button_icon_default, { icon: "settings", label: "Video quality" })
+        }
+      )
+    ] })
+  ] });
 };
 var video_default = Video;
 var Search = ({
@@ -1171,18 +1233,258 @@ var Card = ({
   );
 };
 var card_default = Card;
+var Panel = ({
+  layout = "card",
+  heading,
+  description,
+  className = "",
+  children,
+  ...props
+}) => {
+  const classes = classnames("panel", className, {
+    "panel--transparent": layout === "transparent"
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "section",
+    {
+      className: classes,
+      ...props,
+      children: [
+        (heading || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel__header", children: [
+          heading && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "panel__heading", children: heading }),
+          description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "panel__description", children: description })
+        ] }),
+        children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "panel__content", children })
+      ]
+    }
+  );
+};
+var panel_default = Panel;
+
+// src/components/logo/assets/logo-symbol.svg
+var logo_symbol_default = "./logo-symbol-JDC3ZGUQ.svg";
+
+// src/components/logo/assets/logo-wordmark.svg
+var logo_wordmark_default = "./logo-wordmark-XQV4UJSX.svg";
+var Logo = ({
+  mode = "full",
+  label = "\u041F\u0430\u0442\u0442\u0435\u0440\u043D\u044B \u0434\u0438\u0437\u0430\u0439\u043D-\u043C\u0435\u043D\u0435\u0434\u0436\u043C\u0435\u043D\u0442\u0430",
+  className = "",
+  ...props
+}) => {
+  const classes = classnames("logo", className, {
+    "logo--symbol": mode === "symbol"
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: classes,
+      "aria-label": label,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            className: "logo__symbol",
+            src: logo_symbol_default,
+            alt: "",
+            "aria-hidden": "true"
+          }
+        ),
+        mode === "full" && /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            className: "logo__wordmark",
+            src: logo_wordmark_default,
+            alt: "",
+            "aria-hidden": "true"
+          }
+        )
+      ]
+    }
+  );
+};
+var logo_default = Logo;
+var Avatar = ({
+  src,
+  alt = "",
+  initials,
+  className = "",
+  ...props
+}) => {
+  const classes = classnames("avatar", className, {});
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: classes,
+      "aria-label": alt,
+      ...props,
+      children: src ? /* @__PURE__ */ jsxRuntime.jsx(
+        "img",
+        {
+          className: "avatar__image",
+          src,
+          alt
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "avatar__initials", children: initials })
+    }
+  );
+};
+var avatar_default = Avatar;
+var Header = ({
+  logo,
+  menu,
+  avatar,
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "header",
+    {
+      className: "header",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "header__logo", children: logo }),
+        (menu || children) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "header__menu", children: menu || children }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "header__avatar", children: avatar })
+      ]
+    }
+  );
+};
+var header_default = Header;
+var Footer = ({
+  copyright,
+  links,
+  secondaryLinks,
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("footer", { className: "footer", ...props, children: [
+    copyright && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "footer__copyright", children: copyright }),
+    (links || children) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "footer__links", children: links || children }),
+    secondaryLinks && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "footer__links footer__links--secondary", children: secondaryLinks })
+  ] });
+};
+var footer_default = Footer;
+var ScreenHeader = ({
+  eyebrow,
+  title,
+  description,
+  tabs,
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "section",
+    {
+      className: "screen-header",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "screen-header__heading", children: [
+          eyebrow && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "screen-header__section", children: eyebrow }),
+          title && /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "screen-header__title", children: title }),
+          description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "screen-header__description", children: description })
+        ] }),
+        (tabs || children) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "screen-header__tabs", children: tabs || children })
+      ]
+    }
+  );
+};
+var screen_header_default = ScreenHeader;
+var LayoutFoundation = ({
+  width = "default",
+  className = "",
+  children,
+  ...props
+}) => {
+  const classes = classnames("layout-foundation", className, {
+    "layout-foundation--narrow": width === "narrow",
+    "layout-foundation--wide": width === "wide",
+    "layout-foundation--full": width === "full"
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: classes,
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "layout-foundation__grid", children })
+    }
+  );
+};
+var foundation_default = LayoutFoundation;
+var LayoutBase = ({
+  width = "default",
+  header,
+  footer,
+  children,
+  className = "",
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    foundation_default,
+    {
+      width,
+      className,
+      ...props,
+      children: [
+        header && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "layout-base__header", children: header }),
+        /* @__PURE__ */ jsxRuntime.jsx("main", { className: "layout-base__main", children }),
+        footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "layout-base__footer", children: footer })
+      ]
+    }
+  );
+};
+var base_default = LayoutBase;
+var LayoutSidebar = ({
+  width = "wide",
+  header,
+  screenHeader,
+  sidebar,
+  footer,
+  children,
+  className = "",
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    foundation_default,
+    {
+      width,
+      className,
+      ...props,
+      children: [
+        header && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "layout-sidebar__header", children: header }),
+        screenHeader && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "layout-sidebar__screen-header", children: screenHeader }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "layout-sidebar__body", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("main", { className: "layout-sidebar__main", children }),
+          sidebar && /* @__PURE__ */ jsxRuntime.jsx("aside", { className: "layout-sidebar__side", children: sidebar })
+        ] }),
+        footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "layout-sidebar__footer", children: footer })
+      ]
+    }
+  );
+};
+var sidebar_default = LayoutSidebar;
 
+exports.Avatar = avatar_default;
 exports.Button = button_default;
 exports.ButtonIcon = button_icon_default;
 exports.Card = card_default;
 exports.Checkbox = checkbox_default;
 exports.Dropdown = dropdown_default;
 exports.Field = field_default;
+exports.Footer = footer_default;
+exports.Header = header_default;
 exports.Input = input_default;
+exports.LayoutBase = base_default;
+exports.LayoutFoundation = foundation_default;
+exports.LayoutSidebar = sidebar_default;
+exports.Logo = logo_default;
 exports.Menu = menu_default;
+exports.Panel = panel_default;
 exports.ProgressBar = progressbar_default;
 exports.Radio = radio_default;
 exports.RichEdit = richedit_default;
+exports.ScreenHeader = screen_header_default;
 exports.Search = search_default;
 exports.Select = select_default;
 exports.Tabs = tabs_default;