@twilio-paste/input-box - npm Package Compare versions

Comparing version 7.1.0 to 7.1.1

dist/index.debug.es.js

@@ -91,3 +91,3 @@ var __defProp = Object.defineProperty;
     _focusWithin: {
-      boxShadow: "shadowFocus"
+      boxShadow: disabled ? boxShadow : "shadowFocus"
     },
@@ -140,3 +140,3 @@ _active: {
       backgroundColor: "colorBackgroundInverse",
-      boxShadow: "shadowFocusInverse"
+      boxShadow: disabled ? boxShadow : "shadowFocusInverse"
     },
@@ -143,0 +143,0 @@ _active: {

dist/index.debug.js

@@ -120,3 +120,3 @@ var __create = Object.create;
     _focusWithin: {
-      boxShadow: "shadowFocus"
+      boxShadow: disabled ? boxShadow : "shadowFocus"
     },
@@ -169,3 +169,3 @@ _active: {
       backgroundColor: "colorBackgroundInverse",
-      boxShadow: "shadowFocusInverse"
+      boxShadow: disabled ? boxShadow : "shadowFocusInverse"
     },
@@ -172,0 +172,0 @@ _active: {

dist/index.es.js

@@ -1,1 +0,1 @@
-var __defProp=Object.defineProperty;var __getOwnPropSymbols=Object.getOwnPropertySymbols;var __hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable;var __defNormalProp=(obj,key,value)=>key in obj?__defProp(obj,key,{enumerable:!0,configurable:!0,writable:!0,value}):obj[key]=value,__spreadValues=(a,b)=>{for(var prop in b||(b={}))__hasOwnProp.call(b,prop)&&__defNormalProp(a,prop,b[prop]);if(__getOwnPropSymbols)for(var prop of __getOwnPropSymbols(b))__propIsEnum.call(b,prop)&&__defNormalProp(a,prop,b[prop]);return a};var __objRest=(source,exclude)=>{var target={};for(var prop in source)__hasOwnProp.call(source,prop)&&exclude.indexOf(prop)<0&&(target[prop]=source[prop]);if(source!=null&&__getOwnPropSymbols)for(var prop of __getOwnPropSymbols(source))exclude.indexOf(prop)<0&&__propIsEnum.call(source,prop)&&(target[prop]=source[prop]);return target};import*as React7 from"react";import*as PropTypes4 from"prop-types";import*as React3 from"react";import*as React from"react";import{Box}from"@twilio-paste/box";import*as PropTypes from"prop-types";var FauxInputPropTypes={children:PropTypes.node.isRequired,disabled:PropTypes.bool,element:PropTypes.string.isRequired,hasError:PropTypes.bool,readOnly:PropTypes.bool,type:PropTypes.oneOf(["text","email","hidden","number","password","search","tel","date","time"]),variant:PropTypes.oneOf(["default","inverse"])};var DefaultFauxInput=React.forwardRef(({disabled,element,hasError,readOnly,children,type,variant},ref)=>{let backgroundColor="colorBackgroundBody",boxShadow="shadowBorder",boxShadowHover="shadowBorderPrimaryStronger",boxShadowActive="shadowBorderPrimaryStronger";return disabled&&type!=="hidden"?(boxShadow="shadowBorderWeak",boxShadowHover="shadowBorderWeak",backgroundColor="colorBackground",boxShadowActive="shadowBorderWeak"):readOnly&&type!=="hidden"?(boxShadowHover="shadowBorder",backgroundColor="colorBackground"):hasError&&type!=="hidden"?(boxShadow="shadowBorderError",boxShadowHover="shadowBorderErrorStronger"):type==="hidden"&&(boxShadow=null,boxShadowHover=null,backgroundColor=null,boxShadowActive=null),React.createElement(Box,{element,ref,display:"flex",width:"100%",backgroundColor,boxShadow,borderRadius:"borderRadius20",transition:"box-shadow 100ms ease-in",cursor:disabled?"not-allowed":"text",variant,_hover:{boxShadow:boxShadowHover},_focusWithin:{boxShadow:"shadowFocus"},_active:{boxShadow:boxShadowActive}},children)});DefaultFauxInput.displayName="DefaultFauxInput";DefaultFauxInput.propTypes=FauxInputPropTypes;import*as React2 from"react";import{Box as Box2}from"@twilio-paste/box";var InverseFauxInput=React2.forwardRef(({disabled,element,hasError,readOnly,children,type,variant},ref)=>{let backgroundColor="colorBackgroundInverse",boxShadow="shadowBorderInverse",boxShadowHover="shadowBorderInverseStrongest";return disabled&&type!=="hidden"?(backgroundColor="colorBackgroundInverse",boxShadow="shadowBorderInverseWeaker",boxShadowHover="shadowBorderInverseWeaker"):readOnly&&type!=="hidden"?(backgroundColor="colorBackgroundInverseStrong",boxShadowHover="shadowBorderInverse"):hasError&&type!=="hidden"?boxShadow="shadowBorderErrorWeak":type==="hidden"&&(backgroundColor=null,boxShadow=null,boxShadowHover=null),React2.createElement(Box2,{element,ref,display:"flex",width:"100%",backgroundColor,boxShadow,borderRadius:"borderRadius20",color:"colorTextInverse",transition:"box-shadow 100ms ease-in",cursor:disabled?"not-allowed":"text",variant,_hover:{boxShadow:boxShadowHover},_focusWithin:{backgroundColor:"colorBackgroundInverse",boxShadow:"shadowFocusInverse"},_active:{boxShadow:boxShadowHover}},children)});InverseFauxInput.displayName="InverseFauxInput";InverseFauxInput.propTypes=FauxInputPropTypes;var FauxInputVariants={default:DefaultFauxInput,inverse:InverseFauxInput},FieldWrapper=React3.forwardRef(({children,disabled,element,hasError,readOnly,type,variant="default"},ref)=>{let FieldWrapperComponent=FauxInputVariants[variant];return React3.createElement(FieldWrapperComponent,{disabled,element,hasError,readOnly,type,variant,ref},children)});FieldWrapper.displayName="FieldWrapper";FieldWrapper.propTypes=FauxInputPropTypes;import*as React4 from"react";import*as PropTypes2 from"prop-types";import{Box as Box3}from"@twilio-paste/box";var Prefix=React4.forwardRef(({children,disabled,element="PREFIX",variant},ref)=>{let backgroundColor="colorBackground",borderColor="colorBorderWeaker";return disabled&&variant==="inverse"?(backgroundColor="none",borderColor="colorBorderInverseWeaker"):variant==="inverse"&&(backgroundColor="colorBackgroundInverseStrong",borderColor="colorBorderInverse"),children==null?null:React4.createElement(Box3,{alignItems:"flex-start",backgroundColor,borderBottomLeftRadius:"borderRadius20",borderRightColor:borderColor,borderRightStyle:"solid",borderRightWidth:"borderWidth10",borderTopLeftRadius:"borderRadius20",display:"flex",element:`${element}_PREFIX`,lineHeight:"lineHeight20",padding:"space30",variant,ref},children)});Prefix.displayName="Prefix";Prefix.propTypes={children:PropTypes2.node.isRequired,element:PropTypes2.string.isRequired,variant:PropTypes2.oneOf(["default","inverse"])};import*as React5 from"react";import*as PropTypes3 from"prop-types";import{Box as Box4}from"@twilio-paste/box";var Suffix=React5.forwardRef(({children,disabled,element="SUFFIX",variant},ref)=>{let backgroundColor="colorBackground",borderColor="colorBorderWeaker";return disabled&&variant==="inverse"?(backgroundColor="none",borderColor="colorBorderInverseWeaker"):variant==="inverse"&&(backgroundColor="colorBackgroundInverseStrong",borderColor="colorBorderInverse"),children==null?null:React5.createElement(Box4,{alignItems:"flex-start",backgroundColor,borderBottomRightRadius:"borderRadius20",borderLeftColor:borderColor,borderLeftStyle:"solid",borderLeftWidth:"borderWidth10",borderTopRightRadius:"borderRadius20",display:"flex",element:`${element}_SUFFIX`,lineHeight:"lineHeight20",padding:"space30",variant,ref},children)});Suffix.displayName="Suffix";Suffix.propTypes={children:PropTypes3.node.isRequired,element:PropTypes3.string.isRequired,variant:PropTypes3.oneOf(["default","inverse"])};import*as React6 from"react";var InputBoxContext=React6.createContext(null),useInputBoxContext=()=>{let context=React6.useContext(InputBoxContext);if(!context)throw new Error("useInputBoxContext must be used within a <InputBox> component.");return context};var InputBox=React7.forwardRef((_a,ref)=>{var _b=_a,{children,disabled=!1,readOnly=!1,element="INPUT_BOX",hasError,insertAfter,insertBefore,type,variant="default"}=_b,props=__objRest(_b,["children","disabled","readOnly","element","hasError","insertAfter","insertBefore","type","variant"]);return React7.createElement(InputBoxContext.Provider,{value:{disabled,readOnly,variant}},React7.createElement(FieldWrapper,__spreadValues({disabled,element,hasError,readOnly,type,variant,ref},props),insertBefore&&React7.createElement(Prefix,{disabled,element,variant},insertBefore),children,insertAfter&&React7.createElement(Suffix,{disabled,element,variant},insertAfter)))});InputBox.displayName="InputBox";InputBox.propTypes={children:PropTypes4.node.isRequired,element:PropTypes4.string.isRequired,disabled:PropTypes4.bool,hasError:PropTypes4.bool,insertAfter:PropTypes4.node,insertBefore:PropTypes4.node,readOnly:PropTypes4.bool,type:PropTypes4.oneOf(["text","email","hidden","number","password","search","tel","date","time"]),variant:PropTypes4.oneOf(["default","inverse"])};import*as React8 from"react";import*as PropTypes5 from"prop-types";import{Box as Box5}from"@twilio-paste/box";var getChevronWrapperState=(disabled,readOnly)=>disabled?"disabled":readOnly?"readOnly":"default",IconColors={default:{default:"colorTextIcon",disabled:"colorTextWeaker",readOnly:"colorTextWeaker"},inverse:{default:"colorTextIconInverse",disabled:"colorTextInverseWeaker",readOnly:"colorTextInverseWeaker"}},getInputChevronIconColor=(variant="default",disabled=!1,readOnly=!1)=>IconColors[variant][getChevronWrapperState(disabled,readOnly)],BackgroundColorStyles={default:{default:"colorBackground",disabled:"colorBackground",readOnly:"colorBackground"},inverse:{default:"colorBackgroundInverseStrong",disabled:"colorBackgroundInverse",readOnly:"colorBackgroundInverseStrong"}},InputChevronWrapper=React8.forwardRef(({children,element="CHEVRON_WRAPPER"},ref)=>{let{disabled,readOnly,variant}=useInputBoxContext();return React8.createElement(Box5,{backgroundColor:BackgroundColorStyles[variant][getChevronWrapperState(disabled,readOnly)],borderRadius:"borderRadius20",cursor:"pointer",alignItems:"center",display:"inline-flex",position:"absolute",pointerEvents:"none",right:"space30",top:"50%",transform:"translateY(-50%)",zIndex:"zIndex10",element,ref},children)});InputChevronWrapper.displayName="InputChevronWrapper";InputChevronWrapper.propTypes={children:PropTypes5.node.isRequired,element:PropTypes5.string.isRequired};export{InputBox,InputChevronWrapper,Prefix,Suffix,getInputChevronIconColor};
+var __defProp=Object.defineProperty;var __getOwnPropSymbols=Object.getOwnPropertySymbols;var __hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable;var __defNormalProp=(obj,key,value)=>key in obj?__defProp(obj,key,{enumerable:!0,configurable:!0,writable:!0,value}):obj[key]=value,__spreadValues=(a,b)=>{for(var prop in b||(b={}))__hasOwnProp.call(b,prop)&&__defNormalProp(a,prop,b[prop]);if(__getOwnPropSymbols)for(var prop of __getOwnPropSymbols(b))__propIsEnum.call(b,prop)&&__defNormalProp(a,prop,b[prop]);return a};var __objRest=(source,exclude)=>{var target={};for(var prop in source)__hasOwnProp.call(source,prop)&&exclude.indexOf(prop)<0&&(target[prop]=source[prop]);if(source!=null&&__getOwnPropSymbols)for(var prop of __getOwnPropSymbols(source))exclude.indexOf(prop)<0&&__propIsEnum.call(source,prop)&&(target[prop]=source[prop]);return target};import*as React7 from"react";import*as PropTypes4 from"prop-types";import*as React3 from"react";import*as React from"react";import{Box}from"@twilio-paste/box";import*as PropTypes from"prop-types";var FauxInputPropTypes={children:PropTypes.node.isRequired,disabled:PropTypes.bool,element:PropTypes.string.isRequired,hasError:PropTypes.bool,readOnly:PropTypes.bool,type:PropTypes.oneOf(["text","email","hidden","number","password","search","tel","date","time"]),variant:PropTypes.oneOf(["default","inverse"])};var DefaultFauxInput=React.forwardRef(({disabled,element,hasError,readOnly,children,type,variant},ref)=>{let backgroundColor="colorBackgroundBody",boxShadow="shadowBorder",boxShadowHover="shadowBorderPrimaryStronger",boxShadowActive="shadowBorderPrimaryStronger";return disabled&&type!=="hidden"?(boxShadow="shadowBorderWeak",boxShadowHover="shadowBorderWeak",backgroundColor="colorBackground",boxShadowActive="shadowBorderWeak"):readOnly&&type!=="hidden"?(boxShadowHover="shadowBorder",backgroundColor="colorBackground"):hasError&&type!=="hidden"?(boxShadow="shadowBorderError",boxShadowHover="shadowBorderErrorStronger"):type==="hidden"&&(boxShadow=null,boxShadowHover=null,backgroundColor=null,boxShadowActive=null),React.createElement(Box,{element,ref,display:"flex",width:"100%",backgroundColor,boxShadow,borderRadius:"borderRadius20",transition:"box-shadow 100ms ease-in",cursor:disabled?"not-allowed":"text",variant,_hover:{boxShadow:boxShadowHover},_focusWithin:{boxShadow:disabled?boxShadow:"shadowFocus"},_active:{boxShadow:boxShadowActive}},children)});DefaultFauxInput.displayName="DefaultFauxInput";DefaultFauxInput.propTypes=FauxInputPropTypes;import*as React2 from"react";import{Box as Box2}from"@twilio-paste/box";var InverseFauxInput=React2.forwardRef(({disabled,element,hasError,readOnly,children,type,variant},ref)=>{let backgroundColor="colorBackgroundInverse",boxShadow="shadowBorderInverse",boxShadowHover="shadowBorderInverseStrongest";return disabled&&type!=="hidden"?(backgroundColor="colorBackgroundInverse",boxShadow="shadowBorderInverseWeaker",boxShadowHover="shadowBorderInverseWeaker"):readOnly&&type!=="hidden"?(backgroundColor="colorBackgroundInverseStrong",boxShadowHover="shadowBorderInverse"):hasError&&type!=="hidden"?boxShadow="shadowBorderErrorWeak":type==="hidden"&&(backgroundColor=null,boxShadow=null,boxShadowHover=null),React2.createElement(Box2,{element,ref,display:"flex",width:"100%",backgroundColor,boxShadow,borderRadius:"borderRadius20",color:"colorTextInverse",transition:"box-shadow 100ms ease-in",cursor:disabled?"not-allowed":"text",variant,_hover:{boxShadow:boxShadowHover},_focusWithin:{backgroundColor:"colorBackgroundInverse",boxShadow:disabled?boxShadow:"shadowFocusInverse"},_active:{boxShadow:boxShadowHover}},children)});InverseFauxInput.displayName="InverseFauxInput";InverseFauxInput.propTypes=FauxInputPropTypes;var FauxInputVariants={default:DefaultFauxInput,inverse:InverseFauxInput},FieldWrapper=React3.forwardRef(({children,disabled,element,hasError,readOnly,type,variant="default"},ref)=>{let FieldWrapperComponent=FauxInputVariants[variant];return React3.createElement(FieldWrapperComponent,{disabled,element,hasError,readOnly,type,variant,ref},children)});FieldWrapper.displayName="FieldWrapper";FieldWrapper.propTypes=FauxInputPropTypes;import*as React4 from"react";import*as PropTypes2 from"prop-types";import{Box as Box3}from"@twilio-paste/box";var Prefix=React4.forwardRef(({children,disabled,element="PREFIX",variant},ref)=>{let backgroundColor="colorBackground",borderColor="colorBorderWeaker";return disabled&&variant==="inverse"?(backgroundColor="none",borderColor="colorBorderInverseWeaker"):variant==="inverse"&&(backgroundColor="colorBackgroundInverseStrong",borderColor="colorBorderInverse"),children==null?null:React4.createElement(Box3,{alignItems:"flex-start",backgroundColor,borderBottomLeftRadius:"borderRadius20",borderRightColor:borderColor,borderRightStyle:"solid",borderRightWidth:"borderWidth10",borderTopLeftRadius:"borderRadius20",display:"flex",element:`${element}_PREFIX`,lineHeight:"lineHeight20",padding:"space30",variant,ref},children)});Prefix.displayName="Prefix";Prefix.propTypes={children:PropTypes2.node.isRequired,element:PropTypes2.string.isRequired,variant:PropTypes2.oneOf(["default","inverse"])};import*as React5 from"react";import*as PropTypes3 from"prop-types";import{Box as Box4}from"@twilio-paste/box";var Suffix=React5.forwardRef(({children,disabled,element="SUFFIX",variant},ref)=>{let backgroundColor="colorBackground",borderColor="colorBorderWeaker";return disabled&&variant==="inverse"?(backgroundColor="none",borderColor="colorBorderInverseWeaker"):variant==="inverse"&&(backgroundColor="colorBackgroundInverseStrong",borderColor="colorBorderInverse"),children==null?null:React5.createElement(Box4,{alignItems:"flex-start",backgroundColor,borderBottomRightRadius:"borderRadius20",borderLeftColor:borderColor,borderLeftStyle:"solid",borderLeftWidth:"borderWidth10",borderTopRightRadius:"borderRadius20",display:"flex",element:`${element}_SUFFIX`,lineHeight:"lineHeight20",padding:"space30",variant,ref},children)});Suffix.displayName="Suffix";Suffix.propTypes={children:PropTypes3.node.isRequired,element:PropTypes3.string.isRequired,variant:PropTypes3.oneOf(["default","inverse"])};import*as React6 from"react";var InputBoxContext=React6.createContext(null),useInputBoxContext=()=>{let context=React6.useContext(InputBoxContext);if(!context)throw new Error("useInputBoxContext must be used within a <InputBox> component.");return context};var InputBox=React7.forwardRef((_a,ref)=>{var _b=_a,{children,disabled=!1,readOnly=!1,element="INPUT_BOX",hasError,insertAfter,insertBefore,type,variant="default"}=_b,props=__objRest(_b,["children","disabled","readOnly","element","hasError","insertAfter","insertBefore","type","variant"]);return React7.createElement(InputBoxContext.Provider,{value:{disabled,readOnly,variant}},React7.createElement(FieldWrapper,__spreadValues({disabled,element,hasError,readOnly,type,variant,ref},props),insertBefore&&React7.createElement(Prefix,{disabled,element,variant},insertBefore),children,insertAfter&&React7.createElement(Suffix,{disabled,element,variant},insertAfter)))});InputBox.displayName="InputBox";InputBox.propTypes={children:PropTypes4.node.isRequired,element:PropTypes4.string.isRequired,disabled:PropTypes4.bool,hasError:PropTypes4.bool,insertAfter:PropTypes4.node,insertBefore:PropTypes4.node,readOnly:PropTypes4.bool,type:PropTypes4.oneOf(["text","email","hidden","number","password","search","tel","date","time"]),variant:PropTypes4.oneOf(["default","inverse"])};import*as React8 from"react";import*as PropTypes5 from"prop-types";import{Box as Box5}from"@twilio-paste/box";var getChevronWrapperState=(disabled,readOnly)=>disabled?"disabled":readOnly?"readOnly":"default",IconColors={default:{default:"colorTextIcon",disabled:"colorTextWeaker",readOnly:"colorTextWeaker"},inverse:{default:"colorTextIconInverse",disabled:"colorTextInverseWeaker",readOnly:"colorTextInverseWeaker"}},getInputChevronIconColor=(variant="default",disabled=!1,readOnly=!1)=>IconColors[variant][getChevronWrapperState(disabled,readOnly)],BackgroundColorStyles={default:{default:"colorBackground",disabled:"colorBackground",readOnly:"colorBackground"},inverse:{default:"colorBackgroundInverseStrong",disabled:"colorBackgroundInverse",readOnly:"colorBackgroundInverseStrong"}},InputChevronWrapper=React8.forwardRef(({children,element="CHEVRON_WRAPPER"},ref)=>{let{disabled,readOnly,variant}=useInputBoxContext();return React8.createElement(Box5,{backgroundColor:BackgroundColorStyles[variant][getChevronWrapperState(disabled,readOnly)],borderRadius:"borderRadius20",cursor:"pointer",alignItems:"center",display:"inline-flex",position:"absolute",pointerEvents:"none",right:"space30",top:"50%",transform:"translateY(-50%)",zIndex:"zIndex10",element,ref},children)});InputChevronWrapper.displayName="InputChevronWrapper";InputChevronWrapper.propTypes={children:PropTypes5.node.isRequired,element:PropTypes5.string.isRequired};export{InputBox,InputChevronWrapper,Prefix,Suffix,getInputChevronIconColor};

dist/index.js

@@ -1,1 +0,1 @@
-var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames,__getOwnPropSymbols=Object.getOwnPropertySymbols,__getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable;var __defNormalProp=(obj,key,value)=>key in obj?__defProp(obj,key,{enumerable:!0,configurable:!0,writable:!0,value}):obj[key]=value,__spreadValues=(a,b)=>{for(var prop in b||(b={}))__hasOwnProp.call(b,prop)&&__defNormalProp(a,prop,b[prop]);if(__getOwnPropSymbols)for(var prop of __getOwnPropSymbols(b))__propIsEnum.call(b,prop)&&__defNormalProp(a,prop,b[prop]);return a};var __objRest=(source,exclude)=>{var target={};for(var prop in source)__hasOwnProp.call(source,prop)&&exclude.indexOf(prop)<0&&(target[prop]=source[prop]);if(source!=null&&__getOwnPropSymbols)for(var prop of __getOwnPropSymbols(source))exclude.indexOf(prop)<0&&__propIsEnum.call(source,prop)&&(target[prop]=source[prop]);return target};var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var src_exports={};__export(src_exports,{InputBox:()=>InputBox,InputChevronWrapper:()=>InputChevronWrapper,Prefix:()=>Prefix,Suffix:()=>Suffix,getInputChevronIconColor:()=>getInputChevronIconColor});module.exports=__toCommonJS(src_exports);var React7=__toESM(require("react")),PropTypes4=__toESM(require("prop-types"));var React3=__toESM(require("react"));var React=__toESM(require("react")),import_box=require("@twilio-paste/box");var PropTypes=__toESM(require("prop-types")),FauxInputPropTypes={children:PropTypes.node.isRequired,disabled:PropTypes.bool,element:PropTypes.string.isRequired,hasError:PropTypes.bool,readOnly:PropTypes.bool,type:PropTypes.oneOf(["text","email","hidden","number","password","search","tel","date","time"]),variant:PropTypes.oneOf(["default","inverse"])};var DefaultFauxInput=React.forwardRef(({disabled,element,hasError,readOnly,children,type,variant},ref)=>{let backgroundColor="colorBackgroundBody",boxShadow="shadowBorder",boxShadowHover="shadowBorderPrimaryStronger",boxShadowActive="shadowBorderPrimaryStronger";return disabled&&type!=="hidden"?(boxShadow="shadowBorderWeak",boxShadowHover="shadowBorderWeak",backgroundColor="colorBackground",boxShadowActive="shadowBorderWeak"):readOnly&&type!=="hidden"?(boxShadowHover="shadowBorder",backgroundColor="colorBackground"):hasError&&type!=="hidden"?(boxShadow="shadowBorderError",boxShadowHover="shadowBorderErrorStronger"):type==="hidden"&&(boxShadow=null,boxShadowHover=null,backgroundColor=null,boxShadowActive=null),React.createElement(import_box.Box,{element,ref,display:"flex",width:"100%",backgroundColor,boxShadow,borderRadius:"borderRadius20",transition:"box-shadow 100ms ease-in",cursor:disabled?"not-allowed":"text",variant,_hover:{boxShadow:boxShadowHover},_focusWithin:{boxShadow:"shadowFocus"},_active:{boxShadow:boxShadowActive}},children)});DefaultFauxInput.displayName="DefaultFauxInput";DefaultFauxInput.propTypes=FauxInputPropTypes;var React2=__toESM(require("react")),import_box2=require("@twilio-paste/box");var InverseFauxInput=React2.forwardRef(({disabled,element,hasError,readOnly,children,type,variant},ref)=>{let backgroundColor="colorBackgroundInverse",boxShadow="shadowBorderInverse",boxShadowHover="shadowBorderInverseStrongest";return disabled&&type!=="hidden"?(backgroundColor="colorBackgroundInverse",boxShadow="shadowBorderInverseWeaker",boxShadowHover="shadowBorderInverseWeaker"):readOnly&&type!=="hidden"?(backgroundColor="colorBackgroundInverseStrong",boxShadowHover="shadowBorderInverse"):hasError&&type!=="hidden"?boxShadow="shadowBorderErrorWeak":type==="hidden"&&(backgroundColor=null,boxShadow=null,boxShadowHover=null),React2.createElement(import_box2.Box,{element,ref,display:"flex",width:"100%",backgroundColor,boxShadow,borderRadius:"borderRadius20",color:"colorTextInverse",transition:"box-shadow 100ms ease-in",cursor:disabled?"not-allowed":"text",variant,_hover:{boxShadow:boxShadowHover},_focusWithin:{backgroundColor:"colorBackgroundInverse",boxShadow:"shadowFocusInverse"},_active:{boxShadow:boxShadowHover}},children)});InverseFauxInput.displayName="InverseFauxInput";InverseFauxInput.propTypes=FauxInputPropTypes;var FauxInputVariants={default:DefaultFauxInput,inverse:InverseFauxInput},FieldWrapper=React3.forwardRef(({children,disabled,element,hasError,readOnly,type,variant="default"},ref)=>{let FieldWrapperComponent=FauxInputVariants[variant];return React3.createElement(FieldWrapperComponent,{disabled,element,hasError,readOnly,type,variant,ref},children)});FieldWrapper.displayName="FieldWrapper";FieldWrapper.propTypes=FauxInputPropTypes;var React4=__toESM(require("react")),PropTypes2=__toESM(require("prop-types")),import_box3=require("@twilio-paste/box"),Prefix=React4.forwardRef(({children,disabled,element="PREFIX",variant},ref)=>{let backgroundColor="colorBackground",borderColor="colorBorderWeaker";return disabled&&variant==="inverse"?(backgroundColor="none",borderColor="colorBorderInverseWeaker"):variant==="inverse"&&(backgroundColor="colorBackgroundInverseStrong",borderColor="colorBorderInverse"),children==null?null:React4.createElement(import_box3.Box,{alignItems:"flex-start",backgroundColor,borderBottomLeftRadius:"borderRadius20",borderRightColor:borderColor,borderRightStyle:"solid",borderRightWidth:"borderWidth10",borderTopLeftRadius:"borderRadius20",display:"flex",element:`${element}_PREFIX`,lineHeight:"lineHeight20",padding:"space30",variant,ref},children)});Prefix.displayName="Prefix";Prefix.propTypes={children:PropTypes2.node.isRequired,element:PropTypes2.string.isRequired,variant:PropTypes2.oneOf(["default","inverse"])};var React5=__toESM(require("react")),PropTypes3=__toESM(require("prop-types")),import_box4=require("@twilio-paste/box"),Suffix=React5.forwardRef(({children,disabled,element="SUFFIX",variant},ref)=>{let backgroundColor="colorBackground",borderColor="colorBorderWeaker";return disabled&&variant==="inverse"?(backgroundColor="none",borderColor="colorBorderInverseWeaker"):variant==="inverse"&&(backgroundColor="colorBackgroundInverseStrong",borderColor="colorBorderInverse"),children==null?null:React5.createElement(import_box4.Box,{alignItems:"flex-start",backgroundColor,borderBottomRightRadius:"borderRadius20",borderLeftColor:borderColor,borderLeftStyle:"solid",borderLeftWidth:"borderWidth10",borderTopRightRadius:"borderRadius20",display:"flex",element:`${element}_SUFFIX`,lineHeight:"lineHeight20",padding:"space30",variant,ref},children)});Suffix.displayName="Suffix";Suffix.propTypes={children:PropTypes3.node.isRequired,element:PropTypes3.string.isRequired,variant:PropTypes3.oneOf(["default","inverse"])};var React6=__toESM(require("react")),InputBoxContext=React6.createContext(null),useInputBoxContext=()=>{let context=React6.useContext(InputBoxContext);if(!context)throw new Error("useInputBoxContext must be used within a <InputBox> component.");return context};var InputBox=React7.forwardRef((_a,ref)=>{var _b=_a,{children,disabled=!1,readOnly=!1,element="INPUT_BOX",hasError,insertAfter,insertBefore,type,variant="default"}=_b,props=__objRest(_b,["children","disabled","readOnly","element","hasError","insertAfter","insertBefore","type","variant"]);return React7.createElement(InputBoxContext.Provider,{value:{disabled,readOnly,variant}},React7.createElement(FieldWrapper,__spreadValues({disabled,element,hasError,readOnly,type,variant,ref},props),insertBefore&&React7.createElement(Prefix,{disabled,element,variant},insertBefore),children,insertAfter&&React7.createElement(Suffix,{disabled,element,variant},insertAfter)))});InputBox.displayName="InputBox";InputBox.propTypes={children:PropTypes4.node.isRequired,element:PropTypes4.string.isRequired,disabled:PropTypes4.bool,hasError:PropTypes4.bool,insertAfter:PropTypes4.node,insertBefore:PropTypes4.node,readOnly:PropTypes4.bool,type:PropTypes4.oneOf(["text","email","hidden","number","password","search","tel","date","time"]),variant:PropTypes4.oneOf(["default","inverse"])};var React8=__toESM(require("react")),PropTypes5=__toESM(require("prop-types")),import_box5=require("@twilio-paste/box");var getChevronWrapperState=(disabled,readOnly)=>disabled?"disabled":readOnly?"readOnly":"default",IconColors={default:{default:"colorTextIcon",disabled:"colorTextWeaker",readOnly:"colorTextWeaker"},inverse:{default:"colorTextIconInverse",disabled:"colorTextInverseWeaker",readOnly:"colorTextInverseWeaker"}},getInputChevronIconColor=(variant="default",disabled=!1,readOnly=!1)=>IconColors[variant][getChevronWrapperState(disabled,readOnly)],BackgroundColorStyles={default:{default:"colorBackground",disabled:"colorBackground",readOnly:"colorBackground"},inverse:{default:"colorBackgroundInverseStrong",disabled:"colorBackgroundInverse",readOnly:"colorBackgroundInverseStrong"}},InputChevronWrapper=React8.forwardRef(({children,element="CHEVRON_WRAPPER"},ref)=>{let{disabled,readOnly,variant}=useInputBoxContext();return React8.createElement(import_box5.Box,{backgroundColor:BackgroundColorStyles[variant][getChevronWrapperState(disabled,readOnly)],borderRadius:"borderRadius20",cursor:"pointer",alignItems:"center",display:"inline-flex",position:"absolute",pointerEvents:"none",right:"space30",top:"50%",transform:"translateY(-50%)",zIndex:"zIndex10",element,ref},children)});InputChevronWrapper.displayName="InputChevronWrapper";InputChevronWrapper.propTypes={children:PropTypes5.node.isRequired,element:PropTypes5.string.isRequired};0&&(module.exports={InputBox,InputChevronWrapper,Prefix,Suffix,getInputChevronIconColor});
+var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames,__getOwnPropSymbols=Object.getOwnPropertySymbols,__getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable;var __defNormalProp=(obj,key,value)=>key in obj?__defProp(obj,key,{enumerable:!0,configurable:!0,writable:!0,value}):obj[key]=value,__spreadValues=(a,b)=>{for(var prop in b||(b={}))__hasOwnProp.call(b,prop)&&__defNormalProp(a,prop,b[prop]);if(__getOwnPropSymbols)for(var prop of __getOwnPropSymbols(b))__propIsEnum.call(b,prop)&&__defNormalProp(a,prop,b[prop]);return a};var __objRest=(source,exclude)=>{var target={};for(var prop in source)__hasOwnProp.call(source,prop)&&exclude.indexOf(prop)<0&&(target[prop]=source[prop]);if(source!=null&&__getOwnPropSymbols)for(var prop of __getOwnPropSymbols(source))exclude.indexOf(prop)<0&&__propIsEnum.call(source,prop)&&(target[prop]=source[prop]);return target};var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var src_exports={};__export(src_exports,{InputBox:()=>InputBox,InputChevronWrapper:()=>InputChevronWrapper,Prefix:()=>Prefix,Suffix:()=>Suffix,getInputChevronIconColor:()=>getInputChevronIconColor});module.exports=__toCommonJS(src_exports);var React7=__toESM(require("react")),PropTypes4=__toESM(require("prop-types"));var React3=__toESM(require("react"));var React=__toESM(require("react")),import_box=require("@twilio-paste/box");var PropTypes=__toESM(require("prop-types")),FauxInputPropTypes={children:PropTypes.node.isRequired,disabled:PropTypes.bool,element:PropTypes.string.isRequired,hasError:PropTypes.bool,readOnly:PropTypes.bool,type:PropTypes.oneOf(["text","email","hidden","number","password","search","tel","date","time"]),variant:PropTypes.oneOf(["default","inverse"])};var DefaultFauxInput=React.forwardRef(({disabled,element,hasError,readOnly,children,type,variant},ref)=>{let backgroundColor="colorBackgroundBody",boxShadow="shadowBorder",boxShadowHover="shadowBorderPrimaryStronger",boxShadowActive="shadowBorderPrimaryStronger";return disabled&&type!=="hidden"?(boxShadow="shadowBorderWeak",boxShadowHover="shadowBorderWeak",backgroundColor="colorBackground",boxShadowActive="shadowBorderWeak"):readOnly&&type!=="hidden"?(boxShadowHover="shadowBorder",backgroundColor="colorBackground"):hasError&&type!=="hidden"?(boxShadow="shadowBorderError",boxShadowHover="shadowBorderErrorStronger"):type==="hidden"&&(boxShadow=null,boxShadowHover=null,backgroundColor=null,boxShadowActive=null),React.createElement(import_box.Box,{element,ref,display:"flex",width:"100%",backgroundColor,boxShadow,borderRadius:"borderRadius20",transition:"box-shadow 100ms ease-in",cursor:disabled?"not-allowed":"text",variant,_hover:{boxShadow:boxShadowHover},_focusWithin:{boxShadow:disabled?boxShadow:"shadowFocus"},_active:{boxShadow:boxShadowActive}},children)});DefaultFauxInput.displayName="DefaultFauxInput";DefaultFauxInput.propTypes=FauxInputPropTypes;var React2=__toESM(require("react")),import_box2=require("@twilio-paste/box");var InverseFauxInput=React2.forwardRef(({disabled,element,hasError,readOnly,children,type,variant},ref)=>{let backgroundColor="colorBackgroundInverse",boxShadow="shadowBorderInverse",boxShadowHover="shadowBorderInverseStrongest";return disabled&&type!=="hidden"?(backgroundColor="colorBackgroundInverse",boxShadow="shadowBorderInverseWeaker",boxShadowHover="shadowBorderInverseWeaker"):readOnly&&type!=="hidden"?(backgroundColor="colorBackgroundInverseStrong",boxShadowHover="shadowBorderInverse"):hasError&&type!=="hidden"?boxShadow="shadowBorderErrorWeak":type==="hidden"&&(backgroundColor=null,boxShadow=null,boxShadowHover=null),React2.createElement(import_box2.Box,{element,ref,display:"flex",width:"100%",backgroundColor,boxShadow,borderRadius:"borderRadius20",color:"colorTextInverse",transition:"box-shadow 100ms ease-in",cursor:disabled?"not-allowed":"text",variant,_hover:{boxShadow:boxShadowHover},_focusWithin:{backgroundColor:"colorBackgroundInverse",boxShadow:disabled?boxShadow:"shadowFocusInverse"},_active:{boxShadow:boxShadowHover}},children)});InverseFauxInput.displayName="InverseFauxInput";InverseFauxInput.propTypes=FauxInputPropTypes;var FauxInputVariants={default:DefaultFauxInput,inverse:InverseFauxInput},FieldWrapper=React3.forwardRef(({children,disabled,element,hasError,readOnly,type,variant="default"},ref)=>{let FieldWrapperComponent=FauxInputVariants[variant];return React3.createElement(FieldWrapperComponent,{disabled,element,hasError,readOnly,type,variant,ref},children)});FieldWrapper.displayName="FieldWrapper";FieldWrapper.propTypes=FauxInputPropTypes;var React4=__toESM(require("react")),PropTypes2=__toESM(require("prop-types")),import_box3=require("@twilio-paste/box"),Prefix=React4.forwardRef(({children,disabled,element="PREFIX",variant},ref)=>{let backgroundColor="colorBackground",borderColor="colorBorderWeaker";return disabled&&variant==="inverse"?(backgroundColor="none",borderColor="colorBorderInverseWeaker"):variant==="inverse"&&(backgroundColor="colorBackgroundInverseStrong",borderColor="colorBorderInverse"),children==null?null:React4.createElement(import_box3.Box,{alignItems:"flex-start",backgroundColor,borderBottomLeftRadius:"borderRadius20",borderRightColor:borderColor,borderRightStyle:"solid",borderRightWidth:"borderWidth10",borderTopLeftRadius:"borderRadius20",display:"flex",element:`${element}_PREFIX`,lineHeight:"lineHeight20",padding:"space30",variant,ref},children)});Prefix.displayName="Prefix";Prefix.propTypes={children:PropTypes2.node.isRequired,element:PropTypes2.string.isRequired,variant:PropTypes2.oneOf(["default","inverse"])};var React5=__toESM(require("react")),PropTypes3=__toESM(require("prop-types")),import_box4=require("@twilio-paste/box"),Suffix=React5.forwardRef(({children,disabled,element="SUFFIX",variant},ref)=>{let backgroundColor="colorBackground",borderColor="colorBorderWeaker";return disabled&&variant==="inverse"?(backgroundColor="none",borderColor="colorBorderInverseWeaker"):variant==="inverse"&&(backgroundColor="colorBackgroundInverseStrong",borderColor="colorBorderInverse"),children==null?null:React5.createElement(import_box4.Box,{alignItems:"flex-start",backgroundColor,borderBottomRightRadius:"borderRadius20",borderLeftColor:borderColor,borderLeftStyle:"solid",borderLeftWidth:"borderWidth10",borderTopRightRadius:"borderRadius20",display:"flex",element:`${element}_SUFFIX`,lineHeight:"lineHeight20",padding:"space30",variant,ref},children)});Suffix.displayName="Suffix";Suffix.propTypes={children:PropTypes3.node.isRequired,element:PropTypes3.string.isRequired,variant:PropTypes3.oneOf(["default","inverse"])};var React6=__toESM(require("react")),InputBoxContext=React6.createContext(null),useInputBoxContext=()=>{let context=React6.useContext(InputBoxContext);if(!context)throw new Error("useInputBoxContext must be used within a <InputBox> component.");return context};var InputBox=React7.forwardRef((_a,ref)=>{var _b=_a,{children,disabled=!1,readOnly=!1,element="INPUT_BOX",hasError,insertAfter,insertBefore,type,variant="default"}=_b,props=__objRest(_b,["children","disabled","readOnly","element","hasError","insertAfter","insertBefore","type","variant"]);return React7.createElement(InputBoxContext.Provider,{value:{disabled,readOnly,variant}},React7.createElement(FieldWrapper,__spreadValues({disabled,element,hasError,readOnly,type,variant,ref},props),insertBefore&&React7.createElement(Prefix,{disabled,element,variant},insertBefore),children,insertAfter&&React7.createElement(Suffix,{disabled,element,variant},insertAfter)))});InputBox.displayName="InputBox";InputBox.propTypes={children:PropTypes4.node.isRequired,element:PropTypes4.string.isRequired,disabled:PropTypes4.bool,hasError:PropTypes4.bool,insertAfter:PropTypes4.node,insertBefore:PropTypes4.node,readOnly:PropTypes4.bool,type:PropTypes4.oneOf(["text","email","hidden","number","password","search","tel","date","time"]),variant:PropTypes4.oneOf(["default","inverse"])};var React8=__toESM(require("react")),PropTypes5=__toESM(require("prop-types")),import_box5=require("@twilio-paste/box");var getChevronWrapperState=(disabled,readOnly)=>disabled?"disabled":readOnly?"readOnly":"default",IconColors={default:{default:"colorTextIcon",disabled:"colorTextWeaker",readOnly:"colorTextWeaker"},inverse:{default:"colorTextIconInverse",disabled:"colorTextInverseWeaker",readOnly:"colorTextInverseWeaker"}},getInputChevronIconColor=(variant="default",disabled=!1,readOnly=!1)=>IconColors[variant][getChevronWrapperState(disabled,readOnly)],BackgroundColorStyles={default:{default:"colorBackground",disabled:"colorBackground",readOnly:"colorBackground"},inverse:{default:"colorBackgroundInverseStrong",disabled:"colorBackgroundInverse",readOnly:"colorBackgroundInverseStrong"}},InputChevronWrapper=React8.forwardRef(({children,element="CHEVRON_WRAPPER"},ref)=>{let{disabled,readOnly,variant}=useInputBoxContext();return React8.createElement(import_box5.Box,{backgroundColor:BackgroundColorStyles[variant][getChevronWrapperState(disabled,readOnly)],borderRadius:"borderRadius20",cursor:"pointer",alignItems:"center",display:"inline-flex",position:"absolute",pointerEvents:"none",right:"space30",top:"50%",transform:"translateY(-50%)",zIndex:"zIndex10",element,ref},children)});InputChevronWrapper.displayName="InputChevronWrapper";InputChevronWrapper.propTypes={children:PropTypes5.node.isRequired,element:PropTypes5.string.isRequired};0&&(module.exports={InputBox,InputChevronWrapper,Prefix,Suffix,getInputChevronIconColor});

package.json

 {
   "name": "@twilio-paste/input-box",
-  "version": "7.1.0",
+  "version": "7.1.1",
   "category": "user input",
@@ -40,5 +40,5 @@ "status": "production",
   "devDependencies": {
-    "@twilio-paste/box": "^7.0.1",
+    "@twilio-paste/box": "^7.1.0",
     "@twilio-paste/design-tokens": "^8.1.0",
-    "@twilio-paste/style-props": "^6.0.0",
+    "@twilio-paste/style-props": "^6.1.0",
     "@twilio-paste/styling-library": "^1.0.2",
@@ -45,0 +45,0 @@ "@twilio-paste/theme": "^8.0.1",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

133240

increased by0.08%

No dependency changes