@primer/react/lib/experimental/Skeleton/SkeletonBox.js

An implementation of GitHub's Primer Design System using React

'use strict';

var React = require('react');
var styled = require('styled-components');
var sx = require('../../sx.js');
var constants = require('../../constants.js');
var toggleStyledComponent = require('../../internal/utils/toggleStyledComponent.js');
var clsx = require('clsx');
var SkeletonBox_module = require('./SkeletonBox.module.css.js');
require('../../FeatureFlags/FeatureFlags.js');
var useFeatureFlag = require('../../FeatureFlags/useFeatureFlag.js');
require('../../FeatureFlags/DefaultFeatureFlags.js');
var FeatureFlag = require('./FeatureFlag.js');
var merge = require('deepmerge');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);
var styled__default = /*#__PURE__*/_interopDefault(styled);
var merge__default = /*#__PURE__*/_interopDefault(merge);

function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
const shimmer = styled.keyframes(["from{mask-position:200%;}to{mask-position:0%;}"]);
const StyledSkeletonBox = toggleStyledComponent.toggleStyledComponent(FeatureFlag.CSS_MODULE_FLAG, 'div', styled__default.default.div.withConfig({
  displayName: "SkeletonBox__StyledSkeletonBox",
  componentId: "sc-ovy911-0"
})(["animation:", ";display:block;background-color:var(--skeletonLoader-bgColor,", ");border-radius:3px;height:", ";width:", ";@media (prefers-reduced-motion:no-preference){mask-image:linear-gradient(75deg,#000 30%,rgba(0,0,0,0.65) 80%);mask-size:200%;animation:", ";animation-duration:1s;animation-iteration-count:infinite;}@media (forced-colors:active){outline:1px solid transparent;outline-offset:-1px;}", ";"], shimmer, constants.get('colors.canvas.subtle'), props => props.height || '1rem', props => props.width, shimmer, sx.default));
const SkeletonBox = /*#__PURE__*/React__default.default.forwardRef(function SkeletonBox({
  height,
  width,
  className,
  style,
  ...props
}, ref) {
  const enabled = useFeatureFlag.useFeatureFlag(FeatureFlag.CSS_MODULE_FLAG);
  return /*#__PURE__*/React__default.default.createElement(StyledSkeletonBox, _extends({
    height: enabled ? undefined : height,
    width: enabled ? undefined : width,
    className: clsx.clsx(className, {
      [SkeletonBox_module.SkeletonBox]: enabled
    }),
    style: enabled ? merge__default.default(style, {
      height,
      width
    }) : style
  }, props, {
    ref: ref
  }));
});

exports.SkeletonBox = SkeletonBox;