@leafygreen-ui/text-input - npm Package Compare versions

Comparing version 12.1.0 to 12.1.1

CHANGELOG.md

 # @leafygreen-ui/text-input
 
+## 12.1.1
+
+### Patch Changes
+
+- 1271944b2: Updates darkMode placeholder and optional text colors to match figma specs.
+- Updated dependencies [95bd93ef9]
+- Updated dependencies [3bb4b7506]
+- Updated dependencies [a0d6638c4]
+  - @leafygreen-ui/icon@11.12.3
+  - @leafygreen-ui/typography@15.2.0
+
 ## 12.1.0
@@ -4,0 +15,0 @@

dist/esm/index.js

@@ -1,2 +0,2 @@
-import e,{useState as n}from"react";import r from"prop-types";import{css as o,cx as t}from"@leafygreen-ui/emotion";import a from"@leafygreen-ui/icon/dist/Checkmark";import l from"@leafygreen-ui/icon/dist/CheckmarkWithCircle";import i from"@leafygreen-ui/icon/dist/Warning";import{useIdAllocator as d,useValidation as s}from"@leafygreen-ui/hooks";import{useUpdatedBaseFontSize as c,Label as b,Description as u}from"@leafygreen-ui/typography";import{BaseFontSize as g,fontFamilies as h,transitionDuration as p,focusRing as f,hoverRing as y,typeScales as m}from"@leafygreen-ui/tokens";import{createUniqueClassName as x,Theme as v,consoleOnce as k}from"@leafygreen-ui/lib";import{palette as w}from"@leafygreen-ui/palette";import{useDarkMode as O}from"@leafygreen-ui/leafygreen-provider";function j(e,n){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);n&&(o=o.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),r.push.apply(r,o)}return r}function S(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?j(Object(r),!0).forEach((function(n){E(e,n,r[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):j(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))}))}return e}function E(e,n,r){return n in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function z(){return z=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var r=arguments[n];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e},z.apply(this,arguments)}function N(e,n){if(null==e)return{};var r,o,t=function(e,n){if(null==e)return{};var r,o,t={},a=Object.keys(e);for(o=0;o<a.length;o++)r=a[o],n.indexOf(r)>=0||(t[r]=e[r]);return t}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o<a.length;o++)r=a[o],n.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(t[r]=e[r])}return t}function D(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}function L(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==r)return;var o,t,a=[],l=!0,i=!1;try{for(r=r.call(e);!(l=(o=r.next()).done)&&(a.push(o.value),!n||a.length!==n);l=!0);}catch(e){i=!0,t=e}finally{try{l||null==r.return||r.return()}finally{if(i)throw t}}return a}(e,n)||function(e,n){if(!e)return;if("string"==typeof e)return P(e,n);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(e);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return P(e,n)}(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function P(e,n){(null==n||n>e.length)&&(n=e.length);for(var r=0,o=new Array(n);r<n;r++)o[r]=e[r];return o}var C,I,M,V,T,A,F,B,X,H,W,U,q,R,$,G,J,K,Q,Y,Z,_,ee,ne,re,oe,te,ae,le,ie,de,se,ce,be,ue,ge,he,pe,fe,ye,me,xe,ve,ke,we,Oe,je,Se,Ee,ze={None:"none",Valid:"valid",Error:"error"},Ne={Email:"email",Password:"password",Search:"search",Text:"text",Url:"url",Tel:"tel",Number:"number"},De={XSmall:"xsmall",Small:"small",Default:"default",Large:"large"},Le=S(S({},g),{},{Large:18}),Pe=function(e){return"0 0 0 100px ".concat(e," inset")},Ce=x("icon-selector"),Ie=o(C||(C=D(["\n  font-family: ",";\n  display: flex;\n  flex-direction: column;\n"])),h.default),Me=function(e,n){switch(e){case De.XSmall:return o(I||(I=D(["\n        font-size: ","px;\n        line-height: ","px;\n      "])),m.body1.fontSize,m.body1.lineHeight);case De.Small:return o(M||(M=D(["\n        font-size: ","px;\n        line-height: ","px;\n      "])),m.body1.fontSize,m.body1.lineHeight);case De.Large:return o(V||(V=D(["\n        font-size: 18px;\n        line-height: 32px;\n      "])));default:var r=n==g.Body1?m.body1:m.body2;return o(T||(T=D(["\n        font-size: ","px;\n        line-height: ","px;\n      "])),r.fontSize,r.lineHeight)}},Ve=o(A||(A=D(["\n  font-size: inherit;\n  line-height: inherit;\n"]))),Te=o(F||(F=D(["\n  > *:last-child {\n    display: block;\n    padding-bottom: 4px;\n  }\n"]))),Ae=o(B||(B=D(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  z-index: 0;\n"]))),Fe=o(X||(X=D(["\n  ",";\n  font-family: ",";\n  width: 100%;\n  height: 36px;\n  font-weight: normal;\n  border: 1px solid;\n  z-index: 1;\n  outline: none;\n  border-radius: 6px;\n  transition: ","ms ease-in-out;\n  transition-property: border-color, box-shadow;\n\n  &:disabled {\n    cursor: not-allowed;\n\n    &:hover,\n    &:active {\n      box-shadow: none;\n    }\n  }\n\n  &::placeholder {\n    ",";\n  }\n\n  /* clears the ‘X’ from Internet Explorer & Chrome */\n  &[type='search'] {\n    &::-ms-clear,\n    &::-ms-reveal {\n      display: none;\n      width: 0;\n      height: 0;\n    }\n    &::-webkit-search-decoration,\n    &::-webkit-search-cancel-button,\n    &::-webkit-search-results-button,\n    &::-webkit-search-results-decoration {\n      display: none;\n    }\n  }\n"])),Ve,h.default,p,Ve),Be=(E(U={},v.Light,o(H||(H=D(["\n    color: ",";\n    background: ",";\n    border: 1px solid ",";\n\n    &:-webkit-autofill {\n      color: ",";\n      background: ",";\n      border: 1px solid ",";\n      -webkit-text-fill-color: ",";\n      box-shadow: ",";\n\n      &:not(:disabled):focus {\n        box-shadow: ",",\n          ",";\n        border-color: ",";\n      }\n\n      &:not(:disabled):hover:not(:focus) {\n        box-shadow: ",",\n          ",";\n      }\n    }\n\n    &::placeholder {\n      color: ",";\n      font-weight: normal;\n    }\n\n    &:hover,\n    &:active {\n      &:not(:disabled):not(:focus) {\n        box-shadow: ",";\n      }\n    }\n\n    &:disabled {\n      color: ",";\n      background-color: ",";\n      border-color: ",";\n\n      &::placeholder {\n        color: inherit;\n      }\n\n      &:-webkit-autofill {\n        &,\n        &:hover,\n        &:focus {\n          appearance: none;\n          border: 1px solid ",";\n          -webkit-text-fill-color: ",";\n          box-shadow: ",";\n        }\n      }\n    }\n  "])),w.black,w.white,w.gray.base,w.black,w.white,w.gray.base,w.black,Pe(w.white),Pe(w.white),f.light.input,w.white,Pe(w.white),y.light.gray,w.gray.light1,y.light.gray,w.gray.base,w.gray.light2,w.gray.light1,w.gray.base,w.gray.base,Pe(w.gray.light2))),E(U,v.Dark,o(W||(W=D(["\n    color: ",";\n    background-color: ",";\n    border: 1px solid ",";\n\n    &:-webkit-autofill {\n      border: 1px solid ",";\n      color: ",";\n      background: ",";\n      -webkit-text-fill-color: ",";\n      box-shadow: ",";\n\n      &:not(:disabled):focus {\n        box-shadow: ",",\n          ",";\n        border-color: ",";\n      }\n\n      &:not(:disabled):hover:not(:focus) {\n        box-shadow: ",",\n          ",";\n      }\n    }\n\n    &:hover,\n    &:active {\n      &:not(:disabled):not(:focus) {\n        box-shadow: ",";\n      }\n    }\n\n    &::placeholder {\n      color: ",";\n      font-weight: normal;\n    }\n\n    &:disabled {\n      color: ",";\n      background-color: ",";\n      border-color: ",";\n\n      &::placeholder {\n        color: inherit;\n      }\n\n      &:-webkit-autofill {\n        &,\n        &:hover,\n        &:focus {\n          appearance: none;\n          border: 1px solid ",";\n          -webkit-text-fill-color: ",";\n          box-shadow: ",";\n        }\n      }\n    }\n  "])),w.gray.light3,w.gray.dark4,w.gray.base,w.gray.base,w.gray.light3,w.gray.dark4,w.gray.light3,Pe(w.gray.dark4),Pe(w.gray.dark4),f.dark.input,w.blue.light1,Pe(w.gray.dark4),y.dark.gray,y.dark.gray,w.gray.base,w.gray.dark1,w.gray.dark3,w.gray.dark2,w.gray.dark1,w.gray.dark1,Pe(w.gray.dark2))),U),Xe=(E($={},v.Light,o(q||(q=D(["\n    &:not(:disabled):focus {\n      box-shadow: ",";\n      border-color: ",";\n    }\n  "])),f.light.input,w.white)),E($,v.Dark,o(R||(R=D(["\n    &:not(:disabled):focus {\n      box-shadow: ",";\n      border-color: ",";\n    }\n  "])),f.dark.input,w.gray.dark4)),$),He=(E(Y={},De.XSmall,o(G||(G=D(["\n    height: 22px;\n    padding-left: 10px;\n  "])))),E(Y,De.Small,o(J||(J=D(["\n    height: 28px;\n    padding-left: 10px;\n  "])))),E(Y,De.Default,o(K||(K=D(["\n    height: 36px;\n    padding-left: 12px;\n  "])))),E(Y,De.Large,o(Q||(Q=D(["\n    height: 48px;\n    padding-left: 16px;\n  "])))),Y),We=(E(ie={},ze.Valid,(E(ee={},v.Light,o(Z||(Z=D(["\n      &:not(:disabled) {\n        border-color: ",";\n\n        &:hover,\n        &:active {\n          &:not(:disabled):not(:focus) {\n            box-shadow: ",";\n          }\n        }\n      }\n    "])),w.green.dark1,y.light.green)),E(ee,v.Dark,o(_||(_=D(["\n      &:not(:disabled) {\n        border-color: ",";\n\n        &:hover,\n        &:active {\n          &:not(:disabled):not(:focus) {\n            box-shadow: ",";\n          }\n        }\n      }\n    "])),w.green.dark1,y.dark.green)),ee)),E(ie,ze.Error,(E(oe={},v.Light,o(ne||(ne=D(["\n      &:not(:disabled) {\n        border-color: ",";\n\n        &:hover,\n        &:active {\n          &:not(:disabled):not(:focus) {\n            box-shadow: ",";\n          }\n        }\n      }\n    "])),w.red.base,y.light.red)),E(oe,v.Dark,o(re||(re=D(["\n      &:not(:disabled) {\n        border-color: ",";\n\n        &:hover,\n        &:active {\n          &:not(:disabled):not(:focus) {\n            box-shadow: ",";\n          }\n        }\n      }\n    "])),w.red.light1,y.dark.red)),oe)),E(ie,ze.None,(E(le={},v.Light,o(te||(te=D([""])))),E(le,v.Dark,o(ae||(ae=D([""])))),le)),ie),Ue=o(de||(de=D(["\n  position: absolute;\n  display: flex;\n  align-items: center;\n  z-index: 1;\n"]))),qe=(E(ge={},De.XSmall,o(se||(se=D(["\n    right: 10px;\n  "])))),E(ge,De.Small,o(ce||(ce=D(["\n    right: 10px;\n  "])))),E(ge,De.Default,o(be||(be=D(["\n    right: 12px;\n  "])))),E(ge,De.Large,o(ue||(ue=D(["\n    right: 16px;\n  "])))),ge),Re=(E(ve={},ze.Valid,(E(fe={},v.Light,o(he||(he=D(["\n      color: ",";\n    "])),w.green.dark1)),E(fe,v.Dark,o(pe||(pe=D(["\n      color: ",";\n    "])),w.green.base)),fe)),E(ve,ze.Error,(E(xe={},v.Light,o(ye||(ye=D(["\n      color: ",";\n    "])),w.red.base)),E(xe,v.Dark,o(me||(me=D(["\n      color: ",";\n    "])),w.red.light1)),xe)),ve),$e=o(ke||(ke=D(["\n  font-size: 12px;\n  font-style: italic;\n  font-weight: normal;\n  color: ","; // Same in light & dark theme\n"])),w.gray.dark1),Ge=o(we||(we=D(["\n  ",";\n  min-height: 20px;\n  padding-top: 4px;\n  font-weight: normal;\n"])),Ve),Je=(E(Se={},v.Light,o(Oe||(Oe=D(["\n    color: ",";\n  "])),w.red.base)),E(Se,v.Dark,o(je||(je=D(["\n    color: ",";\n  "])),w.red.light1)),Se),Ke=["label","description","onChange","onBlur","placeholder","errorMessage","optional","disabled","state","type","id","value","className","darkMode","sizeVariant","aria-labelledby","handleValidation","baseFontSize"],Qe=e.forwardRef((function(r,g){var h=r.label,p=r.description,f=r.onChange,y=r.onBlur,m=r.placeholder,x=r.errorMessage,v=r.optional,w=void 0!==v&&v,j=r.disabled,S=void 0!==j&&j,P=r.state,C=void 0===P?ze.None:P,I=r.type,M=void 0===I?Ne.Text:I,V=r.id,T=r.value,A=r.className,F=r.darkMode,B=r.sizeVariant,X=void 0===B?De.Default:B,H=r["aria-labelledby"],W=r.handleValidation,U=r.baseFontSize,q=N(r,Ke),R=O(F),$=R.darkMode,G=R.theme,J="string"==typeof T,K=L(n(""),2),Q=K[0],Y=K[1],Z=J?T:Q,_=d({prefix:"textinput",id:V}),ee=c(U),ne=s(W);"search"===M||h||H||console.error("For screen-reader accessibility, label or aria-labelledby must be provided to TextInput."),"search"===M&&(k.warn('We recommend using the Leafygreen SearchInput for `type="search" inputs.'),q["aria-label"]||console.error("For screen-reader accessibility, aria-label must be provided to TextInput."));var re=$?l:a;return e.createElement("div",{className:t(Ie,Me(X,ee),A)},(h||p)&&e.createElement("div",{className:Te},h&&e.createElement(b,{darkMode:$,htmlFor:_,disabled:S,className:Ve},h),p&&e.createElement(u,{darkMode:$,disabled:S,className:Ve},p)),e.createElement("div",{className:Ae},e.createElement("input",z({},q,{"aria-labelledby":H,type:M,className:t(Fe,Be[G],He[X],We[C][G],Xe[G],E({},o(Ee||(Ee=D(["\n                  padding-right: 60px;\n                "]))),w&&!S)),value:Z,required:!w,disabled:S,placeholder:m,onChange:function(e){f&&f(e),J||Y(e.target.value),ne.onChange(e)},onBlur:function(e){y&&y(e),ne.onBlur(e)},ref:g,id:_,autoComplete:S?"off":(null==q?void 0:q.autoComplete)||"on","aria-invalid":"error"===C})),e.createElement("div",{className:t(Ce,Ue,qe[X])},C===ze.Valid&&e.createElement(re,{role:"presentation",className:Re.valid[G]}),C===ze.Error&&e.createElement(i,{role:"presentation",className:Re.error[G]}),C===ze.None&&!S&&w&&e.createElement("div",{className:$e},e.createElement("p",null,"Optional")))),C===ze.Error&&x&&e.createElement("div",{className:t(Ge,Je[G])},e.createElement("span",null,x)))}));Qe.displayName="TextInput",Qe.propTypes={id:r.string,label:r.string,"aria-labelledby":r.string,description:r.string,optional:r.bool,disabled:r.bool,onChange:r.func,placeholder:r.string,errorMessage:r.string,state:r.oneOf(Object.values(ze)),value:r.string,className:r.string,sizeVariant:r.oneOf(Object.values(De)),baseFontSize:r.oneOf(Object.values(g))};export{De as SizeVariant,ze as State,Le as TextInputFontSize,Ne as TextInputType,Qe as default};
+import e,{useState as n}from"react";import r from"prop-types";import{css as o,cx as t}from"@leafygreen-ui/emotion";import{useIdAllocator as a,useValidation as l}from"@leafygreen-ui/hooks";import i from"@leafygreen-ui/icon/dist/Checkmark";import d from"@leafygreen-ui/icon/dist/CheckmarkWithCircle";import s from"@leafygreen-ui/icon/dist/Warning";import{useDarkMode as c}from"@leafygreen-ui/leafygreen-provider";import{createUniqueClassName as b,Theme as g,consoleOnce as u}from"@leafygreen-ui/lib";import{BaseFontSize as h,fontFamilies as p,transitionDuration as f,focusRing as y,hoverRing as m,typeScales as x}from"@leafygreen-ui/tokens";import{useUpdatedBaseFontSize as v,Label as k,Description as w}from"@leafygreen-ui/typography";import{palette as O}from"@leafygreen-ui/palette";function j(e,n){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);n&&(o=o.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),r.push.apply(r,o)}return r}function S(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?j(Object(r),!0).forEach((function(n){E(e,n,r[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):j(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))}))}return e}function E(e,n,r){return n in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function z(){return z=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var r=arguments[n];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e},z.apply(this,arguments)}function N(e,n){if(null==e)return{};var r,o,t=function(e,n){if(null==e)return{};var r,o,t={},a=Object.keys(e);for(o=0;o<a.length;o++)r=a[o],n.indexOf(r)>=0||(t[r]=e[r]);return t}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o<a.length;o++)r=a[o],n.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(t[r]=e[r])}return t}function D(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}function L(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==r)return;var o,t,a=[],l=!0,i=!1;try{for(r=r.call(e);!(l=(o=r.next()).done)&&(a.push(o.value),!n||a.length!==n);l=!0);}catch(e){i=!0,t=e}finally{try{l||null==r.return||r.return()}finally{if(i)throw t}}return a}(e,n)||function(e,n){if(!e)return;if("string"==typeof e)return P(e,n);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(e);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return P(e,n)}(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function P(e,n){(null==n||n>e.length)&&(n=e.length);for(var r=0,o=new Array(n);r<n;r++)o[r]=e[r];return o}var C,I,M,V,T,A,F,B,X,H,W,U,q,R,$,G,J,K,Q,Y,Z,_,ee,ne,re,oe,te,ae,le,ie,de,se,ce,be,ge,ue,he,pe,fe,ye,me,xe,ve,ke,we,Oe,je,Se,Ee,ze,Ne,De,Le={None:"none",Valid:"valid",Error:"error"},Pe={Email:"email",Password:"password",Search:"search",Text:"text",Url:"url",Tel:"tel",Number:"number"},Ce={XSmall:"xsmall",Small:"small",Default:"default",Large:"large"},Ie=S(S({},h),{},{Large:18}),Me=function(e){return"0 0 0 100px ".concat(e," inset")},Ve=b("icon-selector"),Te=o(C||(C=D(["\n  font-family: ",";\n  display: flex;\n  flex-direction: column;\n"])),p.default),Ae=function(e,n){switch(e){case Ce.XSmall:return o(I||(I=D(["\n        font-size: ","px;\n        line-height: ","px;\n      "])),x.body1.fontSize,x.body1.lineHeight);case Ce.Small:return o(M||(M=D(["\n        font-size: ","px;\n        line-height: ","px;\n      "])),x.body1.fontSize,x.body1.lineHeight);case Ce.Large:return o(V||(V=D(["\n        font-size: 18px;\n        line-height: 32px;\n      "])));default:var r=n==h.Body1?x.body1:x.body2;return o(T||(T=D(["\n        font-size: ","px;\n        line-height: ","px;\n      "])),r.fontSize,r.lineHeight)}},Fe=o(A||(A=D(["\n  font-size: inherit;\n  line-height: inherit;\n"]))),Be=o(F||(F=D(["\n  > *:last-child {\n    display: block;\n    padding-bottom: 4px;\n  }\n"]))),Xe=o(B||(B=D(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  z-index: 0;\n"]))),He=o(X||(X=D(["\n  ",";\n  font-family: ",";\n  width: 100%;\n  height: 36px;\n  font-weight: normal;\n  border: 1px solid;\n  z-index: 1;\n  outline: none;\n  border-radius: 6px;\n  transition: ","ms ease-in-out;\n  transition-property: border-color, box-shadow;\n\n  &:disabled {\n    cursor: not-allowed;\n\n    &:hover,\n    &:active {\n      box-shadow: none;\n    }\n  }\n\n  &::placeholder {\n    ",";\n  }\n\n  /* clears the ‘X’ from Internet Explorer & Chrome */\n  &[type='search'] {\n    &::-ms-clear,\n    &::-ms-reveal {\n      display: none;\n      width: 0;\n      height: 0;\n    }\n    &::-webkit-search-decoration,\n    &::-webkit-search-cancel-button,\n    &::-webkit-search-results-button,\n    &::-webkit-search-results-decoration {\n      display: none;\n    }\n  }\n"])),Fe,p.default,f,Fe),We=(E(U={},g.Light,o(H||(H=D(["\n    color: ",";\n    background: ",";\n    border: 1px solid ",";\n\n    &:-webkit-autofill {\n      color: ",";\n      background: ",";\n      border: 1px solid ",";\n      -webkit-text-fill-color: ",";\n      box-shadow: ",";\n\n      &:not(:disabled):focus {\n        box-shadow: ",",\n          ",";\n        border-color: ",";\n      }\n\n      &:not(:disabled):hover:not(:focus) {\n        box-shadow: ",",\n          ",";\n      }\n    }\n\n    &::placeholder {\n      color: ",";\n      font-weight: normal;\n    }\n\n    &:hover,\n    &:active {\n      &:not(:disabled):not(:focus) {\n        box-shadow: ",";\n      }\n    }\n\n    &:disabled {\n      color: ",";\n      background-color: ",";\n      border-color: ",";\n\n      &::placeholder {\n        color: inherit;\n      }\n\n      &:-webkit-autofill {\n        &,\n        &:hover,\n        &:focus {\n          appearance: none;\n          border: 1px solid ",";\n          -webkit-text-fill-color: ",";\n          box-shadow: ",";\n        }\n      }\n    }\n  "])),O.black,O.white,O.gray.base,O.black,O.white,O.gray.base,O.black,Me(O.white),Me(O.white),y.light.input,O.white,Me(O.white),m.light.gray,O.gray.light1,m.light.gray,O.gray.base,O.gray.light2,O.gray.light1,O.gray.base,O.gray.base,Me(O.gray.light2))),E(U,g.Dark,o(W||(W=D(["\n    color: ",";\n    background-color: ",";\n    border: 1px solid ",";\n\n    &:-webkit-autofill {\n      border: 1px solid ",";\n      color: ",";\n      background: ",";\n      -webkit-text-fill-color: ",";\n      box-shadow: ",";\n\n      &:not(:disabled):focus {\n        box-shadow: ",",\n          ",";\n        border-color: ",";\n      }\n\n      &:not(:disabled):hover:not(:focus) {\n        box-shadow: ",",\n          ",";\n      }\n    }\n\n    &:hover,\n    &:active {\n      &:not(:disabled):not(:focus) {\n        box-shadow: ",";\n      }\n    }\n\n    &::placeholder {\n      color: ",";\n      font-weight: normal;\n    }\n\n    &:disabled {\n      color: ",";\n      background-color: ",";\n      border-color: ",";\n\n      &::placeholder {\n        color: inherit;\n      }\n\n      &:-webkit-autofill {\n        &,\n        &:hover,\n        &:focus {\n          appearance: none;\n          border: 1px solid ",";\n          -webkit-text-fill-color: ",";\n          box-shadow: ",";\n        }\n      }\n    }\n  "])),O.gray.light3,O.gray.dark4,O.gray.base,O.gray.base,O.gray.light3,O.gray.dark4,O.gray.light3,Me(O.gray.dark4),Me(O.gray.dark4),y.dark.input,O.blue.light1,Me(O.gray.dark4),m.dark.gray,m.dark.gray,O.gray.dark1,O.gray.dark1,O.gray.dark3,O.gray.dark2,O.gray.dark1,O.gray.dark1,Me(O.gray.dark2))),U),Ue=(E($={},g.Light,o(q||(q=D(["\n    &:not(:disabled):focus {\n      box-shadow: ",";\n      border-color: ",";\n    }\n  "])),y.light.input,O.white)),E($,g.Dark,o(R||(R=D(["\n    &:not(:disabled):focus {\n      box-shadow: ",";\n      border-color: ",";\n    }\n  "])),y.dark.input,O.gray.dark4)),$),qe=(E(Y={},Ce.XSmall,o(G||(G=D(["\n    height: 22px;\n    padding-left: 10px;\n  "])))),E(Y,Ce.Small,o(J||(J=D(["\n    height: 28px;\n    padding-left: 10px;\n  "])))),E(Y,Ce.Default,o(K||(K=D(["\n    height: 36px;\n    padding-left: 12px;\n  "])))),E(Y,Ce.Large,o(Q||(Q=D(["\n    height: 48px;\n    padding-left: 16px;\n  "])))),Y),Re=(E(ie={},Le.Valid,(E(ee={},g.Light,o(Z||(Z=D(["\n      &:not(:disabled) {\n        border-color: ",";\n\n        &:hover,\n        &:active {\n          &:not(:disabled):not(:focus) {\n            box-shadow: ",";\n          }\n        }\n      }\n    "])),O.green.dark1,m.light.green)),E(ee,g.Dark,o(_||(_=D(["\n      &:not(:disabled) {\n        border-color: ",";\n\n        &:hover,\n        &:active {\n          &:not(:disabled):not(:focus) {\n            box-shadow: ",";\n          }\n        }\n      }\n    "])),O.green.dark1,m.dark.green)),ee)),E(ie,Le.Error,(E(oe={},g.Light,o(ne||(ne=D(["\n      &:not(:disabled) {\n        border-color: ",";\n\n        &:hover,\n        &:active {\n          &:not(:disabled):not(:focus) {\n            box-shadow: ",";\n          }\n        }\n      }\n    "])),O.red.base,m.light.red)),E(oe,g.Dark,o(re||(re=D(["\n      &:not(:disabled) {\n        border-color: ",";\n\n        &:hover,\n        &:active {\n          &:not(:disabled):not(:focus) {\n            box-shadow: ",";\n          }\n        }\n      }\n    "])),O.red.light1,m.dark.red)),oe)),E(ie,Le.None,(E(le={},g.Light,o(te||(te=D([""])))),E(le,g.Dark,o(ae||(ae=D([""])))),le)),ie),$e=o(de||(de=D(["\n  position: absolute;\n  display: flex;\n  align-items: center;\n  z-index: 1;\n"]))),Ge=(E(ue={},Ce.XSmall,o(se||(se=D(["\n    right: 10px;\n  "])))),E(ue,Ce.Small,o(ce||(ce=D(["\n    right: 10px;\n  "])))),E(ue,Ce.Default,o(be||(be=D(["\n    right: 12px;\n  "])))),E(ue,Ce.Large,o(ge||(ge=D(["\n    right: 16px;\n  "])))),ue),Je=(E(ve={},Le.Valid,(E(fe={},g.Light,o(he||(he=D(["\n      color: ",";\n    "])),O.green.dark1)),E(fe,g.Dark,o(pe||(pe=D(["\n      color: ",";\n    "])),O.green.base)),fe)),E(ve,Le.Error,(E(xe={},g.Light,o(ye||(ye=D(["\n      color: ",";\n    "])),O.red.base)),E(xe,g.Dark,o(me||(me=D(["\n      color: ",";\n    "])),O.red.light1)),xe)),ve),Ke=o(ke||(ke=D(["\n  font-size: 12px;\n  font-style: italic;\n  font-weight: normal;\n"]))),Qe=(E(je={},g.Light,o(we||(we=D(["\n    color: ",";\n  "])),O.gray.dark1)),E(je,g.Dark,o(Oe||(Oe=D(["\n    color: ",";\n  "])),O.gray.base)),je),Ye=o(Se||(Se=D(["\n  ",";\n  min-height: 20px;\n  padding-top: 4px;\n  font-weight: normal;\n"])),Fe),Ze=(E(Ne={},g.Light,o(Ee||(Ee=D(["\n    color: ",";\n  "])),O.red.base)),E(Ne,g.Dark,o(ze||(ze=D(["\n    color: ",";\n  "])),O.red.light1)),Ne),_e=["label","description","onChange","onBlur","placeholder","errorMessage","optional","disabled","state","type","id","value","className","darkMode","sizeVariant","aria-labelledby","handleValidation","baseFontSize"],en=e.forwardRef((function(r,b){var g=r.label,h=r.description,p=r.onChange,f=r.onBlur,y=r.placeholder,m=r.errorMessage,x=r.optional,O=void 0!==x&&x,j=r.disabled,S=void 0!==j&&j,P=r.state,C=void 0===P?Le.None:P,I=r.type,M=void 0===I?Pe.Text:I,V=r.id,T=r.value,A=r.className,F=r.darkMode,B=r.sizeVariant,X=void 0===B?Ce.Default:B,H=r["aria-labelledby"],W=r.handleValidation,U=r.baseFontSize,q=N(r,_e),R=c(F),$=R.darkMode,G=R.theme,J="string"==typeof T,K=L(n(""),2),Q=K[0],Y=K[1],Z=J?T:Q,_=a({prefix:"textinput",id:V}),ee=v(U),ne=l(W);"search"===M||g||H||console.error("For screen-reader accessibility, label or aria-labelledby must be provided to TextInput."),"search"===M&&(u.warn('We recommend using the Leafygreen SearchInput for `type="search" inputs.'),q["aria-label"]||console.error("For screen-reader accessibility, aria-label must be provided to TextInput."));var re=$?d:i;return e.createElement("div",{className:t(Te,Ae(X,ee),A)},(g||h)&&e.createElement("div",{className:Be},g&&e.createElement(k,{darkMode:$,htmlFor:_,disabled:S,className:Fe},g),h&&e.createElement(w,{darkMode:$,disabled:S,className:Fe},h)),e.createElement("div",{className:Xe},e.createElement("input",z({},q,{"aria-labelledby":H,type:M,className:t(He,We[G],qe[X],Re[C][G],Ue[G],E({},o(De||(De=D(["\n                  padding-right: 60px;\n                "]))),O&&!S)),value:Z,required:!O,disabled:S,placeholder:y,onChange:function(e){p&&p(e),J||Y(e.target.value),ne.onChange(e)},onBlur:function(e){f&&f(e),ne.onBlur(e)},ref:b,id:_,autoComplete:S?"off":(null==q?void 0:q.autoComplete)||"on","aria-invalid":"error"===C})),e.createElement("div",{className:t(Ve,$e,Ge[X])},C===Le.Valid&&e.createElement(re,{role:"presentation",className:Je.valid[G]}),C===Le.Error&&e.createElement(s,{role:"presentation",className:Je.error[G]}),C===Le.None&&!S&&O&&e.createElement("div",{className:t(Ke,Qe[G])},e.createElement("p",null,"Optional")))),C===Le.Error&&m&&e.createElement("div",{className:t(Ye,Ze[G])},e.createElement("span",null,m)))}));en.displayName="TextInput",en.propTypes={id:r.string,label:r.string,"aria-labelledby":r.string,description:r.string,optional:r.bool,disabled:r.bool,onChange:r.func,placeholder:r.string,errorMessage:r.string,state:r.oneOf(Object.values(Le)),value:r.string,className:r.string,sizeVariant:r.oneOf(Object.values(Ce)),baseFontSize:r.oneOf(Object.values(h))};export{Ce as SizeVariant,Le as State,Ie as TextInputFontSize,Pe as TextInputType,en as default};
 //# sourceMappingURL=index.js.map

dist/index.d.ts

 export { default } from './TextInput';
 export type { TextInputProps } from './types';
-export { State, TextInputType, SizeVariant, TextInputFontSize } from './types';
+export { SizeVariant, State, TextInputFontSize, TextInputType } from './types';
 //# sourceMappingURL=index.d.ts.map

dist/index.js

@@ -1,2 +0,2 @@
-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react"),require("prop-types"),require("@leafygreen-ui/emotion"),require("@leafygreen-ui/icon/dist/Checkmark"),require("@leafygreen-ui/icon/dist/CheckmarkWithCircle"),require("@leafygreen-ui/icon/dist/Warning"),require("@leafygreen-ui/hooks"),require("@leafygreen-ui/typography"),require("@leafygreen-ui/tokens"),require("@leafygreen-ui/lib"),require("@leafygreen-ui/palette"),require("@leafygreen-ui/leafygreen-provider")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@leafygreen-ui/emotion","@leafygreen-ui/icon/dist/Checkmark","@leafygreen-ui/icon/dist/CheckmarkWithCircle","@leafygreen-ui/icon/dist/Warning","@leafygreen-ui/hooks","@leafygreen-ui/typography","@leafygreen-ui/tokens","@leafygreen-ui/lib","@leafygreen-ui/palette","@leafygreen-ui/leafygreen-provider"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self)["@leafygreen-ui/text-input"]={},e.React,e.PropTypes,e["@leafygreen-ui/emotion"],e.Checkmark,e.CheckmarkWithCircle,e.Warning,e["@leafygreen-ui/hooks"],e["@leafygreen-ui/typography"],e["@leafygreen-ui/tokens"],e["@leafygreen-ui/lib"],e["@leafygreen-ui/palette"],e["@leafygreen-ui/leafygreen-provider"])}(this,(function(e,n,t,r,a,o,l,i,s,d,c,u,p){"use strict";function f(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var g=f(n),h=f(t),b=f(a),y=f(o),m=f(l);function x(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function v(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?x(Object(t),!0).forEach((function(n){k(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):x(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function k(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function w(){return w=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},w.apply(this,arguments)}function O(e,n){if(null==e)return{};var t,r,a=function(e,n){if(null==e)return{};var t,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}function S(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}function j(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==t)return;var r,a,o=[],l=!0,i=!1;try{for(t=t.call(e);!(l=(r=t.next()).done)&&(o.push(r.value),!n||o.length!==n);l=!0);}catch(e){i=!0,a=e}finally{try{l||null==t.return||t.return()}finally{if(i)throw a}}return o}(e,n)||function(e,n){if(!e)return;if("string"==typeof e)return T(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);"Object"===t&&e.constructor&&(t=e.constructor.name);if("Map"===t||"Set"===t)return Array.from(e);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return T(e,n)}(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function T(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}var z,E,N,C,D,P,L,q,R,F,I,M,V,B,A,W,X,U,H,_,$,G,J,K,Q,Y,Z,ee,ne,te,re,ae,oe,le,ie,se,de,ce,ue,pe,fe,ge,he,be,ye,me,xe,ve,ke,we={None:"none",Valid:"valid",Error:"error"},Oe={Email:"email",Password:"password",Search:"search",Text:"text",Url:"url",Tel:"tel",Number:"number"},Se={XSmall:"xsmall",Small:"small",Default:"default",Large:"large"},je=v(v({},d.BaseFontSize),{},{Large:18}),Te=function(e){return"0 0 0 100px ".concat(e," inset")},ze=c.createUniqueClassName("icon-selector"),Ee=r.css(z||(z=S(["\n  font-family: ",";\n  display: flex;\n  flex-direction: column;\n"])),d.fontFamilies.default),Ne=function(e,n){switch(e){case Se.XSmall:return r.css(E||(E=S(["\n        font-size: ","px;\n        line-height: ","px;\n      "])),d.typeScales.body1.fontSize,d.typeScales.body1.lineHeight);case Se.Small:return r.css(N||(N=S(["\n        font-size: ","px;\n        line-height: ","px;\n      "])),d.typeScales.body1.fontSize,d.typeScales.body1.lineHeight);case Se.Large:return r.css(C||(C=S(["\n        font-size: 18px;\n        line-height: 32px;\n      "])));default:var t=n==d.BaseFontSize.Body1?d.typeScales.body1:d.typeScales.body2;return r.css(D||(D=S(["\n        font-size: ","px;\n        line-height: ","px;\n      "])),t.fontSize,t.lineHeight)}},Ce=r.css(P||(P=S(["\n  font-size: inherit;\n  line-height: inherit;\n"]))),De=r.css(L||(L=S(["\n  > *:last-child {\n    display: block;\n    padding-bottom: 4px;\n  }\n"]))),Pe=r.css(q||(q=S(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  z-index: 0;\n"]))),Le=r.css(R||(R=S(["\n  ",";\n  font-family: ",";\n  width: 100%;\n  height: 36px;\n  font-weight: normal;\n  border: 1px solid;\n  z-index: 1;\n  outline: none;\n  border-radius: 6px;\n  transition: ","ms ease-in-out;\n  transition-property: border-color, box-shadow;\n\n  &:disabled {\n    cursor: not-allowed;\n\n    &:hover,\n    &:active {\n      box-shadow: none;\n    }\n  }\n\n  &::placeholder {\n    ",";\n  }\n\n  /* clears the ‘X’ from Internet Explorer & Chrome */\n  &[type='search'] {\n    &::-ms-clear,\n    &::-ms-reveal {\n      display: none;\n      width: 0;\n      height: 0;\n    }\n    &::-webkit-search-decoration,\n    &::-webkit-search-cancel-button,\n    &::-webkit-search-results-button,\n    &::-webkit-search-results-decoration {\n      display: none;\n    }\n  }\n"])),Ce,d.fontFamilies.default,d.transitionDuration,Ce),qe=(k(M={},c.Theme.Light,r.css(F||(F=S(["\n    color: ",";\n    background: ",";\n    border: 1px solid ",";\n\n    &:-webkit-autofill {\n      color: ",";\n      background: ",";\n      border: 1px solid ",";\n      -webkit-text-fill-color: ",";\n      box-shadow: ",";\n\n      &:not(:disabled):focus {\n        box-shadow: ",",\n          ",";\n        border-color: ",";\n      }\n\n      &:not(:disabled):hover:not(:focus) {\n        box-shadow: ",",\n          ",";\n      }\n    }\n\n    &::placeholder {\n      color: ",";\n      font-weight: normal;\n    }\n\n    &:hover,\n    &:active {\n      &:not(:disabled):not(:focus) {\n        box-shadow: ",";\n      }\n    }\n\n    &:disabled {\n      color: ",";\n      background-color: ",";\n      border-color: ",";\n\n      &::placeholder {\n        color: inherit;\n      }\n\n      &:-webkit-autofill {\n        &,\n        &:hover,\n        &:focus {\n          appearance: none;\n          border: 1px solid ",";\n          -webkit-text-fill-color: ",";\n          box-shadow: ",";\n        }\n      }\n    }\n  "])),u.palette.black,u.palette.white,u.palette.gray.base,u.palette.black,u.palette.white,u.palette.gray.base,u.palette.black,Te(u.palette.white),Te(u.palette.white),d.focusRing.light.input,u.palette.white,Te(u.palette.white),d.hoverRing.light.gray,u.palette.gray.light1,d.hoverRing.light.gray,u.palette.gray.base,u.palette.gray.light2,u.palette.gray.light1,u.palette.gray.base,u.palette.gray.base,Te(u.palette.gray.light2))),k(M,c.Theme.Dark,r.css(I||(I=S(["\n    color: ",";\n    background-color: ",";\n    border: 1px solid ",";\n\n    &:-webkit-autofill {\n      border: 1px solid ",";\n      color: ",";\n      background: ",";\n      -webkit-text-fill-color: ",";\n      box-shadow: ",";\n\n      &:not(:disabled):focus {\n        box-shadow: ",",\n          ",";\n        border-color: ",";\n      }\n\n      &:not(:disabled):hover:not(:focus) {\n        box-shadow: ",",\n          ",";\n      }\n    }\n\n    &:hover,\n    &:active {\n      &:not(:disabled):not(:focus) {\n        box-shadow: ",";\n      }\n    }\n\n    &::placeholder {\n      color: ",";\n      font-weight: normal;\n    }\n\n    &:disabled {\n      color: ",";\n      background-color: ",";\n      border-color: ",";\n\n      &::placeholder {\n        color: inherit;\n      }\n\n      &:-webkit-autofill {\n        &,\n        &:hover,\n        &:focus {\n          appearance: none;\n          border: 1px solid ",";\n          -webkit-text-fill-color: ",";\n          box-shadow: ",";\n        }\n      }\n    }\n  "])),u.palette.gray.light3,u.palette.gray.dark4,u.palette.gray.base,u.palette.gray.base,u.palette.gray.light3,u.palette.gray.dark4,u.palette.gray.light3,Te(u.palette.gray.dark4),Te(u.palette.gray.dark4),d.focusRing.dark.input,u.palette.blue.light1,Te(u.palette.gray.dark4),d.hoverRing.dark.gray,d.hoverRing.dark.gray,u.palette.gray.base,u.palette.gray.dark1,u.palette.gray.dark3,u.palette.gray.dark2,u.palette.gray.dark1,u.palette.gray.dark1,Te(u.palette.gray.dark2))),M),Re=(k(A={},c.Theme.Light,r.css(V||(V=S(["\n    &:not(:disabled):focus {\n      box-shadow: ",";\n      border-color: ",";\n    }\n  "])),d.focusRing.light.input,u.palette.white)),k(A,c.Theme.Dark,r.css(B||(B=S(["\n    &:not(:disabled):focus {\n      box-shadow: ",";\n      border-color: ",";\n    }\n  "])),d.focusRing.dark.input,u.palette.gray.dark4)),A),Fe=(k(_={},Se.XSmall,r.css(W||(W=S(["\n    height: 22px;\n    padding-left: 10px;\n  "])))),k(_,Se.Small,r.css(X||(X=S(["\n    height: 28px;\n    padding-left: 10px;\n  "])))),k(_,Se.Default,r.css(U||(U=S(["\n    height: 36px;\n    padding-left: 12px;\n  "])))),k(_,Se.Large,r.css(H||(H=S(["\n    height: 48px;\n    padding-left: 16px;\n  "])))),_),Ie=(k(te={},we.Valid,(k(J={},c.Theme.Light,r.css($||($=S(["\n      &:not(:disabled) {\n        border-color: ",";\n\n        &:hover,\n        &:active {\n          &:not(:disabled):not(:focus) {\n            box-shadow: ",";\n          }\n        }\n      }\n    "])),u.palette.green.dark1,d.hoverRing.light.green)),k(J,c.Theme.Dark,r.css(G||(G=S(["\n      &:not(:disabled) {\n        border-color: ",";\n\n        &:hover,\n        &:active {\n          &:not(:disabled):not(:focus) {\n            box-shadow: ",";\n          }\n        }\n      }\n    "])),u.palette.green.dark1,d.hoverRing.dark.green)),J)),k(te,we.Error,(k(Y={},c.Theme.Light,r.css(K||(K=S(["\n      &:not(:disabled) {\n        border-color: ",";\n\n        &:hover,\n        &:active {\n          &:not(:disabled):not(:focus) {\n            box-shadow: ",";\n          }\n        }\n      }\n    "])),u.palette.red.base,d.hoverRing.light.red)),k(Y,c.Theme.Dark,r.css(Q||(Q=S(["\n      &:not(:disabled) {\n        border-color: ",";\n\n        &:hover,\n        &:active {\n          &:not(:disabled):not(:focus) {\n            box-shadow: ",";\n          }\n        }\n      }\n    "])),u.palette.red.light1,d.hoverRing.dark.red)),Y)),k(te,we.None,(k(ne={},c.Theme.Light,r.css(Z||(Z=S([""])))),k(ne,c.Theme.Dark,r.css(ee||(ee=S([""])))),ne)),te),Me=r.css(re||(re=S(["\n  position: absolute;\n  display: flex;\n  align-items: center;\n  z-index: 1;\n"]))),Ve=(k(se={},Se.XSmall,r.css(ae||(ae=S(["\n    right: 10px;\n  "])))),k(se,Se.Small,r.css(oe||(oe=S(["\n    right: 10px;\n  "])))),k(se,Se.Default,r.css(le||(le=S(["\n    right: 12px;\n  "])))),k(se,Se.Large,r.css(ie||(ie=S(["\n    right: 16px;\n  "])))),se),Be=(k(he={},we.Valid,(k(ue={},c.Theme.Light,r.css(de||(de=S(["\n      color: ",";\n    "])),u.palette.green.dark1)),k(ue,c.Theme.Dark,r.css(ce||(ce=S(["\n      color: ",";\n    "])),u.palette.green.base)),ue)),k(he,we.Error,(k(ge={},c.Theme.Light,r.css(pe||(pe=S(["\n      color: ",";\n    "])),u.palette.red.base)),k(ge,c.Theme.Dark,r.css(fe||(fe=S(["\n      color: ",";\n    "])),u.palette.red.light1)),ge)),he),Ae=r.css(be||(be=S(["\n  font-size: 12px;\n  font-style: italic;\n  font-weight: normal;\n  color: ","; // Same in light & dark theme\n"])),u.palette.gray.dark1),We=r.css(ye||(ye=S(["\n  ",";\n  min-height: 20px;\n  padding-top: 4px;\n  font-weight: normal;\n"])),Ce),Xe=(k(ve={},c.Theme.Light,r.css(me||(me=S(["\n    color: ",";\n  "])),u.palette.red.base)),k(ve,c.Theme.Dark,r.css(xe||(xe=S(["\n    color: ",";\n  "])),u.palette.red.light1)),ve),Ue=["label","description","onChange","onBlur","placeholder","errorMessage","optional","disabled","state","type","id","value","className","darkMode","sizeVariant","aria-labelledby","handleValidation","baseFontSize"],He=g.default.forwardRef((function(e,t){var a=e.label,o=e.description,l=e.onChange,d=e.onBlur,u=e.placeholder,f=e.errorMessage,h=e.optional,x=void 0!==h&&h,v=e.disabled,T=void 0!==v&&v,z=e.state,E=void 0===z?we.None:z,N=e.type,C=void 0===N?Oe.Text:N,D=e.id,P=e.value,L=e.className,q=e.darkMode,R=e.sizeVariant,F=void 0===R?Se.Default:R,I=e["aria-labelledby"],M=e.handleValidation,V=e.baseFontSize,B=O(e,Ue),A=p.useDarkMode(q),W=A.darkMode,X=A.theme,U="string"==typeof P,H=j(n.useState(""),2),_=H[0],$=H[1],G=U?P:_,J=i.useIdAllocator({prefix:"textinput",id:D}),K=s.useUpdatedBaseFontSize(V),Q=i.useValidation(M);"search"===C||a||I||console.error("For screen-reader accessibility, label or aria-labelledby must be provided to TextInput."),"search"===C&&(c.consoleOnce.warn('We recommend using the Leafygreen SearchInput for `type="search" inputs.'),B["aria-label"]||console.error("For screen-reader accessibility, aria-label must be provided to TextInput."));var Y=W?y.default:b.default;return g.default.createElement("div",{className:r.cx(Ee,Ne(F,K),L)},(a||o)&&g.default.createElement("div",{className:De},a&&g.default.createElement(s.Label,{darkMode:W,htmlFor:J,disabled:T,className:Ce},a),o&&g.default.createElement(s.Description,{darkMode:W,disabled:T,className:Ce},o)),g.default.createElement("div",{className:Pe},g.default.createElement("input",w({},B,{"aria-labelledby":I,type:C,className:r.cx(Le,qe[X],Fe[F],Ie[E][X],Re[X],k({},r.css(ke||(ke=S(["\n                  padding-right: 60px;\n                "]))),x&&!T)),value:G,required:!x,disabled:T,placeholder:u,onChange:function(e){l&&l(e),U||$(e.target.value),Q.onChange(e)},onBlur:function(e){d&&d(e),Q.onBlur(e)},ref:t,id:J,autoComplete:T?"off":(null==B?void 0:B.autoComplete)||"on","aria-invalid":"error"===E})),g.default.createElement("div",{className:r.cx(ze,Me,Ve[F])},E===we.Valid&&g.default.createElement(Y,{role:"presentation",className:Be.valid[X]}),E===we.Error&&g.default.createElement(m.default,{role:"presentation",className:Be.error[X]}),E===we.None&&!T&&x&&g.default.createElement("div",{className:Ae},g.default.createElement("p",null,"Optional")))),E===we.Error&&f&&g.default.createElement("div",{className:r.cx(We,Xe[X])},g.default.createElement("span",null,f)))}));He.displayName="TextInput",He.propTypes={id:h.default.string,label:h.default.string,"aria-labelledby":h.default.string,description:h.default.string,optional:h.default.bool,disabled:h.default.bool,onChange:h.default.func,placeholder:h.default.string,errorMessage:h.default.string,state:h.default.oneOf(Object.values(we)),value:h.default.string,className:h.default.string,sizeVariant:h.default.oneOf(Object.values(Se)),baseFontSize:h.default.oneOf(Object.values(d.BaseFontSize))},e.SizeVariant=Se,e.State=we,e.TextInputFontSize=je,e.TextInputType=Oe,e.default=He,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react"),require("prop-types"),require("@leafygreen-ui/emotion"),require("@leafygreen-ui/hooks"),require("@leafygreen-ui/icon/dist/Checkmark"),require("@leafygreen-ui/icon/dist/CheckmarkWithCircle"),require("@leafygreen-ui/icon/dist/Warning"),require("@leafygreen-ui/leafygreen-provider"),require("@leafygreen-ui/lib"),require("@leafygreen-ui/tokens"),require("@leafygreen-ui/typography"),require("@leafygreen-ui/palette")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@leafygreen-ui/emotion","@leafygreen-ui/hooks","@leafygreen-ui/icon/dist/Checkmark","@leafygreen-ui/icon/dist/CheckmarkWithCircle","@leafygreen-ui/icon/dist/Warning","@leafygreen-ui/leafygreen-provider","@leafygreen-ui/lib","@leafygreen-ui/tokens","@leafygreen-ui/typography","@leafygreen-ui/palette"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self)["@leafygreen-ui/text-input"]={},e.React,e.PropTypes,e["@leafygreen-ui/emotion"],e["@leafygreen-ui/hooks"],e.Checkmark,e.CheckmarkWithCircle,e.Warning,e["@leafygreen-ui/leafygreen-provider"],e["@leafygreen-ui/lib"],e["@leafygreen-ui/tokens"],e["@leafygreen-ui/typography"],e["@leafygreen-ui/palette"])}(this,(function(e,n,t,r,a,o,l,i,s,d,c,u,p){"use strict";function f(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var g=f(n),h=f(t),b=f(o),y=f(l),m=f(i);function x(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function v(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?x(Object(t),!0).forEach((function(n){k(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):x(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function k(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function w(){return w=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},w.apply(this,arguments)}function O(e,n){if(null==e)return{};var t,r,a=function(e,n){if(null==e)return{};var t,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}function S(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}function T(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==t)return;var r,a,o=[],l=!0,i=!1;try{for(t=t.call(e);!(l=(r=t.next()).done)&&(o.push(r.value),!n||o.length!==n);l=!0);}catch(e){i=!0,a=e}finally{try{l||null==t.return||t.return()}finally{if(i)throw a}}return o}(e,n)||function(e,n){if(!e)return;if("string"==typeof e)return j(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);"Object"===t&&e.constructor&&(t=e.constructor.name);if("Map"===t||"Set"===t)return Array.from(e);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return j(e,n)}(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function j(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}var z,E,N,D,C,L,P,q,R,F,I,M,V,B,A,W,X,U,H,_,$,G,J,K,Q,Y,Z,ee,ne,te,re,ae,oe,le,ie,se,de,ce,ue,pe,fe,ge,he,be,ye,me,xe,ve,ke,we,Oe,Se,Te={None:"none",Valid:"valid",Error:"error"},je={Email:"email",Password:"password",Search:"search",Text:"text",Url:"url",Tel:"tel",Number:"number"},ze={XSmall:"xsmall",Small:"small",Default:"default",Large:"large"},Ee=v(v({},c.BaseFontSize),{},{Large:18}),Ne=function(e){return"0 0 0 100px ".concat(e," inset")},De=d.createUniqueClassName("icon-selector"),Ce=r.css(z||(z=S(["\n  font-family: ",";\n  display: flex;\n  flex-direction: column;\n"])),c.fontFamilies.default),Le=function(e,n){switch(e){case ze.XSmall:return r.css(E||(E=S(["\n        font-size: ","px;\n        line-height: ","px;\n      "])),c.typeScales.body1.fontSize,c.typeScales.body1.lineHeight);case ze.Small:return r.css(N||(N=S(["\n        font-size: ","px;\n        line-height: ","px;\n      "])),c.typeScales.body1.fontSize,c.typeScales.body1.lineHeight);case ze.Large:return r.css(D||(D=S(["\n        font-size: 18px;\n        line-height: 32px;\n      "])));default:var t=n==c.BaseFontSize.Body1?c.typeScales.body1:c.typeScales.body2;return r.css(C||(C=S(["\n        font-size: ","px;\n        line-height: ","px;\n      "])),t.fontSize,t.lineHeight)}},Pe=r.css(L||(L=S(["\n  font-size: inherit;\n  line-height: inherit;\n"]))),qe=r.css(P||(P=S(["\n  > *:last-child {\n    display: block;\n    padding-bottom: 4px;\n  }\n"]))),Re=r.css(q||(q=S(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  z-index: 0;\n"]))),Fe=r.css(R||(R=S(["\n  ",";\n  font-family: ",";\n  width: 100%;\n  height: 36px;\n  font-weight: normal;\n  border: 1px solid;\n  z-index: 1;\n  outline: none;\n  border-radius: 6px;\n  transition: ","ms ease-in-out;\n  transition-property: border-color, box-shadow;\n\n  &:disabled {\n    cursor: not-allowed;\n\n    &:hover,\n    &:active {\n      box-shadow: none;\n    }\n  }\n\n  &::placeholder {\n    ",";\n  }\n\n  /* clears the ‘X’ from Internet Explorer & Chrome */\n  &[type='search'] {\n    &::-ms-clear,\n    &::-ms-reveal {\n      display: none;\n      width: 0;\n      height: 0;\n    }\n    &::-webkit-search-decoration,\n    &::-webkit-search-cancel-button,\n    &::-webkit-search-results-button,\n    &::-webkit-search-results-decoration {\n      display: none;\n    }\n  }\n"])),Pe,c.fontFamilies.default,c.transitionDuration,Pe),Ie=(k(M={},d.Theme.Light,r.css(F||(F=S(["\n    color: ",";\n    background: ",";\n    border: 1px solid ",";\n\n    &:-webkit-autofill {\n      color: ",";\n      background: ",";\n      border: 1px solid ",";\n      -webkit-text-fill-color: ",";\n      box-shadow: ",";\n\n      &:not(:disabled):focus {\n        box-shadow: ",",\n          ",";\n        border-color: ",";\n      }\n\n      &:not(:disabled):hover:not(:focus) {\n        box-shadow: ",",\n          ",";\n      }\n    }\n\n    &::placeholder {\n      color: ",";\n      font-weight: normal;\n    }\n\n    &:hover,\n    &:active {\n      &:not(:disabled):not(:focus) {\n        box-shadow: ",";\n      }\n    }\n\n    &:disabled {\n      color: ",";\n      background-color: ",";\n      border-color: ",";\n\n      &::placeholder {\n        color: inherit;\n      }\n\n      &:-webkit-autofill {\n        &,\n        &:hover,\n        &:focus {\n          appearance: none;\n          border: 1px solid ",";\n          -webkit-text-fill-color: ",";\n          box-shadow: ",";\n        }\n      }\n    }\n  "])),p.palette.black,p.palette.white,p.palette.gray.base,p.palette.black,p.palette.white,p.palette.gray.base,p.palette.black,Ne(p.palette.white),Ne(p.palette.white),c.focusRing.light.input,p.palette.white,Ne(p.palette.white),c.hoverRing.light.gray,p.palette.gray.light1,c.hoverRing.light.gray,p.palette.gray.base,p.palette.gray.light2,p.palette.gray.light1,p.palette.gray.base,p.palette.gray.base,Ne(p.palette.gray.light2))),k(M,d.Theme.Dark,r.css(I||(I=S(["\n    color: ",";\n    background-color: ",";\n    border: 1px solid ",";\n\n    &:-webkit-autofill {\n      border: 1px solid ",";\n      color: ",";\n      background: ",";\n      -webkit-text-fill-color: ",";\n      box-shadow: ",";\n\n      &:not(:disabled):focus {\n        box-shadow: ",",\n          ",";\n        border-color: ",";\n      }\n\n      &:not(:disabled):hover:not(:focus) {\n        box-shadow: ",",\n          ",";\n      }\n    }\n\n    &:hover,\n    &:active {\n      &:not(:disabled):not(:focus) {\n        box-shadow: ",";\n      }\n    }\n\n    &::placeholder {\n      color: ",";\n      font-weight: normal;\n    }\n\n    &:disabled {\n      color: ",";\n      background-color: ",";\n      border-color: ",";\n\n      &::placeholder {\n        color: inherit;\n      }\n\n      &:-webkit-autofill {\n        &,\n        &:hover,\n        &:focus {\n          appearance: none;\n          border: 1px solid ",";\n          -webkit-text-fill-color: ",";\n          box-shadow: ",";\n        }\n      }\n    }\n  "])),p.palette.gray.light3,p.palette.gray.dark4,p.palette.gray.base,p.palette.gray.base,p.palette.gray.light3,p.palette.gray.dark4,p.palette.gray.light3,Ne(p.palette.gray.dark4),Ne(p.palette.gray.dark4),c.focusRing.dark.input,p.palette.blue.light1,Ne(p.palette.gray.dark4),c.hoverRing.dark.gray,c.hoverRing.dark.gray,p.palette.gray.dark1,p.palette.gray.dark1,p.palette.gray.dark3,p.palette.gray.dark2,p.palette.gray.dark1,p.palette.gray.dark1,Ne(p.palette.gray.dark2))),M),Me=(k(A={},d.Theme.Light,r.css(V||(V=S(["\n    &:not(:disabled):focus {\n      box-shadow: ",";\n      border-color: ",";\n    }\n  "])),c.focusRing.light.input,p.palette.white)),k(A,d.Theme.Dark,r.css(B||(B=S(["\n    &:not(:disabled):focus {\n      box-shadow: ",";\n      border-color: ",";\n    }\n  "])),c.focusRing.dark.input,p.palette.gray.dark4)),A),Ve=(k(_={},ze.XSmall,r.css(W||(W=S(["\n    height: 22px;\n    padding-left: 10px;\n  "])))),k(_,ze.Small,r.css(X||(X=S(["\n    height: 28px;\n    padding-left: 10px;\n  "])))),k(_,ze.Default,r.css(U||(U=S(["\n    height: 36px;\n    padding-left: 12px;\n  "])))),k(_,ze.Large,r.css(H||(H=S(["\n    height: 48px;\n    padding-left: 16px;\n  "])))),_),Be=(k(te={},Te.Valid,(k(J={},d.Theme.Light,r.css($||($=S(["\n      &:not(:disabled) {\n        border-color: ",";\n\n        &:hover,\n        &:active {\n          &:not(:disabled):not(:focus) {\n            box-shadow: ",";\n          }\n        }\n      }\n    "])),p.palette.green.dark1,c.hoverRing.light.green)),k(J,d.Theme.Dark,r.css(G||(G=S(["\n      &:not(:disabled) {\n        border-color: ",";\n\n        &:hover,\n        &:active {\n          &:not(:disabled):not(:focus) {\n            box-shadow: ",";\n          }\n        }\n      }\n    "])),p.palette.green.dark1,c.hoverRing.dark.green)),J)),k(te,Te.Error,(k(Y={},d.Theme.Light,r.css(K||(K=S(["\n      &:not(:disabled) {\n        border-color: ",";\n\n        &:hover,\n        &:active {\n          &:not(:disabled):not(:focus) {\n            box-shadow: ",";\n          }\n        }\n      }\n    "])),p.palette.red.base,c.hoverRing.light.red)),k(Y,d.Theme.Dark,r.css(Q||(Q=S(["\n      &:not(:disabled) {\n        border-color: ",";\n\n        &:hover,\n        &:active {\n          &:not(:disabled):not(:focus) {\n            box-shadow: ",";\n          }\n        }\n      }\n    "])),p.palette.red.light1,c.hoverRing.dark.red)),Y)),k(te,Te.None,(k(ne={},d.Theme.Light,r.css(Z||(Z=S([""])))),k(ne,d.Theme.Dark,r.css(ee||(ee=S([""])))),ne)),te),Ae=r.css(re||(re=S(["\n  position: absolute;\n  display: flex;\n  align-items: center;\n  z-index: 1;\n"]))),We=(k(se={},ze.XSmall,r.css(ae||(ae=S(["\n    right: 10px;\n  "])))),k(se,ze.Small,r.css(oe||(oe=S(["\n    right: 10px;\n  "])))),k(se,ze.Default,r.css(le||(le=S(["\n    right: 12px;\n  "])))),k(se,ze.Large,r.css(ie||(ie=S(["\n    right: 16px;\n  "])))),se),Xe=(k(he={},Te.Valid,(k(ue={},d.Theme.Light,r.css(de||(de=S(["\n      color: ",";\n    "])),p.palette.green.dark1)),k(ue,d.Theme.Dark,r.css(ce||(ce=S(["\n      color: ",";\n    "])),p.palette.green.base)),ue)),k(he,Te.Error,(k(ge={},d.Theme.Light,r.css(pe||(pe=S(["\n      color: ",";\n    "])),p.palette.red.base)),k(ge,d.Theme.Dark,r.css(fe||(fe=S(["\n      color: ",";\n    "])),p.palette.red.light1)),ge)),he),Ue=r.css(be||(be=S(["\n  font-size: 12px;\n  font-style: italic;\n  font-weight: normal;\n"]))),He=(k(xe={},d.Theme.Light,r.css(ye||(ye=S(["\n    color: ",";\n  "])),p.palette.gray.dark1)),k(xe,d.Theme.Dark,r.css(me||(me=S(["\n    color: ",";\n  "])),p.palette.gray.base)),xe),_e=r.css(ve||(ve=S(["\n  ",";\n  min-height: 20px;\n  padding-top: 4px;\n  font-weight: normal;\n"])),Pe),$e=(k(Oe={},d.Theme.Light,r.css(ke||(ke=S(["\n    color: ",";\n  "])),p.palette.red.base)),k(Oe,d.Theme.Dark,r.css(we||(we=S(["\n    color: ",";\n  "])),p.palette.red.light1)),Oe),Ge=["label","description","onChange","onBlur","placeholder","errorMessage","optional","disabled","state","type","id","value","className","darkMode","sizeVariant","aria-labelledby","handleValidation","baseFontSize"],Je=g.default.forwardRef((function(e,t){var o=e.label,l=e.description,i=e.onChange,c=e.onBlur,p=e.placeholder,f=e.errorMessage,h=e.optional,x=void 0!==h&&h,v=e.disabled,j=void 0!==v&&v,z=e.state,E=void 0===z?Te.None:z,N=e.type,D=void 0===N?je.Text:N,C=e.id,L=e.value,P=e.className,q=e.darkMode,R=e.sizeVariant,F=void 0===R?ze.Default:R,I=e["aria-labelledby"],M=e.handleValidation,V=e.baseFontSize,B=O(e,Ge),A=s.useDarkMode(q),W=A.darkMode,X=A.theme,U="string"==typeof L,H=T(n.useState(""),2),_=H[0],$=H[1],G=U?L:_,J=a.useIdAllocator({prefix:"textinput",id:C}),K=u.useUpdatedBaseFontSize(V),Q=a.useValidation(M);"search"===D||o||I||console.error("For screen-reader accessibility, label or aria-labelledby must be provided to TextInput."),"search"===D&&(d.consoleOnce.warn('We recommend using the Leafygreen SearchInput for `type="search" inputs.'),B["aria-label"]||console.error("For screen-reader accessibility, aria-label must be provided to TextInput."));var Y=W?y.default:b.default;return g.default.createElement("div",{className:r.cx(Ce,Le(F,K),P)},(o||l)&&g.default.createElement("div",{className:qe},o&&g.default.createElement(u.Label,{darkMode:W,htmlFor:J,disabled:j,className:Pe},o),l&&g.default.createElement(u.Description,{darkMode:W,disabled:j,className:Pe},l)),g.default.createElement("div",{className:Re},g.default.createElement("input",w({},B,{"aria-labelledby":I,type:D,className:r.cx(Fe,Ie[X],Ve[F],Be[E][X],Me[X],k({},r.css(Se||(Se=S(["\n                  padding-right: 60px;\n                "]))),x&&!j)),value:G,required:!x,disabled:j,placeholder:p,onChange:function(e){i&&i(e),U||$(e.target.value),Q.onChange(e)},onBlur:function(e){c&&c(e),Q.onBlur(e)},ref:t,id:J,autoComplete:j?"off":(null==B?void 0:B.autoComplete)||"on","aria-invalid":"error"===E})),g.default.createElement("div",{className:r.cx(De,Ae,We[F])},E===Te.Valid&&g.default.createElement(Y,{role:"presentation",className:Xe.valid[X]}),E===Te.Error&&g.default.createElement(m.default,{role:"presentation",className:Xe.error[X]}),E===Te.None&&!j&&x&&g.default.createElement("div",{className:r.cx(Ue,He[X])},g.default.createElement("p",null,"Optional")))),E===Te.Error&&f&&g.default.createElement("div",{className:r.cx(_e,$e[X])},g.default.createElement("span",null,f)))}));Je.displayName="TextInput",Je.propTypes={id:h.default.string,label:h.default.string,"aria-labelledby":h.default.string,description:h.default.string,optional:h.default.bool,disabled:h.default.bool,onChange:h.default.func,placeholder:h.default.string,errorMessage:h.default.string,state:h.default.oneOf(Object.values(Te)),value:h.default.string,className:h.default.string,sizeVariant:h.default.oneOf(Object.values(ze)),baseFontSize:h.default.oneOf(Object.values(c.BaseFontSize))},e.SizeVariant=ze,e.State=Te,e.TextInputFontSize=Ee,e.TextInputType=je,e.default=Je,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=index.js.map

dist/style.d.ts

@@ -21,5 +21,6 @@ import { Theme } from '@leafygreen-ui/lib';
 export declare const stateIndicatorStyles: Record<'valid' | 'error', Record<Theme, string>>;
-export declare const optionalTextStyle: string;
+export declare const optionalTextBaseStyle: string;
+export declare const optionalTextThemeStyle: Record<Theme, string>;
 export declare const errorMessageStyle: string;
 export declare const errorMessageModeStyle: Record<Theme, string>;
 //# sourceMappingURL=style.d.ts.map

dist/types.d.ts

 /// <reference types="react" />
-import { HTMLElementProps, Either } from '@leafygreen-ui/lib';
+import { Either, HTMLElementProps } from '@leafygreen-ui/lib';
 import { BaseFontSize } from '@leafygreen-ui/tokens';
@@ -4,0 +4,0 @@ export declare const State: {

package.json

 {
   "name": "@leafygreen-ui/text-input",
-  "version": "12.1.0",
+  "version": "12.1.1",
   "description": "leafyGreen UI Kit Text Input",
@@ -25,7 +25,7 @@ "main": "./dist/index.js",
     "@leafygreen-ui/hooks": "^7.3.3",
-    "@leafygreen-ui/icon": "^11.12.1",
+    "@leafygreen-ui/icon": "^11.12.3",
     "@leafygreen-ui/lib": "^10.0.0",
     "@leafygreen-ui/palette": "^3.4.4",
     "@leafygreen-ui/tokens": "^1.4.0",
-    "@leafygreen-ui/typography": "^15.1.0"
+    "@leafygreen-ui/typography": "^15.2.0"
   },
@@ -32,0 +32,0 @@ "peerDependencies": {

src/index.ts

@@ -5,2 +5,2 @@ export { default } from './TextInput';
 // Export constants
-export { State, TextInputType, SizeVariant, TextInputFontSize } from './types';
+export { SizeVariant, State, TextInputFontSize, TextInputType } from './types';

src/style.ts

@@ -12,2 +12,3 @@ import { css } from '@leafygreen-ui/emotion';
 } from '@leafygreen-ui/tokens';
+
 import { SizeVariant, State } from './types';
@@ -220,3 +221,3 @@
     &::placeholder {
-      color: ${palette.gray.base};
+      color: ${palette.gray.dark1};
       font-weight: normal;
@@ -389,9 +390,17 @@ }
 
-export const optionalTextStyle = css`
+export const optionalTextBaseStyle = css`
   font-size: 12px;
   font-style: italic;
   font-weight: normal;
-  color: ${palette.gray.dark1}; // Same in light & dark theme
 `;
 
+export const optionalTextThemeStyle: Record<Theme, string> = {
+  [Theme.Light]: css`
+    color: ${palette.gray.dark1};
+  `,
+  [Theme.Dark]: css`
+    color: ${palette.gray.base};
+  `,
+};
+
 export const errorMessageStyle = css`
@@ -398,0 +407,0 @@ ${inheritTypeScale};

src/types.ts

@@ -1,2 +0,2 @@
-import { HTMLElementProps, Either } from '@leafygreen-ui/lib';
+import { Either, HTMLElementProps } from '@leafygreen-ui/lib';
 import { BaseFontSize } from '@leafygreen-ui/tokens';
@@ -3,0 +3,0 @@

No alert changes

Improved metrics

Total package byte prevSize

218208

increased by1.04%

Lines of code

1663

increased by0.85%

Dependency changes

• Updated@leafygreen-ui/icon@^11.12.3

• Updated@leafygreen-ui/typography@^15.2.0