@flodesk/grain 7.8.1 → 7.9.0

package/es/components/index.js

@@ -24,4 +24,5 @@ export { Popover } from './popover';
 export { Tooltip } from './tooltip';
 export { Progress } from './progress';
 export { Textarea } from './textarea';
-export { Pagination } from './pagination';
+export { Pagination } from './pagination';
+export { Nav, NavItem } from './nav';

package/es/components/nav.js

@@ -0,0 +1,60 @@
+import _styled from "@emotion/styled/base";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { getColor, getResponsiveTextSize, getSpace } from '../utilities';
+import { css } from '@emotion/react';
+import { styles } from '../foundational';
+import { types } from '../types';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var directionStyles = {
+  row: /*#__PURE__*/css("flex-direction:row;gap:", getSpace('m'), ";align-items:baseline;" + (process.env.NODE_ENV === "production" ? "" : ";label:row;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL25hdi5qc3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBU1UiLCJmaWxlIjoiLi4vLi4vc3JjL2NvbXBvbmVudHMvbmF2LmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5pbXBvcnQgUHJvcFR5cGVzIGZyb20gJ3Byb3AtdHlwZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgZ2V0Q29sb3IsIGdldFJlc3BvbnNpdmVUZXh0U2l6ZSwgZ2V0U3BhY2UgfSBmcm9tICcuLi91dGlsaXRpZXMnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgc3R5bGVzIH0gZnJvbSAnLi4vZm91bmRhdGlvbmFsJztcbmltcG9ydCB7IHR5cGVzIH0gZnJvbSAnLi4vdHlwZXMnO1xuXG5jb25zdCBkaXJlY3Rpb25TdHlsZXMgPSB7XG4gIHJvdzogY3NzYFxuICAgIGZsZXgtZGlyZWN0aW9uOiByb3c7XG4gICAgZ2FwOiAke2dldFNwYWNlKCdtJyl9O1xuICAgIGFsaWduLWl0ZW1zOiBiYXNlbGluZTtcbiAgYCxcbiAgY29sdW1uOiBjc3NgXG4gICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgICBnYXA6ICR7Z2V0U3BhY2UoJ3hzJyl9O1xuICAgIGFsaWduLWl0ZW1zOiBzdGFydDtcbiAgYCxcbn07XG5cbmNvbnN0IE5hdlJvb3QgPSBzdHlsZWQubmF2YFxuICBkaXNwbGF5OiBmbGV4O1xuICAkeyh7IGRpcmVjdGlvbiB9KSA9PiBkaXJlY3Rpb25TdHlsZXNbZGlyZWN0aW9uXX07XG5gO1xuXG5jb25zdCBOYXZJdGVtUm9vdCA9IHN0eWxlZC5kaXZgXG4gICR7KHsgaXNBY3RpdmUgfSkgPT4gIWlzQWN0aXZlICYmIGBjb2xvcjogJHtnZXRDb2xvcignY29udGVudDInKX1gfTtcbiAgJHsoeyBzaXplIH0pID0+IGdldFJlc3BvbnNpdmVUZXh0U2l6ZShzaXplKX07XG4gIGN1cnNvcjogcG9pbnRlcjtcbiAgJHtzdHlsZXMudHJhbnNpdGlvbnN9O1xuXG4gICY6aG92ZXIge1xuICAgIGNvbG9yOiBpbmhlcml0O1xuICB9XG5cbiAgYSB7XG4gICAgY29sb3I6IGluaGVyaXQ7XG4gICAgdGV4dC1kZWNvcmF0aW9uOiBub25lO1xuICAgIGRpc3BsYXk6IGJsb2NrO1xuICB9XG5gO1xuXG5leHBvcnQgY29uc3QgTmF2SXRlbSA9ICh7IGNoaWxkcmVuLCBpc0FjdGl2ZSwgc2l6ZSB9KSA9PiAoXG4gIDxOYXZJdGVtUm9vdCBpc0FjdGl2ZT17aXNBY3RpdmV9IHNpemU9e3NpemV9PlxuICAgIHtjaGlsZHJlbn1cbiAgPC9OYXZJdGVtUm9vdD5cbik7XG5cbmV4cG9ydCBjb25zdCBOYXYgPSAoeyBjaGlsZHJlbiwgZGlyZWN0aW9uID0gJ3JvdycgfSkgPT4ge1xuICByZXR1cm4gPE5hdlJvb3QgZGlyZWN0aW9uPXtkaXJlY3Rpb259PntjaGlsZHJlbn08L05hdlJvb3Q+O1xufTtcblxuTmF2SXRlbS5wcm9wVHlwZXMgPSB7XG4gIGlzQWN0aXZlOiBQcm9wVHlwZXMuYm9vbCxcbiAgc2l6ZTogdHlwZXMucmVzcG9uc2l2ZVRleHRTaXplLFxufTtcblxuTmF2LnByb3BUeXBlcyA9IHtcbiAgZGlyZWN0aW9uOiBQcm9wVHlwZXMub25lT2YoWydyb3cnLCAnY29sdW1uJ10pLFxufTtcbiJdfQ== */"),
+  column: /*#__PURE__*/css("flex-direction:column;gap:", getSpace('xs'), ";align-items:start;" + (process.env.NODE_ENV === "production" ? "" : ";label:column;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL25hdi5qc3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBY2EiLCJmaWxlIjoiLi4vLi4vc3JjL2NvbXBvbmVudHMvbmF2LmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5pbXBvcnQgUHJvcFR5cGVzIGZyb20gJ3Byb3AtdHlwZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgZ2V0Q29sb3IsIGdldFJlc3BvbnNpdmVUZXh0U2l6ZSwgZ2V0U3BhY2UgfSBmcm9tICcuLi91dGlsaXRpZXMnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgc3R5bGVzIH0gZnJvbSAnLi4vZm91bmRhdGlvbmFsJztcbmltcG9ydCB7IHR5cGVzIH0gZnJvbSAnLi4vdHlwZXMnO1xuXG5jb25zdCBkaXJlY3Rpb25TdHlsZXMgPSB7XG4gIHJvdzogY3NzYFxuICAgIGZsZXgtZGlyZWN0aW9uOiByb3c7XG4gICAgZ2FwOiAke2dldFNwYWNlKCdtJyl9O1xuICAgIGFsaWduLWl0ZW1zOiBiYXNlbGluZTtcbiAgYCxcbiAgY29sdW1uOiBjc3NgXG4gICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgICBnYXA6ICR7Z2V0U3BhY2UoJ3hzJyl9O1xuICAgIGFsaWduLWl0ZW1zOiBzdGFydDtcbiAgYCxcbn07XG5cbmNvbnN0IE5hdlJvb3QgPSBzdHlsZWQubmF2YFxuICBkaXNwbGF5OiBmbGV4O1xuICAkeyh7IGRpcmVjdGlvbiB9KSA9PiBkaXJlY3Rpb25TdHlsZXNbZGlyZWN0aW9uXX07XG5gO1xuXG5jb25zdCBOYXZJdGVtUm9vdCA9IHN0eWxlZC5kaXZgXG4gICR7KHsgaXNBY3RpdmUgfSkgPT4gIWlzQWN0aXZlICYmIGBjb2xvcjogJHtnZXRDb2xvcignY29udGVudDInKX1gfTtcbiAgJHsoeyBzaXplIH0pID0+IGdldFJlc3BvbnNpdmVUZXh0U2l6ZShzaXplKX07XG4gIGN1cnNvcjogcG9pbnRlcjtcbiAgJHtzdHlsZXMudHJhbnNpdGlvbnN9O1xuXG4gICY6aG92ZXIge1xuICAgIGNvbG9yOiBpbmhlcml0O1xuICB9XG5cbiAgYSB7XG4gICAgY29sb3I6IGluaGVyaXQ7XG4gICAgdGV4dC1kZWNvcmF0aW9uOiBub25lO1xuICAgIGRpc3BsYXk6IGJsb2NrO1xuICB9XG5gO1xuXG5leHBvcnQgY29uc3QgTmF2SXRlbSA9ICh7IGNoaWxkcmVuLCBpc0FjdGl2ZSwgc2l6ZSB9KSA9PiAoXG4gIDxOYXZJdGVtUm9vdCBpc0FjdGl2ZT17aXNBY3RpdmV9IHNpemU9e3NpemV9PlxuICAgIHtjaGlsZHJlbn1cbiAgPC9OYXZJdGVtUm9vdD5cbik7XG5cbmV4cG9ydCBjb25zdCBOYXYgPSAoeyBjaGlsZHJlbiwgZGlyZWN0aW9uID0gJ3JvdycgfSkgPT4ge1xuICByZXR1cm4gPE5hdlJvb3QgZGlyZWN0aW9uPXtkaXJlY3Rpb259PntjaGlsZHJlbn08L05hdlJvb3Q+O1xufTtcblxuTmF2SXRlbS5wcm9wVHlwZXMgPSB7XG4gIGlzQWN0aXZlOiBQcm9wVHlwZXMuYm9vbCxcbiAgc2l6ZTogdHlwZXMucmVzcG9uc2l2ZVRleHRTaXplLFxufTtcblxuTmF2LnByb3BUeXBlcyA9IHtcbiAgZGlyZWN0aW9uOiBQcm9wVHlwZXMub25lT2YoWydyb3cnLCAnY29sdW1uJ10pLFxufTtcbiJdfQ== */")
+};
+
+var NavRoot = /*#__PURE__*/_styled("nav", process.env.NODE_ENV === "production" ? {
+  target: "esn928h1"
+} : {
+  target: "esn928h1",
+  label: "NavRoot"
+})("display:flex;", function (_ref) {
+  var direction = _ref.direction;
+  return directionStyles[direction];
+}, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL25hdi5qc3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBcUIwQiIsImZpbGUiOiIuLi8uLi9zcmMvY29tcG9uZW50cy9uYXYuanN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBnZXRDb2xvciwgZ2V0UmVzcG9uc2l2ZVRleHRTaXplLCBnZXRTcGFjZSB9IGZyb20gJy4uL3V0aWxpdGllcyc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyBzdHlsZXMgfSBmcm9tICcuLi9mb3VuZGF0aW9uYWwnO1xuaW1wb3J0IHsgdHlwZXMgfSBmcm9tICcuLi90eXBlcyc7XG5cbmNvbnN0IGRpcmVjdGlvblN0eWxlcyA9IHtcbiAgcm93OiBjc3NgXG4gICAgZmxleC1kaXJlY3Rpb246IHJvdztcbiAgICBnYXA6ICR7Z2V0U3BhY2UoJ20nKX07XG4gICAgYWxpZ24taXRlbXM6IGJhc2VsaW5lO1xuICBgLFxuICBjb2x1bW46IGNzc2BcbiAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICAgIGdhcDogJHtnZXRTcGFjZSgneHMnKX07XG4gICAgYWxpZ24taXRlbXM6IHN0YXJ0O1xuICBgLFxufTtcblxuY29uc3QgTmF2Um9vdCA9IHN0eWxlZC5uYXZgXG4gIGRpc3BsYXk6IGZsZXg7XG4gICR7KHsgZGlyZWN0aW9uIH0pID0+IGRpcmVjdGlvblN0eWxlc1tkaXJlY3Rpb25dfTtcbmA7XG5cbmNvbnN0IE5hdkl0ZW1Sb290ID0gc3R5bGVkLmRpdmBcbiAgJHsoeyBpc0FjdGl2ZSB9KSA9PiAhaXNBY3RpdmUgJiYgYGNvbG9yOiAke2dldENvbG9yKCdjb250ZW50MicpfWB9O1xuICAkeyh7IHNpemUgfSkgPT4gZ2V0UmVzcG9uc2l2ZVRleHRTaXplKHNpemUpfTtcbiAgY3Vyc29yOiBwb2ludGVyO1xuICAke3N0eWxlcy50cmFuc2l0aW9uc307XG5cbiAgJjpob3ZlciB7XG4gICAgY29sb3I6IGluaGVyaXQ7XG4gIH1cblxuICBhIHtcbiAgICBjb2xvcjogaW5oZXJpdDtcbiAgICB0ZXh0LWRlY29yYXRpb246IG5vbmU7XG4gICAgZGlzcGxheTogYmxvY2s7XG4gIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBOYXZJdGVtID0gKHsgY2hpbGRyZW4sIGlzQWN0aXZlLCBzaXplIH0pID0+IChcbiAgPE5hdkl0ZW1Sb290IGlzQWN0aXZlPXtpc0FjdGl2ZX0gc2l6ZT17c2l6ZX0+XG4gICAge2NoaWxkcmVufVxuICA8L05hdkl0ZW1Sb290PlxuKTtcblxuZXhwb3J0IGNvbnN0IE5hdiA9ICh7IGNoaWxkcmVuLCBkaXJlY3Rpb24gPSAncm93JyB9KSA9PiB7XG4gIHJldHVybiA8TmF2Um9vdCBkaXJlY3Rpb249e2RpcmVjdGlvbn0+e2NoaWxkcmVufTwvTmF2Um9vdD47XG59O1xuXG5OYXZJdGVtLnByb3BUeXBlcyA9IHtcbiAgaXNBY3RpdmU6IFByb3BUeXBlcy5ib29sLFxuICBzaXplOiB0eXBlcy5yZXNwb25zaXZlVGV4dFNpemUsXG59O1xuXG5OYXYucHJvcFR5cGVzID0ge1xuICBkaXJlY3Rpb246IFByb3BUeXBlcy5vbmVPZihbJ3JvdycsICdjb2x1bW4nXSksXG59O1xuIl19 */"));
+
+var NavItemRoot = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
+  target: "esn928h0"
+} : {
+  target: "esn928h0",
+  label: "NavItemRoot"
+})(function (_ref2) {
+  var isActive = _ref2.isActive;
+  return !isActive && "color: ".concat(getColor('content2'));
+}, ";", function (_ref3) {
+  var size = _ref3.size;
+  return getResponsiveTextSize(size);
+}, ";cursor:pointer;", styles.transitions, ";&:hover{color:inherit;}a{color:inherit;text-decoration:none;display:block;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL25hdi5qc3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBMEI4QiIsImZpbGUiOiIuLi8uLi9zcmMvY29tcG9uZW50cy9uYXYuanN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBnZXRDb2xvciwgZ2V0UmVzcG9uc2l2ZVRleHRTaXplLCBnZXRTcGFjZSB9IGZyb20gJy4uL3V0aWxpdGllcyc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyBzdHlsZXMgfSBmcm9tICcuLi9mb3VuZGF0aW9uYWwnO1xuaW1wb3J0IHsgdHlwZXMgfSBmcm9tICcuLi90eXBlcyc7XG5cbmNvbnN0IGRpcmVjdGlvblN0eWxlcyA9IHtcbiAgcm93OiBjc3NgXG4gICAgZmxleC1kaXJlY3Rpb246IHJvdztcbiAgICBnYXA6ICR7Z2V0U3BhY2UoJ20nKX07XG4gICAgYWxpZ24taXRlbXM6IGJhc2VsaW5lO1xuICBgLFxuICBjb2x1bW46IGNzc2BcbiAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICAgIGdhcDogJHtnZXRTcGFjZSgneHMnKX07XG4gICAgYWxpZ24taXRlbXM6IHN0YXJ0O1xuICBgLFxufTtcblxuY29uc3QgTmF2Um9vdCA9IHN0eWxlZC5uYXZgXG4gIGRpc3BsYXk6IGZsZXg7XG4gICR7KHsgZGlyZWN0aW9uIH0pID0+IGRpcmVjdGlvblN0eWxlc1tkaXJlY3Rpb25dfTtcbmA7XG5cbmNvbnN0IE5hdkl0ZW1Sb290ID0gc3R5bGVkLmRpdmBcbiAgJHsoeyBpc0FjdGl2ZSB9KSA9PiAhaXNBY3RpdmUgJiYgYGNvbG9yOiAke2dldENvbG9yKCdjb250ZW50MicpfWB9O1xuICAkeyh7IHNpemUgfSkgPT4gZ2V0UmVzcG9uc2l2ZVRleHRTaXplKHNpemUpfTtcbiAgY3Vyc29yOiBwb2ludGVyO1xuICAke3N0eWxlcy50cmFuc2l0aW9uc307XG5cbiAgJjpob3ZlciB7XG4gICAgY29sb3I6IGluaGVyaXQ7XG4gIH1cblxuICBhIHtcbiAgICBjb2xvcjogaW5oZXJpdDtcbiAgICB0ZXh0LWRlY29yYXRpb246IG5vbmU7XG4gICAgZGlzcGxheTogYmxvY2s7XG4gIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBOYXZJdGVtID0gKHsgY2hpbGRyZW4sIGlzQWN0aXZlLCBzaXplIH0pID0+IChcbiAgPE5hdkl0ZW1Sb290IGlzQWN0aXZlPXtpc0FjdGl2ZX0gc2l6ZT17c2l6ZX0+XG4gICAge2NoaWxkcmVufVxuICA8L05hdkl0ZW1Sb290PlxuKTtcblxuZXhwb3J0IGNvbnN0IE5hdiA9ICh7IGNoaWxkcmVuLCBkaXJlY3Rpb24gPSAncm93JyB9KSA9PiB7XG4gIHJldHVybiA8TmF2Um9vdCBkaXJlY3Rpb249e2RpcmVjdGlvbn0+e2NoaWxkcmVufTwvTmF2Um9vdD47XG59O1xuXG5OYXZJdGVtLnByb3BUeXBlcyA9IHtcbiAgaXNBY3RpdmU6IFByb3BUeXBlcy5ib29sLFxuICBzaXplOiB0eXBlcy5yZXNwb25zaXZlVGV4dFNpemUsXG59O1xuXG5OYXYucHJvcFR5cGVzID0ge1xuICBkaXJlY3Rpb246IFByb3BUeXBlcy5vbmVPZihbJ3JvdycsICdjb2x1bW4nXSksXG59O1xuIl19 */"));
+
+export var NavItem = function NavItem(_ref4) {
+  var children = _ref4.children,
+      isActive = _ref4.isActive,
+      size = _ref4.size;
+  return ___EmotionJSX(NavItemRoot, {
+    isActive: isActive,
+    size: size
+  }, children);
+};
+export var Nav = function Nav(_ref5) {
+  var children = _ref5.children,
+      _ref5$direction = _ref5.direction,
+      direction = _ref5$direction === void 0 ? 'row' : _ref5$direction;
+  return ___EmotionJSX(NavRoot, {
+    direction: direction
+  }, children);
+};
+NavItem.propTypes = {
+  isActive: PropTypes.bool,
+  size: types.responsiveTextSize
+};
+Nav.propTypes = {
+  direction: PropTypes.oneOf(['row', 'column'])
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flodesk/grain",
-  "version": "7.8.1",
+  "version": "7.9.0",
   "description": "Flodesk design system",
   "module": "es/index.js",
   "author": "Flodesk",