@selfdecode/sd-component-library 4.0.146 → 4.0.148

package/lib/sd-component-library29.js

@@ -1,124 +1,21 @@
-import { j as o } from "./sd-component-library197.js";
-import { Label as m } from "@rebass/forms";
-import { Box as d } from "rebass";
-import { useDependantState as g } from "./sd-component-library3.js";
-import { generateTestLocator as w } from "./sd-component-library4.js";
-import { FlexCenter as k } from "./sd-component-library34.js";
-function y(s, e) {
-  return (n) => {
-    const t = n.target.checked;
-    e == null || e(t), s(t);
-  };
-}
-const C = "10px", r = "20px", j = "5px", R = ({
-  children: s,
-  onChange: e,
-  checked: n,
-  disabled: t,
-  color: p = "cl_blue",
-  bg: a = "cl_white",
-  borderWidth: c = "1px",
-  m: h = "10px",
-  width: u = ["100%"],
-  isHoverCheckbox: b = !1,
-  testLocatorId: l
-}) => {
-  const [x, f] = g(!!n), i = b && !x;
-  return /* @__PURE__ */ o.jsxs(m, { sx: { alignItems: "center", width: u }, "data-testid": "checkbox", children: [
-    /* @__PURE__ */ o.jsxs(
-      k,
+import { j as i } from "./sd-component-library169.js";
+import n from "react";
+import { MaxWidthContainer as a } from "./sd-component-library40.js";
+const m = n.forwardRef(
+  (r, t) => {
+    const { bgSx: o, children: e, ...x } = r;
+    return /* @__PURE__ */ i.jsx(
+      a,
       {
-        size: r,
-        sx: {
-          position: "relative",
-          m: h,
-          cursor: t ? "default" : "pointer",
-          flexShrink: 0
-        },
-        children: [
-          /* @__PURE__ */ o.jsx(
-            d,
-            {
-              as: "input",
-              type: "checkbox",
-              sx: {
-                position: "absolute",
-                opacity: 0,
-                zIndex: -1,
-                width: 1,
-                height: 1,
-                overflow: "hidden"
-              },
-              onChange: y(f, e),
-              checked: x,
-              disabled: t || !1,
-              "data-testid": "checkbox-input",
-              ...w(l)
-            }
-          ),
-          /* @__PURE__ */ o.jsx(
-            d,
-            {
-              sx: {
-                transition: "width 0.1s ease-in",
-                position: "absolute",
-                left: "0px",
-                top: "0px",
-                borderRadius: "3px",
-                bg: a,
-                width: i ? j : r,
-                height: r,
-                borderColor: p,
-                borderStyle: "solid",
-                borderWidth: c,
-                "input:disabled ~ &": {
-                  borderColor: "cl_grey",
-                  borderStyle: "dotted"
-                },
-                /* Extends the area where hovering works */
-                ":before": i ? {
-                  content: "''",
-                  position: "absolute",
-                  top: "0px",
-                  bottom: "0px",
-                  left: "5px",
-                  width: "20px"
-                } : "",
-                ":hover": i ? {
-                  transition: "width 0.1s ease-in",
-                  width: r
-                } : ""
-              },
-              "data-testid": "checkbox-outer-square"
-            }
-          ),
-          !i && /* @__PURE__ */ o.jsx(
-            d,
-            {
-              size: C,
-              sx: {
-                borderRadius: "2px",
-                bg: "cl_white",
-                opacity: 0,
-                zIndex: 1,
-                "input:checked ~ &": {
-                  bg: p,
-                  opacity: 1
-                },
-                "input:disabled ~ &": {
-                  bg: "cl_grey"
-                }
-              },
-              "data-testid": "checkbox-inner-square"
-            }
-          )
-        ]
+        bgSx: { px: "25px", ...o },
+        ...x,
+        ref: t,
+        children: e
       }
-    ),
-    s
-  ] });
-};
+    );
+  }
+);
 export {
-  R as Checkbox
+  m as MaxWidthContainerV2
 };
 //# sourceMappingURL=sd-component-library29.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library29.js","sources":["../src/components/checkboxes/checkbox/checkbox.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Label } from \"@rebass/forms\";\nimport { Box } from \"rebass\";\n\nimport { useDependantState } from \"../../../core/custom-hooks\";\nimport { generateTestLocator } from \"../../../core/functions\";\nimport { FlexCenter } from \"../../containers\";\nimport { CheckboxProps } from \"./interfaces\";\n\n/**\n * Wrapper for the change event\n *\n * @param setChecked The dispatch function to set the state\n * @param callback The call function to run when the event happens\n */\nfunction changeWrapper(\n  setChecked: React.Dispatch<React.SetStateAction<boolean>>,\n  callback?: (newValue: boolean) => void\n): (event: React.ChangeEvent<HTMLInputElement>) => void {\n  return (event) => {\n    const newValue = event.target.checked;\n    callback?.(newValue);\n    setChecked(newValue);\n  };\n}\n\nconst innerBoxSize = \"10px\";\nconst outerBoxSize = \"20px\";\n\nconst shrankSize = \"5px\";\n\n/**\n * Base checkbox component. Other checkbox components should be built from this.\n * @deprecated use CheckboxV2 instead\n */\nexport const Checkbox = ({\n  children,\n  onChange,\n  checked,\n  disabled,\n  color = \"cl_blue\",\n  bg = \"cl_white\",\n  borderWidth = \"1px\",\n  m = \"10px\",\n  width = [\"100%\"],\n  isHoverCheckbox = false,\n  testLocatorId,\n}: CheckboxProps) => {\n  const [isChecked, setIsChecked] = useDependantState(!!checked);\n  const showHoverCheckbox = isHoverCheckbox && !isChecked;\n\n  return (\n    <Label sx={{ alignItems: \"center\", width }} data-testid=\"checkbox\">\n      <FlexCenter\n        size={outerBoxSize}\n        sx={{\n          position: \"relative\",\n          m,\n          cursor: disabled ? \"default\" : \"pointer\",\n          flexShrink: 0,\n        }}\n      >\n        <Box\n          as={\"input\"}\n          type={\"checkbox\"}\n          sx={{\n            position: \"absolute\",\n            opacity: 0,\n            zIndex: -1,\n            width: 1,\n            height: 1,\n            overflow: \"hidden\",\n          }}\n          onChange={changeWrapper(setIsChecked, onChange)}\n          checked={isChecked}\n          disabled={disabled || false}\n          data-testid=\"checkbox-input\"\n          {...generateTestLocator(testLocatorId)}\n        />\n        {/* Outer border of the checkbox */}\n        <Box\n          sx={{\n            transition: \"width 0.1s ease-in\",\n            position: \"absolute\",\n            left: \"0px\",\n            top: \"0px\",\n            borderRadius: \"3px\",\n            bg,\n            width: showHoverCheckbox ? shrankSize : outerBoxSize,\n            height: outerBoxSize,\n            borderColor: color,\n            borderStyle: \"solid\",\n            borderWidth: borderWidth,\n            \"input:disabled ~ &\": {\n              borderColor: \"cl_grey\",\n              borderStyle: \"dotted\",\n            },\n            /* Extends the area where hovering works */\n            \":before\": showHoverCheckbox\n              ? {\n                  content: \"''\",\n                  position: \"absolute\",\n                  top: \"0px\",\n                  bottom: \"0px\",\n                  left: \"5px\",\n                  width: \"20px\",\n                }\n              : \"\",\n            \":hover\": showHoverCheckbox\n              ? {\n                  transition: \"width 0.1s ease-in\",\n                  width: outerBoxSize,\n                }\n              : \"\",\n          }}\n          data-testid=\"checkbox-outer-square\"\n        />\n        {/* Inner square of the checkbox */}\n        {!showHoverCheckbox && (\n          <Box\n            size={innerBoxSize}\n            sx={{\n              borderRadius: \"2px\",\n              bg: \"cl_white\",\n              opacity: 0,\n              zIndex: 1,\n              \"input:checked ~ &\": {\n                bg: color,\n                opacity: 1,\n              },\n              \"input:disabled ~ &\": {\n                bg: \"cl_grey\",\n              },\n            }}\n            data-testid=\"checkbox-inner-square\"\n          />\n        )}\n      </FlexCenter>\n\n      {children}\n    </Label>\n  );\n};\n"],"names":["changeWrapper","setChecked","callback","event","newValue","innerBoxSize","outerBoxSize","shrankSize","Checkbox","children","onChange","checked","disabled","color","bg","borderWidth","m","width","isHoverCheckbox","testLocatorId","isChecked","setIsChecked","useDependantState","showHoverCheckbox","jsxs","Label","FlexCenter","jsx","Box","generateTestLocator"],"mappings":"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"}
+{"version":3,"file":"sd-component-library29.js","sources":["../src/components/containers/max-width-container-v2/max-width-container-v2.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { MaxWidthContainer } from \"../max-width-container\";\nimport { MaxWidthContainerProps as Props } from \"../max-width-container\";\n\nexport const MaxWidthContainerV2 = React.forwardRef<HTMLDivElement, Props>(\n  (props, ref) => {\n    const { bgSx, children, ...restOfProps } = props;\n    return (\n      <MaxWidthContainer\n        bgSx={{ px: \"25px\", ...bgSx }}\n        {...restOfProps}\n        ref={ref}\n      >\n        {children}\n      </MaxWidthContainer>\n    );\n  }\n);\n"],"names":["MaxWidthContainerV2","React","props","ref","bgSx","children","restOfProps","jsx","MaxWidthContainer"],"mappings":";;;AAKO,MAAMA,IAAsBC,EAAM;AAAA,EACvC,CAACC,GAAOC,MAAQ;AACd,UAAM,EAAE,MAAAC,GAAM,UAAAC,GAAU,GAAGC,MAAgBJ;AAEzC,WAAAK,gBAAAA,EAAA;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,MAAM,EAAE,IAAI,QAAQ,GAAGJ,EAAK;AAAA,QAC3B,GAAGE;AAAA,QACJ,KAAAH;AAAA,QAEC,UAAAE;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;"}

package/lib/sd-component-library3.js

@@ -1,7 +1,7 @@
 import { useState as u, useCallback as f, useEffect as a, useRef as w } from "react";
-import { disableBodyScroll as L, enableBodyScroll as b } from "./sd-component-library195.js";
+import { disableBodyScroll as L, enableBodyScroll as b } from "./sd-component-library167.js";
 import { debounce as v } from "lodash-es";
-import d from "./sd-component-library196.js";
+import d from "./sd-component-library168.js";
 const p = (e) => {
   const [t, n] = u(e);
   return a(() => {

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","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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"}
+{"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 * 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,136 +1,23 @@
-import { j as o } from "./sd-component-library197.js";
-import { useMemo as j, useRef as w, useEffect as S } from "react";
-import { Label as g } from "@rebass/forms";
-import { Box as h } from "rebass";
-import { useDependantState as z } from "./sd-component-library3.js";
-import { FlexCenter as B } from "./sd-component-library34.js";
-function y(n, e) {
-  return (d) => {
-    const r = d.target.checked ? "checked" : "unchecked";
-    e == null || e(r), n(r);
-  };
-}
-const R = "10px", s = "20px", a = "5px", f = ({ sx: n, ...e }) => /* @__PURE__ */ o.jsx(
-  h,
-  {
-    size: R,
-    sx: {
-      borderRadius: "2px",
-      ...n
-    },
-    ...e
-  }
-), $ = ({
-  children: n,
-  onChange: e,
-  value: d = "unchecked",
-  disabled: r = !1,
-  color: p = "cl_blue",
-  bg: i = "cl_transparent",
-  borderWidth: k = "2px",
-  m = "10px",
-  isHoverCheckbox: u = !1
-}) => {
-  const [t, b] = z(d), x = j(
-    () => r ? "cl_grey" : p,
-    [p, r]
-  ), c = w(null);
-  S(() => {
-    c.current && (c.current.checked = t === "checked", c.current.indeterminate = t === "partial");
-  }, [t]);
-  const l = u && t === "unchecked", C = l ? null : t !== "partial" ? /* @__PURE__ */ o.jsx(
-    f,
-    {
-      sx: {
-        bg: t === "checked" ? x : i
-      },
-      "data-testid": "checkbox-inner-square"
-    }
-  ) : /* @__PURE__ */ o.jsx(
-    f,
-    {
-      sx: {
-        border: "5px solid",
-        borderColor: x,
-        borderLeftColor: i,
-        borderTopColor: i
-      },
-      "data-testid": "checkbox-inner-triangle"
-    }
-  );
-  return /* @__PURE__ */ o.jsxs(g, { alignItems: "center", "data-testid": "partial-checkbox", children: [
-    /* @__PURE__ */ o.jsxs(
-      B,
-      {
-        size: s,
-        sx: {
-          position: "relative",
-          m,
-          cursor: "pointer",
-          flexShrink: 0
-        },
-        children: [
-          /* @__PURE__ */ o.jsx(
-            h,
-            {
-              as: "input",
-              type: "checkbox",
-              sx: {
-                position: "absolute",
-                opacity: 0,
-                zIndex: -1,
-                width: 1,
-                height: 1,
-                overflow: "hidden"
-              },
-              onChange: y(b, e),
-              checked: t === "checked",
-              disabled: r,
-              ref: c,
-              "data-testid": "checkbox-input"
-            }
-          ),
-          /* @__PURE__ */ o.jsx(
-            h,
-            {
-              sx: {
-                position: "absolute",
-                left: 0,
-                top: 0,
-                borderRadius: "3px",
-                bg: i,
-                width: l ? a : s,
-                height: s,
-                borderColor: x,
-                borderStyle: "solid",
-                borderWidth: k,
-                ...u ? {
-                  /* Extends the area where hovering works */
-                  ":before": {
-                    content: "''",
-                    position: "absolute",
-                    top: 0,
-                    bottom: 0,
-                    left: a,
-                    width: `calc(${s} - ${a})`
-                  },
-                  ":hover": {
-                    transition: "width 0.1s ease-in",
-                    width: s
-                  }
-                } : {}
-              },
-              "data-testid": "checkbox-outer-square"
-            }
-          ),
-          C
-        ]
-      }
-    ),
-    n
-  ] });
-};
+import { j as n } from "./sd-component-library169.js";
+import o from "react";
+import { Flex as r } from "rebass";
+const a = o.forwardRef(
+  (e, t) => /* @__PURE__ */ n.jsx(r, { justifyContent: "space-between", ...e, ref: t })
+), s = o.forwardRef(
+  (e, t) => /* @__PURE__ */ n.jsx(r, { alignItems: "center", ...e, ref: t })
+), j = o.forwardRef((e, t) => /* @__PURE__ */ n.jsx(s, { justifyContent: "space-between", ...e, ref: t })), l = o.forwardRef(
+  (e, t) => /* @__PURE__ */ n.jsx(s, { justifyContent: "center", ...e, ref: t })
+), i = o.forwardRef(
+  (e, t) => /* @__PURE__ */ n.jsx(r, { justifyContent: "center", ...e, ref: t })
+), m = o.forwardRef(
+  (e, t) => /* @__PURE__ */ n.jsx(r, { flexDirection: "column", ...e, ref: t })
+);
 export {
-  $ as PartialCheckbox
+  l as FlexCenter,
+  j as FlexCenterSpaceBetween,
+  m as FlexColumn,
+  i as FlexContentCenter,
+  s as FlexItemsCenter,
+  a as FlexSpaceBetween
 };
 //# sourceMappingURL=sd-component-library30.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library30.js","sources":["../src/components/checkboxes/partial-checkbox/partial-checkbox.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef } from \"react\";\n\nimport { Label } from \"@rebass/forms\";\nimport { Box, BoxProps } from \"rebass\";\n\nimport { useDependantState } from \"../../../core/custom-hooks\";\nimport { FlexCenter } from \"../../containers\";\nimport { PartialCheckboxProps, PartialCheckboxState } from \"./interfaces\";\n\n/**\n * Wrapper for the change event\n *\n * @param setState The dispatch function to set the state\n * @param callback The call function to run when the event happens\n */\nfunction changeWrapper(\n  setState: React.Dispatch<React.SetStateAction<PartialCheckboxState>>,\n  callback?: (newValue: PartialCheckboxState) => void\n): (event: React.ChangeEvent<HTMLInputElement>) => void {\n  return (event) => {\n    const newValue = event.target.checked ? \"checked\" : \"unchecked\";\n    callback?.(newValue);\n    setState(newValue);\n  };\n}\n\nconst innerBoxSize = \"10px\";\nconst outerBoxSize = \"20px\";\n\nconst shrankSize = \"5px\";\n\nconst InnerBox: React.FC<Pick<BoxProps, \"sx\">> = ({ sx, ...props }) => (\n  <Box\n    size={innerBoxSize}\n    sx={{\n      borderRadius: \"2px\",\n      ...sx,\n    }}\n    {...props}\n  />\n);\n\n/**\n * Checkbox component that supports partially checked state\n * @deprecated use PartialCheckboxV2 instead\n */\nexport const PartialCheckbox: React.FC<PartialCheckboxProps> = ({\n  children,\n  onChange,\n  value = \"unchecked\",\n  disabled = false,\n  color = \"cl_blue\",\n  bg = \"cl_transparent\",\n  borderWidth = \"2px\",\n  m = \"10px\",\n  isHoverCheckbox = false,\n}) => {\n  const [checkboxState, setCheckboxState] =\n    useDependantState<PartialCheckboxState>(value);\n  const checkedBgColor = useMemo(\n    () => (disabled ? \"cl_grey\" : color),\n    [color, disabled]\n  );\n\n  // Checkbox ref\n  const ref = useRef<HTMLInputElement>(null);\n\n  // Update checkbox element properties if state changes\n  useEffect(() => {\n    if (ref.current) {\n      ref.current.checked = checkboxState === \"checked\";\n      ref.current.indeterminate = checkboxState === \"partial\";\n    }\n  }, [checkboxState]);\n\n  const showHoverCheckbox = isHoverCheckbox && checkboxState === \"unchecked\";\n\n  const innerCheckBox = showHoverCheckbox ? null : checkboxState !==\n    \"partial\" ? (\n    <InnerBox\n      sx={{\n        bg: checkboxState === \"checked\" ? checkedBgColor : bg,\n      }}\n      data-testid=\"checkbox-inner-square\"\n    />\n  ) : (\n    <InnerBox\n      sx={{\n        border: \"5px solid\",\n        borderColor: checkedBgColor,\n        borderLeftColor: bg,\n        borderTopColor: bg,\n      }}\n      data-testid=\"checkbox-inner-triangle\"\n    />\n  );\n\n  return (\n    <Label alignItems=\"center\" data-testid=\"partial-checkbox\">\n      <FlexCenter\n        size={outerBoxSize}\n        sx={{\n          position: \"relative\",\n          m,\n          cursor: \"pointer\",\n          flexShrink: 0,\n        }}\n      >\n        <Box\n          as={\"input\"}\n          type={\"checkbox\"}\n          sx={{\n            position: \"absolute\",\n            opacity: 0,\n            zIndex: -1,\n            width: 1,\n            height: 1,\n            overflow: \"hidden\",\n          }}\n          onChange={changeWrapper(setCheckboxState, onChange)}\n          checked={checkboxState === \"checked\"}\n          disabled={disabled}\n          ref={ref}\n          data-testid=\"checkbox-input\"\n        />\n        {/* Outer border of the checkbox */}\n        <Box\n          sx={{\n            position: \"absolute\",\n            left: 0,\n            top: 0,\n            borderRadius: \"3px\",\n            bg,\n            width: showHoverCheckbox ? shrankSize : outerBoxSize,\n            height: outerBoxSize,\n            borderColor: checkedBgColor,\n            borderStyle: \"solid\",\n            borderWidth: borderWidth,\n            ...(isHoverCheckbox\n              ? {\n                  /* Extends the area where hovering works */\n                  \":before\": {\n                    content: \"''\",\n                    position: \"absolute\",\n                    top: 0,\n                    bottom: 0,\n                    left: shrankSize,\n                    width: `calc(${outerBoxSize} - ${shrankSize})`,\n                  },\n                  \":hover\": {\n                    transition: \"width 0.1s ease-in\",\n                    width: outerBoxSize,\n                  },\n                }\n              : {}),\n          }}\n          data-testid=\"checkbox-outer-square\"\n        />\n\n        {innerCheckBox}\n      </FlexCenter>\n\n      {children}\n    </Label>\n  );\n};\n"],"names":["changeWrapper","setState","callback","event","newValue","innerBoxSize","outerBoxSize","shrankSize","InnerBox","sx","props","jsx","Box","PartialCheckbox","children","onChange","value","disabled","color","bg","borderWidth","isHoverCheckbox","checkboxState","setCheckboxState","useDependantState","checkedBgColor","useMemo","ref","useRef","useEffect","showHoverCheckbox","innerCheckBox","jsxs","Label","FlexCenter"],"mappings":"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"}
+{"version":3,"file":"sd-component-library30.js","sources":["../src/components/containers/flex-containers/flex-containers.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Flex, FlexProps } from \"rebass\";\n\nexport const FlexSpaceBetween = React.forwardRef<HTMLDivElement, FlexProps>(\n  (props, ref) => <Flex justifyContent=\"space-between\" {...props} ref={ref} />\n);\n\nexport const FlexItemsCenter = React.forwardRef<HTMLDivElement, FlexProps>(\n  (props, ref) => <Flex alignItems=\"center\" {...props} ref={ref} />\n);\n\nexport const FlexCenterSpaceBetween = React.forwardRef<\n  HTMLDivElement,\n  FlexProps\n>((props, ref) => (\n  <FlexItemsCenter justifyContent=\"space-between\" {...props} ref={ref} />\n));\n\nexport const FlexCenter = React.forwardRef<HTMLDivElement, FlexProps>(\n  (props, ref) => (\n    <FlexItemsCenter justifyContent=\"center\" {...props} ref={ref} />\n  )\n);\n\nexport const FlexContentCenter = React.forwardRef<HTMLDivElement, FlexProps>(\n  (props, ref) => <Flex justifyContent=\"center\" {...props} ref={ref} />\n);\n\nexport const FlexColumn = React.forwardRef<HTMLDivElement, FlexProps>(\n  (props, ref) => <Flex flexDirection=\"column\" {...props} ref={ref} />\n);\n"],"names":["FlexSpaceBetween","React","props","ref","jsx","Flex","FlexItemsCenter","FlexCenterSpaceBetween","FlexCenter","FlexContentCenter","FlexColumn"],"mappings":";;;AAIO,MAAMA,IAAmBC,EAAM;AAAA,EACpC,CAACC,GAAOC,MAAQC,gBAAAA,EAAAA,IAACC,KAAK,gBAAe,iBAAiB,GAAGH,GAAO,KAAAC,GAAU;AAC5E,GAEaG,IAAkBL,EAAM;AAAA,EACnC,CAACC,GAAOC,MAAQC,gBAAAA,EAAAA,IAACC,KAAK,YAAW,UAAU,GAAGH,GAAO,KAAAC,GAAU;AACjE,GAEaI,IAAyBN,EAAM,WAG1C,CAACC,GAAOC,MACPC,gBAAAA,EAAA,IAAAE,GAAA,EAAgB,gBAAe,iBAAiB,GAAGJ,GAAO,KAAAC,EAAU,CAAA,CACtE,GAEYK,IAAaP,EAAM;AAAA,EAC9B,CAACC,GAAOC,MACNC,gBAAAA,EAAAA,IAACE,KAAgB,gBAAe,UAAU,GAAGJ,GAAO,KAAAC,GAAU;AAElE,GAEaM,IAAoBR,EAAM;AAAA,EACrC,CAACC,GAAOC,MAAQC,gBAAAA,EAAAA,IAACC,KAAK,gBAAe,UAAU,GAAGH,GAAO,KAAAC,GAAU;AACrE,GAEaO,IAAaT,EAAM;AAAA,EAC9B,CAACC,GAAOC,MAAQC,gBAAAA,EAAAA,IAACC,KAAK,eAAc,UAAU,GAAGH,GAAO,KAAAC,GAAU;AACpE;"}

package/lib/sd-component-library31.js

@@ -1,88 +1,67 @@
-import { j as e } from "./sd-component-library197.js";
-import { Box as d } from "rebass";
-import { useHover as j } from "./sd-component-library3.js";
-import { isTouchScreen as S } from "./sd-component-library4.js";
-import { FlexItemsCenter as g, FlexCenter as w } from "./sd-component-library34.js";
-const R = ({
-  onChange: o,
-  value: r,
-  isHoverCheckbox: n,
-  stopPropagation: s = !1,
-  ...t
-}) => {
-  const i = (c) => {
-    s && c.stopPropagation(), o(!r);
-  }, x = n && !r;
-  return /* @__PURE__ */ e.jsx(
-    v,
+import { j as B } from "./sd-component-library169.js";
+import { Box as T } from "rebass";
+const G = (t) => {
+  const {
+    children: r,
+    gridTemplateColumns: e,
+    gridTemplateRows: i,
+    width: o = "100%",
+    height: s = "100%",
+    alignItems: d = "center",
+    alignContent: n,
+    justifyItems: m,
+    justifyContent: a,
+    gap: l,
+    p,
+    borderColor: g,
+    borderStyle: b,
+    borderWidth: x,
+    borderRadius: u,
+    bg: c,
+    m: f,
+    mt: h,
+    mr: j,
+    mb: C,
+    ml: y,
+    id: I,
+    zIndex: R,
+    ...w
+  } = t;
+  return /* @__PURE__ */ B.jsx(
+    T,
     {
-      showInnerBox: r,
-      onClick: i,
-      showHoverCheckbox: x,
-      ...t
-    }
-  );
-}, z = "10px", l = "20px", B = "5px", v = ({
-  disabled: o,
-  containerSx: r,
-  showHoverCheckbox: n,
-  bg: s,
-  showBGColorWhenIdle: t,
-  disabledColor: i = "cl_grey",
-  color: x = "cl_blue",
-  children: c,
-  showInnerBox: C,
-  onClick: m,
-  borderRadius: a = "3px",
-  borderWidth: k = "2px",
-  innerBoxSx: b
-}) => {
-  const { isHover: f, hoverCallbacks: u } = j(), h = f || !n || S(), p = o ? i : x;
-  return /* @__PURE__ */ e.jsxs(
-    g,
-    {
-      onClick: o ? void 0 : m,
+      "data-testid": "base-grid-container",
+      ...w,
+      id: I,
       sx: {
-        cursor: o ? "default" : "pointer",
-        gap: "10px",
-        ...r
+        display: "grid",
+        width: o,
+        height: s,
+        p,
+        gap: l,
+        gridTemplateColumns: e,
+        gridTemplateRows: i,
+        alignItems: d,
+        alignContent: n,
+        justifyItems: m,
+        justifyContent: a,
+        borderColor: g,
+        borderStyle: b,
+        borderWidth: x,
+        borderRadius: u,
+        bg: c,
+        m: f,
+        mt: h,
+        mr: j,
+        mb: C,
+        ml: y,
+        zIndex: R
       },
-      ...u,
-      children: [
-        /* @__PURE__ */ e.jsx(d, { size: l, sx: { flexShrink: 0 }, children: /* @__PURE__ */ e.jsx(
-          w,
-          {
-            width: h ? l : B,
-            height: l,
-            bg: t && h ? "" : s,
-            sx: {
-              flexShrink: 0,
-              borderRadius: a,
-              borderWidth: k,
-              borderColor: p,
-              borderStyle: "solid",
-              transition: "width 0.1s ease-in"
-            },
-            children: C && /* @__PURE__ */ e.jsx(
-              d,
-              {
-                sx: {
-                  border: `calc(${z} / 2) solid`,
-                  borderColor: p,
-                  borderRadius: "2px",
-                  ...b
-                }
-              }
-            )
-          }
-        ) }),
-        c
-      ]
+      children: r
     }
   );
 };
 export {
-  R as CheckboxV2,
-  v as CheckboxV2Container
+  G as BaseGridContainer
 };
 //# sourceMappingURL=sd-component-library31.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library31.js","sources":["../src/components/checkboxes/checkbox-v2/checkbox-v2.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { useHover } from \"../../../core/custom-hooks\";\nimport { isTouchScreen } from \"../../../core/functions\";\nimport { FlexCenter, FlexItemsCenter } from \"../../containers\";\nimport {\n  CheckboxV2ContainerProps as ContainerProps,\n  CheckboxV2Props as Props,\n} from \"./interfaces\";\n\nexport const CheckboxV2: React.FC<Props> = ({\n  onChange,\n  value,\n  isHoverCheckbox,\n  stopPropagation = false,\n  ...containerProps\n}) => {\n  const onClick: ContainerProps[\"onClick\"] = (event) => {\n    stopPropagation && event.stopPropagation();\n    onChange(!value);\n  };\n\n  const showHoverCheckbox = isHoverCheckbox && !value;\n\n  return (\n    <CheckboxV2Container\n      showInnerBox={value}\n      onClick={onClick}\n      showHoverCheckbox={showHoverCheckbox}\n      {...containerProps}\n    />\n  );\n};\n\nconst innerBoxSize = \"10px\";\nconst outerBoxSize = \"20px\";\n\nconst shrankSize = \"5px\";\n\nexport const CheckboxV2Container: React.FC<ContainerProps> = ({\n  disabled,\n  containerSx,\n  showHoverCheckbox,\n  bg,\n  showBGColorWhenIdle,\n  disabledColor = \"cl_grey\",\n  color = \"cl_blue\",\n  children,\n  showInnerBox,\n  onClick,\n  borderRadius = \"3px\",\n  borderWidth = \"2px\",\n  innerBoxSx,\n}) => {\n  const { isHover, hoverCallbacks } = useHover();\n  const isCheckboxExtended = isHover || !showHoverCheckbox || isTouchScreen();\n  const currentColor = disabled ? disabledColor : color;\n\n  return (\n    <FlexItemsCenter\n      onClick={disabled ? undefined : onClick}\n      sx={{\n        cursor: disabled ? \"default\" : \"pointer\",\n        gap: \"10px\",\n        ...containerSx,\n      }}\n      {...hoverCallbacks}\n    >\n      <Box size={outerBoxSize} sx={{ flexShrink: 0 }}>\n        <FlexCenter\n          width={isCheckboxExtended ? outerBoxSize : shrankSize}\n          height={outerBoxSize}\n          bg={showBGColorWhenIdle ? (isCheckboxExtended ? \"\" : bg) : bg}\n          sx={{\n            flexShrink: 0,\n            borderRadius,\n            borderWidth,\n            borderColor: currentColor,\n            borderStyle: \"solid\",\n            transition: \"width 0.1s ease-in\",\n          }}\n        >\n          {showInnerBox && (\n            <Box\n              sx={{\n                border: `calc(${innerBoxSize} / 2) solid`,\n                borderColor: currentColor,\n                borderRadius: \"2px\",\n                ...innerBoxSx,\n              }}\n            />\n          )}\n        </FlexCenter>\n      </Box>\n\n      {children}\n    </FlexItemsCenter>\n  );\n};\n"],"names":["CheckboxV2","onChange","value","isHoverCheckbox","stopPropagation","containerProps","onClick","event","showHoverCheckbox","jsx","CheckboxV2Container","innerBoxSize","outerBoxSize","shrankSize","disabled","containerSx","bg","showBGColorWhenIdle","disabledColor","color","children","showInnerBox","borderRadius","borderWidth","innerBoxSx","isHover","hoverCallbacks","useHover","isCheckboxExtended","isTouchScreen","currentColor","jsxs","FlexItemsCenter","Box","FlexCenter"],"mappings":";;;;;AAYO,MAAMA,IAA8B,CAAC;AAAA,EAC1C,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,GAAGC;AACL,MAAM;AACE,QAAAC,IAAqC,CAACC,MAAU;AACpD,IAAAH,KAAmBG,EAAM,mBACzBN,EAAS,CAACC,CAAK;AAAA,EAAA,GAGXM,IAAoBL,KAAmB,CAACD;AAG5C,SAAAO,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,cAAcR;AAAA,MACd,SAAAI;AAAA,MACA,mBAAAE;AAAA,MACC,GAAGH;AAAA,IAAA;AAAA,EAAA;AAGV,GAEMM,IAAe,QACfC,IAAe,QAEfC,IAAa,OAENH,IAAgD,CAAC;AAAA,EAC5D,UAAAI;AAAA,EACA,aAAAC;AAAA,EACA,mBAAAP;AAAA,EACA,IAAAQ;AAAA,EACA,qBAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,OAAAC,IAAQ;AAAA,EACR,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,SAAAf;AAAA,EACA,cAAAgB,IAAe;AAAA,EACf,aAAAC,IAAc;AAAA,EACd,YAAAC;AACF,MAAM;AACJ,QAAM,EAAE,SAAAC,GAAS,gBAAAC,EAAe,IAAIC,EAAS,GACvCC,IAAqBH,KAAW,CAACjB,KAAqBqB,EAAc,GACpEC,IAAehB,IAAWI,IAAgBC;AAG9C,SAAAY,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAASlB,IAAW,SAAYR;AAAA,MAChC,IAAI;AAAA,QACF,QAAQQ,IAAW,YAAY;AAAA,QAC/B,KAAK;AAAA,QACL,GAAGC;AAAA,MACL;AAAA,MACC,GAAGW;AAAA,MAEJ,UAAA;AAAA,QAAAjB,gBAAAA,MAACwB,KAAI,MAAMrB,GAAc,IAAI,EAAE,YAAY,KACzC,UAAAH,gBAAAA,EAAA;AAAA,UAACyB;AAAA,UAAA;AAAA,YACC,OAAON,IAAqBhB,IAAeC;AAAA,YAC3C,QAAQD;AAAA,YACR,IAAIK,KAAuBW,IAAqB,KAAWZ;AAAA,YAC3D,IAAI;AAAA,cACF,YAAY;AAAA,cACZ,cAAAM;AAAA,cACA,aAAAC;AAAA,cACA,aAAaO;AAAA,cACb,aAAa;AAAA,cACb,YAAY;AAAA,YACd;AAAA,YAEC,UACCT,KAAAZ,gBAAAA,EAAA;AAAA,cAACwB;AAAA,cAAA;AAAA,gBACC,IAAI;AAAA,kBACF,QAAQ,QAAQtB,CAAY;AAAA,kBAC5B,aAAamB;AAAA,kBACb,cAAc;AAAA,kBACd,GAAGN;AAAA,gBACL;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QAAA,GAGN;AAAA,QAECJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"sd-component-library31.js","sources":["../src/components/containers/grid-containers/base-grid-container/base-grid-container.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { BaseGridContainerProps } from \"./interfaces\";\n\n/**\n * Base grid container component.\n * @deprecated use Grid instead\n */\nexport const BaseGridContainer: React.FC<BaseGridContainerProps> = (props) => {\n  const {\n    children,\n    gridTemplateColumns,\n    gridTemplateRows,\n    width = \"100%\",\n    height = \"100%\",\n    alignItems = \"center\",\n    alignContent,\n    justifyItems,\n    justifyContent,\n    gap,\n    p,\n    borderColor,\n    borderStyle,\n    borderWidth,\n    borderRadius,\n    bg,\n    m,\n    mt,\n    mr,\n    mb,\n    ml,\n    id,\n    zIndex,\n    ...restOfProps\n  } = props;\n  return (\n    <Box\n      data-testid=\"base-grid-container\"\n      {...restOfProps}\n      id={id}\n      sx={{\n        display: \"grid\",\n        width,\n        height,\n        p,\n        gap,\n        gridTemplateColumns,\n        gridTemplateRows,\n        alignItems,\n        alignContent,\n        justifyItems,\n        justifyContent,\n        borderColor,\n        borderStyle,\n        borderWidth,\n        borderRadius,\n        bg,\n        m,\n        mt,\n        mr,\n        mb,\n        ml,\n        zIndex,\n      }}\n    >\n      {children}\n    </Box>\n  );\n};\n"],"names":["BaseGridContainer","props","children","gridTemplateColumns","gridTemplateRows","width","height","alignItems","alignContent","justifyItems","justifyContent","gap","borderColor","borderStyle","borderWidth","borderRadius","bg","m","mt","mr","mb","ml","id","zIndex","restOfProps","jsx","Box"],"mappings":";;AAUa,MAAAA,IAAsD,CAACC,MAAU;AACtE,QAAA;AAAA,IACJ,UAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,QAAAC,IAAS;AAAA,IACT,YAAAC,IAAa;AAAA,IACb,cAAAC;AAAA,IACA,cAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,KAAAC;AAAA,IACA;AAAA,IACA,aAAAC;AAAA,IACA,aAAAC;AAAA,IACA,aAAAC;AAAA,IACA,cAAAC;AAAA,IACA,IAAAC;AAAA,IACA,GAAAC;AAAA,IACA,IAAAC;AAAA,IACA,IAAAC;AAAA,IACA,IAAAC;AAAA,IACA,IAAAC;AAAA,IACA,IAAAC;AAAA,IACA,QAAAC;AAAA,IACA,GAAGC;AAAA,EACD,IAAAvB;AAEF,SAAAwB,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACX,GAAGF;AAAA,MACJ,IAAAF;AAAA,MACA,IAAI;AAAA,QACF,SAAS;AAAA,QACT,OAAAjB;AAAA,QACA,QAAAC;AAAA,QACA;AAAA,QACA,KAAAK;AAAA,QACA,qBAAAR;AAAA,QACA,kBAAAC;AAAA,QACA,YAAAG;AAAA,QACA,cAAAC;AAAA,QACA,cAAAC;AAAA,QACA,gBAAAC;AAAA,QACA,aAAAE;AAAA,QACA,aAAAC;AAAA,QACA,aAAAC;AAAA,QACA,cAAAC;AAAA,QACA,IAAAC;AAAA,QACA,GAAAC;AAAA,QACA,IAAAC;AAAA,QACA,IAAAC;AAAA,QACA,IAAAC;AAAA,QACA,IAAAC;AAAA,QACA,QAAAE;AAAA,MACF;AAAA,MAEC,UAAArB;AAAA,IAAA;AAAA,EAAA;AAGP;"}