glints-aries 4.1.3 → 4.1.5

package/es/@next/Avatar/Avatar.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/es/@next/Avatar/AvatarStyle.d.ts

@@ -0,0 +1,2 @@
+import { AvatarProps } from './Avatar';
+export declare const AvatarStyle: import("styled-components").StyledComponent<"div", any, AvatarProps, never>;

package/es/@next/Avatar/AvatarStyle.js

@@ -0,0 +1,34 @@
+var _avatarBackgroundColo, _avatarSizeVariant;
+import styled from 'styled-components';
+import * as Breakpoints from '../utilities/breakpoints';
+import { Blue, Green, Neutral, Orange, Red } from '../utilities/colors';
+var mediumAvatarSizeStyle = "\n  width: 40px;\n  height: 40px;\n  \n  @media (max-width: " + Breakpoints.large + ") {\n    width: 32px;\n    height: 32px;\n  }\n";
+var largeAvatarSizeStyle = "\n  width: 60px;\n  height: 60px;\n\n  @media (max-width: " + Breakpoints.large + ") {\n    width: 40px;\n    height: 40px;\n  }\n";
+var avatarBackgroundColor = (_avatarBackgroundColo = {}, _avatarBackgroundColo['supplementary'] = Neutral.B99, _avatarBackgroundColo['warning'] = Orange.S21, _avatarBackgroundColo['danger'] = Red.B100, _avatarBackgroundColo['success'] = Green.B89, _avatarBackgroundColo['outstanding'] = Blue.S08, _avatarBackgroundColo);
+var avatarSizeVariant = (_avatarSizeVariant = {}, _avatarSizeVariant['large'] = largeAvatarSizeStyle, _avatarSizeVariant['medium'] = mediumAvatarSizeStyle, _avatarSizeVariant);
+var getAvatarBackgroundColor = function getAvatarBackgroundColor(variant) {
+  if (!(variant in avatarBackgroundColor)) {
+    console.warn(variant + " is not a valid variant for the background color, default will be used");
+    return avatarBackgroundColor['supplementary'];
+  }
+  return avatarBackgroundColor[variant];
+};
+var getAvatarSizeStyle = function getAvatarSizeStyle(sizeVariant) {
+  if (!(sizeVariant in avatarSizeVariant)) {
+    console.warn(sizeVariant + " is not a valid variant for the size, default will be used");
+    return avatarSizeVariant['medium'];
+  }
+  return avatarSizeVariant[sizeVariant];
+};
+export var AvatarStyle = styled.div.withConfig({
+  displayName: "AvatarStyle",
+  componentId: "sc-1ry54fi-0"
+})(["", " ", " display:flex;align-items:center;justify-content:center;border-radius:50%;"], function (_ref) {
+  var size = _ref.size;
+  return getAvatarSizeStyle(size);
+}, function (_ref2) {
+  var variant = _ref2.variant;
+  return {
+    'background-color': getAvatarBackgroundColor(variant)
+  };
+});

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

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

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

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

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

@@ -0,0 +1,11 @@
+import React from 'react';
+declare const badgeStatusVariant: readonly ["neutral", "success", "successBright", "information", "warning", "critical", "promotion", "enticing", "attention", "primary"];
+export declare type BadgeStatusVariant = (typeof badgeStatusVariant)[number];
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+    hasBorder?: boolean;
+    status?: BadgeStatusVariant;
+    textColor?: string;
+}
+export declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/es/@next/Badge/Badge.js

@@ -0,0 +1,30 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["children", "hasBorder", "status", "textColor"];
+import React from 'react';
+import { Typography } from '../Typography';
+import { BadgeStyle, badgeTextColor } from './BadgeStyle';
+var badgeStatusVariant = ['neutral', 'success', 'successBright', 'information', 'warning', 'critical', 'promotion', 'enticing', 'attention', 'primary'];
+var renderTextColor = function renderTextColor(textColor, status) {
+  if (textColor) {
+    return textColor;
+  }
+  return badgeTextColor[status];
+};
+export var Badge = /*#__PURE__*/React.forwardRef(function Badge(_ref, ref) {
+  var children = _ref.children,
+    hasBorder = _ref.hasBorder,
+    status = _ref.status,
+    textColor = _ref.textColor,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var content = typeof children === 'string' || typeof children === 'number' ? /*#__PURE__*/React.createElement(Typography, {
+    variant: "overline",
+    color: renderTextColor(textColor, status),
+    as: 'span'
+  }, children) : children;
+  return /*#__PURE__*/React.createElement(BadgeStyle, _extends({
+    ref: ref,
+    status: status ? status : 'neutral',
+    "data-border": hasBorder
+  }, props), /*#__PURE__*/React.createElement("div", null, content));
+});

package/es/@next/Badge/Badge.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 Interactive: any;
+export declare const WithBorder: any;

package/es/@next/Badge/BadgeStyle.d.ts

@@ -0,0 +1,5 @@
+import { BadgeProps, BadgeStatusVariant } from './Badge';
+export declare const badgeTextColor: {
+    [variant in BadgeStatusVariant]: string;
+};
+export declare const BadgeStyle: import("styled-components").StyledComponent<"div", any, BadgeProps, never>;

package/es/@next/Badge/BadgeStyle.js

@@ -0,0 +1,23 @@
+var _badgeBackgroundColor, _badgeTextColor;
+import styled from 'styled-components';
+import { borderRadius20 } from '../utilities/borderRadius';
+import { Blue, Green, Neutral, Orange, Red, Yellow } from '../utilities/colors';
+import { space8 } from '../utilities/spacing';
+var badgeBackgroundColor = (_badgeBackgroundColor = {}, _badgeBackgroundColor['neutral'] = Neutral.B95, _badgeBackgroundColor['success'] = Green.B89, _badgeBackgroundColor['successBright'] = Green.B61, _badgeBackgroundColor['information'] = Blue.S08, _badgeBackgroundColor['warning'] = Orange.S21, _badgeBackgroundColor['critical'] = Red.B100, _badgeBackgroundColor['promotion'] = Yellow.S75, _badgeBackgroundColor['enticing'] = Orange.S87, _badgeBackgroundColor['attention'] = Red.B93, _badgeBackgroundColor['primary'] = Blue.S99, _badgeBackgroundColor);
+export var badgeTextColor = (_badgeTextColor = {}, _badgeTextColor['neutral'] = Neutral.B18, _badgeTextColor['success'] = Neutral.B18, _badgeTextColor['successBright'] = Neutral.B100, _badgeTextColor['information'] = Neutral.B18, _badgeTextColor['warning'] = Neutral.B18, _badgeTextColor['critical'] = Neutral.B18, _badgeTextColor['promotion'] = Neutral.B18, _badgeTextColor['enticing'] = Neutral.B100, _badgeTextColor['attention'] = Neutral.B100, _badgeTextColor['primary'] = Neutral.B100, _badgeTextColor);
+var getBadgeBackgroundColor = function getBadgeBackgroundColor(status) {
+  if (!(status in badgeBackgroundColor)) {
+    console.warn(status + " is not a valid status, default will be used");
+    return badgeBackgroundColor['neutral'];
+  }
+  return badgeBackgroundColor[status];
+};
+export var BadgeStyle = styled.div.withConfig({
+  displayName: "BadgeStyle",
+  componentId: "sc-qx6mou-0"
+})(["", " width:fit-content;padding:2px ", ";border-radius:", ";line-height:0;&[data-border='true']{border:1px solid ", ";}"], function (_ref) {
+  var status = _ref.status;
+  return {
+    'background-color': getBadgeBackgroundColor(status)
+  };
+}, space8, borderRadius20, Neutral.B100);

package/es/@next/Badge/FloatingBadge.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/es/@next/Badge/FloatingBadgeSyle.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const StyledBadge: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("./Badge").BadgeProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;

package/es/@next/Badge/FloatingBadgeSyle.js

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+import { Badge } from '../Badge';
+export var StyledBadge = styled(Badge).withConfig({
+  displayName: "FloatingBadgeSyle__StyledBadge",
+  componentId: "sc-1w6mukf-0"
+})(["position:absolute;z-index:2;top:-10px;right:-16px;"]);

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

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

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

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

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { IconNames } from '../Icon/icons/icons';
+export interface BannerProps extends React.HTMLAttributes<HTMLDivElement> {
+    title?: string;
+    /** If set will take precedent of status */
+    iconName?: IconNames;
+    status?: 'success' | 'info' | 'warning' | 'critical';
+    children?: React.ReactNode;
+    action?: React.ReactNode;
+    secondaryAction?: React.ReactNode;
+    dismissable?: boolean;
+    onDismiss?: () => void;
+    type?: 'static' | 'fixed';
+    showIcon?: boolean;
+}
+export declare const Banner: React.ForwardRefExoticComponent<BannerProps & React.RefAttributes<HTMLDivElement>>;

package/es/@next/Banner/Banner.js

@@ -0,0 +1,88 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["title", "status", "iconName", "children", "action", "secondaryAction", "dismissable", "onDismiss", "type", "showIcon"];
+import React from 'react';
+import { ButtonGroup } from '../ButtonGroup';
+import { Icon } from '../Icon';
+import { Typography } from '../Typography';
+import { StyledBanner, StyledBannerContentContainer, StyledBannerTitle, StyledBannerTitleContainer, StyledCloseIconWrapper } from './BannerStyle';
+import { StyledFixedBanner, StyledFixedIconWrapper, StyledFixedBannerContentContainer, StyledFixedBannerButtonContainer, StyledFixedCloseIconWrapper } from './FixedBannerStyle';
+var iconNameStatusMap = {
+  success: 'ri-checkbox-circle-fill',
+  info: 'ri-information-fill',
+  warning: 'ri-error-warning-fill',
+  critical: 'ri-error-warning-fill'
+};
+export var Banner = /*#__PURE__*/React.forwardRef(function Banner(_ref, ref) {
+  var title = _ref.title,
+    status = _ref.status,
+    iconName = _ref.iconName,
+    children = _ref.children,
+    action = _ref.action,
+    secondaryAction = _ref.secondaryAction,
+    _ref$dismissable = _ref.dismissable,
+    dismissable = _ref$dismissable === void 0 ? true : _ref$dismissable,
+    onDismiss = _ref.onDismiss,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'static' : _ref$type,
+    _ref$showIcon = _ref.showIcon,
+    showIcon = _ref$showIcon === void 0 ? true : _ref$showIcon,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var iconByStatus = iconNameStatusMap[status];
+  if (!iconByStatus) {
+    console.warn("Status " + status + " is not valid, default style will be used");
+  }
+  var iconNameValue = iconName ? iconName : iconByStatus || iconNameStatusMap['info'];
+  var actionComponent = /*#__PURE__*/React.createElement(React.Fragment, null, (action || secondaryAction) && /*#__PURE__*/React.createElement(ButtonGroup, null, action, secondaryAction));
+  if (type === 'static') return /*#__PURE__*/React.createElement(StyledBanner, _extends({
+    ref: ref,
+    "data-titled": !!title,
+    "data-status": status
+  }, props), /*#__PURE__*/React.createElement(StyledBannerTitleContainer, null, showIcon && /*#__PURE__*/React.createElement(Icon, {
+    name: iconNameValue
+  }), title && /*#__PURE__*/React.createElement(StyledBannerTitle, {
+    "data-show-icon": showIcon
+  }, /*#__PURE__*/React.createElement(Typography, {
+    as: "span",
+    variant: "subtitle1"
+  }, title)), dismissable && /*#__PURE__*/React.createElement(StyledCloseIconWrapper, {
+    role: "button",
+    onClick: function onClick() {
+      return onDismiss == null ? void 0 : onDismiss();
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ri-close"
+  }))), /*#__PURE__*/React.createElement(StyledBannerContentContainer, {
+    "data-show-icon": showIcon
+  }, /*#__PURE__*/React.createElement(Typography, {
+    as: "div",
+    variant: "body1"
+  }, children)), /*#__PURE__*/React.createElement(StyledBannerContentContainer, {
+    "data-show-icon": showIcon
+  }, actionComponent));
+  return /*#__PURE__*/React.createElement(StyledFixedBanner, _extends({
+    ref: ref,
+    "data-status": status,
+    "data-nobutton": action ? '' : 'true'
+  }, props), showIcon && /*#__PURE__*/React.createElement(StyledFixedIconWrapper, {
+    "data-status": status
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: iconNameValue
+  })), /*#__PURE__*/React.createElement(StyledFixedBannerContentContainer, {
+    "data-show-icon": showIcon,
+    "data-has-action": !!(action || secondaryAction),
+    "data-dismissable": dismissable
+  }, /*#__PURE__*/React.createElement(Typography, {
+    as: "div",
+    variant: "body2"
+  }, children)), /*#__PURE__*/React.createElement(StyledFixedBannerButtonContainer, {
+    "data-show-icon": showIcon
+  }, actionComponent), dismissable && /*#__PURE__*/React.createElement(StyledFixedCloseIconWrapper, {
+    role: "button",
+    onClick: function onClick() {
+      return onDismiss == null ? void 0 : onDismiss();
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ri-close"
+  })));
+});

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

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

package/es/@next/Banner/BannerStyle.d.ts

@@ -0,0 +1,5 @@
+export declare const StyledCloseIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledBanner: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledBannerContentContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledBannerTitleContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledBannerTitle: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/@next/Banner/BannerStyle.js

@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+import * as Breakpoints from '../utilities/breakpoints';
+import { borderRadius8 } from '../utilities/borderRadius';
+import { Blue, Green, Neutral, Orange, Red } from '../utilities/colors';
+import { space4 } from '../utilities/spacing';
+export var StyledCloseIconWrapper = styled.div.withConfig({
+  displayName: "BannerStyle__StyledCloseIconWrapper",
+  componentId: "sc-1suv683-0"
+})(["cursor:pointer;&&& svg{right:0;top:0;fill:", ";}@media (max-width:", "){&&& svg{top:-1px;}}"], Neutral.B40, Breakpoints.large);
+export var StyledBanner = styled.div.withConfig({
+  displayName: "BannerStyle__StyledBanner",
+  componentId: "sc-1suv683-1"
+})(["min-height:100px;padding:20px;background:", ";color:", ";border:1px solid ", ";border-radius:", ";&[data-titled='true'] svg{top:3px;}&[data-status='success']{background:", ";border:1px solid ", ";}&[data-status='success'] svg{fill:", ";}&[data-status='info']{background:", ";border:1px solid ", ";}&[data-status='info'] svg{fill:", ";}&[data-status='warning']{background:", ";border:1px solid ", ";}&[data-status='warning'] svg{fill:", ";}&[data-status='critical']{background:", ";border:1px solid ", ";}&[data-status='critical'] svg{fill:", ";}@media (max-width:", "){min-height:89px;&[data-titled='true'] svg{top:0;}}"], Neutral.B99, Neutral.B18, Neutral.B68, borderRadius8, Green.B89, Neutral.B68, Green.B61, Blue.S08, Blue.S99, Blue.S99, Orange.S21, Orange.S86, Orange.S87, Red.B100, Red.B93, Red.B93, Breakpoints.large);
+export var StyledBannerContentContainer = styled.div.withConfig({
+  displayName: "BannerStyle__StyledBannerContentContainer",
+  componentId: "sc-1suv683-2"
+})(["&[data-show-icon='true']{padding-left:40px;}button{margin-top:10px;}"]);
+export var StyledBannerTitleContainer = styled.div.withConfig({
+  displayName: "BannerStyle__StyledBannerTitleContainer",
+  componentId: "sc-1suv683-3"
+})(["position:relative;svg{position:absolute;fill:", ";height:24px;width:24px;top:0;}"], Neutral.B40);
+export var StyledBannerTitle = styled.div.withConfig({
+  displayName: "BannerStyle__StyledBannerTitle",
+  componentId: "sc-1suv683-4"
+})(["margin-bottom:", ";&[data-show-icon='true']{padding-left:40px;}button{margin-top:10px;}"], space4);

package/es/@next/Banner/FixedBannerStyle.d.ts

@@ -0,0 +1,5 @@
+export declare const StyledFixedBanner: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledFixedIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledFixedBannerContentContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledFixedBannerButtonContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledFixedCloseIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/@next/Banner/FixedBannerStyle.js

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+import * as Breakpoints from '../utilities/breakpoints';
+import { Blue, Green, Neutral, Orange, Red } from '../utilities/colors';
+export var StyledFixedBanner = styled.div.withConfig({
+  displayName: "FixedBannerStyle__StyledFixedBanner",
+  componentId: "sc-1clh4a2-0"
+})(["position:fixed;left:0;right:0;min-height:56px;display:flex;justify-content:center;align-items:center;padding-inline:48px;background:", ";color:", ";svg{position:static;fill:", ";height:24px;width:24px;margin-top:2px;}&[data-status='success']{background:", ";}&[data-status='info']{background:", ";}&[data-status='warning']{background:", ";}&[data-status='critical']{background:", ";}@media (max-width:", "){padding:16px;min-height:100px;justify-content:flex-start;align-items:flex-start;svg{margin-top:-2px;}&[data-nobutton='true']{min-height:52px;}}"], Neutral.B99, Neutral.B18, Neutral.B40, Green.B89, Blue.S08, Orange.S21, Red.B100, Breakpoints.large);
+export var StyledFixedIconWrapper = styled.div.withConfig({
+  displayName: "FixedBannerStyle__StyledFixedIconWrapper",
+  componentId: "sc-1clh4a2-1"
+})(["padding-right:12px;&[data-status='success'] svg{fill:", ";}&[data-status='info'] svg{fill:", ";}&[data-status='warning'] svg{fill:", ";}&[data-status='critical'] svg{fill:", ";}@media (max-width:", "){position:absolute;left:16px;top:16px;}"], Green.B61, Blue.S99, Orange.S87, Red.B93, Breakpoints.large);
+export var StyledFixedBannerContentContainer = styled.div.withConfig({
+  displayName: "FixedBannerStyle__StyledFixedBannerContentContainer",
+  componentId: "sc-1clh4a2-2"
+})(["padding-right:16px;@media (max-width:", "){padding-left:36px;padding-right:0px;&[data-dismissable='true']{padding-right:36px;}&[data-has-action='true']{padding-bottom:52px;}&:not([data-show-icon='true']){padding-left:0px;}}"], Breakpoints.large);
+export var StyledFixedBannerButtonContainer = styled.div.withConfig({
+  displayName: "FixedBannerStyle__StyledFixedBannerButtonContainer",
+  componentId: "sc-1clh4a2-3"
+})(["@media (max-width:", "){position:absolute;bottom:16px;left:52px;&:not([data-show-icon='true']){left:16px;}}"], Breakpoints.large);
+export var StyledFixedCloseIconWrapper = styled.div.withConfig({
+  displayName: "FixedBannerStyle__StyledFixedCloseIconWrapper",
+  componentId: "sc-1clh4a2-4"
+})(["cursor:pointer;position:absolute;color:", ";right:48px;padding-left:16px;svg{fill:", ";}@media (max-width:", "){top:16px;right:16px;}"], Neutral.B40, Neutral.B40, Breakpoints.large);

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

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

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

@@ -0,0 +1 @@
+export { Banner } from './Banner';

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ComponentAction } from '../../types/componentAction';
+export declare type BarProps = {
+    heading: React.ReactNode;
+    subheading?: React.ReactNode;
+    primaryAction?: ComponentAction;
+    secondaryAction?: ComponentAction;
+    tertiaryAction?: ComponentAction;
+    position?: 'top' | 'bottom';
+    showBackButton?: boolean;
+    onBack?: () => void;
+    customActionGroup?: React.ReactNode;
+};
+export declare const Bar: React.ForwardRefExoticComponent<BarProps & React.RefAttributes<HTMLDivElement>>;

package/es/@next/Bar/Bar.js

@@ -0,0 +1,67 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["onClick", "action"];
+import React from 'react';
+import { Breakpoints, Colors } from '..';
+import { Button, PrimaryButton } from '../Button';
+import { ButtonGroup } from '../ButtonGroup';
+import { Icon } from '../Icon';
+import { Typography } from '../Typography';
+import { StyledBarActionWrapper, StyledBar, StyledBarHeaderWrapper, StyledBarContainer, StyledButtonContainer } from './BarStyle';
+import { useWindowSize } from './useWindowSize';
+export var Bar = /*#__PURE__*/React.forwardRef(function Bar(_ref, ref) {
+  var heading = _ref.heading,
+    subheading = _ref.subheading,
+    primaryAction = _ref.primaryAction,
+    secondaryAction = _ref.secondaryAction,
+    tertiaryAction = _ref.tertiaryAction,
+    position = _ref.position,
+    _ref$showBackButton = _ref.showBackButton,
+    showBackButton = _ref$showBackButton === void 0 ? false : _ref$showBackButton,
+    onBack = _ref.onBack,
+    customActionGroup = _ref.customActionGroup;
+  var headerMarkup = function headerMarkup() {
+    if (subheading) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, {
+        as: "div",
+        variant: "body2",
+        color: Colors.Neutral.B18
+      }, heading), /*#__PURE__*/React.createElement(Typography, {
+        as: "div",
+        variant: "subtitle2",
+        color: Colors.Neutral.B40
+      }, subheading));
+    }
+    return /*#__PURE__*/React.createElement(Typography, {
+      as: "div",
+      variant: "headline6",
+      color: Colors.Neutral.B18
+    }, heading);
+  };
+  var _useWindowSize = useWindowSize(),
+    width = _useWindowSize.width;
+  var breakpointWidth = parseInt(Breakpoints.large.slice(0, -2));
+  var buttonSize = width <= breakpointWidth ? 'default' : 'large';
+  function makeButtonProps(buttonAction) {
+    var onClick = buttonAction.onClick,
+      action = buttonAction.action,
+      otherProps = _objectWithoutPropertiesLoose(buttonAction, _excluded);
+    return _extends({
+      onClick: onClick || action
+    }, otherProps);
+  }
+  return /*#__PURE__*/React.createElement(StyledBar, {
+    "data-align": position,
+    ref: ref
+  }, /*#__PURE__*/React.createElement(StyledBarContainer, null, showBackButton && /*#__PURE__*/React.createElement(StyledButtonContainer, {
+    onClick: onBack
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ri-arrow-left-line"
+  })), /*#__PURE__*/React.createElement(StyledBarHeaderWrapper, null, headerMarkup(), " "), /*#__PURE__*/React.createElement(StyledBarActionWrapper, null, customActionGroup ? customActionGroup : /*#__PURE__*/React.createElement(ButtonGroup, null, tertiaryAction && /*#__PURE__*/React.createElement(Button, _extends({}, makeButtonProps(tertiaryAction), {
+    size: buttonSize
+  }), tertiaryAction.label), secondaryAction && /*#__PURE__*/React.createElement(Button, _extends({}, makeButtonProps(secondaryAction), {
+    size: buttonSize
+  }), secondaryAction.label), primaryAction && /*#__PURE__*/React.createElement(PrimaryButton, _extends({}, makeButtonProps(primaryAction), {
+    size: buttonSize
+  }), primaryAction.label)))));
+});

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

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

package/es/@next/Bar/BarStyle.d.ts

@@ -0,0 +1,6 @@
+export declare const StyledBar: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledBarHeaderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledBarActionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledBarContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledCustomHeadingWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledButtonContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/@next/Bar/BarStyle.js

@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+import * as Breakpoints from '../utilities/breakpoints';
+import { Neutral } from '../utilities/colors';
+import { space8 } from '../utilities/spacing';
+export var StyledBar = styled.div.withConfig({
+  displayName: "BarStyle__StyledBar",
+  componentId: "sc-1m51mld-0"
+})(["display:flex;flex-direction:row;padding:12px 0;width:100%;position:absolute;min-height:90px;height:fit-content;&[data-align='bottom']{bottom:0;}&[data-align='top']{top:0;}box-shadow:0px 0px 0px 1px rgba(63,63,68,0.05),0px 1px 3px rgba(63,63,68,0.15);background:", ";@media (max-width:", "){padding:8px 0;min-height:70px;}"], Neutral.B100, Breakpoints.large);
+export var StyledBarHeaderWrapper = styled.div.withConfig({
+  displayName: "BarStyle__StyledBarHeaderWrapper",
+  componentId: "sc-1m51mld-1"
+})(["display:flex;flex-grow:1;flex-direction:column;"]);
+export var StyledBarActionWrapper = styled.div.withConfig({
+  displayName: "BarStyle__StyledBarActionWrapper",
+  componentId: "sc-1m51mld-2"
+})(["display:flex;flex-direction:column-reverse;align-items:flex-end;"]);
+export var StyledBarContainer = styled.div.withConfig({
+  displayName: "BarStyle__StyledBarContainer",
+  componentId: "sc-1m51mld-3"
+})(["position:relative;margin:0 auto;padding:0 50px;width:100%;*,*:before,*:after{box-sizing:border-box;}justify-content:space-between;align-items:center;flex-direction:row;display:flex;@media (max-width:", "){gap:16px;padding:0 16px;}"], Breakpoints.large);
+export var StyledCustomHeadingWrapper = styled.div.withConfig({
+  displayName: "BarStyle__StyledCustomHeadingWrapper",
+  componentId: "sc-1m51mld-4"
+})(["display:flex;flex-direction:row;gap:", ";"], space8);
+export var StyledButtonContainer = styled.div.withConfig({
+  displayName: "BarStyle__StyledButtonContainer",
+  componentId: "sc-1m51mld-5"
+})(["cursor:pointer;margin-right:24px;svg{width:24px;fill:", ";}@media (max-width:", "){margin-right:16px;svg{width:16px;}}"], Neutral.B40, Breakpoints.large);

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

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

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

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

package/es/@next/Bar/useWindowSize.d.ts

@@ -0,0 +1,4 @@
+export declare const useWindowSize: () => {
+    width: any;
+    height: any;
+};

package/es/@next/Bar/useWindowSize.js

@@ -0,0 +1,38 @@
+import { useState, useEffect } from 'react';
+
+// Hook
+export var useWindowSize = function useWindowSize() {
+  // Initialize state with undefined width/height so server and client renders match
+  // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
+  var _useState = useState({
+      width: undefined,
+      height: undefined
+    }),
+    windowSize = _useState[0],
+    setWindowSize = _useState[1];
+  useEffect(function () {
+    // Handler to call on window resize
+    function handleResize() {
+      // Set window width/height to state
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight
+      });
+    }
+
+    // Add event listener
+    window.addEventListener('resize', handleResize);
+
+    // Call handler right away so state gets updated with initial window size
+    handleResize();
+
+    // Remove event listener on cleanup
+    return function () {
+      return window.removeEventListener('resize', handleResize);
+    };
+  }, []); // Empty array ensures that effect is only run on mount
+
+  return windowSize;
+};
+
+// Taken from https://usehooks.com/useWindowSize/

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

@@ -0,0 +1,14 @@
+import React from 'react';
+export declare type ButtonSize = 'default' | 'slim' | 'large';
+export declare type IconPosition = 'left' | 'right';
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    size?: ButtonSize;
+    children?: React.ReactNode;
+    /** Indicate if the button is currently selected  */
+    active?: boolean;
+    fullWidth?: boolean;
+    icon?: React.ReactNode;
+    iconPosition?: IconPosition;
+    loading?: boolean;
+}
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/es/@next/Button/Button.js

@@ -0,0 +1,50 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["children", "icon", "iconPosition", "active", "fullWidth", "loading", "disabled", "onClick"];
+import React from 'react';
+import { Spinner } from '../Spinner/Spinner';
+import { Typography } from '../Typography';
+import { StyledButton } from './ButtonStyle';
+export var Button = /*#__PURE__*/React.forwardRef(function Button(_ref, ref) {
+  var children = _ref.children,
+    icon = _ref.icon,
+    _ref$iconPosition = _ref.iconPosition,
+    iconPosition = _ref$iconPosition === void 0 ? 'left' : _ref$iconPosition,
+    active = _ref.active,
+    fullWidth = _ref.fullWidth,
+    loading = _ref.loading,
+    disabled = _ref.disabled,
+    onClick = _ref.onClick,
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var content = typeof children === 'string' ? /*#__PURE__*/React.createElement(Typography, {
+    variant: "button"
+  }, " ", children) : children;
+  var renderIcon = function renderIcon(position) {
+    if (icon && position === iconPosition) {
+      return icon;
+    }
+    return null;
+  };
+  var onClickHandler = function onClickHandler() {
+    if (loading || disabled) {
+      return;
+    }
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    return onClick == null ? void 0 : onClick.apply(void 0, args);
+  };
+  return /*#__PURE__*/React.createElement(StyledButton, _extends({
+    ref: ref,
+    "data-active": active,
+    "data-full-width": fullWidth,
+    "data-loading": loading,
+    "data-icon": !!icon
+  }, otherProps, {
+    onMouseUp: function onMouseUp(e) {
+      return e.currentTarget.blur();
+    },
+    onClick: onClickHandler,
+    disabled: disabled
+  }), loading && /*#__PURE__*/React.createElement(Spinner, null), renderIcon('left'), content, renderIcon('right'));
+});

package/es/@next/Button/Button.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 Interactive: any;
+export declare const WithIcon: any;

package/es/@next/Button/ButtonStyle.d.ts

@@ -0,0 +1,2 @@
+import { ButtonProps } from './Button';
+export declare const StyledButton: import("styled-components").StyledComponent<"button", any, ButtonProps, never>;