fannypack-v5/es/Page/styles-08c82482.js

An accessible, composable, and friendly React UI Kit

import 'react';
import '../Provider/ThemeContext.js';
import 'classnames';
import { css } from 'emotion';
import { css as css$1 } from '@emotion/core';
import 'emotion-theming';
import '@emotion/styled';
import '../utils/useTheme.js';
import { a as _taggedTemplateLiteralLoose } from '../chunk-0c448560.js';
import 'lodash/kebabCase';
import 'tinycolor2';
import '../utils/isFunction.js';
import '../utils/get.js';
import { space, theme, breakpoint, palette } from '../utils/theme.js';
import '../utils/omit.js';
import '../utils/pick.js';
import '../utils/cssProps.js';
import '../utils/useLocalStorage.js';
import '../Provider/ColorModeContext.js';
import '../utils/useColorMode.js';
import '../utils/useStyle.js';
import '../utils/omitBy.js';
import '../utils/useDefaultProps.js';
import '../utils/useDebounce.js';
import 'lodash/uniq';
import '../utils/useClassName.js';
import '../utils/useBreakpoint.js';
import '../utils/uniqueId.js';
import '../utils/times.js';
import '../utils/parseIcons.js';
import '../utils/colors.js';
import '../utils/palette.js';
import '../utils/mergeRefs.js';
import 'deepmerge';
import 'lodash/set';
import '../utils/applyTheme.js';
import '../utils/bindFns.js';
import '../utils/createComponent.js';
import '../utils/createElement.js';
import '../utils/createHook.js';
import '../utils/forwardRefWithUse.js';
import '../utils/fieldAdaptors.js';
import '@emotion/is-prop-valid';
import '../utils/htmlProps.js';
import '../utils/OutsideClickHandler.js';

function _templateObject23() {
  var data = _taggedTemplateLiteralLoose(["\n  & {\n    ", ";\n  }\n"]);

  _templateObject23 = function _templateObject23() {
    return data;
  };

  return data;
}

function _templateObject22() {
  var data = _taggedTemplateLiteralLoose(["\n      padding-top: ", ";\n    "]);

  _templateObject22 = function _templateObject22() {
    return data;
  };

  return data;
}

function _templateObject21() {
  var data = _taggedTemplateLiteralLoose(["\n  ", "\n\n  & {\n    ", ";\n  }\n"]);

  _templateObject21 = function _templateObject21() {
    return data;
  };

  return data;
}

function _templateObject20() {
  var data = _taggedTemplateLiteralLoose(["\n      position: fixed;\n      width: 100%;\n    "]);

  _templateObject20 = function _templateObject20() {
    return data;
  };

  return data;
}

function _templateObject19() {
  var data = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  min-height: ", ";\n  height: ", ";\n  border-bottom: 1px solid ", ";\n  z-index: 999;\n\n  & > * {\n    height: 100%;\n  }\n\n  ", "\n\n  & {\n    ", ";\n  }\n"]);

  _templateObject19 = function _templateObject19() {
    return data;
  };

  return data;
}

function _templateObject18() {
  var data = _taggedTemplateLiteralLoose(["\n  min-height: 100vh;\n  position: relative;\n\n  & {\n    ", ";\n  }\n"]);

  _templateObject18 = function _templateObject18() {
    return data;
  };

  return data;
}

function _templateObject17() {
  var data = _taggedTemplateLiteralLoose(["\n  & {\n    ", ";\n  }\n"]);

  _templateObject17 = function _templateObject17() {
    return data;
  };

  return data;
}

function _templateObject16() {
  var data = _taggedTemplateLiteralLoose(["\n  & {\n    ", ";\n  }\n"]);

  _templateObject16 = function _templateObject16() {
    return data;
  };

  return data;
}

function _templateObject15() {
  var data = _taggedTemplateLiteralLoose(["\n      display: none;\n    "]);

  _templateObject15 = function _templateObject15() {
    return data;
  };

  return data;
}

function _templateObject14() {
  var data = _taggedTemplateLiteralLoose([""]);

  _templateObject14 = function _templateObject14() {
    return data;
  };

  return data;
}

function _templateObject13() {
  var data = _taggedTemplateLiteralLoose(["\n  &&& {\n    min-width: ", ";\n  }\n\n  ", ";\n\n  & {\n    ", ";\n  }\n"]);

  _templateObject13 = function _templateObject13() {
    return data;
  };

  return data;
}

function _templateObject12() {
  var data = _taggedTemplateLiteralLoose(["\n      display: none;\n    "]);

  _templateObject12 = function _templateObject12() {
    return data;
  };

  return data;
}

function _templateObject11() {
  var data = _taggedTemplateLiteralLoose(["\n  position: fixed;\n  z-index: 999999;\n\n  ", ";\n\n  & {\n    ", ";\n  }\n"]);

  _templateObject11 = function _templateObject11() {
    return data;
  };

  return data;
}

function _templateObject10() {
  var data = _taggedTemplateLiteralLoose(["\n      overflow: visible;\n    "]);

  _templateObject10 = function _templateObject10() {
    return data;
  };

  return data;
}

function _templateObject9() {
  var data = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  border-right: 1px solid ", ";\n  height: 100vh;\n  min-width: ", ";\n  width: ", ";\n  overflow-y: auto;\n  transform: translateX(0px);\n\n  ", "\n\n  & {\n    ", ";\n  }\n"]);

  _templateObject9 = function _templateObject9() {
    return data;
  };

  return data;
}

function _templateObject8() {
  var data = _taggedTemplateLiteralLoose(["\n      padding-left: 0px;\n    "]);

  _templateObject8 = function _templateObject8() {
    return data;
  };

  return data;
}

function _templateObject7() {
  var data = _taggedTemplateLiteralLoose(["\n      padding-left: 0px;\n    "]);

  _templateObject7 = function _templateObject7() {
    return data;
  };

  return data;
}

function _templateObject6() {
  var data = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  padding-left: ", ";\n\n  ", "\n\n  ", "\n\n  & {\n    ", ";\n  }\n"]);

  _templateObject6 = function _templateObject6() {
    return data;
  };

  return data;
}

function _templateObject5() {
  var data = _taggedTemplateLiteralLoose(["\n  min-height: 100vh;\n\n  & {\n    ", ";\n  }\n"]);

  _templateObject5 = function _templateObject5() {
    return data;
  };

  return data;
}

function _templateObject4() {
  var data = _taggedTemplateLiteralLoose(["\n  & {\n    ", ";\n  }\n"]);

  _templateObject4 = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3() {
  var data = _taggedTemplateLiteralLoose(["\n      padding-top: ", "rem;\n      padding-bottom: ", "rem;\n\n      & {\n        ", ";\n      }\n    "]);

  _templateObject3 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2() {
  var data = _taggedTemplateLiteralLoose(["\n      padding: ", "rem ", "rem;\n\n      & {\n        ", ";\n      }\n    "]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteralLoose(["\n  padding: ", "rem ", "rem;\n\n  ", "\n\n  ", "\n\n  & {\n    ", ";\n  }\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}
var collapseBreakpoints = {
  tablet: 'mobile',
  desktop: 'tablet',
  widescreen: 'desktop',
  fullHD: 'widescreen'
};
var PageContent = function PageContent(styleProps) {
  return css(_templateObject(), space(4, 'major')(styleProps), space(2, 'major')(styleProps), styleProps.isFluid && css$1(_templateObject2(), space(4, 'major')(styleProps), theme('Container.fluidMargin')(styleProps), theme(styleProps.themeKey, "css.fluid")(styleProps)), breakpoint('max-tablet', css$1(_templateObject3(), space(2, 'major')(styleProps), space(2, 'major')(styleProps), theme(styleProps.themeKey, "css.mobile")(styleProps)))(styleProps), theme(styleProps.themeKey, "css.root")(styleProps));
};
var PageContentWrapper = function PageContentWrapper(styleProps) {
  return css(_templateObject4(), theme(styleProps.themeKey, "css.root")(styleProps));
};
var PageWithSidebar = function PageWithSidebar(styleProps) {
  return css(_templateObject5(), theme(styleProps.themeKey, "css.root")(styleProps));
};
var PageWithSidebarContent = function PageWithSidebarContent(styleProps) {
  return css(_templateObject6(), getWidth(styleProps), breakpoint("max-" + collapseBreakpoints[styleProps.collapseBelow], css$1(_templateObject7()))(styleProps), !styleProps.isSidebarOpen && css$1(_templateObject8()), theme(styleProps.themeKey, "css.root")(styleProps));
};
var PageWithSidebarSidebar = function PageWithSidebarSidebar(styleProps) {
  return css(_templateObject9(), palette('background')(styleProps), palette('white800')(styleProps), getWidth(styleProps), getWidth(styleProps), styleProps.isSidebarMinimized && css$1(_templateObject10()), theme(styleProps.themeKey, "css.root")(styleProps));
};
var PageWithSidebarSidebarExpandedWrapper = function PageWithSidebarSidebarExpandedWrapper(styleProps) {
  return css(_templateObject11(), breakpoint("max-" + collapseBreakpoints[styleProps.collapseBelow], css$1(_templateObject12()))(styleProps), theme(styleProps.themeKey, "css.root")(styleProps));
};
var PageWithSidebarSidebarCollapsedWrapper = function PageWithSidebarSidebarCollapsedWrapper(styleProps) {
  return css(_templateObject13(), styleProps.collapsedSidebarWidth, breakpoint("max-" + collapseBreakpoints[styleProps.collapseBelow], css$1(_templateObject14()), {
    else: css$1(_templateObject15())
  })(styleProps), theme(styleProps.themeKey, "css.root")(styleProps));
};
var PageWithSidebarDisclosure = function PageWithSidebarDisclosure(styleProps) {
  return css(_templateObject16(), theme(styleProps.themeKey, "css.root")(styleProps));
};
var PageWithSidebarMinimize = function PageWithSidebarMinimize(styleProps) {
  return css(_templateObject17(), theme(styleProps.themeKey, "css.root")(styleProps));
};
var PageWithHeader = function PageWithHeader(styleProps) {
  return css(_templateObject18(), theme(styleProps.themeKey, "css.root")(styleProps));
};
var PageWithHeaderHeader = function PageWithHeaderHeader(styleProps) {
  return css(_templateObject19(), palette('background')(styleProps), styleProps.headerHeight, styleProps.headerHeight, palette('white800')(styleProps), styleProps.sticky && css$1(_templateObject20()), theme(styleProps.themeKey, "css.root")(styleProps));
};
var PageWithHeaderContent = function PageWithHeaderContent(styleProps) {
  return css(_templateObject21(), styleProps.sticky && css$1(_templateObject22(), styleProps.isHeaderOpen ? styleProps.headerHeight : 'unset'), theme(styleProps.themeKey, "css.root")(styleProps));
};
var PageWithHeaderDisclosure = function PageWithHeaderDisclosure(styleProps) {
  return css(_templateObject23(), theme(styleProps.themeKey, "css.root")(styleProps));
};

function getWidth(styleProps) {
  if (styleProps.isSidebarMinimized) {
    return styleProps.minimizedSidebarWidth;
  }

  if (styleProps.isCollapsed) {
    return styleProps.collapsedSidebarWidth;
  }

  return styleProps.sidebarWidth;
}

var styles = /*#__PURE__*/Object.freeze({
  collapseBreakpoints: collapseBreakpoints,
  PageContent: PageContent,
  PageContentWrapper: PageContentWrapper,
  PageWithSidebar: PageWithSidebar,
  PageWithSidebarContent: PageWithSidebarContent,
  PageWithSidebarSidebar: PageWithSidebarSidebar,
  PageWithSidebarSidebarExpandedWrapper: PageWithSidebarSidebarExpandedWrapper,
  PageWithSidebarSidebarCollapsedWrapper: PageWithSidebarSidebarCollapsedWrapper,
  PageWithSidebarDisclosure: PageWithSidebarDisclosure,
  PageWithSidebarMinimize: PageWithSidebarMinimize,
  PageWithHeader: PageWithHeader,
  PageWithHeaderHeader: PageWithHeaderHeader,
  PageWithHeaderContent: PageWithHeaderContent,
  PageWithHeaderDisclosure: PageWithHeaderDisclosure
});

export { PageContent as P, PageContentWrapper as a, PageWithSidebar as b, collapseBreakpoints as c, PageWithSidebarContent as d, PageWithSidebarSidebar as e, PageWithSidebarSidebarExpandedWrapper as f, PageWithSidebarSidebarCollapsedWrapper as g, PageWithSidebarDisclosure as h, PageWithSidebarMinimize as i, PageWithHeader as j, PageWithHeaderHeader as k, PageWithHeaderContent as l, PageWithHeaderDisclosure as m, styles as s };