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

An implementation of GitHub's Primer Design System using React

import React from 'react';
import styled, { keyframes } from 'styled-components';
import sx from '../../sx.js';
import { get } from '../../constants.js';
import { toggleStyledComponent } from '../../internal/utils/toggleStyledComponent.js';
import { clsx } from 'clsx';
import classes from './SkeletonBox.module.css.js';
import '../../FeatureFlags/FeatureFlags.js';
import { useFeatureFlag } from '../../FeatureFlags/useFeatureFlag.js';
import '../../FeatureFlags/DefaultFeatureFlags.js';
import { CSS_MODULE_FLAG } from './FeatureFlag.js';
import merge from 'deepmerge';

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 = keyframes(["from{mask-position:200%;}to{mask-position:0%;}"]);
const StyledSkeletonBox = toggleStyledComponent(CSS_MODULE_FLAG, 'div', styled.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, get('colors.canvas.subtle'), props => props.height || '1rem', props => props.width, shimmer, sx));
const SkeletonBox = /*#__PURE__*/React.forwardRef(function SkeletonBox({
  height,
  width,
  className,
  style,
  ...props
}, ref) {
  const enabled = useFeatureFlag(CSS_MODULE_FLAG);
  return /*#__PURE__*/React.createElement(StyledSkeletonBox, _extends({
    height: enabled ? undefined : height,
    width: enabled ? undefined : width,
    className: clsx(className, {
      [classes.SkeletonBox]: enabled
    }),
    style: enabled ? merge(style, {
      height,
      width
    }) : style
  }, props, {
    ref: ref
  }));
});

export { SkeletonBox };