@wistia/ui 0.14.27-beta.00a6ea3c.ab8f0ad → 0.14.27-beta.d2fb2564.e1cb0bf

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.14.27-beta.00a6ea3c.ab8f0ad
+ * @license @wistia/ui v0.14.27-beta.d2fb2564.e1cb0bf
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -16012,15 +16012,16 @@ var import_throttle_debounce2 = require("throttle-debounce");
 var import_jsx_runtime302 = require("react/jsx-runtime");
 var SHADOW_SIZE_PX = 8;
 var Container10 = import_styled_components105.default.div`
-  width: fit-content;
-  height: fit-content;
   overflow: hidden;
   position: relative;
+  flex: 1 1 auto;
 `;
 var ScrollContainer = import_styled_components105.default.div`
   contain: layout;
   overflow: auto;
   position: relative;
+  height: 100%;
+  width: 100%;
 `;
 var Shadow = import_styled_components105.default.div`
   pointer-events: none;
@@ -16058,7 +16059,7 @@ var ShadowAtRight = (0, import_styled_components105.default)(Shadow)`
   width: 0;
 `;
 var ScrollArea = (0, import_react85.forwardRef)(
-  ({ children, onScroll, ...props }, forwardedRef) => {
+  ({ children, onScroll, style, ...props }, forwardedRef) => {
     const scrollContainerRefInternal = (0, import_react85.useRef)(null);
     const [shadowState, setShadowState] = (0, import_react85.useState)({
       canScrollUp: false,
@@ -16079,18 +16080,18 @@ var ScrollArea = (0, import_react85.forwardRef)(
         canScrollRight: scrollContainer.scrollLeft + scrollContainer.clientWidth < scrollContainer.scrollWidth
       });
     }, []);
+    const throttledUpdateShadows = (0, import_react85.useMemo)(() => (0, import_throttle_debounce2.throttle)(100, updateShadows), [updateShadows]);
     const onScrollScrollContainer = (0, import_react85.useCallback)(
       (event) => {
         onScroll?.(event);
-        const throttledUpdateShadows = (0, import_throttle_debounce2.throttle)(100, updateShadows);
         throttledUpdateShadows();
       },
-      [onScroll, updateShadows]
+      [onScroll, throttledUpdateShadows]
     );
     (0, import_react85.useEffect)(() => {
       updateShadows();
     }, [updateShadows]);
-    return /* @__PURE__ */ (0, import_jsx_runtime302.jsxs)(Container10, { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime302.jsxs)(Container10, { style, children: [
       /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(ShadowAtTop, { $isVisible: shadowState.canScrollUp }),
       /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(ShadowAtBottom, { $isVisible: shadowState.canScrollDown }),
       /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(ShadowAtLeft, { $isVisible: shadowState.canScrollLeft }),