glints-aries 4.1.3 → 4.1.4

package/es/@next/SideSheet/SideSheet.js

@@ -0,0 +1,105 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["isOpen", "title", "description", "showHorizontalLine", "children", "basicButtonAction", "primaryButtonAction", "showBackButton", "onBack", "showCloseButton", "onClose"];
+import React, { useEffect, useState, useRef } from 'react';
+import { Button, PrimaryButton } from '../Button';
+import { ButtonGroup } from '../ButtonGroup';
+import { Icon } from '../Icon';
+import { Neutral } from '../utilities/colors';
+import { Portal } from '../Portal/Portal';
+import { StyledSideSheetContainer, StyledSideSheetWrapper, StyledSideSheetHeader, StyledButtonContainer, StyledRightContainer, StyledHorizontalLine, StyledSideSheetFooter, StyledButtonGroupContainer, SideSheetContent } from './SideSheetStyle';
+import { Typography } from '../Typography';
+import classNames from 'classnames';
+var SideSheet = /*#__PURE__*/React.forwardRef(function SideSheet(_ref, ref) {
+  var isOpen = _ref.isOpen,
+    title = _ref.title,
+    description = _ref.description,
+    _ref$showHorizontalLi = _ref.showHorizontalLine,
+    showHorizontalLine = _ref$showHorizontalLi === void 0 ? true : _ref$showHorizontalLi,
+    children = _ref.children,
+    basicButtonAction = _ref.basicButtonAction,
+    primaryButtonAction = _ref.primaryButtonAction,
+    _ref$showBackButton = _ref.showBackButton,
+    showBackButton = _ref$showBackButton === void 0 ? true : _ref$showBackButton,
+    onBack = _ref.onBack,
+    _ref$showCloseButton = _ref.showCloseButton,
+    showCloseButton = _ref$showCloseButton === void 0 ? true : _ref$showCloseButton,
+    onClose = _ref.onClose,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  useEffect(function () {
+    if (typeof window === 'undefined' || !window.document) return;
+    var enableScroll = function enableScroll() {
+      return document.body.style.overflow = 'unset';
+    };
+    isOpen ? document.body.style.overflow = 'hidden' : enableScroll();
+    return function () {
+      enableScroll();
+    };
+  }, [isOpen]);
+
+  // store state for closing animation, and cleanup when unmounting
+  var _useState = useState(false),
+    isClosedAnimation = _useState[0],
+    setIsClosedAnimation = _useState[1];
+  var timeoutId = useRef(null);
+  useEffect(function () {
+    return function () {
+      if (timeoutId.current) {
+        clearTimeout(timeoutId.current);
+      }
+    };
+  }, []);
+
+  // fade out effect for 0.2seconds when closed
+  var handleClose = function handleClose() {
+    setIsClosedAnimation(true);
+    timeoutId.current = setTimeout(function () {
+      setIsClosedAnimation(false);
+      onClose();
+    }, 190); // purposefully made this 0.19sec (to prevent rare animation glitch)
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, isOpen && /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(StyledSideSheetWrapper, {
+    className: "side-sheet-wrapper " + (isClosedAnimation ? 'closed' : ''),
+    onClick: handleClose
+  }, /*#__PURE__*/React.createElement(StyledSideSheetContainer, _extends({
+    className: classNames({
+      closed: isClosedAnimation
+    }, 'side-sheet-container'),
+    ref: ref,
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
+  }, props), /*#__PURE__*/React.createElement(StyledSideSheetHeader, null, showBackButton && /*#__PURE__*/React.createElement(StyledButtonContainer, {
+    onClick: onBack
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ri-arrow-left-line"
+  })), /*#__PURE__*/React.createElement(Typography, {
+    as: "div",
+    variant: "subtitle1",
+    style: {
+      color: Neutral.B18
+    }
+  }, title, /*#__PURE__*/React.createElement(Typography, {
+    as: "div",
+    variant: "body1",
+    style: {
+      color: Neutral.B18
+    }
+  }, description)), showCloseButton && /*#__PURE__*/React.createElement(StyledRightContainer, null, /*#__PURE__*/React.createElement(StyledButtonContainer, {
+    "data-testid": "sidesheet-close-btn",
+    onClick: handleClose
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ri-close"
+  })))), showHorizontalLine && /*#__PURE__*/React.createElement(StyledHorizontalLine, null), /*#__PURE__*/React.createElement(SideSheetContent, {
+    className: "sidesheet-content"
+  }, children), (basicButtonAction || primaryButtonAction) && /*#__PURE__*/React.createElement(StyledSideSheetFooter, null, /*#__PURE__*/React.createElement(StyledHorizontalLine, null), /*#__PURE__*/React.createElement(StyledButtonGroupContainer, null, /*#__PURE__*/React.createElement(ButtonGroup, {
+    fullWidth: true
+  }, basicButtonAction && /*#__PURE__*/React.createElement(Button, _extends({}, basicButtonAction, {
+    onClick: basicButtonAction.action,
+    fullWidth: true
+  }), basicButtonAction.label), primaryButtonAction && /*#__PURE__*/React.createElement(PrimaryButton, _extends({}, primaryButtonAction, {
+    onClick: primaryButtonAction.action
+  }), primaryButtonAction.label))))))));
+});
+export { SideSheet };

package/es/@next/SideSheet/SideSheet.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 WithTabsInteractive: any;
+export declare const WithLockedScrollableBackdrop: any;

package/es/@next/SideSheet/SideSheetStyle.d.ts

@@ -0,0 +1,9 @@
+export declare const StyledSideSheetWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledSideSheetContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledSideSheetHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledButtonContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledRightContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledHorizontalLine: import("styled-components").StyledComponent<"hr", any, {}, never>;
+export declare const StyledSideSheetFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledButtonGroupContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SideSheetContent: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/@next/SideSheet/SideSheetStyle.js

@@ -0,0 +1,39 @@
+import styled from 'styled-components';
+import { Neutral } from '../utilities/colors';
+import * as Breakpoints from '../utilities/breakpoints';
+export var StyledSideSheetWrapper = styled.div.withConfig({
+  displayName: "SideSheetStyle__StyledSideSheetWrapper",
+  componentId: "sc-z0rzf0-0"
+})(["position:fixed;inset:0;background-color:rgba(45,45,45,0.5);display:flex;align-items:center;justify-content:center;overflow:hidden;z-index:999;animation:ga-fade-in2 0.2s;&.closed{animation:ga-fade-out2 0.2s;}@keyframes ga-fade-in2{0%{opacity:0;}100%{opacity:1;}}@keyframes ga-fade-out2{0%{opacity:1;}100%{opacity:0;}}"]);
+export var StyledSideSheetContainer = styled.div.withConfig({
+  displayName: "SideSheetStyle__StyledSideSheetContainer",
+  componentId: "sc-z0rzf0-1"
+})(["position:absolute;display:flex;flex-direction:column;width:480px;height:100vh;background:", ";box-shadow:0px 26px 80px rgba(0,0,0,0.2),0px 0px 1px rgba(0,0,0,0.2);overflow:hidden;animation:ga-slide-in 0.2s;top:0;right:0;&.closed{animation:ga-slide-out 0.2s;}@keyframes ga-slide-in{0%{opacity:0;transform:translateX(100%);}100%{opacity:1;}}@keyframes ga-slide-out{0%{opacity:0;}100%{opacity:1;transform:translateX(100%);}}@media (max-width:", "){width:100vw;}"], Neutral.B100, Breakpoints.large);
+export var StyledSideSheetHeader = styled.div.withConfig({
+  displayName: "SideSheetStyle__StyledSideSheetHeader",
+  componentId: "sc-z0rzf0-2"
+})(["display:flex;align-items:top;padding:16px 20px;gap:8px;"]);
+export var StyledButtonContainer = styled.div.withConfig({
+  displayName: "SideSheetStyle__StyledButtonContainer",
+  componentId: "sc-z0rzf0-3"
+})(["cursor:pointer;margin-top:3px;svg{width:24px;fill:", ";}"], Neutral.B40);
+export var StyledRightContainer = styled.div.withConfig({
+  displayName: "SideSheetStyle__StyledRightContainer",
+  componentId: "sc-z0rzf0-4"
+})(["margin-left:auto;display:flex;align-items:top;"]);
+export var StyledHorizontalLine = styled.hr.withConfig({
+  displayName: "SideSheetStyle__StyledHorizontalLine",
+  componentId: "sc-z0rzf0-5"
+})(["height:1px;background-color:", ";margin:0px 0px;border:none;"], Neutral.B95);
+export var StyledSideSheetFooter = styled.div.withConfig({
+  displayName: "SideSheetStyle__StyledSideSheetFooter",
+  componentId: "sc-z0rzf0-6"
+})(["margin-top:auto;"]);
+export var StyledButtonGroupContainer = styled.div.withConfig({
+  displayName: "SideSheetStyle__StyledButtonGroupContainer",
+  componentId: "sc-z0rzf0-7"
+})(["margin:16px 20px;"]);
+export var SideSheetContent = styled.div.withConfig({
+  displayName: "SideSheetStyle__SideSheetContent",
+  componentId: "sc-z0rzf0-8"
+})(["overflow-y:scroll;"]);

package/es/@next/SideSheet/index.d.ts

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

package/es/@next/SideSheet/index.js

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

package/es/@next/Skeleton/SkeletonStyle.d.ts

@@ -0,0 +1 @@
+export declare const SkeletonShimmer: string;

package/es/@next/Skeleton/SkeletonStyle.js

@@ -0,0 +1,2 @@
+import { Neutral } from '../utilities/colors';
+export var SkeletonShimmer = "\nbackground: linear-gradient(\n  110.76deg,\n  " + Neutral.B95 + " 36.01%,\n  rgba(217, 217, 217, 0.24) 47.36%,\n  " + Neutral.B95 + " 57.51%\n);\nbackground-size: 400% 100%;\n  animation: skeleton-shimmer 1.5s linear infinite;\n\n  @keyframes skeleton-shimmer {\n    0% {\n      background-position: 100% 50%;\n    }\n\n    100% {\n      background-position: 0 50%;\n    }\n  }\n";

package/es/@next/Skeleton/components/SkeletonImage/SkeletonImageCircle.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface SkeletonImageCircleProps {
+    /** Sets the height and width. Default is 48px */
+    size?: string;
+}
+export declare const SkeletonImageCircle: ({ size, }: SkeletonImageCircleProps) => JSX.Element;

package/es/@next/Skeleton/components/SkeletonImage/SkeletonImageCircle.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { StyledSkeletonImageCircle } from './SkeletonImageStyle';
+export var SkeletonImageCircle = function SkeletonImageCircle(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? '48px' : _ref$size;
+  return /*#__PURE__*/React.createElement(StyledSkeletonImageCircle, {
+    size: size
+  });
+};

package/es/@next/Skeleton/components/SkeletonImage/SkeletonImageCircle.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 Default: any;

package/es/@next/Skeleton/components/SkeletonImage/SkeletonImageSquare.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface SkeletonImageSquareProps {
+    height: string;
+    width: string;
+}
+export declare const SkeletonImageSquare: ({ height, width, }: SkeletonImageSquareProps) => JSX.Element;

package/es/@next/Skeleton/components/SkeletonImage/SkeletonImageSquare.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { StyledSkeletonImageSquare } from './SkeletonImageStyle';
+export var SkeletonImageSquare = function SkeletonImageSquare(_ref) {
+  var _ref$height = _ref.height,
+    height = _ref$height === void 0 ? '80px' : _ref$height,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? '80px' : _ref$width;
+  return /*#__PURE__*/React.createElement(StyledSkeletonImageSquare, {
+    height: height,
+    width: width
+  });
+};

package/es/@next/Skeleton/components/SkeletonImage/SkeletonImageSquare.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 Default: any;

package/es/@next/Skeleton/components/SkeletonImage/SkeletonImageStyle.d.ts

@@ -0,0 +1,5 @@
+import { SkeletonImageCircleProps } from './SkeletonImageCircle';
+import { SkeletonImageSquareProps } from './SkeletonImageSquare';
+export declare const SkeletonImageContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledSkeletonImageCircle: import("styled-components").StyledComponent<"div", any, SkeletonImageCircleProps, never>;
+export declare const StyledSkeletonImageSquare: import("styled-components").StyledComponent<"div", any, SkeletonImageSquareProps, never>;

package/es/@next/Skeleton/components/SkeletonImage/SkeletonImageStyle.js

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+import { borderRadiusHalf } from '../../../utilities/borderRadius';
+import { SkeletonShimmer } from '../../SkeletonStyle';
+export var SkeletonImageContainer = styled.div.withConfig({
+  displayName: "SkeletonImageStyle__SkeletonImageContainer",
+  componentId: "sc-1x8xyqg-0"
+})(["width:100%;"]);
+export var StyledSkeletonImageCircle = styled.div.withConfig({
+  displayName: "SkeletonImageStyle__StyledSkeletonImageCircle",
+  componentId: "sc-1x8xyqg-1"
+})(["width:", ";height:", ";border-radius:", ";", ""], function (props) {
+  return props.size;
+}, function (props) {
+  return props.size;
+}, borderRadiusHalf, SkeletonShimmer);
+export var StyledSkeletonImageSquare = styled.div.withConfig({
+  displayName: "SkeletonImageStyle__StyledSkeletonImageSquare",
+  componentId: "sc-1x8xyqg-2"
+})(["width:", ";height:", ";", ""], function (props) {
+  return props.width;
+}, function (props) {
+  return props.height;
+}, SkeletonShimmer);

package/es/@next/Skeleton/components/SkeletonText/SkeletonText.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { Variant as TypographyVariant } from '../../../Typography';
+declare type Row = {
+    width?: string;
+    variant?: TypographyVariant;
+};
+export interface SkeletonTextProps {
+    className?: string;
+    rows?: number | Row[];
+}
+export declare const SkeletonText: ({ className, rows }: SkeletonTextProps) => JSX.Element;
+export {};

package/es/@next/Skeleton/components/SkeletonText/SkeletonText.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { SkeletonTextContainer, StyledSkeletonText } from './SkeletonTextStyle';
+export var SkeletonText = function SkeletonText(_ref) {
+  var className = _ref.className,
+    _ref$rows = _ref.rows,
+    rows = _ref$rows === void 0 ? 4 : _ref$rows;
+  var defaultWidth = '100%';
+  var defaultVariant = 'body1';
+  var renderRows = function renderRows() {
+    var rowsToArray = typeof rows === 'number' ? [].concat(Array(rows)) : rows;
+    return rowsToArray.map(function (row, index) {
+      return /*#__PURE__*/React.createElement(StyledSkeletonText, {
+        key: "skeleton-text-" + index,
+        width: (row == null ? void 0 : row.width) || defaultWidth,
+        variant: (row == null ? void 0 : row.variant) || defaultVariant
+      });
+    });
+  };
+  return /*#__PURE__*/React.createElement(SkeletonTextContainer, {
+    className: className
+  }, renderRows());
+};

package/es/@next/Skeleton/components/SkeletonText/SkeletonText.stories.d.ts

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

package/es/@next/Skeleton/components/SkeletonText/SkeletonTextStyle.d.ts

@@ -0,0 +1,8 @@
+import { Variant as TypographyVariant } from '../../../Typography';
+interface StyledSkeletonTextProps {
+    width?: string;
+    variant?: TypographyVariant;
+}
+export declare const StyledSkeletonText: import("styled-components").StyledComponent<"li", any, StyledSkeletonTextProps, never>;
+export declare const SkeletonTextContainer: import("styled-components").StyledComponent<"ul", any, {}, never>;
+export {};

package/es/@next/Skeleton/components/SkeletonText/SkeletonTextStyle.js

@@ -0,0 +1,31 @@
+var _variantHeightMapping;
+import styled, { css } from 'styled-components';
+import * as Breakpoints from '../../../utilities/breakpoints';
+import { space4 } from '../../../utilities/spacing';
+import { SkeletonShimmer } from '../../SkeletonStyle';
+var headline1 = css(["height:84px;@media (max-width:", "){height:36px;}"], Breakpoints.large);
+var headline2 = css(["height:75px;@media (max-width:", "){height:32px;}"], Breakpoints.large);
+var headline3 = css(["height:54px;@media (max-width:", "){height:28px;}"], Breakpoints.large);
+var headline4 = css(["height:42px;@media (max-width:", "){height:24px;}"], Breakpoints.large);
+var headline5 = css(["height:39px;@media (max-width:", "){height:20px;}"], Breakpoints.large);
+var headline6 = css(["height:36px;@media (max-width:", "){height:18px;}"], Breakpoints.large);
+var subtitle1 = css(["height:32px;@media (max-width:", "){height:16px;}"], Breakpoints.large);
+var subtitle2 = css(["height:21px;@media (max-width:", "){height:18px;}"], Breakpoints.large);
+var body1 = css(["height:24px;@media (max-width:", "){height:21px;}"], Breakpoints.large);
+var body2 = css(["height:24px;@media (max-width:", "){height:21px;}"], Breakpoints.large);
+var button = css(["height:14px;"]);
+var caption = css(["height:20px;@media (max-width:", "){height:17px;}"], Breakpoints.large);
+var overline = css(["height:17px;@media (max-width:", "){height:14px;}"], Breakpoints.large);
+var variantHeightMapping = (_variantHeightMapping = {}, _variantHeightMapping['headline1'] = headline1, _variantHeightMapping['headline2'] = headline2, _variantHeightMapping['headline3'] = headline3, _variantHeightMapping['headline4'] = headline4, _variantHeightMapping['headline5'] = headline5, _variantHeightMapping['headline6'] = headline6, _variantHeightMapping['subtitle1'] = subtitle1, _variantHeightMapping['subtitle2'] = subtitle2, _variantHeightMapping['body1'] = body1, _variantHeightMapping['body2'] = body2, _variantHeightMapping['button'] = button, _variantHeightMapping['caption'] = caption, _variantHeightMapping['overline'] = overline, _variantHeightMapping);
+export var StyledSkeletonText = styled.li.withConfig({
+  displayName: "SkeletonTextStyle__StyledSkeletonText",
+  componentId: "sc-ym0kos-0"
+})(["", " width:", ";", ""], function (props) {
+  return variantHeightMapping[props.variant];
+}, function (props) {
+  return props.width;
+}, SkeletonShimmer);
+export var SkeletonTextContainer = styled.ul.withConfig({
+  displayName: "SkeletonTextStyle__SkeletonTextContainer",
+  componentId: "sc-ym0kos-1"
+})(["list-style:none;width:100%;li:not(:last-child){margin-bottom:", ";}"], space4);

package/es/@next/Skeleton/components/index.d.ts

@@ -0,0 +1,6 @@
+export type { SkeletonTextProps } from './SkeletonText/SkeletonText';
+export { SkeletonText } from './SkeletonText/SkeletonText';
+export type { SkeletonImageCircleProps } from './SkeletonImage/SkeletonImageCircle';
+export { SkeletonImageCircle } from './SkeletonImage/SkeletonImageCircle';
+export type { SkeletonImageSquareProps } from './SkeletonImage/SkeletonImageSquare';
+export { SkeletonImageSquare } from './SkeletonImage/SkeletonImageSquare';

package/es/@next/Skeleton/components/index.js

@@ -0,0 +1,3 @@
+export { SkeletonText } from './SkeletonText/SkeletonText';
+export { SkeletonImageCircle } from './SkeletonImage/SkeletonImageCircle';
+export { SkeletonImageSquare } from './SkeletonImage/SkeletonImageSquare';

package/es/@next/Skeleton/index.d.ts

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

package/es/@next/Skeleton/index.js

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

package/es/@next/Spinner/Spinner.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { IconProps } from '../Icon';
+export declare type Size = 'small' | 'large';
+export declare type SpinnerProps = Omit<IconProps, 'name'> & {
+    label?: string;
+    size?: Size;
+};
+export declare const Spinner: ({ label, size, ...props }: SpinnerProps) => JSX.Element;

package/es/@next/Spinner/Spinner.js

@@ -0,0 +1,24 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["label", "size"];
+var _iconSizeMapping, _labelVariantMapping;
+import React from 'react';
+import { Icon } from '../Icon';
+import { Label, StyledWrapper } from './SpinnerStyle';
+var iconSizeMapping = (_iconSizeMapping = {}, _iconSizeMapping['small'] = '18px', _iconSizeMapping['large'] = '48px', _iconSizeMapping);
+var labelVariantMapping = (_labelVariantMapping = {}, _labelVariantMapping['small'] = 'body1', _labelVariantMapping['large'] = 'subtitle1', _labelVariantMapping);
+export var Spinner = function Spinner(_ref) {
+  var label = _ref.label,
+    size = _ref.size,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(StyledWrapper, {
+    className: "spinner-container"
+  }, /*#__PURE__*/React.createElement(Icon, _extends({
+    name: "ri-loader",
+    height: iconSizeMapping[size],
+    width: iconSizeMapping[size]
+  }, props)), label && /*#__PURE__*/React.createElement(Label, {
+    variant: labelVariantMapping[size],
+    "data-size": size
+  }, label));
+};

package/es/@next/Spinner/Spinner.stories.d.ts

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

package/es/@next/Spinner/SpinnerStyle.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const StyledWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Label: import("styled-components").StyledComponent<({ as, children, variant, style, ...props }: import("../Typography").TypographyProps) => JSX.Element, any, {}, never>;

package/es/@next/Spinner/SpinnerStyle.js

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+import { Typography } from '../Typography';
+import { space16, space4 } from '../utilities/spacing';
+export var StyledWrapper = styled.div.withConfig({
+  displayName: "SpinnerStyle__StyledWrapper",
+  componentId: "sc-1rqoa36-0"
+})(["display:flex;flex-direction:column;justify-content:center;align-items:center;@keyframes p-keyframes-spin{to{transform:rotate(1turn);}}svg{animation:p-keyframes-spin 800ms linear infinite;}"]);
+export var Label = styled(Typography).withConfig({
+  displayName: "SpinnerStyle__Label",
+  componentId: "sc-1rqoa36-1"
+})(["margin-bottom:0;&[data-size='large']{margin-top:", ";}&[data-size='small']{margin-top:", ";}"], space16, space4);

package/es/@next/Spinner/index.d.ts

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

package/es/@next/Spinner/index.js

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

package/es/@next/Steps/Step.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface StepProps {
+    /** Styles of step, predetermined from parent component, or you can overwrite this */
+    variant?: 'pending' | 'completed' | 'processing' | 'error';
+    /** Label given to the step component  */
+    label?: string;
+    /** Step number to be shown, by default it's 1,2,3,... from the parent component, or you can overwrite this */
+    index?: number;
+    type?: 'normal' | 'dot';
+    orientation?: 'horizontal' | 'vertical';
+}
+export declare const Step: React.ForwardRefExoticComponent<StepProps & React.RefAttributes<HTMLDivElement>>;

package/es/@next/Steps/Step.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Typography } from '../Typography';
+import { CircleDiv, HorizontalLine, HorizontalLineWrapper, StepItemContainer, StepItemWrapper, VerticalLine, VerticalLineWrapper } from './StepStyle';
+import { Icon } from '../Icon';
+import { Neutral } from '../utilities/colors';
+var LineComponent = function LineComponent(_ref) {
+  var variant = _ref.variant,
+    type = _ref.type,
+    orientation = _ref.orientation;
+  if (orientation === 'vertical') {
+    return /*#__PURE__*/React.createElement(VerticalLineWrapper, {
+      "data-dot": type === 'dot'
+    }, /*#__PURE__*/React.createElement(VerticalLine, {
+      "data-variant": variant,
+      "data-dot": type === 'dot'
+    }));
+  }
+  return /*#__PURE__*/React.createElement(HorizontalLineWrapper, {
+    "data-dot": type === 'dot'
+  }, /*#__PURE__*/React.createElement(HorizontalLine, {
+    "data-variant": variant,
+    "data-dot": type === 'dot'
+  }));
+};
+export var Step = /*#__PURE__*/React.forwardRef(function Step(_ref2, ref) {
+  var _ref2$variant = _ref2.variant,
+    variant = _ref2$variant === void 0 ? 'pending' : _ref2$variant,
+    _ref2$label = _ref2.label,
+    label = _ref2$label === void 0 ? '' : _ref2$label,
+    _ref2$index = _ref2.index,
+    index = _ref2$index === void 0 ? 0 : _ref2$index,
+    _ref2$type = _ref2.type,
+    type = _ref2$type === void 0 ? 'normal' : _ref2$type,
+    _ref2$orientation = _ref2.orientation,
+    orientation = _ref2$orientation === void 0 ? 'vertical' : _ref2$orientation;
+  return /*#__PURE__*/React.createElement(StepItemContainer, {
+    className: "step-item-container",
+    "data-orientation": orientation
+  }, /*#__PURE__*/React.createElement(StepItemWrapper, {
+    ref: ref,
+    "data-dot": type === 'dot',
+    className: "step-item-wrapper"
+  }, /*#__PURE__*/React.createElement(CircleDiv, {
+    "data-variant": variant,
+    "data-dot": type === 'dot'
+  }, variant === 'completed' && /*#__PURE__*/React.createElement(Icon, {
+    name: "ri-check",
+    className: "circle-icon"
+  }), variant === 'error' && /*#__PURE__*/React.createElement(Icon, {
+    name: "ri-close",
+    className: "circle-icon"
+  }), variant === 'processing' && /*#__PURE__*/React.createElement(Typography, {
+    as: "span",
+    variant: "caption",
+    color: Neutral.B100,
+    className: "circle-icon"
+  }, index), variant === 'pending' && /*#__PURE__*/React.createElement(Typography, {
+    as: "span",
+    variant: "caption",
+    color: Neutral.B40,
+    className: "circle-icon"
+  }, index)), /*#__PURE__*/React.createElement(Typography, {
+    className: "step-label",
+    as: "div",
+    variant: variant === 'processing' || variant === 'error' ? 'body2' : 'body1',
+    color: variant === 'pending' || variant === 'completed' ? Neutral.B40 : Neutral.B18
+  }, label)), /*#__PURE__*/React.createElement(LineComponent, {
+    variant: variant,
+    type: type,
+    orientation: orientation
+  }));
+});

package/es/@next/Steps/StepStyle.d.ts

@@ -0,0 +1,8 @@
+export declare const StepsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StepItemContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StepItemWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CircleDiv: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const VerticalLineWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const HorizontalLineWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const VerticalLine: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const HorizontalLine: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/@next/Steps/StepStyle.js

@@ -0,0 +1,37 @@
+import styled from 'styled-components';
+import { Breakpoints } from '..';
+import { space4, space12, space16 } from '../utilities/spacing';
+import { Blue, Neutral, Red } from '../utilities/colors';
+import { borderRadiusHalf } from '../utilities/borderRadius';
+export var StepsContainer = styled.div.withConfig({
+  displayName: "StepStyle__StepsContainer",
+  componentId: "sc-1br2jzt-0"
+})(["&[data-orientation='horizontal']{display:flex;align-items:center;overflow-x:auto;}"]);
+export var StepItemContainer = styled.div.withConfig({
+  displayName: "StepStyle__StepItemContainer",
+  componentId: "sc-1br2jzt-1"
+})(["&:last-child > div:last-child{display:none;}&[data-orientation='horizontal']{display:flex;align-items:center;}"]);
+export var StepItemWrapper = styled.div.withConfig({
+  displayName: "StepStyle__StepItemWrapper",
+  componentId: "sc-1br2jzt-2"
+})(["display:flex;align-items:center;gap:", ";cursor:default;&[data-dot='true']{gap:", ";}.step-label{white-space:nowrap;}"], space12, space16);
+export var CircleDiv = styled.div.withConfig({
+  displayName: "StepStyle__CircleDiv",
+  componentId: "sc-1br2jzt-3"
+})(["display:flex;align-items:center;justify-content:center;height:28px;width:28px;border-radius:", ";flex-shrink:0;svg{height:16px;width:16px;}&[data-variant='pending']{background-color:", ";}&[data-variant='completed']{background-color:", ";svg{fill:", ";}}&[data-variant='processing']{background-color:", ";}&[data-variant='error']{background-color:", ";svg{fill:", ";}}&[data-dot='true']{height:10px;width:10px;> .circle-icon{display:none;}&[data-variant='completed']{background-color:", ";}}@media (max-width:", "){height:24px;width:24px;svg{height:14px;width:14px;}}"], borderRadiusHalf, Neutral.B95, Blue.S08, Blue.S99, Blue.S99, Red.B93, Neutral.B100, Blue.S99, Breakpoints.large);
+export var VerticalLineWrapper = styled.div.withConfig({
+  displayName: "StepStyle__VerticalLineWrapper",
+  componentId: "sc-1br2jzt-4"
+})(["display:flex;align-items:center;justify-content:center;padding:", " 0;height:64px;width:28px;&[data-dot='true']{width:10px;}@media (max-width:", "){width:24px;}"], space4, Breakpoints.large);
+export var HorizontalLineWrapper = styled.div.withConfig({
+  displayName: "StepStyle__HorizontalLineWrapper",
+  componentId: "sc-1br2jzt-5"
+})(["display:flex;align-items:center;justify-content:center;padding:0 ", ";width:105px;"], space12);
+export var VerticalLine = styled.div.withConfig({
+  displayName: "StepStyle__VerticalLine",
+  componentId: "sc-1br2jzt-6"
+})(["width:2px;height:100%;background-color:", ";&[data-variant='completed']{background-color:", ";}&[data-dot='true']{width:1.5px;}"], Neutral.B85, Blue.S99);
+export var HorizontalLine = styled.div.withConfig({
+  displayName: "StepStyle__HorizontalLine",
+  componentId: "sc-1br2jzt-7"
+})(["height:2px;width:100%;background-color:", ";&[data-variant='completed']{background-color:", ";}"], Neutral.B85, Blue.S99);

package/es/@next/Steps/Steps.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { StepProps } from './Step';
+export interface StepsProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Step index (1-indexed) marked as processing */
+    currentStep: number;
+    /** List of indexes (1-indexed) to be marked as error */
+    errorSteps?: number[];
+    /** Step components as child are required (1-indexed) */
+    children?: React.ReactElement<StepProps>[];
+    /** If dot type, display dot only; default is normal; automatically passed to all children */
+    type?: 'normal' | 'dot';
+    orientation?: 'vertical' | 'horizontal';
+}
+export declare const StepsComponent: React.ForwardRefExoticComponent<StepsProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Steps: React.ForwardRefExoticComponent<StepsProps & React.RefAttributes<HTMLDivElement>> & {
+    Step: React.ForwardRefExoticComponent<StepProps & React.RefAttributes<HTMLDivElement>>;
+};