@salt-ds/lab 1.0.0-alpha.10 → 1.0.0-alpha.100

package/dist-es/responsive/useReclaimSpace.js

@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import { popNextItemByPriority, measureContainerOverflow, getOverflowIndicator } from './overflowUtils.js';
+import { measureContainerOverflow, getOverflowIndicator } from './overflowUtils.js';
 
 const getPriority = (item) => item.priority;
 const canReclaimSpace = (item) => item.collapsed && item.reclaimSpace;
@@ -21,7 +21,7 @@ const canReleaseReclaimedSpace = (size, items) => {
   const overflowedItem = findNextOverflowedItem(items);
   if (claimant && overflowedItem) {
     const renderedSize = items.reduce(addAllVisible, 0);
-    const { size: indicatorSize } = getOverflowIndicator(items);
+    const { size: indicatorSize } = getOverflowIndicator(items) ?? { size: 0 };
     const { size: overflowedSize } = overflowedItem;
     const reclaimableSpace = getReclaimableSpace(claimant);
     const renderedSizeAfterReclaim = renderedSize - reclaimableSpace - indicatorSize;
@@ -34,28 +34,11 @@ const canReleaseReclaimedSpace = (size, items) => {
 const mightBeAbleToReclaimSpace = (items) => items.some(canReclaimSpace);
 const useReclaimSpace = ({
   collectionHook,
-  label = "Toolbar",
+  label: _label = "Toolbar",
   overflowItemsRef: managedItemsRef,
   overflowContainerRef: ref,
   orientation
 }) => {
-  useCallback(
-    (visibleContentSize, containerSize) => {
-      let newlyOverflowedItems = [];
-      const { current: managedItems } = managedItemsRef;
-      const visibleItems = managedItems.slice();
-      while (visibleContentSize > containerSize) {
-        const overflowedItem = popNextItemByPriority(visibleItems);
-        if (overflowedItem === null) {
-          break;
-        }
-        visibleContentSize -= overflowedItem.size;
-        newlyOverflowedItems.push(overflowedItem);
-      }
-      return newlyOverflowedItems;
-    },
-    []
-  );
   const releaseReclaimedSpace = useCallback(() => {
     const { current: managedItems } = managedItemsRef;
     const claimant = managedItems.find(hasReclaimedSpace);
@@ -72,7 +55,7 @@ const useReclaimSpace = ({
         }
       });
     }
-  }, []);
+  }, [managedItemsRef, collectionHook.dispatch]);
   const handleResize = useCallback(
     (size, containerHasGrown) => {
       const { isOverflowing: willOverflow } = measureContainerOverflow(
@@ -99,7 +82,13 @@ const useReclaimSpace = ({
         }
       }
     },
-    []
+    [
+      ref,
+      managedItemsRef,
+      releaseReclaimedSpace,
+      collectionHook.dispatch,
+      orientation
+    ]
   );
   return {
     onResize: handleResize

package/dist-es/responsive/useReclaimSpace.js.map

@@ -1 +1 @@
-{"version":3,"file":"useReclaimSpace.js","sources":["../src/responsive/useReclaimSpace.ts"],"sourcesContent":["import { useCallback } from \"react\";\nimport {\n  OverflowItem,\n  OverflowHookProps,\n  OverflowHookResult,\n} from \"./overflowTypes\";\n\nimport {\n  getOverflowIndicator,\n  measureContainerOverflow,\n  popNextItemByPriority,\n} from \"./overflowUtils\";\n\nconst getPriority = (item: OverflowItem) => item.priority;\n\nconst canReclaimSpace = (item: OverflowItem) =>\n  item.collapsed && item.reclaimSpace;\n\nconst hasReclaimedSpace = (item: OverflowItem) => item.reclaimedSpace;\nconst getReclaimableSpace = ({ size, minSize = 0 }: OverflowItem) =>\n  size - minSize;\n\nconst findNextOverflowedItem = (items: OverflowItem[]) => {\n  const overflowedItems = items.filter((item) => item.overflowed);\n  const minPriority = Math.min(...overflowedItems.map(getPriority));\n  for (let i = 0; i < overflowedItems.length; i++) {\n    if (overflowedItems[i].priority === minPriority) {\n      return overflowedItems[i];\n    }\n  }\n  return null;\n};\n\nexport const addAllVisible = (sum: number, m: OverflowItem) =>\n  sum + (m.overflowed ? 0 : m.size);\n\nconst canReleaseReclaimedSpace = (size: number, items: OverflowItem[]) => {\n  const claimant = items.find(hasReclaimedSpace);\n  const overflowedItem = findNextOverflowedItem(items);\n  if (claimant && overflowedItem) {\n    const renderedSize = items.reduce(addAllVisible, 0);\n    const { size: indicatorSize } = getOverflowIndicator(items)!;\n    const { size: overflowedSize } = overflowedItem;\n    // TODO we can discount the indicator size ONLY IF overflowed item is only overflowed item\n    const reclaimableSpace = getReclaimableSpace(claimant);\n    const renderedSizeAfterReclaim =\n      renderedSize - reclaimableSpace - indicatorSize;\n    const maxAvailableSpace = size - renderedSizeAfterReclaim;\n    if (maxAvailableSpace >= overflowedSize) {\n      return true;\n    }\n  }\n};\n\nconst mightBeAbleToReclaimSpace = (items: OverflowItem[]) =>\n  items.some(canReclaimSpace);\n\n// We need to release the reclaimed space (i.e take it back from the collapsed item and re-assign it\n// as available space) when container grows and space now allows overflowed item to be 'un-wrapped'\n\nexport const useReclaimSpace = ({\n  collectionHook,\n  label = \"Toolbar\",\n  overflowItemsRef: managedItemsRef,\n  overflowContainerRef: ref,\n  orientation,\n}: OverflowHookProps): OverflowHookResult => {\n  const getAllOverflowedItems = useCallback(\n    (visibleContentSize: number, containerSize: number) => {\n      let newlyOverflowedItems = [];\n      const { current: managedItems } = managedItemsRef;\n      const visibleItems = managedItems.slice();\n      while (visibleContentSize > containerSize) {\n        const overflowedItem = popNextItemByPriority(visibleItems);\n        if (overflowedItem === null) {\n          break;\n        }\n        // eslint-disable-next-line no-param-reassign\n        visibleContentSize -= overflowedItem.size;\n        newlyOverflowedItems.push(overflowedItem);\n      }\n      return newlyOverflowedItems;\n    },\n    []\n  );\n\n  const releaseReclaimedSpace = useCallback(() => {\n    const { current: managedItems } = managedItemsRef;\n\n    const claimant = managedItems.find(hasReclaimedSpace);\n    if (claimant) {\n      // Might not always need to collapse, if there is enough available space for it to still be collapsing\n      // collapse the claimant and turn off recvlaimed\n      collectionHook.dispatch({\n        type: \"replace-item\",\n        overflowItem: {\n          ...claimant,\n          collapsed: true,\n          collapsing: false,\n          reclaimedSpace: undefined,\n          size: claimant.minSize as number,\n          fullSize: claimant.size,\n        },\n      });\n    }\n  }, []);\n  const handleResize = useCallback(\n    (size: number, containerHasGrown?: boolean) => {\n      const { isOverflowing: willOverflow } = measureContainerOverflow(\n        ref,\n        orientation\n      );\n      const { current: managedItems } = managedItemsRef;\n\n      if (containerHasGrown && canReleaseReclaimedSpace(size, managedItems)) {\n        releaseReclaimedSpace();\n      } else if (\n        !containerHasGrown &&\n        willOverflow &&\n        mightBeAbleToReclaimSpace(managedItems)\n      ) {\n        const collapsedChild = managedItems.find(canReclaimSpace);\n        if (collapsedChild) {\n          collectionHook.dispatch({\n            type: \"replace-item\",\n            overflowItem: {\n              ...collapsedChild,\n              collapsed: false,\n              collapsing: true,\n              reclaimedSpace: true,\n              size: collapsedChild.fullSize as number,\n              fullSize: null,\n            },\n          });\n        }\n      }\n    },\n    []\n  );\n\n  return {\n    onResize: handleResize,\n  };\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useReclaimSpace.js","sources":["../src/responsive/useReclaimSpace.ts"],"sourcesContent":["import { useCallback } from \"react\";\nimport type {\n  OverflowHookProps,\n  OverflowHookResult,\n  OverflowItem,\n} from \"./overflowTypes\";\n\nimport {\n  getOverflowIndicator,\n  measureContainerOverflow,\n} from \"./overflowUtils\";\n\nconst getPriority = (item: OverflowItem) => item.priority;\n\nconst canReclaimSpace = (item: OverflowItem) =>\n  item.collapsed && item.reclaimSpace;\n\nconst hasReclaimedSpace = (item: OverflowItem) => item.reclaimedSpace;\nconst getReclaimableSpace = ({ size, minSize = 0 }: OverflowItem) =>\n  size - minSize;\n\nconst findNextOverflowedItem = (items: OverflowItem[]) => {\n  const overflowedItems = items.filter((item) => item.overflowed);\n  const minPriority = Math.min(...overflowedItems.map(getPriority));\n  for (let i = 0; i < overflowedItems.length; i++) {\n    if (overflowedItems[i].priority === minPriority) {\n      return overflowedItems[i];\n    }\n  }\n  return null;\n};\n\nexport const addAllVisible = (sum: number, m: OverflowItem) =>\n  sum + (m.overflowed ? 0 : m.size);\n\nconst canReleaseReclaimedSpace = (size: number, items: OverflowItem[]) => {\n  const claimant = items.find(hasReclaimedSpace);\n  const overflowedItem = findNextOverflowedItem(items);\n  if (claimant && overflowedItem) {\n    const renderedSize = items.reduce(addAllVisible, 0);\n    const { size: indicatorSize } = getOverflowIndicator(items) ?? { size: 0 };\n    const { size: overflowedSize } = overflowedItem;\n    // TODO we can discount the indicator size ONLY IF overflowed item is only overflowed item\n    const reclaimableSpace = getReclaimableSpace(claimant);\n    const renderedSizeAfterReclaim =\n      renderedSize - reclaimableSpace - indicatorSize;\n    const maxAvailableSpace = size - renderedSizeAfterReclaim;\n    if (maxAvailableSpace >= overflowedSize) {\n      return true;\n    }\n  }\n};\n\nconst mightBeAbleToReclaimSpace = (items: OverflowItem[]) =>\n  items.some(canReclaimSpace);\n\n// We need to release the reclaimed space (i.e take it back from the collapsed item and re-assign it\n// as available space) when container grows and space now allows overflowed item to be 'un-wrapped'\n\nexport const useReclaimSpace = ({\n  collectionHook,\n  label: _label = \"Toolbar\",\n  overflowItemsRef: managedItemsRef,\n  overflowContainerRef: ref,\n  orientation,\n}: OverflowHookProps): OverflowHookResult => {\n  const releaseReclaimedSpace = useCallback(() => {\n    const { current: managedItems } = managedItemsRef;\n\n    const claimant = managedItems.find(hasReclaimedSpace);\n    if (claimant) {\n      // Might not always need to collapse, if there is enough available space for it to still be collapsing then\n      // collapse the claimant and turn off reclaimed\n      collectionHook.dispatch({\n        type: \"replace-item\",\n        overflowItem: {\n          ...claimant,\n          collapsed: true,\n          collapsing: false,\n          reclaimedSpace: undefined,\n          size: claimant.minSize as number,\n          fullSize: claimant.size,\n        },\n      });\n    }\n  }, [managedItemsRef, collectionHook.dispatch]);\n\n  const handleResize = useCallback(\n    (size: number, containerHasGrown?: boolean) => {\n      const { isOverflowing: willOverflow } = measureContainerOverflow(\n        ref,\n        orientation,\n      );\n      const { current: managedItems } = managedItemsRef;\n\n      if (containerHasGrown && canReleaseReclaimedSpace(size, managedItems)) {\n        releaseReclaimedSpace();\n      } else if (\n        !containerHasGrown &&\n        willOverflow &&\n        mightBeAbleToReclaimSpace(managedItems)\n      ) {\n        const collapsedChild = managedItems.find(canReclaimSpace);\n        if (collapsedChild) {\n          collectionHook.dispatch({\n            type: \"replace-item\",\n            overflowItem: {\n              ...collapsedChild,\n              collapsed: false,\n              collapsing: true,\n              reclaimedSpace: true,\n              size: collapsedChild.fullSize as number,\n              fullSize: null,\n            },\n          });\n        }\n      }\n    },\n    [\n      ref,\n      managedItemsRef,\n      releaseReclaimedSpace,\n      collectionHook.dispatch,\n      orientation,\n    ],\n  );\n\n  return {\n    onResize: handleResize,\n  };\n};\n"],"names":[],"mappings":"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"}

package/dist-es/responsive/useResizeObserver.js

@@ -38,7 +38,7 @@ const resizeObserver = typeof ResizeObserver !== "undefined" ? new ResizeObserve
         }
       }
       if (sizeChanged) {
-        onResize && onResize(measurements);
+        onResize == null ? void 0 : onResize(measurements);
       }
     }
   }
@@ -55,6 +55,10 @@ function useResizeObserver(ref, dimensions, onResize, reportInitialSize = false)
       {}
     );
   }, []);
+  const resizeCallback = useRef(onResize);
+  useIsomorphicLayoutEffect(() => {
+    resizeCallback.current = onResize;
+  }, [onResize]);
   useIsomorphicLayoutEffect(() => {
     if (!resizeObserver) {
       return void 0;
@@ -62,6 +66,7 @@ function useResizeObserver(ref, dimensions, onResize, reportInitialSize = false)
     const target = ref.current;
     let cleanedUp = false;
     async function registerObserver() {
+      var _a;
       observedMap.set(target, { measurements: {} });
       cleanedUp = false;
       const { fonts } = document;
@@ -75,7 +80,7 @@ function useResizeObserver(ref, dimensions, onResize, reportInitialSize = false)
           observedTarget.measurements = measurements;
           resizeObserver.observe(target);
           if (reportInitialSize) {
-            onResize(measurements);
+            (_a = resizeCallback.current) == null ? void 0 : _a.call(resizeCallback, measurements);
           }
         }
       }
@@ -95,7 +100,7 @@ function useResizeObserver(ref, dimensions, onResize, reportInitialSize = false)
         cleanedUp = true;
       }
     };
-  }, [ref, measure]);
+  }, [ref, measure, reportInitialSize]);
   useIsomorphicLayoutEffect(() => {
     const target = ref.current;
     const record = observedMap.get(target);

package/dist-es/responsive/useResizeObserver.js.map

@@ -1 +1 @@
-{"version":3,"file":"useResizeObserver.js","sources":["../src/responsive/useResizeObserver.ts"],"sourcesContent":["/* eslint-disable no-restricted-syntax */\nimport { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { useCallback, useRef, RefObject } from \"react\";\nexport const WidthHeight = [\"height\", \"width\"];\nexport const HeightOnly = [\"height\"];\nexport const WidthOnly = [\"width\"];\n\nexport type measurements<T = string | number> = {\n  height?: T;\n  scrollHeight?: T;\n  scrollWidth?: T;\n  width?: T;\n};\ntype measuredDimension = keyof measurements<number>;\n\nexport type ResizeHandler = (measurements: measurements<number>) => void;\n\ntype observedDetails = {\n  onResize?: ResizeHandler;\n  measurements: measurements<number>;\n};\nconst observedMap = new WeakMap<HTMLElement, observedDetails>();\n\nconst getTargetSize = (\n  element: HTMLElement,\n  contentRect: DOMRectReadOnly,\n  dimension: measuredDimension\n): number => {\n  switch (dimension) {\n    case \"height\":\n      return contentRect.height;\n    case \"scrollHeight\":\n      return element.scrollHeight;\n    case \"scrollWidth\":\n      return element.scrollWidth;\n    case \"width\":\n      return contentRect.width;\n    default:\n      return 0;\n  }\n};\n\nconst resizeObserver =\n  typeof ResizeObserver !== \"undefined\"\n    ? new ResizeObserver((entries: ResizeObserverEntry[]) => {\n        for (const entry of entries) {\n          const { target, contentRect } = entry;\n          const observedTarget = observedMap.get(target as HTMLElement);\n          if (observedTarget) {\n            const { onResize, measurements } = observedTarget;\n            let sizeChanged = false;\n            for (const [dimension, size] of Object.entries(measurements)) {\n              const newSize = getTargetSize(\n                target as HTMLElement,\n                contentRect,\n                dimension as measuredDimension\n              );\n              if (newSize !== size) {\n                sizeChanged = true;\n                measurements[dimension as measuredDimension] = newSize;\n              }\n            }\n            if (sizeChanged) {\n              onResize && onResize(measurements);\n            }\n          }\n        }\n      })\n    : null;\n\n// TODO use an optional lag (default to false) to ask to fire onResize\n// with initial size\n// Note asking for scrollHeight alone will not trigger onResize, this is only triggered by height,\n// with scrollHeight returned as an auxilliary value\nexport function useResizeObserver(\n  ref: RefObject<Element | HTMLElement | null>,\n  dimensions: string[],\n  onResize: ResizeHandler,\n  reportInitialSize = false\n): void {\n  const dimensionsRef = useRef(dimensions);\n  const measure = useCallback((target: HTMLElement): measurements<number> => {\n    const rect = target.getBoundingClientRect();\n    return dimensionsRef.current.reduce(\n      (map: { [key: string]: number }, dim) => {\n        map[dim] = getTargetSize(target, rect, dim as measuredDimension);\n        return map;\n      },\n      {}\n    );\n  }, []);\n\n  // TODO use ref to store resizeHandler here\n  // resize handler registered with REsizeObserver will never change\n  // use ref to store user onResize callback here\n  // resizeHandler will call user callback.current\n\n  // Keep this effect separate in case user inadvertently passes different\n  // dimensions or callback instance each time - we only ever want to\n  // initiate new observation when ref changes.\n  useIsomorphicLayoutEffect(() => {\n    if (!resizeObserver) {\n      return undefined;\n    }\n\n    const target = ref.current as HTMLElement;\n    let cleanedUp = false;\n\n    async function registerObserver() {\n      // Create the map entry immediately. useEffect may fire below\n      // before fonts are ready and attempt to update entry\n      observedMap.set(target, { measurements: {} as measurements<number> });\n      cleanedUp = false;\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n      const { fonts } = document as any;\n      if (fonts) {\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n        await fonts.ready;\n      }\n      if (!cleanedUp && resizeObserver) {\n        const observedTarget = observedMap.get(target);\n        if (observedTarget) {\n          const measurements = measure(target);\n          observedTarget.measurements = measurements;\n          resizeObserver.observe(target);\n          if (reportInitialSize) {\n            onResize(measurements);\n          }\n        }\n      }\n    }\n\n    if (target) {\n      // TODO might we want multiple callers to attach a listener to the same element ?\n      if (observedMap.has(target)) {\n        throw Error(\n          \"useResizeObserver attemping to observe same element twice\"\n        );\n      }\n      void registerObserver();\n    }\n    return () => {\n      if (target && observedMap.has(target)) {\n        resizeObserver.unobserve(target);\n        observedMap.delete(target);\n        cleanedUp = true;\n      }\n    };\n  }, [ref, measure]);\n\n  useIsomorphicLayoutEffect(() => {\n    const target = ref.current as HTMLElement;\n    const record = observedMap.get(target);\n    if (record) {\n      if (dimensionsRef.current !== dimensions) {\n        dimensionsRef.current = dimensions;\n        const measurements = measure(target);\n        record.measurements = measurements;\n      }\n      // Might not have changed, but no harm ...\n      record.onResize = onResize;\n    }\n  }, [dimensions, measure, ref, onResize]);\n\n  // TODO might be a good idea to ref and return the current measurememnts. That way, derived hooks\n  // e.g useBreakpoints don't have to measure and client cn make onResize callback simpler\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useResizeObserver.js","sources":["../src/responsive/useResizeObserver.ts"],"sourcesContent":["import { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { type RefObject, useCallback, useRef } from \"react\";\nexport const WidthHeight = [\"height\", \"width\"];\nexport const HeightOnly = [\"height\"];\nexport const WidthOnly = [\"width\"];\n\nexport type measurements<T = string | number> = {\n  height?: T;\n  scrollHeight?: T;\n  scrollWidth?: T;\n  width?: T;\n};\ntype measuredDimension = keyof measurements<number>;\n\nexport type ResizeHandler = (measurements: measurements<number>) => void;\n\ntype observedDetails = {\n  onResize?: ResizeHandler;\n  measurements: measurements<number>;\n};\nconst observedMap = new WeakMap<HTMLElement, observedDetails>();\n\nconst getTargetSize = (\n  element: HTMLElement,\n  contentRect: DOMRectReadOnly,\n  dimension: measuredDimension,\n): number => {\n  switch (dimension) {\n    case \"height\":\n      return contentRect.height;\n    case \"scrollHeight\":\n      return element.scrollHeight;\n    case \"scrollWidth\":\n      return element.scrollWidth;\n    case \"width\":\n      return contentRect.width;\n    default:\n      return 0;\n  }\n};\n\nconst resizeObserver =\n  typeof ResizeObserver !== \"undefined\"\n    ? new ResizeObserver((entries: ResizeObserverEntry[]) => {\n        for (const entry of entries) {\n          const { target, contentRect } = entry;\n          const observedTarget = observedMap.get(target as HTMLElement);\n          if (observedTarget) {\n            const { onResize, measurements } = observedTarget;\n            let sizeChanged = false;\n            for (const [dimension, size] of Object.entries(measurements)) {\n              const newSize = getTargetSize(\n                target as HTMLElement,\n                contentRect,\n                dimension as measuredDimension,\n              );\n              if (newSize !== size) {\n                sizeChanged = true;\n                measurements[dimension as measuredDimension] = newSize;\n              }\n            }\n            if (sizeChanged) {\n              onResize?.(measurements);\n            }\n          }\n        }\n      })\n    : null;\n\n// TODO use an optional lag (default to false) to ask to fire onResize\n// with initial size\n// Note asking for scrollHeight alone will not trigger onResize, this is only triggered by height,\n// with scrollHeight returned as an auxilliary value\nexport function useResizeObserver(\n  ref: RefObject<Element | HTMLElement | null>,\n  dimensions: string[],\n  onResize: ResizeHandler,\n  reportInitialSize = false,\n): void {\n  const dimensionsRef = useRef(dimensions);\n  const measure = useCallback((target: HTMLElement): measurements<number> => {\n    const rect = target.getBoundingClientRect();\n    return dimensionsRef.current.reduce(\n      (map: { [key: string]: number }, dim) => {\n        map[dim] = getTargetSize(target, rect, dim as measuredDimension);\n        return map;\n      },\n      {},\n    );\n  }, []);\n\n  const resizeCallback = useRef(onResize);\n\n  useIsomorphicLayoutEffect(() => {\n    resizeCallback.current = onResize;\n  }, [onResize]);\n\n  // TODO use ref to store resizeHandler here\n  // resize handler registered with REsizeObserver will never change\n  // use ref to store user onResize callback here\n  // resizeHandler will call user callback.current\n\n  // Keep this effect separate in case user inadvertently passes different\n  // dimensions or callback instance each time - we only ever want to\n  // initiate new observation when ref changes.\n  useIsomorphicLayoutEffect(() => {\n    if (!resizeObserver) {\n      return undefined;\n    }\n\n    const target = ref.current as HTMLElement;\n    let cleanedUp = false;\n\n    async function registerObserver() {\n      // Create the map entry immediately. useEffect may fire below\n      // before fonts are ready and attempt to update entry\n      observedMap.set(target, { measurements: {} as measurements<number> });\n      cleanedUp = false;\n\n      const { fonts } = document;\n      if (fonts) {\n        await fonts.ready;\n      }\n      if (!cleanedUp && resizeObserver) {\n        const observedTarget = observedMap.get(target);\n        if (observedTarget) {\n          const measurements = measure(target);\n          observedTarget.measurements = measurements;\n          resizeObserver.observe(target);\n          if (reportInitialSize) {\n            resizeCallback.current?.(measurements);\n          }\n        }\n      }\n    }\n\n    if (target) {\n      // TODO might we want multiple callers to attach a listener to the same element ?\n      if (observedMap.has(target)) {\n        throw Error(\n          \"useResizeObserver attemping to observe same element twice\",\n        );\n      }\n      void registerObserver();\n    }\n    return () => {\n      if (target && observedMap.has(target)) {\n        resizeObserver.unobserve(target);\n        observedMap.delete(target);\n        cleanedUp = true;\n      }\n    };\n  }, [ref, measure, reportInitialSize]);\n\n  useIsomorphicLayoutEffect(() => {\n    const target = ref.current as HTMLElement;\n    const record = observedMap.get(target);\n    if (record) {\n      if (dimensionsRef.current !== dimensions) {\n        dimensionsRef.current = dimensions;\n        const measurements = measure(target);\n        record.measurements = measurements;\n      }\n      // Might not have changed, but no harm ...\n      record.onResize = onResize;\n    }\n  }, [dimensions, measure, ref, onResize]);\n\n  // TODO might be a good idea to ref and return the current measurememnts. That way, derived hooks\n  // e.g useBreakpoints don't have to measure and client cn make onResize callback simpler\n}\n"],"names":[],"mappings":"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"}

package/dist-es/responsive/useWidth.js

@@ -1,5 +1,5 @@
-import { useState, useRef, useCallback } from 'react';
 import { useIsomorphicLayoutEffect } from '@salt-ds/core';
+import { useState, useRef, useCallback } from 'react';
 import { useResizeObserver, WidthOnly } from './useResizeObserver.js';
 
 const NONE = [];
@@ -16,7 +16,7 @@ function useWidth(responsive) {
       return void 0;
     }
     handleResize(ref.current.getBoundingClientRect());
-  }, [handleResize, responsive]);
+  }, [handleResize]);
   return [ref, width];
 }
 

package/dist-es/responsive/useWidth.js.map

@@ -1 +1 @@
-{"version":3,"file":"useWidth.js","sources":["../src/responsive/useWidth.ts"],"sourcesContent":["import { RefObject, useCallback, useRef, useState } from \"react\";\nimport { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport {\n  ResizeHandler,\n  useResizeObserver,\n  WidthOnly,\n} from \"./useResizeObserver\";\n\nconst NONE: string[] = [];\n\nexport function useWidth<Element extends HTMLElement>(\n  responsive: boolean\n): [RefObject<Element>, number] {\n  const [width, setWidth] = useState<number>();\n  const ref = useRef<HTMLElement>(null);\n\n  const handleResize: ResizeHandler = useCallback(({ width: newWidth }) => {\n    setWidth(newWidth);\n  }, []);\n\n  const measurementsToObserve = responsive ? WidthOnly : NONE;\n  useResizeObserver(ref, measurementsToObserve, handleResize);\n\n  useIsomorphicLayoutEffect(() => {\n    if (!ref.current) {\n      return undefined;\n    }\n    handleResize(ref.current.getBoundingClientRect());\n  }, [handleResize, responsive]);\n\n  return [ref, width] as [RefObject<Element>, number];\n}\n"],"names":[],"mappings":";;;;AAQA,MAAM,OAAiB,EAAC,CAAA;AAEjB,SAAS,SACd,UAC8B,EAAA;AAC9B,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,QAAiB,EAAA,CAAA;AAC3C,EAAM,MAAA,GAAA,GAAM,OAAoB,IAAI,CAAA,CAAA;AAEpC,EAAA,MAAM,eAA8B,WAAY,CAAA,CAAC,EAAE,KAAA,EAAO,UAAe,KAAA;AACvE,IAAA,QAAA,CAAS,QAAQ,CAAA,CAAA;AAAA,GACnB,EAAG,EAAE,CAAA,CAAA;AAEL,EAAM,MAAA,qBAAA,GAAwB,aAAa,SAAY,GAAA,IAAA,CAAA;AACvD,EAAkB,iBAAA,CAAA,GAAA,EAAK,uBAAuB,YAAY,CAAA,CAAA;AAE1D,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAI,IAAA,CAAC,IAAI,OAAS,EAAA;AAChB,MAAO,OAAA,KAAA,CAAA,CAAA;AAAA,KACT;AACA,IAAa,YAAA,CAAA,GAAA,CAAI,OAAQ,CAAA,qBAAA,EAAuB,CAAA,CAAA;AAAA,GAC/C,EAAA,CAAC,YAAc,EAAA,UAAU,CAAC,CAAA,CAAA;AAE7B,EAAO,OAAA,CAAC,KAAK,KAAK,CAAA,CAAA;AACpB;;;;"}
+{"version":3,"file":"useWidth.js","sources":["../src/responsive/useWidth.ts"],"sourcesContent":["import { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { type RefObject, useCallback, useRef, useState } from \"react\";\nimport {\n  type ResizeHandler,\n  useResizeObserver,\n  WidthOnly,\n} from \"./useResizeObserver\";\n\nconst NONE: string[] = [];\n\nexport function useWidth<Element extends HTMLElement>(\n  responsive: boolean,\n): [RefObject<Element>, number] {\n  const [width, setWidth] = useState<number>();\n  const ref = useRef<HTMLElement>(null);\n\n  const handleResize: ResizeHandler = useCallback(({ width: newWidth }) => {\n    setWidth(newWidth);\n  }, []);\n\n  const measurementsToObserve = responsive ? WidthOnly : NONE;\n  useResizeObserver(ref, measurementsToObserve, handleResize);\n\n  useIsomorphicLayoutEffect(() => {\n    if (!ref.current) {\n      return undefined;\n    }\n    handleResize(ref.current.getBoundingClientRect());\n  }, [handleResize]);\n\n  return [ref, width] as [RefObject<Element>, number];\n}\n"],"names":[],"mappings":";;;;AAQA,MAAM,OAAiB,EAAC;AAEjB,SAAS,SACd,UAAA,EAC8B;AAC9B,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,QAAA,EAAiB;AAC3C,EAAA,MAAM,GAAA,GAAM,OAAoB,IAAI,CAAA;AAEpC,EAAA,MAAM,eAA8B,WAAA,CAAY,CAAC,EAAE,KAAA,EAAO,UAAS,KAAM;AACvE,IAAA,QAAA,CAAS,QAAQ,CAAA;AAAA,EACnB,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,qBAAA,GAAwB,aAAa,SAAA,GAAY,IAAA;AACvD,EAAA,iBAAA,CAAkB,GAAA,EAAK,uBAAuB,YAAY,CAAA;AAE1D,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,CAAC,IAAI,OAAA,EAAS;AAChB,MAAA,OAAO,MAAA;AAAA,IACT;AACA,IAAA,YAAA,CAAa,GAAA,CAAI,OAAA,CAAQ,qBAAA,EAAuB,CAAA;AAAA,EAClD,CAAA,EAAG,CAAC,YAAY,CAAC,CAAA;AAEjB,EAAA,OAAO,CAAC,KAAK,KAAK,CAAA;AACpB;;;;"}

package/dist-es/responsive/utils.js

@@ -4,20 +4,14 @@ const RESPONSIVE_ATTRIBUTE = {
   "data-pad-start": true,
   "data-pad-end": true
 };
-const isResponsiveAttribute = (propName) => {
-  var _a;
-  return (_a = RESPONSIVE_ATTRIBUTE[propName]) != null ? _a : false;
-};
+const isResponsiveAttribute = (propName) => RESPONSIVE_ATTRIBUTE[propName] ?? false;
 const isCollapsible = (propName) => propName === COLLAPSIBLE;
 const COLLAPSIBLE_VALUE = {
   dynamic: "dynamic",
   instant: "instant",
   true: "instant"
 };
-const collapsibleValue = (value) => {
-  var _a;
-  return (_a = COLLAPSIBLE_VALUE[value]) != null ? _a : "none";
-};
+const collapsibleValue = (value) => COLLAPSIBLE_VALUE[value] ?? "none";
 const liftResponsivePropsToFormField = (props) => {
   const propNames = Object.keys(props);
   if (propNames.some(isResponsiveAttribute)) {
@@ -34,9 +28,8 @@ const liftResponsivePropsToFormField = (props) => {
       },
       [{}, {}]
     );
-  } else {
-    return [{}, props];
   }
+  return [{}, props];
 };
 
 export { isResponsiveAttribute, liftResponsivePropsToFormField };

package/dist-es/responsive/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../src/responsive/utils.ts"],"sourcesContent":["const COLLAPSIBLE = \"data-collapsible\";\n\nexport type dataPadDirection = \"data-pad-start\" | \"data-pad-end\";\n\nconst RESPONSIVE_ATTRIBUTE: { [key: string]: boolean } = {\n  [COLLAPSIBLE]: true,\n  \"data-pad-start\": true,\n  \"data-pad-end\": true,\n};\n\nexport const isResponsiveAttribute = (propName: string): boolean =>\n  RESPONSIVE_ATTRIBUTE[propName] ?? false;\n\nconst isCollapsible = (propName: string) => propName === COLLAPSIBLE;\n\nconst COLLAPSIBLE_VALUE: { [key: string]: string } = {\n  dynamic: \"dynamic\",\n  instant: \"instant\",\n  true: \"instant\",\n};\n\nconst collapsibleValue = (value: string) => COLLAPSIBLE_VALUE[value] ?? \"none\";\n\ntype AnyProps = Record<string, unknown>;\ntype ResponsivePropsTuple = [AnyProps, AnyProps];\n/**\n * data- attributes can be used to manage item overflow behaviour. Users may\n * speficy these attributes directly on a Toolbar component, which ultimately\n * gets wrapped by a FormField. We need to 'lift' these attributes to the form\n * field and remove them from the props of the nested component.\n * @param props\n * @returns\n */\nexport const liftResponsivePropsToFormField = (\n  props: AnyProps\n): ResponsivePropsTuple => {\n  const propNames = Object.keys(props);\n  if (propNames.some(isResponsiveAttribute)) {\n    return propNames.reduce<ResponsivePropsTuple>(\n      (tuple, propName): ResponsivePropsTuple => {\n        const [toolbarProps, rest] = tuple;\n        const propValue = props[propName];\n        if (isResponsiveAttribute(propName)) {\n          const value = isCollapsible(propName)\n            ? collapsibleValue(propValue as string)\n            : propValue;\n\n          toolbarProps[propName] = value;\n          rest[propName] = undefined;\n        }\n        return tuple;\n      },\n      [{}, {}]\n    );\n  } else {\n    return [{}, props];\n  }\n};\n"],"names":[],"mappings":"AAAA,MAAM,WAAc,GAAA,kBAAA,CAAA;AAIpB,MAAM,oBAAmD,GAAA;AAAA,EACvD,CAAC,WAAc,GAAA,IAAA;AAAA,EACf,gBAAkB,EAAA,IAAA;AAAA,EAClB,cAAgB,EAAA,IAAA;AAClB,CAAA,CAAA;AAEa,MAAA,qBAAA,GAAwB,CAAC,QAA2B,KAAA;AAVjE,EAAA,IAAA,EAAA,CAAA;AAWE,EAAA,OAAA,CAAA,EAAA,GAAA,oBAAA,CAAqB,cAArB,IAAkC,GAAA,EAAA,GAAA,KAAA,CAAA;AAAA,EAAA;AAEpC,MAAM,aAAA,GAAgB,CAAC,QAAA,KAAqB,QAAa,KAAA,WAAA,CAAA;AAEzD,MAAM,iBAA+C,GAAA;AAAA,EACnD,OAAS,EAAA,SAAA;AAAA,EACT,OAAS,EAAA,SAAA;AAAA,EACT,IAAM,EAAA,SAAA;AACR,CAAA,CAAA;AAEA,MAAM,gBAAA,GAAmB,CAAC,KAAe,KAAA;AArBzC,EAAA,IAAA,EAAA,CAAA;AAqB4C,EAAA,OAAA,CAAA,EAAA,GAAA,iBAAA,CAAkB,WAAlB,IAA4B,GAAA,EAAA,GAAA,MAAA,CAAA;AAAA,CAAA,CAAA;AAY3D,MAAA,8BAAA,GAAiC,CAC5C,KACyB,KAAA;AACzB,EAAM,MAAA,SAAA,GAAY,MAAO,CAAA,IAAA,CAAK,KAAK,CAAA,CAAA;AACnC,EAAI,IAAA,SAAA,CAAU,IAAK,CAAA,qBAAqB,CAAG,EAAA;AACzC,IAAA,OAAO,SAAU,CAAA,MAAA;AAAA,MACf,CAAC,OAAO,QAAmC,KAAA;AACzC,QAAM,MAAA,CAAC,YAAc,EAAA,IAAI,CAAI,GAAA,KAAA,CAAA;AAC7B,QAAA,MAAM,YAAY,KAAM,CAAA,QAAA,CAAA,CAAA;AACxB,QAAI,IAAA,qBAAA,CAAsB,QAAQ,CAAG,EAAA;AACnC,UAAA,MAAM,QAAQ,aAAc,CAAA,QAAQ,CAChC,GAAA,gBAAA,CAAiB,SAAmB,CACpC,GAAA,SAAA,CAAA;AAEJ,UAAA,YAAA,CAAa,QAAY,CAAA,GAAA,KAAA,CAAA;AACzB,UAAA,IAAA,CAAK,QAAY,CAAA,GAAA,KAAA,CAAA,CAAA;AAAA,SACnB;AACA,QAAO,OAAA,KAAA,CAAA;AAAA,OACT;AAAA,MACA,CAAC,EAAI,EAAA,EAAE,CAAA;AAAA,KACT,CAAA;AAAA,GACK,MAAA;AACL,IAAO,OAAA,CAAC,EAAC,EAAG,KAAK,CAAA,CAAA;AAAA,GACnB;AACF;;;;"}
+{"version":3,"file":"utils.js","sources":["../src/responsive/utils.ts"],"sourcesContent":["const COLLAPSIBLE = \"data-collapsible\";\n\nexport type dataPadDirection = \"data-pad-start\" | \"data-pad-end\";\n\nconst RESPONSIVE_ATTRIBUTE: { [key: string]: boolean } = {\n  [COLLAPSIBLE]: true,\n  \"data-pad-start\": true,\n  \"data-pad-end\": true,\n};\n\nexport const isResponsiveAttribute = (propName: string): boolean =>\n  RESPONSIVE_ATTRIBUTE[propName] ?? false;\n\nconst isCollapsible = (propName: string) => propName === COLLAPSIBLE;\n\nconst COLLAPSIBLE_VALUE: { [key: string]: string } = {\n  dynamic: \"dynamic\",\n  instant: \"instant\",\n  true: \"instant\",\n};\n\nconst collapsibleValue = (value: string) => COLLAPSIBLE_VALUE[value] ?? \"none\";\n\ntype AnyProps = Record<string, unknown>;\ntype ResponsivePropsTuple = [AnyProps, AnyProps];\n/**\n * data- attributes can be used to manage item overflow behaviour. Users may\n * speficy these attributes directly on a Toolbar component, which ultimately\n * gets wrapped by a FormField. We need to 'lift' these attributes to the form\n * field and remove them from the props of the nested component.\n * @param props\n * @returns\n */\nexport const liftResponsivePropsToFormField = (\n  props: AnyProps,\n): ResponsivePropsTuple => {\n  const propNames = Object.keys(props);\n  if (propNames.some(isResponsiveAttribute)) {\n    return propNames.reduce<ResponsivePropsTuple>(\n      (tuple, propName): ResponsivePropsTuple => {\n        const [toolbarProps, rest] = tuple;\n        const propValue = props[propName];\n        if (isResponsiveAttribute(propName)) {\n          const value = isCollapsible(propName)\n            ? collapsibleValue(propValue as string)\n            : propValue;\n\n          toolbarProps[propName] = value;\n          rest[propName] = undefined;\n        }\n        return tuple;\n      },\n      [{}, {}],\n    );\n  }\n  return [{}, props];\n};\n"],"names":[],"mappings":"AAAA,MAAM,WAAA,GAAc,kBAAA;AAIpB,MAAM,oBAAA,GAAmD;AAAA,EACvD,CAAC,WAAW,GAAG,IAAA;AAAA,EACf,gBAAA,EAAkB,IAAA;AAAA,EAClB,cAAA,EAAgB;AAClB,CAAA;AAEO,MAAM,qBAAA,GAAwB,CAAC,QAAA,KACpC,oBAAA,CAAqB,QAAQ,CAAA,IAAK;AAEpC,MAAM,aAAA,GAAgB,CAAC,QAAA,KAAqB,QAAA,KAAa,WAAA;AAEzD,MAAM,iBAAA,GAA+C;AAAA,EACnD,OAAA,EAAS,SAAA;AAAA,EACT,OAAA,EAAS,SAAA;AAAA,EACT,IAAA,EAAM;AACR,CAAA;AAEA,MAAM,gBAAA,GAAmB,CAAC,KAAA,KAAkB,iBAAA,CAAkB,KAAK,CAAA,IAAK,MAAA;AAYjE,MAAM,8BAAA,GAAiC,CAC5C,KAAA,KACyB;AACzB,EAAA,MAAM,SAAA,GAAY,MAAA,CAAO,IAAA,CAAK,KAAK,CAAA;AACnC,EAAA,IAAI,SAAA,CAAU,IAAA,CAAK,qBAAqB,CAAA,EAAG;AACzC,IAAA,OAAO,SAAA,CAAU,MAAA;AAAA,MACf,CAAC,OAAO,QAAA,KAAmC;AACzC,QAAA,MAAM,CAAC,YAAA,EAAc,IAAI,CAAA,GAAI,KAAA;AAC7B,QAAA,MAAM,SAAA,GAAY,MAAM,QAAQ,CAAA;AAChC,QAAA,IAAI,qBAAA,CAAsB,QAAQ,CAAA,EAAG;AACnC,UAAA,MAAM,QAAQ,aAAA,CAAc,QAAQ,CAAA,GAChC,gBAAA,CAAiB,SAAmB,CAAA,GACpC,SAAA;AAEJ,UAAA,YAAA,CAAa,QAAQ,CAAA,GAAI,KAAA;AACzB,UAAA,IAAA,CAAK,QAAQ,CAAA,GAAI,MAAA;AAAA,QACnB;AACA,QAAA,OAAO,KAAA;AAAA,MACT,CAAA;AAAA,MACA,CAAC,EAAC,EAAG,EAAE;AAAA,KACT;AAAA,EACF;AACA,EAAA,OAAO,CAAC,EAAC,EAAG,KAAK,CAAA;AACnB;;;;"}

package/dist-es/search-input/SearchInput.js

@@ -1,12 +1,12 @@
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useRef } from 'react';
+import { useIcon, useForkRef, useControlled, Button } from '@salt-ds/core';
+import { SearchIcon } from '@salt-ds/icons';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import { clsx } from 'clsx';
-import { useForkRef, useControlled, Button } from '@salt-ds/core';
+import { forwardRef, useRef } from 'react';
 import { InputLegacy } from '../input-legacy/InputLegacy.js';
 import { StaticInputAdornment } from '../input-legacy/StaticInputAdornment.js';
-import { CloseIcon, SearchIcon } from '@salt-ds/icons';
-import { useWindow } from '@salt-ds/window';
-import { useComponentCssInjection } from '@salt-ds/styles';
 import css_248z from './SearchInput.css.js';
 
 const baseName = "saltSearchInput";
@@ -28,6 +28,7 @@ const SearchInput = forwardRef(
       css: css_248z,
       window: targetWindow
     });
+    const { CloseIcon } = useIcon();
     const inputRef = useRef(null);
     const handleRef = useForkRef(inputRef, ref);
     const [value, setValue, isControlled] = useControlled({
@@ -55,28 +56,33 @@ const SearchInput = forwardRef(
       }
       onKeyUp == null ? void 0 : onKeyUp(event);
     };
-    return /* @__PURE__ */ jsx(InputLegacy, {
-      className: clsx(baseName, className),
-      ref: handleRef,
-      endAdornment: !!value && /* @__PURE__ */ jsx(Button, {
-        className: clsx(`${baseName}-clearButton`),
-        onClick: handleClear,
-        variant: "secondary",
-        children: /* @__PURE__ */ jsx(CloseIcon, {
-          "aria-label": "clear input",
-          className: `${baseName}-clearIcon`
-        })
-      }),
-      onChange: handleChange,
-      onKeyUp: handleKeyUp,
-      startAdornment: IconComponent && /* @__PURE__ */ jsx(StaticInputAdornment, {
-        children: /* @__PURE__ */ jsx(IconComponent, {
-          className: `${baseName}-icon`
-        })
-      }),
-      value: value || "",
-      ...other
-    });
+    return /* @__PURE__ */ jsx(
+      InputLegacy,
+      {
+        className: clsx(baseName, className),
+        ref: handleRef,
+        endAdornment: !!value && /* @__PURE__ */ jsx(
+          Button,
+          {
+            className: clsx(`${baseName}-clearButton`),
+            onClick: handleClear,
+            variant: "secondary",
+            children: /* @__PURE__ */ jsx(
+              CloseIcon,
+              {
+                "aria-label": "clear input",
+                className: `${baseName}-clearIcon`
+              }
+            )
+          }
+        ),
+        onChange: handleChange,
+        onKeyUp: handleKeyUp,
+        startAdornment: IconComponent && /* @__PURE__ */ jsx(StaticInputAdornment, { children: /* @__PURE__ */ jsx(IconComponent, { className: `${baseName}-icon` }) }),
+        value: value || "",
+        ...other
+      }
+    );
   }
 );
 

package/dist-es/search-input/SearchInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.js","sources":["../src/search-input/SearchInput.tsx"],"sourcesContent":["import {\n  ChangeEvent,\n  ComponentType,\n  forwardRef,\n  KeyboardEvent,\n  SyntheticEvent,\n  useRef,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { Button, useControlled, useForkRef } from \"@salt-ds/core\";\nimport {\n  InputLegacy as Input,\n  InputLegacyProps as InputProps,\n  StaticInputAdornment,\n} from \"../input-legacy\";\nimport { CloseIcon, SearchIcon } from \"@salt-ds/icons\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport searchInputCss from \"./SearchInput.css\";\n\nconst baseName = \"saltSearchInput\";\n\n//TODO formfield integration\n\nexport interface SearchInputProps extends Omit<InputProps, \"onSubmit\"> {\n  /**\n   * Override \"search\" icon.\n   * Set to `null` to hide.\n   */\n  IconComponent?: ComponentType<any> | null;\n  /**\n   * Callback for when clear button is clicked.\n   */\n  onClear?: () => void;\n  /**\n   * Callback for change event.\n   * Event is either an Input change event or a Button click event.\n   */\n  onChange?: (event: SyntheticEvent<unknown>, value: string) => void;\n  /**\n   * Callback to trigger search.\n   */\n  onSubmit?: (value: InputProps[\"value\"]) => void;\n}\n\nexport const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(\n  function SearchInput(\n    {\n      IconComponent = SearchIcon,\n      className,\n      onChange,\n      onClear,\n      onKeyUp,\n      onSubmit,\n      value: valueProp,\n      defaultValue,\n      ...other\n    },\n    ref\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-search-input\",\n      css: searchInputCss,\n      window: targetWindow,\n    });\n\n    const inputRef = useRef<HTMLInputElement>(null);\n    const handleRef = useForkRef(inputRef, ref);\n\n    const [value, setValue, isControlled] = useControlled({\n      controlled: valueProp,\n      default: defaultValue,\n      name: \"SearchInput\",\n      state: \"value\",\n    });\n\n    const handleChange = (\n      event: ChangeEvent<HTMLInputElement>,\n      newValue: string\n    ) => {\n      setValue(newValue);\n      onChange?.(event, newValue);\n    };\n\n    const handleClear = (event: SyntheticEvent<HTMLButtonElement>) => {\n      setValue(\"\");\n      if (!isControlled) {\n        onChange?.(event, \"\");\n      }\n      onClear?.();\n      inputRef.current?.focus();\n    };\n\n    const handleKeyUp = (event: KeyboardEvent<HTMLInputElement>) => {\n      if (event.key === \"Enter\" && onSubmit && value) {\n        onSubmit?.(value);\n      }\n\n      onKeyUp?.(event);\n    };\n\n    return (\n      <Input\n        className={clsx(baseName, className)}\n        ref={handleRef}\n        endAdornment={\n          !!value && (\n            <Button\n              className={clsx(`${baseName}-clearButton`)}\n              onClick={handleClear}\n              variant=\"secondary\"\n            >\n              <CloseIcon\n                aria-label=\"clear input\"\n                className={`${baseName}-clearIcon`}\n              />\n            </Button>\n          )\n        }\n        onChange={handleChange}\n        onKeyUp={handleKeyUp}\n        startAdornment={\n          IconComponent && (\n            <StaticInputAdornment>\n              <IconComponent className={`${baseName}-icon`} />\n            </StaticInputAdornment>\n          )\n        }\n        value={value || \"\"}\n        {...other}\n      />\n    );\n  }\n);\n"],"names":["SearchInput","searchInputCss","Input"],"mappings":"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"}
+{"version":3,"file":"SearchInput.js","sources":["../src/search-input/SearchInput.tsx"],"sourcesContent":["import { Button, useControlled, useForkRef, useIcon } from \"@salt-ds/core\";\nimport { SearchIcon } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEvent,\n  type ComponentType,\n  forwardRef,\n  type KeyboardEvent,\n  type SyntheticEvent,\n  useRef,\n} from \"react\";\nimport {\n  InputLegacy as Input,\n  type InputLegacyProps as InputProps,\n  StaticInputAdornment,\n} from \"../input-legacy\";\n\nimport searchInputCss from \"./SearchInput.css\";\n\nconst baseName = \"saltSearchInput\";\n\n//TODO formfield integration\n\nexport interface SearchInputProps extends Omit<InputProps, \"onSubmit\"> {\n  /**\n   * Override \"search\" icon.\n   * Set to `null` to hide.\n   */\n  IconComponent?: ComponentType | null;\n  /**\n   * Callback for when clear button is clicked.\n   */\n  onClear?: () => void;\n  /**\n   * Callback for change event.\n   * Event is either an Input change event or a Button click event.\n   */\n  onChange?: (event: SyntheticEvent<unknown>, value: string) => void;\n  /**\n   * Callback to trigger search.\n   */\n  onSubmit?: (value: InputProps[\"value\"]) => void;\n}\n\nexport const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(\n  function SearchInput(\n    {\n      IconComponent = SearchIcon,\n      className,\n      onChange,\n      onClear,\n      onKeyUp,\n      onSubmit,\n      value: valueProp,\n      defaultValue,\n      ...other\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-search-input\",\n      css: searchInputCss,\n      window: targetWindow,\n    });\n    const { CloseIcon } = useIcon();\n    const inputRef = useRef<HTMLInputElement>(null);\n    const handleRef = useForkRef(inputRef, ref);\n\n    const [value, setValue, isControlled] = useControlled({\n      controlled: valueProp,\n      default: defaultValue,\n      name: \"SearchInput\",\n      state: \"value\",\n    });\n\n    const handleChange = (\n      event: ChangeEvent<HTMLInputElement>,\n      newValue: string,\n    ) => {\n      setValue(newValue);\n      onChange?.(event, newValue);\n    };\n\n    const handleClear = (event: SyntheticEvent<HTMLButtonElement>) => {\n      setValue(\"\");\n      if (!isControlled) {\n        onChange?.(event, \"\");\n      }\n      onClear?.();\n      inputRef.current?.focus();\n    };\n\n    const handleKeyUp = (event: KeyboardEvent<HTMLInputElement>) => {\n      if (event.key === \"Enter\" && onSubmit && value) {\n        onSubmit?.(value);\n      }\n\n      onKeyUp?.(event);\n    };\n\n    return (\n      <Input\n        className={clsx(baseName, className)}\n        ref={handleRef}\n        endAdornment={\n          !!value && (\n            <Button\n              className={clsx(`${baseName}-clearButton`)}\n              onClick={handleClear}\n              variant=\"secondary\"\n            >\n              <CloseIcon\n                aria-label=\"clear input\"\n                className={`${baseName}-clearIcon`}\n              />\n            </Button>\n          )\n        }\n        onChange={handleChange}\n        onKeyUp={handleKeyUp}\n        startAdornment={\n          IconComponent && (\n            <StaticInputAdornment>\n              <IconComponent className={`${baseName}-icon`} />\n            </StaticInputAdornment>\n          )\n        }\n        value={value || \"\"}\n        {...other}\n      />\n    );\n  },\n);\n"],"names":["SearchInput","searchInputCss","Input"],"mappings":"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"}

package/dist-es/static-list/StaticList.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltStaticList {\n  overflow-y: auto;\n  padding: 0;\n  margin: 0;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=StaticList.css.js.map

package/dist-es/static-list/StaticList.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StaticList.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist-es/static-list/StaticList.js

@@ -0,0 +1,23 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import css_248z from './StaticList.css.js';
+
+const withBaseName = makePrefixer("saltStaticList");
+const StaticList = forwardRef(
+  function StaticList2({ children, className, ...rest }, ref) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-static-list",
+      css: css_248z,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsx("ol", { className: clsx(withBaseName(), className), ref, ...rest, children });
+  }
+);
+
+export { StaticList };
+//# sourceMappingURL=StaticList.js.map

package/dist-es/static-list/StaticList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StaticList.js","sources":["../src/static-list/StaticList.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n} from \"react\";\n\nimport staticListCss from \"./StaticList.css\";\n\nconst withBaseName = makePrefixer(\"saltStaticList\");\n\nexport interface StaticListProps extends ComponentPropsWithoutRef<\"ul\"> {\n  /**\n   * The list items to be rendered within the StaticList.\n   */\n  children: ReactNode;\n}\n\nexport const StaticList = forwardRef<HTMLOListElement, StaticListProps>(\n  function StaticList({ children, className, ...rest }, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-static-list\",\n      css: staticListCss,\n      window: targetWindow,\n    });\n\n    return (\n      <ol className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n        {children}\n      </ol>\n    );\n  },\n);\n"],"names":["StaticList","staticListCss"],"mappings":";;;;;;;;AAYA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA;AAS3C,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,SAASA,YAAW,EAAE,QAAA,EAAU,WAAW,GAAG,IAAA,IAAQ,GAAA,EAAK;AACzD,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,kBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,uBACE,GAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA,EAAG,GAAA,EAAW,GAAG,IAAA,EAC3D,QAAA,EACH,CAAA;AAAA,EAEJ;AACF;;;;"}

package/dist-es/static-list/StaticListItem.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltStaticListItem {\n  list-style-type: none;\n  display: flex;\n  gap: var(--salt-spacing-100);\n  box-sizing: border-box;\n  padding: var(--salt-spacing-50) var(--salt-spacing-100);\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n}\n\n.saltStaticListItem > .saltIcon {\n  /* Workaround to ensure the icon and button are aligned.*/\n  min-height: var(--salt-size-base);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=StaticListItem.css.js.map

package/dist-es/static-list/StaticListItem.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StaticListItem.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist-es/static-list/StaticListItem.js

@@ -0,0 +1,24 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import css_248z from './StaticListItem.css.js';
+
+const withBaseName = makePrefixer("saltStaticListItem");
+const StaticListItem = forwardRef(
+  function StaticListItem2(props, ref) {
+    const { className, children, ...restProps } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-static-list-item",
+      css: css_248z,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsx("li", { className: clsx(withBaseName(), className), ref, ...restProps, children });
+  }
+);
+
+export { StaticListItem };
+//# sourceMappingURL=StaticListItem.js.map

package/dist-es/static-list/StaticListItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StaticListItem.js","sources":["../src/static-list/StaticListItem.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\n\nimport staticListItemCss from \"./StaticListItem.css\";\n\nconst withBaseName = makePrefixer(\"saltStaticListItem\");\n\nexport interface StaticListItemProps extends ComponentPropsWithoutRef<\"li\"> {}\n\nexport const StaticListItem = forwardRef<HTMLLIElement, StaticListItemProps>(\n  function StaticListItem(props, ref) {\n    const { className, children, ...restProps } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-static-list-item\",\n      css: staticListItemCss,\n      window: targetWindow,\n    });\n\n    return (\n      <li className={clsx(withBaseName(), className)} ref={ref} {...restProps}>\n        {children}\n      </li>\n    );\n  },\n);\n"],"names":["StaticListItem","staticListItemCss"],"mappings":";;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA;AAI/C,MAAM,cAAA,GAAiB,UAAA;AAAA,EAC5B,SAASA,eAAAA,CAAe,KAAA,EAAO,GAAA,EAAK;AAClC,IAAA,MAAM,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,WAAU,GAAI,KAAA;AAE9C,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,uBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,uBACE,GAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA,EAAG,GAAA,EAAW,GAAG,SAAA,EAC3D,QAAA,EACH,CAAA;AAAA,EAEJ;AACF;;;;"}

package/dist-es/static-list/StaticListItemContent.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltStaticListItemContent {\n  flex: 1 0;\n  margin: var(--salt-spacing-75) 0;\n  color: var(--salt-content-primary-foreground);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  font-family: var(--salt-text-fontFamily);\n  line-height: var(--salt-text-lineHeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=StaticListItemContent.css.js.map

package/dist-es/static-list/StaticListItemContent.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StaticListItemContent.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist-es/static-list/StaticListItemContent.js

@@ -0,0 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import css_248z from './StaticListItemContent.css.js';
+
+const withBaseName = makePrefixer("saltStaticListItemContent");
+const StaticListItemContent = forwardRef(function StaticListItemContent2({ children, className, ...restProps }, ref) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-static-list-item-content",
+    css: css_248z,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsx("div", { className: clsx(withBaseName(), className), ...restProps, ref, children });
+});
+
+export { StaticListItemContent };
+//# sourceMappingURL=StaticListItemContent.js.map

package/dist-es/static-list/StaticListItemContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StaticListItemContent.js","sources":["../src/static-list/StaticListItemContent.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n} from \"react\";\nimport staticListItemContent from \"./StaticListItemContent.css\";\n\nconst withBaseName = makePrefixer(\"saltStaticListItemContent\");\n\nexport interface StaticListItemContentProps\n  extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The content of Static List Item\n   */\n  children?: ReactNode;\n}\n\nexport const StaticListItemContent = forwardRef<\n  HTMLDivElement,\n  StaticListItemContentProps\n>(function StaticListItemContent({ children, className, ...restProps }, ref) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-static-list-item-content\",\n    css: staticListItemContent,\n    window: targetWindow,\n  });\n\n  return (\n    <div className={clsx(withBaseName(), className)} {...restProps} ref={ref}>\n      {children}\n    </div>\n  );\n});\n"],"names":["StaticListItemContent","staticListItemContent"],"mappings":";;;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,2BAA2B,CAAA;AAUtD,MAAM,qBAAA,GAAwB,UAAA,CAGnC,SAASA,sBAAAA,CAAsB,EAAE,UAAU,SAAA,EAAW,GAAG,SAAA,EAAU,EAAG,GAAA,EAAK;AAC3E,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,+BAAA;AAAA,IACR,GAAA,EAAKC,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA,EAAI,GAAG,SAAA,EAAW,GAAA,EAC7D,QAAA,EACH,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/system-status/SystemStatus.css.js

@@ -0,0 +1,4 @@
+var css_248z = "/* Styles applied to root component */\n.saltSystemStatus {\n  background: var(--saltSystemStatus-background, var(--systemStatus-background));\n  border-color: var(--saltSystemStatus-borderColor, var(--systemStatus-borderColor));\n  border-width: var(--saltSystemStatus-borderWidth, var(--salt-size-fixed-100));\n  border-style: var(--saltSystemStatus-borderStyle, var(--salt-borderStyle-solid));\n  box-sizing: border-box;\n  display: flex;\n  gap: var(--salt-spacing-75);\n  padding: var(--saltSystemStatus-padding, var(--salt-spacing-100) var(--salt-layout-page-margin));\n  width: 100%;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n}\n\n/* Styles applied to icon */\n.saltSystemStatus-icon.saltIcon {\n  min-height: var(--salt-size-base);\n  --saltIcon-color: var(--salt-content-bold-foreground);\n}\n\n/* Styles applied when state = \"info\" */\n.saltSystemStatus-info {\n  --systemStatus-borderColor: var(--salt-status-info-bold-background);\n  --systemStatus-background: var(--salt-status-info-bold-background);\n}\n\n/* Styles applied when state = \"error\" */\n.saltSystemStatus-error {\n  --systemStatus-borderColor: var(--salt-status-error-bold-background);\n  --systemStatus-background: var(--salt-status-error-bold-background);\n}\n\n/* Styles applied when state = \"warning\" */\n.saltSystemStatus-warning {\n  --systemStatus-borderColor: var(--salt-status-warning-bold-background);\n  --systemStatus-background: var(--salt-status-warning-bold-background);\n}\n\n/* Styles applied when state = \"success\" */\n.saltSystemStatus-success {\n  --systemStatus-borderColor: var(--salt-status-success-bold-background);\n  --systemStatus-background: var(--salt-status-success-bold-background);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=SystemStatus.css.js.map

package/dist-es/system-status/SystemStatus.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SystemStatus.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist-es/system-status/SystemStatus.js

@@ -0,0 +1,35 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { makePrefixer, StatusIndicator } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import css_248z from './SystemStatus.css.js';
+
+const withBaseName = makePrefixer("saltSystemStatus");
+const SystemStatus = forwardRef(
+  function SystemStatus2({ children, className, status = "info", ...rest }, ref) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-system-status",
+      css: css_248z,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: clsx(withBaseName(), withBaseName(status), className),
+        ref,
+        role: "status",
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(StatusIndicator, { status, className: withBaseName("icon") }),
+          children
+        ]
+      }
+    );
+  }
+);
+
+export { SystemStatus };
+//# sourceMappingURL=SystemStatus.js.map

package/dist-es/system-status/SystemStatus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SystemStatus.js","sources":["../src/system-status/SystemStatus.tsx"],"sourcesContent":["import {\n  makePrefixer,\n  StatusIndicator,\n  type ValidationStatus,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type HTMLAttributes } from \"react\";\n\nimport systemStatusCss from \"./SystemStatus.css\";\n\nexport interface SystemStatusProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   *  A string to determine the current state of the SystemStatus. Defaults to `info`.\n   */\n  status?: ValidationStatus;\n}\n\nconst withBaseName = makePrefixer(\"saltSystemStatus\");\n\nexport const SystemStatus = forwardRef<HTMLDivElement, SystemStatusProps>(\n  function SystemStatus(\n    { children, className, status = \"info\", ...rest },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-system-status\",\n      css: systemStatusCss,\n      window: targetWindow,\n    });\n\n    return (\n      <div\n        className={clsx(withBaseName(), withBaseName(status), className)}\n        ref={ref}\n        role=\"status\"\n        {...rest}\n      >\n        <StatusIndicator status={status} className={withBaseName(\"icon\")} />\n        {children}\n      </div>\n    );\n  },\n);\n"],"names":["SystemStatus","systemStatusCss"],"mappings":";;;;;;;;AAmBA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA;AAE7C,MAAM,YAAA,GAAe,UAAA;AAAA,EAC1B,SAASA,aAAAA,CACP,EAAE,QAAA,EAAU,SAAA,EAAW,SAAS,MAAA,EAAQ,GAAG,IAAA,EAAK,EAChD,GAAA,EACA;AACA,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,oBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,WAAW,IAAA,CAAK,YAAA,IAAgB,YAAA,CAAa,MAAM,GAAG,SAAS,CAAA;AAAA,QAC/D,GAAA;AAAA,QACA,IAAA,EAAK,QAAA;AAAA,QACJ,GAAG,IAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,eAAA,EAAA,EAAgB,MAAA,EAAgB,SAAA,EAAW,YAAA,CAAa,MAAM,CAAA,EAAG,CAAA;AAAA,UACjE;AAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;;;;"}