@asphalt-react/textfield/dist/index.js

Textfield

import "./index.css";
import React, { forwardRef, useState, useRef, useMemo, useEffect } from 'react';
import cn from 'classnames';
import PropTypes from 'prop-types';
import { propsUtil } from '@asphalt-react/helper';
import { Qualifier } from '@asphalt-react/qualifier';
import { EyeOff, EyeOpen, Search as Search$1, CaretUp, CaretDown, Cross } from '@asphalt-react/iconpack';
import { ToggleButton } from '@asphalt-react/toggle-button';
import { Icontuner } from '@asphalt-react/icontuner';
import { usePopover, BasePopover } from '@asphalt-react/popover';
import { Button } from '@asphalt-react/button';
import { useSelection, ListBox, ListItem, ListItemContent } from '@asphalt-react/selection';
import Inputmask from 'inputmask';

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);
}

var commonStyles = {"Base":"Base__iUqlA","disabled":"disabled__FTNVe","borderless":"borderless__6cr-3","baseLineHeight":"baseLineHeight__-JUTS","wrapper":"wrapper__qkcx5","underline":"underline__-k8n2","shrink":"shrink__Zoj2j","bezel":"bezel__3WJlH","lFont":"lFont__vnnwV","lEmphasize":"lEmphasize__HUXd3","lSize":"lSize__ZAxqS","mFont":"mFont__LDr6S","mEmphasize":"mEmphasize__OZ-Ou","mSize":"mSize__yn6oo","sFont":"sFont__a0yJl","sEmphasize":"sEmphasize__a7YXO","sSize":"sSize__nOg4a","inputXs":"inputXs__Jyc1b","xsFont":"xsFont__ZoXFc","xsEmphasize":"xsEmphasize__AanPE","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","nude":"nude__tD2IN"};

const Field=forwardRef(({type="text",invalid=false,disabled=false,stretch=false,className="",...props},ref)=>{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="&#9679;";const MASK_HERO="**************";

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$3}=propsUtil;const Input=forwardRef(({type="text",size="m",stretch=false,invalid=false,disabled=false,enclosed=true,bezel=true,nude=false,underline=false,emphasize=false,...props},ref)=>{const{style,className,...rest}=props;const fontClass=concatClasses$3(resolveSizeProp(size),"font");const sizeClass=concatClasses$3(resolveSizeProp(size),"size");const headingClass=concatClasses$3(resolveSizeProp(size),"emphasize");const inputClasses=cn({[commonStyles[fontClass]]:!emphasize},{[commonStyles[headingClass]]:emphasize},commonStyles[sizeClass],{[commonStyles.borderless]:!enclosed},{[commonStyles.bezelless]:!bezel},{[commonStyles.nude]:nude},{[commonStyles.underline]:underline});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,nude:PropTypes.bool,underline:PropTypes.bool,emphasize:PropTypes.bool};Input.defaultProps={type:"text",size:"m",stretch:false,invalid:false,disabled:false,enclosed:true,bezel:true,nude:false,underline:false,emphasize:false};

const InputWrapper=({size="m",stretch=false,shrink=false,invalid=false,disabled=false,children=null,bezel=true,hasEndSlot=false,nude=false,underline=false,...props})=>{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},{[commonStyles.nude]:nude},{[commonStyles.underline]:underline});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,nude:PropTypes.bool,underline:PropTypes.bool};InputWrapper.defaultProps={children:null,size:"m",stretch:false,invalid:false,disabled:false,shrink:false,bezel:true,hasEndSlot:false,nude:false,underline:false};

var styles$4 = {"InputQualifier":"InputQualifier__5LCOT","xs":"xs__5KVXH","s":"s__xzCFp","m":"m__RqDhk","l":"l__oB01O"};

function InputQualifier({children,size,...props}){const{className,style,...delegated}=props;const textQualifier=isString(children);const classes=cn(styles$4.InputQualifier,textQualifier&&styles$4[size]);return React.createElement("div",_extends({},delegated,{className:classes,"data-testid":"input-qualifier"}),React.createElement(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 styles$3 = {"inputAddon":"inputAddon__PUhHt"};

function InputAddOn({children,...props}){const{className,style,...delegated}=props;const classes=cn(styles$3.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$2}=propsUtil;const Textfield=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,bezel=true,nude=false,underline=false,emphasize=false,...props},ref)=>{const{style,className,...fieldProps}=props;if(multiline){const{rows,cols,...multilineProps}=fieldProps;const extentClass=concatClasses$2("extent",resolveExtentProp(extent));const fontClass=concatClasses$2(resolveSizeProp(size),"font");const sizeClass=concatClasses$2(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,bezel:bezel,nude:nude,underline:underline,emphasize:emphasize}))}return React.createElement(InputWrapper,_extends({},getWrapperProps(),{bezel:bezel,nude:nude,underline:underline}),React.createElement(React.Fragment,null,getStartSlots()),React.createElement(Input,_extends({},fieldProps,getInputProps(),{ref:ref,enclosed:false,bezel:false,emphasize:emphasize,nude:nude})),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,bezel:PropTypes.bool,nude:PropTypes.bool,underline:PropTypes.bool,emphasize: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,bezel:true,nude:false,underline:false,emphasize:false};

const Email=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=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]=useState(true);const defaultAddOnEnd=React.createElement(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(EyeOff,null):React.createElement(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=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=forwardRef(({size="m",stretch=false,invalid=false,disabled=false,qualifierStart=null,qualifierEnd=null,addOnStart=null,addOnEnd=null,swapSlots=false,bezel=true,nude=false,underline=false,emphasize=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,bezel:bezel,nude:nude,underline:underline,emphasize:emphasize}))}return React.createElement(InputWrapper,_extends({},getWrapperProps(),{bezel:bezel,nude:nude,underline:underline}),React.createElement(React.Fragment,null,getStartSlots()),React.createElement(Input,_extends({},rest,getInputProps(),{type:"text",inputMode:"numeric",ref:ref,enclosed:false,bezel:false,emphasize:emphasize,nude:nude})),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,bezel:PropTypes.bool,nude:PropTypes.bool,underline:PropTypes.bool,emphasize:PropTypes.bool};Numeric.defaultProps={size:"m",stretch:false,qualifierStart:null,qualifierEnd:null,addOnStart:null,addOnEnd:null,swapSlots:false,invalid:false,disabled:false,bezel:true,nude:false,underline:false,emphasize:false};

const Search=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(Search$1,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=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=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 styles$2 = {"l":"l__5cbH7","m":"m__CrGBV","s":"s__0an6o","xs":"xs__eNtOr","alignCenter":"alignCenter__LI5B8"};

const{concatClasses: concatClasses$1}=propsUtil;const Pinfield=forwardRef(({size="m",length=4,alignCenter=false,stretch=false,invalid=false,disabled=false,placeholder="",qualifierStart=null,qualifierEnd=null,addOnStart=null,addOnEnd=null,swapSlots,bezel=true,nude=false,underline=false,emphasize=false,...props},ref)=>{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$1(resolveSizeProp(size),"font");const sizeClass=concatClasses$1(resolveSizeProp(size),"size");const headingClass=concatClasses$1(resolveSizeProp(size),"emphasize");const isSlotsEmpty=!(qualifierStart||qualifierEnd||addOnStart||addOnEnd);const classes=cn({[commonStyles[fontClass]]:!emphasize},{[commonStyles[headingClass]]:emphasize},commonStyles[sizeClass],{[commonStyles.borderless]:!isSlotsEmpty},{[commonStyles.bezelless]:!isSlotsEmpty||!bezel},styles$2[size],{[styles$2.alignCenter]:alignCenter},{[commonStyles.nude]:nude},{[commonStyles.underline]:isSlotsEmpty&&underline});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,bezel:bezel,nude:nude,underline:underline,emphasize:emphasize}))}return React.createElement(InputWrapper,_extends({},getWrapperProps(),{bezel:bezel,nude:nude,underline:underline}),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,emphasize:emphasize,nude:nude})),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,bezel:PropTypes.bool,nude:PropTypes.bool,underline:PropTypes.bool,emphasize:PropTypes.bool};Pinfield.defaultProps={size:"m",stretch:false,qualifierStart:null,qualifierEnd:null,addOnStart:null,addOnEnd:null,invalid:false,disabled:false,length:4,alignCenter:false,placeholder:"",bezel:true,nude:false,underline:false,emphasize:false};

var styles$1 = {"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","withFlag":"withFlag__vzw0H","popoverSearch":"popoverSearch__O0de5","emptyResult":"emptyResult__a2Qgz","defaultText":"defaultText__NkUnZ","gap":"gap__35PGC"};

const PhoneNumber=forwardRef(({size="m",invalid=false,disabled=false,stretch=false,emptyResult,placeholder,searchPlaceholder="Search Country",showFlag=false,countries,defaultCountry="",onChange,bezel=true,nude=false,underline=false,emphasize=false,separator=true,...props},ref)=>{const{style,className,...rest}=props;const inputRef=useRef(null);const inputPhoneRef=useRef(ref);const[inputValue,setInputValue]=useState("");const[phoneNumber,setInputPhoneNumber]=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}=useSelection({items:countries,displayKey:["name","id"],filter:true,onChange,inputValue,typeahead:true,onInputChange,onItemChange,standaloneSearch:true});const{getTargetProps,getPopoverProps}=usePopover({open:isOpen,placement:"bottom-start",size:resolvedSize,flip:true,bezel:false,stretch:true,highOffset: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(ListItemContent,{size:resolvedSize,disabled:disabled,addOnStart:showFlag?item.flag:null,match:inputValue},`${item.name} (${item.id})`);const renderValue=()=>{if(!selectedItem)return null;const item=defaultCountry?{id:defaultCountry,flag:countries.find(c=>c.id===defaultCountry)?.flag}:selectedItem;return showFlag?React.createElement("span",{className:cn(styles$1.withFlag)},item.flag,React.createElement("span",{className:cn(styles$1.countryCode)},item.id)):item.id};const renderEmptyValue=()=>React.createElement("div",{className:cn(styles$1.emptyResult,styles$1[resolvedSize])},emptyResult?emptyResult:React.createElement(React.Fragment,null,React.createElement(Icontuner,{size:resolvedSize},React.createElement(Search$1,null)),"No search result found"));const handleCross=()=>{setInputValue("");inputRef?.current?.focus();};const inputProps=getInputProps({ref:inputRef,disabled,onClick:e=>e.stopPropagation()});const toggleButtonProps=useMemo(()=>{return {...rest,...getToggleButtonProps({disabled})}},[getToggleButtonProps,disabled]);const phoneClasses=cn(styles$1.PhoneNumber,{[styles$1.stretch]:stretch});const popoverProps=getPopoverProps();const anchorStyles={...popoverProps.anchorStyles,left:0};return React.createElement("div",{className:phoneClasses,"aria-disabled":disabled},React.createElement(InputWrapper,_extends({},getWrapperProps(),{shrink:true,bezel:bezel,nude:nude,underline:underline}),React.createElement(InputAddOn,null,defaultCountry?React.createElement("div",{className:cn(styles$1.defaultText,styles$1[resolvedSize]),"aria-label":`Country code: ${defaultCountry}`},renderValue()):React.createElement("div",_extends({},toggleButtonProps,{className:cn(styles$1.selectionButton,styles$1[resolvedSize]),role:"button"}),React.createElement(Button,_extends({tabIndex:disabled?-1:0,nude:true,compact:true,system:true,qualifier:isOpen?React.createElement(CaretUp,null):React.createElement(CaretDown,null),qualifierEnd:true,disabled:disabled,size:resolvedSize},getTargetProps()),renderValue())),separator&&React.createElement("span",{className:cn(styles$1.separator)})),React.createElement("div",{className:cn(styles$1.gap)},React.createElement(Input,_extends({},rest,phoneInputProps(),{size:resolvedSize,ref:inputPhoneRef,enclosed:false,bezel:false,type:"text",onInput:handlePhoneNumberChange,placeholder:placeholder,emphasize:emphasize,nude:nude})))),React.createElement(BasePopover,_extends({},getPopoverProps(),{open:isOpen,anchorStyles:{...anchorStyles}}),React.createElement(ListBox,_extends({},getMenuProps({},{suppressRefError:true}),{size:resolvedSize}),React.createElement("div",{className:cn(styles$1.popoverSearch)},React.createElement(Search,_extends({},inputProps,{size:resolvedSize,placeholder:searchPlaceholder,stretch:true,addOnEnd:React.createElement(Button,{size:resolvedSize,nude:true,system:true,icon:true,compact:true,type:"button",onClick:handleCross},React.createElement(Cross,null))}))),React.createElement("div",{className:cn(styles$1.listWrapper,styles$1[resolvedSize])},filteredItems.length===0?renderEmptyValue():filteredItems.map((item,index)=>React.createElement(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.node,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,bezel:PropTypes.bool,nude:PropTypes.bool,underline:PropTypes.bool,emphasize:PropTypes.bool,separator:PropTypes.bool};

var styles = {"Hero":"Hero__etTPZ","invalid":"invalid__iCVH2","field":"field__z4A-v","stretch":"stretch__UXIpf","wrapper":"wrapper__mlBpA","sSize":"sSize__xGp7Q","mSize":"mSize__BYBAl","lSize":"lSize__4Jv6L","sLabel":"sLabel__BRCpK","leftAlign":"leftAlign__05bf5","centerAlign":"centerAlign__9fVAQ","rightAlign":"rightAlign__nPQ-c","labelContainer":"labelContainer__Pq2dA","label":"label__Yk65T","disabled":"disabled__Q4oAU"};

const{concatClasses,mergeRefs}=propsUtil;const Hero=forwardRef(({invalid=false,disabled=false,stretch=false,size="m",align="left",label="",qualifierStart,qualifierEnd,addOnStart,addOnEnd,placeholder="",prefix="",mask="**************",pin=false,...props},ref)=>{const{style,className,...rest}=props;const sizeClass=concatClasses(resolveSizeProp(size),"size");const alignClass=concatClasses(align,"align");const labelClass=concatClasses(resolveSizeProp(size),"label");const innerRef=useRef(null);const combinedRef=mergeRefs(innerRef,ref);if(mask===""){console.warn(`Hero: Mask can't be empty string. Falling back to default mask.`);}const{getStartSlots,getEndSlots}=useInput({qualifierStart,qualifierEnd,addOnStart,addOnEnd});const heroClasses=cn(styles.Hero,styles.wrapper,styles[sizeClass],{[styles.stretch]:stretch,[styles.invalid]:invalid,[styles.disabled]:disabled,[commonStyles.stretchQualifierEnd]:(qualifierEnd||addOnEnd)&&stretch});const inputClasses=cn(styles.field,styles[alignClass],{[styles.stretch]:stretch});const labelClasses=cn(styles.label,styles[labelClass]);let placeholderValue=placeholder;if(!placeholderValue&&pin){const symbol=decodeHTMLEntity(MASK_SYMBOL);placeholderValue=new Array(mask.length).fill(symbol).join("");}useEffect(()=>{if(!innerRef.current)return;const appliedMask=mask===""?MASK_HERO:mask;const im=Inputmask({mask:`${prefix}${appliedMask}`,placeholder:"",showMaskOnHover:false,showMaskOnFocus:true,autoUnmask:true,definitions:{"*":{validator:"[\\s\\S]",cardinality:1}}});im.mask(innerRef.current);return ()=>im.remove()},[mask,prefix,innerRef]);const fieldContent=React.createElement(Field,_extends({},rest,{ref:combinedRef,className:inputClasses,invalid:invalid,stretch:stretch,disabled:disabled,placeholder:placeholderValue}));return React.createElement("div",{disabled:disabled,"aria-invalid":invalid,className:heroClasses},getStartSlots(),label?React.createElement("div",{className:styles.labelContainer},React.createElement("span",{className:labelClasses},label),fieldContent):fieldContent,getEndSlots())});Hero.displayName="Hero";Hero.propTypes={size:PropTypes.oneOf(["s","m","l"]),invalid:PropTypes.bool,stretch:PropTypes.bool,disabled:PropTypes.bool,align:PropTypes.oneOf(["left","center","right"]),label:PropTypes.string,qualifierStart:PropTypes.oneOfType([PropTypes.element,PropTypes.string]),qualifierEnd:PropTypes.oneOfType([PropTypes.element,PropTypes.string]),addOnStart:PropTypes.element,addOnEnd:PropTypes.element,placeholder:PropTypes.string,prefix:PropTypes.string,mask:PropTypes.string,pin:PropTypes.bool};

export { Datefield, Email, Hero, Input, InputAddOn, InputQualifier, InputWrapper, Numeric, Password, PhoneNumber, Pinfield, Search, Textfield, Timefield, URL, useInput };