@dxc-technology/halstack-react 0.0.0-d238e47 → 0.0.0-d30020b

package/select/types.d.ts

@@ -0,0 +1,170 @@
+/// <reference types="react" />
+declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+declare type Margin = {
+    top?: Space;
+    bottom?: Space;
+    left?: Space;
+    right?: Space;
+};
+declare type SVG = React.SVGProps<SVGSVGElement>;
+declare type OptionGroup = {
+    /**
+     * Label of the group to be shown in the select's listbox.
+     */
+    label: string;
+    /**
+     * List of the grouped options.
+     */
+    options: Option[];
+};
+declare type Option = {
+    /**
+     * Element used as the icon that will be placed before the option label.
+     * It can be a url of an image or an inline SVG. If the url option
+     * is the chosen one, take into account that the component's
+     * color styling tokens will not be applied to the image.
+     */
+    icon?: string | SVG;
+    /**
+     * Label of the option to be shown in the select's listbox.
+     */
+    label: string;
+    /**
+     * Value of the option. It should be unique and
+     * not an empty string, which is reserved to the empty option added
+     * by optional prop.
+     */
+    value: string;
+};
+declare type CommonProps = {
+    /**
+     * Text to be placed above the select.
+     */
+    label?: string;
+    /**
+     * Name attribute of the input element. This attribute will allow users
+     * to find the component's value during the submit event. In this event,
+     * the component's value will always be a regular string, for both single
+     * and multiple selection modes, been in the first one a single option
+     * value and in the multiple variant more than one option value,
+     * separated by commas.
+     */
+    name?: string;
+    /**
+     * An array of objects representing the selectable options.
+     */
+    options?: Option[] | OptionGroup[];
+    /**
+     * Helper text to be placed above the select.
+     */
+    helperText?: string;
+    /**
+     * Text to be put as placeholder of the select.
+     */
+    placeholder?: string;
+    /**
+     * If true, the component will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * If true, the select will be optional, showing '(Optional)'
+     * next to the label and adding a default first option with an empty string as value,
+     * been the placeholder (if defined) its label. Otherwise, the field will be
+     * considered required and an error will be passed as a parameter to the
+     * OnBlur and onChange functions if an option wasn't selected.
+     */
+    optional?: boolean;
+    /**
+     * If true, enables search functionality.
+     */
+    searchable?: boolean;
+    /**
+     * If it is defined, the component will change its appearance, showing
+     * the error below the select component. If it is not defined, the error
+     * messages will be managed internally, but never displayed on its own.
+     */
+    error?: string;
+    /**
+     * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
+     * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
+     */
+    margin?: Space | Margin;
+    /**
+     * Size of the component.
+     */
+    size?: "small" | "medium" | "large" | "fillParent";
+    /**
+     * Value of the tabindex attribute.
+     */
+    tabIndex?: number;
+};
+declare type SingleSelect = CommonProps & {
+    /**
+     * If true, the select component will support multiple selected options.
+     * In that case, value will be an array of strings with each selected
+     * option value.
+     */
+    multiple?: false;
+    /**
+     * Value of the select. If undefined, the component will be uncontrolled
+     * and the value will be managed internally by the component.
+     */
+    value?: string;
+    /**
+     * This function will be called when the user selects an option.
+     * An object including the current value and the error (if the value entered is not valid)
+     * will be passed to this function. If there is no error, error will be null.
+     */
+    onChange?: (val: {
+        value: string;
+        error: string;
+    }) => void;
+    /**
+     * This function will be called when the select loses the focus. An
+     * object including the value and the error (if the value
+     * selected is not valid) will be passed to this function. If there is no error,
+     * error will be null.
+     */
+    onBlur?: (val: {
+        value: string;
+        error: string;
+    }) => void;
+};
+declare type MultipleSelect = CommonProps & {
+    /**
+     * If true, the select component will support multiple selected options.
+     * In that case, value will be an array of strings with each selected
+     * option value.
+     */
+    multiple: true;
+    /**
+     * Value of the select. If undefined, the component will be uncontrolled
+     * and the value will be managed internally by the component.
+     */
+    value?: string[];
+    /**
+     * This function will be called when the user selects an option.
+     * An object including the current selected values and the error (if the value entered is not valid)
+     * will be passed to this function. If there is no error, error will be null.
+     */
+    onChange?: (val: {
+        value: string[];
+        error: string;
+    }) => void;
+    /**
+     * This function will be called when the select loses the focus. An
+     * object including the selected values and the error (if the value
+     * selected is not valid) will be passed to this function. If there is no error,
+     * error will be null.
+     */
+    onBlur?: (val: {
+        value: string[];
+        error: string;
+    }) => void;
+};
+declare type Props = SingleSelect | MultipleSelect;
+/**
+ * Reference to the component.
+ */
+export declare type RefType = HTMLDivElement;
+export default Props;

package/select/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/sidenav/Sidenav.js

@@ -17,9 +17,9 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _variables = require("../common/variables.js");
 
-var _useTheme = _interopRequireDefault(require("../useTheme.js"));
+var _useTheme = _interopRequireDefault(require("../useTheme"));
 
-var _BackgroundColorContext = require("../BackgroundColorContext.js");
+var _BackgroundColorContext = require("../BackgroundColorContext");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 

package/sidenav/Sidenav.stories.tsx

@@ -143,7 +143,24 @@ export const Chromatic = () => (
             gravida enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare,
             malesuada urna eu, fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam
             sit amet maximus augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo.
-            Praesent quis nunc dignissim, pharetra neque molestie, molestie lectus.
+            Praesent quis nunc dignissim, pharetra neque molestie, molestie lectus. Lorem ipsum dolor sit amet,
+            consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna, placerat sit amet felis
+            eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue
+            laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo sed dapibus tincidunt. Vestibulum
+            cursus ut risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le, risus eros aliquam erat, ut
+            efficitur ante neque id odio. Nam orci leo, dignissim sit amet dolor ut, congue gravida enim. Donec rhoncus
+            aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare, malesuada urna eu, fringilla mauris.
+            Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus augue. Vivamus erat
+            sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc dignissim, pharetra
+            neque molestie, molestie lectus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas
+            luctus porttitor. Donec massa magna, placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum
+            dolor sit amet, consectetur adipiscing elit. Donec congue laoreet orci, nec elementum dolor consequat quis.
+            Curabitur rhoncus justo sed dapibus tincidunt. Vestibulum cursus ut risus sit amet congue. Nunc luctus, urna
+            ullamcorper facilisis Jia Le, risus eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo,
+            dignissim sit amet dolor ut, congue gravida enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae.
+            Nunc sit amet elit ornare, malesuada urna eu, fringilla mauris. Vivamus bibendum turpis est, id elementum
+            purus euismod sit amet. Etiam sit amet maximus augue. Vivamus erat sapien, ultricies fringilla tellus id,
+            condimentum blandit justo. Praesent quis nunc dignissim, pharetra neque molestie, molestie lectus.
           </p>
         </DxcSidenav>
       </StyledContainer>

package/slider/Slider.js

@@ -27,9 +27,9 @@ var _variables = require("../common/variables.js");
 
 var _utils = require("../common/utils.js");
 
-var _useTheme = _interopRequireDefault(require("../useTheme.js"));
+var _useTheme = _interopRequireDefault(require("../useTheme"));
 
-var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext.js"));
+var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext"));
 
 var _uuid = require("uuid");
 

package/spinner/Spinner.js

@@ -19,9 +19,9 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _variables = require("../common/variables.js");
 
-var _useTheme = _interopRequireDefault(require("../useTheme.js"));
+var _useTheme = _interopRequireDefault(require("../useTheme"));
 
-var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext.js"));
+var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext"));
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
 

package/spinner/Spinner.stories.jsx

@@ -62,6 +62,7 @@ export const Chromatic = () => (
       <DxcSpinner margin="xlarge" mode="small" value="75"></DxcSpinner>
       <Title title="Xxlarge margin" theme="light" level={4} />
       <DxcSpinner margin="xxlarge" mode="small" value="75"></DxcSpinner>
+      <hr />
     </ExampleContainer>
   </>
 );

package/stack/Stack.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import StackPropsType from "./types";
+export default function Stack({ gutter, divider, align, as, children }: StackPropsType): JSX.Element;

package/stack/Stack.js

@@ -0,0 +1,97 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = Stack;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject, _templateObject2;
+
+function Stack(_ref) {
+  var gutter = _ref.gutter,
+      divider = _ref.divider,
+      align = _ref.align,
+      _ref$as = _ref.as,
+      as = _ref$as === void 0 ? "div" : _ref$as,
+      children = _ref.children;
+  return /*#__PURE__*/_react["default"].createElement(StyledStack, {
+    gutter: gutter,
+    divider: divider,
+    align: align,
+    as: as
+  }, _react["default"].Children.map(children, function (child, index) {
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, child, divider && index !== _react["default"].Children.count(children) - 1 && /*#__PURE__*/_react["default"].createElement(Divider, null));
+  }));
+}
+
+var Divider = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  height: 1px;\n  background-color: #999999;\n"])));
+
+var StyledStack = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  align-items: ", ";\n  gap: ", ";\n  margin: 0;\n  padding: 0;\n"])), function (_ref2) {
+  var align = _ref2.align;
+
+  switch (align) {
+    case "start":
+      return "flex-start";
+
+    case "center":
+      return "center";
+
+    case "end":
+      return "flex-end";
+
+    case "baseline":
+      return "baseline";
+
+    case "stretch":
+      return "stretch";
+
+    default:
+      return "initial";
+  }
+}, function (_ref3) {
+  var gutter = _ref3.gutter,
+      divider = _ref3.divider;
+
+  switch (gutter) {
+    case "none":
+      return "0";
+
+    case "xxxsmall":
+      return "calc(0.125rem / ".concat(divider ? 2 : 1, ")");
+
+    case "xxsmall":
+      return "calc(0.25rem / ".concat(divider ? 2 : 1, ")");
+
+    case "xsmall":
+      return "calc(0.5rem / ".concat(divider ? 2 : 1, ")");
+
+    case "small":
+      return "calc(1rem / ".concat(divider ? 2 : 1, ")");
+
+    case "medium":
+      return "calc(1.5rem / ".concat(divider ? 2 : 1, ")");
+
+    case "large":
+      return "calc(2rem / ".concat(divider ? 2 : 1, ")");
+
+    case "xlarge":
+      return "calc(3rem / ".concat(divider ? 2 : 1, ")");
+
+    case "xxlarge":
+      return "calc(4rem / ".concat(divider ? 2 : 1, ")");
+
+    case "xxxlarge":
+      return "calc(5rem / ".concat(divider ? 2 : 1, ")");
+
+    default:
+      return "0";
+  }
+});

package/stack/Stack.stories.tsx

@@ -0,0 +1,164 @@
+import React from "react";
+import Title from "../../.storybook/components/Title";
+import styled from "styled-components";
+import DxcStack from "./Stack";
+
+export default {
+  title: "Stack",
+  component: DxcStack,
+};
+
+export const Chromatic = () => (
+  <>
+    <Title title="Default" theme="light" level={4} />
+    <Container>
+      <DxcStack>
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+      </DxcStack>
+    </Container>
+    <Title title="Align = baseline" theme="light" level={4} />
+    <Container>
+      <DxcStack align="baseline">
+        <Placeholder paddingLeft={20}></Placeholder>
+        <Placeholder></Placeholder>
+        <Placeholder paddingRight={60}></Placeholder>
+      </DxcStack>
+    </Container>
+    <Title title="Align = center" theme="light" level={4} />
+    <Container>
+      <DxcStack align="center">
+        <Placeholder paddingLeft={20}></Placeholder>
+        <Placeholder></Placeholder>
+        <Placeholder paddingLeft={60}></Placeholder>
+      </DxcStack>
+    </Container>
+    <Title title="Align = end" theme="light" level={4} />
+    <Container>
+      <DxcStack align="end">
+        <Placeholder paddingLeft={20}></Placeholder>
+        <Placeholder></Placeholder>
+        <Placeholder paddingLeft={60}></Placeholder>
+      </DxcStack>
+    </Container>
+    <Title title="Align = start" theme="light" level={4} />
+    <Container>
+      <DxcStack align="start">
+        <Placeholder paddingLeft={20}></Placeholder>
+        <Placeholder></Placeholder>
+        <Placeholder paddingLeft={60}></Placeholder>
+      </DxcStack>
+    </Container>
+    <Title title="Align = stretch" theme="light" level={4} />
+    <Container>
+      <DxcStack align="stretch">
+        <Placeholder paddingLeft={20}></Placeholder>
+        <Placeholder></Placeholder>
+        <Placeholder paddingLeft={60}></Placeholder>
+      </DxcStack>
+    </Container>
+    <Title title="gutter = xxxsmall" theme="light" level={4} />
+    <Container>
+      <DxcStack gutter="xxxsmall">
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+      </DxcStack>
+    </Container>
+    <Title title="gutter = xxsmall" theme="light" level={4} />
+    <Container>
+      <DxcStack gutter="xxsmall">
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+      </DxcStack>
+    </Container>
+    <Title title="gutter = xsmall" theme="light" level={4} />
+    <Container>
+      <DxcStack gutter="xsmall">
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+      </DxcStack>
+    </Container>
+    <Title title="gutter = small" theme="light" level={4} />
+    <Container>
+      <DxcStack gutter="small">
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+      </DxcStack>
+    </Container>
+    <Title title="gutter = medium" theme="light" level={4} />
+    <Container>
+      <DxcStack gutter="medium">
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+      </DxcStack>
+    </Container>
+    <Title title="gutter = large" theme="light" level={4} />
+    <Container>
+      <DxcStack gutter="large">
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+      </DxcStack>
+    </Container>
+    <Title title="gutter = xlarge" theme="light" level={4} />
+    <Container>
+      <DxcStack gutter="xlarge">
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+      </DxcStack>
+    </Container>
+    <Title title="gutter = xxlarge" theme="light" level={4} />
+    <Container>
+      <DxcStack gutter="xxlarge">
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+      </DxcStack>
+    </Container>
+    <Title title="gutter = xxxlarge" theme="light" level={4} />
+    <Container>
+      <DxcStack gutter="xxxlarge">
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+      </DxcStack>
+    </Container>
+    <Title title="gutter = xxlarge && divider" theme="light" level={4} />
+    <Container>
+      <DxcStack gutter="xxlarge" divider>
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+      </DxcStack>
+    </Container>
+    <Title title="gutter = none" theme="light" level={4} />
+    <Container>
+      <DxcStack gutter="none">
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+      </DxcStack>
+    </Container>
+  </>
+);
+
+const Container = styled.div`
+  background: #f2eafa;
+  padding: 10px;
+`;
+
+const Placeholder = styled.div`
+  min-height: 40px;
+  min-width: 120px;
+  border: 1px solid #a46ede;
+  background-color: #e5d5f6;
+  padding-left: ${({ paddingLeft }) => `${paddingLeft ?? 0}px`};
+  padding-right: ${({ paddingRight }) => `${paddingRight ?? 0}px`};
+`;

package/stack/types.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+declare type Props = {
+    gutter?: "none" | "xxxsmall" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge";
+    divider?: boolean;
+    align?: "start" | "center" | "end" | "baseline" | "stretch";
+    as?: React.ElementType;
+    children: React.ReactNode;
+};
+export default Props;

package/stack/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/switch/Switch.js

@@ -27,9 +27,9 @@ var _variables = require("../common/variables.js");
 
 var _utils = require("../common/utils.js");
 
-var _useTheme = _interopRequireDefault(require("../useTheme.js"));
+var _useTheme = _interopRequireDefault(require("../useTheme"));
 
-var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext.js"));
+var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext"));
 
 var _templateObject, _templateObject2;
 

package/switch/Switch.stories.tsx

@@ -72,7 +72,7 @@ export const Chromatic = () => (
     <Title title="Margins" theme="light" level={2} />
     <ExampleContainer>
       <Title title="Xxsmall margin" theme="light" level={4} />
-      <DxcSwitch label="Xxsmmall" margin="xxsmall" />
+      <DxcSwitch label="Xxsmall" margin="xxsmall" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Xsmall margin" theme="light" level={4} />

package/table/Table.js

@@ -21,9 +21,9 @@ var _variables = require("../common/variables.js");
 
 var _utils = require("../common/utils.js");
 
-var _useTheme = _interopRequireDefault(require("../useTheme.js"));
+var _useTheme = _interopRequireDefault(require("../useTheme"));
 
-var _BackgroundColorContext = require("../BackgroundColorContext.js");
+var _BackgroundColorContext = require("../BackgroundColorContext");
 
 var _templateObject, _templateObject2;
 

package/table/Table.stories.jsx

@@ -271,6 +271,7 @@ export const Chromatic = () => (
           <td>Cell 9</td>
         </tr>
       </DxcTable>
+      <hr />
     </ExampleContainer>
   </>
-);
+);

package/tabs/Tabs.js

@@ -9,10 +9,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -27,7 +27,7 @@ var _variables = require("../common/variables.js");
 
 var _Badge = _interopRequireDefault(require("../badge/Badge"));
 
-var _useTheme = _interopRequireDefault(require("../useTheme.js"));
+var _useTheme = _interopRequireDefault(require("../useTheme"));
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 
@@ -70,12 +70,12 @@ var DxcTabs = function DxcTabs(_ref) {
     }, /*#__PURE__*/_react["default"].createElement(TabLabelContainer, {
       hasLabelAndIcon: hasLabelAndIcon,
       iconPosition: iconPosition
-    }, tab.icon ? /*#__PURE__*/_react["default"].createElement(TabIconContainer, {
+    }, tab.icon && /*#__PURE__*/_react["default"].createElement(TabIconContainer, {
       hasLabelAndIcon: hasLabelAndIcon,
       iconPosition: iconPosition
-    }, (0, _typeof2["default"])(tab.icon) === "object" ? tab.icon : /*#__PURE__*/_react["default"].createElement(tab.icon)) : tab.iconSrc && /*#__PURE__*/_react["default"].createElement(TabIcon, {
-      src: tab.iconSrc
-    }), /*#__PURE__*/_react["default"].createElement(LabelTextContainer, null, tab.label))), tab.notificationNumber && tab.notificationNumber !== false && /*#__PURE__*/_react["default"].createElement(BadgeContainer, {
+    }, typeof tab.icon === "string" ? /*#__PURE__*/_react["default"].createElement(TabIcon, {
+      src: tab.icon
+    }) : tab.icon), /*#__PURE__*/_react["default"].createElement(LabelTextContainer, null, tab.label))), tab.notificationNumber && tab.notificationNumber !== false && /*#__PURE__*/_react["default"].createElement(BadgeContainer, {
       hasLabelAndIcon: hasLabelAndIcon,
       iconPosition: iconPosition
     }, /*#__PURE__*/_react["default"].createElement(_Badge["default"], {
@@ -201,7 +201,7 @@ var DxCTabs = _styledComponents["default"].div(_templateObject7 || (_templateObj
   return props.theme.scrollButtonsWidth;
 });
 
-var TabIcon = _styledComponents["default"].img(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  max-height: 22px;\n  max-width: 22px;\n"])));
+var TabIcon = _styledComponents["default"].img(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])([""])));
 
 var TabIconContainer = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  max-height: 22px;\n  max-width: 22px;\n  margin-bottom: ", ";\n  margin-right: ", ";\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  img,\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n"])), function (props) {
   return props.hasLabelAndIcon && props.iconPosition === "top" && "8px" || "";