glints-aries 4.0.166 → 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/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.js

@@ -4,15 +4,8 @@ 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("g", {
-    clipPath: "url(#ri-search_svg__a)"
-  }, /*#__PURE__*/React.createElement("path", {
+  }, 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"
-  })), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
-    id: "ri-search_svg__a"
-  }, /*#__PURE__*/React.createElement("path", {
-    fill: "#fff",
-    d: "M0 0h24v24H0z"
-  }))));
+  }));
 };
 export default SvgRiSearch;

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';

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

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

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

@@ -2,6 +2,7 @@ export { Button, OutlineButton, DestructiveButton, OutlineMonochromeButton, Prim
 export { ButtonGroup } from './ButtonGroup';
 export { Icon } from './Icon';
 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 Colors from './utilities/colors';

package/es/@next/index.js

@@ -2,6 +2,7 @@ export { Button, OutlineButton, DestructiveButton, OutlineMonochromeButton, Prim
 export { ButtonGroup } from './ButtonGroup';
 export { Icon } from './Icon';
 export { Typography } from './Typography';
+export { Tab, Tabs, TabProps, TabsProps } from './Tabs';
 
 // Utilities
 import * as Breakpoints from './utilities/breakpoints';

package/lib/@next/Checkbox/Checkbox.js

@@ -11,11 +11,9 @@ var _CheckboxStyle = require("./CheckboxStyle");
 var _lodash = require("lodash");
 var _Icon = require("../Icon");
 var _Typography = require("../Typography");
-var _colors = require("../utilities/colors");
 var _excluded = ["label", "id", "checked", "onChange", "disabled", "indeterminate", "hasError", "helpText"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-var randomId = (0, _nanoid.nanoid)();
 var Checkbox = function Checkbox(_ref) {
   var label = _ref.label,
     id = _ref.id,
@@ -26,6 +24,7 @@ var Checkbox = function Checkbox(_ref) {
     hasError = _ref.hasError,
     helpText = _ref.helpText,
     otherProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  var randomId = (0, _nanoid.nanoid)();
   var checkBoxId = id ? id : randomId;
   var labelId = "label-" + checkBoxId;
   var inputNode = (0, _react.useRef)(null);
@@ -36,7 +35,6 @@ var Checkbox = function Checkbox(_ref) {
     isFocused = _useState2[0],
     setIsFocused = _useState2[1];
   var checkedIcon = indeterminate ? 'ri-checkbox-indeterminate-fill' : 'ri-checkbox-fill';
-  var iconFill = disabled ? _colors.Neutral.B95 : hasError ? _colors.Red.B93 : _colors.Blue.S99;
   (0, _react.useEffect)(function () {
     var value = indeterminate ? 'mixed' : checked;
     setCheckedState(value);
@@ -50,7 +48,8 @@ var Checkbox = function Checkbox(_ref) {
     onChange(checkedValue, checkBoxId);
   };
   return /*#__PURE__*/_react["default"].createElement(_CheckboxStyle.StyledContainer, {
-    "aria-disabled": disabled
+    "aria-disabled": disabled,
+    "data-error": hasError
   }, /*#__PURE__*/_react["default"].createElement(_CheckboxStyle.StyledRow, null, /*#__PURE__*/_react["default"].createElement(_CheckboxStyle.StyledLeftColumn, null, /*#__PURE__*/_react["default"].createElement(_CheckboxStyle.StyledCheckboxContainer, null, /*#__PURE__*/_react["default"].createElement(_CheckboxStyle.StyledCheckbox, {
     role: "checkbox",
     "aria-labelledby": labelId,
@@ -80,10 +79,7 @@ var Checkbox = function Checkbox(_ref) {
       return setIsFocused(false);
     }
   }, otherProps))), /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
-    name: checkedIcon,
-    height: "20px",
-    width: "20px",
-    fill: iconFill
+    name: checkedIcon
   }))), /*#__PURE__*/_react["default"].createElement(_CheckboxStyle.StyledColumn, null, /*#__PURE__*/_react["default"].createElement("label", {
     id: labelId,
     htmlFor: checkBoxId,

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

@@ -11,7 +11,7 @@ var _spacing = require("../utilities/spacing");
 var StyledContainer = _styledComponents["default"].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:", ";}"], _spacing.space4, _colors.Neutral.B18, _colors.Neutral.B68, _colors.Neutral.B85, _colors.Neutral.B95, _colors.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:", ";}"], _spacing.space4, _colors.Neutral.B18, _colors.Blue.S99, _colors.Neutral.B68, _colors.Neutral.B85, _colors.Neutral.B95, _colors.Neutral.B68, _colors.Neutral.B95, _colors.Red.B93);
 exports.StyledContainer = StyledContainer;
 var StyledCheckboxContainer = _styledComponents["default"].div.withConfig({
   displayName: "CheckboxStyle__StyledCheckboxContainer",

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

@@ -10,7 +10,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var SvgRiCheckboxIndeterminateFill = function SvgRiCheckboxIndeterminateFill(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     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/lib/@next/Icon/components/RiCheckboxIndeterminateLine.js

@@ -10,7 +10,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var SvgRiCheckboxIndeterminateLine = function SvgRiCheckboxIndeterminateLine(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     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/lib/@next/Icon/components/RiSearch.js

@@ -11,16 +11,9 @@ var SvgRiSearch = function SvgRiSearch(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), /*#__PURE__*/React.createElement("g", {
-    clipPath: "url(#ri-search_svg__a)"
-  }, /*#__PURE__*/React.createElement("path", {
+  }, 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"
-  })), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
-    id: "ri-search_svg__a"
-  }, /*#__PURE__*/React.createElement("path", {
-    fill: "#fff",
-    d: "M0 0h24v24H0z"
-  }))));
+  }));
 };
 var _default = SvgRiSearch;
 exports["default"] = _default;

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

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.Tab = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Typography = require("../Typography");
+var _TabStyle = require("./TabStyle");
+var Tab = function Tab(_ref) {
+  var content = _ref.content,
+    id = _ref.id,
+    selected = _ref.selected,
+    onSelect = _ref.onSelect;
+  return /*#__PURE__*/_react["default"].createElement(_TabStyle.StyledTabButton, {
+    "data-selected": selected,
+    id: id,
+    onClick: function onClick() {
+      return onSelect();
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_TabStyle.StyledSpan, null, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+    as: "span",
+    variant: "body1"
+  }, content)));
+};
+exports.Tab = Tab;

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

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.StyledUl = exports.StyledTabsContainer = exports.StyledTabHeaderContainer = exports.StyledTabButton = exports.StyledSpan = exports.StyledLi = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _colors = require("../utilities/colors");
+var _spacing = require("../utilities/spacing");
+var Breakpoints = _interopRequireWildcard(require("../utilities/breakpoints"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var StyledTabsContainer = _styledComponents["default"].div.withConfig({
+  displayName: "TabStyle__StyledTabsContainer",
+  componentId: "sc-3xj4eu-0"
+})(["display:block;"]);
+exports.StyledTabsContainer = StyledTabsContainer;
+var StyledTabHeaderContainer = _styledComponents["default"].div.withConfig({
+  displayName: "TabStyle__StyledTabHeaderContainer",
+  componentId: "sc-3xj4eu-1"
+})(["box-shadow:inset 0px -1px 0px #e1e3e5;"]);
+exports.StyledTabHeaderContainer = StyledTabHeaderContainer;
+var StyledUl = _styledComponents["default"].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;}"], _spacing.space8);
+exports.StyledUl = StyledUl;
+var StyledLi = _styledComponents["default"].li.withConfig({
+  displayName: "TabStyle__StyledLi",
+  componentId: "sc-3xj4eu-3"
+})(["display:flex;margin:0;padding:0 ", ";"], _spacing.space4);
+exports.StyledLi = StyledLi;
+var StyledSpan = _styledComponents["default"].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;}}"], _spacing.space16, _spacing.space16, _spacing.space4, _spacing.space4, _colors.Blue.S99, Breakpoints.large);
+exports.StyledSpan = StyledSpan;
+var StyledTabButton = _styledComponents["default"].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;}"], _colors.Neutral.B100, _colors.Neutral.B40, _spacing.space4, _colors.Neutral.B18, _colors.Blue.S100, _colors.Blue.S99, _colors.Blue.S99, Breakpoints.large);
+exports.StyledTabButton = StyledTabButton;

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

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.Tabs = void 0;
+var _reactIdGenerator = _interopRequireDefault(require("react-id-generator"));
+var _react = _interopRequireWildcard(require("react"));
+var _Tab = require("./Tab");
+var _TabStyle = require("./TabStyle");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var 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 = (0, _react.useState)(0),
+    selectedTabIndex = _useState[0],
+    setSelectedTabIndex = _useState[1];
+  (0, _react.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 || (0, _reactIdGenerator["default"])();
+    return /*#__PURE__*/_react["default"].createElement(_TabStyle.StyledLi, {
+      key: tabId + "-" + index
+    }, /*#__PURE__*/_react["default"].createElement(_Tab.Tab, {
+      id: tabId,
+      key: "tab-" + tabId + "-" + index,
+      content: tab.content,
+      onSelect: function onSelect() {
+        return handleSelectedIndexChanged(index);
+      },
+      selected: index === selectedTabIndex
+    }));
+  });
+  return /*#__PURE__*/_react["default"].createElement(_TabStyle.StyledTabsContainer, null, /*#__PURE__*/_react["default"].createElement(_TabStyle.StyledTabHeaderContainer, null, /*#__PURE__*/_react["default"].createElement(_TabStyle.StyledUl, {
+    "data-fitted": fitted
+  }, renderTabs, " ")), /*#__PURE__*/_react["default"].createElement("div", null, children));
+};
+exports.Tabs = Tabs;

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

@@ -0,0 +1,60 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = exports.Interactive = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Tabs = require("./Tabs");
+var _GlintsContainer = require("../../Layout/GlintsContainer/GlintsContainer");
+var _Typography = require("../Typography");
+var _TabsStoriesStyle = require("./TabsStoriesStyle");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/* eslint-disable react/jsx-key */
+
+_Tabs.Tabs.displayName = 'Tabs';
+var _default = {
+  title: '@next/Tabs',
+  component: _Tabs.Tabs,
+  decorators: [function (Story) {
+    return /*#__PURE__*/_react["default"].createElement(_GlintsContainer.BaseContainer, null, Story());
+  }]
+};
+exports["default"] = _default;
+var Template = function Template(args) {
+  var _useState = (0, _react.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["default"].createElement(_TabsStoriesStyle.StyledTable, null, /*#__PURE__*/_react["default"].createElement(_TabsStoriesStyle.StyledRow, null, /*#__PURE__*/_react["default"].createElement(_TabsStoriesStyle.StyledHeaderColumn, null, "Company"), /*#__PURE__*/_react["default"].createElement(_TabsStoriesStyle.StyledHeaderColumn, null, "Contact"), /*#__PURE__*/_react["default"].createElement(_TabsStoriesStyle.StyledHeaderColumn, null, "Country")), /*#__PURE__*/_react["default"].createElement(_TabsStoriesStyle.StyledRow, null, /*#__PURE__*/_react["default"].createElement(_TabsStoriesStyle.StyledColumn, null, "Alfreds Futterkiste"), /*#__PURE__*/_react["default"].createElement(_TabsStoriesStyle.StyledColumn, null, "Maria Anders"), /*#__PURE__*/_react["default"].createElement(_TabsStoriesStyle.StyledColumn, null, "Germany")), /*#__PURE__*/_react["default"].createElement(_TabsStoriesStyle.StyledRow, null, /*#__PURE__*/_react["default"].createElement(_TabsStoriesStyle.StyledColumn, null, "Centro comercial Moctezuma"), /*#__PURE__*/_react["default"].createElement(_TabsStoriesStyle.StyledColumn, null, "Francisco Chang"), /*#__PURE__*/_react["default"].createElement(_TabsStoriesStyle.StyledColumn, null, "Mexico")), /*#__PURE__*/_react["default"].createElement(_TabsStoriesStyle.StyledRow, null, /*#__PURE__*/_react["default"].createElement(_TabsStoriesStyle.StyledColumn, null, "Ernst Handel"), /*#__PURE__*/_react["default"].createElement(_TabsStoriesStyle.StyledColumn, null, "Roland Mendel"), /*#__PURE__*/_react["default"].createElement(_TabsStoriesStyle.StyledColumn, null, "Austria")), /*#__PURE__*/_react["default"].createElement(_TabsStoriesStyle.StyledRow, null, /*#__PURE__*/_react["default"].createElement(_TabsStoriesStyle.StyledColumn, null, "Island Trading"), /*#__PURE__*/_react["default"].createElement(_TabsStoriesStyle.StyledColumn, null, "Helen Bennett"), /*#__PURE__*/_react["default"].createElement(_TabsStoriesStyle.StyledColumn, null, "UK")));
+  };
+  var tabContents = [/*#__PURE__*/_react["default"].createElement(Table, null), /*#__PURE__*/_react["default"].createElement(_Typography.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["default"].createElement(_Tabs.Tabs, {
+    tabs: tabs,
+    selected: selected,
+    onSelected: function onSelected(i) {
+      return setSelected(i);
+    },
+    fitted: args.fitted
+  }, tabContents[selected]);
+};
+var Interactive = Template.bind({});
+exports.Interactive = Interactive;
+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/lib/@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/lib/@next/Tabs/TabsStoriesStyle.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.StyledTable = exports.StyledRow = exports.StyledHeaderColumn = exports.StyledColumn = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+/* eslint-disable react/jsx-key */
+
+var StyledTable = _styledComponents["default"].table.withConfig({
+  displayName: "TabsStoriesStyle__StyledTable",
+  componentId: "sc-34eyhb-0"
+})(["font-family:arial,sans-serif;border-collapse:collapse;width:100%;"]);
+exports.StyledTable = StyledTable;
+var StyledRow = _styledComponents["default"].tr.withConfig({
+  displayName: "TabsStoriesStyle__StyledRow",
+  componentId: "sc-34eyhb-1"
+})(["&:nth-child(even){background-color:#dddddd;}"]);
+exports.StyledRow = StyledRow;
+var StyledColumn = _styledComponents["default"].td.withConfig({
+  displayName: "TabsStoriesStyle__StyledColumn",
+  componentId: "sc-34eyhb-2"
+})(["border:1px solid #dddddd;text-align:left;padding:8px;"]);
+exports.StyledColumn = StyledColumn;
+var StyledHeaderColumn = _styledComponents["default"].th.withConfig({
+  displayName: "TabsStoriesStyle__StyledHeaderColumn",
+  componentId: "sc-34eyhb-3"
+})(["border:1px solid #dddddd;text-align:left;padding:8px;"]);
+exports.StyledHeaderColumn = StyledHeaderColumn;

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

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

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

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

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

@@ -2,6 +2,7 @@ export { Button, OutlineButton, DestructiveButton, OutlineMonochromeButton, Prim
 export { ButtonGroup } from './ButtonGroup';
 export { Icon } from './Icon';
 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 Colors from './utilities/colors';

package/lib/@next/index.js

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.Typography = exports.Spacing = exports.PrimaryButton = exports.OutlineMonochromeButton = exports.OutlineButton = exports.Icon = exports.Fonts = exports.DropShadow = exports.DestructiveButton = exports.Colors = exports.ButtonGroup = exports.Button = exports.Breakpoints = exports.BorderRadius = void 0;
+exports.Typography = exports.TabsProps = exports.Tabs = exports.TabProps = exports.Tab = exports.Spacing = exports.PrimaryButton = exports.OutlineMonochromeButton = exports.OutlineButton = exports.Icon = exports.Fonts = exports.DropShadow = exports.DestructiveButton = exports.Colors = exports.ButtonGroup = exports.Button = exports.Breakpoints = exports.BorderRadius = void 0;
 var _Button = require("./Button");
 exports.Button = _Button.Button;
 exports.OutlineButton = _Button.OutlineButton;
@@ -14,6 +14,11 @@ var _Icon = require("./Icon");
 exports.Icon = _Icon.Icon;
 var _Typography = require("./Typography");
 exports.Typography = _Typography.Typography;
+var _Tabs = require("./Tabs");
+exports.Tab = _Tabs.Tab;
+exports.Tabs = _Tabs.Tabs;
+exports.TabProps = _Tabs.TabProps;
+exports.TabsProps = _Tabs.TabsProps;
 var Breakpoints = _interopRequireWildcard(require("./utilities/breakpoints"));
 exports.Breakpoints = Breakpoints;
 var BorderRadius = _interopRequireWildcard(require("./utilities/borderRadius"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glints-aries",
-  "version": "4.0.166",
+  "version": "4.0.167",
   "description": "Glints ui-kit for frontend",
   "main": "./lib/index.js",
   "module": "./es/index.js",
@@ -129,7 +129,6 @@
     "classnames": "^2.2.6",
     "downshift": "^6.1.3",
     "moment": "^2.24.0",
-    "nanoid": "^4.0.0",
     "react-id-generator": "^3.0.1",
     "styled-system": "^5.1.5"
   },