glints-aries 4.1.3 → 4.1.4

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

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+import * as Breakpoints from '../utilities/breakpoints';
+import { borderRadius4 } from '../utilities/borderRadius';
+import { Neutral } from '../utilities/colors';
+import { button, buttonFocused, insetButtonPressed } from '../utilities/dropShadow';
+import { space12, space16, space24, space4, space8 } from '../utilities/spacing';
+var defaultButtonSizeStyle = "\n  min-width: 75px;\n  height: 36px;\n  padding: " + space8 + " " + space16 + ";\n\n  @media (max-width: " + Breakpoints.large + ") {\n    min-width: 71px;\n  }\n";
+var largeButtonSizeStyle = "\n  min-width: 91px;\n  height: 44px;\n  padding: " + space12 + " " + space24 + ";\n\n  @media (max-width: " + Breakpoints.large + ") {\n    min-width: 87px;\n  }\n";
+var slimButtonSizeStyle = "\n  padding: " + space4 + ";\n\n  p {\n    margin-block-start: 0px;\n    margin-block-end: 0px;\n  }\n";
+var buttonSizeStyleMap = {
+  "default": defaultButtonSizeStyle,
+  slim: slimButtonSizeStyle,
+  large: largeButtonSizeStyle
+};
+export var StyledButton = styled.button.withConfig({
+  displayName: "ButtonStyle__StyledButton",
+  componentId: "sc-8t0676-0"
+})(["display:flex;gap:8px;border-width:1px;border-style:solid;border-radius:", ";flex-direction:row;align-items:center;justify-content:center;flex:none;order:0;flex-grow:0;color:", ";background:", ";border-color:", ";box-shadow:", ";&:hover{cursor:pointer;background:", ";}&:focus{outline:none;border-color:", ";box-shadow:", ";}&:active{background:", ";border:1px solid ", ";box-shadow:", ";}&:active > svg{fill:", ";}&:disabled{color:", ";background:", ";border-color:", ";pointer-events:none;}&:disabled svg{fill:", ";}", " svg{width:20px;height:20px;fill:", ";}.spinner-container{position:absolute;}&[data-active='true']{color:", ";background:", ";}&[data-full-width='true']{width:100%;}&[data-active='true'] svg{fill:", ";}&[data-loading='true']{background:", ";color:transparent;}&[data-loading='true'] svg{fill:transparent;}&[data-loading='true'] .spinner-container svg{fill:", ";position:static;}"], borderRadius4, Neutral.B18, Neutral.B100, Neutral.B68, button, Neutral.B99, Neutral.B68, buttonFocused, Neutral.B95, Neutral.B68, insetButtonPressed, Neutral.B40, Neutral.B85, Neutral.B95, Neutral.B95, Neutral.B85, function (_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'default' : _ref$size;
+  var sizeStyle = buttonSizeStyleMap[size];
+  if (size && !sizeStyle) {
+    console.warn(size + " is not a valid ButtonSize, default will be used");
+  }
+  return buttonSizeStyleMap[size] || defaultButtonSizeStyle;
+}, Neutral.B40, Neutral.B100, Neutral.B40, Neutral.B100, Neutral.B99, Neutral.B85);

package/es/@next/Button/DesctructiveButton.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/Button/DesctructiveButtonStyle.d.ts

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

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

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+import { Neutral, Red } from '../utilities/colors';
+import { insetButtonPressed } from '../utilities/dropShadow';
+import { Button } from './Button';
+export var DestructiveButton = styled(Button).withConfig({
+  displayName: "DesctructiveButtonStyle__DestructiveButton",
+  componentId: "sc-1erj0cn-0"
+})(["color:", ";background:", ";border:none;&:hover{background:", ";box-shadow:0px 1px 0px rgba(0,0,0,0.08),inset 0px -1px 0px rgba(0,0,0,0.2);}&:focus{box-shadow:0px 0px 0px 2px rgba(69,143,255,1);}&:active{background:", ";box-shadow:", ";}&[data-loading='true']{background:", ";}"], Neutral.B100, Red.B93, Red.B74, Red.B65, insetButtonPressed, Neutral.B95);

package/es/@next/Button/DestructivePlainButton.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/Button/DestructivePlainButtonStyle.d.ts

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

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

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+import { Neutral, Red } from '../utilities/colors';
+import { Button } from './Button';
+export var DestructivePlainButton = styled(Button).withConfig({
+  displayName: "DestructivePlainButtonStyle__DestructivePlainButton",
+  componentId: "sc-o8db8a-0"
+})(["color:", ";background:transparent;border:none;box-shadow:none;outline:none;svg{fill:", ";}&:hover{color:", ";background:transparent;svg{fill:", ";}}&:focus{border:2px solid ", ";box-shadow:none;}&:active{color:", ";border:none;svg{fill:", ";}}&:disabled{color:", ";background:transparent;svg{fill:", ";}}&[data-loading='true']{background:transparent;}"], Red.B93, Red.B93, Red.B74, Red.B74, Red.B93, Red.B65, Red.B65, Neutral.B85, Neutral.B85);

package/es/@next/Button/OutlineButton.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/Button/OutlineButtonStyle.d.ts

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

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

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+import { button } from '../utilities/dropShadow';
+import { Button } from './Button';
+export var OutlineButton = styled(Button).withConfig({
+  displayName: "OutlineButtonStyle__OutlineButton",
+  componentId: "sc-q766em-0"
+})(["filter:drop-shadow(", ");"], button);

package/es/@next/Button/OutlineMonochromeButton.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/Button/OutlineMonochromeStyle.d.ts

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

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

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+import { Red } from '../utilities/colors';
+import { Neutral } from '../utilities/colors/';
+import { button } from '../utilities/dropShadow';
+import { Button } from './Button';
+export var OutlineMonochromeButton = styled(Button).withConfig({
+  displayName: "OutlineMonochromeStyle__OutlineMonochromeButton",
+  componentId: "sc-2c3b7a-0"
+})(["color:", ";border:1px solid ", ";filter:drop-shadow(", ");&:hover{background:", ";opacity:0.9;box-shadow:", ";}&:active{background:", ";opacity:1;border:1px solid ", ";}&[data-active='true']{color:", ";background:", ";}"], Red.B93, Red.B93, button, Red.B100, button, Red.B100, Red.B93, Neutral.B100, Red.B93);

package/es/@next/Button/PlainButton.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/Button/PlainButtonStyle.d.ts

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

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

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+import { Blue, Neutral } from '../utilities/colors';
+import { Button } from './Button';
+export var PlainButton = styled(Button).withConfig({
+  displayName: "PlainButtonStyle__PlainButton",
+  componentId: "sc-1c84q76-0"
+})(["color:", ";background:transparent;border:none;box-shadow:none;outline:none;svg{fill:", ";}&:hover{color:", ";background:transparent;svg{fill:", ";}}&:focus{border:2px solid ", ";box-shadow:none;}&:active{color:", ";border:none;svg{fill:", ";}}&:disabled{color:", ";background:transparent;svg{fill:", ";}}&[data-loading='true']{background:transparent;}"], Blue.S99, Blue.S99, Blue.S100, Blue.S100, Blue.S99, Blue.S100, Blue.S100, Neutral.B85, Neutral.B85);

package/es/@next/Button/PrimaryButton.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/Button/PrimaryButtonStyle.d.ts

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

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

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+import { Blue, Neutral } from '../utilities/colors';
+import { Button } from './Button';
+export var PrimaryButton = styled(Button).withConfig({
+  displayName: "PrimaryButtonStyle__PrimaryButton",
+  componentId: "sc-1iczr6c-0"
+})(["color:", ";background:", ";border:none;&:hover{background:", ";opacity:0.9;box-shadow:0px 1px 0px rgba(0,0,0,0.08),inset 0px -1px 0px rgba(0,0,0,0.2);}&:active{background:", ";opacity:1;border:0;}&[data-loading='true']{background:", ";}svg{fill:", ";}"], Neutral.B100, Blue.S99, Blue.S100, Blue.S100, Neutral.B95, Neutral.B100);

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

@@ -0,0 +1,6 @@
+export * from './Button';
+export * from './DesctructiveButtonStyle';
+export * from './OutlineButtonStyle';
+export * from './OutlineMonochromeStyle';
+export * from './PrimaryButtonStyle';
+export * from './PlainButtonStyle';

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

@@ -0,0 +1,6 @@
+export * from './Button';
+export * from './DesctructiveButtonStyle';
+export * from './OutlineButtonStyle';
+export * from './OutlineMonochromeStyle';
+export * from './PrimaryButtonStyle';
+export * from './PlainButtonStyle';

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

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface ButtonGroupProps extends React.HtmlHTMLAttributes<HTMLDivElement> {
+    segmented?: boolean;
+    fullWidth?: boolean;
+    /** Set this true when buttons are wrapped by another element (e.g as an activator for Popover) */
+    isButtonWrapped?: boolean;
+}
+export declare const ButtonGroup: React.ForwardRefExoticComponent<ButtonGroupProps & React.RefAttributes<HTMLDivElement>>;

package/es/@next/ButtonGroup/ButtonGroup.js

@@ -0,0 +1,17 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["segmented", "fullWidth", "isButtonWrapped"];
+import React from 'react';
+import { StyledButtonGroup } from './ButtonGroupStyle';
+export var ButtonGroup = /*#__PURE__*/React.forwardRef(function ButtonGroup(_ref, ref) {
+  var segmented = _ref.segmented,
+    fullWidth = _ref.fullWidth,
+    isButtonWrapped = _ref.isButtonWrapped,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(StyledButtonGroup, _extends({
+    ref: ref,
+    "data-segmented": segmented,
+    "data-full-width": fullWidth,
+    "data-button-wrapped": isButtonWrapped
+  }, props));
+});

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

@@ -0,0 +1 @@
+export declare const StyledButtonGroup: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/@next/ButtonGroup/ButtonGroupStyle.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+import { borderRadius4 } from '../utilities/borderRadius';
+import { Neutral } from '../utilities/colors';
+import { space8 } from '../utilities/spacing';
+export var StyledButtonGroup = styled.div.withConfig({
+  displayName: "ButtonGroupStyle__StyledButtonGroup",
+  componentId: "sc-7vhxrt-0"
+})(["display:flex;flex-direction:row;align-items:center;padding:0px;gap:", ";&[data-segmented='true']{gap:0;}&[data-segmented='true'] button[data-active='true']{border:1px solid ", ";}&[data-segmented='true'] button{border-radius:0;border-right:0;&:nth-child(1){border-radius:", " 0px 0px ", ";}&:nth-last-child(1){border-radius:0px ", " ", " 0px;border-right:1px solid ", ";}}&[data-segmented='true'] button:focus{z-index:1;border:1px solid ", ";}&[data-full-width='true'] button{flex:1;}&[data-segmented='true']&[data-button-wrapped='true'] > *{button{border-radius:0;border-right:0;}&:nth-child(1) button{border-radius:", " 0px 0px ", ";}&:nth-last-child(1) button{border-radius:0px ", " ", " 0px;border-right:1px solid ", ";}}"], space8, Neutral.B40, borderRadius4, borderRadius4, borderRadius4, borderRadius4, Neutral.B68, Neutral.B68, borderRadius4, borderRadius4, borderRadius4, borderRadius4, Neutral.B68);

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

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

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

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

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ComponentAction } from '../../types/componentAction';
+export declare type CardProps = {
+    heading?: React.ReactNode;
+    subheading?: React.ReactNode;
+    children?: React.ReactNode;
+    primaryAction?: ComponentAction;
+    secondaryAction?: ComponentAction;
+    headerPrimaryAction?: ComponentAction;
+    headerSecondaryAction?: ComponentAction;
+    actionsAlignment?: 'left' | 'right';
+    /** Defining custom actions will not show primary and secondary actions */
+    customActions?: React.ReactNode;
+};
+export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>> & {
+    Section: ({ children }: {
+        children: React.ReactNode;
+    }) => JSX.Element;
+};

package/es/@next/Card/Card.js

@@ -0,0 +1,70 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { Button, PrimaryButton } from '../Button';
+import { DestructivePlainButton } from '../Button/DestructivePlainButtonStyle';
+import { PlainButton } from '../Button/PlainButtonStyle';
+import { ButtonGroup } from '../ButtonGroup';
+import { Typography } from '../Typography';
+import { StyledCardActionWrapper, StyledCardContainer, StyledCardContentWrapper, StyledCardHeaderLeftContainer, StyledCardHeaderRightContainer, StyledCardHeaderSection, StyledCardHeaderSectionHalf, StyledCardHeaderWrapper } from './CardStyle';
+import { Section } from './Section';
+var CardComponent = /*#__PURE__*/React.forwardRef(function Card(_ref, ref) {
+  var heading = _ref.heading,
+    subheading = _ref.subheading,
+    primaryAction = _ref.primaryAction,
+    secondaryAction = _ref.secondaryAction,
+    customActions = _ref.customActions,
+    headerPrimaryAction = _ref.headerPrimaryAction,
+    headerSecondaryAction = _ref.headerSecondaryAction,
+    _ref$actionsAlignment = _ref.actionsAlignment,
+    actionsAlignment = _ref$actionsAlignment === void 0 ? 'right' : _ref$actionsAlignment,
+    children = _ref.children;
+  var headingMarkup = /*#__PURE__*/React.createElement(Typography, {
+    as: "div",
+    variant: "subtitle1"
+  }, heading);
+  var subHeadingMarkup = /*#__PURE__*/React.createElement(Typography, {
+    as: "div",
+    variant: "subtitle2"
+  }, subheading);
+  var headerMarkup = function headerMarkup() {
+    if (!!heading && !!subheading) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledCardHeaderSectionHalf, null, headingMarkup), /*#__PURE__*/React.createElement(StyledCardHeaderSectionHalf, null, subHeadingMarkup));
+    }
+    if (heading) {
+      return /*#__PURE__*/React.createElement(StyledCardHeaderSection, null, headingMarkup);
+    }
+    return /*#__PURE__*/React.createElement(StyledCardHeaderSection, null, subHeadingMarkup);
+  };
+  var defaultActionContent = /*#__PURE__*/React.createElement(ButtonGroup, null, secondaryAction && /*#__PURE__*/React.createElement(Button, _extends({
+    onClick: secondaryAction.action
+  }, secondaryAction), secondaryAction.label), primaryAction && /*#__PURE__*/React.createElement(PrimaryButton, _extends({
+    onClick: primaryAction.action
+  }, primaryAction), primaryAction.label));
+  var actionsContent = customActions ? customActions : defaultActionContent;
+  var showHeader = !!heading || !!subheading;
+  var showActions = !!customActions || !!primaryAction || !!secondaryAction;
+  return /*#__PURE__*/React.createElement(StyledCardContainer, {
+    ref: ref,
+    className: "card-container"
+  }, showHeader && /*#__PURE__*/React.createElement(StyledCardHeaderWrapper, {
+    className: "card-heading-container"
+  }, /*#__PURE__*/React.createElement(StyledCardHeaderLeftContainer, null, headerMarkup()), /*#__PURE__*/React.createElement(StyledCardHeaderRightContainer, null, /*#__PURE__*/React.createElement(ButtonGroup, {
+    fullWidth: false,
+    isButtonWrapped: true
+  }, headerSecondaryAction && /*#__PURE__*/React.createElement(DestructivePlainButton, _extends({
+    onClick: headerSecondaryAction.action,
+    size: "slim"
+  }, headerSecondaryAction), headerSecondaryAction.label), headerPrimaryAction && /*#__PURE__*/React.createElement(PlainButton, _extends({
+    onClick: headerPrimaryAction.action,
+    size: "slim"
+  }, headerPrimaryAction), headerPrimaryAction.label)))), /*#__PURE__*/React.createElement(StyledCardContentWrapper, {
+    "data-actions": showActions,
+    className: "card-content-container"
+  }, children), showActions && /*#__PURE__*/React.createElement(StyledCardActionWrapper, {
+    "data-align": actionsAlignment,
+    className: "card-actions-wrapper"
+  }, actionsContent));
+});
+export var Card = Object.assign(CardComponent, {
+  Section: Section
+});

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

@@ -0,0 +1,10 @@
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Interactive: any;
+export declare const NoAction: any;
+export declare const PrimaryActionOnly: any;
+export declare const SecondaryActionOnly: any;
+export declare const DisabledActions: any;
+export declare const CustomHeadingSubHeading: any;
+export declare const CustomActions: any;

package/es/@next/Card/CardStyle.d.ts

@@ -0,0 +1,10 @@
+export declare const StyledCardContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledCardHeaderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledCardHeaderSection: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledCardHeaderSectionHalf: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledCardContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledCardSection: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledCardActionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledCustomHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledCardHeaderLeftContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledCardHeaderRightContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/@next/Card/CardStyle.js

@@ -0,0 +1,45 @@
+import styled from 'styled-components';
+import * as Breakpoints from '../utilities/breakpoints';
+import { borderRadius8 } from '../utilities/borderRadius';
+import { Neutral } from '../utilities/colors';
+import { space12, space16, space24, space4 } from '../utilities/spacing';
+export var StyledCardContainer = styled.div.withConfig({
+  displayName: "CardStyle__StyledCardContainer",
+  componentId: "sc-tpku8j-0"
+})(["border-radius:", ";box-shadow:0px 0px 5px 0px rgba(71,71,71,0.1),0px 1px 2px 0px rgba(71,71,71,0.2);color:", ";background-color:", ";"], borderRadius8, Neutral.B18, Neutral.B100);
+export var StyledCardHeaderWrapper = styled.div.withConfig({
+  displayName: "CardStyle__StyledCardHeaderWrapper",
+  componentId: "sc-tpku8j-1"
+})(["display:flex;padding:", " ", " 20px;flex-wrap:nowrap;flex-direction:row;height:max-content;border-bottom:solid 1px ", ";@media (max-width:", "){padding:", " ", " 10px;}"], space24, space24, Neutral.B85, Breakpoints.large, space12, space16);
+export var StyledCardHeaderSection = styled.div.withConfig({
+  displayName: "CardStyle__StyledCardHeaderSection",
+  componentId: "sc-tpku8j-2"
+})(["flex:0 0 100%;display:flex;flex-direction:row;align-items:center;"]);
+export var StyledCardHeaderSectionHalf = styled.div.withConfig({
+  displayName: "CardStyle__StyledCardHeaderSectionHalf",
+  componentId: "sc-tpku8j-3"
+})(["flex:0 0 50%;"]);
+export var StyledCardContentWrapper = styled.div.withConfig({
+  displayName: "CardStyle__StyledCardContentWrapper",
+  componentId: "sc-tpku8j-4"
+})(["padding-bottom:", ";@media (max-width:", "){padding-bottom:0px;}&[data-actions='true']{padding-bottom:0px;}"], space4, Breakpoints.large);
+export var StyledCardSection = styled.div.withConfig({
+  displayName: "CardStyle__StyledCardSection",
+  componentId: "sc-tpku8j-5"
+})(["padding:20px ", ";.section{padding:", " ", ";&:last-child{padding-bottom:0;}}.section + .section{border-top:solid 1px ", ";}@media (max-width:", "){padding:", " ", ";.section{padding:", " ", ";}}"], space24, space16, space24, Neutral.B85, Breakpoints.large, space12, space16, space12, space16);
+export var StyledCardActionWrapper = styled.div.withConfig({
+  displayName: "CardStyle__StyledCardActionWrapper",
+  componentId: "sc-tpku8j-6"
+})(["display:flex;padding:20px ", " ", ";flex-direction:column-reverse;align-items:flex-end;border-top:solid 1px ", ";&[data-align='left']{flex-direction:column;align-items:flex-start;}@media (max-width:", "){padding:10px ", " ", ";}"], space24, space24, Neutral.B85, Breakpoints.large, space16, space12);
+export var StyledCustomHeader = styled.div.withConfig({
+  displayName: "CardStyle__StyledCustomHeader",
+  componentId: "sc-tpku8j-7"
+})(["& > *{margin:0;}"]);
+export var StyledCardHeaderLeftContainer = styled.div.withConfig({
+  displayName: "CardStyle__StyledCardHeaderLeftContainer",
+  componentId: "sc-tpku8j-8"
+})(["flex:1;flex-direction:column;display:flex;align-items:flex-start;"]);
+export var StyledCardHeaderRightContainer = styled.div.withConfig({
+  displayName: "CardStyle__StyledCardHeaderRightContainer",
+  componentId: "sc-tpku8j-9"
+})(["margin-left:16px;margin-right:auto;display:flex;flex-direction:row;align-items:center;@media (max-width:", "){align-items:flex-end;}"], Breakpoints.large);

package/es/@next/Card/Section.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const Section: ({ children }: {
+    children: React.ReactNode;
+}) => JSX.Element;

package/es/@next/Card/Section.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Typography } from '../Typography';
+import { StyledCardSection } from './CardStyle';
+export var Section = function Section(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement(StyledCardSection, {
+    className: "section"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    as: "div",
+    variant: "body1"
+  }, children));
+};

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

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

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

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

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

@@ -0,0 +1,25 @@
+import React from 'react';
+export declare type AspectRatio = {
+    width: number;
+    height: number;
+};
+export interface CarouselProps {
+    autoRotate?: boolean;
+    children: React.ReactNode;
+    /** i.e: 16:9 The first number represents the width, and the second number represents the height.
+     * `AspectRatio: { width: number, height: number }`
+     */
+    aspectRatio?: AspectRatio;
+    /** sets height of Carousel*/
+    height?: string;
+    /** sets width of Carousel */
+    width?: string;
+    indicatorPosition?: 'top' | 'bottom' | 'left' | 'right' | 'outer';
+    /** Sets indicator type. Default is line and can be `null` to remove the component */
+    indicatorType?: 'dot' | 'line' | 'slider' | null;
+    /** Sets whether to show arrows */
+    showArrows?: boolean;
+    /** When `autoRotate` is `true`, specify milliseconds until next slide shows */
+    duration?: number;
+}
+export declare const Carousel: ({ autoRotate, children, aspectRatio, height, width, indicatorPosition, indicatorType, duration, showArrows, }: CarouselProps) => JSX.Element;

package/es/@next/Carousel/Carousel.js

@@ -0,0 +1,108 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Icon } from '../Icon';
+import { Neutral } from '../utilities/colors';
+import { ArrowsContainer, CarouselContainer, Indicator, IndicatorsContainer, ItemsContainer, NextArrow, PreviousArrow, SlideContainer } from './CarouselStyle';
+export var Carousel = function Carousel(_ref) {
+  var _ref$autoRotate = _ref.autoRotate,
+    autoRotate = _ref$autoRotate === void 0 ? false : _ref$autoRotate,
+    children = _ref.children,
+    aspectRatio = _ref.aspectRatio,
+    height = _ref.height,
+    width = _ref.width,
+    _ref$indicatorPositio = _ref.indicatorPosition,
+    indicatorPosition = _ref$indicatorPositio === void 0 ? 'outer' : _ref$indicatorPositio,
+    _ref$indicatorType = _ref.indicatorType,
+    indicatorType = _ref$indicatorType === void 0 ? 'line' : _ref$indicatorType,
+    _ref$duration = _ref.duration,
+    duration = _ref$duration === void 0 ? 3000 : _ref$duration,
+    _ref$showArrows = _ref.showArrows,
+    showArrows = _ref$showArrows === void 0 ? true : _ref$showArrows;
+  var slideRef = useRef(null);
+  var slideTimeout = useRef();
+  var _useState = useState(0),
+    activeIndex = _useState[0],
+    setActiveIndex = _useState[1];
+  var _useState2 = useState(autoRotate),
+    hideArrows = _useState2[0],
+    setHideArrows = _useState2[1];
+  var childrenList = React.Children.toArray(children).filter(function (child) {
+    return /*#__PURE__*/React.isValidElement(child);
+  });
+  var childrenLength = childrenList.length;
+  var updateActiveIndex = useCallback(function (index) {
+    if (index < 0) {
+      setActiveIndex(childrenLength - 1);
+      return;
+    }
+    if (index === childrenLength) {
+      setActiveIndex(0);
+      return;
+    }
+    setActiveIndex(index);
+  }, [childrenLength]);
+  var handlePreviousClick = function handlePreviousClick() {
+    updateActiveIndex(activeIndex - 1);
+  };
+  var handleNextClick = function handleNextClick() {
+    updateActiveIndex(activeIndex + 1);
+  };
+  var handleMouseEnter = function handleMouseEnter() {
+    if (autoRotate) {
+      setHideArrows(false);
+      return;
+    }
+  };
+  var handleMouseLeave = function handleMouseLeave() {
+    if (autoRotate) {
+      setHideArrows(true);
+      return;
+    }
+  };
+  useEffect(function () {
+    if (autoRotate) {
+      if (slideTimeout.current) clearTimeout(slideTimeout.current);
+      slideTimeout.current = setTimeout(function () {
+        updateActiveIndex(activeIndex + 1);
+      }, duration);
+    }
+  }, [activeIndex, autoRotate, duration, updateActiveIndex]);
+  return /*#__PURE__*/React.createElement(CarouselContainer, {
+    aspectRatio: aspectRatio ? (aspectRatio == null ? void 0 : aspectRatio.width) + "/" + (aspectRatio == null ? void 0 : aspectRatio.height) : null,
+    height: height,
+    width: width,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave
+  }, /*#__PURE__*/React.createElement(SlideContainer, {
+    ref: slideRef,
+    aspectRatio: aspectRatio ? (aspectRatio == null ? void 0 : aspectRatio.width) + "/" + (aspectRatio == null ? void 0 : aspectRatio.height) : null,
+    height: height,
+    width: width
+  }, /*#__PURE__*/React.createElement(ItemsContainer, {
+    activeIndex: activeIndex
+  }, childrenList)), showArrows && /*#__PURE__*/React.createElement(ArrowsContainer, {
+    "data-hidden": hideArrows
+  }, /*#__PURE__*/React.createElement(PreviousArrow, {
+    onClick: handlePreviousClick
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ri-arrow-m-left-line",
+    fill: Neutral.B40
+  })), /*#__PURE__*/React.createElement(NextArrow, {
+    onClick: handleNextClick
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ri-arrow-m-right-line",
+    fill: Neutral.B40
+  }))), !!indicatorType && /*#__PURE__*/React.createElement(IndicatorsContainer, {
+    indicatorType: indicatorType,
+    indicatorPosition: indicatorPosition
+  }, /*#__PURE__*/React.createElement("div", null, Array.from(Array(childrenLength).keys()).map(function (n) {
+    var isActive = activeIndex === n;
+    return /*#__PURE__*/React.createElement(Indicator, {
+      indicatorType: indicatorType,
+      key: "carousel-indicator-" + n,
+      onClick: function onClick() {
+        return updateActiveIndex(n);
+      },
+      className: isActive ? 'active' : null
+    });
+  }))));
+};

package/es/@next/Carousel/Carousel.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 HideIndicator: any;

package/es/@next/Carousel/CarouselStyle.d.ts

@@ -0,0 +1,16 @@
+import { CarouselProps } from './Carousel';
+interface StyledCarouselProps extends Omit<CarouselProps, 'aspectRatio'> {
+    aspectRatio?: string;
+}
+interface ItemsContainerProps {
+    activeIndex: number;
+}
+export declare const CarouselContainer: import("styled-components").StyledComponent<"div", any, StyledCarouselProps, never>;
+export declare const SlideContainer: import("styled-components").StyledComponent<"div", any, StyledCarouselProps, never>;
+export declare const ItemsContainer: import("styled-components").StyledComponent<"div", any, ItemsContainerProps, never>;
+export declare const ArrowsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PreviousArrow: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const NextArrow: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const IndicatorsContainer: import("styled-components").StyledComponent<"div", any, Pick<CarouselProps, "indicatorPosition" | "indicatorType">, never>;
+export declare const Indicator: import("styled-components").StyledComponent<"button", any, Pick<CarouselProps, "indicatorType">, never>;
+export {};