carbon-react 162.12.0-beta.1 → 162.13.0

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

@@ -0,0 +1,67 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+import { ValidationProps } from "../validations";
+import { LabelProps } from "../legacy-label";
+import { TagProps } from "../utils/helpers/tags/tags";
+import { IconType } from "../../components/icon";
+interface CommonFormFieldProps extends MarginProps, ValidationProps {
+    /** If true, the component will be disabled */
+    disabled?: boolean;
+    /** @private @ignore */
+    loading?: boolean;
+    /** Help content to be displayed under an input */
+    fieldHelp?: React.ReactNode;
+    /** The unique id of the Help component tooltip, used for accessibility */
+    tooltipId?: string;
+    /** The unique id of the FieldHelp component */
+    fieldHelpId?: string;
+    /** Label content */
+    label?: React.ReactNode;
+    /** Text alignment of the label */
+    labelAlign?: "left" | "right";
+    /** A message that the Help component will display */
+    labelHelp?: React.ReactNode;
+    /** Help Icon type */
+    labelHelpIcon?: IconType;
+    /** The unique id of the label element */
+    labelId?: string;
+    /** When true label is inline */
+    labelInline?: boolean;
+    /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
+    labelSpacing?: 1 | 2;
+    /** Label width */
+    labelWidth?: number;
+    labelAs?: LabelProps["as"];
+    /** Id of the validation icon */
+    validationIconId?: string;
+    /**
+     * @private @ignore
+     * Flag dedicating if latest validation design should be used */
+    validationRedesignOptIn?: boolean;
+}
+export interface FormFieldProps extends CommonFormFieldProps, TagProps {
+    /** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
+    adaptiveLabelBreakpoint?: number;
+    /** Content to be rendered inside the FormField */
+    children?: React.ReactNode;
+    /**
+     * If true, the FieldHelp will be displayed inline
+     * To be used with labelInline prop set to true
+     */
+    fieldHelpInline?: boolean;
+    /** Id of the element a label should be bound to */
+    id: string;
+    /** Flag to configure component as mandatory */
+    isRequired?: boolean;
+    /** Whether to show the validation icon */
+    useValidationIcon?: boolean;
+    /** String value for max-width of `field-line` element */
+    maxWidth?: string;
+    /** @private @internal @ignore */
+    "data-component"?: string;
+}
+declare const FormField: {
+    ({ maxWidth, children, "data-component": dataComponent, disabled, loading, fieldHelp: fieldHelpContent, fieldHelpInline, error, warning, info, tooltipId, fieldHelpId, label, labelId, labelAlign, labelHelp, labelHelpIcon, labelInline, labelSpacing, labelWidth, labelAs, id, useValidationIcon, adaptiveLabelBreakpoint, isRequired, validationIconId, validationRedesignOptIn, ...rest }: FormFieldProps): React.JSX.Element;
+    displayName: string;
+};
+export default FormField;

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

@@ -0,0 +1 @@
+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,useValidationIcon:U,adaptiveLabelBreakpoint:$,isRequired:z,validationIconId:C,validationRedesignOptIn:G}=g,J=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","useValidationIcon","adaptiveLabelBreakpoint","isRequired","validationIconId","validationRedesignOptIn"]);const K=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===K,`Prop \`${K}\` cannot be used in conjunction with \`disabled\`. Use \`readOnly\` if you require users to see validations with a non-interactive field`);const M=f($);let Q=E;$&&(Q=M);const{setErrors:T,setWarnings:X,setInfos:Y}=r(m),{tabId:Z}=r(y),ee=u(J),te=l(!1);i((()=>(te.current=!0,()=>{te.current=!1})),[]),o((()=>(T&&T(N,Z||"",x||!1),X&&X(N,Z||"",H||!1),Y&&Y(N,Z||"",k||!1),()=>{te.current||(T&&T(N,Z||"",!1),X&&X(N,Z||"",!1),Y&&Y(N,Z||"",!1))})),[N,T,X,x,H,k,Z,Y]);const ne=P?t(c,{labelInline:Q,labelWidth:V,id:W,children:P}):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){O(e,t,n[t])}))}return e}({},b(h,J),ee),le=null!=(le={children:[e(d,{"data-role":"field-line",inline:Q,maxWidth:I,children:[A&&t(p,{labelId:R,align:q,disabled:v,error:!G&&x,warning:!G&&H,info:!G&&k,help:B,tooltipId:S,htmlFor:N,helpIcon:D,inline:Q,width:V,useValidationIcon:U,pr:F,isRequired:z,validationIconId:C,as:L,children:A}),j]}),ne]})?le:{},Object.getOwnPropertyDescriptors?Object.defineProperties(re,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(re,e,Object.getOwnPropertyDescriptor(le,e))})),re));var re,le};g.displayName="FormField";export{g as default};

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

@@ -0,0 +1,10 @@
+declare const FormFieldStyle: import("styled-components").StyledComponent<"div", any, {
+    theme: object;
+}, "theme">;
+export interface FieldLineStyleProps {
+    inline?: boolean;
+    maxWidth?: string;
+}
+declare const FieldLineStyle: import("styled-components").StyledComponent<"div", any, FieldLineStyleProps, never>;
+export { FieldLineStyle };
+export default FormFieldStyle;

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

@@ -0,0 +1 @@
+import e,{css as t}from"styled-components";import{space as i}from"styled-system";import o from"../../style/themes/apply-base-theme.js";const m=e.div.attrs(o).withConfig({displayName:"form-field.style__FormFieldStyle",componentId:"carbon_v162_12_0__sc-ec2b28a0-0"})(["position:relative;margin-bottom:var(--fieldSpacing);& + &{margin-top:16px;}&&&{","}"],i),a=e.div.withConfig({displayName:"form-field.style__FieldLineStyle",componentId:"carbon_v162_12_0__sc-ec2b28a0-1"})(["",""],(({inline:e,maxWidth:i})=>t(["display:",";",""],e?"flex":"block",i&&`max-width: ${i};`)));export{a as FieldLineStyle,m as default};

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

@@ -0,0 +1,2 @@
+export { default } from "./form-field.component";
+export type { FormFieldProps } from "./form-field.component";

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

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

package/esm/__internal__/full-screen-heading/full-screen-heading.component.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { StyledFullScreenHeadingProps } from "./full-screen-heading.style";
+export interface FullScreenHeadingProps extends StyledFullScreenHeadingProps {
+    children?: React.ReactNode;
+}
+declare const FullScreenHeading: React.ForwardRefExoticComponent<FullScreenHeadingProps & React.RefAttributes<HTMLDivElement>>;
+export default FullScreenHeading;

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

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import t from"react";import r from"../utils/helpers/tags/tags.js";import n,{StyledHeaderContainer as o}from"./full-screen-heading.style.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}const s=t.forwardRef(((t,s)=>{const{children:i,hasContent:l,hasCloseButton:a}=t;return e(n,(f=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){c(e,t,r[t])}))}return e}({hasContent:l,hasCloseButton:a},r("full-screen-heading",t)),u=null!=(u={ref:s,children:e(o,{children:i})})?u:{},Object.getOwnPropertyDescriptors?Object.defineProperties(f,Object.getOwnPropertyDescriptors(u)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(u)).forEach((function(e){Object.defineProperty(f,e,Object.getOwnPropertyDescriptor(u,e))})),f));var f,u}));s.displayName="FullScreenHeading";export{s as default};

package/esm/__internal__/full-screen-heading/full-screen-heading.style.d.ts

@@ -0,0 +1,7 @@
+export interface StyledFullScreenHeadingProps {
+    hasContent?: boolean;
+    hasCloseButton?: boolean;
+}
+export declare const StyledHeaderContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledFullScreenHeading: import("styled-components").StyledComponent<"div", any, StyledFullScreenHeadingProps, never>;
+export default StyledFullScreenHeading;

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

@@ -0,0 +1 @@
+import a,{css as e}from"styled-components";const t=a.div.withConfig({displayName:"full-screen-heading.style__StyledHeaderContainer",componentId:"carbon_v162_12_0__sc-ad8dad23-0"})(["display:flex;flex-wrap:wrap;min-width:100%;"]),d=a.div.withConfig({displayName:"full-screen-heading.style__StyledFullScreenHeading",componentId:"carbon_v162_12_0__sc-ad8dad23-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;}",' [data-element="dialog-title-container"]{&:has([data-element="dialog-title"]){width:auto;margin-bottom:24px;[data-element="dialog-title"]{background-color:transparent;padding-bottom:0;margin:22px 24px 0 0;}}&:not(:has([data-element="dialog-title"])){width:100%;}}'],(({hasContent:a})=>a&&e(["border-bottom:1px solid var(--colorsUtilityMajor050);"])),(({hasCloseButton:a})=>a&&e(["&{padding-right:64px;}"])));export{t as StyledHeaderContainer,d as default};

package/esm/__internal__/full-screen-heading/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./full-screen-heading.component";
+export type { FullScreenHeadingProps } from "./full-screen-heading.component";

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

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

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

@@ -0,0 +1,2 @@
+declare const hintTextStyleOverrides: import("styled-components").FlattenSimpleInterpolation;
+export default hintTextStyleOverrides;

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

@@ -0,0 +1 @@
+import{css as e}from"styled-components";const t=e([".search.inverse &{color:var(--input-labelset-inverse-label-alt);}"]),l=e(["",""],t);export{l as default};

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

@@ -0,0 +1,14 @@
+import React from "react";
+export interface HintTextProps {
+    /** Child elements */
+    children?: React.ReactNode;
+    /** Sets the id for the component */
+    id?: string;
+    size: "small" | "medium" | "large";
+    /** If true, the hint text will display in disabled styling */
+    disabled?: boolean;
+    /** Class name to target component */
+    className?: string;
+}
+export declare const HintText: ({ children, id, size, disabled, className, }: HintTextProps) => React.JSX.Element;
+export default HintText;

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

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import"react";import t from"./hint-text.style.js";const i=({children:i,id:a,size:d,disabled:s,className:r})=>e(t,{className:r,"data-element":"input-hint","data-role":"hint-text",id:a,$size:d,$disabled:s,"aria-disabled":s||void 0,children:i});export{i as HintText,i as default};

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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1 @@
+import t from"styled-components";import e from"./hint-text-style-overrides.style.js";const l=t.span.withConfig({displayName:"hint-text.style__StyledHintText",componentId:"carbon_v162_12_0__sc-25859ede-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)),e);export{l as default};

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

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

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

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

package/esm/__internal__/i18n-context/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("react").Context<import("../../locales").default>;
+export default _default;

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

@@ -0,0 +1 @@
+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.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./input.component";
+export type { InputProps } from "./input.component";

package/esm/__internal__/input/index.js

@@ -0,0 +1 @@
+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 searchNewStyleOverrides: import("styled-components").FlattenSimpleInterpolation;
+export declare const selectStyleOverrides: ($size?: string, $isDisabled?: boolean, $isReadOnly?: boolean) => import("styled-components").FlattenSimpleInterpolation;
+export declare const numeralDateStyles: import("styled-components").FlattenSimpleInterpolation;
+export declare const passwordStyleOverrides: import("styled-components").FlattenSimpleInterpolation;

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

@@ -0,0 +1 @@
+import{css as a}from"styled-components";import e from"../../style/utils/add-focus-styling.js";const o=a([".date &{.input-text-container input{padding:0 0 0 12px;margin-right:-12px;}}"]),t="url(\"data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.9497 5.05022C15.3403 5.44074 15.3403 6.07391 14.9497 6.46443L11.4142 9.99997L14.9497 13.5355C15.3403 13.926 15.3403 14.5592 14.9497 14.9497C14.5592 15.3402 13.9261 15.3402 13.5355 14.9497L10 11.4142L6.46446 14.9497C6.07394 15.3402 5.44077 15.3402 5.05025 14.9497C4.65972 14.5592 4.65972 13.926 5.05025 13.5355L8.58578 9.99997L5.05025 6.46443C4.65972 6.07391 4.65972 5.44074 5.05025 5.05022C5.44077 4.65969 6.07394 4.65969 6.46446 5.05022L10 8.58575L13.5355 5.05022C13.9261 4.65969 14.5592 4.65969 14.9497 5.05022Z'/%3E%3C/svg%3E\")",r=a(['.search &{--search-clear-icon-color:var(--button-typical-subtle-label-default);--search-button-icon-color:var(--button-typical-subtle-label-default);--search-button-hover-bg:var(--button-typical-subtle-bg-hover);--search-button-hover-icon-color:var(--button-typical-subtle-label-hover);input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;width:var(--global-size-2-xs);height:var(--global-size-2-xs);background-color:var(--search-clear-icon-color);-webkit-mask:center / contain no-repeat ',";mask:center / contain no-repeat ",';cursor:pointer;}button{border-radius:var(--global-radius-none) var(--global-radius-action-m) var(--global-radius-action-m) var(--global-radius-none);}button:hover{background-color:var(--search-button-hover-bg);}button span[type="search"]{color:var(--search-button-icon-color);}button:hover span[type="search"]{color:var(--search-button-hover-icon-color);}&:focus-within:has(:focus:not(button)){box-shadow:none;-webkit-box-shadow:none;}.input-text-container input[type="search"]:focus{border-radius:var(--global-radius-action-m) 0 0 var(--global-radius-action-m);'," z-index:2;}}"],t,t,e()),n=a(['.search.inverse &{--search-clear-icon-color:var( --button-typical-subtle-inverse-label-default );--search-button-icon-color:var( --button-typical-subtle-inverse-label-default );--search-button-hover-bg:var(--button-typical-subtle-inverse-bg-hover);--search-button-hover-icon-color:var( --button-typical-subtle-inverse-label-hover );background-color:var(--input-typical-inverse-bg-default);&[data-role="input-container"]{border-color:var(--input-typical-inverse-border-default);}.input-text-container input[type="search"]{color:var(--input-typical-inverse-txt-default);}}.search.inverse.error &{border-color:var(--input-validation-inverse-border-error);}']),l=a([""," ",""],r,n),i=a(['[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;}}}']),c=a([".multi-select &,.filterable-select &{.input-text-container:not(.disabled):not(.read-only){cursor:text;input{cursor:text;}}}"]),s=a(['[data-element="simple-select-input"] &{input{opacity:0;}input{cursor:pointer;}[data-element="textbox-prefix"]{margin-left:var(--global-space-comp-none);margin-right:var(--global-space-comp-m);}}']),p=(e,o,t)=>a([""," "," "," "," ",""],s,((e,o)=>a(['&[data-is-transparent="true"]{&&&{background:transparent;border:none;}'," input{text-align:right;position:absolute;padding:var(--global-space-none);&::placeholder{color:var(--colorsUtilityYin100);}}}"],!e&&!o&&a(["cursor:pointer;*{cursor:pointer;}"])))(o,t),i,c,(e=>a([".multi-select &{input{padding:var(--global-space-none);width:30px;}.input-text-container{"," "," ",' span[data-element="textbox-prefix"]{margin-left:var(--global-space-comp-none);margin-right:var(--global-space-comp-m);}}}'],"small"===e&&a(["padding:var(--global-space-none) var(--global-space-comp-2-xl) var(--global-space-none) var(--global-space-comp-s);"]),"medium"===e&&a(["padding:var(--global-space-none) 40px var(--global-space-none) var(--global-space-comp-m);"]),"large"===e&&a(["padding:var(--global-space-none) 48px var(--global-space-none) var(--global-space-comp-l);"])))(e)),b=a([".numeral-date-wrapper &{.input-text-container input{text-align:left;}}"]),u=a(['[data-component="password"] &{&:focus-within{box-shadow:none !important;-webkit-box-shadow:none !important;outline:none !important;}[data-role="input"]:focus{',' border-radius:var(--global-radius-action-m) var(--global-radius-none) var(--global-radius-none) var(--global-radius-action-m);z-index:1;}[data-role="input"]:focus ~ [data-role="password-divider"]{visibility:hidden;}& [data-component="button"]{border-radius:var(--global-radius-none) var(--global-radius-action-m) var(--global-radius-action-m) var(--global-radius-none);border-left:none;}}'],e());export{o as dateStyleOverrides,b as numeralDateStyles,u as passwordStyleOverrides,l as searchNewStyleOverrides,p as selectStyleOverrides};

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

@@ -0,0 +1,56 @@
+import React from "react";
+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;
+    /** If true, the component will be disabled */
+    disabled?: boolean;
+    /** HTML id attribute of the input */
+    id?: string;
+    /** 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 focus */
+    onFocus?: (ev: React.FocusEvent<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;
+    /** The value of the input */
+    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;
+    /** ID for the prefix span element */
+    prefixId?: string;
+    /** Additional children to be rendered before the input */
+    leftChildren?: React.ReactNode;
+    /** Text alignment within the input */
+    align?: "left" | "right";
+    /**
+     * @private @internal @ignore
+     * Ref passed to the input container element.
+     */
+    containerRef?: React.Ref<HTMLDivElement>;
+    /**
+     * @private @internal @ignore
+     */
+    "data-is-transparent"?: boolean;
+    /**
+     * @private @internal @ignore
+     */
+    "data-is-open"?: boolean;
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export default Input;

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

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import r,{useRef as n,useContext as i,useEffect as a,useCallback as o}from"react";import l from"./input.style.js";import c from"../utils/helpers/combine-refs/index.js";import s from"../../components/select/__internal__/select-textbox/__internal__/select-textbox.context.js";function d(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){d(e,t,r[t])}))}return e}const p=r.forwardRef(((r,d)=>{var{align:p="left","aria-describedby":f,"aria-labelledby":b,autoFocus:m,containerRef:y,error:x,"data-is-transparent":O,"data-is-open":h,children:v,disabled:g,id:j,inputIcon:_,inputWidth:w,leftChildren:$,name:P,onFocus:S,prefix:F,prefixId:I,readOnly:R,size:E,type:z="text"}=r,k=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","containerRef","error","data-is-transparent","data-is-open","children","disabled","id","inputIcon","inputWidth","leftChildren","name","onFocus","prefix","prefixId","readOnly","size","type"]);const C=n(null),D=c(d,C),{selectType:T}=i(s);a((()=>{var e;m&&(null===(e=C.current)||void 0===e||e.focus())}),[m]);const W=o((e=>{var t;null==S||S(e),"text"===z&&(t=C,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)}})))}),[S,z]),N=e("span",{id:I,"data-element":"textbox-prefix",children:F});return e(l,{ref:y,$align:p,"data-role":"input-container",$error:x,$size:E,$isDisabled:g,$isReadOnly:R,"data-is-transparent":O,"data-is-open":h,children:t("div",{"data-role":"input-text-container",role:"presentation",className:`input-text-container ${g?"disabled":""} ${R?"read-only":""}`,children:[F&&"multi"===T&&N,$,F&&"multi"!==T&&N,e("input",u({ref:D,"data-element":"input","data-role":"input",disabled:g,readOnly:R,"aria-describedby":f,"aria-labelledby":b,type:z,onFocus:W,id:j,name:P,"data-has-autofocus":!!m||void 0},k)),_,v]})})}));export{p as default};

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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1 @@
+import a,{css as o}from"styled-components";import e from"../../style/utils/add-focus-styling.js";import{dateStyleOverrides as r,searchNewStyleOverrides as t,selectStyleOverrides as l,numeralDateStyles as i,passwordStyleOverrides as n}from"./input-style-overrides.style.js";const d=a.div.withConfig({displayName:"input.style__InputContainer",componentId:"carbon_v162_12_0__sc-a33bdc1e-0"})([""," "," "," "," ",' &[data-is-open="true"]{z-index:var( --adaptiveSidebarModalBackdrop,var(--carbon-zindex-above-all) );&:focus-within:has(:focus:not(button)){z-index:var( --adaptiveSidebarModalBackdrop,var(--carbon-zindex-above-all) );}}',""],(({$align:a,$error:r,$isDisabled:t,$isReadOnly:l,$size:i})=>o(["display:flex;align-items:center;align-self:stretch;max-width:100%;border-radius:var(--global-radius-action-m);.time &{box-sizing:border-box;}"," "," "," &&&{"," ","}"," "," .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&&o(["min-height:var(--global-size-s);"]),"medium"===i&&o(["min-height:var(--global-size-m);"]),"large"===i&&o(["min-height:var(--global-size-l);"]),l&&o(["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;}"],e()),t&&o(["cursor:not-allowed;background:var(--input-typical-bg-disabled);border:var(--global-borderwidth-xs) solid var(--input-typical-border-disabled);*{cursor:not-allowed;}"]),!t&&!l&&o(["cursor:text;&:focus-within:has(:focus:not(button)){"," z-index:2;}"],e()),!t&&!l&&o(["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,l&&o(["color:var(--input-typical-txt-read-only);"]),t&&o(["color:var(--input-typical-txt-disabled);"]),!l&&!t&&o(["color:var(--input-typical-txt-default);"]),"small"===i&&o(["font:var(--global-font-static-comp-regular-s);padding:var(--global-space-none) var(--global-space-comp-s);"]),"medium"===i&&o(["font:var(--global-font-static-comp-regular-m);padding:var(--global-space-none) var(--global-space-comp-m);"]),"large"===i&&o(["font:var(--global-font-static-comp-regular-l);padding:var(--global-space-none) var(--global-space-comp-l);"]))),r,t,(({$size:a,$isDisabled:o,$isReadOnly:e})=>l(a,o,e)),i,n);export{d as default};

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

@@ -0,0 +1,3 @@
+export { InputBehaviour, InputContext } from "./input-behaviour.component";
+export { InputGroupBehaviour, InputGroupContext, } from "./input-group-behaviour.component";
+export type { InputContextProps } from "./useInputBehaviour";

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

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

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

@@ -0,0 +1,8 @@
+import React from "react";
+import { InputContextProps } from "./useInputBehaviour";
+declare const InputContext: React.Context<InputContextProps>;
+export interface InputBehaviourProps {
+    children?: React.ReactNode;
+}
+declare const InputBehaviour: ({ children }: InputBehaviourProps) => React.JSX.Element;
+export { InputContext, InputBehaviour };

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

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

package/esm/__internal__/input-behaviour/input-group-behaviour.component.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { InputContextProps } from "./useInputBehaviour";
+import { InputBehaviourProps } from "./input-behaviour.component";
+declare const InputGroupContext: React.Context<InputContextProps>;
+export interface InputGroupBehaviourProps extends InputBehaviourProps {
+    blockGroupBehaviour?: boolean;
+}
+declare const InputGroupBehaviour: ({ children, blockGroupBehaviour, }: InputGroupBehaviourProps) => React.JSX.Element;
+export { InputGroupContext, InputGroupBehaviour };

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

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

package/esm/__internal__/input-behaviour/useInputBehaviour.d.ts

@@ -0,0 +1,14 @@
+export interface InputContextProps {
+    hasFocus?: boolean;
+    hasMouseOver?: boolean;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    onMouseDown?: () => void;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+    inputRef?: (input: {
+        current: HTMLInputElement | HTMLTextAreaElement | null;
+    }) => void;
+}
+declare const useInputBehaviour: (blockGroupBehaviour?: boolean) => InputContextProps;
+export default useInputBehaviour;

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

@@ -0,0 +1 @@
+import{useState as o,useRef as e,useCallback as n,useMemo as r}from"react";const u=u=>{const[t,s]=o(!1),[c,l]=o(!1),a=e(null),i=n((()=>s(!0)),[]),v=n((()=>s(!1)),[]),d=n((o=>{a.current=o.current}),[]),f=n((()=>{requestAnimationFrame((()=>{var o;null==a||null===(o=a.current)||void 0===o||o.focus({preventScroll:!0})}))}),[]),m=n((()=>l(!0)),[]),p=n((()=>l(!1)),[]);return r((()=>({hasFocus:t,hasMouseOver:c,onFocus:u?void 0:i,onBlur:u?void 0:v,onMouseDown:f,onMouseEnter:u?void 0:m,onMouseLeave:u?void 0:p,inputRef:d})),[t,c,i,v,f,u,m,p,d])};export{u as default};

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

@@ -0,0 +1,2 @@
+export { default } from "./input-icon-toggle.component";
+export type { InputIconToggleProps } from "./input-icon-toggle.component";

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

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

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

@@ -0,0 +1,25 @@
+import React from "react";
+import { IconType } from "../../components/icon";
+import { ValidationProps } from "../validations/validation-icon.component";
+export interface InputIconToggleProps extends ValidationProps {
+    align?: "left" | "right";
+    disabled?: boolean;
+    iconTabIndex?: number;
+    inputIcon?: IconType;
+    onBlur?: (ev: React.FocusEvent<HTMLElement>) => void;
+    onFocus?: (ev: React.FocusEvent<HTMLElement>) => void;
+    onMouseDown?: (ev: React.MouseEvent<HTMLElement>) => void;
+    readOnly?: boolean;
+    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, blockFocusStyling, }: InputIconToggleProps) => React.JSX.Element | null;
+export default InputIconToggle;

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

@@ -0,0 +1 @@
+import{jsx as o}from"react/jsx-runtime";import{useCallback as n}from"react";import i from"../../components/icon/icon.component.js";import"../../components/icon/icon.style.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:m,warning:g,info:f,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:m,warning:g,info:f})?o(t,{$size:a,children:o(e,{error:m,warning:g,info:f,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

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

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

@@ -0,0 +1 @@
+import t,{css as e}from"styled-components";import s from"../legacy-input/input-sizes.style.js";import o from"../../style/utils/add-focus-styling.js";const l=t.span.withConfig({displayName:"input-icon-toggle.style__InputIconToggleStyle",componentId:"carbon_v162_12_0__sc-9c9529d2-0"})(["align-items:center;cursor:pointer;display:flex;justify-content:center;align-self:stretch;"," "," "," "," .multi-select &,.filterable-select &{cursor:pointer;}"],(({$size:t="medium"})=>e(["width:",";"],s[t].height)),(({$disabled:t})=>t&&e(["cursor:not-allowed;"])),(({$readOnly:t})=>t&&e(["cursor:default;"])),(({$blockFocusStyling:t})=>!t&&e(["&:focus{","}"],o())));export{l as default};

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

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

package/esm/__internal__/label/index.js

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

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

@@ -0,0 +1,2 @@
+declare const labelStyleOverrides: import("styled-components").FlattenSimpleInterpolation;
+export default labelStyleOverrides;

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

@@ -0,0 +1 @@
+import{css as e}from"styled-components";const t=e([".search.inverse &{color:var(--input-labelset-inverse-label-default);}"]),l=e(["",""],t);export{l as default};

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

@@ -0,0 +1,24 @@
+import React from "react";
+export interface LabelProps {
+    /** Children elements */
+    children?: React.ReactNode;
+    /** HTML for attribute to associate label with input */
+    htmlFor?: string;
+    /** 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;
+    /** Class name to target component */
+    className?: string;
+    /** onClick event */
+    onClick?: () => void;
+}
+export declare const Label: ({ children, id, htmlFor, size, isRequired, disabled, readOnly, className, onClick, }: LabelProps) => React.JSX.Element;
+declare const _default: React.MemoExoticComponent<({ children, id, htmlFor, size, isRequired, disabled, readOnly, className, onClick, }: LabelProps) => React.JSX.Element>;
+export default _default;

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

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import a from"react";import l from"./label.style.js";const i=({children:a,id:i,htmlFor:r,size:d,isRequired:s,disabled:o,readOnly:t,className:m,onClick:n})=>e(l,{className:m,id:i,htmlFor:r,$size:d,$isRequired:s,$disabled:o,$readOnly:t,"data-component":"label","data-element":"label","aria-disabled":o||void 0,onClick:n,children:a});var r=a.memo(i);export{i as Label,r as default};

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

@@ -0,0 +1,8 @@
+interface StyledLabelProps {
+    $size: "small" | "medium" | "large";
+    $isRequired?: boolean;
+    $disabled?: boolean;
+    $readOnly?: boolean;
+}
+declare const StyledLabel: import("styled-components").StyledComponent<"label", any, StyledLabelProps, never>;
+export default StyledLabel;

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

@@ -0,0 +1 @@
+import e,{css as l}from"styled-components";import t from"./label-style-overrides.style.js";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)"}},r=e.label.withConfig({displayName:"label.style__StyledLabel",componentId:"carbon_v162_12_0__sc-8d982d1-0"})(["",";font:",";"," ",' .fieldset-required-input &{::after{content:"";margin-left:0;}}'],(({$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-read-only);\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))),t);export{r as default};

package/esm/__internal__/legacy-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__/legacy-error-border/error-border.style.js

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

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

@@ -0,0 +1,27 @@
+import React from "react";
+export interface HintTextProps {
+    /** The alignment of the hint text */
+    align?: "left" | "right";
+    /** Children elements */
+    children?: React.ReactNode;
+    /** Sets the font weight for the hint text */
+    fontWeight?: string;
+    /** 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;
+}
+export declare const HintText: ({ align, children, fontWeight, id, isComponentInline, isDarkBackground, isDisabled, marginBottom, marginTop, maxWidth, isLarge, }: HintTextProps) => React.JSX.Element | null;
+export default HintText;

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

@@ -0,0 +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:s,isComponentInline:d=!1,isDarkBackground:m=!1,isDisabled:l=!1,marginBottom:g="var(--spacing100)",marginTop:p="var(--spacing000)",maxWidth:c,isLarge:h})=>{const{validationRedesignOptIn:f}=t(a);return d&&!f?null:i(n,{align:r,"aria-disabled":l||void 0,"data-element":"input-hint","data-role":"hint-text",fontWeight:e,id:s,isDarkBackground:m,isDisabled:l,marginBottom:g,marginTop:p,maxWidth:c,isLarge:h,children:o})};export{r as HintText,r as default};

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

@@ -0,0 +1,3 @@
+import { HintTextProps } from "./hint-text.component";
+declare const StyledHintText: import("styled-components").StyledComponent<"div", any, HintTextProps, never>;
+export default StyledHintText;

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

@@ -0,0 +1 @@
+import t,{css as i}from"styled-components";const e=t.div.withConfig({displayName:"hint-text.style__StyledHintText",componentId:"carbon_v162_12_0__sc-88bb91cf-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:e})=>i(["color:",";"],((t,i)=>t?"var(--colorsUtilityYang080)":i?"var(--input-labelset-label-disabled)":"var(--colorsUtilityYin055)")(t,e))),(({fontWeight:t})=>t&&i(["font-weight:",";"],t)),(({maxWidth:t})=>t&&i(["max-width:",";"],t)));export{e as default};

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

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

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

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

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

@@ -0,0 +1,5 @@
+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;

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

@@ -0,0 +1 @@
+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__/legacy-input/input-presentation.component.d.ts

@@ -0,0 +1,36 @@
+import React from "react";
+import { BorderRadiusType } from "../../components/box/box.component";
+import { ValidationProps } from "../validations";
+export type Sizes = "small" | "medium" | "large";
+export interface CommonInputPresentationProps extends ValidationProps {
+    children: React.ReactNode;
+    /** If true, the component will be disabled */
+    disabled?: boolean;
+    /** The default value alignment on the input */
+    align?: string;
+    /** Emphasized part of the displayed text */
+    prefix?: string;
+    /** The width of the input as a percentage */
+    inputWidth?: number;
+    /**
+     * Prop for specifying the max-width of the input.
+     * Leaving the `maxWidth` prop with no value will default the width to '100%'
+     */
+    maxWidth?: string;
+    /** If true, the component will be read-only */
+    readOnly?: boolean;
+    /** Size of an input */
+    size?: Sizes;
+    /** If true, the component has an icon rendered inside */
+    hasIcon?: boolean;
+    /** Specify a custom border radius. Any valid border-radius design token, or an array of border-radius design tokens. */
+    borderRadius?: BorderRadiusType | BorderRadiusType[];
+    /** Renders with transparent borders. This will not effect focus styling or validation borders  */
+    hideBorders?: boolean;
+}
+export interface InputPresentationProps extends CommonInputPresentationProps {
+    /** Content to be rendered before the input */
+    positionedChildren?: React.ReactNode;
+}
+declare const InputPresentation: ({ align, borderRadius, children, disabled, error, hasIcon, hideBorders, info, inputWidth, maxWidth, positionedChildren, prefix, readOnly, size, warning, }: InputPresentationProps) => JSX.Element;
+export default InputPresentation;

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

@@ -0,0 +1 @@
+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};