carbon-react 154.3.2 → 154.4.0-beta.0

package/esm/components/tabs/__internal__/tab-title/tab-title.style.js

@@ -1,566 +1 @@
-import styled, { css } from "styled-components";
-import StyledIcon from "../../../icon/icon.style";
-import StyledValidationIcon from "../../../../__internal__/validations/validation-icon.style";
-const StyledTitleContent = styled.span`
-  outline: none;
-  display: flex;
-  align-items: flex-start;
-  line-height: 20px;
-  margin: 0;
-  position: relative;
-
-  ${({
-  hasCustomLayout,
-  error,
-  warning,
-  info,
-  size,
-  isTabSelected,
-  hasSiblings,
-  borders = false,
-  position = "top",
-  noLeftBorder,
-  noRightBorder,
-  hasHref,
-  alternateStyling,
-  align,
-  validationRedesignOptIn
-}) => css`
-    text-align: ${align};
-
-    ${position === "left" && css`
-      display: flex;
-      width: 100%;
-      justify-content: ${align === "right" ? "flex-end" : "flex-start"};
-      border-top-left-radius: var(--borderRadius100);
-      border-bottom-left-radius: var(--borderRadius100);
-      border-bottom-right-radius: var(--borderRadius000);
-      border-top-right-radius: var(--borderRadius000);
-    `}
-
-    ${position === "left" && validationRedesignOptIn && css`
-      justify-content: space-between;
-    `}
-
-    ${position === "top" && css`
-      border-top-left-radius: var(--borderRadius100);
-      border-top-right-radius: var(--borderRadius100);
-      border-bottom-right-radius: var(--borderRadius000);
-      border-bottom-left-radius: var(--borderRadius000);
-    `}
-
-    ${hasHref && css`
-      color: var(--colorsActionMinorYin090);
-      display: block;
-      text-decoration: none;
-
-      [type="link"] {
-        width: 16px;
-        margin-left: 8px;
-        height: 16px;
-        color: inherit;
-        margin-top: -2px;
-      }
-    `}
-
-    ${!hasHref && css`
-      [data-component="icon"]:not([color]) {
-        color: var(--colorsActionMinorYin065);
-      }
-    `}
-
-    ${borders && css`
-      border-top: 1px solid var(--colorsActionMinor100);
-      border-left: 1px solid var(--colorsActionMinor100);
-      border-right: 1px solid var(--colorsActionMinor100);
-
-      ${position === "left" && css`
-        border-bottom: 1px solid var(--colorsActionMinor100);
-        ${!alternateStyling && `margin-right: -1px;`}
-      `}
-
-      ${noLeftBorder && css`
-        border-left: none;
-
-        ${!noRightBorder && css`
-          border-right: 1px solid var(--colorsActionMinor100);
-        `}
-      `}
-
-      ${noRightBorder && css`
-        border-right: none;
-      `}
-    `}
-
-    ${size === "large" && position === "top" && css`
-      padding: 14px 24px;
-      ${borders && `padding-bottom: 9px;`}
-      font-size: 16px;
-    `}
-
-    ${size === "large" && position === "left" && css`
-      font-size: 16px;
-      padding: 14px 24px;
-    `}
-
-    ${size === "default" && css`
-      padding: 10px 16px;
-
-      ${borders && `padding-bottom: 9px;`}
-    `}
-
-    ${(warning || info) && css`
-      outline: 1px solid;
-      outline-offset: -1px;
-      z-index: ${validationRedesignOptIn ? 1 : 2};
-
-      ${info && !warning && css`
-        outline-color: var(--colorsSemanticInfo500);
-      `}
-
-      ${warning && css`
-        outline-color: var(--colorsSemanticCaution500);
-      `}
-
-      ${position === "top" && css`
-        border-bottom-color: transparent;
-      `}
-
-      ${position === "left" && css`
-        border-right-color: transparent;
-        padding-right: ${size === "large" ? "26px" : "18px"};
-      `}
-
-      &:hover {
-        outline: 1px solid;
-        outline-offset: -1px;
-
-        ${info && !warning && css`
-          outline-color: var(--colorsSemanticInfo500);
-        `}
-
-        ${warning && css`
-          outline-color: var(--colorsSemanticCaution500);
-        `}
-
-        ${position === "top" && css`
-          border-bottom-color: transparent;
-
-          ${hasCustomLayout && css`
-            padding-bottom: 2px;
-          `}
-        `}
-
-        ${position === "left" && css`
-          border-right-color: transparent;
-          padding-right: ${size === "large" ? "26px" : "18px"};
-        `}
-      }
-    `}
-
-    ${error && css`
-      outline: 2px solid var(--colorsSemanticNegative500);
-      outline-offset: -2px;
-      z-index: ${validationRedesignOptIn ? 1 : 2};
-
-      ${position === "top" && css`
-        border-bottom-color: transparent;
-      `}
-
-      ${position === "left" && css`
-        border-right-color: transparent;
-        padding-right: ${size === "large" ? "26px" : "18px"};
-      `}
-
-      &:hover {
-        outline: 2px solid var(--colorsSemanticNegative500);
-        outline-offset: -2px;
-        ${position === "top" && css`
-          border-bottom-color: transparent;
-
-          ${hasCustomLayout && css`
-            padding-bottom: 2px;
-          `}
-        `}
-
-        ${position === "left" && css`
-          border-right-color: transparent;
-          padding-right: ${size === "large" ? "26px" : "18px"};
-        `}
-      }
-    `}
-
-    ${hasSiblings && !hasCustomLayout && position === "top" && css`
-      height: 20px;
-    `}
-
-    ${hasCustomLayout && css`
-      display: flex;
-
-      ${position === "left" && css`
-        padding: ${size === "large" ? "2px" : "0px"};
-        ${isTabSelected && css`
-          padding-right: 0px;
-        `}
-        ${(error || warning || info) && css`
-          padding-right: ${size === "large" ? "26px" : "18px"};
-        `}
-      `}
-
-      ${position === "top" && css`
-        padding: ${size === "large" ? "2px" : "0px"};
-        ${isTabSelected && css`
-          padding-bottom: 0px;
-        `}
-        ${(error || warning || info) && css`
-          padding-bottom: ${size === "large" ? "4px" : "2px"};
-          padding-right: ${size === "large" ? "18px" : "14px"};
-
-          &:hover {
-            padding-bottom: ${size === "large" ? "4px" : "2px"};
-          }
-        `}
-      `}
-    `}
-  `}
-`;
-const tabTitleStyles = css`
-  background-color: transparent;
-  display: inline-block;
-  border-top-left-radius: var(--borderRadius100);
-  border-top-right-radius: var(--borderRadius100);
-  font-weight: 500;
-  position: relative;
-  border: none;
-  cursor: pointer;
-  font-size: 14px;
-  padding: 0px;
-  text-decoration: none;
-  outline-offset: 0px;
-  margin: 0;
-  ${({
-  position
-}) => position === "top" && "white-space: nowrap"};
-
-  ${({
-  position
-}) => css`
-    ${position === "left" && css`
-      border-top-right-radius: var(--borderRadius000);
-    `}
-  `}
-
-  a:visited {
-    color: inherit;
-  }
-
-  ${({
-  size,
-  position = "top",
-  borders = false,
-  noRightBorder,
-  noLeftBorder,
-  isTabSelected,
-  alternateStyling,
-  error,
-  warning,
-  info,
-  isInSidebar,
-  validationRedesignOptIn
-}) => css`
-    height: ${size === "large" ? "var(--sizing600)" : "var(--sizing500)"};
-
-    ${position === "top" && css`
-        ${borders && !(noRightBorder || noLeftBorder) && css`
-          &:nth-of-type(n + 1):not(:first-of-type) {
-            margin-left: -1px;
-          }
-          &:first-child {
-            margin-left: 0;
-          }
-        `}
-      `}
-    ${position === "left" && css`
-        ${borders && css`
-          &:nth-of-type(n + 1):not(:first-of-type) {
-            margin-top: -1px;
-          }
-          &:first-child {
-            margin-top: 0;
-          }
-        `}
-      `}
-
-    ${!isTabSelected && css`
-        color: var(--colorsActionMinorYin090);
-        ${validationRedesignOptIn && css`
-          background: transparent;
-        `}
-
-        &:hover {
-          background: var(--colorsActionMinor100);
-          ${validationRedesignOptIn && css`
-            background: var(--colorsUtilityMajor100);
-          `}
-          color: var(--colorsActionMinorYin090);
-          outline: none;
-        }
-        &:focus {
-          color: var(--colorsActionMinorYin090);
-          outline: none;
-        }
-      `}
-
-    ${isTabSelected && css`
-        color: var(--colorsActionMajorYin090);
-        background-color: var(--colorsActionMajorYang100);
-
-        ${(error || warning || info) && css`
-          padding-bottom: 0px;
-        `}
-
-        &:hover {
-          background-color: var(--colorsActionMajorYang100);
-          border-bottom-color: ${alternateStyling ? "var(--colorsActionMinor100)" : "var(--colorsActionMajor500)"};
-          color: var(--colorsActionMajorYin090);
-          cursor: default;
-        }
-      `}
-      &:focus {
-        outline: 4px solid black;
-        top: -2px;
-        z-index: 6;
-
-        > span[data-role="tab-title-content"] {
-          outline:none; 
-          ${position === "top" && "top: 2px;"}
-        }
-
-        ${position === "top" ? css`
-                border-top-left-radius: var(--borderRadius100);
-                border-top-right-radius: var(--borderRadius100);
-              ` : css`
-                border-top-left-radius: var(--borderRadius100);
-                border-bottom-left-radius: var(--borderRadius100);
-              `}
-
-        ::before {
-          content: "";
-          position: absolute;
-          top: 0;
-          left 0;
-          bottom: 0;
-          right: ${position === "top" ? "0" : "-1px"};
-          outline: 3px solid var(--colorsSemanticFocus500);
-          ${position === "top" ? css`
-                  border-top-left-radius: var(--borderRadius100);
-                  border-top-right-radius: var(--borderRadius100);
-                ` : css`
-                  border-top-left-radius: var(--borderRadius100);
-                  border-bottom-left-radius: var(--borderRadius100);
-                `}
-          outline-offset: -2px;
-         z-index: 5;
-        }
-
-        > [data-element="tab-selected-indicator"] {
-         z-index: 4;
-         ${position === "top" ? css`
-                 bottom: 2px;
-                 left: 2px;
-                 right: 1px;
-               ` : css`
-                 bottom: 2px;
-                 right: 1px;
-               `}
-        }
-        }
-      }
-    
-    ${position === "left" && css`
-        background-color: transparent;
-        border-bottom: 0px;
-
-        ${!isInSidebar && !error && css`
-          --border-right-value: ${validationRedesignOptIn ? "0px" : "2px"};
-          border-right: ${alternateStyling ? "1px" : "var(--border-right-value)"}
-            solid var(--colorsActionMinor100);
-        `}
-
-        ${!borders && css`
-          ${StyledTitleContent} {
-            border-bottom: none;
-          }
-        `}
-
-      display: flex;
-        height: auto;
-        margin-left: 0px;
-
-        &:first-child {
-          margin-top: 0;
-        }
-
-        &:hover {
-          ${alternateStyling && "border-right-color: var(--colorsActionMinor100)"}
-        }
-
-        ${(warning || info) && css`
-          border-right: none;
-        `}
-
-        ${!isTabSelected && css`
-          border-right-color: var(--colorsActionMinor100);
-        `}
-
-      ${isTabSelected && css`
-          ${alternateStyling && css`
-            border-right-color: var(--colorsActionMinor100);
-          `}
-
-          ${!alternateStyling && css`
-            border-right: none;
-            padding-bottom: 0px;
-
-            ${StyledTitleContent} {
-              ${!(error || warning || info) && !validationRedesignOptIn && "margin-right: 2px;"}
-              border-right: none;
-            }
-          `}
-
-        background-color: var(--colorsActionMajorYang100);
-
-          &:hover {
-            ${alternateStyling && "border-right-color: var(--colorsActionMinor100);"}
-            background-color: var(--colorsActionMajorYang100);
-            ${(error || warning || info) && "border-right-color: var(--colorsSemanticNegative500);"}
-          }
-
-          &:focus {
-            ${(error || warning || info) && "border-right-color: var(--colorsSemanticNegative500);"}
-          }
-        `}
-      `}
-
-    ${alternateStyling && css`
-        &:focus {
-          background-color: var(--colorsActionMinor200);
-        }
-
-        &:hover {
-          background-color: ${isTabSelected ? "var(--colorsActionMinor200)" : "var(--colorsActionMinor250)"};
-        }
-
-        ${isTabSelected && css`
-          background-color: var(--colorsActionMinor200);
-        `}
-      `}
-
-    & ${StyledIcon} { {
-      ${validationRedesignOptIn ? "margin-top: 10px;" : "margin-top: 2px;"}
-    }
-  `}
-`;
-const StyledTabTitleButton = styled.button`
-  ${tabTitleStyles}
-`;
-const StyledTabTitleLink = styled.a`
-  ${tabTitleStyles}
-`;
-const StyledLayoutWrapper = styled.div`
-  ${({
-  hasCustomLayout,
-  titlePosition = "before",
-  hasCustomSibling,
-  validationRedesignOptIn
-}) => css`
-    ${hasCustomLayout && css`
-      flex-grow: 2;
-    `}
-
-    ${!hasCustomLayout && css`
-      display: inline-flex;
-
-      position: relative;
-      top: -1px;
-      ${hasCustomSibling && css`
-        left: 4px;
-      `}
-      ${!hasCustomSibling && css`
-        ${titlePosition === "before" ? "left: 8px;" : "right: 8px;"}
-      `}
-
-      ${StyledIcon} {
-        height: 20px;
-      }
-
-      ${StyledValidationIcon} {
-        z-index: 10;
-
-        ${StyledIcon} {
-          height: ${validationRedesignOptIn ? "0px" : "16px"};
-          left: -2px;
-        }
-      }
-    `}
-  `}
-`;
-const StyledVerticalIndicator = styled.div`
-  position: absolute;
-  top: 0px;
-  bottom: 0px;
-  right: 0px;
-  box-shadow: inset calc(-1 * var(--sizing050)) 0px 0px 0px
-    var(--colorsActionMinor100);
-  width: 2px;
-  z-index: 1;
-`;
-const StyledSelectedIndicator = styled.div`
-  position: absolute;
-  z-index: 1;
-  ${validationRedesignOptIn => css`
-    ${validationRedesignOptIn && css`
-      z-index: 2;
-    `}
-  `}
-
-  ${({
-  position = "top",
-  warning,
-  error
-}) => css`
-    --selected-indicator-color: var(--colorsActionMajor500);
-
-    ${warning && css`
-      --selected-indicator-color: var(--colorsSemanticCaution500);
-    `}
-
-    ${error && css`
-      --selected-indicator-color: var(--colorsSemanticNegative500);
-    `}
-    ${position === "top" && css`
-      bottom: -1px;
-      left: 0px;
-      right: 0px;
-      box-shadow: inset 0px calc(-1 * var(--sizing050)) 0px
-        var(--selected-indicator-color);
-      height: var(--sizing050);
-    `}
-
-    ${position === "left" && css`
-      top: 0px;
-      bottom: 0px;
-      right: 0px;
-      box-shadow: inset calc(-1 * var(--sizing050)) 0px 0px 0px
-        var(--selected-indicator-color);
-      width: var(--sizing050);
-    `}
-  `}
-
-  &:focus {
-    bottom: 3px;
-    left: 3px;
-    right: 3px;
-  }
-`;
-export { StyledTabTitleButton, StyledTabTitleLink, StyledTitleContent, StyledLayoutWrapper, StyledSelectedIndicator, StyledVerticalIndicator };
+import o,{css as r}from"styled-components";import t from"../../../icon/icon.style.js";import i from"../../../../__internal__/validations/validation-icon.style.js";const e=o.span.withConfig({displayName:"tab-title.style__StyledTitleContent",componentId:"sc-6f1d665d-0"})(["outline:none;display:flex;align-items:flex-start;line-height:20px;margin:0;position:relative;",""],(({hasCustomLayout:o,error:t,warning:i,info:e,size:n,isTabSelected:a,hasSiblings:d,borders:l=!1,position:p="top",noLeftBorder:s,noRightBorder:c,hasHref:g,alternateStyling:b,align:x,validationRedesignOptIn:f})=>r(["text-align:",";"," "," "," "," "," "," "," "," "," "," "," "," ",""],x,"left"===p&&r(["display:flex;width:100%;justify-content:",";border-top-left-radius:var(--borderRadius100);border-bottom-left-radius:var(--borderRadius100);border-bottom-right-radius:var(--borderRadius000);border-top-right-radius:var(--borderRadius000);"],"right"===x?"flex-end":"flex-start"),"left"===p&&f&&r(["justify-content:space-between;"]),"top"===p&&r(["border-top-left-radius:var(--borderRadius100);border-top-right-radius:var(--borderRadius100);border-bottom-right-radius:var(--borderRadius000);border-bottom-left-radius:var(--borderRadius000);"]),g&&r(['color:var(--colorsActionMinorYin090);display:block;text-decoration:none;[type="link"]{width:16px;margin-left:8px;height:16px;color:inherit;margin-top:-2px;}']),!g&&r(['[data-component="icon"]:not([color]){color:var(--colorsActionMinorYin065);}']),l&&r(["border-top:1px solid var(--colorsActionMinor100);border-left:1px solid var(--colorsActionMinor100);border-right:1px solid var(--colorsActionMinor100);"," "," ",""],"left"===p&&r(["border-bottom:1px solid var(--colorsActionMinor100);",""],!b&&"margin-right: -1px;"),s&&r(["border-left:none;",""],!c&&r(["border-right:1px solid var(--colorsActionMinor100);"])),c&&r(["border-right:none;"])),"large"===n&&"top"===p&&r(["padding:14px 24px;"," font-size:16px;"],l&&"padding-bottom: 9px;"),"large"===n&&"left"===p&&r(["font-size:16px;padding:14px 24px;"]),"default"===n&&r(["padding:10px 16px;",""],l&&"padding-bottom: 9px;"),(i||e)&&r(["outline:1px solid;outline-offset:-1px;z-index:",";"," "," "," "," &:hover{outline:1px solid;outline-offset:-1px;"," "," "," ","}"],f?1:2,e&&!i&&r(["outline-color:var(--colorsSemanticInfo500);"]),i&&r(["outline-color:var(--colorsSemanticCaution500);"]),"top"===p&&r(["border-bottom-color:transparent;"]),"left"===p&&r(["border-right-color:transparent;padding-right:",";"],"large"===n?"26px":"18px"),e&&!i&&r(["outline-color:var(--colorsSemanticInfo500);"]),i&&r(["outline-color:var(--colorsSemanticCaution500);"]),"top"===p&&r(["border-bottom-color:transparent;",""],o&&r(["padding-bottom:2px;"])),"left"===p&&r(["border-right-color:transparent;padding-right:",";"],"large"===n?"26px":"18px")),t&&r(["outline:2px solid var(--colorsSemanticNegative500);outline-offset:-2px;z-index:",";"," "," &:hover{outline:2px solid var(--colorsSemanticNegative500);outline-offset:-2px;"," ","}"],f?1:2,"top"===p&&r(["border-bottom-color:transparent;"]),"left"===p&&r(["border-right-color:transparent;padding-right:",";"],"large"===n?"26px":"18px"),"top"===p&&r(["border-bottom-color:transparent;",""],o&&r(["padding-bottom:2px;"])),"left"===p&&r(["border-right-color:transparent;padding-right:",";"],"large"===n?"26px":"18px")),d&&!o&&"top"===p&&r(["height:20px;"]),o&&r(["display:flex;"," ",""],"left"===p&&r(["padding:",";"," ",""],"large"===n?"2px":"0px",a&&r(["padding-right:0px;"]),(t||i||e)&&r(["padding-right:",";"],"large"===n?"26px":"18px")),"top"===p&&r(["padding:",";"," ",""],"large"===n?"2px":"0px",a&&r(["padding-bottom:0px;"]),(t||i||e)&&r(["padding-bottom:",";padding-right:",";&:hover{padding-bottom:",";}"],"large"===n?"4px":"2px","large"===n?"18px":"14px","large"===n?"4px":"2px")))))),n=r(["background-color:transparent;display:inline-block;border-top-left-radius:var(--borderRadius100);border-top-right-radius:var(--borderRadius100);font-weight:500;position:relative;border:none;cursor:pointer;font-size:14px;padding:0px;text-decoration:none;outline-offset:0px;margin:0;",";"," a:visited{color:inherit;}",""],(({position:o})=>"top"===o&&"white-space: nowrap"),(({position:o})=>r(["",""],"left"===o&&r(["border-top-right-radius:var(--borderRadius000);"]))),(({size:o,position:i="top",borders:n=!1,noRightBorder:a,noLeftBorder:d,isTabSelected:l,alternateStyling:p,error:s,warning:c,info:g,isInSidebar:b,validationRedesignOptIn:x})=>r(["height:",";"," "," "," ",' &:focus{outline:4px solid black;top:-2px;z-index:6;> span[data-role="tab-title-content"]{outline:none;',"}",' ::before{content:"";position:absolute;top:0;left 0;bottom:0;right:',";outline:3px solid var(--colorsSemanticFocus500);",' outline-offset:-2px;z-index:5;}> [data-element="tab-selected-indicator"]{z-index:4;',"}}}"," "," & ","{{","}"],"large"===o?"var(--sizing600)":"var(--sizing500)","top"===i&&r(["",""],n&&!(a||d)&&r(["&:nth-of-type(n + 1):not(:first-of-type){margin-left:-1px;}&:first-child{margin-left:0;}"])),"left"===i&&r(["",""],n&&r(["&:nth-of-type(n + 1):not(:first-of-type){margin-top:-1px;}&:first-child{margin-top:0;}"])),!l&&r(["color:var(--colorsActionMinorYin090);"," &:hover{background:var(--colorsActionMinor100);"," color:var(--colorsActionMinorYin090);outline:none;}&:focus{color:var(--colorsActionMinorYin090);outline:none;}"],x&&r(["background:transparent;"]),x&&r(["background:var(--colorsUtilityMajor100);"])),l&&r(["color:var(--colorsActionMajorYin090);background-color:var(--colorsActionMajorYang100);"," &:hover{background-color:var(--colorsActionMajorYang100);border-bottom-color:",";color:var(--colorsActionMajorYin090);cursor:default;}"],(s||c||g)&&r(["padding-bottom:0px;"]),p?"var(--colorsActionMinor100)":"var(--colorsActionMajor500)"),"top"===i&&"top: 2px;",r("top"===i?["border-top-left-radius:var(--borderRadius100);border-top-right-radius:var(--borderRadius100);"]:["border-top-left-radius:var(--borderRadius100);border-bottom-left-radius:var(--borderRadius100);"]),"top"===i?"0":"-1px",r("top"===i?["border-top-left-radius:var(--borderRadius100);border-top-right-radius:var(--borderRadius100);"]:["border-top-left-radius:var(--borderRadius100);border-bottom-left-radius:var(--borderRadius100);"]),r("top"===i?["bottom:2px;left:2px;right:1px;"]:["bottom:2px;right:1px;"]),"left"===i&&r(["background-color:transparent;border-bottom:0px;"," "," display:flex;height:auto;margin-left:0px;&:first-child{margin-top:0;}&:hover{","}"," "," ",""],!b&&!s&&r(["--border-right-value:",";border-right:"," solid var(--colorsActionMinor100);"],x?"0px":"2px",p?"1px":"var(--border-right-value)"),!n&&r(["","{border-bottom:none;}"],e),p&&"border-right-color: var(--colorsActionMinor100)",(c||g)&&r(["border-right:none;"]),!l&&r(["border-right-color:var(--colorsActionMinor100);"]),l&&r([""," "," background-color:var(--colorsActionMajorYang100);&:hover{"," background-color:var(--colorsActionMajorYang100);","}&:focus{","}"],p&&r(["border-right-color:var(--colorsActionMinor100);"]),!p&&r(["border-right:none;padding-bottom:0px;","{"," border-right:none;}"],e,!(s||c||g)&&!x&&"margin-right: 2px;"),p&&"border-right-color: var(--colorsActionMinor100);",(s||c||g)&&"border-right-color: var(--colorsSemanticNegative500);",(s||c||g)&&"border-right-color: var(--colorsSemanticNegative500);")),p&&r(["&:focus{background-color:var(--colorsActionMinor200);}&:hover{background-color:",";}",""],l?"var(--colorsActionMinor200)":"var(--colorsActionMinor250)",l&&r(["background-color:var(--colorsActionMinor200);"])),t,x?"margin-top: 10px;":"margin-top: 2px;"))),a=o.button.withConfig({displayName:"tab-title.style__StyledTabTitleButton",componentId:"sc-6f1d665d-1"})(["",""],n),d=o.a.withConfig({displayName:"tab-title.style__StyledTabTitleLink",componentId:"sc-6f1d665d-2"})(["",""],n),l=o.div.withConfig({displayName:"tab-title.style__StyledLayoutWrapper",componentId:"sc-6f1d665d-3"})(["",""],(({hasCustomLayout:o,titlePosition:e="before",hasCustomSibling:n,validationRedesignOptIn:a})=>r([""," ",""],o&&r(["flex-grow:2;"]),!o&&r(["display:inline-flex;position:relative;top:-1px;"," "," ","{height:20px;}","{z-index:10;","{height:",";left:-2px;}}"],n&&r(["left:4px;"]),!n&&r(["",""],"before"===e?"left: 8px;":"right: 8px;"),t,i,t,a?"0px":"16px")))),p=o.div.withConfig({displayName:"tab-title.style__StyledVerticalIndicator",componentId:"sc-6f1d665d-4"})(["position:absolute;top:0px;bottom:0px;right:0px;box-shadow:inset calc(-1 * var(--sizing050)) 0px 0px 0px var(--colorsActionMinor100);width:2px;z-index:1;"]),s=o.div.withConfig({displayName:"tab-title.style__StyledSelectedIndicator",componentId:"sc-6f1d665d-5"})(["position:absolute;z-index:1;"," "," &:focus{bottom:3px;left:3px;right:3px;}"],(o=>r(["",""],o&&r(["z-index:2;"]))),(({position:o="top",warning:t,error:i})=>r(["--selected-indicator-color:var(--colorsActionMajor500);"," "," "," ",""],t&&r(["--selected-indicator-color:var(--colorsSemanticCaution500);"]),i&&r(["--selected-indicator-color:var(--colorsSemanticNegative500);"]),"top"===o&&r(["bottom:-1px;left:0px;right:0px;box-shadow:inset 0px calc(-1 * var(--sizing050)) 0px var(--selected-indicator-color);height:var(--sizing050);"]),"left"===o&&r(["top:0px;bottom:0px;right:0px;box-shadow:inset calc(-1 * var(--sizing050)) 0px 0px 0px var(--selected-indicator-color);width:var(--sizing050);"]))));export{l as StyledLayoutWrapper,s as StyledSelectedIndicator,a as StyledTabTitleButton,d as StyledTabTitleLink,e as StyledTitleContent,p as StyledVerticalIndicator};

package/esm/components/tabs/__internal__/tabs-header/index.js

@@ -1 +1 @@
-export { default } from "./tabs-header.component";
+export{default}from"./tabs-header.component.js";