@dfds-ui/react-components 0.9.7-alpha.15e38892 → 0.9.7-alpha.1c844f2a

package/cjs/stepper/Stepper.js

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.useStepperContext = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _core = require("@material-ui/core");
+
+var _react2 = require("@emotion/react");
+
+const _excluded = ["children", "initialStep"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+const StepperContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+
+const useStepperContext = () => {
+  const context = (0, _react.useContext)(StepperContext);
+
+  if (context === undefined) {
+    throw new Error('useStepperContext must be used within a StepperProvider');
+  }
+
+  return context;
+};
+
+exports.useStepperContext = useStepperContext;
+
+const StepperProvider = _ref => {
+  let children = _ref.children,
+      initialStep = _ref.initialStep,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  const _useState = (0, _react.useState)([]),
+        _useState2 = _slicedToArray(_useState, 2),
+        steps = _useState2[0],
+        setSteps = _useState2[1];
+
+  const _useState3 = (0, _react.useState)(initialStep || 0),
+        _useState4 = _slicedToArray(_useState3, 2),
+        activeIndex = _useState4[0],
+        setActiveIndex = _useState4[1];
+
+  const activeStep = steps[activeIndex];
+  const setStep = (0, _react.useCallback)(newStep => setSteps(prevSteps => [...prevSteps, newStep]), []);
+  const setNext = (0, _react.useCallback)(() => setActiveIndex(prevIndex => prevIndex + 1), []);
+  const setBack = (0, _react.useCallback)(() => setActiveIndex(prevIndex => prevIndex - 1), []);
+  const setReset = (0, _react.useCallback)(() => setActiveIndex(0), []);
+  return (0, _react2.jsx)(StepperContext.Provider, {
+    value: {
+      setStep,
+      activeStep,
+      setNext,
+      setBack,
+      setReset,
+      setActiveIndex
+    }
+  }, (0, _react2.jsx)(_core.Stepper, _extends({
+    style: {
+      padding: 0
+    }
+  }, props, {
+    connector: (0, _react2.jsx)(_react.default.Fragment, null),
+    orientation: "vertical",
+    activeStep: activeIndex
+  }), children));
+};
+
+var _default = /*#__PURE__*/(0, _react.memo)(StepperProvider);
+
+exports.default = _default;

package/cjs/stepper/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Step } from './Step';
+export { default as Stepper, useStepperContext } from './Stepper';

package/cjs/stepper/index.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Step", {
+  enumerable: true,
+  get: function get() {
+    return _Step.default;
+  }
+});
+Object.defineProperty(exports, "Stepper", {
+  enumerable: true,
+  get: function get() {
+    return _Stepper.default;
+  }
+});
+Object.defineProperty(exports, "useStepperContext", {
+  enumerable: true,
+  get: function get() {
+    return _Stepper.useStepperContext;
+  }
+});
+
+var _Step = _interopRequireDefault(require("./Step"));
+
+var _Stepper = _interopRequireWildcard(require("./Stepper"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/cjs/styles/index.d.ts

@@ -0,0 +1,3 @@
+export { default as legacyMedia, legacyGenerateMedia } from './media';
+export { default as theme } from './theme';
+export { visuallyHidden } from './style-helpers';

package/cjs/styles/index.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "legacyMedia", {
+  enumerable: true,
+  get: function get() {
+    return _media.default;
+  }
+});
+Object.defineProperty(exports, "legacyGenerateMedia", {
+  enumerable: true,
+  get: function get() {
+    return _media.legacyGenerateMedia;
+  }
+});
+Object.defineProperty(exports, "theme", {
+  enumerable: true,
+  get: function get() {
+    return _theme.default;
+  }
+});
+Object.defineProperty(exports, "visuallyHidden", {
+  enumerable: true,
+  get: function get() {
+    return _styleHelpers.visuallyHidden;
+  }
+});
+
+var _media = _interopRequireWildcard(require("./media"));
+
+var _theme = _interopRequireDefault(require("./theme"));
+
+var _styleHelpers = require("./style-helpers");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/cjs/styles/media.d.ts

@@ -0,0 +1,21 @@
+declare const defaultBreakPoints: {
+    xl: number;
+    lg: number;
+    md: number;
+    sm: number;
+    xs: number;
+};
+declare type BreakPoint = keyof typeof defaultBreakPoints | number;
+export declare function legacyGenerateMedia(breakPoints: typeof defaultBreakPoints): {
+    lt: (breakPoint: BreakPoint) => string;
+    gt: (breakPoint: BreakPoint) => string;
+    bt: (firstBreakpoint: BreakPoint, secondBreakpoint: BreakPoint) => string;
+    tablet: () => string;
+};
+export declare const legacyMedia: {
+    lt: (breakPoint: BreakPoint) => string;
+    gt: (breakPoint: BreakPoint) => string;
+    bt: (firstBreakpoint: BreakPoint, secondBreakpoint: BreakPoint) => string;
+    tablet: () => string;
+};
+export default legacyMedia;

package/cjs/styles/media.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.legacyGenerateMedia = legacyGenerateMedia;
+exports.default = exports.legacyMedia = void 0;
+// ***
+// DEPRECATED use media from ./media
+// ***
+// breakpoint used in DFDS-DIRECT
+const defaultBreakPoints = {
+  xl: 1260,
+  lg: 992,
+  md: 768,
+  sm: 576,
+  xs: 575
+};
+
+function legacyGenerateMedia(breakPoints) {
+  const toInt = breakPoint => {
+    return typeof breakPoint === 'number' ? breakPoint : breakPoints[breakPoint];
+  };
+
+  const lessThan = breakPoint => `
+    @media (max-width: ${toInt(breakPoint) - 1}px)`;
+
+  const greaterThan = breakPoint => `
+    @media (min-width: ${toInt(breakPoint) + 1}px)`;
+
+  const between = (firstBreakpoint, secondBreakpoint) => `
+    @media (min-width: ${toInt(firstBreakpoint)}px) and (max-width: ${toInt(secondBreakpoint)}px)`;
+
+  const tablet = () => `
+   @media (min-width: ${breakPoints.sm + 1}px) and (max-width: ${breakPoints.md}px)`;
+
+  return {
+    lt: lessThan,
+    gt: greaterThan,
+    bt: between,
+    tablet
+  };
+}
+
+const legacyMedia = legacyGenerateMedia(defaultBreakPoints);
+exports.legacyMedia = legacyMedia;
+var _default = legacyMedia;
+exports.default = _default;

package/cjs/styles/rem.d.ts

@@ -0,0 +1 @@
+export declare const rem: (targetPixelValue: number, base?: number) => string;

package/cjs/styles/rem.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.rem = void 0;
+
+// replacement for the rem function from polished
+const rem = (targetPixelValue, base = 16) => {
+  return `${targetPixelValue / base}rem`;
+};
+
+exports.rem = rem;

package/cjs/styles/style-helpers.d.ts

@@ -0,0 +1 @@
+export declare const visuallyHidden: () => import("@emotion/react").SerializedStyles;

package/cjs/styles/style-helpers.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.visuallyHidden = void 0;
+
+var _react = require("@emotion/react");
+
+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)."; }
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "2jmk7x",
+  styles: "border:0;clip:rect(0 0 0 0);height:auto;margin:0;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap"
+} : {
+  name: "1nihf9n-visuallyHidden",
+  styles: "border:0;clip:rect(0 0 0 0);height:auto;margin:0;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;label:visuallyHidden;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9zdHlsZXMvc3R5bGUtaGVscGVycy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHdUMiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL3N0eWxlcy9zdHlsZS1oZWxwZXJzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5cbi8vIGh0dHBzOi8vemVsbHdrLmNvbS9ibG9nL2hpZGUtY29udGVudC1hY2Nlc3NpYmx5L1xuZXhwb3J0IGNvbnN0IHZpc3VhbGx5SGlkZGVuID0gKCkgPT4gY3NzYFxuICBib3JkZXI6IDA7XG4gIGNsaXA6IHJlY3QoMCAwIDAgMCk7XG4gIGhlaWdodDogYXV0bztcbiAgbWFyZ2luOiAwO1xuICBvdmVyZmxvdzogaGlkZGVuO1xuICBwYWRkaW5nOiAwO1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHdpZHRoOiAxcHg7XG4gIHdoaXRlLXNwYWNlOiBub3dyYXA7XG5gXG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+// https://zellwk.com/blog/hide-content-accessibly/
+const visuallyHidden = () => _ref;
+
+exports.visuallyHidden = visuallyHidden;

package/cjs/styles/theme.d.ts

@@ -0,0 +1,39 @@
+export declare const theme: {
+    colors: {
+        yesGreen: string;
+        cautionAmber: string;
+        noRed: string;
+        linkBlue: string;
+        linkHover: string;
+        actionBlue: string;
+        actionHover: string;
+        actionMedium: string;
+        actionLight: string;
+        primaryOrange: string;
+        primaryHover: string;
+        uiEnabled: string;
+        uiDisabled: string;
+        textGrey: string;
+        textMedium: string;
+        textLight: string;
+        groupBlue: string;
+        groupMedium: string;
+        groupLight: string;
+        backgroundGrey: string;
+        white: string;
+        whiteHover: string;
+    };
+    fontFamily: string;
+    spacing: {
+        xxs: string;
+        xs: string;
+        s: string;
+        m: string;
+        l: string;
+        xl: string;
+        xxl: string;
+    };
+    uiRoundness: string;
+};
+export declare type ThemeInterface = typeof theme;
+export default theme;

package/cjs/styles/theme.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.theme = void 0;
+
+var _colors = require("@dfds-ui/colors");
+
+var _spacing = require("@dfds-ui/spacing");
+
+const theme = {
+  colors: _colors.colors,
+  fontFamily: 'DFDS, Verdana, system-ui, Arial, "Helvetica Neue", Helvetica, sans-serif',
+  spacing: _spacing.spacing,
+  uiRoundness: '2px'
+};
+exports.theme = theme;
+var _default = theme;
+exports.default = _default;

package/cjs/surface/Surface.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { theme } from '@dfds-ui/theme';
+export declare type SurfaceType = keyof typeof theme.colors.surface;
+export declare type SurfaceContextType = {
+    surface: SurfaceType;
+    backgroundColor: string;
+    textColors: {
+        primary: string;
+        secondary: string;
+        disabled: string;
+    };
+};
+export declare function getTextColors(surface: SurfaceType): {
+    primary: string;
+    secondary: string;
+    disabled: string;
+};
+export declare function getBackgroundColor(surface: SurfaceType): string;
+export declare const SurfaceContext: React.Context<SurfaceContextType | undefined>;
+export declare const SurfaceProvider: React.FC<{
+    surface: SurfaceType;
+}>;
+export declare function MaybeSurfaceProvider({ surface, ...rest }: React.PropsWithChildren<{
+    surface?: SurfaceType;
+}>): JSX.Element;
+export declare const useSurfaceContext: (surface?: "main" | "dark" | "primary" | "secondary" | "inverted" | "tertiary" | undefined) => SurfaceContextType;
+export declare const Surface: React.FC<{
+    surface: SurfaceType;
+    className?: string;
+}>;

package/cjs/surface/Surface.js

@@ -0,0 +1,113 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTextColors = getTextColors;
+exports.getBackgroundColor = getBackgroundColor;
+exports.MaybeSurfaceProvider = MaybeSurfaceProvider;
+exports.Surface = exports.useSurfaceContext = exports.SurfaceProvider = exports.SurfaceContext = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _theme = require("@dfds-ui/theme");
+
+var _react2 = require("@emotion/react");
+
+const _excluded = ["surface"],
+      _excluded2 = ["surface", "children"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function createSurfaceContextValue(surface) {
+  return {
+    surface,
+    backgroundColor: getBackgroundColor(surface),
+    textColors: getTextColors(surface)
+  };
+}
+
+function getTextColors(surface) {
+  if (surface === 'inverted') {
+    return _theme.theme.colors.text.light;
+  }
+
+  return _theme.theme.colors.text.dark;
+}
+
+function getBackgroundColor(surface) {
+  return _theme.theme.colors.surface[surface];
+}
+
+const SurfaceContext = /*#__PURE__*/_react.default.createContext(undefined);
+
+exports.SurfaceContext = SurfaceContext;
+
+const SurfaceProvider = ({
+  children,
+  surface
+}) => (0, _react2.jsx)(SurfaceContext.Provider, {
+  value: {
+    surface,
+    backgroundColor: getBackgroundColor(surface),
+    textColors: getTextColors(surface)
+  }
+}, children);
+
+exports.SurfaceProvider = SurfaceProvider;
+
+function MaybeSurfaceProvider(_ref) {
+  let surface = _ref.surface,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  return surface ? (0, _react2.jsx)(SurfaceProvider, _extends({
+    surface: surface
+  }, rest)) : (0, _react2.jsx)(_react.Fragment, rest);
+}
+
+const useSurfaceContext = surface => {
+  const context = _react.default.useContext(SurfaceContext); // if the consumer of the hook provides it's own surface we return that
+
+
+  if (surface !== undefined) {
+    return createSurfaceContextValue(surface);
+  }
+
+  if (context === undefined) {
+    return _objectSpread(_objectSpread({}, createSurfaceContextValue('main')), {}, {
+      backgroundColor: 'transparent'
+    });
+  }
+
+  return context;
+};
+
+exports.useSurfaceContext = useSurfaceContext;
+
+const Surface = _ref2 => {
+  let surface = _ref2.surface,
+      children = _ref2.children,
+      rest = _objectWithoutProperties(_ref2, _excluded2);
+
+  return (0, _react2.jsx)(SurfaceProvider, {
+    surface: surface
+  }, (0, _react2.jsx)("div", _extends({
+    css: /*#__PURE__*/(0, _react2.css)("background-color:", getBackgroundColor(surface), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:Surface;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9zdXJmYWNlL1N1cmZhY2UudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlFZ0IiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL3N1cmZhY2UvU3VyZmFjZS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgRnJhZ21lbnQgfSBmcm9tICdyZWFjdCdcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSAnQGRmZHMtdWkvdGhlbWUnXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuZXhwb3J0IHR5cGUgU3VyZmFjZVR5cGUgPSBrZXlvZiB0eXBlb2YgdGhlbWUuY29sb3JzLnN1cmZhY2VcblxuZXhwb3J0IHR5cGUgU3VyZmFjZUNvbnRleHRUeXBlID0ge1xuICBzdXJmYWNlOiBTdXJmYWNlVHlwZVxuICBiYWNrZ3JvdW5kQ29sb3I6IHN0cmluZ1xuICB0ZXh0Q29sb3JzOiB7XG4gICAgcHJpbWFyeTogc3RyaW5nXG4gICAgc2Vjb25kYXJ5OiBzdHJpbmdcbiAgICBkaXNhYmxlZDogc3RyaW5nXG4gIH1cbn1cblxuZnVuY3Rpb24gY3JlYXRlU3VyZmFjZUNvbnRleHRWYWx1ZShzdXJmYWNlOiBTdXJmYWNlVHlwZSkge1xuICByZXR1cm4ge1xuICAgIHN1cmZhY2UsXG4gICAgYmFja2dyb3VuZENvbG9yOiBnZXRCYWNrZ3JvdW5kQ29sb3Ioc3VyZmFjZSksXG4gICAgdGV4dENvbG9yczogZ2V0VGV4dENvbG9ycyhzdXJmYWNlKSxcbiAgfVxufVxuXG5leHBvcnQgZnVuY3Rpb24gZ2V0VGV4dENvbG9ycyhzdXJmYWNlOiBTdXJmYWNlVHlwZSkge1xuICBpZiAoc3VyZmFjZSA9PT0gJ2ludmVydGVkJykge1xuICAgIHJldHVybiB0aGVtZS5jb2xvcnMudGV4dC5saWdodFxuICB9XG4gIHJldHVybiB0aGVtZS5jb2xvcnMudGV4dC5kYXJrXG59XG5cbmV4cG9ydCBmdW5jdGlvbiBnZXRCYWNrZ3JvdW5kQ29sb3Ioc3VyZmFjZTogU3VyZmFjZVR5cGUpIHtcbiAgcmV0dXJuIHRoZW1lLmNvbG9ycy5zdXJmYWNlW3N1cmZhY2VdXG59XG5cbmV4cG9ydCBjb25zdCBTdXJmYWNlQ29udGV4dCA9IFJlYWN0LmNyZWF0ZUNvbnRleHQ8U3VyZmFjZUNvbnRleHRUeXBlIHwgdW5kZWZpbmVkPih1bmRlZmluZWQpXG5cbmV4cG9ydCBjb25zdCBTdXJmYWNlUHJvdmlkZXI6IFJlYWN0LkZDPHsgc3VyZmFjZTogU3VyZmFjZVR5cGUgfT4gPSAoeyBjaGlsZHJlbiwgc3VyZmFjZSB9KSA9PiAoXG4gIDxTdXJmYWNlQ29udGV4dC5Qcm92aWRlclxuICAgIHZhbHVlPXt7IHN1cmZhY2UsIGJhY2tncm91bmRDb2xvcjogZ2V0QmFja2dyb3VuZENvbG9yKHN1cmZhY2UpLCB0ZXh0Q29sb3JzOiBnZXRUZXh0Q29sb3JzKHN1cmZhY2UpIH19XG4gID5cbiAgICB7Y2hpbGRyZW59XG4gIDwvU3VyZmFjZUNvbnRleHQuUHJvdmlkZXI+XG4pXG5cbmV4cG9ydCBmdW5jdGlvbiBNYXliZVN1cmZhY2VQcm92aWRlcih7IHN1cmZhY2UsIC4uLnJlc3QgfTogUmVhY3QuUHJvcHNXaXRoQ2hpbGRyZW48eyBzdXJmYWNlPzogU3VyZmFjZVR5cGUgfT4pIHtcbiAgcmV0dXJuIHN1cmZhY2UgPyA8U3VyZmFjZVByb3ZpZGVyIHN1cmZhY2U9e3N1cmZhY2V9IHsuLi5yZXN0fSAvPiA6IDxGcmFnbWVudCB7Li4ucmVzdH0gLz5cbn1cblxuZXhwb3J0IGNvbnN0IHVzZVN1cmZhY2VDb250ZXh0ID0gKHN1cmZhY2U/OiBTdXJmYWNlVHlwZSkgPT4ge1xuICBjb25zdCBjb250ZXh0ID0gUmVhY3QudXNlQ29udGV4dChTdXJmYWNlQ29udGV4dClcbiAgLy8gaWYgdGhlIGNvbnN1bWVyIG9mIHRoZSBob29rIHByb3ZpZGVzIGl0J3Mgb3duIHN1cmZhY2Ugd2UgcmV0dXJuIHRoYXRcbiAgaWYgKHN1cmZhY2UgIT09IHVuZGVmaW5lZCkge1xuICAgIHJldHVybiBjcmVhdGVTdXJmYWNlQ29udGV4dFZhbHVlKHN1cmZhY2UpXG4gIH1cbiAgaWYgKGNvbnRleHQgPT09IHVuZGVmaW5lZCkge1xuICAgIHJldHVybiB7IC4uLmNyZWF0ZVN1cmZhY2VDb250ZXh0VmFsdWUoJ21haW4nKSwgYmFja2dyb3VuZENvbG9yOiAndHJhbnNwYXJlbnQnIH1cbiAgfVxuICByZXR1cm4gY29udGV4dFxufVxuXG5leHBvcnQgY29uc3QgU3VyZmFjZTogUmVhY3QuRkM8eyBzdXJmYWNlOiBTdXJmYWNlVHlwZTsgY2xhc3NOYW1lPzogc3RyaW5nIH0+ID0gKHsgc3VyZmFjZSwgY2hpbGRyZW4sIC4uLnJlc3QgfSkgPT4ge1xuICByZXR1cm4gKFxuICAgIDxTdXJmYWNlUHJvdmlkZXIgc3VyZmFjZT17c3VyZmFjZX0+XG4gICAgICA8ZGl2XG4gICAgICAgIGNzcz17Y3NzYFxuICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7Z2V0QmFja2dyb3VuZENvbG9yKHN1cmZhY2UpfTtcbiAgICAgICAgYH1cbiAgICAgICAgey4uLnJlc3R9XG4gICAgICA+XG4gICAgICAgIHtjaGlsZHJlbn1cbiAgICAgIDwvZGl2PlxuICAgIDwvU3VyZmFjZVByb3ZpZGVyPlxuICApXG59XG4iXX0= */")
+  }, rest), children));
+};
+
+exports.Surface = Surface;

package/cjs/surface/index.d.ts

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

package/cjs/surface/index.js

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

package/cjs/tab/Tab.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export declare type Index = number | string;
+export declare type TabProps = {
+    active?: boolean;
+    disabled?: boolean;
+    transparent?: boolean;
+    index: Index;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+};
+declare const Tab: React.FC<TabProps>;
+export default Tab;