@olenbetong/synergi-react 1.0.5 → 2.0.1

package/dist/esm/ob.react.js

@@ -2217,9 +2217,11 @@ var import_react = __toESM(require_react(), 1);
 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);
@@ -2241,39 +2243,47 @@ var Checkbox = (0, import_react.forwardRef)(function Checkbox2({ className, disa
   }
   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,
@@ -2301,8 +2311,10 @@ var import_react2 = __toESM(require_react(), 1);
 function getUiCulture() {
   return af?.userSession?.culture ?? "default";
 }
-function Arrow(props) {
-  const { direction, ...rest } = props;
+function Arrow({
+  direction,
+  ...rest
+}) {
   return /* @__PURE__ */ React.createElement(
     "button",
     {
@@ -2310,15 +2322,16 @@ function Arrow(props) {
         "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",
@@ -2334,41 +2347,89 @@ var formatter = new Intl.DateTimeFormat(getUiCulture(), {
   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,
@@ -2389,7 +2450,7 @@ function PageBanner({ as, className, children, ...other }) {
 }
 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";
@@ -2424,23 +2485,21 @@ function Portal({ children, root, type = "div" }) {
   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
@@ -2541,14 +2600,13 @@ function Sidebar(props) {
 }
 
 // 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"}`
@@ -2582,18 +2640,31 @@ settingsStore.keys().then(
     )
   )
 );
-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,
@@ -2603,25 +2674,31 @@ function SplitContainer({
   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) => {
@@ -2632,14 +2709,32 @@ function SplitContainer({
       });
     }
   }, [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);
@@ -2649,6 +2744,10 @@ function SplitContainer({
       }, 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);
@@ -2693,12 +2792,22 @@ function SplitContainer({
         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({
@@ -2712,7 +2821,7 @@ async function translateText(text, target, apiKey) {
   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,
@@ -2722,12 +2831,12 @@ async function translateText(text, target, apiKey) {
   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("");
@@ -2762,52 +2871,39 @@ function useTranslation(text, targetLanguage, apiKey) {
   };
 }
 
-// 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);
+// 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));
+  }));
+});
 export {
   Card,
   CardColumn,
   CardDetail,
   CardLabel,
+  CardStep,
+  CardStepList,
   Checkbox,
   ColorCard,
   DateNavigator,
-  List as LinkedList,
-  ListItem as LinkedListItem,
+  LinkedList,
+  LinkedListItem,
   PageBanner,
   BannerImage as PageBannerImage,
   Tab as PageBannerTab,
@@ -2818,7 +2914,7 @@ export {
   Sidebar,
   Spinner,
   SplitContainer,
-  ValueToggle,
+  ValueToggleGroup,
   useTranslation
 };
 /*! Bundled license information:

package/dist/esm/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 */