glints-aries 4.0.165 → 4.0.167

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

@@ -7,8 +7,6 @@ import { StyledCheckbox, StyledCheckboxContainer, StyledColumn, StyledContainer,
 import { noop } from 'lodash-es';
 import { Icon } from '../Icon';
 import { Typography } from '../Typography';
-import { Neutral, Red, Blue } from '../utilities/colors';
-var randomId = nanoid();
 export var Checkbox = function Checkbox(_ref) {
   var label = _ref.label,
     id = _ref.id,
@@ -19,6 +17,7 @@ export var Checkbox = function Checkbox(_ref) {
     hasError = _ref.hasError,
     helpText = _ref.helpText,
     otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var randomId = nanoid();
   var checkBoxId = id ? id : randomId;
   var labelId = "label-" + checkBoxId;
   var inputNode = useRef(null);
@@ -29,7 +28,6 @@ export var Checkbox = function Checkbox(_ref) {
     isFocused = _useState2[0],
     setIsFocused = _useState2[1];
   var checkedIcon = indeterminate ? 'ri-checkbox-indeterminate-fill' : 'ri-checkbox-fill';
-  var iconFill = disabled ? Neutral.B95 : hasError ? Red.B93 : Blue.S99;
   useEffect(function () {
     var value = indeterminate ? 'mixed' : checked;
     setCheckedState(value);
@@ -43,7 +41,8 @@ export var Checkbox = function Checkbox(_ref) {
     onChange(checkedValue, checkBoxId);
   };
   return /*#__PURE__*/React.createElement(StyledContainer, {
-    "aria-disabled": disabled
+    "aria-disabled": disabled,
+    "data-error": hasError
   }, /*#__PURE__*/React.createElement(StyledRow, null, /*#__PURE__*/React.createElement(StyledLeftColumn, null, /*#__PURE__*/React.createElement(StyledCheckboxContainer, null, /*#__PURE__*/React.createElement(StyledCheckbox, {
     role: "checkbox",
     "aria-labelledby": labelId,
@@ -73,10 +72,7 @@ export var Checkbox = function Checkbox(_ref) {
       return setIsFocused(false);
     }
   }, otherProps))), /*#__PURE__*/React.createElement(Icon, {
-    name: checkedIcon,
-    height: "20px",
-    width: "20px",
-    fill: iconFill
+    name: checkedIcon
   }))), /*#__PURE__*/React.createElement(StyledColumn, null, /*#__PURE__*/React.createElement("label", {
     id: labelId,
     htmlFor: checkBoxId,

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

@@ -1,12 +1,12 @@
 import styled from 'styled-components';
 import { Breakpoints } from '../..';
 import { borderRadius4 } from '../utilities/borderRadius';
-import { Neutral, Red } from '../utilities/colors';
+import { Blue, Neutral, Red } from '../utilities/colors';
 import { space4 } from '../utilities/spacing';
 export var StyledContainer = styled.div.withConfig({
   displayName: "CheckboxStyle__StyledContainer",
   componentId: "sc-a9bf1h-0"
-})(["flex-direction:row;align-items:flex-start;padding:", " 0px;gap:8px;color:", ";label{cursor:pointer;margin-top:-1px;}svg{border-radius:4px;position:absolute;top:0;left:0;opacity:0;pointer-events:none;}&[aria-disabled='true'],&[aria-disabled='true'] .help-text{color:", ";}&[aria-disabled='true'] div[role='checkbox']{border-color:", ";background:", ";}&[aria-disabled='true'] svg{background:", ";}"], space4, Neutral.B18, Neutral.B68, Neutral.B85, Neutral.B95, Neutral.B68);
+})(["flex-direction:row;align-items:flex-start;padding:", " 0px;gap:8px;color:", ";label{cursor:pointer;margin-top:-1px;}svg{border-radius:4px;position:absolute;height:20px;width:20px;top:0;left:0;opacity:0;pointer-events:none;fill:", ";}&[aria-disabled='true'],&[aria-disabled='true'] .help-text{color:", ";}&[aria-disabled='true'] div[role='checkbox']{border-color:", ";background:", ";}&[aria-disabled='true'] svg{background:", ";fill:", ";}&[data-error='true'] svg{fill:", ";}"], space4, Neutral.B18, Blue.S99, Neutral.B68, Neutral.B85, Neutral.B95, Neutral.B68, Neutral.B95, Red.B93);
 export var StyledCheckboxContainer = styled.div.withConfig({
   displayName: "CheckboxStyle__StyledCheckboxContainer",
   componentId: "sc-a9bf1h-1"

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { InputProps } from '../Input/Input';
+export declare type CurrencyInputProps = Omit<InputProps, 'type' | 'prefix' | 'onChange' | 'value'> & {
+    locale?: string;
+    value?: number;
+    onChange?: (value: number) => void;
+};
+export declare const CurrencyInput: ({ locale, value, onChange, ...props }: CurrencyInputProps) => JSX.Element;

package/es/@next/CurrencyInput/CurrencyInput.js

@@ -0,0 +1,46 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["locale", "value", "onChange"];
+import React, { useState } from 'react';
+import { StyledCurrency } from './CurrencyStyles';
+export var CurrencyInput = function CurrencyInput(_ref) {
+  var _ref$locale = _ref.locale,
+    locale = _ref$locale === void 0 ? 'en' : _ref$locale,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? 0 : _ref$value,
+    onChange = _ref.onChange,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  var supportedLocale = Intl.ListFormat.supportedLocalesOf(locale);
+  var localeValue = supportedLocale.length > 0 ? supportedLocale[0] : 'en';
+  if (supportedLocale.length === 0) {
+    console.warn("Locale value of " + locale + " is unsupported, \"en\" will be used");
+  }
+  var formatter = new Intl.NumberFormat(localeValue);
+  var getRawNumber = function getRawNumber(value) {
+    if (typeof value === 'number') {
+      return value;
+    }
+    var parts = formatter.formatToParts(1000.1);
+    var thousandSeparator = parts[1].value;
+    var decimalSeparator = parts[3].value;
+    var cleanedValue = parseFloat(value.replace(new RegExp('\\' + thousandSeparator, 'g'), '').replace(new RegExp('\\' + decimalSeparator), '.'));
+    return Number.isNaN(cleanedValue) ? 0 : cleanedValue;
+  };
+  var _useState = useState(formatter.format(getRawNumber(value.toString()))),
+    formattedValue = _useState[0],
+    setFormattedValue = _useState[1];
+  var handleChange = function handleChange(e) {
+    var rawValue = getRawNumber(e.currentTarget.value);
+    onChange(rawValue);
+    setFormattedValue(formatter.format(rawValue));
+  };
+  return /*#__PURE__*/React.createElement(StyledCurrency, _extends({
+    type: "text",
+    prefix: /*#__PURE__*/React.createElement("div", null, "$")
+  }, props, {
+    value: formattedValue === '0' ? '' : formattedValue,
+    onChange: handleChange
+  }));
+};

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { BaseContainer } from '../../Layout/GlintsContainer/GlintsContainer';
+import { CurrencyInput } from './CurrencyInput';
+CurrencyInput.displayName = 'Currency';
+export default {
+  title: '@next/CurrencyInput',
+  component: CurrencyInput,
+  decorators: [function (Story) {
+    return /*#__PURE__*/React.createElement(BaseContainer, null, Story());
+  }],
+  argTypes: {}
+};
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(CurrencyInput, args);
+};
+export var Interactive = Template.bind({});
+Interactive.args = {
+  placeholder: '0.0',
+  disabled: false,
+  locale: 'en',
+  value: 10000,
+  onChange: function onChange(value) {
+    console.log('Currency on changed value: ', value);
+  }
+};

package/es/@next/CurrencyInput/CurrencyInput.test.d.ts

@@ -0,0 +1 @@
+export {};

package/es/@next/CurrencyInput/CurrencyStyles.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const StyledCurrency: import("styled-components").StyledComponent<({ error, disabled, prefix, suffix, ...props }: import("../Input/Input").InputProps) => JSX.Element, any, {}, never>;

package/es/@next/CurrencyInput/CurrencyStyles.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+import { Input } from '../Input/Input';
+import { space24 } from '../utilities/spacing';
+export var StyledCurrency = styled(Input).withConfig({
+  displayName: "CurrencyStyles__StyledCurrency",
+  componentId: "sc-lcby3l-0"
+})(["padding-left:", " !important;"], space24);

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

@@ -3,7 +3,6 @@ import * as React from 'react';
 var SvgRiCheckboxIndeterminateFill = function SvgRiCheckboxIndeterminateFill(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: "M1 0h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1Zm3 8v2h10V8H4Z"

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

@@ -3,7 +3,6 @@ import * as React from 'react';
 var SvgRiCheckboxIndeterminateLine = function SvgRiCheckboxIndeterminateLine(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: "M1 0h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1Zm1 2v14h14V2H2Zm2 6h10v2H4V8Z"

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

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

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

@@ -0,0 +1,11 @@
+import _extends from "@babel/runtime/helpers/extends";
+import * as React from 'react';
+var SvgRiSearch = function SvgRiSearch(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 24 24",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "m18.031 16.617 4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617Zm-2.006-.742A6.977 6.977 0 0 0 18 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 0 0 4.875-1.975l.15-.15Z"
+  }));
+};
+export default SvgRiSearch;

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

@@ -55,6 +55,7 @@ export { default as RiQuestionFill } from './RiQuestionFill';
 export { default as RiQuestionLine } from './RiQuestionLine';
 export { default as RiReplyFill } from './RiReplyFill';
 export { default as RiReplyLine } from './RiReplyLine';
+export { default as RiSearch } from './RiSearch';
 export { default as RiSendPlaneFill } from './RiSendPlaneFill';
 export { default as RiSendPlaneLine } from './RiSendPlaneLine';
 export { default as RiSettingsFill } from './RiSettingsFill';

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

@@ -55,6 +55,7 @@ export { default as RiQuestionFill } from './RiQuestionFill';
 export { default as RiQuestionLine } from './RiQuestionLine';
 export { default as RiReplyFill } from './RiReplyFill';
 export { default as RiReplyLine } from './RiReplyLine';
+export { default as RiSearch } from './RiSearch';
 export { default as RiSendPlaneFill } from './RiSendPlaneFill';
 export { default as RiSendPlaneLine } from './RiSendPlaneLine';
 export { default as RiSettingsFill } from './RiSettingsFill';

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"];
+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 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'];
-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);
+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);

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

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'prefix'> {
+    error?: boolean;
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+}
+export declare const Input: ({ error, disabled, prefix, suffix, ...props }: InputProps) => JSX.Element;

package/es/@next/Input/Input.js

@@ -0,0 +1,27 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["error", "disabled", "prefix", "suffix"];
+import React from 'react';
+import { StyledContainer, StyledInput, StyledPrefixContainer, StyledSuffixContainer } from './InputStyle';
+export var Input = function Input(_ref) {
+  var error = _ref.error,
+    disabled = _ref.disabled,
+    prefix = _ref.prefix,
+    suffix = _ref.suffix,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var hasPrefix = !!prefix;
+  var hasSuffix = !!suffix;
+  var Prefix = function Prefix() {
+    return hasPrefix ? /*#__PURE__*/React.createElement(StyledPrefixContainer, null, prefix) : null;
+  };
+  var Suffix = function Suffix() {
+    return hasSuffix ? /*#__PURE__*/React.createElement(StyledSuffixContainer, null, suffix) : null;
+  };
+  return /*#__PURE__*/React.createElement(StyledContainer, {
+    "data-prefix": hasPrefix,
+    "data-error": error,
+    "data-disabled": disabled
+  }, /*#__PURE__*/React.createElement(Prefix, null), /*#__PURE__*/React.createElement(StyledInput, _extends({
+    disabled: disabled
+  }, props)), /*#__PURE__*/React.createElement(Suffix, null));
+};

package/es/@next/Input/InputStyle.d.ts

@@ -0,0 +1,5 @@
+import { InputProps } from './Input';
+export declare const StyledContainer: import("styled-components").StyledComponent<"div", any, InputProps, never>;
+export declare const StyledPrefixContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledSuffixContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledInput: import("styled-components").StyledComponent<"input", any, InputProps, never>;

package/es/@next/Input/InputStyle.js

@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+import { Breakpoints } from '../..';
+import { Neutral, Red } from '../utilities/colors';
+export var StyledContainer = styled.div.withConfig({
+  displayName: "InputStyle__StyledContainer",
+  componentId: "sc-15z2mnd-0"
+})(["position:relative;display:flex;flex-direction:column;flex:1;flex-basis:100%;font-family:'Noto Sans',sans-serif;font-style:normal;font-weight:400;font-size:16px;line-height:150%;&[data-prefix='true'] input{padding-left:40px;}&[data-error='true'] input{border:1px solid ", ";}&[data-error='true'] input:focus{box-shadow:none;}&[data-disabled='true'] input{border:1px solid ", ";background:", ";color:", ";}&[data-disabled='true'] input::placeholder{color:", ";}&[data-disabled='true'] svg{fill:", ";}&[data-disabled='true'] div{color:", ";}"], Red.B93, Neutral.B85, Neutral.B95, Neutral.B85, Neutral.B85, Neutral.B85, Neutral.B85);
+export var StyledPrefixContainer = styled.div.withConfig({
+  displayName: "InputStyle__StyledPrefixContainer",
+  componentId: "sc-15z2mnd-1"
+})(["position:absolute;padding:0;left:0;line-height:0;color:", ";svg{height:17px;width:17px;margin:10px 14px;fill:", ";}div{color:", ";margin:18px 12px;}"], Neutral.B40, Neutral.B40, Neutral.B40);
+export var StyledSuffixContainer = styled(StyledPrefixContainer).withConfig({
+  displayName: "InputStyle__StyledSuffixContainer",
+  componentId: "sc-15z2mnd-2"
+})(["left:auto;right:0;"]);
+export var StyledInput = styled.input.withConfig({
+  displayName: "InputStyle__StyledInput",
+  componentId: "sc-15z2mnd-3"
+})(["background:", ";box-sizing:border-box;border:1px solid ", ";border-radius:4px;padding:0 12px;font-family:'Noto Sans',sans-serif;font-style:normal;font-weight:400;font-size:16px;line-height:150%;color:", ";flex:none;order:1;align-self:stretch;flex-grow:0;height:36px;&::placeholder{color:", ";}&:focus{outline:none;box-shadow:0px 0px 0px 1px ", ",0px 0px 0px 3px #6ac9ec;}@media (max-width:", "){font-size:14px;}"], Neutral.B100, Neutral.B68, Neutral.B18, Neutral.B40, Neutral.B100, Breakpoints.large);

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { InputProps } from '../Input/Input';
+export declare type NumberInputProps = Omit<InputProps, 'type' | 'prefix'>;
+export declare const NumberInput: (props: NumberInputProps) => JSX.Element;

package/es/@next/NumberInput/NumberInput.js

@@ -0,0 +1,13 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import styled from 'styled-components';
+import { Input } from '../Input/Input';
+var StyledInput = styled(Input).withConfig({
+  displayName: "NumberInput__StyledInput",
+  componentId: "sc-1f5ws9y-0"
+})(["&[type='number']{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;}&[type='number']::-webkit-inner-spin-button,&[type='number']::-webkit-outer-spin-button{-webkit-appearance:none;}"]);
+export var NumberInput = function NumberInput(props) {
+  return /*#__PURE__*/React.createElement(StyledInput, _extends({
+    type: "number"
+  }, props));
+};

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { BaseContainer } from '../../Layout/GlintsContainer/GlintsContainer';
+import { NumberInput } from './NumberInput';
+NumberInput.displayName = 'Number';
+export default {
+  title: '@next/NumberInput',
+  component: NumberInput,
+  decorators: [function (Story) {
+    return /*#__PURE__*/React.createElement(BaseContainer, null, Story());
+  }],
+  argTypes: {}
+};
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(NumberInput, args);
+};
+export var Interactive = Template.bind({});
+Interactive.args = {
+  placeholder: '0.0',
+  disabled: false
+};

package/es/@next/Tabs/Tab.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare type TabProps = {
+    content: React.ReactNode;
+    id?: string;
+    selected?: boolean;
+    onSelect: () => void;
+};
+export declare const Tab: ({ content, id, selected, onSelect }: TabProps) => JSX.Element;

package/es/@next/Tabs/Tab.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Typography } from '../Typography';
+import { StyledSpan, StyledTabButton } from './TabStyle';
+export var Tab = function Tab(_ref) {
+  var content = _ref.content,
+    id = _ref.id,
+    selected = _ref.selected,
+    onSelect = _ref.onSelect;
+  return /*#__PURE__*/React.createElement(StyledTabButton, {
+    "data-selected": selected,
+    id: id,
+    onClick: function onClick() {
+      return onSelect();
+    }
+  }, /*#__PURE__*/React.createElement(StyledSpan, null, /*#__PURE__*/React.createElement(Typography, {
+    as: "span",
+    variant: "body1"
+  }, content)));
+};

package/es/@next/Tabs/TabStyle.d.ts

@@ -0,0 +1,6 @@
+export declare const StyledTabsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledTabHeaderContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledUl: import("styled-components").StyledComponent<"ul", any, {}, never>;
+export declare const StyledLi: import("styled-components").StyledComponent<"li", any, {}, never>;
+export declare const StyledSpan: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const StyledTabButton: import("styled-components").StyledComponent<"button", any, {}, never>;

package/es/@next/Tabs/TabStyle.js

@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+import { Blue, Neutral } from '../utilities/colors';
+import { space16, space4, space8 } from '../utilities/spacing';
+import * as Breakpoints from '../utilities/breakpoints';
+export var StyledTabsContainer = styled.div.withConfig({
+  displayName: "TabStyle__StyledTabsContainer",
+  componentId: "sc-3xj4eu-0"
+})(["display:block;"]);
+export var StyledTabHeaderContainer = styled.div.withConfig({
+  displayName: "TabStyle__StyledTabHeaderContainer",
+  componentId: "sc-3xj4eu-1"
+})(["box-shadow:inset 0px -1px 0px #e1e3e5;"]);
+export var StyledUl = styled.ul.withConfig({
+  displayName: "TabStyle__StyledUl",
+  componentId: "sc-3xj4eu-2"
+})(["display:flex;flex-direction:row;align-items:flex-start;padding:0;gap:", ";&[data-fitted='true'] li{flex:1;}"], space8);
+export var StyledLi = styled.li.withConfig({
+  displayName: "TabStyle__StyledLi",
+  componentId: "sc-3xj4eu-3"
+})(["display:flex;margin:0;padding:0 ", ";"], space4);
+export var StyledSpan = styled.span.withConfig({
+  displayName: "TabStyle__StyledSpan",
+  componentId: "sc-3xj4eu-4"
+})(["position:relative;display:block;padding:0 ", ";&::before{content:'';position:absolute;bottom:-", ";left:0;right:0;height:3px;border-top-left-radius:", ";border-top-right-radius:", ";}&&::after{content:'';position:absolute;z-index:1;inset:-1px;pointer-events:none;box-shadow:0 0 0 -1px ", ";transition:box-shadow 100ms ease;}@media (max-width:", "){&::before{bottom:-14px;}}"], space16, space16, space4, space4, Blue.S99, Breakpoints.large);
+export var StyledTabButton = styled.button.withConfig({
+  displayName: "TabStyle__StyledTabButton",
+  componentId: "sc-3xj4eu-5"
+})(["border:0;background:", ";height:56px;cursor:pointer;color:", ";margin-bottom:1px;width:100%;padding:0 ", ";&:hover{color:", ";}&:hover span::before{background:", ";}&[data-selected='true']{color:", ";}&[data-selected='true'] > span::before{background:", ";}@media (max-width:", "){height:48px;}"], Neutral.B100, Neutral.B40, space4, Neutral.B18, Blue.S100, Blue.S99, Blue.S99, Breakpoints.large);

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

@@ -0,0 +1,21 @@
+import React from 'react';
+export declare type TabModel = {
+    /** Id of the tab, a random id will nbe assigned if empty */
+    id?: string;
+    /** Content of the type header */
+    content: React.ReactNode;
+};
+export declare type TabsProps = {
+    /** TabModel has 2 properties
+     *
+     * `id?: string`, id for Tab and will be autogenerated if empty
+     *
+     * `content: React.ReactNode` component for Tab header
+     * */
+    tabs: TabModel[];
+    selected?: number;
+    children?: React.ReactNode;
+    fitted?: boolean;
+    onSelected?: (index: number) => void;
+};
+export declare const Tabs: ({ tabs, selected: selectedIndex, children, fitted, onSelected, }: TabsProps) => JSX.Element;

package/es/@next/Tabs/Tabs.js

@@ -0,0 +1,43 @@
+import nextId from 'react-id-generator';
+import React, { useEffect, useState } from 'react';
+import { Tab } from './Tab';
+import { StyledLi, StyledTabHeaderContainer, StyledTabsContainer, StyledUl } from './TabStyle';
+export var Tabs = function Tabs(_ref) {
+  var tabs = _ref.tabs,
+    _ref$selected = _ref.selected,
+    selectedIndex = _ref$selected === void 0 ? 0 : _ref$selected,
+    children = _ref.children,
+    fitted = _ref.fitted,
+    onSelected = _ref.onSelected;
+  var tabLength = tabs.length;
+  var _useState = useState(0),
+    selectedTabIndex = _useState[0],
+    setSelectedTabIndex = _useState[1];
+  useEffect(function () {
+    if (selectedIndex < 0 || selectedIndex >= tabLength) {
+      return;
+    }
+    setSelectedTabIndex(selectedIndex);
+  }, [selectedIndex, tabLength]);
+  var handleSelectedIndexChanged = function handleSelectedIndexChanged(index) {
+    setSelectedTabIndex(index);
+    onSelected == null ? void 0 : onSelected(index);
+  };
+  var renderTabs = tabs.map(function (tab, index) {
+    var tabId = tab.id || nextId();
+    return /*#__PURE__*/React.createElement(StyledLi, {
+      key: tabId + "-" + index
+    }, /*#__PURE__*/React.createElement(Tab, {
+      id: tabId,
+      key: "tab-" + tabId + "-" + index,
+      content: tab.content,
+      onSelect: function onSelect() {
+        return handleSelectedIndexChanged(index);
+      },
+      selected: index === selectedTabIndex
+    }));
+  });
+  return /*#__PURE__*/React.createElement(StyledTabsContainer, null, /*#__PURE__*/React.createElement(StyledTabHeaderContainer, null, /*#__PURE__*/React.createElement(StyledUl, {
+    "data-fitted": fitted
+  }, renderTabs, " ")), /*#__PURE__*/React.createElement("div", null, children));
+};

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

@@ -0,0 +1,51 @@
+/* eslint-disable react/jsx-key */
+import React, { useState } from 'react';
+import { Tabs } from './Tabs';
+import { BaseContainer } from '../../Layout/GlintsContainer/GlintsContainer';
+import { Typography } from '../Typography';
+import { StyledColumn, StyledHeaderColumn, StyledRow, StyledTable } from './TabsStoriesStyle';
+Tabs.displayName = 'Tabs';
+export default {
+  title: '@next/Tabs',
+  component: Tabs,
+  decorators: [function (Story) {
+    return /*#__PURE__*/React.createElement(BaseContainer, null, Story());
+  }]
+};
+var Template = function Template(args) {
+  var _useState = useState(args.selected || 0),
+    selected = _useState[0],
+    setSelected = _useState[1];
+  var tabs = [{
+    id: 'id-tab-1',
+    content: 'Tab #1'
+  }, {
+    id: 'id-tab-2',
+    content: 'Tab #2'
+  }];
+  var Table = function Table() {
+    return /*#__PURE__*/React.createElement(StyledTable, null, /*#__PURE__*/React.createElement(StyledRow, null, /*#__PURE__*/React.createElement(StyledHeaderColumn, null, "Company"), /*#__PURE__*/React.createElement(StyledHeaderColumn, null, "Contact"), /*#__PURE__*/React.createElement(StyledHeaderColumn, null, "Country")), /*#__PURE__*/React.createElement(StyledRow, null, /*#__PURE__*/React.createElement(StyledColumn, null, "Alfreds Futterkiste"), /*#__PURE__*/React.createElement(StyledColumn, null, "Maria Anders"), /*#__PURE__*/React.createElement(StyledColumn, null, "Germany")), /*#__PURE__*/React.createElement(StyledRow, null, /*#__PURE__*/React.createElement(StyledColumn, null, "Centro comercial Moctezuma"), /*#__PURE__*/React.createElement(StyledColumn, null, "Francisco Chang"), /*#__PURE__*/React.createElement(StyledColumn, null, "Mexico")), /*#__PURE__*/React.createElement(StyledRow, null, /*#__PURE__*/React.createElement(StyledColumn, null, "Ernst Handel"), /*#__PURE__*/React.createElement(StyledColumn, null, "Roland Mendel"), /*#__PURE__*/React.createElement(StyledColumn, null, "Austria")), /*#__PURE__*/React.createElement(StyledRow, null, /*#__PURE__*/React.createElement(StyledColumn, null, "Island Trading"), /*#__PURE__*/React.createElement(StyledColumn, null, "Helen Bennett"), /*#__PURE__*/React.createElement(StyledColumn, null, "UK")));
+  };
+  var tabContents = [/*#__PURE__*/React.createElement(Table, null), /*#__PURE__*/React.createElement(Typography, {
+    variant: "body2"
+  }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")];
+  return /*#__PURE__*/React.createElement(Tabs, {
+    tabs: tabs,
+    selected: selected,
+    onSelected: function onSelected(i) {
+      return setSelected(i);
+    },
+    fitted: args.fitted
+  }, tabContents[selected]);
+};
+export var Interactive = Template.bind({});
+Interactive.args = {};
+Interactive.parameters = {
+  docs: {
+    source: {
+      code: "const [selected, setSelected] = useState(args.selected || 0);\n      const tabs: TabModel[] = [\n        { id: 'id-tab-1', content: 'Tab #1' },\n        { id: 'id-tab-2', content: 'Tab #2' },\n      ];\n    \n      const Table = () => {\n        return (\n          <StyledTable>\n            <StyledRow>\n              <StyledHeaderColumn>Company</StyledHeaderColumn>\n              <StyledHeaderColumn>Contact</StyledHeaderColumn>\n              <StyledHeaderColumn>Country</StyledHeaderColumn>\n            </StyledRow>\n            <StyledRow>\n              <StyledColumn>Alfreds Futterkiste</StyledColumn>\n              <StyledColumn>Maria Anders</StyledColumn>\n              <StyledColumn>Germany</StyledColumn>\n            </StyledRow>\n            <StyledRow>\n              <StyledColumn>Centro comercial Moctezuma</StyledColumn>\n              <StyledColumn>Francisco Chang</StyledColumn>\n              <StyledColumn>Mexico</StyledColumn>\n            </StyledRow>\n            <StyledRow>\n              <StyledColumn>Ernst Handel</StyledColumn>\n              <StyledColumn>Roland Mendel</StyledColumn>\n              <StyledColumn>Austria</StyledColumn>\n            </StyledRow>\n            <StyledRow>\n              <StyledColumn>Island Trading</StyledColumn>\n              <StyledColumn>Helen Bennett</StyledColumn>\n              <StyledColumn>UK</StyledColumn>\n            </StyledRow>\n          </StyledTable>\n        );\n      };\n    \n      const tabContents = [\n        <Table />,\n        <Typography variant=\"body2\">\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod\n          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim\n          veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea\n          commodo consequat. Duis aute irure dolor in reprehenderit in voluptate\n          velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat\n          cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id\n          est laborum.\n        </Typography>,\n      ];\n    \n      return (\n        <Tabs\n          tabs={tabs}\n          selected={selected}\n          onSelected={i => setSelected(i)}\n          fitted={args.fitted}\n        >\n          {tabContents[selected]}\n        </Tabs>\n      );\n    };",
+      language: 'html',
+      type: 'auto'
+    }
+  }
+};

package/es/@next/Tabs/TabsStoriesStyle.d.ts

@@ -0,0 +1,4 @@
+export declare const StyledTable: import("styled-components").StyledComponent<"table", any, {}, never>;
+export declare const StyledRow: import("styled-components").StyledComponent<"tr", any, {}, never>;
+export declare const StyledColumn: import("styled-components").StyledComponent<"td", any, {}, never>;
+export declare const StyledHeaderColumn: import("styled-components").StyledComponent<"th", any, {}, never>;

package/es/@next/Tabs/TabsStoriesStyle.js

@@ -0,0 +1,18 @@
+/* eslint-disable react/jsx-key */
+import styled from 'styled-components';
+export var StyledTable = styled.table.withConfig({
+  displayName: "TabsStoriesStyle__StyledTable",
+  componentId: "sc-34eyhb-0"
+})(["font-family:arial,sans-serif;border-collapse:collapse;width:100%;"]);
+export var StyledRow = styled.tr.withConfig({
+  displayName: "TabsStoriesStyle__StyledRow",
+  componentId: "sc-34eyhb-1"
+})(["&:nth-child(even){background-color:#dddddd;}"]);
+export var StyledColumn = styled.td.withConfig({
+  displayName: "TabsStoriesStyle__StyledColumn",
+  componentId: "sc-34eyhb-2"
+})(["border:1px solid #dddddd;text-align:left;padding:8px;"]);
+export var StyledHeaderColumn = styled.th.withConfig({
+  displayName: "TabsStoriesStyle__StyledHeaderColumn",
+  componentId: "sc-34eyhb-3"
+})(["border:1px solid #dddddd;text-align:left;padding:8px;"]);

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

@@ -0,0 +1,2 @@
+export * from './Tab';
+export * from './Tabs';