@rubin-epo/epo-widget-lib 0.9.12 → 0.10.0

package/dist/charts/styles.js

@@ -1,29 +1,27 @@
 "use client";
-import e from "styled-components";
-const o = e.line`
+import t from "styled-components";
+const n = t.line`
   stroke: var(--axis-stroke, #707070);
-`, n = e.polyline`
+`, o = t.polyline`
   stroke: var(--guide-stroke, #808080);
-`, i = e.line`
+`, r = t.line`
   stroke: var(--axis-tick-stroke, #000);
   stroke-width: 2;
-`, r = e.rect`
+`, i = t.rect`
   cursor: pointer;
   transform-origin: center bottom;
-`, s = e.text`
-  font-size: 0.5em;
+`, s = t.text`
   text-anchor: middle;
   dominant-baseline: hanging;
-`, a = e.text`
-  font-size: 0.5em;
+`, a = t.text`
   text-anchor: end;
-  dominant-baseline: mathematical;
+  dominant-baseline: central;
 `;
 export {
-  r as Bar,
-  o as BaseLine,
-  n as Guide,
-  i as Tick,
+  i as Bar,
+  n as BaseLine,
+  o as Guide,
+  r as Tick,
   s as XLabel,
   a as YLabel
 };

package/dist/layout/AspectRatio/index.d.ts

@@ -1,4 +1,5 @@
-import { FunctionComponent, PropsWithChildren } from "react";
+import { FunctionComponent, PropsWithChildren } from 'react';
+
 type AspectRatio = "square" | "portrait" | "landscape";
 export interface AspectRatioProps {
     ratio: AspectRatio;

package/dist/layout/AspectRatio/styles.cjs

@@ -1,4 +1,4 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("styled-components"),e=require("@rubin-epo/epo-react-lib/styles"),i=t=>t&&t.__esModule?t:{default:t},r=i(a),o=r.default.div`
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("styled-components"),e=require("@rubin-epo/epo-react-lib/styles"),o=require("../../atomic/Loader/index.cjs"),r=t=>t&&t.__esModule?t:{default:t},a=r(i),s=a.default.div`
   --aspect-ratio: var(--aspect-small-ratio, 1);
 
   aspect-ratio: var(--aspect-ratio);
@@ -13,4 +13,8 @@
   @container (min-width: ${e.token("BREAK_DESKTOP_SMALL")}) {
     --aspect-ratio: var(--aspect-large-ratio, 1);
   }
-`;exports.AspectRatio=o;
+`;a.default(o.default)`
+  position: absolute;
+  top: 0;
+  left: 0;
+`;exports.AspectRatio=s;

package/dist/layout/AspectRatio/styles.d.ts

@@ -1,6 +1,7 @@
-export declare const AspectRatio: import("styled-components").IStyledComponent<"web", {
-    ref?: import("react").LegacyRef<HTMLDivElement> | undefined;
-    key?: import("react").Key | null | undefined;
+/// <reference types="react" />
+export declare const AspectRatio: import('styled-components').IStyledComponent<"web", {
+    ref?: import('react').LegacyRef<HTMLDivElement> | undefined;
+    key?: import('react').Key | null | undefined;
     defaultChecked?: boolean | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
     suppressContentEditableWarning?: boolean | undefined;
@@ -19,12 +20,12 @@ export declare const AspectRatio: import("styled-components").IStyledComponent<"
     placeholder?: string | undefined;
     slot?: string | undefined;
     spellCheck?: (boolean | "true" | "false") | undefined;
-    style?: import("react").CSSProperties | undefined;
+    style?: import('react').CSSProperties | undefined;
     tabIndex?: number | undefined;
     title?: string | undefined;
     translate?: "yes" | "no" | undefined;
     radioGroup?: string | undefined;
-    role?: import("react").AriaRole | undefined;
+    role?: import('react').AriaRole | undefined;
     about?: string | undefined;
     content?: string | undefined;
     datatype?: string | undefined;
@@ -50,7 +51,7 @@ export declare const AspectRatio: import("styled-components").IStyledComponent<"
     unselectable?: "on" | "off" | undefined;
     inputMode?: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
-    children?: import("react").ReactNode;
+    children?: import('react').ReactNode;
     "aria-activedescendant"?: string | undefined;
     "aria-atomic"?: (boolean | "true" | "false") | undefined;
     "aria-autocomplete"?: "list" | "none" | "inline" | "both" | undefined;
@@ -107,166 +108,171 @@ export declare const AspectRatio: import("styled-components").IStyledComponent<"
     dangerouslySetInnerHTML?: {
         __html: string | TrustedHTML;
     } | undefined;
-    onCopy?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
-    onCopyCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
-    onCut?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
-    onCutCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
-    onPaste?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
-    onPasteCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
-    onCompositionEnd?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
-    onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
-    onCompositionStart?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
-    onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
-    onCompositionUpdate?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
-    onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
-    onFocus?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
-    onFocusCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
-    onBlur?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
-    onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
-    onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-    onChangeCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-    onBeforeInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-    onBeforeInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-    onInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-    onInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-    onReset?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-    onResetCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-    onSubmit?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-    onSubmitCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-    onInvalid?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-    onInvalidCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-    onLoad?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onLoadCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onError?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onErrorCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
-    onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
-    onKeyPress?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
-    onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
-    onKeyUp?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
-    onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
-    onAbort?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onAbortCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onCanPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onCanPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onCanPlayThrough?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onDurationChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onDurationChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onEmptied?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onEmptiedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onEncrypted?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onEncryptedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onEnded?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onEndedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onLoadedData?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onLoadedDataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onLoadedMetadata?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onLoadStart?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onLoadStartCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onPause?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onPauseCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onPlaying?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onPlayingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onProgress?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onProgressCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onRateChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onRateChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onResize?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onResizeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onSeeked?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onSeekedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onSeeking?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onSeekingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onStalled?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onStalledCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onSuspend?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onSuspendCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onTimeUpdate?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onVolumeChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onWaiting?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onWaitingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onAuxClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onAuxClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onContextMenu?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onContextMenuCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onDoubleClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onDoubleClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onDrag?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDragCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDragEnd?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDragEndCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDragEnter?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDragEnterCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDragExit?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDragExitCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDragLeave?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDragLeaveCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDragOver?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDragOverCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDragStart?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDragStartCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDrop?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDropCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onMouseDown?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseDownCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseEnter?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseLeave?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseMove?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseMoveCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseOut?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseOutCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseOver?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseOverCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseUp?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseUpCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onSelect?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onSelectCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onTouchCancel?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
-    onTouchCancelCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
-    onTouchEnd?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
-    onTouchEndCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
-    onTouchMove?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
-    onTouchMoveCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
-    onTouchStart?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
-    onTouchStartCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
-    onPointerDown?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerDownCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerMove?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerMoveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerUp?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerUpCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerCancel?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerCancelCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerEnter?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerEnterCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerLeave?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerLeaveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerOver?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerOverCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerOut?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerOutCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onGotPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onLostPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onScroll?: import("react").UIEventHandler<HTMLDivElement> | undefined;
-    onScrollCapture?: import("react").UIEventHandler<HTMLDivElement> | undefined;
-    onWheel?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
-    onWheelCapture?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
-    onAnimationStart?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
-    onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
-    onAnimationEnd?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
-    onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
-    onAnimationIteration?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
-    onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
-    onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
-    onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+    onCopy?: import('react').ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCopyCapture?: import('react').ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCut?: import('react').ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCutCapture?: import('react').ClipboardEventHandler<HTMLDivElement> | undefined;
+    onPaste?: import('react').ClipboardEventHandler<HTMLDivElement> | undefined;
+    onPasteCapture?: import('react').ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCompositionEnd?: import('react').CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionEndCapture?: import('react').CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionStart?: import('react').CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionStartCapture?: import('react').CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionUpdate?: import('react').CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionUpdateCapture?: import('react').CompositionEventHandler<HTMLDivElement> | undefined;
+    onFocus?: import('react').FocusEventHandler<HTMLDivElement> | undefined;
+    onFocusCapture?: import('react').FocusEventHandler<HTMLDivElement> | undefined;
+    onBlur?: import('react').FocusEventHandler<HTMLDivElement> | undefined;
+    onBlurCapture?: import('react').FocusEventHandler<HTMLDivElement> | undefined;
+    onChange?: import('react').FormEventHandler<HTMLDivElement> | undefined;
+    onChangeCapture?: import('react').FormEventHandler<HTMLDivElement> | undefined;
+    onBeforeInput?: import('react').FormEventHandler<HTMLDivElement> | undefined;
+    onBeforeInputCapture?: import('react').FormEventHandler<HTMLDivElement> | undefined;
+    onInput?: import('react').FormEventHandler<HTMLDivElement> | undefined;
+    onInputCapture?: import('react').FormEventHandler<HTMLDivElement> | undefined;
+    onReset?: import('react').FormEventHandler<HTMLDivElement> | undefined;
+    onResetCapture?: import('react').FormEventHandler<HTMLDivElement> | undefined;
+    onSubmit?: import('react').FormEventHandler<HTMLDivElement> | undefined;
+    onSubmitCapture?: import('react').FormEventHandler<HTMLDivElement> | undefined;
+    onInvalid?: import('react').FormEventHandler<HTMLDivElement> | undefined;
+    onInvalidCapture?: import('react').FormEventHandler<HTMLDivElement> | undefined;
+    onLoad?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+    onError?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+    onErrorCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+    onKeyDown?: import('react').KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyDownCapture?: import('react').KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyPress?: import('react').KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyPressCapture?: import('react').KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyUp?: import('react').KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyUpCapture?: import('react').KeyboardEventHandler<HTMLDivElement> | undefined;
+    onAbort?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+    onAbortCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlay?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayThrough?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayThroughCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+    onDurationChange?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+    onDurationChangeCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+    onEmptied?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+    onEmptiedCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+    onEncrypted?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+    onEncryptedCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+    onEnded?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+    onEndedCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedData?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedDataCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedMetadata?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedMetadataCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadStart?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadStartCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+    onPause?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+    onPauseCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+    onPlay?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+    onPlayCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+    onPlaying?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+    onPlayingCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+    onProgress?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+    onProgressCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+    onRateChange?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+    onRateChangeCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+    onResize?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+    onResizeCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+    onSeeked?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+    onSeekedCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+    onSeeking?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+    onSeekingCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+    onStalled?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+    onStalledCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+    onSuspend?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+    onSuspendCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+    onTimeUpdate?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+    onTimeUpdateCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+    onVolumeChange?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+    onVolumeChangeCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+    onWaiting?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+    onWaitingCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+    onAuxClick?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
+    onAuxClickCapture?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
+    onClick?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
+    onClickCapture?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
+    onContextMenu?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
+    onContextMenuCapture?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
+    onDoubleClick?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
+    onDoubleClickCapture?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
+    onDrag?: import('react').DragEventHandler<HTMLDivElement> | undefined;
+    onDragCapture?: import('react').DragEventHandler<HTMLDivElement> | undefined;
+    onDragEnd?: import('react').DragEventHandler<HTMLDivElement> | undefined;
+    onDragEndCapture?: import('react').DragEventHandler<HTMLDivElement> | undefined;
+    onDragEnter?: import('react').DragEventHandler<HTMLDivElement> | undefined;
+    onDragEnterCapture?: import('react').DragEventHandler<HTMLDivElement> | undefined;
+    onDragExit?: import('react').DragEventHandler<HTMLDivElement> | undefined;
+    onDragExitCapture?: import('react').DragEventHandler<HTMLDivElement> | undefined;
+    onDragLeave?: import('react').DragEventHandler<HTMLDivElement> | undefined;
+    onDragLeaveCapture?: import('react').DragEventHandler<HTMLDivElement> | undefined;
+    onDragOver?: import('react').DragEventHandler<HTMLDivElement> | undefined;
+    onDragOverCapture?: import('react').DragEventHandler<HTMLDivElement> | undefined;
+    onDragStart?: import('react').DragEventHandler<HTMLDivElement> | undefined;
+    onDragStartCapture?: import('react').DragEventHandler<HTMLDivElement> | undefined;
+    onDrop?: import('react').DragEventHandler<HTMLDivElement> | undefined;
+    onDropCapture?: import('react').DragEventHandler<HTMLDivElement> | undefined;
+    onMouseDown?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseDownCapture?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseEnter?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseLeave?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseMove?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseMoveCapture?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOut?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOutCapture?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOver?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOverCapture?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseUp?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseUpCapture?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
+    onSelect?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+    onSelectCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+    onTouchCancel?: import('react').TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchCancelCapture?: import('react').TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchEnd?: import('react').TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchEndCapture?: import('react').TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchMove?: import('react').TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchMoveCapture?: import('react').TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchStart?: import('react').TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchStartCapture?: import('react').TouchEventHandler<HTMLDivElement> | undefined;
+    onPointerDown?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerDownCapture?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerMove?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerMoveCapture?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerUp?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerUpCapture?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerCancel?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerCancelCapture?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerEnter?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerEnterCapture?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerLeave?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerLeaveCapture?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOver?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOverCapture?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOut?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOutCapture?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
+    onGotPointerCapture?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
+    onGotPointerCaptureCapture?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
+    onLostPointerCapture?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
+    onLostPointerCaptureCapture?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
+    onScroll?: import('react').UIEventHandler<HTMLDivElement> | undefined;
+    onScrollCapture?: import('react').UIEventHandler<HTMLDivElement> | undefined;
+    onWheel?: import('react').WheelEventHandler<HTMLDivElement> | undefined;
+    onWheelCapture?: import('react').WheelEventHandler<HTMLDivElement> | undefined;
+    onAnimationStart?: import('react').AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationStartCapture?: import('react').AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationEnd?: import('react').AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationEndCapture?: import('react').AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationIteration?: import('react').AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationIterationCapture?: import('react').AnimationEventHandler<HTMLDivElement> | undefined;
+    onTransitionEnd?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionEndCapture?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
+}>;
+export declare const StackedLoader: import('styled-components').IStyledComponent<"web", {
+    className?: string | undefined;
+}> & import('react').FunctionComponent<{
+    className?: string | undefined;
 }>;

package/dist/layout/AspectRatio/styles.js

@@ -1,7 +1,8 @@
 "use client";
 import a from "styled-components";
 import { token as t } from "@rubin-epo/epo-react-lib/styles";
-const r = a.div`
+import i from "../../atomic/Loader/index.js";
+const p = a.div`
   --aspect-ratio: var(--aspect-small-ratio, 1);
 
   aspect-ratio: var(--aspect-ratio);
@@ -17,6 +18,11 @@ const r = a.div`
     --aspect-ratio: var(--aspect-large-ratio, 1);
   }
 `;
+a(i)`
+  position: absolute;
+  top: 0;
+  left: 0;
+`;
 export {
-  r as AspectRatio
+  p as AspectRatio
 };

package/dist/layout/Controls/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),o=require("../AspectRatio/index.cjs"),t=require("./styles.cjs"),n=({widget:d,controls:s,actions:i,caption:r,className:l})=>e.jsx(o.default,{ratio:"landscape",medScreenRatio:"landscape",smallScreenRatio:"portrait",className:l,children:e.jsxs(t.WidgetLayout,{children:[e.jsxs(t.InteractionRow,{children:[e.jsx(t.Widget,{children:d}),r&&e.jsx(t.PortraitCaption,{children:r}),s&&e.jsx(t.Controls,{children:s})]}),i&&e.jsx(t.Actions,{children:i}),r&&e.jsx(t.LandscapeCaption,{children:r})]})});n.displayName="Layouts.WidgetControls";exports.default=n;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),n=require("../AspectRatio/index.cjs"),r=require("./styles.cjs"),l=({widget:s,controls:d,actions:i,caption:t,controlsId:o,className:c,isLoading:a,isDisplayOnly:u})=>u?e.jsxs(n.default,{ratio:"square",children:[s,a&&e.jsx(r.StackedLoader,{})]}):e.jsx(n.default,{ratio:"landscape",medScreenRatio:"landscape",smallScreenRatio:"portrait",className:c,children:e.jsxs(r.WidgetLayout,{children:[e.jsxs(r.InteractionRow,{children:[e.jsxs(r.Widget,{children:[s,a&&e.jsx(r.StackedLoader,{})]}),t&&e.jsx(r.PortraitCaption,{children:t}),d&&e.jsx(r.Controls,{id:o,children:d})]}),i&&e.jsx(r.Actions,{children:i}),t&&e.jsx(r.LandscapeCaption,{children:t})]})});l.displayName="Layouts.WidgetControls";exports.default=l;

package/dist/layout/Controls/index.d.ts

@@ -1,10 +1,14 @@
-import { FunctionComponent, ReactNode } from "react";
+import { FunctionComponent, ReactNode } from 'react';
+
 interface WidgetControlsProps {
     widget: ReactNode;
     controls: ReactNode;
+    controlsId?: string;
     actions?: ReactNode;
     caption?: ReactNode;
     className?: string;
+    isLoading?: boolean;
+    isDisplayOnly?: boolean;
 }
 declare const WidgetControls: FunctionComponent<WidgetControlsProps>;
 export default WidgetControls;

package/dist/layout/Controls/index.js

@@ -1,31 +1,40 @@
-import { jsx as r, jsxs as o } from "react/jsx-runtime";
+import { jsxs as t, jsx as r } from "react/jsx-runtime";
 import n from "../AspectRatio/index.js";
-import { WidgetLayout as l, InteractionRow as s, Widget as c, PortraitCaption as m, Controls as p, Actions as h, LandscapeCaption as C } from "./styles.js";
-const f = ({
-  widget: a,
-  controls: t,
-  actions: i,
+import { StackedLoader as l, WidgetLayout as m, InteractionRow as p, Widget as u, PortraitCaption as f, Controls as C, Actions as R, LandscapeCaption as W } from "./styles.js";
+const x = ({
+  widget: i,
+  controls: o,
+  actions: a,
   caption: e,
-  className: d
-}) => /* @__PURE__ */ r(
+  controlsId: c,
+  className: s,
+  isLoading: d,
+  isDisplayOnly: h
+}) => h ? /* @__PURE__ */ t(n, { ratio: "square", children: [
+  i,
+  d && /* @__PURE__ */ r(l, {})
+] }) : /* @__PURE__ */ r(
   n,
   {
     ratio: "landscape",
     medScreenRatio: "landscape",
     smallScreenRatio: "portrait",
-    className: d,
-    children: /* @__PURE__ */ o(l, { children: [
-      /* @__PURE__ */ o(s, { children: [
-        /* @__PURE__ */ r(c, { children: a }),
-        e && /* @__PURE__ */ r(m, { children: e }),
-        t && /* @__PURE__ */ r(p, { children: t })
+    className: s,
+    children: /* @__PURE__ */ t(m, { children: [
+      /* @__PURE__ */ t(p, { children: [
+        /* @__PURE__ */ t(u, { children: [
+          i,
+          d && /* @__PURE__ */ r(l, {})
+        ] }),
+        e && /* @__PURE__ */ r(f, { children: e }),
+        o && /* @__PURE__ */ r(C, { id: c, children: o })
       ] }),
-      i && /* @__PURE__ */ r(h, { children: i }),
-      e && /* @__PURE__ */ r(C, { children: e })
+      a && /* @__PURE__ */ r(R, { children: a }),
+      e && /* @__PURE__ */ r(W, { children: e })
     ] })
   }
 );
-f.displayName = "Layouts.WidgetControls";
+x.displayName = "Layouts.WidgetControls";
 export {
-  f as default
+  x as default
 };