@bolio-ui/core 3.0.0-alpha.1 → 3.0.0-alpha.2

package/dist/{chunk-TKICX5R6.js → chunk-ZNDN2VPZ.js}

@@ -35,47 +35,136 @@ var _react = require('react'); var _react2 = _interopRequireDefault(_react);
 // core/Table/TableHead.tsx
 
 
+// core/Table/TableSelectBox.tsx
+
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Table/TableSelectBox.module.css.bolio-css-module-source
+var TableSelectBox_module_css_default = { "box": "TableSelectBox-module_box__UXj-E" };
+
+// core/Table/TableSelectBox.tsx
+var _jsxruntime = require('react/jsx-runtime');
+function TableSelectBox({
+  checked,
+  indeterminate = false,
+  label,
+  onChange
+}) {
+  const ref = _react.useRef.call(void 0, null);
+  _react.useEffect.call(void 0, () => {
+    if (ref.current) ref.current.indeterminate = indeterminate;
+  }, [indeterminate]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "input",
+    {
+      ref,
+      type: "checkbox",
+      className: TableSelectBox_module_css_default.box,
+      checked,
+      "aria-label": label,
+      onChange,
+      onClick: (event) => event.stopPropagation()
+    }
+  );
+}
+var TableSelectBox_default = TableSelectBox;
+
 // css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Table/TableHead.module.css.bolio-css-module-source
-var TableHead_module_css_default = { "thead": "TableHead-module_thead__zMtMt", "th": "TableHead-module_th__GzIce", "theadBox": "TableHead-module_theadBox__6QaBJ" };
+var TableHead_module_css_default = { "thead": "TableHead-module_thead__zMtMt", "th": "TableHead-module_th__GzIce", "theadBox": "TableHead-module_theadBox__6QaBJ", "selectCell": "TableHead-module_selectCell__JRdGg", "sortButton": "TableHead-module_sortButton__whwp3", "sortIcon": "TableHead-module_sortIcon__VsHqp", "sorted": "TableHead-module_sorted__-6XtK" };
 
 // core/Table/TableHead.tsx
-var _jsxruntime = require('react/jsx-runtime');
-var makeColgroup = (width, columns) => {
+
+var SELECT_WIDTH = 40;
+var makeColgroup = (fullWidth, columns, leading) => {
+  const width = fullWidth - leading;
   const unsetWidthCount = columns.filter((c) => !c.width).length;
   const customWidthTotal = columns.reduce((pre, current) => {
     return current.width ? pre + current.width : pre;
   }, 0);
   const averageWidth = (width - customWidthTotal) / unsetWidthCount;
   if (averageWidth <= 0) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "colgroup", {});
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "colgroup", { children: columns.map((column, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "col", { width: column.width || averageWidth }, `colgroup-${index}`)) });
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "colgroup", { children: [
+    leading > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "col", { width: leading }),
+    columns.map((column, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "col", { width: column.width || averageWidth }, `colgroup-${index}`))
+  ] });
 };
 var TableHead = (props) => {
   const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
-  const { columns, width } = props;
+  const { columns, width, sort, onSort, selection } = props;
   const isScalableWidth = _react.useMemo.call(void 0, 
     () => columns.find((item) => !!item.width),
     [columns]
   );
   const colgroup = _react.useMemo.call(void 0, () => {
     if (!isScalableWidth) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "colgroup", {});
-    return makeColgroup(width, columns);
-  }, [isScalableWidth, width, columns]);
+    return makeColgroup(width, columns, selection ? SELECT_WIDTH : 0);
+  }, [isScalableWidth, width, columns, selection]);
   const theadStyle = {
     "--table-head-text-color": theme.palette.accents_5,
     "--table-head-bg": theme.palette.accents_1,
     "--table-head-border-color": theme.palette.border,
-    "--table-head-radius": theme.layout.radius
+    "--table-head-radius": theme.layout.radius,
+    "--table-head-sorted-color": theme.palette.foreground,
+    "--table-head-focus-color": theme.palette.primary
   };
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
     colgroup,
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "thead", { className: TableHead_module_css_default.thead, style: theadStyle, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: columns.map((column, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      "th",
-      {
-        className: _chunk5KUROAEPjs.joinClasses.call(void 0, TableHead_module_css_default.th, column.className),
-        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: TableHead_module_css_default.theadBox, children: column.label })
-      },
-      `table-th-${String(column.prop)}-${index}`
-    )) }) })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "thead", { className: TableHead_module_css_default.thead, style: theadStyle, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "tr", { children: [
+      selection && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", { className: _chunk5KUROAEPjs.joinClasses.call(void 0, TableHead_module_css_default.th, TableHead_module_css_default.selectCell), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: TableHead_module_css_default.theadBox, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        TableSelectBox_default,
+        {
+          checked: selection.checked,
+          indeterminate: selection.indeterminate,
+          label: selection.label,
+          onChange: selection.onToggle
+        }
+      ) }) }),
+      columns.map((column, index) => {
+        const prop = String(column.prop);
+        const direction = sort && sort.prop === prop ? sort.direction : null;
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "th",
+          {
+            className: _chunk5KUROAEPjs.joinClasses.call(void 0, TableHead_module_css_default.th, column.className),
+            "aria-sort": column.sortable ? direction === "asc" ? "ascending" : direction === "desc" ? "descending" : "none" : void 0,
+            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: TableHead_module_css_default.theadBox, children: column.sortable ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+              "button",
+              {
+                type: "button",
+                className: TableHead_module_css_default.sortButton,
+                onClick: () => onSort && onSort(prop),
+                children: [
+                  column.label,
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                    "svg",
+                    {
+                      viewBox: "0 0 24 24",
+                      width: "1em",
+                      height: "1em",
+                      fill: "none",
+                      stroke: "currentColor",
+                      strokeWidth: "2",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      className: _chunk5KUROAEPjs.joinClasses.call(void 0, TableHead_module_css_default.sortIcon, {
+                        [TableHead_module_css_default.sorted]: direction !== null
+                      }),
+                      "aria-hidden": "true",
+                      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                        "path",
+                        {
+                          d: direction === "asc" ? "M12 19V5M5 12l7-7 7 7" : direction === "desc" ? "M12 5v14M19 12l-7 7-7-7" : "M8 9l4-4 4 4M8 15l4 4 4-4"
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            ) : column.label })
+          },
+          `table-th-${prop}-${index}`
+        );
+      })
+    ] }) })
   ] });
 };
 TableHead.displayName = "BolioUITableHead";
@@ -122,12 +211,14 @@ var TableContext = _react2.default.createContext(defaultContext);
 var useTableContext = () => _react2.default.useContext(TableContext);
 
 // css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Table/TableBody.module.css.bolio-css-module-source
-var TableBody_module_css_default = { "tr": "TableBody-module_tr__lTn-M", "hover": "TableBody-module_hover__AjVlq" };
+var TableBody_module_css_default = { "tr": "TableBody-module_tr__lTn-M", "hover": "TableBody-module_hover__AjVlq", "selected": "TableBody-module_selected__7adtQ", "selectCell": "TableBody-module_selectCell__S8ZZn" };
 
 // core/Table/TableBody.tsx
 
 var TableBody = ({
   data,
+  keys,
+  selection,
   hover,
   emptyText,
   onRow,
@@ -142,30 +233,42 @@ var TableBody = ({
   const trStyle = {
     "--table-body-hover-bg": theme.palette.accents_1,
     "--table-body-border-color": theme.palette.border,
-    "--table-body-text-color": theme.palette.accents_6
+    "--table-body-text-color": theme.palette.accents_6,
+    "--table-body-selected-bg": `color-mix(in srgb, ${theme.palette.primary} 10%, transparent)`
   };
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tbody", { children: data.map((row, index) => {
     const className = rowClassName(row, index);
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    const selected = Boolean(selection == null ? void 0 : selection.keys.includes(keys[index]));
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       "tr",
       {
         className: _chunk5KUROAEPjs.joinClasses.call(void 0, 
           TableBody_module_css_default.tr,
-          { [TableBody_module_css_default.hover]: hover },
+          { [TableBody_module_css_default.hover]: hover, [TableBody_module_css_default.selected]: selected },
           className
         ),
         onClick: () => rowClickHandler(row, index),
         style: trStyle,
-        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          TableCell_default,
-          {
-            columns,
-            row,
-            rowIndex: index,
-            emptyText,
-            onCellClick: onCell
-          }
-        )
+        children: [
+          selection && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { className: TableBody_module_css_default.selectCell, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "cell", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            TableSelectBox_default,
+            {
+              checked: selected,
+              label: selection.label,
+              onChange: () => selection.onToggle(keys[index])
+            }
+          ) }) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            TableCell_default,
+            {
+              columns,
+              row,
+              rowIndex: index,
+              emptyText,
+              onCellClick: onCell
+            }
+          )
+        ]
       },
       `tbody-row-${index}`
     );
@@ -185,6 +288,8 @@ var TableColumn = (columnProps) => {
     label,
     width,
     className = "",
+    sortable = false,
+    sorter,
     render: renderHandler = defaultRender
   } = columnProps;
   const { updateColumn } = useTableContext();
@@ -198,9 +303,21 @@ var TableColumn = (columnProps) => {
       prop: safeProp,
       width,
       className,
+      sortable,
+      sorter,
       renderHandler
     });
-  }, [children, label, safeProp, width, className, renderHandler, updateColumn]);
+  }, [
+    children,
+    label,
+    safeProp,
+    width,
+    className,
+    sortable,
+    sorter,
+    renderHandler,
+    updateColumn
+  ]);
   return null;
 };
 TableColumn.displayName = "BolioUITableColumn";
@@ -211,6 +328,11 @@ var Table_module_css_default = { "table": "Table-module_table__H9ZOx", "footer":
 
 // core/Table/Table.tsx
 
+var noKeys = [];
+var compareValues = (a, b) => typeof a === "number" && typeof b === "number" ? a - b : String(a != null ? a : "").localeCompare(String(b != null ? b : ""), void 0, {
+  numeric: true,
+  sensitivity: "base"
+});
 var defaultProps = {
   hover: true,
   initialData: [],
@@ -232,9 +354,20 @@ function TableComponent(tableProps, forwardedRef) {
     pagination,
     className = defaultProps.className,
     rowClassName = defaultProps.rowClassName,
+    sort: customSort,
+    initialSort = null,
+    onSortChange,
+    selectable = false,
+    rowKey,
+    selectedKeys: customKeys,
+    initialSelectedKeys = noKeys,
+    onSelectionChange,
+    selectRowLabel = "Select row",
+    selectAllLabel = "Select all rows",
     style,
     ...props
   } = tableProps;
+  const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
   const { SCALES } = _chunkMAICNLTYjs.use_scale_default.call(void 0, );
   const tableRef = _react.useRef.call(void 0, null);
   _react.useImperativeHandle.call(void 0, forwardedRef, () => tableRef.current);
@@ -266,12 +399,50 @@ function TableComponent(tableProps, forwardedRef) {
     setData(customData);
   }, [customData]);
   _chunkJJFOGZ6Vjs.use_resize_default.call(void 0, () => updateShape());
+  const [selfSort, setSelfSort] = _react.useState.call(void 0, initialSort);
+  const sort = customSort !== void 0 ? customSort : selfSort;
+  const [selfKeys, setSelfKeys] = _react.useState.call(void 0, initialSelectedKeys);
+  const selectedKeys = customKeys !== void 0 ? customKeys : selfKeys;
+  const keyOf = (row, index) => typeof rowKey === "function" ? rowKey(row) : rowKey !== void 0 ? row[rowKey] : index;
+  const sortedEntries = _react.useMemo.call(void 0, () => {
+    const entries = data.map((row, index) => ({ row, key: keyOf(row, index) }));
+    const column = sort && columns.find((item) => item.prop === sort.prop);
+    if (!sort || !column || (pagination == null ? void 0 : pagination.total) !== void 0) return entries;
+    const direction = sort.direction === "desc" ? -1 : 1;
+    const compare = column.sorter || ((a, b) => compareValues(a[column.prop], b[column.prop]));
+    return [...entries].sort((a, b) => direction * compare(a.row, b.row));
+  }, [data, sort, columns, pagination == null ? void 0 : pagination.total, rowKey]);
   const [selfPage, setSelfPage] = _react.useState.call(void 0, 1);
   const pageSize = pagination ? Math.max(1, pagination.pageSize) : 0;
   const totalRows = (_a = pagination == null ? void 0 : pagination.total) != null ? _a : data.length;
   const pageCount = pagination ? Math.ceil(totalRows / pageSize) : 0;
   const page = Math.min((_b = pagination == null ? void 0 : pagination.page) != null ? _b : selfPage, Math.max(pageCount, 1));
-  const rows = pagination && pagination.total === void 0 ? data.slice((page - 1) * pageSize, page * pageSize) : data;
+  const pageEntries = pagination && pagination.total === void 0 ? sortedEntries.slice((page - 1) * pageSize, page * pageSize) : sortedEntries;
+  const rows = pageEntries.map((entry) => entry.row);
+  const pageKeys = pageEntries.map((entry) => entry.key);
+  const sortHandler = (prop) => {
+    const next = !sort || sort.prop !== prop ? { prop, direction: "asc" } : sort.direction === "asc" ? { prop, direction: "desc" } : null;
+    setSelfSort(next);
+    if (onSortChange) onSortChange(next);
+  };
+  const selectKeys = (next) => {
+    setSelfKeys(next);
+    if (onSelectionChange)
+      onSelectionChange(
+        next,
+        sortedEntries.filter((entry) => next.includes(entry.key)).map((entry) => entry.row)
+      );
+  };
+  const toggleKey = (key) => selectKeys(
+    selectedKeys.includes(key) ? selectedKeys.filter((item) => item !== key) : [...selectedKeys, key]
+  );
+  const inView = pageKeys.filter((key) => selectedKeys.includes(key)).length;
+  const toggleAll = () => selectKeys(
+    inView === pageKeys.length ? selectedKeys.filter((key) => !pageKeys.includes(key)) : [
+      ...selectedKeys,
+      ...pageKeys.filter((key) => !selectedKeys.includes(key))
+    ]
+  );
   const pageChangeHandler = (next) => {
     if (next === page) return;
     setSelfPage(next);
@@ -279,6 +450,7 @@ function TableComponent(tableProps, forwardedRef) {
   };
   const tableStyle = {
     "--table-font-size": SCALES.font(1),
+    "--table-select-accent": theme.palette.primary,
     "--table-width": SCALES.width(1, "100%"),
     "--table-height": SCALES.height(1, "auto"),
     "--table-padding-top": SCALES.pt(0),
@@ -306,11 +478,31 @@ function TableComponent(tableProps, forwardedRef) {
               ...props,
               style: tableStyle,
               children: [
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TableHead_default, { columns, width }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  TableHead_default,
+                  {
+                    columns,
+                    width,
+                    sort,
+                    onSort: sortHandler,
+                    selection: selectable ? {
+                      checked: pageKeys.length > 0 && inView === pageKeys.length,
+                      indeterminate: inView > 0 && inView < pageKeys.length,
+                      label: selectAllLabel,
+                      onToggle: toggleAll
+                    } : void 0
+                  }
+                ),
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                   TableBody_default,
                   {
                     data: rows,
+                    keys: pageKeys,
+                    selection: selectable ? {
+                      keys: selectedKeys,
+                      label: selectRowLabel,
+                      onToggle: toggleKey
+                    } : void 0,
                     hover,
                     emptyText,
                     onRow,

package/dist/css/ButtonDropdown-ButtonDropdownItem.css

@@ -2,7 +2,6 @@
 .ButtonDropdownItem-module_button__R-hYv {
   position: relative;
   -webkit-appearance: button;
-  text-rendering: auto;
   display: inline-flex;
   flex: 1;
   justify-content: center;

package/dist/css/ButtonGroup.css

@@ -5,7 +5,6 @@
   overflow: hidden;
   border: 1px solid var(--btn-group-border);
   border-radius: var(--btn-group-radius);
-  background-clip: padding-box;
 }
 
 .ButtonGroup-module_vertical__ueNfm {

package/dist/css/Calendar.css

@@ -62,7 +62,6 @@
   border-radius: var(--calendar-radius);
   appearance: none;
   -webkit-appearance: none;
-  background-clip: padding-box;
 }
 
 .Calendar-module_navButton__jmnwu {

package/dist/css/Carousel.css

@@ -64,7 +64,6 @@
   border-radius: 50%;
   appearance: none;
   -webkit-appearance: none;
-  background-clip: padding-box;
 }
 
 .Carousel-module_control__SdAV-:hover:not(:disabled) {

package/dist/css/ColorInput.css

@@ -22,7 +22,6 @@
   transition:
     border-color 0.15s ease,
     background-color 0.15s ease;
-  background-clip: padding-box;
 }
 
 .ColorInput-module_field__JQwJJ:hover {
@@ -91,7 +90,6 @@
   border: 1px solid var(--colorinput-popup-border);
   border-radius: var(--colorinput-popup-radius);
   box-shadow: var(--colorinput-shadow);
-  background-clip: padding-box;
 }
 
 }

package/dist/css/ColorPicker.css

@@ -82,7 +82,6 @@
   box-shadow: 0 0 0 1px rgb(0 0 0 / 40%);
   appearance: none;
   -webkit-appearance: none;
-  background-clip: padding-box;
 }
 
 .ColorPicker-module_hue__VKHj-::-moz-range-thumb {
@@ -93,7 +92,6 @@
   border: 2px solid #fff;
   border-radius: 50%;
   box-shadow: 0 0 0 1px rgb(0 0 0 / 40%);
-  background-clip: padding-box;
 }
 
 .ColorPicker-module_hue__VKHj-:focus-visible {
@@ -112,7 +110,6 @@
   border-radius: var(--picker-radius);
   background-color: var(--picker-bg);
   transition: border-color 0.15s ease;
-  background-clip: padding-box;
 }
 
 .ColorPicker-module_field__v7-7F:hover {

package/dist/css/Combobox.css

@@ -26,7 +26,6 @@
   transition:
     border-color 0.15s ease,
     background-color 0.15s ease;
-  background-clip: padding-box;
 }
 
 .Combobox-module_input__ti3bv::placeholder {
@@ -58,7 +57,6 @@
   border: 1px solid var(--combobox-border-color);
   border-radius: var(--combobox-popup-radius);
   box-shadow: var(--combobox-shadow);
-  background-clip: padding-box;
 }
 
 .Combobox-module_list__2otmP {

package/dist/css/DatePicker.css

@@ -26,7 +26,6 @@
   transition:
     border-color 0.15s ease,
     background-color 0.15s ease;
-  background-clip: padding-box;
 }
 
 .DatePicker-module_input__e7dhN::placeholder {
@@ -62,7 +61,6 @@
   border-radius: var(--datepicker-radius);
   appearance: none;
   -webkit-appearance: none;
-  background-clip: padding-box;
 }
 
 .DatePicker-module_toggle__I8ARg:hover:not(:disabled) {
@@ -89,7 +87,6 @@
   border: 1px solid var(--datepicker-border-color);
   border-radius: var(--datepicker-popup-radius);
   box-shadow: var(--datepicker-shadow);
-  background-clip: padding-box;
 }
 
 }

package/dist/css/DateRangePicker.css

@@ -24,7 +24,6 @@
   transition:
     border-color 0.15s ease,
     background-color 0.15s ease;
-  background-clip: padding-box;
 }
 
 .DateRangePicker-module_field__4UZhH:hover {
@@ -78,7 +77,6 @@
   border-radius: var(--daterange-radius);
   appearance: none;
   -webkit-appearance: none;
-  background-clip: padding-box;
 }
 
 .DateRangePicker-module_toggle__gNukh:hover:not(:disabled) {
@@ -104,7 +102,12 @@
   border: 1px solid var(--daterange-border-color);
   border-radius: var(--daterange-popup-radius);
   box-shadow: var(--daterange-shadow);
-  background-clip: padding-box;
+}
+
+/* a field near the right edge: the popup grows to the left */
+.DateRangePicker-module_alignEnd__DgOia {
+  right: 0;
+  left: auto;
 }
 
 }

package/dist/css/Dropzone.css

@@ -33,7 +33,6 @@
   transition:
     border-color 0.2s ease,
     background-color 0.2s ease;
-  background-clip: padding-box;
 }
 
 .Dropzone-module_dropzone__-6nFN:hover .Dropzone-module_content__Uafwo {
@@ -88,7 +87,6 @@
   background-color: var(--dropzone-tile-bg);
   border: 1px solid var(--dropzone-border);
   border-radius: var(--dropzone-radius);
-  background-clip: padding-box;
 }
 
 .Dropzone-module_preview__pQ3gz {
@@ -133,7 +131,6 @@
   border-radius: 50%;
   appearance: none;
   -webkit-appearance: none;
-  background-clip: padding-box;
 }
 
 .Dropzone-module_remove__pjfHy:hover:not(:disabled) {

package/dist/css/Fieldset-FieldsetGroup.css

@@ -35,7 +35,6 @@
   border: 1px solid var(--fieldset-group-border);
   text-decoration: none;
   outline: none;
-  background-clip: padding-box;
 }
 
 .FieldsetGroup-module_button__kXAoU.FieldsetGroup-module_active__tJFHM {

package/dist/css/ImageZoom.css

@@ -0,0 +1,93 @@
+@layer ImageZoom {
+.ImageZoom-module_trigger__-42Bz {
+  display: inline-block;
+  max-width: 100%;
+  margin: 0;
+  padding: 0;
+  line-height: 0;
+  color: inherit;
+  cursor: zoom-in;
+  background: none;
+  border: 0;
+  border-radius: inherit;
+  appearance: none;
+  -webkit-appearance: none;
+}
+
+.ImageZoom-module_trigger__-42Bz:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+.ImageZoom-module_dialog__TjA9E {
+  box-sizing: border-box;
+  max-width: 100vw;
+  max-height: 100vh;
+  padding: 1rem;
+  overflow: visible;
+  color: #fff;
+  background: transparent;
+  border: 0;
+}
+
+.ImageZoom-module_dialog__TjA9E::backdrop {
+  background: rgb(0 0 0 / 85%);
+}
+
+/* the page behind does not scroll while it is open */
+body:has(.ImageZoom-module_dialog__TjA9E[open]) {
+  overflow: hidden;
+}
+
+.ImageZoom-module_figure__YIBq1 {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+  margin: 0;
+}
+
+.ImageZoom-module_zoomed__7gfCP {
+  display: block;
+  max-width: calc(100vw - 2rem);
+  max-height: calc(100vh - 6rem);
+  object-fit: contain;
+  cursor: zoom-out;
+  border-radius: 8px;
+}
+
+.ImageZoom-module_caption__6SFRA {
+  font-size: 0.875rem;
+  text-align: center;
+}
+
+.ImageZoom-module_close__iEiwJ {
+  position: fixed;
+  top: 1rem;
+  right: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  margin: 0;
+  padding: 0;
+  color: #fff;
+  cursor: pointer;
+  background: rgb(255 255 255 / 12%);
+  border: 0;
+  border-radius: 50%;
+  appearance: none;
+  -webkit-appearance: none;
+}
+
+.ImageZoom-module_close__iEiwJ:hover {
+  background: rgb(255 255 255 / 24%);
+}
+
+.ImageZoom-module_close__iEiwJ:focus-visible {
+  outline: 2px solid #fff;
+  outline-offset: 2px;
+}
+
+}

package/dist/css/Input.css

@@ -26,7 +26,6 @@
   transition:
     border 0.2s ease 0s,
     color 0.2s ease 0s;
-  background-clip: padding-box;
 }
 
 .Input-module_inputWrapper__WpYTp:hover {

package/dist/css/Menu-MenuList.css

@@ -10,7 +10,6 @@
   border-radius: var(--menu-list-radius);
   box-shadow: var(--menu-list-shadow);
   outline: none;
-  background-clip: padding-box;
 }
 
 .MenuList-module_sub__Bjn8e {

package/dist/css/NumberInput.css

@@ -13,7 +13,6 @@
   border-radius: var(--input-radius);
   background-color: var(--input-bg);
   transition: border 0.2s ease;
-  background-clip: padding-box;
 }
 
 .NumberInput-module_numberInput__hOY3x:hover {