@hitachivantara/uikit-react-core 5.87.2 → 5.88.0

package/dist/esm/hooks/useFocus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFocus.js","sources":["../../../src/hooks/useFocus.ts"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { getDocument } from \"../utils/document\";\n\n/** server-side safe `document.activeElement` wrapper */\nconst getActiveEl = () => getDocument()?.activeElement || null;\n\nfunction makeFocusUtils(containerRef: React.RefObject<HTMLElement>) {\n  function focus(el?: Element | null, checkFocus = true) {\n    if (!checkFocus || containerRef.current?.contains(getActiveEl())) {\n      (el as HTMLElement)?.focus();\n    }\n  }\n\n  return {\n    focusPrevious() {\n      focus(getActiveEl()?.previousElementSibling);\n    },\n    focusNext() {\n      focus(getActiveEl()?.nextElementSibling);\n    },\n    focusFirst() {\n      focus(getActiveEl()?.parentElement?.firstElementChild);\n    },\n    focusLast() {\n      focus(getActiveEl()?.parentElement?.lastElementChild);\n    },\n    focusChild(index: number) {\n      focus(containerRef.current?.children[index], false);\n    },\n    focusSibling(index: number) {\n      focus(getActiveEl()?.parentElement?.children[index]);\n    },\n  };\n}\n\nexport function useFocus({\n  containerRef,\n}: {\n  containerRef: React.RefObject<HTMLElement>;\n}) {\n  return useMemo(() => makeFocusUtils(containerRef), [containerRef]);\n}\n"],"names":[],"mappings":";;AAKA,MAAM,cAAc,MAAM,eAAe,iBAAiB;AAE1D,SAAS,eAAe,cAA4C;AACzD,WAAA,MAAM,IAAqB,aAAa,MAAM;AACrD,QAAI,CAAC,cAAc,aAAa,SAAS,SAAS,YAAA,CAAa,GAAG;AAC/D,UAAoB,MAAM;AAAA,IAAA;AAAA,EAC7B;AAGK,SAAA;AAAA,IACL,gBAAgB;AACR,YAAA,eAAe,sBAAsB;AAAA,IAC7C;AAAA,IACA,YAAY;AACJ,YAAA,eAAe,kBAAkB;AAAA,IACzC;AAAA,IACA,aAAa;AACL,YAAA,YAAA,GAAe,eAAe,iBAAiB;AAAA,IACvD;AAAA,IACA,YAAY;AACJ,YAAA,YAAA,GAAe,eAAe,gBAAgB;AAAA,IACtD;AAAA,IACA,WAAW,OAAe;AACxB,YAAM,aAAa,SAAS,SAAS,KAAK,GAAG,KAAK;AAAA,IACpD;AAAA,IACA,aAAa,OAAe;AAC1B,YAAM,YAAY,GAAG,eAAe,SAAS,KAAK,CAAC;AAAA,IAAA;AAAA,EAEvD;AACF;AAEO,SAAS,SAAS;AAAA,EACvB;AACF,GAEG;AACD,SAAO,QAAQ,MAAM,eAAe,YAAY,GAAG,CAAC,YAAY,CAAC;AACnE;"}

package/dist/esm/hooks/useScrollTo.js.map

@@ -1 +1 @@
-{"version":3,"file":"useScrollTo.js","sources":["../../../src/hooks/useScrollTo.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { HvScrollToOption } from \"../types/scroll\";\nimport {\n  findFirstVisibleElement,\n  getScrollTop,\n  isScrolledToTheBottom,\n  scrollElement,\n  verticalScrollOffset,\n} from \"../utils/scroll\";\n\ninterface HvScrollToOptionWithLink extends HvScrollToOption {\n  href: string;\n}\n\nexport const useScrollTo = (\n  selectedIndexProp = 0,\n  scrollElementId: string | undefined = undefined,\n  navigationMode: \"push\" | \"replace\" | \"none\" = \"push\",\n  relativeLinks = false,\n  offset = 0,\n  options: HvScrollToOption[] = [],\n  onChange:\n    | ((\n        event:\n          | Event\n          | React.MouseEvent<HTMLDivElement | HTMLAnchorElement>\n          | React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement>,\n        index: number,\n      ) => void)\n    | undefined = undefined,\n  direction: \"column\" | \"row\" = \"column\",\n): [\n  number,\n  (\n    event:\n      | React.MouseEvent<HTMLDivElement | HTMLAnchorElement>\n      | React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement>,\n    id: string,\n    index: number,\n    wrappedOnChange?: (index: number) => void,\n  ) => void,\n  HvScrollToOptionWithLink[],\n] => {\n  const RETRY_MAX: number = 5;\n  const [selectedIndex, setSelectedIndex] = useState<number>(selectedIndexProp);\n\n  const scrollEle = useRef<HTMLElement | (Window & typeof globalThis) | null>(\n    typeof window !== \"undefined\" ? window : null,\n  );\n  const requestedAnimationFrame = useRef(0);\n  const lastContainerScrollTop = useRef<number>(0);\n\n  // Ref to use a often-changing value in useCallback, as recommended in\n  // https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback\n  const selectedIndexRef = useRef(selectedIndex);\n\n  useEffect(() => {\n    selectedIndexRef.current = selectedIndex;\n  }, [selectedIndex]);\n\n  useEffect(() => {\n    if (typeof window !== \"undefined\") {\n      scrollEle.current =\n        (scrollElementId && document.getElementById(scrollElementId)) || window;\n\n      lastContainerScrollTop.current = verticalScrollOffset(scrollEle.current);\n    }\n  }, [scrollElementId]);\n\n  const checkScroll = useCallback(\n    (\n      event:\n        | Event\n        | React.MouseEvent<HTMLDivElement>\n        | React.KeyboardEvent<HTMLDivElement>,\n    ) => {\n      if (\n        requestedAnimationFrame.current === 0 &&\n        window?.requestAnimationFrame\n      ) {\n        requestedAnimationFrame.current = window.requestAnimationFrame(() => {\n          requestedAnimationFrame.current = 0;\n\n          const firstVisibleElementIndex = findFirstVisibleElement(\n            scrollEle.current,\n            options,\n            offset,\n          );\n\n          let newSelectedIndex = firstVisibleElementIndex;\n\n          // select the first element when all elements are bellow the container's top\n          if (firstVisibleElementIndex < 0) {\n            newSelectedIndex = 0;\n          }\n\n          // if the user has reached the bottom of the container, select the first nav item still visible\n          // (usually this selects the last nav item, when it can't reach the top the container)\n          // in theory only needed when scrolling down, but no... because of the Safari bouncing behaviour\n          if (\n            newSelectedIndex < options.length - 1 &&\n            isScrolledToTheBottom(scrollEle.current)\n          ) {\n            newSelectedIndex += 1;\n          }\n\n          const containerScrollTop = getScrollTop(scrollEle.current);\n          const isScrollingDown =\n            containerScrollTop > lastContainerScrollTop.current;\n          lastContainerScrollTop.current = containerScrollTop;\n\n          // only update the selected item if the scroll direction is moving away from it\n          if (isScrollingDown) {\n            if (newSelectedIndex < selectedIndexRef.current) {\n              newSelectedIndex = selectedIndexRef.current;\n            }\n          } else if (newSelectedIndex > selectedIndexRef.current) {\n            newSelectedIndex = selectedIndexRef.current;\n          }\n\n          setSelectedIndex(newSelectedIndex);\n          onChange?.(event, newSelectedIndex);\n        });\n      }\n    },\n    [offset, options, onChange],\n  );\n\n  // Registers and unregisters the scroll listener\n  useEffect(() => {\n    if (scrollEle.current) {\n      scrollEle.current.addEventListener(\"scroll\", checkScroll, false);\n    }\n\n    return () => {\n      if (scrollEle.current) {\n        scrollEle.current.removeEventListener(\"scroll\", checkScroll);\n      }\n\n      if (requestedAnimationFrame.current !== 0) {\n        window.cancelAnimationFrame(requestedAnimationFrame.current);\n        requestedAnimationFrame.current = 0;\n      }\n    };\n  }, [checkScroll]);\n\n  // Waits for the elements to be rendered and scrolls to the one referenced in the URL hash, if any\n  useEffect(() => {\n    let checkRenderedInterval: any;\n\n    if (navigationMode !== \"none\") {\n      const hashValue = document.location.hash.split(\"#\")[1] || \"\";\n\n      const option = options.find((o) => o.value === hashValue);\n\n      if (option) {\n        let retry = 0;\n        checkRenderedInterval = setInterval(() => {\n          const ele = document.getElementById(option.value);\n\n          if (ele) {\n            scrollElement(ele, scrollEle.current, option.offset || offset);\n            clearInterval(checkRenderedInterval);\n          } else {\n            retry += 1;\n            if (retry === RETRY_MAX) {\n              clearInterval(checkRenderedInterval);\n            }\n          }\n        }, 1000);\n      }\n    }\n\n    return () => {\n      clearInterval(checkRenderedInterval);\n    };\n\n    // We really want to run this just in the first load\n    // in fact this doesn't even belong here, the logic should be external\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const baseUrl =\n    relativeLinks || typeof window === \"undefined\" || window == null\n      ? \"\"\n      : window.location.href.split(\"#\")[0];\n\n  const elements = useMemo(\n    () =>\n      options.map((o) => ({\n        ...o,\n        href: `${baseUrl}#${o.value}`,\n      })),\n    [options, baseUrl],\n  );\n\n  const setScrollTo = useCallback(\n    (\n      event:\n        | React.MouseEvent<HTMLDivElement | HTMLAnchorElement>\n        | React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement>,\n      id: string,\n      index: number,\n      wrappedOnChange?: (index: number) => void,\n    ) => {\n      const option = elements.find((o) => o.value === id);\n\n      if (option) {\n        const ele = document.getElementById(id);\n        if (ele) {\n          scrollElement(\n            ele,\n            scrollEle.current,\n            option.offset || offset,\n            direction,\n          );\n        }\n\n        if (navigationMode === \"push\") {\n          window.history.pushState({}, \"\", option.href);\n        } else if (navigationMode === \"replace\") {\n          window.history.replaceState({}, \"\", option.href);\n        }\n\n        setSelectedIndex(index);\n        wrappedOnChange?.(index);\n\n        // Safari scrolls immediately (no smooth scroll support),\n        // so this ref value must be updated asap\n        selectedIndexRef.current = index;\n      }\n    },\n    [elements, navigationMode, direction, offset],\n  );\n\n  return [selectedIndex, setScrollTo, elements];\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useScrollTo.js","sources":["../../../src/hooks/useScrollTo.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { HvScrollToOption } from \"../types/scroll\";\nimport {\n  findFirstVisibleElement,\n  getScrollTop,\n  isScrolledToTheBottom,\n  scrollElement,\n  verticalScrollOffset,\n} from \"../utils/scroll\";\n\ninterface HvScrollToOptionWithLink extends HvScrollToOption {\n  href: string;\n}\n\nexport const useScrollTo = (\n  selectedIndexProp = 0,\n  scrollElementId: string | undefined = undefined,\n  navigationMode: \"push\" | \"replace\" | \"none\" = \"push\",\n  relativeLinks = false,\n  offset = 0,\n  options: HvScrollToOption[] = [],\n  onChange:\n    | ((\n        event:\n          | Event\n          | React.MouseEvent<HTMLDivElement | HTMLAnchorElement>\n          | React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement>,\n        index: number,\n      ) => void)\n    | undefined = undefined,\n  direction: \"column\" | \"row\" = \"column\",\n): [\n  number,\n  (\n    event:\n      | React.MouseEvent<HTMLDivElement | HTMLAnchorElement>\n      | React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement>,\n    id: string,\n    index: number,\n    wrappedOnChange?: (index: number) => void,\n  ) => void,\n  HvScrollToOptionWithLink[],\n] => {\n  const RETRY_MAX: number = 5;\n  const [selectedIndex, setSelectedIndex] = useState<number>(selectedIndexProp);\n\n  const scrollEle = useRef<HTMLElement | (Window & typeof globalThis) | null>(\n    typeof window !== \"undefined\" ? window : null,\n  );\n  const requestedAnimationFrame = useRef(0);\n  const lastContainerScrollTop = useRef<number>(0);\n\n  // Ref to use a often-changing value in useCallback, as recommended in\n  // https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback\n  const selectedIndexRef = useRef(selectedIndex);\n\n  useEffect(() => {\n    selectedIndexRef.current = selectedIndex;\n  }, [selectedIndex]);\n\n  useEffect(() => {\n    if (typeof window !== \"undefined\") {\n      scrollEle.current =\n        (scrollElementId && document.getElementById(scrollElementId)) || window;\n\n      lastContainerScrollTop.current = verticalScrollOffset(scrollEle.current);\n    }\n  }, [scrollElementId]);\n\n  const checkScroll = useCallback(\n    (\n      event:\n        | Event\n        | React.MouseEvent<HTMLDivElement>\n        | React.KeyboardEvent<HTMLDivElement>,\n    ) => {\n      if (\n        requestedAnimationFrame.current === 0 &&\n        window?.requestAnimationFrame\n      ) {\n        requestedAnimationFrame.current = window.requestAnimationFrame(() => {\n          requestedAnimationFrame.current = 0;\n\n          const firstVisibleElementIndex = findFirstVisibleElement(\n            scrollEle.current,\n            options,\n            offset,\n          );\n\n          let newSelectedIndex = firstVisibleElementIndex;\n\n          // select the first element when all elements are bellow the container's top\n          if (firstVisibleElementIndex < 0) {\n            newSelectedIndex = 0;\n          }\n\n          // if the user has reached the bottom of the container, select the first nav item still visible\n          // (usually this selects the last nav item, when it can't reach the top the container)\n          // in theory only needed when scrolling down, but no... because of the Safari bouncing behaviour\n          if (\n            newSelectedIndex < options.length - 1 &&\n            isScrolledToTheBottom(scrollEle.current)\n          ) {\n            newSelectedIndex += 1;\n          }\n\n          const containerScrollTop = getScrollTop(scrollEle.current);\n          const isScrollingDown =\n            containerScrollTop > lastContainerScrollTop.current;\n          lastContainerScrollTop.current = containerScrollTop;\n\n          // only update the selected item if the scroll direction is moving away from it\n          if (isScrollingDown) {\n            if (newSelectedIndex < selectedIndexRef.current) {\n              newSelectedIndex = selectedIndexRef.current;\n            }\n          } else if (newSelectedIndex > selectedIndexRef.current) {\n            newSelectedIndex = selectedIndexRef.current;\n          }\n\n          setSelectedIndex(newSelectedIndex);\n          onChange?.(event, newSelectedIndex);\n        });\n      }\n    },\n    [offset, options, onChange],\n  );\n\n  // Registers and unregisters the scroll listener\n  useEffect(() => {\n    if (scrollEle.current) {\n      scrollEle.current.addEventListener(\"scroll\", checkScroll, false);\n    }\n\n    return () => {\n      if (scrollEle.current) {\n        scrollEle.current.removeEventListener(\"scroll\", checkScroll);\n      }\n\n      if (requestedAnimationFrame.current !== 0) {\n        window.cancelAnimationFrame(requestedAnimationFrame.current);\n        requestedAnimationFrame.current = 0;\n      }\n    };\n  }, [checkScroll]);\n\n  // Waits for the elements to be rendered and scrolls to the one referenced in the URL hash, if any\n  useEffect(() => {\n    let checkRenderedInterval: any;\n\n    if (navigationMode !== \"none\") {\n      const hashValue = document.location.hash.split(\"#\")[1] || \"\";\n\n      const option = options.find((o) => o.value === hashValue);\n\n      if (option) {\n        let retry = 0;\n        checkRenderedInterval = setInterval(() => {\n          const ele = document.getElementById(option.value);\n\n          if (ele) {\n            scrollElement(ele, scrollEle.current, option.offset || offset);\n            clearInterval(checkRenderedInterval);\n          } else {\n            retry += 1;\n            if (retry === RETRY_MAX) {\n              clearInterval(checkRenderedInterval);\n            }\n          }\n        }, 1000);\n      }\n    }\n\n    return () => {\n      clearInterval(checkRenderedInterval);\n    };\n\n    // We really want to run this just in the first load\n    // in fact this doesn't even belong here, the logic should be external\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const baseUrl =\n    relativeLinks || typeof window === \"undefined\" || window == null\n      ? \"\"\n      : window.location.href.split(\"#\")[0];\n\n  const elements = useMemo(\n    () =>\n      options.map((o) => ({\n        ...o,\n        href: `${baseUrl}#${o.value}`,\n      })),\n    [options, baseUrl],\n  );\n\n  const setScrollTo = useCallback(\n    (\n      event:\n        | React.MouseEvent<HTMLDivElement | HTMLAnchorElement>\n        | React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement>,\n      id: string,\n      index: number,\n      wrappedOnChange?: (index: number) => void,\n    ) => {\n      const option = elements.find((o) => o.value === id);\n\n      if (option) {\n        const ele = document.getElementById(id);\n        if (ele) {\n          scrollElement(\n            ele,\n            scrollEle.current,\n            option.offset || offset,\n            direction,\n          );\n        }\n\n        if (navigationMode === \"push\") {\n          window.history.pushState({}, \"\", option.href);\n        } else if (navigationMode === \"replace\") {\n          window.history.replaceState({}, \"\", option.href);\n        }\n\n        setSelectedIndex(index);\n        wrappedOnChange?.(index);\n\n        // Safari scrolls immediately (no smooth scroll support),\n        // so this ref value must be updated asap\n        selectedIndexRef.current = index;\n      }\n    },\n    [elements, navigationMode, direction, offset],\n  );\n\n  return [selectedIndex, setScrollTo, elements];\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/utils/CounterLabel.js

@@ -2,9 +2,10 @@ import { jsxs, jsx } from "react/jsx-runtime";
 const CounterLabel = ({
   selected,
   total,
-  conjunctionLabel = "/"
+  conjunctionLabel = "/",
+  ...others
 }) => {
-  return /* @__PURE__ */ jsxs("span", { children: [
+  return /* @__PURE__ */ jsxs("span", { ...others, children: [
     /* @__PURE__ */ jsx("b", { children: selected }),
     " ",
     ` ${conjunctionLabel} ${total}`

package/dist/esm/utils/CounterLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"CounterLabel.js","sources":["../../../src/utils/CounterLabel.tsx"],"sourcesContent":["/** A utility counter component (eg. X / Y) */\nexport const CounterLabel = ({\n  selected,\n  total,\n  conjunctionLabel = \"/\",\n}: {\n  selected: number;\n  total: number;\n  conjunctionLabel?: React.ReactNode;\n}) => {\n  return (\n    <span>\n      <b>{selected}</b> {` ${conjunctionLabel} ${total}`}\n    </span>\n  );\n};\n"],"names":[],"mappings":";AACO,MAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,mBAAmB;AACrB,MAIM;AACJ,8BACG,QACC,EAAA,UAAA;AAAA,IAAA,oBAAC,OAAG,UAAS,SAAA,CAAA;AAAA,IAAI;AAAA,IAAE,IAAI,gBAAgB,IAAI,KAAK;AAAA,EAAA,GAClD;AAEJ;"}
+{"version":3,"file":"CounterLabel.js","sources":["../../../src/utils/CounterLabel.tsx"],"sourcesContent":["interface CounterLabelProps extends React.HTMLAttributes<HTMLSpanElement> {\n  selected: React.ReactNode;\n  total: React.ReactNode;\n  conjunctionLabel?: React.ReactNode;\n}\n\n/** A utility counter component (eg. X / Y) @private */\nexport const CounterLabel = ({\n  selected,\n  total,\n  conjunctionLabel = \"/\",\n  ...others\n}: CounterLabelProps) => {\n  return (\n    <span {...others}>\n      <b>{selected}</b> {` ${conjunctionLabel} ${total}`}\n    </span>\n  );\n};\n"],"names":[],"mappings":";AAOO,MAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB,GAAG;AACL,MAAyB;AAErB,SAAA,qBAAC,QAAM,EAAA,GAAG,QACR,UAAA;AAAA,IAAA,oBAAC,OAAG,UAAS,SAAA,CAAA;AAAA,IAAI;AAAA,IAAE,IAAI,gBAAgB,IAAI,KAAK;AAAA,EAAA,GAClD;AAEJ;"}

package/dist/esm/utils/document.js.map

@@ -1 +1 @@
-{"version":3,"file":"document.js","sources":["../../../src/utils/document.ts"],"sourcesContent":["export function getDocument() {\n  return typeof window !== \"undefined\" ? document : undefined;\n}\n\n/** Wrapper around `document.getElementById` */\nexport function getElementById(elementId?: string) {\n  return (elementId && getDocument()?.getElementById(elementId)) || undefined;\n}\n\n/** Get a container element by id, falling back to document-body */\nexport function getContainerElement(elementId?: string) {\n  return getElementById(elementId) || getDocument()?.body;\n}\n"],"names":[],"mappings":"AAAO,SAAS,cAAc;AACrB,SAAA,OAAO,WAAW,cAAc,WAAW;AACpD;AAGO,SAAS,eAAe,WAAoB;AACjD,SAAQ,aAAa,YAAe,GAAA,eAAe,SAAS,KAAM;AACpE;AAGO,SAAS,oBAAoB,WAAoB;AACtD,SAAO,eAAe,SAAS,KAAK,YAAe,GAAA;AACrD;"}
+{"version":3,"file":"document.js","sources":["../../../src/utils/document.ts"],"sourcesContent":["export function getDocument() {\n  return typeof window !== \"undefined\" ? document : undefined;\n}\n\n/** Wrapper around `document.getElementById` */\nexport function getElementById(elementId?: string) {\n  return (elementId && getDocument()?.getElementById(elementId)) || undefined;\n}\n\n/** Get a container element by id, falling back to document-body */\nexport function getContainerElement(elementId?: string) {\n  return getElementById(elementId) || getDocument()?.body;\n}\n"],"names":[],"mappings":"AAAO,SAAS,cAAc;AACrB,SAAA,OAAO,WAAW,cAAc,WAAW;AACpD;AAGO,SAAS,eAAe,WAAoB;AACjD,SAAQ,aAAa,YAAA,GAAe,eAAe,SAAS,KAAM;AACpE;AAGO,SAAS,oBAAoB,WAAoB;AACtD,SAAO,eAAe,SAAS,KAAK,YAAe,GAAA;AACrD;"}

package/dist/esm/utils/focusUtils.js

@@ -1,8 +1,4 @@
 const outlineStyles = {
-  outlineColor: "#52A8EC",
-  outlineStyle: "solid",
-  outlineWidth: "0px",
-  outlineOffset: "-1px",
   boxShadow: "0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)"
 };
 export {

package/dist/esm/utils/focusUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"focusUtils.js","sources":["../../../src/utils/focusUtils.ts"],"sourcesContent":["export const outlineStyles = {\n  outlineColor: \"#52A8EC\",\n  outlineStyle: \"solid\",\n  outlineWidth: \"0px\",\n  outlineOffset: \"-1px\",\n  boxShadow: \"0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)\",\n};\n"],"names":[],"mappings":"AAAO,MAAM,gBAAgB;AAAA,EAC3B,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,eAAe;AAAA,EACf,WAAW;AACb;"}
+{"version":3,"file":"focusUtils.js","sources":["../../../src/utils/focusUtils.ts"],"sourcesContent":["export const outlineStyles = {\n  boxShadow: \"0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)\",\n};\n"],"names":[],"mappings":"AAAO,MAAM,gBAAgB;AAAA,EAC3B,WAAW;AACb;"}