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

Greensight Design System

export { c as createFutureButtonWithTheme, e as extractCSSOption, a as useThemeCSS, u as useThemeCSSPart } from './index-CKE-iVaW.js';
export { ThemeProvider } from './ThemeProvider.js';
export { Layout } from './Layout.js';
export { Section } from './Section.js';
export { Container, useContainerCSS } from './Container.js';
export { VisuallyHidden } from './VisuallyHidden.js';
export { Button } from './Button.js';
export { baseTheme } from './baseTheme.js';
export { createTheme } from './createTheme.js';
export { useTheme } from './useTheme.js';
export { typography } from './typography.js';
import { _ as _slicedToArray, a as _objectSpread2, b as _defineProperty } from './_rollupPluginBabelHelpers-D0Wa2C7U.js';
export { s as scale } from './scale-CeLrnuzO.js';
import './emotion-react.esm-CuKt2qQ4.js';
import './emotion-element-c16c303e.esm-CnTrGsmj.js';
import 'react';
import './useCSSProperty-CIA5Kp6U.js';
import './cjs-C-GfJT3o.js';
import './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 = _slicedToArray(_ref, 2),
      name = _ref2[0],
      value = _ref2[1];
    return _objectSpread2(_objectSpread2({}, acc), {}, _defineProperty(_defineProperty({}, name, "@media (max-width: ".concat(value - 1, "px)")), "".concat(name, "Min"), "@media (min-width: ".concat(value, "px)")));
  }, {});
  return queries;
};

export { createMediaQueries };