@rubin-epo/epo-widget-lib 1.1.0 → 1.1.2

package/README.MD

@@ -77,7 +77,7 @@ To add a unit test to it's Storybook page add the filename of the unit test to t
 
 ```
 
-export const Primary: ComponentStoryObj<typeof DemoButton> = {
+export const Primary: StoryObj<typeof DemoButton> = {
 args: {
 disabled: false,
 children: "Hello",

package/dist/ViewIndicator.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),V=require("react"),j=require("d3-geo"),s=require("./widgets/ViewIndicator/styles.cjs"),W=require("./lib/utils.cjs"),h=10,$=10,k=[h,$],m=100,v=100,g=j.geoGraticule();g.step([180,180]);const b=t=>{const{backFaces:n=!1,applyRotation:i=!0}=t||{},e=j.geoOrthographic();e.fitExtent([[0,0],[m,v]],g.outline()),i&&e.rotate(k),n&&e.clipAngle(null);const r=j.geoPath(e);return{projection:e,pathGenerator:a=>r(a)||void 0}},A=()=>{const{pathGenerator:t}=b({applyRotation:!1});return o.jsx(s.Outline,{d:t(g.outline())})},R=({backFaces:t})=>{const{pathGenerator:n}=b({backFaces:t});return o.jsx(s.Meridian,{d:n(g()),opacity:t?.8:void 0})},C=(t,n)=>{const i=t>90-h&&t<270-h,e=n>0+$,r=t>180-h,c=["top","bottom"],a=["left","right"];e&&c.reverse(),r&&a.reverse();const d=["plane",c[0],...a,c[1]];return i&&d.reverse(),d},N=({ra:t,dec:n,fov:i})=>{const{pathGenerator:e}=b({backFaces:!0}),[r,c]=i,a=Math.max(r,.1)/2,d=Math.max(c,.1)/2,S=n+d,M=n-d,w=t+a,G=t-a,p=[w,S],f=[G,S],x=[w,M],y=[G,M],E=m/2,F=v/2,u=l=>`${l}L${E},${F}`,L={plane:o.jsx(s.Plane,{d:e({type:"Polygon",coordinates:[[p,f,y,x,p]]})}),top:o.jsx(s.TopEdges,{d:u(e({type:"LineString",coordinates:[p,f]}))}),bottom:o.jsx(s.TopEdges,{d:u(e({type:"LineString",coordinates:[y,x]}))}),left:o.jsx(s.SideEdges,{d:u(e({type:"LineString",coordinates:[x,p]}))}),right:o.jsx(s.SideEdges,{d:u(e({type:"LineString",coordinates:[f,y]}))})},O=C(t,n),P=W.getLinearScale([0,180],[0,100],{clamp:!0,fractionDigits:0})(Math.abs(180-t));return o.jsx(s.ViewCone,{style:{"--percent-mix-primary":`${P}%`,"--percent-mix-secondary":`${100-P}%`},children:O.map(l=>{if(L[l])return o.jsx(V.Fragment,{children:L[l]},l)})})},q=({size:t="var(--size-spacing-m)",className:n,ra:i,dec:e,fov:r})=>{const c=typeof i<"u"&&typeof e<"u"&&typeof r<"u";return o.jsxs(s.Container,{style:{"--size-container":t},className:n,children:[o.jsx(s.NorthDirection,{children:"N"}),o.jsxs(s.SVG,{preserveAspectRatio:"xMidYMid meet",viewBox:`0 0 ${m} ${v}`,children:[o.jsx(R,{backFaces:!0}),c&&o.jsx(N,{ra:i,dec:e,fov:r}),o.jsx(R,{}),o.jsx(A,{})]})]})};q.displayName="Widget.ViewIndicator";exports.default=q;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),k=require("react"),j=require("d3-geo"),u=require("./widgets/ViewIndicator/styles.cjs"),O=require("./lib/utils.cjs"),g=10,q=10,A=[g,q],m=100,v=100,d=j.geoGraticule();d.step([180,180]);d.precision(90);const b=t=>{const{backFaces:n=!1,applyRotation:i=!0}=t||{},e=j.geoOrthographic();e.fitExtent([[0,0],[m,v]],d.outline()),i&&e.rotate(A),n&&e.clipAngle(null);const s=j.geoPath(e).digits(1);return{projection:e,pathGenerator:c=>s(c)||void 0}},C=()=>{const{pathGenerator:t}=b({applyRotation:!1});return o.jsx("path",{strokeWidth:3,d:t(d.outline())})},$=({backFaces:t})=>{const{pathGenerator:n}=b({backFaces:t});return o.jsx("path",{d:n(d()),opacity:t?.8:void 0})},N=(t,n)=>{const i=t>90-g&&t<270-g,e=n>0+q,s=t>180-g,r=["top","bottom"],c=["left","right"];e&&r.reverse(),s&&c.reverse();const a=["plane",r[0],...c,r[1]];return i&&a.reverse(),a},z=({ra:t,dec:n,fov:i})=>{const{pathGenerator:e}=b({backFaces:!0}),[s,r]=i,c=Math.max(s,.1)/2,a=Math.max(r,.1)/2,S=n+a,M=n-a,w=t+c,G=t-c,l=[w,S],f=[G,S],y=[w,M],x=[G,M],P=m/2,V=v/2,h=p=>`${p}L${P},${V}`,L={plane:o.jsx("path",{opacity:.8,d:e({type:"Polygon",coordinates:[[l,f,x,y,l]]})}),top:o.jsx("path",{opacity:.5,d:h(e({type:"LineString",coordinates:[l,f]}))}),bottom:o.jsx("path",{opacity:.5,d:h(e({type:"LineString",coordinates:[x,y]}))}),left:o.jsx("path",{opacity:.3,d:h(e({type:"LineString",coordinates:[y,l]}))}),right:o.jsx("path",{opacity:.3,d:h(e({type:"LineString",coordinates:[f,x]}))})},W=N(t,n),R=O.getLinearScale([0,180],[0,100],{clamp:!0,fractionDigits:0})(Math.abs(180-t));return o.jsx(u.ViewCone,{style:{"--percent-mix-primary":`${R}%`,"--percent-mix-secondary":`${100-R}%`},children:W.map(p=>{if(L[p])return o.jsx(k.Fragment,{children:L[p]},p)})})},F=({size:t="var(--size-spacing-m)",className:n,ra:i,dec:e,fov:s})=>{const r=typeof i<"u"&&typeof e<"u"&&typeof s<"u";return o.jsxs(u.Container,{style:{"--size-container":t},className:n,children:[o.jsx(u.NorthDirection,{children:"N"}),o.jsxs(u.SVG,{preserveAspectRatio:"xMidYMid meet",viewBox:`0 0 ${m} ${v}`,children:[o.jsx($,{backFaces:!0}),r&&o.jsx(z,{ra:i,dec:e,fov:s}),o.jsx($,{}),o.jsx(C,{})]})]})};F.displayName="Widget.ViewIndicator";exports.default=F;

package/dist/ViewIndicator.js

@@ -1,10 +1,11 @@
-import { jsxs as G, jsx as o } from "react/jsx-runtime";
-import { Fragment as W } from "react";
+import { jsxs as $, jsx as o } from "react/jsx-runtime";
+import { Fragment as j } from "react";
 import { geoGraticule as k, geoOrthographic as A, geoPath as C } from "d3-geo";
-import { Container as N, NorthDirection as z, SVG as B, Outline as D, Meridian as H, Plane as I, TopEdges as F, SideEdges as P, ViewCone as Y } from "./widgets/ViewIndicator/styles.js";
-import { getLinearScale as q } from "./lib/utils.js";
-const h = 10, O = 10, T = [h, O], y = 100, v = 100, f = k();
-f.step([180, 180]);
+import { Container as N, NorthDirection as O, SVG as z, ViewCone as B } from "./widgets/ViewIndicator/styles.js";
+import { getLinearScale as D } from "./lib/utils.js";
+const f = 10, R = 10, E = [f, R], y = 100, v = 100, d = k();
+d.step([180, 180]);
+d.precision(90);
 const x = (t) => {
   const { backFaces: n = !1, applyRotation: i = !0 } = t || {}, e = A();
   e.fitExtent(
@@ -12,52 +13,55 @@ const x = (t) => {
       [0, 0],
       [y, v]
     ],
-    f.outline()
-  ), i && e.rotate(T), n && e.clipAngle(null);
-  const r = C(e);
+    d.outline()
+  ), i && e.rotate(E), n && e.clipAngle(null);
+  const r = C(e).digits(1);
   return { projection: e, pathGenerator: (s) => r(s) || void 0 };
-}, X = () => {
+}, H = () => {
   const { pathGenerator: t } = x({ applyRotation: !1 });
-  return /* @__PURE__ */ o(D, { d: t(f.outline()) });
-}, R = ({ backFaces: t }) => {
+  return /* @__PURE__ */ o("path", { strokeWidth: 3, d: t(d.outline()) });
+}, F = ({ backFaces: t }) => {
   const { pathGenerator: n } = x({ backFaces: t });
   return /* @__PURE__ */ o(
-    H,
+    "path",
     {
-      d: n(f()),
+      d: n(d()),
       opacity: t ? 0.8 : void 0
     }
   );
-}, J = (t, n) => {
-  const i = t > 90 - h && t < 270 - h, e = n > 0 + O, r = t > 180 - h, c = ["top", "bottom"], s = ["left", "right"];
+}, I = (t, n) => {
+  const i = t > 90 - f && t < 270 - f, e = n > 0 + R, r = t > 180 - f, c = ["top", "bottom"], s = ["left", "right"];
   e && c.reverse(), r && s.reverse();
   const a = ["plane", c[0], ...s, c[1]];
   return i && a.reverse(), a;
-}, K = ({ ra: t, dec: n, fov: i }) => {
-  const { pathGenerator: e } = x({ backFaces: !0 }), [r, c] = i, s = Math.max(r, 0.1) / 2, a = Math.max(c, 0.1) / 2, b = n + a, M = n - a, S = t + s, $ = t - s, p = [S, b], g = [$, b], m = [S, M], u = [$, M], V = y / 2, j = v / 2, l = (d) => `${d}L${V},${j}`, w = {
+}, Y = ({ ra: t, dec: n, fov: i }) => {
+  const { pathGenerator: e } = x({ backFaces: !0 }), [r, c] = i, s = Math.max(r, 0.1) / 2, a = Math.max(c, 0.1) / 2, b = n + a, w = n - a, L = t + s, S = t - s, h = [L, b], g = [S, b], m = [L, w], u = [S, w], P = y / 2, V = v / 2, l = (p) => `${p}L${P},${V}`, G = {
     plane: /* @__PURE__ */ o(
-      I,
+      "path",
       {
+        opacity: 0.8,
         d: e({
           type: "Polygon",
-          coordinates: [[p, g, u, m, p]]
+          coordinates: [[h, g, u, m, h]]
         })
       }
     ),
     top: /* @__PURE__ */ o(
-      F,
+      "path",
       {
+        opacity: 0.5,
         d: l(
           e({
             type: "LineString",
-            coordinates: [p, g]
+            coordinates: [h, g]
           })
         )
       }
     ),
     bottom: /* @__PURE__ */ o(
-      F,
+      "path",
       {
+        opacity: 0.5,
         d: l(
           e({
             type: "LineString",
@@ -67,19 +71,21 @@ const x = (t) => {
       }
     ),
     left: /* @__PURE__ */ o(
-      P,
+      "path",
       {
+        opacity: 0.3,
         d: l(
           e({
             type: "LineString",
-            coordinates: [m, p]
+            coordinates: [m, h]
           })
         )
       }
     ),
     right: /* @__PURE__ */ o(
-      P,
+      "path",
       {
+        opacity: 0.3,
         d: l(
           e({
             type: "LineString",
@@ -88,24 +94,24 @@ const x = (t) => {
         )
       }
     )
-  }, E = J(t, n), L = q([0, 180], [0, 100], {
+  }, W = I(t, n), M = D([0, 180], [0, 100], {
     clamp: !0,
     fractionDigits: 0
   })(Math.abs(180 - t));
   return /* @__PURE__ */ o(
-    Y,
+    B,
     {
       style: {
-        "--percent-mix-primary": `${L}%`,
-        "--percent-mix-secondary": `${100 - L}%`
+        "--percent-mix-primary": `${M}%`,
+        "--percent-mix-secondary": `${100 - M}%`
       },
-      children: E.map((d) => {
-        if (w[d])
-          return /* @__PURE__ */ o(W, { children: w[d] }, d);
+      children: W.map((p) => {
+        if (G[p])
+          return /* @__PURE__ */ o(j, { children: G[p] }, p);
       })
     }
   );
-}, Q = ({
+}, q = ({
   size: t = "var(--size-spacing-m)",
   className: n,
   ra: i,
@@ -113,23 +119,23 @@ const x = (t) => {
   fov: r
 }) => {
   const c = typeof i < "u" && typeof e < "u" && typeof r < "u";
-  return /* @__PURE__ */ G(
+  return /* @__PURE__ */ $(
     N,
     {
       style: { "--size-container": t },
       className: n,
       children: [
-        /* @__PURE__ */ o(z, { children: "N" }),
-        /* @__PURE__ */ G(
-          B,
+        /* @__PURE__ */ o(O, { children: "N" }),
+        /* @__PURE__ */ $(
+          z,
           {
             preserveAspectRatio: "xMidYMid meet",
             viewBox: `0 0 ${y} ${v}`,
             children: [
-              /* @__PURE__ */ o(R, { backFaces: !0 }),
-              c && /* @__PURE__ */ o(K, { ra: i, dec: e, fov: r }),
-              /* @__PURE__ */ o(R, {}),
-              /* @__PURE__ */ o(X, {})
+              /* @__PURE__ */ o(F, { backFaces: !0 }),
+              c && /* @__PURE__ */ o(Y, { ra: i, dec: e, fov: r }),
+              /* @__PURE__ */ o(F, {}),
+              /* @__PURE__ */ o(H, {})
             ]
           }
         )
@@ -137,7 +143,7 @@ const x = (t) => {
     }
   );
 };
-Q.displayName = "Widget.ViewIndicator";
+q.displayName = "Widget.ViewIndicator";
 export {
-  Q as default
+  q as default
 };

package/dist/atomic/Blinker/Controls/styles.d.ts

@@ -1,274 +1,2 @@
 /// <reference types="react" />
-/// <reference types="react" />
-export declare const ControlsContainer: 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;
-    suppressHydrationWarning?: boolean | undefined;
-    accessKey?: string | undefined;
-    autoFocus?: boolean | undefined;
-    className?: string | undefined;
-    contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
-    contextMenu?: string | undefined;
-    dir?: string | undefined;
-    draggable?: (boolean | "true" | "false") | undefined;
-    hidden?: boolean | undefined;
-    id?: string | undefined;
-    lang?: string | undefined;
-    nonce?: string | undefined;
-    placeholder?: string | undefined;
-    slot?: string | undefined;
-    spellCheck?: (boolean | "true" | "false") | undefined;
-    style?: import('react').CSSProperties | undefined;
-    tabIndex?: number | undefined;
-    title?: string | undefined;
-    translate?: "yes" | "no" | undefined;
-    radioGroup?: string | undefined;
-    role?: import('react').AriaRole | undefined;
-    about?: string | undefined;
-    content?: string | undefined;
-    datatype?: string | undefined;
-    inlist?: any;
-    prefix?: string | undefined;
-    property?: string | undefined;
-    rel?: string | undefined;
-    resource?: string | undefined;
-    rev?: string | undefined;
-    typeof?: string | undefined;
-    vocab?: string | undefined;
-    autoCapitalize?: string | undefined;
-    autoCorrect?: string | undefined;
-    autoSave?: string | undefined;
-    color?: string | undefined;
-    itemProp?: string | undefined;
-    itemScope?: boolean | undefined;
-    itemType?: string | undefined;
-    itemID?: string | undefined;
-    itemRef?: string | undefined;
-    results?: number | undefined;
-    security?: string | undefined;
-    unselectable?: "on" | "off" | undefined;
-    inputMode?: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
-    is?: string | undefined;
-    children?: import('react').ReactNode | Iterable<import('react').ReactNode>;
-    'aria-activedescendant'?: string | undefined;
-    'aria-atomic'?: (boolean | "true" | "false") | undefined;
-    'aria-autocomplete'?: "list" | "none" | "inline" | "both" | undefined;
-    'aria-braillelabel'?: string | undefined;
-    'aria-brailleroledescription'?: string | undefined;
-    'aria-busy'?: (boolean | "true" | "false") | undefined;
-    'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
-    'aria-colcount'?: number | undefined;
-    'aria-colindex'?: number | undefined;
-    'aria-colindextext'?: string | undefined;
-    'aria-colspan'?: number | undefined;
-    'aria-controls'?: string | undefined;
-    'aria-current'?: boolean | "time" | "step" | "true" | "false" | "page" | "location" | "date" | undefined;
-    'aria-describedby'?: string | undefined;
-    'aria-description'?: string | undefined;
-    'aria-details'?: string | undefined;
-    'aria-disabled'?: (boolean | "true" | "false") | undefined;
-    'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
-    'aria-errormessage'?: string | undefined;
-    'aria-expanded'?: (boolean | "true" | "false") | undefined;
-    'aria-flowto'?: string | undefined;
-    'aria-grabbed'?: (boolean | "true" | "false") | undefined;
-    'aria-haspopup'?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
-    'aria-hidden'?: (boolean | "true" | "false") | undefined;
-    'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
-    'aria-keyshortcuts'?: string | undefined;
-    'aria-label'?: string | undefined;
-    'aria-labelledby'?: string | undefined;
-    'aria-level'?: number | undefined;
-    'aria-live'?: "off" | "assertive" | "polite" | undefined;
-    'aria-modal'?: (boolean | "true" | "false") | undefined;
-    'aria-multiline'?: (boolean | "true" | "false") | undefined;
-    'aria-multiselectable'?: (boolean | "true" | "false") | undefined;
-    'aria-orientation'?: "horizontal" | "vertical" | undefined;
-    'aria-owns'?: string | undefined;
-    'aria-placeholder'?: string | undefined;
-    'aria-posinset'?: number | undefined;
-    'aria-pressed'?: boolean | "true" | "false" | "mixed" | undefined;
-    'aria-readonly'?: (boolean | "true" | "false") | undefined;
-    'aria-relevant'?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
-    'aria-required'?: (boolean | "true" | "false") | undefined;
-    'aria-roledescription'?: string | undefined;
-    'aria-rowcount'?: number | undefined;
-    'aria-rowindex'?: number | undefined;
-    'aria-rowindextext'?: string | undefined;
-    'aria-rowspan'?: number | undefined;
-    'aria-selected'?: (boolean | "true" | "false") | undefined;
-    'aria-setsize'?: number | undefined;
-    'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
-    'aria-valuemax'?: number | undefined;
-    'aria-valuemin'?: number | undefined;
-    'aria-valuenow'?: number | undefined;
-    'aria-valuetext'?: string | undefined;
-    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;
-}>;
+export declare const ControlsContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;