carbon-react 154.4.1 → 154.4.2

package/esm/components/switch/__internal__/switch-slider.style.js

@@ -1,114 +1 @@
-import styled, { css } from "styled-components";
-import StyledValidationIcon from "../../../__internal__/validations/validation-icon.style";
-import SwitchSliderPanel from "./switch-slider-panel.style";
-const StyledSwitchSlider = styled.div`
-  ${({
-  checked,
-  isLoading,
-  disabled,
-  size,
-  error,
-  warning,
-  isDarkBackground
-}) => css`
-    display: flex;
-    font-size: 12px;
-    font-weight: 500;
-    height: 28px;
-    left: 0;
-    letter-spacing: 1px;
-    position: relative;
-    text-transform: uppercase;
-    top: 0;
-    width: 100%;
-    z-index: 1;
-    border-radius: var(--borderRadius400);
-    border-style: solid;
-    border-color: ${isDarkBackground ? "var(--colorsUtilityYang100)" : "var(--colorsActionMinor400)"};
-    border-width: var(--borderWidth200);
-    box-sizing: border-box;
-    margin-top: ${size === "large" ? "-47px" : "-28px"};
-    align-items: center;
-
-    &::before {
-      background-color: ${isDarkBackground ? "var(--colorsUtilityYang100)" : "var(--colorsActionMinor400)"};
-      bottom: 4px;
-      content: "";
-      height: ${size === "large" ? "var(--spacing400)" : "var(--spacing200)"};
-      position: absolute;
-      left: 4px;
-      transition: margin-left 0.4s;
-      width: ${size === "large" ? "var(--spacing400)" : "var(--spacing200)"};
-      z-index: 1;
-      border-radius: 50%;
-    }
-
-    ${checked && css`
-      background-color: ${isDarkBackground ? "var(--colorsUtilityYang100)" : "var(--colorsActionMinor500)"};
-      border-color: var(--colorsActionMinorTransparent);
-
-      &::before {
-        margin-left: calc(
-          100% - ${size === "large" ? "var(--spacing500)" : "var(--spacing300)"}
-        );
-        background-color: ${isDarkBackground ? "var(--colorsUtilityYin100)" : "var(--colorsActionMinorYang100)"};
-      }
-    `}
-
-    ${disabled && !isLoading && css`
-      border-color: var(--colorsActionDisabled600);
-
-      &::before {
-        background-color: var(--colorsActionDisabled600);
-      }
-
-      ${SwitchSliderPanel} {
-        color: var(--colorsUtilityYin030);
-      }
-
-      ${checked && css`
-        background-color: var(--colorsActionDisabled500);
-        border-color: var(--colorsActionMinorTransparent);
-
-        &::before {
-          background-color: var(--colorsActionMinorYang100);
-        }
-
-        ${SwitchSliderPanel} {
-          color: var(--colorsUtilityYin030);
-        }
-      `}
-    `}
-
-    ${isLoading && css`
-      &::before {
-        display: none;
-      }
-    `}
-
-    ${warning && !disabled && css`
-      border-color: var(--colorsSemanticCaution500);
-    `}
-
-    ${error && !disabled && css`
-      border-color: var(--colorsSemanticNegative500);
-    `}
-
-    ${StyledValidationIcon} {
-      position: absolute;
-      right: -30px;
-      height: 100%;
-    }
-  `}
-`;
-const HiddenContent = styled.div`
-  ${({
-  size
-}) => css`
-    visibility: hidden;
-    height: 0px;
-    padding-left: ${size === "large" ? "var(--spacing700)" : "var(--spacing500)"};
-  `}
-`;
-export { StyledSwitchSlider, HiddenContent };
-export default StyledSwitchSlider;
+import o,{css as r}from"styled-components";import i from"../../../__internal__/validations/validation-icon.style.js";import a from"./switch-slider-panel.style.js";const e=o.div.withConfig({displayName:"switch-slider.style__StyledSwitchSlider",componentId:"sc-24751354-0"})(["",""],(({checked:o,isLoading:e,disabled:t,size:n,error:l,warning:c,isDarkBackground:s})=>r(["display:flex;font-size:12px;font-weight:500;height:28px;left:0;letter-spacing:1px;position:relative;text-transform:uppercase;top:0;width:100%;z-index:1;border-radius:var(--borderRadius400);border-style:solid;border-color:",";border-width:var(--borderWidth200);box-sizing:border-box;margin-top:",";align-items:center;&::before{background-color:",';bottom:4px;content:"";height:',";position:absolute;left:4px;transition:margin-left 0.4s;width:",";z-index:1;border-radius:50%;}"," "," "," "," "," ","{position:absolute;right:-30px;height:100%;}"],s?"var(--colorsUtilityYang100)":"var(--colorsActionMinor400)","large"===n?"-47px":"-28px",s?"var(--colorsUtilityYang100)":"var(--colorsActionMinor400)","large"===n?"var(--spacing400)":"var(--spacing200)","large"===n?"var(--spacing400)":"var(--spacing200)",o&&r(["background-color:",";border-color:var(--colorsActionMinorTransparent);&::before{margin-left:calc( 100% - "," );background-color:",";}"],s?"var(--colorsUtilityYang100)":"var(--colorsActionMinor500)","large"===n?"var(--spacing500)":"var(--spacing300)",s?"var(--colorsUtilityYin100)":"var(--colorsActionMinorYang100)"),t&&!e&&r(["border-color:var(--colorsActionDisabled600);&::before{background-color:var(--colorsActionDisabled600);}","{color:var(--colorsUtilityYin030);}",""],a,o&&r(["background-color:var(--colorsActionDisabled500);border-color:var(--colorsActionMinorTransparent);&::before{background-color:var(--colorsActionMinorYang100);}","{color:var(--colorsUtilityYin030);}"],a)),e&&r(["&::before{display:none;}"]),c&&!t&&r(["border-color:var(--colorsSemanticCaution500);"]),l&&!t&&r(["border-color:var(--colorsSemanticNegative500);"]),i))),t=o.div.withConfig({displayName:"switch-slider.style__HiddenContent",componentId:"sc-24751354-1"})(["",""],(({size:o})=>r(["visibility:hidden;height:0px;padding-left:",";"],"large"===o?"var(--spacing700)":"var(--spacing500)")));export{t as HiddenContent,e as StyledSwitchSlider,e as default};

package/esm/components/switch/index.js

@@ -1 +1 @@
-export { default } from "./switch.component";
+export{Switch as default}from"./switch.component.js";

package/esm/components/switch/switch.component.js

@@ -1,247 +1 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useState, useCallback, useContext, useRef } from "react";
-import Box from "../box";
-import CheckableInput from "../../__internal__/checkable-input";
-import Label from "../../__internal__/label";
-import { TooltipProvider } from "../../__internal__/tooltip-provider";
-import NewValidationContext from "../carbon-provider/__internal__/new-validation.context";
-import Logger from "../../__internal__/utils/logger";
-import ValidationMessage from "../../__internal__/validation-message/validation-message.component";
-import useIsAboveBreakpoint from "../../hooks/__internal__/useIsAboveBreakpoint";
-import StyledSwitch, { ErrorBorder } from "./switch.style";
-import SwitchSlider from "./__internal__/switch-slider.component";
-import guid from "../../__internal__/utils/helpers/guid";
-import HintText from "../../__internal__/hint-text";
-import { filterStyledSystemMarginProps } from "../../style/utils";
-let deprecateUncontrolledWarnTriggered = false;
-export const Switch = /*#__PURE__*/React.forwardRef(({
-  autoFocus,
-  id,
-  label,
-  onChange,
-  onBlur,
-  onFocus,
-  value,
-  checked,
-  defaultChecked,
-  disabled,
-  loading,
-  reverse = true,
-  required,
-  isOptional,
-  validationOnLabel = false,
-  labelInline = false,
-  labelSpacing,
-  labelHelp,
-  fieldHelpInline,
-  size,
-  name,
-  adaptiveLabelBreakpoint,
-  tooltipPosition,
-  error,
-  warning,
-  info,
-  "data-element": dataElement,
-  "data-role": dataRole,
-  helpAriaLabel,
-  isDarkBackground = false,
-  ...rest
-}, ref) => {
-  const isControlled = checked !== undefined;
-  const {
-    validationRedesignOptIn
-  } = useContext(NewValidationContext);
-  const labelId = useRef(`${guid()}-label`);
-  const inputHintId = useRef(`${guid()}-hint`);
-  const validationMessageId = useRef(`${guid()}-message`);
-  const [checkedInternal, setCheckedInternal] = useState(defaultChecked || false);
-  if (!deprecateUncontrolledWarnTriggered && !onChange) {
-    deprecateUncontrolledWarnTriggered = true;
-    Logger.deprecate("Uncontrolled behaviour in `Switch` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
-  }
-  const onChangeInternal = useCallback(e => {
-    if (loading) {
-      e.preventDefault();
-    } else {
-      setCheckedInternal(e.target.checked);
-      onChange?.(e);
-    }
-  }, [setCheckedInternal, onChange, loading]);
-  const largeScreen = useIsAboveBreakpoint(adaptiveLabelBreakpoint);
-  let shouldLabelBeInline = labelInline;
-  // Coverage has been ignored here as this functionality is covered in a Playwright test.
-  /* istanbul ignore next */
-  if (adaptiveLabelBreakpoint) {
-    shouldLabelBeInline = largeScreen;
-  }
-  const shouldValidationBeOnLabel = labelInline && !reverse ? true : validationOnLabel;
-  const marginProps = filterStyledSystemMarginProps(rest);
-  const switchStyleProps = {
-    "data-component": "switch",
-    "data-role": dataRole,
-    "data-element": dataElement,
-    checked: isControlled ? checked : checkedInternal,
-    isDarkBackground,
-    fieldHelpInline,
-    labelInline: shouldLabelBeInline,
-    labelSpacing,
-    reverse: !reverse,
-    // switched to preserve backward compatibility
-    size,
-    ...marginProps
-  };
-  const switchSliderProps = {
-    checked: isControlled ? checked : checkedInternal,
-    disabled,
-    loading,
-    isDarkBackground,
-    size,
-    error,
-    warning,
-    info,
-    useValidationIcon: !validationRedesignOptIn && !shouldValidationBeOnLabel && !disabled
-  };
-  const inputProps = {
-    autoFocus,
-    error,
-    warning,
-    info,
-    disabled,
-    loading,
-    checked: isControlled ? checked : checkedInternal,
-    label,
-    labelHelp,
-    fieldHelpInline,
-    labelInline: shouldLabelBeInline,
-    labelSpacing,
-    onBlur,
-    isDarkBackground,
-    onFocus,
-    onChange: isControlled ? onChange : onChangeInternal,
-    id,
-    name,
-    value,
-    type: "checkbox",
-    role: "switch",
-    reverse: !reverse,
-    // switched to preserve backward compatibility
-    validationOnLabel: shouldValidationBeOnLabel && !disabled,
-    ref,
-    required,
-    isOptional,
-    ...rest,
-    "data-component": undefined
-  };
-
-  // Created separate const declarations to help when removing the old validation.
-  // Not all props utilised by the old validation work or will be needed with the new validation.
-  const switchStylePropsForNewValidation = {
-    "data-component": "switch",
-    "data-role": dataRole,
-    "data-element": dataElement,
-    checked: isControlled ? checked : checkedInternal,
-    labelInline: shouldLabelBeInline,
-    isDarkBackground,
-    size,
-    ...marginProps
-  };
-  const switchSliderPropsForNewValidation = {
-    checked: isControlled ? checked : checkedInternal,
-    disabled,
-    loading,
-    isDarkBackground,
-    size,
-    error,
-    warning
-  };
-  const inputPropsForNewValidation = {
-    autoFocus,
-    // set aria-invalid but prevent validationIconId from being added to aria-describedby
-    error: !!error,
-    warning,
-    disabled,
-    loading,
-    checked: isControlled ? checked : checkedInternal,
-    onBlur,
-    isDarkBackground,
-    onFocus,
-    onChange: isControlled ? onChange : onChangeInternal,
-    id,
-    name,
-    value,
-    type: "checkbox",
-    role: "switch",
-    ref,
-    required,
-    isOptional,
-    ...rest
-  };
-  const applyValidation = error || warning;
-  const ariaDescribedBy = [labelHelp && inputHintId.current, applyValidation && validationMessageId.current].filter(Boolean).join(" ");
-  if (!validationRedesignOptIn) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TooltipProvider, {
-      helpAriaLabel: helpAriaLabel,
-      tooltipPosition: tooltipPosition
-    }, /*#__PURE__*/React.createElement(StyledSwitch, switchStyleProps, /*#__PURE__*/React.createElement(CheckableInput, inputProps, /*#__PURE__*/React.createElement(SwitchSlider, switchSliderProps)))));
-  }
-  const defaultMargin = labelInline ? 1 : 0;
-  const defaultInputWrapperMargin = labelInline ? 3 : 0;
-  const errorMargin = error || warning ? defaultInputWrapperMargin : defaultMargin;
-  const direction = labelInline ? "row" : "column";
-  const reverseDirection = labelInline ? "row-reverse" : "column";
-  const labelWrapperAlignSelf = labelInline && !error && !warning && !info ? "center" : "";
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledSwitch, switchStylePropsForNewValidation, /*#__PURE__*/React.createElement(Box, {
-    "data-role": "field-reverse-wrapper",
-    display: "flex",
-    flexWrap: "wrap",
-    alignItems: error || warning ? "flex-start" : undefined,
-    flexDirection: !reverse ? reverseDirection : direction,
-    width: labelInline ? "100%" : "auto"
-  }, /*#__PURE__*/React.createElement(Box, {
-    "data-role": "label-wrapper",
-    alignSelf: labelWrapperAlignSelf
-  }, /*#__PURE__*/React.createElement(Label, {
-    isDarkBackground: isDarkBackground,
-    labelId: labelId.current,
-    disabled: disabled,
-    isRequired: required,
-    optional: isOptional
-  }, label), labelHelp && /*#__PURE__*/React.createElement(Box, {
-    "data-role": "hint-text-wrapper",
-    mb: labelInline ? 0 : 1,
-    mr: reverse ? 0 : 1,
-    ml: reverse ? 0 : 1
-  }, /*#__PURE__*/React.createElement(HintText, {
-    "data-role": "hint-text",
-    fontWeight: "400",
-    id: inputHintId.current,
-    isDarkBackground: isDarkBackground,
-    marginTop: "8px",
-    maxWidth: "160px"
-  }, labelHelp))), /*#__PURE__*/React.createElement(Box, {
-    ml: reverse ? errorMargin : 0,
-    mr: !reverse ? errorMargin : 0,
-    position: "relative",
-    id: "input-wrapper",
-    "data-role": "input-wrapper"
-  }, /*#__PURE__*/React.createElement(ValidationMessage, {
-    error: error,
-    warning: warning,
-    validationId: validationMessageId.current,
-    isDarkBackground: isDarkBackground
-  }), applyValidation && /*#__PURE__*/React.createElement(ErrorBorder, {
-    "data-role": "error-border",
-    warning: !!(!error && warning),
-    reverse: !reverse,
-    isDarkBackground: isDarkBackground
-  }), /*#__PURE__*/React.createElement(CheckableInput, _extends({
-    ariaLabelledBy: `${label && labelId.current}`,
-    ariaDescribedBy: ariaDescribedBy
-  }, inputPropsForNewValidation, {
-    fieldHelp: labelInline ? undefined : rest.fieldHelp
-  }), /*#__PURE__*/React.createElement(SwitchSlider, switchSliderPropsForNewValidation))))), labelInline && rest.fieldHelp && /*#__PURE__*/React.createElement(Box, {
-    color: isDarkBackground ? "var(--colorsUtilityYang100)" : "var(--colorsUtilityYin090)"
-  }, rest.fieldHelp));
-});
-Switch.displayName = "Switch";
-export default Switch;
+import{jsx as e,Fragment as r,jsxs as n}from"react/jsx-runtime";import i,{useContext as t,useRef as o,useState as l,useCallback as a}from"react";import{Box as c}from"../box/box.component.js";import d from"../../__internal__/checkable-input/checkable-input.component.js";import s from"../../__internal__/label/label.component.js";import{TooltipProvider as p}from"../../__internal__/tooltip-provider/index.js";import u from"../carbon-provider/__internal__/new-validation.context.js";import b from"../../__internal__/utils/logger/index.js";import m from"../../__internal__/validation-message/validation-message.component.js";import f from"../../hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js";import g,{ErrorBorder as h}from"./switch.style.js";import k from"./__internal__/switch-slider.component.js";import v from"../../__internal__/utils/helpers/guid/index.js";import{HintText as y}from"../../__internal__/hint-text/hint-text.component.js";import"../../style/utils/filter-styled-system-padding-props.js";import _ from"../../style/utils/filter-styled-system-margin-props.js";function w(e,r,n){return r in e?Object.defineProperty(e,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[r]=n,e}function O(e){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{},i=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),i.forEach((function(r){w(e,r,n[r])}))}return e}function j(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r.push.apply(r,n)}return r}(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))})),e}let x=!1;const B=i.forwardRef(((i,w)=>{var{autoFocus:B,id:D,label:I,onChange:P,onBlur:S,onFocus:H,value:L,checked:F,defaultChecked:z,disabled:C,loading:q,reverse:A=!0,required:$,isOptional:E,validationOnLabel:R=!1,labelInline:U=!1,labelSpacing:W,labelHelp:Y,fieldHelpInline:N,size:T,name:V,adaptiveLabelBreakpoint:G,tooltipPosition:J,error:K,warning:M,info:Q,"data-element":X,"data-role":Z,helpAriaLabel:ee,isDarkBackground:re=!1}=i,ne=function(e,r){if(null==e)return{};var n,i,t=function(e,r){if(null==e)return{};var n,i,t={},o=Object.keys(e);for(i=0;i<o.length;i++)n=o[i],r.indexOf(n)>=0||(t[n]=e[n]);return t}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(i=0;i<o.length;i++)n=o[i],r.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(t[n]=e[n])}return t}(i,["autoFocus","id","label","onChange","onBlur","onFocus","value","checked","defaultChecked","disabled","loading","reverse","required","isOptional","validationOnLabel","labelInline","labelSpacing","labelHelp","fieldHelpInline","size","name","adaptiveLabelBreakpoint","tooltipPosition","error","warning","info","data-element","data-role","helpAriaLabel","isDarkBackground"]);const ie=void 0!==F,{validationRedesignOptIn:te}=t(u),oe=o(`${v()}-label`),le=o(`${v()}-hint`),ae=o(`${v()}-message`),[ce,de]=l(z||!1);x||P||(x=!0,b.deprecate("Uncontrolled behaviour in `Switch` is deprecated and support will soon be removed. Please make sure all your inputs are controlled."));const se=a((e=>{q?e.preventDefault():(de(e.target.checked),null==P||P(e))}),[de,P,q]),pe=f(G);let ue=U;G&&(ue=pe);const be=!(!U||A)||R,me=_(ne),fe=O({"data-component":"switch","data-role":Z,"data-element":X,checked:ie?F:ce,isDarkBackground:re,fieldHelpInline:N,labelInline:ue,labelSpacing:W,reverse:!A,size:T},me),ge={checked:ie?F:ce,disabled:C,loading:q,isDarkBackground:re,size:T,error:K,warning:M,info:Q,useValidationIcon:!te&&!be&&!C},he=j(O({autoFocus:B,error:K,warning:M,info:Q,disabled:C,loading:q,checked:ie?F:ce,label:I,labelHelp:Y,fieldHelpInline:N,labelInline:ue,labelSpacing:W,onBlur:S,isDarkBackground:re,onFocus:H,onChange:ie?P:se,id:D,name:V,value:L,type:"checkbox",role:"switch",reverse:!A,validationOnLabel:be&&!C,ref:w,required:$,isOptional:E},ne),{"data-component":void 0}),ke=O({"data-component":"switch","data-role":Z,"data-element":X,checked:ie?F:ce,labelInline:ue,isDarkBackground:re,size:T},me),ve={checked:ie?F:ce,disabled:C,loading:q,isDarkBackground:re,size:T,error:K,warning:M},ye=O({autoFocus:B,error:!!K,warning:M,disabled:C,loading:q,checked:ie?F:ce,onBlur:S,isDarkBackground:re,onFocus:H,onChange:ie?P:se,id:D,name:V,value:L,type:"checkbox",role:"switch",ref:w,required:$,isOptional:E},ne),_e=K||M,we=[Y&&le.current,_e&&ae.current].filter(Boolean).join(" ");if(!te)return e(r,{children:e(p,{helpAriaLabel:ee,tooltipPosition:J,children:e(g,j(O({},fe),{children:e(d,j(O({},he),{children:e(k,O({},ge))}))}))})});const Oe=K||M?U?3:0:U?1:0,je=U?"row":"column",xe=U?"row-reverse":"column",Be=!U||K||M||Q?"":"center";return n(r,{children:[e(g,j(O({},ke),{children:n(c,{"data-role":"field-reverse-wrapper",display:"flex",flexWrap:"wrap",alignItems:K||M?"flex-start":void 0,flexDirection:A?je:xe,width:U?"100%":"auto",children:[n(c,{"data-role":"label-wrapper",alignSelf:Be,children:[e(s,{isDarkBackground:re,labelId:oe.current,disabled:C,isRequired:$,optional:E,children:I}),Y&&e(c,{"data-role":"hint-text-wrapper",mb:U?0:1,mr:A?0:1,ml:A?0:1,children:e(y,{"data-role":"hint-text",fontWeight:"400",id:le.current,isDarkBackground:re,marginTop:"8px",maxWidth:"160px",children:Y})})]}),n(c,{ml:A?Oe:0,mr:A?0:Oe,position:"relative",id:"input-wrapper","data-role":"input-wrapper",children:[e(m,{error:K,warning:M,validationId:ae.current,isDarkBackground:re}),_e&&e(h,{"data-role":"error-border",warning:!(K||!M),reverse:!A,isDarkBackground:re}),e(d,j(O({ariaLabelledBy:`${I&&oe.current}`,ariaDescribedBy:we},ye),{fieldHelp:U?void 0:ne.fieldHelp,children:e(k,O({},ve))}))]})]})})),U&&ne.fieldHelp&&e(c,{color:re?"var(--colorsUtilityYang100)":"var(--colorsUtilityYin090)",children:ne.fieldHelp})]})}));B.displayName="Switch";export{B as Switch,B as default};

package/esm/components/switch/switch.style.js

@@ -1,190 +1 @@
-import styled, { css } from "styled-components";
-import { margin } from "styled-system";
-import { StyledCheckableInput } from "../../__internal__/checkable-input/checkable-input.style";
-import HiddenCheckableInputStyle from "../../__internal__/checkable-input/hidden-checkable-input.style";
-import FieldHelpStyle from "../../__internal__/field-help/field-help.style";
-import { FieldLineStyle } from "../../__internal__/form-field/form-field.style";
-import { StyledLabelContainer } from "../../__internal__/label/label.style";
-import StyledValidationIcon from "../../__internal__/validations/validation-icon.style";
-import baseTheme from "../../style/themes/base";
-import addFocusStyling from "../../style/utils/add-focus-styling";
-import StyledSwitchSlider from "./__internal__/switch-slider.style";
-export const ErrorBorder = styled.span`
-  ${({
-  reverse,
-  warning,
-  isDarkBackground
-}) => {
-  const darkBgColour = isDarkBackground ? "var(--colorsSemanticNegative450)" : "var(--colorsSemanticNegative500)";
-  return css`
-      position: absolute;
-      z-index: 6;
-      width: 2px;
-      background-color: ${warning ? "var(--colorsSemanticCaution500)" : darkBgColour};
-      ${reverse ? "right" : "left"}: -12px;
-      bottom: -4px;
-      top: 2px;
-    `;
-}}
-`;
-const StyledSwitch = styled.div`
-  ${({
-  fieldHelpInline,
-  labelInline,
-  reverse,
-  size
-}) => css`
-    margin-bottom: var(--fieldSpacing);
-    ${margin}
-    ${FieldLineStyle} {
-      display: flex;
-      flex-flow: ${labelInline ? "row wrap" : "column wrap"};
-
-      ${!labelInline && fieldHelpInline && css`
-        display: grid;
-        grid-template-columns: max-content max-content;
-      `}
-    }
-
-    display: flex;
-    flex-flow: ${labelInline ? "row wrap" : "column wrap"};
-
-    ${StyledCheckableInput}, ${HiddenCheckableInputStyle} {
-      border: none;
-      box-sizing: border-box;
-      height: 24px;
-      flex-basis: 100%;
-      margin-left: 0;
-    }
-
-    ${HiddenCheckableInputStyle} {
-      width: 100%;
-    }
-
-    ${StyledCheckableInput} {
-      width: min-content;
-    }
-
-    ${HiddenCheckableInputStyle}:not([disabled]) {
-      &:focus ~ ${StyledSwitchSlider} {
-        ${addFocusStyling()}
-      }
-    }
-
-    ${FieldHelpStyle} {
-      margin-left: 0;
-    }
-
-    ${StyledLabelContainer} {
-      ${!labelInline && css`
-        padding: 0;
-      `};
-      margin-bottom: 8px;
-
-      ${StyledValidationIcon} {
-        position: relative;
-        display: inline-block;
-      }
-    }
-
-    ${fieldHelpInline && css`
-      ${FieldHelpStyle} {
-        margin: 0;
-      }
-    `}
-
-    ${reverse && css`
-      ${!labelInline && css`
-        ${StyledLabelContainer} {
-          margin-top: 8px;
-        }
-
-        ${fieldHelpInline && css`
-          ${FieldHelpStyle} {
-            margin-top: 8px;
-          }
-        `}
-      `}
-    `}
-
-    ${labelInline && css`
-      ${StyledCheckableInput} {
-        flex-basis: auto;
-      }
-
-      ${FieldLineStyle} {
-        display: flex;
-      }
-
-      ${StyledLabelContainer} {
-        margin-bottom: 0;
-      }
-
-      ${FieldHelpStyle} {
-        margin-bottom: 0;
-        margin-top: 0;
-      }
-
-      ${reverse && css`
-        ${StyledCheckableInput} {
-          margin-left: 0;
-          margin-top: 0;
-        }
-
-        ${!fieldHelpInline && css`
-          ${FieldHelpStyle} {
-            margin-left: 60px;
-          }
-        `}
-      `}
-
-      ${fieldHelpInline && css`
-        ${!reverse && `
-          ${StyledCheckableInput} {
-            margin-left: 10px;
-          }
-        `}
-
-        ${StyledLabelContainer} {
-          margin-right: 10px;
-        }
-
-        ${FieldHelpStyle} {
-          margin-left: 0;
-          align-self: center;
-        }
-      `}
-    `}
-
-    ${size === "large" && css`
-      ${StyledCheckableInput}, ${HiddenCheckableInputStyle}, ${StyledSwitchSlider} {
-        height: 44px;
-        min-width: fit-content;
-      }
-
-      ${labelInline && !fieldHelpInline && reverse && css`
-        ${FieldHelpStyle} {
-          padding: 10px 0;
-        }
-      `}
-
-      ${labelInline && css`
-        ${StyledLabelContainer} {
-          margin-top: 1px;
-          padding-top: 10px;
-          padding-bottom: 10px;
-        }
-
-        ${!fieldHelpInline && reverse && css`
-          ${FieldHelpStyle} {
-            margin-left: 78px;
-          }
-        `}
-      `}
-    `}
-  `}
-`;
-StyledSwitch.defaultProps = {
-  theme: baseTheme
-};
-export default StyledSwitch;
+import e,{css as i}from"styled-components";import{margin as t}from"styled-system";import{StyledCheckableInput as n}from"../../__internal__/checkable-input/checkable-input.style.js";import o from"../../__internal__/checkable-input/hidden-checkable-input.style.js";import r from"../../__internal__/field-help/field-help.style.js";import{FieldLineStyle as l}from"../../__internal__/form-field/form-field.style.js";import{StyledLabelContainer as a}from"../../__internal__/label/label.style.js";import m from"../../__internal__/validations/validation-icon.style.js";import p from"../../style/themes/base/index.js";import s from"../../style/utils/add-focus-styling.js";import{StyledSwitchSlider as d}from"./__internal__/switch-slider.style.js";const f=e.span.withConfig({displayName:"switch.style__ErrorBorder",componentId:"sc-b4e4ec1d-0"})(["",""],(({reverse:e,warning:t,isDarkBackground:n})=>i(["position:absolute;z-index:6;width:2px;background-color:",";",":-12px;bottom:-4px;top:2px;"],t?"var(--colorsSemanticCaution500)":n?"var(--colorsSemanticNegative450)":"var(--colorsSemanticNegative500)",e?"right":"left"))),c=e.div.withConfig({displayName:"switch.style__StyledSwitch",componentId:"sc-b4e4ec1d-1"})(["",""],(({fieldHelpInline:e,labelInline:p,reverse:f,size:c})=>i(["margin-bottom:var(--fieldSpacing);"," ","{display:flex;flex-flow:",";","}display:flex;flex-flow:",";",",","{border:none;box-sizing:border-box;height:24px;flex-basis:100%;margin-left:0;}","{width:100%;}","{width:min-content;}",":not([disabled]){&:focus ~ ","{","}}","{margin-left:0;}","{",";margin-bottom:8px;","{position:relative;display:inline-block;}}"," "," "," ",""],t,l,p?"row wrap":"column wrap",!p&&e&&i(["display:grid;grid-template-columns:max-content max-content;"]),p?"row wrap":"column wrap",n,o,o,n,o,d,s(),r,a,!p&&i(["padding:0;"]),m,e&&i(["","{margin:0;}"],r),f&&i(["",""],!p&&i(["","{margin-top:8px;}",""],a,e&&i(["","{margin-top:8px;}"],r))),p&&i(["","{flex-basis:auto;}","{display:flex;}","{margin-bottom:0;}","{margin-bottom:0;margin-top:0;}"," ",""],n,l,a,r,f&&i(["","{margin-left:0;margin-top:0;}",""],n,!e&&i(["","{margin-left:60px;}"],r)),e&&i([""," ","{margin-right:10px;}","{margin-left:0;align-self:center;}"],!f&&`\n          ${n} {\n            margin-left: 10px;\n          }\n        `,a,r)),"large"===c&&i(["",",",",","{height:44px;min-width:fit-content;}"," ",""],n,o,d,p&&!e&&f&&i(["","{padding:10px 0;}"],r),p&&i(["","{margin-top:1px;padding-top:10px;padding-bottom:10px;}",""],a,!e&&f&&i(["","{margin-left:78px;}"],r))))));c.defaultProps={theme:p};export{f as ErrorBorder,c as default};

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

@@ -1 +1 @@
-export { default } from "./tab-title.component";
+export{default}from"./tab-title.component.js";