@dfds-ui/grid 2.2.0-alpha.8d87a90d → 2.2.0-alpha.c35ceba3

package/cjs/grid/Grid.d.ts

@@ -0,0 +1,11 @@
+import React, { ReactNode } from 'react';
+export declare type GridProps = {
+    children: ReactNode;
+    gap?: 's' | 'l';
+    surface?: 'inverted' | 'dark' | 'transparent';
+    top?: 's' | 'l';
+    bottom?: 's' | 'l';
+    className?: string;
+};
+export declare const Grid: ({ gap, surface, top, bottom, children, className }: GridProps) => React.JSX.Element;
+export default Grid;

package/cjs/grid/Grid.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Grid = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _theme = require("@dfds-ui/theme");
+var _react2 = require("@emotion/react");
+var _classnames = _interopRequireDefault(require("classnames"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Grid = ({
+  gap,
+  surface,
+  top,
+  bottom,
+  children,
+  className
+}) => {
+  const getSurface = () => {
+    if (surface === 'dark') return _theme.theme.colors.surface.secondary;
+    if (surface === 'inverted') return _theme.theme.colors.surface.tertiary;
+    if (surface === 'transparent') return 'rgba(0,0,0,0)';
+    return _theme.theme.colors.surface.primary;
+  };
+  const getSize = size => {
+    if (size && size === 's') return _theme.theme.spacing.s;
+    if (size && size === 'l') return _theme.theme.spacing.l;
+    return 0;
+  };
+  return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("div", {
+    className: (0, _classnames.default)('grid-container', className),
+    css: /*#__PURE__*/(0, _react2.css)("background-color:", getSurface(), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:Grid;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9ncmlkL0dyaWQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdDZ0IiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL2dyaWQvR3JpZC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgUmVhY3ROb2RlIH0gZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBtZWRpYSwgdGhlbWUgfSBmcm9tICdAZGZkcy11aS90aGVtZSdcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IGN4IGZyb20gJ2NsYXNzbmFtZXMnXG5cbmV4cG9ydCB0eXBlIEdyaWRQcm9wcyA9IHtcbiAgY2hpbGRyZW46IFJlYWN0Tm9kZVxuICBnYXA/OiAncycgfCAnbCdcbiAgc3VyZmFjZT86ICdpbnZlcnRlZCcgfCAnZGFyaycgfCAndHJhbnNwYXJlbnQnXG4gIHRvcD86ICdzJyB8ICdsJ1xuICBib3R0b20/OiAncycgfCAnbCdcbiAgY2xhc3NOYW1lPzogc3RyaW5nXG59XG5cbmV4cG9ydCBjb25zdCBHcmlkID0gKHsgZ2FwLCBzdXJmYWNlLCB0b3AsIGJvdHRvbSwgY2hpbGRyZW4sIGNsYXNzTmFtZSB9OiBHcmlkUHJvcHMpID0+IHtcbiAgY29uc3QgZ2V0U3VyZmFjZSA9ICgpID0+IHtcbiAgICBpZiAoc3VyZmFjZSA9PT0gJ2RhcmsnKSByZXR1cm4gdGhlbWUuY29sb3JzLnN1cmZhY2Uuc2Vjb25kYXJ5XG4gICAgaWYgKHN1cmZhY2UgPT09ICdpbnZlcnRlZCcpIHJldHVybiB0aGVtZS5jb2xvcnMuc3VyZmFjZS50ZXJ0aWFyeVxuICAgIGlmIChzdXJmYWNlID09PSAndHJhbnNwYXJlbnQnKSByZXR1cm4gJ3JnYmEoMCwwLDAsMCknXG4gICAgcmV0dXJuIHRoZW1lLmNvbG9ycy5zdXJmYWNlLnByaW1hcnlcbiAgfVxuXG4gIGNvbnN0IGdldFNpemUgPSAoc2l6ZT86IHN0cmluZykgPT4ge1xuICAgIGlmIChzaXplICYmIHNpemUgPT09ICdzJykgcmV0dXJuIHRoZW1lLnNwYWNpbmcuc1xuICAgIGlmIChzaXplICYmIHNpemUgPT09ICdsJykgcmV0dXJuIHRoZW1lLnNwYWNpbmcubFxuICAgIHJldHVybiAwXG4gIH1cblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8ZGl2XG4gICAgICAgIGNsYXNzTmFtZT17Y3goJ2dyaWQtY29udGFpbmVyJywgY2xhc3NOYW1lKX1cbiAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHtnZXRTdXJmYWNlKCl9O1xuICAgICAgICBgfVxuICAgICAgPlxuICAgICAgICA8ZGl2XG4gICAgICAgICAgY2xhc3NOYW1lPVwiZ3JpZC1pbm5lci1jb250YWluZXJcIlxuICAgICAgICAgIGNzcz17Y3NzYFxuICAgICAgICAgICAgZGlzcGxheTogZ3JpZDtcbiAgICAgICAgICAgIG1hcmdpbjogMCBhdXRvOyAvKiBjZW50ZXIgaW4gdGhlIHZpZXdwb3J0ICovXG4gICAgICAgICAgICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IHJlcGVhdCgxMiwgMWZyKTtcbiAgICAgICAgICAgIG1heC13aWR0aDogMTIwMHB4O1xuICAgICAgICAgICAgZ3JpZC1yb3ctZ2FwOiAwO1xuICAgICAgICAgICAgZ3JpZC1jb2x1bW4tZ2FwOiAke2dhcCA9PT0gJ3MnID8gdGhlbWUuc3BhY2luZy5zIDogdGhlbWUuc3BhY2luZy5sfTtcbiAgICAgICAgICAgIHBhZGRpbmctdG9wOiAke2dldFNpemUodG9wKX07XG4gICAgICAgICAgICBwYWRkaW5nLWJvdHRvbTogJHtnZXRTaXplKGJvdHRvbSl9O1xuXG4gICAgICAgICAgICAke21lZGlhLmxlc3NUaGFuRXF1YWwoJ3hsJylgXG4gICAgICAgICAgICAgIG1heC13aWR0aDogdW5zZXQ7XG4gICAgICAgICAgICAgIG1hcmdpbi1sZWZ0OiA0MHB4O1xuICAgICAgICAgICAgICBtYXJnaW4tcmlnaHQ6IDQwcHg7XG4gICAgICAgICAgICBgfVxuXG4gICAgICAgICAgICAke21lZGlhLmxlc3NUaGFuRXF1YWwoJ20nKWBcbiAgICAgICAgICAgICAgbWFyZ2luLWxlZnQ6IDA7XG4gICAgICAgICAgICAgIG1hcmdpbi1yaWdodDogMDtcbiAgICAgICAgICAgICAgZ3JpZC1jb2x1bW4tZ2FwOiAke3RoZW1lLnNwYWNpbmcuc307XG4gICAgICAgICAgICBgfVxuICAgICAgICAgIGB9XG4gICAgICAgID5cbiAgICAgICAgICB7Y2hpbGRyZW59XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9kaXY+XG4gICAgPC8+XG4gIClcbn1cblxuZXhwb3J0IGRlZmF1bHQgR3JpZFxuIl19 */")
+  }, (0, _react2.jsx)("div", {
+    className: "grid-inner-container",
+    css: /*#__PURE__*/(0, _react2.css)("display:grid;margin:0 auto;grid-template-columns:repeat(12, 1fr);max-width:1200px;grid-row-gap:0;grid-column-gap:", gap === 's' ? _theme.theme.spacing.s : _theme.theme.spacing.l, ";padding-top:", getSize(top), ";padding-bottom:", getSize(bottom), ";", _theme.media.lessThanEqual('xl')`
+              max-width: unset;
+              margin-left: 40px;
+              margin-right: 40px;
+            `, " ", _theme.media.lessThanEqual('m')`
+              margin-left: 0;
+              margin-right: 0;
+              grid-column-gap: ${_theme.theme.spacing.s};
+            `, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:Grid;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9ncmlkL0dyaWQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNDa0IiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL2dyaWQvR3JpZC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgUmVhY3ROb2RlIH0gZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBtZWRpYSwgdGhlbWUgfSBmcm9tICdAZGZkcy11aS90aGVtZSdcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IGN4IGZyb20gJ2NsYXNzbmFtZXMnXG5cbmV4cG9ydCB0eXBlIEdyaWRQcm9wcyA9IHtcbiAgY2hpbGRyZW46IFJlYWN0Tm9kZVxuICBnYXA/OiAncycgfCAnbCdcbiAgc3VyZmFjZT86ICdpbnZlcnRlZCcgfCAnZGFyaycgfCAndHJhbnNwYXJlbnQnXG4gIHRvcD86ICdzJyB8ICdsJ1xuICBib3R0b20/OiAncycgfCAnbCdcbiAgY2xhc3NOYW1lPzogc3RyaW5nXG59XG5cbmV4cG9ydCBjb25zdCBHcmlkID0gKHsgZ2FwLCBzdXJmYWNlLCB0b3AsIGJvdHRvbSwgY2hpbGRyZW4sIGNsYXNzTmFtZSB9OiBHcmlkUHJvcHMpID0+IHtcbiAgY29uc3QgZ2V0U3VyZmFjZSA9ICgpID0+IHtcbiAgICBpZiAoc3VyZmFjZSA9PT0gJ2RhcmsnKSByZXR1cm4gdGhlbWUuY29sb3JzLnN1cmZhY2Uuc2Vjb25kYXJ5XG4gICAgaWYgKHN1cmZhY2UgPT09ICdpbnZlcnRlZCcpIHJldHVybiB0aGVtZS5jb2xvcnMuc3VyZmFjZS50ZXJ0aWFyeVxuICAgIGlmIChzdXJmYWNlID09PSAndHJhbnNwYXJlbnQnKSByZXR1cm4gJ3JnYmEoMCwwLDAsMCknXG4gICAgcmV0dXJuIHRoZW1lLmNvbG9ycy5zdXJmYWNlLnByaW1hcnlcbiAgfVxuXG4gIGNvbnN0IGdldFNpemUgPSAoc2l6ZT86IHN0cmluZykgPT4ge1xuICAgIGlmIChzaXplICYmIHNpemUgPT09ICdzJykgcmV0dXJuIHRoZW1lLnNwYWNpbmcuc1xuICAgIGlmIChzaXplICYmIHNpemUgPT09ICdsJykgcmV0dXJuIHRoZW1lLnNwYWNpbmcubFxuICAgIHJldHVybiAwXG4gIH1cblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8ZGl2XG4gICAgICAgIGNsYXNzTmFtZT17Y3goJ2dyaWQtY29udGFpbmVyJywgY2xhc3NOYW1lKX1cbiAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHtnZXRTdXJmYWNlKCl9O1xuICAgICAgICBgfVxuICAgICAgPlxuICAgICAgICA8ZGl2XG4gICAgICAgICAgY2xhc3NOYW1lPVwiZ3JpZC1pbm5lci1jb250YWluZXJcIlxuICAgICAgICAgIGNzcz17Y3NzYFxuICAgICAgICAgICAgZGlzcGxheTogZ3JpZDtcbiAgICAgICAgICAgIG1hcmdpbjogMCBhdXRvOyAvKiBjZW50ZXIgaW4gdGhlIHZpZXdwb3J0ICovXG4gICAgICAgICAgICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IHJlcGVhdCgxMiwgMWZyKTtcbiAgICAgICAgICAgIG1heC13aWR0aDogMTIwMHB4O1xuICAgICAgICAgICAgZ3JpZC1yb3ctZ2FwOiAwO1xuICAgICAgICAgICAgZ3JpZC1jb2x1bW4tZ2FwOiAke2dhcCA9PT0gJ3MnID8gdGhlbWUuc3BhY2luZy5zIDogdGhlbWUuc3BhY2luZy5sfTtcbiAgICAgICAgICAgIHBhZGRpbmctdG9wOiAke2dldFNpemUodG9wKX07XG4gICAgICAgICAgICBwYWRkaW5nLWJvdHRvbTogJHtnZXRTaXplKGJvdHRvbSl9O1xuXG4gICAgICAgICAgICAke21lZGlhLmxlc3NUaGFuRXF1YWwoJ3hsJylgXG4gICAgICAgICAgICAgIG1heC13aWR0aDogdW5zZXQ7XG4gICAgICAgICAgICAgIG1hcmdpbi1sZWZ0OiA0MHB4O1xuICAgICAgICAgICAgICBtYXJnaW4tcmlnaHQ6IDQwcHg7XG4gICAgICAgICAgICBgfVxuXG4gICAgICAgICAgICAke21lZGlhLmxlc3NUaGFuRXF1YWwoJ20nKWBcbiAgICAgICAgICAgICAgbWFyZ2luLWxlZnQ6IDA7XG4gICAgICAgICAgICAgIG1hcmdpbi1yaWdodDogMDtcbiAgICAgICAgICAgICAgZ3JpZC1jb2x1bW4tZ2FwOiAke3RoZW1lLnNwYWNpbmcuc307XG4gICAgICAgICAgICBgfVxuICAgICAgICAgIGB9XG4gICAgICAgID5cbiAgICAgICAgICB7Y2hpbGRyZW59XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9kaXY+XG4gICAgPC8+XG4gIClcbn1cblxuZXhwb3J0IGRlZmF1bHQgR3JpZFxuIl19 */")
+  }, children)));
+};
+exports.Grid = Grid;
+var _default = Grid;
+exports.default = _default;

package/cjs/grid/GridItem.d.ts

@@ -0,0 +1,14 @@
+import React, { ReactNode } from 'react';
+export declare type GridItemProps = {
+    children: ReactNode;
+    small?: 6 | 12;
+    medium?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+    large?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+    xlarge?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+    /**
+     * Class name to be assigned to the component
+     */
+    className?: string;
+};
+export declare const GridItem: (props: GridItemProps) => React.JSX.Element;
+export default GridItem;

package/cjs/grid/GridItem.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.GridItem = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
+var _theme = require("@dfds-ui/theme");
+var _classnames = _interopRequireDefault(require("classnames"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const GridItem = props => {
+  const smallWidth = props.small || 12;
+  const mediumWidth = props.medium || smallWidth;
+  const largeWidth = props.large || mediumWidth;
+  const xLargeWidth = props.xlarge || largeWidth;
+  return (0, _react2.jsx)("div", {
+    css: /*#__PURE__*/(0, _react2.css)("grid-column:span ", smallWidth, ";", _theme.media.greaterThan('m')`
+          grid-column: span ${mediumWidth};
+        `, " ", _theme.media.greaterThan('l')`
+          grid-column: span ${largeWidth};
+        `, " ", _theme.media.greaterThan('xl')`
+          grid-column: span ${xLargeWidth};
+        `, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:GridItem;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9ncmlkL0dyaWRJdGVtLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF5QmMiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL2dyaWQvR3JpZEl0ZW0udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IFJlYWN0Tm9kZSB9IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgeyBtZWRpYSB9IGZyb20gJ0BkZmRzLXVpL3RoZW1lJ1xuaW1wb3J0IGN4IGZyb20gJ2NsYXNzbmFtZXMnXG5cbmV4cG9ydCB0eXBlIEdyaWRJdGVtUHJvcHMgPSB7XG4gIGNoaWxkcmVuOiBSZWFjdE5vZGVcbiAgc21hbGw/OiA2IHwgMTJcbiAgbWVkaXVtPzogMSB8IDIgfCAzIHwgNCB8IDUgfCA2IHwgNyB8IDggfCA5IHwgMTAgfCAxMSB8IDEyXG4gIGxhcmdlPzogMSB8IDIgfCAzIHwgNCB8IDUgfCA2IHwgNyB8IDggfCA5IHwgMTAgfCAxMSB8IDEyXG4gIHhsYXJnZT86IDEgfCAyIHwgMyB8IDQgfCA1IHwgNiB8IDcgfCA4IHwgOSB8IDEwIHwgMTEgfCAxMlxuICAvKipcbiAgICogQ2xhc3MgbmFtZSB0byBiZSBhc3NpZ25lZCB0byB0aGUgY29tcG9uZW50XG4gICAqL1xuICBjbGFzc05hbWU/OiBzdHJpbmdcbn1cblxuZXhwb3J0IGNvbnN0IEdyaWRJdGVtID0gKHByb3BzOiBHcmlkSXRlbVByb3BzKSA9PiB7XG4gIGNvbnN0IHNtYWxsV2lkdGggPSBwcm9wcy5zbWFsbCB8fCAxMlxuICBjb25zdCBtZWRpdW1XaWR0aCA9IHByb3BzLm1lZGl1bSB8fCBzbWFsbFdpZHRoXG4gIGNvbnN0IGxhcmdlV2lkdGggPSBwcm9wcy5sYXJnZSB8fCBtZWRpdW1XaWR0aFxuICBjb25zdCB4TGFyZ2VXaWR0aCA9IHByb3BzLnhsYXJnZSB8fCBsYXJnZVdpZHRoXG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2XG4gICAgICBjc3M9e2Nzc2BcbiAgICAgICAgZ3JpZC1jb2x1bW46IHNwYW4gJHtzbWFsbFdpZHRofTtcbiAgICAgICAgJHttZWRpYS5ncmVhdGVyVGhhbignbScpYFxuICAgICAgICAgIGdyaWQtY29sdW1uOiBzcGFuICR7bWVkaXVtV2lkdGh9O1xuICAgICAgICBgfVxuICAgICAgICAke21lZGlhLmdyZWF0ZXJUaGFuKCdsJylgXG4gICAgICAgICAgZ3JpZC1jb2x1bW46IHNwYW4gJHtsYXJnZVdpZHRofTtcbiAgICAgICAgYH1cbiAgICAgICAgJHttZWRpYS5ncmVhdGVyVGhhbigneGwnKWBcbiAgICAgICAgICBncmlkLWNvbHVtbjogc3BhbiAke3hMYXJnZVdpZHRofTtcbiAgICAgICAgYH1cbiAgICAgIGB9XG4gICAgICBjbGFzc05hbWU9e2N4KCdncmlkLWl0ZW0nLCBwcm9wcy5jbGFzc05hbWUpfVxuICAgID5cbiAgICAgIHtwcm9wcy5jaGlsZHJlbn1cbiAgICA8L2Rpdj5cbiAgKVxufVxuXG5leHBvcnQgZGVmYXVsdCBHcmlkSXRlbVxuIl19 */"),
+    className: (0, _classnames.default)('grid-item', props.className)
+  }, props.children);
+};
+exports.GridItem = GridItem;
+var _default = GridItem;
+exports.default = _default;

package/cjs/grid/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Grid';
+export * from './GridItem';

package/cjs/grid/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Grid = require("./Grid");
+Object.keys(_Grid).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Grid[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Grid[key];
+    }
+  });
+});
+var _GridItem = require("./GridItem");
+Object.keys(_GridItem).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _GridItem[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridItem[key];
+    }
+  });
+});

package/cjs/index.d.ts

@@ -0,0 +1 @@
+export * from './grid';

package/cjs/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _grid = require("./grid");
+Object.keys(_grid).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _grid[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _grid[key];
+    }
+  });
+});

package/grid/Grid.d.ts

@@ -0,0 +1,11 @@
+import React, { ReactNode } from 'react';
+export declare type GridProps = {
+    children: ReactNode;
+    gap?: 's' | 'l';
+    surface?: 'inverted' | 'dark' | 'transparent';
+    top?: 's' | 'l';
+    bottom?: 's' | 'l';
+    className?: string;
+};
+export declare const Grid: ({ gap, surface, top, bottom, children, className }: GridProps) => React.JSX.Element;
+export default Grid;

package/grid/Grid.js

@@ -0,0 +1,34 @@
+var _templateObject, _templateObject2;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import React from 'react';
+import { media, theme } from '@dfds-ui/theme';
+import { css } from '@emotion/react';
+import cx from 'classnames';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var Grid = function Grid(_ref) {
+  var gap = _ref.gap,
+    surface = _ref.surface,
+    top = _ref.top,
+    bottom = _ref.bottom,
+    children = _ref.children,
+    className = _ref.className;
+  var getSurface = function getSurface() {
+    if (surface === 'dark') return theme.colors.surface.secondary;
+    if (surface === 'inverted') return theme.colors.surface.tertiary;
+    if (surface === 'transparent') return 'rgba(0,0,0,0)';
+    return theme.colors.surface.primary;
+  };
+  var getSize = function getSize(size) {
+    if (size && size === 's') return theme.spacing.s;
+    if (size && size === 'l') return theme.spacing.l;
+    return 0;
+  };
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX("div", {
+    className: cx('grid-container', className),
+    css: /*#__PURE__*/css("background-color:", getSurface(), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:Grid;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9ncmlkL0dyaWQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdDZ0IiLCJmaWxlIjoiLi4vLi4vc3JjL2dyaWQvR3JpZC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgUmVhY3ROb2RlIH0gZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBtZWRpYSwgdGhlbWUgfSBmcm9tICdAZGZkcy11aS90aGVtZSdcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IGN4IGZyb20gJ2NsYXNzbmFtZXMnXG5cbmV4cG9ydCB0eXBlIEdyaWRQcm9wcyA9IHtcbiAgY2hpbGRyZW46IFJlYWN0Tm9kZVxuICBnYXA/OiAncycgfCAnbCdcbiAgc3VyZmFjZT86ICdpbnZlcnRlZCcgfCAnZGFyaycgfCAndHJhbnNwYXJlbnQnXG4gIHRvcD86ICdzJyB8ICdsJ1xuICBib3R0b20/OiAncycgfCAnbCdcbiAgY2xhc3NOYW1lPzogc3RyaW5nXG59XG5cbmV4cG9ydCBjb25zdCBHcmlkID0gKHsgZ2FwLCBzdXJmYWNlLCB0b3AsIGJvdHRvbSwgY2hpbGRyZW4sIGNsYXNzTmFtZSB9OiBHcmlkUHJvcHMpID0+IHtcbiAgY29uc3QgZ2V0U3VyZmFjZSA9ICgpID0+IHtcbiAgICBpZiAoc3VyZmFjZSA9PT0gJ2RhcmsnKSByZXR1cm4gdGhlbWUuY29sb3JzLnN1cmZhY2Uuc2Vjb25kYXJ5XG4gICAgaWYgKHN1cmZhY2UgPT09ICdpbnZlcnRlZCcpIHJldHVybiB0aGVtZS5jb2xvcnMuc3VyZmFjZS50ZXJ0aWFyeVxuICAgIGlmIChzdXJmYWNlID09PSAndHJhbnNwYXJlbnQnKSByZXR1cm4gJ3JnYmEoMCwwLDAsMCknXG4gICAgcmV0dXJuIHRoZW1lLmNvbG9ycy5zdXJmYWNlLnByaW1hcnlcbiAgfVxuXG4gIGNvbnN0IGdldFNpemUgPSAoc2l6ZT86IHN0cmluZykgPT4ge1xuICAgIGlmIChzaXplICYmIHNpemUgPT09ICdzJykgcmV0dXJuIHRoZW1lLnNwYWNpbmcuc1xuICAgIGlmIChzaXplICYmIHNpemUgPT09ICdsJykgcmV0dXJuIHRoZW1lLnNwYWNpbmcubFxuICAgIHJldHVybiAwXG4gIH1cblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8ZGl2XG4gICAgICAgIGNsYXNzTmFtZT17Y3goJ2dyaWQtY29udGFpbmVyJywgY2xhc3NOYW1lKX1cbiAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHtnZXRTdXJmYWNlKCl9O1xuICAgICAgICBgfVxuICAgICAgPlxuICAgICAgICA8ZGl2XG4gICAgICAgICAgY2xhc3NOYW1lPVwiZ3JpZC1pbm5lci1jb250YWluZXJcIlxuICAgICAgICAgIGNzcz17Y3NzYFxuICAgICAgICAgICAgZGlzcGxheTogZ3JpZDtcbiAgICAgICAgICAgIG1hcmdpbjogMCBhdXRvOyAvKiBjZW50ZXIgaW4gdGhlIHZpZXdwb3J0ICovXG4gICAgICAgICAgICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IHJlcGVhdCgxMiwgMWZyKTtcbiAgICAgICAgICAgIG1heC13aWR0aDogMTIwMHB4O1xuICAgICAgICAgICAgZ3JpZC1yb3ctZ2FwOiAwO1xuICAgICAgICAgICAgZ3JpZC1jb2x1bW4tZ2FwOiAke2dhcCA9PT0gJ3MnID8gdGhlbWUuc3BhY2luZy5zIDogdGhlbWUuc3BhY2luZy5sfTtcbiAgICAgICAgICAgIHBhZGRpbmctdG9wOiAke2dldFNpemUodG9wKX07XG4gICAgICAgICAgICBwYWRkaW5nLWJvdHRvbTogJHtnZXRTaXplKGJvdHRvbSl9O1xuXG4gICAgICAgICAgICAke21lZGlhLmxlc3NUaGFuRXF1YWwoJ3hsJylgXG4gICAgICAgICAgICAgIG1heC13aWR0aDogdW5zZXQ7XG4gICAgICAgICAgICAgIG1hcmdpbi1sZWZ0OiA0MHB4O1xuICAgICAgICAgICAgICBtYXJnaW4tcmlnaHQ6IDQwcHg7XG4gICAgICAgICAgICBgfVxuXG4gICAgICAgICAgICAke21lZGlhLmxlc3NUaGFuRXF1YWwoJ20nKWBcbiAgICAgICAgICAgICAgbWFyZ2luLWxlZnQ6IDA7XG4gICAgICAgICAgICAgIG1hcmdpbi1yaWdodDogMDtcbiAgICAgICAgICAgICAgZ3JpZC1jb2x1bW4tZ2FwOiAke3RoZW1lLnNwYWNpbmcuc307XG4gICAgICAgICAgICBgfVxuICAgICAgICAgIGB9XG4gICAgICAgID5cbiAgICAgICAgICB7Y2hpbGRyZW59XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9kaXY+XG4gICAgPC8+XG4gIClcbn1cblxuZXhwb3J0IGRlZmF1bHQgR3JpZFxuIl19 */")
+  }, ___EmotionJSX("div", {
+    className: "grid-inner-container",
+    css: /*#__PURE__*/css("display:grid;margin:0 auto;grid-template-columns:repeat(12, 1fr);max-width:1200px;grid-row-gap:0;grid-column-gap:", gap === 's' ? theme.spacing.s : theme.spacing.l, ";padding-top:", getSize(top), ";padding-bottom:", getSize(bottom), ";", media.lessThanEqual('xl')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n              max-width: unset;\n              margin-left: 40px;\n              margin-right: 40px;\n            "]))), " ", media.lessThanEqual('m')(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n              margin-left: 0;\n              margin-right: 0;\n              grid-column-gap: ", ";\n            "])), theme.spacing.s), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:Grid;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9ncmlkL0dyaWQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNDa0IiLCJmaWxlIjoiLi4vLi4vc3JjL2dyaWQvR3JpZC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgUmVhY3ROb2RlIH0gZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBtZWRpYSwgdGhlbWUgfSBmcm9tICdAZGZkcy11aS90aGVtZSdcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IGN4IGZyb20gJ2NsYXNzbmFtZXMnXG5cbmV4cG9ydCB0eXBlIEdyaWRQcm9wcyA9IHtcbiAgY2hpbGRyZW46IFJlYWN0Tm9kZVxuICBnYXA/OiAncycgfCAnbCdcbiAgc3VyZmFjZT86ICdpbnZlcnRlZCcgfCAnZGFyaycgfCAndHJhbnNwYXJlbnQnXG4gIHRvcD86ICdzJyB8ICdsJ1xuICBib3R0b20/OiAncycgfCAnbCdcbiAgY2xhc3NOYW1lPzogc3RyaW5nXG59XG5cbmV4cG9ydCBjb25zdCBHcmlkID0gKHsgZ2FwLCBzdXJmYWNlLCB0b3AsIGJvdHRvbSwgY2hpbGRyZW4sIGNsYXNzTmFtZSB9OiBHcmlkUHJvcHMpID0+IHtcbiAgY29uc3QgZ2V0U3VyZmFjZSA9ICgpID0+IHtcbiAgICBpZiAoc3VyZmFjZSA9PT0gJ2RhcmsnKSByZXR1cm4gdGhlbWUuY29sb3JzLnN1cmZhY2Uuc2Vjb25kYXJ5XG4gICAgaWYgKHN1cmZhY2UgPT09ICdpbnZlcnRlZCcpIHJldHVybiB0aGVtZS5jb2xvcnMuc3VyZmFjZS50ZXJ0aWFyeVxuICAgIGlmIChzdXJmYWNlID09PSAndHJhbnNwYXJlbnQnKSByZXR1cm4gJ3JnYmEoMCwwLDAsMCknXG4gICAgcmV0dXJuIHRoZW1lLmNvbG9ycy5zdXJmYWNlLnByaW1hcnlcbiAgfVxuXG4gIGNvbnN0IGdldFNpemUgPSAoc2l6ZT86IHN0cmluZykgPT4ge1xuICAgIGlmIChzaXplICYmIHNpemUgPT09ICdzJykgcmV0dXJuIHRoZW1lLnNwYWNpbmcuc1xuICAgIGlmIChzaXplICYmIHNpemUgPT09ICdsJykgcmV0dXJuIHRoZW1lLnNwYWNpbmcubFxuICAgIHJldHVybiAwXG4gIH1cblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8ZGl2XG4gICAgICAgIGNsYXNzTmFtZT17Y3goJ2dyaWQtY29udGFpbmVyJywgY2xhc3NOYW1lKX1cbiAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHtnZXRTdXJmYWNlKCl9O1xuICAgICAgICBgfVxuICAgICAgPlxuICAgICAgICA8ZGl2XG4gICAgICAgICAgY2xhc3NOYW1lPVwiZ3JpZC1pbm5lci1jb250YWluZXJcIlxuICAgICAgICAgIGNzcz17Y3NzYFxuICAgICAgICAgICAgZGlzcGxheTogZ3JpZDtcbiAgICAgICAgICAgIG1hcmdpbjogMCBhdXRvOyAvKiBjZW50ZXIgaW4gdGhlIHZpZXdwb3J0ICovXG4gICAgICAgICAgICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IHJlcGVhdCgxMiwgMWZyKTtcbiAgICAgICAgICAgIG1heC13aWR0aDogMTIwMHB4O1xuICAgICAgICAgICAgZ3JpZC1yb3ctZ2FwOiAwO1xuICAgICAgICAgICAgZ3JpZC1jb2x1bW4tZ2FwOiAke2dhcCA9PT0gJ3MnID8gdGhlbWUuc3BhY2luZy5zIDogdGhlbWUuc3BhY2luZy5sfTtcbiAgICAgICAgICAgIHBhZGRpbmctdG9wOiAke2dldFNpemUodG9wKX07XG4gICAgICAgICAgICBwYWRkaW5nLWJvdHRvbTogJHtnZXRTaXplKGJvdHRvbSl9O1xuXG4gICAgICAgICAgICAke21lZGlhLmxlc3NUaGFuRXF1YWwoJ3hsJylgXG4gICAgICAgICAgICAgIG1heC13aWR0aDogdW5zZXQ7XG4gICAgICAgICAgICAgIG1hcmdpbi1sZWZ0OiA0MHB4O1xuICAgICAgICAgICAgICBtYXJnaW4tcmlnaHQ6IDQwcHg7XG4gICAgICAgICAgICBgfVxuXG4gICAgICAgICAgICAke21lZGlhLmxlc3NUaGFuRXF1YWwoJ20nKWBcbiAgICAgICAgICAgICAgbWFyZ2luLWxlZnQ6IDA7XG4gICAgICAgICAgICAgIG1hcmdpbi1yaWdodDogMDtcbiAgICAgICAgICAgICAgZ3JpZC1jb2x1bW4tZ2FwOiAke3RoZW1lLnNwYWNpbmcuc307XG4gICAgICAgICAgICBgfVxuICAgICAgICAgIGB9XG4gICAgICAgID5cbiAgICAgICAgICB7Y2hpbGRyZW59XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9kaXY+XG4gICAgPC8+XG4gIClcbn1cblxuZXhwb3J0IGRlZmF1bHQgR3JpZFxuIl19 */")
+  }, children)));
+};
+export default Grid;

package/grid/GridItem.d.ts

@@ -0,0 +1,14 @@
+import React, { ReactNode } from 'react';
+export declare type GridItemProps = {
+    children: ReactNode;
+    small?: 6 | 12;
+    medium?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+    large?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+    xlarge?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+    /**
+     * Class name to be assigned to the component
+     */
+    className?: string;
+};
+export declare const GridItem: (props: GridItemProps) => React.JSX.Element;
+export default GridItem;

package/grid/GridItem.js

@@ -0,0 +1,18 @@
+var _templateObject, _templateObject2, _templateObject3;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import React from 'react';
+import { css } from '@emotion/react';
+import { media } from '@dfds-ui/theme';
+import cx from 'classnames';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var GridItem = function GridItem(props) {
+  var smallWidth = props.small || 12;
+  var mediumWidth = props.medium || smallWidth;
+  var largeWidth = props.large || mediumWidth;
+  var xLargeWidth = props.xlarge || largeWidth;
+  return ___EmotionJSX("div", {
+    css: /*#__PURE__*/css("grid-column:span ", smallWidth, ";", media.greaterThan('m')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          grid-column: span ", ";\n        "])), mediumWidth), " ", media.greaterThan('l')(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          grid-column: span ", ";\n        "])), largeWidth), " ", media.greaterThan('xl')(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          grid-column: span ", ";\n        "])), xLargeWidth), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:GridItem;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9ncmlkL0dyaWRJdGVtLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF5QmMiLCJmaWxlIjoiLi4vLi4vc3JjL2dyaWQvR3JpZEl0ZW0udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IFJlYWN0Tm9kZSB9IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgeyBtZWRpYSB9IGZyb20gJ0BkZmRzLXVpL3RoZW1lJ1xuaW1wb3J0IGN4IGZyb20gJ2NsYXNzbmFtZXMnXG5cbmV4cG9ydCB0eXBlIEdyaWRJdGVtUHJvcHMgPSB7XG4gIGNoaWxkcmVuOiBSZWFjdE5vZGVcbiAgc21hbGw/OiA2IHwgMTJcbiAgbWVkaXVtPzogMSB8IDIgfCAzIHwgNCB8IDUgfCA2IHwgNyB8IDggfCA5IHwgMTAgfCAxMSB8IDEyXG4gIGxhcmdlPzogMSB8IDIgfCAzIHwgNCB8IDUgfCA2IHwgNyB8IDggfCA5IHwgMTAgfCAxMSB8IDEyXG4gIHhsYXJnZT86IDEgfCAyIHwgMyB8IDQgfCA1IHwgNiB8IDcgfCA4IHwgOSB8IDEwIHwgMTEgfCAxMlxuICAvKipcbiAgICogQ2xhc3MgbmFtZSB0byBiZSBhc3NpZ25lZCB0byB0aGUgY29tcG9uZW50XG4gICAqL1xuICBjbGFzc05hbWU/OiBzdHJpbmdcbn1cblxuZXhwb3J0IGNvbnN0IEdyaWRJdGVtID0gKHByb3BzOiBHcmlkSXRlbVByb3BzKSA9PiB7XG4gIGNvbnN0IHNtYWxsV2lkdGggPSBwcm9wcy5zbWFsbCB8fCAxMlxuICBjb25zdCBtZWRpdW1XaWR0aCA9IHByb3BzLm1lZGl1bSB8fCBzbWFsbFdpZHRoXG4gIGNvbnN0IGxhcmdlV2lkdGggPSBwcm9wcy5sYXJnZSB8fCBtZWRpdW1XaWR0aFxuICBjb25zdCB4TGFyZ2VXaWR0aCA9IHByb3BzLnhsYXJnZSB8fCBsYXJnZVdpZHRoXG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2XG4gICAgICBjc3M9e2Nzc2BcbiAgICAgICAgZ3JpZC1jb2x1bW46IHNwYW4gJHtzbWFsbFdpZHRofTtcbiAgICAgICAgJHttZWRpYS5ncmVhdGVyVGhhbignbScpYFxuICAgICAgICAgIGdyaWQtY29sdW1uOiBzcGFuICR7bWVkaXVtV2lkdGh9O1xuICAgICAgICBgfVxuICAgICAgICAke21lZGlhLmdyZWF0ZXJUaGFuKCdsJylgXG4gICAgICAgICAgZ3JpZC1jb2x1bW46IHNwYW4gJHtsYXJnZVdpZHRofTtcbiAgICAgICAgYH1cbiAgICAgICAgJHttZWRpYS5ncmVhdGVyVGhhbigneGwnKWBcbiAgICAgICAgICBncmlkLWNvbHVtbjogc3BhbiAke3hMYXJnZVdpZHRofTtcbiAgICAgICAgYH1cbiAgICAgIGB9XG4gICAgICBjbGFzc05hbWU9e2N4KCdncmlkLWl0ZW0nLCBwcm9wcy5jbGFzc05hbWUpfVxuICAgID5cbiAgICAgIHtwcm9wcy5jaGlsZHJlbn1cbiAgICA8L2Rpdj5cbiAgKVxufVxuXG5leHBvcnQgZGVmYXVsdCBHcmlkSXRlbVxuIl19 */"),
+    className: cx('grid-item', props.className)
+  }, props.children);
+};
+export default GridItem;

package/grid/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Grid';
+export * from './GridItem';

package/grid/index.js

@@ -0,0 +1,2 @@
+export * from './Grid';
+export * from './GridItem';

package/index.d.ts

@@ -0,0 +1 @@
+export * from './grid';

package/index.js

@@ -0,0 +1 @@
+export * from './grid';

package/package.json

@@ -3,7 +3,7 @@
   "description": "Grid components",
   "license": "MIT",
   "private": false,
-  "version": "2.2.0-alpha.8d87a90d",
+  "version": "2.2.0-alpha.c35ceba3",
   "sideEffects": false,
   "main": "./cjs/index.js",
   "module": "./index.js",
@@ -12,17 +12,17 @@
   "peerDependencies": {
     "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.5",
-    "react": ">= 17.0.2",
-    "react-dom": ">= 17.0.2"
+    "react": ">= 18.3.1",
+    "react-dom": ">= 18.3.1"
   },
   "dependencies": {
-    "@dfds-ui/colors": "2.2.0-alpha.8d87a90d",
-    "@dfds-ui/icons": "2.2.0-alpha.8d87a90d",
-    "@dfds-ui/react-components": "2.2.0-alpha.8d87a90d",
-    "@dfds-ui/theme": "2.2.0-alpha.8d87a90d",
+    "@dfds-ui/colors": "2.2.0-alpha.c35ceba3",
+    "@dfds-ui/icons": "2.2.0-alpha.c35ceba3",
+    "@dfds-ui/react-components": "2.2.0-alpha.c35ceba3",
+    "@dfds-ui/theme": "2.2.0-alpha.c35ceba3",
     "classnames": "^2.3.2"
   },
-  "gitHead": "8d87a90d4501dae81cac37ab3b4d9f13a68e2ab3",
+  "gitHead": "c35ceba322ca61db55c51ea1114949091cfc9f7f",
   "publishConfig": {
     "access": "public"
   }