@dxc-technology/halstack-react 0.0.0-11b4a77 → 0.0.0-11fed82

package/slider/Slider.stories.tsx

@@ -1,177 +0,0 @@
-import React from "react";
-import DxcSlider from "./Slider";
-import { BackgroundColorProvider } from "../BackgroundColorContext";
-import Title from "../../.storybook/components/Title";
-import ExampleContainer from "../../.storybook/components/ExampleContainer";
-import DarkContainer from "../../.storybook/components/DarkSection";
-
-export default {
-  title: "Slider",
-  component: DxcSlider,
-};
-
-const labelFormat = (value) => `${value}E100000000000000000000000`;
-
-export const Chromatic = () => (
-  <>
-    <Title title="States" theme="light" level={2} />
-    <ExampleContainer pseudoState="pseudo-hover">
-      <Title title="Hovered" theme="light" level={4} />
-      <DxcSlider label="Slider" helperText="Help message" showLimitsValues />
-    </ExampleContainer>
-    <ExampleContainer pseudoState="pseudo-active">
-      <Title title="Active" theme="light" level={4} />
-      <DxcSlider label="Slider" helperText="Help message" showLimitsValues />
-    </ExampleContainer>
-    <ExampleContainer pseudoState="pseudo-focus">
-      <Title title="Focused" theme="light" level={4} />
-      <DxcSlider label="Slider" helperText="Help message" showLimitsValues />
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Disabled" theme="light" level={4} />
-      <DxcSlider label="Slider" helperText="Help message" disabled showLimitsValues />
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Disabled discrete slider with input" theme="light" level={4} />
-      <DxcSlider
-        label="Slider"
-        helperText="Help message"
-        disabled
-        defaultValue={40}
-        minValue={0}
-        maxValue={50}
-        showLimitsValues
-        showInput
-        marks
-        step={10}
-      />
-    </ExampleContainer>
-    <Title title="Variants" theme="light" level={2} />
-    <ExampleContainer>
-      <Title title="Continuous slider" theme="light" level={4} />
-      <DxcSlider defaultValue={65} label="Slider" helperText="Help message" showLimitsValues />
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Discrete slider" theme="light" level={4} />
-      <DxcSlider defaultValue={20} label="Slider" helperText="Help message" showLimitsValues marks step={5} />
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Discrete slider with input" theme="light" level={4} />
-      <DxcSlider
-        defaultValue={20}
-        minValue={0}
-        maxValue={50}
-        label="Slider"
-        helperText="Help message"
-        showLimitsValues
-        showInput
-        marks
-        step={10}
-      />
-    </ExampleContainer>
-    <BackgroundColorProvider color="#333333">
-      <DarkContainer>
-        <Title title="Dark" theme="dark" level={2} />
-        <ExampleContainer pseudoState="pseudo-hover">
-          <Title title="Hovered" theme="dark" level={4} />
-          <DxcSlider label="Slider" helperText="Help message" showLimitsValues />
-        </ExampleContainer>
-        <ExampleContainer pseudoState="pseudo-active">
-          <Title title="Active" theme="dark" level={4} />
-          <DxcSlider label="Slider" helperText="Help message" showLimitsValues />
-        </ExampleContainer>
-        <ExampleContainer pseudoState="pseudo-focus">
-          <Title title="Focused" theme="dark" level={4} />
-          <DxcSlider label="Slider" helperText="Help message" showLimitsValues />
-        </ExampleContainer>
-        <ExampleContainer>
-          <Title title="Disabled" theme="dark" level={4} />
-          <DxcSlider label="Slider" helperText="Help message" disabled showLimitsValues />
-        </ExampleContainer>
-        <ExampleContainer>
-          <Title title="Disabled discrete slider with input" theme="dark" level={4} />
-          <DxcSlider
-            label="Slider"
-            helperText="Help message"
-            disabled
-            defaultValue={40}
-            minValue={0}
-            maxValue={50}
-            showLimitsValues
-            showInput
-            marks
-            step={5}
-          />
-        </ExampleContainer>
-        <ExampleContainer>
-          <Title title="Continuous slider" theme="dark" level={4} />
-          <DxcSlider defaultValue={65} label="Slider" helperText="Help message" showLimitsValues />
-        </ExampleContainer>
-        <ExampleContainer>
-          <Title title="Discrete slider" theme="dark" level={4} />
-          <DxcSlider defaultValue={20} label="Slider" helperText="Help message" showLimitsValues marks step={5} />
-        </ExampleContainer>
-        <ExampleContainer>
-          <Title title="Discrete slider with input" theme="dark" level={4} />
-          <DxcSlider
-            defaultValue={20}
-            minValue={0}
-            maxValue={50}
-            label="Slider"
-            helperText="Help message"
-            showLimitsValues
-            showInput
-            marks
-            step={10}
-          />
-        </ExampleContainer>
-      </DarkContainer>
-    </BackgroundColorProvider>
-    <Title title="Margins" theme="light" level={2} />
-    <ExampleContainer>
-      <Title title="Xxsmall" theme="light" level={4} />
-      <DxcSlider label="Xxsmall" margin="xxsmall" />
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Xsmall" theme="light" level={4} />
-      <DxcSlider label="Xsmall" margin="xsmall" />
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Small" theme="light" level={4} />
-      <DxcSlider label="Small" margin="small" />
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Medium" theme="light" level={4} />
-      <DxcSlider label="Medium" margin="medium" />
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Large" theme="light" level={4} />
-      <DxcSlider label="Large" margin="large" />
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Xlarge" theme="light" level={4} />
-      <DxcSlider label="Xlarge" margin="xlarge" />
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Xxlarge" theme="light" level={4} />
-      <DxcSlider label="Xxlarge" margin="xxlarge" />
-    </ExampleContainer>
-    <Title title="Sizes" theme="light" level={2} />
-    <ExampleContainer>
-      <Title title="Medium" theme="light" level={4} />
-      <DxcSlider label="Medium" size="medium" />
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Large" theme="light" level={4} />
-      <DxcSlider label="Large" size="large" />
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="FillParent" theme="light" level={4} />
-      <DxcSlider label="FillParent" size="fillParent" />
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Large limit values labels" theme="light" level={4} />
-      <DxcSlider label="Slider" helperText="Help message" showLimitsValues labelFormatCallback={labelFormat} size="large" />
-    </ExampleContainer>
-  </>
-);

package/stack/Stack.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import StackPropsType from "./types";
-declare const DxcStack: ({ alignX, as, divider, gutter, reverse, wrap, children, }: StackPropsType) => JSX.Element;
-export default DxcStack;

package/stack/Stack.js

@@ -1,56 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _templateObject, _templateObject2;
-
-var DxcStack = function DxcStack(_ref) {
-  var _ref$alignX = _ref.alignX,
-      alignX = _ref$alignX === void 0 ? "stretch" : _ref$alignX,
-      _ref$as = _ref.as,
-      as = _ref$as === void 0 ? "div" : _ref$as,
-      _ref$divider = _ref.divider,
-      divider = _ref$divider === void 0 ? false : _ref$divider,
-      _ref$gutter = _ref.gutter,
-      gutter = _ref$gutter === void 0 ? "0rem" : _ref$gutter,
-      _ref$reverse = _ref.reverse,
-      reverse = _ref$reverse === void 0 ? false : _ref$reverse,
-      _ref$wrap = _ref.wrap,
-      wrap = _ref$wrap === void 0 ? false : _ref$wrap,
-      children = _ref.children;
-  return /*#__PURE__*/_react["default"].createElement(Stack, {
-    gutter: gutter,
-    alignX: alignX,
-    reverse: reverse,
-    as: as,
-    divider: divider,
-    wrap: wrap
-  }, _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  width: 100%;\n  height: 1px;\n  background-color: #999999;\n"])));
-
-var Stack = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  ", "\n  padding: 0px;\n  margin: 0px;\n  height: 100%;\n"])), function (_ref2) {
-  var alignX = _ref2.alignX,
-      gutter = _ref2.gutter,
-      reverse = _ref2.reverse,
-      divider = _ref2.divider,
-      wrap = _ref2.wrap;
-  return "\n    flex-direction: ".concat(reverse ? "column-reverse" : "column", ";\n    align-items: ").concat(alignX === "start" || alignX === "end" ? "flex-".concat(alignX) : alignX, ";\n    gap: ").concat(divider ? "calc(".concat(gutter, "/2 - 1px)") : gutter, ";\n    flex-wrap: ").concat(wrap ? "wrap" : "nowrap", ";\n  ");
-});
-
-var _default = DxcStack;
-exports["default"] = _default;

package/stack/Stack.stories.tsx

@@ -1,263 +0,0 @@
-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 height="small" width="small" />
-        <Placeholder height="medium" width="medium" />
-        <Placeholder height="large" width="large" />
-        <Placeholder height="small" width="large" />
-      </DxcStack>
-    </Container>
-    <Title title="Default with divider" theme="light" level={4} />
-    <Container>
-      <DxcStack divider>
-        <Placeholder height="medium" width="medium" />
-        <Placeholder height="large" width="large" />
-        <Placeholder height="small" width="large" />
-      </DxcStack>
-    </Container>
-    <Title title="Alignment with divider" theme="light" level={4} />
-    <Container>
-      <DxcStack alignX="end" divider>
-        <Placeholder height="small" width="small" />
-        <Placeholder height="small" width="medium" />
-        <Placeholder height="medium" width="small" />
-      </DxcStack>
-    </Container>
-    <Title title="Default with one child" theme="light" level={4} />
-    <Container>
-      <DxcStack divider>
-        <Placeholder height="large" width="xlarge" />
-      </DxcStack>
-    </Container>
-    <Title title="Wrap" theme="light" level={4} />
-    <FlexContainer customHeight>
-      <DxcStack wrap>
-        <Placeholder height="small" width="small" />
-        <Placeholder height="large" width="medium" />
-        <Placeholder height="medium" width="small" />
-        <Placeholder height="large" width="medium" />
-      </DxcStack>
-    </FlexContainer>
-    <Title title="No wrap in a flex container" theme="light" level={4} />
-    <FlexContainer customHeight>
-      <DxcStack>
-        <Placeholder height="small" width="small" />
-        <Placeholder height="medium" width="small" />
-        <Placeholder height="small" width="medium" />
-      </DxcStack>
-    </FlexContainer>
-    <Title title="No wrap (default)" theme="light" level={4} />
-    <Container customHeight>
-      <DxcStack>
-        <Placeholder height="small" width="medium" />
-        <Placeholder height="small" width="small" />
-      </DxcStack>
-    </Container>
-    <Title title="AlignX = start" theme="light" level={4} />
-    <Container>
-      <DxcStack alignX="start">
-        <Placeholder height="small" width="small" />
-        <Placeholder height="large" width="medium" />
-        <Placeholder height="medium" width="small" />
-        <Placeholder height="large" width="medium" />
-      </DxcStack>
-    </Container>
-    <Title title="AlignX = end" theme="light" level={4} />
-    <Container>
-      <DxcStack alignX="end">
-        <Placeholder height="small" width="small" />
-        <Placeholder height="large" width="medium" />
-        <Placeholder height="medium" width="small" />
-      </DxcStack>
-    </Container>
-    <Title title="AlignX = center" theme="light" level={4} />
-    <Container>
-      <DxcStack alignX="center">
-        <Placeholder height="small" width="small" />
-        <Placeholder height="large" width="medium" />
-        <Placeholder height="medium" width="small" />
-        <Placeholder height="large" width="medium" />
-      </DxcStack>
-    </Container>
-    <Title title="AlignX = baseline" theme="light" level={4} />
-    <Container>
-      <DxcStack alignX="baseline">
-        <Placeholder height="small" width="small" />
-        <Placeholder height="large" width="medium" />
-        <Placeholder height="medium" width="small" />
-      </DxcStack>
-    </Container>
-    <Title title="AlignX with wrapped items" theme="light" level={4} />
-    <Container customHeight>
-      <DxcStack alignX="center" wrap>
-        <Placeholder height="small" width="medium" />
-        <Placeholder height="small" width="small" />
-      </DxcStack>
-    </Container>
-    <Title title="Gutter = 0rem" theme="light" level={4} />
-    <Container>
-      <DxcStack gutter="0rem">
-        <Placeholder height="small" width="medium" />
-        <Placeholder height="large" width="small" />
-        <Placeholder height="medium" width="medium" />
-        <Placeholder height="large" width="small" />
-        <Placeholder height="small" width="medium" />
-      </DxcStack>
-    </Container>
-    <Title title="Gutter = 0.125rem" theme="light" level={4} />
-    <Container>
-      <DxcStack gutter="0.125rem">
-        <Placeholder height="small" width="small" />
-        <Placeholder height="large" width="medium" />
-        <Placeholder height="medium" width="small" />
-      </DxcStack>
-    </Container>
-    <Title title="Gutter = 0.25rem" theme="light" level={4} />
-    <Container>
-      <DxcStack gutter="0.25rem">
-        <Placeholder height="small" width="medium" />
-        <Placeholder height="large" width="small" />
-        <Placeholder height="medium" width="medium" />
-        <Placeholder height="large" width="small" />
-        <Placeholder height="small" width="medium" />
-      </DxcStack>
-    </Container>
-    <Title title="Gutter = 0.5rem" theme="light" level={4} />
-    <Container>
-      <DxcStack gutter="0.5rem">
-        <Placeholder height="small" width="small" />
-        <Placeholder height="large" width="medium" />
-        <Placeholder height="medium" width="small" />
-      </DxcStack>
-    </Container>
-    <Title title="Gutter = 0.75rem" theme="light" level={4} />
-    <Container>
-      <DxcStack gutter="0.75rem">
-        <Placeholder height="small" width="medium" />
-        <Placeholder height="large" width="small" />
-        <Placeholder height="medium" width="medium" />
-        <Placeholder height="large" width="small" />
-        <Placeholder height="small" width="medium" />
-      </DxcStack>
-    </Container>
-    <Title title="Gutter = 1rem" theme="light" level={4} />
-    <Container>
-      <DxcStack gutter="1rem">
-        <Placeholder height="small" width="small" />
-        <Placeholder height="large" width="medium" />
-        <Placeholder height="medium" width="small" />
-      </DxcStack>
-    </Container>
-    <Title title="Gutter = 1.5rem" theme="light" level={4} />
-    <Container>
-      <DxcStack gutter="1.5rem">
-        <Placeholder height="small" width="medium" />
-        <Placeholder height="large" width="small" />
-        <Placeholder height="medium" width="medium" />
-        <Placeholder height="large" width="small" />
-        <Placeholder height="small" width="medium" />
-      </DxcStack>
-    </Container>
-    <Title title="Gutter = 2rem & divider" theme="light" level={4} />
-    <Container>
-      <DxcStack gutter="2rem" divider>
-        <Placeholder height="small" width="small" />
-        <Placeholder height="large" width="medium" />
-        <Placeholder height="medium" width="small" />
-      </DxcStack>
-    </Container>
-    <Title title="Gutter = 3rem" theme="light" level={4} />
-    <Container>
-      <DxcStack gutter="3rem">
-        <Placeholder height="small" width="small" />
-        <Placeholder height="large" width="medium" />
-        <Placeholder height="medium" width="small" />
-      </DxcStack>
-    </Container>
-    <Title title="Gutter = 4rem" theme="light" level={4} />
-    <Container>
-      <DxcStack gutter="4rem">
-        <Placeholder height="large" width="medium" />
-        <Placeholder height="medium" width="small" />
-      </DxcStack>
-    </Container>
-    <Title title="Gutter = 5rem" theme="light" level={4} />
-    <Container>
-      <DxcStack gutter="5rem">
-        <Placeholder height="small" width="small" />
-        <Placeholder height="medium" width="small" />
-      </DxcStack>
-    </Container>
-    <Title title="Reverse" theme="light" level={4} />
-    <Container>
-      <DxcStack reverse>
-        <Placeholder height="small" width="medium">
-          1
-        </Placeholder>
-        <Placeholder height="large" width="small">
-          2
-        </Placeholder>
-        <Placeholder height="medium" width="medium">
-          3
-        </Placeholder>
-        <Placeholder height="large" width="small">
-          4
-        </Placeholder>
-      </DxcStack>
-    </Container>
-    <Title title="Wrapped and reversed children" theme="light" level={4} />
-    <FlexContainer customHeight>
-      <DxcStack reverse wrap>
-        <Placeholder height="small" width="medium">
-          1
-        </Placeholder>
-        <Placeholder height="large" width="small">
-          2
-        </Placeholder>
-        <Placeholder height="medium" width="medium">
-          3
-        </Placeholder>
-        <Placeholder height="large" width="small">
-          4
-        </Placeholder>
-      </DxcStack>
-    </FlexContainer>
-  </>
-);
-
-const FlexContainer = styled.div<{ customHeight?: boolean }>`
-  display: flex;
-  ${({ customHeight }) => customHeight && `height: 100px;`};
-  background: #f2eafa;
-`;
-
-const Container = styled.div<{ customHeight?: boolean }>`
-  background: #f2eafa;
-  ${({ customHeight }) => customHeight && `height: 100px;`};
-`;
-
-type PlaceholderProps = {
-  width?: "xlarge" | "large" | "medium" | "small" | "auto";
-  height?: "large" | "medium" | "small" | "auto";
-};
-
-const Placeholder = styled.div<PlaceholderProps>`
-  ${({ width }) =>
-    width &&
-    `width: ${width === "xlarge" ? "350px" : width === "large" ? "150px" : width === "medium" ? "100px" : "50px"};`};
-  ${({ height }) => height && `height: ${height === "large" ? "100px" : height === "medium" ? "80px" : "50px"};`};
-  border: 1px solid #a46ede;
-  background-color: #e5d5f6;
-`;

package/stack/types.d.ts

@@ -1,32 +0,0 @@
-/// <reference types="react" />
-declare type Props = {
-    /**
-     * Alignment applied to children in the main axis.
-     */
-    alignX?: "start" | "end" | "center" | "baseline" | "stretch";
-    /**
-     * Specifies the HTML tag or component that is rendered as the wrapper element.
-     */
-    as?: React.ElementType;
-    /**
-     * If true, a divider is shown between children.
-     */
-    divider?: boolean;
-    /**
-     * Space applied between each child.
-     */
-    gutter?: "0rem" | "0.125rem" | "0.25rem" | "0.5rem" | "0.75rem" | "1rem" | "1.5rem" | "2rem" | "3rem" | "4rem" | "5rem";
-    /**
-     * Change the direction of the stack to reverse.
-     */
-    reverse?: boolean;
-    /**
-     * Sets whether the children are forced onto one column or can wrap onto multiple columns.
-     */
-    wrap?: boolean;
-    /**
-     * Custom content inside the stack.
-     */
-    children: React.ReactNode[] | React.ReactNode;
-};
-export default Props;

package/tabs-nav/Tab.js

@@ -1,132 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _Badge = _interopRequireDefault(require("../badge/Badge"));
-
-var _NavTabs = require("./NavTabs");
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
-
-var _excluded = ["href", "active", "icon", "disabled", "notificationNumber", "children"];
-
-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 DxcTab = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, _ref2) {
-  var href = _ref.href,
-      _ref$active = _ref.active,
-      active = _ref$active === void 0 ? false : _ref$active,
-      icon = _ref.icon,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      _ref$notificationNumb = _ref.notificationNumber,
-      notificationNumber = _ref$notificationNumb === void 0 ? false : _ref$notificationNumb,
-      children = _ref.children,
-      otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  var tabRef = /*#__PURE__*/(0, _react.createRef)();
-
-  var _useContext = (0, _react.useContext)(_NavTabs.NavTabsContext),
-      iconPosition = _useContext.iconPosition,
-      tabIndex = _useContext.tabIndex,
-      hasIcons = _useContext.hasIcons,
-      focusedLabel = _useContext.focusedLabel;
-
-  (0, _react.useLayoutEffect)(function () {
-    var _tabRef$current;
-
-    focusedLabel === children.toString() && (tabRef === null || tabRef === void 0 ? void 0 : (_tabRef$current = tabRef.current) === null || _tabRef$current === void 0 ? void 0 : _tabRef$current.focus());
-  }, [focusedLabel]);
-
-  var handleOnKeyDown = function handleOnKeyDown(event) {
-    var _tabRef$current2;
-
-    switch (event.keyCode) {
-      case 13: // enter
-
-      case 32:
-        // space
-        tabRef === null || tabRef === void 0 ? void 0 : (_tabRef$current2 = tabRef.current) === null || _tabRef$current2 === void 0 ? void 0 : _tabRef$current2.click();
-        event.preventDefault();
-        break;
-    }
-  };
-
-  return /*#__PURE__*/_react["default"].createElement(TabContainer, {
-    active: active,
-    role: "tab",
-    "aria-selected": active
-  }, /*#__PURE__*/_react["default"].createElement(Tab, (0, _extends2["default"])({
-    href: !disabled && href ? href : undefined,
-    disabled: disabled,
-    iconPosition: iconPosition,
-    hasIcon: hasIcons,
-    ref: function ref(anchorRef) {
-      tabRef.current = anchorRef;
-
-      if (_ref2) {
-        if (typeof _ref2 === "function") _ref2(anchorRef);else {
-          _ref2.current = anchorRef;
-        }
-      }
-    },
-    onKeyDown: handleOnKeyDown,
-    tabIndex: active ? tabIndex : -1
-  }, otherProps), icon && /*#__PURE__*/_react["default"].createElement(TabIconContainer, {
-    iconPosition: iconPosition
-  }, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement(TabIcon, {
-    src: icon
-  }) : icon), /*#__PURE__*/_react["default"].createElement(LabelContainer, null, children, notificationNumber && /*#__PURE__*/_react["default"].createElement(BadgeContainer, null, /*#__PURE__*/_react["default"].createElement(_Badge["default"], {
-    notificationText: notificationNumber > 99 ? "+99" : notificationNumber,
-    disabled: disabled
-  })))));
-});
-
-var TabContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  border-bottom: 2px solid ", ";\n"])), function (props) {
-  return props.active ? "#6f2c91" : "#0000001a";
-});
-
-var Tab = _styledComponents["default"].a(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: ", ";\n  justify-content: center;\n  align-items: center;\n\n  font-family: \"Open Sans\";\n  font-style: normal;\n  font-weight: 400;\n  font-size: 1rem;\n  color: ", ";\n  text-decoration-color: transparent;\n  cursor: ", ";\n\n  height: ", ";\n  min-width: 164px;\n  margin: 0.5rem;\n  padding: 0.375rem;\n\n  border-radius: 4px;\n\n  ", "\n"])), function (props) {
-  return props.hasIcon && props.iconPosition === "top" ? "column" : "row";
-}, function (props) {
-  return props.disabled ? "#0000004D" : "#333333";
-}, function (props) {
-  return props.disabled ? "not-allowed" : "pointer";
-}, function (props) {
-  return props.hasIcon && props.iconPosition === "top" ? "66px" : "32px";
-}, function (props) {
-  return !props.disabled && ":hover {\n    background: #0000000D;\n  }\n\n  :focus {\n    outline: 2px solid #33aaff};\n  }\n\n  :active {\n    background: #0000001A;\n    outline: 2px solid #33aaff};\n  }";
-});
-
-var TabIcon = _styledComponents["default"].img(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])([""])));
-
-var TabIconContainer = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  max-height: 24px;\n  max-width: 24px;\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.iconPosition === "top" && "0.375rem";
-}, function (props) {
-  return props.iconPosition === "left" && "0.625rem";
-});
-
-var LabelContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n"])));
-
-var BadgeContainer = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  margin-left: 0.5rem;\n"])));
-
-var _default = DxcTab;
-exports["default"] = _default;