@darajs/components 1.0.0-a.1 → 1.0.0

package/README.md

@@ -1,5 +1,37 @@
-***************************
-DARA-COMPONENTS
-***************************
+# Dara Components
 
+<picture>
+    <source srcset="https://github.com/causalens/dara/blob/master/img/dara_dark.svg?raw=true" media="(prefers-color-scheme: dark)">
+    <img src="https://github.com/causalens/dara/blob/master/img/dara_light.svg?raw=true" alt="Dara Logo">
+</picture>
+
+![Master tests](https://github.com/causalens/dara/actions/workflows/tests.yml/badge.svg?branch=master)
 [![License](https://img.shields.io/badge/License-Apache_2.0-blue.svg)](https://www.apache.org/licenses/LICENSE-2.0)
+[![PyPI](https://img.shields.io/pypi/v/dara-components.svg?color=dark-green)](https://pypi.org/project/dara-components/)
+[![PyPI - Python Version](https://img.shields.io/pypi/pyversions/dara-components.svg?color=dark-green)](https://pypi.org/project/dara-components/)
+[![NPM](https://img.shields.io/npm/v/@darajs/components.svg?color=dark-green)](https://www.npmjs.com/package/@darajs/components)
+
+### Build decision apps in Python
+
+_Tap into the power of causality by transforming data into interactive graphs and applications_
+
+Dara is a dynamic application framework designed for creating interactive web apps with ease, all in pure Python. Over the past two years, Dara has fueled the development of hundreds of apps, now widely used and appreciated by both our customers and our in-house teams!
+
+## Quickstart
+
+To install the package, run:
+
+```bash
+pip install dara-components
+```
+
+## Package contents
+
+This package contains the following modules:
+
+-   `dara_components.common` - common dashboarding components for building Dara apps
+-   `dara_components.graph` - components for displaying graphs
+-   `dara_components.plotting` - components for displaying plots with Bokeh, Plotly and Matplotlib or Seaborn
+-   `dara_components.smart` - smart components such as `DataSlicer`
+
+Check out our [Documentation](https://dara.causalens.com/docs/category/build-dara-apps) for more details.

package/dist/umd/dara.components.umd.js

@@ -190,18 +190,18 @@
    * This source code is licensed under the MIT license found in the
    * LICENSE file in the root directory of this source tree.
    */
-  var f$5 = React__default.default, k$5 = Symbol.for("react.element"), l$5 = Symbol.for("react.fragment"), m$5 = Object.prototype.hasOwnProperty, n$5 = f$5.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, p$6 = { key: true, ref: true, __self: true, __source: true };
+  var f$5 = React__default.default, k$5 = Symbol.for("react.element"), l$5 = Symbol.for("react.fragment"), m$4 = Object.prototype.hasOwnProperty, n$6 = f$5.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, p$6 = { key: true, ref: true, __self: true, __source: true };
   function q$4(c2, a2, g2) {
     var b2, d2 = {}, e3 = null, h2 = null;
     void 0 !== g2 && (e3 = "" + g2);
     void 0 !== a2.key && (e3 = "" + a2.key);
     void 0 !== a2.ref && (h2 = a2.ref);
     for (b2 in a2)
-      m$5.call(a2, b2) && !p$6.hasOwnProperty(b2) && (d2[b2] = a2[b2]);
+      m$4.call(a2, b2) && !p$6.hasOwnProperty(b2) && (d2[b2] = a2[b2]);
     if (c2 && c2.defaultProps)
       for (b2 in a2 = c2.defaultProps, a2)
         void 0 === d2[b2] && (d2[b2] = a2[b2]);
-    return { $$typeof: k$5, type: c2, key: e3, ref: h2, props: d2, _owner: n$5.current };
+    return { $$typeof: k$5, type: c2, key: e3, ref: h2, props: d2, _owner: n$6.current };
   }
   reactJsxRuntime_production_min.Fragment = l$5;
   reactJsxRuntime_production_min.jsx = q$4;
@@ -5252,10 +5252,10 @@
   }
   var _baseIsEqual = baseIsEqual$1;
   var baseIsEqual = _baseIsEqual;
-  function isEqual$3(value, other) {
+  function isEqual$4(value, other) {
     return baseIsEqual(value, other);
   }
-  var isEqual_1 = isEqual$3;
+  var isEqual_1 = isEqual$4;
   function useDeepCompare(value) {
     const ref = React.useRef();
     if (!isEqual_1(value, ref.current)) {
@@ -6395,7 +6395,7 @@
     var _a3;
     return jsxRuntime.exports.jsxs(Wrapper$c, { className: props.className, style: props.style, children: [jsxRuntime.exports.jsxs(Loader$1, { color: props.color, size: props.size, children: [jsxRuntime.exports.jsx("div", { className: "sk-chase-dot" }), jsxRuntime.exports.jsx("div", { className: "sk-chase-dot" }), jsxRuntime.exports.jsx("div", { className: "sk-chase-dot" }), jsxRuntime.exports.jsx("div", { className: "sk-chase-dot" }), jsxRuntime.exports.jsx("div", { className: "sk-chase-dot" }), jsxRuntime.exports.jsx("div", { className: "sk-chase-dot" })] }), (props.showText || props.text) && jsxRuntime.exports.jsx(LoadingText, { color: props.color, children: (_a3 = props.text) !== null && _a3 !== void 0 ? _a3 : "LOADING" })] });
   }
-  var __rest$a = globalThis && globalThis.__rest || function(s2, e3) {
+  var __rest$b = globalThis && globalThis.__rest || function(s2, e3) {
     var t2 = {};
     for (var p2 in s2)
       if (Object.prototype.hasOwnProperty.call(s2, p2) && e3.indexOf(p2) < 0)
@@ -6503,7 +6503,7 @@
     secondary: SecondaryButton$1
   };
   function Button$2(_a3, ref) {
-    var { autoFocus, children: children2, className, disabled: disabled2, download, href, loading, id: id2, onClick, outline = false, style: style2, styling = "primary", type = "button" } = _a3, props = __rest$a(_a3, ["autoFocus", "children", "className", "disabled", "download", "href", "loading", "id", "onClick", "outline", "style", "styling", "type"]);
+    var { autoFocus, children: children2, className, disabled: disabled2, download, href, loading, id: id2, onClick, outline = false, style: style2, styling = "primary", type = "button" } = _a3, props = __rest$b(_a3, ["autoFocus", "children", "className", "disabled", "download", "href", "loading", "id", "onClick", "outline", "style", "styling", "type"]);
     const currentTheme = useClTheme();
     const Component = stylingMap[styling];
     const content2 = loading ? jsxRuntime.exports.jsx(StyledLoading, { color: outline ? currentTheme.colors.grey2 : currentTheme.colors.blue1 }) : children2;
@@ -6962,7 +6962,7 @@
       return jsxRuntime.exports.jsx(CheckboxWrapper, { "aria-disabled": props.disabled, children: jsxRuntime.exports.jsx(Checkbox, { disabled: isSelectPermitted ? props.disabled : ((_a3 = checkedState.find((option) => option.value === item.value)) === null || _a3 === void 0 ? void 0 : _a3.state) === false, id: index2, isListStyle: props.isListStyle, label: item.label ? item.label : item.value, onChange: (checked, e3) => onChangeValue(e3), selected: (_b = checkedState.find((option) => option.value === item.value)) === null || _b === void 0 ? void 0 : _b.state }) }, `item-${index2}`);
     })] });
   }
-  var __rest$9 = globalThis && globalThis.__rest || function(s2, e3) {
+  var __rest$a = globalThis && globalThis.__rest || function(s2, e3) {
     var t2 = {};
     for (var p2 in s2)
       if (Object.prototype.hasOwnProperty.call(s2, p2) && e3.indexOf(p2) < 0)
@@ -7021,7 +7021,7 @@
     color: ${(props) => props.theme.colors.error};
 `;
   const Input$3 = React.forwardRef((_a3, ref) => {
-    var { type = "text" } = _a3, props = __rest$9(_a3, ["type"]);
+    var { type = "text" } = _a3, props = __rest$a(_a3, ["type"]);
     const onChange2 = (e3) => {
       const target = e3.target;
       if (props.onChange) {
@@ -7213,7 +7213,7 @@
    * This source code is licensed under the MIT license found in the
    * LICENSE file in the root directory of this source tree.
    */
-  var b$5 = 60103, c$6 = 60106, d$3 = 60107, e$3 = 60108, f$4 = 60114, g$4 = 60109, h$4 = 60110, k$4 = 60112, l$4 = 60113, m$4 = 60120, n$4 = 60115, p$4 = 60116, q$3 = 60121, r$3 = 60122, u$3 = 60117, v$4 = 60129, w$4 = 60131;
+  var b$5 = 60103, c$6 = 60106, d$3 = 60107, e$3 = 60108, f$4 = 60114, g$4 = 60109, h$4 = 60110, k$4 = 60112, l$4 = 60113, m$3 = 60120, n$5 = 60115, p$4 = 60116, q$3 = 60121, r$3 = 60122, u$3 = 60117, v$4 = 60129, w$4 = 60131;
   if ("function" === typeof Symbol && Symbol.for) {
     var x$4 = Symbol.for;
     b$5 = x$4("react.element");
@@ -7225,8 +7225,8 @@
     h$4 = x$4("react.context");
     k$4 = x$4("react.forward_ref");
     l$4 = x$4("react.suspense");
-    m$4 = x$4("react.suspense_list");
-    n$4 = x$4("react.memo");
+    m$3 = x$4("react.suspense_list");
+    n$5 = x$4("react.memo");
     p$4 = x$4("react.lazy");
     q$3 = x$4("react.block");
     r$3 = x$4("react.server.block");
@@ -7244,14 +7244,14 @@
             case f$4:
             case e$3:
             case l$4:
-            case m$4:
+            case m$3:
               return a2;
             default:
               switch (a2 = a2 && a2.$$typeof, a2) {
                 case h$4:
                 case k$4:
                 case p$4:
-                case n$4:
+                case n$5:
                 case g$4:
                   return a2;
                 default:
@@ -7263,12 +7263,12 @@
       }
     }
   }
-  var z$3 = g$4, A$2 = b$5, B$2 = k$4, C$3 = d$3, D$2 = p$4, E$2 = n$4, F$2 = c$6, G$2 = f$4, H$3 = e$3, I$2 = l$4;
+  var z$3 = g$4, A$2 = b$5, B$2 = k$4, C$2 = d$3, D$2 = p$4, E$2 = n$5, F$2 = c$6, G$2 = f$4, H$3 = e$3, I$2 = l$4;
   reactIs_production_min$1.ContextConsumer = h$4;
   reactIs_production_min$1.ContextProvider = z$3;
   reactIs_production_min$1.Element = A$2;
   reactIs_production_min$1.ForwardRef = B$2;
-  reactIs_production_min$1.Fragment = C$3;
+  reactIs_production_min$1.Fragment = C$2;
   reactIs_production_min$1.Lazy = D$2;
   reactIs_production_min$1.Memo = E$2;
   reactIs_production_min$1.Portal = F$2;
@@ -7300,7 +7300,7 @@
     return y$6(a2) === p$4;
   };
   reactIs_production_min$1.isMemo = function(a2) {
-    return y$6(a2) === n$4;
+    return y$6(a2) === n$5;
   };
   reactIs_production_min$1.isPortal = function(a2) {
     return y$6(a2) === c$6;
@@ -7315,7 +7315,7 @@
     return y$6(a2) === l$4;
   };
   reactIs_production_min$1.isValidElementType = function(a2) {
-    return "string" === typeof a2 || "function" === typeof a2 || a2 === d$3 || a2 === f$4 || a2 === v$4 || a2 === e$3 || a2 === l$4 || a2 === m$4 || a2 === w$4 || "object" === typeof a2 && null !== a2 && (a2.$$typeof === p$4 || a2.$$typeof === n$4 || a2.$$typeof === g$4 || a2.$$typeof === h$4 || a2.$$typeof === k$4 || a2.$$typeof === u$3 || a2.$$typeof === q$3 || a2[0] === r$3) ? true : false;
+    return "string" === typeof a2 || "function" === typeof a2 || a2 === d$3 || a2 === f$4 || a2 === v$4 || a2 === e$3 || a2 === l$4 || a2 === m$3 || a2 === w$4 || "object" === typeof a2 && null !== a2 && (a2.$$typeof === p$4 || a2.$$typeof === n$5 || a2.$$typeof === g$4 || a2.$$typeof === h$4 || a2.$$typeof === k$4 || a2.$$typeof === u$3 || a2.$$typeof === q$3 || a2[0] === r$3) ? true : false;
   };
   reactIs_production_min$1.typeOf = y$6;
   (function(module2) {
@@ -7323,7 +7323,7 @@
       module2.exports = reactIs_production_min$1;
     }
   })(reactIs$1);
-  let e$2 = (e3) => "object" == typeof e3 && null != e3 && 1 === e3.nodeType, t$4 = (e3, t2) => (!t2 || "hidden" !== e3) && ("visible" !== e3 && "clip" !== e3), n$3 = (e3, n2) => {
+  let e$2 = (e3) => "object" == typeof e3 && null != e3 && 1 === e3.nodeType, t$4 = (e3, t2) => (!t2 || "hidden" !== e3) && ("visible" !== e3 && "clip" !== e3), n$4 = (e3, n2) => {
     if (e3.clientHeight < e3.scrollHeight || e3.clientWidth < e3.scrollWidth) {
       let l2 = getComputedStyle(e3, null);
       return t$4(l2.overflowY, n2) || t$4(l2.overflowX, n2) || ((e4) => {
@@ -7357,7 +7357,7 @@
         H2.push(b2);
         break;
       }
-      null != b2 && b2 === document.body && n$3(b2) && !n$3(document.documentElement) || null != b2 && n$3(b2, p2) && H2.push(b2);
+      null != b2 && b2 === document.body && n$4(b2) && !n$4(document.documentElement) || null != b2 && n$4(b2, p2) && H2.push(b2);
     }
     let v2 = null != (d2 = null == (r2 = window.visualViewport) ? void 0 : r2.width) ? d2 : innerWidth, y2 = null != (f2 = null == (h2 = window.visualViewport) ? void 0 : h2.height) ? f2 : innerHeight, E2 = null != (u2 = window.scrollX) ? u2 : pageXOffset, M2 = null != (s2 = window.scrollY) ? s2 : pageYOffset, { height: x2, width: I2, top: C2, right: R2, bottom: T2, left: V2 } = t2.getBoundingClientRect(), k2 = "start" === c2 || "nearest" === c2 ? C2 : "end" === c2 ? T2 : C2 + x2 / 2, B2 = "center" === g2 ? V2 + I2 / 2 : "end" === g2 ? R2 : V2, D2 = [];
     for (let e3 = 0; e3 < H2.length; e3++) {
@@ -16544,7 +16544,7 @@
     var dateToCompare = toDate$1(dirtyDateToCompare);
     return date.getTime() < dateToCompare.getTime();
   }
-  function isEqual$2(dirtyLeftDate, dirtyRightDate) {
+  function isEqual$3(dirtyLeftDate, dirtyRightDate) {
     requiredArgs$1(2, arguments);
     var dateLeft = toDate$1(dirtyLeftDate);
     var dateRight = toDate$1(dirtyRightDate);
@@ -25516,7 +25516,7 @@
     date.setHours(23, 59, 59, 999);
     return date;
   }
-  function isEqual$1(dirtyLeftDate, dirtyRightDate) {
+  function isEqual$2(dirtyLeftDate, dirtyRightDate) {
     requiredArgs(2, arguments);
     var dateLeft = toDate(dirtyLeftDate);
     var dateRight = toDate(dirtyRightDate);
@@ -28716,7 +28716,7 @@
     return e3 && t2 ? isSameDay(e3, t2) : !e3 && !t2;
   }
   function je(e3, t2) {
-    return e3 && t2 ? isEqual$1(e3, t2) : !e3 && !t2;
+    return e3 && t2 ? isEqual$2(e3, t2) : !e3 && !t2;
   }
   function He(e3, t2, r2) {
     var n2, o2 = startOfDay(t2), a2 = endOfDay(r2);
@@ -30018,7 +30018,7 @@
     } }]), a2;
   }(), jt = "input", Ht = "navigate";
   const reactDatepicker = "";
-  var __rest$8 = globalThis && globalThis.__rest || function(s2, e3) {
+  var __rest$9 = globalThis && globalThis.__rest || function(s2, e3) {
     var t2 = {};
     for (var p2 in s2)
       if (Object.prototype.hasOwnProperty.call(s2, p2) && e3.indexOf(p2) < 0)
@@ -30205,7 +30205,7 @@
       (_a4 = props.dropdownRef) === null || _a4 === void 0 ? void 0 : _a4.call(props, value);
     };
     return jsxRuntime.exports.jsx(Tooltip$1, { content: props.errorMsg, disabled: !props.errorMsg, styling: "error", children: jsxRuntime.exports.jsxs(Wrapper$9, { className: props.className, isDisabled: props.disabled, isErrored: !!props.errorMsg, onClick: props.onClick, style: props.style, children: [jsxRuntime.exports.jsxs(SelectButtonPrimary, Object.assign({ disabled: props.disabled }, buttonProps, { ref: setButtonReference, type: "button", children: [jsxRuntime.exports.jsx(SelectedItem$1, { size: props.size, children: selectedItem ? selectedItem.label : "Select" }), jsxRuntime.exports.jsx(Chevron$2, { disabled: props.disabled, isOpen })] })), ReactDOM__default.default.createPortal(jsxRuntime.exports.jsx(DropdownList$2, Object.assign({}, menuProps, attributes2.popper, { className: `${(_a3 = menuProps === null || menuProps === void 0 ? void 0 : menuProps.className) !== null && _a3 !== void 0 ? _a3 : ""} ${(_c = (_b = attributes2 === null || attributes2 === void 0 ? void 0 : attributes2.popper) === null || _b === void 0 ? void 0 : _b.className) !== null && _c !== void 0 ? _c : ""} ${props.itemClass}`, displacement: props.displacement, isOpen, maxItems: 7, ref: setMenuReference, style: Object.assign(Object.assign({}, styles2.popper), { marginTop: `0.8rem`, width: "16.25rem", zIndex: 9999 }), children: props.items.map((item, index2) => {
-      const _a4 = getItemProps({ index: index2, item }), { itemClassName } = _a4, itemProps = __rest$8(_a4, ["itemClassName"]);
+      const _a4 = getItemProps({ index: index2, item }), { itemClassName } = _a4, itemProps = __rest$9(_a4, ["itemClassName"]);
       return React.createElement(DatepickerListItem, Object.assign({}, itemProps, { "aria-selected": selectedItem.label === item.label, className: `${itemClassName} ${props.itemClass}`, hovered: index2 === highlightedIndex, isSelected: selectedItem.label === item.label, key: `item-${index2}`, size: props.size, title: item.label }), item.label);
     }) })), document.body)] }) });
   }
@@ -31866,7 +31866,7 @@
     };
     return ReactDOM__default.default.createPortal(jsxRuntime.exports.jsx(Background$1, { id: props.id, onClick: props.onAttemptClose, onTransitionEnd, render: renderModal, children: jsxRuntime.exports.jsx(ModalWrapper, { className: `cl-modal-content ${(_a3 = props.className) !== null && _a3 !== void 0 ? _a3 : ""}`, onClick: stopPropagation, render: renderModal, style: props.style, children: props.children }) }), document.body);
   }
-  var __rest$7 = globalThis && globalThis.__rest || function(s2, e3) {
+  var __rest$8 = globalThis && globalThis.__rest || function(s2, e3) {
     var t2 = {};
     for (var p2 in s2)
       if (Object.prototype.hasOwnProperty.call(s2, p2) && e3.indexOf(p2) < 0)
@@ -32038,7 +32038,7 @@
 `;
   function MultiSelect(_a3) {
     var _b, _c;
-    var { maxWidth = "100%", maxRows = 3 } = _a3, props = __rest$7(_a3, ["maxWidth", "maxRows"]);
+    var { maxWidth = "100%", maxRows = 3 } = _a3, props = __rest$8(_a3, ["maxWidth", "maxRows"]);
     const referenceElement = React.useRef(null);
     const popperElement = React.useRef(null);
     const { styles: styles2, attributes: attributes2, update: update2 } = usePopper$1(referenceElement.current, popperElement.current, {
@@ -32108,7 +32108,7 @@
       return removeSelectedItem(selectedItem);
     } })] }), selectedItem.value)), jsxRuntime.exports.jsx(Input$1, Object.assign({}, getInputProps(getDropdownProps({ preventKeyAction: isOpen })), { disabled: props.disabled, onFocus: openMenu, placeholder: props.placeholder, size: props.size }))] }), jsxRuntime.exports.jsx(ChevronButton, Object.assign({}, getToggleButtonProps(), { children: jsxRuntime.exports.jsx(Chevron$2, { disabled: props.disabled, isOpen }) }))] }) }), ReactDOM__default.default.createPortal(jsxRuntime.exports.jsxs(DropdownList$1, Object.assign({}, menuProps, attributes2.popper, { isOpen, ref: setMenuReference, style: Object.assign(Object.assign({}, styles2.popper), { width: parseFloat((_c = styles2.popper) === null || _c === void 0 ? void 0 : _c.width), zIndex: 9999 }), children: [filteredItems.length > 0 && filteredItems.map((item, index2) => React.createElement(ListItem, Object.assign({}, getItemProps({ index: index2, item }), { hovered: index2 === highlightedIndex, key: `item-${index2}`, size: props.size, title: item.label }), item.label)), filteredItems.length === 0 && jsxRuntime.exports.jsx(NoItemsLabel, { children: "No Items" })] })), document.body)] });
   }
-  var __rest$6 = globalThis && globalThis.__rest || function(s2, e3) {
+  var __rest$7 = globalThis && globalThis.__rest || function(s2, e3) {
     var t2 = {};
     for (var p2 in s2)
       if (Object.prototype.hasOwnProperty.call(s2, p2) && e3.indexOf(p2) < 0)
@@ -32242,7 +32242,7 @@
       (_a4 = props.dropdownRef) === null || _a4 === void 0 ? void 0 : _a4.call(props, value);
     };
     return jsxRuntime.exports.jsx(Tooltip$1, { content: props.errorMsg, disabled: !props.errorMsg, styling: "error", children: jsxRuntime.exports.jsxs(Wrapper$6, { className: props.className, isDisabled: props.disabled, isErrored: !!props.errorMsg, isOpen, onClick: props.onClick, style: props.style, children: [jsxRuntime.exports.jsxs(SelectButton, Object.assign({ disabled: props.disabled, isOpen }, buttonProps, { ref: setButtonReference, type: "button", children: [jsxRuntime.exports.jsx(SelectedItem, { size: props.size, children: (_b = (_a3 = selectedItem === null ? props.placeholder : selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.label) !== null && _a3 !== void 0 ? _a3 : props.placeholder) !== null && _b !== void 0 ? _b : "Select" }), jsxRuntime.exports.jsx(Chevron$2, { disabled: props.disabled, isOpen })] })), ReactDOM__default.default.createPortal(jsxRuntime.exports.jsx(DropdownList, Object.assign({}, menuProps, attributes2.popper, { className: `${(_c = menuProps === null || menuProps === void 0 ? void 0 : menuProps.className) !== null && _c !== void 0 ? _c : ""} ${(_e2 = (_d = attributes2 === null || attributes2 === void 0 ? void 0 : attributes2.popper) === null || _d === void 0 ? void 0 : _d.className) !== null && _e2 !== void 0 ? _e2 : ""} ${props.itemClass}`, isOpen, maxItems: props.maxItems, ref: setMenuReference, style: Object.assign(Object.assign({}, styles2.popper), { width: props.applySameWidthModifier === false ? void 0 : parseFloat((_f = styles2.popper) === null || _f === void 0 ? void 0 : _f.width) + 2, zIndex: 9999 }), children: props.items.map((item, index2) => {
-      const _a4 = getItemProps({ index: index2, item }), { itemClassName } = _a4, itemProps = __rest$6(_a4, ["itemClassName"]);
+      const _a4 = getItemProps({ index: index2, item }), { itemClassName } = _a4, itemProps = __rest$7(_a4, ["itemClassName"]);
       return React.createElement(ListItem, Object.assign({}, itemProps, { className: `${itemClassName} ${props.itemClass}`, hovered: index2 === highlightedIndex, key: `item-${index2}`, size: props.size, title: item.label }), item.label);
     }) })), document.body)] }) });
   }
@@ -34736,6 +34736,55 @@
     swapOpacity: false
   };
   var convertCurry = convert$1.bind(null, React__default.default.createElement);
+  var safeIsNaN$1 = Number.isNaN || function ponyfill(value) {
+    return typeof value === "number" && value !== value;
+  };
+  function isEqual$1(first, second) {
+    if (first === second) {
+      return true;
+    }
+    if (safeIsNaN$1(first) && safeIsNaN$1(second)) {
+      return true;
+    }
+    return false;
+  }
+  function areInputsEqual$1(newInputs, lastInputs) {
+    if (newInputs.length !== lastInputs.length) {
+      return false;
+    }
+    for (var i2 = 0; i2 < newInputs.length; i2++) {
+      if (!isEqual$1(newInputs[i2], lastInputs[i2])) {
+        return false;
+      }
+    }
+    return true;
+  }
+  function memoizeOne$1(resultFn, isEqual2) {
+    if (isEqual2 === void 0) {
+      isEqual2 = areInputsEqual$1;
+    }
+    var cache2 = null;
+    function memoized() {
+      var newArgs = [];
+      for (var _i = 0; _i < arguments.length; _i++) {
+        newArgs[_i] = arguments[_i];
+      }
+      if (cache2 && cache2.lastThis === this && isEqual2(newArgs, cache2.lastArgs)) {
+        return cache2.lastResult;
+      }
+      var lastResult = resultFn.apply(this, newArgs);
+      cache2 = {
+        lastResult,
+        lastArgs: newArgs,
+        lastThis: this
+      };
+      return lastResult;
+    }
+    memoized.clear = function clear() {
+      cache2 = null;
+    };
+    return memoized;
+  }
   var reactTable = { exports: {} };
   var reactTable_production_min = { exports: {} };
   (function(module2, exports3) {
@@ -37381,6 +37430,24 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
       _ref7.itemSize;
     }
   });
+  function shallowDiffers(prev, next2) {
+    for (var attribute in prev) {
+      if (!(attribute in next2)) {
+        return true;
+      }
+    }
+    for (var _attribute in next2) {
+      if (prev[_attribute] !== next2[_attribute]) {
+        return true;
+      }
+    }
+    return false;
+  }
+  function areEqual(prevProps, nextProps) {
+    var prevStyle = prevProps.style, prevRest = _objectWithoutPropertiesLoose$5(prevProps, ["style"]);
+    var nextStyle = nextProps.style, nextRest = _objectWithoutPropertiesLoose$5(nextProps, ["style"]);
+    return !shallowDiffers(prevStyle, nextStyle) && !shallowDiffers(prevRest, nextRest);
+  }
   const GlobalStyle = styled.createGlobalStyle`
     body {
         .DatetimeFilterSelect {
@@ -37752,7 +37819,7 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
     }
     switch (operator2) {
       case DateOperator.EQ:
-        return isEqual$2(parsedValue, filterValue);
+        return isEqual$3(parsedValue, filterValue);
       case DateOperator.GT:
         return isAfter$1(parsedValue, filterValue);
       case DateOperator.LT:
@@ -37965,7 +38032,7 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
     }, [allColumns, allowColumnHiding]);
     return jsxRuntime.exports.jsxs(HeaderOptions, { ref: setOptionsElement, children: [jsxRuntime.exports.jsx(HeaderOptionsIcon, { icon: faEllipsisV, onClick: toggleOptions }), ReactDOM__default.default.createPortal(jsxRuntime.exports.jsx(OptionsDropdownList, Object.assign({}, attributes2.popper, { isOpen: showOptions, ref: setPopperElement, style: Object.assign(Object.assign(Object.assign({}, styles2.popper), { maxHeight: 800, minWidth: 150, zIndex: 9999 }), style2), children: jsxRuntime.exports.jsx(SectionedList, { items: allowColumnHiding ? [resetFunctions, columnToggles] : [resetFunctions], onSelect: onOptionSelect }) })), document.body)] });
   };
-  var __rest$5 = globalThis && globalThis.__rest || function(s2, e3) {
+  var __rest$6 = globalThis && globalThis.__rest || function(s2, e3) {
     var t2 = {};
     for (var p2 in s2)
       if (Object.prototype.hasOwnProperty.call(s2, p2) && e3.indexOf(p2) < 0)
@@ -37978,6 +38045,139 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
     return t2;
   };
   const ROW_HEIGHT = 40;
+  const shouldForwardProp = (prop) => !["isSorted", "onClickRow"].includes(prop);
+  const Row$1 = styled__default.default.div.withConfig({ shouldForwardProp })`
+    cursor: ${(props) => props.onClickRow ? "pointer" : "default"};
+    display: flex;
+
+    :hover {
+        div {
+            background-color: ${(props) => props.theme.colors.grey1};
+        }
+    }
+
+    :active,
+    focused {
+        div {
+            background-color: ${(props) => props.theme.colors.grey2};
+        }
+    }
+`;
+  const RowPlaceholder = styled__default.default(Row$1)`
+    position: absolute;
+    left: 0px;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+`;
+  const CellPlaceholder = styled__default.default.div`
+    min-width: 80px;
+    height: 0.7rem;
+    margin: 0.5rem;
+
+    background: ${(props) => `linear-gradient(to right, ${props.theme.colors.grey2}, ${curriedTransparentize$2(0.2, props.theme.colors.grey3)}, ${props.theme.colors.grey2});`};
+    background-size: 50%;
+    border-radius: 0.5rem;
+
+    animation-name: aniHorizontal;
+    animation-duration: 3.5s;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+
+    @keyframes aniHorizontal {
+        0% {
+            background-position: -100% 0;
+        }
+
+        100% {
+            background-position: 100% 0;
+        }
+    }
+`;
+  const Cell = styled__default.default.div`
+    display: flex !important;
+    align-items: center;
+
+    min-width: 80px;
+    height: 2.5rem;
+
+    color: ${(props) => props.theme.colors.grey6};
+
+    background-color: ${(props) => props.theme.colors.blue1};
+    border-bottom: 1px solid ${(props) => props.theme.colors.grey3};
+
+    :last-child {
+        border-right: 0;
+    }
+`;
+  const CellContent = styled__default.default.span`
+    overflow: hidden;
+
+    width: 100%;
+    padding: 0 1rem;
+
+    text-overflow: ellipsis;
+    white-space: nowrap;
+`;
+  const RenderRow = React__namespace.memo(({ data: { width, currentEditCell, headerGroups, rows, prepareRow, getItem, totalColumnsWidth, onClickRow, throttledClickRow, backgroundColor, mappedColumns }, index: index2, style: renderRowStyle }) => {
+    let row = rows[index2];
+    if (getItem) {
+      const value = getItem(index2);
+      if (!value) {
+        row = null;
+      } else {
+        row.original = value;
+        row.values = value;
+      }
+    }
+    if (!row) {
+      return jsxRuntime.exports.jsx("div", { children: headerGroups.map((headerGroup, gidx) => jsxRuntime.exports.jsx(RowPlaceholder, { style: {
+        height: ROW_HEIGHT,
+        top: (index2 + 1) * ROW_HEIGHT,
+        width: totalColumnsWidth > width ? totalColumnsWidth : "100%"
+      }, children: headerGroup === null || headerGroup === void 0 ? void 0 : headerGroup.headers.map((col, cidx) => {
+        const headerProps = col.getHeaderProps();
+        const headerWidth = headerProps.style.width === "NaNpx" ? mappedColumns[cidx].width : headerProps.style.width;
+        return jsxRuntime.exports.jsx(CellPlaceholder, { style: {
+          maxWidth: col.maxWidth,
+          width: headerWidth
+        } }, `col-${index2}-${cidx}`);
+      }) }, `row-${gidx}`)) });
+    }
+    prepareRow(row);
+    const onClick = () => {
+      if (onClickRow) {
+        throttledClickRow(row.original);
+      }
+    };
+    const _a3 = row.getRowProps({ style: renderRowStyle }), { style: rowStyle } = _a3, restRow = __rest$6(_a3, ["style"]);
+    return React.createElement(Row$1, Object.assign({}, restRow, { key: `row-${index2}`, onClick, onClickRow, style: Object.assign(Object.assign({}, rowStyle), { top: (index2 + 1) * ROW_HEIGHT, width: totalColumnsWidth > width ? totalColumnsWidth : "100%" }) }), row.cells.map((cell, colIdx) => {
+      var _a4;
+      const cellProps = cell.getCellProps();
+      return React.createElement(
+        Cell,
+        Object.assign({}, cellProps, { key: `cell-${index2}-${colIdx}`, style: Object.assign(Object.assign({}, cellProps.style), { backgroundColor, justifyContent: mappedColumns[colIdx].align, maxWidth: (_a4 = cell.column) === null || _a4 === void 0 ? void 0 : _a4.maxWidth, width: cellProps.style.width === "NaNpx" ? mappedColumns[colIdx].width : cellProps.style.width }) }),
+        jsxRuntime.exports.jsx(CellContent, { children: cell.render("Cell", {
+          colIdx,
+          currentEditCell,
+          rowIdx: index2
+        }) })
+      );
+    }));
+  }, areEqual);
+  var __rest$5 = globalThis && globalThis.__rest || function(s2, e3) {
+    var t2 = {};
+    for (var p2 in s2)
+      if (Object.prototype.hasOwnProperty.call(s2, p2) && e3.indexOf(p2) < 0)
+        t2[p2] = s2[p2];
+    if (s2 != null && typeof Object.getOwnPropertySymbols === "function")
+      for (var i2 = 0, p2 = Object.getOwnPropertySymbols(s2); i2 < p2.length; i2++) {
+        if (e3.indexOf(p2[i2]) < 0 && Object.prototype.propertyIsEnumerable.call(s2, p2[i2]))
+          t2[p2[i2]] = s2[p2[i2]];
+      }
+    return t2;
+  };
   const Wrapper$4 = styled__default.default.div`
     display: inline-block;
     width: 100%;
@@ -38088,86 +38288,11 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
     width: 10px;
     height: 100%;
 `;
-  const shouldForwardProp = (prop) => !["isSorted", "onClickRow"].includes(prop);
   const SortIcon = styled__default.default(FontAwesomeIcon).withConfig({ shouldForwardProp })`
     color: ${(props) => props.isSorted ? props.theme.colors.grey3 : props.theme.colors.blue3};
 `;
   const TooltipIcon = styled__default.default(FontAwesomeIcon)`
     color: ${(props) => props.theme.colors.grey4};
-`;
-  const Row$1 = styled__default.default.div.withConfig({ shouldForwardProp })`
-    cursor: ${(props) => props.onClickRow ? "pointer" : "default"};
-    display: flex;
-
-    :hover {
-        div {
-            background-color: ${(props) => props.theme.colors.grey1};
-        }
-    }
-
-    :active,
-    focused {
-        div {
-            background-color: ${(props) => props.theme.colors.grey2};
-        }
-    }
-`;
-  const RowPlaceholder = styled__default.default(Row$1)`
-    position: absolute;
-    left: 0px;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-`;
-  const CellPlaceholder = styled__default.default.div`
-    min-width: 80px;
-    height: 0.7rem;
-    margin: 0.5rem;
-
-    background: ${(props) => `linear-gradient(to right, ${props.theme.colors.grey2}, ${curriedTransparentize$2(0.2, props.theme.colors.grey3)}, ${props.theme.colors.grey2});`};
-    background-size: 50%;
-    border-radius: 0.5rem;
-
-    animation-name: aniHorizontal;
-    animation-duration: 3.5s;
-    animation-timing-function: linear;
-    animation-iteration-count: infinite;
-
-    @keyframes aniHorizontal {
-        0% {
-            background-position: -100% 0;
-        }
-
-        100% {
-            background-position: 100% 0;
-        }
-    }
-`;
-  const Cell = styled__default.default.div`
-    display: flex !important;
-    align-items: center;
-
-    min-width: 80px;
-    height: 2.5rem;
-
-    color: ${(props) => props.theme.colors.grey6};
-
-    background-color: ${(props) => props.theme.colors.blue1};
-    border-bottom: 1px solid ${(props) => props.theme.colors.grey3};
-
-    :last-child {
-        border-right: 0;
-    }
-`;
-  const CellContent = styled__default.default.span`
-    overflow: hidden;
-
-    width: 100%;
-    padding: 0 1rem;
-
-    text-overflow: ellipsis;
-    white-space: nowrap;
 `;
   const getSortIcon = (isSorted, isSortedDesc) => {
     if (!isSorted) {
@@ -38217,6 +38342,19 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
     EDIT_INPUT: EditInputCell,
     EDIT_SELECT: EditSelectCell
   };
+  const createItemData = memoizeOne$1((width, currentEditCell, headerGroups, rows, prepareRow, getItem, totalColumnsWidth, onClickRow, throttledClickRow, backgroundColor, mappedColumns) => ({
+    backgroundColor,
+    currentEditCell,
+    getItem,
+    headerGroups,
+    mappedColumns,
+    onClickRow,
+    prepareRow,
+    rows,
+    throttledClickRow,
+    totalColumnsWidth,
+    width
+  }));
   const Table$1 = React.forwardRef(({ allowHiding, backgroundColor, className, columns, data: data2, getItem, initialSort = [], itemCount, maxRows, onAction, onChange: onChange2, onClickRow, onItemsRendered, onFilter, onSort, showTableOptions, style: style2, tableOptionsStyle }, ref) => {
     const [currentSortBy, setCurrentSortBy] = React.useState(initialSort);
     React.useEffect(() => {
@@ -38307,57 +38445,11 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
         );
       }))) }), React.createElement("div", Object.assign({}, tableProps, rest, { key: "table-body-inner", style: tableStyle }), children2)] }, "table-inner");
     }, useDeepCompare([tableProps, totalColumnsWidth, headerGroups]));
-    const renderRow = React.useCallback(({ data: rowData, index: index2, style: renderRowStyle }) => {
-      let row = rows[index2];
-      if (getItem) {
-        const value = getItem(index2);
-        if (!value) {
-          row = null;
-        } else {
-          row.original = value;
-          row.values = value;
-        }
-      }
-      if (!row) {
-        return jsxRuntime.exports.jsx("div", { children: headerGroups.map((headerGroup, gidx) => jsxRuntime.exports.jsx(RowPlaceholder, { style: {
-          height: ROW_HEIGHT,
-          top: (index2 + 1) * ROW_HEIGHT,
-          width: totalColumnsWidth > rowData.width ? totalColumnsWidth : "100%"
-        }, children: headerGroup === null || headerGroup === void 0 ? void 0 : headerGroup.headers.map((col, cidx) => {
-          const headerProps = col.getHeaderProps();
-          const width = headerProps.style.width === "NaNpx" ? mappedColumns[cidx].width : headerProps.style.width;
-          return jsxRuntime.exports.jsx(CellPlaceholder, { style: {
-            maxWidth: col.maxWidth,
-            width
-          } }, `col-${index2}-${cidx}`);
-        }) }, `row-${gidx}`)) });
-      }
-      prepareRow(row);
-      const onClick = () => {
-        if (onClickRow) {
-          throttledClickRow(row.original);
-        }
-      };
-      const _a3 = row.getRowProps({ style: renderRowStyle }), { style: rowStyle } = _a3, restRow = __rest$5(_a3, ["style"]);
-      return React.createElement(Row$1, Object.assign({}, restRow, { key: `row-${index2}`, onClick, onClickRow, style: Object.assign(Object.assign({}, rowStyle), { top: (index2 + 1) * ROW_HEIGHT, width: totalColumnsWidth > rowData.width ? totalColumnsWidth : "100%" }) }), row.cells.map((cell, colIdx) => {
-        var _a4;
-        const cellProps = cell.getCellProps();
-        return React.createElement(
-          Cell,
-          Object.assign({}, cellProps, { key: `cell-${index2}-${colIdx}`, style: Object.assign(Object.assign({}, cellProps.style), { backgroundColor, justifyContent: mappedColumns[colIdx].align, maxWidth: (_a4 = cell.column) === null || _a4 === void 0 ? void 0 : _a4.maxWidth, width: cellProps.style.width === "NaNpx" ? mappedColumns[colIdx].width : cellProps.style.width }) }),
-          jsxRuntime.exports.jsx(CellContent, { children: cell.render("Cell", {
-            colIdx,
-            currentEditCell: rowData.currentEditCell,
-            rowIdx: index2
-          }) })
-        );
-      }));
-    }, useDeepCompare([currentEditCell, prepareRow, rows, getItem]));
     return jsxRuntime.exports.jsx(Wrapper$4, Object.assign({}, getTableProps(), { "$hasMaxRows": !!maxRows, className: `${className} ${hasFixedColumns ? "sticky" : ""}`, style: Object.assign({ height: maxRows ? (Math.min(rows.length, maxRows) + 1) * ROW_HEIGHT : "100%" }, style2), children: jsxRuntime.exports.jsx(AutoSizer, { children: ({ height, width }) => {
-      return jsxRuntime.exports.jsx(StyledFixedSizeList, { height, innerElementType: renderTable, itemCount: itemCount || rows.length, itemData: { currentEditCell, width }, itemSize: ROW_HEIGHT, onItemsRendered, style: {
+      return jsxRuntime.exports.jsx(StyledFixedSizeList, { height, innerElementType: renderTable, itemCount: itemCount || rows.length, itemData: createItemData(width, currentEditCell, headerGroups, rows, prepareRow, getItem, totalColumnsWidth, onClickRow, throttledClickRow, backgroundColor, mappedColumns), itemSize: ROW_HEIGHT, onItemsRendered, style: {
         overflowX: width < totalColumnsWidth ? "auto" : "hidden",
         overflowY: height < (rows.length + 1) * ROW_HEIGHT ? "auto" : "hidden"
-      }, width, children: renderRow }, "table-list");
+      }, width, children: RenderRow }, "table-list");
     } }) }));
   });
   Table$1.displayName = "Table";
@@ -50723,7 +50815,7 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
    * This source code is licensed under the MIT license found in the
    * LICENSE file in the root directory of this source tree.
    */
-  var b$4 = Symbol.for("react.element"), c$5 = Symbol.for("react.portal"), d$2 = Symbol.for("react.fragment"), e$1 = Symbol.for("react.strict_mode"), f$3 = Symbol.for("react.profiler"), g$3 = Symbol.for("react.provider"), h$3 = Symbol.for("react.context"), k$3 = Symbol.for("react.server_context"), l$2 = Symbol.for("react.forward_ref"), m$3 = Symbol.for("react.suspense"), n$2 = Symbol.for("react.suspense_list"), p$3 = Symbol.for("react.memo"), q$2 = Symbol.for("react.lazy"), t$3 = Symbol.for("react.offscreen"), u$2;
+  var b$4 = Symbol.for("react.element"), c$5 = Symbol.for("react.portal"), d$2 = Symbol.for("react.fragment"), e$1 = Symbol.for("react.strict_mode"), f$3 = Symbol.for("react.profiler"), g$3 = Symbol.for("react.provider"), h$3 = Symbol.for("react.context"), k$3 = Symbol.for("react.server_context"), l$2 = Symbol.for("react.forward_ref"), m$2 = Symbol.for("react.suspense"), n$3 = Symbol.for("react.suspense_list"), p$3 = Symbol.for("react.memo"), q$2 = Symbol.for("react.lazy"), t$3 = Symbol.for("react.offscreen"), u$2;
   u$2 = Symbol.for("react.module.reference");
   function v$3(a2) {
     if ("object" === typeof a2 && null !== a2) {
@@ -50734,8 +50826,8 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
             case d$2:
             case f$3:
             case e$1:
-            case m$3:
-            case n$2:
+            case m$2:
+            case n$3:
               return a2;
             default:
               switch (a2 = a2 && a2.$$typeof, a2) {
@@ -50765,8 +50857,8 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
   reactIs_production_min.Portal = c$5;
   reactIs_production_min.Profiler = f$3;
   reactIs_production_min.StrictMode = e$1;
-  reactIs_production_min.Suspense = m$3;
-  reactIs_production_min.SuspenseList = n$2;
+  reactIs_production_min.Suspense = m$2;
+  reactIs_production_min.SuspenseList = n$3;
   reactIs_production_min.isAsyncMode = function() {
     return false;
   };
@@ -50804,13 +50896,13 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
     return v$3(a2) === e$1;
   };
   reactIs_production_min.isSuspense = function(a2) {
-    return v$3(a2) === m$3;
+    return v$3(a2) === m$2;
   };
   reactIs_production_min.isSuspenseList = function(a2) {
-    return v$3(a2) === n$2;
+    return v$3(a2) === n$3;
   };
   reactIs_production_min.isValidElementType = function(a2) {
-    return "string" === typeof a2 || "function" === typeof a2 || a2 === d$2 || a2 === f$3 || a2 === e$1 || a2 === m$3 || a2 === n$2 || a2 === t$3 || "object" === typeof a2 && null !== a2 && (a2.$$typeof === q$2 || a2.$$typeof === p$3 || a2.$$typeof === g$3 || a2.$$typeof === h$3 || a2.$$typeof === l$2 || a2.$$typeof === u$2 || void 0 !== a2.getModuleId) ? true : false;
+    return "string" === typeof a2 || "function" === typeof a2 || a2 === d$2 || a2 === f$3 || a2 === e$1 || a2 === m$2 || a2 === n$3 || a2 === t$3 || "object" === typeof a2 && null !== a2 && (a2.$$typeof === q$2 || a2.$$typeof === p$3 || a2.$$typeof === g$3 || a2.$$typeof === h$3 || a2.$$typeof === l$2 || a2.$$typeof === u$2 || void 0 !== a2.getModuleId) ? true : false;
   };
   reactIs_production_min.typeOf = v$3;
   (function(module2) {
@@ -282981,9 +283073,6 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
     var t2 = tn[r2];
     return t2 || n$1(18, r2), t2;
   }
-  function m$2(n2, r2) {
-    tn[n2] || (tn[n2] = r2);
-  }
   function _$3() {
     return U$1;
   }
@@ -283099,141 +283188,7 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
     }
     return l$1(n2);
   }
-  function C$2() {
-    function r2(n2, r3) {
-      function t2() {
-        this.constructor = n2;
-      }
-      a2(n2, r3), n2.prototype = (t2.prototype = r3.prototype, new t2());
-    }
-    function e3(n2) {
-      n2.o || (n2.R = /* @__PURE__ */ new Map(), n2.o = new Map(n2.t));
-    }
-    function o2(n2) {
-      n2.o || (n2.o = /* @__PURE__ */ new Set(), n2.t.forEach(function(r3) {
-        if (t$2(r3)) {
-          var e4 = N$2(n2.A.h, r3, n2);
-          n2.p.set(r3, e4), n2.o.add(e4);
-        } else
-          n2.o.add(r3);
-      }));
-    }
-    function u2(r3) {
-      r3.g && n$1(3, JSON.stringify(p$2(r3)));
-    }
-    var a2 = function(n2, r3) {
-      return (a2 = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function(n3, r4) {
-        n3.__proto__ = r4;
-      } || function(n3, r4) {
-        for (var t2 in r4)
-          r4.hasOwnProperty(t2) && (n3[t2] = r4[t2]);
-      })(n2, r3);
-    }, f2 = function() {
-      function n2(n3, r3) {
-        return this[Q$1] = { i: 2, l: r3, A: r3 ? r3.A : _$3(), P: false, I: false, o: void 0, R: void 0, t: n3, k: this, C: false, g: false }, this;
-      }
-      r2(n2, Map);
-      var o3 = n2.prototype;
-      return Object.defineProperty(o3, "size", { get: function() {
-        return p$2(this[Q$1]).size;
-      } }), o3.has = function(n3) {
-        return p$2(this[Q$1]).has(n3);
-      }, o3.set = function(n3, r3) {
-        var t2 = this[Q$1];
-        return u2(t2), p$2(t2).has(n3) && p$2(t2).get(n3) === r3 || (e3(t2), k$2(t2), t2.R.set(n3, true), t2.o.set(n3, r3), t2.R.set(n3, true)), this;
-      }, o3.delete = function(n3) {
-        if (!this.has(n3))
-          return false;
-        var r3 = this[Q$1];
-        return u2(r3), e3(r3), k$2(r3), r3.t.has(n3) ? r3.R.set(n3, false) : r3.R.delete(n3), r3.o.delete(n3), true;
-      }, o3.clear = function() {
-        var n3 = this[Q$1];
-        u2(n3), p$2(n3).size && (e3(n3), k$2(n3), n3.R = /* @__PURE__ */ new Map(), i$4(n3.t, function(r3) {
-          n3.R.set(r3, false);
-        }), n3.o.clear());
-      }, o3.forEach = function(n3, r3) {
-        var t2 = this;
-        p$2(this[Q$1]).forEach(function(e4, i2) {
-          n3.call(r3, t2.get(i2), i2, t2);
-        });
-      }, o3.get = function(n3) {
-        var r3 = this[Q$1];
-        u2(r3);
-        var i2 = p$2(r3).get(n3);
-        if (r3.I || !t$2(i2))
-          return i2;
-        if (i2 !== r3.t.get(n3))
-          return i2;
-        var o4 = N$2(r3.A.h, i2, r3);
-        return e3(r3), r3.o.set(n3, o4), o4;
-      }, o3.keys = function() {
-        return p$2(this[Q$1]).keys();
-      }, o3.values = function() {
-        var n3, r3 = this, t2 = this.keys();
-        return (n3 = {})[V$1] = function() {
-          return r3.values();
-        }, n3.next = function() {
-          var n4 = t2.next();
-          return n4.done ? n4 : { done: false, value: r3.get(n4.value) };
-        }, n3;
-      }, o3.entries = function() {
-        var n3, r3 = this, t2 = this.keys();
-        return (n3 = {})[V$1] = function() {
-          return r3.entries();
-        }, n3.next = function() {
-          var n4 = t2.next();
-          if (n4.done)
-            return n4;
-          var e4 = r3.get(n4.value);
-          return { done: false, value: [n4.value, e4] };
-        }, n3;
-      }, o3[V$1] = function() {
-        return this.entries();
-      }, n2;
-    }(), c2 = function() {
-      function n2(n3, r3) {
-        return this[Q$1] = { i: 3, l: r3, A: r3 ? r3.A : _$3(), P: false, I: false, o: void 0, t: n3, k: this, p: /* @__PURE__ */ new Map(), g: false, C: false }, this;
-      }
-      r2(n2, Set);
-      var t2 = n2.prototype;
-      return Object.defineProperty(t2, "size", { get: function() {
-        return p$2(this[Q$1]).size;
-      } }), t2.has = function(n3) {
-        var r3 = this[Q$1];
-        return u2(r3), r3.o ? !!r3.o.has(n3) || !(!r3.p.has(n3) || !r3.o.has(r3.p.get(n3))) : r3.t.has(n3);
-      }, t2.add = function(n3) {
-        var r3 = this[Q$1];
-        return u2(r3), this.has(n3) || (o2(r3), k$2(r3), r3.o.add(n3)), this;
-      }, t2.delete = function(n3) {
-        if (!this.has(n3))
-          return false;
-        var r3 = this[Q$1];
-        return u2(r3), o2(r3), k$2(r3), r3.o.delete(n3) || !!r3.p.has(n3) && r3.o.delete(r3.p.get(n3));
-      }, t2.clear = function() {
-        var n3 = this[Q$1];
-        u2(n3), p$2(n3).size && (o2(n3), k$2(n3), n3.o.clear());
-      }, t2.values = function() {
-        var n3 = this[Q$1];
-        return u2(n3), o2(n3), n3.o.values();
-      }, t2.entries = function() {
-        var n3 = this[Q$1];
-        return u2(n3), o2(n3), n3.o.entries();
-      }, t2.keys = function() {
-        return this.values();
-      }, t2[V$1] = function() {
-        return this.values();
-      }, t2.forEach = function(n3, r3) {
-        for (var t3 = this.values(), e4 = t3.next(); !e4.done; )
-          n3.call(r3, e4.value, e4.value, this), e4 = t3.next();
-      }, n2;
-    }();
-    m$2("MapSet", { F: function(n2, r3) {
-      return new f2(n2, r3);
-    }, T: function(n2, r3) {
-      return new c2(n2, r3);
-    } });
-  }
-  var G$1, U$1, W$1 = "undefined" != typeof Symbol && "symbol" == typeof Symbol("x"), X$1 = "undefined" != typeof Map, q$1 = "undefined" != typeof Set, B$1 = "undefined" != typeof Proxy && void 0 !== Proxy.revocable && "undefined" != typeof Reflect, H$2 = W$1 ? Symbol.for("immer-nothing") : ((G$1 = {})["immer-nothing"] = true, G$1), L$1 = W$1 ? Symbol.for("immer-draftable") : "__$immer_draftable", Q$1 = W$1 ? Symbol.for("immer-state") : "__$immer_state", V$1 = "undefined" != typeof Symbol && Symbol.iterator || "@@iterator", Z$1 = "" + Object.prototype.constructor, nn = "undefined" != typeof Reflect && Reflect.ownKeys ? Reflect.ownKeys : void 0 !== Object.getOwnPropertySymbols ? function(n2) {
+  var G$1, U$1, W$1 = "undefined" != typeof Symbol && "symbol" == typeof Symbol("x"), X$1 = "undefined" != typeof Map, q$1 = "undefined" != typeof Set, B$1 = "undefined" != typeof Proxy && void 0 !== Proxy.revocable && "undefined" != typeof Reflect, H$2 = W$1 ? Symbol.for("immer-nothing") : ((G$1 = {})["immer-nothing"] = true, G$1), L$1 = W$1 ? Symbol.for("immer-draftable") : "__$immer_draftable", Q$1 = W$1 ? Symbol.for("immer-state") : "__$immer_state", Z$1 = "" + Object.prototype.constructor, nn = "undefined" != typeof Reflect && Reflect.ownKeys ? Reflect.ownKeys : void 0 !== Object.getOwnPropertySymbols ? function(n2) {
     return Object.getOwnPropertyNames(n2).concat(Object.getOwnPropertySymbols(n2));
   } : Object.getOwnPropertyNames, rn = Object.getOwnPropertyDescriptors || function(n2) {
     var r2 = {};
@@ -283382,6 +283337,7 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
   an.applyPatches.bind(an);
   an.createDraft.bind(an);
   an.finishDraft.bind(an);
+  const n$2 = fn$7;
   const ColumnSelect = styled__default.default(Select$1)`
     flex-basis: 15rem;
 `;
@@ -302071,159 +302027,6 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
   function noop$2() {
   }
   var noop_1 = noop$2;
-  function i$2(f2) {
-    var u2 = React.useState(function() {
-      return d$1("function" == typeof f2 ? f2() : f2, true);
-    }), i2 = u2[1];
-    return [u2[0], React.useCallback(function(t2) {
-      i2("function" == typeof t2 ? fn$7(t2) : d$1(t2));
-    }, [])];
-  }
-  var FeatureListAction;
-  (function(FeatureListAction2) {
-    FeatureListAction2["ADD_FD"] = "ADD_FD";
-    FeatureListAction2["ADD_OPERATION"] = "ADD_OPERATION";
-    FeatureListAction2["ADD_OPERATION_PROPERTY"] = "ADD_OPERATION_PROPERTY";
-    FeatureListAction2["DELETE_FD"] = "DELETE_FD";
-    FeatureListAction2["DELETE_OPERATION"] = "DELETE_OPERATION";
-    FeatureListAction2["DELETE_OPERATION_PROPERTY"] = "DELETE_OPERATION_PROPERTY";
-    FeatureListAction2["MOVE_OPERATION"] = "MOVE_OPERATION";
-    FeatureListAction2["UPDATE_FD_PROPERTY"] = "UPDATE_FD_PROPERTY";
-    FeatureListAction2["UPDATE_OPERATION_PROPERTY_KEY"] = "UPDATE_OPERATION_PROPERTY_KEY";
-    FeatureListAction2["UPDATE_OPERATION_PROPERTY_VALUE"] = "UPDATE_OPERATION_PROPERTY_VALUE";
-  })(FeatureListAction || (FeatureListAction = {}));
-  styled__default.default(Button$3)`
-    svg {
-        margin-right: 0.5rem;
-        color: ${(props) => props.theme.colors.background};
-    }
-`;
-  styled__default.default.div`
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-`;
-  styled__default.default.div`
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-`;
-  styled__default.default.div`
-    display: flex;
-    gap: 2rem;
-    align-items: center;
-
-    width: 100%;
-    margin-bottom: 1px;
-    padding: 1rem;
-
-    background-color: ${(props) => props.theme.colors.grey1};
-    border-radius: 0.25rem;
-`;
-  styled__default.default.div`
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-
-    padding: 1rem;
-
-    background-color: ${(props) => props.theme.colors.grey1};
-    border-radius: 0.25rem;
-`;
-  styled__default.default.div`
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    h3 {
-        font-size: ${(props) => props.theme.font.size};
-        font-weight: normal;
-    }
-`;
-  styled__default.default(ArrowUp)`
-    cursor: ${(props) => props.$disabled ? "not-allowed" : "pointer"};
-    color: ${(props) => props.$disabled ? props.theme.colors.grey3 : props.theme.colors.grey5};
-
-    :hover {
-        color: ${(props) => props.$disabled ? props.theme.colors.grey3 : props.theme.colors.grey6};
-    }
-`;
-  styled__default.default(ArrowDown)`
-    cursor: ${(props) => props.$disabled ? "not-allowed" : "pointer"};
-    color: ${(props) => props.$disabled ? props.theme.colors.grey3 : props.theme.colors.grey5};
-
-    :hover {
-        color: ${(props) => props.$disabled ? props.theme.colors.grey3 : props.theme.colors.grey6};
-    }
-`;
-  styled__default.default.div`
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
-    justify-content: center;
-
-    padding: 1rem;
-
-    background-color: ${(props) => props.theme.colors.blue1};
-    border-radius: 0.5rem;
-`;
-  styled__default.default.div`
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
-    justify-content: center;
-
-    width: 100%;
-`;
-  styled__default.default.div`
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    padding-bottom: 1rem;
-
-    border-bottom: 2px dashed ${(props) => props.theme.colors.grey3};
-`;
-  styled__default.default.div`
-    display: flex;
-    gap: 1rem;
-    align-items: center;
-`;
-  styled__default.default.div`
-    display: flex;
-    gap: 1rem;
-    align-items: center;
-    justify-content: space-between;
-`;
-  styled__default.default.div`
-    display: flex;
-    gap: 2rem;
-    align-items: center;
-`;
-  styled__default.default.div`
-    display: flex;
-    gap: 0.5rem;
-    align-items: center;
-
-    label {
-        flex: 0;
-        min-width: 50px;
-    }
-`;
-  styled__default.default.div`
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    width: 100%;
-    padding-right: 2rem;
-`;
-  styled__default.default.div`
-    display: flex;
-    flex-direction: column;
-    gap: 2rem;
-`;
-  C$2();
   function useConfirmationModal(getMessage, confirm) {
     const [render2, setRender] = React.useState(false);
     const [canceledItem, setCanceledItem] = React.useState();
@@ -308131,7 +307934,7 @@ Deprecated since v${version2}`);
     return { r: e(r2.r, 0, 255), g: e(r2.g, 0, 255), b: e(r2.b, 0, 255), a: e(r2.a) };
   }, o$2 = function(r2) {
     return { r: n(r2.r), g: n(r2.g), b: n(r2.b), a: n(r2.a, 3) };
-  }, i$1 = /^#([0-9a-f]{3,8})$/i, s = function(r2) {
+  }, i$2 = /^#([0-9a-f]{3,8})$/i, s = function(r2) {
     var t2 = r2.toString(16);
     return t2.length < 2 ? "0" + t2 : t2;
   }, h = function(r2) {
@@ -308153,7 +307956,7 @@ Deprecated since v${version2}`);
     return { h: (t2 = h(r2)).h, s: (u2 = (200 - (n2 = t2.s)) * (e3 = t2.v) / 100) > 0 && u2 < 200 ? n2 * e3 / 100 / (u2 <= 100 ? u2 : 200 - u2) * 100 : 0, l: u2 / 2, a: t2.a };
     var t2, n2, e3, u2;
   }, l = /^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s*,\s*([+-]?\d*\.?\d+)%\s*,\s*([+-]?\d*\.?\d+)%\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i, p$1 = /^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s+([+-]?\d*\.?\d+)%\s+([+-]?\d*\.?\d+)%\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i, v$1 = /^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i, m = /^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i, y$1 = { string: [[function(r2) {
-    var t2 = i$1.exec(r2);
+    var t2 = i$2.exec(r2);
     return t2 ? (r2 = t2[1]).length <= 4 ? { r: parseInt(r2[0] + r2[0], 16), g: parseInt(r2[1] + r2[1], 16), b: parseInt(r2[2] + r2[2], 16), a: 4 === r2.length ? n(parseInt(r2[3] + r2[3], 16) / 255, 2) : 1 } : 6 === r2.length || 8 === r2.length ? { r: parseInt(r2.substr(0, 2), 16), g: parseInt(r2.substr(2, 2), 16), b: parseInt(r2.substr(4, 2), 16), a: 8 === r2.length ? n(parseInt(r2.substr(6, 2), 16) / 255, 2) : 1 } : null : null;
   }, "hex"], [function(r2) {
     var t2 = v$1.exec(r2) || m.exec(r2);
@@ -365677,9 +365480,9 @@ ${e3}`);
   var sin = {};
   var cos = {};
   var ellipseStepSize = Math.PI / 40;
-  for (var i = 0 * Math.PI; i < 2 * Math.PI; i += ellipseStepSize) {
-    sin[i] = Math.sin(i);
-    cos[i] = Math.cos(i);
+  for (var i$1 = 0 * Math.PI; i$1 < 2 * Math.PI; i$1 += ellipseStepSize) {
+    sin[i$1] = Math.sin(i$1);
+    cos[i$1] = Math.cos(i$1);
   }
   CRp$3.drawEllipsePath = function(context2, centerX, centerY, width, height) {
     if (context2.beginPath) {
@@ -381117,6 +380920,14 @@ ${letters.join("\n")}`;
     }, [dragMode]);
     return { dragEnabled, dragMode, setDragMode };
   }
+  function i(f2) {
+    var u2 = React.useState(function() {
+      return d$1("function" == typeof f2 ? f2() : f2, true);
+    }), i2 = u2[1];
+    return [u2[0], React.useCallback(function(t2) {
+      i2("function" == typeof t2 ? n$2(t2) : d$1(t2));
+    }, [])];
+  }
   var __rest$1 = globalThis && globalThis.__rest || function(s2, e3) {
     var t2 = {};
     for (var p2 in s2)
@@ -381157,7 +380968,7 @@ ${letters.join("\n")}`;
     });
   }
   function useEdgeConstraintEncoder(initialConstraints, onUpdate) {
-    const [constraints, setConstraints] = i$2(() => initialConstraints ? parseConstraints$1(initialConstraints) : []);
+    const [constraints, setConstraints] = i(() => initialConstraints ? parseConstraints$1(initialConstraints) : []);
     useUpdateEffect(() => {
       onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(parseConstraintItems(constraints));
     }, [constraints]);
@@ -386203,7 +386014,7 @@ ${letters.join("\n")}`;
     border-bottom: ${(props) => `1px solid ${props.theme.colors.grey3}`};
 `;
   function NodeHierarchyBuilder$1(props) {
-    const [hierarchy2, setHierarchy] = i$2(parseNodes$1(props.nodes));
+    const [hierarchy2, setHierarchy] = i(parseNodes$1(props.nodes));
     const returnStrings = React.useMemo(() => props.nodes.every((l2) => l2.every((n2) => typeof n2 === "string")), [props.nodes]);
     const [searchInput, setSearchInput] = React.useState("");
     const [searchQuery, setSearchQuery2] = React.useState("");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@darajs/components",
-  "version": "1.0.0-a.1",
+  "version": "1.0.0",
   "description": "Components for the Dara framework",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -26,9 +26,9 @@
   "license": "Apache-2.0",
   "prettier": "@darajs/prettier-config",
   "devDependencies": {
-    "@darajs/eslint-config": "~1.0.0-a.1",
-    "@darajs/prettier-config": "~1.0.0-a.1",
-    "@darajs/stylelint-config": "~1.0.0-a.1",
+    "@darajs/eslint-config": "~1.0.0",
+    "@darajs/prettier-config": "~1.0.0",
+    "@darajs/stylelint-config": "~1.0.0",
     "@testing-library/react-hooks": "^3.4.2",
     "@types/lodash": "^4.14.155",
     "@types/react": "^18.2.6",
@@ -52,14 +52,14 @@
   "dependencies": {
     "@bokeh/bokehjs": "~3.1.1",
     "@codemirror/next": "^0.10.0",
-    "@darajs/core": "1.0.0-a.1",
-    "@darajs/styled-components": "~1.0.0-a.1",
-    "@darajs/ui-causal-graph-editor": "~1.0.0-a.1",
-    "@darajs/ui-code-editor": "~1.0.0-a.1",
-    "@darajs/ui-components": "~1.0.0-a.1",
-    "@darajs/ui-hierarchy-viewer": "~1.0.0-a.1",
-    "@darajs/ui-icons": "~1.0.0-a.1",
-    "@darajs/ui-utils": "~1.0.0-a.1",
+    "@darajs/core": "1.0.0",
+    "@darajs/styled-components": "~1.0.0",
+    "@darajs/ui-causal-graph-editor": "~1.0.0",
+    "@darajs/ui-code-editor": "~1.0.0",
+    "@darajs/ui-components": "~1.0.0",
+    "@darajs/ui-hierarchy-viewer": "~1.0.0",
+    "@darajs/ui-icons": "~1.0.0",
+    "@darajs/ui-utils": "~1.0.0",
     "@popperjs/core": "2.4.0",
     "date-fns": "2.9.0",
     "immer": "^9.0.6",
@@ -83,5 +83,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2c12f636a12b65182e918c37b5166e4ede8198cd"
+  "gitHead": "4524a653baad221d41c98e28aa75f7e951cf6a48"
 }