@olenbetong/synergi-react 0.7.1 → 0.7.3

package/dist/esm/ob.react.js

@@ -2209,16 +2209,7 @@ var clsx_m_default = clsx;
 // src/Checkbox/index.tsx
 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"
-  }));
+  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 ?? "");
@@ -2251,28 +2242,19 @@ var Checkbox = (0, import_react.forwardRef)(function Checkbox2({ className, disa
       }
     }
   }
-  return /* @__PURE__ */ React.createElement("div", {
-    className: clsx_m_default("ObCheckbox-root", disabled && "Ob-disabled", 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: `#${inputId}`,
-    className: "ObCheckbox-label",
-    onKeyDown: handleKeyDown,
-    onClick: handleClick
-  }, /* @__PURE__ */ React.createElement("div", {
-    className: "ObCheckbox-box"
-  }, /* @__PURE__ */ React.createElement(Mark, {
-    className: "ObCheckbox-mark"
-  }))));
+  return /* @__PURE__ */ React.createElement("div", { className: clsx_m_default("ObCheckbox-root", disabled && "Ob-disabled", 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: `#${inputId}`, className: "ObCheckbox-label", onKeyDown: handleKeyDown, onClick: handleClick }, /* @__PURE__ */ React.createElement("div", { className: "ObCheckbox-box" }, /* @__PURE__ */ React.createElement(Mark, { className: "ObCheckbox-mark" }))));
 });
 
 // src/ColorCard/index.tsx
@@ -2284,11 +2266,7 @@ function ColorCard({
   ...other
 }) {
   const BaseElement = Component ? Component : href ? "a" : "div";
-  return /* @__PURE__ */ React.createElement(BaseElement, {
-    className: clsx_m_default("ObColorCard-root", className),
-    href,
-    ...other
-  }, children);
+  return /* @__PURE__ */ React.createElement(BaseElement, { className: clsx_m_default("ObColorCard-root", className), href, ...other }, children);
 }
 function CardColumn({
   children,
@@ -2296,10 +2274,7 @@ function CardColumn({
   minor,
   ...other
 }) {
-  return /* @__PURE__ */ React.createElement("div", {
-    className: clsx_m_default("ObColorCard-column", minor && "ObColorCard-minor", className),
-    ...other
-  }, children);
+  return /* @__PURE__ */ React.createElement("div", { className: clsx_m_default("ObColorCard-column", minor && "ObColorCard-minor", className), ...other }, children);
 }
 function CardDetail({
   children,
@@ -2308,20 +2283,10 @@ function CardDetail({
   primary,
   ...other
 }) {
-  return /* @__PURE__ */ React.createElement("div", {
-    className: clsx_m_default("ObColorCard-detail", primary && "ObColorCard-primary", className),
-    ...other
-  }, label && /* @__PURE__ */ React.createElement("div", {
-    className: "ObColorCard-detailLabel"
-  }, label), /* @__PURE__ */ React.createElement("div", {
-    className: "ObColorCard-detailValue"
-  }, children));
+  return /* @__PURE__ */ React.createElement("div", { className: clsx_m_default("ObColorCard-detail", primary && "ObColorCard-primary", className), ...other }, label && /* @__PURE__ */ React.createElement("div", { className: "ObColorCard-detailLabel" }, label), /* @__PURE__ */ React.createElement("div", { className: "ObColorCard-detailValue" }, children));
 }
 function CardLabel({ children, className, ...other }) {
-  return /* @__PURE__ */ React.createElement("div", {
-    className: clsx_m_default("ObColorCard-label", className),
-    ...other
-  }, children);
+  return /* @__PURE__ */ React.createElement("div", { className: clsx_m_default("ObColorCard-label", className), ...other }, children);
 }
 
 // src/DateNavigator/index.tsx
@@ -2332,31 +2297,29 @@ function getUiCulture() {
 }
 function Arrow(props) {
   const { direction, ...rest } = props;
-  return /* @__PURE__ */ React.createElement("button", {
-    className: clsx_m_default(
-      "ObDateNavigator-arrow",
-      direction === "left" ? "ObDateNavigator-arrowLeft" : "ObDateNavigator-arrowRight"
-    ),
-    ...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("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("path", {
-    fill: "currentColor",
-    d: "M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"
-  }))));
+  return /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      className: clsx_m_default(
+        "ObDateNavigator-arrow",
+        direction === "left" ? "ObDateNavigator-arrowLeft" : "ObDateNavigator-arrowRight"
+      ),
+      ...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(
+      "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(
+      "path",
+      {
+        fill: "currentColor",
+        d: "M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"
+      }
+    )))
+  );
 }
 var formatter = new Intl.DateTimeFormat(getUiCulture(), {
   weekday: "short",
@@ -2392,25 +2355,12 @@ function DateNavigator({ date: dateProp, onChange }) {
       setInternalDate(date2);
     }
   }
-  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 /* @__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)) }));
 }
 
 // src/LinkedCardList/index.tsx
 function List({ children, className, ...other }) {
-  return /* @__PURE__ */ React.createElement("ul", {
-    className: clsx_m_default("ObLinkedList-root", className),
-    ...other
-  }, children);
+  return /* @__PURE__ */ React.createElement("ul", { className: clsx_m_default("ObLinkedList-root", className), ...other }, children);
 }
 function ListItem({
   children,
@@ -2418,72 +2368,41 @@ function ListItem({
   label,
   ...other
 }) {
-  return /* @__PURE__ */ React.createElement("li", {
-    className: clsx_m_default("ObLinkedList-item", className),
-    ...other
-  }, label && /* @__PURE__ */ React.createElement("div", {
-    className: "ObLinkedList-leftColumn"
-  }, label), /* @__PURE__ */ React.createElement("div", {
-    className: "ObLinkedList-line"
-  }, /* @__PURE__ */ React.createElement("div", {
-    className: "ObLinkedList-bullet"
-  })), /* @__PURE__ */ React.createElement("div", {
-    className: "ObLinkedList-rightColumn"
-  }, children));
+  return /* @__PURE__ */ React.createElement("li", { className: clsx_m_default("ObLinkedList-item", className), ...other }, label && /* @__PURE__ */ React.createElement("div", { className: "ObLinkedList-leftColumn" }, label), /* @__PURE__ */ React.createElement("div", { className: "ObLinkedList-line" }, /* @__PURE__ */ React.createElement("div", { className: "ObLinkedList-bullet" })), /* @__PURE__ */ React.createElement("div", { className: "ObLinkedList-rightColumn" }, children));
 }
 function Card({ as, children, className, ...other }) {
   const Component = as || "div";
-  return /* @__PURE__ */ React.createElement(Component, {
-    className: clsx_m_default("ObLinkedList-card", className),
-    ...other
-  }, children);
+  return /* @__PURE__ */ React.createElement(Component, { className: clsx_m_default("ObLinkedList-card", className), ...other }, children);
 }
 
 // src/PageBanner/index.tsx
 var import_react3 = __toESM(require_react(), 1);
 function PageBanner({ as, className, children, ...other }) {
   const Component = as ? as : "section";
-  return /* @__PURE__ */ import_react3.default.createElement(Component, {
-    className: clsx_m_default("ObPageBanner-root", className),
-    ...other
-  }, /* @__PURE__ */ import_react3.default.createElement("div", {
-    className: "container px-0"
-  }, /* @__PURE__ */ import_react3.default.createElement("div", {
-    className: "ObPageBanner-pageBannerInner"
-  }, children)));
+  return /* @__PURE__ */ import_react3.default.createElement(Component, { className: clsx_m_default("ObPageBanner-root", className), ...other }, /* @__PURE__ */ import_react3.default.createElement("div", { className: "container px-0" }, /* @__PURE__ */ import_react3.default.createElement("div", { className: "ObPageBanner-pageBannerInner" }, children)));
 }
 var BannerImage = import_react3.default.forwardRef(function BannerImage2(props, ref) {
   const { className, ...other } = props;
-  return /* @__PURE__ */ import_react3.default.createElement("img", {
-    ref,
-    className: clsx_m_default("ObPageBanner-bannerImage", className),
-    ...other
-  });
+  return /* @__PURE__ */ import_react3.default.createElement("img", { ref, className: clsx_m_default("ObPageBanner-bannerImage", className), ...other });
 });
 function TabList({ as, className, children, sticky, ...other }) {
   const Component = as ? as : "nav";
-  return /* @__PURE__ */ import_react3.default.createElement(Component, {
-    className: clsx_m_default("ObPageBanner-pageBanner", "ObPageBanner-tabList", sticky && "sticky", className),
-    ...other
-  }, /* @__PURE__ */ import_react3.default.createElement("div", {
-    className: "container px-0"
-  }, /* @__PURE__ */ import_react3.default.createElement("div", {
-    className: "ObPageBanner-tabListInner"
-  }, children)));
+  return /* @__PURE__ */ import_react3.default.createElement(
+    Component,
+    {
+      className: clsx_m_default("ObPageBanner-pageBanner", "ObPageBanner-tabList", sticky && "sticky", className),
+      ...other
+    },
+    /* @__PURE__ */ import_react3.default.createElement("div", { className: "container px-0" }, /* @__PURE__ */ import_react3.default.createElement("div", { className: "ObPageBanner-tabListInner" }, children))
+  );
 }
 function Tab({ active, as, className, children, ...other }) {
   const Component = as ? as : "a";
-  return /* @__PURE__ */ import_react3.default.createElement(Component, {
-    className: clsx_m_default("ObPageBanner-tab", active && "active", className),
-    ...other
-  }, children);
+  return /* @__PURE__ */ import_react3.default.createElement(Component, { className: clsx_m_default("ObPageBanner-tab", active && "active", className), ...other }, children);
 }
 function Title({ as, className, children, ...other }) {
   const Component = as ? as : "h1";
-  return /* @__PURE__ */ import_react3.default.createElement(Component, {
-    className: clsx_m_default("ObPageBanner-bannerTitle", className),
-    ...other
-  }, children);
+  return /* @__PURE__ */ import_react3.default.createElement(Component, { className: clsx_m_default("ObPageBanner-bannerTitle", className), ...other }, children);
 }
 
 // src/Portal/index.tsx
@@ -2512,9 +2431,7 @@ function Portal({ children, root, type = "div" }) {
     }
   }, []);
   if (!portalNode.current) {
-    return /* @__PURE__ */ React.createElement("div", {
-      ref: mountNode
-    });
+    return /* @__PURE__ */ React.createElement("div", { ref: mountNode });
   } else {
     return (0, import_react_dom.createPortal)(children, portalNode.current);
   }
@@ -2523,11 +2440,7 @@ function Portal({ children, root, type = "div" }) {
 // src/ProgressBar/index.tsx
 var import_react5 = __toESM(require_react(), 1);
 var ProgressBar = (0, import_react5.forwardRef)(function ProgressBar2({ className, ...props }, ref) {
-  return /* @__PURE__ */ React.createElement("progress", {
-    className: clsx_m_default("ObProgressBar-root", className),
-    ...props,
-    ref
-  });
+  return /* @__PURE__ */ React.createElement("progress", { className: clsx_m_default("ObProgressBar-root", className), ...props, ref });
 });
 
 // src/Sidebar/index.tsx
@@ -2594,43 +2507,37 @@ function Sidebar(props) {
     };
   }, [open]);
   const { className: overlayClassName, ...overlayOther } = overlayProps;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
-    className: clsx_m_default(
-      "ObSidebar-root",
-      open && "Ob-open",
-      pullRight && "Ob-right",
-      shadow && "ObSidebar-shadow",
-      className
-    ),
-    ref: sidebar,
-    tabIndex: -1,
-    ...other
-  }, (open || !hidden) && children), /* @__PURE__ */ React.createElement("div", {
-    role: "presentation",
-    tabIndex: -1,
-    className: clsx_m_default("ObSidebar-overlay", open && "Ob-open", overlayClassName),
-    onClick: closeSidebar,
-    ...overlayOther
-  }));
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: clsx_m_default(
+        "ObSidebar-root",
+        open && "Ob-open",
+        pullRight && "Ob-right",
+        shadow && "ObSidebar-shadow",
+        className
+      ),
+      ref: sidebar,
+      tabIndex: -1,
+      ...other
+    },
+    (open || !hidden) && children
+  ), /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      role: "presentation",
+      tabIndex: -1,
+      className: clsx_m_default("ObSidebar-overlay", open && "Ob-open", overlayClassName),
+      onClick: closeSidebar,
+      ...overlayOther
+    }
+  ));
 }
 
 // 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_m_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__ */ import_react7.default.createElement("div", { className: clsx_m_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" })));
 }
 
 // src/SplitContainer/index.tsx
@@ -2669,27 +2576,17 @@ settingsStore.keys().then(
   )
 );
 var Divider = (0, import_react8.forwardRef)(function Divider2(props, ref) {
-  return /* @__PURE__ */ import_react8.default.createElement("div", {
-    tabIndex: 0,
-    className: clsx_m_default("ObSplitContainer-divider", props.className),
-    ref
-  }, /* @__PURE__ */ import_react8.default.createElement("span", null, "\u2022\u2022\u2022"));
+  return /* @__PURE__ */ import_react8.default.createElement("div", { tabIndex: 0, className: clsx_m_default("ObSplitContainer-divider", props.className), ref }, /* @__PURE__ */ import_react8.default.createElement("span", null, "\u2022\u2022\u2022"));
 });
 function SplitRoot({ className, direction, ...props }) {
-  return /* @__PURE__ */ import_react8.default.createElement("div", {
-    className: clsx_m_default(className, "ObSplitContainer-root", direction),
-    ...props
-  });
+  return /* @__PURE__ */ import_react8.default.createElement("div", { className: clsx_m_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_m_default(props.className, "ObSplitContainer-panel"),
-    style
-  }, props.children);
+  return /* @__PURE__ */ import_react8.default.createElement("div", { className: clsx_m_default(props.className, "ObSplitContainer-panel"), style }, props.children);
 }
 function SplitContainer({
   className,
@@ -2790,22 +2687,7 @@ function SplitContainer({
       };
     }
   }, [direction, fixedPanel]);
-  return /* @__PURE__ */ import_react8.default.createElement(SplitRoot, {
-    direction,
-    className
-  }, /* @__PURE__ */ import_react8.default.createElement(SplitPanel, {
-    className: 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: panelClassName,
-    fixed: fixedPanel === 2,
-    size: fixedSize
-  }, childrenArray[1]));
+  return /* @__PURE__ */ import_react8.default.createElement(SplitRoot, { direction, className }, /* @__PURE__ */ import_react8.default.createElement(SplitPanel, { className: 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: panelClassName, fixed: fixedPanel === 2, size: fixedSize }, childrenArray[1]));
 }
 
 // src/useTranslation/index.ts
@@ -2888,13 +2770,7 @@ function ValueToggleInner({ className, onChange, defaultValue, options, value, .
       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) => {
+  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 = {
@@ -2911,17 +2787,7 @@ function ValueToggleInner({ className, onChange, defaultValue, options, value, .
     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));
+    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);

package/dist/esm/ob.react.min.css.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/Checkbox/index.scss", "../../src/ColorCard/index.scss", "../../src/DateNavigator/index.scss", "../../src/styles/_mixins.scss", "../../src/LinkedCardList/index.scss", "../../src/PageBanner/index.scss", "../../src/styles/_variables.scss", "../../src/ProgressBar/index.scss", "../../src/Sidebar/index.scss", "../../src/Spinner/index.scss", "../../src/SplitContainer/index.scss", "../../src/ValueToggle/index.scss"],
-  "sourcesContent": [null, null, null, null, null, null, null, null, null, null, null, null],
+  "sourcesContent": [".ObCheckbox-root {\n\t--check-width: 2rem;\n\t--bg-color: var(--brand-dark, rgba(42, 65, 50, 0.5));\n\t--bg-color-hover: var(--brand-primary, rgba(42, 65, 50, 0.8));\n\t--bg-color-selected: var(--brand-light);\n\n\tdisplay: inline-block;\n\theight: var(--check-width);\n\tmargin-bottom: 0;\n\n\t&:focus-within .ObCheckbox-box {\n\t\tborder: 0.1rem solid black;\n\t}\n\n\t&.Ob-disabled {\n\t\t--bg-color: rgba(150, 150, 150, 0.5);\n\t\t--bg-color-hover: var(--bg-color);\n\t}\n}\n\n.ObCheckbox-box {\n\tposition: relative;\n\n\tbackground: var(--bg-color);\n\ttransition: background 300ms ease;\n\n\toverflow: hidden;\n\n\tborder-radius: calc(var(--check-width) / 15);\n\theight: var(--check-width);\n\twidth: var(--check-width);\n\n\t&:hover {\n\t\tbackground: var(--bg-color-hover);\n\t}\n}\n\n.ObCheckbox-label {\n\tposition: relative;\n\tmargin-bottom: 0;\n\toverflow: hidden;\n\n\t&:focus {\n\t\toutline: none;\n\t}\n}\n\n.ObCheckbox-mark {\n\tcolor: #fff;\n\tdisplay: inline-block;\n\tfont-size: calc(var(--check-width) * 0.4);\n\tleft: 50%;\n\topacity: 0;\n\tpointer-events: none;\n\tposition: absolute;\n\ttop: 50%;\n\ttransition: all 300ms ease-in-out;\n\ttransition-delay: 0ms;\n\ttransform: translate(-50%, -50%) scale(6);\n}\n\n.ObCheckbox-input {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n\n\t&:focus {\n\t\toutline: none;\n\t}\n}\n\n.check_Label {\n\tmargin-bottom: 0;\n\tflex-grow: 1;\n}\n\n.ObCheckbox-input:checked:not(:disabled) + .ObCheckbox-label {\n\tanimation: animOn 800ms 1 forwards;\n}\n\n.ObCheckbox-input:checked:not(:disabled) + .ObCheckbox-label .ObCheckbox-box {\n\tbackground: var(--bg-color-selected);\n}\n\n.ObCheckbox-input:checked + .ObCheckbox-label .ObCheckbox-box .ObCheckbox-mark {\n\ttransform: translate(-50%, -50%) scale(1);\n\ttransition-delay: 200ms;\n\topacity: 1;\n}\n\n.ObCheckbox-root.Ob-disabled .ObCheckbox-box {\n\tcursor: not-allowed;\n}\n\n@keyframes animOn {\n\t40% {\n\t\ttransform: scaleY(0.4) scaleX(2);\n\t}\n\n\t50% {\n\t\ttransform: scaleY(1.2) scaleX(0.6);\n\t}\n\n\t60% {\n\t\ttransform: scaleY(0.8) scaleX(1.4);\n\t}\n\n\t70% {\n\t\ttransform: scaleY(1.1) scaleX(0.9);\n\t}\n\n\t100% {\n\t\ttransform: scaleY(1) scaleX(1);\n\t}\n}\n", "@import \"../styles/variables\";\n\n.ObColorCard-root {\n\t--bg-color-border: black;\n\t--bg-color-main: white;\n\t--bg-size: 0.75rem;\n\t--card-color: rgb(0, 0, 0);\n\n\talign-items: stretch;\n\tbackground-image: linear-gradient(to right, $brand-primary, $brand-primary 0.75rem, white 0.75rem, white);\n\tbackground-image: linear-gradient(\n\t\tto right,\n\t\tvar(--bg-color-border),\n\t\tvar(--bg-color-border) var(--bg-size),\n\t\tvar(--bg-color-main) var(--bg-size),\n\t\tvar(--bg-color-main)\n\t);\n\tborder-radius: 0.25rem;\n\tbox-shadow: 0 1px 12px rgba(0, 0, 0, 0.15), 0 1px 6px rgba(0, 0, 0, 0.25);\n\tcolor: #666;\n\tcursor: pointer;\n\tdisplay: flex;\n\tfont-family: \"Variable Bahnschrift\", \"Bahnschrift\", \"Open Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto,\n\t\t\"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n\tfont-size: 1rem;\n\tmin-height: 10rem;\n\toverflow: hidden;\n\ttransition: all ease-in-out 300ms;\n\n\t&:nth-of-type(5n + 1) {\n\t\t--bg-color-border: rgb(178, 108, 190);\n\t}\n\t&:nth-of-type(5n + 2) {\n\t\t--bg-color-border: rgb(79, 164, 61);\n\t}\n\t&:nth-of-type(5n + 3) {\n\t\t--bg-color-border: rgb(246, 170, 23);\n\t}\n\t&:nth-of-type(5n + 4) {\n\t\t--bg-color-border: rgb(218, 93, 83);\n\t}\n\t&:nth-of-type(5n + 5) {\n\t\t--bg-color-border: rgb(23, 162, 184);\n\t}\n\n\t&:hover,\n\t&:focus {\n\t\t/*--bg-size: 1rem;*/\n\t\t--bg-color-main: #f5f5f5;\n\n\t\tbox-shadow: 0 3px 18px rgba(0, 0, 0, 0.15), 0 3px 12px rgba(0, 0, 0, 0.25);\n\t\tcolor: #666;\n\t\ttext-decoration: none;\n\t\t/*transform: scale(1.03) translateY(-3px);*/\n\t}\n\n\t@media screen and (min-width: 48rem) {\n\t\tfont-size: 1.2rem;\n\t}\n}\n\n.ObColorCard-column {\n\tdisplay: flex;\n\tflex: 1 1 100%;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\tmargin: 1rem 0;\n\toverflow: hidden;\n\tpadding: 0.5rem 1.5rem 0.5rem 1rem;\n\ttext-overflow: ellipsis;\n\n\t&:first-child {\n\t\tmargin-left: 0.75rem;\n\t\tmargin-left: var(--bg-size);\n\t}\n\n\t&.ObColorCard-minor {\n\t\tborder-right: 1px solid #e3e3e3;\n\t\tflex: 0 0 4rem;\n\t\ttransition: margin ease-in-out 300ms;\n\t}\n\n\t@media screen and (min-width: 48rem) {\n\t\t&.ObColorCard-minor {\n\t\t\tflex: 0 0 8rem;\n\t\t}\n\t}\n}\n\n.ObColorCard-detailLabel {\n\tcolor: #ccc;\n\tfont-size: 0.8rem;\n\ttext-transform: uppercase;\n}\n\n.ObColorCard-detail {\n\t&:not(:last-child) {\n\t\tmargin-right: 1.5rem;\n\t}\n\n\t&.ObColorCard-primary,\n\t&.ObColorCard-primary .ObColorCard-detailValue {\n\t\tfont-size: 1.25rem;\n\t\tfont-weight: 300;\n\t}\n\n\t&.ObColorCard-primary .ObColorCard-detailValue {\n\t\tcolor: unset;\n\t}\n\n\t@media screen and (min-width: 48rem) {\n\t\tfont-size: 1rem;\n\t}\n}\n\n.ObColorCard-detailValue {\n\tcolor: #999;\n}\n\n.ObColorCard-label {\n\tposition: relative;\n\tpadding-left: 1.5rem;\n\t/* white-space: nowrap; */\n\n\t&:not(:last-child) {\n\t\tmargin-bottom: 1rem;\n\n\t\t&::after {\n\t\t\tcontent: \"\";\n\t\t\tposition: absolute;\n\t\t\twidth: 0.2rem;\n\t\t\theight: calc(100% + 1rem);\n\t\t\tborder-left: 0.2rem dotted #666;\n\t\t\tleft: 0.25rem;\n\t\t\ttop: 0.5rem;\n\t\t\tz-index: 0;\n\t\t}\n\t}\n\n\t&::before {\n\t\tbackground: white;\n\t\tborder: 0.2rem solid $brand-primary;\n\t\tborder: 0.2rem solid var(--bg-color-border);\n\t\tborder-radius: 50%;\n\t\tcontent: \"\";\n\t\tdisplay: block;\n\t\theight: 0.75rem;\n\t\tleft: 0;\n\t\tposition: absolute;\n\t\ttop: 0.3rem;\n\t\twidth: 0.75rem;\n\t\tz-index: 1;\n\t}\n}\n", "@import \"../styles/mixins\";\n\n$date-select-height: 3rem;\n\n.ObDateNavigator-icon {\n\tdisplay: inline-block;\n\n\tsvg {\n\t\twidth: 0.625em;\n\t\tposition: relative;\n\t\ttop: -1px;\n\t}\n}\n\n.ObDateNavigator-root {\n\tbackground-color: hsl(220, 20%, 96%);\n\tbackground-color: var(--block-header-color-bg);\n\tdisplay: flex;\n\tfont-size: 1rem;\n}\n\n.ObDateNavigator-arrow {\n\t@include btn-reset;\n\tdisplay: flex;\n\talign-items: center;\n\tflex: 0 0 $date-select-height;\n\tjustify-content: center;\n\n\theight: $date-select-height;\n\n\tcursor: pointer;\n\ttext-align: center;\n\n\t&:hover {\n\t\tbackground-color: #e3e3e3;\n\t\tbackground-color: var(--block-header-button-hover);\n\t}\n}\n\n.ObDateNavigator-arrowLeft {\n\tborder-right: 1px solid #dddddd;\n\torder: 1;\n}\n\n.ObDateNavigator-arrowRight {\n\tborder-left: 1px solid #dddddd;\n\torder: 3;\n}\n\n.ObDateNavigator-date {\n\tdisplay: flex;\n\tflex: 1 1 100%;\n\tflex-direction: column;\n\tjustify-content: center;\n\torder: 2;\n\n\theight: $date-select-height;\n\n\ttext-align: center;\n}\n", "@mixin btn-reset {\n\tbackground: none;\n\tborder: 0;\n\tcolor: inherit;\n\t/* cursor: default; */\n\tfont: inherit;\n\tline-height: normal;\n\toverflow: visible;\n\tpadding: 0;\n\t-webkit-appearance: button; /* for input */\n\t-webkit-user-select: none; /* for button */\n\t-moz-user-select: none;\n\t-ms-user-select: none;\n\n\t&::-moz-focus-inner {\n\t\tborder: 0;\n\t\tpadding: 0;\n\t}\n}\n", "@import \"../styles/variables\";\n\n$bullet-size: 0.7em;\n$line-width: 0.2em;\n\n.ObLinkedList-root {\n\tlist-style-type: none;\n\tmargin-left: 0;\n\tpadding-left: 0;\n}\n\n.ObLinkedList-item {\n\tdisplay: flex;\n\talign-items: center;\n\tflex-direction: row;\n}\n\n.ObLinkedList-leftColumn {\n\tflex: 1 1 4em;\n\tfont-size: 0.75em;\n\tpadding: 0 1em;\n\ttext-align: center;\n}\n\n.ObLinkedList-rightColumn {\n\tflex: 1 1 100%;\n\tpadding: 1em 1em 1em 1.5em;\n}\n\n.ObLinkedList-line {\n\tdisplay: flex;\n\talign-self: stretch;\n\tflex: 0 0 $line-width;\n\tbackground: white;\n\tposition: relative;\n}\n\n.ObLinkedList-bullet {\n\tbackground: white;\n\n\tborder: 1px solid rgba(50, 50, 50, 0.25);\n\tborder-radius: 0.55em;\n\theight: $bullet-size;\n\twidth: $bullet-size;\n\n\tposition: absolute;\n\tleft: 0;\n\ttop: 50%;\n\n\ttransform: translate(calc(-1 * ($bullet-size / 2) + ($line-width / 2)), -50%);\n}\n\n.ObLinkedList-card {\n\tbackground: white;\n\tborder: 1px solid;\n\tborder-color: $color-border-top $color-border-side $color-border-bottom;\n\tborder-radius: 0.1875em;\n\tcolor: inherit;\n\tcursor: pointer;\n\tflex: 100% 1 1;\n\tposition: relative;\n}\n\n.ObLinkedList-card::before {\n\tborder-bottom: 0.5em solid transparent;\n\tborder-right: 1em solid white;\n\tborder-top: 0.5em solid transparent;\n\tcontent: \" \";\n\tfilter: drop-shadow(-1px 0px 1px rgba(50, 50, 50, 0.2));\n\theight: 1em;\n\tleft: -1em;\n\tmargin-top: -0.5em;\n\tposition: absolute;\n\ttop: 50%;\n\twidth: 1em;\n}\n\n.ObLinkedList-card:hover {\n\tbackground-color: $block-color-bg-hover !important;\n\tcolor: inherit;\n\ttext-decoration: inherit;\n}\n\n.ObLinkedList-card:hover::before {\n\tborder-right-color: $block-color-bg-hover !important;\n}\n", "@import \"../styles/variables\";\n\n.ObPageBanner-root {\n\tbackground-color: $brand-primary;\n\tbackground-color: var(--brand-dark);\n\tbox-shadow: 0px 8px 8px rgba(0, 0, 0, 0.2);\n\tcolor: white;\n\n\ta {\n\t\tcolor: hsl(200, 50%, 80%);\n\t}\n}\n\n.ObPageBanner-inner {\n\tdisplay: flex;\n\talign-items: center;\n\tflex-direction: column;\n\n\t@media screen and (min-width: $screen-md) {\n\t\talign-items: flex-start;\n\t\tflex-direction: row;\n\t}\n}\n\n.ObPageBanner-plantTitle {\n\tfont-size: 2rem;\n\n\t@media screen and (min-width: $screen-lg) {\n\t\tfont-size: 3rem;\n\t}\n}\n\n.ObPageBanner-bannerImage {\n\talign-self: stretch;\n\tbackground-color: #ddd;\n\tdisplay: inline-block;\n\theight: 20vh;\n\tobject-fit: cover;\n\tobject-position: center center;\n\twidth: 100%;\n\n\t@media screen and (min-width: $screen-sm) {\n\t\talign-self: center;\n\t\tmargin: 0;\n\t\tmargin-right: 1rem;\n\t\tborder: 0.4rem solid white;\n\t\tborder-radius: 50%;\n\t\theight: 150px;\n\t\twidth: 150px;\n\t}\n\n\t@media screen and (min-width: $screen-lg) {\n\t\theight: 250px;\n\t\twidth: 250px;\n\t}\n}\n\n.ObPageBanner-bannerTitle {\n\tmargin-bottom: 1rem;\n\tmargin-top: 1rem;\n\tfont-size: 2rem;\n\n\t@media screen and (min-width: $screen-md) {\n\t\tmargin-top: 0;\n\t}\n\n\t@media screen and (min-width: $screen-lg) {\n\t\tfont-size: 3rem;\n\t}\n}\n\n.ObPageBanner-tabList {\n\t&.sticky {\n\t\tposition: -webkit-sticky;\n\t\tposition: sticky;\n\t\ttop: 0;\n\t\tz-index: 1000;\n\t}\n}\n\n.ObPageBanner-tabListInner {\n\toverflow-x: auto;\n\tscrollbar-width: thin;\n\twhite-space: nowrap;\n}\n\n.ObPageBanner-tab {\n\tborder-bottom: 0.25rem solid transparent;\n\tdisplay: inline-block;\n\tmargin-top: 0.5rem;\n\tmin-width: 8rem;\n\tpadding: 0.5rem 1rem;\n\ttext-align: center;\n\ttext-transform: capitalize;\n\n\t&.active {\n\t\tborder-color: white;\n\t}\n}\n", "$brand-primary: hsl(186, 72%, 24%);\n$brand-light: hsl(186, 72%, 37%);\n$brand-dark: hsl(186, 74%, 20%);\n$brand-tertiary: rgb(68, 69, 84);\n\n$link-color: $brand-primary;\n$link-color-hover: $brand-dark;\n\n$line-height: 1.4;\n\n$color-bg-hover: hsla(186, 72%, 37%, 0.6);\n$color-bg-active: hsla(95, 49%, 71%, 0.2);\n$color-fg-active: black;\n\n$color-border-top: #e5e6e9;\n$color-border-side: #dfe0e4;\n$color-border-bottom: #d0d1d5;\n\n$navbar-height: 40px;\n\n$screen-xs: 0;\n$screen-sm: 576px;\n$screen-md: 768px;\n$screen-lg: 992px;\n$screen-xl: 1200px;\n\n$block-header-color-bg: hsl(220, 20%, 96%);\n$block-header-color-bg-hover: hsl(220, 20%, 92%);\n$block-header-color-fg: hsl(0, 0%, 20%);\n$block-color-bg-alt: hsl(220, 20%, 98%);\n$block-color-bg-hover: hsl(220, 20%, 94%);\n$block-color-border: #e5e5e5;\n\n$block-header-button-hover: hsl(220, 20%, 92%);\n$block-header-button-border: hsl(220, 7%, 82%);\n$block-header-button-active: hsl(220, 20%, 86%);\n\n$sidebar-padding: 0.9375rem;\n$sidebar-width: 18rem;\n$sidebar-fg-color: hsl(0, 0%, 90%);\n$sidebar-bg-color: hsl(186, 74%, 13%);\n$sidebar-header-color: hsl(220, 6%, 70%);\n$sidebar-link-fg-color: white;\n$sidebar-link-fg-active: white;\n$sidebar-link-bg-color: transparent;\n$sidebar-link-bg-hover: hsla(0, 0%, 100%, 0.1);\n$sidebar-link-bg-active: hsl(142, 13%, 13%);\n\n$padding-xs: 0.75rem;\n$padding-sm: 0.9375rem;\n$padding-lg: 1.5rem;\n\n$grid-gutter-width: 30px;\n\n$container-tablet: (720px + $grid-gutter-width);\n$container-sm: $container-tablet;\n$container-desktop: (940px + $grid-gutter-width);\n$container-md: $container-desktop;\n$container-large-desktop: (1140px + $grid-gutter-width);\n$container-lg: $container-large-desktop;\n\n$toolbar-background: linear-gradient(#fefefe, #fafafa); //white;\n$toolbar-height: 3.125rem;\n$toolbar-border-color: #dedede;\n$toolbar-border-width: 1px;\n\n$toolbar-btn-color: hsla(0, 0%, 60%, 0.8);\n$toolbar-btn-hover-color: hsla(0, 0%, 40%, 0.8);\n$toolbar-btn-bg: transparent;\n$toolbar-btn-hover-bg: linear-gradient(hsl(0, 0%, 89%), hsl(0, 0%, 87%));\n", "@import \"../styles/variables\";\n\n.ObProgressBar-root {\n\theight: 1.5em;\n\twidth: 100%;\n\tappearance: none;\n\t-webkit-appearance: none;\n\tbackground-color: whiteSmoke;\n\tborder: none;\n\tborder-radius: 3px;\n\tbox-shadow: 0 2px 3px rgba(0, 0, 0, 0.2) inset;\n\tcolor: royalblue;\n\tposition: relative;\n\n\t&::-webkit-progress-bar {\n\t\tbackground-color: whiteSmoke;\n\t\tborder-radius: 3px;\n\t\tbox-shadow: 0 2px 3px rgba(0, 0, 0, 0.2) inset;\n\t}\n\n\t&::-webkit-progress-value {\n\t\tbackground-image: linear-gradient(\n\t\t\t\t135deg,\n\t\t\t\ttransparent,\n\t\t\t\ttransparent 33%,\n\t\t\t\trgba(0, 0, 0, 0.1) 33%,\n\t\t\t\trgba(0, 0, 0, 0.1) 66%,\n\t\t\t\ttransparent 66%\n\t\t\t),\n\t\t\tlinear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)),\n\t\t\tlinear-gradient(left, var(--brand-primary, $brand-primary), var(--brand-light, $brand-light));\n\t\tbackground-image: -webkit-linear-gradient(\n\t\t\t\t135deg,\n\t\t\t\ttransparent,\n\t\t\t\ttransparent 33%,\n\t\t\t\trgba(0, 0, 0, 0.1) 33%,\n\t\t\t\trgba(0, 0, 0, 0.1) 66%,\n\t\t\t\ttransparent 66%\n\t\t\t),\n\t\t\t-webkit-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)),\n\t\t\t-webkit-linear-gradient(left, var(--brand-primary), $brand-primary, var(--brand-light, $brand-light));\n\t\tbackground-size: 35px 20px, 100% 100%, 100% 100%;\n\t\tborder-radius: 3px;\n\t\tposition: relative;\n\t\ttransition: width 0.5s ease-out;\n\t}\n\n\t&::-webkit-progress-value:after {\n\t\tbackground-color: white;\n\t\tcontent: \"\";\n\n\t\tborder-radius: 100%;\n\t\theight: 5px;\n\n\t\tposition: absolute;\n\t\tright: 7px;\n\t\ttop: 7px;\n\t\twidth: 5px;\n\t}\n\n\t&::-moz-progress-bar {\n\t\tbackground-image: linear-gradient(\n\t\t\t\t135deg,\n\t\t\t\ttransparent,\n\t\t\t\ttransparent 33%,\n\t\t\t\trgba(0, 0, 0, 0.1) 33%,\n\t\t\t\trgba(0, 0, 0, 0.1) 66%,\n\t\t\t\ttransparent 66%\n\t\t\t),\n\t\t\tlinear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)),\n\t\t\tlinear-gradient(left, var(--brand-primary), var(--brand-light));\n\t\tbackground-image: -moz-linear-gradient(\n\t\t\t\t135deg,\n\t\t\t\ttransparent,\n\t\t\t\ttransparent 33%,\n\t\t\t\trgba(0, 0, 0, 0.1) 33%,\n\t\t\t\trgba(0, 0, 0, 0.1) 66%,\n\t\t\t\ttransparent 66%\n\t\t\t),\n\t\t\t-moz-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)),\n\t\t\t-moz-linear-gradient(left, var(--brand-primary), var(--brand-light));\n\t\tbackground-size: 35px 20px, 100% 100%, 100% 100%;\n\t\tborder-radius: 3px;\n\t\ttransition: width 0.5s ease-out;\n\t}\n}\n", ".ObSidebar-root {\n\tposition: fixed;\n\tbottom: 0;\n\tleft: 0;\n\ttop: 0;\n\tz-index: 2;\n\n\tbackground-color: white;\n\n\ttransform: translateX(-100%);\n\ttransition: transform 0.2s ease-out;\n\twill-change: transform;\n\n\t&.Ob-right {\n\t\tleft: unset;\n\t\tright: 0;\n\t\ttransform: translateX(100%);\n\t}\n\n\toverflow-y: auto;\n\n\t&.Ob-open {\n\t\ttransform: translateX(0);\n\t}\n\n\t&.ObSidebar-shadow {\n\t\tbox-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);\n\n\t\t&.Ob-right {\n\t\t\tbox-shadow: -2px 2px 4px rgba(0, 0, 0, 0.15);\n\t\t}\n\t}\n}\n\n.ObSidebar-overlay {\n\tposition: fixed;\n\tbottom: 0;\n\tleft: 0;\n\tright: 0;\n\ttop: 0;\n\tz-index: 1;\n\n\topacity: 0;\n\tvisibility: hidden;\n\n\ttransition: opacity 0.3s ease-out, visibility 0.3s ease-out;\n\tbackground-color: rgba(0, 0, 0, 0.3);\n\n\t&.Ob-open {\n\t\topacity: 1;\n\t\tvisibility: visible;\n\t}\n}\n", "$bullet-size: 0.5em;\n\n.ObSpinner-root {\n\tdisplay: inline-block;\n}\n\n.ObSpinner-fullPage {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\n\theight: 100vh;\n\twidth: 100vw;\n}\n\n.ObSpinner-spinner {\n\tdisplay: inline-block;\n\theight: $bullet-size * 1.5;\n\tposition: relative;\n\twidth: $bullet-size * 5;\n}\n\n.ObSpinner-bullet {\n\tanimation-timing-function: cubic-bezier(0, 1, 1, 0);\n\tbackground: #666;\n\tborder-radius: 50%;\n\theight: $bullet-size;\n\tposition: absolute;\n\ttop: 0.2rem;\n\twidth: $bullet-size;\n\n\t&:nth-child(1) {\n\t\tanimation: scaleAnimation 0.6s infinite ease-in-out;\n\t\tleft: $bullet-size * 0.5;\n\t}\n\n\t&:nth-child(2) {\n\t\tanimation: translateAnimation 0.6s infinite ease-in-out;\n\t\tleft: $bullet-size * 0.5;\n\t}\n\n\t&:nth-child(3) {\n\t\tanimation: translateAnimation 0.6s infinite ease-in-out;\n\t\tleft: $bullet-size * 2.4;\n\t}\n\n\t&:nth-child(4) {\n\t\tanimation: scaleAnimation 0.6s infinite ease-in-out reverse;\n\t\tleft: $bullet-size * 4;\n\t}\n}\n\n@keyframes scaleAnimation {\n\tfrom {\n\t\ttransform: scale(0);\n\t}\n\n\tto {\n\t\ttransform: scale(1);\n\t}\n}\n\n@keyframes translateAnimation {\n\tfrom {\n\t\ttransform: translate(0, 0);\n\t}\n\n\tto {\n\t\ttransform: translate($bullet-size * 1.65, 0);\n\t}\n}\n", "/**\nHacky solution to sass output for some reason getting a zero-width space at the beginning, which breaks the first selector\n*/\n.😖 {\n\tdisplay: initial;\n}\n\n.ObSplitContainer-root {\n\tdisplay: flex;\n\tflex-direction: column;\n\theight: 100%;\n\twidth: 100%;\n\n\t&.horizontal {\n\t\tflex-direction: row;\n\t}\n}\n\n.ObSplitContainer-panel {\n\toverflow: hidden;\n}\n\n.ObSplitContainer-divider {\n\tflex: 0 0 0.5rem;\n\tbackground-color: transparent;\n\tline-height: 0.75;\n\tcursor: ns-resize;\n\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\n\t&:focus {\n\t\tbackground-color: rgba(0, 0, 0, 0.3);\n\t}\n\n\t.ObSplitContainer-root.horizontal > & {\n\t\tcursor: ew-resize;\n\t\twriting-mode: vertical-lr;\n\t}\n}\n", "@import \"../styles/variables\";\n\n.ObValueToggle-root {\n\tdisplay: flex;\n\talign-items: center;\n}\n\n.ObValueToggle-option {\n\tmargin-bottom: 0;\n}\n\n.ObValueToggle-label {\n\tcursor: pointer;\n\tfont-size: 0.8em;\n\tmargin: 0 0.2em;\n\tpadding: 0.3em 0.5em;\n\ttext-transform: uppercase;\n\n\t&:hover {\n\t\tbackground: #ccc;\n\t}\n\n\t.ObValueToggle-input:checked + & {\n\t\t--color-bg: var(--brand-dark);\n\t\tbackground-color: #666;\n\t\tbackground-color: var(--color-bg);\n\t\tcursor: default;\n\t\tcolor: white;\n\t}\n\n\t.ObValueToggle-input:checked:focus-within + & {\n\t\t--color-bg: var(--brand-light);\n\t}\n\n\t.ObValueToggle-input:checked:hover + & {\n\t\tbackground-color: #666;\n\t\tbackground-color: var(--color-bg);\n\t}\n}\n\n.ObValueToggle-input {\n\tposition: absolute;\n\twidth: 1px;\n\theight: 1px;\n\tpadding: 0;\n\tmargin: -1px;\n\toverflow: hidden;\n\tclip: rect(0, 0, 0, 0);\n\tborder: 0;\n}\n"],
   "mappings": "iBAAA,iBACC,oBACA,oDACA,6DACA,wCAEA,qBACA,0BACA,gBAEA,8CACC,yBAGD,6BACC,oCACA,kCAIF,gBACC,kBAEA,2BACA,+BAEA,gBAEA,4CACA,0BACA,yBAEA,sBACC,iCAIF,kBACC,kBACA,gBACA,gBAEA,wBACC,aAIF,iBACC,WACA,qBACA,wCACA,SACA,UACA,oBACA,kBACA,QACA,+BACA,qBACA,wCAGD,kBACC,mBACA,qBACA,WACA,gBACA,kBACA,mBACA,UAEA,wBACC,aAIF,aACC,gBACA,YAGD,2DACC,gCAGD,2EACC,oCAGD,6EACC,wCACA,qBACA,UAGD,6CACC,mBAGD,sBAEE,mCAIA,qCAIA,qCAIA,oCAIA,+BClHF,kBACC,yBACA,uBACA,kBACA,2BAEA,oBACA,6GACA,iKARD,qBAgBC,oDACA,WACA,eACA,aACA,6LAEA,eACA,iBACA,gBACA,+BAEA,sCACC,sCAED,sCACC,oCAED,sCACC,qCAED,sCACC,oCAED,sCACC,qCAGD,gDAGC,yBAEA,qDACA,WACA,qBAID,qCAtDD,kBAuDE,kBAIF,oBACC,aACA,cACA,sBACA,8BA/DD,cAiEC,gBAjED,gCAmEC,uBAEA,gCACC,mBACA,2BAGD,sCACC,+BACA,cACA,kCAGD,qCACC,sCACC,eAKH,yBACC,WACA,gBACA,yBAIA,qCACC,oBAGD,yGAEC,kBACA,gBAGD,iEACC,YAGD,qCAfD,oBAgBE,gBAIF,yBACC,WAGD,mBACC,kBACA,oBAGA,oCACC,mBAEA,0CACC,WACA,kBACA,YACA,yBACA,8BACA,YACA,UACA,UAIF,0BACC,iBACA,uCACA,0CA5IF,kBA8IE,WACA,cACA,cACA,OACA,kBACA,UACA,aACA,UCnJF,sBACC,qBAEA,0BACC,aACA,kBACA,SAIF,sBACC,yBACA,8CACA,aACA,eAGD,uBCpBC,gBACA,SACA,cAEA,aACA,mBACA,iBDHD,UCKC,0BACA,yBACA,sBACA,qBDWA,aACA,mBACA,cACA,uBAEA,YAEA,eACA,kBCjBA,yCACC,SDXF,UA6BC,6BACC,yBACA,kDAIF,2BACC,+BACA,QAGD,4BACC,8BACA,QAGD,sBACC,aACA,cACA,sBACA,uBACA,QAEA,YAEA,kBErDD,mBACC,qBACA,cACA,eAGD,mBACC,aACA,mBACA,mBAGD,yBACC,aACA,gBAdD,cAgBC,kBAGD,0BACC,cApBD,0BAwBA,mBACC,aACA,mBACA,cACA,iBACA,kBAGD,qBACC,iBAEA,oCAnCD,oBAqCC,YACA,WAEA,kBACA,OACA,QAEA,iCAGD,mBACC,iBACA,iBACA,qCAlDD,sBAoDC,cACA,eACA,cACA,kBAGD,0BACC,qCACA,6BACA,kCACA,YACA,mDACA,WACA,UACA,iBACA,kBACA,QACA,UAGD,yBACC,mCACA,cACA,wBAGD,gCACC,qCClFD,mBACC,yBACA,mCACA,2BACA,WAEA,qBACC,cAIF,oBACC,aACA,mBACA,sBAEA,qCALD,oBAME,uBACA,oBAIF,yBACC,eAEA,qCAHD,yBAIE,gBAIF,0BACC,mBACA,sBACA,qBACA,YACA,iBACA,8BACA,WAEA,qCATD,0BAUE,kBAxCF,SA0CE,kBACA,yBA3CF,kBA6CE,aACA,aAGD,qCAnBD,0BAoBE,aACA,aAIF,0BACC,mBACA,gBACA,eAEA,qCALD,0BAME,cAGD,qCATD,0BAUE,gBAKD,6BACC,wBACA,gBACA,MACA,aAIF,2BACC,gBACA,qBACA,mBAGD,kBACC,uCACA,qBACA,iBACA,eAxFD,mBA0FC,kBACA,0BAEA,yBACC,kBE9FF,oBACC,aACA,WACA,gBACA,wBACA,yBACA,YAND,kBAQC,iCACA,cACA,kBAEA,0CACC,yBAbF,kBAeE,iCAGD,4CACC,iSAUA,sTAUA,8CAvCF,kBAyCE,kBACA,8BAGD,kDACC,sBACA,WA/CF,mBAkDE,WAEA,kBACA,UACA,QACA,UAGD,uCACC,mPAUA,kQAUA,8CA/EF,kBAiFE,8BCnFF,gBACC,eACA,SACA,OACA,MACA,UAEA,sBAEA,2BACA,kCACA,sBAQA,gBANA,yBACC,WACA,QACA,0BAKD,wBACC,uBAGD,iCACC,iCAEA,0CACC,kCAKH,mBACC,eAnCD,QAwCC,UAEA,UACA,kBAEA,wDACA,2BAEA,2BACC,UACA,mBChDF,gBACC,qBAGD,oBACC,aACA,mBACA,uBAEA,aACA,YAGD,mBACC,qBACA,aACA,kBACA,YAGD,kBACC,gDACA,gBAtBD,kBAwBC,YACA,kBACA,UACA,WAEA,+BACC,kDACA,WAGD,+BACC,sDACA,WAGD,+BACC,sDACA,WAGD,+BACC,0DACA,SAIF,6BAEE,sBAIA,oBAIF,iCAEE,0BAIA,6BCjEF,SACC,gBAGD,uBACC,aACA,sBACA,YACA,WAEA,kCACC,mBAIF,wBACC,gBAGD,0BACC,eACA,6BACA,gBACA,iBAEA,aACA,mBACA,uBAEA,gCACC,2BAGD,4DACC,iBACA,yBCpCF,oBACC,aACA,mBAGD,sBACC,gBAGD,qBACC,eACA,eAXD,gCAcC,yBAEA,2BACC,gBAGD,kDACC,8BACA,sBACA,iCACA,eACA,WAGD,+DACC,+BAGD,wDACC,sBACA,iCAIF,qBACC,kBACA,UACA,WAzCD,sBA4CC,gBACA,mBACA",
   "names": []
 }

package/dist/iife/ob.react.js

@@ -2242,16 +2242,7 @@ var ob;
   // src/Checkbox/index.tsx
   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"
-    }));
+    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 ?? "");
@@ -2284,28 +2275,19 @@ var ob;
         }
       }
     }
-    return /* @__PURE__ */ React.createElement("div", {
-      className: clsx_m_default("ObCheckbox-root", disabled && "Ob-disabled", 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: `#${inputId}`,
-      className: "ObCheckbox-label",
-      onKeyDown: handleKeyDown,
-      onClick: handleClick
-    }, /* @__PURE__ */ React.createElement("div", {
-      className: "ObCheckbox-box"
-    }, /* @__PURE__ */ React.createElement(Mark, {
-      className: "ObCheckbox-mark"
-    }))));
+    return /* @__PURE__ */ React.createElement("div", { className: clsx_m_default("ObCheckbox-root", disabled && "Ob-disabled", 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: `#${inputId}`, className: "ObCheckbox-label", onKeyDown: handleKeyDown, onClick: handleClick }, /* @__PURE__ */ React.createElement("div", { className: "ObCheckbox-box" }, /* @__PURE__ */ React.createElement(Mark, { className: "ObCheckbox-mark" }))));
   });
 
   // src/ColorCard/index.tsx
@@ -2317,11 +2299,7 @@ var ob;
     ...other
   }) {
     const BaseElement = Component ? Component : href ? "a" : "div";
-    return /* @__PURE__ */ React.createElement(BaseElement, {
-      className: clsx_m_default("ObColorCard-root", className),
-      href,
-      ...other
-    }, children);
+    return /* @__PURE__ */ React.createElement(BaseElement, { className: clsx_m_default("ObColorCard-root", className), href, ...other }, children);
   }
   function CardColumn({
     children,
@@ -2329,10 +2307,7 @@ var ob;
     minor,
     ...other
   }) {
-    return /* @__PURE__ */ React.createElement("div", {
-      className: clsx_m_default("ObColorCard-column", minor && "ObColorCard-minor", className),
-      ...other
-    }, children);
+    return /* @__PURE__ */ React.createElement("div", { className: clsx_m_default("ObColorCard-column", minor && "ObColorCard-minor", className), ...other }, children);
   }
   function CardDetail({
     children,
@@ -2341,20 +2316,10 @@ var ob;
     primary,
     ...other
   }) {
-    return /* @__PURE__ */ React.createElement("div", {
-      className: clsx_m_default("ObColorCard-detail", primary && "ObColorCard-primary", className),
-      ...other
-    }, label && /* @__PURE__ */ React.createElement("div", {
-      className: "ObColorCard-detailLabel"
-    }, label), /* @__PURE__ */ React.createElement("div", {
-      className: "ObColorCard-detailValue"
-    }, children));
+    return /* @__PURE__ */ React.createElement("div", { className: clsx_m_default("ObColorCard-detail", primary && "ObColorCard-primary", className), ...other }, label && /* @__PURE__ */ React.createElement("div", { className: "ObColorCard-detailLabel" }, label), /* @__PURE__ */ React.createElement("div", { className: "ObColorCard-detailValue" }, children));
   }
   function CardLabel({ children, className, ...other }) {
-    return /* @__PURE__ */ React.createElement("div", {
-      className: clsx_m_default("ObColorCard-label", className),
-      ...other
-    }, children);
+    return /* @__PURE__ */ React.createElement("div", { className: clsx_m_default("ObColorCard-label", className), ...other }, children);
   }
 
   // src/DateNavigator/index.tsx
@@ -2365,31 +2330,29 @@ var ob;
   }
   function Arrow(props) {
     const { direction, ...rest } = props;
-    return /* @__PURE__ */ React.createElement("button", {
-      className: clsx_m_default(
-        "ObDateNavigator-arrow",
-        direction === "left" ? "ObDateNavigator-arrowLeft" : "ObDateNavigator-arrowRight"
-      ),
-      ...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("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("path", {
-      fill: "currentColor",
-      d: "M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"
-    }))));
+    return /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        className: clsx_m_default(
+          "ObDateNavigator-arrow",
+          direction === "left" ? "ObDateNavigator-arrowLeft" : "ObDateNavigator-arrowRight"
+        ),
+        ...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(
+        "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(
+        "path",
+        {
+          fill: "currentColor",
+          d: "M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"
+        }
+      )))
+    );
   }
   var formatter = new Intl.DateTimeFormat(getUiCulture(), {
     weekday: "short",
@@ -2425,25 +2388,12 @@ var ob;
         setInternalDate(date2);
       }
     }
-    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 /* @__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)) }));
   }
 
   // src/LinkedCardList/index.tsx
   function List({ children, className, ...other }) {
-    return /* @__PURE__ */ React.createElement("ul", {
-      className: clsx_m_default("ObLinkedList-root", className),
-      ...other
-    }, children);
+    return /* @__PURE__ */ React.createElement("ul", { className: clsx_m_default("ObLinkedList-root", className), ...other }, children);
   }
   function ListItem({
     children,
@@ -2451,72 +2401,41 @@ var ob;
     label,
     ...other
   }) {
-    return /* @__PURE__ */ React.createElement("li", {
-      className: clsx_m_default("ObLinkedList-item", className),
-      ...other
-    }, label && /* @__PURE__ */ React.createElement("div", {
-      className: "ObLinkedList-leftColumn"
-    }, label), /* @__PURE__ */ React.createElement("div", {
-      className: "ObLinkedList-line"
-    }, /* @__PURE__ */ React.createElement("div", {
-      className: "ObLinkedList-bullet"
-    })), /* @__PURE__ */ React.createElement("div", {
-      className: "ObLinkedList-rightColumn"
-    }, children));
+    return /* @__PURE__ */ React.createElement("li", { className: clsx_m_default("ObLinkedList-item", className), ...other }, label && /* @__PURE__ */ React.createElement("div", { className: "ObLinkedList-leftColumn" }, label), /* @__PURE__ */ React.createElement("div", { className: "ObLinkedList-line" }, /* @__PURE__ */ React.createElement("div", { className: "ObLinkedList-bullet" })), /* @__PURE__ */ React.createElement("div", { className: "ObLinkedList-rightColumn" }, children));
   }
   function Card({ as, children, className, ...other }) {
     const Component = as || "div";
-    return /* @__PURE__ */ React.createElement(Component, {
-      className: clsx_m_default("ObLinkedList-card", className),
-      ...other
-    }, children);
+    return /* @__PURE__ */ React.createElement(Component, { className: clsx_m_default("ObLinkedList-card", className), ...other }, children);
   }
 
   // src/PageBanner/index.tsx
   var import_react3 = __toESM(require_react(), 1);
   function PageBanner({ as, className, children, ...other }) {
     const Component = as ? as : "section";
-    return /* @__PURE__ */ import_react3.default.createElement(Component, {
-      className: clsx_m_default("ObPageBanner-root", className),
-      ...other
-    }, /* @__PURE__ */ import_react3.default.createElement("div", {
-      className: "container px-0"
-    }, /* @__PURE__ */ import_react3.default.createElement("div", {
-      className: "ObPageBanner-pageBannerInner"
-    }, children)));
+    return /* @__PURE__ */ import_react3.default.createElement(Component, { className: clsx_m_default("ObPageBanner-root", className), ...other }, /* @__PURE__ */ import_react3.default.createElement("div", { className: "container px-0" }, /* @__PURE__ */ import_react3.default.createElement("div", { className: "ObPageBanner-pageBannerInner" }, children)));
   }
   var BannerImage = import_react3.default.forwardRef(function BannerImage2(props, ref) {
     const { className, ...other } = props;
-    return /* @__PURE__ */ import_react3.default.createElement("img", {
-      ref,
-      className: clsx_m_default("ObPageBanner-bannerImage", className),
-      ...other
-    });
+    return /* @__PURE__ */ import_react3.default.createElement("img", { ref, className: clsx_m_default("ObPageBanner-bannerImage", className), ...other });
   });
   function TabList({ as, className, children, sticky, ...other }) {
     const Component = as ? as : "nav";
-    return /* @__PURE__ */ import_react3.default.createElement(Component, {
-      className: clsx_m_default("ObPageBanner-pageBanner", "ObPageBanner-tabList", sticky && "sticky", className),
-      ...other
-    }, /* @__PURE__ */ import_react3.default.createElement("div", {
-      className: "container px-0"
-    }, /* @__PURE__ */ import_react3.default.createElement("div", {
-      className: "ObPageBanner-tabListInner"
-    }, children)));
+    return /* @__PURE__ */ import_react3.default.createElement(
+      Component,
+      {
+        className: clsx_m_default("ObPageBanner-pageBanner", "ObPageBanner-tabList", sticky && "sticky", className),
+        ...other
+      },
+      /* @__PURE__ */ import_react3.default.createElement("div", { className: "container px-0" }, /* @__PURE__ */ import_react3.default.createElement("div", { className: "ObPageBanner-tabListInner" }, children))
+    );
   }
   function Tab({ active, as, className, children, ...other }) {
     const Component = as ? as : "a";
-    return /* @__PURE__ */ import_react3.default.createElement(Component, {
-      className: clsx_m_default("ObPageBanner-tab", active && "active", className),
-      ...other
-    }, children);
+    return /* @__PURE__ */ import_react3.default.createElement(Component, { className: clsx_m_default("ObPageBanner-tab", active && "active", className), ...other }, children);
   }
   function Title({ as, className, children, ...other }) {
     const Component = as ? as : "h1";
-    return /* @__PURE__ */ import_react3.default.createElement(Component, {
-      className: clsx_m_default("ObPageBanner-bannerTitle", className),
-      ...other
-    }, children);
+    return /* @__PURE__ */ import_react3.default.createElement(Component, { className: clsx_m_default("ObPageBanner-bannerTitle", className), ...other }, children);
   }
 
   // src/Portal/index.tsx
@@ -2545,9 +2464,7 @@ var ob;
       }
     }, []);
     if (!portalNode.current) {
-      return /* @__PURE__ */ React.createElement("div", {
-        ref: mountNode
-      });
+      return /* @__PURE__ */ React.createElement("div", { ref: mountNode });
     } else {
       return (0, import_react_dom.createPortal)(children, portalNode.current);
     }
@@ -2556,11 +2473,7 @@ var ob;
   // src/ProgressBar/index.tsx
   var import_react5 = __toESM(require_react(), 1);
   var ProgressBar = (0, import_react5.forwardRef)(function ProgressBar2({ className, ...props }, ref) {
-    return /* @__PURE__ */ React.createElement("progress", {
-      className: clsx_m_default("ObProgressBar-root", className),
-      ...props,
-      ref
-    });
+    return /* @__PURE__ */ React.createElement("progress", { className: clsx_m_default("ObProgressBar-root", className), ...props, ref });
   });
 
   // src/Sidebar/index.tsx
@@ -2627,43 +2540,37 @@ var ob;
       };
     }, [open]);
     const { className: overlayClassName, ...overlayOther } = overlayProps;
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
-      className: clsx_m_default(
-        "ObSidebar-root",
-        open && "Ob-open",
-        pullRight && "Ob-right",
-        shadow && "ObSidebar-shadow",
-        className
-      ),
-      ref: sidebar,
-      tabIndex: -1,
-      ...other
-    }, (open || !hidden) && children), /* @__PURE__ */ React.createElement("div", {
-      role: "presentation",
-      tabIndex: -1,
-      className: clsx_m_default("ObSidebar-overlay", open && "Ob-open", overlayClassName),
-      onClick: closeSidebar,
-      ...overlayOther
-    }));
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: clsx_m_default(
+          "ObSidebar-root",
+          open && "Ob-open",
+          pullRight && "Ob-right",
+          shadow && "ObSidebar-shadow",
+          className
+        ),
+        ref: sidebar,
+        tabIndex: -1,
+        ...other
+      },
+      (open || !hidden) && children
+    ), /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        role: "presentation",
+        tabIndex: -1,
+        className: clsx_m_default("ObSidebar-overlay", open && "Ob-open", overlayClassName),
+        onClick: closeSidebar,
+        ...overlayOther
+      }
+    ));
   }
 
   // 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_m_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__ */ import_react7.default.createElement("div", { className: clsx_m_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" })));
   }
 
   // src/SplitContainer/index.tsx
@@ -2702,27 +2609,17 @@ var ob;
     )
   );
   var Divider = (0, import_react8.forwardRef)(function Divider2(props, ref) {
-    return /* @__PURE__ */ import_react8.default.createElement("div", {
-      tabIndex: 0,
-      className: clsx_m_default("ObSplitContainer-divider", props.className),
-      ref
-    }, /* @__PURE__ */ import_react8.default.createElement("span", null, "\u2022\u2022\u2022"));
+    return /* @__PURE__ */ import_react8.default.createElement("div", { tabIndex: 0, className: clsx_m_default("ObSplitContainer-divider", props.className), ref }, /* @__PURE__ */ import_react8.default.createElement("span", null, "\u2022\u2022\u2022"));
   });
   function SplitRoot({ className, direction, ...props }) {
-    return /* @__PURE__ */ import_react8.default.createElement("div", {
-      className: clsx_m_default(className, "ObSplitContainer-root", direction),
-      ...props
-    });
+    return /* @__PURE__ */ import_react8.default.createElement("div", { className: clsx_m_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_m_default(props.className, "ObSplitContainer-panel"),
-      style
-    }, props.children);
+    return /* @__PURE__ */ import_react8.default.createElement("div", { className: clsx_m_default(props.className, "ObSplitContainer-panel"), style }, props.children);
   }
   function SplitContainer({
     className,
@@ -2823,22 +2720,7 @@ var ob;
         };
       }
     }, [direction, fixedPanel]);
-    return /* @__PURE__ */ import_react8.default.createElement(SplitRoot, {
-      direction,
-      className
-    }, /* @__PURE__ */ import_react8.default.createElement(SplitPanel, {
-      className: 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: panelClassName,
-      fixed: fixedPanel === 2,
-      size: fixedSize
-    }, childrenArray[1]));
+    return /* @__PURE__ */ import_react8.default.createElement(SplitRoot, { direction, className }, /* @__PURE__ */ import_react8.default.createElement(SplitPanel, { className: 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: panelClassName, fixed: fixedPanel === 2, size: fixedSize }, childrenArray[1]));
   }
 
   // src/useTranslation/index.ts
@@ -2921,13 +2803,7 @@ var ob;
         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) => {
+    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 = {
@@ -2944,17 +2820,7 @@ var ob;
       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));
+      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);

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/Checkbox/index.scss", "../../src/ColorCard/index.scss", "../../src/DateNavigator/index.scss", "../../src/styles/_mixins.scss", "../../src/LinkedCardList/index.scss", "../../src/PageBanner/index.scss", "../../src/styles/_variables.scss", "../../src/ProgressBar/index.scss", "../../src/Sidebar/index.scss", "../../src/Spinner/index.scss", "../../src/SplitContainer/index.scss", "../../src/ValueToggle/index.scss"],
-  "sourcesContent": [null, null, null, null, null, null, null, null, null, null, null, null],
+  "sourcesContent": [".ObCheckbox-root {\n\t--check-width: 2rem;\n\t--bg-color: var(--brand-dark, rgba(42, 65, 50, 0.5));\n\t--bg-color-hover: var(--brand-primary, rgba(42, 65, 50, 0.8));\n\t--bg-color-selected: var(--brand-light);\n\n\tdisplay: inline-block;\n\theight: var(--check-width);\n\tmargin-bottom: 0;\n\n\t&:focus-within .ObCheckbox-box {\n\t\tborder: 0.1rem solid black;\n\t}\n\n\t&.Ob-disabled {\n\t\t--bg-color: rgba(150, 150, 150, 0.5);\n\t\t--bg-color-hover: var(--bg-color);\n\t}\n}\n\n.ObCheckbox-box {\n\tposition: relative;\n\n\tbackground: var(--bg-color);\n\ttransition: background 300ms ease;\n\n\toverflow: hidden;\n\n\tborder-radius: calc(var(--check-width) / 15);\n\theight: var(--check-width);\n\twidth: var(--check-width);\n\n\t&:hover {\n\t\tbackground: var(--bg-color-hover);\n\t}\n}\n\n.ObCheckbox-label {\n\tposition: relative;\n\tmargin-bottom: 0;\n\toverflow: hidden;\n\n\t&:focus {\n\t\toutline: none;\n\t}\n}\n\n.ObCheckbox-mark {\n\tcolor: #fff;\n\tdisplay: inline-block;\n\tfont-size: calc(var(--check-width) * 0.4);\n\tleft: 50%;\n\topacity: 0;\n\tpointer-events: none;\n\tposition: absolute;\n\ttop: 50%;\n\ttransition: all 300ms ease-in-out;\n\ttransition-delay: 0ms;\n\ttransform: translate(-50%, -50%) scale(6);\n}\n\n.ObCheckbox-input {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n\n\t&:focus {\n\t\toutline: none;\n\t}\n}\n\n.check_Label {\n\tmargin-bottom: 0;\n\tflex-grow: 1;\n}\n\n.ObCheckbox-input:checked:not(:disabled) + .ObCheckbox-label {\n\tanimation: animOn 800ms 1 forwards;\n}\n\n.ObCheckbox-input:checked:not(:disabled) + .ObCheckbox-label .ObCheckbox-box {\n\tbackground: var(--bg-color-selected);\n}\n\n.ObCheckbox-input:checked + .ObCheckbox-label .ObCheckbox-box .ObCheckbox-mark {\n\ttransform: translate(-50%, -50%) scale(1);\n\ttransition-delay: 200ms;\n\topacity: 1;\n}\n\n.ObCheckbox-root.Ob-disabled .ObCheckbox-box {\n\tcursor: not-allowed;\n}\n\n@keyframes animOn {\n\t40% {\n\t\ttransform: scaleY(0.4) scaleX(2);\n\t}\n\n\t50% {\n\t\ttransform: scaleY(1.2) scaleX(0.6);\n\t}\n\n\t60% {\n\t\ttransform: scaleY(0.8) scaleX(1.4);\n\t}\n\n\t70% {\n\t\ttransform: scaleY(1.1) scaleX(0.9);\n\t}\n\n\t100% {\n\t\ttransform: scaleY(1) scaleX(1);\n\t}\n}\n", "@import \"../styles/variables\";\n\n.ObColorCard-root {\n\t--bg-color-border: black;\n\t--bg-color-main: white;\n\t--bg-size: 0.75rem;\n\t--card-color: rgb(0, 0, 0);\n\n\talign-items: stretch;\n\tbackground-image: linear-gradient(to right, $brand-primary, $brand-primary 0.75rem, white 0.75rem, white);\n\tbackground-image: linear-gradient(\n\t\tto right,\n\t\tvar(--bg-color-border),\n\t\tvar(--bg-color-border) var(--bg-size),\n\t\tvar(--bg-color-main) var(--bg-size),\n\t\tvar(--bg-color-main)\n\t);\n\tborder-radius: 0.25rem;\n\tbox-shadow: 0 1px 12px rgba(0, 0, 0, 0.15), 0 1px 6px rgba(0, 0, 0, 0.25);\n\tcolor: #666;\n\tcursor: pointer;\n\tdisplay: flex;\n\tfont-family: \"Variable Bahnschrift\", \"Bahnschrift\", \"Open Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto,\n\t\t\"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n\tfont-size: 1rem;\n\tmin-height: 10rem;\n\toverflow: hidden;\n\ttransition: all ease-in-out 300ms;\n\n\t&:nth-of-type(5n + 1) {\n\t\t--bg-color-border: rgb(178, 108, 190);\n\t}\n\t&:nth-of-type(5n + 2) {\n\t\t--bg-color-border: rgb(79, 164, 61);\n\t}\n\t&:nth-of-type(5n + 3) {\n\t\t--bg-color-border: rgb(246, 170, 23);\n\t}\n\t&:nth-of-type(5n + 4) {\n\t\t--bg-color-border: rgb(218, 93, 83);\n\t}\n\t&:nth-of-type(5n + 5) {\n\t\t--bg-color-border: rgb(23, 162, 184);\n\t}\n\n\t&:hover,\n\t&:focus {\n\t\t/*--bg-size: 1rem;*/\n\t\t--bg-color-main: #f5f5f5;\n\n\t\tbox-shadow: 0 3px 18px rgba(0, 0, 0, 0.15), 0 3px 12px rgba(0, 0, 0, 0.25);\n\t\tcolor: #666;\n\t\ttext-decoration: none;\n\t\t/*transform: scale(1.03) translateY(-3px);*/\n\t}\n\n\t@media screen and (min-width: 48rem) {\n\t\tfont-size: 1.2rem;\n\t}\n}\n\n.ObColorCard-column {\n\tdisplay: flex;\n\tflex: 1 1 100%;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\tmargin: 1rem 0;\n\toverflow: hidden;\n\tpadding: 0.5rem 1.5rem 0.5rem 1rem;\n\ttext-overflow: ellipsis;\n\n\t&:first-child {\n\t\tmargin-left: 0.75rem;\n\t\tmargin-left: var(--bg-size);\n\t}\n\n\t&.ObColorCard-minor {\n\t\tborder-right: 1px solid #e3e3e3;\n\t\tflex: 0 0 4rem;\n\t\ttransition: margin ease-in-out 300ms;\n\t}\n\n\t@media screen and (min-width: 48rem) {\n\t\t&.ObColorCard-minor {\n\t\t\tflex: 0 0 8rem;\n\t\t}\n\t}\n}\n\n.ObColorCard-detailLabel {\n\tcolor: #ccc;\n\tfont-size: 0.8rem;\n\ttext-transform: uppercase;\n}\n\n.ObColorCard-detail {\n\t&:not(:last-child) {\n\t\tmargin-right: 1.5rem;\n\t}\n\n\t&.ObColorCard-primary,\n\t&.ObColorCard-primary .ObColorCard-detailValue {\n\t\tfont-size: 1.25rem;\n\t\tfont-weight: 300;\n\t}\n\n\t&.ObColorCard-primary .ObColorCard-detailValue {\n\t\tcolor: unset;\n\t}\n\n\t@media screen and (min-width: 48rem) {\n\t\tfont-size: 1rem;\n\t}\n}\n\n.ObColorCard-detailValue {\n\tcolor: #999;\n}\n\n.ObColorCard-label {\n\tposition: relative;\n\tpadding-left: 1.5rem;\n\t/* white-space: nowrap; */\n\n\t&:not(:last-child) {\n\t\tmargin-bottom: 1rem;\n\n\t\t&::after {\n\t\t\tcontent: \"\";\n\t\t\tposition: absolute;\n\t\t\twidth: 0.2rem;\n\t\t\theight: calc(100% + 1rem);\n\t\t\tborder-left: 0.2rem dotted #666;\n\t\t\tleft: 0.25rem;\n\t\t\ttop: 0.5rem;\n\t\t\tz-index: 0;\n\t\t}\n\t}\n\n\t&::before {\n\t\tbackground: white;\n\t\tborder: 0.2rem solid $brand-primary;\n\t\tborder: 0.2rem solid var(--bg-color-border);\n\t\tborder-radius: 50%;\n\t\tcontent: \"\";\n\t\tdisplay: block;\n\t\theight: 0.75rem;\n\t\tleft: 0;\n\t\tposition: absolute;\n\t\ttop: 0.3rem;\n\t\twidth: 0.75rem;\n\t\tz-index: 1;\n\t}\n}\n", "@import \"../styles/mixins\";\n\n$date-select-height: 3rem;\n\n.ObDateNavigator-icon {\n\tdisplay: inline-block;\n\n\tsvg {\n\t\twidth: 0.625em;\n\t\tposition: relative;\n\t\ttop: -1px;\n\t}\n}\n\n.ObDateNavigator-root {\n\tbackground-color: hsl(220, 20%, 96%);\n\tbackground-color: var(--block-header-color-bg);\n\tdisplay: flex;\n\tfont-size: 1rem;\n}\n\n.ObDateNavigator-arrow {\n\t@include btn-reset;\n\tdisplay: flex;\n\talign-items: center;\n\tflex: 0 0 $date-select-height;\n\tjustify-content: center;\n\n\theight: $date-select-height;\n\n\tcursor: pointer;\n\ttext-align: center;\n\n\t&:hover {\n\t\tbackground-color: #e3e3e3;\n\t\tbackground-color: var(--block-header-button-hover);\n\t}\n}\n\n.ObDateNavigator-arrowLeft {\n\tborder-right: 1px solid #dddddd;\n\torder: 1;\n}\n\n.ObDateNavigator-arrowRight {\n\tborder-left: 1px solid #dddddd;\n\torder: 3;\n}\n\n.ObDateNavigator-date {\n\tdisplay: flex;\n\tflex: 1 1 100%;\n\tflex-direction: column;\n\tjustify-content: center;\n\torder: 2;\n\n\theight: $date-select-height;\n\n\ttext-align: center;\n}\n", "@mixin btn-reset {\n\tbackground: none;\n\tborder: 0;\n\tcolor: inherit;\n\t/* cursor: default; */\n\tfont: inherit;\n\tline-height: normal;\n\toverflow: visible;\n\tpadding: 0;\n\t-webkit-appearance: button; /* for input */\n\t-webkit-user-select: none; /* for button */\n\t-moz-user-select: none;\n\t-ms-user-select: none;\n\n\t&::-moz-focus-inner {\n\t\tborder: 0;\n\t\tpadding: 0;\n\t}\n}\n", "@import \"../styles/variables\";\n\n$bullet-size: 0.7em;\n$line-width: 0.2em;\n\n.ObLinkedList-root {\n\tlist-style-type: none;\n\tmargin-left: 0;\n\tpadding-left: 0;\n}\n\n.ObLinkedList-item {\n\tdisplay: flex;\n\talign-items: center;\n\tflex-direction: row;\n}\n\n.ObLinkedList-leftColumn {\n\tflex: 1 1 4em;\n\tfont-size: 0.75em;\n\tpadding: 0 1em;\n\ttext-align: center;\n}\n\n.ObLinkedList-rightColumn {\n\tflex: 1 1 100%;\n\tpadding: 1em 1em 1em 1.5em;\n}\n\n.ObLinkedList-line {\n\tdisplay: flex;\n\talign-self: stretch;\n\tflex: 0 0 $line-width;\n\tbackground: white;\n\tposition: relative;\n}\n\n.ObLinkedList-bullet {\n\tbackground: white;\n\n\tborder: 1px solid rgba(50, 50, 50, 0.25);\n\tborder-radius: 0.55em;\n\theight: $bullet-size;\n\twidth: $bullet-size;\n\n\tposition: absolute;\n\tleft: 0;\n\ttop: 50%;\n\n\ttransform: translate(calc(-1 * ($bullet-size / 2) + ($line-width / 2)), -50%);\n}\n\n.ObLinkedList-card {\n\tbackground: white;\n\tborder: 1px solid;\n\tborder-color: $color-border-top $color-border-side $color-border-bottom;\n\tborder-radius: 0.1875em;\n\tcolor: inherit;\n\tcursor: pointer;\n\tflex: 100% 1 1;\n\tposition: relative;\n}\n\n.ObLinkedList-card::before {\n\tborder-bottom: 0.5em solid transparent;\n\tborder-right: 1em solid white;\n\tborder-top: 0.5em solid transparent;\n\tcontent: \" \";\n\tfilter: drop-shadow(-1px 0px 1px rgba(50, 50, 50, 0.2));\n\theight: 1em;\n\tleft: -1em;\n\tmargin-top: -0.5em;\n\tposition: absolute;\n\ttop: 50%;\n\twidth: 1em;\n}\n\n.ObLinkedList-card:hover {\n\tbackground-color: $block-color-bg-hover !important;\n\tcolor: inherit;\n\ttext-decoration: inherit;\n}\n\n.ObLinkedList-card:hover::before {\n\tborder-right-color: $block-color-bg-hover !important;\n}\n", "@import \"../styles/variables\";\n\n.ObPageBanner-root {\n\tbackground-color: $brand-primary;\n\tbackground-color: var(--brand-dark);\n\tbox-shadow: 0px 8px 8px rgba(0, 0, 0, 0.2);\n\tcolor: white;\n\n\ta {\n\t\tcolor: hsl(200, 50%, 80%);\n\t}\n}\n\n.ObPageBanner-inner {\n\tdisplay: flex;\n\talign-items: center;\n\tflex-direction: column;\n\n\t@media screen and (min-width: $screen-md) {\n\t\talign-items: flex-start;\n\t\tflex-direction: row;\n\t}\n}\n\n.ObPageBanner-plantTitle {\n\tfont-size: 2rem;\n\n\t@media screen and (min-width: $screen-lg) {\n\t\tfont-size: 3rem;\n\t}\n}\n\n.ObPageBanner-bannerImage {\n\talign-self: stretch;\n\tbackground-color: #ddd;\n\tdisplay: inline-block;\n\theight: 20vh;\n\tobject-fit: cover;\n\tobject-position: center center;\n\twidth: 100%;\n\n\t@media screen and (min-width: $screen-sm) {\n\t\talign-self: center;\n\t\tmargin: 0;\n\t\tmargin-right: 1rem;\n\t\tborder: 0.4rem solid white;\n\t\tborder-radius: 50%;\n\t\theight: 150px;\n\t\twidth: 150px;\n\t}\n\n\t@media screen and (min-width: $screen-lg) {\n\t\theight: 250px;\n\t\twidth: 250px;\n\t}\n}\n\n.ObPageBanner-bannerTitle {\n\tmargin-bottom: 1rem;\n\tmargin-top: 1rem;\n\tfont-size: 2rem;\n\n\t@media screen and (min-width: $screen-md) {\n\t\tmargin-top: 0;\n\t}\n\n\t@media screen and (min-width: $screen-lg) {\n\t\tfont-size: 3rem;\n\t}\n}\n\n.ObPageBanner-tabList {\n\t&.sticky {\n\t\tposition: -webkit-sticky;\n\t\tposition: sticky;\n\t\ttop: 0;\n\t\tz-index: 1000;\n\t}\n}\n\n.ObPageBanner-tabListInner {\n\toverflow-x: auto;\n\tscrollbar-width: thin;\n\twhite-space: nowrap;\n}\n\n.ObPageBanner-tab {\n\tborder-bottom: 0.25rem solid transparent;\n\tdisplay: inline-block;\n\tmargin-top: 0.5rem;\n\tmin-width: 8rem;\n\tpadding: 0.5rem 1rem;\n\ttext-align: center;\n\ttext-transform: capitalize;\n\n\t&.active {\n\t\tborder-color: white;\n\t}\n}\n", "$brand-primary: hsl(186, 72%, 24%);\n$brand-light: hsl(186, 72%, 37%);\n$brand-dark: hsl(186, 74%, 20%);\n$brand-tertiary: rgb(68, 69, 84);\n\n$link-color: $brand-primary;\n$link-color-hover: $brand-dark;\n\n$line-height: 1.4;\n\n$color-bg-hover: hsla(186, 72%, 37%, 0.6);\n$color-bg-active: hsla(95, 49%, 71%, 0.2);\n$color-fg-active: black;\n\n$color-border-top: #e5e6e9;\n$color-border-side: #dfe0e4;\n$color-border-bottom: #d0d1d5;\n\n$navbar-height: 40px;\n\n$screen-xs: 0;\n$screen-sm: 576px;\n$screen-md: 768px;\n$screen-lg: 992px;\n$screen-xl: 1200px;\n\n$block-header-color-bg: hsl(220, 20%, 96%);\n$block-header-color-bg-hover: hsl(220, 20%, 92%);\n$block-header-color-fg: hsl(0, 0%, 20%);\n$block-color-bg-alt: hsl(220, 20%, 98%);\n$block-color-bg-hover: hsl(220, 20%, 94%);\n$block-color-border: #e5e5e5;\n\n$block-header-button-hover: hsl(220, 20%, 92%);\n$block-header-button-border: hsl(220, 7%, 82%);\n$block-header-button-active: hsl(220, 20%, 86%);\n\n$sidebar-padding: 0.9375rem;\n$sidebar-width: 18rem;\n$sidebar-fg-color: hsl(0, 0%, 90%);\n$sidebar-bg-color: hsl(186, 74%, 13%);\n$sidebar-header-color: hsl(220, 6%, 70%);\n$sidebar-link-fg-color: white;\n$sidebar-link-fg-active: white;\n$sidebar-link-bg-color: transparent;\n$sidebar-link-bg-hover: hsla(0, 0%, 100%, 0.1);\n$sidebar-link-bg-active: hsl(142, 13%, 13%);\n\n$padding-xs: 0.75rem;\n$padding-sm: 0.9375rem;\n$padding-lg: 1.5rem;\n\n$grid-gutter-width: 30px;\n\n$container-tablet: (720px + $grid-gutter-width);\n$container-sm: $container-tablet;\n$container-desktop: (940px + $grid-gutter-width);\n$container-md: $container-desktop;\n$container-large-desktop: (1140px + $grid-gutter-width);\n$container-lg: $container-large-desktop;\n\n$toolbar-background: linear-gradient(#fefefe, #fafafa); //white;\n$toolbar-height: 3.125rem;\n$toolbar-border-color: #dedede;\n$toolbar-border-width: 1px;\n\n$toolbar-btn-color: hsla(0, 0%, 60%, 0.8);\n$toolbar-btn-hover-color: hsla(0, 0%, 40%, 0.8);\n$toolbar-btn-bg: transparent;\n$toolbar-btn-hover-bg: linear-gradient(hsl(0, 0%, 89%), hsl(0, 0%, 87%));\n", "@import \"../styles/variables\";\n\n.ObProgressBar-root {\n\theight: 1.5em;\n\twidth: 100%;\n\tappearance: none;\n\t-webkit-appearance: none;\n\tbackground-color: whiteSmoke;\n\tborder: none;\n\tborder-radius: 3px;\n\tbox-shadow: 0 2px 3px rgba(0, 0, 0, 0.2) inset;\n\tcolor: royalblue;\n\tposition: relative;\n\n\t&::-webkit-progress-bar {\n\t\tbackground-color: whiteSmoke;\n\t\tborder-radius: 3px;\n\t\tbox-shadow: 0 2px 3px rgba(0, 0, 0, 0.2) inset;\n\t}\n\n\t&::-webkit-progress-value {\n\t\tbackground-image: linear-gradient(\n\t\t\t\t135deg,\n\t\t\t\ttransparent,\n\t\t\t\ttransparent 33%,\n\t\t\t\trgba(0, 0, 0, 0.1) 33%,\n\t\t\t\trgba(0, 0, 0, 0.1) 66%,\n\t\t\t\ttransparent 66%\n\t\t\t),\n\t\t\tlinear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)),\n\t\t\tlinear-gradient(left, var(--brand-primary, $brand-primary), var(--brand-light, $brand-light));\n\t\tbackground-image: -webkit-linear-gradient(\n\t\t\t\t135deg,\n\t\t\t\ttransparent,\n\t\t\t\ttransparent 33%,\n\t\t\t\trgba(0, 0, 0, 0.1) 33%,\n\t\t\t\trgba(0, 0, 0, 0.1) 66%,\n\t\t\t\ttransparent 66%\n\t\t\t),\n\t\t\t-webkit-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)),\n\t\t\t-webkit-linear-gradient(left, var(--brand-primary), $brand-primary, var(--brand-light, $brand-light));\n\t\tbackground-size: 35px 20px, 100% 100%, 100% 100%;\n\t\tborder-radius: 3px;\n\t\tposition: relative;\n\t\ttransition: width 0.5s ease-out;\n\t}\n\n\t&::-webkit-progress-value:after {\n\t\tbackground-color: white;\n\t\tcontent: \"\";\n\n\t\tborder-radius: 100%;\n\t\theight: 5px;\n\n\t\tposition: absolute;\n\t\tright: 7px;\n\t\ttop: 7px;\n\t\twidth: 5px;\n\t}\n\n\t&::-moz-progress-bar {\n\t\tbackground-image: linear-gradient(\n\t\t\t\t135deg,\n\t\t\t\ttransparent,\n\t\t\t\ttransparent 33%,\n\t\t\t\trgba(0, 0, 0, 0.1) 33%,\n\t\t\t\trgba(0, 0, 0, 0.1) 66%,\n\t\t\t\ttransparent 66%\n\t\t\t),\n\t\t\tlinear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)),\n\t\t\tlinear-gradient(left, var(--brand-primary), var(--brand-light));\n\t\tbackground-image: -moz-linear-gradient(\n\t\t\t\t135deg,\n\t\t\t\ttransparent,\n\t\t\t\ttransparent 33%,\n\t\t\t\trgba(0, 0, 0, 0.1) 33%,\n\t\t\t\trgba(0, 0, 0, 0.1) 66%,\n\t\t\t\ttransparent 66%\n\t\t\t),\n\t\t\t-moz-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)),\n\t\t\t-moz-linear-gradient(left, var(--brand-primary), var(--brand-light));\n\t\tbackground-size: 35px 20px, 100% 100%, 100% 100%;\n\t\tborder-radius: 3px;\n\t\ttransition: width 0.5s ease-out;\n\t}\n}\n", ".ObSidebar-root {\n\tposition: fixed;\n\tbottom: 0;\n\tleft: 0;\n\ttop: 0;\n\tz-index: 2;\n\n\tbackground-color: white;\n\n\ttransform: translateX(-100%);\n\ttransition: transform 0.2s ease-out;\n\twill-change: transform;\n\n\t&.Ob-right {\n\t\tleft: unset;\n\t\tright: 0;\n\t\ttransform: translateX(100%);\n\t}\n\n\toverflow-y: auto;\n\n\t&.Ob-open {\n\t\ttransform: translateX(0);\n\t}\n\n\t&.ObSidebar-shadow {\n\t\tbox-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);\n\n\t\t&.Ob-right {\n\t\t\tbox-shadow: -2px 2px 4px rgba(0, 0, 0, 0.15);\n\t\t}\n\t}\n}\n\n.ObSidebar-overlay {\n\tposition: fixed;\n\tbottom: 0;\n\tleft: 0;\n\tright: 0;\n\ttop: 0;\n\tz-index: 1;\n\n\topacity: 0;\n\tvisibility: hidden;\n\n\ttransition: opacity 0.3s ease-out, visibility 0.3s ease-out;\n\tbackground-color: rgba(0, 0, 0, 0.3);\n\n\t&.Ob-open {\n\t\topacity: 1;\n\t\tvisibility: visible;\n\t}\n}\n", "$bullet-size: 0.5em;\n\n.ObSpinner-root {\n\tdisplay: inline-block;\n}\n\n.ObSpinner-fullPage {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\n\theight: 100vh;\n\twidth: 100vw;\n}\n\n.ObSpinner-spinner {\n\tdisplay: inline-block;\n\theight: $bullet-size * 1.5;\n\tposition: relative;\n\twidth: $bullet-size * 5;\n}\n\n.ObSpinner-bullet {\n\tanimation-timing-function: cubic-bezier(0, 1, 1, 0);\n\tbackground: #666;\n\tborder-radius: 50%;\n\theight: $bullet-size;\n\tposition: absolute;\n\ttop: 0.2rem;\n\twidth: $bullet-size;\n\n\t&:nth-child(1) {\n\t\tanimation: scaleAnimation 0.6s infinite ease-in-out;\n\t\tleft: $bullet-size * 0.5;\n\t}\n\n\t&:nth-child(2) {\n\t\tanimation: translateAnimation 0.6s infinite ease-in-out;\n\t\tleft: $bullet-size * 0.5;\n\t}\n\n\t&:nth-child(3) {\n\t\tanimation: translateAnimation 0.6s infinite ease-in-out;\n\t\tleft: $bullet-size * 2.4;\n\t}\n\n\t&:nth-child(4) {\n\t\tanimation: scaleAnimation 0.6s infinite ease-in-out reverse;\n\t\tleft: $bullet-size * 4;\n\t}\n}\n\n@keyframes scaleAnimation {\n\tfrom {\n\t\ttransform: scale(0);\n\t}\n\n\tto {\n\t\ttransform: scale(1);\n\t}\n}\n\n@keyframes translateAnimation {\n\tfrom {\n\t\ttransform: translate(0, 0);\n\t}\n\n\tto {\n\t\ttransform: translate($bullet-size * 1.65, 0);\n\t}\n}\n", "/**\nHacky solution to sass output for some reason getting a zero-width space at the beginning, which breaks the first selector\n*/\n.😖 {\n\tdisplay: initial;\n}\n\n.ObSplitContainer-root {\n\tdisplay: flex;\n\tflex-direction: column;\n\theight: 100%;\n\twidth: 100%;\n\n\t&.horizontal {\n\t\tflex-direction: row;\n\t}\n}\n\n.ObSplitContainer-panel {\n\toverflow: hidden;\n}\n\n.ObSplitContainer-divider {\n\tflex: 0 0 0.5rem;\n\tbackground-color: transparent;\n\tline-height: 0.75;\n\tcursor: ns-resize;\n\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\n\t&:focus {\n\t\tbackground-color: rgba(0, 0, 0, 0.3);\n\t}\n\n\t.ObSplitContainer-root.horizontal > & {\n\t\tcursor: ew-resize;\n\t\twriting-mode: vertical-lr;\n\t}\n}\n", "@import \"../styles/variables\";\n\n.ObValueToggle-root {\n\tdisplay: flex;\n\talign-items: center;\n}\n\n.ObValueToggle-option {\n\tmargin-bottom: 0;\n}\n\n.ObValueToggle-label {\n\tcursor: pointer;\n\tfont-size: 0.8em;\n\tmargin: 0 0.2em;\n\tpadding: 0.3em 0.5em;\n\ttext-transform: uppercase;\n\n\t&:hover {\n\t\tbackground: #ccc;\n\t}\n\n\t.ObValueToggle-input:checked + & {\n\t\t--color-bg: var(--brand-dark);\n\t\tbackground-color: #666;\n\t\tbackground-color: var(--color-bg);\n\t\tcursor: default;\n\t\tcolor: white;\n\t}\n\n\t.ObValueToggle-input:checked:focus-within + & {\n\t\t--color-bg: var(--brand-light);\n\t}\n\n\t.ObValueToggle-input:checked:hover + & {\n\t\tbackground-color: #666;\n\t\tbackground-color: var(--color-bg);\n\t}\n}\n\n.ObValueToggle-input {\n\tposition: absolute;\n\twidth: 1px;\n\theight: 1px;\n\tpadding: 0;\n\tmargin: -1px;\n\toverflow: hidden;\n\tclip: rect(0, 0, 0, 0);\n\tborder: 0;\n}\n"],
   "mappings": "iBAAA,iBACC,oBACA,oDACA,6DACA,wCAEA,qBACA,0BACA,gBAEA,8CACC,yBAGD,6BACC,oCACA,kCAIF,gBACC,kBAEA,2BACA,+BAEA,gBAEA,4CACA,0BACA,yBAEA,sBACC,iCAIF,kBACC,kBACA,gBACA,gBAEA,wBACC,aAIF,iBACC,WACA,qBACA,wCACA,SACA,UACA,oBACA,kBACA,QACA,+BACA,qBACA,wCAGD,kBACC,mBACA,qBACA,WACA,gBACA,kBACA,mBACA,UAEA,wBACC,aAIF,aACC,gBACA,YAGD,2DACC,gCAGD,2EACC,oCAGD,6EACC,wCACA,qBACA,UAGD,6CACC,mBAGD,sBAEE,mCAIA,qCAIA,qCAIA,oCAIA,+BClHF,kBACC,yBACA,uBACA,kBACA,2BAEA,oBACA,6GACA,iKARD,qBAgBC,oDACA,WACA,eACA,aACA,6LAEA,eACA,iBACA,gBACA,+BAEA,sCACC,sCAED,sCACC,oCAED,sCACC,qCAED,sCACC,oCAED,sCACC,qCAGD,gDAGC,yBAEA,qDACA,WACA,qBAID,qCAtDD,kBAuDE,kBAIF,oBACC,aACA,cACA,sBACA,8BA/DD,cAiEC,gBAjED,gCAmEC,uBAEA,gCACC,mBACA,2BAGD,sCACC,+BACA,cACA,kCAGD,qCACC,sCACC,eAKH,yBACC,WACA,gBACA,yBAIA,qCACC,oBAGD,yGAEC,kBACA,gBAGD,iEACC,YAGD,qCAfD,oBAgBE,gBAIF,yBACC,WAGD,mBACC,kBACA,oBAGA,oCACC,mBAEA,0CACC,WACA,kBACA,YACA,yBACA,8BACA,YACA,UACA,UAIF,0BACC,iBACA,uCACA,0CA5IF,kBA8IE,WACA,cACA,cACA,OACA,kBACA,UACA,aACA,UCnJF,sBACC,qBAEA,0BACC,aACA,kBACA,SAIF,sBACC,yBACA,8CACA,aACA,eAGD,uBCpBC,gBACA,SACA,cAEA,aACA,mBACA,iBDHD,UCKC,0BACA,yBACA,sBACA,qBDWA,aACA,mBACA,cACA,uBAEA,YAEA,eACA,kBCjBA,yCACC,SDXF,UA6BC,6BACC,yBACA,kDAIF,2BACC,+BACA,QAGD,4BACC,8BACA,QAGD,sBACC,aACA,cACA,sBACA,uBACA,QAEA,YAEA,kBErDD,mBACC,qBACA,cACA,eAGD,mBACC,aACA,mBACA,mBAGD,yBACC,aACA,gBAdD,cAgBC,kBAGD,0BACC,cApBD,0BAwBA,mBACC,aACA,mBACA,cACA,iBACA,kBAGD,qBACC,iBAEA,oCAnCD,oBAqCC,YACA,WAEA,kBACA,OACA,QAEA,iCAGD,mBACC,iBACA,iBACA,qCAlDD,sBAoDC,cACA,eACA,cACA,kBAGD,0BACC,qCACA,6BACA,kCACA,YACA,mDACA,WACA,UACA,iBACA,kBACA,QACA,UAGD,yBACC,mCACA,cACA,wBAGD,gCACC,qCClFD,mBACC,yBACA,mCACA,2BACA,WAEA,qBACC,cAIF,oBACC,aACA,mBACA,sBAEA,qCALD,oBAME,uBACA,oBAIF,yBACC,eAEA,qCAHD,yBAIE,gBAIF,0BACC,mBACA,sBACA,qBACA,YACA,iBACA,8BACA,WAEA,qCATD,0BAUE,kBAxCF,SA0CE,kBACA,yBA3CF,kBA6CE,aACA,aAGD,qCAnBD,0BAoBE,aACA,aAIF,0BACC,mBACA,gBACA,eAEA,qCALD,0BAME,cAGD,qCATD,0BAUE,gBAKD,6BACC,wBACA,gBACA,MACA,aAIF,2BACC,gBACA,qBACA,mBAGD,kBACC,uCACA,qBACA,iBACA,eAxFD,mBA0FC,kBACA,0BAEA,yBACC,kBE9FF,oBACC,aACA,WACA,gBACA,wBACA,yBACA,YAND,kBAQC,iCACA,cACA,kBAEA,0CACC,yBAbF,kBAeE,iCAGD,4CACC,iSAUA,sTAUA,8CAvCF,kBAyCE,kBACA,8BAGD,kDACC,sBACA,WA/CF,mBAkDE,WAEA,kBACA,UACA,QACA,UAGD,uCACC,mPAUA,kQAUA,8CA/EF,kBAiFE,8BCnFF,gBACC,eACA,SACA,OACA,MACA,UAEA,sBAEA,2BACA,kCACA,sBAQA,gBANA,yBACC,WACA,QACA,0BAKD,wBACC,uBAGD,iCACC,iCAEA,0CACC,kCAKH,mBACC,eAnCD,QAwCC,UAEA,UACA,kBAEA,wDACA,2BAEA,2BACC,UACA,mBChDF,gBACC,qBAGD,oBACC,aACA,mBACA,uBAEA,aACA,YAGD,mBACC,qBACA,aACA,kBACA,YAGD,kBACC,gDACA,gBAtBD,kBAwBC,YACA,kBACA,UACA,WAEA,+BACC,kDACA,WAGD,+BACC,sDACA,WAGD,+BACC,sDACA,WAGD,+BACC,0DACA,SAIF,6BAEE,sBAIA,oBAIF,iCAEE,0BAIA,6BCjEF,SACC,gBAGD,uBACC,aACA,sBACA,YACA,WAEA,kCACC,mBAIF,wBACC,gBAGD,0BACC,eACA,6BACA,gBACA,iBAEA,aACA,mBACA,uBAEA,gCACC,2BAGD,4DACC,iBACA,yBCpCF,oBACC,aACA,mBAGD,sBACC,gBAGD,qBACC,eACA,eAXD,gCAcC,yBAEA,2BACC,gBAGD,kDACC,8BACA,sBACA,iCACA,eACA,WAGD,+DACC,+BAGD,wDACC,sBACA,iCAIF,qBACC,kBACA,UACA,WAzCD,sBA4CC,gBACA,mBACA",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@olenbetong/synergi-react",
-	"version": "0.7.1",
+	"version": "0.7.3",
 	"description": "Standalone React component for SynergiWeb and Partner Portal",
 	"type": "module",
 	"types": "./es/index.d.ts",
@@ -68,7 +68,7 @@
 	},
 	"sideEffects": false,
 	"dependencies": {
-		"@olenbetong/appframe-core": "^2.5.1",
+		"@olenbetong/appframe-core": "^2.6.0",
 		"clsx": "^1.2.1",
 		"localforage": "^1.10.0",
 		"mitt": "^3.0.0"
@@ -87,5 +87,5 @@
 	"devDependencies": {
 		"replace-in-files": "^3.0.0"
 	},
-	"gitHead": "52a9c80246e86eda0ff22b749e90c0817bd94de8"
+	"gitHead": "49054954b937cf12215f72bda93dc2acd3c89846"
 }