@codecademy/gamut 72.2.5-alpha.9854e9.0 → 72.2.5-alpha.f6eeb2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,4 +1,4 @@
1
- import '../vidstack-vendor.css';
1
+ import '../styles/vds_base_theme.scss';
2
2
  import React from 'react';
3
3
  import { VideoProps } from '..';
4
4
  type VidstackPlayerProps = VideoProps & {
@@ -1,13 +1,11 @@
1
1
  import _styled from "@emotion/styled/base";
2
2
  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); }
3
- /* Third-party Vidstack default theme styles */
4
3
  /* eslint-disable gamut/no-css-standalone */
5
- import '../vidstack-vendor.css';
4
+ import '../styles/vds_base_theme.scss';
6
5
  import { styledOptions } from '@codecademy/gamut-styles';
7
6
  import { isYouTubeProvider, MediaPlayer, MediaProvider, Poster, Track, useMediaRemote, useMediaState } from '@vidstack/react';
8
7
  import React, { useRef, createElement as _createElement } from 'react';
9
8
  import { Box } from '../../Box';
10
- import { vdsBaseThemeStyles } from '../styles';
11
9
  import { keyboardShortcuts } from './utils/constants';
12
10
  import { vdsVariables } from './utils/variables';
13
11
  import { VideoLayout } from './VideoLayout';
@@ -17,7 +15,7 @@ const VariableProvider = /*#__PURE__*/_styled(Box, _extends({}, {
17
15
  label: "VariableProvider"
18
16
  }, styledOptions(['variables'])))(({
19
17
  variables
20
- }) => variables, vdsBaseThemeStyles, "width:100%;height:100%;position:relative;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9WaWRlby9saWIvVmlkc3RhY2tQbGF5ZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTBCeUIiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL1ZpZGVvL2xpYi9WaWRzdGFja1BsYXllci50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKiBUaGlyZC1wYXJ0eSBWaWRzdGFjayBkZWZhdWx0IHRoZW1lIHN0eWxlcyAqL1xuLyogZXNsaW50LWRpc2FibGUgZ2FtdXQvbm8tY3NzLXN0YW5kYWxvbmUgKi9cbmltcG9ydCAnLi4vdmlkc3RhY2stdmVuZG9yLmNzcyc7XG5cbmltcG9ydCB7IHN0eWxlZE9wdGlvbnMgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCwgeyBDU1NPYmplY3QgfSBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHtcbiAgaXNZb3VUdWJlUHJvdmlkZXIsXG4gIE1lZGlhUGxheWVyLFxuICBNZWRpYVBsYXllckluc3RhbmNlLFxuICBNZWRpYVByb3ZpZGVyLFxuICBNZWRpYVByb3ZpZGVyQWRhcHRlcixcbiAgUG9zdGVyLFxuICBUcmFjayxcbiAgdXNlTWVkaWFSZW1vdGUsXG4gIHVzZU1lZGlhU3RhdGUsXG59IGZyb20gJ0B2aWRzdGFjay9yZWFjdCc7XG5pbXBvcnQgUmVhY3QsIHsgdXNlUmVmIH0gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBCb3ggfSBmcm9tICcuLi8uLi9Cb3gnO1xuaW1wb3J0IHsgVmlkZW9Qcm9wcyB9IGZyb20gJy4uJztcbmltcG9ydCB7IHZkc0Jhc2VUaGVtZVN0eWxlcyB9IGZyb20gJy4uL3N0eWxlcyc7XG5pbXBvcnQgeyBrZXlib2FyZFNob3J0Y3V0cyB9IGZyb20gJy4vdXRpbHMvY29uc3RhbnRzJztcbmltcG9ydCB7IHZkc1ZhcmlhYmxlcyB9IGZyb20gJy4vdXRpbHMvdmFyaWFibGVzJztcbmltcG9ydCB7IFZpZGVvTGF5b3V0IH0gZnJvbSAnLi9WaWRlb0xheW91dCc7XG5cbmNvbnN0IFZhcmlhYmxlUHJvdmlkZXIgPSBzdHlsZWQoQm94LCBzdHlsZWRPcHRpb25zKFsndmFyaWFibGVzJ10pKTx7XG4gIHZhcmlhYmxlcz86IENTU09iamVjdDtcbn0+KCh7IHZhcmlhYmxlcyB9KSA9PiB2YXJpYWJsZXMsIHZkc0Jhc2VUaGVtZVN0eWxlcywge1xuICB3aWR0aDogJzEwMCUnLFxuICBoZWlnaHQ6ICcxMDAlJyxcbiAgcG9zaXRpb246ICdyZWxhdGl2ZScsXG59KTtcblxudHlwZSBWaWRzdGFja1BsYXllclByb3BzID0gVmlkZW9Qcm9wcyAmIHtcbiAgb25Mb2FkOiAoKSA9PiB2b2lkO1xufTtcbmV4cG9ydCBjb25zdCBWaWRzdGFja1BsYXllcjogUmVhY3QuRkM8Vmlkc3RhY2tQbGF5ZXJQcm9wcz4gPSAoe1xuICBhdXRvcGxheSA9IGZhbHNlLFxuICBjb250cm9scyA9IHRydWUsXG4gIGxvb3AgPSBmYWxzZSxcbiAgbXV0ZWQgPSBmYWxzZSxcbiAgb25QbGF5LFxuICBvblJlYWR5LFxuICBvbkxvYWQsXG4gIHBsYWNlaG9sZGVySW1hZ2UsXG4gIHZpZGVvVGl0bGUsXG4gIHZpZGVvVXJsLFxuICB0ZXh0VHJhY2tzLFxuICB0aHVtYm5haWxzLFxuICB0cmFuc2xhdGlvbnMsXG4gIHdpZHRoLFxuICBoZWlnaHQsXG4gIGNsYXNzTmFtZSxcbiAgc2hvd0RlZmF1bHRQcm92aWRlckNvbnRyb2xzID0gZmFsc2UsXG59KSA9PiB7XG4gIGNvbnN0IHBsYXllciA9IHVzZVJlZjxNZWRpYVBsYXllckluc3RhbmNlPihudWxsKTtcbiAgY29uc3QgcGF1c2VkID0gdXNlTWVkaWFTdGF0ZSgncGF1c2VkJywgcGxheWVyKTtcbiAgY29uc3QgbWVkaWFSZW1vdGUgPSB1c2VNZWRpYVJlbW90ZShwbGF5ZXIpO1xuXG4gIC8qKlxuICAgKiAhV29ya2Fyb3VuZCBmb3IgVmlkc3RhY2sgWW91dHViZSBQcm92aWRlciBpc3N1ZSB3aXRoIG5hdGl2ZSBjb250cm9scyFcbiAgICogKE5vdCBuZWVkZWQgd2l0aCBDdXN0b20gQ29udHJvbHMgaS5lIHdoZW4gY29udHJvbHMgcHJvcHMgaXMgbm90IHNldCB0byB0cnVlIGluIDxNZWRpYVBsYXllcj4pXG4gICAqIFdoZW4gdGhlIHByb3ZpZGVyIGNoYW5nZXMgb3IgcGxheWVyIGlzIGluIHdhaXRpbmcgc3RhdGUsIHdlIG5lZWQgdG8gZm9yY2UgcmUtcGxheSB0aGUgdmlkZW8uXG4gICAqIFRoaXMgaXMgYmVjYXVzZSBvZiBhbiBpc3N1ZSBpbiBWaWRzdGFjayB3aGVyZSBZb3V0dWJlIHZpZGVvcyB3aXRoIG5hdGl2ZSBjb250cm9scyBrZWVwcyBwYXVzaW5nLlxuICAgKi9cbiAgY29uc3Qgb25Qcm92aWRlckNoYW5nZSA9IGFzeW5jIChwcm92aWRlcjogTWVkaWFQcm92aWRlckFkYXB0ZXIgfCBudWxsKSA9PiB7XG4gICAgaWYgKGlzWW91VHViZVByb3ZpZGVyKHByb3ZpZGVyKSkge1xuICAgICAgYXdhaXQgcHJvdmlkZXIucGxheSgpO1xuICAgIH1cbiAgfTtcbiAgY29uc3Qgb25QbGF5ZXJXYWl0aW5nID0gKCkgPT4ge1xuICAgIGlmIChpc1lvdVR1YmVQcm92aWRlcihwbGF5ZXIuY3VycmVudD8ucHJvdmlkZXIpICYmIHBhdXNlZCkge1xuICAgICAgbWVkaWFSZW1vdGU/LnRvZ2dsZVBhdXNlZCgpO1xuICAgIH1cbiAgfTtcblxuICByZXR1cm4gKFxuICAgIDxWYXJpYWJsZVByb3ZpZGVyXG4gICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBnYW11dC9uby1pbmxpbmUtc3R5bGVcbiAgICAgIHN0eWxlPXt7IHdpZHRoLCBoZWlnaHQgfX1cbiAgICAgIHZhcmlhYmxlcz17dmRzVmFyaWFibGVzfVxuICAgID5cbiAgICAgIDxNZWRpYVBsYXllclxuICAgICAgICBhdXRvUGxheT17YXV0b3BsYXl9XG4gICAgICAgIGNvbnRyb2xzPXtzaG93RGVmYXVsdFByb3ZpZGVyQ29udHJvbHN9XG4gICAgICAgIGtleVNob3J0Y3V0cz17a2V5Ym9hcmRTaG9ydGN1dHN9XG4gICAgICAgIGxvb3A9e2xvb3B9XG4gICAgICAgIG11dGVkPXtcbiAgICAgICAgICBhdXRvcGxheSAmJiBpc1lvdVR1YmVQcm92aWRlcihwbGF5ZXI/LmN1cnJlbnQ/LnByb3ZpZGVyKVxuICAgICAgICAgICAgPyB0cnVlXG4gICAgICAgICAgICA6IG11dGVkXG4gICAgICAgIH1cbiAgICAgICAgcGxheXNJbmxpbmVcbiAgICAgICAgcmVmPXtwbGF5ZXJ9XG4gICAgICAgIHNyYz17dmlkZW9Vcmx9XG4gICAgICAgIHRpdGxlPXt2aWRlb1RpdGxlfVxuICAgICAgICBvbkNhblBsYXk9e29uUmVhZHl9XG4gICAgICAgIG9uTG9hZD17b25Mb2FkfVxuICAgICAgICBvblBsYXk9e29uUGxheX1cbiAgICAgICAgb25QbGF5aW5nPXsoKSA9PiB7XG4gICAgICAgICAgaWYgKGF1dG9wbGF5ICYmIHBsYXllci5jdXJyZW50Py5tdXRlZCAmJiAhbXV0ZWQpIHtcbiAgICAgICAgICAgIG1lZGlhUmVtb3RlPy51bm11dGUoKTtcbiAgICAgICAgICB9XG4gICAgICAgIH19XG4gICAgICAgIG9uUHJvdmlkZXJDaGFuZ2U9e29uUHJvdmlkZXJDaGFuZ2V9XG4gICAgICAgIG9uV2FpdGluZz17b25QbGF5ZXJXYWl0aW5nfVxuICAgICAgPlxuICAgICAgICA8TWVkaWFQcm92aWRlcj5cbiAgICAgICAgICB7cGxhY2Vob2xkZXJJbWFnZSAmJiAoXG4gICAgICAgICAgICA8UG9zdGVyXG4gICAgICAgICAgICAgIGFsdD17dmlkZW9UaXRsZX1cbiAgICAgICAgICAgICAgY2xhc3NOYW1lPVwidmRzLXBvc3RlclwiXG4gICAgICAgICAgICAgIHNyYz17cGxhY2Vob2xkZXJJbWFnZSBhcyBzdHJpbmd9XG4gICAgICAgICAgICAvPlxuICAgICAgICAgICl9XG4gICAgICAgICAge3RleHRUcmFja3M/Lm1hcCgodHJhY2spID0+IChcbiAgICAgICAgICAgIDxUcmFjayB7Li4udHJhY2t9IGtleT17dHJhY2suc3JjfSAvPlxuICAgICAgICAgICkpfVxuICAgICAgICA8L01lZGlhUHJvdmlkZXI+XG4gICAgICAgIDxWaWRlb0xheW91dFxuICAgICAgICAgIGNvbnRyb2xzPXtjb250cm9sc31cbiAgICAgICAgICB0aHVtYm5haWxzPXt0aHVtYm5haWxzfVxuICAgICAgICAgIHRyYW5zbGF0aW9ucz17dHJhbnNsYXRpb25zfVxuICAgICAgICAvPlxuICAgICAgPC9NZWRpYVBsYXllcj5cbiAgICA8L1ZhcmlhYmxlUHJvdmlkZXI+XG4gICk7XG59O1xuIl19 */"));
18
+ }) => variables, "width:100%;height:100%;position:relative;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9WaWRlby9saWIvVmlkc3RhY2tQbGF5ZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXdCeUIiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL1ZpZGVvL2xpYi9WaWRzdGFja1BsYXllci50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKiBlc2xpbnQtZGlzYWJsZSBnYW11dC9uby1jc3Mtc3RhbmRhbG9uZSAqL1xuaW1wb3J0ICcuLi9zdHlsZXMvdmRzX2Jhc2VfdGhlbWUuc2Nzcyc7XG5cbmltcG9ydCB7IHN0eWxlZE9wdGlvbnMgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCwgeyBDU1NPYmplY3QgfSBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHtcbiAgaXNZb3VUdWJlUHJvdmlkZXIsXG4gIE1lZGlhUGxheWVyLFxuICBNZWRpYVBsYXllckluc3RhbmNlLFxuICBNZWRpYVByb3ZpZGVyLFxuICBNZWRpYVByb3ZpZGVyQWRhcHRlcixcbiAgUG9zdGVyLFxuICBUcmFjayxcbiAgdXNlTWVkaWFSZW1vdGUsXG4gIHVzZU1lZGlhU3RhdGUsXG59IGZyb20gJ0B2aWRzdGFjay9yZWFjdCc7XG5pbXBvcnQgUmVhY3QsIHsgdXNlUmVmIH0gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBCb3ggfSBmcm9tICcuLi8uLi9Cb3gnO1xuaW1wb3J0IHsgVmlkZW9Qcm9wcyB9IGZyb20gJy4uJztcbmltcG9ydCB7IGtleWJvYXJkU2hvcnRjdXRzIH0gZnJvbSAnLi91dGlscy9jb25zdGFudHMnO1xuaW1wb3J0IHsgdmRzVmFyaWFibGVzIH0gZnJvbSAnLi91dGlscy92YXJpYWJsZXMnO1xuaW1wb3J0IHsgVmlkZW9MYXlvdXQgfSBmcm9tICcuL1ZpZGVvTGF5b3V0JztcblxuY29uc3QgVmFyaWFibGVQcm92aWRlciA9IHN0eWxlZChCb3gsIHN0eWxlZE9wdGlvbnMoWyd2YXJpYWJsZXMnXSkpPHtcbiAgdmFyaWFibGVzPzogQ1NTT2JqZWN0O1xufT4oKHsgdmFyaWFibGVzIH0pID0+IHZhcmlhYmxlcywge1xuICB3aWR0aDogJzEwMCUnLFxuICBoZWlnaHQ6ICcxMDAlJyxcbiAgcG9zaXRpb246ICdyZWxhdGl2ZScsXG59KTtcblxudHlwZSBWaWRzdGFja1BsYXllclByb3BzID0gVmlkZW9Qcm9wcyAmIHtcbiAgb25Mb2FkOiAoKSA9PiB2b2lkO1xufTtcbmV4cG9ydCBjb25zdCBWaWRzdGFja1BsYXllcjogUmVhY3QuRkM8Vmlkc3RhY2tQbGF5ZXJQcm9wcz4gPSAoe1xuICBhdXRvcGxheSA9IGZhbHNlLFxuICBjb250cm9scyA9IHRydWUsXG4gIGxvb3AgPSBmYWxzZSxcbiAgbXV0ZWQgPSBmYWxzZSxcbiAgb25QbGF5LFxuICBvblJlYWR5LFxuICBvbkxvYWQsXG4gIHBsYWNlaG9sZGVySW1hZ2UsXG4gIHZpZGVvVGl0bGUsXG4gIHZpZGVvVXJsLFxuICB0ZXh0VHJhY2tzLFxuICB0aHVtYm5haWxzLFxuICB0cmFuc2xhdGlvbnMsXG4gIHdpZHRoLFxuICBoZWlnaHQsXG4gIGNsYXNzTmFtZSxcbiAgc2hvd0RlZmF1bHRQcm92aWRlckNvbnRyb2xzID0gZmFsc2UsXG59KSA9PiB7XG4gIGNvbnN0IHBsYXllciA9IHVzZVJlZjxNZWRpYVBsYXllckluc3RhbmNlPihudWxsKTtcbiAgY29uc3QgcGF1c2VkID0gdXNlTWVkaWFTdGF0ZSgncGF1c2VkJywgcGxheWVyKTtcbiAgY29uc3QgbWVkaWFSZW1vdGUgPSB1c2VNZWRpYVJlbW90ZShwbGF5ZXIpO1xuXG4gIC8qKlxuICAgKiAhV29ya2Fyb3VuZCBmb3IgVmlkc3RhY2sgWW91dHViZSBQcm92aWRlciBpc3N1ZSB3aXRoIG5hdGl2ZSBjb250cm9scyFcbiAgICogKE5vdCBuZWVkZWQgd2l0aCBDdXN0b20gQ29udHJvbHMgaS5lIHdoZW4gY29udHJvbHMgcHJvcHMgaXMgbm90IHNldCB0byB0cnVlIGluIDxNZWRpYVBsYXllcj4pXG4gICAqIFdoZW4gdGhlIHByb3ZpZGVyIGNoYW5nZXMgb3IgcGxheWVyIGlzIGluIHdhaXRpbmcgc3RhdGUsIHdlIG5lZWQgdG8gZm9yY2UgcmUtcGxheSB0aGUgdmlkZW8uXG4gICAqIFRoaXMgaXMgYmVjYXVzZSBvZiBhbiBpc3N1ZSBpbiBWaWRzdGFjayB3aGVyZSBZb3V0dWJlIHZpZGVvcyB3aXRoIG5hdGl2ZSBjb250cm9scyBrZWVwcyBwYXVzaW5nLlxuICAgKi9cbiAgY29uc3Qgb25Qcm92aWRlckNoYW5nZSA9IGFzeW5jIChwcm92aWRlcjogTWVkaWFQcm92aWRlckFkYXB0ZXIgfCBudWxsKSA9PiB7XG4gICAgaWYgKGlzWW91VHViZVByb3ZpZGVyKHByb3ZpZGVyKSkge1xuICAgICAgYXdhaXQgcHJvdmlkZXIucGxheSgpO1xuICAgIH1cbiAgfTtcbiAgY29uc3Qgb25QbGF5ZXJXYWl0aW5nID0gKCkgPT4ge1xuICAgIGlmIChpc1lvdVR1YmVQcm92aWRlcihwbGF5ZXIuY3VycmVudD8ucHJvdmlkZXIpICYmIHBhdXNlZCkge1xuICAgICAgbWVkaWFSZW1vdGU/LnRvZ2dsZVBhdXNlZCgpO1xuICAgIH1cbiAgfTtcblxuICByZXR1cm4gKFxuICAgIDxWYXJpYWJsZVByb3ZpZGVyXG4gICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBnYW11dC9uby1pbmxpbmUtc3R5bGVcbiAgICAgIHN0eWxlPXt7IHdpZHRoLCBoZWlnaHQgfX1cbiAgICAgIHZhcmlhYmxlcz17dmRzVmFyaWFibGVzfVxuICAgID5cbiAgICAgIDxNZWRpYVBsYXllclxuICAgICAgICBhdXRvUGxheT17YXV0b3BsYXl9XG4gICAgICAgIGNvbnRyb2xzPXtzaG93RGVmYXVsdFByb3ZpZGVyQ29udHJvbHN9XG4gICAgICAgIGtleVNob3J0Y3V0cz17a2V5Ym9hcmRTaG9ydGN1dHN9XG4gICAgICAgIGxvb3A9e2xvb3B9XG4gICAgICAgIG11dGVkPXtcbiAgICAgICAgICBhdXRvcGxheSAmJiBpc1lvdVR1YmVQcm92aWRlcihwbGF5ZXI/LmN1cnJlbnQ/LnByb3ZpZGVyKVxuICAgICAgICAgICAgPyB0cnVlXG4gICAgICAgICAgICA6IG11dGVkXG4gICAgICAgIH1cbiAgICAgICAgcGxheXNJbmxpbmVcbiAgICAgICAgcmVmPXtwbGF5ZXJ9XG4gICAgICAgIHNyYz17dmlkZW9Vcmx9XG4gICAgICAgIHRpdGxlPXt2aWRlb1RpdGxlfVxuICAgICAgICBvbkNhblBsYXk9e29uUmVhZHl9XG4gICAgICAgIG9uTG9hZD17b25Mb2FkfVxuICAgICAgICBvblBsYXk9e29uUGxheX1cbiAgICAgICAgb25QbGF5aW5nPXsoKSA9PiB7XG4gICAgICAgICAgaWYgKGF1dG9wbGF5ICYmIHBsYXllci5jdXJyZW50Py5tdXRlZCAmJiAhbXV0ZWQpIHtcbiAgICAgICAgICAgIG1lZGlhUmVtb3RlPy51bm11dGUoKTtcbiAgICAgICAgICB9XG4gICAgICAgIH19XG4gICAgICAgIG9uUHJvdmlkZXJDaGFuZ2U9e29uUHJvdmlkZXJDaGFuZ2V9XG4gICAgICAgIG9uV2FpdGluZz17b25QbGF5ZXJXYWl0aW5nfVxuICAgICAgPlxuICAgICAgICA8TWVkaWFQcm92aWRlcj5cbiAgICAgICAgICB7cGxhY2Vob2xkZXJJbWFnZSAmJiAoXG4gICAgICAgICAgICA8UG9zdGVyXG4gICAgICAgICAgICAgIGFsdD17dmlkZW9UaXRsZX1cbiAgICAgICAgICAgICAgY2xhc3NOYW1lPVwidmRzLXBvc3RlclwiXG4gICAgICAgICAgICAgIHNyYz17cGxhY2Vob2xkZXJJbWFnZSBhcyBzdHJpbmd9XG4gICAgICAgICAgICAvPlxuICAgICAgICAgICl9XG4gICAgICAgICAge3RleHRUcmFja3M/Lm1hcCgodHJhY2spID0+IChcbiAgICAgICAgICAgIDxUcmFjayB7Li4udHJhY2t9IGtleT17dHJhY2suc3JjfSAvPlxuICAgICAgICAgICkpfVxuICAgICAgICA8L01lZGlhUHJvdmlkZXI+XG4gICAgICAgIDxWaWRlb0xheW91dFxuICAgICAgICAgIGNvbnRyb2xzPXtjb250cm9sc31cbiAgICAgICAgICB0aHVtYm5haWxzPXt0aHVtYm5haWxzfVxuICAgICAgICAgIHRyYW5zbGF0aW9ucz17dHJhbnNsYXRpb25zfVxuICAgICAgICAvPlxuICAgICAgPC9NZWRpYVBsYXllcj5cbiAgICA8L1ZhcmlhYmxlUHJvdmlkZXI+XG4gICk7XG59O1xuIl19 */"));
21
19
  export const VidstackPlayer = ({
22
20
  autoplay = false,
23
21
  controls = true,
@@ -0,0 +1,101 @@
1
+ @import "~@vidstack/react/player/styles/default/theme.css";
2
+ @import "~@vidstack/react/player/styles/default/layouts/video.css";
3
+ @import "~@vidstack/react/player/styles/default/layouts/audio.css";
4
+
5
+ /**
6
+ * Youtube overlay
7
+ * - Why 120% ? hiding yt logo and copy link button which are not accessible.
8
+ */
9
+ iframe.vds-youtube[data-no-controls] {
10
+ height: 120%;
11
+ }
12
+
13
+ [data-started] iframe.vds-youtube[data-no-controls] {
14
+ height: 1000%;
15
+ }
16
+
17
+ // Control buttons
18
+ :where(.vds-button .vds-icon) {
19
+ border-radius: unset;
20
+ }
21
+
22
+ .vds-controls button {
23
+ border-radius: var(--media-button-border-radius);
24
+ }
25
+
26
+ :where(.vds-video-layout[data-sm]) :where(.vds-button) {
27
+ padding: 0px 4px !important;
28
+ }
29
+
30
+ // Small layout volume / time slider
31
+ :where(.vds-video-layout[data-sm] .vds-volume-slider .vds-slider-track) {
32
+ background-color: var(--color-gray-600);
33
+ }
34
+ :where(.vds-video-layout[data-sm] .vds-volume-slider .vds-slider-track-fill) {
35
+ background-color: var(--color-secondary);
36
+ }
37
+ .vds-video-layout .vds-time-slider .vds-slider-value {
38
+ border: unset;
39
+ color: white;
40
+ }
41
+
42
+ // Tooltip
43
+ .vds-tooltip-content::after {
44
+ content: "";
45
+ -webkit-transform: rotate(45deg);
46
+ -moz-transform: rotate(45deg);
47
+ -ms-transform: rotate(45deg);
48
+ transform: rotate(45deg);
49
+ border-style: solid;
50
+ display: block;
51
+ width: 1rem;
52
+ height: 1rem;
53
+ position: absolute;
54
+ border-color: currentColor;
55
+ }
56
+ :where(.vds-tooltip-content[data-placement~="top"])::after {
57
+ border-width: 0 1px 1px 0;
58
+ bottom: -0.5rem;
59
+ left: calc(50% - 0.5rem);
60
+ background-image: linear-gradient(
61
+ to top left,
62
+ var(--color-background-contrast) 55%,
63
+ rgba(0, 0, 0, 0) 20%
64
+ );
65
+ }
66
+
67
+ :where(.vds-tooltip-content[data-placement~="bottom"])::after {
68
+ border-width: 1px 0px 0px 1px;
69
+ top: -0.5rem;
70
+ left: calc(50% - 0.5rem);
71
+ background-image: linear-gradient(
72
+ to bottom right,
73
+ var(--color-background-contrast) 55%,
74
+ rgba(0, 0, 0, 0) 20%
75
+ );
76
+ }
77
+
78
+ :where(.vds-tooltip-content[data-placement~="start"])::after {
79
+ left: calc(0% + 0.5rem);
80
+ }
81
+ :where(.vds-tooltip-content[data-placement~="end"])::after {
82
+ left: unset;
83
+ right: calc(0% + 0.5rem);
84
+ }
85
+
86
+ @keyframes vds-tooltip-exit {
87
+ 0% {
88
+ opacity: 1;
89
+ }
90
+ 100% {
91
+ opacity: 0;
92
+ }
93
+ }
94
+ @keyframes vds-tooltip-enter {
95
+ 0% {
96
+ opacity: 0;
97
+ }
98
+ 100% {
99
+ opacity: 1;
100
+ }
101
+ }
package/package.json CHANGED
@@ -1,15 +1,15 @@
1
1
  {
2
2
  "name": "@codecademy/gamut",
3
3
  "description": "Styleguide & Component library for Codecademy",
4
- "version": "72.2.5-alpha.9854e9.0",
4
+ "version": "72.2.5-alpha.f6eeb2.0",
5
5
  "author": "Codecademy Engineering <dev@codecademy.com>",
6
6
  "bin": "./bin/gamut.mjs",
7
7
  "dependencies": {
8
- "@codecademy/gamut-icons": "9.57.11-alpha.9854e9.0",
9
- "@codecademy/gamut-illustrations": "0.58.16-alpha.9854e9.0",
10
- "@codecademy/gamut-patterns": "0.10.35-alpha.9854e9.0",
11
- "@codecademy/gamut-styles": "20.0.3-alpha.9854e9.0",
12
- "@codecademy/variance": "0.26.2-alpha.9854e9.0",
8
+ "@codecademy/gamut-icons": "9.57.11-alpha.f6eeb2.0",
9
+ "@codecademy/gamut-illustrations": "0.58.16-alpha.f6eeb2.0",
10
+ "@codecademy/gamut-patterns": "0.10.35-alpha.f6eeb2.0",
11
+ "@codecademy/gamut-styles": "20.0.3-alpha.f6eeb2.0",
12
+ "@codecademy/variance": "0.26.2-alpha.f6eeb2.0",
13
13
  "@formatjs/intl-locale": "5.3.1",
14
14
  "@react-aria/interactions": "3.25.0",
15
15
  "@types/marked": "^4.0.8",
@@ -1 +0,0 @@
1
- export declare const vdsBaseThemeStyles: import("@emotion/react").SerializedStyles;
@@ -1,10 +0,0 @@
1
- function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
2
- import { css } from '@emotion/react';
3
- export const vdsBaseThemeStyles = process.env.NODE_ENV === "production" ? {
4
- name: "169rs5q-vdsBaseThemeStyles",
5
- styles: "iframe.vds-youtube[data-no-controls]{height:120%;}[data-started] iframe.vds-youtube[data-no-controls]{height:1000%;}:where(.vds-button .vds-icon){border-radius:unset;}.vds-controls button{border-radius:var(--media-button-border-radius);}:where(.vds-video-layout[data-sm]) :where(.vds-button){padding:0px 4px!important;}:where(.vds-video-layout[data-sm] .vds-volume-slider .vds-slider-track){background-color:var(--color-gray-600);}:where(.vds-video-layout[data-sm] .vds-volume-slider .vds-slider-track-fill){background-color:var(--color-secondary);}.vds-video-layout .vds-time-slider .vds-slider-value{border:unset;color:white;}.vds-tooltip-content::after{content:'';-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);border-style:solid;display:block;width:1rem;height:1rem;position:absolute;border-color:currentColor;}:where(.vds-tooltip-content[data-placement~='top'])::after{border-width:0 1px 1px 0;bottom:-0.5rem;left:calc(50% - 0.5rem);background-image:linear-gradient(\n to top left,\n var(--color-background-contrast) 55%,\n rgba(0, 0, 0, 0) 20%\n );}:where(.vds-tooltip-content[data-placement~='bottom'])::after{border-width:1px 0px 0px 1px;top:-0.5rem;left:calc(50% - 0.5rem);background-image:linear-gradient(\n to bottom right,\n var(--color-background-contrast) 55%,\n rgba(0, 0, 0, 0) 20%\n );}:where(.vds-tooltip-content[data-placement~='start'])::after{left:calc(0% + 0.5rem);}:where(.vds-tooltip-content[data-placement~='end'])::after{left:unset;right:calc(0% + 0.5rem);}@keyframes vds-tooltip-exit{0%{opacity:1;}100%{opacity:0;}}@keyframes vds-tooltip-enter{0%{opacity:0;}100%{opacity:1;}};label:vdsBaseThemeStyles;"
6
- } : {
7
- name: "169rs5q-vdsBaseThemeStyles",
8
- styles: "iframe.vds-youtube[data-no-controls]{height:120%;}[data-started] iframe.vds-youtube[data-no-controls]{height:1000%;}:where(.vds-button .vds-icon){border-radius:unset;}.vds-controls button{border-radius:var(--media-button-border-radius);}:where(.vds-video-layout[data-sm]) :where(.vds-button){padding:0px 4px!important;}:where(.vds-video-layout[data-sm] .vds-volume-slider .vds-slider-track){background-color:var(--color-gray-600);}:where(.vds-video-layout[data-sm] .vds-volume-slider .vds-slider-track-fill){background-color:var(--color-secondary);}.vds-video-layout .vds-time-slider .vds-slider-value{border:unset;color:white;}.vds-tooltip-content::after{content:'';-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);border-style:solid;display:block;width:1rem;height:1rem;position:absolute;border-color:currentColor;}:where(.vds-tooltip-content[data-placement~='top'])::after{border-width:0 1px 1px 0;bottom:-0.5rem;left:calc(50% - 0.5rem);background-image:linear-gradient(\n to top left,\n var(--color-background-contrast) 55%,\n rgba(0, 0, 0, 0) 20%\n );}:where(.vds-tooltip-content[data-placement~='bottom'])::after{border-width:1px 0px 0px 1px;top:-0.5rem;left:calc(50% - 0.5rem);background-image:linear-gradient(\n to bottom right,\n var(--color-background-contrast) 55%,\n rgba(0, 0, 0, 0) 20%\n );}:where(.vds-tooltip-content[data-placement~='start'])::after{left:calc(0% + 0.5rem);}:where(.vds-tooltip-content[data-placement~='end'])::after{left:unset;right:calc(0% + 0.5rem);}@keyframes vds-tooltip-exit{0%{opacity:1;}100%{opacity:0;}}@keyframes vds-tooltip-enter{0%{opacity:0;}100%{opacity:1;}};label:vdsBaseThemeStyles;/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9WaWRlby9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRXFDIiwiZmlsZSI6Ii4uLy4uL3NyYy9WaWRlby9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbmV4cG9ydCBjb25zdCB2ZHNCYXNlVGhlbWVTdHlsZXMgPSBjc3NgXG4gIC8qKlxuICAgKiBZb3V0dWJlIG92ZXJsYXlcbiAgICogLSBXaHkgMTIwJSA/IGhpZGluZyB5dCBsb2dvIGFuZCBjb3B5IGxpbmsgYnV0dG9uIHdoaWNoIGFyZSBub3QgYWNjZXNzaWJsZS5cbiAgICovXG4gIGlmcmFtZS52ZHMteW91dHViZVtkYXRhLW5vLWNvbnRyb2xzXSB7XG4gICAgaGVpZ2h0OiAxMjAlO1xuICB9XG5cbiAgW2RhdGEtc3RhcnRlZF0gaWZyYW1lLnZkcy15b3V0dWJlW2RhdGEtbm8tY29udHJvbHNdIHtcbiAgICBoZWlnaHQ6IDEwMDAlO1xuICB9XG5cbiAgLyogQ29udHJvbCBidXR0b25zICovXG4gIDp3aGVyZSgudmRzLWJ1dHRvbiAudmRzLWljb24pIHtcbiAgICBib3JkZXItcmFkaXVzOiB1bnNldDtcbiAgfVxuXG4gIC52ZHMtY29udHJvbHMgYnV0dG9uIHtcbiAgICBib3JkZXItcmFkaXVzOiB2YXIoLS1tZWRpYS1idXR0b24tYm9yZGVyLXJhZGl1cyk7XG4gIH1cblxuICA6d2hlcmUoLnZkcy12aWRlby1sYXlvdXRbZGF0YS1zbV0pIDp3aGVyZSgudmRzLWJ1dHRvbikge1xuICAgIHBhZGRpbmc6IDBweCA0cHggIWltcG9ydGFudDtcbiAgfVxuXG4gIC8qIFNtYWxsIGxheW91dCB2b2x1bWUgLyB0aW1lIHNsaWRlciAqL1xuICA6d2hlcmUoLnZkcy12aWRlby1sYXlvdXRbZGF0YS1zbV0gLnZkcy12b2x1bWUtc2xpZGVyIC52ZHMtc2xpZGVyLXRyYWNrKSB7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tY29sb3ItZ3JheS02MDApO1xuICB9XG4gIDp3aGVyZSgudmRzLXZpZGVvLWxheW91dFtkYXRhLXNtXSAudmRzLXZvbHVtZS1zbGlkZXIgLnZkcy1zbGlkZXItdHJhY2stZmlsbCkge1xuICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWNvbG9yLXNlY29uZGFyeSk7XG4gIH1cbiAgLnZkcy12aWRlby1sYXlvdXQgLnZkcy10aW1lLXNsaWRlciAudmRzLXNsaWRlci12YWx1ZSB7XG4gICAgYm9yZGVyOiB1bnNldDtcbiAgICBjb2xvcjogd2hpdGU7XG4gIH1cblxuICAvKiBUb29sdGlwICovXG4gIC52ZHMtdG9vbHRpcC1jb250ZW50OjphZnRlciB7XG4gICAgY29udGVudDogJyc7XG4gICAgLXdlYmtpdC10cmFuc2Zvcm06IHJvdGF0ZSg0NWRlZyk7XG4gICAgLW1vei10cmFuc2Zvcm06IHJvdGF0ZSg0NWRlZyk7XG4gICAgLW1zLXRyYW5zZm9ybTogcm90YXRlKDQ1ZGVnKTtcbiAgICB0cmFuc2Zvcm06IHJvdGF0ZSg0NWRlZyk7XG4gICAgYm9yZGVyLXN0eWxlOiBzb2xpZDtcbiAgICBkaXNwbGF5OiBibG9jaztcbiAgICB3aWR0aDogMXJlbTtcbiAgICBoZWlnaHQ6IDFyZW07XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIGJvcmRlci1jb2xvcjogY3VycmVudENvbG9yO1xuICB9XG4gIDp3aGVyZSgudmRzLXRvb2x0aXAtY29udGVudFtkYXRhLXBsYWNlbWVudH49J3RvcCddKTo6YWZ0ZXIge1xuICAgIGJvcmRlci13aWR0aDogMCAxcHggMXB4IDA7XG4gICAgYm90dG9tOiAtMC41cmVtO1xuICAgIGxlZnQ6IGNhbGMoNTAlIC0gMC41cmVtKTtcbiAgICBiYWNrZ3JvdW5kLWltYWdlOiBsaW5lYXItZ3JhZGllbnQoXG4gICAgICB0byB0b3AgbGVmdCxcbiAgICAgIHZhcigtLWNvbG9yLWJhY2tncm91bmQtY29udHJhc3QpIDU1JSxcbiAgICAgIHJnYmEoMCwgMCwgMCwgMCkgMjAlXG4gICAgKTtcbiAgfVxuXG4gIDp3aGVyZSgudmRzLXRvb2x0aXAtY29udGVudFtkYXRhLXBsYWNlbWVudH49J2JvdHRvbSddKTo6YWZ0ZXIge1xuICAgIGJvcmRlci13aWR0aDogMXB4IDBweCAwcHggMXB4O1xuICAgIHRvcDogLTAuNXJlbTtcbiAgICBsZWZ0OiBjYWxjKDUwJSAtIDAuNXJlbSk7XG4gICAgYmFja2dyb3VuZC1pbWFnZTogbGluZWFyLWdyYWRpZW50KFxuICAgICAgdG8gYm90dG9tIHJpZ2h0LFxuICAgICAgdmFyKC0tY29sb3ItYmFja2dyb3VuZC1jb250cmFzdCkgNTUlLFxuICAgICAgcmdiYSgwLCAwLCAwLCAwKSAyMCVcbiAgICApO1xuICB9XG5cbiAgOndoZXJlKC52ZHMtdG9vbHRpcC1jb250ZW50W2RhdGEtcGxhY2VtZW50fj0nc3RhcnQnXSk6OmFmdGVyIHtcbiAgICBsZWZ0OiBjYWxjKDAlICsgMC41cmVtKTtcbiAgfVxuICA6d2hlcmUoLnZkcy10b29sdGlwLWNvbnRlbnRbZGF0YS1wbGFjZW1lbnR+PSdlbmQnXSk6OmFmdGVyIHtcbiAgICBsZWZ0OiB1bnNldDtcbiAgICByaWdodDogY2FsYygwJSArIDAuNXJlbSk7XG4gIH1cblxuICBAa2V5ZnJhbWVzIHZkcy10b29sdGlwLWV4aXQge1xuICAgIDAlIHtcbiAgICAgIG9wYWNpdHk6IDE7XG4gICAgfVxuICAgIDEwMCUge1xuICAgICAgb3BhY2l0eTogMDtcbiAgICB9XG4gIH1cbiAgQGtleWZyYW1lcyB2ZHMtdG9vbHRpcC1lbnRlciB7XG4gICAgMCUge1xuICAgICAgb3BhY2l0eTogMDtcbiAgICB9XG4gICAgMTAwJSB7XG4gICAgICBvcGFjaXR5OiAxO1xuICAgIH1cbiAgfVxuYDtcbiJdfQ== */",
9
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
10
- };
@@ -1,3 +0,0 @@
1
- @import "~@vidstack/react/player/styles/default/theme.css";
2
- @import "~@vidstack/react/player/styles/default/layouts/video.css";
3
- @import "~@vidstack/react/player/styles/default/layouts/audio.css";