@asphalt-react/textfield
Version:
Textfield
129 lines (97 loc) • 47.6 kB
JavaScript
'use strict';
var React = require('react');
var cn = require('classnames');
var PropTypes = require('prop-types');
var helper = require('-react/helper');
var context = require('-react/context');
var qualifier = require('-react/qualifier');
var iconpack = require('-react/iconpack');
var toggleButton = require('-react/toggle-button');
var icontuner = require('-react/icontuner');
var popover = require('-react/popover');
var button = require('-react/button');
var selection = require('-react/selection');
function _extends() {
return _extends = Object.assign ? Object.assign.bind() : function (n) {
for (var e = 1; e < arguments.length; e++) {
var t = arguments[e];
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
}
return n;
}, _extends.apply(null, arguments);
}
function styleInject(css, ref) {
if ( ref === void 0 ) ref = {};
var insertAt = ref.insertAt;
if (!css || typeof document === 'undefined') { return; }
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
var css_248z$4 = ".Base__iUqlA {\n /* default custom properties */\n --surface-color: var(--interactive-surface-primary-default, #ffffff);\n --font-color: var(--content-primary, #2d2e34);\n --placeholder-color: var(--content-muted, #8e919b);\n --border-color: var(--interactive-default, #cbcfd7);\n --border-radius: var(--roundness-user-input-M, 0.375rem);\n --focus-appearance: var(--focus-outline, 2px solid);\n --focus-color: var(--interactive-focus, #86afff);\n --focus: var(--focus-appearance) var(--focus-color);\n\n background: var(--surface-color);\n border: 1px solid var(--border-color);\n border-radius: var(--border-radius);\n color: var(--font-color);\n font: var(--font);\n box-sizing: border-box;\n min-width: 160px;\n}\n\n.Base__iUqlA:focus-visible {\n outline: var(--focus);\n}\n\n.Base__iUqlA:hover {\n --surface-color: var(--interactive-surface-primary-hover, #f5f7fa);\n}\n\n.Base__iUqlA:hover {\n --surface-color: var(--interactive-surface-primary-hover, #f5f7fa);\n}\n\n.Base__iUqlA:active {\n --border-color: var(--interactive-active, #1c3abb);\n}\n\n.Base__iUqlA::-moz-placeholder {\n color: var(--placeholder-color);\n}\n\n.Base__iUqlA::placeholder {\n color: var(--placeholder-color);\n}\n\n.Base__iUqlA:disabled,\n.disabled__FTNVe,\n.disabled__FTNVe:hover,\n.disabled__FTNVe:active,\n.disabled__FTNVe:focus-visible,\n.Base__iUqlA:hover .disabled__FTNVe {\n --border-color: var(--interactive-disabled, #eaecf0);\n --surface-color: var(--interactive-surface-disabled, #f1f3f6);\n --font-color: var(--content-disabled, #9a9eaa);\n -webkit-text-fill-color: var(--content-disabled, #9a9eaa);\n /* override Safari disabled input font color */\n cursor: not-allowed;\n outline: none;\n}\n\n@supports not selector(:focus-visible) {\n .Base__iUqlA:focus {\n outline: var(--focus);\n }\n\n .borderless__6cr-3:focus {\n outline: none;\n }\n}\n\n.baseLineHeight__-JUTS {\n line-height: 1;\n}\n\n.wrapper__qkcx5 {\n display: inline-grid;\n grid-auto-flow: column;\n align-items: center;\n gap: 1rem;\n}\n\n.wrapper__qkcx5:hover .Base__iUqlA {\n --surface-color: var(--interactive-surface-primary-hover, #f5f7fa);\n}\n\n.wrapper__qkcx5:has(:is(.Base__iUqlA):focus):focus-within {\n outline: var(--focus);\n}\n\n.shrink__Zoj2j {\n gap: 0;\n}\n\n.bezel__3WJlH {\n padding-inline: 1rem;\n}\n\n/** size classes */\n\n.lFont__vnnwV {\n --font: var(\n --text-regular-L,\n 500 1.125rem/1.618 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n}\n\n.lSize__ZAxqS {\n padding: 1.1875rem 1rem;\n max-height: 56px;\n}\n\n.wrapper__qkcx5 > .lSize__ZAxqS {\n max-height: 54px;\n}\n\n.mFont__LDr6S {\n --font: var(\n --text-regular-M,\n 500 1rem/1.618 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n}\n\n.mSize__yn6oo {\n padding: 1rem 1rem;\n max-height: 48px;\n}\n\n.wrapper__qkcx5 > .mSize__yn6oo {\n max-height: 46px;\n}\n\n.sFont__a0yJl {\n --font: var(\n --text-regular-S,\n 500 0.875rem/1.618 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n}\n\n.sSize__nOg4a {\n padding: 0.8125rem 1rem;\n max-height: 40px;\n}\n\n.inputXs__Jyc1b {\n margin: -0.6875rem 0;\n}\n\n.wrapper__qkcx5 > .sSize__nOg4a {\n max-height: 38px;\n}\n\n.xsFont__ZoXFc {\n --font: var(\n --text-regular-S,\n 500 0.875rem/1.618 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n}\n\n.xsSize__WjaAR {\n padding: 0.6875rem 1rem;\n max-height: 36px;\n}\n\n.wrapper__qkcx5 > .xsSize__WjaAR {\n max-height: 34px;\n}\n\n.borderless__6cr-3 {\n border: none;\n outline: none;\n}\n\n.borderless__6cr-3:focus-visible {\n outline: none;\n}\n\n.bezelless__XoxCA {\n padding-left: 0;\n padding-right: 0;\n}\n\n.invalid__u91uf {\n border-color: var(--interactive-invalid, #ec4453);\n /* firefox gives default box-shadow for invalid inputs */\n box-shadow: none;\n}\n\n.stretch__0iX7B {\n width: 100%;\n min-width: unset;\n grid-template-columns: auto 1fr;\n}\n\n.stretchQualifierEnd__UOR-y {\n width: 100%;\n min-width: unset;\n grid-template-columns: 1fr auto;\n}\n\n.multiline__DunvT {\n --border-radius: var(--roundness-user-input-L, 0.375rem);\n padding: 1rem;\n max-height: initial;\n height: var(--extent);\n}\n\n.extentLow__oeiSb {\n --extent: 76px;\n}\n\n.extentMid__6-yRR {\n --extent: 92px;\n}\n\n.extentHigh__gcgQv {\n --extent: 108px;\n}\n\n.resizeHorizontal__27RH8 {\n resize: horizontal;\n}\n\n.resizeVertical__DTfPJ {\n resize: vertical;\n}\n";
var commonStyles = {"Base":"Base__iUqlA","disabled":"disabled__FTNVe","borderless":"borderless__6cr-3","baseLineHeight":"baseLineHeight__-JUTS","wrapper":"wrapper__qkcx5","shrink":"shrink__Zoj2j","bezel":"bezel__3WJlH","lFont":"lFont__vnnwV","lSize":"lSize__ZAxqS","mFont":"mFont__LDr6S","mSize":"mSize__yn6oo","sFont":"sFont__a0yJl","sSize":"sSize__nOg4a","inputXs":"inputXs__Jyc1b","xsFont":"xsFont__ZoXFc","xsSize":"xsSize__WjaAR","bezelless":"bezelless__XoxCA","invalid":"invalid__u91uf","stretch":"stretch__0iX7B","stretchQualifierEnd":"stretchQualifierEnd__UOR-y","multiline":"multiline__DunvT","extentLow":"extentLow__oeiSb","extentMid":"extentMid__6-yRR","extentHigh":"extentHigh__gcgQv","resizeHorizontal":"resizeHorizontal__27RH8","resizeVertical":"resizeVertical__DTfPJ"};
var stylesheet$4=".Base__iUqlA {\n /* default custom properties */\n --surface-color: var(--interactive-surface-primary-default, #ffffff);\n --font-color: var(--content-primary, #2d2e34);\n --placeholder-color: var(--content-muted, #8e919b);\n --border-color: var(--interactive-default, #cbcfd7);\n --border-radius: var(--roundness-user-input-M, 0.375rem);\n --focus-appearance: var(--focus-outline, 2px solid);\n --focus-color: var(--interactive-focus, #86afff);\n --focus: var(--focus-appearance) var(--focus-color);\n\n background: var(--surface-color);\n border: 1px solid var(--border-color);\n border-radius: var(--border-radius);\n color: var(--font-color);\n font: var(--font);\n box-sizing: border-box;\n min-width: 160px;\n}\n\n.Base__iUqlA:focus-visible {\n outline: var(--focus);\n}\n\n.Base__iUqlA:hover {\n --surface-color: var(--interactive-surface-primary-hover, #f5f7fa);\n}\n\n.Base__iUqlA:hover {\n --surface-color: var(--interactive-surface-primary-hover, #f5f7fa);\n}\n\n.Base__iUqlA:active {\n --border-color: var(--interactive-active, #1c3abb);\n}\n\n.Base__iUqlA::-moz-placeholder {\n color: var(--placeholder-color);\n}\n\n.Base__iUqlA::placeholder {\n color: var(--placeholder-color);\n}\n\n.Base__iUqlA:disabled,\n.disabled__FTNVe,\n.disabled__FTNVe:hover,\n.disabled__FTNVe:active,\n.disabled__FTNVe:focus-visible,\n.Base__iUqlA:hover .disabled__FTNVe {\n --border-color: var(--interactive-disabled, #eaecf0);\n --surface-color: var(--interactive-surface-disabled, #f1f3f6);\n --font-color: var(--content-disabled, #9a9eaa);\n -webkit-text-fill-color: var(--content-disabled, #9a9eaa);\n /* override Safari disabled input font color */\n cursor: not-allowed;\n outline: none;\n}\n\n@supports not selector(:focus-visible) {\n .Base__iUqlA:focus {\n outline: var(--focus);\n }\n\n .borderless__6cr-3:focus {\n outline: none;\n }\n}\n\n.baseLineHeight__-JUTS {\n line-height: 1;\n}\n\n.wrapper__qkcx5 {\n display: inline-grid;\n grid-auto-flow: column;\n align-items: center;\n gap: 1rem;\n}\n\n.wrapper__qkcx5:hover .Base__iUqlA {\n --surface-color: var(--interactive-surface-primary-hover, #f5f7fa);\n}\n\n.wrapper__qkcx5:has(:is(.Base__iUqlA):focus):focus-within {\n outline: var(--focus);\n}\n\n.shrink__Zoj2j {\n gap: 0;\n}\n\n.bezel__3WJlH {\n padding-inline: 1rem;\n}\n\n/** size classes */\n\n.lFont__vnnwV {\n --font: var(\n --text-regular-L,\n 500 1.125rem/1.618 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n}\n\n.lSize__ZAxqS {\n padding: 1.1875rem 1rem;\n max-height: 56px;\n}\n\n.wrapper__qkcx5 > .lSize__ZAxqS {\n max-height: 54px;\n}\n\n.mFont__LDr6S {\n --font: var(\n --text-regular-M,\n 500 1rem/1.618 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n}\n\n.mSize__yn6oo {\n padding: 1rem 1rem;\n max-height: 48px;\n}\n\n.wrapper__qkcx5 > .mSize__yn6oo {\n max-height: 46px;\n}\n\n.sFont__a0yJl {\n --font: var(\n --text-regular-S,\n 500 0.875rem/1.618 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n}\n\n.sSize__nOg4a {\n padding: 0.8125rem 1rem;\n max-height: 40px;\n}\n\n.inputXs__Jyc1b {\n margin: -0.6875rem 0;\n}\n\n.wrapper__qkcx5 > .sSize__nOg4a {\n max-height: 38px;\n}\n\n.xsFont__ZoXFc {\n --font: var(\n --text-regular-S,\n 500 0.875rem/1.618 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n}\n\n.xsSize__WjaAR {\n padding: 0.6875rem 1rem;\n max-height: 36px;\n}\n\n.wrapper__qkcx5 > .xsSize__WjaAR {\n max-height: 34px;\n}\n\n.borderless__6cr-3 {\n border: none;\n outline: none;\n}\n\n.borderless__6cr-3:focus-visible {\n outline: none;\n}\n\n.bezelless__XoxCA {\n padding-left: 0;\n padding-right: 0;\n}\n\n.invalid__u91uf {\n border-color: var(--interactive-invalid, #ec4453);\n /* firefox gives default box-shadow for invalid inputs */\n box-shadow: none;\n}\n\n.stretch__0iX7B {\n width: 100%;\n min-width: unset;\n grid-template-columns: auto 1fr;\n}\n\n.stretchQualifierEnd__UOR-y {\n width: 100%;\n min-width: unset;\n grid-template-columns: 1fr auto;\n}\n\n.multiline__DunvT {\n --border-radius: var(--roundness-user-input-L, 0.375rem);\n padding: 1rem;\n max-height: initial;\n height: var(--extent);\n}\n\n.extentLow__oeiSb {\n --extent: 76px;\n}\n\n.extentMid__6-yRR {\n --extent: 92px;\n}\n\n.extentHigh__gcgQv {\n --extent: 108px;\n}\n\n.resizeHorizontal__27RH8 {\n resize: horizontal;\n}\n\n.resizeVertical__DTfPJ {\n resize: vertical;\n}\n";
styleInject(css_248z$4);
const Field=React.forwardRef(({type="text",invalid=false,disabled=false,stretch=false,className="",...props},ref)=>{context.sendStyles(stylesheet$4);const fieldClasses=cn(commonStyles.Base,commonStyles.baseLineHeight,{[commonStyles.invalid]:invalid},{[commonStyles.stretch]:stretch},className);return React.createElement("input",_extends({},props,{className:fieldClasses,disabled:disabled,ref:ref,type:type,"aria-invalid":invalid}))});Field.displayName="Field";Field.propTypes={type:PropTypes.string,invalid:PropTypes.bool,stretch:PropTypes.bool,disabled:PropTypes.bool,className:PropTypes.string};Field.defaultProps={type:"text",invalid:false,stretch:false,disabled:false,className:""};
const svgSizes={xs:{height:"14",width:"14"},s:{height:"16",width:"16"},m:{height:"18",width:"18"},l:{height:"20",width:"20"}};const sizes=["xs","s","m","l"];const extents=["low","mid","high"];const MASK_SYMBOL="●";
const svgSize=size=>{switch(size){case"xs":return svgSizes.xs;case"s":return svgSizes.s;case"m":return svgSizes.m;case"l":return svgSizes.l;default:return svgSizes.m}};const resolveSizeProp=size=>{return sizes.includes(size)?size:"m"};const resolveExtentProp=extent=>{return extents.includes(extent)?extent:"low"};const isString=value=>typeof value==="string";const decodeHTMLEntity=entityCode=>{return entityCode.replace(/&#(?<number>[0-9]+);/giu,(_,dec)=>String.fromCharCode(dec))};const matches=(base,entity)=>base.id===entity.id&&base.key===entity.key;
const{concatClasses: concatClasses$2}=helper.propsUtil;const Input=React.forwardRef(({type="text",size="m",stretch=false,invalid=false,disabled=false,enclosed=true,bezel=true,...props},ref)=>{context.sendStyles(stylesheet$4);const{style,className,...rest}=props;const fontClass=concatClasses$2(resolveSizeProp(size),"font");const sizeClass=concatClasses$2(resolveSizeProp(size),"size");const inputClasses=cn(commonStyles[fontClass],commonStyles[sizeClass],{[commonStyles.borderless]:!enclosed},{[commonStyles.bezelless]:!bezel});return React.createElement(Field,_extends({},rest,{ref:ref,type:type,stretch:stretch,invalid:invalid,disabled:disabled,className:inputClasses}))});Input.displayName="Input";Input.propTypes={type:PropTypes.string,size:PropTypes.oneOf(["xs","s","m","l"]),stretch:PropTypes.bool,invalid:PropTypes.bool,disabled:PropTypes.bool,enclosed:PropTypes.bool,bezel:PropTypes.bool};Input.defaultProps={type:"text",size:"m",stretch:false,invalid:false,disabled:false,enclosed:true,bezel:true};
const InputWrapper=({size="m",stretch=false,shrink=false,invalid=false,disabled=false,children=null,bezel=true,hasEndSlot=false,...props})=>{context.sendStyles(stylesheet$4);const{style,className,...rest}=props;const{invalidSize,resolvedSize}=resolveSizeProp(size);if(invalidSize){console.warn(`[Textfield][InputWrapper]: Received an invalid size ${size}, falling back to ${resolvedSize}`);}const inputWrapperClasses=cn(commonStyles.Base,commonStyles.wrapper,{[commonStyles.shrink]:shrink},{[commonStyles.bezel]:bezel},{[commonStyles.stretch]:stretch},{[commonStyles.stretchQualifierEnd]:hasEndSlot&&stretch},{[commonStyles.invalid]:invalid},{[commonStyles.disabled]:disabled});return React.createElement("div",_extends({},rest,{disabled:disabled,"aria-invalid":invalid,className:inputWrapperClasses,"data-testid":"input-wrapper"}),children)};InputWrapper.displayName="InputWrapper";InputWrapper.propTypes={children:PropTypes.node,size:PropTypes.oneOf(["xs","s","m","l"]),stretch:PropTypes.bool,invalid:PropTypes.bool,shrink:PropTypes.bool,bezel:PropTypes.bool,disabled:PropTypes.bool,hasEndSlot:PropTypes.bool};InputWrapper.defaultProps={children:null,size:"m",stretch:false,invalid:false,disabled:false,shrink:false,bezel:true,hasEndSlot:false};
var css_248z$3 = ".InputQualifier__5LCOT {\n --textqualifier-font: var(\n --text-bold-M,\n 600 1rem/1.5 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n font: var(--textqualifier-font);\n display: inline-flex;\n}\n\n.xs__5KVXH {\n --textqualifier-font: var(\n --text-bold-S,\n 600 0.875rem/1.5 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n}\n\n.s__xzCFp {\n --textqualifier-font: var(\n --text-bold-S,\n 600 0.875rem/1.5 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n}\n\n.m__RqDhk {\n --textqualifier-font: var(\n --text-bold-M,\n 600 1rem/1.5 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n}\n\n.l__oB01O {\n --textqualifier-font: var(\n --text-bold-M,\n 600 1rem/1.5 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n}\n";
var styles$3 = {"InputQualifier":"InputQualifier__5LCOT","xs":"xs__5KVXH","s":"s__xzCFp","m":"m__RqDhk","l":"l__oB01O"};
var stylesheet$3=".InputQualifier__5LCOT {\n --textqualifier-font: var(\n --text-bold-M,\n 600 1rem/1.5 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n font: var(--textqualifier-font);\n display: inline-flex;\n}\n\n.xs__5KVXH {\n --textqualifier-font: var(\n --text-bold-S,\n 600 0.875rem/1.5 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n}\n\n.s__xzCFp {\n --textqualifier-font: var(\n --text-bold-S,\n 600 0.875rem/1.5 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n}\n\n.m__RqDhk {\n --textqualifier-font: var(\n --text-bold-M,\n 600 1rem/1.5 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n}\n\n.l__oB01O {\n --textqualifier-font: var(\n --text-bold-M,\n 600 1rem/1.5 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n}\n";
styleInject(css_248z$3);
function InputQualifier({children,size,...props}){context.sendStyles(stylesheet$3);const{className,style,...delegated}=props;const textQualifier=isString(children);const classes=cn(styles$3.InputQualifier,textQualifier&&styles$3[size]);return React.createElement("div",_extends({},delegated,{className:classes,"data-testid":"input-qualifier"}),React.createElement(qualifier.Qualifier,{iconSize:svgSize(size)},children))}InputQualifier.displayName="InputQualifier";InputQualifier.propTypes={children:PropTypes.node.isRequired,size:PropTypes.oneOf(["xs","s","m","l"])};InputQualifier.defaultProps={size:"m"};
var css_248z$2 = ".inputAddon__PUhHt {\n display: grid;\n grid-auto-flow: column;\n position: relative;\n gap: 0.5rem;\n}\n";
var styles$2 = {"inputAddon":"inputAddon__PUhHt"};
var stylesheet$2=".inputAddon__PUhHt {\n display: grid;\n grid-auto-flow: column;\n position: relative;\n gap: 0.5rem;\n}\n";
styleInject(css_248z$2);
function InputAddOn({children,...props}){context.sendStyles(stylesheet$2);const{className,style,...delegated}=props;const classes=cn(styles$2.inputAddon);return React.createElement("div",_extends({},delegated,{className:classes,"data-testid":"input-addon"}),children)}InputAddOn.displayName="InputAddOn";InputAddOn.propTypes={children:PropTypes.node.isRequired};
const useInput=({size,invalid,disabled,stretch,shrink,qualifierStart,qualifierEnd,addOnStart,addOnEnd,swapSlots})=>{const getStartSlots=({qualifierProps,addOnProps}={})=>{if(!(addOnStart||qualifierStart)){return null}const addOn=addOnStart?React.createElement(InputAddOn,addOnProps,addOnStart):null;const qualifier=qualifierStart?React.createElement(InputQualifier,_extends({size:size},qualifierProps),qualifierStart):null;if(swapSlots){return React.createElement(React.Fragment,null,qualifier,addOn)}return React.createElement(React.Fragment,null,addOn,qualifier)};const getEndSlots=({qualifierProps,addOnProps}={})=>{if(!(addOnEnd||qualifierEnd)){return null}const addOn=addOnEnd?React.createElement(InputAddOn,addOnProps,addOnEnd):null;const qualifier=qualifierEnd?React.createElement(InputQualifier,_extends({size:size},qualifierProps),qualifierEnd):null;if(swapSlots){return React.createElement(React.Fragment,null,addOn,qualifier)}return React.createElement(React.Fragment,null,qualifier,addOn)};const hasEndSlot=()=>{if(!qualifierStart&&!addOnStart&&(qualifierEnd||addOnEnd)){return true}return false};return {getInputProps:()=>{return {size,invalid,disabled,stretch}},getWrapperProps:()=>{return {size,invalid,disabled,stretch,shrink,hasEndSlot:hasEndSlot()}},getQualifierProps:()=>{return {size}},getStartSlots,getEndSlots}};
const{concatClasses: concatClasses$1}=helper.propsUtil;const Textfield=React.forwardRef(({size="m",stretch=false,qualifierEnd=null,qualifierStart=null,addOnEnd=null,addOnStart=null,multiline=false,invalid=false,swapSlots=false,extent="low",disabled=false,resizeVertical=true,resizeHorizontal=true,...props},ref)=>{context.sendStyles(stylesheet$4);const{style,className,...fieldProps}=props;if(multiline){const{rows,cols,...multilineProps}=fieldProps;const extentClass=concatClasses$1("extent",resolveExtentProp(extent));const fontClass=concatClasses$1(resolveSizeProp(size),"font");const sizeClass=concatClasses$1(resolveSizeProp(size),"size");return React.createElement("textarea",_extends({},multilineProps,{disabled:disabled,ref:ref,className:cn(commonStyles.Base,commonStyles[fontClass],commonStyles[sizeClass],{[commonStyles.invalid]:invalid},{[commonStyles.stretch]:stretch},{[commonStyles.multiline]:multiline},{[commonStyles.resizeHorizontal]:multiline&&!resizeVertical},{[commonStyles.resizeVertical]:multiline&&!resizeHorizontal},commonStyles[extentClass])}))}const{getWrapperProps,getInputProps,getStartSlots,getEndSlots}=useInput({size,stretch,invalid,disabled,qualifierStart,qualifierEnd,addOnStart,addOnEnd,swapSlots});const isSlotsEmpty=!(qualifierStart||qualifierEnd||addOnStart||addOnEnd);if(isSlotsEmpty){return React.createElement(Input,_extends({},fieldProps,getInputProps(),{ref:ref}))}return React.createElement(InputWrapper,getWrapperProps(),React.createElement(React.Fragment,null,getStartSlots()),React.createElement(Input,_extends({},fieldProps,getInputProps(),{ref:ref,enclosed:false,bezel:false})),React.createElement(React.Fragment,null,getEndSlots()))});Textfield.displayName="Textfield";Textfield.propTypes={size:PropTypes.oneOf(["xs","s","m","l"]),stretch:PropTypes.bool,multiline:PropTypes.bool,qualifierStart:PropTypes.oneOfType([PropTypes.element,PropTypes.string]),qualifierEnd:PropTypes.oneOfType([PropTypes.element,PropTypes.string]),addOnStart:PropTypes.element,addOnEnd:PropTypes.element,swapSlots:PropTypes.bool,extent:PropTypes.oneOf(["low","mid","high"]),invalid:PropTypes.bool,disabled:PropTypes.bool,resizeHorizontal:PropTypes.bool,resizeVertical:PropTypes.bool};Textfield.defaultProps={size:"m",stretch:false,multiline:false,qualifierStart:null,qualifierEnd:null,addOnStart:null,addOnEnd:null,swapSlots:false,extent:"low",invalid:false,disabled:false,resizeHorizontal:true,resizeVertical:true};
const Email=React.forwardRef(({size="m",stretch=false,invalid=false,disabled=false,qualifierStart=null,qualifierEnd=null,addOnStart=null,addOnEnd=null,swapSlots=false,...props},ref)=>{const{style,className,...rest}=props;const{getWrapperProps,getInputProps,getStartSlots,getEndSlots}=useInput({size,stretch,invalid,disabled,qualifierStart,qualifierEnd,addOnStart,addOnEnd,swapSlots});const isSlotsEmpty=!(qualifierStart||qualifierEnd||addOnStart||addOnEnd);if(isSlotsEmpty){return React.createElement(Input,_extends({},rest,getInputProps(),{type:"email",autoComplete:"email",ref:ref}))}return React.createElement(InputWrapper,getWrapperProps(),React.createElement(React.Fragment,null,getStartSlots()),React.createElement(Input,_extends({},rest,getInputProps(),{type:"email",autoComplete:"email",ref:ref,enclosed:false,bezel:false})),React.createElement(React.Fragment,null,getEndSlots()))});Email.displayName="Email";Email.propTypes={size:PropTypes.oneOf(["xs","s","m","l"]),stretch:PropTypes.bool,qualifierStart:PropTypes.oneOfType([PropTypes.element,PropTypes.string]),qualifierEnd:PropTypes.oneOfType([PropTypes.element,PropTypes.string]),addOnStart:PropTypes.element,addOnEnd:PropTypes.element,swapSlots:PropTypes.bool,invalid:PropTypes.bool,disabled:PropTypes.bool};Email.defaultProps={size:"m",stretch:false,qualifierStart:null,qualifierEnd:null,addOnStart:null,addOnEnd:null,swapSlots:false,invalid:false,disabled:false};
const Password=React.forwardRef(({size="m",stretch=false,invalid=false,disabled=false,qualifierStart=null,qualifierEnd=null,addOnStart=null,addOnEnd=null,swapSlots=false,...props},ref)=>{const{style,className,...rest}=props;const[isPasswordHidden,setIsPasswordHidden]=React.useState(true);const defaultAddOnEnd=React.createElement(toggleButton.ToggleButton,{on:!isPasswordHidden,icon:true,compact:true,emphasize:true,disabled:disabled,onClick:()=>{setIsPasswordHidden(!isPasswordHidden);},"aria-label":isPasswordHidden?"show password":"hide password","data-testid":"toggle-password"},isPasswordHidden?React.createElement(iconpack.EyeOff,null):React.createElement(iconpack.EyeOpen,null));const{getWrapperProps,getInputProps,getStartSlots,getEndSlots}=useInput({size,stretch,invalid,disabled,qualifierStart,qualifierEnd,addOnStart,addOnEnd:addOnEnd??defaultAddOnEnd,swapSlots});return React.createElement(InputWrapper,getWrapperProps(),React.createElement(React.Fragment,null,getStartSlots()),React.createElement(Input,_extends({},rest,getInputProps(),{type:isPasswordHidden?"password":"text",ref:ref,enclosed:false,bezel:false})),React.createElement(React.Fragment,null,getEndSlots()))});Password.displayName="Password";Password.propTypes={size:PropTypes.oneOf(["xs","s","m","l"]),stretch:PropTypes.bool,qualifierStart:PropTypes.oneOfType([PropTypes.element,PropTypes.string]),qualifierEnd:PropTypes.oneOfType([PropTypes.element,PropTypes.string]),addOnStart:PropTypes.element,addOnEnd:PropTypes.element,swapSlots:PropTypes.bool,invalid:PropTypes.bool,disabled:PropTypes.bool};Password.defaultProps={size:"m",stretch:false,qualifierStart:null,qualifierEnd:null,addOnStart:null,addOnEnd:null,swapSlots:false,invalid:false,disabled:false};
const URL=React.forwardRef(({size="m",stretch=false,invalid=false,disabled=false,qualifierStart=null,qualifierEnd=null,addOnStart=null,addOnEnd=null,swapSlots=false,...rest},ref)=>{const{style,className,...restProps}=rest;const{getWrapperProps,getInputProps,getStartSlots,getEndSlots}=useInput({size,stretch,invalid,disabled,qualifierStart,qualifierEnd,addOnStart,addOnEnd,swapSlots});const isSlotsEmpty=!(qualifierStart||qualifierEnd||addOnStart||addOnEnd);if(isSlotsEmpty){return React.createElement(Input,_extends({},restProps,getInputProps(),{type:"url",ref:ref}))}return React.createElement(InputWrapper,getWrapperProps(),React.createElement(React.Fragment,null,getStartSlots()),React.createElement(Input,_extends({},restProps,getInputProps(),{type:"url",ref:ref,enclosed:false,bezel:false})),React.createElement(React.Fragment,null,getEndSlots()))});URL.displayName="URL";URL.propTypes={size:PropTypes.oneOf(["xs","s","m","l"]),stretch:PropTypes.bool,qualifierStart:PropTypes.oneOfType([PropTypes.element,PropTypes.string]),qualifierEnd:PropTypes.oneOfType([PropTypes.element,PropTypes.string]),addOnStart:PropTypes.element,addOnEnd:PropTypes.element,swapSlots:PropTypes.bool,invalid:PropTypes.bool,disabled:PropTypes.bool};URL.defaultProps={size:"m",stretch:false,qualifierStart:null,qualifierEnd:null,addOnStart:null,addOnEnd:null,swapSlots:false,invalid:false,disabled:false};
const Numeric=React.forwardRef(({size="m",stretch=false,invalid=false,disabled=false,qualifierStart=null,qualifierEnd=null,addOnStart=null,addOnEnd=null,swapSlots=false,...props},ref)=>{const{style,className,...rest}=props;const{getWrapperProps,getInputProps,getStartSlots,getEndSlots}=useInput({size,stretch,invalid,disabled,qualifierStart,qualifierEnd,addOnStart,addOnEnd,swapSlots});const isSlotsEmpty=!(qualifierStart||qualifierEnd||addOnStart||addOnEnd);if(isSlotsEmpty){return React.createElement(Input,_extends({},rest,getInputProps(),{type:"text",inputMode:"numeric",ref:ref}))}return React.createElement(InputWrapper,getWrapperProps(),React.createElement(React.Fragment,null,getStartSlots()),React.createElement(Input,_extends({},rest,getInputProps(),{type:"text",inputMode:"numeric",ref:ref,enclosed:false,bezel:false})),React.createElement(React.Fragment,null,getEndSlots()))});Numeric.displayName="Numeric";Numeric.propTypes={size:PropTypes.oneOf(["xs","s","m","l"]),stretch:PropTypes.bool,qualifierStart:PropTypes.oneOfType([PropTypes.element,PropTypes.string]),qualifierEnd:PropTypes.oneOfType([PropTypes.element,PropTypes.string]),addOnStart:PropTypes.element,addOnEnd:PropTypes.element,swapSlots:PropTypes.bool,invalid:PropTypes.bool,disabled:PropTypes.bool};Numeric.defaultProps={size:"m",stretch:false,qualifierStart:null,qualifierEnd:null,addOnStart:null,addOnEnd:null,swapSlots:false,invalid:false,disabled:false};
const Search=React.forwardRef((props,ref)=>{const{size,stretch,invalid,disabled,qualifierStart,qualifierEnd,addOnStart,addOnEnd,swapSlots,...rest}=props;const{style,className,...restProps}=rest;const{getWrapperProps,getInputProps,getStartSlots,getEndSlots}=useInput({size,stretch,invalid,disabled,qualifierStart:qualifierStart??React.createElement(iconpack.Search,null),qualifierEnd,addOnStart,addOnEnd,swapSlots});return React.createElement(InputWrapper,getWrapperProps(),React.createElement(React.Fragment,null,getStartSlots()),React.createElement(Input,_extends({},restProps,getInputProps(),{type:"search",ref:ref,enclosed:false,bezel:false})),React.createElement(React.Fragment,null,getEndSlots()))});Search.displayName="Search";Search.propTypes={size:PropTypes.oneOf(["xs","s","m","l"]),stretch:PropTypes.bool,qualifierStart:PropTypes.oneOfType([PropTypes.element,PropTypes.string]),qualifierEnd:PropTypes.oneOfType([PropTypes.element,PropTypes.string]),addOnStart:PropTypes.element,addOnEnd:PropTypes.element,swapSlots:PropTypes.bool,invalid:PropTypes.bool,disabled:PropTypes.bool};Search.defaultProps={size:"m",stretch:false,qualifierStart:null,qualifierEnd:null,addOnStart:null,addOnEnd:null,swapSlots:false,invalid:false,disabled:false};
const Datefield=React.forwardRef(({size="m",stretch=false,invalid=false,disabled=false,qualifierStart=null,qualifierEnd=null,addOnStart=null,addOnEnd=null,swapSlots=false,...props},ref)=>{const{role,style,className,...rest}=props;const{getWrapperProps,getInputProps,getStartSlots,getEndSlots}=useInput({size,stretch,invalid,disabled,qualifierStart,qualifierEnd,addOnStart,addOnEnd,swapSlots});const isSlotsEmpty=!(qualifierStart||qualifierEnd||addOnStart||addOnEnd);if(isSlotsEmpty){return React.createElement(Input,_extends({},rest,getInputProps(),{type:"date",ref:ref}))}return React.createElement(InputWrapper,getWrapperProps(),React.createElement(React.Fragment,null,getStartSlots()),React.createElement(Input,_extends({},rest,getInputProps(),{type:"date",ref:ref,enclosed:false,bezel:false})),React.createElement(React.Fragment,null,getEndSlots()))});Datefield.displayName="Datefield";Datefield.propTypes={size:PropTypes.oneOf(["xs","s","m","l"]),stretch:PropTypes.bool,qualifierStart:PropTypes.oneOfType([PropTypes.element,PropTypes.string]),qualifierEnd:PropTypes.oneOfType([PropTypes.element,PropTypes.string]),addOnStart:PropTypes.element,addOnEnd:PropTypes.element,swapSlots:PropTypes.bool,invalid:PropTypes.bool,disabled:PropTypes.bool};Datefield.defaultProps={size:"m",stretch:false,qualifierStart:null,qualifierEnd:null,addOnStart:null,addOnEnd:null,swapSlots:false,invalid:false,disabled:false};
const Timefield=React.forwardRef(({size="m",stretch=false,invalid=false,disabled=false,qualifierStart=null,qualifierEnd=null,addOnStart=null,addOnEnd=null,swapSlots=false,...props},ref)=>{const{style,className,...rest}=props;const{getWrapperProps,getInputProps,getStartSlots,getEndSlots}=useInput({size,stretch,invalid,disabled,qualifierStart,qualifierEnd,addOnStart,addOnEnd,swapSlots});const isSlotsEmpty=!(qualifierStart||qualifierEnd||addOnStart||addOnEnd);if(isSlotsEmpty){return React.createElement(Input,_extends({},rest,getInputProps(),{type:"time",ref:ref}))}return React.createElement(InputWrapper,getWrapperProps(),React.createElement(React.Fragment,null,getStartSlots()),React.createElement(Input,_extends({},rest,getInputProps(),{type:"time",ref:ref,enclosed:false,bezel:false})),React.createElement(React.Fragment,null,getEndSlots()))});Timefield.displayName="Timefield";Timefield.propTypes={size:PropTypes.oneOf(["xs","s","m","l"]),stretch:PropTypes.bool,qualifierStart:PropTypes.oneOfType([PropTypes.element,PropTypes.string]),qualifierEnd:PropTypes.oneOfType([PropTypes.element,PropTypes.string]),addOnStart:PropTypes.element,addOnEnd:PropTypes.element,swapSlots:PropTypes.bool,invalid:PropTypes.bool,disabled:PropTypes.bool};Timefield.defaultProps={size:"m",stretch:false,qualifierStart:null,qualifierEnd:null,addOnStart:null,addOnEnd:null,swapSlots:false,invalid:false,disabled:false};
var css_248z$1 = ".l__5cbH7 {\n letter-spacing: 0.36rem;\n}\n\n.m__CrGBV {\n letter-spacing: 0.36rem;\n}\n\n.s__0an6o {\n letter-spacing: 0.34rem;\n}\n\n.xs__eNtOr {\n letter-spacing: 0.34rem;\n}\n\n.alignCenter__LI5B8 {\n text-align: center;\n}\n";
var styles$1 = {"l":"l__5cbH7","m":"m__CrGBV","s":"s__0an6o","xs":"xs__eNtOr","alignCenter":"alignCenter__LI5B8"};
var stylesheet$1=".l__5cbH7 {\n letter-spacing: 0.36rem;\n}\n\n.m__CrGBV {\n letter-spacing: 0.36rem;\n}\n\n.s__0an6o {\n letter-spacing: 0.34rem;\n}\n\n.xs__eNtOr {\n letter-spacing: 0.34rem;\n}\n\n.alignCenter__LI5B8 {\n text-align: center;\n}\n";
styleInject(css_248z$1);
const{concatClasses}=helper.propsUtil;const Pinfield=React.forwardRef(({size="m",length=4,alignCenter=false,stretch=false,invalid=false,disabled=false,placeholder="",qualifierStart=null,qualifierEnd=null,addOnStart=null,addOnEnd=null,swapSlots,...props},ref)=>{context.sendStyles(stylesheet$1);const{style,className,...rest}=props;let placeholderValue=placeholder;if(!placeholderValue){const symbol=decodeHTMLEntity(MASK_SYMBOL);placeholderValue=new Array(length).fill(symbol).join("");}const{getWrapperProps,getStartSlots,getEndSlots}=useInput({size,stretch,invalid,disabled,qualifierStart,qualifierEnd,addOnStart,addOnEnd,swapSlots});const fontClass=concatClasses(resolveSizeProp(size),"font");const sizeClass=concatClasses(resolveSizeProp(size),"size");const isSlotsEmpty=!(qualifierStart||qualifierEnd||addOnStart||addOnEnd);const classes=cn(commonStyles[fontClass],commonStyles[sizeClass],{[commonStyles.borderless]:!isSlotsEmpty},{[commonStyles.bezelless]:!isSlotsEmpty},styles$1[size],{[styles$1.alignCenter]:alignCenter});if(isSlotsEmpty){return React.createElement(Field,_extends({},rest,{ref:ref,inputMode:"numeric",autoComplete:"one-time-code",className:classes,invalid:invalid,stretch:stretch,disabled:disabled,maxLength:length,placeholder:placeholderValue}))}return React.createElement(InputWrapper,getWrapperProps(),React.createElement(React.Fragment,null,getStartSlots()),React.createElement(Field,_extends({},rest,{ref:ref,inputMode:"numeric",autoComplete:"one-time-code",className:classes,invalid:invalid,stretch:stretch,disabled:disabled,maxLength:length,placeholder:placeholderValue})),React.createElement(React.Fragment,null,getEndSlots()))});Pinfield.displayName="Pinfield";Pinfield.propTypes={size:PropTypes.oneOf(["xs","s","m","l"]),stretch:PropTypes.bool,qualifierStart:PropTypes.element,qualifierEnd:PropTypes.element,addOnStart:PropTypes.element,addOnEnd:PropTypes.element,swapSlots:PropTypes.bool,invalid:PropTypes.bool,disabled:PropTypes.bool,length:PropTypes.number,alignCenter:PropTypes.bool,placeholder:PropTypes.string};Pinfield.defaultProps={size:"m",stretch:false,qualifierStart:null,qualifierEnd:null,addOnStart:null,addOnEnd:null,invalid:false,disabled:false,length:4,alignCenter:false,placeholder:""};
var css_248z = ".PhoneNumber__lQ0l- {\n position: relative;\n box-sizing: border-box;\n width: 320px;\n --position-left: 0.625rem;\n --list-max-height-s: 220px;\n --list-max-height-m: 264px;\n --list-max-height-l: 308px;\n}\n\n.stretch__VeDDp {\n width: 100%;\n}\n\n.selectionButton__qJWws {\n display: inline-flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n cursor: default;\n box-sizing: border-box;\n position: relative;\n left: var(--position-left);\n}\n\n.selectionButton__qJWws.s__B36si {\n padding: 0.8125rem 0;\n max-height: 40px;\n}\n\n.selectionButton__qJWws.m__Qh-1M {\n padding: 1rem 0;\n max-height: 48px;\n}\n\n.selectionButton__qJWws.l__9PoJk {\n padding: 1.1875rem 0;\n max-height: 56px;\n}\n\n.emptyState__XuFRx {\n display: flex;\n color: var(--content-muted, #8e919b);\n padding: 0.1rem 0.75rem;\n width: 100%;\n box-sizing: border-box;\n}\n\n.listWrapper__bDHd3 {\n display: grid;\n grid-auto-flow: row;\n overflow-y: auto;\n padding: 0.75rem;\n gap: 0.25rem;\n}\n\n.listWrapper__bDHd3.s__B36si {\n max-height: var(--list-max-height-s);\n}\n\n.listWrapper__bDHd3.m__Qh-1M {\n max-height: var(--list-max-height-m);\n}\n\n.listWrapper__bDHd3.l__9PoJk {\n max-height: var(--list-max-height-l);\n}\n\n.separator__US34E {\n width: 1px;\n height: 20px;\n position: relative;\n margin: auto;\n left: 5px;\n background-color: var(--interactive-default, #cbcfd7);\n}\n\n.target__Pn4ZZ {\n margin-inline-start: -1rem;\n}\n\n.withFlag__vzw0H {\n display: inline-flex;\n gap: 0.5rem;\n}\n\n.buttonTarget__Uh-SO {\n position: relative;\n left: var(--position-left);\n}\n\n.popoverSearch__O0de5 {\n padding: 0.75rem;\n}\n\n.emptyResult__a2Qgz {\n display: grid;\n justify-items: center;\n align-content: center;\n text-align: center;\n gap: 0.5rem;\n color: var(--content-secondary, #4f515c);\n}\n\n.emptyResult__a2Qgz.s__B36si {\n font: var(\n --text-regular-S,\n 500 0.875rem/1.618 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n height: var(--list-max-height-s);\n}\n\n.emptyResult__a2Qgz.m__Qh-1M {\n font: var(\n --text-regular-M,\n 500 1rem/1.618 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n height: var(--list-max-height-m);\n}\n\n.emptyResult__a2Qgz.l__9PoJk {\n font: var(\n --text-regular-L,\n 500 1.125rem/1.618 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n height: var(--list-max-height-l);\n}\n\ninput[type=\"search\"]::-webkit-search-cancel-button {\n display: none;\n}\n\n.defaultText__NkUnZ {\n font: var(--default-font);\n}\n\n.defaultText__NkUnZ.s__B36si {\n --default-font: var(\n --text-bold-S,\n 600 0.875rem/1.5 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n}\n\n.defaultText__NkUnZ.m__Qh-1M {\n --default-font: var(\n --text-bold-M,\n 600 1rem/1.5 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n}\n\n.defaultText__NkUnZ.l__9PoJk {\n --default-font: var(\n --text-bold-L,\n 600 1.125rem/1.5 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n}\n";
var styles = {"PhoneNumber":"PhoneNumber__lQ0l-","stretch":"stretch__VeDDp","selectionButton":"selectionButton__qJWws","s":"s__B36si","m":"m__Qh-1M","l":"l__9PoJk","emptyState":"emptyState__XuFRx","listWrapper":"listWrapper__bDHd3","separator":"separator__US34E","target":"target__Pn4ZZ","withFlag":"withFlag__vzw0H","buttonTarget":"buttonTarget__Uh-SO","popoverSearch":"popoverSearch__O0de5","emptyResult":"emptyResult__a2Qgz","defaultText":"defaultText__NkUnZ"};
var stylesheet=".PhoneNumber__lQ0l- {\n position: relative;\n box-sizing: border-box;\n width: 320px;\n --position-left: 0.625rem;\n --list-max-height-s: 220px;\n --list-max-height-m: 264px;\n --list-max-height-l: 308px;\n}\n\n.stretch__VeDDp {\n width: 100%;\n}\n\n.selectionButton__qJWws {\n display: inline-flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n cursor: default;\n box-sizing: border-box;\n position: relative;\n left: var(--position-left);\n}\n\n.selectionButton__qJWws.s__B36si {\n padding: 0.8125rem 0;\n max-height: 40px;\n}\n\n.selectionButton__qJWws.m__Qh-1M {\n padding: 1rem 0;\n max-height: 48px;\n}\n\n.selectionButton__qJWws.l__9PoJk {\n padding: 1.1875rem 0;\n max-height: 56px;\n}\n\n.emptyState__XuFRx {\n display: flex;\n color: var(--content-muted, #8e919b);\n padding: 0.1rem 0.75rem;\n width: 100%;\n box-sizing: border-box;\n}\n\n.listWrapper__bDHd3 {\n display: grid;\n grid-auto-flow: row;\n overflow-y: auto;\n padding: 0.75rem;\n gap: 0.25rem;\n}\n\n.listWrapper__bDHd3.s__B36si {\n max-height: var(--list-max-height-s);\n}\n\n.listWrapper__bDHd3.m__Qh-1M {\n max-height: var(--list-max-height-m);\n}\n\n.listWrapper__bDHd3.l__9PoJk {\n max-height: var(--list-max-height-l);\n}\n\n.separator__US34E {\n width: 1px;\n height: 20px;\n position: relative;\n margin: auto;\n left: 5px;\n background-color: var(--interactive-default, #cbcfd7);\n}\n\n.target__Pn4ZZ {\n margin-inline-start: -1rem;\n}\n\n.withFlag__vzw0H {\n display: inline-flex;\n gap: 0.5rem;\n}\n\n.buttonTarget__Uh-SO {\n position: relative;\n left: var(--position-left);\n}\n\n.popoverSearch__O0de5 {\n padding: 0.75rem;\n}\n\n.emptyResult__a2Qgz {\n display: grid;\n justify-items: center;\n align-content: center;\n text-align: center;\n gap: 0.5rem;\n color: var(--content-secondary, #4f515c);\n}\n\n.emptyResult__a2Qgz.s__B36si {\n font: var(\n --text-regular-S,\n 500 0.875rem/1.618 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n height: var(--list-max-height-s);\n}\n\n.emptyResult__a2Qgz.m__Qh-1M {\n font: var(\n --text-regular-M,\n 500 1rem/1.618 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n height: var(--list-max-height-m);\n}\n\n.emptyResult__a2Qgz.l__9PoJk {\n font: var(\n --text-regular-L,\n 500 1.125rem/1.618 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n height: var(--list-max-height-l);\n}\n\ninput[type=\"search\"]::-webkit-search-cancel-button {\n display: none;\n}\n\n.defaultText__NkUnZ {\n font: var(--default-font);\n}\n\n.defaultText__NkUnZ.s__B36si {\n --default-font: var(\n --text-bold-S,\n 600 0.875rem/1.5 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n}\n\n.defaultText__NkUnZ.m__Qh-1M {\n --default-font: var(\n --text-bold-M,\n 600 1rem/1.5 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n}\n\n.defaultText__NkUnZ.l__9PoJk {\n --default-font: var(\n --text-bold-L,\n 600 1.125rem/1.5 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n}\n";
styleInject(css_248z);
const PhoneNumber=React.forwardRef(({size="m",invalid=false,disabled=false,stretch=false,emptyResult,placeholder,searchPlaceholder="Search Country",showFlag=false,countries,defaultCountry="",onChange,...props},ref)=>{context.sendStyles(stylesheet);const{style,className,...rest}=props;const inputRef=React.useRef(null);const inputPhoneRef=React.useRef(ref);const[inputValue,setInputValue]=React.useState("");const[phoneNumber,setInputPhoneNumber]=React.useState("");const resolvedSize=resolveSizeProp(size);const onInputChange=value=>setInputValue(value||"");const onItemChange=currentSelection=>{onChange?.({countryCode:currentSelection.id,inputValue:phoneNumber},{event});setInputValue("");inputPhoneRef?.current?.focus();};const{isOpen,filteredItems,highlightedIndex,selectedItems,getToggleButtonProps,getMenuProps,getItemProps,getInputProps}=selection.useSelection({items:countries,displayKey:["name","id"],filter:true,onChange,inputValue,typeahead:true,onInputChange,onItemChange,standaloneSearch:true});const{getTargetProps,getPopoverProps}=popover.usePopover({open:isOpen,placement:"bottom-start",size:resolvedSize,flip:true,bezel:false,stretch:true});const{getWrapperProps,getInputProps:phoneInputProps}=useInput({size:resolvedSize,stretch:true,invalid,disabled});const isItemSelected=item=>selectedItems.length>0&&matches(selectedItems[0],item);const selectedItem=selectedItems[0]||countries.find(item=>item.initialSelected);const handlePhoneNumberChange=event=>{const value=event.target.value;const countryCode=defaultCountry||selectedItems[0].id;onChange?.({countryCode,inputValue:value},{event});setInputPhoneNumber(value);};const renderListItem=({item})=>React.createElement(selection.ListItemContent,{size:resolvedSize,disabled:disabled,addOnStart:showFlag?item.flag:null,match:inputValue},`${item.name} (${item.id})`);const renderValue=()=>{if(!selectedItem)return null;return showFlag?React.createElement("span",{className:cn(styles.withFlag)},selectedItem.flag,React.createElement("span",{className:cn(styles.countryCode)},selectedItem.id)):selectedItem.id};const renderEmptyValue=()=>React.createElement("div",{className:cn(styles.emptyResult,styles[resolvedSize])},emptyResult?emptyResult:React.createElement(React.Fragment,null,React.createElement(icontuner.Icontuner,{size:resolvedSize},React.createElement(iconpack.Search,null)),"No search result found"));const handleCross=()=>{setInputValue("");inputRef?.current?.focus();};const inputProps=getInputProps({ref:inputRef,disabled,onClick:e=>e.stopPropagation()});const toggleButtonProps=React.useMemo(()=>{return {...rest,...getToggleButtonProps({disabled})}},[getToggleButtonProps,disabled]);const phoneClasses=cn(styles.PhoneNumber,{[styles.stretch]:stretch});return React.createElement("div",{className:phoneClasses,"aria-disabled":disabled},React.createElement(InputWrapper,getWrapperProps(),React.createElement(InputAddOn,null,defaultCountry?React.createElement("div",{className:cn(styles.defaultText,styles[resolvedSize]),"aria-label":`Country code: ${defaultCountry}`},defaultCountry):React.createElement("div",_extends({},getTargetProps(),{className:cn(styles.target)}),React.createElement("div",_extends({},toggleButtonProps,{className:cn(styles.selectionButton,styles[resolvedSize]),role:"button"}),React.createElement(button.Button,{tabIndex:disabled?-1:0,nude:true,compact:true,system:true,qualifier:isOpen?React.createElement(iconpack.CaretUp,null):React.createElement(iconpack.CaretDown,null),qualifierEnd:true,disabled:disabled,size:resolvedSize},renderValue()))),React.createElement("span",{className:cn(styles.separator)})),React.createElement(Input,_extends({},rest,phoneInputProps(),{size:resolvedSize,stretch:stretch,ref:inputPhoneRef,enclosed:false,bezel:false,type:"text",onInput:handlePhoneNumberChange,placeholder:placeholder}))),React.createElement(popover.BasePopover,_extends({},getPopoverProps(),{open:isOpen}),React.createElement(selection.ListBox,_extends({},getMenuProps({},{suppressRefError:true}),{size:resolvedSize}),React.createElement("div",{className:cn(styles.popoverSearch)},React.createElement(Search,_extends({},inputProps,{size:resolvedSize,placeholder:searchPlaceholder,stretch:true,addOnEnd:React.createElement(button.Button,{size:resolvedSize,nude:true,system:true,icon:true,compact:true,type:"button",onClick:handleCross},React.createElement(iconpack.Cross,null))}))),React.createElement("div",{className:cn(styles.listWrapper,styles[resolvedSize])},filteredItems.length===0?renderEmptyValue():filteredItems.map((item,index)=>React.createElement(selection.ListItem,_extends({},getItemProps({item,index}),{key:`${item.id}-${index}`,highlight:!disabled&&highlightedIndex===index,selected:!disabled&&isItemSelected(item),size:resolvedSize,disabled:disabled}),renderListItem({item})))))))});PhoneNumber.displayName="PhoneNumber";PhoneNumber.propTypes={size:PropTypes.oneOf(["s","m","l"]),invalid:PropTypes.bool,disabled:PropTypes.bool,stretch:PropTypes.bool,emptyResult:PropTypes.string,placeholder:PropTypes.string,searchPlaceholder:PropTypes.string,showFlag:PropTypes.bool,countries:PropTypes.arrayOf(PropTypes.shape({id:PropTypes.string.isRequired,name:PropTypes.string.isRequired,flag:PropTypes.oneOfType([PropTypes.string,PropTypes.node]),initialSelected:PropTypes.bool}).isRequired),defaultCountry:PropTypes.string,onChange:PropTypes.func};
exports.Datefield = Datefield;
exports.Email = Email;
exports.Input = Input;
exports.InputAddOn = InputAddOn;
exports.InputQualifier = InputQualifier;
exports.InputWrapper = InputWrapper;
exports.Numeric = Numeric;
exports.Password = Password;
exports.PhoneNumber = PhoneNumber;
exports.Pinfield = Pinfield;
exports.Search = Search;
exports.Textfield = Textfield;
exports.Timefield = Timefield;
exports.URL = URL;
exports.useInput = useInput;