@greensight/gds/emotion/cjs/index.js

Greensight Design System

var FutureButton = require('./index-CjAXi4ow.js');
var ThemeProvider = require('./ThemeProvider.js');
var Layout = require('./Layout.js');
var Section = require('./Section.js');
var Container = require('./Container.js');
var VisuallyHidden = require('./VisuallyHidden.js');
var Button = require('./Button.js');
var baseTheme = require('./baseTheme.js');
var createTheme = require('./createTheme.js');
var useTheme = require('./useTheme.js');
var typography = require('./typography.js');
var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-mkWCC7yp.js');
var scale = require('./scale-D3jiQp7F.js');
require('./emotion-react.esm-DjRiK_3N.js');
require('./emotion-element-c16c303e.esm-C-l8eTyZ.js');
require('react');
require('./useCSSProperty-SItmMrFd.js');
require('./cjs-D_V_gH93.js');
require('./fastEquals.js');

/**
 * Creates a statically typed object representing media queries
 * given a map of breakpoints from tokens
 * @example
 * // scripts/gds.ts
 * import tokens from '../../../public/tokens.json';
 * const { breakpoints } = tokens.layout;
 * const MEDIA_QUERIES = createMediaQueries(breakpoints);
 * // ...
 * export {MEDIA_QUERIES };
 * @example
 * // components/Example/themes/basic/index.ts
 * import { MEDIA_QUERIES } from '@scripts/gds';
 * export const basicTheme: ExampleComponentTheme = {
 *  subComponent: {
 *    // statically typed
 *    [MEDIA_QUERIES.sm]: {
 *        width: '100%',
 *    }
 *  }
 * }
 * @param breakpoints breakpoints from tokens
 */
var createMediaQueries = function createMediaQueries(breakpoints) {
  var queries = Object.entries(breakpoints).reduce(function (acc, _ref) {
    var _ref2 = _rollupPluginBabelHelpers._slicedToArray(_ref, 2),
      name = _ref2[0],
      value = _ref2[1];
    return _rollupPluginBabelHelpers._objectSpread2(_rollupPluginBabelHelpers._objectSpread2({}, acc), {}, _rollupPluginBabelHelpers._defineProperty(_rollupPluginBabelHelpers._defineProperty({}, name, "@media (max-width: ".concat(value - 1, "px)")), "".concat(name, "Min"), "@media (min-width: ".concat(value, "px)")));
  }, {});
  return queries;
};

exports.createFutureButtonWithTheme = FutureButton.createButtonWithTheme;
exports.extractCSSOption = FutureButton.extractCSSOption;
exports.useThemeCSS = FutureButton.useThemeCSS;
exports.useThemeCSSPart = FutureButton.useThemeCSSPart;
exports.ThemeProvider = ThemeProvider.ThemeProvider;
exports.Layout = Layout.Layout;
exports.Section = Section.Section;
exports.Container = Container.Container;
exports.useContainerCSS = Container.useContainerCSS;
exports.VisuallyHidden = VisuallyHidden.VisuallyHidden;
exports.Button = Button.Button;
exports.baseTheme = baseTheme.baseTheme;
exports.createTheme = createTheme.createTheme;
exports.useTheme = useTheme.useTheme;
exports.typography = typography.typography;
exports.scale = scale.scale;
exports.createMediaQueries = createMediaQueries;