carbon-react 158.50.0 → 159.0.0

package/esm/__internal__/checkable-input/__next__/checkable-input.component.js

@@ -1 +1 @@
-import{jsxs as e,Fragment as r,jsx as t}from"react/jsx-runtime";import n,{useRef as i,useContext as o,useLayoutEffect as c,useEffect as l}from"react";import{StyledCheckableInput as s,StyledCheckableInputWrapper as a,StyledAccordion as d,StyledLineContainer as u,StyledAccordionLine as m,StyledAccordionContent as p}from"./checkable-input.style.js";import f from"../hidden-checkable-input.component.js";import b from"../../utils/helpers/guid/index.js";import h from"../../label/label.component.js";import{HintText as g}from"../../hint-text/hint-text.component.js";import y from"../../../hooks/useMediaQuery/useMediaQuery.js";import{TabsContext as j}from"../../../components/tabs/__next__/tabs.context.js";import{TabContext as O}from"../../../components/tabs/__next__/tab.context.js";function v(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function x(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){v(e,r,t[r])}))}return e}const w=n.forwardRef(((n,v)=>{var{children:w,disabled:k,id:_,name:$,type:P,value:z,label:D,inputHint:S,checked:H,progressiveDisclosure:E,size:I="medium",error:B,warning:L}=n,M=function(e,r){if(null==e)return{};var t,n,i=function(e,r){if(null==e)return{};var t,n,i={},o=Object.keys(e);for(n=0;n<o.length;n++)t=o[n],r.indexOf(t)>=0||(i[t]=e[t]);return i}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)t=o[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}(n,["children","disabled","id","name","type","value","label","inputHint","checked","progressiveDisclosure","size","error","warning"]);const{current:Q}=i(_||b()),A=S?`${Q}-hint`:void 0,C=i(null),F=y("screen and (prefers-reduced-motion: no-preference)"),{scrollHeight:N}=C.current||{},R=H&&N?String(N):"0",{setErrors:W,setWarnings:q}=o(j),{tabId:G}=o(O),J=i(!1);return c((()=>(J.current=!0,()=>{J.current=!1})),[]),l((()=>(W&&W(Q,G||"",!!B),q&&q(Q,G||"",!!L),()=>{J.current||(W&&W(Q,G||"",!1),q&&q(Q,G||"",!1))})),[Q,W,q,B,L,G]),e(r,{children:[e(s,{$size:I,children:[e(a,{children:[t(f,x({id:Q,type:P,name:$,value:z,disabled:k,checked:H,ref:v,ariaDescribedBy:A},M)),w]}),D&&t(h,{htmlFor:Q,disabled:k,isLarge:"large"===I,children:D}),S&&t(g,{id:A,marginBottom:"0",isDisabled:k,isLarge:"large"===I,children:S})]}),E&&e(d,{"data-role":"progressive-disclosure-accordion",ref:C,$expanded:H,$contentHeight:R,$allowAnimation:F,children:[t(u,{$size:I,children:t(m,{$size:I})}),t(p,{children:E})]})]})}));w.displayName="CheckableInput";export{w as default};
+import{jsxs as e,Fragment as r,jsx as t}from"react/jsx-runtime";import n,{useRef as i,useContext as o,useLayoutEffect as c,useEffect as l}from"react";import{StyledCheckableInput as a,StyledCheckableInputWrapper as s,StyledAccordion as d,StyledLineContainer as u,StyledAccordionLine as m,StyledAccordionContent as p}from"./checkable-input.style.js";import f from"../hidden-checkable-input.component.js";import b from"../../utils/helpers/guid/index.js";import h from"../../legacy-label/label.component.js";import{HintText as g}from"../../legacy-hint-text/hint-text.component.js";import y from"../../../hooks/useMediaQuery/useMediaQuery.js";import{TabsContext as j}from"../../../components/tabs/__next__/tabs.context.js";import{TabContext as O}from"../../../components/tabs/__next__/tab.context.js";function v(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function x(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){v(e,r,t[r])}))}return e}const w=n.forwardRef(((n,v)=>{var{children:w,disabled:k,id:_,name:$,type:P,value:z,label:D,inputHint:S,checked:H,progressiveDisclosure:E,size:I="medium",error:B,warning:L}=n,M=function(e,r){if(null==e)return{};var t,n,i=function(e,r){if(null==e)return{};var t,n,i={},o=Object.keys(e);for(n=0;n<o.length;n++)t=o[n],r.indexOf(t)>=0||(i[t]=e[t]);return i}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)t=o[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}(n,["children","disabled","id","name","type","value","label","inputHint","checked","progressiveDisclosure","size","error","warning"]);const{current:Q}=i(_||b()),A=S?`${Q}-hint`:void 0,C=i(null),F=y("screen and (prefers-reduced-motion: no-preference)"),{scrollHeight:N}=C.current||{},R=H&&N?String(N):"0",{setErrors:W,setWarnings:q}=o(j),{tabId:G}=o(O),J=i(!1);return c((()=>(J.current=!0,()=>{J.current=!1})),[]),l((()=>(W&&W(Q,G||"",!!B),q&&q(Q,G||"",!!L),()=>{J.current||(W&&W(Q,G||"",!1),q&&q(Q,G||"",!1))})),[Q,W,q,B,L,G]),e(r,{children:[e(a,{$size:I,children:[e(s,{children:[t(f,x({id:Q,type:P,name:$,value:z,disabled:k,checked:H,ref:v,ariaDescribedBy:A},M)),w]}),D&&t(h,{htmlFor:Q,disabled:k,isLarge:"large"===I,children:D}),S&&t(g,{id:A,marginBottom:"0",isDisabled:k,isLarge:"large"===I,children:S})]}),E&&e(d,{"data-role":"progressive-disclosure-accordion",ref:C,$expanded:H,$contentHeight:R,$allowAnimation:F,children:[t(u,{$size:I,children:t(m,{$size:I})}),t(p,{children:E})]})]})}));w.displayName="CheckableInput";export{w as default};

package/esm/__internal__/checkable-input/__next__/checkable-input.style.js

@@ -1 +1 @@
-import i,{css as e}from"styled-components";import t,{StyledLabelContainer as a}from"../../label/label.style.js";import l from"../../hint-text/hint-text.style.js";const o={small:"var(--global-font-static-comp-regular-s)",medium:"var(--global-font-static-comp-regular-m)",large:"var(--global-font-static-comp-regular-l)"},n=i.div.withConfig({displayName:"checkable-input.style__StyledCheckableInput",componentId:"sc-8b8f7038-0"})(["display:grid;grid-template-columns:auto 1fr;grid-column-gap:var(--global-space-comp-s);","{padding:0;margin:0;}","{","}","{grid-area:2 / 2;}"],a,t,(({$size:i})=>i&&e(["font:",";"],o[i])),l),s=i.div.withConfig({displayName:"checkable-input.style__StyledCheckableInputWrapper",componentId:"sc-8b8f7038-1"})(["display:flex;align-items:center;min-height:var(--global-size-xs);"]),p=i.div.withConfig({displayName:"checkable-input.style__StyledAccordion",componentId:"sc-8b8f7038-2"})(["overflow-y:hidden;visibility:hidden;max-height:0;position:relative;display:grid;grid-template-columns:auto 1fr;grid-column-gap:var(--global-space-comp-s);"," ",""],(({$allowAnimation:i})=>i&&e(["transition:all 0.4s;"])),(({$expanded:i,$contentHeight:t})=>e(["",""],i&&e(["visibility:visible;max-height:","px;"],t)))),c={small:{top:"var(--global-space-comp-xs)",width:"var(--global-size-3-xs)"},medium:{top:"var(--global-space-comp-s)",width:"var(--global-size-xs)"},large:{top:"var(--global-space-comp-m)",width:"var(--global-size-s)"}},d="var(--global-space-comp-m)",r=i.div.withConfig({displayName:"checkable-input.style__StyledLineContainer",componentId:"sc-8b8f7038-3"})(["display:flex;justify-content:center;",""],(({$size:i})=>i&&e(["width:",";"],c[i].width))),m=i.div.withConfig({displayName:"checkable-input.style__StyledAccordionLine",componentId:"sc-8b8f7038-4"})(["position:absolute;width:2px;background-color:var(--input-typical-border-alt);border-radius:2px;",""],(({$size:i})=>i&&e(["top:",";height:calc( 100% - ("," + ",") );"],c[i].top,c[i].top,d))),g=i.div.withConfig({displayName:"checkable-input.style__StyledAccordionContent",componentId:"sc-8b8f7038-5"})(["padding:"," 0;"],d);export{p as StyledAccordion,g as StyledAccordionContent,m as StyledAccordionLine,n as StyledCheckableInput,s as StyledCheckableInputWrapper,r as StyledLineContainer};
+import e,{css as i}from"styled-components";import t,{StyledLabelContainer as a}from"../../legacy-label/label.style.js";import l from"../../legacy-hint-text/hint-text.style.js";const o={small:"var(--global-font-static-comp-regular-s)",medium:"var(--global-font-static-comp-regular-m)",large:"var(--global-font-static-comp-regular-l)"},n=e.div.withConfig({displayName:"checkable-input.style__StyledCheckableInput",componentId:"sc-49f7bf7-0"})(["display:grid;grid-template-columns:auto 1fr;grid-column-gap:var(--global-space-comp-s);","{padding:0;margin:0;}","{","}","{grid-area:2 / 2;}"],a,t,(({$size:e})=>e&&i(["font:",";"],o[e])),l),s=e.div.withConfig({displayName:"checkable-input.style__StyledCheckableInputWrapper",componentId:"sc-49f7bf7-1"})(["display:flex;align-items:center;min-height:var(--global-size-xs);"]),c=e.div.withConfig({displayName:"checkable-input.style__StyledAccordion",componentId:"sc-49f7bf7-2"})(["overflow-y:hidden;visibility:hidden;max-height:0;position:relative;display:grid;grid-template-columns:auto 1fr;grid-column-gap:var(--global-space-comp-s);"," ",""],(({$allowAnimation:e})=>e&&i(["transition:all 0.4s;"])),(({$expanded:e,$contentHeight:t})=>i(["",""],e&&i(["visibility:visible;max-height:","px;"],t)))),p={small:{top:"var(--global-space-comp-xs)",width:"var(--global-size-3-xs)"},medium:{top:"var(--global-space-comp-s)",width:"var(--global-size-xs)"},large:{top:"var(--global-space-comp-m)",width:"var(--global-size-s)"}},d="var(--global-space-comp-m)",r=e.div.withConfig({displayName:"checkable-input.style__StyledLineContainer",componentId:"sc-49f7bf7-3"})(["display:flex;justify-content:center;",""],(({$size:e})=>e&&i(["width:",";"],p[e].width))),m=e.div.withConfig({displayName:"checkable-input.style__StyledAccordionLine",componentId:"sc-49f7bf7-4"})(["position:absolute;width:2px;background-color:var(--input-typical-border-alt);border-radius:2px;",""],(({$size:e})=>e&&i(["top:",";height:calc( 100% - ("," + ",") );"],p[e].top,p[e].top,d))),g=e.div.withConfig({displayName:"checkable-input.style__StyledAccordionContent",componentId:"sc-49f7bf7-5"})(["padding:"," 0;"],d);export{c as StyledAccordion,g as StyledAccordionContent,m as StyledAccordionLine,n as StyledCheckableInput,s as StyledCheckableInputWrapper,r as StyledLineContainer};

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

@@ -1 +1 @@
-import e,{css as i}from"styled-components";import l from"../field-help/field-help.style.js";import{FieldLineStyle as t}from"../form-field/form-field.style.js";import o,{StyledLabelContainer as n}from"../label/label.style.js";import r from"../validations/validation-icon.style.js";import a from"../../components/help/help.style.js";import d from"./hidden-checkable-input.style.js";const s=e.div.withConfig({displayName:"checkable-input.style__StyledCheckableInput",componentId:"sc-9944fee6-0"})(["display:inline-block;position:relative;"]),p=e.div.withConfig({displayName:"checkable-input.style__StyledCheckableInputWrapper",componentId:"sc-9944fee6-1"})(["",""],(({disabled:e,fieldHelpInline:p,inputWidth:f,labelWidth:m,labelInline:c,reverse:h,isDarkBackground:y})=>i(["width:100% !important;","{display:flex;}","{"," padding-top:0;width:auto;& ",",& ","{color:var(--colorsUtilityYin065);vertical-align:middle;&:hover,&:focus{color:var(--colorsUtilityYin090);}}}","{"," flex-basis:100%;}"," "," "," "," ",""],t,n,c&&i(["justify-content:",";"],h?"flex-start":"flex-end"),a,r,l,y&&i(["color:var(--colorsUtilityYang080);"]),e&&i(["",",","{&:hover,&:focus{outline:none;cursor:not-allowed;}}"],d,o),p&&i(["","{flex-wrap:nowrap;}","{margin-right:0;margin-left:8px;}","{flex-grow:0;flex-basis:auto;padding-left:0;width:auto;}"],t,s,l),h&&p&&i(["","{margin-left:0;}","{flex-grow:1;}"],s,l),void 0!==f&&0!==f&&i(["","{width:","% !important;min-width:67px;}"],s,f),void 0!==m&&0!==m&&`\n      ${n} {\n        width: ${m}% !important;\n      }\n    `)));export{s as StyledCheckableInput,p as StyledCheckableInputWrapper};
+import e,{css as i}from"styled-components";import l from"../field-help/field-help.style.js";import{FieldLineStyle as t}from"../form-field/form-field.style.js";import o,{StyledLabelContainer as n}from"../legacy-label/label.style.js";import r from"../validations/validation-icon.style.js";import a from"../../components/help/help.style.js";import d from"./hidden-checkable-input.style.js";const s=e.div.withConfig({displayName:"checkable-input.style__StyledCheckableInput",componentId:"sc-e1e587cd-0"})(["display:inline-block;position:relative;"]),p=e.div.withConfig({displayName:"checkable-input.style__StyledCheckableInputWrapper",componentId:"sc-e1e587cd-1"})(["",""],(({disabled:e,fieldHelpInline:p,inputWidth:c,labelWidth:f,labelInline:m,reverse:h,isDarkBackground:y})=>i(["width:100% !important;","{display:flex;}","{"," padding-top:0;width:auto;& ",",& ","{color:var(--colorsUtilityYin065);vertical-align:middle;&:hover,&:focus{color:var(--colorsUtilityYin090);}}}","{"," flex-basis:100%;}"," "," "," "," ",""],t,n,m&&i(["justify-content:",";"],h?"flex-start":"flex-end"),a,r,l,y&&i(["color:var(--colorsUtilityYang080);"]),e&&i(["",",","{&:hover,&:focus{outline:none;cursor:not-allowed;}}"],d,o),p&&i(["","{flex-wrap:nowrap;}","{margin-right:0;margin-left:8px;}","{flex-grow:0;flex-basis:auto;padding-left:0;width:auto;}"],t,s,l),h&&p&&i(["","{margin-left:0;}","{flex-grow:1;}"],s,l),void 0!==c&&0!==c&&i(["","{width:","% !important;min-width:67px;}"],s,c),void 0!==f&&0!==f&&`\n      ${n} {\n        width: ${f}% !important;\n      }\n    `)));export{s as StyledCheckableInput,p as StyledCheckableInputWrapper};

package/esm/__internal__/error-border/error-border.style.d.ts

@@ -0,0 +1,4 @@
+declare const ErrorBorder: import("styled-components").StyledComponent<"span", any, {
+    $warning: boolean;
+}, never>;
+export default ErrorBorder;

package/esm/__internal__/error-border/error-border.style.js

@@ -0,0 +1 @@
+import r,{css as o}from"styled-components";const t=r.span.withConfig({displayName:"error-border.style__ErrorBorder",componentId:"sc-f2eef804-0"})([""," transform:translateZ(0);.numeral-date-wrapper &{display:none;}"],(({$warning:r})=>o(["width:2px;position:absolute;left:-10px;top:0px;bottom:0px;z-index:6;background-color:",";"],r?"var(--input-validation-bar-warn)":"var(--input-validation-border-error)")));export{t as default};

package/esm/__internal__/fieldset/__next__/fieldset.component.js

@@ -1 +1 @@
-import{jsxs as e,jsx as t,Fragment as r}from"react/jsx-runtime";import{useRef as i}from"react";import{StyledFieldset as n,StyledLegend as o,StyledFieldsetContentWrapper as s}from"./fieldset.style.js";import l from"../../../components/textbox/textbox.style.js";import a from"../../validation-message/validation-message.component.js";import{HintText as c}from"../../hint-text/hint-text.component.js";import d from"../../utils/helpers/guid/index.js";import"../../../style/utils/filter-styled-system-padding-props.js";import p from"../../../style/utils/filter-styled-system-margin-props.js";function g(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}const m=m=>{var{children:f,name:u,id:b,legend:y,legendAlign:O,legendHint:j,error:v,warning:h,isRequired:P,isDisabled:w,validationMessagePositionTop:x,size:$="medium"}=m,D=function(e,t){if(null==e)return{};var r,i,n=function(e,t){if(null==e)return{};var r,i,n={},o=Object.keys(e);for(i=0;i<o.length;i++)r=o[i],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(i=0;i<o.length;i++)r=o[i],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}(m,["children","name","id","legend","legendAlign","legendHint","error","warning","isRequired","isDisabled","validationMessagePositionTop","size"]);const S=i(d()),z=b||S.current,k=j?`${z}-hint`:void 0,q=(v||h)&&`${z}-validation-message`,E=[k,q].filter(Boolean).join(" "),L=()=>v||h?e(r,{children:[t(a,{error:v,warning:h,validationId:q,isLarge:"large"===$}),t(l,{warning:!(v||!h)})]}):null;return e(n,(M=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},i=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),i.forEach((function(t){g(e,t,r[t])}))}return e}({"data-component":"fieldset",id:z,name:u,"aria-describedby":E,$validationMessagePositionTop:x,$size:$},p(D),D),R=null!=(R={children:[y&&t(o,{"data-element":"legend",$align:O,$isRequired:P,$isDisabled:w,$isLarge:"large"===$,children:y}),j&&t(c,{id:k,isDisabled:w,align:O,isLarge:"large"===$,marginBottom:"0",children:j}),e(s,{$size:$,children:[x&&L(),f,!x&&L()]})]})?R:{},Object.getOwnPropertyDescriptors?Object.defineProperties(M,Object.getOwnPropertyDescriptors(R)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(R)).forEach((function(e){Object.defineProperty(M,e,Object.getOwnPropertyDescriptor(R,e))})),M));var M,R};export{m as default};
+import{jsxs as e,jsx as r,Fragment as t}from"react/jsx-runtime";import{useRef as i}from"react";import{StyledFieldset as n,StyledLegend as o,StyledFieldsetContentWrapper as l}from"./fieldset.style.js";import s from"../../legacy-error-border/error-border.style.js";import a from"../../validation-message/validation-message.component.js";import{HintText as c}from"../../legacy-hint-text/hint-text.component.js";import d from"../../utils/helpers/guid/index.js";import"../../../style/utils/filter-styled-system-padding-props.js";import g from"../../../style/utils/filter-styled-system-margin-props.js";function p(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}const m=m=>{var{children:f,name:u,id:b,legend:y,legendAlign:O,legendHint:j,error:v,warning:h,isRequired:P,isDisabled:w,validationMessagePositionTop:$,size:D="medium"}=m,x=function(e,r){if(null==e)return{};var t,i,n=function(e,r){if(null==e)return{};var t,i,n={},o=Object.keys(e);for(i=0;i<o.length;i++)t=o[i],r.indexOf(t)>=0||(n[t]=e[t]);return n}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(i=0;i<o.length;i++)t=o[i],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}(m,["children","name","id","legend","legendAlign","legendHint","error","warning","isRequired","isDisabled","validationMessagePositionTop","size"]);const S=i(d()),z=b||S.current,k=j?`${z}-hint`:void 0,q=(v||h)&&`${z}-validation-message`,E=[k,q].filter(Boolean).join(" "),L=()=>v||h?e(t,{children:[r(a,{error:v,warning:h,validationId:q,isLarge:"large"===D}),r(s,{warning:!(v||!h)})]}):null;return e(n,(M=function(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},i=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),i.forEach((function(r){p(e,r,t[r])}))}return e}({"data-component":"fieldset",id:z,name:u,"aria-describedby":E,$validationMessagePositionTop:$,$size:D},g(x),x),R=null!=(R={children:[y&&r(o,{"data-element":"legend",$align:O,$isRequired:P,$isDisabled:w,$isLarge:"large"===D,children:y}),j&&r(c,{id:k,isDisabled:w,align:O,isLarge:"large"===D,marginBottom:"0",children:j}),e(l,{$size:D,children:[$&&L(),f,!$&&L()]})]})?R:{},Object.getOwnPropertyDescriptors?Object.defineProperties(M,Object.getOwnPropertyDescriptors(R)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(R)).forEach((function(e){Object.defineProperty(M,e,Object.getOwnPropertyDescriptor(R,e))})),M));var M,R};export{m as default};

package/esm/__internal__/fieldset/fieldset.component.js

@@ -1 +1 @@
-import{jsxs as e,jsx as i,Fragment as n}from"react/jsx-runtime";import{useContext as r,useState as t,useRef as o,useEffect as l}from"react";import{StyledFieldset as a,StyledLegend as s,StyledIconWrapper as d}from"./fieldset.style.js";import{ValidationIcon as p}from"../validations/validation-icon.component.js";import c from"../../components/carbon-provider/__internal__/new-validation.context.js";import{InputGroupBehaviour as u,InputGroupContext as m}from"../input-behaviour/input-group-behaviour.component.js";import{Help as f}from"../../components/help/help.component.js";import{Typography as g}from"../../components/typography/typography.component.js";import{Box as b}from"../../components/box/box.component.js";import y from"../../components/textbox/textbox.style.js";import h from"../validation-message/validation-message.component.js";import{HintText as j}from"../hint-text/hint-text.component.js";import{FieldHelp as v}from"../field-help/field-help.component.js";import O from"../utils/helpers/guid/index.js";import w from"../../hooks/__internal__/useInputAccessibility/useInputAccessibility.js";import"../../style/utils/filter-styled-system-padding-props.js";import P from"../../style/utils/filter-styled-system-margin-props.js";function x(e,i,n){return i in e?Object.defineProperty(e,i,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[i]=n,e}function D(e){for(var i=1;i<arguments.length;i++){var n=null!=arguments[i]?arguments[i]:{},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(i){x(e,i,n[i])}))}return e}function M(e,i){return i=null!=i?i:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):function(e){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);i.push.apply(i,n)}return i}(Object(i)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(i,n))})),e}const S=x=>{var{legend:S,children:H,inline:I=!1,legendWidth:_,legendAlign:k,legendSpacing:A=2,error:R,warning:q,info:B,isRequired:E,blockGroupBehaviour:L,legendMargin:F={},isDisabled:G,labelHelp:T,fieldHelp:z,inputHint:N,validationMessagePositionTop:V,applyNewValidation:W=!1,id:C,size:$}=x,J=function(e,i){if(null==e)return{};var n,r,t=function(e,i){if(null==e)return{};var n,r,t={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],i.indexOf(n)>=0||(t[n]=e[n]);return t}(e,i);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],i.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(t[n]=e[n])}return t}(x,["legend","children","inline","legendWidth","legendAlign","legendSpacing","error","warning","info","isRequired","blockGroupBehaviour","legendMargin","isDisabled","labelHelp","fieldHelp","inputHint","validationMessagePositionTop","applyNewValidation","id","size"]);const{validationRedesignOptIn:K}=r(c),Q=P(J),[U,X]=t(null),[Y,Z]=t(!1),ee=o(O()),ie=C||ee.current,ne=N?`${ie}-hint`:void 0;l((()=>{U&&E&&Array.from(U.querySelectorAll("input")||[]).forEach((e=>{e.setAttribute("required","")}))}),[U,E]);let re;re=I&&!k?"right":k||"left";const{validationId:te,fieldHelpId:oe,ariaDescribedBy:le}=w({id:ie,validationRedesignOptIn:!0,error:R,warning:q,info:B,fieldHelp:z}),ae=(V?[le,ne]:[ne,le]).filter(Boolean).join(" "),se=()=>R||q?e(n,{children:[i(h,{error:R,warning:q,validationId:te,validationMessagePositionTop:V,isLarge:"large"===$}),i(y,{warning:!(R||!q)})]}):null;return W?e(a,M(D({ref:X,"data-component":"fieldset",id:ie,"aria-describedby":ae||void 0},J,Q),{children:[S&&i(s,{align:re,isRequired:E,isDisabled:G,"data-element":"legend","data-role":"legend",isLarge:"large"===$,children:S}),N&&i(j,{id:ne,isDisabled:G,align:re,isLarge:"large"===$,children:N}),e(b,{position:"relative",mt:1,children:[V&&se(),H,!V&&se()]})]})):i(u,{blockGroupBehaviour:L,children:e(a,M(D({ref:X,"data-component":"fieldset",id:ie,"aria-describedby":le||void 0},J,Q),{children:[S&&i(m.Consumer,{children:({onMouseEnter:n,onMouseLeave:r})=>e(s,M(D({onMouseEnter:n,onMouseLeave:r,inline:I,width:_,align:re,rightPadding:A},F),{"data-element":"legend","data-role":"legend",isRequired:E,isDisabled:G,children:[S,!K&&(R||q||B?i(d,{"aria-hidden":"true",children:i(p,{error:R,warning:q,info:B,tooltipFlipOverrides:["top","bottom"]})}):T?i(d,M(D({},{onFocus:()=>Z(!0),onBlur:()=>Z(!1)}),{children:i(f,{isFocused:Y,children:T})})):null)]}))}),!K&&i(g,{screenReaderOnly:!0,id:te,children:R||q||B}),e(b,{display:"flex",flexDirection:"column",mt:I?0:1,children:[H,z&&i(v,{id:oe,children:z})]})]}))})};export{S as default};
+import{jsxs as e,jsx as r,Fragment as i}from"react/jsx-runtime";import{useContext as n,useState as t,useRef as o,useEffect as l}from"react";import{StyledFieldset as a,StyledLegend as s,StyledIconWrapper as d}from"./fieldset.style.js";import{ValidationIcon as p}from"../validations/validation-icon.component.js";import c from"../../components/carbon-provider/__internal__/new-validation.context.js";import{InputGroupBehaviour as u,InputGroupContext as m}from"../input-behaviour/input-group-behaviour.component.js";import{Help as f}from"../../components/help/help.component.js";import{Typography as g}from"../../components/typography/typography.component.js";import{Box as b}from"../../components/box/box.component.js";import y from"../legacy-error-border/error-border.style.js";import h from"../validation-message/validation-message.component.js";import{HintText as j}from"../legacy-hint-text/hint-text.component.js";import{FieldHelp as v}from"../field-help/field-help.component.js";import O from"../utils/helpers/guid/index.js";import w from"../../hooks/__internal__/useInputAccessibility/useInputAccessibility.js";import"../../style/utils/filter-styled-system-padding-props.js";import P from"../../style/utils/filter-styled-system-margin-props.js";function x(e,r,i){return r in e?Object.defineProperty(e,r,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[r]=i,e}function D(e){for(var r=1;r<arguments.length;r++){var i=null!=arguments[r]?arguments[r]:{},n=Object.keys(i);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(i).filter((function(e){return Object.getOwnPropertyDescriptor(i,e).enumerable})))),n.forEach((function(r){x(e,r,i[r])}))}return e}function M(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 i=Object.getOwnPropertySymbols(e);r.push.apply(r,i)}return r}(Object(r)).forEach((function(i){Object.defineProperty(e,i,Object.getOwnPropertyDescriptor(r,i))})),e}const S=x=>{var{legend:S,children:H,inline:I=!1,legendWidth:_,legendAlign:k,legendSpacing:A=2,error:R,warning:q,info:B,isRequired:E,blockGroupBehaviour:L,legendMargin:F={},isDisabled:G,labelHelp:T,fieldHelp:z,inputHint:N,validationMessagePositionTop:V,applyNewValidation:W=!1,id:C,size:$}=x,J=function(e,r){if(null==e)return{};var i,n,t=function(e,r){if(null==e)return{};var i,n,t={},o=Object.keys(e);for(n=0;n<o.length;n++)i=o[n],r.indexOf(i)>=0||(t[i]=e[i]);return t}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)i=o[n],r.indexOf(i)>=0||Object.prototype.propertyIsEnumerable.call(e,i)&&(t[i]=e[i])}return t}(x,["legend","children","inline","legendWidth","legendAlign","legendSpacing","error","warning","info","isRequired","blockGroupBehaviour","legendMargin","isDisabled","labelHelp","fieldHelp","inputHint","validationMessagePositionTop","applyNewValidation","id","size"]);const{validationRedesignOptIn:K}=n(c),Q=P(J),[U,X]=t(null),[Y,Z]=t(!1),ee=o(O()),re=C||ee.current,ie=N?`${re}-hint`:void 0;l((()=>{U&&E&&Array.from(U.querySelectorAll("input")||[]).forEach((e=>{e.setAttribute("required","")}))}),[U,E]);let ne;ne=I&&!k?"right":k||"left";const{validationId:te,fieldHelpId:oe,ariaDescribedBy:le}=w({id:re,validationRedesignOptIn:!0,error:R,warning:q,info:B,fieldHelp:z}),ae=(V?[le,ie]:[ie,le]).filter(Boolean).join(" "),se=()=>R||q?e(i,{children:[r(h,{error:R,warning:q,validationId:te,validationMessagePositionTop:V,isLarge:"large"===$}),r(y,{warning:!(R||!q)})]}):null;return W?e(a,M(D({ref:X,"data-component":"fieldset",id:re,"aria-describedby":ae||void 0},J,Q),{children:[S&&r(s,{align:ne,isRequired:E,isDisabled:G,"data-element":"legend","data-role":"legend",isLarge:"large"===$,children:S}),N&&r(j,{id:ie,isDisabled:G,align:ne,isLarge:"large"===$,children:N}),e(b,{position:"relative",mt:1,children:[V&&se(),H,!V&&se()]})]})):r(u,{blockGroupBehaviour:L,children:e(a,M(D({ref:X,"data-component":"fieldset",id:re,"aria-describedby":le||void 0},J,Q),{children:[S&&r(m.Consumer,{children:({onMouseEnter:i,onMouseLeave:n})=>e(s,M(D({onMouseEnter:i,onMouseLeave:n,inline:I,width:_,align:ne,rightPadding:A},F),{"data-element":"legend","data-role":"legend",isRequired:E,isDisabled:G,children:[S,!K&&(R||q||B?r(d,{"aria-hidden":"true",children:r(p,{error:R,warning:q,info:B,tooltipFlipOverrides:["top","bottom"]})}):T?r(d,M(D({},{onFocus:()=>Z(!0),onBlur:()=>Z(!1)}),{children:r(f,{isFocused:Y,children:T})})):null)]}))}),!K&&r(g,{screenReaderOnly:!0,id:te,children:R||q||B}),e(b,{display:"flex",flexDirection:"column",mt:I?0:1,children:[H,z&&r(v,{id:oe,children:z})]})]}))})};export{S as default};

package/esm/__internal__/fieldset-validation-context/fieldset-validation-context.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+type FieldsetValidationContextType = {
+    disableErrorBorder?: boolean;
+};
+declare const _default: React.Context<FieldsetValidationContextType>;
+export default _default;

package/esm/__internal__/fieldset-validation-context/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./fieldset-validation-context";

package/esm/__internal__/fieldset-validation-context/index.js

@@ -0,0 +1 @@
+export{default}from"./fieldset-validation-context.js";

package/esm/__internal__/form-field/form-field.component.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { MarginProps } from "styled-system";
 import { ValidationProps } from "../validations";
-import { LabelProps } from "../label";
+import { LabelProps } from "../legacy-label";
 import { TagProps } from "../utils/helpers/tags/tags";
 import { IconType } from "../../components/icon";
 interface CommonFormFieldProps extends MarginProps, ValidationProps {

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

@@ -1 +1 @@
-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"../../hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js";import"../../style/utils/filter-styled-system-padding-props.js";import u from"../../style/utils/filter-styled-system-margin-props.js";import{TabsContext as m}from"../../components/tabs/__next__/tabs.context.js";import{TabContext as y}from"../../components/tabs/__next__/tab.context.js";function O(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}const g=g=>{var{maxWidth:I,children:j,"data-component":h,disabled:v,loading:w,fieldHelp:P,fieldHelpInline:_,error:x,warning:H,info:k,tooltipId:S,fieldHelpId:W,label:A,labelId:R,labelAlign:q,labelHelp:B,labelHelpIcon:D,labelInline:E,labelSpacing:F=2,labelWidth:V,labelAs:L,id:N,reverse:U,useValidationIcon:$,adaptiveLabelBreakpoint:z,isRequired:C,validationIconId:G,validationRedesignOptIn:J}=g,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}(g,["maxWidth","children","data-component","disabled","loading","fieldHelp","fieldHelpInline","error","warning","info","tooltipId","fieldHelpId","label","labelId","labelAlign","labelHelp","labelHelpIcon","labelInline","labelSpacing","labelWidth","labelAs","id","reverse","useValidationIcon","adaptiveLabelBreakpoint","isRequired","validationIconId","validationRedesignOptIn"]);const M=n((()=>{const e={error:!!x,warning:!!H,info:!!k};if(v&&!w)return Object.keys(e).find((t=>e[t]))}),[x,H,k,v,w]);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`);const Q=f(z);let T=E;z&&(T=Q);const{setErrors:X,setWarnings:Y,setInfos:Z}=r(m),{tabId:ee}=r(y),te=u(K),ne=i(!1);l((()=>(ne.current=!0,()=>{ne.current=!1})),[]),o((()=>(X&&X(N,ee||"",x||!1),Y&&Y(N,ee||"",H||!1),Z&&Z(N,ee||"",k||!1),()=>{ne.current||(X&&X(N,ee||"",!1),Y&&Y(N,ee||"",!1),Z&&Z(N,ee||"",!1))})),[N,X,Y,x,H,k,ee,Z]);const re=P?t(c,{labelInline:T,labelWidth:V,id:W,children:P}):null;return e(s,(ie=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){O(e,t,n[t])}))}return e}({},b(h,K),te),le=null!=(le={children:[e(d,{"data-role":"field-line",inline:T,maxWidth:I,children:[U&&j,A&&t(p,{labelId:R,align:q,disabled:v,error:!J&&x,warning:!J&&H,info:!J&&k,help:B,tooltipId:S,htmlFor:N,helpIcon:D,inline:T,width:V,useValidationIcon:$,pr:U?void 0:F,pl:U?F:void 0,isRequired:C,validationIconId:G,as:L,children:A}),_&&re,!U&&j]}),!_&&re]})?le:{},Object.getOwnPropertyDescriptors?Object.defineProperties(ie,Object.getOwnPropertyDescriptors(le)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(le)).forEach((function(e){Object.defineProperty(ie,e,Object.getOwnPropertyDescriptor(le,e))})),ie));var ie,le};g.displayName="FormField";export{g as default};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useMemo as n,useContext as r,useRef as l,useLayoutEffect as i,useEffect as o}from"react";import a from"invariant";import s,{FieldLineStyle as d}from"./form-field.style.js";import p from"../legacy-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"../../hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js";import"../../style/utils/filter-styled-system-padding-props.js";import u from"../../style/utils/filter-styled-system-margin-props.js";import{TabsContext as m}from"../../components/tabs/__next__/tabs.context.js";import{TabContext as y}from"../../components/tabs/__next__/tab.context.js";function O(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}const g=g=>{var{maxWidth:I,children:j,"data-component":h,disabled:v,loading:w,fieldHelp:P,fieldHelpInline:_,error:x,warning:H,info:k,tooltipId:S,fieldHelpId:W,label:A,labelId:R,labelAlign:q,labelHelp:B,labelHelpIcon:D,labelInline:E,labelSpacing:F=2,labelWidth:V,labelAs:L,id:N,reverse:U,useValidationIcon:$,adaptiveLabelBreakpoint:z,isRequired:C,validationIconId:G,validationRedesignOptIn:J}=g,K=function(e,t){if(null==e)return{};var n,r,l=function(e,t){if(null==e)return{};var n,r,l={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(l[n]=e[n]);return l}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(l[n]=e[n])}return l}(g,["maxWidth","children","data-component","disabled","loading","fieldHelp","fieldHelpInline","error","warning","info","tooltipId","fieldHelpId","label","labelId","labelAlign","labelHelp","labelHelpIcon","labelInline","labelSpacing","labelWidth","labelAs","id","reverse","useValidationIcon","adaptiveLabelBreakpoint","isRequired","validationIconId","validationRedesignOptIn"]);const M=n((()=>{const e={error:!!x,warning:!!H,info:!!k};if(v&&!w)return Object.keys(e).find((t=>e[t]))}),[x,H,k,v,w]);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`);const Q=f(z);let T=E;z&&(T=Q);const{setErrors:X,setWarnings:Y,setInfos:Z}=r(m),{tabId:ee}=r(y),te=u(K),ne=l(!1);i((()=>(ne.current=!0,()=>{ne.current=!1})),[]),o((()=>(X&&X(N,ee||"",x||!1),Y&&Y(N,ee||"",H||!1),Z&&Z(N,ee||"",k||!1),()=>{ne.current||(X&&X(N,ee||"",!1),Y&&Y(N,ee||"",!1),Z&&Z(N,ee||"",!1))})),[N,X,Y,x,H,k,ee,Z]);const re=P?t(c,{labelInline:T,labelWidth:V,id:W,children:P}):null;return e(s,(le=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){O(e,t,n[t])}))}return e}({},b(h,K),te),ie=null!=(ie={children:[e(d,{"data-role":"field-line",inline:T,maxWidth:I,children:[U&&j,A&&t(p,{labelId:R,align:q,disabled:v,error:!J&&x,warning:!J&&H,info:!J&&k,help:B,tooltipId:S,htmlFor:N,helpIcon:D,inline:T,width:V,useValidationIcon:$,pr:U?void 0:F,pl:U?F:void 0,isRequired:C,validationIconId:G,as:L,children:A}),_&&re,!U&&j]}),!_&&re]})?ie:{},Object.getOwnPropertyDescriptors?Object.defineProperties(le,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(le,e,Object.getOwnPropertyDescriptor(ie,e))})),le));var le,ie};g.displayName="FormField";export{g as default};

package/esm/__internal__/hint-text/hint-text.component.d.ts

@@ -1,27 +1,12 @@
 import React from "react";
 export interface HintTextProps {
-    /** The alignment of the hint text */
-    align?: "left" | "right";
-    /** Children elements */
+    /** Child elements */
     children?: React.ReactNode;
-    /** Sets the font weight for the hint text */
-    fontWeight?: string;
-    /** Sets the id for the component. */
+    /** Sets the id for the component */
     id?: string;
-    /** Indicates whether the parent component is inline. */
-    isComponentInline?: boolean;
-    /** Indicates whether the parent component has a dark background. */
-    isDarkBackground?: boolean;
-    /** Indicates whether the parent component is disabled. */
-    isDisabled?: boolean;
-    /** Margin bottom for the hint text */
-    marginBottom?: string;
-    /** Margin top for the hint text */
-    marginTop?: string;
-    /** Max width for the hint text */
-    maxWidth?: string;
-    /** Set large font-size */
-    isLarge?: boolean;
+    size: "small" | "medium" | "large";
+    /** If true, the hint text will display in disabled styling */
+    disabled?: boolean;
 }
-export declare const HintText: ({ align, children, fontWeight, id, isComponentInline, isDarkBackground, isDisabled, marginBottom, marginTop, maxWidth, isLarge, }: HintTextProps) => React.JSX.Element | null;
+export declare const HintText: ({ children, id, size, disabled }: HintTextProps) => React.JSX.Element;
 export default HintText;

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

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

package/esm/__internal__/hint-text/hint-text.style.d.ts

@@ -1,3 +1,6 @@
-import { HintTextProps } from "./hint-text.component";
-declare const StyledHintText: import("styled-components").StyledComponent<"div", any, HintTextProps, never>;
+interface StyledHintTextProps {
+    $size: "small" | "medium" | "large";
+    $disabled?: boolean;
+}
+declare const StyledHintText: import("styled-components").StyledComponent<"span", any, StyledHintTextProps, never>;
 export default StyledHintText;

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

@@ -1 +1 @@
-import t,{css as i}from"styled-components";const o=t.div.withConfig({displayName:"hint-text.style__StyledHintText",componentId:"sc-92b90b9-0"})(["display:flex;align-items:center;font-size:14px;"," "," margin-bottom:",";margin-top:",";"," "," ",' ::after{content:" ";}'],(({isLarge:t})=>t&&i(["font-size:var(--fontSizes200);"])),(({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};
+import t from"styled-components";const a=t.span.withConfig({displayName:"hint-text.style__StyledHintText",componentId:"sc-8ce52069-0"})(["color:",";font:",";"],(({$disabled:t})=>t?"var(--input-labelset-label-disabled)":"var(--input-labelset-label-alt)"),(({$size:t})=>(t=>{switch(t){case"small":return"var(--global-font-static-comp-regular-s)";case"large":return"var(--global-font-static-comp-regular-l)";default:return"var(--global-font-static-comp-regular-m)"}})(t)));export{a as default};

package/esm/__internal__/hint-text/index.d.ts

@@ -1,2 +1 @@
 export { default } from "./hint-text.component";
-export type { HintTextProps } from "./hint-text.component";

package/esm/__internal__/input/index.d.ts

@@ -1,5 +1,2 @@
-import Input from "./input.component";
-import InputPresentation from "./input-presentation.component";
-export type { InputProps, CommonInputProps, EnterKeyHintTypes, } from "./input.component";
-export { Input, InputPresentation };
-export default Input;
+export { default } from "./input.component";
+export type { InputProps } from "./input.component";

package/esm/__internal__/input/index.js

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

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

@@ -0,0 +1,8 @@
+/**
+ * Overrides for input when part of Date component
+ */
+export declare const dateStyleOverrides: import("styled-components").FlattenSimpleInterpolation;
+export declare const searchStyleOverrides: import("styled-components").FlattenSimpleInterpolation;
+export declare const selectStyleOverrides: ($size?: string, $isDisabled?: boolean, $isReadOnly?: boolean) => import("styled-components").FlattenSimpleInterpolation;
+export declare const pagerStyleOverrides: import("styled-components").FlattenSimpleInterpolation;
+export declare const numeralDateStyles: import("styled-components").FlattenSimpleInterpolation;

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

@@ -0,0 +1 @@
+import{css as t}from"styled-components";const a=t([".date &{.input-text-container input{padding:0 0 0 12px;margin-right:-12px;}}"]),n=t([".search &{height:40px;box-sizing:border-box;.input-text-container{flex-wrap:wrap;}input{width:30px;}}"]),e=t([".search:not(.with-button):not(.has-value) &:not(:focus-within){border-color:transparent;background:transparent;}"]),o=t([".search.with-button &{border-top-right-radius:0;border-bottom-right-radius:0;}"]),r=t([".search.dark-background &{input{::-moz-placeholder{color:var(--colorsUtilityYang080);opacity:1;}::placeholder{color:var(--colorsUtilityYang080);}}}"]),i=t([".search.dark-background:not(.with-button) &{input{color:var(--input-typical-inverse-txt-default);}}.search.dark-background.has-value:not(.with-button) &{.input-text-container,input{color:var(--colorsUtilityYang080);}.input-text-container:hover{input{color:var(--colorsUtilityYang100);}}}"]),p=t([".search.dark-background.with-button:not(.has-value) &{input{color:var(--colorsUtilityYang100);}}"]),l=t([".search.dark-background:not(.with-button) &{background-color:transparent;border-color:var(--colorsUtilityYang080);}"]),c=t([""," "," "," "," "," "," ",""],n,e,o,r,i,p,l),s=t(['[data-role="select-textbox"] &[data-is-transparent="false"]{.input-text-container{position:relative;.select-text:not(.disabled):not(.read-only){position:absolute;top:0;left:0;width:calc(100% - 48px);height:100%;padding:var(--global-space-none) var(--global-space-none) var(--global-space-none) var(--global-space-comp-m);cursor:pointer;}}}']),d=t([".multi-select &,.filterable-select &{.input-text-container:not(.disabled):not(.read-only){cursor:text;input{cursor:text;}}}"]),g=t(['[data-element="simple-select-input"] &{input{opacity:0;}input{cursor:pointer;}}']),u=(a,n,e)=>t([""," "," "," "," ",""],g,((a,n)=>t(['&[data-is-transparent="true"]{&&&{background:transparent;border:none;}'," input{text-align:right;position:absolute;padding:var(--global-space-none);&::placeholder{color:var(--colorsUtilityYin100);}}}"],!a&&!n&&t(["cursor:pointer;*{cursor:pointer;}"])))(n,e),s,d,(a=>t([".multi-select &{input{padding:var(--global-space-none);width:30px;}.input-text-container{"," "," ","}}"],"small"===a&&t(["padding:var(--global-space-none) var(--global-space-comp-2-xl) var(--global-space-none) var(--global-space-comp-s);"]),"medium"===a&&t(["padding:var(--global-space-none) 40px var(--global-space-none) var(--global-space-comp-m);"]),"large"===a&&t(["padding:var(--global-space-none) 48px var(--global-space-none) var(--global-space-comp-l);"])))(a)),h=t([".pager-navigation &{margin:4px 8px;height:26px;min-height:unset;.input-text-container{padding:0px;line-height:26px;min-height:24px;input{text-align:center;padding:0;}}}"]),b=t(["&&&{.pager-size-options &{min-height:unset;.input-text-container{width:64px;height:26px;min-height:26px;min-width:10px;margin:0px;.select-text:not(.disabled):not(.read-only){width:calc(100% - 28px);}}}}"]),x=t([""," ",""],h,b),v=t([".numeral-date-wrapper &{.input-text-container input{text-align:center;}}"]);export{a as dateStyleOverrides,v as numeralDateStyles,x as pagerStyleOverrides,c as searchStyleOverrides,u as selectStyleOverrides};

package/esm/__internal__/input/input.component.d.ts

@@ -1,54 +1,45 @@
 import React from "react";
-import { BorderRadiusType } from "../../components/box/box.component";
-export type EnterKeyHintTypes = "enter" | "done" | "go" | "next" | "previous" | "search" | "send";
-export interface CommonInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "value"> {
-    align?: "right" | "left";
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "size"> {
     /** The ID of the input's description, is set along with hint text and error message. */
     "aria-describedby"?: string;
-    /** Override the variant component */
-    as?: React.ElementType;
-    /** If true the Component will be focused when rendered */
-    autoFocus?: boolean;
     /** If true, the component will be disabled */
     disabled?: boolean;
     /** HTML id attribute of the input */
     id?: string;
-    /** Specify a custom border radius for the input. Any valid border-radius design token, or an array of border-radius design tokens. */
-    inputBorderRadius?: BorderRadiusType | BorderRadiusType[];
     /** Name of the input */
     name?: string;
     /** Specify a callback triggered on blur */
     onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
     /** Specify a callback triggered on change */
-    onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
-    /** Specify a callback triggered on click */
-    onClick?: (ev: React.MouseEvent<HTMLInputElement>) => void;
+    onChange: (ev: React.ChangeEvent<HTMLInputElement>) => void;
     /** Specify a callback triggered on focus */
     onFocus?: (ev: React.FocusEvent<HTMLInputElement>) => void;
-    /** Specify a callback triggered on keyDown */
-    onKeyDown?: (ev: React.KeyboardEvent<HTMLInputElement>) => void;
     /** Placeholder string to be displayed in input */
     placeholder?: string;
     /** If true, the component will be read-only */
     readOnly?: boolean;
     /** Flag to configure component as mandatory */
     required?: boolean;
-    /** Id of the validation icon */
-    validationIconId?: string;
     /** The value of the input */
-    value: string | readonly string[] | number | undefined;
+    value: string | readonly string[] | number;
+    /** If true, the input will display error styling */
+    error?: boolean;
+    /** The width of the input as a percentage (e.g., 50 for 50%) */
+    inputWidth?: number;
+    /** Type of the icon that will be rendered next to the input */
+    inputIcon?: React.ReactNode;
+    /** Size of the input */
+    size?: "small" | "medium" | "large";
+    /** Emphasised text to be displayed before the input */
+    prefix?: string;
+    /** Additional children to be rendered before the input */
+    leftChildren?: React.ReactNode;
+    /** Text alignment within the input */
+    align?: "left" | "right";
+    /**
+     * @private @internal @ignore
+     */
+    "data-is-transparent"?: boolean;
 }
-export interface InputProps extends CommonInputProps {
-    /** The visible width of the text control, in average character widths */
-    cols?: number;
-    /** Integer to determine a timeout for the deferred callback */
-    deferTimeout?: number;
-    /** Deferred callback to be called after the onChange event */
-    onChangeDeferred?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
-    /** The number of visible text lines for the control */
-    rows?: number;
-    /** HTML type attribute of the input */
-    type?: string;
-}
-declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 export default Input;

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

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import t,{useContext as r,useRef as n,useCallback as o,useEffect as u}from"react";import i from"./input.style.js";import{InputContext as c}from"../input-behaviour/input-behaviour.component.js";import{InputGroupContext as l}from"../input-behaviour/input-group-behaviour.component.js";import{SelectTextboxContext as a}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,placeholder:y,disabled:m,readOnly:O,autoFocus:h,onClick:g,onChangeDeferred:v,onChange:j,onBlur:B,onFocus:P,deferTimeout:w,type:x="text",id:F,name:I,validationIconId:S,inputBorderRadius:C="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={},u=Object.keys(e);for(n=0;n<u.length;n++)r=u[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(e);for(n=0;n<u.length;n++)r=u[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(t,["align","aria-labelledby","aria-describedby","placeholder","disabled","readOnly","autoFocus","onClick","onChangeDeferred","onChange","onBlur","onFocus","deferTimeout","type","id","name","validationIconId","inputBorderRadius","enterKeyHint"]);const D=r(c),E=r(l),{isInputInSelect:T}=r(a),_=n(null);let H=n(null);p&&"current"in p&&(H=p);const K=o((e=>{H.current=e,"function"==typeof p&&p(e),h&&e&&e.focus(),R&&e&&e.setAttribute("enterkeyhint",R)}),[h,p,R]);u((()=>{D.inputRef&&D.inputRef(H)}),[D,H]),u((()=>{m&&D.onBlur&&D.onBlur()}),[m,D]);const M=f?[f]:[];(D.hasFocus||E.hasFocus||D.hasMouseOver||E.hasMouseOver)&&S&&M.push(S);const A=M.length?M.filter(Boolean).join(" "):void 0;return e(i,(N=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),q={isInputInSelect:T,"data-has-autofocus":!!h||void 0,"aria-describedby":A,"aria-labelledby":b,align:d,placeholder:y,disabled:m,readOnly:O,name:I,type:x,id:F||I,ref:K,"data-element":"input",onFocus:e=>{P&&P(e),D.onFocus&&D.onFocus(),E.onFocus&&E.onFocus(),"text"===x&&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)}}))}(H)},onBlur:e=>{B&&B(e),D.onBlur&&D.onBlur(),E.onBlur&&E.onBlur()},onClick:m||O?void 0:e=>{var t;g&&g(e),null==H||null===(t=H.current)||void 0===t||t.focus()},onChange:e=>{j&&j(e),(e=>{v&&(_.current&&clearTimeout(_.current),_.current=setTimeout((()=>{v(e)}),w||750))})(e)},inputBorderRadius:C},q=null!=q?q:{},Object.getOwnPropertyDescriptors?Object.defineProperties(N,Object.getOwnPropertyDescriptors(q)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(q)).forEach((function(e){Object.defineProperty(N,e,Object.getOwnPropertyDescriptor(q,e))})),N));var N,q}));p.displayName="Input";export{p as default};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import r,{useRef as n,useEffect as i,useCallback as a}from"react";import o from"./input.style.js";import l from"../utils/helpers/combine-refs/index.js";function c(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function u(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){c(e,t,r[t])}))}return e}const d=r.forwardRef(((r,c)=>{var{align:d="left","aria-describedby":s,"aria-labelledby":p,autoFocus:f,error:b,"data-is-transparent":y,children:m,disabled:O,id:h,inputIcon:v,inputWidth:x,leftChildren:g,name:j,onFocus:$,prefix:w,readOnly:P,size:S,type:F="text"}=r,E=function(e,t){if(null==e)return{};var r,n,i=function(e,t){if(null==e)return{};var r,n,i={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(i[r]=e[r]);return i}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}(r,["align","aria-describedby","aria-labelledby","autoFocus","error","data-is-transparent","children","disabled","id","inputIcon","inputWidth","leftChildren","name","onFocus","prefix","readOnly","size","type"]);const z=n(null),I=l(c,z),R=w?`${h}-prefix`:void 0;i((()=>{var e;f&&(null===(e=z.current)||void 0===e||e.focus())}),[f]);const k=a((e=>{var t;null==$||$(e),"text"===F&&(t=z,setTimeout((()=>{if(null==t?void 0:t.current){const{selectionStart:e,selectionEnd:r,value:n}=t.current,{length:i}=n;(0===e&&0===r||e===i&&r===i)&&document.activeElement===t.current&&t.current.setSelectionRange(0,i)}})))}),[$,F]),C=R?`${R} ${p||""}`.trim():p;return e(o,{$align:d,"data-role":"input-container",$error:b,$size:S,$isDisabled:O,$isReadOnly:P,"data-is-transparent":y,children:[e("div",{"data-role":"input-text-container",role:"presentation",className:`input-text-container ${O?"disabled":""} ${P?"read-only":""}`,children:[g,w&&t("span",{id:R,"data-element":"textbox-prefix",children:w}),t("input",u({ref:I,"data-element":"input","data-role":"input",disabled:O,readOnly:P,"aria-describedby":s,"aria-labelledby":C,type:F,onFocus:k,id:h,name:j,"data-has-autofocus":!!f||void 0},E)),v]}),m]})}));export{d as default};

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

@@ -1,5 +1,9 @@
-import { CommonInputProps } from "./input.component";
-declare const StyledInput: import("styled-components").StyledComponent<"input", any, Pick<CommonInputProps, "disabled" | "align" | "inputBorderRadius"> & {
-    isInputInSelect: boolean;
-}, never>;
-export default StyledInput;
+interface InputContainerProps {
+    $align?: "left" | "right";
+    $error?: boolean;
+    $isDisabled?: boolean;
+    $isReadOnly?: boolean;
+    $size?: "small" | "medium" | "large";
+}
+declare const InputContainer: import("styled-components").StyledComponent<"div", any, InputContainerProps, never>;
+export default InputContainer;

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

@@ -1 +1 @@
-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};
+import a,{css as l}from"styled-components";import t from"../../style/utils/add-focus-styling.js";import{dateStyleOverrides as r,searchStyleOverrides as e,selectStyleOverrides as o,pagerStyleOverrides as i,numeralDateStyles as n}from"./input-style-overrides.style.js";const s=a.div.withConfig({displayName:"input.style__InputContainer",componentId:"sc-c3a17c62-0"})([""," "," "," "," "," ",""],(({$align:a,$error:r,$isDisabled:e,$isReadOnly:o,$size:i})=>l(["display:flex;align-items:center;align-self:stretch;max-width:100%;border-radius:var(--global-radius-action-m);"," "," "," &&&{"," ","}"," "," .input-text-container{display:flex;flex-wrap:wrap;align-items:center;flex:1 0 0;max-width:100%;align-self:stretch;input{align-self:stretch;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;flex:1 0 0;min-width:0;overflow:hidden;border:none;outline:none;background:transparent;text-overflow:ellipsis;text-align:",";"," "," "," "," "," ",'}[data-element="textbox-prefix"]{font-weight:500;margin-left:var(--global-space-comp-m);}}'],"small"===i&&l(["min-height:var(--global-size-s);"]),"medium"===i&&l(["min-height:var(--global-size-m);"]),"large"===i&&l(["min-height:var(--global-size-l);"]),o&&l(["cursor:default;*{cursor:default;}background:var(--input-typical-bg-read-only);border:var(--global-borderwidth-xs) solid var(--input-typical-border-read-only);&:focus-within:has(:focus:not(button)){"," z-index:2;}"],t()),e&&l(["cursor:not-allowed;background:var(--input-typical-bg-disabled);border:var(--global-borderwidth-xs) solid var(--input-typical-border-disabled);*{cursor:not-allowed;}"]),!e&&!o&&l(["cursor:text;&:focus-within:has(:focus:not(button)){"," z-index:2;}"],t()),!e&&!o&&l(["background:var(--input-typical-bg-default);border:",";"],r?"var(--global-borderwidth-s) solid var(--input-validation-border-error)":"var(--global-borderwidth-xs) solid var(--input-typical-border-default)"),a,o&&l(["color:var(--input-typical-txt-read-only);"]),e&&l(["color:var(--input-typical-txt-disabled);"]),!o&&!e&&l(["color:var(--input-typical-txt-default);"]),"small"===i&&l(["font:var(--global-font-static-comp-regular-s);padding:var(--global-space-none) var(--global-space-comp-s);"]),"medium"===i&&l(["font:var(--global-font-static-comp-regular-m);padding:var(--global-space-none) var(--global-space-comp-m);"]),"large"===i&&l(["font:var(--global-font-static-comp-regular-l);padding:var(--global-space-none) var(--global-space-comp-l);"]))),r,e,(({$size:a,$isDisabled:l,$isReadOnly:t})=>o(a,l,t)),i,n);export{s as default};

package/esm/__internal__/input-icon-toggle/input-icon-toggle.component.d.ts

@@ -1,8 +1,7 @@
 import React from "react";
 import { IconType } from "../../components/icon";
-import { InputIconToggleStyleProps } from "./input-icon-toggle.style";
 import { ValidationProps } from "../validations/validation-icon.component";
-export interface InputIconToggleProps extends InputIconToggleStyleProps, ValidationProps {
+export interface InputIconToggleProps extends ValidationProps {
     align?: "left" | "right";
     disabled?: boolean;
     iconTabIndex?: number;
@@ -14,6 +13,13 @@ export interface InputIconToggleProps extends InputIconToggleStyleProps, Validat
     useValidationIcon?: boolean;
     /** Id of the validation icon */
     validationIconId?: string;
+    onClick?: (event: React.MouseEvent<HTMLSpanElement> | React.KeyboardEvent<HTMLSpanElement>) => void;
+    size?: "small" | "medium" | "large";
+    /**
+     * @private @ignore @internal
+     * Whether to apply focus styling to input icon
+     * */
+    blockFocusStyling?: boolean;
 }
-declare const InputIconToggle: ({ disabled, readOnly, size, inputIcon: type, onClick, onFocus, onBlur, onMouseDown, error, warning, info, useValidationIcon, align, iconTabIndex, validationIconId, }: InputIconToggleProps) => React.JSX.Element | null;
+declare const InputIconToggle: ({ disabled, readOnly, size, inputIcon: type, onClick, onFocus, onBlur, onMouseDown, error, warning, info, useValidationIcon, align, iconTabIndex, validationIconId, blockFocusStyling, }: InputIconToggleProps) => React.JSX.Element | null;
 export default InputIconToggle;

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

@@ -1 +1 @@
-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};
+import{jsx as o}from"react/jsx-runtime";import{useCallback as n}from"react";import i from"../../components/icon/icon.component.js";import t from"./input-icon-toggle.style.js";import{ValidationIcon as e}from"../validations/validation-icon.component.js";const r=({disabled:r,readOnly:l,size:a,inputIcon:c,onClick:s,onFocus:d,onBlur:u,onMouseDown:p,error:g,warning:f,info:m,useValidationIcon:y,align:I,iconTabIndex:b,validationIconId:k,blockFocusStyling:w})=>{const v=n((o=>{if(" "===o.key||"Enter"===o.key)return o.preventDefault(),null==s?void 0:s(o)}),[s]);return y&&!r&&(({error:o,warning:n,info:i})=>"string"==typeof(o||n||i||null))({error:g,warning:f,info:m})?o(t,{$size:a,children:o(e,{error:g,warning:f,info:m,size:a,onClick:s,onFocus:d,onBlur:u,isPartOfInput:!0,tabIndex:b,tooltipId:k,tooltipPosition:"right"===I?"left":"right"})}):c?o(t,{$size:a,onClick:s,onFocus:d,onBlur:u,onMouseDown:p,onKeyDown:s&&v,"data-element":"input-icon-toggle",$disabled:r,$readOnly:l,"data-role":"input-icon-toggle","aria-hidden":"true",tabIndex:w?void 0:-1,$blockFocusStyling:w,children:o(i,{disabled:r||l,type:c})}):null};export{r as default};

package/esm/__internal__/input-icon-toggle/input-icon-toggle.style.d.ts

@@ -1,13 +1,11 @@
 import { ValidationProps } from "../validations";
-export interface InputIconToggleStyleProps extends ValidationProps {
-    size?: "small" | "medium" | "large";
-    disabled?: boolean;
-    readOnly?: boolean;
-    onClick?: (event: React.MouseEvent<HTMLSpanElement> | React.KeyboardEvent<HTMLSpanElement>) => void;
+interface InputIconToggleStyleProps extends ValidationProps {
+    $size?: "small" | "medium" | "large";
+    $disabled?: boolean;
+    $readOnly?: boolean;
+    $blockFocusStyling?: boolean;
 }
-declare const InputIconToggleStyle: import("styled-components").StyledComponent<"span", any, {
-    onKeyDown: (event: React.KeyboardEvent<HTMLSpanElement>) => void | import("react").KeyboardEvent<HTMLSpanElement>;
-} & InputIconToggleStyleProps & {
+declare const InputIconToggleStyle: import("styled-components").StyledComponent<"span", any, InputIconToggleStyleProps & {
     tabIndex?: number;
-}, "onKeyDown">;
+}, never>;
 export default InputIconToggleStyle;

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

@@ -1 +1 @@
-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};
+import e,{css as t}from"styled-components";import s from"../legacy-input/input-sizes.style.js";import i from"../../style/utils/add-focus-styling.js";const l=e.span.withConfig({displayName:"input-icon-toggle.style__InputIconToggleStyle",componentId:"sc-d77c1680-0"})(["align-items:center;cursor:pointer;display:flex;justify-content:center;align-self:stretch;"," "," "," "," .pager-size-options &{margin-left:0;width:20px;height:24px;align-self:center;}.multi-select &,.filterable-select &{cursor:pointer;}"],(({$size:e="medium"})=>t(["width:",";"],s[e].height)),(({$disabled:e})=>e&&t(["cursor:not-allowed;"])),(({$readOnly:e})=>e&&t(["cursor:default;"])),(({$blockFocusStyling:e})=>!e&&t(["&:focus{","}"],i())));export{l as default};

package/esm/__internal__/label/index.d.ts

@@ -1,2 +1 @@
 export { default } from "./label.component";
-export type { LabelProps } from "./label.component";

package/esm/__internal__/label/label.component.d.ts

@@ -1,37 +1,20 @@
 import React from "react";
-import { StyledLabelProps, StyledLabelContainerProps } from "./label.style";
-import { ValidationProps } from "../validations";
-import { IconType } from "../../components/icon";
-export interface LabelProps extends ValidationProps, StyledLabelProps, StyledLabelContainerProps {
-    as?: "span" | "label";
+export interface LabelProps {
     /** Children elements */
     children?: React.ReactNode;
-    /** A message that the Help component will display */
-    help?: React.ReactNode;
-    /** Icon type */
-    helpIcon?: IconType;
-    /** A string that represents the ID of another form element */
+    /** HTML for attribute to associate label with input */
     htmlFor?: string;
-    /** The unique id of the label element */
-    labelId?: string;
-    /** The unique id of the Help component tooltip, used for accessibility */
-    tooltipId?: string;
-    /** Whether to show the validation icon */
-    useValidationIcon?: boolean;
-    /** Id of the validation icon */
-    validationIconId?: string;
-    /**
-     * @private
-     * @internal
-     * Sets className for component. INTERNAL USE ONLY. */
-    className?: string;
-    /** Sets aria-label for label element */
-    "aria-label"?: string;
-    /** Whether this component is shown against a dark background */
-    isDarkBackground?: boolean;
-    /** @internal @private */
-    onClick?: () => void;
+    /** Sets the id for the component */
+    id?: string;
+    /** If true, uses large font size */
+    size: "small" | "medium" | "large";
+    /** If true, displays a required indicator (*) */
+    isRequired?: boolean;
+    /** If true, the label will display in disabled styling */
+    disabled?: boolean;
+    /** If true, the label will display in read-only styling */
+    readOnly?: boolean;
 }
-export declare const Label: ({ align, as, children, disabled, error, help, helpIcon, htmlFor, info, inline, isDarkBackground, isRequired, labelId, pr, pl, tooltipId, useValidationIcon, validationIconId, warning, width, className, onClick, "aria-label": ariaLabel, isLarge, }: LabelProps) => React.JSX.Element;
-declare const _default: React.MemoExoticComponent<({ align, as, children, disabled, error, help, helpIcon, htmlFor, info, inline, isDarkBackground, isRequired, labelId, pr, pl, tooltipId, useValidationIcon, validationIconId, warning, width, className, onClick, "aria-label": ariaLabel, isLarge, }: LabelProps) => React.JSX.Element>;
+export declare const Label: ({ children, id, htmlFor, size, isRequired, disabled, readOnly, }: LabelProps) => React.JSX.Element;
+declare const _default: React.MemoExoticComponent<({ children, id, htmlFor, size, isRequired, disabled, readOnly, }: LabelProps) => React.JSX.Element>;
 export default _default;

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

@@ -1 +1 @@
-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 c}from"./label.style.js";import{ValidationIcon as s}from"../validations/validation-icon.component.js";import p 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";function m(e,r,o){return r in e?Object.defineProperty(e,r,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[r]=o,e}function f(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){m(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 h=({align:o,as:m="label",children:h,disabled:O,error:j,help:y,helpIcon:w,htmlFor:v,info:P,inline:k,isDarkBackground:I=!1,isRequired:D,labelId:L,pr:M,pl:E,tooltipId:F,useValidationIcon:S=!0,validationIconId:x,warning:B,width:q=30,className:C,onClick:N,"aria-label":R,isLarge:V})=>{const[$,z]=n(!1),{onMouseEnter:A,onMouseLeave:G}=t(u),{onMouseEnter:H,onMouseLeave:J}=t(b),K=i(d());let Q;return Q=k&&!o?"right":o||"left",e(c,{"data-role":"label-container",id:`label-container-${null!=L?L:K.current}`,align:Q,inline:k,width:q,pr:M,pl:E,className:C,onClick:N,children:[r(a,g(f({"data-element":"label",disabled:O,id:L},"label"===m?{htmlFor:v}:{}),{onMouseEnter:()=>{A&&A(),H&&H()},onMouseLeave:()=>{G&&G(),J&&J()},isRequired:D,as:m,"aria-label":R,isDarkBackground:I,isLarge:V,children:h})),(()=>{const e={onFocus:()=>z(!0),onBlur:()=>z(!1)};if(S&&(({error:e,warning:r,info:o,disabled:n})=>!n&&"string"==typeof(e||r||o))({error:j,warning:B,info:P,disabled:O})){const e=(({error:e,warning:r,info:o,inline:n})=>(e||r||o)&&n?"top":"right")({error:j,warning:B,info:P,inline:k});return r(p,{children:r(s,{tooltipId:x,error:j,warning:B,info:P,tooltipPosition:e,tooltipFlipOverrides:["top","bottom"]})})}return y&&r(p,g(f({},e),{children:r(l,{tooltipId:F,type:w,isFocused:$,children:y})}))})()]})};var O=o.memo(h);export{h as Label,O as default};
+import{jsx as e}from"react/jsx-runtime";import r from"react";import a from"./label.style.js";const l=({children:r,id:l,htmlFor:i,size:t,isRequired:d,disabled:m,readOnly:o})=>e(a,{id:l,htmlFor:i,$size:t,$isRequired:d,$disabled:m,$readOnly:o,"data-component":"label","data-element":"label",children:r});var i=r.memo(l);export{l as Label,i as default};

package/esm/__internal__/label/label.style.d.ts

@@ -1,25 +1,8 @@
-export interface StyledLabelProps {
-    /** If true, the component will be disabled */
-    disabled?: boolean;
-    /** Flag to configure component as mandatory */
-    isRequired?: boolean;
-    /** Flag to determine whether to use colours for dark backgrounds */
-    isDarkBackground?: boolean;
-    /** Set large font-size */
-    isLarge?: boolean;
+interface StyledLabelProps {
+    $size: "small" | "medium" | "large";
+    $isRequired?: boolean;
+    $disabled?: boolean;
+    $readOnly?: boolean;
 }
 declare const StyledLabel: import("styled-components").StyledComponent<"label", any, StyledLabelProps, never>;
-export interface StyledLabelContainerProps {
-    /** Label alignment */
-    align?: "left" | "right";
-    /** When true, label is placed in line an input */
-    inline?: boolean;
-    /** Padding right, integer multiplied by base spacing constant (8) */
-    pr?: 1 | 2;
-    /** Padding left, integer multiplied by base spacing constant (8) */
-    pl?: 1 | 2;
-    /** Label width */
-    width?: number;
-}
-export declare const StyledLabelContainer: import("styled-components").StyledComponent<"div", any, StyledLabelContainerProps, never>;
 export default StyledLabel;

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

@@ -1 +1 @@
-import i,{css as t}from"styled-components";const e=i.label.withConfig({displayName:"label.style__StyledLabel",componentId:"sc-16363be4-0"})([""," display:block;font-weight:var(--fontWeights500);&:hover{cursor:pointer;}"," "," ",""],(({isDarkBackground:i})=>t(["color:",";"],i?"var(--colorsUtilityYang100)":"var(--colorsUtilityYin090)")),(({isLarge:i})=>i&&t(["font-size:var(--fontSizes200);"])),(({isRequired:i})=>i&&t(['::after{content:"*";color:var(--colorsSemanticNegative500);font-weight:var(--fontWeights500);margin-left:var(--spacing050);}'])),(({disabled:i})=>i&&t(["color:var(--colorsUtilityYin030);&:hover{cursor:not-allowed;}"]))),o=i.div.withConfig({displayName:"label.style__StyledLabelContainer",componentId:"sc-16363be4-1"})(["display:flex;align-items:center;margin-bottom:8px;"," ",""],(({align:i})=>t(["justify-content:",";"],"right"!==i?"flex-start":"flex-end")),(({inline:i,pr:e,pl:o,width:a})=>i&&t(["box-sizing:border-box;margin-bottom:0;",";",";width:","%;"],e&&t(["padding-right:var(",");"],1===e?"--spacing100":"--spacing200"),o&&t(["padding-left:var(",");"],1===o?"--spacing100":"--spacing200"),a)));export{o as StyledLabelContainer,e as default};
+import e,{css as l}from"styled-components";const a=e=>{switch(e){case"small":return"var(--global-font-static-comp-medium-s)";case"large":return"var(--global-font-static-comp-medium-l)";default:return"var(--global-font-static-comp-medium-m)"}},t=e.label.withConfig({displayName:"label.style__StyledLabel",componentId:"sc-bf6c67e5-0"})(["",";font:",";"," .numeral-date-wrapper &,.time &{font:var(--global-font-static-comp-regular-m);}"],(({$disabled:e,$readOnly:l})=>e?"\n        cursor: not-allowed;\n        color: var(--input-labelset-label-disabled);\n      ":l?"\n        cursor: pointer;\n        color: var(--input-labelset-label-readOnly);\n      ":"\n      cursor: pointer;\n      color: var(--input-labelset-label-default);\n    "),(({$size:e})=>a(e)),(({$isRequired:e,$size:t,$disabled:r})=>e&&l(['display:inline-flex;align-items:center;::after{content:"*";color:',";font:",";margin-left:4px;}"],r?"var(--input-labelset-label-disabled)":"var(--input-labelset-label-required)",a(t))));export{t as default};

package/esm/__internal__/legacy-error-border/error-border.style.js

@@ -0,0 +1 @@
+import o,{css as e}from"styled-components";const r=o.span.withConfig({displayName:"error-border.style__ErrorBorder",componentId:"sc-16eee200-0"})(["",""],(({warning:o})=>e(["position:absolute;z-index:6;width:2px;background-color:",";left:-12px;bottom:0px;top:0px;"],o?"var(--colorsSemanticCaution500)":"var(--colorsSemanticNegative500)")));export{r as default};