fannypack-v5/es/Table/styles-92f96ba3.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 { palette, breakpoint, space, fontWeight, fontSize, theme, borderRadius, altitude } 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 _templateObject18() {
  var data = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-weight: ", ";\n  font-size: ", "rem;\n  text-transform: uppercase;\n"]);

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

  return data;
}

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

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

  return data;
}

function _templateObject16() {
  var data = _taggedTemplateLiteralLoose(["\n      border: 1px solid ", ";\n    "]);

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

  return data;
}

function _templateObject15() {
  var data = _taggedTemplateLiteralLoose(["\n  border-radius: ", ";\n  overflow: hidden;\n\n  ", "\n\n  ", "\n\n\n  & {\n    ", ";\n  }\n"]);

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

  return data;
}

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

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

  return data;
}

function _templateObject13() {
  var data = _taggedTemplateLiteralLoose(["\n      background-color: ", ";\n    "]);

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

  return data;
}

function _templateObject12() {
  var data = _taggedTemplateLiteralLoose(["\n  border-top: 1px solid ", ";\n\n  ", "\n\n  & {\n    ", ";\n  }\n"]);

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

  return data;
}

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

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

  return data;
}

function _templateObject10() {
  var data = _taggedTemplateLiteralLoose(["\n  padding: ", "rem ", "rem;\n  vertical-align: middle;\n  ", ";\n\n  & {\n    ", ";\n  }\n"]);

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

  return data;
}

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

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

  return data;
}

function _templateObject8() {
  var data = _taggedTemplateLiteralLoose(["\n      background-color: ", ";\n    "]);

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

  return data;
}

function _templateObject7() {
  var data = _taggedTemplateLiteralLoose(["\n  border-bottom: 1px solid ", ";\n\n  ", "\n\n  & {\n    ", ";\n  }\n"]);

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

  return data;
}

function _templateObject6() {
  var data = _taggedTemplateLiteralLoose(["\n          & thead {\n            display: none;\n          }\n\n          & tbody tr:not(:last-child) {\n            border-bottom: 1px solid ", ";\n          }\n\n          & tbody td {\n            display: block;\n            text-align: left !important;\n            padding: ", "rem ", "rem;\n\n            &::before {\n              display: block;\n              content: attr(data-content);\n              ", ";\n\n              & {\n                ", ";\n              }\n            }\n          }\n\n          & tfoot td {\n            display: block;\n            text-align: left !important;\n          }\n\n          & {\n            ", ";\n          }\n        "]);

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

  return data;
}

function _templateObject5() {
  var data = _taggedTemplateLiteralLoose(["\n      ", ";\n    "]);

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

  return data;
}

function _templateObject4() {
  var data = _taggedTemplateLiteralLoose(["\n      & tbody tr:nth-child(even) {\n        background-color: ", ";\n      }\n    "]);

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

  return data;
}

function _templateObject3() {
  var data = _taggedTemplateLiteralLoose(["\n      & tbody tr:hover {\n        background-color: ", ";\n      }\n    "]);

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

  return data;
}

function _templateObject2() {
  var data = _taggedTemplateLiteralLoose(["\n      & tbody tr:not(:last-child) {\n        border-bottom: 1px solid ", ";\n      }\n    "]);

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

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteralLoose(["\n  border-collapse: collapse;\n  border-spacing: 0;\n  text-align: left;\n  width: 100%;\n  color: ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  & {\n    ", ";\n  }\n"]);

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

  return data;
}
var Table = function Table(styleProps) {
  return css(_templateObject(), palette('text200')(styleProps), styleProps.hasDividers && css$1(_templateObject2(), palette(styleProps.dividerColor, styleProps.dividerColor)(styleProps)), styleProps.isHoverable && css$1(_templateObject3(), palette(styleProps.hoverColor, styleProps.hoverColor)(styleProps)), styleProps.isStriped && css$1(_templateObject4(), palette(styleProps.stripeColor, styleProps.stripeColor)(styleProps)), styleProps.isResponsive && css$1(_templateObject5(), breakpoint("max-" + styleProps.responsiveBreakpoint, css$1(_templateObject6(), palette(styleProps.dividerColor, styleProps.dividerColor)(styleProps), space(2)(styleProps), space(4)(styleProps), tableHeadCellText(styleProps), theme(styleProps.themeKey, "css.responsive.headCellText")(styleProps), theme(styleProps.themeKey, "css.responsive.root")(styleProps)))(styleProps)), theme(styleProps.themeKey, "css.root")(styleProps));
};
var TableHead = function TableHead(styleProps) {
  return css(_templateObject7(), palette('white800')(styleProps), styleProps.tableVariant !== 'minimal' && css$1(_templateObject8(), palette('white600')(styleProps)), theme(styleProps.themeKey, "css.root")(styleProps));
};
var TableRow = function TableRow(styleProps) {
  return css(_templateObject9(), theme(styleProps.themeKey, "css.root")(styleProps));
};
var TableHeadCell = function TableHeadCell(styleProps) {
  return css(_templateObject10(), space(3)(styleProps), space(4)(styleProps), tableHeadCellText(styleProps), theme(styleProps.themeKey, "css.root")(styleProps));
};
var TableCell = function TableCell(styleProps) {
  return css(_templateObject11(), space(3)(styleProps), space(4)(styleProps), theme(styleProps.themeKey, "css.root")(styleProps));
};
var TableFoot = function TableFoot(styleProps) {
  return css(_templateObject12(), palette('white800')(styleProps), styleProps.tableVariant !== 'minimal' && css$1(_templateObject13(), palette('white600')(styleProps)), theme(styleProps.themeKey, "css.root")(styleProps));
};
var TableBody = function TableBody(styleProps) {
  return css(_templateObject14(), theme(styleProps.themeKey, "css.root")(styleProps));
};
var TableWrapper = function TableWrapper(styleProps) {
  return css(_templateObject15(), borderRadius('default')(styleProps), styleProps.variant === 'default' && css$1(_templateObject16(), palette('white800')(styleProps)), styleProps.variant === 'shadowed' && css$1(_templateObject17(), altitude('100')(styleProps)), theme(styleProps.themeKey, "css.root")(styleProps));
};
var tableHeadCellText = function tableHeadCellText(styleProps) {
  return css$1(_templateObject18(), palette('text100')(styleProps), fontWeight('semibold')(styleProps), fontSize('100')(styleProps));
};

var styles = /*#__PURE__*/Object.freeze({
  Table: Table,
  TableHead: TableHead,
  TableRow: TableRow,
  TableHeadCell: TableHeadCell,
  TableCell: TableCell,
  TableFoot: TableFoot,
  TableBody: TableBody,
  TableWrapper: TableWrapper,
  tableHeadCellText: tableHeadCellText
});

export { Table as T, TableHead as a, TableRow as b, TableHeadCell as c, TableCell as d, TableFoot as e, TableBody as f, TableWrapper as g, styles as s, tableHeadCellText as t };