@rubin-epo/epo-widget-lib 0.2.1 → 0.4.1

package/dist/widgets/ColorTool/styles.d.ts

@@ -1,23 +1,23 @@
 /// <reference types="react" />
-export declare const WidgetContainer: import("styled-components").StyledComponent<"section", any, {
-    isCondensed: boolean;
-    hideControls: boolean;
-}, never>;
-export declare const Title: import("styled-components").StyledComponent<"h2", any, {}, never>;
-export declare const Subtitle: import("styled-components").StyledComponent<"dl", any, {}, never>;
-export declare const ControlsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Slider: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@rubin-epo/epo-react-lib/dist/form/HorizontalSlider/HorizontalSlider").HorizontalSliderProps>, any, {}, never>;
-export declare const ImageContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const BackgroundImage: import("styled-components").StyledComponent<"img", any, {
-    filtersActive: boolean;
-}, never>;
-export declare const FilteredImage: import("styled-components").StyledComponent<import("react").FunctionComponent<import("./FilterImage/FilterImage").FilterImageProps>, any, {
+export declare const WidgetContainer: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {
+    $isCondensed: boolean;
+    $hideControls: boolean;
+}>>;
+export declare const Title: import("styled-components").IStyledComponent<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>>;
+export declare const Subtitle: import("styled-components").IStyledComponent<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDListElement>, HTMLDListElement>, never>>;
+export declare const ControlsContainer: import("styled-components").IStyledComponent<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const Slider: import("styled-components").IStyledComponent<"web", Omit<import("@rubin-epo/epo-react-lib/HorizontalSlider").HorizontalSliderProps, never>>;
+export declare const ImageContainer: import("styled-components").IStyledComponent<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const BackgroundImage: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {
+    $filtersActive: boolean;
+}>>;
+export declare const FilteredImage: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("./FilterImage/FilterImage").FilterImageProps, {
     active: boolean;
-}, never>;
-export declare const SelectionContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ToolsHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Caption: import("styled-components").StyledComponent<"footer", any, {}, never>;
-export declare const ResetButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Pick<import("@rubin-epo/epo-react-lib/dist/atomic/Button").ButtonProps, "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "default" | "type" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "loop" | "width" | "name" | "as" | "dateTime" | "icon" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "noValidate" | "open" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "target" | "useMap" | "value" | "wmode" | "wrap" | "iconSize" | "isBlock" | "styleAs" | "isInactive"> & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
-export declare const FilterToggleButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Pick<import("@rubin-epo/epo-react-lib/dist/atomic/Button").ButtonProps, "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "default" | "type" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "loop" | "width" | "name" | "as" | "dateTime" | "icon" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "noValidate" | "open" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "target" | "useMap" | "value" | "wmode" | "wrap" | "iconSize" | "isBlock" | "styleAs" | "isInactive"> & import("react").RefAttributes<HTMLButtonElement>>, any, {
-    active: boolean;
-}, never>;
+}>>;
+export declare const SelectionContainer: import("styled-components").IStyledComponent<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const ToolsHeader: import("styled-components").IStyledComponent<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const Caption: import("styled-components").IStyledComponent<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>>;
+export declare const ResetButton: import("styled-components").IStyledComponent<"web", Omit<Omit<import("react").PropsWithChildren<import("@rubin-epo/epo-react-lib/Button").ButtonProps>, "ref"> & import("react").RefAttributes<HTMLButtonElement>, never>>;
+export declare const FilterToggleButton: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<Omit<import("react").PropsWithChildren<import("@rubin-epo/epo-react-lib/Button").ButtonProps>, "ref"> & import("react").RefAttributes<HTMLButtonElement>, {
+    $active: boolean;
+}>>;

package/dist/widgets/ColorTool/styles.js

@@ -0,0 +1,149 @@
+import t, { css as i } from "styled-components";
+import o from "@rubin-epo/epo-react-lib/Button";
+import a from "@rubin-epo/epo-react-lib/HorizontalSlider";
+import n from "./FilterImage/FilterImage.js";
+const g = t.section`
+  display: grid;
+  gap: var(--PADDING_SMALL, 20px);
+
+  ${({ $isCondensed: e, $hideControls: r }) => e ? i`
+          grid-template-areas:
+            "title"
+            "subtitle"
+            "image"
+            "caption"
+            "controls"
+            "reset";
+        ` : i`
+          grid-template-areas:
+            "title title"
+            "subtitle subtitle"
+            ${r ? "'image image'" : "'controls image'"}
+            "reset reset"
+            "caption caption";
+        `}
+`;
+t.h2`
+  grid-area: title;
+  margin: 0;
+`;
+const p = t.dl`
+  grid-area: subtitle;
+  margin: 0;
+  font-size: 18px;
+  font-weight: var(--FONT_WEIGHT_NORMAL, 400);
+
+  > dt,
+  dd {
+    margin: 0;
+    white-space: nowrap;
+  }
+
+  > dt {
+    display: inline-block;
+  }
+
+  > dd {
+    display: inline;
+    margin-left: 1ch;
+
+    &::after {
+      content: "\\A";
+      white-space: pre;
+    }
+  }
+`, m = t.div`
+  display: grid;
+  grid-template-columns: max-content minmax(100px, 1fr) minmax(100px, 2fr);
+  grid-auto-rows: max-content;
+  grid-area: controls;
+  gap: 10px;
+  align-items: center;
+`, f = t(a)`
+  padding: 0;
+  width: 100%;
+`, u = t.div`
+  position: relative;
+  aspect-ratio: 1 / 1;
+  grid-area: image;
+  background-color: rgba(0, 0, 0, 0.1);
+`, b = t.img`
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: ${({ $filtersActive: e }) => e ? "block" : "none"};
+  width: 100%;
+  height: 100%;
+`, h = t(n)`
+  user-select: none;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  mix-blend-mode: screen;
+
+  ${({ active: e }) => e ? i`
+          visibility: visible;
+          opacity: 1;
+        ` : i`
+          visibility: hidden;
+          opacity: 0;
+        `}
+`, x = t.div`
+  grid-column: span 3;
+`, v = t.div`
+  font-weight: var(--FONT_WEIGHT_BOLD, 600);
+`, w = t.footer`
+  grid-area: caption;
+`, y = t(o)`
+  grid-area: reset;
+  text-align: left;
+
+  span {
+    text-align: left;
+  }
+`, I = t(o)`
+  border-radius: 50%;
+  font-weight: var(--FONT_WEIGHT_MEDIUM, 500);
+  font-size: 22px;
+  text-transform: lowercase;
+  display: flex;
+  width: 38px;
+  height: 38px;
+  padding: 0;
+
+  ${({ $active: e }) => e ? i`
+          background-color: var(--turquoise85, #12726c);
+          &:not(:disabled):not([aria-disabled="true"]):hover {
+            outline: 1px solid var(--white, #fff);
+            outline-offset: -3px;
+          }
+        ` : i`
+          background-color: #f7f7f7;
+          border-color: #6c6e6e;
+          color: #6c6e6e !important;
+          &:not(:disabled):not([aria-disabled="true"]):hover {
+            outline: 2px solid #6c6e6e;
+            outline-offset: -2px;
+          }
+        `}
+`;
+export {
+  b as BackgroundImage,
+  w as Caption,
+  m as ControlsContainer,
+  I as FilterToggleButton,
+  h as FilteredImage,
+  u as ImageContainer,
+  y as ResetButton,
+  x as SelectionContainer,
+  f as Slider,
+  p as Subtitle,
+  v as ToolsHeader,
+  g as WidgetContainer
+};

package/dist/widgets/ColorTool/utilities.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("lodash/flattenDeep"),D=require("lodash/find"),v=require("lodash/isEmpty"),o=e=>e&&e.__esModule?e:{default:e},y=o(g),_=o(D),c=o(v),l=(e,t,r)=>(t-e)*(r/100)+e,i=e=>e.some(t=>t.active),F=e=>c.default(e)?!1:i(e.filters),u=e=>e.filters.map(t=>{const{value:r,defaultValue:s,defaultColor:a,min:n,max:p,color:f}=t,d=r||s||1,m=a||f;return{...t,brightness:l(n,p,d),color:m}}),b=e=>c.default(e)?e:{...e,filters:u(e)},B=(e,t)=>y.default(e.map(s=>s.objects.filter(a=>a.name===t).map(u))),V=(e,t)=>{const r=_.default(e,{objects:[{name:t}]}),{type:s=null}=r||{};return s},h=e=>e.map(t=>{const{defaultValue:r,min:s,max:a}=t,n=r||1;return{...t,active:!1,color:"",brightness:l(n,s,a),value:n}});exports.getBrightnessValue=l;exports.getCategoryName=V;exports.getDataFiltersByName=B;exports.isFilterActive=i;exports.isResetButtonActive=F;exports.prepareData=b;exports.resetFilters=h;exports.updateFilters=u;

package/dist/widgets/ColorTool/utilities.js

@@ -0,0 +1,38 @@
+import f from "lodash/flattenDeep";
+import d from "lodash/find";
+import a from "lodash/isEmpty";
+const c = (e, t, r) => (t - e) * (r / 100) + e, g = (e) => e.some((t) => t.active), y = (e) => a(e) ? !1 : g(e.filters), l = (e) => e.filters.map((t) => {
+  const { value: r, defaultValue: s, defaultColor: o, min: n, max: i, color: p } = t, u = r || s || 1, m = o || p;
+  return {
+    ...t,
+    brightness: c(n, i, u),
+    color: m
+  };
+}), F = (e) => a(e) ? e : {
+  ...e,
+  filters: l(e)
+}, V = (e, t) => f(
+  e.map((s) => s.objects.filter((o) => o.name === t).map(l))
+), h = (e, t) => {
+  const r = d(e, { objects: [{ name: t }] }), { type: s = null } = r || {};
+  return s;
+}, j = (e) => e.map((t) => {
+  const { defaultValue: r, min: s, max: o } = t, n = r || 1;
+  return {
+    ...t,
+    active: !1,
+    color: "",
+    brightness: c(n, s, o),
+    value: n
+  };
+});
+export {
+  c as getBrightnessValue,
+  h as getCategoryName,
+  V as getDataFiltersByName,
+  g as isFilterActive,
+  y as isResetButtonActive,
+  F as prepareData,
+  j as resetFilters,
+  l as updateFilters
+};

package/dist/widgets/FilterTool/FilterTool.d.ts

@@ -2,7 +2,9 @@ import { FunctionComponent } from "react";
 interface FilterToolProps {
     selectionCallback?: (color: FilterColor) => void;
     selectedColor?: FilterColor;
-    isReadOnly?: boolean;
+    isDisabled?: boolean;
+    id?: string;
+    labelledById?: string;
 }
 type FilterColor = "violet" | "blue" | "green" | "yellow" | "orange" | "red" | "none";
 declare const FilterTool: FunctionComponent<FilterToolProps>;

package/dist/widgets/FilterTool/styles.cjs

@@ -0,0 +1,36 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("styled-components"),i=e=>e&&e.__esModule?e:{default:e},t=i(r),l=t.default.div`
+  background-color: var(--black, #000);
+`,o=t.default.div`
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 0 var(--PADDING_SMALL, 20px) var(--PADDING_SMALL, 20px);
+  background-color: var(--black, #000);
+  width: 100%;
+`;t.default.label`
+  color: var(--white, #fff);
+`;const n=t.default.svg`
+  font-size: 42px;
+`,a=t.default.line`
+  fill: none;
+  stroke: #ffffff;
+  stroke-miterlimit: 10;
+  stroke-width: 7;
+`,f=t.default.path`
+  fill: var(--ray-fill);
+`,s=t.default.polygon`
+  opacity: var(--arrow-opacity, 1);
+  fill: var(--arrow-fill);
+`,d=t.default.polygon`
+  fill: none;
+  stroke: #ffffff;
+  stroke-miterlimit: 10;
+  stroke-width: 12;
+`,c=t.default.line`
+  fill: none;
+  stroke-linecap: round;
+  stroke-miterlimit: 10;
+  stroke-width: 27.27;
+`;exports.Arrow=s;exports.Filter=c;exports.PrismOutline=d;exports.PrismSVG=n;exports.Ray=f;exports.SelectContainer=o;exports.WhiteLine=a;exports.Wrapper=l;

package/dist/widgets/FilterTool/styles.d.ts

@@ -1,15 +1,10 @@
-export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SelectContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SelectLabel: import("styled-components").StyledComponent<"label", any, {}, never>;
-export declare const PrismSVG: import("styled-components").StyledComponent<"svg", any, {}, never>;
-export declare const WhiteLine: import("styled-components").StyledComponent<"line", any, {}, never>;
-export declare const Ray: import("styled-components").StyledComponent<"path", any, {
-    rayColor: string;
-    isHidden: boolean;
-}, never>;
-export declare const Arrow: import("styled-components").StyledComponent<"polygon", any, {
-    arrowColor: string;
-    isHidden: boolean;
-}, never>;
-export declare const PrismOutline: import("styled-components").StyledComponent<"polygon", any, {}, never>;
-export declare const Filter: import("styled-components").StyledComponent<"line", any, {}, never>;
+/// <reference types="react" />
+export declare const Wrapper: import("styled-components").IStyledComponent<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const SelectContainer: import("styled-components").IStyledComponent<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const SelectLabel: import("styled-components").IStyledComponent<"web", Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>>;
+export declare const PrismSVG: import("styled-components").IStyledComponent<"web", Omit<import("react").SVGProps<SVGSVGElement>, never>>;
+export declare const WhiteLine: import("styled-components").IStyledComponent<"web", Omit<import("react").SVGLineElementAttributes<SVGLineElement>, never>>;
+export declare const Ray: import("styled-components").IStyledComponent<"web", Omit<import("react").SVGProps<SVGPathElement>, never>>;
+export declare const Arrow: import("styled-components").IStyledComponent<"web", Omit<import("react").SVGProps<SVGPolygonElement>, never>>;
+export declare const PrismOutline: import("styled-components").IStyledComponent<"web", Omit<import("react").SVGProps<SVGPolygonElement>, never>>;
+export declare const Filter: import("styled-components").IStyledComponent<"web", Omit<import("react").SVGLineElementAttributes<SVGLineElement>, never>>;

package/dist/widgets/FilterTool/styles.js

@@ -0,0 +1,49 @@
+import o from "styled-components";
+const t = o.div`
+  background-color: var(--black, #000);
+`, i = o.div`
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 0 var(--PADDING_SMALL, 20px) var(--PADDING_SMALL, 20px);
+  background-color: var(--black, #000);
+  width: 100%;
+`;
+o.label`
+  color: var(--white, #fff);
+`;
+const e = o.svg`
+  font-size: 42px;
+`, l = o.line`
+  fill: none;
+  stroke: #ffffff;
+  stroke-miterlimit: 10;
+  stroke-width: 7;
+`, n = o.path`
+  fill: var(--ray-fill);
+`, a = o.polygon`
+  opacity: var(--arrow-opacity, 1);
+  fill: var(--arrow-fill);
+`, f = o.polygon`
+  fill: none;
+  stroke: #ffffff;
+  stroke-miterlimit: 10;
+  stroke-width: 12;
+`, s = o.line`
+  fill: none;
+  stroke-linecap: round;
+  stroke-miterlimit: 10;
+  stroke-width: 27.27;
+`;
+export {
+  a as Arrow,
+  s as Filter,
+  f as PrismOutline,
+  e as PrismSVG,
+  n as Ray,
+  i as SelectContainer,
+  l as WhiteLine,
+  t as Wrapper
+};

package/dist/widgets/SourceSelector/Message/Message.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react/jsx-runtime"),a=require("react"),n=require("./styles.cjs"),r=({children:t,isVisible:e=!1,onMessageChangeCallback:s,forIds:u})=>(a.useEffect(()=>{if(e){const o=setTimeout(()=>{s&&s()},1800);return()=>clearTimeout(o)}},[t,e]),c.jsx(n.Message,{forIds:u,$isOpen:e,children:t}));r.displayName="Widgets.SourceSelector.Message";const i=r;exports.default=i;

package/dist/widgets/SourceSelector/Message/Message.js

@@ -0,0 +1,21 @@
+import { jsx as a } from "react/jsx-runtime";
+import { useEffect as f } from "react";
+import { Message as u } from "./styles.js";
+const r = ({
+  children: t,
+  isVisible: e = !1,
+  onMessageChangeCallback: s,
+  forIds: o
+}) => (f(() => {
+  if (e) {
+    const m = setTimeout(() => {
+      s && s();
+    }, 1800);
+    return () => clearTimeout(m);
+  }
+}, [t, e]), /* @__PURE__ */ a(u, { forIds: o, $isOpen: e, children: t }));
+r.displayName = "Widgets.SourceSelector.Message";
+const M = r;
+export {
+  M as default
+};

package/dist/widgets/SourceSelector/Message/styles.cjs

@@ -0,0 +1,23 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("styled-components"),s=require("@rubin-epo/epo-react-lib/Toast"),t=e=>e&&e.__esModule?e:{default:e},n=t(o),a=t(s),i=n.default(a.default)`
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1ch;
+  width: 100%;
+  height: ${({$isOpen:e})=>e?24:0}px;
+  overflow: hidden;
+  background-color: var(--black, #000);
+  color: #30e0e3;
+  font-size: 1rem;
+  font-weight: var(--FONT_WEIGHT_BOLD, 600);
+  text-align: center;
+  transition: height ease var(--DURATION_SLOW, 0.4s);
+
+  @media (prefers-reduced-motion) {
+    transition: unset;
+  }
+`;exports.Message=i;

package/dist/widgets/SourceSelector/Message/styles.d.ts

@@ -0,0 +1,5 @@
+export declare const Message: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("@rubin-epo/epo-react-lib/Toast").ToastProps & {
+    children?: import("react").ReactNode;
+}, {
+    $isOpen: boolean;
+}>>;

package/dist/widgets/SourceSelector/Message/styles.js

@@ -0,0 +1,28 @@
+import t from "styled-components";
+import o from "@rubin-epo/epo-react-lib/Toast";
+const n = t(o)`
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1ch;
+  width: 100%;
+  height: ${({ $isOpen: e }) => e ? 24 : 0}px;
+  overflow: hidden;
+  background-color: var(--black, #000);
+  color: #30e0e3;
+  font-size: 1rem;
+  font-weight: var(--FONT_WEIGHT_BOLD, 600);
+  text-align: center;
+  transition: height ease var(--DURATION_SLOW, 0.4s);
+
+  @media (prefers-reduced-motion) {
+    transition: unset;
+  }
+`;
+export {
+  n as Message
+};

package/dist/widgets/SourceSelector/Point/Point.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("react/jsx-runtime"),P=require("./styles.cjs"),i=({type:a,id:u,isActive:n,isSelected:s,x:l,y:c,radius:d,className:f,color:g})=>{const x={supernova:20,galaxy:60,galaxyFilter:25},y=(e,t)=>{if(t)return Math.abs(t);const{[e]:r=8}=x;return r},b=(e,t,r)=>e?"#fed828":t?r:"transparent",o=y(a,d),m=Math.max(10,o*1.2);return p.jsx(P.Point,{"data-id":u,"data-type":a,cx:l,cy:c,r:n?m:o,fill:"transparent",stroke:b(n,s,g),tabIndex:0,role:"listitem",$isSelected:s,className:f})};i.displayName="Widgets.SourceSelector.Point";const R=i;exports.default=R;

package/dist/widgets/SourceSelector/Point/Point.js

@@ -0,0 +1,45 @@
+import { jsx as y } from "react/jsx-runtime";
+import { Point as R } from "./styles.js";
+const i = ({
+  type: e,
+  id: c,
+  isActive: n,
+  isSelected: o,
+  x: d,
+  y: u,
+  radius: l,
+  className: f,
+  color: m
+}) => {
+  const p = {
+    supernova: 20,
+    galaxy: 60,
+    galaxyFilter: 25
+  }, x = (a, t) => {
+    if (t)
+      return Math.abs(t);
+    const { [a]: r = 8 } = p;
+    return r;
+  }, g = (a, t, r) => a ? "#fed828" : t ? r : "transparent", s = x(e, l), P = Math.max(10, s * 1.2);
+  return /* @__PURE__ */ y(
+    R,
+    {
+      "data-id": c,
+      "data-type": e,
+      cx: d,
+      cy: u,
+      r: n ? P : s,
+      fill: "transparent",
+      stroke: g(n, o, m),
+      tabIndex: 0,
+      role: "listitem",
+      $isSelected: o,
+      className: f
+    }
+  );
+};
+i.displayName = "Widgets.SourceSelector.Point";
+const $ = i;
+export {
+  $ as default
+};

package/dist/widgets/SourceSelector/Point/styles.cjs

@@ -0,0 +1,11 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("styled-components"),o=t=>t&&t.__esModule?t:{default:t},s=o(e),n=s.default.circle`
+  cursor: pointer;
+  transition: fill ease var(--DURATION, 0.2s), r ease-out 400ms;
+  ${({$isSelected:t})=>t&&e.css`
+      stroke-width: 3;
+    `}
+
+  &:focus {
+    outline: none;
+  }
+`;exports.Point=n;

package/dist/widgets/SourceSelector/Point/styles.d.ts

@@ -1,3 +1,4 @@
-export declare const Point: import("styled-components").StyledComponent<"circle", any, {
-    isSelected: boolean;
-}, never>;
+/// <reference types="react" />
+export declare const Point: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").SVGProps<SVGCircleElement>, {
+    $isSelected: boolean;
+}>>;

package/dist/widgets/SourceSelector/Point/styles.js

@@ -0,0 +1,15 @@
+import s, { css as t } from "styled-components";
+const r = s.circle`
+  cursor: pointer;
+  transition: fill ease var(--DURATION, 0.2s), r ease-out 400ms;
+  ${({ $isSelected: o }) => o && t`
+      stroke-width: 3;
+    `}
+
+  &:focus {
+    outline: none;
+  }
+`;
+export {
+  r as Point
+};

package/dist/widgets/SourceSelector/Points/Points.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react/jsx-runtime"),S=require("../Point/Point.cjs"),d=({sources:l=[],selectedSource:a=[],activeType:i,className:r,xScale:t,yScale:m,color:p})=>c.jsx("g",{className:r,role:"list",children:l.map(y=>{const{type:e,id:o,color:P,radius:f=NaN,x:s,y:g}=y,n=.6*f,j=a.some(u=>u.id===o&&u.type===e),x=i?i===e:!1;return c.jsx(S.default,{id:o,type:e,isActive:x,isSelected:j,className:r,radius:t(s-n)-t(s+n),x:t(s),y:m(g),color:p||P},`point-${e}-${o}`)})});d.displayName="Widgets.SourceSelector.Points";const $=d;exports.default=$;

package/dist/widgets/SourceSelector/Points/Points.js

@@ -0,0 +1,35 @@
+import { jsx as d } from "react/jsx-runtime";
+import x from "../Point/Point.js";
+const l = ({
+  sources: m = [],
+  selectedSource: p = [],
+  activeType: s,
+  className: e,
+  xScale: t,
+  yScale: u,
+  color: a
+}) => /* @__PURE__ */ d("g", { className: e, role: "list", children: m.map((f) => {
+  const { type: o, id: i, color: y, radius: P = NaN, x: r, y: $ } = f, n = 0.6 * P, g = p.some(
+    (c) => c.id === i && c.type === o
+  );
+  return /* @__PURE__ */ d(
+    x,
+    {
+      id: i,
+      type: o,
+      isActive: s ? s === o : !1,
+      isSelected: g,
+      className: e,
+      radius: t(r - n) - t(r + n),
+      x: t(r),
+      y: u($),
+      color: a || y
+    },
+    `point-${o}-${i}`
+  );
+}) });
+l.displayName = "Widgets.SourceSelector.Points";
+const j = l;
+export {
+  j as default
+};

package/dist/widgets/SourceSelector/SourceSelector.d.ts

@@ -1,6 +1,6 @@
 import { FunctionComponent } from "react";
 import { Alert, Source } from '../../types/astro';
-import { Image } from "@rubin-epo/epo-react-lib/dist/types/image";
+import { ImageShape } from "@rubin-epo/epo-react-lib";
 interface BlinkConfig {
     autoplay?: boolean;
     loop?: boolean;
@@ -12,7 +12,7 @@ interface SourceSelectorProps {
     sources: Source[];
     alerts?: Alert[];
     selectedSource?: Source[];
-    images: Image[];
+    images: ImageShape[];
     selectionCallback?: (data: Source[]) => void;
     blinkConfig?: BlinkConfig;
     color?: string;

package/dist/widgets/SourceSelector/mocks/index.d.ts

@@ -0,0 +1,7 @@
+import { SourceDataset } from '../../../types/astro';
+export declare const data: SourceDataset;
+export declare const images: {
+    url: string;
+}[];
+export declare const biggerData: SourceDataset;
+export declare const moreImages: never[];