glints-aries 4.1.3 → 4.1.5

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

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.SkeletonImageCircle = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _SkeletonImageStyle = require("./SkeletonImageStyle");
+var SkeletonImageCircle = function SkeletonImageCircle(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? '48px' : _ref$size;
+  return /*#__PURE__*/_react["default"].createElement(_SkeletonImageStyle.StyledSkeletonImageCircle, {
+    size: size
+  });
+};
+exports.SkeletonImageCircle = SkeletonImageCircle;

package/lib/@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/lib/@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/lib/@next/Skeleton/components/SkeletonImage/SkeletonImageSquare.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.SkeletonImageSquare = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _SkeletonImageStyle = require("./SkeletonImageStyle");
+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["default"].createElement(_SkeletonImageStyle.StyledSkeletonImageSquare, {
+    height: height,
+    width: width
+  });
+};
+exports.SkeletonImageSquare = SkeletonImageSquare;

package/lib/@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/lib/@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/lib/@next/Skeleton/components/SkeletonImage/SkeletonImageStyle.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.StyledSkeletonImageSquare = exports.StyledSkeletonImageCircle = exports.SkeletonImageContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _borderRadius = require("../../../utilities/borderRadius");
+var _SkeletonStyle = require("../../SkeletonStyle");
+var SkeletonImageContainer = _styledComponents["default"].div.withConfig({
+  displayName: "SkeletonImageStyle__SkeletonImageContainer",
+  componentId: "sc-1x8xyqg-0"
+})(["width:100%;"]);
+exports.SkeletonImageContainer = SkeletonImageContainer;
+var StyledSkeletonImageCircle = _styledComponents["default"].div.withConfig({
+  displayName: "SkeletonImageStyle__StyledSkeletonImageCircle",
+  componentId: "sc-1x8xyqg-1"
+})(["width:", ";height:", ";border-radius:", ";", ""], function (props) {
+  return props.size;
+}, function (props) {
+  return props.size;
+}, _borderRadius.borderRadiusHalf, _SkeletonStyle.SkeletonShimmer);
+exports.StyledSkeletonImageCircle = StyledSkeletonImageCircle;
+var StyledSkeletonImageSquare = _styledComponents["default"].div.withConfig({
+  displayName: "SkeletonImageStyle__StyledSkeletonImageSquare",
+  componentId: "sc-1x8xyqg-2"
+})(["width:", ";height:", ";", ""], function (props) {
+  return props.width;
+}, function (props) {
+  return props.height;
+}, _SkeletonStyle.SkeletonShimmer);
+exports.StyledSkeletonImageSquare = StyledSkeletonImageSquare;

package/lib/@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/lib/@next/Skeleton/components/SkeletonText/SkeletonText.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.SkeletonText = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _SkeletonTextStyle = require("./SkeletonTextStyle");
+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["default"].createElement(_SkeletonTextStyle.StyledSkeletonText, {
+        key: "skeleton-text-" + index,
+        width: (row == null ? void 0 : row.width) || defaultWidth,
+        variant: (row == null ? void 0 : row.variant) || defaultVariant
+      });
+    });
+  };
+  return /*#__PURE__*/_react["default"].createElement(_SkeletonTextStyle.SkeletonTextContainer, {
+    className: className
+  }, renderRows());
+};
+exports.SkeletonText = SkeletonText;

package/lib/@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/lib/@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/lib/@next/Skeleton/components/SkeletonText/SkeletonTextStyle.js

@@ -0,0 +1,39 @@
+"use strict";
+
+exports.__esModule = true;
+exports.StyledSkeletonText = exports.SkeletonTextContainer = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var Breakpoints = _interopRequireWildcard(require("../../../utilities/breakpoints"));
+var _spacing = require("../../../utilities/spacing");
+var _SkeletonStyle = require("../../SkeletonStyle");
+var _variantHeightMapping;
+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)(["height:84px;@media (max-width:", "){height:36px;}"], Breakpoints.large);
+var headline2 = (0, _styledComponents.css)(["height:75px;@media (max-width:", "){height:32px;}"], Breakpoints.large);
+var headline3 = (0, _styledComponents.css)(["height:54px;@media (max-width:", "){height:28px;}"], Breakpoints.large);
+var headline4 = (0, _styledComponents.css)(["height:42px;@media (max-width:", "){height:24px;}"], Breakpoints.large);
+var headline5 = (0, _styledComponents.css)(["height:39px;@media (max-width:", "){height:20px;}"], Breakpoints.large);
+var headline6 = (0, _styledComponents.css)(["height:36px;@media (max-width:", "){height:18px;}"], Breakpoints.large);
+var subtitle1 = (0, _styledComponents.css)(["height:32px;@media (max-width:", "){height:16px;}"], Breakpoints.large);
+var subtitle2 = (0, _styledComponents.css)(["height:21px;@media (max-width:", "){height:18px;}"], Breakpoints.large);
+var body1 = (0, _styledComponents.css)(["height:24px;@media (max-width:", "){height:21px;}"], Breakpoints.large);
+var body2 = (0, _styledComponents.css)(["height:24px;@media (max-width:", "){height:21px;}"], Breakpoints.large);
+var button = (0, _styledComponents.css)(["height:14px;"]);
+var caption = (0, _styledComponents.css)(["height:20px;@media (max-width:", "){height:17px;}"], Breakpoints.large);
+var overline = (0, _styledComponents.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);
+var StyledSkeletonText = _styledComponents["default"].li.withConfig({
+  displayName: "SkeletonTextStyle__StyledSkeletonText",
+  componentId: "sc-ym0kos-0"
+})(["", " width:", ";", ""], function (props) {
+  return variantHeightMapping[props.variant];
+}, function (props) {
+  return props.width;
+}, _SkeletonStyle.SkeletonShimmer);
+exports.StyledSkeletonText = StyledSkeletonText;
+var SkeletonTextContainer = _styledComponents["default"].ul.withConfig({
+  displayName: "SkeletonTextStyle__SkeletonTextContainer",
+  componentId: "sc-ym0kos-1"
+})(["list-style:none;width:100%;li:not(:last-child){margin-bottom:", ";}"], _spacing.space4);
+exports.SkeletonTextContainer = SkeletonTextContainer;

package/lib/@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/lib/@next/Skeleton/components/index.js

@@ -0,0 +1,10 @@
+"use strict";
+
+exports.__esModule = true;
+exports.SkeletonText = exports.SkeletonImageSquare = exports.SkeletonImageCircle = void 0;
+var _SkeletonText = require("./SkeletonText/SkeletonText");
+exports.SkeletonText = _SkeletonText.SkeletonText;
+var _SkeletonImageCircle = require("./SkeletonImage/SkeletonImageCircle");
+exports.SkeletonImageCircle = _SkeletonImageCircle.SkeletonImageCircle;
+var _SkeletonImageSquare = require("./SkeletonImage/SkeletonImageSquare");
+exports.SkeletonImageSquare = _SkeletonImageSquare.SkeletonImageSquare;

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

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

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

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

package/lib/@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/lib/@next/Spinner/Spinner.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.Spinner = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireDefault(require("react"));
+var _Icon = require("../Icon");
+var _SpinnerStyle = require("./SpinnerStyle");
+var _excluded = ["label", "size"];
+var _iconSizeMapping, _labelVariantMapping;
+var iconSizeMapping = (_iconSizeMapping = {}, _iconSizeMapping['small'] = '18px', _iconSizeMapping['large'] = '48px', _iconSizeMapping);
+var labelVariantMapping = (_labelVariantMapping = {}, _labelVariantMapping['small'] = 'body1', _labelVariantMapping['large'] = 'subtitle1', _labelVariantMapping);
+var Spinner = function Spinner(_ref) {
+  var label = _ref.label,
+    size = _ref.size,
+    props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement(_SpinnerStyle.StyledWrapper, {
+    className: "spinner-container"
+  }, /*#__PURE__*/_react["default"].createElement(_Icon.Icon, (0, _extends2["default"])({
+    name: "ri-loader",
+    height: iconSizeMapping[size],
+    width: iconSizeMapping[size]
+  }, props)), label && /*#__PURE__*/_react["default"].createElement(_SpinnerStyle.Label, {
+    variant: labelVariantMapping[size],
+    "data-size": size
+  }, label));
+};
+exports.Spinner = Spinner;

package/lib/@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/lib/@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/lib/@next/Spinner/SpinnerStyle.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.StyledWrapper = exports.Label = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _Typography = require("../Typography");
+var _spacing = require("../utilities/spacing");
+var StyledWrapper = _styledComponents["default"].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;}"]);
+exports.StyledWrapper = StyledWrapper;
+var Label = (0, _styledComponents["default"])(_Typography.Typography).withConfig({
+  displayName: "SpinnerStyle__Label",
+  componentId: "sc-1rqoa36-1"
+})(["margin-bottom:0;&[data-size='large']{margin-top:", ";}&[data-size='small']{margin-top:", ";}"], _spacing.space16, _spacing.space4);
+exports.Label = Label;

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

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

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

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

package/lib/@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/lib/@next/Steps/Step.js

@@ -0,0 +1,78 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.Step = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Typography = require("../Typography");
+var _StepStyle = require("./StepStyle");
+var _Icon = require("../Icon");
+var _colors = require("../utilities/colors");
+var LineComponent = function LineComponent(_ref) {
+  var variant = _ref.variant,
+    type = _ref.type,
+    orientation = _ref.orientation;
+  if (orientation === 'vertical') {
+    return /*#__PURE__*/_react["default"].createElement(_StepStyle.VerticalLineWrapper, {
+      "data-dot": type === 'dot'
+    }, /*#__PURE__*/_react["default"].createElement(_StepStyle.VerticalLine, {
+      "data-variant": variant,
+      "data-dot": type === 'dot'
+    }));
+  }
+  return /*#__PURE__*/_react["default"].createElement(_StepStyle.HorizontalLineWrapper, {
+    "data-dot": type === 'dot'
+  }, /*#__PURE__*/_react["default"].createElement(_StepStyle.HorizontalLine, {
+    "data-variant": variant,
+    "data-dot": type === 'dot'
+  }));
+};
+var Step = /*#__PURE__*/_react["default"].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["default"].createElement(_StepStyle.StepItemContainer, {
+    className: "step-item-container",
+    "data-orientation": orientation
+  }, /*#__PURE__*/_react["default"].createElement(_StepStyle.StepItemWrapper, {
+    ref: ref,
+    "data-dot": type === 'dot',
+    className: "step-item-wrapper"
+  }, /*#__PURE__*/_react["default"].createElement(_StepStyle.CircleDiv, {
+    "data-variant": variant,
+    "data-dot": type === 'dot'
+  }, variant === 'completed' && /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
+    name: "ri-check",
+    className: "circle-icon"
+  }), variant === 'error' && /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
+    name: "ri-close",
+    className: "circle-icon"
+  }), variant === 'processing' && /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+    as: "span",
+    variant: "caption",
+    color: _colors.Neutral.B100,
+    className: "circle-icon"
+  }, index), variant === 'pending' && /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+    as: "span",
+    variant: "caption",
+    color: _colors.Neutral.B40,
+    className: "circle-icon"
+  }, index)), /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+    className: "step-label",
+    as: "div",
+    variant: variant === 'processing' || variant === 'error' ? 'body2' : 'body1',
+    color: variant === 'pending' || variant === 'completed' ? _colors.Neutral.B40 : _colors.Neutral.B18
+  }, label)), /*#__PURE__*/_react["default"].createElement(LineComponent, {
+    variant: variant,
+    type: type,
+    orientation: orientation
+  }));
+});
+exports.Step = Step;

package/lib/@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/lib/@next/Steps/StepStyle.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.VerticalLineWrapper = exports.VerticalLine = exports.StepsContainer = exports.StepItemWrapper = exports.StepItemContainer = exports.HorizontalLineWrapper = exports.HorizontalLine = exports.CircleDiv = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _ = require("..");
+var _spacing = require("../utilities/spacing");
+var _colors = require("../utilities/colors");
+var _borderRadius = require("../utilities/borderRadius");
+var StepsContainer = _styledComponents["default"].div.withConfig({
+  displayName: "StepStyle__StepsContainer",
+  componentId: "sc-1br2jzt-0"
+})(["&[data-orientation='horizontal']{display:flex;align-items:center;overflow-x:auto;}"]);
+exports.StepsContainer = StepsContainer;
+var StepItemContainer = _styledComponents["default"].div.withConfig({
+  displayName: "StepStyle__StepItemContainer",
+  componentId: "sc-1br2jzt-1"
+})(["&:last-child > div:last-child{display:none;}&[data-orientation='horizontal']{display:flex;align-items:center;}"]);
+exports.StepItemContainer = StepItemContainer;
+var StepItemWrapper = _styledComponents["default"].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;}"], _spacing.space12, _spacing.space16);
+exports.StepItemWrapper = StepItemWrapper;
+var CircleDiv = _styledComponents["default"].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;}}"], _borderRadius.borderRadiusHalf, _colors.Neutral.B95, _colors.Blue.S08, _colors.Blue.S99, _colors.Blue.S99, _colors.Red.B93, _colors.Neutral.B100, _colors.Blue.S99, _.Breakpoints.large);
+exports.CircleDiv = CircleDiv;
+var VerticalLineWrapper = _styledComponents["default"].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;}"], _spacing.space4, _.Breakpoints.large);
+exports.VerticalLineWrapper = VerticalLineWrapper;
+var HorizontalLineWrapper = _styledComponents["default"].div.withConfig({
+  displayName: "StepStyle__HorizontalLineWrapper",
+  componentId: "sc-1br2jzt-5"
+})(["display:flex;align-items:center;justify-content:center;padding:0 ", ";width:105px;"], _spacing.space12);
+exports.HorizontalLineWrapper = HorizontalLineWrapper;
+var VerticalLine = _styledComponents["default"].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;}"], _colors.Neutral.B85, _colors.Blue.S99);
+exports.VerticalLine = VerticalLine;
+var HorizontalLine = _styledComponents["default"].div.withConfig({
+  displayName: "StepStyle__HorizontalLine",
+  componentId: "sc-1br2jzt-7"
+})(["height:2px;width:100%;background-color:", ";&[data-variant='completed']{background-color:", ";}"], _colors.Neutral.B85, _colors.Blue.S99);
+exports.HorizontalLine = HorizontalLine;

package/lib/@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>>;
+};

package/lib/@next/Steps/Steps.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.StepsComponent = exports.Steps = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireDefault(require("react"));
+var _Step = require("./Step");
+var _StepStyle = require("./StepStyle");
+var _excluded = ["currentStep", "errorSteps", "children", "type", "orientation"];
+var StepsComponent = /*#__PURE__*/_react["default"].forwardRef(function Collapse(_ref, ref) {
+  var _ref$currentStep = _ref.currentStep,
+    currentStep = _ref$currentStep === void 0 ? 0 : _ref$currentStep,
+    _ref$errorSteps = _ref.errorSteps,
+    errorSteps = _ref$errorSteps === void 0 ? [] : _ref$errorSteps,
+    children = _ref.children,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'normal' : _ref$type,
+    _ref$orientation = _ref.orientation,
+    orientation = _ref$orientation === void 0 ? 'vertical' : _ref$orientation,
+    props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement(_StepStyle.StepsContainer, (0, _extends2["default"])({
+    "data-orientation": orientation,
+    ref: ref
+  }, props), _react["default"].Children.map(children, function (child, index) {
+    var _child$props, _child$props2;
+    var variant = errorSteps.includes(index + 1) ? 'error' : index + 1 === currentStep ? 'processing' : index + 1 < currentStep ? 'completed' : 'pending';
+    var childVariant = ((_child$props = child.props) == null ? void 0 : _child$props.variant) || variant;
+    var childIndex = ((_child$props2 = child.props) == null ? void 0 : _child$props2.index) || index + 1;
+    return /*#__PURE__*/_react["default"].createElement(child.type, (0, _extends2["default"])({}, child.props, {
+      orientation: orientation,
+      variant: childVariant,
+      index: childIndex,
+      type: type
+    }));
+  }));
+});
+exports.StepsComponent = StepsComponent;
+var Steps = Object.assign(StepsComponent, {
+  Step: _Step.Step
+});
+exports.Steps = Steps;

package/lib/@next/Steps/Steps.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;

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

@@ -0,0 +1,2 @@
+export type { StepsProps } from './Steps';
+export { Steps } from './Steps';

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

@@ -0,0 +1,6 @@
+"use strict";
+
+exports.__esModule = true;
+exports.Steps = void 0;
+var _Steps = require("./Steps");
+exports.Steps = _Steps.Steps;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+    checked?: boolean;
+    disabled?: boolean;
+    onChange: () => void;
+    value: string;
+    withIcon?: boolean;
+    checkedText?: string;
+    uncheckedText?: string;
+    checkedBackgroundColor?: string;
+}
+export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;