@olenbetong/synergi-react 1.0.5 → 2.0.1

package/dist/iife/ob.react.js

@@ -2204,17 +2204,19 @@ var ob;
   });
 
   // src/index.ts
-  var src_exports = {};
-  __export(src_exports, {
+  var index_exports = {};
+  __export(index_exports, {
     Card: () => Card,
     CardColumn: () => CardColumn,
     CardDetail: () => CardDetail,
     CardLabel: () => CardLabel,
+    CardStep: () => CardStep,
+    CardStepList: () => CardStepList,
     Checkbox: () => Checkbox,
     ColorCard: () => ColorCard,
     DateNavigator: () => DateNavigator,
-    LinkedList: () => List,
-    LinkedListItem: () => ListItem,
+    LinkedList: () => LinkedList,
+    LinkedListItem: () => LinkedListItem,
     PageBanner: () => PageBanner,
     PageBannerImage: () => BannerImage,
     PageBannerTab: () => Tab,
@@ -2225,7 +2227,7 @@ var ob;
     Sidebar: () => Sidebar,
     Spinner: () => Spinner,
     SplitContainer: () => SplitContainer,
-    ValueToggle: () => ValueToggle,
+    ValueToggleGroup: () => ValueToggleGroup,
     useTranslation: () => useTranslation
   });
 
@@ -2250,9 +2252,11 @@ var ob;
   function Mark(props) {
     return /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M20.285 2L9 13.567 3.714 8.556 0 12.272 9 21 24 5.715z", fill: "currentColor" }));
   }
-  var Checkbox = (0, import_react.forwardRef)(function Checkbox2({ className, disabled = false, id, onChange = () => null, title, value, ...other }, ref) {
-    const inputId = (0, import_react.useId)() + (id ?? "");
-    const input = (0, import_react.useRef)(null);
+  var Checkbox = (0, import_react.forwardRef)(function Checkbox2({ className, disabled = false, id, onChange = () => null, label, title, reverse, value, ...other }, ref) {
+    let inputId = (0, import_react.useId)();
+    inputId = id ?? inputId;
+    let inputIdRef = `#${inputId}`;
+    let input = (0, import_react.useRef)(null);
     (0, import_react.useEffect)(() => {
       if (typeof ref === "function") {
         ref(input.current);
@@ -2274,39 +2278,47 @@ var ob;
     }
     function handleKeyDown(evt) {
       if (evt.nativeEvent) {
-        const { nativeEvent } = evt;
+        let { nativeEvent } = evt;
         if (nativeEvent.key === " ") {
           nativeEvent.preventDefault();
           input.current?.click();
         }
       }
     }
-    return /* @__PURE__ */ React.createElement("div", { className: clsx_default("ObCheckbox-root", disabled && "Ob-disabled", className), title }, /* @__PURE__ */ React.createElement(
-      "input",
+    return /* @__PURE__ */ React.createElement(
+      "div",
       {
-        className: "ObCheckbox-input",
-        id: inputId,
-        type: "checkbox",
-        onChange: handleInputChanged,
-        checked: value,
-        disabled,
-        ref: input,
-        ...other
-      }
-    ), /* @__PURE__ */ React.createElement("label", { htmlFor: `#${inputId}`, className: "ObCheckbox-label", onKeyDown: handleKeyDown, onClick: handleClick }, /* @__PURE__ */ React.createElement("div", { className: "ObCheckbox-box" }, /* @__PURE__ */ React.createElement(Mark, { className: "ObCheckbox-mark" }))));
+        className: clsx_default("ObCheckbox-root", disabled && "Ob-disabled", reverse && "Ob-reverse", className),
+        title
+      },
+      /* @__PURE__ */ React.createElement(
+        "input",
+        {
+          className: "ObCheckbox-input",
+          id: inputId,
+          type: "checkbox",
+          onChange: handleInputChanged,
+          checked: value,
+          disabled,
+          ref: input,
+          ...other
+        }
+      ),
+      /* @__PURE__ */ React.createElement("label", { htmlFor: inputIdRef, className: "ObCheckbox-label", onKeyDown: handleKeyDown, onClick: handleClick }, /* @__PURE__ */ React.createElement("div", { className: "ObCheckbox-box" }, /* @__PURE__ */ React.createElement(Mark, { className: "ObCheckbox-mark" })), label && /* @__PURE__ */ React.createElement("div", { className: "ObCheckbox-label-text" }, label))
+    );
   });
 
   // src/ColorCard/index.tsx
-  function ColorCard({
-    as: Component,
-    children,
-    className,
-    href,
-    ...other
-  }) {
+  function ColorCard({ as: Component, children, className, href, ...other }) {
     const BaseElement = Component ? Component : href ? "a" : "div";
     return /* @__PURE__ */ React.createElement(BaseElement, { className: clsx_default("ObColorCard-root", className), href, ...other }, children);
   }
+  function CardStepList({ children, className, ...props }) {
+    return /* @__PURE__ */ React.createElement("div", { className: clsx_default("ObColorCard-stepList", className), ...props }, children);
+  }
+  function CardStep({ children, className, ...props }) {
+    return /* @__PURE__ */ React.createElement("div", { className: clsx_default("ObColorCard-step", className), ...props }, /* @__PURE__ */ React.createElement("div", { className: "ObColorCard-stepText" }, children));
+  }
   function CardColumn({
     children,
     className,
@@ -2334,8 +2346,10 @@ var ob;
   function getUiCulture() {
     return af?.userSession?.culture ?? "default";
   }
-  function Arrow(props) {
-    const { direction, ...rest } = props;
+  function Arrow({
+    direction,
+    ...rest
+  }) {
     return /* @__PURE__ */ React.createElement(
       "button",
       {
@@ -2343,15 +2357,16 @@ var ob;
           "ObDateNavigator-arrow",
           direction === "left" ? "ObDateNavigator-arrowLeft" : "ObDateNavigator-arrowRight"
         ),
+        "aria-label": direction === "left" ? (0, import_appframe_core.getLocalizedString)("Previous day") : (0, import_appframe_core.getLocalizedString)("Next day"),
         ...rest
       },
-      /* @__PURE__ */ React.createElement("span", { className: "ObDateNavigator-icon" }, direction === "left" ? /* @__PURE__ */ React.createElement("svg", { "aria-hidden": "true", focusable: "false", role: "img", viewBox: "0 0 320 512" }, /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React.createElement("span", { className: "ObDateNavigator-icon" }, direction === "left" ? /* @__PURE__ */ React.createElement("svg", { "aria-hidden": "true", viewBox: "0 0 320 512" }, /* @__PURE__ */ React.createElement(
         "path",
         {
           fill: "currentColor",
           d: "M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z"
         }
-      )) : /* @__PURE__ */ React.createElement("svg", { "aria-hidden": "true", focusable: "false", role: "img", viewBox: "0 0 320 512" }, /* @__PURE__ */ React.createElement(
+      )) : /* @__PURE__ */ React.createElement("svg", { "aria-hidden": "true", viewBox: "0 0 320 512" }, /* @__PURE__ */ React.createElement(
         "path",
         {
           fill: "currentColor",
@@ -2367,41 +2382,89 @@ var ob;
     year: "numeric",
     timeZone: "utc"
   });
-  var today = /* @__PURE__ */ new Date();
-  var todayUtc = Date.UTC(today.getFullYear(), today.getMonth(), today.getDate());
   var oneDay = 24 * 60 * 60 * 1e3;
-  function DateNavigator({ date: dateProp, onChange }) {
+  function DateNavigator({
+    date: dateProp,
+    onChange,
+    minDate,
+    maxDate
+  }) {
     let [internalDate, setInternalDate] = (0, import_react2.useState)(/* @__PURE__ */ new Date());
-    const date = dateProp ?? internalDate;
-    const dateUtc = Date.UTC(date.getFullYear(), date.getMonth(), date.getDate());
-    let dateValue = new Date(dateUtc);
-    let text = formatter.format(dateValue);
-    let altText;
-    if (todayUtc === dateUtc) {
-      altText = (0, import_appframe_core.getLocalizedString)("Today");
-    } else if (todayUtc === dateUtc + oneDay) {
-      altText = (0, import_appframe_core.getLocalizedString)("Yesterday");
-    } else if (todayUtc === dateUtc - oneDay) {
-      altText = (0, import_appframe_core.getLocalizedString)("Tomorrow");
+    let date = dateProp ?? internalDate;
+    let dateUtc = Date.UTC(date.getFullYear(), date.getMonth(), date.getDate());
+    let today = /* @__PURE__ */ new Date();
+    let todayUtc = Date.UTC(today.getFullYear(), today.getMonth(), today.getDate());
+    let liveRef = (0, import_react2.useRef)(null);
+    let text = (() => {
+      let base = formatter.format(new Date(dateUtc));
+      if (todayUtc === dateUtc) return `${(0, import_appframe_core.getLocalizedString)("Today")}, ${base}`;
+      if (todayUtc === dateUtc + oneDay) return `${(0, import_appframe_core.getLocalizedString)("Yesterday")}, ${base}`;
+      if (todayUtc === dateUtc - oneDay) return `${(0, import_appframe_core.getLocalizedString)("Tomorrow")}, ${base}`;
+      return base;
+    })();
+    let disablePrev = !!minDate && dateUtc <= Date.UTC(minDate.getFullYear(), minDate.getMonth(), minDate.getDate());
+    let disableNext = !!maxDate && dateUtc >= Date.UTC(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate());
+    function updateDate(newDate) {
+      if (minDate && newDate < minDate) {
+        newDate = new Date(minDate);
+      } else if (maxDate && newDate > maxDate) {
+        newDate = new Date(maxDate);
+      }
+      if (onChange) onChange(newDate);
+      else setInternalDate(newDate);
     }
-    if (altText) {
-      text = `${altText}, ${text}`;
+    function jumpToToday() {
+      updateDate(/* @__PURE__ */ new Date());
     }
-    function handleDateChanged(date2) {
-      if (typeof onChange === "function") {
-        onChange(date2);
-      } else {
-        setInternalDate(date2);
+    (0, import_react2.useEffect)(() => {
+      if (liveRef.current) {
+        liveRef.current.textContent = text;
+      }
+    }, [text]);
+    function handleKeyDown(event) {
+      if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+      if (event.defaultPrevented) return;
+      if (event.altKey || event.metaKey) return;
+      if (disablePrev && event.key === "ArrowLeft") return;
+      if (disableNext && event.key === "ArrowRight") return;
+      if (event.ctrlKey && event.shiftKey) {
+        let newDate = new Date(dateUtc);
+        if (event.key === "ArrowLeft") {
+          newDate.setFullYear(newDate.getFullYear() - 1);
+        } else if (event.key === "ArrowRight") {
+          newDate.setFullYear(newDate.getFullYear() + 1);
+        }
+        updateDate(newDate);
+        return;
+      }
+      if (event.ctrlKey) {
+        let newDate = new Date(dateUtc);
+        if (event.key === "ArrowLeft") {
+          newDate.setMonth(newDate.getMonth() - 1);
+        } else if (event.key === "ArrowRight") {
+          newDate.setMonth(newDate.getMonth() + 1);
+        }
+        updateDate(newDate);
+        return;
+      }
+      let modifier = event.shiftKey ? 7 : 1;
+      if (event.key === "ArrowLeft") {
+        updateDate(new Date(dateUtc - oneDay * modifier));
+      } else if (event.key === "ArrowRight") {
+        updateDate(new Date(dateUtc + oneDay * modifier));
       }
     }
-    return /* @__PURE__ */ React.createElement("div", { className: "ObDateNavigator-root" }, /* @__PURE__ */ React.createElement(Arrow, { direction: "left", onClick: () => handleDateChanged(new Date(dateUtc - oneDay)) }), /* @__PURE__ */ React.createElement("div", { className: "ObDateNavigator-date" }, text), /* @__PURE__ */ React.createElement(Arrow, { direction: "right", onClick: () => handleDateChanged(new Date(dateUtc + oneDay)) }));
+    return (
+      // biome-ignore lint/a11y/noNoninteractiveTabindex: I hate this component
+      /* @__PURE__ */ React.createElement("div", { className: "ObDateNavigator-root", onKeyDown: handleKeyDown, tabIndex: 0, "aria-label": "Date navigator" }, /* @__PURE__ */ React.createElement(Arrow, { direction: "left", onClick: () => updateDate(new Date(dateUtc - oneDay)), disabled: disablePrev }), /* @__PURE__ */ React.createElement("div", { className: "ObDateNavigator-date" }, text), /* @__PURE__ */ React.createElement(Arrow, { direction: "right", onClick: () => updateDate(new Date(dateUtc + oneDay)), disabled: disableNext }), /* @__PURE__ */ React.createElement("button", { type: "button", className: "ObDateNavigator-today", onClick: jumpToToday }, (0, import_appframe_core.getLocalizedString)("Today")), /* @__PURE__ */ React.createElement("div", { "aria-live": "polite", ref: liveRef, style: { position: "absolute", left: "-9999px" } }))
+    );
   }
 
   // src/LinkedCardList/index.tsx
-  function List({ children, className, ...other }) {
+  function LinkedList({ children, className, ...other }) {
     return /* @__PURE__ */ React.createElement("ul", { className: clsx_default("ObLinkedList-root", className), ...other }, children);
   }
-  function ListItem({
+  function LinkedListItem({
     children,
     className,
     label,
@@ -2422,7 +2485,7 @@ var ob;
   }
   var BannerImage = import_react3.default.forwardRef(function BannerImage2(props, ref) {
     const { className, ...other } = props;
-    return /* @__PURE__ */ import_react3.default.createElement("img", { ref, className: clsx_default("ObPageBanner-bannerImage", className), ...other });
+    return /* @__PURE__ */ import_react3.default.createElement("img", { ref, className: clsx_default("ObPageBanner-bannerImage", className), alt: "", ...other });
   });
   function TabList({ as, className, children, sticky, ...other }) {
     const Component = as ? as : "nav";
@@ -2457,23 +2520,21 @@ var ob;
     const portalNode = (0, import_react4.useRef)(null);
     (0, import_react4.useEffect)(() => {
       const ownerDocument = mountNode.current?.ownerDocument;
-      let portalElem = portalNode.current;
-      if (ownerDocument && portalElem) {
+      if (ownerDocument && !portalNode.current) {
         let parent = root ? ownerDocument.querySelector(root) || ownerDocument.body : ownerDocument.body;
         const node = ownerDocument.createElement(type);
-        portalElem = node;
+        portalNode.current = node;
         parent.appendChild(node);
         forceUpdate();
         return () => {
           parent.removeChild(node);
         };
       }
-    }, []);
+    }, [root, type]);
     if (!portalNode.current) {
       return /* @__PURE__ */ React.createElement("div", { ref: mountNode });
-    } else {
-      return (0, import_react_dom.createPortal)(children, portalNode.current);
     }
+    return (0, import_react_dom.createPortal)(children, portalNode.current);
   }
 
   // src/ProgressBar/index.tsx
@@ -2574,14 +2635,13 @@ var ob;
   }
 
   // src/Spinner/index.tsx
-  var import_react7 = __toESM(require_react(), 1);
   function Spinner({ className = "", fullPage = false, ...rest }) {
-    return /* @__PURE__ */ import_react7.default.createElement("div", { className: clsx_default(className, fullPage ? "ObSpinner-fullPage" : "ObSpinner-wrapper"), ...rest }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "ObSpinner-spinner" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "ObSpinner-bullet" }), /* @__PURE__ */ import_react7.default.createElement("div", { className: "ObSpinner-bullet" }), /* @__PURE__ */ import_react7.default.createElement("div", { className: "ObSpinner-bullet" }), /* @__PURE__ */ import_react7.default.createElement("div", { className: "ObSpinner-bullet" })));
+    return /* @__PURE__ */ React.createElement("div", { className: clsx_default(className, fullPage ? "ObSpinner-fullPage" : "ObSpinner-wrapper"), ...rest }, /* @__PURE__ */ React.createElement("div", { className: "ObSpinner-spinner" }, /* @__PURE__ */ React.createElement("div", { className: "ObSpinner-bullet" }), /* @__PURE__ */ React.createElement("div", { className: "ObSpinner-bullet" }), /* @__PURE__ */ React.createElement("div", { className: "ObSpinner-bullet" }), /* @__PURE__ */ React.createElement("div", { className: "ObSpinner-bullet" })));
   }
 
   // src/SplitContainer/index.tsx
   var import_localforage = __toESM(require_localforage(), 1);
-  var import_react8 = __toESM(require_react(), 1);
+  var import_react7 = __toESM(require_react(), 1);
   var article = window.af?.article?.id ?? window.window?.location.pathname.substring(1).split("/")[0];
   var settingsStore = import_localforage.default.createInstance({
     name: `AfSplitContainers.${window.af?.userSession.login ?? "anonymous"}`
@@ -2615,18 +2675,31 @@ var ob;
       )
     )
   );
-  var Divider = (0, import_react8.forwardRef)(function Divider2(props, ref) {
-    return /* @__PURE__ */ import_react8.default.createElement("div", { tabIndex: 0, className: clsx_default("ObSplitContainer-divider", props.className), ref }, /* @__PURE__ */ import_react8.default.createElement("span", null, "\u2022\u2022\u2022"));
+  var Divider = (0, import_react7.forwardRef)(function Divider2(props, ref) {
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: clsx_default("ObSplitContainer-divider", props.className),
+        tabIndex: 0,
+        ref,
+        role: "separator",
+        "aria-orientation": props.direction,
+        "aria-valuemin": props.min,
+        "aria-valuemax": props.max,
+        "aria-valuenow": props.size
+      },
+      /* @__PURE__ */ React.createElement("span", null, "\u2022\u2022\u2022")
+    );
   });
   function SplitRoot({ className, direction, ...props }) {
-    return /* @__PURE__ */ import_react8.default.createElement("div", { className: clsx_default(className, "ObSplitContainer-root", direction), ...props });
+    return /* @__PURE__ */ React.createElement("div", { className: clsx_default(className, "ObSplitContainer-root", direction), ...props });
   }
   function SplitPanel(props) {
     let style = {
       flex: props.fixed ? `0 0 ${Math.floor(props.size)}px` : "1 1 100%",
       ...props.style
     };
-    return /* @__PURE__ */ import_react8.default.createElement("div", { className: clsx_default(props.className, "ObSplitContainer-panel"), style }, props.children);
+    return /* @__PURE__ */ React.createElement("div", { className: clsx_default(props.className, "ObSplitContainer-panel"), style }, props.children);
   }
   function SplitContainer({
     className,
@@ -2636,25 +2709,31 @@ var ob;
     panelClassName,
     defaultFixedSize = 400,
     layoutVersion = 1,
+    min = 0,
+    max,
     id
   }) {
-    let [fixedSize, setFixedSize] = (0, import_react8.useState)(defaultFixedSize);
-    let [isDragging, setIsDragging] = (0, import_react8.useState)(false);
-    let dividerRef = (0, import_react8.useRef)(null);
-    if (import_react8.Children.count(children) !== 2) {
+    let [fixedSize, setFixedSize] = (0, import_react7.useState)(defaultFixedSize);
+    let [isDragging, setIsDragging] = (0, import_react7.useState)(false);
+    let dividerRef = (0, import_react7.useRef)(null);
+    if (import_react7.Children.count(children) !== 2) {
       throw Error("SplitContainer requires exactly 2 children");
     }
-    function handleFixedSizeChanged(size) {
-      setFixedSize((current) => {
-        let newValue = typeof size === "function" ? size(current) : size;
-        if (id) {
-          let key = `${article}.${id}`;
-          persistState(key, layoutVersion, newValue);
+    let containerRef = (0, import_react7.useRef)(null);
+    let [containerSize, setContainerSize] = (0, import_react7.useState)(0);
+    (0, import_react7.useEffect)(() => {
+      if (!containerRef.current) return;
+      let resizeObserver = new ResizeObserver((entries) => {
+        for (let entry of entries) {
+          if (entry.contentRect) {
+            setContainerSize(direction === "horizontal" ? entry.contentRect.width : entry.contentRect.height);
+          }
         }
-        return newValue;
       });
-    }
-    (0, import_react8.useEffect)(() => {
+      resizeObserver.observe(containerRef.current);
+      return () => resizeObserver.disconnect();
+    }, [direction]);
+    (0, import_react7.useEffect)(() => {
       if (id) {
         let key = `${article}.${id}`;
         getSettings(key, layoutVersion).then((data) => {
@@ -2665,14 +2744,32 @@ var ob;
         });
       }
     }, [id, layoutVersion]);
-    let childrenArray = import_react8.Children.toArray(children);
-    (0, import_react8.useEffect)(() => {
+    let childrenArray = import_react7.Children.toArray(children);
+    (0, import_react7.useEffect)(() => {
       let divider = dividerRef.current;
       if (divider) {
-        let getNewSize = function(event) {
+        let clampSize = function(size) {
+          let adjustedContainerSize = containerSize - 10;
+          let maxSize = Math.min(max ?? adjustedContainerSize, adjustedContainerSize);
+          if (size < min) {
+            size = min;
+          } else if (size > maxSize) {
+            size = maxSize;
+          }
+          return size;
+        }, getNewSize = function(event) {
           let deltaSize = direction === "horizontal" ? event.clientX - initialPosition.clientX : event.clientY - initialPosition.clientY;
           deltaSize *= fixedPanel === 1 ? -1 : 1;
-          return initialPosition.size - deltaSize;
+          return clampSize(initialPosition.size - deltaSize);
+        }, handleFixedSizeChanged = function(size) {
+          setFixedSize((current) => {
+            let newValue = clampSize(typeof size === "function" ? size(current) : size);
+            if (id) {
+              let key = `${article}.${id}`;
+              persistState(key, layoutVersion, newValue);
+            }
+            return newValue;
+          });
         }, handlePointerUp = function(event) {
           let newSize = getNewSize(event);
           handleFixedSizeChanged(newSize);
@@ -2682,6 +2779,10 @@ var ob;
         }, handlePointerMove = function(event) {
           event.preventDefault();
           let newSize = getNewSize(event);
+          let divider2 = dividerRef.current;
+          if (divider2) {
+            divider2.setAttribute("aria-valuenow", String(newSize));
+          }
           movingPanel.style.flex = `0 0 ${newSize}px`;
         }, handlePointerDown = function(event) {
           setIsDragging(true);
@@ -2726,12 +2827,22 @@ var ob;
           divider?.removeEventListener("keydown", handleKeyDown);
         };
       }
-    }, [direction, fixedPanel]);
-    return /* @__PURE__ */ import_react8.default.createElement(SplitRoot, { direction, className }, /* @__PURE__ */ import_react8.default.createElement(SplitPanel, { className: clsx_default(isDragging && "dragging", panelClassName), fixed: fixedPanel === 1, size: fixedSize }, childrenArray[0]), /* @__PURE__ */ import_react8.default.createElement(Divider, { ref: dividerRef, direction, isDragging }), /* @__PURE__ */ import_react8.default.createElement(SplitPanel, { className: clsx_default(isDragging && "dragging", panelClassName), fixed: fixedPanel === 2, size: fixedSize }, childrenArray[1]));
+    }, [direction, fixedPanel, layoutVersion, id, min, max, containerSize]);
+    return /* @__PURE__ */ React.createElement(SplitRoot, { direction, className, ref: containerRef }, /* @__PURE__ */ React.createElement(SplitPanel, { className: clsx_default(isDragging && "dragging", panelClassName), fixed: fixedPanel === 1, size: fixedSize }, childrenArray[0]), /* @__PURE__ */ React.createElement(
+      Divider,
+      {
+        ref: dividerRef,
+        direction,
+        isDragging,
+        size: fixedSize,
+        min,
+        max: max ?? containerSize
+      }
+    ), /* @__PURE__ */ React.createElement(SplitPanel, { className: clsx_default(isDragging && "dragging", panelClassName), fixed: fixedPanel === 2, size: fixedSize }, childrenArray[1]));
   }
 
   // src/useTranslation/index.ts
-  var import_react9 = __toESM(require_react(), 1);
+  var import_react8 = __toESM(require_react(), 1);
   async function translateText(text, target, apiKey) {
     let url = `https://translation.googleapis.com/language/translate/v2?key=${apiKey}`;
     let body = JSON.stringify({
@@ -2745,7 +2856,7 @@ var ob;
     let result = await fetch(url, options);
     let json = await result.json();
     let { data } = json;
-    if (data && data.translations) {
+    if (data?.translations) {
       let [translation] = data.translations;
       return {
         from: translation.detectedSourceLanguage,
@@ -2755,12 +2866,12 @@ var ob;
     return false;
   }
   function useTranslation(text, targetLanguage, apiKey) {
-    let [translation, setTranslation] = (0, import_react9.useState)("");
-    let [error, setError] = (0, import_react9.useState)(null);
-    let [from, setSourceLang] = (0, import_react9.useState)(null);
-    let [isTranslating, setIsTranslating] = (0, import_react9.useState)(false);
-    let textRef = (0, import_react9.useRef)(text);
-    (0, import_react9.useEffect)(() => {
+    let [translation, setTranslation] = (0, import_react8.useState)("");
+    let [error, setError] = (0, import_react8.useState)(null);
+    let [from, setSourceLang] = (0, import_react8.useState)(null);
+    let [isTranslating, setIsTranslating] = (0, import_react8.useState)(false);
+    let textRef = (0, import_react8.useRef)(text);
+    (0, import_react8.useEffect)(() => {
       textRef.current = text;
       return () => {
         setTranslation("");
@@ -2795,43 +2906,28 @@ var ob;
     };
   }
 
-  // src/ValueToggle/index.tsx
-  var import_react10 = __toESM(require_react(), 1);
-  var valueToggleId = 0;
-  function ValueToggleInner({ className, onChange, defaultValue, options, value, ...other }, ref) {
-    const wrapperRef = (0, import_react10.useRef)(null);
-    const [toggleName] = (0, import_react10.useState)("obet-value-toggle-" + String(++valueToggleId));
-    const isControlled = value !== void 0;
-    (0, import_react10.useImperativeHandle)(ref, () => {
-      const e = wrapperRef.current?.querySelector("input");
-      return {
-        focus: () => e?.focus(),
-        blur: () => e?.blur(),
-        value: (e?.querySelector("input:checked")).value
-      };
-    });
-    return /* @__PURE__ */ React.createElement("fieldset", { className, ...other }, /* @__PURE__ */ React.createElement("div", { className: "ObValueToggle-root", ref: wrapperRef }, options.map((option) => {
-      const isObj = typeof option === "object";
-      const optValue = isObj ? option.value : option;
-      const props = {
-        value: optValue
-      };
-      if (isControlled) {
-        props.checked = value === optValue;
-      } else {
-        props.defaultChecked = defaultValue === optValue;
-      }
-      if (typeof onChange === "function") {
-        props.onChange = () => onChange(optValue);
-      }
-      if (isObj) {
-        Object.assign(props, option);
-      }
-      return /* @__PURE__ */ React.createElement("label", { key: optValue, className: "ObValueToggle-option" }, /* @__PURE__ */ React.createElement("input", { type: "radio", className: "ObValueToggle-input", name: toggleName, ...props }), /* @__PURE__ */ React.createElement("span", { className: "ObValueToggle-label" }, isObj ? option.label || optValue : optValue));
-    })));
-  }
-  var ValueToggle = (0, import_react10.forwardRef)(ValueToggleInner);
-  return __toCommonJS(src_exports);
+  // src/ValueToggleGroup/index.tsx
+  var import_react9 = __toESM(require_react(), 1);
+  var ValueToggleGroup = (0, import_react9.forwardRef)(function ValueToggleGroup2({ options, value, defaultValue, onChange, className, name, id, style, orientation = "horizontal" }, ref) {
+    let randomId = (0, import_react9.useId)();
+    let groupName = name || `toggle-${id ?? randomId}`;
+    let isControlled = value !== void 0;
+    return /* @__PURE__ */ React.createElement("fieldset", { className: clsx_default("ObValueToggleGroup", orientation, className), role: "radiogroup", ref, style }, options.map((opt) => {
+      return /* @__PURE__ */ React.createElement("label", { key: opt.value, className: clsx_default("ObValueToggleOption", { disabled: opt.disabled }) }, /* @__PURE__ */ React.createElement(
+        "input",
+        {
+          type: "radio",
+          name: groupName,
+          value: opt.value,
+          checked: isControlled ? value === opt.value : void 0,
+          defaultChecked: !isControlled ? defaultValue === opt.value : void 0,
+          onChange: () => onChange?.(opt.value),
+          disabled: opt.disabled
+        }
+      ), /* @__PURE__ */ React.createElement("span", { className: "ObValueToggleLabel" }, opt.label ?? opt.value));
+    }));
+  });
+  return __toCommonJS(index_exports);
 })();
 /*! Bundled license information:
 

package/dist/iife/ob.react.min.css

@@ -1,2 +1,2 @@
-@charset "UTF-8";.ObCheckbox-root{--check-width: 2rem;--bg-color: var(--brand-dark, rgba(42, 65, 50, .5));--bg-color-hover: var(--brand-primary, rgba(42, 65, 50, .8));--bg-color-selected: var(--brand-light);display:inline-block;height:var(--check-width);margin-bottom:0}.ObCheckbox-root:focus-within .ObCheckbox-box{border:.1rem solid black}.ObCheckbox-root.Ob-disabled{--bg-color: rgba(150, 150, 150, .5);--bg-color-hover: var(--bg-color)}.ObCheckbox-box{position:relative;background:var(--bg-color);transition:background .3s ease;overflow:hidden;border-radius:calc(var(--check-width) / 15);height:var(--check-width);width:var(--check-width)}.ObCheckbox-box:hover{background:var(--bg-color-hover)}.ObCheckbox-label{position:relative;margin-bottom:0;overflow:hidden}.ObCheckbox-label:focus{outline:none}.ObCheckbox-mark{color:#fff;display:inline-block;font-size:calc(var(--check-width) * .4);left:50%;opacity:0;pointer-events:none;position:absolute;top:50%;transition:all .3s ease-in-out;transition-delay:0ms;transform:translate(-50%,-50%) scale(6)}.ObCheckbox-input{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.ObCheckbox-input:focus{outline:none}.check_Label{margin-bottom:0;flex-grow:1}.ObCheckbox-input:checked:not(:disabled)+.ObCheckbox-label{animation:animOn .8s 1 forwards}.ObCheckbox-input:checked:not(:disabled)+.ObCheckbox-label .ObCheckbox-box{background:var(--bg-color-selected)}.ObCheckbox-input:checked+.ObCheckbox-label .ObCheckbox-box .ObCheckbox-mark{transform:translate(-50%,-50%) scale(1);transition-delay:.2s;opacity:1}.ObCheckbox-root.Ob-disabled .ObCheckbox-box{cursor:not-allowed}@keyframes animOn{40%{transform:scaleY(.4) scaleX(2)}50%{transform:scaleY(1.2) scaleX(.6)}60%{transform:scaleY(.8) scaleX(1.4)}70%{transform:scaleY(1.1) scaleX(.9)}to{transform:scaleY(1) scaleX(1)}}.ObColorCard-root{--bg-color-border: black;--bg-color-main: white;--bg-size: .75rem;--card-color: rgb(0, 0, 0);align-items:stretch;background-image:linear-gradient(to right,#116069,#116069 .75rem,#fff .75rem,#fff);background-image:linear-gradient(to right,var(--bg-color-border),var(--bg-color-border) var(--bg-size),var(--bg-color-main) var(--bg-size),var(--bg-color-main));border-radius:.25rem;box-shadow:0 1px 12px #00000026,0 1px 6px #00000040;color:#666;cursor:pointer;display:flex;font-family:Variable Bahnschrift,Bahnschrift,Open Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol;font-size:1rem;min-height:10rem;overflow:hidden;transition:all ease-in-out .3s}.ObColorCard-root:nth-of-type(5n+1){--bg-color-border: rgb(178, 108, 190)}.ObColorCard-root:nth-of-type(5n+2){--bg-color-border: rgb(79, 164, 61)}.ObColorCard-root:nth-of-type(5n+3){--bg-color-border: rgb(246, 170, 23)}.ObColorCard-root:nth-of-type(5n+4){--bg-color-border: rgb(218, 93, 83)}.ObColorCard-root:nth-of-type(5n+5){--bg-color-border: rgb(23, 162, 184)}.ObColorCard-root:hover,.ObColorCard-root:focus{--bg-color-main: #f5f5f5;box-shadow:0 3px 18px #00000026,0 3px 12px #00000040;color:#666;text-decoration:none}@media screen and (min-width: 48rem){.ObColorCard-root{font-size:1.2rem}}.ObColorCard-column{display:flex;flex:1 1 100%;flex-direction:column;justify-content:space-between;margin:1rem 0;overflow:hidden;padding:.5rem 1.5rem .5rem 1rem;text-overflow:ellipsis}.ObColorCard-column:first-child{margin-left:.75rem;margin-left:var(--bg-size)}.ObColorCard-column.ObColorCard-minor{border-right:1px solid #e3e3e3;flex:0 0 4rem;transition:margin ease-in-out .3s}@media screen and (min-width: 48rem){.ObColorCard-column.ObColorCard-minor{flex:0 0 8rem}}.ObColorCard-detailLabel{color:#ccc;font-size:.8rem;text-transform:uppercase}.ObColorCard-detail:not(:last-child){margin-right:1.5rem}.ObColorCard-detail.ObColorCard-primary,.ObColorCard-detail.ObColorCard-primary .ObColorCard-detailValue{font-size:1.25rem;font-weight:300}.ObColorCard-detail.ObColorCard-primary .ObColorCard-detailValue{color:unset}@media screen and (min-width: 48rem){.ObColorCard-detail{font-size:1rem}}.ObColorCard-detailValue{color:#999}.ObColorCard-label{position:relative;padding-left:1.5rem}.ObColorCard-label:not(:last-child){margin-bottom:1rem}.ObColorCard-label:not(:last-child):after{content:"";position:absolute;width:.2rem;height:calc(100% + 1rem);border-left:.2rem dotted #666;left:.25rem;top:.5rem;z-index:0}.ObColorCard-label:before{background:#fff;border:.2rem solid hsl(186,72%,24%);border:.2rem solid var(--bg-color-border);border-radius:50%;content:"";display:block;height:.75rem;left:0;position:absolute;top:.3rem;width:.75rem;z-index:1}.ObDateNavigator-icon{display:inline-block}.ObDateNavigator-icon svg{width:.625em;position:relative;top:-1px}.ObDateNavigator-root{background-color:#f3f4f7;background-color:var(--block-header-color-bg);display:flex;font-size:1rem}.ObDateNavigator-arrow{background:none;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;padding:0;-webkit-appearance:button;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;display:flex;align-items:center;flex:0 0 3rem;justify-content:center;height:3rem;cursor:pointer;text-align:center}.ObDateNavigator-arrow::-moz-focus-inner{border:0;padding:0}.ObDateNavigator-arrow:hover{background-color:#e3e3e3;background-color:var(--block-header-button-hover)}.ObDateNavigator-arrowLeft{border-right:1px solid #dddddd;order:1}.ObDateNavigator-arrowRight{border-left:1px solid #dddddd;order:3}.ObDateNavigator-date{display:flex;flex:1 1 100%;flex-direction:column;justify-content:center;order:2;height:3rem;text-align:center}.ObLinkedList-root{list-style-type:none;margin-left:0;padding-left:0}.ObLinkedList-item{display:flex;align-items:center;flex-direction:row}.ObLinkedList-leftColumn{flex:1 1 4em;font-size:.75em;padding:0 1em;text-align:center}.ObLinkedList-rightColumn{flex:1 1 100%;padding:1em 1em 1em 1.5em}.ObLinkedList-line{display:flex;align-self:stretch;flex:0 0 .2em;background:#fff;position:relative}.ObLinkedList-bullet{background:#fff;border:1px solid rgba(50,50,50,.25);border-radius:.55em;height:.7em;width:.7em;position:absolute;left:0;top:50%;transform:translate(-.25em,-50%)}.ObLinkedList-card{background:#fff;border:1px solid;border-color:#e5e6e9 #dfe0e4 #d0d1d5;border-radius:.1875em;color:inherit;cursor:pointer;flex:100% 1 1;position:relative}.ObLinkedList-card:before{border-bottom:.5em solid transparent;border-right:1em solid white;border-top:.5em solid transparent;content:" ";filter:drop-shadow(-1px 0px 1px rgba(50,50,50,.2));height:1em;left:-1em;margin-top:-.5em;position:absolute;top:50%;width:1em}.ObLinkedList-card:hover{background-color:#edeff3!important;color:inherit;text-decoration:inherit}.ObLinkedList-card:hover:before{border-right-color:#edeff3!important}.ObPageBanner-root{background-color:#116069;background-color:var(--brand-dark);box-shadow:0 8px 8px #0003;color:#fff}.ObPageBanner-root a{color:#b3d5e6}.ObPageBanner-inner{display:flex;align-items:center;flex-direction:column}@media screen and (min-width: 768px){.ObPageBanner-inner{align-items:flex-start;flex-direction:row}}.ObPageBanner-plantTitle{font-size:2rem}@media screen and (min-width: 992px){.ObPageBanner-plantTitle{font-size:3rem}}.ObPageBanner-bannerImage{align-self:stretch;background-color:#ddd;display:inline-block;height:20vh;object-fit:cover;object-position:center center;width:100%}@media screen and (min-width: 576px){.ObPageBanner-bannerImage{align-self:center;margin:0;margin-right:1rem;border:.4rem solid white;border-radius:50%;height:150px;width:150px}}@media screen and (min-width: 992px){.ObPageBanner-bannerImage{height:250px;width:250px}}.ObPageBanner-bannerTitle{margin-bottom:1rem;margin-top:1rem;font-size:2rem}@media screen and (min-width: 768px){.ObPageBanner-bannerTitle{margin-top:0}}@media screen and (min-width: 992px){.ObPageBanner-bannerTitle{font-size:3rem}}.ObPageBanner-tabList.sticky{position:-webkit-sticky;position:sticky;top:0;z-index:1000}.ObPageBanner-tabListInner{overflow-x:auto;scrollbar-width:thin;white-space:nowrap}.ObPageBanner-tab{border-bottom:.25rem solid transparent;display:inline-block;margin-top:.5rem;min-width:8rem;padding:.5rem 1rem;text-align:center;text-transform:capitalize}.ObPageBanner-tab.active{border-color:#fff}.ObProgressBar-root{height:1.5em;width:100%;appearance:none;-webkit-appearance:none;background-color:#f5f5f5;border:none;border-radius:3px;box-shadow:0 2px 3px #0003 inset;color:#4169e1;position:relative}.ObProgressBar-root::-webkit-progress-bar{background-color:#f5f5f5;border-radius:3px;box-shadow:0 2px 3px #0003 inset}.ObProgressBar-root::-webkit-progress-value{background-image:linear-gradient(135deg,transparent,transparent 33%,rgba(0,0,0,.1) 33%,rgba(0,0,0,.1) 66%,transparent 66%),linear-gradient(top,#ffffff40,#0003),linear-gradient(left,var(--brand-primary, hsl(186, 72%, 24%)),var(--brand-light, hsl(186, 72%, 37%)));background-image:-webkit-linear-gradient(135deg,transparent,transparent 33%,rgba(0,0,0,.1) 33%,rgba(0,0,0,.1) 66%,transparent 66%),-webkit-linear-gradient(top,rgba(255,255,255,.25),rgba(0,0,0,.2)),-webkit-linear-gradient(left,var(--brand-primary),hsl(186,72%,24%),var(--brand-light, hsl(186, 72%, 37%)));background-size:35px 20px,100% 100%,100% 100%;border-radius:3px;position:relative;transition:width .5s ease-out}.ObProgressBar-root::-webkit-progress-value:after{background-color:#fff;content:"";border-radius:100%;height:5px;position:absolute;right:7px;top:7px;width:5px}.ObProgressBar-root::-moz-progress-bar{background-image:linear-gradient(135deg,transparent,transparent 33%,rgba(0,0,0,.1) 33%,rgba(0,0,0,.1) 66%,transparent 66%),linear-gradient(top,#ffffff40,#0003),linear-gradient(left,var(--brand-primary),var(--brand-light));background-image:-moz-linear-gradient(135deg,transparent,transparent 33%,rgba(0,0,0,.1) 33%,rgba(0,0,0,.1) 66%,transparent 66%),-moz-linear-gradient(top,rgba(255,255,255,.25),rgba(0,0,0,.2)),-moz-linear-gradient(left,var(--brand-primary),var(--brand-light));background-size:35px 20px,100% 100%,100% 100%;border-radius:3px;transition:width .5s ease-out}.ObSidebar-root{position:fixed;bottom:0;left:0;top:0;z-index:2;background-color:#fff;transform:translate(-100%);transition:transform .2s ease-out;will-change:transform;overflow-y:auto}.ObSidebar-root.Ob-right{left:unset;right:0;transform:translate(100%)}.ObSidebar-root.Ob-open{transform:translate(0)}.ObSidebar-root.ObSidebar-shadow{box-shadow:2px 2px 4px #00000026}.ObSidebar-root.ObSidebar-shadow.Ob-right{box-shadow:-2px 2px 4px #00000026}.ObSidebar-overlay{position:fixed;inset:0;z-index:1;opacity:0;visibility:hidden;transition:opacity .3s ease-out,visibility .3s ease-out;background-color:#0000004d}.ObSidebar-overlay.Ob-open{opacity:1;visibility:visible}.ObSpinner-root{display:inline-block}.ObSpinner-fullPage{display:flex;align-items:center;justify-content:center;height:100vh;width:100vw}.ObSpinner-spinner{display:inline-block;height:.75em;position:relative;width:2.5em}.ObSpinner-bullet{animation-timing-function:cubic-bezier(0,1,1,0);background:#666;border-radius:50%;height:.5em;position:absolute;top:.2rem;width:.5em}.ObSpinner-bullet:nth-child(1){animation:scaleAnimation .6s infinite ease-in-out;left:.25em}.ObSpinner-bullet:nth-child(2){animation:translateAnimation .6s infinite ease-in-out;left:.25em}.ObSpinner-bullet:nth-child(3){animation:translateAnimation .6s infinite ease-in-out;left:1.2em}.ObSpinner-bullet:nth-child(4){animation:scaleAnimation .6s infinite ease-in-out reverse;left:2em}@keyframes scaleAnimation{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes translateAnimation{0%{transform:translate(0)}to{transform:translate(.825em)}}.\1f616 {display:initial}.ObSplitContainer-root{display:flex;flex-direction:column;height:100%;width:100%}.ObSplitContainer-root.horizontal{flex-direction:row}.ObSplitContainer-panel{overflow:hidden}.ObSplitContainer-divider{flex:0 0 .5rem;background-color:transparent;line-height:.75;cursor:ns-resize;display:flex;align-items:center;justify-content:center}.ObSplitContainer-divider:focus{background-color:#0000004d}.ObSplitContainer-root.horizontal>.ObSplitContainer-divider{cursor:ew-resize;writing-mode:vertical-lr}.ObSplitContainer-panel.dragging{pointer-events:none}.ObValueToggle-root{display:flex;align-items:center}.ObValueToggle-option{margin-bottom:0}.ObValueToggle-label{cursor:pointer;font-size:.8em;margin:0 .2em;padding:.3em .5em;text-transform:uppercase}.ObValueToggle-label:hover{background:#ccc}.ObValueToggle-input:checked+.ObValueToggle-label{--color-bg: var(--brand-dark);background-color:#666;background-color:var(--color-bg);cursor:default;color:#fff}.ObValueToggle-input:checked:focus-within+.ObValueToggle-label{--color-bg: var(--brand-light)}.ObValueToggle-input:checked:hover+.ObValueToggle-label{background-color:#666;background-color:var(--color-bg)}.ObValueToggle-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
+@charset "UTF-8";.ObCheckbox-root{--check-width: 2rem;--bg-color: var(--brand-dark, rgba(42, 65, 50, .5));--bg-color-hover: var(--brand-primary, rgba(42, 65, 50, .8));--bg-color-selected: var(--brand-light);display:inline-block;height:var(--check-width);margin-bottom:0}.ObCheckbox-root:focus-within .ObCheckbox-box{border:.1rem solid black}.ObCheckbox-root.Ob-disabled{--bg-color: rgba(150, 150, 150, .5);--bg-color-hover: var(--bg-color)}.ObCheckbox-box{position:relative;background:var(--bg-color);transition:background .3s ease;overflow:hidden;border-radius:calc(var(--check-width) / 15);height:var(--check-width);width:var(--check-width)}.ObCheckbox-box:hover{background:var(--bg-color-hover)}.ObCheckbox-label{position:relative;margin-bottom:0;overflow:hidden}.ObCheckbox-label:focus{outline:none}.ObCheckbox-mark{color:#fff;display:inline-block;font-size:calc(var(--check-width) * .4);left:50%;opacity:0;pointer-events:none;position:absolute;top:50%;transition:all .3s ease-in-out;transition-delay:0ms;transform:translate(-50%,-50%) scale(6)}.ObCheckbox-input{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.ObCheckbox-input:focus{outline:none}.ObCheckbox-label{display:flex;gap:.5rem;align-items:center;overflow:visible}.ObCheckbox-root.Ob-reverse .ObCheckbox-label{flex-direction:row-reverse}.ObCheckbox-input:checked:not(:disabled)+.ObCheckbox-label .ObCheckbox-box{animation:animOn .6s 1 forwards}.ObCheckbox-input:checked:not(:disabled)+.ObCheckbox-label .ObCheckbox-box{background:var(--bg-color-selected)}.ObCheckbox-input:checked+.ObCheckbox-label .ObCheckbox-box .ObCheckbox-mark{transform:translate(-50%,-50%) scale(1);transition-delay:.2s;opacity:1}.ObCheckbox-root.Ob-disabled .ObCheckbox-box{cursor:not-allowed}@keyframes animOn{40%{transform:scaleY(.4) scaleX(2)}50%{transform:scaleY(1.2) scaleX(.6)}60%{transform:scaleY(.8) scaleX(1.4)}70%{transform:scaleY(1.1) scaleX(.9)}to{transform:scaleY(1) scaleX(1)}}.ObColorCard-root{--bg-color-border: black;--bg-color-main: white;--bg-size: .75rem;--card-color: rgb(0, 0, 0);display:flex;align-items:stretch;min-height:10rem;overflow:hidden;border-radius:.25rem;box-shadow:0 1px 12px #00000026,0 1px 6px #00000040;color:#666;background-image:linear-gradient(to right,var(--bg-color-border),var(--bg-color-border) var(--bg-size),var(--bg-color-main) var(--bg-size),var(--bg-color-main));font-family:Variable Bahnschrift,Bahnschrift,Open Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol;font-size:1rem;transition:all ease-in-out .3s;cursor:pointer;&:nth-of-type(5n+1){--bg-color-border: rgb(178, 108, 190)}&:nth-of-type(5n+2){--bg-color-border: rgb(79, 164, 61)}&:nth-of-type(5n+3){--bg-color-border: rgb(246, 170, 23)}&:nth-of-type(5n+4){--bg-color-border: rgb(218, 93, 83)}&:nth-of-type(5n+5){--bg-color-border: rgb(23, 162, 184)}&:hover,&:focus{--bg-color-main: #f5f5f5;box-shadow:0 3px 18px #00000026,0 3px 12px #00000040;text-decoration:none}@media screen and (min-width: 48rem){font-size:1.2rem}}.ObColorCard-column{display:flex;flex:1 1 100%;flex-direction:column;justify-content:space-between;margin:1rem 0;padding:.5rem 1.5rem .5rem 1rem;overflow:hidden;text-overflow:ellipsis;&:first-child{margin-left:var(--bg-size, .75rem)}&.ObColorCard-minor{flex:0 0 4rem;border-right:1px solid #e3e3e3;transition:margin ease-in-out .3s;@media screen and (min-width: 48rem){flex:0 0 8rem}}}.ObColorCard-detailLabel{color:#696969;font-size:.8rem;text-transform:uppercase}.ObColorCard-detail{&:not(:last-child){margin-right:1.5rem}&.ObColorCard-primary,&.ObColorCard-primary .ObColorCard-detailValue{font-size:1.25rem;font-weight:300}&.ObColorCard-primary .ObColorCard-detailValue{color:unset}@media screen and (min-width: 48rem){font-size:1rem}}.ObColorCard-detailValue{color:#555}.ObColorCard-stepList{display:flex;flex-direction:column;gap:1rem}.ObColorCard-step{position:relative;text-box-trim:trim-both;display:flex;align-items:flex-start;gap:.5rem}.ObColorCard-step:before{flex:.6em 0 0;content:"";position:relative;top:.25em;width:.6em;height:.6em;background:#fff;border:2px solid var(--bg-color-border, #999);border-radius:50%;box-sizing:border-box;z-index:1}.ObColorCard-step:not(:last-child):after{content:"";position:absolute;top:1em;left:calc(.3em - 1px);height:calc(100% - .8875em + 1rem);border-left:2px dotted #999;z-index:0}.ObDateNavigator-icon{display:inline-block}.ObDateNavigator-icon svg{width:.625em;position:relative;top:-1px}.ObDateNavigator-root{background-color:#f3f4f7;background-color:var(--block-header-color-bg);display:flex;font-size:1rem;outline:none}.ObDateNavigator-root:focus-visible{outline:2px solid var(--brand-dark, #336699);outline-offset:2px}.ObDateNavigator-arrow{background:none;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;padding:0;-webkit-appearance:button;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;display:flex;align-items:center;flex:0 0 3rem;justify-content:center;height:3rem;cursor:pointer;text-align:center}.ObDateNavigator-arrow::-moz-focus-inner{border:0;padding:0}.ObDateNavigator-arrow:hover{background-color:#e3e3e3;background-color:var(--block-header-button-hover)}.ObDateNavigator-arrowLeft{border-right:1px solid #dddddd;order:1}.ObDateNavigator-arrowRight{border-left:1px solid #dddddd;order:3}.ObDateNavigator-date{display:flex;flex:1 1 100%;flex-direction:column;justify-content:center;order:2;height:3rem;text-align:center}.ObDateNavigator-today{background:none;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;padding:0;-webkit-appearance:button;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;order:4;padding:0 1rem;height:3rem;display:flex;align-items:center;justify-content:center;font-size:.875rem;color:var(--brand-dark, #336699);text-transform:uppercase;cursor:pointer;text-wrap:nowrap;border-left:1px solid #dddddd}.ObDateNavigator-today::-moz-focus-inner{border:0;padding:0}.ObDateNavigator-today:hover{background-color:var(--block-header-button-hover)}.ObDateNavigator-today:focus-visible{outline:2px solid var(--brand-dark, #336699);outline-offset:2px}:root{--ob-linked-list-bullet-size: .7em;--ob-linked-list-line-width: .2em}.ObLinkedList-root{list-style-type:none;margin-left:0;padding-left:0}.ObLinkedList-item{display:flex;align-items:center;flex-direction:row}.ObLinkedList-leftColumn{flex:1 1 4em;font-size:.75em;padding:0 1em;text-align:center}.ObLinkedList-rightColumn{flex:1 1 100%;padding:1em 1em 1em 1.5em}.ObLinkedList-line{display:flex;align-self:stretch;flex:0 0 .2em;background:#fff;position:relative}.ObLinkedList-bullet{background:#fff;border:1px solid rgba(50,50,50,.25);border-radius:.55em;height:.7em;width:.7em;position:absolute;left:0;top:50%;transform:translate(calc(-1 * var(--ob-linked-list-bullet-size) / 2 + var(--ob-linked-list-line-width) / 2),-50%)}.ObLinkedList-card{display:block;background:#fff;border:1px solid;border-color:#e5e6e9 #dfe0e4 #d0d1d5;border-radius:.1875em;color:inherit;cursor:pointer;flex:100% 1 1;position:relative}.ObLinkedList-card:before{border-bottom:.5em solid transparent;border-right:1em solid white;border-top:.5em solid transparent;content:" ";filter:drop-shadow(-1px 0px 1px rgba(50,50,50,.2));height:1em;left:-1em;margin-top:-.5em;position:absolute;top:50%;width:1em}.ObLinkedList-card:hover{background-color:#edeff3!important;color:inherit;text-decoration:inherit}.ObLinkedList-card:hover:before{border-right-color:#edeff3!important}.ObPageBanner-root{background-color:#116069;background-color:var(--brand-dark);box-shadow:0 8px 8px #0003;color:#fff}.ObPageBanner-root a{color:#b3d5e6}.ObPageBanner-inner{display:flex;align-items:center;flex-direction:column}@media screen and (min-width: 768px){.ObPageBanner-inner{align-items:flex-start;flex-direction:row}}.ObPageBanner-plantTitle{font-size:2rem}@media screen and (min-width: 992px){.ObPageBanner-plantTitle{font-size:3rem}}.ObPageBanner-bannerImage{align-self:stretch;background-color:#ddd;display:inline-block;height:20vh;object-fit:cover;object-position:center center;width:100%}@media screen and (min-width: 576px){.ObPageBanner-bannerImage{align-self:center;margin:0;margin-right:1rem;border:.4rem solid white;border-radius:50%;height:150px;width:150px}}@media screen and (min-width: 992px){.ObPageBanner-bannerImage{height:250px;width:250px}}.ObPageBanner-bannerTitle{margin-bottom:1rem;margin-top:1rem;font-size:2rem}@media screen and (min-width: 768px){.ObPageBanner-bannerTitle{margin-top:0}}@media screen and (min-width: 992px){.ObPageBanner-bannerTitle{font-size:3rem}}.ObPageBanner-tabList.sticky{position:-webkit-sticky;position:sticky;top:0;z-index:1000}.ObPageBanner-tabListInner{overflow-x:auto;scrollbar-width:thin;white-space:nowrap}.ObPageBanner-tab{border-bottom:.25rem solid transparent;display:inline-block;margin-top:.5rem;min-width:8rem;padding:.5rem 1rem;text-align:center;text-transform:capitalize}.ObPageBanner-tab.active{border-color:#fff}.ObProgressBar-root{height:1.5em;width:100%;appearance:none;-webkit-appearance:none;background-color:#f5f5f5;border:none;border-radius:3px;box-shadow:0 2px 3px #0003 inset;color:#4169e1;position:relative}.ObProgressBar-root::-webkit-progress-bar{background-color:#f5f5f5;border-radius:3px;box-shadow:0 2px 3px #0003 inset}.ObProgressBar-root::-webkit-progress-value{background-image:linear-gradient(135deg,transparent,transparent 33%,rgba(0,0,0,.1) 33%,rgba(0,0,0,.1) 66%,transparent 66%),linear-gradient(top,#ffffff40,#0003),linear-gradient(left,var(--brand-primary),var(--brand-light));background-image:-webkit-linear-gradient(135deg,transparent,transparent 33%,rgba(0,0,0,.1) 33%,rgba(0,0,0,.1) 66%,transparent 66%),-webkit-linear-gradient(top,rgba(255,255,255,.25),rgba(0,0,0,.2)),-webkit-linear-gradient(left,var(--brand-primary),var(--brand-light));background-size:35px 20px,100% 100%,100% 100%;border-radius:3px;position:relative;transition:width .5s ease-out}.ObProgressBar-root::-webkit-progress-value:after{background-color:#fff;content:"";border-radius:100%;height:5px;position:absolute;right:7px;top:7px;width:5px}.ObProgressBar-root::-moz-progress-bar{background-image:linear-gradient(135deg,transparent,transparent 33%,rgba(0,0,0,.1) 33%,rgba(0,0,0,.1) 66%,transparent 66%),linear-gradient(top,#ffffff40,#0003),linear-gradient(left,var(--brand-primary),var(--brand-light));background-image:-moz-linear-gradient(135deg,transparent,transparent 33%,rgba(0,0,0,.1) 33%,rgba(0,0,0,.1) 66%,transparent 66%),-moz-linear-gradient(top,rgba(255,255,255,.25),rgba(0,0,0,.2)),-moz-linear-gradient(left,var(--brand-primary),var(--brand-light));background-size:35px 20px,100% 100%,100% 100%;border-radius:3px;transition:width .5s ease-out}.ObSidebar-root{position:fixed;bottom:0;left:0;top:0;z-index:2;background-color:#fff;transform:translate(-100%);transition:transform .2s ease-out;will-change:transform;overflow-y:auto}.ObSidebar-root.Ob-right{left:unset;right:0;transform:translate(100%)}.ObSidebar-root.Ob-open{transform:translate(0)}.ObSidebar-root.ObSidebar-shadow{box-shadow:2px 2px 4px #00000026}.ObSidebar-root.ObSidebar-shadow.Ob-right{box-shadow:-2px 2px 4px #00000026}.ObSidebar-overlay{position:fixed;inset:0;z-index:1;opacity:0;visibility:hidden;transition:opacity .3s ease-out,visibility .3s ease-out;background-color:#0000004d}.ObSidebar-overlay.Ob-open{opacity:1;visibility:visible}.ObSpinner-wrapper,.ObSpinner-fullPage{--bullet-size: .5em}.ObSpinner-root{display:inline-block}.ObSpinner-fullPage{display:flex;align-items:center;justify-content:center;height:100vh;width:100vw}.ObSpinner-spinner{display:inline-block;height:calc(var(--bullet-size) * 1.5);position:relative;width:calc(var(--bullet-size) * 5)}.ObSpinner-bullet{animation-timing-function:cubic-bezier(0,1,1,0);background:#666;border-radius:50%;height:var(--bullet-size);position:absolute;top:.2rem;width:var(--bullet-size);&:nth-child(1){animation:scaleAnimation .6s infinite ease-in-out;left:calc(var(--bullet-size) * .5)}&:nth-child(2){animation:translateAnimation .6s infinite ease-in-out;left:calc(var(--bullet-size) * .5)}&:nth-child(3){animation:translateAnimation .6s infinite ease-in-out;left:calc(var(--bullet-size) * 2.4)}&:nth-child(4){animation:scaleAnimation .6s infinite ease-in-out reverse;left:calc(var(--bullet-size) * 4)}}@keyframes scaleAnimation{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes translateAnimation{0%{transform:translate(0)}to{transform:translate(calc(var(--bullet-size) * 1.65))}}.\1f616 {display:initial}.ObSplitContainer-root{display:flex;flex-direction:column;height:100%;width:100%}.ObSplitContainer-root.horizontal{flex-direction:row}.ObSplitContainer-panel{overflow:hidden}.ObSplitContainer-divider{flex:0 0 .5rem;background-color:transparent;line-height:.75;cursor:ns-resize;display:flex;align-items:center;justify-content:center}.ObSplitContainer-divider:focus{background-color:#0000004d}.ObSplitContainer-root.horizontal>.ObSplitContainer-divider{cursor:ew-resize;writing-mode:vertical-lr}.ObSplitContainer-panel.dragging{pointer-events:none}.ObValueToggleGroup{padding:.25rem;border:2px solid rgb(0 0 0 / .2);border-radius:4px;display:flex;gap:.25rem;flex-wrap:wrap;&.vertical{flex-direction:column;align-items:center;.ObValueToggleOption{width:100%;.ObValueToggleLabel{width:100%;text-align:center}}}&:focus-within{border-color:#000c}}.ObValueToggleOption{display:flex;align-items:center;margin:0;position:relative}.ObValueToggleOption input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.ObValueToggleLabel{font-size:.8em;margin:0 .2em;padding:.3em .5em;text-transform:uppercase;transition:background .2s ease,color .2s ease;border-radius:4px}.ObValueToggleOption:hover input:not(:disabled)+.ObValueToggleLabel{cursor:pointer;background:#ccc}.ObValueToggleOption input:checked+.ObValueToggleLabel{--color-bg: var(--brand-dark);background-color:var(--color-bg);color:#fff;cursor:default}.ObValueToggleOption input:disabled+.ObValueToggleLabel{color:#00000080}.ObValueToggleOption input:checked:focus-visible+.ObValueToggleLabel{--color-bg: var(--brand-light);outline:2px solid var(--brand-light)}.ObValueToggleOption input:checked:hover+.ObValueToggleLabel{background-color:var(--color-bg)}
 /*# sourceMappingURL=ob.react.min.css.map */