carbon-react 154.3.2 → 154.4.0-beta.0

package/esm/__internal__/input/input.component.js

@@ -1,157 +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, { useEffect, useContext, useRef, useCallback } from "react";
-import StyledInput from "./input.style";
-import { InputContext, InputGroupContext } from "../input-behaviour";
-import { SelectTextboxContext } from "../../components/select/__internal__/select-textbox/select-textbox.context";
-function selectTextOnFocus(input) {
-  // setTimeout is required so the dom has a chance to place the cursor in the input
-  setTimeout(() => {
-    if (input?.current) {
-      const {
-        selectionStart,
-        selectionEnd,
-        value
-      } = input.current;
-      const {
-        length
-      } = value;
-      // only select text if cursor is at the very end or the very start of the value
-      if (selectionStart === 0 && selectionEnd === 0 || selectionStart === length && selectionEnd === length) {
-        if (document.activeElement === input.current) {
-          input.current.setSelectionRange(0, length);
-        }
-      }
-    }
-  });
-}
-const Input = /*#__PURE__*/React.forwardRef(({
-  align,
-  "aria-labelledby": ariaLabelledBy,
-  "aria-describedby": ariaDescribedBy,
-  ariaDescribedBy: ariaDescribedByDeprecated,
-  placeholder,
-  disabled,
-  readOnly,
-  autoFocus,
-  onClick,
-  onChangeDeferred,
-  onChange,
-  onBlur,
-  onFocus,
-  deferTimeout,
-  type = "text",
-  id,
-  name,
-  validationIconId,
-  inputBorderRadius = "borderRadius050",
-  enterKeyHint,
-  ...rest
-}, ref) => {
-  const context = useContext(InputContext);
-  const groupContext = useContext(InputGroupContext);
-  const {
-    isInputInSelect
-  } = useContext(SelectTextboxContext);
-  const deferredTimeout = useRef(null);
-  let input = useRef(null);
-  if (ref && "current" in ref) {
-    input = ref;
-  }
-  const callbackRef = useCallback(element => {
-    input.current = element;
-    if (typeof ref === "function") {
-      ref(element);
-    }
-    if (autoFocus && element) {
-      element.focus();
-    }
-    if (enterKeyHint && element) {
-      element.setAttribute("enterkeyhint", enterKeyHint);
-    }
-  }, [autoFocus, ref, enterKeyHint]);
-  useEffect(() => {
-    if (context.inputRef) {
-      context.inputRef(input);
-    }
-  }, [context, input]);
-  useEffect(() => {
-    if (disabled && context.onBlur) {
-      context.onBlur();
-    }
-  }, [disabled, context]);
-  const handleClick = ev => {
-    if (onClick) {
-      onClick(ev);
-    }
-    input?.current?.focus();
-  };
-  const handleFocus = ev => {
-    if (onFocus) {
-      onFocus(ev);
-    }
-    if (context.onFocus) {
-      context.onFocus();
-    }
-    if (groupContext.onFocus) {
-      groupContext.onFocus();
-    }
-    if (type === "text") {
-      selectTextOnFocus(input);
-    }
-  };
-  const handleBlur = ev => {
-    if (onBlur) {
-      onBlur(ev);
-    }
-    if (context.onBlur) {
-      context.onBlur();
-    }
-    if (groupContext.onBlur) {
-      groupContext.onBlur();
-    }
-  };
-  const handleDeferred = ev => {
-    if (onChangeDeferred) {
-      if (deferredTimeout.current) {
-        clearTimeout(deferredTimeout.current);
-      }
-      deferredTimeout.current = setTimeout(() => {
-        onChangeDeferred(ev);
-      }, deferTimeout || 750);
-    }
-  };
-  const handleChange = ev => {
-    if (onChange) {
-      onChange(ev);
-    }
-    handleDeferred(ev);
-  };
-  const hasValidationPart = (context.hasFocus || groupContext.hasFocus || context.hasMouseOver || groupContext.hasMouseOver) && validationIconId;
-  const descriptionList = ariaDescribedBy || ariaDescribedByDeprecated ? [ariaDescribedBy || ariaDescribedByDeprecated] : [];
-  if (hasValidationPart) {
-    descriptionList.push(validationIconId);
-  }
-  const combinedDescription = descriptionList.length ? descriptionList.filter(Boolean).join(" ") : undefined;
-  return /*#__PURE__*/React.createElement(StyledInput, _extends({}, rest, {
-    isInputInSelect: isInputInSelect,
-    "data-has-autofocus": autoFocus ? true : undefined,
-    "aria-describedby": combinedDescription,
-    "aria-labelledby": ariaLabelledBy,
-    align: align,
-    placeholder: placeholder,
-    disabled: disabled,
-    readOnly: readOnly,
-    name: name,
-    type: type,
-    id: id || name,
-    ref: callbackRef,
-    "data-element": "input",
-    onFocus: handleFocus,
-    onBlur: handleBlur,
-    onClick: handleClick,
-    onChange: handleChange,
-    inputBorderRadius: inputBorderRadius
-  }));
-});
-Input.displayName = "Input";
-export default Input;
+import{jsx as e}from"react/jsx-runtime";import t,{useContext as r,useRef as n,useCallback as o,useEffect as i}from"react";import u from"./input.style.js";import{InputContext as c}from"../input-behaviour/input-behaviour.component.js";import{InputGroupContext as a}from"../input-behaviour/input-group-behaviour.component.js";import{SelectTextboxContext as l}from"../../components/select/__internal__/select-textbox/select-textbox.context.js";function s(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}const p=t.forwardRef(((t,p)=>{var{align:d,"aria-labelledby":b,"aria-describedby":f,ariaDescribedBy:y,placeholder:m,disabled:O,readOnly:h,autoFocus:g,onClick:v,onChangeDeferred:j,onChange:B,onBlur:P,onFocus:w,deferTimeout:x,type:F="text",id:I,name:S,validationIconId:C,inputBorderRadius:D="borderRadius050",enterKeyHint:R}=t,k=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(t,["align","aria-labelledby","aria-describedby","ariaDescribedBy","placeholder","disabled","readOnly","autoFocus","onClick","onChangeDeferred","onChange","onBlur","onFocus","deferTimeout","type","id","name","validationIconId","inputBorderRadius","enterKeyHint"]);const E=r(c),T=r(a),{isInputInSelect:_}=r(l),H=n(null);let K=n(null);p&&"current"in p&&(K=p);const M=o((e=>{K.current=e,"function"==typeof p&&p(e),g&&e&&e.focus(),R&&e&&e.setAttribute("enterkeyhint",R)}),[g,p,R]);i((()=>{E.inputRef&&E.inputRef(K)}),[E,K]),i((()=>{O&&E.onBlur&&E.onBlur()}),[O,E]);const A=f||y?[f||y]:[];(E.hasFocus||T.hasFocus||E.hasMouseOver||T.hasMouseOver)&&C&&A.push(C);const N=A.length?A.filter(Boolean).join(" "):void 0;return e(u,(q=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){s(e,t,r[t])}))}return e}({},k),z={isInputInSelect:_,"data-has-autofocus":!!g||void 0,"aria-describedby":N,"aria-labelledby":b,align:d,placeholder:m,disabled:O,readOnly:h,name:S,type:F,id:I||S,ref:M,"data-element":"input",onFocus:e=>{w&&w(e),E.onFocus&&E.onFocus(),T.onFocus&&T.onFocus(),"text"===F&&function(e){setTimeout((()=>{if(null==e?void 0:e.current){const{selectionStart:t,selectionEnd:r,value:n}=e.current,{length:o}=n;(0===t&&0===r||t===o&&r===o)&&document.activeElement===e.current&&e.current.setSelectionRange(0,o)}}))}(K)},onBlur:e=>{P&&P(e),E.onBlur&&E.onBlur(),T.onBlur&&T.onBlur()},onClick:e=>{var t;v&&v(e),null==K||null===(t=K.current)||void 0===t||t.focus()},onChange:e=>{B&&B(e),(e=>{j&&(H.current&&clearTimeout(H.current),H.current=setTimeout((()=>{j(e)}),x||750))})(e)},inputBorderRadius:D},z=null!=z?z:{},Object.getOwnPropertyDescriptors?Object.defineProperties(q,Object.getOwnPropertyDescriptors(z)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(z)).forEach((function(e){Object.defineProperty(q,e,Object.getOwnPropertyDescriptor(z,e))})),q));var q,z}));p.displayName="Input";export{p as default};

package/esm/__internal__/input/input.style.js

@@ -1,47 +1 @@
-import styled, { css } from "styled-components";
-const StyledInput = styled.input`
-  ${({
-  isInputInSelect
-}) => isInputInSelect && "text-overflow: ellipsis"};
-  background: transparent;
-  border: none;
-  color: var(--colorsUtilityYin090);
-  flex-grow: 1;
-  font-size: var(--fontSizes100);
-  outline: none;
-  padding: 0;
-  margin: 0;
-  width: 30px;
-
-  &:-webkit-autofill {
-    background-clip: text;
-    -webkit-background-clip: text;
-  }
-
-  ${({
-  inputBorderRadius
-}) => {
-  if (Array.isArray(inputBorderRadius)) {
-    return `border-radius: ${inputBorderRadius.map(value => `var(--${value})`).join(" ")};`;
-  }
-  return `border-radius: var(--${inputBorderRadius});`;
-}}
-
-  ${({
-  align
-}) => align && css`
-      text-align: ${align};
-    `}
-
-  &::placeholder {
-    color: var(--colorsUtilityYin055);
-  }
-
-  ${({
-  disabled
-}) => disabled && css`
-      color: var(--colorsUtilityYin030);
-      cursor: not-allowed;
-    `}
-`;
-export default StyledInput;
+import o,{css as r}from"styled-components";const t=o.input.withConfig({displayName:"input.style__StyledInput",componentId:"sc-36f7ebca-0"})(["",";background:transparent;border:none;color:var(--colorsUtilityYin090);flex-grow:1;font-size:var(--fontSizes100);outline:none;padding:0;margin:0;width:30px;&:-webkit-autofill{background-clip:text;-webkit-background-clip:text;}"," "," &::placeholder{color:var(--colorsUtilityYin055);}",""],(({isInputInSelect:o})=>o&&"text-overflow: ellipsis"),(({inputBorderRadius:o})=>Array.isArray(o)?`border-radius: ${o.map((o=>`var(--${o})`)).join(" ")};`:`border-radius: var(--${o});`),(({align:o})=>o&&r(["text-align:",";"],o)),(({disabled:o})=>o&&r(["color:var(--colorsUtilityYin030);cursor:not-allowed;"])));export{t as default};

package/esm/__internal__/input-behaviour/index.js

@@ -1,2 +1 @@
-export { InputBehaviour, InputContext } from "./input-behaviour.component";
-export { InputGroupBehaviour, InputGroupContext } from "./input-group-behaviour.component";
+export{InputBehaviour,InputContext}from"./input-behaviour.component.js";export{InputGroupBehaviour,InputGroupContext}from"./input-group-behaviour.component.js";

package/esm/__internal__/input-behaviour/input-behaviour.component.js

@@ -1,14 +1 @@
-import React from "react";
-import useInputBehaviour from "./useInputBehaviour";
-const InputContext = /*#__PURE__*/React.createContext({});
-const InputBehaviour = ({
-  children
-}) => {
-  const contextValue = useInputBehaviour();
-  return /*#__PURE__*/React.createElement(InputContext.Provider, {
-    value: {
-      ...contextValue
-    }
-  }, children);
-};
-export { InputContext, InputBehaviour };
+import{jsx as e}from"react/jsx-runtime";import r from"react";import t from"./useInputBehaviour.js";function n(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function o(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},o=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),o.forEach((function(r){n(e,r,t[r])}))}return e}const c=r.createContext({}),i=({children:r})=>{const n=t();return e(c.Provider,{value:o({},n),children:r})};export{i as InputBehaviour,c as InputContext};

package/esm/__internal__/input-behaviour/input-group-behaviour.component.js

@@ -1,13 +1 @@
-import React from "react";
-import useInputBehaviour from "./useInputBehaviour";
-const InputGroupContext = /*#__PURE__*/React.createContext({});
-const InputGroupBehaviour = ({
-  children,
-  blockGroupBehaviour
-}) => {
-  const contextValue = useInputBehaviour(blockGroupBehaviour);
-  return /*#__PURE__*/React.createElement(InputGroupContext.Provider, {
-    value: contextValue
-  }, children);
-};
-export { InputGroupContext, InputGroupBehaviour };
+import{jsx as r}from"react/jsx-runtime";import e from"react";import o from"./useInputBehaviour.js";const t=e.createContext({}),i=({children:e,blockGroupBehaviour:i})=>{const c=o(i);return r(t.Provider,{value:c,children:e})};export{i as InputGroupBehaviour,t as InputGroupContext};

package/esm/__internal__/input-behaviour/useInputBehaviour.js

@@ -1,34 +1 @@
-import { useState, useRef, useCallback, useMemo } from "react";
-const useInputBehaviour = blockGroupBehaviour => {
-  const [hasFocus, setHasFocus] = useState(false);
-  const [hasMouseOver, setHasMouseOver] = useState(false);
-  const inputRef = useRef(null);
-  const onFocus = useCallback(() => setHasFocus(true), []);
-  const onBlur = useCallback(() => setHasFocus(false), []);
-  const assignInput = useCallback(input => {
-    inputRef.current = input.current;
-  }, []);
-
-  // use mouse down rather than click to accommodate click and drag events too
-  const onMouseDown = useCallback(() => {
-    requestAnimationFrame(() => {
-      inputRef?.current?.focus({
-        preventScroll: true
-      });
-    });
-  }, []);
-  const onMouseEnter = useCallback(() => setHasMouseOver(true), []);
-  const onMouseLeave = useCallback(() => setHasMouseOver(false), []);
-  const contextValue = useMemo(() => ({
-    hasFocus,
-    hasMouseOver,
-    onFocus: blockGroupBehaviour ? undefined : onFocus,
-    onBlur: blockGroupBehaviour ? undefined : onBlur,
-    onMouseDown,
-    onMouseEnter: blockGroupBehaviour ? undefined : onMouseEnter,
-    onMouseLeave: blockGroupBehaviour ? undefined : onMouseLeave,
-    inputRef: assignInput
-  }), [hasFocus, hasMouseOver, onFocus, onBlur, onMouseDown, blockGroupBehaviour, onMouseEnter, onMouseLeave, assignInput]);
-  return contextValue;
-};
-export default useInputBehaviour;
+import{useState as o,useRef as e,useCallback as n,useMemo as r}from"react";const u=u=>{const[t,s]=o(!1),[c,l]=o(!1),a=e(null),i=n((()=>s(!0)),[]),v=n((()=>s(!1)),[]),d=n((o=>{a.current=o.current}),[]),f=n((()=>{requestAnimationFrame((()=>{var o;null==a||null===(o=a.current)||void 0===o||o.focus({preventScroll:!0})}))}),[]),m=n((()=>l(!0)),[]),p=n((()=>l(!1)),[]);return r((()=>({hasFocus:t,hasMouseOver:c,onFocus:u?void 0:i,onBlur:u?void 0:v,onMouseDown:f,onMouseEnter:u?void 0:m,onMouseLeave:u?void 0:p,inputRef:d})),[t,c,i,v,f,u,m,p,d])};export{u as default};

package/esm/__internal__/input-icon-toggle/index.js

@@ -1 +1 @@
-export { default } from "./input-icon-toggle.component";
+export{default}from"./input-icon-toggle.component.js";

package/esm/__internal__/input-icon-toggle/input-icon-toggle.component.js

@@ -1,71 +1 @@
-import React from "react";
-import Icon from "../../components/icon";
-import InputIconToggleStyle from "./input-icon-toggle.style";
-import ValidationIcon from "../validations/validation-icon.component";
-const shouldDisplayValidationIcon = ({
-  error,
-  warning,
-  info
-}) => {
-  const validation = error || warning || info || null;
-  return typeof validation === "string";
-};
-const InputIconToggle = ({
-  disabled,
-  readOnly,
-  size,
-  inputIcon: type,
-  onClick,
-  onFocus,
-  onBlur,
-  onMouseDown,
-  error,
-  warning,
-  info,
-  useValidationIcon,
-  align,
-  iconTabIndex,
-  validationIconId
-}) => {
-  if (useValidationIcon && !disabled && shouldDisplayValidationIcon({
-    error,
-    warning,
-    info
-  })) {
-    return /*#__PURE__*/React.createElement(InputIconToggleStyle, {
-      size: size
-    }, /*#__PURE__*/React.createElement(ValidationIcon, {
-      error: error,
-      warning: warning,
-      info: info,
-      size: size,
-      onClick: onClick,
-      onFocus: onFocus,
-      onBlur: onBlur,
-      isPartOfInput: true,
-      tabIndex: iconTabIndex,
-      tooltipId: validationIconId,
-      tooltipPosition: align === "right" ? "left" : "right"
-    }));
-  }
-  if (type) {
-    return /*#__PURE__*/React.createElement(InputIconToggleStyle, {
-      size: size,
-      onClick: onClick,
-      onFocus: onFocus,
-      onBlur: onBlur,
-      onMouseDown: onMouseDown,
-      "data-element": "input-icon-toggle",
-      disabled: disabled,
-      readOnly: readOnly,
-      "data-role": "input-icon-toggle",
-      "aria-hidden": "true",
-      tabIndex: -1
-    }, /*#__PURE__*/React.createElement(Icon, {
-      disabled: disabled || readOnly,
-      type: type
-    }));
-  }
-  return null;
-};
-export default InputIconToggle;
+import{jsx as o}from"react/jsx-runtime";import"react";import n from"../../components/icon/icon.component.js";import i from"./input-icon-toggle.style.js";import{ValidationIcon as t}from"../validations/validation-icon.component.js";const r=({disabled:r,readOnly:e,size:a,inputIcon:l,onClick:s,onFocus:c,onBlur:d,onMouseDown:u,error:p,warning:g,info:m,useValidationIcon:f,align:I,iconTabIndex:b,validationIconId:w})=>f&&!r&&(({error:o,warning:n,info:i})=>"string"==typeof(o||n||i||null))({error:p,warning:g,info:m})?o(i,{size:a,children:o(t,{error:p,warning:g,info:m,size:a,onClick:s,onFocus:c,onBlur:d,isPartOfInput:!0,tabIndex:b,tooltipId:w,tooltipPosition:"right"===I?"left":"right"})}):l?o(i,{size:a,onClick:s,onFocus:c,onBlur:d,onMouseDown:u,"data-element":"input-icon-toggle",disabled:r,readOnly:e,"data-role":"input-icon-toggle","aria-hidden":"true",tabIndex:-1,children:o(n,{disabled:r||e,type:l})}):null;export{r as default};

package/esm/__internal__/input-icon-toggle/input-icon-toggle.style.js

@@ -1,42 +1 @@
-import styled, { css } from "styled-components";
-import sizes from "../input/input-sizes.style";
-import addFocusStyling from "../../style/utils/add-focus-styling";
-const InputIconToggleStyle = styled.span.attrs(({
-  onClick
-}) => ({
-  onKeyDown: event => {
-    if (onClick && (event.key === " " || event.key === "Enter")) {
-      event.preventDefault();
-      return onClick(event);
-    }
-    return event;
-  }
-}))`
-  align-items: center;
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-
-  ${({
-  size = "medium"
-}) => css`
-    width: ${sizes[size].height};
-  `}
-
-  ${({
-  disabled
-}) => disabled && css`
-      cursor: not-allowed;
-    `}
-  
-  ${({
-  readOnly
-}) => readOnly && css`
-      cursor: default;
-    `}
-
-    &:focus {
-    ${addFocusStyling()}
-  }
-`;
-export default InputIconToggleStyle;
+import t,{css as e}from"styled-components";import o from"../input/input-sizes.style.js";import n from"../../style/utils/add-focus-styling.js";const s=t.span.attrs((({onClick:t})=>({onKeyDown:e=>!t||" "!==e.key&&"Enter"!==e.key?e:(e.preventDefault(),t(e))}))).withConfig({displayName:"input-icon-toggle.style__InputIconToggleStyle",componentId:"sc-9d7ce65f-0"})(["align-items:center;cursor:pointer;display:flex;justify-content:center;"," "," "," &:focus{","}"],(({size:t="medium"})=>e(["width:",";"],o[t].height)),(({disabled:t})=>t&&e(["cursor:not-allowed;"])),(({readOnly:t})=>t&&e(["cursor:default;"])),n());export{s as default};

package/esm/__internal__/label/icon-wrapper.style.js

@@ -1,23 +1 @@
-import styled from "styled-components";
-import StyledValidationIcon from "../validations/validation-icon.style";
-import StyledHelp from "../../components/help/help.style";
-const StyledIconWrapper = styled.div`
-  display: inline-block;
-  margin: 0;
-  margin-left: 4px;
-  width: 24px;
-  height: 24px;
-  position: relative;
-  margin-top: -3px;
-  margin-bottom: -4px;
-  vertical-align: top;
-
-  :focus {
-    outline: 2px solid var(--colorsSemanticFocus500);
-  }
-
-  ${StyledValidationIcon}, ${StyledHelp} {
-    position: static;
-  }
-`;
-export default StyledIconWrapper;
+import o from"styled-components";import i from"../validations/validation-icon.style.js";import t from"../../components/help/help.style.js";const p=o.div.withConfig({displayName:"icon-wrapper.style__StyledIconWrapper",componentId:"sc-cadb2c42-0"})(["display:inline-block;margin:0;margin-left:4px;width:24px;height:24px;position:relative;margin-top:-3px;margin-bottom:-4px;vertical-align:top;:focus{outline:2px solid var(--colorsSemanticFocus500);}",",","{position:static;}"],i,t);export{p as default};

package/esm/__internal__/label/index.js

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

package/esm/__internal__/label/label.component.js

@@ -1,138 +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, useContext, useRef } from "react";
-import Help from "../../components/help";
-import StyledLabel, { StyledLabelContainer } from "./label.style";
-import ValidationIcon from "../validations/validation-icon.component";
-import StyledIconWrapper from "./icon-wrapper.style";
-import { InputContext, InputGroupContext } from "../input-behaviour";
-import createGuid from "../../__internal__/utils/helpers/guid";
-import useLocale from "../../hooks/__internal__/useLocale";
-const shouldDisplayValidationIcon = ({
-  error,
-  warning,
-  info,
-  disabled
-}) => {
-  const validation = error || warning || info;
-  return disabled ? false : typeof validation === "string";
-};
-const tooltipPosition = ({
-  error,
-  warning,
-  info,
-  inline
-}) => {
-  return (error || warning || info) && inline ? "top" : "right";
-};
-export const Label = ({
-  align,
-  as = "label",
-  children,
-  disabled,
-  error,
-  help,
-  helpIcon,
-  htmlFor,
-  info,
-  inline,
-  isDarkBackground = false,
-  isRequired,
-  labelId,
-  optional,
-  pr,
-  pl,
-  tooltipId,
-  useValidationIcon = true,
-  validationIconId,
-  warning,
-  width = 30,
-  className,
-  "aria-label": ariaLabel
-}) => {
-  const [isFocused, setFocus] = useState(false);
-  const {
-    onMouseEnter,
-    onMouseLeave
-  } = useContext(InputContext);
-  const {
-    onMouseEnter: onGroupMouseEnter,
-    onMouseLeave: onGroupMouseLeave
-  } = useContext(InputGroupContext);
-  const guid = useRef(createGuid());
-  const locale = useLocale();
-  const optionalLabel = locale.label.optional();
-  const handleMouseEnter = () => {
-    if (onMouseEnter) onMouseEnter();
-    if (onGroupMouseEnter) onGroupMouseEnter();
-  };
-  const handleMouseLeave = () => {
-    if (onMouseLeave) onMouseLeave();
-    if (onGroupMouseLeave) onGroupMouseLeave();
-  };
-  let alignment;
-  if (inline && !align) {
-    alignment = "right";
-  } else if (!align) {
-    alignment = "left";
-  } else {
-    alignment = align;
-  }
-  const icon = () => {
-    const wrapperProps = {
-      onFocus: () => setFocus(true),
-      onBlur: () => setFocus(false)
-    };
-    if (useValidationIcon && shouldDisplayValidationIcon({
-      error,
-      warning,
-      info,
-      disabled
-    })) {
-      const tooltipPositionValue = tooltipPosition({
-        error,
-        warning,
-        info,
-        inline
-      });
-      return /*#__PURE__*/React.createElement(StyledIconWrapper, null, /*#__PURE__*/React.createElement(ValidationIcon, {
-        tooltipId: validationIconId,
-        error: error,
-        warning: warning,
-        info: info,
-        tooltipPosition: tooltipPositionValue,
-        tooltipFlipOverrides: ["top", "bottom"]
-      }));
-    }
-    return help && /*#__PURE__*/React.createElement(StyledIconWrapper, wrapperProps, /*#__PURE__*/React.createElement(Help, {
-      tooltipId: tooltipId,
-      type: helpIcon,
-      isFocused: isFocused
-    }, help));
-  };
-  return /*#__PURE__*/React.createElement(StyledLabelContainer, {
-    "data-role": "label-container",
-    id: `label-container-${labelId ?? guid.current}`,
-    align: alignment,
-    inline: inline,
-    width: width,
-    optional: optional,
-    pr: pr,
-    pl: pl,
-    className: className,
-    optionalLabel: optionalLabel
-  }, /*#__PURE__*/React.createElement(StyledLabel, _extends({
-    "data-element": "label",
-    disabled: disabled,
-    id: labelId
-  }, as === "label" ? {
-    htmlFor
-  } : {}, {
-    onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleMouseLeave,
-    isRequired: isRequired,
-    as: as,
-    "aria-label": ariaLabel,
-    isDarkBackground: isDarkBackground
-  }), children), icon());
-};
-export default /*#__PURE__*/React.memo(Label);
+import{jsxs as e,jsx as r}from"react/jsx-runtime";import o,{useState as n,useContext as t,useRef as i}from"react";import{Help as l}from"../../components/help/help.component.js";import a,{StyledLabelContainer as p}from"./label.style.js";import{ValidationIcon as c}from"../validations/validation-icon.component.js";import s from"./icon-wrapper.style.js";import{InputContext as u}from"../input-behaviour/input-behaviour.component.js";import{InputGroupContext as b}from"../input-behaviour/input-group-behaviour.component.js";import d from"../utils/helpers/guid/index.js";import m from"../../hooks/__internal__/useLocale/useLocale.js";function f(e,r,o){return r in e?Object.defineProperty(e,r,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[r]=o,e}function h(e){for(var r=1;r<arguments.length;r++){var o=null!=arguments[r]?arguments[r]:{},n=Object.keys(o);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(o).filter((function(e){return Object.getOwnPropertyDescriptor(o,e).enumerable})))),n.forEach((function(r){f(e,r,o[r])}))}return e}function g(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 o=Object.getOwnPropertySymbols(e);r.push.apply(r,o)}return r}(Object(r)).forEach((function(o){Object.defineProperty(e,o,Object.getOwnPropertyDescriptor(r,o))})),e}const j=({align:o,as:f="label",children:j,disabled:O,error:y,help:w,helpIcon:v,htmlFor:P,info:I,inline:k,isDarkBackground:D=!1,isRequired:L,labelId:M,optional:E,pr:F,pl:S,tooltipId:_,useValidationIcon:x=!0,validationIconId:B,warning:q,width:N=30,className:R,"aria-label":V})=>{const[$,z]=n(!1),{onMouseEnter:A,onMouseLeave:C}=t(u),{onMouseEnter:G,onMouseLeave:H}=t(b),J=i(d()),K=m().label.optional();let Q;return Q=k&&!o?"right":o||"left",e(p,{"data-role":"label-container",id:`label-container-${null!=M?M:J.current}`,align:Q,inline:k,width:N,optional:E,pr:F,pl:S,className:R,optionalLabel:K,children:[r(a,g(h({"data-element":"label",disabled:O,id:M},"label"===f?{htmlFor:P}:{}),{onMouseEnter:()=>{A&&A(),G&&G()},onMouseLeave:()=>{C&&C(),H&&H()},isRequired:L,as:f,"aria-label":V,isDarkBackground:D,children:j})),(()=>{const e={onFocus:()=>z(!0),onBlur:()=>z(!1)};if(x&&(({error:e,warning:r,info:o,disabled:n})=>!n&&"string"==typeof(e||r||o))({error:y,warning:q,info:I,disabled:O})){const e=(({error:e,warning:r,info:o,inline:n})=>(e||r||o)&&n?"top":"right")({error:y,warning:q,info:I,inline:k});return r(s,{children:r(c,{tooltipId:B,error:y,warning:q,info:I,tooltipPosition:e,tooltipFlipOverrides:["top","bottom"]})})}return w&&r(s,g(h({},e),{children:r(l,{tooltipId:_,type:v,isFocused:$,children:w})}))})()]})};var O=o.memo(j);export{j as Label,O as default};

package/esm/__internal__/label/label.style.js

@@ -1,68 +1 @@
-import styled, { css } from "styled-components";
-const StyledLabel = styled.label`
-  ${({
-  isDarkBackground
-}) => css`
-    color: ${isDarkBackground ? "var(--colorsUtilityYang100)" : "var(--colorsUtilityYin090)"};
-  `}
-  display: block;
-  font-weight: var(--fontWeights500);
-
-  ${({
-  isRequired
-}) => isRequired && css`
-      ::after {
-        content: "*";
-        color: var(--colorsSemanticNegative500);
-        font-weight: var(--fontWeights500);
-        margin-left: var(--spacing050);
-      }
-    `}
-
-  ${({
-  disabled
-}) => disabled && css`
-      color: var(--colorsUtilityYin030);
-    `}
-`;
-export const StyledLabelContainer = styled.div`
-  display: flex;
-  align-items: center;
-  margin-bottom: 8px;
-
-  ${({
-  align
-}) => css`
-    justify-content: ${align !== "right" ? "flex-start" : "flex-end"};
-  `}
-
-  ${({
-  inline,
-  pr,
-  pl,
-  width
-}) => inline && css`
-      box-sizing: border-box;
-      margin-bottom: 0;
-      ${pr && css`
-        padding-right: var(${pr === 1 ? "--spacing100" : "--spacing200"});
-      `};
-      ${pl && css`
-        padding-left: var(${pl === 1 ? "--spacing100" : "--spacing200"});
-      `};
-      width: ${width}%;
-    `}
-
-  ${({
-  optional,
-  optionalLabel
-}) => optional && css`
-      ::after {
-        content: "(${optionalLabel})";
-        font-weight: var(--fontWeights400);
-        margin-left: var(--spacing050);
-        color: var(--colorsUtilityYin055);
-      }
-    `}
-`;
-export default StyledLabel;
+import t,{css as i}from"styled-components";const o=t.label.withConfig({displayName:"label.style__StyledLabel",componentId:"sc-61d9c380-0"})([""," display:block;font-weight:var(--fontWeights500);"," ",""],(({isDarkBackground:t})=>i(["color:",";"],t?"var(--colorsUtilityYang100)":"var(--colorsUtilityYin090)")),(({isRequired:t})=>t&&i(['::after{content:"*";color:var(--colorsSemanticNegative500);font-weight:var(--fontWeights500);margin-left:var(--spacing050);}'])),(({disabled:t})=>t&&i(["color:var(--colorsUtilityYin030);"]))),a=t.div.withConfig({displayName:"label.style__StyledLabelContainer",componentId:"sc-61d9c380-1"})(["display:flex;align-items:center;margin-bottom:8px;"," "," ",""],(({align:t})=>i(["justify-content:",";"],"right"!==t?"flex-start":"flex-end")),(({inline:t,pr:o,pl:a,width:n})=>t&&i(["box-sizing:border-box;margin-bottom:0;",";",";width:","%;"],o&&i(["padding-right:var(",");"],1===o?"--spacing100":"--spacing200"),a&&i(["padding-left:var(",");"],1===a?"--spacing100":"--spacing200"),n)),(({optional:t,optionalLabel:o})=>t&&i(['::after{content:"(',')";font-weight:var(--fontWeights400);margin-left:var(--spacing050);color:var(--colorsUtilityYin055);}'],o)));export{a as StyledLabelContainer,o as default};

package/esm/__internal__/popover/index.js

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