@helpdice/theme 1.0.0

package/esm/themes/index.d.ts

@@ -0,0 +1,4 @@
+import Themes from './themes';
+export type { HUserTheme } from './themes';
+export type { HUIThemes, HUIThemesBreakpoints, BreakpointsItem, HUIThemesExpressiveness, HUIThemesFont, HUIThemesLayout, HUIThemesPalette, } from './presets';
+export default Themes;

package/esm/themes/index.js

@@ -0,0 +1,2 @@
+import Themes from './themes';
+export default Themes;

package/esm/themes/presets/dark.d.ts

@@ -0,0 +1,8 @@
+import { HUIThemes, HUIThemesPalette, HUIThemesExpressiveness } from './index';
+export declare const palette: HUIThemesPalette;
+export declare const expressiveness: HUIThemesExpressiveness;
+export declare const font: import("./index").HUIThemesFont;
+export declare const breakpoints: import("./index").HUIThemesBreakpoints;
+export declare const layout: import("./index").HUIThemesLayout;
+export declare const themes: HUIThemes;
+export default themes;

package/esm/themes/presets/dark.js

@@ -0,0 +1,64 @@
+import { defaultFont, defaultBreakpoints, defaultLayout } from './shared';
+export var palette = {
+  accents_1: '#111',
+  accents_2: '#333',
+  accents_3: '#444',
+  accents_4: '#666',
+  accents_5: '#888',
+  accents_6: '#999',
+  accents_7: '#eaeaea',
+  accents_8: '#fafafa',
+  background: '#000',
+  foreground: '#fff',
+  selection: '#f81ce5',
+  secondary: '#888',
+  code: '#79ffe1',
+  border: '#333',
+  error: '#e00',
+  errorLighter: '#f7d4d6',
+  errorLight: '#ff1a1a',
+  errorDark: '#c50000',
+  success: '#0070f3',
+  successLighter: '#d3e5ff',
+  successLight: '#3291ff',
+  successDark: '#0761d1',
+  warning: '#f5a623',
+  warningLighter: '#ffefcf',
+  warningLight: '#f7b955',
+  warningDark: '#ab570a',
+  cyan: '#50e3c2',
+  cyanLighter: '#aaffec',
+  cyanLight: '#79ffe1',
+  cyanDark: '#29bc9b',
+  violet: '#7928ca',
+  violetLighter: '#e3d7fc',
+  violetLight: '#8a63d2',
+  violetDark: '#4c2889',
+  purple: '#f81ce5',
+  alert: '#ff0080',
+  magenta: '#eb367f',
+  link: '#3291ff'
+};
+export var expressiveness = {
+  linkStyle: 'none',
+  linkHoverStyle: 'none',
+  dropdownBoxShadow: '0 0 0 1px #333',
+  scrollerStart: 'rgba(255, 255, 255, 1)',
+  scrollerEnd: 'rgba(255, 255, 255, 0)',
+  shadowSmall: '0 0 0 1px #333',
+  shadowMedium: '0 0 0 1px #333',
+  shadowLarge: '0 0 0 1px #333',
+  portalOpacity: 0.75
+};
+export var font = defaultFont;
+export var breakpoints = defaultBreakpoints;
+export var layout = defaultLayout;
+export var themes = {
+  type: 'dark',
+  font: font,
+  layout: layout,
+  palette: palette,
+  breakpoints: breakpoints,
+  expressiveness: expressiveness
+};
+export default themes;

package/esm/themes/presets/default.d.ts

@@ -0,0 +1,8 @@
+import { HUIThemes, HUIThemesPalette, HUIThemesExpressiveness } from './index';
+export declare const palette: HUIThemesPalette;
+export declare const expressiveness: HUIThemesExpressiveness;
+export declare const font: import("./index").HUIThemesFont;
+export declare const breakpoints: import("./index").HUIThemesBreakpoints;
+export declare const layout: import("./index").HUIThemesLayout;
+export declare const themes: HUIThemes;
+export default themes;

package/esm/themes/presets/default.js

@@ -0,0 +1,64 @@
+import { defaultFont, defaultBreakpoints, defaultLayout } from './shared';
+export var palette = {
+  accents_1: '#fafafa',
+  accents_2: '#eaeaea',
+  accents_3: '#999',
+  accents_4: '#888',
+  accents_5: '#666',
+  accents_6: '#444',
+  accents_7: '#333',
+  accents_8: '#111',
+  background: '#fff',
+  foreground: '#000',
+  selection: '#79ffe1',
+  secondary: '#666',
+  code: '#f81ce5',
+  border: '#eaeaea',
+  error: '#e00',
+  errorLight: '#ff1a1a',
+  errorLighter: '#f7d4d6',
+  errorDark: '#c50000',
+  success: '#0070f3',
+  successLight: '#3291ff',
+  successLighter: '#d3e5ff',
+  successDark: '#0761d1',
+  warning: '#f5a623',
+  warningLight: '#f7b955',
+  warningLighter: '#ffefcf',
+  warningDark: '#ab570a',
+  cyan: '#50e3c2',
+  cyanLighter: '#aaffec',
+  cyanLight: '#79ffe1',
+  cyanDark: '#29bc9b',
+  violet: '#7928ca',
+  violetLighter: '#e3d7fc',
+  violetLight: '#8a63d2',
+  violetDark: '#4c2889',
+  purple: '#f81ce5',
+  alert: '#ff0080',
+  magenta: '#eb367f',
+  link: '#0070f3'
+};
+export var expressiveness = {
+  linkStyle: 'none',
+  linkHoverStyle: 'none',
+  dropdownBoxShadow: '0 4px 4px 0 rgba(0, 0, 0, 0.02)',
+  scrollerStart: 'rgba(255, 255, 255, 1)',
+  scrollerEnd: 'rgba(255, 255, 255, 0)',
+  shadowSmall: '0 5px 10px rgba(0, 0, 0, 0.12)',
+  shadowMedium: '0 8px 30px rgba(0, 0, 0, 0.12)',
+  shadowLarge: '0 30px 60px rgba(0, 0, 0, 0.12)',
+  portalOpacity: 0.25
+};
+export var font = defaultFont;
+export var breakpoints = defaultBreakpoints;
+export var layout = defaultLayout;
+export var themes = {
+  type: 'light',
+  font: font,
+  layout: layout,
+  palette: palette,
+  breakpoints: breakpoints,
+  expressiveness: expressiveness
+};
+export default themes;

package/esm/themes/presets/index.d.ts

@@ -0,0 +1,90 @@
+export interface HUIThemesPalette {
+    accents_1: string;
+    accents_2: string;
+    accents_3: string;
+    accents_4: string;
+    accents_5: string;
+    accents_6: string;
+    accents_7: string;
+    accents_8: string;
+    background: string;
+    foreground: string;
+    selection: string;
+    secondary: string;
+    code: string;
+    border: string;
+    success: string;
+    successLighter: string;
+    successLight: string;
+    successDark: string;
+    error: string;
+    errorLighter: string;
+    errorLight: string;
+    errorDark: string;
+    warning: string;
+    warningLighter: string;
+    warningLight: string;
+    warningDark: string;
+    cyan: string;
+    cyanLighter: string;
+    cyanLight: string;
+    cyanDark: string;
+    violet: string;
+    violetLighter: string;
+    violetLight: string;
+    violetDark: string;
+    link: string;
+    purple: string;
+    magenta: string;
+    alert: string;
+}
+export interface HUIThemesExpressiveness {
+    linkStyle: string;
+    linkHoverStyle: string;
+    dropdownBoxShadow: string;
+    scrollerStart: string;
+    scrollerEnd: string;
+    shadowSmall: string;
+    shadowMedium: string;
+    shadowLarge: string;
+    portalOpacity: number;
+}
+export interface HUIThemesLayout {
+    gap: string;
+    gapNegative: string;
+    gapHalf: string;
+    gapHalfNegative: string;
+    gapQuarter: string;
+    gapQuarterNegative: string;
+    pageMargin: string;
+    pageWidth: string;
+    pageWidthWithMargin: string;
+    breakpointMobile: string;
+    breakpointTablet: string;
+    radius: string;
+    unit: string;
+}
+export interface HUIThemesFont {
+    sans: string;
+    mono: string;
+    prism: string;
+}
+export interface BreakpointsItem {
+    min: string;
+    max: string;
+}
+export interface HUIThemesBreakpoints {
+    xs: BreakpointsItem;
+    sm: BreakpointsItem;
+    md: BreakpointsItem;
+    lg: BreakpointsItem;
+    xl: BreakpointsItem;
+}
+export interface HUIThemes {
+    type: string;
+    font: HUIThemesFont;
+    layout: HUIThemesLayout;
+    palette: HUIThemesPalette;
+    breakpoints: HUIThemesBreakpoints;
+    expressiveness: HUIThemesExpressiveness;
+}

package/esm/themes/presets/index.js

@@ -0,0 +1 @@
+export {};

package/esm/themes/presets/shared.d.ts

@@ -0,0 +1,4 @@
+import { HUIThemesBreakpoints, HUIThemesFont, HUIThemesLayout } from './index';
+export declare const defaultFont: HUIThemesFont;
+export declare const defaultBreakpoints: HUIThemesBreakpoints;
+export declare const defaultLayout: HUIThemesLayout;

package/esm/themes/presets/shared.js

@@ -0,0 +1,42 @@
+export var defaultFont = {
+  sans: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
+  mono: 'Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace',
+  prism: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,"Liberation Mono", "Courier New", monospace'
+};
+export var defaultBreakpoints = {
+  xs: {
+    min: '0',
+    max: '650px'
+  },
+  sm: {
+    min: '650px',
+    max: '900px'
+  },
+  md: {
+    min: '900px',
+    max: '1280px'
+  },
+  lg: {
+    min: '1280px',
+    max: '1920px'
+  },
+  xl: {
+    min: '1920px',
+    max: '10000px'
+  }
+};
+export var defaultLayout = {
+  gap: '16pt',
+  gapNegative: '-16pt',
+  gapHalf: '8pt',
+  gapHalfNegative: '-8pt',
+  gapQuarter: '4pt',
+  gapQuarterNegative: '-4pt',
+  pageMargin: '16pt',
+  pageWidth: '750pt',
+  pageWidthWithMargin: '782pt',
+  breakpointMobile: defaultBreakpoints.xs.max,
+  breakpointTablet: defaultBreakpoints.sm.max,
+  radius: '6px',
+  unit: '16px'
+};

package/esm/themes/themes.d.ts

@@ -0,0 +1,18 @@
+import { HUIThemes } from './presets/index';
+import type { DeepPartial } from '../utils/types';
+export type HUserTheme = DeepPartial<HUIThemes> & {
+    type: string;
+};
+export declare const isObject: (target: unknown) => unknown;
+export declare const deepDuplicable: <T extends Record<string, unknown>>(source: T, target: T) => T;
+declare const Themes: {
+    isPresetTheme: (themeOrType?: HUserTheme | HUIThemes | string) => boolean;
+    isAvailableThemeType: (type?: string) => boolean;
+    hasUserCustomTheme: (themes?: Array<HUIThemes>) => boolean;
+    getPresets: () => Array<HUIThemes>;
+    getPresetStaticTheme: () => HUIThemes;
+    create: (base: HUIThemes, custom: HUserTheme) => HUIThemes;
+    createFromDark: (custom: HUserTheme) => HUIThemes;
+    createFromLight: (custom: HUserTheme) => HUIThemes;
+};
+export default Themes;

package/esm/themes/themes.js

@@ -0,0 +1,77 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+import lightTheme from './presets/default';
+import darkTheme from './presets/dark';
+export var isObject = function isObject(target) {
+  return target && _typeof(target) === 'object';
+};
+var _deepDuplicable = function deepDuplicable(source, target) {
+  if (!isObject(target) || !isObject(source)) return source;
+  var sourceKeys = Object.keys(source);
+  var result = {};
+  for (var _i = 0, _sourceKeys = sourceKeys; _i < _sourceKeys.length; _i++) {
+    var key = _sourceKeys[_i];
+    var sourceValue = source[key];
+    var targetValue = target[key];
+    if (Array.isArray(sourceValue) && Array.isArray(targetValue)) {
+      result[key] = targetValue.concat(sourceValue);
+    } else if (isObject(sourceValue) && isObject(targetValue)) {
+      result[key] = _deepDuplicable(sourceValue, _extends({}, targetValue));
+    } else if (targetValue) {
+      result[key] = targetValue;
+    } else {
+      result[key] = sourceValue;
+    }
+  }
+  return result;
+};
+export { _deepDuplicable as deepDuplicable };
+var getPresets = function getPresets() {
+  return [lightTheme, darkTheme];
+};
+var getPresetStaticTheme = function getPresetStaticTheme() {
+  return lightTheme;
+};
+var isAvailableThemeType = function isAvailableThemeType(type) {
+  if (!type) return false;
+  var presetThemes = getPresets();
+  var hasType = presetThemes.find(function (theme) {
+    return theme.type === type;
+  });
+  return !hasType;
+};
+var isPresetTheme = function isPresetTheme(themeOrType) {
+  if (!themeOrType) return false;
+  var isType = typeof themeOrType === 'string';
+  var type = isType ? themeOrType : themeOrType.type;
+  return !isAvailableThemeType(type);
+};
+var hasUserCustomTheme = function hasUserCustomTheme() {
+  var themes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  return !!themes.find(function (item) {
+    return isAvailableThemeType(item.type);
+  });
+};
+var create = function create(base, custom) {
+  if (!isAvailableThemeType(custom.type)) {
+    throw new Error('Duplicate or unavailable theme type');
+  }
+  return _deepDuplicable(base, custom);
+};
+var createFromDark = function createFromDark(custom) {
+  return create(darkTheme, custom);
+};
+var createFromLight = function createFromLight(custom) {
+  return create(lightTheme, custom);
+};
+var Themes = {
+  isPresetTheme: isPresetTheme,
+  isAvailableThemeType: isAvailableThemeType,
+  hasUserCustomTheme: hasUserCustomTheme,
+  getPresets: getPresets,
+  getPresetStaticTheme: getPresetStaticTheme,
+  create: create,
+  createFromDark: createFromDark,
+  createFromLight: createFromLight
+};
+export default Themes;

package/esm/ui-provider/index.d.ts

@@ -0,0 +1,3 @@
+import HuiProvider from './ui-provider';
+export type { UiProviderProps } from './ui-provider';
+export default HuiProvider;

package/esm/ui-provider/index.js

@@ -0,0 +1,4 @@
+/* "use client" */
+
+import HuiProvider from './ui-provider';
+export default HuiProvider;

package/esm/ui-provider/theme-provider.d.ts

@@ -0,0 +1,8 @@
+import React, { PropsWithChildren } from 'react';
+import { HUIThemes } from '../themes/presets';
+export interface Props {
+    themeType?: string;
+    themes?: Array<HUIThemes>;
+}
+declare const ThemeProvider: React.FC<PropsWithChildren<Props>>;
+export default ThemeProvider;

package/esm/ui-provider/theme-provider.js

@@ -0,0 +1,45 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/* "use client" */
+
+import React from 'react';
+import Themes from '../themes';
+import { ThemeContext } from '../use-theme/theme-context';
+import { AllThemesContext } from '../use-all-themes/all-themes-context';
+var ThemeProvider = function ThemeProvider(_ref) {
+  var children = _ref.children,
+    themeType = _ref.themeType,
+    _ref$themes = _ref.themes,
+    themes = _ref$themes === void 0 ? [] : _ref$themes;
+  var _React$useState = React.useState({
+      themes: Themes.getPresets()
+    }),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    allThemes = _React$useState2[0],
+    setAllThemes = _React$useState2[1];
+  var currentTheme = React.useMemo(function () {
+    var theme = allThemes.themes.find(function (item) {
+      return item.type === themeType;
+    });
+    if (theme) return theme;
+    return Themes.getPresetStaticTheme();
+  }, [allThemes, themeType]);
+  React.useEffect(function () {
+    if (!(themes !== null && themes !== void 0 && themes.length)) return;
+    setAllThemes(function (last) {
+      var safeThemes = themes.filter(function (item) {
+        return Themes.isAvailableThemeType(item.type);
+      });
+      var nextThemes = Themes.getPresets().concat(safeThemes);
+      return _extends({}, last, {
+        themes: nextThemes
+      });
+    });
+  }, [themes]);
+  return /*#__PURE__*/React.createElement(AllThemesContext.Provider, {
+    value: allThemes
+  }, /*#__PURE__*/React.createElement(ThemeContext.Provider, {
+    value: currentTheme
+  }, children));
+};
+export default ThemeProvider;

package/esm/ui-provider/ui-provider.d.ts

@@ -0,0 +1,8 @@
+import React, { PropsWithChildren } from 'react';
+import { HUIThemes } from '../themes/presets';
+export type UiProviderProps = {
+    themes?: Array<HUIThemes>;
+    themeType?: string | 'dark' | 'light';
+};
+declare const HuiProvider: React.FC<PropsWithChildren<UiProviderProps>>;
+export default HuiProvider;

package/esm/ui-provider/ui-provider.js

@@ -0,0 +1,55 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/* "use client" */
+
+import React from 'react';
+import { HUIContent, defaultToastLayout } from '../utils/use-hd-ui-context';
+import ThemeProvider from './theme-provider';
+import useCurrentState from '../utils/use-current-state';
+import ToastContainer from '../use-toasts/toast-container';
+var HuiProvider = function HuiProvider(_ref) {
+  var themes = _ref.themes,
+    themeType = _ref.themeType,
+    children = _ref.children;
+  var _React$useState = React.useState(''),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    lastUpdateToastId = _React$useState2[0],
+    setLastUpdateToastId = _React$useState2[1];
+  var _useCurrentState = useCurrentState([]),
+    _useCurrentState2 = _slicedToArray(_useCurrentState, 3),
+    toasts = _useCurrentState2[0],
+    setToasts = _useCurrentState2[1],
+    toastsRef = _useCurrentState2[2];
+  var _useCurrentState3 = useCurrentState(defaultToastLayout),
+    _useCurrentState4 = _slicedToArray(_useCurrentState3, 3),
+    toastLayout = _useCurrentState4[0],
+    setToastLayout = _useCurrentState4[1],
+    toastLayoutRef = _useCurrentState4[2];
+  var updateToasts = function updateToasts(fn) {
+    var nextToasts = fn(toastsRef.current);
+    setToasts(nextToasts);
+  };
+  var updateToastLayout = function updateToastLayout(fn) {
+    var nextLayout = fn(toastLayoutRef.current);
+    setToastLayout(nextLayout);
+  };
+  var updateLastToastId = function updateLastToastId(fn) {
+    setLastUpdateToastId(fn());
+  };
+  var initialValue = React.useMemo(function () {
+    return {
+      toasts: toasts,
+      toastLayout: toastLayout,
+      updateToasts: updateToasts,
+      lastUpdateToastId: lastUpdateToastId,
+      updateToastLayout: updateToastLayout,
+      updateLastToastId: updateLastToastId
+    };
+  }, [toasts, toastLayout, lastUpdateToastId]);
+  return /*#__PURE__*/React.createElement(HUIContent.Provider, {
+    value: initialValue
+  }, /*#__PURE__*/React.createElement(ThemeProvider, {
+    themes: themes,
+    themeType: themeType
+  }, children, /*#__PURE__*/React.createElement(ToastContainer, null)));
+};
+export default HuiProvider;

package/esm/use-all-themes/all-themes-context.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { HUIThemes } from '../themes/presets';
+export type AllThemesConfig = {
+    themes: Array<HUIThemes>;
+};
+export declare const AllThemesContext: React.Context<AllThemesConfig>;
+export declare const useAllThemes: () => AllThemesConfig;

package/esm/use-all-themes/all-themes-context.js

@@ -0,0 +1,11 @@
+/* "use client" */
+
+import React from 'react';
+import Themes from '../themes/themes';
+var defaultAllThemesConfig = {
+  themes: Themes.getPresets()
+};
+export var AllThemesContext = /*#__PURE__*/React.createContext(defaultAllThemesConfig);
+export var useAllThemes = function useAllThemes() {
+  return React.useContext(AllThemesContext);
+};

package/esm/use-all-themes/index.d.ts

@@ -0,0 +1,3 @@
+import { useAllThemes } from './all-themes-context';
+export type { AllThemesConfig } from './all-themes-context';
+export default useAllThemes;

package/esm/use-all-themes/index.js

@@ -0,0 +1,2 @@
+import { useAllThemes } from './all-themes-context';
+export default useAllThemes;

package/esm/use-classes/index.d.ts

@@ -0,0 +1,2 @@
+import { default as useClasses } from './use-classes';
+export default useClasses;

package/esm/use-classes/index.js

@@ -0,0 +1,2 @@
+import { default as useClasses } from './use-classes';
+export default useClasses;

package/esm/use-classes/use-classes.d.ts

@@ -0,0 +1,4 @@
+export type classNamesObject = Record<string, boolean | string | number | null | undefined>;
+export type className = string | classNamesObject | null | undefined | boolean | number;
+declare const useClasses: (...classNames: Array<className>) => string;
+export default useClasses;

package/esm/use-classes/use-classes.js

@@ -0,0 +1,34 @@
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+/* "use client" */
+
+var classObjectToString = function classObjectToString(className) {
+  var keys = Object.keys(className);
+  var len = keys.length;
+  var str = '';
+  for (var index = 0; index < len; index++) {
+    var key = keys[index];
+    var val = className[keys[index]];
+    if (!val) continue;
+    str = str ? "".concat(str, " ").concat(String(key)) : String(key);
+  }
+  return str;
+};
+var isObjectClassName = function isObjectClassName(value) {
+  return _typeof(value) === 'object' && !Array.isArray(value);
+};
+var useClasses = function useClasses() {
+  var len = arguments.length;
+  var classes = '';
+  if (len === 0) return classes;
+  for (var index = 0; index < len; index++) {
+    var val = index < 0 || arguments.length <= index ? undefined : arguments[index];
+    if (!val) continue;
+    if (isObjectClassName(val)) {
+      classes += " ".concat(classObjectToString(val));
+    } else {
+      classes += " ".concat(String(val).trim());
+    }
+  }
+  return classes.trim();
+};
+export default useClasses;

package/esm/use-current-state/index.d.ts

@@ -0,0 +1,2 @@
+import useCurrentState from './use-current-state';
+export default useCurrentState;

package/esm/use-current-state/index.js

@@ -0,0 +1,2 @@
+import useCurrentState from './use-current-state';
+export default useCurrentState;

package/esm/use-current-state/use-current-state.d.ts

@@ -0,0 +1,4 @@
+import { Dispatch, MutableRefObject, SetStateAction } from 'react';
+export type CurrentStateType<S> = [S, Dispatch<SetStateAction<S>>, MutableRefObject<S>];
+declare const useCurrentState: <S>(initialState: S | (() => S)) => CurrentStateType<S>;
+export default useCurrentState;

package/esm/use-current-state/use-current-state.js

@@ -0,0 +1,23 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/* "use client" */
+
+import { useEffect, useRef, useState } from 'react';
+var useCurrentState = function useCurrentState(initialState) {
+  var _useState = useState(function () {
+      return typeof initialState === 'function' ? initialState() : initialState;
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+  var ref = useRef(initialState);
+  useEffect(function () {
+    ref.current = state;
+  }, [state]);
+  var setValue = function setValue(val) {
+    var result = typeof val === 'function' ? val(ref.current) : val;
+    ref.current = result;
+    setState(result);
+  };
+  return [state, setValue, ref];
+};
+export default useCurrentState;

package/esm/use-media-query/index.js

@@ -0,0 +1,2 @@
+import useMediaQuery from './use-media-query';
+export default useMediaQuery;