glints-aries 4.1.3 → 4.1.5

package/lib/@next/Tooltip/positionResolver.js

@@ -0,0 +1,189 @@
+"use strict";
+
+exports.__esModule = true;
+exports.topPositionResolver = exports.rightPositionResolver = exports.leftPositionResolver = exports.bottomPositionResolver = void 0;
+var _positionResolverHelper = require("./positionResolverHelper");
+var topPositionResolver = function topPositionResolver(tooltipRect, elRect, preferredAligmentFuncs) {
+  var horizontalPreferredAligmentFuncs = preferredAligmentFuncs;
+  var verticalPreferredAligmentFuncs = [_positionResolverHelper.canAlignMiddle, _positionResolverHelper.canAlignTop, _positionResolverHelper.canAlignBottom];
+  if ((0, _positionResolverHelper.canStayOnTop)(tooltipRect)) {
+    var alignResult = (0, _positionResolverHelper.tryCalculateAligment)({
+      preferredAlignmentFuncs: horizontalPreferredAligmentFuncs,
+      tooltipRect: tooltipRect,
+      elRect: elRect
+    });
+    if (alignResult) {
+      return "top-" + alignResult;
+    }
+  }
+  if ((0, _positionResolverHelper.canFitOnTheLeft)(tooltipRect, elRect, _positionResolverHelper.horizontalBuffer)) {
+    var _alignResult = (0, _positionResolverHelper.tryCalculateAligment)({
+      preferredAlignmentFuncs: verticalPreferredAligmentFuncs,
+      tooltipRect: tooltipRect,
+      elRect: elRect
+    });
+    if (_alignResult) {
+      return "left-" + _alignResult;
+    }
+  }
+  if ((0, _positionResolverHelper.canFitOnTheRight)(tooltipRect, elRect, _positionResolverHelper.horizontalBuffer)) {
+    var _alignResult2 = (0, _positionResolverHelper.tryCalculateAligment)({
+      preferredAlignmentFuncs: verticalPreferredAligmentFuncs,
+      tooltipRect: tooltipRect,
+      elRect: elRect
+    });
+    if (_alignResult2) {
+      return "right-" + _alignResult2;
+    }
+  }
+  if ((0, _positionResolverHelper.canFitBelow)(tooltipRect, elRect, _positionResolverHelper.verticalBuffer)) {
+    var _alignResult3 = (0, _positionResolverHelper.tryCalculateAligment)({
+      preferredAlignmentFuncs: horizontalPreferredAligmentFuncs,
+      tooltipRect: tooltipRect,
+      elRect: elRect
+    });
+    if (_alignResult3) {
+      return "bottom-" + _alignResult3;
+    }
+  }
+  return 'top-center';
+};
+exports.topPositionResolver = topPositionResolver;
+var bottomPositionResolver = function bottomPositionResolver(tooltipRect, elRect, preferredAligmentFuncs) {
+  var horizontalPreferredAligmentFuncs = preferredAligmentFuncs;
+  var verticalPreferredAligmentFuncs = [_positionResolverHelper.canAlignMiddle, _positionResolverHelper.canAlignTop, _positionResolverHelper.canAlignBottom];
+  if ((0, _positionResolverHelper.canStayOnBottom)(tooltipRect)) {
+    var alignResult = (0, _positionResolverHelper.tryCalculateAligment)({
+      preferredAlignmentFuncs: horizontalPreferredAligmentFuncs,
+      tooltipRect: tooltipRect,
+      elRect: elRect
+    });
+    if (alignResult) {
+      return "bottom-" + alignResult;
+    }
+  }
+  if ((0, _positionResolverHelper.canFitOnTheLeft)(tooltipRect, elRect, _positionResolverHelper.horizontalBuffer)) {
+    var _alignResult4 = (0, _positionResolverHelper.tryCalculateAligment)({
+      preferredAlignmentFuncs: verticalPreferredAligmentFuncs,
+      tooltipRect: tooltipRect,
+      elRect: elRect
+    });
+    if (_alignResult4) {
+      return "left-" + _alignResult4;
+    }
+  }
+  if ((0, _positionResolverHelper.canFitOnTheRight)(tooltipRect, elRect, _positionResolverHelper.horizontalBuffer)) {
+    var _alignResult5 = (0, _positionResolverHelper.tryCalculateAligment)({
+      preferredAlignmentFuncs: verticalPreferredAligmentFuncs,
+      tooltipRect: tooltipRect,
+      elRect: elRect
+    });
+    if (_alignResult5) {
+      return "right-" + _alignResult5;
+    }
+  }
+  if ((0, _positionResolverHelper.canFitOnTheTop)(tooltipRect, elRect, _positionResolverHelper.verticalBuffer)) {
+    var _alignResult6 = (0, _positionResolverHelper.tryCalculateAligment)({
+      preferredAlignmentFuncs: horizontalPreferredAligmentFuncs,
+      tooltipRect: tooltipRect,
+      elRect: elRect
+    });
+    if (_alignResult6) {
+      return "top-" + _alignResult6;
+    }
+  }
+  return 'bottom-center';
+};
+exports.bottomPositionResolver = bottomPositionResolver;
+var leftPositionResolver = function leftPositionResolver(tooltipRect, elRect, preferredAligmentFuncs) {
+  var horizontalPreferredAligmentFuncs = [_positionResolverHelper.canAlignCenter, _positionResolverHelper.canAlignLeft, _positionResolverHelper.canAlignRight];
+  var verticalPreferredAligmentFuncs = preferredAligmentFuncs;
+  if ((0, _positionResolverHelper.canStayOnLeft)(tooltipRect)) {
+    var alignResult = (0, _positionResolverHelper.tryCalculateAligment)({
+      preferredAlignmentFuncs: verticalPreferredAligmentFuncs,
+      tooltipRect: tooltipRect,
+      elRect: elRect
+    });
+    if (alignResult) {
+      return "left-" + alignResult;
+    }
+  }
+  if ((0, _positionResolverHelper.canFitOnTheTop)(tooltipRect, elRect, _positionResolverHelper.horizontalBuffer)) {
+    var _alignResult7 = (0, _positionResolverHelper.tryCalculateAligment)({
+      preferredAlignmentFuncs: horizontalPreferredAligmentFuncs,
+      tooltipRect: tooltipRect,
+      elRect: elRect
+    });
+    if (_alignResult7) {
+      return "top-" + _alignResult7;
+    }
+  }
+  if ((0, _positionResolverHelper.canFitOnTheRight)(tooltipRect, elRect, _positionResolverHelper.horizontalBuffer)) {
+    var _alignResult8 = (0, _positionResolverHelper.tryCalculateAligment)({
+      preferredAlignmentFuncs: verticalPreferredAligmentFuncs,
+      tooltipRect: tooltipRect,
+      elRect: elRect
+    });
+    if (_alignResult8) {
+      return "right-" + _alignResult8;
+    }
+  }
+  if ((0, _positionResolverHelper.canFitBelow)(tooltipRect, elRect, _positionResolverHelper.verticalBuffer)) {
+    var _alignResult9 = (0, _positionResolverHelper.tryCalculateAligment)({
+      preferredAlignmentFuncs: horizontalPreferredAligmentFuncs,
+      tooltipRect: tooltipRect,
+      elRect: elRect
+    });
+    if (_alignResult9) {
+      return "bottom-" + _alignResult9;
+    }
+  }
+  return 'left-middle';
+};
+exports.leftPositionResolver = leftPositionResolver;
+var rightPositionResolver = function rightPositionResolver(tooltipRect, elRect, preferredAligmentFuncs) {
+  var horizontalPreferredAligmentFuncs = [_positionResolverHelper.canAlignCenter, _positionResolverHelper.canAlignLeft, _positionResolverHelper.canAlignRight];
+  var verticalPreferredAligmentFuncs = preferredAligmentFuncs;
+  if ((0, _positionResolverHelper.canStayOnRight)(tooltipRect)) {
+    var alignResult = (0, _positionResolverHelper.tryCalculateAligment)({
+      preferredAlignmentFuncs: verticalPreferredAligmentFuncs,
+      tooltipRect: tooltipRect,
+      elRect: elRect
+    });
+    if (alignResult) {
+      return "right-" + alignResult;
+    }
+  }
+  if ((0, _positionResolverHelper.canFitOnTheTop)(tooltipRect, elRect, _positionResolverHelper.horizontalBuffer)) {
+    var _alignResult10 = (0, _positionResolverHelper.tryCalculateAligment)({
+      preferredAlignmentFuncs: horizontalPreferredAligmentFuncs,
+      tooltipRect: tooltipRect,
+      elRect: elRect
+    });
+    if (_alignResult10) {
+      return "top-" + _alignResult10;
+    }
+  }
+  if ((0, _positionResolverHelper.canFitOnTheLeft)(tooltipRect, elRect, _positionResolverHelper.horizontalBuffer)) {
+    var _alignResult11 = (0, _positionResolverHelper.tryCalculateAligment)({
+      preferredAlignmentFuncs: verticalPreferredAligmentFuncs,
+      tooltipRect: tooltipRect,
+      elRect: elRect
+    });
+    if (_alignResult11) {
+      return "left-" + _alignResult11;
+    }
+  }
+  if ((0, _positionResolverHelper.canFitBelow)(tooltipRect, elRect, _positionResolverHelper.verticalBuffer)) {
+    var _alignResult12 = (0, _positionResolverHelper.tryCalculateAligment)({
+      preferredAlignmentFuncs: horizontalPreferredAligmentFuncs,
+      tooltipRect: tooltipRect,
+      elRect: elRect
+    });
+    if (_alignResult12) {
+      return "bottom-" + _alignResult12;
+    }
+  }
+  return 'right-middle';
+};
+exports.rightPositionResolver = rightPositionResolver;

package/lib/@next/Tooltip/positionResolverHelper.d.ts

@@ -0,0 +1,37 @@
+export declare const verticalBuffer = 8;
+export declare const horizontalBuffer = 8;
+export declare const nonCenterArrowSpace = 12;
+export declare type HorizontalAlignmentType = 'center' | 'left' | 'right';
+export declare type VerticalAlignmentType = 'middle' | 'top' | 'bottom';
+export declare type HorizontalAlignmentCalculatorResult = {
+    type: HorizontalAlignmentType;
+    result: boolean;
+};
+export declare type VerticalAlignmentCalculatorResult = {
+    type: VerticalAlignmentType;
+    result: boolean;
+};
+export declare type PreferredHorizontalAligmentFuncsType = (tooltipRect: DOMRect, elRect: DOMRect) => HorizontalAlignmentCalculatorResult;
+export declare type PreferredVerticalAligmentFuncsType = (tooltipRect: DOMRect, elRect: DOMRect) => VerticalAlignmentCalculatorResult;
+export declare type TryCalculateAlignmentArgs<T extends HorizontalAlignmentType | VerticalAlignmentType> = {
+    preferredAlignmentFuncs: T extends HorizontalAlignmentType ? PreferredHorizontalAligmentFuncsType[] : PreferredVerticalAligmentFuncsType[];
+    tooltipRect: DOMRect;
+    elRect: DOMRect;
+};
+export declare const getElementCenterPosition: (elRect: DOMRect) => number;
+export declare const getElementMiddlePosition: (elRect: DOMRect) => number;
+export declare const canFitOnTheTop: (tooltipRect: DOMRect, elRect: DOMRect, verticalMargin: number) => boolean;
+export declare const canFitBelow: (tooltipRect: DOMRect, elRect: DOMRect, verticalMargin: number) => boolean;
+export declare const canFitOnTheLeft: (tooltipRect: DOMRect, elRect: DOMRect, horizontalMargin: number) => boolean;
+export declare const canFitOnTheRight: (tooltipRect: DOMRect, elRect: DOMRect, horizontalMargin: number) => boolean;
+export declare const canAlignLeft: (tooltipRect: DOMRect, elRect: DOMRect) => HorizontalAlignmentCalculatorResult;
+export declare const canAlignRight: (tooltipRect: DOMRect, elRect: DOMRect) => HorizontalAlignmentCalculatorResult;
+export declare const canAlignCenter: (tooltipRect: DOMRect, elRect: DOMRect) => HorizontalAlignmentCalculatorResult;
+export declare const canAlignTop: (tooltipRect: DOMRect, elRect: DOMRect) => VerticalAlignmentCalculatorResult;
+export declare const canAlignBottom: (tooltipRect: DOMRect, elRect: DOMRect) => VerticalAlignmentCalculatorResult;
+export declare const canAlignMiddle: (tooltipRect: DOMRect, elRect: DOMRect) => VerticalAlignmentCalculatorResult;
+export declare const canStayOnTop: (tooltipRect: DOMRect) => boolean;
+export declare const canStayOnBottom: (tooltipRect: DOMRect) => boolean;
+export declare const canStayOnLeft: (tooltipRect: DOMRect) => boolean;
+export declare const canStayOnRight: (tooltipRect: DOMRect) => boolean;
+export declare const tryCalculateAligment: <T extends HorizontalAlignmentType | VerticalAlignmentType>(args: TryCalculateAlignmentArgs<T>) => HorizontalAlignmentType | VerticalAlignmentType;

package/lib/@next/Tooltip/positionResolverHelper.js

@@ -0,0 +1,130 @@
+"use strict";
+
+exports.__esModule = true;
+exports.verticalBuffer = exports.tryCalculateAligment = exports.nonCenterArrowSpace = exports.horizontalBuffer = exports.getElementMiddlePosition = exports.getElementCenterPosition = exports.canStayOnTop = exports.canStayOnRight = exports.canStayOnLeft = exports.canStayOnBottom = exports.canFitOnTheTop = exports.canFitOnTheRight = exports.canFitOnTheLeft = exports.canFitBelow = exports.canAlignTop = exports.canAlignRight = exports.canAlignMiddle = exports.canAlignLeft = exports.canAlignCenter = exports.canAlignBottom = void 0;
+var _viewPort = require("../../helpers/viewPort");
+function _createForOfIteratorHelperLoose(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (it) return (it = it.call(o)).next.bind(it); if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; return function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }; } throw new TypeError("Invalid attempt to iterate 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; }
+var verticalBuffer = 8;
+exports.verticalBuffer = verticalBuffer;
+var horizontalBuffer = 8;
+exports.horizontalBuffer = horizontalBuffer;
+var nonCenterArrowSpace = 12;
+// for non center position the position of the arrow is 12px from the most left or right, setting it to 14 to make sure it's nicely visible
+exports.nonCenterArrowSpace = nonCenterArrowSpace;
+var marginBuffer = nonCenterArrowSpace + 2;
+var getElementCenterPosition = function getElementCenterPosition(elRect) {
+  return elRect.left + elRect.width / 2;
+};
+exports.getElementCenterPosition = getElementCenterPosition;
+var getElementMiddlePosition = function getElementMiddlePosition(elRect) {
+  return elRect.bottom + elRect.height / 2;
+};
+exports.getElementMiddlePosition = getElementMiddlePosition;
+var canFitOnTheTop = function canFitOnTheTop(tooltipRect, elRect, verticalMargin) {
+  return elRect.top - (verticalMargin + tooltipRect.height) > 0;
+};
+exports.canFitOnTheTop = canFitOnTheTop;
+var canFitBelow = function canFitBelow(tooltipRect, elRect, verticalMargin) {
+  return elRect.bottom + verticalMargin + tooltipRect.height < (0, _viewPort.getViewportDimensions)().height;
+};
+exports.canFitBelow = canFitBelow;
+var canFitOnTheLeft = function canFitOnTheLeft(tooltipRect, elRect, horizontalMargin) {
+  return elRect.left - (horizontalMargin + tooltipRect.width) > 0;
+};
+exports.canFitOnTheLeft = canFitOnTheLeft;
+var canFitOnTheRight = function canFitOnTheRight(tooltipRect, elRect, horizontalMargin) {
+  return elRect.right + horizontalMargin + tooltipRect.width < (0, _viewPort.getViewportDimensions)().width;
+};
+exports.canFitOnTheRight = canFitOnTheRight;
+var canAlignLeft = function canAlignLeft(tooltipRect, elRect) {
+  var centerPosition = getElementCenterPosition(elRect);
+  var hasSpaceOnTheLeftSideOfArrow = centerPosition - (tooltipRect.width - marginBuffer) > 0;
+  var hasSpaceOnTheRightSideOfArrow = centerPosition + marginBuffer < (0, _viewPort.getViewportDimensions)().width;
+  return {
+    type: 'left',
+    result: hasSpaceOnTheLeftSideOfArrow && hasSpaceOnTheRightSideOfArrow
+  };
+};
+exports.canAlignLeft = canAlignLeft;
+var canAlignRight = function canAlignRight(tooltipRect, elRect) {
+  var centerPosition = getElementCenterPosition(elRect);
+  var hasSpaceOnTheRightSideOfArrow = centerPosition + (tooltipRect.width - marginBuffer) < (0, _viewPort.getViewportDimensions)().width;
+  var hasSpaceOnTheLeftSideOfArrow = centerPosition - marginBuffer > 0;
+  return {
+    type: 'right',
+    result: hasSpaceOnTheLeftSideOfArrow && hasSpaceOnTheRightSideOfArrow
+  };
+};
+exports.canAlignRight = canAlignRight;
+var canAlignCenter = function canAlignCenter(tooltipRect, elRect) {
+  var centerPosition = elRect.left + elRect.width / 2;
+  return {
+    type: 'center',
+    result: centerPosition - tooltipRect.width / 2 > 0 && centerPosition + tooltipRect.width / 2 < (0, _viewPort.getViewportDimensions)().width
+  };
+};
+exports.canAlignCenter = canAlignCenter;
+var canAlignTop = function canAlignTop(tooltipRect, elRect) {
+  var middlePosition = getElementMiddlePosition(elRect);
+  var hasSpaceOnTheTopOfArrow = middlePosition - (tooltipRect.height - marginBuffer) > 0;
+  var hasSpaceBelowTheArrow = middlePosition + marginBuffer < (0, _viewPort.getViewportDimensions)().width;
+  return {
+    type: 'top',
+    result: hasSpaceOnTheTopOfArrow && hasSpaceBelowTheArrow
+  };
+};
+exports.canAlignTop = canAlignTop;
+var canAlignBottom = function canAlignBottom(tooltipRect, elRect) {
+  var middlePosition = getElementMiddlePosition(elRect);
+  var hasSpaceOnTopOfArrow = middlePosition + (tooltipRect.height - marginBuffer) < (0, _viewPort.getViewportDimensions)().height;
+  var hasSpaceBelowTheArrow = middlePosition - marginBuffer > 0;
+  return {
+    type: 'bottom',
+    result: hasSpaceBelowTheArrow && hasSpaceOnTopOfArrow
+  };
+};
+exports.canAlignBottom = canAlignBottom;
+var canAlignMiddle = function canAlignMiddle(tooltipRect, elRect) {
+  var middlePosition = elRect.top + elRect.height / 2;
+  return {
+    type: 'middle',
+    result: middlePosition - tooltipRect.height / 2 > 0 && middlePosition + tooltipRect.height / 2 < (0, _viewPort.getViewportDimensions)().height
+  };
+};
+exports.canAlignMiddle = canAlignMiddle;
+var canStayOnTop = function canStayOnTop(tooltipRect) {
+  return tooltipRect.top > 0;
+};
+exports.canStayOnTop = canStayOnTop;
+var canStayOnBottom = function canStayOnBottom(tooltipRect) {
+  console.log('tooltipRect:', tooltipRect);
+  console.log('getViewportDimensions().height: ', (0, _viewPort.getViewportDimensions)().height);
+  return tooltipRect.bottom < (0, _viewPort.getViewportDimensions)().height;
+};
+exports.canStayOnBottom = canStayOnBottom;
+var canStayOnLeft = function canStayOnLeft(tooltipRect) {
+  return tooltipRect.left > 0;
+};
+exports.canStayOnLeft = canStayOnLeft;
+var canStayOnRight = function canStayOnRight(tooltipRect) {
+  return tooltipRect.right < (0, _viewPort.getViewportDimensions)().width;
+};
+exports.canStayOnRight = canStayOnRight;
+var tryCalculateAligment = function tryCalculateAligment(args) {
+  var preferredAlignmentFuncs = args.preferredAlignmentFuncs,
+    tooltipRect = args.tooltipRect,
+    elRect = args.elRect;
+  for (var _iterator = _createForOfIteratorHelperLoose(preferredAlignmentFuncs), _step; !(_step = _iterator()).done;) {
+    var alignmentFunc = _step.value;
+    var _alignmentFunc = alignmentFunc(tooltipRect, elRect),
+      result = _alignmentFunc.result,
+      type = _alignmentFunc.type;
+    if (result) {
+      return type;
+    }
+  }
+  return null;
+};
+exports.tryCalculateAligment = tryCalculateAligment;

package/lib/@next/Typography/Typography.d.ts

@@ -0,0 +1,16 @@
+import React, { ElementType, ReactNode } from 'react';
+declare const typographyVariant: readonly ["headline1", "headline2", "headline3", "headline4", "headline5", "headline6", "subtitle1", "subtitle2", "body1", "body2", "button", "caption", "overline"];
+export declare type Variant = (typeof typographyVariant)[number];
+export interface TypographyProps {
+    /** Sets the Typography's element */
+    as?: ElementType;
+    className?: string;
+    children: ReactNode;
+    /** Sets the Typography's color */
+    color?: string;
+    /** Sets the Typography's variant */
+    variant?: Variant;
+    style?: React.CSSProperties;
+}
+export declare const Typography: ({ as, children, variant, style, ...props }: TypographyProps) => JSX.Element;
+export {};

package/lib/@next/Typography/Typography.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.Typography = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireDefault(require("react"));
+var _TypographyStyles = require("./TypographyStyles");
+var _excluded = ["as", "children", "variant", "style"];
+var typographyVariant = ['headline1', 'headline2', 'headline3', 'headline4', 'headline5', 'headline6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'button', 'caption', 'overline'];
+var isVariant = function isVariant(str) {
+  return typographyVariant.includes(str);
+};
+var Typography = function Typography(_ref) {
+  var _ref$as = _ref.as,
+    as = _ref$as === void 0 ? 'p' : _ref$as,
+    children = _ref.children,
+    variant = _ref.variant,
+    style = _ref.style,
+    props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  if (!isVariant(variant)) {
+    console.warn("Variant: " + variant + " is not of type Variant | undefined. \ntype Variant " + typographyVariant);
+  }
+  return /*#__PURE__*/_react["default"].createElement(_TypographyStyles.StyledTypography, (0, _extends2["default"])({
+    style: style,
+    as: as,
+    variant: variant
+  }, props), children);
+};
+exports.Typography = Typography;

package/lib/@next/Typography/Typography.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Interactive: any;
+export declare const Color: any;
+export declare const Variant: any;

package/lib/@next/Typography/Typography.test.d.ts

@@ -0,0 +1 @@
+import 'jest-styled-components';

package/lib/@next/Typography/TypographyStyles.d.ts

@@ -0,0 +1,19 @@
+import { FlattenSimpleInterpolation } from 'styled-components';
+import { TypographyProps, Variant } from './Typography';
+export declare const headline1: FlattenSimpleInterpolation;
+export declare const headline2: FlattenSimpleInterpolation;
+export declare const headline3: FlattenSimpleInterpolation;
+export declare const headline4: FlattenSimpleInterpolation;
+export declare const headline5: FlattenSimpleInterpolation;
+export declare const headline6: FlattenSimpleInterpolation;
+export declare const subtitle1: FlattenSimpleInterpolation;
+export declare const subtitle2: FlattenSimpleInterpolation;
+export declare const body1: FlattenSimpleInterpolation;
+export declare const body2: FlattenSimpleInterpolation;
+export declare const button: FlattenSimpleInterpolation;
+export declare const caption: FlattenSimpleInterpolation;
+export declare const overline: FlattenSimpleInterpolation;
+export declare const variantCssMapping: {
+    [variant in Variant]: FlattenSimpleInterpolation;
+};
+export declare const StyledTypography: import("styled-components").StyledComponent<"p", any, TypographyProps, never>;

package/lib/@next/Typography/TypographyStyles.js

@@ -0,0 +1,47 @@
+"use strict";
+
+exports.__esModule = true;
+exports.variantCssMapping = exports.subtitle2 = exports.subtitle1 = exports.overline = exports.headline6 = exports.headline5 = exports.headline4 = exports.headline3 = exports.headline2 = exports.headline1 = exports.caption = exports.button = exports.body2 = exports.body1 = exports.StyledTypography = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var Breakpoints = _interopRequireWildcard(require("../utilities/breakpoints"));
+var _fonts = require("../utilities/fonts");
+var _variantCssMapping;
+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; }
+var headline1 = (0, _styledComponents.css)(["font-family:", ",sans-serif;font-weight:700;font-size:60px;line-height:140%;letter-spacing:0;@media (max-width:", "){font-size:36px;}"], _fonts.Poppins, Breakpoints.large);
+exports.headline1 = headline1;
+var headline2 = (0, _styledComponents.css)(["font-family:", ",sans-serif;font-weight:700;font-size:50px;line-height:normal;letter-spacing:0;@media (max-width:", "){font-weight:600;font-size:32px;line-height:140%;}"], _fonts.Poppins, Breakpoints.large);
+exports.headline2 = headline2;
+var headline3 = (0, _styledComponents.css)(["font-family:", ",sans-serif;font-weight:700;font-size:36px;line-height:normal;letter-spacing:0;@media (max-width:", "){font-weight:600;font-size:28px;line-height:140%;}"], _fonts.Poppins, Breakpoints.large);
+exports.headline3 = headline3;
+var headline4 = (0, _styledComponents.css)(["font-family:", ",sans-serif;font-weight:700;font-size:30px;line-height:140%;letter-spacing:0;@media (max-width:", "){font-weight:600;font-size:24px;line-height:150%;}"], _fonts.Poppins, Breakpoints.large);
+exports.headline4 = headline4;
+var headline5 = (0, _styledComponents.css)(["font-weight:700;font-size:26px;line-height:normal;letter-spacing:0;@media (max-width:", "){font-weight:600;font-size:20px;}"], Breakpoints.large);
+exports.headline5 = headline5;
+var headline6 = (0, _styledComponents.css)(["font-family:", ",sans-serif;font-weight:600;font-size:24px;line-height:150%;letter-spacing:0;@media (max-width:", "){font-weight:700;font-size:18px;letter-spacing:0.15px;}"], _fonts.NotoSans, Breakpoints.large);
+exports.headline6 = headline6;
+var subtitle1 = (0, _styledComponents.css)(["font-family:", ",sans-serif;font-weight:600;font-size:20px;line-height:150%;letter-spacing:0.15px;@media (max-width:", "){font-size:16px;}"], _fonts.NotoSans, Breakpoints.large);
+exports.subtitle1 = subtitle1;
+var subtitle2 = (0, _styledComponents.css)(["font-family:", ",sans-serif;font-weight:400;font-size:14px;line-height:150%;letter-spacing:0.25px;@media (max-width:", "){font-size:12px;letter-spacing:0;}"], _fonts.NotoSans, Breakpoints.large);
+exports.subtitle2 = subtitle2;
+var body1 = (0, _styledComponents.css)(["font-family:", ",sans-serif;font-weight:400;font-size:16px;line-height:150%;letter-spacing:0px;@media (max-width:", "){font-size:14px;}"], _fonts.NotoSans, Breakpoints.large);
+exports.body1 = body1;
+var body2 = (0, _styledComponents.css)(["font-family:", ",sans-serif;font-weight:600;font-size:16px;line-height:150%;letter-spacing:0.25px;@media (max-width:", "){font-size:14px;line-height:140%;letter-spacing:0;}"], _fonts.NotoSans, Breakpoints.large);
+exports.body2 = body2;
+var button = (0, _styledComponents.css)(["font-family:", ",sans-serif;font-weight:700;font-size:14px;line-height:150%;letter-spacing:0.75px;@media (max-width:", "){font-weight:600;letter-spacing:0.25px;}"], _fonts.NotoSans, Breakpoints.large);
+exports.button = button;
+var caption = (0, _styledComponents.css)(["font-family:", ",sans-serif;font-weight:600;font-size:14px;line-height:150%;letter-spacing:0.25px;@media (max-width:", "){font-size:12px;letter-spacing:0px;}"], _fonts.NotoSans, Breakpoints.large);
+exports.caption = caption;
+var overline = (0, _styledComponents.css)(["font-family:", ",sans-serif;font-weight:500;font-size:12px;line-height:140%;letter-spacing:1.5px;@media (max-width:", "){font-size:10px;letter-spacing:0.2px;}"], _fonts.NotoSans, Breakpoints.large);
+exports.overline = overline;
+var variantCssMapping = (_variantCssMapping = {}, _variantCssMapping['headline1'] = headline1, _variantCssMapping['headline2'] = headline2, _variantCssMapping['headline3'] = headline3, _variantCssMapping['headline4'] = headline4, _variantCssMapping['headline5'] = headline5, _variantCssMapping['headline6'] = headline6, _variantCssMapping['subtitle1'] = subtitle1, _variantCssMapping['subtitle2'] = subtitle2, _variantCssMapping['body1'] = body1, _variantCssMapping['body2'] = body2, _variantCssMapping['button'] = button, _variantCssMapping['caption'] = caption, _variantCssMapping['overline'] = overline, _variantCssMapping);
+exports.variantCssMapping = variantCssMapping;
+var StyledTypography = _styledComponents["default"].p.withConfig({
+  displayName: "TypographyStyles__StyledTypography",
+  componentId: "sc-ro16eu-0"
+})(["color:", ";", ""], function (props) {
+  return props.color;
+}, function (props) {
+  return variantCssMapping[props.variant];
+});
+exports.StyledTypography = StyledTypography;

package/lib/@next/Typography/index.d.ts

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

package/lib/@next/Typography/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+exports.__esModule = true;
+var _Typography = require("./Typography");
+Object.keys(_Typography).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Typography[key]) return;
+  exports[key] = _Typography[key];
+});

package/lib/@next/Upload/Upload.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface UploadProps {
+    file: File | null;
+    handleSetFile: (file: File | null) => void;
+    loading?: boolean;
+    objectFit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
+    uploadMessage?: React.ReactNode;
+    loadingMessage?: React.ReactNode;
+    disableDefaultValidation?: boolean;
+    accept?: string;
+}
+export declare const Upload: React.ForwardRefExoticComponent<UploadProps & React.RefAttributes<HTMLInputElement>>;

package/lib/@next/Upload/Upload.js

@@ -0,0 +1,125 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.Upload = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireWildcard(require("react"));
+var _Icon = require("../Icon");
+var _UploadStyle = require("./UploadStyle");
+var _Spinner = require("../Spinner");
+var _Typography = require("../Typography");
+var _excluded = ["file", "handleSetFile", "loading", "objectFit", "uploadMessage", "loadingMessage", "disableDefaultValidation", "accept"];
+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; }
+var Upload = /*#__PURE__*/_react["default"].forwardRef(function Upload(_ref, ref) {
+  var file = _ref.file,
+    handleSetFile = _ref.handleSetFile,
+    loading = _ref.loading,
+    _ref$objectFit = _ref.objectFit,
+    objectFit = _ref$objectFit === void 0 ? 'cover' : _ref$objectFit,
+    _ref$uploadMessage = _ref.uploadMessage,
+    uploadMessage = _ref$uploadMessage === void 0 ? 'Upload' : _ref$uploadMessage,
+    _ref$loadingMessage = _ref.loadingMessage,
+    loadingMessage = _ref$loadingMessage === void 0 ? 'loading...' : _ref$loadingMessage,
+    _ref$disableDefaultVa = _ref.disableDefaultValidation,
+    disableDefaultValidation = _ref$disableDefaultVa === void 0 ? false : _ref$disableDefaultVa,
+    accept = _ref.accept,
+    props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  var MAX_FILE_SIZE = 5; // in MB
+
+  var _useState = (0, _react.useState)(''),
+    attachmentUrl = _useState[0],
+    setAttachmentUrl = _useState[1];
+  var _useState2 = (0, _react.useState)(loading),
+    isLoading = _useState2[0],
+    setIsLoading = _useState2[1];
+  var _useState3 = (0, _react.useState)(''),
+    error = _useState3[0],
+    setError = _useState3[1];
+  var fileInputRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    var reader = new FileReader();
+    reader.onloadend = function () {
+      setAttachmentUrl(reader.result);
+      setIsLoading(false);
+    };
+    reader.onloadstart = function () {
+      return setIsLoading(true);
+    };
+    if (file) reader.readAsDataURL(file);
+  }, [file, loading]);
+  var handleClick = function handleClick() {
+    if (fileInputRef.current) {
+      fileInputRef.current.click();
+    }
+  };
+  var handleChange = function handleChange(event) {
+    var _event$target$files;
+    var newFile = (_event$target$files = event.target.files) == null ? void 0 : _event$target$files[0];
+    if (disableDefaultValidation) {
+      var _event$target$files2;
+      handleSetFile(((_event$target$files2 = event.target.files) == null ? void 0 : _event$target$files2[0]) || null);
+      return;
+    }
+    if (newFile && !newFile.type.startsWith('image')) {
+      setError('Image required');
+      handleSetFile(null);
+    } else if (newFile && newFile.size > MAX_FILE_SIZE * 1024 * 1024) {
+      setError('File too big');
+      handleSetFile(null);
+    } else {
+      setError('');
+      handleSetFile(newFile);
+    }
+  };
+  var handleDelete = function handleDelete() {
+    setAttachmentUrl('');
+    handleSetFile(null);
+    fileInputRef.current.value = null;
+  };
+  var unuploadedComponent = /*#__PURE__*/_react["default"].createElement(_UploadStyle.StyledUploadContainer, {
+    onClick: handleClick,
+    "data-type": "initial",
+    "data-error": !!error,
+    "data-testid": "upload-container"
+  }, /*#__PURE__*/_react["default"].createElement(_UploadStyle.StyledIconContainer, null, /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
+    name: "ri-add"
+  })), /*#__PURE__*/_react["default"].createElement(_UploadStyle.StyledTextContainer, null, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+    as: "span",
+    variant: "button"
+  }, uploadMessage)));
+  var loadingComponent = /*#__PURE__*/_react["default"].createElement(_UploadStyle.StyledUploadContainer, {
+    "data-type": "loading"
+  }, /*#__PURE__*/_react["default"].createElement(_UploadStyle.StyledIconContainer, {
+    "data-type": "loading"
+  }, /*#__PURE__*/_react["default"].createElement(_Spinner.Spinner, null)), /*#__PURE__*/_react["default"].createElement(_UploadStyle.StyledTextContainer, null, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+    as: "span",
+    variant: "overline"
+  }, loadingMessage)));
+  var errorComponent = /*#__PURE__*/_react["default"].createElement(_UploadStyle.StyledErrorContainer, null, /*#__PURE__*/_react["default"].createElement(_UploadStyle.StyledErrorIconContainer, null, /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
+    name: "ri-error-warning-fill"
+  })), /*#__PURE__*/_react["default"].createElement(_UploadStyle.StyledErrorTextContainer, null, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+    as: "span",
+    variant: "subtitle2"
+  }, error)));
+  var uploadedImageComponent = /*#__PURE__*/_react["default"].createElement(_UploadStyle.StyledUploadedImage, {
+    src: attachmentUrl,
+    objectFit: objectFit
+  });
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_UploadStyle.StyledInvisibleInput, (0, _extends2["default"])({
+    type: "file",
+    accept: accept || 'image/*',
+    onChange: handleChange,
+    ref: ref || fileInputRef
+  }, props)), attachmentUrl && !(loading || isLoading) ? /*#__PURE__*/_react["default"].createElement(_UploadStyle.StyledUploadContainer, {
+    "data-type": "image",
+    "data-testid": "upload-container"
+  }, uploadedImageComponent, /*#__PURE__*/_react["default"].createElement(_UploadStyle.StyledDeleteButtonContainer, {
+    onClick: handleDelete
+  }, /*#__PURE__*/_react["default"].createElement(_UploadStyle.StyledDeleteIconContainer, null, /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
+    name: "ri-delete-bin-line"
+  })))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, loading || isLoading ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, loadingComponent) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, unuploadedComponent), !!error && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, errorComponent)));
+});
+exports.Upload = Upload;

package/lib/@next/Upload/Upload.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Interactive: any;