carbon-react 154.4.0 → 154.4.2

package/esm/__internal__/form-field/form-field.component.js

@@ -1,116 +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, { useContext, useEffect, useLayoutEffect, useMemo, useRef } from "react";
-import invariant from "invariant";
-import FormFieldStyle, { FieldLineStyle } from "./form-field.style";
-import Label from "../label";
-import FieldHelp from "../field-help";
-import tagComponent from "../utils/helpers/tags/tags";
-import TabContext from "../../components/tabs/tab/__internal__/tab.context";
-import useIsAboveBreakpoint from "../../hooks/__internal__/useIsAboveBreakpoint";
-import { filterStyledSystemMarginProps } from "../../style/utils";
-const FormField = ({
-  maxWidth,
-  children,
-  "data-component": dataComponent,
-  disabled,
-  loading,
-  fieldHelp: fieldHelpContent,
-  fieldHelpInline,
-  error,
-  warning,
-  info,
-  tooltipId,
-  fieldHelpId,
-  label,
-  labelId,
-  labelAlign,
-  labelHelp,
-  labelHelpIcon,
-  labelInline,
-  labelSpacing = 2,
-  labelWidth,
-  labelAs,
-  id,
-  reverse,
-  isOptional,
-  useValidationIcon,
-  adaptiveLabelBreakpoint,
-  isRequired,
-  validationIconId,
-  validationRedesignOptIn,
-  ...rest
-}) => {
-  const invalidValidationProp = useMemo(() => {
-    const validationProps = {
-      error: !!error,
-      warning: !!warning,
-      info: !!info
-    };
-    if (!(disabled && !loading)) return undefined;
-    return Object.keys(validationProps).find(propName => validationProps[propName]);
-  }, [error, warning, info, disabled]);
-  !(invalidValidationProp === undefined) ? process.env.NODE_ENV !== "production" ? invariant(false, `Prop \`${invalidValidationProp}\` cannot be used in conjunction with \`disabled\`. ` + "Use `readOnly` if you require users to see validations with a non-interactive field") : invariant(false) : void 0;
-  !!(isRequired && isOptional) ? process.env.NODE_ENV !== "production" ? invariant(false, "an input cannot be set to both required and optional at the same time") : invariant(false) : void 0;
-  const largeScreen = useIsAboveBreakpoint(adaptiveLabelBreakpoint);
-  let inlineLabel = labelInline;
-  if (adaptiveLabelBreakpoint) {
-    inlineLabel = largeScreen;
-  }
-  const {
-    setError,
-    setWarning,
-    setInfo
-  } = useContext(TabContext);
-  const marginProps = filterStyledSystemMarginProps(rest);
-  const isMounted = useRef(false);
-  useLayoutEffect(() => {
-    isMounted.current = true;
-    return () => {
-      isMounted.current = false;
-    };
-  }, []);
-  useEffect(() => {
-    if (setError) setError(id, error);
-    if (setWarning) setWarning(id, warning);
-    if (setInfo) setInfo(id, info);
-    return () => {
-      if (!isMounted.current) {
-        if (setError && error) setError(id, false);
-        if (setWarning && warning) setWarning(id, false);
-        if (setInfo && info) setInfo(id, false);
-      }
-    };
-  }, [id, setError, setWarning, setInfo, error, warning, info]);
-  const fieldHelp = fieldHelpContent ? /*#__PURE__*/React.createElement(FieldHelp, {
-    labelInline: inlineLabel,
-    labelWidth: labelWidth,
-    id: fieldHelpId
-  }, fieldHelpContent) : null;
-  return /*#__PURE__*/React.createElement(FormFieldStyle, _extends({}, tagComponent(dataComponent, rest), marginProps), /*#__PURE__*/React.createElement(FieldLineStyle, {
-    "data-role": "field-line",
-    inline: inlineLabel,
-    maxWidth: maxWidth
-  }, reverse && children, label && /*#__PURE__*/React.createElement(Label, {
-    labelId: labelId,
-    align: labelAlign,
-    disabled: disabled,
-    error: !validationRedesignOptIn && error,
-    warning: !validationRedesignOptIn && warning,
-    info: !validationRedesignOptIn && info,
-    help: labelHelp,
-    tooltipId: tooltipId,
-    htmlFor: id,
-    helpIcon: labelHelpIcon,
-    inline: inlineLabel,
-    width: labelWidth,
-    optional: isOptional,
-    useValidationIcon: useValidationIcon,
-    pr: !reverse ? labelSpacing : undefined,
-    pl: reverse ? labelSpacing : undefined,
-    isRequired: isRequired,
-    validationIconId: validationIconId,
-    as: labelAs
-  }, label), fieldHelpInline && fieldHelp, !reverse && children), !fieldHelpInline && fieldHelp);
-};
-FormField.displayName = "FormField";
-export default FormField;
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useMemo as n,useContext as r,useRef as i,useLayoutEffect as l,useEffect as o}from"react";import a from"invariant";import s,{FieldLineStyle as d}from"./form-field.style.js";import p from"../label/label.component.js";import{FieldHelp as c}from"../field-help/field-help.component.js";import b from"../utils/helpers/tags/tags.js";import f from"../../components/tabs/tab/__internal__/tab.context.js";import u from"../../hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js";import"../../style/utils/filter-styled-system-padding-props.js";import m from"../../style/utils/filter-styled-system-margin-props.js";function y(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}const O=O=>{var{maxWidth:g,children:I,"data-component":h,disabled:j,loading:v,fieldHelp:w,fieldHelpInline:P,error:H,warning:k,info:x,tooltipId:S,fieldHelpId:_,label:W,labelId:A,labelAlign:q,labelHelp:R,labelHelpIcon:B,labelInline:D,labelSpacing:E=2,labelWidth:F,labelAs:V,id:L,reverse:N,isOptional:U,useValidationIcon:$,adaptiveLabelBreakpoint:z,isRequired:C,validationIconId:G,validationRedesignOptIn:J}=O,K=function(e,t){if(null==e)return{};var n,r,i=function(e,t){if(null==e)return{};var n,r,i={},l=Object.keys(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}(O,["maxWidth","children","data-component","disabled","loading","fieldHelp","fieldHelpInline","error","warning","info","tooltipId","fieldHelpId","label","labelId","labelAlign","labelHelp","labelHelpIcon","labelInline","labelSpacing","labelWidth","labelAs","id","reverse","isOptional","useValidationIcon","adaptiveLabelBreakpoint","isRequired","validationIconId","validationRedesignOptIn"]);const M=n((()=>{const e={error:!!H,warning:!!k,info:!!x};if(j&&!v)return Object.keys(e).find((t=>e[t]))}),[H,k,x,j]);a(void 0===M,`Prop \`${M}\` cannot be used in conjunction with \`disabled\`. Use \`readOnly\` if you require users to see validations with a non-interactive field`),a(!(C&&U),"an input cannot be set to both required and optional at the same time");const Q=u(z);let T=D;z&&(T=Q);const{setError:X,setWarning:Y,setInfo:Z}=r(f),ee=m(K),te=i(!1);l((()=>(te.current=!0,()=>{te.current=!1})),[]),o((()=>(X&&X(L,H),Y&&Y(L,k),Z&&Z(L,x),()=>{te.current||(X&&H&&X(L,!1),Y&&k&&Y(L,!1),Z&&x&&Z(L,!1))})),[L,X,Y,Z,H,k,x]);const ne=w?t(c,{labelInline:T,labelWidth:F,id:_,children:w}):null;return e(s,(re=function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),r.forEach((function(t){y(e,t,n[t])}))}return e}({},b(h,K),ee),ie=null!=(ie={children:[e(d,{"data-role":"field-line",inline:T,maxWidth:g,children:[N&&I,W&&t(p,{labelId:A,align:q,disabled:j,error:!J&&H,warning:!J&&k,info:!J&&x,help:R,tooltipId:S,htmlFor:L,helpIcon:B,inline:T,width:F,optional:U,useValidationIcon:$,pr:N?void 0:E,pl:N?E:void 0,isRequired:C,validationIconId:G,as:V,children:W}),P&&ne,!N&&I]}),!P&&ne]})?ie:{},Object.getOwnPropertyDescriptors?Object.defineProperties(re,Object.getOwnPropertyDescriptors(ie)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(ie)).forEach((function(e){Object.defineProperty(re,e,Object.getOwnPropertyDescriptor(ie,e))})),re));var re,ie};O.displayName="FormField";export{O as default};

package/esm/__internal__/form-field/form-field.style.js

@@ -1,27 +1 @@
-import styled, { css } from "styled-components";
-import { space } from "styled-system";
-import { baseTheme } from "../../style/themes";
-const FormFieldStyle = styled.div`
-  margin-bottom: var(--fieldSpacing);
-  & + & {
-    margin-top: 16px;
-  }
-
-  &&& {
-    ${space}
-  }
-`;
-FormFieldStyle.defaultProps = {
-  theme: baseTheme
-};
-const FieldLineStyle = styled.div`
-  ${({
-  inline,
-  maxWidth
-}) => css`
-    display: ${inline ? "flex" : "block"};
-    ${maxWidth && `max-width: ${maxWidth};`}
-  `}
-`;
-export { FieldLineStyle };
-export default FormFieldStyle;
+import e,{css as t}from"styled-components";import{space as i}from"styled-system";import"../../style/themes/sage/index.js";import o from"../../style/themes/base/index.js";import"../../style/themes/none/index.js";const s=e.div.withConfig({displayName:"form-field.style__FormFieldStyle",componentId:"sc-a521e28-0"})(["margin-bottom:var(--fieldSpacing);& + &{margin-top:16px;}&&&{","}"],i);s.defaultProps={theme:o};const m=e.div.withConfig({displayName:"form-field.style__FieldLineStyle",componentId:"sc-a521e28-1"})(["",""],(({inline:e,maxWidth:i})=>t(["display:",";",""],e?"flex":"block",i&&`max-width: ${i};`)));export{m as FieldLineStyle,s as default};

package/esm/__internal__/form-field/index.js

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

package/esm/__internal__/full-screen-heading/full-screen-heading.component.js

@@ -1,17 +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 from "react";
-import tagComponent from "../utils/helpers/tags/tags";
-import StyledFullScreenHeading, { StyledHeaderContainer } from "./full-screen-heading.style";
-const FullScreenHeading = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
-    children,
-    hasContent
-  } = props;
-  return /*#__PURE__*/React.createElement(StyledFullScreenHeading, _extends({
-    hasContent: hasContent
-  }, tagComponent("full-screen-heading", props), {
-    ref: ref
-  }), /*#__PURE__*/React.createElement(StyledHeaderContainer, null, children));
-});
-FullScreenHeading.displayName = "FullScreenHeading";
-export default FullScreenHeading;
+import{jsx as e}from"react/jsx-runtime";import r from"react";import t from"../utils/helpers/tags/tags.js";import n,{StyledHeaderContainer as o}from"./full-screen-heading.style.js";function c(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}const i=r.forwardRef(((r,i)=>{const{children:l,hasContent:s}=r;return e(n,(a=function(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),n.forEach((function(r){c(e,r,t[r])}))}return e}({hasContent:s},t("full-screen-heading",r)),f=null!=(f={ref:i,children:e(o,{children:l})})?f:{},Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(f)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(f)).forEach((function(e){Object.defineProperty(a,e,Object.getOwnPropertyDescriptor(f,e))})),a));var a,f}));i.displayName="FullScreenHeading";export{i as default};

package/esm/__internal__/full-screen-heading/full-screen-heading.style.js

@@ -1,41 +1 @@
-import styled, { css } from "styled-components";
-import { StyledHeader, StyledHeading } from "../../components/heading/heading.style";
-export const StyledHeaderContainer = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  min-width: 100%;
-`;
-const StyledFullScreenHeading = styled.div`
-  ${({
-  hasContent
-}) => hasContent && css`
-      border-bottom: 1px solid var(--colorsUtilityMajor050);
-    `}
-  background-color: var(--colorsUtilityYang100);
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-
-  padding: 0 16px;
-  @media screen and (min-width: 600px) {
-    padding: 0 24px;
-  }
-  @media screen and (min-width: 960px) {
-    padding: 0 32px;
-  }
-  @media screen and (min-width: 1260px) {
-    padding: 0 40px;
-  }
-
-  ${StyledHeading} {
-    width: auto;
-    margin-bottom: 24px;
-
-    ${StyledHeader} {
-      background-color: transparent;
-      padding-bottom: 0;
-      margin: 22px 24px 0 0;
-    }
-  }
-`;
-export default StyledFullScreenHeading;
+import e,{css as n}from"styled-components";import{StyledHeading as d,StyledHeader as i}from"../../components/heading/heading.style.js";const t=e.div.withConfig({displayName:"full-screen-heading.style__StyledHeaderContainer",componentId:"sc-bd281d9c-0"})(["display:flex;flex-wrap:wrap;min-width:100%;"]),a=e.div.withConfig({displayName:"full-screen-heading.style__StyledFullScreenHeading",componentId:"sc-bd281d9c-1"})([""," background-color:var(--colorsUtilityYang100);display:flex;justify-content:space-between;align-items:flex-start;padding:0 16px;@media screen and (min-width:600px){padding:0 24px;}@media screen and (min-width:960px){padding:0 32px;}@media screen and (min-width:1260px){padding:0 40px;}","{width:auto;margin-bottom:24px;","{background-color:transparent;padding-bottom:0;margin:22px 24px 0 0;}}"],(({hasContent:e})=>e&&n(["border-bottom:1px solid var(--colorsUtilityMajor050);"])),d,i);export{t as StyledHeaderContainer,a as default};

package/esm/__internal__/full-screen-heading/index.js

@@ -1 +1 @@
-export { default } from "./full-screen-heading.component";
+export{default}from"./full-screen-heading.component.js";

package/esm/__internal__/hint-text/hint-text.component.js

@@ -1,33 +1 @@
-import React, { useContext } from "react";
-import StyledHintText from "./hint-text.style";
-import NewValidationContext from "../../components/carbon-provider/__internal__/new-validation.context";
-export const HintText = ({
-  align,
-  children,
-  fontWeight,
-  id,
-  isComponentInline = false,
-  isDarkBackground = false,
-  isDisabled = false,
-  marginBottom = "var(--spacing100)",
-  marginTop = "var(--spacing000)",
-  maxWidth
-}) => {
-  const {
-    validationRedesignOptIn
-  } = useContext(NewValidationContext);
-  if (isComponentInline && !validationRedesignOptIn) return null;
-  return /*#__PURE__*/React.createElement(StyledHintText, {
-    align: align,
-    "data-element": "input-hint",
-    "data-role": "hint-text",
-    fontWeight: fontWeight,
-    id: id,
-    isDarkBackground: isDarkBackground,
-    isDisabled: isDisabled,
-    marginBottom: marginBottom,
-    marginTop: marginTop,
-    maxWidth: maxWidth
-  }, children);
-};
-export default HintText;
+import{jsx as t}from"react/jsx-runtime";import{useContext as i}from"react";import n from"./hint-text.style.js";import a from"../../components/carbon-provider/__internal__/new-validation.context.js";const o=({align:o,children:r,fontWeight:e,id:m,isComponentInline:s=!1,isDarkBackground:d=!1,isDisabled:l=!1,marginBottom:p="var(--spacing100)",marginTop:c="var(--spacing000)",maxWidth:g})=>{const{validationRedesignOptIn:h}=i(a);return s&&!h?null:t(n,{align:o,"data-element":"input-hint","data-role":"hint-text",fontWeight:e,id:m,isDarkBackground:d,isDisabled:l,marginBottom:p,marginTop:c,maxWidth:g,children:r})};export{o as HintText,o as default};

package/esm/__internal__/hint-text/hint-text.style.js

@@ -1,50 +1 @@
-import styled, { css } from "styled-components";
-const getColor = (isDarkBackground, isDisabled) => {
-  if (isDarkBackground) {
-    return "var(--colorsUtilityYang080)";
-  }
-  if (isDisabled) {
-    return "var(--colorsUtilityYin030)";
-  }
-  return "var(--colorsUtilityYin055)";
-};
-const StyledHintText = styled.div`
-  display: flex;
-  align-items: center;
-  font-size: 14px;
-
-  ${({
-  align
-}) => css`
-    justify-content: ${align !== "right" ? "flex-start" : "flex-end"};
-  `}
-  margin-bottom: ${({
-  marginBottom
-}) => marginBottom};
-  margin-top: ${({
-  marginTop
-}) => marginTop};
-
-  ${({
-  isDarkBackground,
-  isDisabled
-}) => css`
-    color: ${getColor(isDarkBackground, isDisabled)};
-  `}
-
-  ${({
-  fontWeight
-}) => fontWeight && css`
-      font-weight: ${fontWeight};
-    `}
-  ${({
-  maxWidth
-}) => maxWidth && css`
-      max-width: ${maxWidth};
-    `}
-
-  ::after {
-    content: " ";
-  }
-`;
-export default StyledHintText;
+import t,{css as i}from"styled-components";const o=t.div.withConfig({displayName:"hint-text.style__StyledHintText",componentId:"sc-20c17826-0"})(["display:flex;align-items:center;font-size:14px;"," margin-bottom:",";margin-top:",";"," "," ",' ::after{content:" ";}'],(({align:t})=>i(["justify-content:",";"],"right"!==t?"flex-start":"flex-end")),(({marginBottom:t})=>t),(({marginTop:t})=>t),(({isDarkBackground:t,isDisabled:o})=>i(["color:",";"],((t,i)=>t?"var(--colorsUtilityYang080)":i?"var(--colorsUtilityYin030)":"var(--colorsUtilityYin055)")(t,o))),(({fontWeight:t})=>t&&i(["font-weight:",";"],t)),(({maxWidth:t})=>t&&i(["max-width:",";"],t)));export{o as default};

package/esm/__internal__/hint-text/index.js

@@ -1 +1 @@
-export { default } from "./hint-text.component";
+export{HintText as default}from"./hint-text.component.js";

package/esm/__internal__/i18n-context/index.js

@@ -1,3 +1 @@
-import { createContext } from "react";
-import enGB from "../../locales/en-gb";
-export default /*#__PURE__*/createContext(enGB);
+import{createContext as r}from"react";import o from"../../locales/en-gb.js";var a=r(o);export{a as default};

package/esm/__internal__/input/index.js

@@ -1,4 +1 @@
-import Input from "./input.component";
-import InputPresentation from "./input-presentation.component";
-export { Input, InputPresentation };
-export default Input;
+import t from"./input.component.js";export{default as InputPresentation}from"./input-presentation.component.js";export{t as Input,t as default};

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

@@ -1,67 +1 @@
-import React, { useContext } from "react";
-import InputPresentationStyle, { StyledInputPresentationContainer } from "./input-presentation.style";
-import { InputContext, InputGroupContext } from "../input-behaviour";
-import NewValidationContext from "../../components/carbon-provider/__internal__/new-validation.context";
-const InputPresentation = ({
-  align,
-  borderRadius = "borderRadius050",
-  children,
-  disabled,
-  error,
-  hasIcon,
-  hideBorders = false,
-  info,
-  inputWidth,
-  maxWidth,
-  positionedChildren,
-  prefix,
-  readOnly,
-  size = "medium",
-  warning
-}) => {
-  const {
-    hasFocus,
-    onMouseDown,
-    onMouseEnter,
-    onMouseLeave
-  } = useContext(InputContext);
-  const {
-    validationRedesignOptIn
-  } = useContext(NewValidationContext);
-  const {
-    onMouseEnter: onGroupMouseEnter,
-    onMouseLeave: onGroupMouseLeave
-  } = useContext(InputGroupContext);
-  const handleMouseEnter = () => {
-    if (onMouseEnter) onMouseEnter();
-    if (onGroupMouseEnter) onGroupMouseEnter();
-  };
-  const handleMouseLeave = () => {
-    if (onMouseLeave) onMouseLeave();
-    if (onGroupMouseLeave) onGroupMouseLeave();
-  };
-  return /*#__PURE__*/React.createElement(StyledInputPresentationContainer, {
-    inputWidth: inputWidth,
-    maxWidth: maxWidth,
-    "data-role": "input-presentation-container"
-  }, positionedChildren, /*#__PURE__*/React.createElement(InputPresentationStyle, {
-    hasFocus: hasFocus,
-    role: "presentation",
-    onMouseDown: onMouseDown,
-    onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleMouseLeave,
-    align: align,
-    prefix: prefix,
-    disabled: disabled,
-    readOnly: readOnly,
-    size: size,
-    warning: warning,
-    error: error,
-    info: info,
-    validationRedesignOptIn: validationRedesignOptIn,
-    hasIcon: hasIcon,
-    borderRadius: borderRadius,
-    hideBorders: hideBorders
-  }, children));
-};
-export default InputPresentation;
+import{jsxs as e,jsx as o}from"react/jsx-runtime";import{useContext as n}from"react";import r,{StyledInputPresentationContainer as i}from"./input-presentation.style.js";import{InputContext as t}from"../input-behaviour/input-behaviour.component.js";import{InputGroupContext as a}from"../input-behaviour/input-group-behaviour.component.js";import s from"../../components/carbon-provider/__internal__/new-validation.context.js";const d=({align:d,borderRadius:u="borderRadius050",children:p,disabled:m,error:h,hasIcon:l,hideBorders:c=!1,info:f,inputWidth:v,maxWidth:b,positionedChildren:M,prefix:g,readOnly:x,size:j="medium",warning:w})=>{const{hasFocus:R,onMouseDown:I,onMouseEnter:O,onMouseLeave:W}=n(t),{validationRedesignOptIn:_}=n(s),{onMouseEnter:y,onMouseLeave:E}=n(a);return e(i,{inputWidth:v,maxWidth:b,"data-role":"input-presentation-container",children:[M,o(r,{hasFocus:R,role:"presentation",onMouseDown:I,onMouseEnter:()=>{O&&O(),y&&y()},onMouseLeave:()=>{W&&W(),E&&E()},align:d,prefix:g,disabled:m,readOnly:x,size:j,warning:w,error:h,info:f,validationRedesignOptIn:_,hasIcon:l,borderRadius:u,hideBorders:c,children:p})]})};export{d as default};

package/esm/__internal__/input/input-presentation.style.d.ts

@@ -2,5 +2,5 @@ import { CommonInputPresentationProps } from "./input-presentation.component";
 import { InputContextProps } from "../input-behaviour";
 import { CarbonProviderProps } from "../../components/carbon-provider";
 export declare const StyledInputPresentationContainer: import("styled-components").StyledComponent<"div", any, Pick<CommonInputPresentationProps, "maxWidth" | "inputWidth">, never>;
-declare const InputPresentationStyle: import("styled-components").StyledComponent<"div", any, Pick<InputContextProps, "hasFocus"> & Pick<CommonInputPresentationProps, "disabled" | "error" | "info" | "warning" | "prefix" | "align" | "size" | "readOnly" | "borderRadius" | "hasIcon" | "hideBorders"> & Pick<CarbonProviderProps, "validationRedesignOptIn">, never>;
+declare const InputPresentationStyle: import("styled-components").StyledComponent<"div", any, Pick<InputContextProps, "hasFocus"> & Pick<CommonInputPresentationProps, "disabled" | "error" | "info" | "warning" | "size" | "prefix" | "hasIcon" | "readOnly" | "align" | "borderRadius" | "hideBorders"> & Pick<CarbonProviderProps, "validationRedesignOptIn">, never>;
 export default InputPresentationStyle;

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

@@ -1,118 +1 @@
-import styled, { css } from "styled-components";
-import sizes from "./input-sizes.style";
-import StyledInput from "./input.style";
-import addFocusStyling from "../../style/utils/add-focus-styling";
-export const StyledInputPresentationContainer = styled.div`
-  flex: 0 0 ${({
-  inputWidth
-}) => inputWidth}%;
-  display: flex;
-  position: relative;
-  max-width: ${({
-  maxWidth
-}) => maxWidth ? `${maxWidth}` : "100%"};
-`;
-function stylingForValidations({
-  error,
-  warning,
-  info,
-  disabled,
-  validationRedesignOptIn
-}) {
-  let validationColor;
-  if (disabled) {
-    return "";
-  }
-  if (error) {
-    validationColor = "var(--colorsSemanticNegative500)";
-  } else if (warning) {
-    validationColor = validationRedesignOptIn ? "var(--colorsUtilityMajor300)" : "var(--colorsSemanticCaution500)";
-  } else if (info) {
-    validationColor = "var(--colorsSemanticInfo500)";
-  } else {
-    return "";
-  }
-  return css`
-    border-color: ${validationColor} !important;
-    z-index: 1;
-    ${error && `box-shadow: inset 1px 1px 0 ${validationColor}, inset -1px -1px 0 ${validationColor};`}
-  `;
-}
-const InputPresentationStyle = styled.div`
-  align-items: stretch;
-  background: var(--colorsUtilityYang100);
-  ${({
-  hideBorders
-}) => hideBorders ? `border: 1px solid transparent;` : `border: 1px solid var(--colorsUtilityMajor300);`}
-  box-sizing: border-box;
-  cursor: text;
-  display: flex;
-  flex-wrap: wrap;
-  width: 100%;
-  margin: 0;
-
-  ${({
-  borderRadius
-}) => {
-  if (Array.isArray(borderRadius)) {
-    return `border-radius: ${borderRadius.map(value => `var(--${value})`).join(" ")};`;
-  }
-  return `border-radius: var(--${borderRadius});`;
-}}
-
-  ${({
-  size,
-  hasIcon,
-  align
-}) => size && css`
-      min-height: ${sizes[size].height};
-
-      ${StyledInput} {
-        padding: 0 ${sizes[size].horizontalPadding};
-        ${hasIcon && align === "right" && "padding-left: 0;"}
-        ${hasIcon && align === "left" && "padding-right: 0;"}
-      }
-    `}
-
-  ${({
-  disabled,
-  hideBorders
-}) => disabled && css`
-      background: var(--colorsUtilityDisabled400);
-      border-color: ${hideBorders ? `transparent` : `var(--colorsUtilityDisabled600)`};
-      cursor: not-allowed;
-    `}
-
-    ${({
-  hasFocus
-}) => hasFocus && css`
-      & {
-        ${addFocusStyling()}
-        z-index: 2;
-      }
-    `}
-
-  ${stylingForValidations}
-
-  ${({
-  readOnly,
-  hideBorders
-}) => readOnly && css`
-      background-color: var(--colorsUtilityReadOnly400);
-      border-color: ${hideBorders ? `transparent` : `var(--colorsUtilityReadOnly600)`};
-    `}
-
-  ${({
-  align,
-  prefix
-}) => align === "right" && `flex-direction: ${prefix ? "row" : "row-reverse"};
-  `}
-
-  input::-ms-clear {
-    display: none;
-  }
-  input::-webkit-contacts-auto-fill-button {
-    display: none !important;
-  }
-`;
-export default InputPresentationStyle;
+import r,{css as i}from"styled-components";import t from"./input-sizes.style.js";import o from"./input.style.js";import e from"../../style/utils/add-focus-styling.js";const n=r.div.withConfig({displayName:"input-presentation.style__StyledInputPresentationContainer",componentId:"sc-5369fb17-0"})(["flex:0 0 ","%;display:flex;position:relative;max-width:",";"],(({inputWidth:r})=>r),(({maxWidth:r})=>r?`${r}`:"100%")),a=r.div.withConfig({displayName:"input-presentation.style__InputPresentationStyle",componentId:"sc-5369fb17-1"})(["align-items:stretch;background:var(--colorsUtilityYang100);"," box-sizing:border-box;cursor:text;display:flex;flex-wrap:wrap;width:100%;margin:0;"," "," "," "," "," "," "," input::-ms-clear{display:none;}input::-webkit-contacts-auto-fill-button{display:none !important;}"],(({hideBorders:r})=>r?"border: 1px solid transparent;":"border: 1px solid var(--colorsUtilityMajor300);"),(({borderRadius:r})=>Array.isArray(r)?`border-radius: ${r.map((r=>`var(--${r})`)).join(" ")};`:`border-radius: var(--${r});`),(({size:r,hasIcon:e,align:n})=>r&&i(["min-height:",";","{padding:0 ",";"," ","}"],t[r].height,o,t[r].horizontalPadding,e&&"right"===n&&"padding-left: 0;",e&&"left"===n&&"padding-right: 0;")),(({disabled:r,hideBorders:t})=>r&&i(["background:var(--colorsUtilityDisabled400);border-color:",";cursor:not-allowed;"],t?"transparent":"var(--colorsUtilityDisabled600)")),(({hasFocus:r})=>r&&i(["&{"," z-index:2;}"],e())),(function({error:r,warning:t,info:o,disabled:e,validationRedesignOptIn:n}){let a;if(e)return"";if(r)a="var(--colorsSemanticNegative500)";else if(t)a=n?"var(--colorsUtilityMajor300)":"var(--colorsSemanticCaution500)";else{if(!o)return"";a="var(--colorsSemanticInfo500)"}return i(["border-color:"," !important;z-index:1;",""],a,r&&`box-shadow: inset 1px 1px 0 ${a}, inset -1px -1px 0 ${a};`)}),(({readOnly:r,hideBorders:t})=>r&&i(["background-color:var(--colorsUtilityReadOnly400);border-color:",";"],t?"transparent":"var(--colorsUtilityReadOnly600)")),(({align:r,prefix:i})=>"right"===r&&`flex-direction: ${i?"row":"row-reverse"};\n  `));export{n as StyledInputPresentationContainer,a as default};

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

@@ -1,15 +1 @@
-const InputSizes = {
-  small: {
-    height: "var(--sizing400)",
-    horizontalPadding: "var(--spacing100)"
-  },
-  medium: {
-    height: "var(--sizing500)",
-    horizontalPadding: "var(--spacing150)"
-  },
-  large: {
-    height: "var(--sizing600)",
-    horizontalPadding: "var(--spacing200)"
-  }
-};
-export default InputSizes;
+const a={small:{height:"var(--sizing400)",horizontalPadding:"var(--spacing100)"},medium:{height:"var(--sizing500)",horizontalPadding:"var(--spacing150)"},large:{height:"var(--sizing600)",horizontalPadding:"var(--spacing200)"}};export{a as default};