glints-aries 4.0.167 → 4.0.168

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

@@ -0,0 +1,9 @@
+import React from 'react';
+declare const badgeStatusVariant: readonly ["neutral", "success", "informational", "warning", "critical", "promotion", "new"];
+export declare type BadgeStatusVariant = typeof badgeStatusVariant[number];
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+    status?: BadgeStatusVariant;
+}
+export declare const Badge: ({ children, status, ...props }: BadgeProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,21 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["children", "status"];
+import React from 'react';
+import { Typography } from '../Typography';
+import { Neutral } from '../utilities/colors';
+import { BadgeStyle } from './BadgeStyle';
+var badgeStatusVariant = ['neutral', 'success', 'informational', 'warning', 'critical', 'promotion', 'new'];
+export var Badge = function Badge(_ref) {
+  var children = _ref.children,
+    status = _ref.status,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var content = typeof children === 'string' ? /*#__PURE__*/React.createElement(Typography, {
+    variant: "overline",
+    color: status === 'new' ? Neutral.B100 : Neutral.B18,
+    as: 'span'
+  }, children) : children;
+  return /*#__PURE__*/React.createElement(BadgeStyle, _extends({
+    status: status ? status : 'neutral'
+  }, props), /*#__PURE__*/React.createElement("div", null, content));
+};

package/es/@next/Badge/Badge.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/Badge.stories.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { BaseContainer } from '../../Layout/GlintsContainer/GlintsContainer';
+import { Badge } from './Badge';
+Badge.displayName = 'Badge';
+var defaultText = 'Badge';
+export default {
+  title: '@next/Badge',
+  component: Badge,
+  decorators: [function (Story) {
+    return /*#__PURE__*/React.createElement(BaseContainer, null, Story());
+  }]
+};
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(Badge, args, defaultText);
+};
+export var Interactive = Template.bind({});
+Interactive.args = {
+  status: null
+};

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

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

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

@@ -0,0 +1,22 @@
+var _badgeBackgroundColor;
+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['informational'] = Blue.S08, _badgeBackgroundColor['warning'] = Orange.S42, _badgeBackgroundColor['critical'] = Red.B100, _badgeBackgroundColor['promotion'] = Yellow.S75, _badgeBackgroundColor['new'] = Orange.S87, _badgeBackgroundColor);
+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-1aofb4c-0"
+})(["", "}width:fit-content;padding:2px ", ";border-radius:", ";"], function (_ref) {
+  var status = _ref.status;
+  return {
+    'background-color': getBadgeBackgroundColor(status)
+  };
+}, space8, borderRadius20);

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/Button/Button.d.ts

@@ -1,10 +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: ({ children, ...otherProps }: ButtonProps) => JSX.Element;
+export declare const Button: ({ children, icon, iconPosition, active, fullWidth, loading, ...otherProps }: ButtonProps) => JSX.Element;

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

@@ -1,18 +1,36 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["children"];
+var _excluded = ["children", "icon", "iconPosition", "active", "fullWidth", "loading"];
 import React from 'react';
+import { Spinner } from '../Spinner/Spinner';
 import { Typography } from '../Typography';
-import { BasicButton } from './ButtonStyle';
+import { StyledButton } from './ButtonStyle';
 export var Button = function Button(_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,
     otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
   var content = typeof children === 'string' ? /*#__PURE__*/React.createElement(Typography, {
-    variant: "caption"
+    variant: "button"
   }, " ", children) : children;
-  return /*#__PURE__*/React.createElement(BasicButton, _extends({}, otherProps, {
+  var renderIcon = function renderIcon(position) {
+    if (icon && position === iconPosition) {
+      return icon;
+    }
+    return null;
+  };
+  return /*#__PURE__*/React.createElement(StyledButton, _extends({
+    "data-active": active,
+    "data-full-width": fullWidth,
+    "data-loading": loading,
+    "data-icon": !!icon
+  }, otherProps, {
     onMouseUp: function onMouseUp(e) {
       return e.currentTarget.blur();
     }
-  }), content);
+  }), loading && /*#__PURE__*/React.createElement(Spinner, null), renderIcon('left'), content, renderIcon('right'));
 };

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

@@ -2,3 +2,4 @@ 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/Button.stories.js

@@ -2,6 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { Button } from './Button';
 import { BaseContainer } from '../../Layout/GlintsContainer/GlintsContainer';
+import { Icon } from '../Icon';
+import { PrimaryButton } from './PrimaryButtonStyle';
 Button.displayName = 'Button';
 var defaultText = 'Label';
 export default {
@@ -25,4 +27,25 @@ export var Interactive = Template.bind({});
 Interactive.args = {
   size: 'default',
   disabled: false
+};
+var WithIconsTemplate = function WithIconsTemplate(args) {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '10px'
+    }
+  }, /*#__PURE__*/React.createElement(Button, _extends({}, args, {
+    type: "button"
+  }), defaultText), /*#__PURE__*/React.createElement(PrimaryButton, _extends({}, args, {
+    type: "button"
+  }), defaultText));
+};
+export var WithIcon = WithIconsTemplate.bind({});
+WithIcon.args = {
+  size: 'default',
+  icon: /*#__PURE__*/React.createElement(Icon, {
+    name: "ri-arrow-up-down-fill"
+  }),
+  iconPosition: 'left',
+  disabled: false
 };

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

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

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

@@ -1,39 +1,26 @@
-import _extends from "@babel/runtime/helpers/extends";
 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  width: 75px;\n  height: 36px;\n  padding: " + space8 + " " + space16 + ";\n\n  @media (max-width: " + Breakpoints.large + ") {\n    width: 71px;\n  }\n";
-var largeButtonSizeStyle = "\n  width: 91px;\n  height: 44px;\n  padding: " + space12 + " " + space24 + ";\n\n  @media (max-width: " + Breakpoints.large + ") {\n    width: 87px;\n  }\n";
-var slimButtonSizeStyle = "\n  width: 67px;\n  height: 32px;\n  padding: " + space4 + " " + space12 + ";\n\n  @media (max-width: " + Breakpoints.large + ") {\n    width: 63px;\n  }\n";
+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 = "\nmin-width: 91px;\n  height: 44px;\n  padding: " + space12 + " " + space24 + ";\n\n  @media (max-width: " + Breakpoints.large + ") {\n    min-width: 87px;\n  }\n";
+var slimButtonSizeStyle = "\nmin-width: 67px;\n  height: 32px;\n  padding: " + space4 + " " + space12 + ";\n\n  @media (max-width: " + Breakpoints.large + ") {\n    min-width: 63px;\n  }\n";
 var buttonSizeStyleMap = {
   "default": defaultButtonSizeStyle,
   slim: slimButtonSizeStyle,
   large: largeButtonSizeStyle
 };
-export var BasicButton = styled.button.attrs(function (_ref) {
-  var active = _ref.active,
-    fullWidth = _ref.fullWidth;
-  var activeStyle = {
-    color: "" + Neutral.B100,
-    background: "" + Neutral.B40
-  };
-  var widthStyle = {
-    width: '100%'
-  };
-  return {
-    style: _extends({}, active && activeStyle, fullWidth && widthStyle)
-  };
-}).withConfig({
-  displayName: "ButtonStyle__BasicButton",
+export var StyledButton = styled.button.withConfig({
+  displayName: "ButtonStyle__StyledButton",
   componentId: "sc-8t0676-0"
-})(["display:flex;gap:10px;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:", ";}&:disabled{color:", ";background:", ";}", " > svg{width:18px;height:18px;}"], borderRadius4, Neutral.B18, Neutral.B100, Neutral.B68, button, Neutral.B99, Neutral.B100, buttonFocused, Neutral.B95, Neutral.B68, insetButtonPressed, Neutral.B68, Neutral.B95, function (_ref2) {
-  var size = _ref2.size;
+})(["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:", ";}&:disabled svg{fill:", ";}", " svg{width:16px;height:16px;fill:", ";}.spinner-container{position:absolute;}&[data-active='true']{color:", ";background:", ";}&[data-full-width='true']{width:100%;}&[data-icon='true']{gap:4px;}&[data-active='true'] svg{fill:", ";}&[data-loading='true']{background:", ";color:transparent;}&[data-loading='true'] svg{fill:transparent;}&[data-loading='true'] .spinner-container svg{fill:", ";}"], borderRadius4, Neutral.B18, Neutral.B100, Neutral.B68, button, Neutral.B99, Neutral.B68, buttonFocused, Neutral.B95, Neutral.B68, insetButtonPressed, Neutral.B40, Neutral.B68, 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/DesctructiveButtonStyle.d.ts

@@ -1,2 +1,2 @@
 /// <reference types="react" />
-export declare const DestructiveButton: import("styled-components").StyledComponent<({ children, ...otherProps }: import("./Button").ButtonProps) => JSX.Element, any, {}, never>;
+export declare const DestructiveButton: import("styled-components").StyledComponent<({ children, icon, iconPosition, active, fullWidth, loading, ...otherProps }: import("./Button").ButtonProps) => JSX.Element, any, {}, never>;

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

@@ -5,4 +5,4 @@ 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:", ";}"], Neutral.B100, Red.B93, Red.B74, Red.B65, insetButtonPressed);
+})(["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/OutlineButtonStyle.d.ts

@@ -1,2 +1,2 @@
 /// <reference types="react" />
-export declare const OutlineButton: import("styled-components").StyledComponent<({ children, ...otherProps }: import("./Button").ButtonProps) => JSX.Element, any, {}, never>;
+export declare const OutlineButton: import("styled-components").StyledComponent<({ children, icon, iconPosition, active, fullWidth, loading, ...otherProps }: import("./Button").ButtonProps) => JSX.Element, any, {}, never>;

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

@@ -1,3 +1,2 @@
 /// <reference types="react" />
-import { ButtonProps } from './Button';
-export declare const OutlineMonochromeButton: import("styled-components").StyledComponent<({ children, ...otherProps }: ButtonProps) => JSX.Element, any, {}, never>;
+export declare const OutlineMonochromeButton: import("styled-components").StyledComponent<({ children, icon, iconPosition, active, fullWidth, loading, ...otherProps }: import("./Button").ButtonProps) => JSX.Element, any, {}, never>;

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

@@ -1,12 +1,9 @@
 import styled from 'styled-components';
 import { Red } from '../utilities/colors';
-import { B100 } from '../utilities/colors/neutral';
+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 ", ";}"], function (_ref) {
-  var active = _ref.active;
-  return active ? "&[style] {\n    color: " + B100 + " !important;\n    background: " + Red.B93 + " !important;\n    }" : "";
-}, Red.B93, Red.B93, button, Red.B100, button, Red.B100, Red.B93);
+})(["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/PrimaryButtonStyle.d.ts

@@ -1,2 +1,2 @@
 /// <reference types="react" />
-export declare const PrimaryButton: import("styled-components").StyledComponent<({ children, ...otherProps }: import("./Button").ButtonProps) => JSX.Element, any, {}, never>;
+export declare const PrimaryButton: import("styled-components").StyledComponent<({ children, icon, iconPosition, active, fullWidth, loading, ...otherProps }: import("./Button").ButtonProps) => JSX.Element, any, {}, never>;

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

@@ -4,4 +4,4 @@ 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;}"], Neutral.B100, Blue.S99, Blue.S100, Blue.S100);
+})(["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;}&[data-loading='true']{background:", ";}svg{fill:", ";}"], Neutral.B100, Blue.S99, Blue.S100, Blue.S100, Neutral.B95, Neutral.B100);

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

@@ -18,7 +18,9 @@ export default {
 };
 var Template = function Template(args) {
   var segmented = args.segmented;
-  var children = segmented ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(OutlineButton, null, "Label"), /*#__PURE__*/React.createElement(OutlineButton, null, "Label"), /*#__PURE__*/React.createElement(OutlineButton, null, "Label"), /*#__PURE__*/React.createElement(OutlineButton, null, "Label"), /*#__PURE__*/React.createElement(OutlineButton, null, "Label")) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, null, "Label"), /*#__PURE__*/React.createElement(PrimaryButton, null, "Label"));
+  var children = segmented ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(OutlineButton, null, "Label"), /*#__PURE__*/React.createElement(OutlineButton, null, "Label"), /*#__PURE__*/React.createElement(OutlineButton, {
+    active: true
+  }, "Label"), /*#__PURE__*/React.createElement(OutlineButton, null, "Label"), /*#__PURE__*/React.createElement(OutlineButton, null, "Label")) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, null, "Label"), /*#__PURE__*/React.createElement(PrimaryButton, null, "Label"));
   return /*#__PURE__*/React.createElement(ButtonGroup, args, children);
 };
 export var Interactive = Template.bind({});

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

@@ -1,13 +1,13 @@
 import styled from 'styled-components';
 import { borderRadius4 } from '../utilities/borderRadius';
-import { B68 } from '../utilities/colors/neutral';
+import { Neutral } from '../utilities/colors';
 import { space8 } from '../utilities/spacing';
 export var ButtonGroup = styled.div.withConfig({
   displayName: "ButtonGroupStyle__ButtonGroup",
   componentId: "sc-7vhxrt-0"
-})(["display:flex;flex-direction:row;align-items:center;padding:0px;> button{z-index:1;}", " ", ""], function (_ref) {
+})(["display:flex;flex-direction:row;align-items:center;padding:0px;", " ", ""], function (_ref) {
   var segmented = _ref.segmented;
-  return segmented ? "> button {\n            border-radius: 0;\n            border-right: 0;\n            \n            :nth-child(1) {\n             border-radius: " + borderRadius4 + " 0px 0px " + borderRadius4 + ";  \n            }\n\n            :nth-last-child(1) {\n             border-radius: 0px " + borderRadius4 + " " + borderRadius4 + " 0px;\n             border-right: 1px solid " + B68 + "\n            }\n           }" : "gap: " + space8 + ";";
+  return segmented ? "> button {\n            border-radius: 0;\n            border-right: 0;\n            \n            :nth-child(1) {\n             border-radius: " + borderRadius4 + " 0px 0px " + borderRadius4 + ";  \n            }\n\n            :nth-last-child(1) {\n             border-radius: 0px " + borderRadius4 + " " + borderRadius4 + " 0px;\n             border-right: 1px solid " + Neutral.B68 + "\n            }\n           }\n           > button:focus {\n            z-index: 1;\n            border: 1px solid " + Neutral.B68 + "\n           }\n\n           button[data-active='true'] {\n            border: 1px solid " + Neutral.B40 + "\n           }\n           " : "gap: " + space8 + ";";
 }, function (_ref2) {
   var fullWidth = _ref2.fullWidth;
   return fullWidth ? "> button {\n             flex: 1;\n             }" : "";

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

@@ -1,5 +1,5 @@
 import React from 'react';
-export interface CheckboxProps extends Omit<React.HtmlHTMLAttributes<HTMLInputElement>, 'type' | 'onChange'> {
+export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange'> {
     id?: string;
     label?: string;
     hasError?: boolean;

package/es/@next/Checkbox/Checkbox.js

@@ -33,12 +33,12 @@ export var Checkbox = function Checkbox(_ref) {
     setCheckedState(value);
   }, [checked, indeterminate]);
   var handleClick = function handleClick() {
-    if (!onChange || !inputNode.current || disabled) {
+    if (!inputNode.current || disabled) {
       return;
     }
     var checkedValue = !checkedState;
     setCheckedState(checkedValue);
-    onChange(checkedValue, checkBoxId);
+    onChange == null ? void 0 : onChange(checkedValue, checkBoxId);
   };
   return /*#__PURE__*/React.createElement(StyledContainer, {
     "aria-disabled": disabled,

package/es/@next/Icon/IconStoriesStyles.js

@@ -11,4 +11,4 @@ export var StyledItemList = styled.li.withConfig({
 export var StyledIcon = styled(Icon).withConfig({
   displayName: "IconStoriesStyles__StyledIcon",
   componentId: "sc-7j50pb-2"
-})(["margin-right:1em;"]);
+})(["margin-right:1em;fill:currentColor;"]);

package/es/@next/Icon/components/RiLoader.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+declare const SvgRiLoader: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+export default SvgRiLoader;

package/es/@next/Icon/components/RiLoader.js

@@ -0,0 +1,12 @@
+import _extends from "@babel/runtime/helpers/extends";
+import * as React from 'react';
+var SvgRiLoader = function SvgRiLoader(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 18 18",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M15.364 2.636 13.95 4.05A7 7 0 1 0 16 9h2a9 9 0 1 1-2.636-6.364Z"
+  }));
+};
+export default SvgRiLoader;

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

@@ -47,6 +47,7 @@ export { default as RiErrorWarningFill } from './RiErrorWarningFill';
 export { default as RiErrorWarningLine } from './RiErrorWarningLine';
 export { default as RiInformationFill } from './RiInformationFill';
 export { default as RiInformationLine } from './RiInformationLine';
+export { default as RiLoader } from './RiLoader';
 export { default as RiMessageFill } from './RiMessageFill';
 export { default as RiMessageLine } from './RiMessageLine';
 export { default as RiPencilFill } from './RiPencilFill';

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

@@ -47,6 +47,7 @@ export { default as RiErrorWarningFill } from './RiErrorWarningFill';
 export { default as RiErrorWarningLine } from './RiErrorWarningLine';
 export { default as RiInformationFill } from './RiInformationFill';
 export { default as RiInformationLine } from './RiInformationLine';
+export { default as RiLoader } from './RiLoader';
 export { default as RiMessageFill } from './RiMessageFill';
 export { default as RiMessageLine } from './RiMessageLine';
 export { default as RiPencilFill } from './RiPencilFill';

package/es/@next/Icon/icons/icons.d.ts

@@ -1,5 +1,5 @@
 import { SVGProps } from 'react';
-export declare const iconNames: readonly ["ri-account-circle-fill", "ri-account-circle-line", "ri-add-circle-fill", "ri-add-circle-line", "ri-add", "ri-alarm-warning-fill", "ri-alarm-warning-line", "ri-arrow-down-fill", "ri-arrow-down-line", "ri-arrow-go-back-fill", "ri-arrow-go-back-line", "ri-arrow-go-forward-fill", "ri-arrow-go-forward-line", "ri-arrow-left-fill", "ri-arrow-left-line", "ri-arrow-left-right-fill", "ri-arrow-left-right-line", "ri-arrow-m-down-fill", "ri-arrow-m-down-line", "ri-arrow-m-left-fill", "ri-arrow-m-left-line", "ri-arrow-m-right-fill", "ri-arrow-m-right-line", "ri-arrow-m-up-fill", "ri-arrow-m-up-line", "ri-arrow-right-fill", "ri-arrow-right-line", "ri-arrow-up-down-fill", "ri-arrow-up-down-line", "ri-arrow-up-fill", "ri-arrow-up-line", "ri-arrow-xs-down-fill", "ri-arrow-xs-up-fill", "ri-calendar-fill", "ri-calendar-line", "ri-check", "ri-close-circle-fill", "ri-close-circle-line", "ri-close", "ri-delete-bin-fill", "ri-delete-bin-line", "ri-error-warning-fill", "ri-error-warning-line", "ri-information-fill", "ri-information-line", "ri-message-fill", "ri-message-line", "ri-pencil-fill", "ri-pencil-line", "ri-question-fill", "ri-question-line", "ri-reply-fill", "ri-reply-line", "ri-send-plane-fill", "ri-send-plane-line", "ri-settings-fill", "ri-settings-line", "ri-checkbox-fill", "ri-checkbox-line", "ri-checkbox-indeterminate-fill", "ri-checkbox-indeterminate-line", "ri-search"];
+export declare const iconNames: readonly ["ri-account-circle-fill", "ri-account-circle-line", "ri-add-circle-fill", "ri-add-circle-line", "ri-add", "ri-alarm-warning-fill", "ri-alarm-warning-line", "ri-arrow-down-fill", "ri-arrow-down-line", "ri-arrow-go-back-fill", "ri-arrow-go-back-line", "ri-arrow-go-forward-fill", "ri-arrow-go-forward-line", "ri-arrow-left-fill", "ri-arrow-left-line", "ri-arrow-left-right-fill", "ri-arrow-left-right-line", "ri-arrow-m-down-fill", "ri-arrow-m-down-line", "ri-arrow-m-left-fill", "ri-arrow-m-left-line", "ri-arrow-m-right-fill", "ri-arrow-m-right-line", "ri-arrow-m-up-fill", "ri-arrow-m-up-line", "ri-arrow-right-fill", "ri-arrow-right-line", "ri-arrow-up-down-fill", "ri-arrow-up-down-line", "ri-arrow-up-fill", "ri-arrow-up-line", "ri-arrow-xs-down-fill", "ri-arrow-xs-up-fill", "ri-calendar-fill", "ri-calendar-line", "ri-check", "ri-close-circle-fill", "ri-close-circle-line", "ri-close", "ri-delete-bin-fill", "ri-delete-bin-line", "ri-error-warning-fill", "ri-error-warning-line", "ri-information-fill", "ri-information-line", "ri-message-fill", "ri-message-line", "ri-pencil-fill", "ri-pencil-line", "ri-question-fill", "ri-question-line", "ri-reply-fill", "ri-reply-line", "ri-send-plane-fill", "ri-send-plane-line", "ri-settings-fill", "ri-settings-line", "ri-checkbox-fill", "ri-checkbox-line", "ri-checkbox-indeterminate-fill", "ri-checkbox-indeterminate-line", "ri-search", "ri-loader"];
 export declare type IconNames = typeof iconNames[number];
 declare type SVGComponent = (props: SVGProps<SVGSVGElement>) => JSX.Element;
 export declare const iconsMappingComponent: {

package/es/@next/Icon/icons/icons.js

@@ -1,4 +1,4 @@
 var _iconsMappingComponen;
 import * as Icons from '../components';
-export var iconNames = ['ri-account-circle-fill', 'ri-account-circle-line', 'ri-add-circle-fill', 'ri-add-circle-line', 'ri-add', 'ri-alarm-warning-fill', 'ri-alarm-warning-line', 'ri-arrow-down-fill', 'ri-arrow-down-line', 'ri-arrow-go-back-fill', 'ri-arrow-go-back-line', 'ri-arrow-go-forward-fill', 'ri-arrow-go-forward-line', 'ri-arrow-left-fill', 'ri-arrow-left-line', 'ri-arrow-left-right-fill', 'ri-arrow-left-right-line', 'ri-arrow-m-down-fill', 'ri-arrow-m-down-line', 'ri-arrow-m-left-fill', 'ri-arrow-m-left-line', 'ri-arrow-m-right-fill', 'ri-arrow-m-right-line', 'ri-arrow-m-up-fill', 'ri-arrow-m-up-line', 'ri-arrow-right-fill', 'ri-arrow-right-line', 'ri-arrow-up-down-fill', 'ri-arrow-up-down-line', 'ri-arrow-up-fill', 'ri-arrow-up-line', 'ri-arrow-xs-down-fill', 'ri-arrow-xs-up-fill', 'ri-calendar-fill', 'ri-calendar-line', 'ri-check', 'ri-close-circle-fill', 'ri-close-circle-line', 'ri-close', 'ri-delete-bin-fill', 'ri-delete-bin-line', 'ri-error-warning-fill', 'ri-error-warning-line', 'ri-information-fill', 'ri-information-line', 'ri-message-fill', 'ri-message-line', 'ri-pencil-fill', 'ri-pencil-line', 'ri-question-fill', 'ri-question-line', 'ri-reply-fill', 'ri-reply-line', 'ri-send-plane-fill', 'ri-send-plane-line', 'ri-settings-fill', 'ri-settings-line', 'ri-checkbox-fill', 'ri-checkbox-line', 'ri-checkbox-indeterminate-fill', 'ri-checkbox-indeterminate-line', 'ri-search'];
-export var iconsMappingComponent = (_iconsMappingComponen = {}, _iconsMappingComponen['ri-account-circle-fill'] = Icons.RiAccountCircleFill, _iconsMappingComponen['ri-account-circle-line'] = Icons.RiAccountCircleLine, _iconsMappingComponen['ri-add'] = Icons.RiAdd, _iconsMappingComponen['ri-add-circle-fill'] = Icons.RiAddCircleFill, _iconsMappingComponen['ri-add-circle-line'] = Icons.RiAddCircleLine, _iconsMappingComponen['ri-alarm-warning-fill'] = Icons.RiAlarmWarningFill, _iconsMappingComponen['ri-alarm-warning-line'] = Icons.RiAlarmWarningLine, _iconsMappingComponen['ri-arrow-down-fill'] = Icons.RiArrowDownFill, _iconsMappingComponen['ri-arrow-down-line'] = Icons.RiArrowDownLine, _iconsMappingComponen['ri-arrow-go-back-fill'] = Icons.RiArrowGoBackFill, _iconsMappingComponen['ri-arrow-go-back-line'] = Icons.RiArrowGoBackLine, _iconsMappingComponen['ri-arrow-go-forward-fill'] = Icons.RiArrowGoForwardFill, _iconsMappingComponen['ri-arrow-go-forward-line'] = Icons.RiArrowGoForwardLine, _iconsMappingComponen['ri-arrow-left-fill'] = Icons.RiArrowLeftFill, _iconsMappingComponen['ri-arrow-left-line'] = Icons.RiArrowLeftLine, _iconsMappingComponen['ri-arrow-left-right-fill'] = Icons.RiArrowLeftRightFill, _iconsMappingComponen['ri-arrow-left-right-line'] = Icons.RiArrowLeftRightLine, _iconsMappingComponen['ri-arrow-m-down-fill'] = Icons.RiArrowMDownFill, _iconsMappingComponen['ri-arrow-m-down-line'] = Icons.RiArrowMDownLine, _iconsMappingComponen['ri-arrow-m-left-fill'] = Icons.RiArrowMLeftFill, _iconsMappingComponen['ri-arrow-m-left-line'] = Icons.RiArrowMLeftLine, _iconsMappingComponen['ri-arrow-m-right-fill'] = Icons.RiArrowMRightFill, _iconsMappingComponen['ri-arrow-m-right-line'] = Icons.RiArrowMRightLine, _iconsMappingComponen['ri-arrow-m-up-fill'] = Icons.RiArrowMUpFill, _iconsMappingComponen['ri-arrow-m-up-line'] = Icons.RiArrowMUpLine, _iconsMappingComponen['ri-arrow-right-fill'] = Icons.RiArrowRightFill, _iconsMappingComponen['ri-arrow-right-line'] = Icons.RiArrowRightLine, _iconsMappingComponen['ri-arrow-up-down-fill'] = Icons.RiArrowUpDownFill, _iconsMappingComponen['ri-arrow-up-down-line'] = Icons.RiArrowUpDownLine, _iconsMappingComponen['ri-arrow-up-fill'] = Icons.RiArrowUpFill, _iconsMappingComponen['ri-arrow-up-line'] = Icons.RiArrowUpLine, _iconsMappingComponen['ri-arrow-xs-down-fill'] = Icons.RiArrowXsDownFill, _iconsMappingComponen['ri-arrow-xs-up-fill'] = Icons.RiArrowXsUpFill, _iconsMappingComponen['ri-calendar-fill'] = Icons.RiCalendarFill, _iconsMappingComponen['ri-calendar-line'] = Icons.RiCalendarLine, _iconsMappingComponen['ri-check'] = Icons.RiCheck, _iconsMappingComponen['ri-close-circle-fill'] = Icons.RiCloseCircleFill, _iconsMappingComponen['ri-close-circle-line'] = Icons.RiCloseCircleLine, _iconsMappingComponen['ri-close'] = Icons.RiClose, _iconsMappingComponen['ri-delete-bin-fill'] = Icons.RiDeleteBinFill, _iconsMappingComponen['ri-delete-bin-line'] = Icons.RiDeleteBinLine, _iconsMappingComponen['ri-error-warning-fill'] = Icons.RiErrorWarningFill, _iconsMappingComponen['ri-error-warning-line'] = Icons.RiErrorWarningLine, _iconsMappingComponen['ri-information-fill'] = Icons.RiInformationFill, _iconsMappingComponen['ri-information-line'] = Icons.RiInformationLine, _iconsMappingComponen['ri-message-fill'] = Icons.RiMessageFill, _iconsMappingComponen['ri-message-line'] = Icons.RiMessageLine, _iconsMappingComponen['ri-pencil-fill'] = Icons.RiPencilFill, _iconsMappingComponen['ri-pencil-line'] = Icons.RiPencilLine, _iconsMappingComponen['ri-reply-fill'] = Icons.RiReplyFill, _iconsMappingComponen['ri-reply-line'] = Icons.RiReplyLine, _iconsMappingComponen['ri-question-fill'] = Icons.RiQuestionFill, _iconsMappingComponen['ri-question-line'] = Icons.RiQuestionLine, _iconsMappingComponen['ri-send-plane-fill'] = Icons.RiSendPlaneFill, _iconsMappingComponen['ri-send-plane-line'] = Icons.RiSendPlaneLine, _iconsMappingComponen['ri-settings-fill'] = Icons.RiSettingsFill, _iconsMappingComponen['ri-settings-line'] = Icons.RiSettingsLine, _iconsMappingComponen['ri-checkbox-fill'] = Icons.RiCheckboxFill, _iconsMappingComponen['ri-checkbox-line'] = Icons.RiCheckboxLine, _iconsMappingComponen['ri-checkbox-indeterminate-fill'] = Icons.RiCheckboxIndeterminateFill, _iconsMappingComponen['ri-checkbox-indeterminate-line'] = Icons.RiCheckboxIndeterminateLine, _iconsMappingComponen['ri-search'] = Icons.RiSearch, _iconsMappingComponen);
+export var iconNames = ['ri-account-circle-fill', 'ri-account-circle-line', 'ri-add-circle-fill', 'ri-add-circle-line', 'ri-add', 'ri-alarm-warning-fill', 'ri-alarm-warning-line', 'ri-arrow-down-fill', 'ri-arrow-down-line', 'ri-arrow-go-back-fill', 'ri-arrow-go-back-line', 'ri-arrow-go-forward-fill', 'ri-arrow-go-forward-line', 'ri-arrow-left-fill', 'ri-arrow-left-line', 'ri-arrow-left-right-fill', 'ri-arrow-left-right-line', 'ri-arrow-m-down-fill', 'ri-arrow-m-down-line', 'ri-arrow-m-left-fill', 'ri-arrow-m-left-line', 'ri-arrow-m-right-fill', 'ri-arrow-m-right-line', 'ri-arrow-m-up-fill', 'ri-arrow-m-up-line', 'ri-arrow-right-fill', 'ri-arrow-right-line', 'ri-arrow-up-down-fill', 'ri-arrow-up-down-line', 'ri-arrow-up-fill', 'ri-arrow-up-line', 'ri-arrow-xs-down-fill', 'ri-arrow-xs-up-fill', 'ri-calendar-fill', 'ri-calendar-line', 'ri-check', 'ri-close-circle-fill', 'ri-close-circle-line', 'ri-close', 'ri-delete-bin-fill', 'ri-delete-bin-line', 'ri-error-warning-fill', 'ri-error-warning-line', 'ri-information-fill', 'ri-information-line', 'ri-message-fill', 'ri-message-line', 'ri-pencil-fill', 'ri-pencil-line', 'ri-question-fill', 'ri-question-line', 'ri-reply-fill', 'ri-reply-line', 'ri-send-plane-fill', 'ri-send-plane-line', 'ri-settings-fill', 'ri-settings-line', 'ri-checkbox-fill', 'ri-checkbox-line', 'ri-checkbox-indeterminate-fill', 'ri-checkbox-indeterminate-line', 'ri-search', 'ri-loader'];
+export var iconsMappingComponent = (_iconsMappingComponen = {}, _iconsMappingComponen['ri-account-circle-fill'] = Icons.RiAccountCircleFill, _iconsMappingComponen['ri-account-circle-line'] = Icons.RiAccountCircleLine, _iconsMappingComponen['ri-add'] = Icons.RiAdd, _iconsMappingComponen['ri-add-circle-fill'] = Icons.RiAddCircleFill, _iconsMappingComponen['ri-add-circle-line'] = Icons.RiAddCircleLine, _iconsMappingComponen['ri-alarm-warning-fill'] = Icons.RiAlarmWarningFill, _iconsMappingComponen['ri-alarm-warning-line'] = Icons.RiAlarmWarningLine, _iconsMappingComponen['ri-arrow-down-fill'] = Icons.RiArrowDownFill, _iconsMappingComponen['ri-arrow-down-line'] = Icons.RiArrowDownLine, _iconsMappingComponen['ri-arrow-go-back-fill'] = Icons.RiArrowGoBackFill, _iconsMappingComponen['ri-arrow-go-back-line'] = Icons.RiArrowGoBackLine, _iconsMappingComponen['ri-arrow-go-forward-fill'] = Icons.RiArrowGoForwardFill, _iconsMappingComponen['ri-arrow-go-forward-line'] = Icons.RiArrowGoForwardLine, _iconsMappingComponen['ri-arrow-left-fill'] = Icons.RiArrowLeftFill, _iconsMappingComponen['ri-arrow-left-line'] = Icons.RiArrowLeftLine, _iconsMappingComponen['ri-arrow-left-right-fill'] = Icons.RiArrowLeftRightFill, _iconsMappingComponen['ri-arrow-left-right-line'] = Icons.RiArrowLeftRightLine, _iconsMappingComponen['ri-arrow-m-down-fill'] = Icons.RiArrowMDownFill, _iconsMappingComponen['ri-arrow-m-down-line'] = Icons.RiArrowMDownLine, _iconsMappingComponen['ri-arrow-m-left-fill'] = Icons.RiArrowMLeftFill, _iconsMappingComponen['ri-arrow-m-left-line'] = Icons.RiArrowMLeftLine, _iconsMappingComponen['ri-arrow-m-right-fill'] = Icons.RiArrowMRightFill, _iconsMappingComponen['ri-arrow-m-right-line'] = Icons.RiArrowMRightLine, _iconsMappingComponen['ri-arrow-m-up-fill'] = Icons.RiArrowMUpFill, _iconsMappingComponen['ri-arrow-m-up-line'] = Icons.RiArrowMUpLine, _iconsMappingComponen['ri-arrow-right-fill'] = Icons.RiArrowRightFill, _iconsMappingComponen['ri-arrow-right-line'] = Icons.RiArrowRightLine, _iconsMappingComponen['ri-arrow-up-down-fill'] = Icons.RiArrowUpDownFill, _iconsMappingComponen['ri-arrow-up-down-line'] = Icons.RiArrowUpDownLine, _iconsMappingComponen['ri-arrow-up-fill'] = Icons.RiArrowUpFill, _iconsMappingComponen['ri-arrow-up-line'] = Icons.RiArrowUpLine, _iconsMappingComponen['ri-arrow-xs-down-fill'] = Icons.RiArrowXsDownFill, _iconsMappingComponen['ri-arrow-xs-up-fill'] = Icons.RiArrowXsUpFill, _iconsMappingComponen['ri-calendar-fill'] = Icons.RiCalendarFill, _iconsMappingComponen['ri-calendar-line'] = Icons.RiCalendarLine, _iconsMappingComponen['ri-check'] = Icons.RiCheck, _iconsMappingComponen['ri-close-circle-fill'] = Icons.RiCloseCircleFill, _iconsMappingComponen['ri-close-circle-line'] = Icons.RiCloseCircleLine, _iconsMappingComponen['ri-close'] = Icons.RiClose, _iconsMappingComponen['ri-delete-bin-fill'] = Icons.RiDeleteBinFill, _iconsMappingComponen['ri-delete-bin-line'] = Icons.RiDeleteBinLine, _iconsMappingComponen['ri-error-warning-fill'] = Icons.RiErrorWarningFill, _iconsMappingComponen['ri-error-warning-line'] = Icons.RiErrorWarningLine, _iconsMappingComponen['ri-information-fill'] = Icons.RiInformationFill, _iconsMappingComponen['ri-information-line'] = Icons.RiInformationLine, _iconsMappingComponen['ri-message-fill'] = Icons.RiMessageFill, _iconsMappingComponen['ri-message-line'] = Icons.RiMessageLine, _iconsMappingComponen['ri-pencil-fill'] = Icons.RiPencilFill, _iconsMappingComponen['ri-pencil-line'] = Icons.RiPencilLine, _iconsMappingComponen['ri-reply-fill'] = Icons.RiReplyFill, _iconsMappingComponen['ri-reply-line'] = Icons.RiReplyLine, _iconsMappingComponen['ri-question-fill'] = Icons.RiQuestionFill, _iconsMappingComponen['ri-question-line'] = Icons.RiQuestionLine, _iconsMappingComponen['ri-send-plane-fill'] = Icons.RiSendPlaneFill, _iconsMappingComponen['ri-send-plane-line'] = Icons.RiSendPlaneLine, _iconsMappingComponen['ri-settings-fill'] = Icons.RiSettingsFill, _iconsMappingComponen['ri-settings-line'] = Icons.RiSettingsLine, _iconsMappingComponen['ri-checkbox-fill'] = Icons.RiCheckboxFill, _iconsMappingComponen['ri-checkbox-line'] = Icons.RiCheckboxLine, _iconsMappingComponen['ri-checkbox-indeterminate-fill'] = Icons.RiCheckboxIndeterminateFill, _iconsMappingComponen['ri-checkbox-indeterminate-line'] = Icons.RiCheckboxIndeterminateLine, _iconsMappingComponen['ri-search'] = Icons.RiSearch, _iconsMappingComponen['ri-loader'] = Icons.RiLoader, _iconsMappingComponen);

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { IconProps } from '../Icon';
+export declare const Spinner: (props: Omit<IconProps, 'name'>) => JSX.Element;

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

@@ -0,0 +1,15 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import styled from 'styled-components';
+import { Icon } from '../Icon';
+var StyledWrapper = styled.div.withConfig({
+  displayName: "Spinner__StyledWrapper",
+  componentId: "sc-ynwr5u-0"
+})(["@keyframes p-keyframes-spin{to{transform:rotate(1turn);}}svg{animation:p-keyframes-spin 800ms linear infinite;}"]);
+export var Spinner = function Spinner(props) {
+  return /*#__PURE__*/React.createElement(StyledWrapper, {
+    className: "spinner-container"
+  }, /*#__PURE__*/React.createElement(Icon, _extends({
+    name: "ri-loader"
+  }, props)));
+};

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

@@ -1,10 +1,11 @@
-export { Button, OutlineButton, DestructiveButton, OutlineMonochromeButton, PrimaryButton, } from './Button';
+export { Badge } from './Badge';
+export { Button, DestructiveButton, OutlineButton, OutlineMonochromeButton, PrimaryButton, } from './Button';
 export { ButtonGroup } from './ButtonGroup';
 export { Icon } from './Icon';
+export { Tab, TabProps, Tabs, TabsProps } from './Tabs';
 export { Typography } from './Typography';
-export { Tab, Tabs, TabProps, TabsProps } from './Tabs';
-import * as Breakpoints from './utilities/breakpoints';
 import * as BorderRadius from './utilities/borderRadius';
+import * as Breakpoints from './utilities/breakpoints';
 import * as Colors from './utilities/colors';
 import * as DropShadow from './utilities/dropShadow';
 import * as Fonts from './utilities/fonts';

package/es/@next/index.js

@@ -1,12 +1,13 @@
-export { Button, OutlineButton, DestructiveButton, OutlineMonochromeButton, PrimaryButton } from './Button';
+export { Badge } from './Badge';
+export { Button, DestructiveButton, OutlineButton, OutlineMonochromeButton, PrimaryButton } from './Button';
 export { ButtonGroup } from './ButtonGroup';
 export { Icon } from './Icon';
+export { Tab, TabProps, Tabs, TabsProps } from './Tabs';
 export { Typography } from './Typography';
-export { Tab, Tabs, TabProps, TabsProps } from './Tabs';
 
 // Utilities
-import * as Breakpoints from './utilities/breakpoints';
 import * as BorderRadius from './utilities/borderRadius';
+import * as Breakpoints from './utilities/breakpoints';
 import * as Colors from './utilities/colors';
 import * as DropShadow from './utilities/dropShadow';
 import * as Fonts from './utilities/fonts';

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

@@ -0,0 +1,9 @@
+import React from 'react';
+declare const badgeStatusVariant: readonly ["neutral", "success", "informational", "warning", "critical", "promotion", "new"];
+export declare type BadgeStatusVariant = typeof badgeStatusVariant[number];
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+    status?: BadgeStatusVariant;
+}
+export declare const Badge: ({ children, status, ...props }: BadgeProps) => JSX.Element;
+export {};

package/lib/@next/Badge/Badge.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.Badge = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireDefault(require("react"));
+var _Typography = require("../Typography");
+var _colors = require("../utilities/colors");
+var _BadgeStyle = require("./BadgeStyle");
+var _excluded = ["children", "status"];
+var badgeStatusVariant = ['neutral', 'success', 'informational', 'warning', 'critical', 'promotion', 'new'];
+var Badge = function Badge(_ref) {
+  var children = _ref.children,
+    status = _ref.status,
+    props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  var content = typeof children === 'string' ? /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+    variant: "overline",
+    color: status === 'new' ? _colors.Neutral.B100 : _colors.Neutral.B18,
+    as: 'span'
+  }, children) : children;
+  return /*#__PURE__*/_react["default"].createElement(_BadgeStyle.BadgeStyle, (0, _extends2["default"])({
+    status: status ? status : 'neutral'
+  }, props), /*#__PURE__*/_react["default"].createElement("div", null, content));
+};
+exports.Badge = Badge;

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

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = exports.Interactive = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _GlintsContainer = require("../../Layout/GlintsContainer/GlintsContainer");
+var _Badge = require("./Badge");
+_Badge.Badge.displayName = 'Badge';
+var defaultText = 'Badge';
+var _default = {
+  title: '@next/Badge',
+  component: _Badge.Badge,
+  decorators: [function (Story) {
+    return /*#__PURE__*/_react["default"].createElement(_GlintsContainer.BaseContainer, null, Story());
+  }]
+};
+exports["default"] = _default;
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_Badge.Badge, args, defaultText);
+};
+var Interactive = Template.bind({});
+exports.Interactive = Interactive;
+Interactive.args = {
+  status: null
+};

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

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