@televet/kibble-ui 1.20.21-beta.cs44 → 1.20.21-beta.cs46

package/build/heading.component-da9d3cfb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"heading.component-da9d3cfb.js","sources":["../node_modules/@chakra-ui/media-query/dist/chakra-ui-media-query.esm.js","../src/components/Heading/heading.component.tsx"],"sourcesContent":["import { useTheme } from '@chakra-ui/system';\nimport { isBrowser, __DEV__, memoizedGet, breakpoints, isArray, fromEntries, arrayToObjectNotation } from '@chakra-ui/utils';\nimport * as React from 'react';\nimport React__default from 'react';\nimport { useEnvironment } from '@chakra-ui/react-env';\n\nvar useSafeLayoutEffect = isBrowser ? React.useLayoutEffect : React.useEffect;\n/**\n * React hook that tracks state of a CSS media query\n *\n * @param query the media query to match\n */\n\nfunction useMediaQuery(query) {\n  var env = useEnvironment();\n  var queries = Array.isArray(query) ? query : [query];\n  var isSupported = isBrowser && \"matchMedia\" in env.window;\n\n  var _React$useState = React.useState(queries.map(function (query) {\n    return isSupported ? !!env.window.matchMedia(query).matches : false;\n  })),\n      matches = _React$useState[0],\n      setMatches = _React$useState[1]; // Specifying matches in the dependency list will cause the event listeners\n  // to unload and then load each time the dependency changes. This causes\n  // Media Query Events to be missed. The event listeners should only be unloaded\n  // when the component unloads.\n\n\n  useSafeLayoutEffect(function () {\n    if (!isSupported) return undefined;\n    var mediaQueryList = queries.map(function (query) {\n      return env.window.matchMedia(query);\n    });\n    var listenerList = mediaQueryList.map(function (_, index) {\n      var listener = function listener(mqlEvent) {\n        var queryIndex = mediaQueryList.findIndex(function (mediaQuery) {\n          return mediaQuery.media === mqlEvent.media;\n        }); // As the event listener is on the media query list, any time the\n        // listener is called, we know there is a change. There's no need\n        // to compare the previous matches with current. Using\n        // setMatches(matches => {...}) provides access to the current matches\n        // state.  Trying to access matches outside the setMatches function\n        // would provide data from the the time of instantiation (stale).\n\n        setMatches(function (matches) {\n          var currentMatches = matches.map(function (x) {\n            return x;\n          });\n          currentMatches[queryIndex] = mqlEvent.matches;\n          return currentMatches;\n        });\n      }; // Listening to the 'change' event on the Media Query List Object\n      // is more performant as the callback is only invoked when a specified\n      // media query is matched. Using addEventListener on the window object\n      // to listen for the resize event will call the callback on every\n      // viewport resize.\n\n\n      if (typeof mediaQueryList[index].addEventListener === \"function\") {\n        mediaQueryList[index].addEventListener(\"change\", listener);\n      } else {\n        mediaQueryList[index].addListener(listener);\n      }\n\n      return listener;\n    });\n    return function () {\n      mediaQueryList.forEach(function (_, index) {\n        if (typeof mediaQueryList[index].removeEventListener === \"function\") {\n          mediaQueryList[index].removeEventListener(\"change\", listenerList[index]);\n        } else {\n          mediaQueryList[index].removeListener(listenerList[index]);\n        }\n      });\n    };\n  }, []);\n  return matches;\n}\n\n/**\n * Visibility\n *\n * React component to control the visibility of its\n * children based on the current breakpoint\n */\nvar Visibility = function Visibility(props) {\n  var breakpoint = props.breakpoint,\n      hide = props.hide,\n      children = props.children;\n\n  var _useMediaQuery = useMediaQuery(breakpoint),\n      show = _useMediaQuery[0];\n\n  var isVisible = hide ? !show : show;\n  var rendered = isVisible ? children : null;\n  return rendered;\n};\n\nvar Hide = function Hide(props) {\n  var children = props.children;\n  var query = useQuery(props);\n  return /*#__PURE__*/React.createElement(Visibility, {\n    breakpoint: query,\n    hide: true\n  }, children);\n};\n\nif (__DEV__) {\n  Hide.displayName = \"Hide\";\n}\n\nvar Show = function Show(props) {\n  var children = props.children;\n  var query = useQuery(props);\n  return /*#__PURE__*/React.createElement(Visibility, {\n    breakpoint: query\n  }, children);\n};\n\nif (__DEV__) {\n  Show.displayName = \"Show\";\n}\n\nvar getBreakpoint = function getBreakpoint(theme, value) {\n  return memoizedGet(theme, \"breakpoints.\" + value, value);\n};\n\nfunction useQuery(props) {\n  var _props$breakpoint = props.breakpoint,\n      breakpoint = _props$breakpoint === void 0 ? \"\" : _props$breakpoint,\n      below = props.below,\n      above = props.above;\n  var theme = useTheme();\n  var bpBelow = getBreakpoint(theme, below);\n  var bpAbove = getBreakpoint(theme, above);\n  var query = breakpoint;\n\n  if (bpBelow) {\n    query = \"(max-width: \" + bpBelow + \")\";\n  } else if (bpAbove) {\n    query = \"(min-width: \" + bpAbove + \")\";\n  }\n\n  return query;\n}\n\n/**\n * React hook used to get the user's animation preference.\n */\n\nfunction usePrefersReducedMotion() {\n  var _useMediaQuery = useMediaQuery(\"(prefers-reduced-motion: reduce)\"),\n      prefersReducedMotion = _useMediaQuery[0];\n\n  return prefersReducedMotion;\n}\n/**\n * React hook for getting the user's color mode preference.\n */\n\nfunction useColorModePreference() {\n  var _useMediaQuery2 = useMediaQuery([\"(prefers-color-scheme: light)\", \"(prefers-color-scheme: dark)\"]),\n      isLight = _useMediaQuery2[0],\n      isDark = _useMediaQuery2[1];\n\n  if (isLight) return \"light\";\n  if (isDark) return \"dark\";\n  return undefined;\n}\n\n/**\n * React hook used to get the current responsive media breakpoint.\n *\n * @param [defaultBreakpoint=\"base\"] default breakpoint name\n * (in non-window environments like SSR)\n *\n * For SSR, you can use a package like [is-mobile](https://github.com/kaimallea/isMobile)\n * to get the default breakpoint value from the user-agent\n */\n\nfunction useBreakpoint(defaultBreakpoint // default value ensures SSR+CSR consistency\n) {\n  if (defaultBreakpoint === void 0) {\n    defaultBreakpoint = \"base\";\n  }\n\n  var _useTheme = useTheme(),\n      __breakpoints = _useTheme.__breakpoints;\n\n  var env = useEnvironment();\n  var queries = React__default.useMemo(function () {\n    var _breakpoints$details;\n\n    return (_breakpoints$details = __breakpoints == null ? void 0 : __breakpoints.details.map(function (_ref) {\n      var minMaxQuery = _ref.minMaxQuery,\n          breakpoint = _ref.breakpoint;\n      return {\n        breakpoint: breakpoint,\n        query: minMaxQuery.replace(\"@media screen and \", \"\")\n      };\n    })) != null ? _breakpoints$details : [];\n  }, [__breakpoints]);\n\n  var _React$useState = React__default.useState(function () {\n    if (defaultBreakpoint) {\n      // use default breakpoint to ensure render consistency in SSR + CSR environments\n      // => first render on the client has to match the render on the server\n      var fallbackBreakpointDetail = queries.find(function (_ref2) {\n        var breakpoint = _ref2.breakpoint;\n        return breakpoint === defaultBreakpoint;\n      });\n\n      if (fallbackBreakpointDetail) {\n        return fallbackBreakpointDetail.breakpoint;\n      }\n    }\n\n    if (env.window.matchMedia) {\n      // set correct breakpoint on first render if no default breakpoint was provided\n      var matchingBreakpointDetail = queries.find(function (_ref3) {\n        var query = _ref3.query;\n        return env.window.matchMedia(query).matches;\n      });\n\n      if (matchingBreakpointDetail) {\n        return matchingBreakpointDetail.breakpoint;\n      }\n    }\n\n    return undefined;\n  }),\n      currentBreakpoint = _React$useState[0],\n      setCurrentBreakpoint = _React$useState[1];\n\n  React__default.useEffect(function () {\n    var allUnregisterFns = queries.map(function (_ref4) {\n      var breakpoint = _ref4.breakpoint,\n          query = _ref4.query;\n      var mediaQueryList = env.window.matchMedia(query);\n\n      if (mediaQueryList.matches) {\n        setCurrentBreakpoint(breakpoint);\n      }\n\n      var handleChange = function handleChange(ev) {\n        if (ev.matches) {\n          setCurrentBreakpoint(breakpoint);\n        }\n      }; // add media query listener\n\n\n      if (typeof mediaQueryList.addEventListener === \"function\") {\n        mediaQueryList.addEventListener(\"change\", handleChange);\n      } else {\n        mediaQueryList.addListener(handleChange);\n      } // return unregister fn\n\n\n      return function () {\n        if (typeof mediaQueryList.removeEventListener === \"function\") {\n          mediaQueryList.removeEventListener(\"change\", handleChange);\n        } else {\n          mediaQueryList.removeListener(handleChange);\n        }\n      };\n    });\n    return function () {\n      allUnregisterFns.forEach(function (unregister) {\n        return unregister();\n      });\n    };\n  }, [queries, __breakpoints, env.window]);\n  return currentBreakpoint;\n}\n\nfunction getClosestValue(values, breakpoint, breakpoints$1) {\n  if (breakpoints$1 === void 0) {\n    breakpoints$1 = breakpoints;\n  }\n\n  var index = Object.keys(values).indexOf(breakpoint);\n\n  if (index !== -1) {\n    return values[breakpoint];\n  }\n\n  var stopIndex = breakpoints$1.indexOf(breakpoint);\n\n  while (stopIndex >= 0) {\n    var key = breakpoints$1[stopIndex];\n\n    if (values[key] != null) {\n      index = stopIndex;\n      break;\n    }\n\n    stopIndex -= 1;\n  }\n\n  if (index !== -1) {\n    var _key = breakpoints$1[index];\n    return values[_key];\n  }\n\n  return undefined;\n}\n\n/**\n * React hook for getting the value for the current breakpoint from the\n * provided responsive values object.\n *\n * @param values\n * @param [defaultBreakpoint] default breakpoint name\n * (in non-window environments like SSR)\n *\n * For SSR, you can use a package like [is-mobile](https://github.com/kaimallea/isMobile)\n * to get the default breakpoint value from the user-agent\n *\n * @example\n * const width = useBreakpointValue({ base: '150px', md: '250px' })\n */\n\nfunction useBreakpointValue(values, defaultBreakpoint) {\n  var _theme$__breakpoints;\n\n  var breakpoint = useBreakpoint(defaultBreakpoint);\n  var theme = useTheme();\n  if (!breakpoint) return undefined;\n  /**\n   * Get the sorted breakpoint keys from the provided breakpoints\n   */\n\n  var breakpoints = Array.from(((_theme$__breakpoints = theme.__breakpoints) == null ? void 0 : _theme$__breakpoints.keys) || []);\n  var obj = isArray(values) ? fromEntries(Object.entries(arrayToObjectNotation(values, breakpoints)).map(function (_ref) {\n    var key = _ref[0],\n        value = _ref[1];\n    return [key, value];\n  })) : values;\n  return getClosestValue(obj, breakpoint, breakpoints);\n}\n\nexport { Hide, Show, useBreakpoint, useBreakpointValue, useColorModePreference, useMediaQuery, usePrefersReducedMotion, useQuery };\n","import React, { ReactNode } from 'react';\nimport { Heading as CHeading, HeadingProps as CHeadingProps } from '@chakra-ui/layout';\nimport { useBreakpointValue } from '@chakra-ui/media-query';\nimport { HeadingSize, HeadingVariant } from './heading.types';\nimport { useTheme } from 'hooks/useTheme';\nimport { useAdaptiveColorMap } from 'hooks/useAdaptiveColorMap';\nimport { PartsStyleInterpolation } from '@chakra-ui/theme-tools';\nimport { TextColor } from 'shared/types';\n\nexport interface HeadingProps extends CHeadingProps {\n  children: ReactNode;\n  size?: HeadingSize;\n  colorToken?: TextColor;\n  darkMode?: boolean;\n}\n\nexport const Heading = ({\n  children,\n  size = 'lg',\n  color,\n  colorToken = 'headline',\n  darkMode = false,\n  ...rest\n}: HeadingProps): JSX.Element => {\n  const { components, colors } = useTheme();\n  const adaptiveColor = useAdaptiveColorMap<TextColor>(colors.text, colorToken, darkMode);\n\n  const variant: HeadingVariant = useBreakpointValue<HeadingVariant>({ base: 'small', md: 'large' }) || 'small';\n  const sizes = components.Heading.variants[variant].sizes;\n  const sizeProps = !sizes ? undefined : (sizes[size] as PartsStyleInterpolation);\n\n  return (\n    <CHeading variant={variant} {...sizeProps} color={color || adaptiveColor} {...rest}>\n      {children}\n    </CHeading>\n  );\n};\n"],"names":["useBreakpointValue","values","defaultBreakpoint","_theme$__breakpoints","breakpoint","__breakpoints","useTheme","env","useEnvironment","queries","React__default","useMemo","_breakpoints$details","details","map","_ref","minMaxQuery","query","replace","_React$useState","useState","fallbackBreakpointDetail","find","_ref2","window","matchMedia","matchingBreakpointDetail","_ref3","matches","currentBreakpoint","setCurrentBreakpoint","useEffect","allUnregisterFns","_ref4","mediaQueryList","handleChange","ev","addEventListener","addListener","removeEventListener","removeListener","forEach","unregister","useBreakpoint","theme","breakpoints","Array","from","keys","breakpoints$1","index","Object","indexOf","stopIndex","getClosestValue","isArray","fromEntries","entries","arrayToObjectNotation","_a","children","_b","size","color","_c","colorToken","_d","darkMode","rest","__rest","_e","components","colors","adaptiveColor","useAdaptiveColorMap","text","variant","base","md","sizes","Heading","variants","sizeProps","undefined","React","CHeading","__assign"],"mappings":"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"}

package/build/hocs/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../withDarkMode-4c41b000.js"),r=require("../withTheme-96cf7893.js");require("react"),require("../chakra-ui-system.esm-63032e8d.js"),require("../chakra-ui-utils.esm-21814a28.js"),require("@emotion/react"),require("../chakra-ui-provider.esm-37bf5bc6.js"),require("../chakra-ui-portal.esm-f435c8d3.js"),require("../chakra-ui-hooks.esm-12b1c578.js"),require("../use-animation-state-5054a9f7.esm-988bfb57.js"),require("react-dom"),exports.withDarkMode=e.withDarkMode,exports.withTheme=r.withTheme;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../withDarkMode-12c0fa92.js"),r=require("../withTheme-5ab9cdac.js");require("react"),require("../chakra-ui-system.esm-98241028.js"),require("@emotion/react"),require("../chakra-ui-provider.esm-9bc7d94b.js"),require("../chakra-ui-portal.esm-6587fda6.js"),require("../chakra-ui-hooks.esm-3a3136b3.js"),require("react-dom"),exports.withDarkMode=e.withDarkMode,exports.withTheme=r.withTheme;
 //# sourceMappingURL=index.js.map

package/build/hooks/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../useTheme-7f0abde2.js");require("../chakra-ui-system.esm-63032e8d.js"),require("../chakra-ui-utils.esm-21814a28.js"),require("react"),require("@emotion/react"),exports.useTheme=e.useTheme;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../useTheme-b0d097cf.js");require("../chakra-ui-system.esm-98241028.js"),require("react"),require("@emotion/react"),exports.useTheme=e.useTheme;
 //# sourceMappingURL=index.js.map