@retailmenot/anchor/esm/menu.js

A React UI Library by RetailMeNot

import { a as _taggedTemplateLiteral } from './anchor-chunk-7b9d8557.js';
import { a as __rest } from './anchor-chunk-27f34e54.js';
import { a as get } from './anchor-chunk-6ebffda8.js';
import { lighten } from 'polished';
import { forwardRef, createElement, useContext, useState, Children, Fragment, useEffect, useRef, createRef, Component, cloneElement, useReducer, PureComponent, isValidElement, createContext, useImperativeHandle } from 'react';
import classNames from 'classnames';
import styled, { css } from '@xstyled/styled-components';
import { th, variant, space } from '@xstyled/system';

function _templateObject7() {
  var data = _taggedTemplateLiteral(["\n    display: flex;\n    width: 100%;\n    ", ";\n    min-width: 15.625rem;\n    margin: 0;\n    padding: 0;\n\n    ", ";\n    font-size: 0.875rem;\n    font-family: base;\n    border-radius: base;\n\n    .anchor-menu-item {\n        line-height: 1.125rem;\n        ", ";\n        transition: background-color 250ms, color 250ms;\n        margin: 0 0.125rem;\n\n        &:hover {\n            ", ";\n            background-color: rgba(255, 255, 255, 0.1);\n        }\n\n        &:active,\n        &.active {\n            ", ";\n            background-color: rgba(\n                255,\n                255,\n                255,\n                0.1\n            ); // TODO: more or less opacity\n        }\n\n        &:focus {\n            background-color: rgba(255, 255, 255, 0.1);\n        }\n\n        &:first-of-type {\n            margin-left: 0;\n        }\n        &:last-of-type {\n            margin-right: 0;\n        }\n\n        ", ";\n    }\n\n    /* Positioning */\n    ", ";\n\n    /* Menu Sizes */\n    ", ";\n"]);

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

  return data;
}

function _templateObject6() {
  var data = _taggedTemplateLiteral(["\n            border-radius: base;\n            font-weight: 600;\n            padding: 1.5rem 1.25rem;\n        "]);

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

  return data;
}

function _templateObject5() {
  var data = _taggedTemplateLiteral([""]);

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

  return data;
}

function _templateObject4() {
  var data = _taggedTemplateLiteral(["\n            border-radius: base;\n            font-weight: 600;\n            padding: 1rem 0.75rem;\n        "]);

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

  return data;
}

function _templateObject3() {
  var data = _taggedTemplateLiteral([""]);

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

  return data;
}

function _templateObject2() {
  var data = _taggedTemplateLiteral(["\n            font-size: 0.75rem;\n            line-height: 0.75rem;\n            font-weight: 500;\n            padding: 0.5rem 0.75rem;\n        "]);

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

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteral([""]);

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

  return data;
}
var MenuSizes;

(function (MenuSizes) {
  MenuSizes["sm"] = "sm";
  MenuSizes["md"] = "md";
  MenuSizes["lg"] = "lg";
})(MenuSizes || (MenuSizes = {}));

var MenuSizeStyles = {
  sm: {
    menu: css(_templateObject()),
    items: css(_templateObject2())
  },
  md: {
    menu: css(_templateObject3()),
    items: css(_templateObject4())
  },
  lg: {
    menu: css(_templateObject5()),
    items: css(_templateObject6())
  }
};
var sizeVariant = variant({
  key: 'menu.sizes',
  prop: 'size',
  "default": 'md',
  variants: MenuSizeStyles
});
var StyledMenu = styled('nav')(_templateObject7(), space, function (_ref) {
  var _ref$background = _ref.background,
      background = _ref$background === void 0 ? 'primary.base' : _ref$background;
  return css({
    background: th.color(background)
  });
}, function (_ref2) {
  var _ref2$color = _ref2.color,
      color = _ref2$color === void 0 ? 'white' : _ref2$color;
  return css({
    color: color
  });
}, function (_ref3) {
  var color = _ref3.color;
  return css({
    color: color ? lighten(0.2, color) : 'white'
  });
}, function (_ref4) {
  var color = _ref4.color;
  return css({
    color: color ? lighten(0.2, color) : 'white'
  });
}, function (props) {
  return get(sizeVariant(props), 'items');
}, function (_ref5) {
  var _ref5$justify = _ref5.justify,
      justify = _ref5$justify === void 0 ? 'flex-start' : _ref5$justify;
  return css({
    justifyContent: justify
  });
}, function (props) {
  return get(sizeVariant(props), 'menu');
});
var Menu = function Menu(_a) {
  var className = _a.className,
      children = _a.children,
      _a$size = _a.size,
      size = _a$size === void 0 ? 'md' : _a$size,
      props = __rest(_a, ["className", "children", "size"]);

  return createElement(StyledMenu, Object.assign({
    size: size,
    className: classNames('anchor-menu', className)
  }, props), children);
};

function _templateObject$1() {
  var data = _taggedTemplateLiteral(["\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n    text-align: center;\n    font-family: base;\n    color: text.base;\n    text-decoration: none;\n    transition: color 250ms;\n\n    // Disable Select\n    user-select: none;\n    -webkit-touch-callout: none;\n    ", "\n"]);

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

  return data;
}
var StyledItem = styled('a')(_templateObject$1(), space);
var Item = function Item(_a) {
  var className = _a.className,
      children = _a.children,
      label = _a.label,
      size = _a.size,
      active = _a.active,
      props = __rest(_a, ["className", "children", "label", "size", "active"]);

  return createElement(StyledItem, Object.assign({
    className: classNames('anchor-menu-item', className, {
      active: active
    }),
    active: active
  }, props), label ? label : children);
};

export { Menu, Item };
//# sourceMappingURL=menu.js.map