@selfdecode/sd-component-library 4.0.73-vite17-no-postcss → 4.0.73-vite19

package/lib/sd-component-library3.js.map

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library3.js","sources":["../src/core/custom-hooks.ts"],"sourcesContent":["import {\n  Dispatch,\n  RefObject,\n  SetStateAction,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { disableBodyScroll, enableBodyScroll } from \"body-scroll-lock\";\nimport { debounce } from \"lodash-es\";\n\nimport theme from \"./theme\";\n\n/**\n * A custom useState hook function, that automatically\n * updates the state whenever the dependency param changes\n *\n * Note that, for maximum performance, dependency should be\n * the result of calling useMemo or useCallback: otherwise,\n * the state would be reseted on each render of the component\n * @param dependency\n */\nexport const useDependantState = <D>(\n  dependency: D\n): [D, Dispatch<SetStateAction<D>>] => {\n  const [state, setState] = useState<D>(dependency);\n\n  useEffect(() => {\n    setState(dependency);\n  }, [dependency]);\n\n  return [state, setState];\n};\n\n/**\n * The useCarousel hook\n */\nexport const useCarousel = (\n  itemWidth: number,\n  amountOfItems: number,\n  spacing: number\n): {\n  ref: any;\n  leftIsDisabled: boolean;\n  rightIsDisabled: boolean;\n  swipe: (direction: 1 | -1) => void;\n} => {\n  const [currentIndex, setCurrentIndex] = useState(0);\n  const [divElem, setDivElem] = useState<HTMLDivElement | null>(null);\n\n  const leftIsDisabled: boolean = useMemo(() => {\n    if (!divElem) return false;\n    // There's no items to the left\n    return currentIndex === 0;\n  }, [currentIndex, divElem]);\n\n  const rightIsDisabled: boolean = useMemo(() => {\n    if (!divElem) return false;\n\n    // How many elements are to the right of the current one\n    const remainingItems = amountOfItems - currentIndex;\n\n    /* How many pixels are:\n       - from the left corner of the element that is most to the left\n       - to the right corner of the element that is most to the right\n    */\n    const remainingPixels = itemWidth * remainingItems;\n\n    return remainingPixels < divElem.offsetWidth;\n  }, [currentIndex, divElem, amountOfItems, itemWidth]);\n\n  const swipe = (direction: 1 | -1) => {\n    if (divElem) {\n      const newcurrentIndex = currentIndex + direction;\n      const pixelsToTheRight = (itemWidth + spacing) * newcurrentIndex;\n\n      const left = pixelsToTheRight;\n      divElem.scroll({ left, behavior: \"smooth\" });\n\n      setCurrentIndex((prev) => prev + direction);\n    }\n  };\n\n  return { swipe, ref: setDivElem, leftIsDisabled, rightIsDisabled };\n};\n\n/**\n * Calculates height of specified element and carries out recalculation of height\n * on window resize with the delay of 0.2s.\n * @param refElement ref to an element height of which is going to be measured.\n * @returns current content state and height measuring status\n */\nexport const useResize = (\n  refElement: RefObject<HTMLDivElement | null>,\n  contentHash?: string\n): {\n  contentHeight: number;\n  isHeightMeasured: boolean;\n} => {\n  const [isHeightMeasured, setIsHeightMeasured] = useState<boolean>(false);\n  const [contentHeight, setContentHeight] = useState<number>(0);\n\n  const calcContentHeight = useCallback(() => {\n    if (refElement.current) {\n      setIsHeightMeasured(false);\n      setContentHeight(refElement.current.getBoundingClientRect().height);\n      setIsHeightMeasured(true);\n    }\n  }, [refElement, contentHash]);\n\n  /**\n   * Waits for 0.2 seconds and recalculates content height\n   */\n  const handleResize = useCallback(debounce(calcContentHeight, 200), [\n    refElement,\n  ]);\n\n  useEffect(() => {\n    // Not finished painting without setTimeout.\n    // If ever running into further problems consider adding requestAnimationFrame as well.\n    setTimeout(() => {\n      calcContentHeight();\n    });\n\n    window.addEventListener(\"resize\", handleResize);\n    window.addEventListener(\"change\", handleResize);\n    return () => {\n      window.removeEventListener(\"resize\", handleResize);\n      window.removeEventListener(\"change\", handleResize);\n    };\n  }, [handleResize, calcContentHeight]);\n\n  return { contentHeight, isHeightMeasured };\n};\n\n/**\n * Executes handler function each time user clicks outside of ref object.\n */\nexport function useOnClickOutside(\n  ref: RefObject<HTMLElement>,\n  handler: (event: MouseEvent | TouchEvent) => void\n) {\n  useEffect(() => {\n    const listener = (event: MouseEvent | TouchEvent) => {\n      if (!ref.current || ref.current.contains(event.target as Node)) {\n        return;\n      }\n      handler(event);\n    };\n    document.addEventListener(\"mousedown\", listener);\n    document.addEventListener(\"touchstart\", listener);\n    return () => {\n      document.removeEventListener(\"mousedown\", listener);\n      document.removeEventListener(\"touchstart\", listener);\n    };\n  }, [ref, handler]);\n}\n\nexport function useMediaQuery(query: string) {\n  const supportMatchMedia =\n    typeof window !== \"undefined\" && typeof window.matchMedia !== \"undefined\";\n  const defaultMatches = false;\n\n  const [isMatchQuery, setIsMatchQuery] = useState(() => {\n    if (supportMatchMedia) {\n      const queryList = matchMedia(query);\n      return queryList.matches;\n    } else {\n      return defaultMatches;\n    }\n  });\n\n  useEffect(() => {\n    let active = true;\n\n    if (!supportMatchMedia) {\n      return undefined;\n    }\n\n    const queryList = matchMedia(query);\n\n    const updateMatch = () => {\n      if (active) {\n        setIsMatchQuery(queryList.matches);\n      }\n    };\n\n    if (queryList.addEventListener)\n      queryList.addEventListener(\"change\", updateMatch);\n    else queryList.addListener(updateMatch);\n\n    return () => {\n      active = false;\n      if (queryList.removeEventListener)\n        queryList.removeEventListener(\"change\", updateMatch);\n      else queryList.removeListener(updateMatch);\n    };\n  }, [query, supportMatchMedia]);\n\n  return isMatchQuery;\n}\n\n/**\n * Provides set of flags indicating what is the current screen size.\n */\nexport function useBreakPoints() {\n  const mobileSize = theme.breakpoints[0];\n  const largeMobileSize = theme.breakpoints[1];\n  const tabSize = theme.breakpoints[2];\n\n  const isWiderThanMobile = useMediaQuery(`(min-width:${mobileSize})`);\n  const isWiderThanLargeMobile = useMediaQuery(\n    `(min-width:${largeMobileSize})`\n  );\n  const isWiderThanTab = useMediaQuery(`(min-width:${tabSize})`);\n\n  let isMobile = false,\n    isLargeMobile = false,\n    isTab = false,\n    isDesktop = false;\n\n  if (isWiderThanTab) {\n    isDesktop = true;\n  } else if (isWiderThanLargeMobile) {\n    isTab = true;\n  } else if (isWiderThanMobile) {\n    isLargeMobile = true;\n  } else isMobile = true;\n\n  return {\n    isMobile,\n    isLargeMobile,\n    isTab,\n    isDesktop,\n    isWiderThanMobile,\n    isWiderThanLargeMobile,\n  };\n}\n\n/**\n * Provided intersection observer for the specified elements.\n *\n * @param rootRef Ref for the root element.\n * @param rootMargin Margin for the root element area.\n * @param callback Function to process intersection changes.\n */\nexport function useIntersectionObserver(\n  rootRef: RefObject<HTMLElement>,\n  rootMargin: string,\n  callback: IntersectionObserverCallback\n) {\n  if (rootRef.current) {\n    const options = {\n      root: rootRef.current,\n      rootMargin,\n      threshold: 1,\n    };\n\n    return new IntersectionObserver(callback, options);\n  }\n}\n\nexport function useHover(onHover?: (newState: boolean) => void) {\n  const [isHover, setIsHover] = useState(false);\n\n  const hoverCallbacks = {\n    onMouseEnter: () => {\n      const newState = true;\n      setIsHover(newState);\n      onHover?.(newState);\n    },\n    onMouseLeave: () => {\n      const newState = false;\n      setIsHover(newState);\n      onHover?.(newState);\n    },\n  };\n\n  return {\n    isHover,\n    hoverCallbacks,\n  };\n}\n\nexport function useContentSize<T extends Element = HTMLElement>(\n  settings: {\n    listenForResize?: boolean;\n    debounceDelay?: number;\n    checkEachRender?: boolean;\n  } = {}\n) {\n  const { ref, rect } = useBoundingClientRect<T>(settings);\n  return {\n    ref,\n    contentWidth: rect?.width ?? 0,\n    contentHeight: rect?.height ?? 0,\n  };\n}\n\nexport function useElementCoordinates<T extends Element = HTMLElement>() {\n  const ref = useRef<T>(null);\n\n  const [x, setX] = useState(0);\n  const [y, setY] = useState(0);\n\n  useEffect(() => {\n    if (ref.current) {\n      const { x, y } = ref.current.getBoundingClientRect();\n      setX(x);\n      setY(y);\n    }\n  }, [ref.current]);\n\n  return { ref, x, y };\n}\n\nexport function useBoundingClientRect<T extends Element = HTMLElement>(\n  settings: {\n    listenForResize?: boolean;\n    debounceDelay?: number;\n    checkEachRender?: boolean;\n  } = {}\n) {\n  const { listenForResize, checkEachRender, debounceDelay = 200 } = settings;\n  const ref = useRef<T>(null);\n\n  const [rect, setRect] = useState<DOMRect>();\n\n  const handleResize = useCallback(\n    debounce(() => {\n      ref.current && setRect(ref.current.getBoundingClientRect());\n    }, debounceDelay),\n    [ref]\n  );\n\n  useEffect(() => {\n    if (checkEachRender) handleResize();\n  });\n\n  useEffect(() => {\n    handleResize();\n\n    if (listenForResize) {\n      window.addEventListener(\"resize\", handleResize);\n      window.addEventListener(\"change\", handleResize);\n    }\n\n    return () => {\n      if (listenForResize) {\n        window.removeEventListener(\"resize\", handleResize);\n        window.removeEventListener(\"change\", handleResize);\n      }\n    };\n  }, [handleResize, listenForResize]);\n\n  return { ref, rect };\n}\n\nexport const useBodyScrollLock = <T extends HTMLElement = HTMLElement>(\n  target: T | null,\n  shouldEnable = true\n) => {\n  useEffect(() => {\n    if (target && shouldEnable) disableBodyScroll(target);\n    return () => {\n      if (target) enableBodyScroll(target);\n    };\n  }, [target, shouldEnable]);\n};\n"],"names":["useDependantState","dependency","state","setState","useState","useEffect","useResize","refElement","contentHash","isHeightMeasured","setIsHeightMeasured","contentHeight","setContentHeight","calcContentHeight","useCallback","current","getBoundingClientRect","height","handleResize","debounce","setTimeout","addEventListener","removeEventListener","useOnClickOutside","ref","handler","listener","event","contains","target","useMediaQuery","query","supportMatchMedia","window","matchMedia","defaultMatches","isMatchQuery","setIsMatchQuery","matches","active","undefined","queryList","updateMatch","addListener","removeListener","useBreakPoints","mobileSize","theme","breakpoints","largeMobileSize","tabSize","isWiderThanMobile","isWiderThanLargeMobile","isWiderThanTab","isMobile","isLargeMobile","isTab","isDesktop","useIntersectionObserver","rootRef","rootMargin","callback","options","root","threshold","IntersectionObserver","useHover","onHover","isHover","setIsHover","hoverCallbacks","onMouseEnter","newState","onMouseLeave","useElementCoordinates","useRef","x","setX","y","setY","useBoundingClientRect","settings","listenForResize","checkEachRender","debounceDelay","rect","setRect","useBodyScrollLock","shouldEnable","disableBodyScroll","enableBodyScroll"],"mappings":"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"}
+{"version":3,"file":"sd-component-library3.js","sources":["../src/core/custom-hooks.ts"],"sourcesContent":["import {\n  Dispatch,\n  RefObject,\n  SetStateAction,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { disableBodyScroll, enableBodyScroll } from \"body-scroll-lock\";\nimport { debounce } from \"lodash-es\";\n\nimport theme from \"./theme\";\n\n/**\n * A custom useState hook function, that automatically\n * updates the state whenever the dependency param changes\n *\n * Note that, for maximum performance, dependency should be\n * the result of calling useMemo or useCallback: otherwise,\n * the state would be reseted on each render of the component\n * @param dependency\n */\nexport const useDependantState = <D>(\n  dependency: D\n): [D, Dispatch<SetStateAction<D>>] => {\n  const [state, setState] = useState<D>(dependency);\n\n  useEffect(() => {\n    setState(dependency);\n  }, [dependency]);\n\n  return [state, setState];\n};\n\n/**\n * The useCarousel hook\n */\nexport const useCarousel = (\n  itemWidth: number,\n  amountOfItems: number,\n  spacing: number\n): {\n  ref: any;\n  leftIsDisabled: boolean;\n  rightIsDisabled: boolean;\n  swipe: (direction: 1 | -1) => void;\n} => {\n  const [currentIndex, setCurrentIndex] = useState(0);\n  const [divElem, setDivElem] = useState<HTMLDivElement | null>(null);\n\n  const leftIsDisabled: boolean = useMemo(() => {\n    if (!divElem) return false;\n    // There's no items to the left\n    return currentIndex === 0;\n  }, [currentIndex, divElem]);\n\n  const rightIsDisabled: boolean = useMemo(() => {\n    if (!divElem) return false;\n\n    // How many elements are to the right of the current one\n    const remainingItems = amountOfItems - currentIndex;\n\n    /* How many pixels are:\n       - from the left corner of the element that is most to the left\n       - to the right corner of the element that is most to the right\n    */\n    const remainingPixels = itemWidth * remainingItems;\n\n    return remainingPixels < divElem.offsetWidth;\n  }, [currentIndex, divElem, amountOfItems, itemWidth]);\n\n  const swipe = (direction: 1 | -1) => {\n    if (divElem) {\n      const newcurrentIndex = currentIndex + direction;\n      const pixelsToTheRight = (itemWidth + spacing) * newcurrentIndex;\n\n      const left = pixelsToTheRight;\n      divElem.scroll({ left, behavior: \"smooth\" });\n\n      setCurrentIndex((prev) => prev + direction);\n    }\n  };\n\n  return { swipe, ref: setDivElem, leftIsDisabled, rightIsDisabled };\n};\n\n/**\n * Calculates height of specified element and carries out recalculation of height\n * on window resize with the delay of 0.2s.\n * @param refElement ref to an element height of which is going to be measured.\n * @returns current content state and height measuring status\n */\nexport const useResize = (\n  refElement: RefObject<HTMLDivElement | null>,\n  contentHash?: string\n): {\n  contentHeight: number;\n  isHeightMeasured: boolean;\n} => {\n  const [isHeightMeasured, setIsHeightMeasured] = useState<boolean>(false);\n  const [contentHeight, setContentHeight] = useState<number>(0);\n\n  const calcContentHeight = useCallback(() => {\n    if (refElement.current) {\n      setIsHeightMeasured(false);\n      setContentHeight(refElement.current.getBoundingClientRect().height);\n      setIsHeightMeasured(true);\n    }\n  }, [refElement, contentHash]);\n\n  /**\n   * Waits for 0.2 seconds and recalculates content height\n   */\n  const handleResize = useCallback(debounce(calcContentHeight, 200), [\n    refElement,\n  ]);\n\n  useEffect(() => {\n    // Not finished painting without setTimeout.\n    // If ever running into further problems consider adding requestAnimationFrame as well.\n    setTimeout(() => {\n      calcContentHeight();\n    });\n\n    window.addEventListener(\"resize\", handleResize);\n    window.addEventListener(\"change\", handleResize);\n    return () => {\n      window.removeEventListener(\"resize\", handleResize);\n      window.removeEventListener(\"change\", handleResize);\n    };\n  }, [handleResize, calcContentHeight]);\n\n  return { contentHeight, isHeightMeasured };\n};\n\n/**\n * Executes handler function each time user clicks outside of ref object.\n */\nexport function useOnClickOutside(\n  ref: RefObject<HTMLElement>,\n  handler: (event: MouseEvent | TouchEvent) => void\n) {\n  useEffect(() => {\n    const listener = (event: MouseEvent | TouchEvent) => {\n      if (!ref.current || ref.current.contains(event.target as Node)) {\n        return;\n      }\n      handler(event);\n    };\n    document.addEventListener(\"mousedown\", listener);\n    document.addEventListener(\"touchstart\", listener);\n    return () => {\n      document.removeEventListener(\"mousedown\", listener);\n      document.removeEventListener(\"touchstart\", listener);\n    };\n  }, [ref, handler]);\n}\n\nexport function useMediaQuery(query: string) {\n  const supportMatchMedia =\n    typeof window !== \"undefined\" && typeof window.matchMedia !== \"undefined\";\n  const defaultMatches = false;\n\n  const [isMatchQuery, setIsMatchQuery] = useState(() => {\n    if (supportMatchMedia) {\n      const queryList = matchMedia(query);\n      return queryList.matches;\n    } else {\n      return defaultMatches;\n    }\n  });\n\n  useEffect(() => {\n    let active = true;\n\n    if (!supportMatchMedia) {\n      return undefined;\n    }\n\n    const queryList = matchMedia(query);\n\n    const updateMatch = () => {\n      if (active) {\n        setIsMatchQuery(queryList.matches);\n      }\n    };\n\n    if (queryList.addEventListener)\n      queryList.addEventListener(\"change\", updateMatch);\n    else queryList.addListener(updateMatch);\n\n    return () => {\n      active = false;\n      if (queryList.removeEventListener)\n        queryList.removeEventListener(\"change\", updateMatch);\n      else queryList.removeListener(updateMatch);\n    };\n  }, [query, supportMatchMedia]);\n\n  return isMatchQuery;\n}\n\n/**\n * Provides set of flags indicating what is the current screen size.\n */\nexport function useBreakPoints() {\n  const mobileSize = theme.breakpoints[0];\n  const largeMobileSize = theme.breakpoints[1];\n  const tabSize = theme.breakpoints[2];\n\n  const isWiderThanMobile = useMediaQuery(`(min-width:${mobileSize})`);\n  const isWiderThanLargeMobile = useMediaQuery(\n    `(min-width:${largeMobileSize})`\n  );\n  const isWiderThanTab = useMediaQuery(`(min-width:${tabSize})`);\n\n  let isMobile = false,\n    isLargeMobile = false,\n    isTab = false,\n    isDesktop = false;\n\n  if (isWiderThanTab) {\n    isDesktop = true;\n  } else if (isWiderThanLargeMobile) {\n    isTab = true;\n  } else if (isWiderThanMobile) {\n    isLargeMobile = true;\n  } else isMobile = true;\n\n  return {\n    isMobile,\n    isLargeMobile,\n    isTab,\n    isDesktop,\n    isWiderThanMobile,\n    isWiderThanLargeMobile,\n  };\n}\n\n/**\n * Provided intersection observer for the specified elements.\n *\n * @param rootRef Ref for the root element.\n * @param rootMargin Margin for the root element area.\n * @param callback Function to process intersection changes.\n */\nexport function useIntersectionObserver(\n  rootRef: RefObject<HTMLElement>,\n  rootMargin: string,\n  callback: IntersectionObserverCallback\n) {\n  if (rootRef.current) {\n    const options = {\n      root: rootRef.current,\n      rootMargin,\n      threshold: 1,\n    };\n\n    return new IntersectionObserver(callback, options);\n  }\n}\n\nexport function useHover(onHover?: (newState: boolean) => void) {\n  const [isHover, setIsHover] = useState(false);\n\n  const hoverCallbacks = {\n    onMouseEnter: () => {\n      const newState = true;\n      setIsHover(newState);\n      onHover?.(newState);\n    },\n    onMouseLeave: () => {\n      const newState = false;\n      setIsHover(newState);\n      onHover?.(newState);\n    },\n  };\n\n  return {\n    isHover,\n    hoverCallbacks,\n  };\n}\n\nexport function useContentSize<T extends Element = HTMLElement>(\n  settings: {\n    listenForResize?: boolean;\n    debounceDelay?: number;\n    checkEachRender?: boolean;\n  } = {}\n) {\n  const { ref, rect } = useBoundingClientRect<T>(settings);\n  return {\n    ref,\n    contentWidth: rect?.width ?? 0,\n    contentHeight: rect?.height ?? 0,\n  };\n}\n\nexport function useElementCoordinates<T extends Element = HTMLElement>() {\n  const ref = useRef<T>(null);\n\n  const [x, setX] = useState(0);\n  const [y, setY] = useState(0);\n\n  useEffect(() => {\n    if (ref.current) {\n      const { x, y } = ref.current.getBoundingClientRect();\n      setX(x);\n      setY(y);\n    }\n  }, [ref.current]);\n\n  return { ref, x, y };\n}\n\nexport function useBoundingClientRect<T extends Element = HTMLElement>(\n  settings: {\n    listenForResize?: boolean;\n    debounceDelay?: number;\n    checkEachRender?: boolean;\n  } = {}\n) {\n  const { listenForResize, checkEachRender, debounceDelay = 200 } = settings;\n  const ref = useRef<T>(null);\n\n  const [rect, setRect] = useState<DOMRect>();\n\n  const handleResize = useCallback(\n    debounce(() => {\n      ref.current && setRect(ref.current.getBoundingClientRect());\n    }, debounceDelay),\n    [ref]\n  );\n\n  useEffect(() => {\n    if (checkEachRender) handleResize();\n  });\n\n  useEffect(() => {\n    handleResize();\n\n    if (listenForResize) {\n      window.addEventListener(\"resize\", handleResize);\n      window.addEventListener(\"change\", handleResize);\n    }\n\n    return () => {\n      if (listenForResize) {\n        window.removeEventListener(\"resize\", handleResize);\n        window.removeEventListener(\"change\", handleResize);\n      }\n    };\n  }, [handleResize, listenForResize]);\n\n  return { ref, rect };\n}\n\nexport const useBodyScrollLock = <T extends HTMLElement = HTMLElement>(\n  target: T | null,\n  shouldEnable = true\n) => {\n  useEffect(() => {\n    if (target && shouldEnable) disableBodyScroll(target);\n    return () => {\n      if (target) enableBodyScroll(target);\n    };\n  }, [target, shouldEnable]);\n};\n"],"names":["useDependantState","dependency","state","setState","useState","useEffect","useResize","refElement","contentHash","isHeightMeasured","setIsHeightMeasured","contentHeight","setContentHeight","calcContentHeight","useCallback","handleResize","debounce","useOnClickOutside","ref","handler","listener","event","useMediaQuery","query","supportMatchMedia","defaultMatches","isMatchQuery","setIsMatchQuery","active","queryList","updateMatch","useBreakPoints","mobileSize","theme","largeMobileSize","tabSize","isWiderThanMobile","isWiderThanLargeMobile","isWiderThanTab","isMobile","isLargeMobile","isTab","isDesktop","useIntersectionObserver","rootRef","rootMargin","callback","options","useHover","onHover","isHover","setIsHover","useElementCoordinates","useRef","x","setX","y","setY","useBoundingClientRect","settings","listenForResize","checkEachRender","debounceDelay","rect","setRect","useBodyScrollLock","target","shouldEnable","disableBodyScroll","enableBodyScroll"],"mappings":"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"}

package/lib/sd-component-library30.js

@@ -1,11 +1,18 @@
 import { j as n } from "./sd-component-library195.js";
 import { Button as e } from "./sd-component-library28.js";
 const s = (t) => {
-  const {
-    color: o,
-    children: r
-  } = t;
-  return /* @__PURE__ */ n.jsx(e, { ...t, bg: "Transparent", padding: ["0px"], color: o || "cl_blue", "data-test": "text-cta-button", children: r });
+  const { color: o, children: r } = t;
+  return /* @__PURE__ */ n.jsx(
+    e,
+    {
+      ...t,
+      bg: "Transparent",
+      padding: ["0px"],
+      color: o || "cl_blue",
+      "data-test": "text-cta-button",
+      children: r
+    }
+  );
 };
 export {
   s as TextCtaButton

package/lib/sd-component-library30.js.map

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library30.js","sources":["../src/components/buttons/cta/text-cta-button/text-cta-button.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Button } from \"../../button\";\nimport { TextCtaButtonProps } from \"./interfaces\";\n\n/**\n * The text cta button.\n */\nexport const TextCtaButton: React.FunctionComponent<TextCtaButtonProps> = (\n  props: TextCtaButtonProps\n): React.ReactElement<TextCtaButtonProps> => {\n  const { color, children } = props;\n\n  return (\n    <Button\n      {...props}\n      bg=\"Transparent\"\n      padding={[\"0px\"]}\n      color={color || \"cl_blue\"}\n      data-test=\"text-cta-button\"\n    >\n      {children}\n    </Button>\n  );\n};\n"],"names":["TextCtaButton","props","color","children","jsx","Button"],"mappings":";;AAQaA,MAAAA,IAA6DA,CACxEC,MAC2C;AACrC,QAAA;AAAA,IAAEC,OAAAA;AAAAA,IAAOC,UAAAA;AAAAA,EAAaF,IAAAA;AAE5B,SACGG,gBAAAA,EAAAA,IAAAC,GAAA,EACC,GAAIJ,GACJ,IAAG,eACH,SAAS,CAAC,KAAK,GACf,OAAOC,KAAS,WAChB,aAAU,mBAETC,UAAAA,EACH,CAAA;AAEJ;"}
+{"version":3,"file":"sd-component-library30.js","sources":["../src/components/buttons/cta/text-cta-button/text-cta-button.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Button } from \"../../button\";\nimport { TextCtaButtonProps } from \"./interfaces\";\n\n/**\n * The text cta button.\n */\nexport const TextCtaButton: React.FunctionComponent<TextCtaButtonProps> = (\n  props: TextCtaButtonProps\n): React.ReactElement<TextCtaButtonProps> => {\n  const { color, children } = props;\n\n  return (\n    <Button\n      {...props}\n      bg=\"Transparent\"\n      padding={[\"0px\"]}\n      color={color || \"cl_blue\"}\n      data-test=\"text-cta-button\"\n    >\n      {children}\n    </Button>\n  );\n};\n"],"names":["TextCtaButton","props","color","children","jsx","Button"],"mappings":";;AAQa,MAAAA,IAA6D,CACxEC,MAC2C;AACrC,QAAA,EAAE,OAAAC,GAAO,UAAAC,EAAa,IAAAF;AAG1B,SAAAG,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACE,GAAGJ;AAAA,MACJ,IAAG;AAAA,MACH,SAAS,CAAC,KAAK;AAAA,MACf,OAAOC,KAAS;AAAA,MAChB,aAAU;AAAA,MAET,UAAAC;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/lib/sd-component-library300.js

@@ -14,48 +14,46 @@ import s from "./sd-component-library383.js";
 import C from "./sd-component-library304.js";
 const n = (t) => C(t, "EEE d MMM yyyy"), A = (t) => {
   const e = "No date selected";
-  return !t || !t.startDate || !t.endDate ? e : s(t.startDate, t.endDate) ? n(t.startDate) : `${n(t.startDate)} - ${n(t.endDate)}`;
-}, W = [{
-  label: "Yesterday",
-  startDate: p(f(/* @__PURE__ */ new Date(), -1)),
-  endDate: h(f(/* @__PURE__ */ new Date(), -1))
-}, {
-  label: "Last Week",
-  startDate: w(r(/* @__PURE__ */ new Date(), -1), {
-    weekStartsOn: 1
-  }),
-  endDate: i(r(/* @__PURE__ */ new Date(), -1), {
-    weekStartsOn: 1
-  })
-}, {
-  label: "Last 2 Weeks",
-  startDate: w(r(/* @__PURE__ */ new Date(), -2), {
-    weekStartsOn: 1
-  }),
-  endDate: i(r(/* @__PURE__ */ new Date(), -1), {
-    weekStartsOn: 1
-  })
-}, {
-  label: "Last Month",
-  startDate: y(l(/* @__PURE__ */ new Date(), -1)),
-  endDate: u(l(/* @__PURE__ */ new Date(), -1))
-}, {
-  label: "Last Year",
-  startDate: M(O(/* @__PURE__ */ new Date(), -1)),
-  endDate: b(O(/* @__PURE__ */ new Date(), -1))
-}], G = (t, e, Y, S, c, k) => {
-  const D = (c || W).map(({
-    label: o,
-    startDate: m,
-    endDate: d
-  }) => ({
-    label: o,
-    range: (a) => ({
-      startDate: m,
-      endDate: d
-    }),
-    isSelected: (a) => a.startDate && a.endDate ? s(a.startDate, m) && s(a.endDate, d) : !1
-  }));
+  return !t || !t.startDate || !t.endDate ? e : s(t.startDate, t.endDate) ? n(t.startDate) : `${n(t.startDate)} - ${n(
+    t.endDate
+  )}`;
+}, W = [
+  {
+    label: "Yesterday",
+    startDate: p(f(/* @__PURE__ */ new Date(), -1)),
+    endDate: h(f(/* @__PURE__ */ new Date(), -1))
+  },
+  {
+    label: "Last Week",
+    startDate: w(r(/* @__PURE__ */ new Date(), -1), { weekStartsOn: 1 }),
+    endDate: i(r(/* @__PURE__ */ new Date(), -1), { weekStartsOn: 1 })
+  },
+  {
+    label: "Last 2 Weeks",
+    startDate: w(r(/* @__PURE__ */ new Date(), -2), { weekStartsOn: 1 }),
+    endDate: i(r(/* @__PURE__ */ new Date(), -1), { weekStartsOn: 1 })
+  },
+  {
+    label: "Last Month",
+    startDate: y(l(/* @__PURE__ */ new Date(), -1)),
+    endDate: u(l(/* @__PURE__ */ new Date(), -1))
+  },
+  {
+    label: "Last Year",
+    startDate: M(O(/* @__PURE__ */ new Date(), -1)),
+    endDate: b(O(/* @__PURE__ */ new Date(), -1))
+  }
+], G = (t, e, Y, S, c, k) => {
+  const D = (c || W).map(
+    ({ label: o, startDate: m, endDate: d }) => ({
+      label: o,
+      range: (a) => ({
+        startDate: m,
+        endDate: d
+      }),
+      isSelected: (a) => a.startDate && a.endDate ? s(a.startDate, m) && s(a.endDate, d) : !1
+    })
+  );
   return k ? D.concat({
     label: "Custom Range",
     range: (o) => (e(), {
@@ -69,10 +67,12 @@ const n = (t) => C(t, "EEE d MMM yyyy"), A = (t) => {
   rangeColors: [t.color ?? "#9E1CB5"],
   weekStartsOn: 1,
   inputRanges: [],
-  ranges: [t.selectedRange ?? {
-    startDate: /* @__PURE__ */ new Date(),
-    endDate: /* @__PURE__ */ new Date()
-  }],
+  ranges: [
+    t.selectedRange ?? {
+      startDate: /* @__PURE__ */ new Date(),
+      endDate: /* @__PURE__ */ new Date()
+    }
+  ],
   months: t.months,
   onChange: (e) => {
     t.setSelectedRange(e.range1);

package/lib/sd-component-library300.js.map

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library300.js","sources":["../src/components/inputs/date-inputs/base-date-range-input/utils.ts"],"sourcesContent":["import { OnChangeProps, Range, StaticRange } from \"react-date-range\";\n\nimport {\n  addDays,\n  addMonths,\n  addWeeks,\n  addYears,\n  endOfDay,\n  endOfMonth,\n  endOfWeek,\n  endOfYear,\n  format,\n  isSameDay,\n  startOfDay,\n  startOfMonth,\n  startOfWeek,\n  startOfYear,\n} from \"date-fns\";\n\nimport { OnRangeSelection, StaticRangeOption } from \"./interfaces\";\nimport { BaseDateRangeInputMobileProps } from \"./partials/base-date-range-input-mobile/interfaces\";\n\nconst getFormattedDate = (date: Date) => format(date, \"EEE d MMM yyyy\");\n\nexport const getSelectedRangeText = (range: Range | null | undefined) => {\n  const defaultText = \"No date selected\";\n\n  return !range || !range.startDate || !range.endDate\n    ? defaultText\n    : isSameDay(range.startDate, range.endDate)\n    ? getFormattedDate(range.startDate)\n    : `${getFormattedDate(range.startDate)} - ${getFormattedDate(\n        range.endDate\n      )}`;\n};\n\nconst ranges = [\n  {\n    label: \"Yesterday\",\n    startDate: startOfDay(addDays(new Date(), -1)),\n    endDate: endOfDay(addDays(new Date(), -1)),\n  },\n  {\n    label: \"Last Week\",\n    startDate: startOfWeek(addWeeks(new Date(), -1), { weekStartsOn: 1 }),\n    endDate: endOfWeek(addWeeks(new Date(), -1), { weekStartsOn: 1 }),\n  },\n  {\n    label: \"Last 2 Weeks\",\n    startDate: startOfWeek(addWeeks(new Date(), -2), { weekStartsOn: 1 }),\n    endDate: endOfWeek(addWeeks(new Date(), -1), { weekStartsOn: 1 }),\n  },\n  {\n    label: \"Last Month\",\n    startDate: startOfMonth(addMonths(new Date(), -1)),\n    endDate: endOfMonth(addMonths(new Date(), -1)),\n  },\n  {\n    label: \"Last Year\",\n    startDate: startOfYear(addYears(new Date(), -1)),\n    endDate: endOfYear(addYears(new Date(), -1)),\n  },\n];\n\nexport const getStaticRanges = (\n  selectedRange: Range | undefined | null,\n  onCustomRangeSelect: () => void,\n  deselectCustomRange: () => void,\n  customOptionSelected: boolean,\n  customRanges?: StaticRangeOption[],\n  mobile?: boolean\n): StaticRange[] => {\n  const rangesToShow = customRanges || ranges;\n  const staticRanges: StaticRange[] = rangesToShow.map(\n    ({ label, startDate, endDate }) => ({\n      label,\n      range: (_) => ({\n        startDate,\n        endDate,\n      }),\n      isSelected: (range) =>\n        range.startDate && range.endDate\n          ? isSameDay(range.startDate, startDate) &&\n            isSameDay(range.endDate, endDate)\n          : false,\n    })\n  );\n\n  return !mobile\n    ? staticRanges\n    : staticRanges.concat({\n        label: \"Custom Range\",\n        range: (_) => {\n          onCustomRangeSelect();\n          return {\n            startDate: selectedRange?.startDate || new Date(),\n            endDate: selectedRange?.endDate || new Date(),\n          };\n        },\n        isSelected: (_) => customOptionSelected,\n      });\n};\n\nexport const getCalendarProps = (props: BaseDateRangeInputMobileProps) => ({\n  ...props,\n  rangeColors: [props.color ?? \"#9E1CB5\"],\n  weekStartsOn: 1,\n  inputRanges: [],\n  ranges: [\n    props.selectedRange ?? {\n      startDate: new Date(),\n      endDate: new Date(),\n    },\n  ],\n  months: props.months,\n  onChange: (value: OnChangeProps) => {\n    props.setSelectedRange((value as OnRangeSelection).range1);\n  },\n});\n"],"names":["getFormattedDate","date","format","getSelectedRangeText","range","defaultText","startDate","endDate","isSameDay","ranges","label","startOfDay","addDays","Date","endOfDay","startOfWeek","addWeeks","weekStartsOn","endOfWeek","startOfMonth","addMonths","endOfMonth","startOfYear","addYears","endOfYear","getStaticRanges","selectedRange","onCustomRangeSelect","deselectCustomRange","customOptionSelected","customRanges","mobile","staticRanges","map","_","isSelected","concat","getCalendarProps","props","rangeColors","color","inputRanges","months","onChange","value","setSelectedRange","range1"],"mappings":"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"}
+{"version":3,"file":"sd-component-library300.js","sources":["../src/components/inputs/date-inputs/base-date-range-input/utils.ts"],"sourcesContent":["import { OnChangeProps, Range, StaticRange } from \"react-date-range\";\n\nimport {\n  addDays,\n  addMonths,\n  addWeeks,\n  addYears,\n  endOfDay,\n  endOfMonth,\n  endOfWeek,\n  endOfYear,\n  format,\n  isSameDay,\n  startOfDay,\n  startOfMonth,\n  startOfWeek,\n  startOfYear,\n} from \"date-fns\";\n\nimport { OnRangeSelection, StaticRangeOption } from \"./interfaces\";\nimport { BaseDateRangeInputMobileProps } from \"./partials/base-date-range-input-mobile/interfaces\";\n\nconst getFormattedDate = (date: Date) => format(date, \"EEE d MMM yyyy\");\n\nexport const getSelectedRangeText = (range: Range | null | undefined) => {\n  const defaultText = \"No date selected\";\n\n  return !range || !range.startDate || !range.endDate\n    ? defaultText\n    : isSameDay(range.startDate, range.endDate)\n    ? getFormattedDate(range.startDate)\n    : `${getFormattedDate(range.startDate)} - ${getFormattedDate(\n        range.endDate\n      )}`;\n};\n\nconst ranges = [\n  {\n    label: \"Yesterday\",\n    startDate: startOfDay(addDays(new Date(), -1)),\n    endDate: endOfDay(addDays(new Date(), -1)),\n  },\n  {\n    label: \"Last Week\",\n    startDate: startOfWeek(addWeeks(new Date(), -1), { weekStartsOn: 1 }),\n    endDate: endOfWeek(addWeeks(new Date(), -1), { weekStartsOn: 1 }),\n  },\n  {\n    label: \"Last 2 Weeks\",\n    startDate: startOfWeek(addWeeks(new Date(), -2), { weekStartsOn: 1 }),\n    endDate: endOfWeek(addWeeks(new Date(), -1), { weekStartsOn: 1 }),\n  },\n  {\n    label: \"Last Month\",\n    startDate: startOfMonth(addMonths(new Date(), -1)),\n    endDate: endOfMonth(addMonths(new Date(), -1)),\n  },\n  {\n    label: \"Last Year\",\n    startDate: startOfYear(addYears(new Date(), -1)),\n    endDate: endOfYear(addYears(new Date(), -1)),\n  },\n];\n\nexport const getStaticRanges = (\n  selectedRange: Range | undefined | null,\n  onCustomRangeSelect: () => void,\n  deselectCustomRange: () => void,\n  customOptionSelected: boolean,\n  customRanges?: StaticRangeOption[],\n  mobile?: boolean\n): StaticRange[] => {\n  const rangesToShow = customRanges || ranges;\n  const staticRanges: StaticRange[] = rangesToShow.map(\n    ({ label, startDate, endDate }) => ({\n      label,\n      range: (_) => ({\n        startDate,\n        endDate,\n      }),\n      isSelected: (range) =>\n        range.startDate && range.endDate\n          ? isSameDay(range.startDate, startDate) &&\n            isSameDay(range.endDate, endDate)\n          : false,\n    })\n  );\n\n  return !mobile\n    ? staticRanges\n    : staticRanges.concat({\n        label: \"Custom Range\",\n        range: (_) => {\n          onCustomRangeSelect();\n          return {\n            startDate: selectedRange?.startDate || new Date(),\n            endDate: selectedRange?.endDate || new Date(),\n          };\n        },\n        isSelected: (_) => customOptionSelected,\n      });\n};\n\nexport const getCalendarProps = (props: BaseDateRangeInputMobileProps) => ({\n  ...props,\n  rangeColors: [props.color ?? \"#9E1CB5\"],\n  weekStartsOn: 1,\n  inputRanges: [],\n  ranges: [\n    props.selectedRange ?? {\n      startDate: new Date(),\n      endDate: new Date(),\n    },\n  ],\n  months: props.months,\n  onChange: (value: OnChangeProps) => {\n    props.setSelectedRange((value as OnRangeSelection).range1);\n  },\n});\n"],"names":["getFormattedDate","date","format","getSelectedRangeText","range","defaultText","isSameDay","ranges","startOfDay","addDays","endOfDay","startOfWeek","addWeeks","endOfWeek","startOfMonth","addMonths","endOfMonth","startOfYear","addYears","endOfYear","getStaticRanges","selectedRange","onCustomRangeSelect","deselectCustomRange","customOptionSelected","customRanges","mobile","staticRanges","label","startDate","endDate","_","getCalendarProps","props","value"],"mappings":";;;;;;;;;;;;;;AAsBA,MAAMA,IAAmB,CAACC,MAAeC,EAAOD,GAAM,gBAAgB,GAEzDE,IAAuB,CAACC,MAAoC;AACvE,QAAMC,IAAc;AAEb,SAAA,CAACD,KAAS,CAACA,EAAM,aAAa,CAACA,EAAM,UACxCC,IACAC,EAAUF,EAAM,WAAWA,EAAM,OAAO,IACxCJ,EAAiBI,EAAM,SAAS,IAChC,GAAGJ,EAAiBI,EAAM,SAAS,CAAC,MAAMJ;AAAA,IACxCI,EAAM;AAAA,EACP,CAAA;AACP,GAEMG,IAAS;AAAA,EACb;AAAA,IACE,OAAO;AAAA,IACP,WAAWC,EAAWC,sBAAY,KAAK,GAAG,EAAE,CAAC;AAAA,IAC7C,SAASC,EAASD,sBAAY,KAAK,GAAG,EAAE,CAAC;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,WAAWE,EAAYC,EAAa,oBAAA,KAAA,GAAQ,EAAE,GAAG,EAAE,cAAc,GAAG;AAAA,IACpE,SAASC,EAAUD,EAAa,oBAAA,KAAA,GAAQ,EAAE,GAAG,EAAE,cAAc,GAAG;AAAA,EAClE;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,WAAWD,EAAYC,EAAa,oBAAA,KAAA,GAAQ,EAAE,GAAG,EAAE,cAAc,GAAG;AAAA,IACpE,SAASC,EAAUD,EAAa,oBAAA,KAAA,GAAQ,EAAE,GAAG,EAAE,cAAc,GAAG;AAAA,EAClE;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,WAAWE,EAAaC,sBAAc,KAAK,GAAG,EAAE,CAAC;AAAA,IACjD,SAASC,EAAWD,sBAAc,KAAK,GAAG,EAAE,CAAC;AAAA,EAC/C;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,WAAWE,EAAYC,sBAAa,KAAK,GAAG,EAAE,CAAC;AAAA,IAC/C,SAASC,EAAUD,sBAAa,KAAK,GAAG,EAAE,CAAC;AAAA,EAC7C;AACF,GAEaE,IAAkB,CAC7BC,GACAC,GACAC,GACAC,GACAC,GACAC,MACkB;AAElB,QAAMC,KADeF,KAAgBlB,GACY;AAAA,IAC/C,CAAC,EAAE,OAAAqB,GAAO,WAAAC,GAAW,SAAAC,SAAe;AAAA,MAClC,OAAAF;AAAA,MACA,OAAO,CAACG,OAAO;AAAA,QACb,WAAAF;AAAA,QACA,SAAAC;AAAA,MAAA;AAAA,MAEF,YAAY,CAAC1B,MACXA,EAAM,aAAaA,EAAM,UACrBE,EAAUF,EAAM,WAAWyB,CAAS,KACpCvB,EAAUF,EAAM,SAAS0B,CAAO,IAChC;AAAA,IAAA;AAAA,EACR;AAGF,SAAQJ,IAEJC,EAAa,OAAO;AAAA,IAClB,OAAO;AAAA,IACP,OAAO,CAACI,OACcT,KACb;AAAA,MACL,YAAWD,KAAA,gBAAAA,EAAe,cAAa,oBAAI,KAAK;AAAA,MAChD,UAASA,KAAA,gBAAAA,EAAe,YAAW,oBAAI,KAAK;AAAA,IAAA;AAAA,IAGhD,YAAY,CAACU,MAAMP;AAAA,EAAA,CACpB,IAXDG;AAYN,GAEaK,IAAmB,CAACC,OAA0C;AAAA,EACzE,GAAGA;AAAA,EACH,aAAa,CAACA,EAAM,SAAS,SAAS;AAAA,EACtC,cAAc;AAAA,EACd,aAAa,CAAC;AAAA,EACd,QAAQ;AAAA,IACNA,EAAM,iBAAiB;AAAA,MACrB,+BAAe,KAAK;AAAA,MACpB,6BAAa,KAAK;AAAA,IACpB;AAAA,EACF;AAAA,EACA,QAAQA,EAAM;AAAA,EACd,UAAU,CAACC,MAAyB;AAC5B,IAAAD,EAAA,iBAAkBC,EAA2B,MAAM;AAAA,EAC3D;AACF;"}

package/lib/sd-component-library301.js

@@ -11,69 +11,96 @@ import { SelectedRangeText as h } from "./sd-component-library660.js";
 import { FrFrContainer as g } from "./sd-component-library39.js";
 import { PrimaryTextButton as u } from "./sd-component-library24.js";
 import { ApplyButton as R } from "./sd-component-library661.js";
-const A = l.forwardRef((e, i) => {
-  const {
-    zIndex: a,
-    customOptionSelected: n,
-    handleCancel: o,
-    getStaticRanges: d
-  } = e, p = (t) => {
-    t == null || t.preventDefault(), o();
-  };
-  return /* @__PURE__ */ r.jsx(x, { sx: {
-    position: "fixed",
-    top: 0,
-    left: 0,
-    width: "100vw",
-    height: "100vh",
-    overflowY: "auto",
-    py: "30px",
-    bg: "#434A5499"
-  }, "data-test": "calendar-wrapper", children: /* @__PURE__ */ r.jsxs(m, { onClickOutside: p, sx: {
-    borderStyle: "solid",
-    borderWidth: "1px",
-    borderColor: "cl_lightGrey",
-    minWidth: "352px",
-    width: "max-content",
-    backgroundColor: "#fff",
-    m: "auto",
-    borderRadius: "4px",
-    zIndex: a,
-    ".rdrDateRangePickerWrapper": {
-      width: "100%",
-      flexDirection: "column"
-    },
-    ".rdrDefinedRangesWrapper": {
-      width: "100%"
-    },
-    ".rdrCalendarWrapper": {
-      display: n ? "inline-flex" : "none"
-    },
-    ".rdrInputRanges": {
-      display: "none"
-    },
-    ".rdrStaticRanges:before": {
-      fontSize: "16px",
-      fontFamily: "proxima-nova",
-      color: "#9BA2B4",
-      fontWeight: "300",
-      p: "10px 20px"
-    },
-    ".rdrStaticRange": {
-      fontSize: "16px",
-      fontFamily: "proxima-nova",
-      color: "#434A54",
-      borderBottomWidth: "0"
-    }
-  }, children: [
-    /* @__PURE__ */ r.jsx(c, { fontSizeWeight: [12, "semi-bold"], ref: i, children: /* @__PURE__ */ r.jsx(f.DateRangePicker, { ...s(e), direction: "vertical", staticRanges: d(!0) }) }),
-    /* @__PURE__ */ r.jsx(h, { ...e, isMobile: !0 }),
-    /* @__PURE__ */ r.jsxs(g, { p: "10px 20px", children: [
-      /* @__PURE__ */ r.jsx(u, { onClick: o, height: "42px", color: "cl_darkGrey", padding: "0", children: "Cancel" }),
-      /* @__PURE__ */ r.jsx(R, { ...e })
-    ] })
-  ] }) });
-});
+const A = l.forwardRef(
+  (e, i) => {
+    const { zIndex: a, customOptionSelected: n, handleCancel: o, getStaticRanges: d } = e, p = (t) => {
+      t == null || t.preventDefault(), o();
+    };
+    return /* @__PURE__ */ r.jsx(
+      x,
+      {
+        sx: {
+          position: "fixed",
+          top: 0,
+          left: 0,
+          width: "100vw",
+          height: "100vh",
+          overflowY: "auto",
+          py: "30px",
+          bg: "#434A5499"
+        },
+        "data-test": "calendar-wrapper",
+        children: /* @__PURE__ */ r.jsxs(
+          m,
+          {
+            onClickOutside: p,
+            sx: {
+              borderStyle: "solid",
+              borderWidth: "1px",
+              borderColor: "cl_lightGrey",
+              minWidth: "352px",
+              width: "max-content",
+              backgroundColor: "#fff",
+              m: "auto",
+              borderRadius: "4px",
+              zIndex: a,
+              ".rdrDateRangePickerWrapper": {
+                width: "100%",
+                flexDirection: "column"
+              },
+              ".rdrDefinedRangesWrapper": {
+                width: "100%"
+              },
+              ".rdrCalendarWrapper": {
+                display: n ? "inline-flex" : "none"
+              },
+              ".rdrInputRanges": {
+                display: "none"
+              },
+              ".rdrStaticRanges:before": {
+                fontSize: "16px",
+                fontFamily: "proxima-nova",
+                color: "#9BA2B4",
+                fontWeight: "300",
+                p: "10px 20px"
+              },
+              ".rdrStaticRange": {
+                fontSize: "16px",
+                fontFamily: "proxima-nova",
+                color: "#434A54",
+                borderBottomWidth: "0"
+              }
+            },
+            children: [
+              /* @__PURE__ */ r.jsx(c, { fontSizeWeight: [12, "semi-bold"], ref: i, children: /* @__PURE__ */ r.jsx(
+                f.DateRangePicker,
+                {
+                  ...s(e),
+                  direction: "vertical",
+                  staticRanges: d(!0)
+                }
+              ) }),
+              /* @__PURE__ */ r.jsx(h, { ...e, isMobile: !0 }),
+              /* @__PURE__ */ r.jsxs(g, { p: "10px 20px", children: [
+                /* @__PURE__ */ r.jsx(
+                  u,
+                  {
+                    onClick: o,
+                    height: "42px",
+                    color: "cl_darkGrey",
+                    padding: "0",
+                    children: "Cancel"
+                  }
+                ),
+                /* @__PURE__ */ r.jsx(R, { ...e })
+              ] })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
 export {
   A as BaseDateRangeInputMobile
 };

package/lib/sd-component-library301.js.map

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library301.js","sources":["../src/components/inputs/date-inputs/base-date-range-input/partials/base-date-range-input-mobile/base-date-range-input-mobile.tsx"],"sourcesContent":["import React from \"react\";\nimport { DateRangePicker } from \"react-date-range\";\n\nimport { Box } from \"rebass\";\n\nimport { OutsideClickBox } from \"../../../../../boxes\";\nimport { PrimaryTextButton } from \"../../../../../buttons\";\nimport { FrFrContainer } from \"../../../../../containers\";\nimport { ResponsiveTextV2 } from \"../../../../../texts/responsive-text-v2\";\nimport { getCalendarProps } from \"../../utils\";\nimport { ApplyButton } from \"../apply-button\";\nimport { SelectedRangeText } from \"../selected-range-text\";\nimport { BaseDateRangeInputMobileProps as Props } from \"./interfaces\";\n\nexport const BaseDateRangeInputMobile = React.forwardRef<HTMLDivElement, Props>(\n  (props, ref) => {\n    const { zIndex, customOptionSelected, handleCancel, getStaticRanges } =\n      props;\n\n    const onClickOutside = (event?: React.MouseEvent<HTMLDivElement>) => {\n      event?.preventDefault();\n      handleCancel();\n    };\n\n    return (\n      <Box\n        sx={{\n          position: \"fixed\",\n          top: 0,\n          left: 0,\n          width: \"100vw\",\n          height: \"100vh\",\n          overflowY: \"auto\",\n          py: \"30px\",\n          bg: \"#434A5499\",\n        }}\n        data-test=\"calendar-wrapper\"\n      >\n        <OutsideClickBox\n          onClickOutside={onClickOutside}\n          sx={{\n            borderStyle: \"solid\",\n            borderWidth: \"1px\",\n            borderColor: \"cl_lightGrey\",\n            minWidth: \"352px\",\n            width: \"max-content\",\n            backgroundColor: \"#fff\",\n            m: \"auto\",\n            borderRadius: \"4px\",\n            zIndex,\n            \".rdrDateRangePickerWrapper\": {\n              width: \"100%\",\n              flexDirection: \"column\",\n            },\n            \".rdrDefinedRangesWrapper\": {\n              width: \"100%\",\n            },\n            \".rdrCalendarWrapper\": {\n              display: customOptionSelected ? \"inline-flex\" : \"none\",\n            },\n            \".rdrInputRanges\": {\n              display: \"none\",\n            },\n            \".rdrStaticRanges:before\": {\n              fontSize: \"16px\",\n              fontFamily: \"proxima-nova\",\n              color: \"#9BA2B4\",\n              fontWeight: \"300\",\n              p: \"10px 20px\",\n            },\n            \".rdrStaticRange\": {\n              fontSize: \"16px\",\n              fontFamily: \"proxima-nova\",\n              color: \"#434A54\",\n              borderBottomWidth: \"0\",\n            },\n          }}\n        >\n          <ResponsiveTextV2 fontSizeWeight={[12, \"semi-bold\"]} ref={ref}>\n            <DateRangePicker\n              {...getCalendarProps(props)}\n              direction=\"vertical\"\n              staticRanges={getStaticRanges(true)}\n            />\n          </ResponsiveTextV2>\n\n          <SelectedRangeText {...props} isMobile />\n\n          <FrFrContainer p=\"10px 20px\">\n            <PrimaryTextButton\n              onClick={handleCancel}\n              height=\"42px\"\n              color=\"cl_darkGrey\"\n              padding=\"0\"\n            >\n              Cancel\n            </PrimaryTextButton>\n\n            <ApplyButton {...props} />\n          </FrFrContainer>\n        </OutsideClickBox>\n      </Box>\n    );\n  }\n);\n"],"names":["BaseDateRangeInputMobile","React","forwardRef","props","ref","zIndex","customOptionSelected","handleCancel","getStaticRanges","onClickOutside","event","preventDefault","jsx","Box","position","top","left","width","height","overflowY","py","bg","jsxs","OutsideClickBox","borderStyle","borderWidth","borderColor","minWidth","backgroundColor","m","borderRadius","flexDirection","display","fontSize","fontFamily","color","fontWeight","p","borderBottomWidth","ResponsiveTextV2","DateRangePicker","getCalendarProps","SelectedRangeText","FrFrContainer","PrimaryTextButton","ApplyButton"],"mappings":";;;;;;;;;;;;;AAcO,MAAMA,IAA2BC,EAAMC,WAC5C,CAACC,GAAOC,MAAQ;AACR,QAAA;AAAA,IAAEC,QAAAA;AAAAA,IAAQC,sBAAAA;AAAAA,IAAsBC,cAAAA;AAAAA,IAAcC,iBAAAA;AAAAA,EAClDL,IAAAA,GAEIM,IAAiBA,CAACC,MAA6C;AACnEA,IAAAA,KAAAA,QAAAA,EAAOC,kBACMJ;EAAA;AAIb,SAAAK,gBAAAA,EAAA,IAACC,KACC,IAAI;AAAA,IACFC,UAAU;AAAA,IACVC,KAAK;AAAA,IACLC,MAAM;AAAA,IACNC,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRC,WAAW;AAAA,IACXC,IAAI;AAAA,IACJC,IAAI;AAAA,EAAA,GAEN,aAAU,oBAEV,UAACC,gBAAAA,EAAA,KAAAC,GAAA,EACC,gBAAAd,GACA,IAAI;AAAA,IACFe,aAAa;AAAA,IACbC,aAAa;AAAA,IACbC,aAAa;AAAA,IACbC,UAAU;AAAA,IACVV,OAAO;AAAA,IACPW,iBAAiB;AAAA,IACjBC,GAAG;AAAA,IACHC,cAAc;AAAA,IACdzB,QAAAA;AAAAA,IACA,8BAA8B;AAAA,MAC5BY,OAAO;AAAA,MACPc,eAAe;AAAA,IACjB;AAAA,IACA,4BAA4B;AAAA,MAC1Bd,OAAO;AAAA,IACT;AAAA,IACA,uBAAuB;AAAA,MACrBe,SAAS1B,IAAuB,gBAAgB;AAAA,IAClD;AAAA,IACA,mBAAmB;AAAA,MACjB0B,SAAS;AAAA,IACX;AAAA,IACA,2BAA2B;AAAA,MACzBC,UAAU;AAAA,MACVC,YAAY;AAAA,MACZC,OAAO;AAAA,MACPC,YAAY;AAAA,MACZC,GAAG;AAAA,IACL;AAAA,IACA,mBAAmB;AAAA,MACjBJ,UAAU;AAAA,MACVC,YAAY;AAAA,MACZC,OAAO;AAAA,MACPG,mBAAmB;AAAA,IACrB;AAAA,EAGF,GAAA,UAAA;AAAA,IAAA1B,gBAAAA,MAAC2B,KAAiB,gBAAgB,CAAC,IAAI,WAAW,GAAG,KAAAnC,GACnD,UAACQ,gBAAAA,MAAA4B,EAAAA,iBAAA,EACC,GAAIC,EAAiBtC,CAAK,GAC1B,WAAU,YACV,cAAcK,EAAgB,EAAI,EAAE,CAAA,GAExC;AAAA,IAECI,gBAAAA,EAAA,IAAA8B,GAAA,KAAsBvC,GAAO,UAAQ,GAAA,CAAA;AAAA,IAEtCmB,gBAAAA,EAAAA,KAACqB,GAAc,EAAA,GAAE,aACf,UAAA;AAAA,MAAC/B,gBAAAA,EAAAA,IAAAgC,GAAA,EACC,SAASrC,GACT,QAAO,QACP,OAAM,eACN,SAAQ,KAAG,UAGb,SAAA,CAAA;AAAA,MAEAK,gBAAAA,EAAAA,IAACiC,GAAY,EAAA,GAAI1C,GAAM;AAAA,IAAA,GACzB;AAAA,EAAA,EACF,CAAA,EACF,CAAA;AAEJ,CACF;"}
+{"version":3,"file":"sd-component-library301.js","sources":["../src/components/inputs/date-inputs/base-date-range-input/partials/base-date-range-input-mobile/base-date-range-input-mobile.tsx"],"sourcesContent":["import React from \"react\";\nimport { DateRangePicker } from \"react-date-range\";\n\nimport { Box } from \"rebass\";\n\nimport { OutsideClickBox } from \"../../../../../boxes\";\nimport { PrimaryTextButton } from \"../../../../../buttons\";\nimport { FrFrContainer } from \"../../../../../containers\";\nimport { ResponsiveTextV2 } from \"../../../../../texts/responsive-text-v2\";\nimport { getCalendarProps } from \"../../utils\";\nimport { ApplyButton } from \"../apply-button\";\nimport { SelectedRangeText } from \"../selected-range-text\";\nimport { BaseDateRangeInputMobileProps as Props } from \"./interfaces\";\n\nexport const BaseDateRangeInputMobile = React.forwardRef<HTMLDivElement, Props>(\n  (props, ref) => {\n    const { zIndex, customOptionSelected, handleCancel, getStaticRanges } =\n      props;\n\n    const onClickOutside = (event?: React.MouseEvent<HTMLDivElement>) => {\n      event?.preventDefault();\n      handleCancel();\n    };\n\n    return (\n      <Box\n        sx={{\n          position: \"fixed\",\n          top: 0,\n          left: 0,\n          width: \"100vw\",\n          height: \"100vh\",\n          overflowY: \"auto\",\n          py: \"30px\",\n          bg: \"#434A5499\",\n        }}\n        data-test=\"calendar-wrapper\"\n      >\n        <OutsideClickBox\n          onClickOutside={onClickOutside}\n          sx={{\n            borderStyle: \"solid\",\n            borderWidth: \"1px\",\n            borderColor: \"cl_lightGrey\",\n            minWidth: \"352px\",\n            width: \"max-content\",\n            backgroundColor: \"#fff\",\n            m: \"auto\",\n            borderRadius: \"4px\",\n            zIndex,\n            \".rdrDateRangePickerWrapper\": {\n              width: \"100%\",\n              flexDirection: \"column\",\n            },\n            \".rdrDefinedRangesWrapper\": {\n              width: \"100%\",\n            },\n            \".rdrCalendarWrapper\": {\n              display: customOptionSelected ? \"inline-flex\" : \"none\",\n            },\n            \".rdrInputRanges\": {\n              display: \"none\",\n            },\n            \".rdrStaticRanges:before\": {\n              fontSize: \"16px\",\n              fontFamily: \"proxima-nova\",\n              color: \"#9BA2B4\",\n              fontWeight: \"300\",\n              p: \"10px 20px\",\n            },\n            \".rdrStaticRange\": {\n              fontSize: \"16px\",\n              fontFamily: \"proxima-nova\",\n              color: \"#434A54\",\n              borderBottomWidth: \"0\",\n            },\n          }}\n        >\n          <ResponsiveTextV2 fontSizeWeight={[12, \"semi-bold\"]} ref={ref}>\n            <DateRangePicker\n              {...getCalendarProps(props)}\n              direction=\"vertical\"\n              staticRanges={getStaticRanges(true)}\n            />\n          </ResponsiveTextV2>\n\n          <SelectedRangeText {...props} isMobile />\n\n          <FrFrContainer p=\"10px 20px\">\n            <PrimaryTextButton\n              onClick={handleCancel}\n              height=\"42px\"\n              color=\"cl_darkGrey\"\n              padding=\"0\"\n            >\n              Cancel\n            </PrimaryTextButton>\n\n            <ApplyButton {...props} />\n          </FrFrContainer>\n        </OutsideClickBox>\n      </Box>\n    );\n  }\n);\n"],"names":["BaseDateRangeInputMobile","React","props","ref","zIndex","customOptionSelected","handleCancel","getStaticRanges","onClickOutside","event","jsx","Box","jsxs","OutsideClickBox","ResponsiveTextV2","DateRangePicker","getCalendarProps","SelectedRangeText","FrFrContainer","PrimaryTextButton","ApplyButton"],"mappings":";;;;;;;;;;;;;AAcO,MAAMA,IAA2BC,EAAM;AAAA,EAC5C,CAACC,GAAOC,MAAQ;AACd,UAAM,EAAE,QAAAC,GAAQ,sBAAAC,GAAsB,cAAAC,GAAc,iBAAAC,MAClDL,GAEIM,IAAiB,CAACC,MAA6C;AACnE,MAAAA,KAAA,QAAAA,EAAO,kBACMH;IAAA;AAIb,WAAAI,gBAAAA,EAAA;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,IAAI;AAAA,UACF,UAAU;AAAA,UACV,KAAK;AAAA,UACL,MAAM;AAAA,UACN,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,WAAW;AAAA,UACX,IAAI;AAAA,UACJ,IAAI;AAAA,QACN;AAAA,QACA,aAAU;AAAA,QAEV,UAAAC,gBAAAA,EAAA;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,gBAAAL;AAAA,YACA,IAAI;AAAA,cACF,aAAa;AAAA,cACb,aAAa;AAAA,cACb,aAAa;AAAA,cACb,UAAU;AAAA,cACV,OAAO;AAAA,cACP,iBAAiB;AAAA,cACjB,GAAG;AAAA,cACH,cAAc;AAAA,cACd,QAAAJ;AAAA,cACA,8BAA8B;AAAA,gBAC5B,OAAO;AAAA,gBACP,eAAe;AAAA,cACjB;AAAA,cACA,4BAA4B;AAAA,gBAC1B,OAAO;AAAA,cACT;AAAA,cACA,uBAAuB;AAAA,gBACrB,SAASC,IAAuB,gBAAgB;AAAA,cAClD;AAAA,cACA,mBAAmB;AAAA,gBACjB,SAAS;AAAA,cACX;AAAA,cACA,2BAA2B;AAAA,gBACzB,UAAU;AAAA,gBACV,YAAY;AAAA,gBACZ,OAAO;AAAA,gBACP,YAAY;AAAA,gBACZ,GAAG;AAAA,cACL;AAAA,cACA,mBAAmB;AAAA,gBACjB,UAAU;AAAA,gBACV,YAAY;AAAA,gBACZ,OAAO;AAAA,gBACP,mBAAmB;AAAA,cACrB;AAAA,YACF;AAAA,YAEA,UAAA;AAAA,cAAAK,gBAAAA,MAACI,KAAiB,gBAAgB,CAAC,IAAI,WAAW,GAAG,KAAAX,GACnD,UAAAO,gBAAAA,EAAA;AAAA,gBAACK,EAAA;AAAA,gBAAA;AAAA,kBACE,GAAGC,EAAiBd,CAAK;AAAA,kBAC1B,WAAU;AAAA,kBACV,cAAcK,EAAgB,EAAI;AAAA,gBAAA;AAAA,cAAA,GAEtC;AAAA,cAECG,gBAAAA,EAAA,IAAAO,GAAA,EAAmB,GAAGf,GAAO,UAAQ,GAAC,CAAA;AAAA,cAEvCU,gBAAAA,EAAAA,KAACM,GAAc,EAAA,GAAE,aACf,UAAA;AAAA,gBAAAR,gBAAAA,EAAA;AAAA,kBAACS;AAAA,kBAAA;AAAA,oBACC,SAASb;AAAA,oBACT,QAAO;AAAA,oBACP,OAAM;AAAA,oBACN,SAAQ;AAAA,oBACT,UAAA;AAAA,kBAAA;AAAA,gBAED;AAAA,gBAEAI,gBAAAA,EAAAA,IAACU,GAAa,EAAA,GAAGlB,GAAO;AAAA,cAAA,GAC1B;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;"}

package/lib/sd-component-library302.js

@@ -18,63 +18,92 @@ const k = (e) => {
     quickSelectionLabel: p,
     alignCalendar: r
   } = e;
-  return /* @__PURE__ */ t.jsxs(l, { sx: {
-    overflowX: "auto",
-    borderStyle: "solid",
-    borderWidth: "1px",
-    minWidth: "max-content",
-    borderColor: "cl_lightGrey",
-    position: "absolute",
-    maxWidth: "max-content",
-    width: "max-content",
-    top: 0,
-    left: r === "left" ? "0" : r === "right" ? "unset" : void 0,
-    right: r === "right" ? "0" : r === "left" ? "unset" : void 0,
-    margin: "auto",
-    backgroundColor: "#fff",
-    zIndex: n,
-    ".rdrDateRangePickerWrapper": {
-      width: "unset",
-      flexDirection: "row"
-    },
-    ".rdrDefinedRangesWrapper": {
-      width: "226px"
-    },
-    ".rdrCalendarWrapper": {
-      display: "inline-flex"
-    },
-    ".rdrInputRanges": {
-      display: "none"
-    },
-    ".rdrStaticRanges:before": {
-      content: p,
-      fontSize: "14px",
-      fontFamily: "proxima-nova",
-      color: "#9BA2B4",
-      fontWeight: "300",
-      p: "10px 20px"
-    },
-    ".rdrStaticRange": {
-      fontSize: "14px",
-      fontFamily: "proxima-nova",
-      color: "#434A54",
-      borderBottomWidth: "1px"
+  return /* @__PURE__ */ t.jsxs(
+    l,
+    {
+      sx: {
+        overflowX: "auto",
+        borderStyle: "solid",
+        borderWidth: "1px",
+        minWidth: "max-content",
+        borderColor: "cl_lightGrey",
+        position: "absolute",
+        maxWidth: "max-content",
+        width: "max-content",
+        top: 0,
+        left: r === "left" ? "0" : r === "right" ? "unset" : void 0,
+        right: r === "right" ? "0" : r === "left" ? "unset" : void 0,
+        margin: "auto",
+        backgroundColor: "#fff",
+        zIndex: n,
+        ".rdrDateRangePickerWrapper": {
+          width: "unset",
+          flexDirection: "row"
+        },
+        ".rdrDefinedRangesWrapper": {
+          width: "226px"
+        },
+        ".rdrCalendarWrapper": {
+          display: "inline-flex"
+        },
+        ".rdrInputRanges": {
+          display: "none"
+        },
+        ".rdrStaticRanges:before": {
+          content: p,
+          fontSize: "14px",
+          fontFamily: "proxima-nova",
+          color: "#9BA2B4",
+          fontWeight: "300",
+          p: "10px 20px"
+        },
+        ".rdrStaticRange": {
+          fontSize: "14px",
+          fontFamily: "proxima-nova",
+          color: "#434A54",
+          borderBottomWidth: "1px"
+        }
+      },
+      "data-test": "calendar-wrapper",
+      children: [
+        /* @__PURE__ */ t.jsx(x, { children: /* @__PURE__ */ t.jsx(
+          s.DateRangePicker,
+          {
+            ...d(e),
+            direction: "horizontal",
+            staticRanges: i()
+          }
+        ) }),
+        /* @__PURE__ */ t.jsxs(
+          g,
+          {
+            sx: {
+              gridTemplateColumns: "max-content 1fr max-content",
+              gap: "30px",
+              p: "10px",
+              borderTopWidth: "1px",
+              borderTopStyle: "solid",
+              borderTopColor: "#CCD0DB"
+            },
+            children: [
+              /* @__PURE__ */ t.jsx(
+                m,
+                {
+                  onClick: a,
+                  height: "42px",
+                  color: "cl_darkGrey",
+                  padding: "0 0 0 10px",
+                  children: "Cancel"
+                }
+              ),
+              /* @__PURE__ */ t.jsx(c, { selectedRange: o }),
+              /* @__PURE__ */ t.jsx(f, { ...e })
+            ]
+          }
+        )
+      ]
     }
-  }, "data-test": "calendar-wrapper", children: [
-    /* @__PURE__ */ t.jsx(x, { children: /* @__PURE__ */ t.jsx(s.DateRangePicker, { ...d(e), direction: "horizontal", staticRanges: i() }) }),
-    /* @__PURE__ */ t.jsxs(g, { sx: {
-      gridTemplateColumns: "max-content 1fr max-content",
-      gap: "30px",
-      p: "10px",
-      borderTopWidth: "1px",
-      borderTopStyle: "solid",
-      borderTopColor: "#CCD0DB"
-    }, children: [
-      /* @__PURE__ */ t.jsx(m, { onClick: a, height: "42px", color: "cl_darkGrey", padding: "0 0 0 10px", children: "Cancel" }),
-      /* @__PURE__ */ t.jsx(c, { selectedRange: o }),
-      /* @__PURE__ */ t.jsx(f, { ...e })
-    ] })
-  ] });
+  );
 };
 export {
   k as BaseDateRangeInputDesktop