diff --git a/docs/404.html b/docs/404.html index 6eb0337..cbf896b 100644 --- a/docs/404.html +++ b/docs/404.html @@ -1,4 +1,4 @@ -404: This page could not be found

404

This page could not be found.

\ No newline at end of file + }

404

This page could not be found.

\ No newline at end of file diff --git a/docs/API.html b/docs/API.html index d94bd1f..7763f67 100644 --- a/docs/API.html +++ b/docs/API.html @@ -9,8 +9,8 @@ .dark { --nextra-primary-hue: 204deg; } -
API

API

+
API

API

All of these props are optional and some also come with a default value. However, it's recommended to use at least the length, validChars and onChange/onComplete props.

OptionTypeDefaultDescription
valueString-The value of the verification input. Behaves like the value prop of a regular input element. This is necessary if the value needs to be changed from the outside (e.g. clearing the value). If you pass this prop, you are responsible to manage the value state. Otherwise the state will be kept inside the component.
lengthNumber6Number of characters the input should allow.
validCharsString'A-Za-z0-9'Set of characters the input should allow. The string is inserted into a regexp character set ( /[]/ ) for input validation.
placeholderString'·' (U+00B7)The character to display in empty fields. In order to use the blank character as a placeholder, specify this option as ' ' or ''.
autoFocusBooleanfalseFocus the input automatically as soon as it is rendered.
passwordModeBooleanfalseHide the input value by displaying * instead.
passwordCharString'*'Custom character to be displayed when passwordMode is true
inputPropsObject{}The properties of this object get forwarded as props to the input element. In particular, you can use this prop to assign an id attribute to the input field to connect it to a label element. Use aria-label for internationalization of the input field.
containerPropsObject{}The properties of this object get forwarded as props to the container element.
classNamesObject{}Object with CSS class names to add to the specified elements. Supported elements (= object-keys) are container, character, characterInactive, characterSelected, characterFilled
onChangeFunction-Callback function that gets called with the string value whenever it changes.
onCompleteFunction-Callback function that gets called with the string value when the input is fully filled.
onFocusFunction-Callback function that gets called when the component obtains focus.
onBlurFunction-Callback function that gets called when the component loses focus.
-
DemoStyling
MIT 2025 © Nextra.
\ No newline at end of file +
DemoStyling
\ No newline at end of file diff --git a/docs/_next/static/qeBYGbQS59DfRMMrxcVSM/_buildManifest.js b/docs/_next/static/T4MqIVG0oemQKLzb3fRGP/_buildManifest.js similarity index 78% rename from docs/_next/static/qeBYGbQS59DfRMMrxcVSM/_buildManifest.js rename to docs/_next/static/T4MqIVG0oemQKLzb3fRGP/_buildManifest.js index 49e1f5d..be97150 100644 --- a/docs/_next/static/qeBYGbQS59DfRMMrxcVSM/_buildManifest.js +++ b/docs/_next/static/T4MqIVG0oemQKLzb3fRGP/_buildManifest.js @@ -1 +1 @@ -self.__BUILD_MANIFEST=function(s,i){return{__rewrites:{beforeFiles:[],afterFiles:[{source:"/react-verification-input/:path*/_meta",destination:"/react-verification-input/404"}],fallback:[]},"/":[s,"static/chunks/pages/index-aa336e7c27c0aeb4.js"],"/API":[s,i,"static/chunks/pages/API-0d1bbfef6ad20b6c.js"],"/_error":["static/chunks/pages/_error-8353112a01355ec2.js"],"/migration/v2":[s,"static/chunks/pages/migration/v2-d4a45e77baa8d2d6.js"],"/migration/v3":[s,"static/chunks/pages/migration/v3-6e4cbdad9fc8eb9f.js"],"/migration/v4":[s,"static/chunks/pages/migration/v4-cce206f1622a8b9d.js"],"/styling":[s,i,"static/chunks/pages/styling-01ccece82b8e14e9.js"],sortedPages:["/","/API","/_app","/_error","/migration/v2","/migration/v3","/migration/v4","/styling"]}}("static/chunks/799-4fdf2e1c55cc217b.js","static/chunks/781-bf07540ab58ff368.js"),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB(); \ No newline at end of file +self.__BUILD_MANIFEST=function(s,i){return{__rewrites:{beforeFiles:[],afterFiles:[{source:"/react-verification-input/:path*/_meta",destination:"/react-verification-input/404"}],fallback:[]},"/":[s,"static/chunks/pages/index-00de29c59dd8b4da.js"],"/API":[s,i,"static/chunks/pages/API-0d1bbfef6ad20b6c.js"],"/_error":["static/chunks/pages/_error-8353112a01355ec2.js"],"/migration/v2":[s,"static/chunks/pages/migration/v2-d4a45e77baa8d2d6.js"],"/migration/v3":[s,"static/chunks/pages/migration/v3-6e4cbdad9fc8eb9f.js"],"/migration/v4":[s,"static/chunks/pages/migration/v4-cce206f1622a8b9d.js"],"/styling":[s,i,"static/chunks/pages/styling-0d6fd8cb44171d2d.js"],sortedPages:["/","/API","/_app","/_error","/migration/v2","/migration/v3","/migration/v4","/styling"]}}("static/chunks/799-4fdf2e1c55cc217b.js","static/chunks/781-bf07540ab58ff368.js"),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB(); \ No newline at end of file diff --git a/docs/_next/static/qeBYGbQS59DfRMMrxcVSM/_ssgManifest.js b/docs/_next/static/T4MqIVG0oemQKLzb3fRGP/_ssgManifest.js similarity index 100% rename from docs/_next/static/qeBYGbQS59DfRMMrxcVSM/_ssgManifest.js rename to docs/_next/static/T4MqIVG0oemQKLzb3fRGP/_ssgManifest.js diff --git a/docs/_next/static/chunks/nextra-data-en-US.json b/docs/_next/static/chunks/nextra-data-en-US.json index e819223..a8d04ad 100644 --- a/docs/_next/static/chunks/nextra-data-en-US.json +++ b/docs/_next/static/chunks/nextra-data-en-US.json @@ -1 +1 @@ -{"/API":{"title":"API","data":{"":""}},"/migration/v4":{"title":"Migrating to Version 4","data":{"":"This guide is aimed at developers wanting to update from v3.x.x to v4.x.x.Check the following steps one by one and execute the ones that apply to your\nsituation.","removed-wrapper-element#Removed Wrapper Element":"The wrapper element with the class name .vi_wrapper was removed. It was inconvenient to style this element with frameworks like Tailwind, since it was not possible to set custom class names. Instead the .vi_wrapper class had to be overridden in a CSS file.If you currently rely on this class, this change might break your styling. Styles from the wrapper element should probably be moved to the container element in version 4.\n// v3\n\n\n\n\n// v4\n"}},"/":{"title":"Demo","data":{"":"","default#Default":"Default configuration without specifying any props.\n","numbers-only#Numbers only":"Accept only numbers and use numpad on mobile devices.\n","password-mode#Password mode":"Hide the input value. This will also set the input type as password.\n","custom-length#Custom length":"Configure the input to accept 5 digits.\n","custom-placeholder#Custom placeholder":"Use any character as placeholder (empty string for no placeholder).\n","autofill-otp-ios#Autofill OTP (iOS)":"Let iOS read OTP codes from text message notifications (see docs).\nIn order to test this, you need to send a text message containing e.g. Code:\n123456 to your phone.\n\n"}},"/migration/v3":{"title":"Migrating to Version 3","data":{"":"This guide is aimed at developers wanting to update from v2.x.x to v3.x.x.Check the following steps one by one and execute the ones that apply to your\nsituation.","new-prop-containerprops#New prop: containerProps":"Custom props are no longer forwarded to the container element. Use the new\nprop containerProps instead and specify the custom props in object literal\nform.\n// v2\n\n\n// v3\n","remove-prop-removedefaultstyles#Remove prop: removeDefaultStyles":"The removeDefaultStyles prop has been removed. Styles are now overridable by\ndefault. Thus this prop can be removed safely.\n// v2\n\n\n// v3\n"}},"/migration/v2":{"title":"Migrating to Version 2","data":{"":"This guide is aimed at developers wanting to update from v0.1.x to v2.x.x.Check the following steps one by one and execute the ones that apply to your\nsituation.","rename-prop-input#Rename prop: input":"The input prop has been renamed to inputProps in order to be more explicit\nabout the props being forwarded to the input element. Also, the onChange\ncallback is now available on the top level. This matches the interface of a\nregular input element more closely (there is also a new top-level prop\nvalue).\n// v0.1.x\n\n\n// v2\n","remove-props-container-inputfield-characters-character#Remove props: container, inputField, characters, character":"These props have been removed. Your custom CSS classes can be passed to the\nnew classNames prop. In order to simplify the component structure, the\ncharacters element has been removed, use container instead. For more\ndetails see Styling. Additional props can no longer be forwarded\nto these elements.\n// v0.1.x\n\n\n// v2\n","remove-prop-getinputref#Remove prop: getInputRef":"This callback has been removed. The new way to receive the input ref is to use\nthe standard ref prop. The\nresult will be a ref to the actual (invisible) input element.\n// v0.1.x\n {myRef = ref}}\n/>\n\n// v2\n"}},"/styling":{"title":"Styling","data":{"":"","example#Example":".character {\nborder: none;\nfont-size: 20px;\nborder-radius: 8px;\n\n/* light theme */\ncolor: #272729;\nbackground-color: #f6f5fa;\nbox-shadow: 0 2px 0 #e4e2f5;\n\n/* dark theme */\ncolor: #fff;\nbackground-color: #222;\nbox-shadow: 0 2px 0 #444;\n}","with-cursor-caret#With Cursor (Caret)":".character--selected {\nposition: relative;\n}\n\n/* optionally hide placeholder (in case it overlaps the cursor) */\n.character--selected:not(.character--filled) {\ncolor: transparent;\n}\n\n.character--selected:not(.character--filled)::after {\ncontent: \"\";\nwidth: 1px;\nheight: 25px;\nbackground-color: #333;\ndisplay: block;\nposition: absolute;\ntop: 50%;\nleft: 50%;\ntransform: translate(-50%, -50%);\nanimation: blink 1s infinite step-end;\n}\n\n@keyframes blink {\n0% {\nopacity: 1;\n}\n50% {\nopacity: 0;\n}\n}"}}} \ No newline at end of file +{"/API":{"title":"API","data":{"":""}},"/migration/v2":{"title":"Migrating to Version 2","data":{"":"This guide is aimed at developers wanting to update from v0.1.x to v2.x.x.Check the following steps one by one and execute the ones that apply to your\nsituation.","rename-prop-input#Rename prop: input":"The input prop has been renamed to inputProps in order to be more explicit\nabout the props being forwarded to the input element. Also, the onChange\ncallback is now available on the top level. This matches the interface of a\nregular input element more closely (there is also a new top-level prop\nvalue).\n// v0.1.x\n\n\n// v2\n","remove-props-container-inputfield-characters-character#Remove props: container, inputField, characters, character":"These props have been removed. Your custom CSS classes can be passed to the\nnew classNames prop. In order to simplify the component structure, the\ncharacters element has been removed, use container instead. For more\ndetails see Styling. Additional props can no longer be forwarded\nto these elements.\n// v0.1.x\n\n\n// v2\n","remove-prop-getinputref#Remove prop: getInputRef":"This callback has been removed. The new way to receive the input ref is to use\nthe standard ref prop. The\nresult will be a ref to the actual (invisible) input element.\n// v0.1.x\n {myRef = ref}}\n/>\n\n// v2\n"}},"/migration/v4":{"title":"Migrating to Version 4","data":{"":"This guide is aimed at developers wanting to update from v3.x.x to v4.x.x.Check the following steps one by one and execute the ones that apply to your\nsituation.","removed-wrapper-element#Removed Wrapper Element":"The wrapper element with the class name .vi_wrapper was removed. It was inconvenient to style this element with frameworks like Tailwind, since it was not possible to set custom class names. Instead the .vi_wrapper class had to be overridden in a CSS file.If you currently rely on this class, this change might break your styling. Styles from the wrapper element should probably be moved to the container element in version 4.\n// v3\n\n\n\n\n// v4\n"}},"/styling":{"title":"Styling","data":{"":"","example#Example":".character {\nborder: none;\nfont-size: 20px;\nborder-radius: 8px;\n\n/* light theme */\ncolor: #272729;\nbackground-color: #f6f5fa;\nbox-shadow: 0 2px 0 #e4e2f5;\n\n/* dark theme */\ncolor: #fff;\nbackground-color: #222;\nbox-shadow: 0 2px 0 #444;\n}","with-cursor-caret#With Cursor (Caret)":".character--selected {\nposition: relative;\n}\n\n/* optionally hide placeholder (in case it overlaps the cursor) */\n.character--selected:not(.character--filled) {\ncolor: transparent;\n}\n\n.character--selected:not(.character--filled)::after {\ncontent: \"\";\nwidth: 1px;\nheight: 25px;\nbackground-color: #333;\ndisplay: block;\nposition: absolute;\ntop: 50%;\nleft: 50%;\ntransform: translate(-50%, -50%);\nanimation: blink 1s infinite step-end;\n}\n\n@keyframes blink {\n0% {\nopacity: 1;\n}\n50% {\nopacity: 0;\n}\n}"}},"/":{"title":"Demo","data":{"":"","default#Default":"Default configuration without specifying any props.\n","numbers-only#Numbers only":"Accept only numbers and use numpad on mobile devices.\n","password-mode#Password mode":"Hide the input value. This will also set the input type as password.\n","custom-length#Custom length":"Configure the input to accept 5 digits.\n","custom-placeholder#Custom placeholder":"Use any character as placeholder (empty string for no placeholder).\n","autofill-otp-ios#Autofill OTP (iOS)":"Let iOS read OTP codes from text message notifications (see docs).\nIn order to test this, you need to send a text message containing e.g. Code:\n123456 to your phone.\n\n"}},"/migration/v3":{"title":"Migrating to Version 3","data":{"":"This guide is aimed at developers wanting to update from v2.x.x to v3.x.x.Check the following steps one by one and execute the ones that apply to your\nsituation.","new-prop-containerprops#New prop: containerProps":"Custom props are no longer forwarded to the container element. Use the new\nprop containerProps instead and specify the custom props in object literal\nform.\n// v2\n\n\n// v3\n","remove-prop-removedefaultstyles#Remove prop: removeDefaultStyles":"The removeDefaultStyles prop has been removed. Styles are now overridable by\ndefault. Thus this prop can be removed safely.\n// v2\n\n\n// v3\n"}}} \ No newline at end of file diff --git a/docs/_next/static/chunks/pages/index-aa336e7c27c0aeb4.js b/docs/_next/static/chunks/pages/index-00de29c59dd8b4da.js similarity index 75% rename from docs/_next/static/chunks/pages/index-aa336e7c27c0aeb4.js rename to docs/_next/static/chunks/pages/index-00de29c59dd8b4da.js index 9b029c6..2456272 100644 --- a/docs/_next/static/chunks/pages/index-aa336e7c27c0aeb4.js +++ b/docs/_next/static/chunks/pages/index-00de29c59dd8b4da.js @@ -1 +1 @@ -(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[405],{1464:function(e,t,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/",function(){return n(1969)}])},250:function(e,t,n){"use strict";var r=n(5893);t.Z={project:{link:"https://github.com/andreaswilli/react-verification-input"},docsRepositoryBase:"https://github.com/andreaswilli/react-verification-input/tree/master/docs-src",useNextSeoProps:()=>({titleTemplate:"%s | react-verification-input"}),darkMode:!0,logo:(0,r.jsx)(r.Fragment,{children:(0,r.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"150px",viewBox:"0 0 670 214",fill:"none",children:[(0,r.jsx)("path",{d:"M624.697 24.5H617.071C616.709 24.5 616.467 24.8716 616.613 25.2021L655.015 112.085C655.413 112.986 655.413 114.014 655.015 114.915L616.613 201.798C616.467 202.128 616.709 202.5 617.071 202.5H624.697C624.895 202.5 625.075 202.383 625.155 202.202L664.271 113.702C664.328 113.573 664.328 113.427 664.271 113.298L625.155 24.7979C625.075 24.6168 624.895 24.5 624.697 24.5Z",fill:"#CA33FF",stroke:"#CA33FF",strokeWidth:"3"}),(0,r.jsx)("rect",{x:"503.5",y:"121.5",width:"87",height:"91",rx:"6.5",stroke:"#CA33FF",strokeWidth:"3"}),(0,r.jsx)("rect",{x:"509",y:"127",width:"76",height:"80",rx:"2",fill:"white"}),(0,r.jsx)("path",{d:"M533.92 152.841V149.091H560.102V152.841H549.124V184H544.897V152.841H533.92Z",fill:"black"}),(0,r.jsx)("rect",{x:"397.5",y:"121.5",width:"87",height:"91",rx:"6.5",stroke:"#CA33FF",strokeWidth:"3"}),(0,r.jsx)("rect",{x:"403",y:"127",width:"76",height:"80",rx:"2",fill:"white"}),(0,r.jsx)("path",{d:"M450.347 149.091H454.575V172.205C454.575 174.591 454.012 176.722 452.887 178.597C451.773 180.46 450.2 181.932 448.165 183.011C446.131 184.08 443.745 184.614 441.006 184.614C438.268 184.614 435.881 184.08 433.847 183.011C431.813 181.932 430.234 180.46 429.109 178.597C427.995 176.722 427.438 174.591 427.438 172.205V149.091H431.665V171.864C431.665 173.568 432.04 175.085 432.79 176.415C433.54 177.733 434.609 178.773 435.995 179.534C437.393 180.284 439.063 180.659 441.006 180.659C442.95 180.659 444.62 180.284 446.018 179.534C447.415 178.773 448.484 177.733 449.222 176.415C449.972 175.085 450.347 173.568 450.347 171.864V149.091Z",fill:"black"}),(0,r.jsx)("rect",{x:"291.5",y:"121.5",width:"87",height:"91",rx:"6.5",stroke:"#CA33FF",strokeWidth:"3"}),(0,r.jsx)("rect",{x:"297",y:"127",width:"76",height:"80",rx:"2",fill:"white"}),(0,r.jsx)("path",{d:"M323.993 184V149.091H335.788C338.527 149.091 340.766 149.585 342.504 150.574C344.254 151.551 345.55 152.875 346.391 154.545C347.232 156.216 347.652 158.08 347.652 160.136C347.652 162.193 347.232 164.062 346.391 165.744C345.561 167.426 344.277 168.767 342.538 169.767C340.8 170.756 338.572 171.25 335.857 171.25H327.402V167.5H335.72C337.595 167.5 339.101 167.176 340.237 166.528C341.374 165.881 342.197 165.006 342.709 163.903C343.232 162.79 343.493 161.534 343.493 160.136C343.493 158.739 343.232 157.489 342.709 156.386C342.197 155.284 341.368 154.42 340.22 153.795C339.072 153.159 337.55 152.841 335.652 152.841H328.22V184H323.993Z",fill:"black"}),(0,r.jsx)("rect",{x:"185.5",y:"121.5",width:"87",height:"91",rx:"6.5",stroke:"#CA33FF",strokeWidth:"3"}),(0,r.jsx)("rect",{x:"191",y:"127",width:"76",height:"80",rx:"2",fill:"white"}),(0,r.jsx)("path",{d:"M242.839 149.091V184H238.748L219.725 156.591H219.384V184H215.157V149.091H219.248L238.339 176.568H238.68V149.091H242.839Z",fill:"black"}),(0,r.jsx)("rect",{x:"79.5",y:"121.5",width:"87",height:"91",rx:"6.5",stroke:"#CA33FF",strokeWidth:"3"}),(0,r.jsx)("rect",{x:"85",y:"127",width:"76",height:"80",rx:"2",fill:"white"}),(0,r.jsx)("path",{d:"M125.103 149.091V184H120.876V149.091H125.103Z",fill:"black"}),(0,r.jsx)("path",{d:"M89.3182 13.1818L110.045 71.9545H110.864L131.591 13.1818H140.455L114.818 83H106.091L80.4545 13.1818H89.3182ZM167.318 84.0909C162.273 84.0909 157.92 82.9773 154.261 80.75C150.625 78.5 147.818 75.3636 145.841 71.3409C143.886 67.2955 142.909 62.5909 142.909 57.2273C142.909 51.8636 143.886 47.1364 145.841 43.0455C147.818 38.9318 150.568 35.7273 154.091 33.4318C157.636 31.1136 161.773 29.9545 166.5 29.9545C169.227 29.9545 171.92 30.4091 174.58 31.3182C177.239 32.2273 179.659 33.7045 181.841 35.75C184.023 37.7727 185.761 40.4545 187.057 43.7955C188.352 47.1364 189 51.25 189 56.1364V59.5455H148.636V52.5909H180.818C180.818 49.6364 180.227 47 179.045 44.6818C177.886 42.3636 176.227 40.5341 174.068 39.1932C171.932 37.8523 169.409 37.1818 166.5 37.1818C163.295 37.1818 160.523 37.9773 158.182 39.5682C155.864 41.1364 154.08 43.1818 152.83 45.7045C151.58 48.2273 150.955 50.9318 150.955 53.8182V58.4545C150.955 62.4091 151.636 65.7614 153 68.5114C154.386 71.2386 156.307 73.3182 158.761 74.75C161.216 76.1591 164.068 76.8636 167.318 76.8636C169.432 76.8636 171.341 76.5682 173.045 75.9773C174.773 75.3636 176.261 74.4545 177.511 73.25C178.761 72.0227 179.727 70.5 180.409 68.6818L188.182 70.8636C187.364 73.5 185.989 75.8182 184.057 77.8182C182.125 79.7955 179.739 81.3409 176.898 82.4545C174.057 83.5455 170.864 84.0909 167.318 84.0909ZM201.239 83V30.6364H209.011V38.5455H209.557C210.511 35.9545 212.239 33.8523 214.739 32.2386C217.239 30.625 220.057 29.8182 223.193 29.8182C223.784 29.8182 224.523 29.8295 225.409 29.8523C226.295 29.875 226.966 29.9091 227.42 29.9545V38.1364C227.148 38.0682 226.523 37.9659 225.545 37.8295C224.591 37.6705 223.58 37.5909 222.511 37.5909C219.966 37.5909 217.693 38.125 215.693 39.1932C213.716 40.2386 212.148 41.6932 210.989 43.5568C209.852 45.3977 209.284 47.5 209.284 49.8636V83H201.239ZM236.957 83V30.6364H245.003V83H236.957ZM241.048 21.9091C239.48 21.9091 238.128 21.375 236.991 20.3068C235.878 19.2386 235.321 17.9545 235.321 16.4545C235.321 14.9545 235.878 13.6705 236.991 12.6023C238.128 11.5341 239.48 11 241.048 11C242.616 11 243.957 11.5341 245.071 12.6023C246.207 13.6705 246.776 14.9545 246.776 16.4545C246.776 17.9545 246.207 19.2386 245.071 20.3068C243.957 21.375 242.616 21.9091 241.048 21.9091ZM283.057 30.6364V37.4545H254.83V30.6364H283.057ZM263.284 83V23.4091C263.284 20.4091 263.989 17.9091 265.398 15.9091C266.807 13.9091 268.636 12.4091 270.886 11.4091C273.136 10.4091 275.511 9.90909 278.011 9.90909C279.989 9.90909 281.602 10.0682 282.852 10.3864C284.102 10.7045 285.034 11 285.648 11.2727L283.33 18.2273C282.92 18.0909 282.352 17.9205 281.625 17.7159C280.92 17.5114 279.989 17.4091 278.83 17.4091C276.17 17.4091 274.25 18.0795 273.068 19.4205C271.909 20.7614 271.33 22.7273 271.33 25.3182V83H263.284ZM294.332 83V30.6364H302.378V83H294.332ZM298.423 21.9091C296.855 21.9091 295.503 21.375 294.366 20.3068C293.253 19.2386 292.696 17.9545 292.696 16.4545C292.696 14.9545 293.253 13.6705 294.366 12.6023C295.503 11.5341 296.855 11 298.423 11C299.991 11 301.332 11.5341 302.446 12.6023C303.582 13.6705 304.151 14.9545 304.151 16.4545C304.151 17.9545 303.582 19.2386 302.446 20.3068C301.332 21.375 299.991 21.9091 298.423 21.9091ZM338.386 84.0909C333.477 84.0909 329.25 82.9318 325.705 80.6136C322.159 78.2955 319.432 75.1023 317.523 71.0341C315.614 66.9659 314.659 62.3182 314.659 57.0909C314.659 51.7727 315.636 47.0795 317.591 43.0114C319.568 38.9205 322.318 35.7273 325.841 33.4318C329.386 31.1136 333.523 29.9545 338.25 29.9545C341.932 29.9545 345.25 30.6364 348.205 32C351.159 33.3636 353.58 35.2727 355.466 37.7273C357.352 40.1818 358.523 43.0455 358.977 46.3182H350.932C350.318 43.9318 348.955 41.8182 346.841 39.9773C344.75 38.1136 341.932 37.1818 338.386 37.1818C335.25 37.1818 332.5 38 330.136 39.6364C327.795 41.25 325.966 43.5341 324.648 46.4886C323.352 49.4205 322.705 52.8636 322.705 56.8182C322.705 60.8636 323.341 64.3864 324.614 67.3864C325.909 70.3864 327.727 72.7159 330.068 74.375C332.432 76.0341 335.205 76.8636 338.386 76.8636C340.477 76.8636 342.375 76.5 344.08 75.7727C345.784 75.0455 347.227 74 348.409 72.6364C349.591 71.2727 350.432 69.6364 350.932 67.7273H358.977C358.523 70.8182 357.398 73.6023 355.602 76.0795C353.83 78.5341 351.477 80.4886 348.545 81.9432C345.636 83.375 342.25 84.0909 338.386 84.0909ZM386.148 84.2273C382.83 84.2273 379.818 83.6023 377.114 82.3523C374.409 81.0795 372.261 79.25 370.67 76.8636C369.08 74.4545 368.284 71.5455 368.284 68.1364C368.284 65.1364 368.875 62.7045 370.057 60.8409C371.239 58.9545 372.818 57.4773 374.795 56.4091C376.773 55.3409 378.955 54.5455 381.341 54.0227C383.75 53.4773 386.17 53.0455 388.602 52.7273C391.784 52.3182 394.364 52.0114 396.341 51.8068C398.341 51.5795 399.795 51.2045 400.705 50.6818C401.636 50.1591 402.102 49.25 402.102 47.9545V47.6818C402.102 44.3182 401.182 41.7045 399.341 39.8409C397.523 37.9773 394.761 37.0455 391.057 37.0455C387.216 37.0455 384.205 37.8864 382.023 39.5682C379.841 41.25 378.307 43.0455 377.42 44.9545L369.784 42.2273C371.148 39.0455 372.966 36.5682 375.239 34.7955C377.534 33 380.034 31.75 382.739 31.0455C385.466 30.3182 388.148 29.9545 390.784 29.9545C392.466 29.9545 394.398 30.1591 396.58 30.5682C398.784 30.9545 400.909 31.7614 402.955 32.9886C405.023 34.2159 406.739 36.0682 408.102 38.5455C409.466 41.0227 410.148 44.3409 410.148 48.5V83H402.102V75.9091H401.693C401.148 77.0455 400.239 78.2614 398.966 79.5568C397.693 80.8523 396 81.9545 393.886 82.8636C391.773 83.7727 389.193 84.2273 386.148 84.2273ZM387.375 77C390.557 77 393.239 76.375 395.42 75.125C397.625 73.875 399.284 72.2614 400.398 70.2841C401.534 68.3068 402.102 66.2273 402.102 64.0455V56.6818C401.761 57.0909 401.011 57.4659 399.852 57.8068C398.716 58.125 397.398 58.4091 395.898 58.6591C394.42 58.8864 392.977 59.0909 391.568 59.2727C390.182 59.4318 389.057 59.5682 388.193 59.6818C386.102 59.9545 384.148 60.3977 382.33 61.0114C380.534 61.6023 379.08 62.5 377.966 63.7045C376.875 64.8864 376.33 66.5 376.33 68.5455C376.33 71.3409 377.364 73.4545 379.432 74.8864C381.523 76.2955 384.17 77 387.375 77ZM447.605 30.6364V37.4545H420.469V30.6364H447.605ZM428.378 18.0909H436.423V68C436.423 70.2727 436.753 71.9773 437.412 73.1136C438.094 74.2273 438.957 74.9773 440.003 75.3636C441.071 75.7273 442.196 75.9091 443.378 75.9091C444.264 75.9091 444.991 75.8636 445.56 75.7727C446.128 75.6591 446.582 75.5682 446.923 75.5L448.56 82.7273C448.014 82.9318 447.253 83.1364 446.276 83.3409C445.298 83.5682 444.06 83.6818 442.56 83.6818C440.287 83.6818 438.06 83.1932 435.878 82.2159C433.719 81.2386 431.923 79.75 430.491 77.75C429.082 75.75 428.378 73.2273 428.378 70.1818V18.0909ZM459.707 83V30.6364H467.753V83H459.707ZM463.798 21.9091C462.23 21.9091 460.878 21.375 459.741 20.3068C458.628 19.2386 458.071 17.9545 458.071 16.4545C458.071 14.9545 458.628 13.6705 459.741 12.6023C460.878 11.5341 462.23 11 463.798 11C465.366 11 466.707 11.5341 467.821 12.6023C468.957 13.6705 469.526 14.9545 469.526 16.4545C469.526 17.9545 468.957 19.2386 467.821 20.3068C466.707 21.375 465.366 21.9091 463.798 21.9091ZM503.761 84.0909C499.034 84.0909 494.886 82.9659 491.318 80.7159C487.773 78.4659 485 75.3182 483 71.2727C481.023 67.2273 480.034 62.5 480.034 57.0909C480.034 51.6364 481.023 46.875 483 42.8068C485 38.7386 487.773 35.5795 491.318 33.3295C494.886 31.0795 499.034 29.9545 503.761 29.9545C508.489 29.9545 512.625 31.0795 516.17 33.3295C519.739 35.5795 522.511 38.7386 524.489 42.8068C526.489 46.875 527.489 51.6364 527.489 57.0909C527.489 62.5 526.489 67.2273 524.489 71.2727C522.511 75.3182 519.739 78.4659 516.17 80.7159C512.625 82.9659 508.489 84.0909 503.761 84.0909ZM503.761 76.8636C507.352 76.8636 510.307 75.9432 512.625 74.1023C514.943 72.2614 516.659 69.8409 517.773 66.8409C518.886 63.8409 519.443 60.5909 519.443 57.0909C519.443 53.5909 518.886 50.3295 517.773 47.3068C516.659 44.2841 514.943 41.8409 512.625 39.9773C510.307 38.1136 507.352 37.1818 503.761 37.1818C500.17 37.1818 497.216 38.1136 494.898 39.9773C492.58 41.8409 490.864 44.2841 489.75 47.3068C488.636 50.3295 488.08 53.5909 488.08 57.0909C488.08 60.5909 488.636 63.8409 489.75 66.8409C490.864 69.8409 492.58 72.2614 494.898 74.1023C497.216 75.9432 500.17 76.8636 503.761 76.8636ZM547.815 51.5V83H539.77V30.6364H547.543V38.8182H548.224C549.452 36.1591 551.315 34.0227 553.815 32.4091C556.315 30.7727 559.543 29.9545 563.497 29.9545C567.043 29.9545 570.145 30.6818 572.804 32.1364C575.463 33.5682 577.531 35.75 579.009 38.6818C580.486 41.5909 581.224 45.2727 581.224 49.7273V83H573.179V50.2727C573.179 46.1591 572.111 42.9545 569.974 40.6591C567.838 38.3409 564.906 37.1818 561.179 37.1818C558.611 37.1818 556.315 37.7386 554.293 38.8523C552.293 39.9659 550.713 41.5909 549.554 43.7273C548.395 45.8636 547.815 48.4545 547.815 51.5Z",fill:"#CA33FF"}),(0,r.jsx)("path",{d:"M45.3027 24.5H52.9294C53.2908 24.5 53.5328 24.8716 53.3867 25.2021L14.9854 112.085C14.5871 112.986 14.5871 114.014 14.9854 114.915L53.3867 201.798C53.5328 202.128 53.2908 202.5 52.9294 202.5H45.3027C45.1047 202.5 44.9254 202.383 44.8453 202.202L5.72932 113.702C5.67242 113.573 5.67242 113.427 5.72932 113.298L44.8453 24.7979C44.9254 24.6168 45.1047 24.5 45.3027 24.5Z",fill:"#CA33FF",stroke:"#CA33FF",strokeWidth:"3"})]})}),head:(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("meta",{name:"viewport",content:"width=device-width, initial-scale=1.0"}),(0,r.jsx)("meta",{property:"og:title",content:"react-verification-input"}),(0,r.jsx)("meta",{property:"og:description",content:"Customizable, masked input for React."})]})}},1969:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return d.Z}});var r=n(5893),o=n(4526),i=n(7928),a=n(250);n(5513);var s=n(1151);n(5675);var l=n(254),c=n.n(l),d=n(2243);function h(e){let t=Object.assign({h1:"h1",h2:"h2",p:"p",pre:"pre",code:"code",span:"span"},(0,s.ah)(),e.components);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h1,{children:"Demo"}),"\n",(0,r.jsx)(t.h2,{id:"default",children:"Default"}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(c(),{}),"\n",(0,r.jsx)(t.p,{children:"Default configuration without specifying any props."}),"\n",(0,r.jsx)(t.pre,{"data-language":"jsx","data-theme":"default",hasCopyCode:!0,children:(0,r.jsx)(t.code,{"data-language":"jsx","data-theme":"default",children:(0,r.jsxs)(t.span,{className:"line",children:[(0,r.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-token-constant)"},children:"VerificationInput"}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" />"})]})})}),"\n",(0,r.jsx)(t.h2,{id:"numbers-only",children:"Numbers only"}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(c(),{validChars:"0-9",inputProps:{inputMode:"numeric"}}),"\n",(0,r.jsx)(t.p,{children:"Accept only numbers and use numpad on mobile devices."}),"\n",(0,r.jsx)(t.pre,{"data-language":"jsx","data-theme":"default",hasCopyCode:!0,children:(0,r.jsx)(t.code,{"data-language":"jsx","data-theme":"default",children:(0,r.jsxs)(t.span,{className:"line",children:[(0,r.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-token-constant)"},children:"VerificationInput"}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-token-function)"},children:"validChars"}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"0-9"'}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-token-function)"},children:"inputProps"}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"{{ inputMode"}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"numeric"'}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" }} />"})]})})}),"\n",(0,r.jsx)(t.h2,{id:"password-mode",children:"Password mode"}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(c(),{passwordMode:!0}),"\n",(0,r.jsxs)(t.p,{children:["Hide the input value. This will also set the input type as ",(0,r.jsx)(t.code,{children:"password"}),"."]}),"\n",(0,r.jsx)(t.pre,{"data-language":"jsx","data-theme":"default",hasCopyCode:!0,children:(0,r.jsx)(t.code,{"data-language":"jsx","data-theme":"default",children:(0,r.jsxs)(t.span,{className:"line",children:[(0,r.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-token-constant)"},children:"VerificationInput"}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-token-function)"},children:"passwordMode"}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"{"}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-token-constant)"},children:"true"}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"} />"})]})})}),"\n",(0,r.jsx)(t.h2,{id:"custom-length",children:"Custom length"}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(c(),{length:5}),"\n",(0,r.jsx)(t.p,{children:"Configure the input to accept 5 digits."}),"\n",(0,r.jsx)(t.pre,{"data-language":"jsx","data-theme":"default",hasCopyCode:!0,children:(0,r.jsx)(t.code,{"data-language":"jsx","data-theme":"default",children:(0,r.jsxs)(t.span,{className:"line",children:[(0,r.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-token-constant)"},children:"VerificationInput"}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-token-function)"},children:"length"}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"{"}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-token-constant)"},children:"5"}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"} />"})]})})}),"\n",(0,r.jsx)(t.h2,{id:"custom-placeholder",children:"Custom placeholder"}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(c(),{placeholder:"_"}),"\n",(0,r.jsx)(t.p,{children:"Use any character as placeholder (empty string for no placeholder)."}),"\n",(0,r.jsx)(t.pre,{"data-language":"jsx","data-theme":"default",hasCopyCode:!0,children:(0,r.jsx)(t.code,{"data-language":"jsx","data-theme":"default",children:(0,r.jsxs)(t.span,{className:"line",children:[(0,r.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-token-constant)"},children:"VerificationInput"}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-token-function)"},children:"placeholder"}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"_"'}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" />"})]})})}),"\n",(0,r.jsx)(t.h2,{id:"autofill-otp-ios",children:"Autofill OTP (iOS)"}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(c(),{inputProps:{autoComplete:"one-time-code"}}),"\n",(0,r.jsxs)(t.p,{children:["Let iOS read OTP codes from text message notifications (see ",(0,r.jsx)("a",{href:"https://developer.apple.com/documentation/security/password_autofill/enabling_password_autofill_on_an_html_input_element",target:"_blank",children:"docs"}),")."]}),"\n",(0,r.jsx)(i.UW,{children:(0,r.jsxs)(t.p,{children:["In order to test this, you need to send a text message containing e.g. ",(0,r.jsx)(t.code,{children:"Code: 123456"})," to your phone."]})}),"\n",(0,r.jsx)(t.pre,{"data-language":"jsx","data-theme":"default",hasCopyCode:!0,children:(0,r.jsx)(t.code,{"data-language":"jsx","data-theme":"default",children:(0,r.jsxs)(t.span,{className:"line",children:[(0,r.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-token-constant)"},children:"VerificationInput"}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-token-function)"},children:"inputProps"}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"{{ autoComplete"}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"one-time-code"'}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" }} />"})]})})})]})}e=n.hmd(e),(0,o.j)({pageNextRoute:"/",pageOpts:{filePath:"pages/index.mdx",route:"/",frontMatter:{title:"Demo"},pageMap:[{kind:"MdxPage",name:"API",route:"/API",frontMatter:{title:"API"}},{kind:"Meta",data:{index:"Demo",API:"API",styling:"Styling",migration:"Migration Guide"}},{kind:"MdxPage",name:"index",route:"/",frontMatter:{title:"Demo"}},{kind:"Folder",name:"migration",route:"/migration",children:[{kind:"MdxPage",name:"v2",route:"/migration/v2",frontMatter:{title:"Migrating to Version 2"}},{kind:"MdxPage",name:"v3",route:"/migration/v3",frontMatter:{title:"Migrating to Version 3"}}]},{kind:"MdxPage",name:"styling",route:"/styling",frontMatter:{title:"Styling"}}],headings:[{depth:1,value:"Demo",id:"demo"},{depth:2,value:"Default",id:"default"},{depth:2,value:"Numbers only",id:"numbers-only"},{depth:2,value:"Password mode",id:"password-mode"},{depth:2,value:"Custom length",id:"custom-length"},{depth:2,value:"Custom placeholder",id:"custom-placeholder"},{depth:2,value:"Autofill OTP (iOS)",id:"autofill-otp-ios"}],timestamp:1677807991e3,flexsearch:{codeblocks:!0},title:"Demo"},nextraLayout:i.ZP,themeConfig:a.Z,Content:function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),e.components);return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(h,{...e})}):h(e)},hot:e.hot,pageOptsChecksum:void 0,dynamicMetaModules:[]})},254:function(e,t,n){/*! For license information please see index.js.LICENSE.txt */(()=>{var e={365:(e,t,n)=>{"use strict";n.d(t,{A:()=>s});var r=n(601),o=n.n(r),i=n(314),a=n.n(i)()(o());a.push([e.id,".vi {\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n box-sizing: border-box;\n position: absolute;\n color: transparent;\n background: transparent;\n caret-color: transparent;\n outline: none;\n border: 0 none transparent;\n opacity: 0;\n}\n\n.vi::-ms-reveal,\n.vi::-ms-clear {\n display: none;\n}\n\n.vi::selection {\n background: transparent;\n}\n\n/* :where() gives the styles specificity 0, which makes them overridable */\n:where(.vi__container) {\n position: relative;\n display: flex;\n gap: 8px;\n height: 50px;\n width: 300px;\n}\n\n:where(.vi__character) {\n height: 100%;\n flex-grow: 1;\n flex-basis: 0;\n text-align: center;\n font-size: 36px;\n line-height: 50px;\n color: black;\n background-color: white;\n border: 1px solid black;\n cursor: default;\n user-select: none;\n box-sizing: border-box;\n}\n\n:where(.vi__character--inactive) {\n color: dimgray;\n background-color: lightgray;\n}\n\n:where(.vi__character--selected) {\n outline: 2px solid cornflowerblue;\n color: cornflowerblue;\n}\n",""]);let s=a},314:e=>{"use strict";e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var n="",r=void 0!==t[5];return t[4]&&(n+="@supports (".concat(t[4],") {")),t[2]&&(n+="@media ".concat(t[2]," {")),r&&(n+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),n+=e(t),r&&(n+="}"),t[2]&&(n+="}"),t[4]&&(n+="}"),n}).join("")},t.i=function(e,n,r,o,i){"string"==typeof e&&(e=[[null,e,void 0]]);var a={};if(r)for(var s=0;s0?" ".concat(d[5]):""," {").concat(d[1],"}")),d[5]=i),n&&(d[2]&&(d[1]="@media ".concat(d[2]," {").concat(d[1],"}")),d[2]=n),o&&(d[4]?(d[1]="@supports (".concat(d[4],") {").concat(d[1],"}"),d[4]=o):d[4]="".concat(o)),t.push(d))}},t}},601:e=>{"use strict";e.exports=function(e){return e[1]}},942:(e,t)=>{var n;!function(){"use strict";var r={}.hasOwnProperty;function o(){for(var e="",t=0;t{var t=e&&e.__esModule?()=>e.default:()=>e;return o.d(t,{a:t}),t},o.d=(e,t)=>{for(var n in t)o.o(t,n)&&!o.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var i={};(()=>{"use strict";o.r(i),o.d(i,{default:()=>f});let e=n(7294);var t=o.n(e),r=o(942),a=o.n(r),s=o(365),l=["className","type"],c=["className"];function d(){return(d=Object.assign?Object.assign.bind():function(e){for(var t=1;te.length)&&(t=e.length);for(var n=0,r=Array(t);ne},K=H.className,q=H.type,J=h(H,l),Q=A.className,Y=h(A,c);return t().createElement(t().Fragment,null,t().createElement("div",d({"data-testid":"container",className:a()("vi__container",S.container,Q),onClick:function(){return W.current.focus()}},Y),t().createElement("input",d({"aria-label":"verification input",spellCheck:!1,value:U(),onChange:function(e){var t=e.target.value.replace(/\s/g,"");RegExp("^[".concat(v,"]{0,").concat(x,"}$")).test(t)&&(null==O||O(t),E(t),t.length===x&&(null==N||N(t)))},ref:function(e){W.current=e,"function"==typeof r?r(e):r&&(r.current=e)},className:a()("vi",K),onKeyDown:function(e){["ArrowLeft","ArrowRight","ArrowUp","ArrowDown"].includes(e.key)&&e.preventDefault()},onFocus:function(){R(!0),null==Z||Z()},onBlur:function(){R(!1),null==F||F()},onSelect:function(e){var t=e.target.value;e.target.setSelectionRange(t.length,t.length)},type:b?"password":q},J)),((function(e){if(Array.isArray(e))return C(e)})(z=Array(x))||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(z)||p(z)||function(){throw TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()).map(function(e,n){return t().createElement("div",{className:a()("vi__character",S.character,{"vi__character--selected":X(n),"vi__character--inactive":$(n),"vi__character--filled":G(n)},X(n)&&S.characterSelected,$(n)&&S.characterInactive,G(n)&&S.characterFilled),onClick:B,id:"field-".concat(n),"data-testid":"character-".concat(n),key:n},b&&U()[n]?M:U()[n]||g)})),t().createElement("style",{dangerouslySetInnerHTML:{__html:s.A}}))});x.displayName="VerificationInput";let f=x})();var a=t;for(var s in i)a[s]=i[s];i.__esModule&&Object.defineProperty(a,"__esModule",{value:!0})})()}},function(e){e.O(0,[799,774,888,179],function(){return e(e.s=1464)}),_N_E=e.O()}]); \ No newline at end of file +(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[405],{1464:function(e,t,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/",function(){return n(1969)}])},250:function(e,t,n){"use strict";var r=n(5893);t.Z={project:{link:"https://github.com/andreaswilli/react-verification-input"},docsRepositoryBase:"https://github.com/andreaswilli/react-verification-input/tree/master/docs-src",useNextSeoProps:()=>({titleTemplate:"%s | react-verification-input"}),darkMode:!0,logo:(0,r.jsx)(r.Fragment,{children:(0,r.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"150px",viewBox:"0 0 670 214",fill:"none",children:[(0,r.jsx)("path",{d:"M624.697 24.5H617.071C616.709 24.5 616.467 24.8716 616.613 25.2021L655.015 112.085C655.413 112.986 655.413 114.014 655.015 114.915L616.613 201.798C616.467 202.128 616.709 202.5 617.071 202.5H624.697C624.895 202.5 625.075 202.383 625.155 202.202L664.271 113.702C664.328 113.573 664.328 113.427 664.271 113.298L625.155 24.7979C625.075 24.6168 624.895 24.5 624.697 24.5Z",fill:"#CA33FF",stroke:"#CA33FF",strokeWidth:"3"}),(0,r.jsx)("rect",{x:"503.5",y:"121.5",width:"87",height:"91",rx:"6.5",stroke:"#CA33FF",strokeWidth:"3"}),(0,r.jsx)("rect",{x:"509",y:"127",width:"76",height:"80",rx:"2",fill:"white"}),(0,r.jsx)("path",{d:"M533.92 152.841V149.091H560.102V152.841H549.124V184H544.897V152.841H533.92Z",fill:"black"}),(0,r.jsx)("rect",{x:"397.5",y:"121.5",width:"87",height:"91",rx:"6.5",stroke:"#CA33FF",strokeWidth:"3"}),(0,r.jsx)("rect",{x:"403",y:"127",width:"76",height:"80",rx:"2",fill:"white"}),(0,r.jsx)("path",{d:"M450.347 149.091H454.575V172.205C454.575 174.591 454.012 176.722 452.887 178.597C451.773 180.46 450.2 181.932 448.165 183.011C446.131 184.08 443.745 184.614 441.006 184.614C438.268 184.614 435.881 184.08 433.847 183.011C431.813 181.932 430.234 180.46 429.109 178.597C427.995 176.722 427.438 174.591 427.438 172.205V149.091H431.665V171.864C431.665 173.568 432.04 175.085 432.79 176.415C433.54 177.733 434.609 178.773 435.995 179.534C437.393 180.284 439.063 180.659 441.006 180.659C442.95 180.659 444.62 180.284 446.018 179.534C447.415 178.773 448.484 177.733 449.222 176.415C449.972 175.085 450.347 173.568 450.347 171.864V149.091Z",fill:"black"}),(0,r.jsx)("rect",{x:"291.5",y:"121.5",width:"87",height:"91",rx:"6.5",stroke:"#CA33FF",strokeWidth:"3"}),(0,r.jsx)("rect",{x:"297",y:"127",width:"76",height:"80",rx:"2",fill:"white"}),(0,r.jsx)("path",{d:"M323.993 184V149.091H335.788C338.527 149.091 340.766 149.585 342.504 150.574C344.254 151.551 345.55 152.875 346.391 154.545C347.232 156.216 347.652 158.08 347.652 160.136C347.652 162.193 347.232 164.062 346.391 165.744C345.561 167.426 344.277 168.767 342.538 169.767C340.8 170.756 338.572 171.25 335.857 171.25H327.402V167.5H335.72C337.595 167.5 339.101 167.176 340.237 166.528C341.374 165.881 342.197 165.006 342.709 163.903C343.232 162.79 343.493 161.534 343.493 160.136C343.493 158.739 343.232 157.489 342.709 156.386C342.197 155.284 341.368 154.42 340.22 153.795C339.072 153.159 337.55 152.841 335.652 152.841H328.22V184H323.993Z",fill:"black"}),(0,r.jsx)("rect",{x:"185.5",y:"121.5",width:"87",height:"91",rx:"6.5",stroke:"#CA33FF",strokeWidth:"3"}),(0,r.jsx)("rect",{x:"191",y:"127",width:"76",height:"80",rx:"2",fill:"white"}),(0,r.jsx)("path",{d:"M242.839 149.091V184H238.748L219.725 156.591H219.384V184H215.157V149.091H219.248L238.339 176.568H238.68V149.091H242.839Z",fill:"black"}),(0,r.jsx)("rect",{x:"79.5",y:"121.5",width:"87",height:"91",rx:"6.5",stroke:"#CA33FF",strokeWidth:"3"}),(0,r.jsx)("rect",{x:"85",y:"127",width:"76",height:"80",rx:"2",fill:"white"}),(0,r.jsx)("path",{d:"M125.103 149.091V184H120.876V149.091H125.103Z",fill:"black"}),(0,r.jsx)("path",{d:"M89.3182 13.1818L110.045 71.9545H110.864L131.591 13.1818H140.455L114.818 83H106.091L80.4545 13.1818H89.3182ZM167.318 84.0909C162.273 84.0909 157.92 82.9773 154.261 80.75C150.625 78.5 147.818 75.3636 145.841 71.3409C143.886 67.2955 142.909 62.5909 142.909 57.2273C142.909 51.8636 143.886 47.1364 145.841 43.0455C147.818 38.9318 150.568 35.7273 154.091 33.4318C157.636 31.1136 161.773 29.9545 166.5 29.9545C169.227 29.9545 171.92 30.4091 174.58 31.3182C177.239 32.2273 179.659 33.7045 181.841 35.75C184.023 37.7727 185.761 40.4545 187.057 43.7955C188.352 47.1364 189 51.25 189 56.1364V59.5455H148.636V52.5909H180.818C180.818 49.6364 180.227 47 179.045 44.6818C177.886 42.3636 176.227 40.5341 174.068 39.1932C171.932 37.8523 169.409 37.1818 166.5 37.1818C163.295 37.1818 160.523 37.9773 158.182 39.5682C155.864 41.1364 154.08 43.1818 152.83 45.7045C151.58 48.2273 150.955 50.9318 150.955 53.8182V58.4545C150.955 62.4091 151.636 65.7614 153 68.5114C154.386 71.2386 156.307 73.3182 158.761 74.75C161.216 76.1591 164.068 76.8636 167.318 76.8636C169.432 76.8636 171.341 76.5682 173.045 75.9773C174.773 75.3636 176.261 74.4545 177.511 73.25C178.761 72.0227 179.727 70.5 180.409 68.6818L188.182 70.8636C187.364 73.5 185.989 75.8182 184.057 77.8182C182.125 79.7955 179.739 81.3409 176.898 82.4545C174.057 83.5455 170.864 84.0909 167.318 84.0909ZM201.239 83V30.6364H209.011V38.5455H209.557C210.511 35.9545 212.239 33.8523 214.739 32.2386C217.239 30.625 220.057 29.8182 223.193 29.8182C223.784 29.8182 224.523 29.8295 225.409 29.8523C226.295 29.875 226.966 29.9091 227.42 29.9545V38.1364C227.148 38.0682 226.523 37.9659 225.545 37.8295C224.591 37.6705 223.58 37.5909 222.511 37.5909C219.966 37.5909 217.693 38.125 215.693 39.1932C213.716 40.2386 212.148 41.6932 210.989 43.5568C209.852 45.3977 209.284 47.5 209.284 49.8636V83H201.239ZM236.957 83V30.6364H245.003V83H236.957ZM241.048 21.9091C239.48 21.9091 238.128 21.375 236.991 20.3068C235.878 19.2386 235.321 17.9545 235.321 16.4545C235.321 14.9545 235.878 13.6705 236.991 12.6023C238.128 11.5341 239.48 11 241.048 11C242.616 11 243.957 11.5341 245.071 12.6023C246.207 13.6705 246.776 14.9545 246.776 16.4545C246.776 17.9545 246.207 19.2386 245.071 20.3068C243.957 21.375 242.616 21.9091 241.048 21.9091ZM283.057 30.6364V37.4545H254.83V30.6364H283.057ZM263.284 83V23.4091C263.284 20.4091 263.989 17.9091 265.398 15.9091C266.807 13.9091 268.636 12.4091 270.886 11.4091C273.136 10.4091 275.511 9.90909 278.011 9.90909C279.989 9.90909 281.602 10.0682 282.852 10.3864C284.102 10.7045 285.034 11 285.648 11.2727L283.33 18.2273C282.92 18.0909 282.352 17.9205 281.625 17.7159C280.92 17.5114 279.989 17.4091 278.83 17.4091C276.17 17.4091 274.25 18.0795 273.068 19.4205C271.909 20.7614 271.33 22.7273 271.33 25.3182V83H263.284ZM294.332 83V30.6364H302.378V83H294.332ZM298.423 21.9091C296.855 21.9091 295.503 21.375 294.366 20.3068C293.253 19.2386 292.696 17.9545 292.696 16.4545C292.696 14.9545 293.253 13.6705 294.366 12.6023C295.503 11.5341 296.855 11 298.423 11C299.991 11 301.332 11.5341 302.446 12.6023C303.582 13.6705 304.151 14.9545 304.151 16.4545C304.151 17.9545 303.582 19.2386 302.446 20.3068C301.332 21.375 299.991 21.9091 298.423 21.9091ZM338.386 84.0909C333.477 84.0909 329.25 82.9318 325.705 80.6136C322.159 78.2955 319.432 75.1023 317.523 71.0341C315.614 66.9659 314.659 62.3182 314.659 57.0909C314.659 51.7727 315.636 47.0795 317.591 43.0114C319.568 38.9205 322.318 35.7273 325.841 33.4318C329.386 31.1136 333.523 29.9545 338.25 29.9545C341.932 29.9545 345.25 30.6364 348.205 32C351.159 33.3636 353.58 35.2727 355.466 37.7273C357.352 40.1818 358.523 43.0455 358.977 46.3182H350.932C350.318 43.9318 348.955 41.8182 346.841 39.9773C344.75 38.1136 341.932 37.1818 338.386 37.1818C335.25 37.1818 332.5 38 330.136 39.6364C327.795 41.25 325.966 43.5341 324.648 46.4886C323.352 49.4205 322.705 52.8636 322.705 56.8182C322.705 60.8636 323.341 64.3864 324.614 67.3864C325.909 70.3864 327.727 72.7159 330.068 74.375C332.432 76.0341 335.205 76.8636 338.386 76.8636C340.477 76.8636 342.375 76.5 344.08 75.7727C345.784 75.0455 347.227 74 348.409 72.6364C349.591 71.2727 350.432 69.6364 350.932 67.7273H358.977C358.523 70.8182 357.398 73.6023 355.602 76.0795C353.83 78.5341 351.477 80.4886 348.545 81.9432C345.636 83.375 342.25 84.0909 338.386 84.0909ZM386.148 84.2273C382.83 84.2273 379.818 83.6023 377.114 82.3523C374.409 81.0795 372.261 79.25 370.67 76.8636C369.08 74.4545 368.284 71.5455 368.284 68.1364C368.284 65.1364 368.875 62.7045 370.057 60.8409C371.239 58.9545 372.818 57.4773 374.795 56.4091C376.773 55.3409 378.955 54.5455 381.341 54.0227C383.75 53.4773 386.17 53.0455 388.602 52.7273C391.784 52.3182 394.364 52.0114 396.341 51.8068C398.341 51.5795 399.795 51.2045 400.705 50.6818C401.636 50.1591 402.102 49.25 402.102 47.9545V47.6818C402.102 44.3182 401.182 41.7045 399.341 39.8409C397.523 37.9773 394.761 37.0455 391.057 37.0455C387.216 37.0455 384.205 37.8864 382.023 39.5682C379.841 41.25 378.307 43.0455 377.42 44.9545L369.784 42.2273C371.148 39.0455 372.966 36.5682 375.239 34.7955C377.534 33 380.034 31.75 382.739 31.0455C385.466 30.3182 388.148 29.9545 390.784 29.9545C392.466 29.9545 394.398 30.1591 396.58 30.5682C398.784 30.9545 400.909 31.7614 402.955 32.9886C405.023 34.2159 406.739 36.0682 408.102 38.5455C409.466 41.0227 410.148 44.3409 410.148 48.5V83H402.102V75.9091H401.693C401.148 77.0455 400.239 78.2614 398.966 79.5568C397.693 80.8523 396 81.9545 393.886 82.8636C391.773 83.7727 389.193 84.2273 386.148 84.2273ZM387.375 77C390.557 77 393.239 76.375 395.42 75.125C397.625 73.875 399.284 72.2614 400.398 70.2841C401.534 68.3068 402.102 66.2273 402.102 64.0455V56.6818C401.761 57.0909 401.011 57.4659 399.852 57.8068C398.716 58.125 397.398 58.4091 395.898 58.6591C394.42 58.8864 392.977 59.0909 391.568 59.2727C390.182 59.4318 389.057 59.5682 388.193 59.6818C386.102 59.9545 384.148 60.3977 382.33 61.0114C380.534 61.6023 379.08 62.5 377.966 63.7045C376.875 64.8864 376.33 66.5 376.33 68.5455C376.33 71.3409 377.364 73.4545 379.432 74.8864C381.523 76.2955 384.17 77 387.375 77ZM447.605 30.6364V37.4545H420.469V30.6364H447.605ZM428.378 18.0909H436.423V68C436.423 70.2727 436.753 71.9773 437.412 73.1136C438.094 74.2273 438.957 74.9773 440.003 75.3636C441.071 75.7273 442.196 75.9091 443.378 75.9091C444.264 75.9091 444.991 75.8636 445.56 75.7727C446.128 75.6591 446.582 75.5682 446.923 75.5L448.56 82.7273C448.014 82.9318 447.253 83.1364 446.276 83.3409C445.298 83.5682 444.06 83.6818 442.56 83.6818C440.287 83.6818 438.06 83.1932 435.878 82.2159C433.719 81.2386 431.923 79.75 430.491 77.75C429.082 75.75 428.378 73.2273 428.378 70.1818V18.0909ZM459.707 83V30.6364H467.753V83H459.707ZM463.798 21.9091C462.23 21.9091 460.878 21.375 459.741 20.3068C458.628 19.2386 458.071 17.9545 458.071 16.4545C458.071 14.9545 458.628 13.6705 459.741 12.6023C460.878 11.5341 462.23 11 463.798 11C465.366 11 466.707 11.5341 467.821 12.6023C468.957 13.6705 469.526 14.9545 469.526 16.4545C469.526 17.9545 468.957 19.2386 467.821 20.3068C466.707 21.375 465.366 21.9091 463.798 21.9091ZM503.761 84.0909C499.034 84.0909 494.886 82.9659 491.318 80.7159C487.773 78.4659 485 75.3182 483 71.2727C481.023 67.2273 480.034 62.5 480.034 57.0909C480.034 51.6364 481.023 46.875 483 42.8068C485 38.7386 487.773 35.5795 491.318 33.3295C494.886 31.0795 499.034 29.9545 503.761 29.9545C508.489 29.9545 512.625 31.0795 516.17 33.3295C519.739 35.5795 522.511 38.7386 524.489 42.8068C526.489 46.875 527.489 51.6364 527.489 57.0909C527.489 62.5 526.489 67.2273 524.489 71.2727C522.511 75.3182 519.739 78.4659 516.17 80.7159C512.625 82.9659 508.489 84.0909 503.761 84.0909ZM503.761 76.8636C507.352 76.8636 510.307 75.9432 512.625 74.1023C514.943 72.2614 516.659 69.8409 517.773 66.8409C518.886 63.8409 519.443 60.5909 519.443 57.0909C519.443 53.5909 518.886 50.3295 517.773 47.3068C516.659 44.2841 514.943 41.8409 512.625 39.9773C510.307 38.1136 507.352 37.1818 503.761 37.1818C500.17 37.1818 497.216 38.1136 494.898 39.9773C492.58 41.8409 490.864 44.2841 489.75 47.3068C488.636 50.3295 488.08 53.5909 488.08 57.0909C488.08 60.5909 488.636 63.8409 489.75 66.8409C490.864 69.8409 492.58 72.2614 494.898 74.1023C497.216 75.9432 500.17 76.8636 503.761 76.8636ZM547.815 51.5V83H539.77V30.6364H547.543V38.8182H548.224C549.452 36.1591 551.315 34.0227 553.815 32.4091C556.315 30.7727 559.543 29.9545 563.497 29.9545C567.043 29.9545 570.145 30.6818 572.804 32.1364C575.463 33.5682 577.531 35.75 579.009 38.6818C580.486 41.5909 581.224 45.2727 581.224 49.7273V83H573.179V50.2727C573.179 46.1591 572.111 42.9545 569.974 40.6591C567.838 38.3409 564.906 37.1818 561.179 37.1818C558.611 37.1818 556.315 37.7386 554.293 38.8523C552.293 39.9659 550.713 41.5909 549.554 43.7273C548.395 45.8636 547.815 48.4545 547.815 51.5Z",fill:"#CA33FF"}),(0,r.jsx)("path",{d:"M45.3027 24.5H52.9294C53.2908 24.5 53.5328 24.8716 53.3867 25.2021L14.9854 112.085C14.5871 112.986 14.5871 114.014 14.9854 114.915L53.3867 201.798C53.5328 202.128 53.2908 202.5 52.9294 202.5H45.3027C45.1047 202.5 44.9254 202.383 44.8453 202.202L5.72932 113.702C5.67242 113.573 5.67242 113.427 5.72932 113.298L44.8453 24.7979C44.9254 24.6168 45.1047 24.5 45.3027 24.5Z",fill:"#CA33FF",stroke:"#CA33FF",strokeWidth:"3"})]})}),head:(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("meta",{name:"viewport",content:"width=device-width, initial-scale=1.0"}),(0,r.jsx)("meta",{property:"og:title",content:"react-verification-input"}),(0,r.jsx)("meta",{property:"og:description",content:"Customizable, masked input for React."})]})}},1969:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return d.Z}});var r=n(5893),o=n(4526),i=n(7928),a=n(250);n(5513);var s=n(1151);n(5675);var l=n(254),c=n.n(l),d=n(2243);function h(e){let t=Object.assign({h1:"h1",h2:"h2",p:"p",pre:"pre",code:"code",span:"span"},(0,s.ah)(),e.components);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h1,{children:"Demo"}),"\n",(0,r.jsx)(t.h2,{id:"default",children:"Default"}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(c(),{}),"\n",(0,r.jsx)(t.p,{children:"Default configuration without specifying any props."}),"\n",(0,r.jsx)(t.pre,{"data-language":"jsx","data-theme":"default",hasCopyCode:!0,children:(0,r.jsx)(t.code,{"data-language":"jsx","data-theme":"default",children:(0,r.jsxs)(t.span,{className:"line",children:[(0,r.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-token-constant)"},children:"VerificationInput"}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" />"})]})})}),"\n",(0,r.jsx)(t.h2,{id:"numbers-only",children:"Numbers only"}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(c(),{validChars:"0-9",inputProps:{inputMode:"numeric"}}),"\n",(0,r.jsx)(t.p,{children:"Accept only numbers and use numpad on mobile devices."}),"\n",(0,r.jsx)(t.pre,{"data-language":"jsx","data-theme":"default",hasCopyCode:!0,children:(0,r.jsx)(t.code,{"data-language":"jsx","data-theme":"default",children:(0,r.jsxs)(t.span,{className:"line",children:[(0,r.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-token-constant)"},children:"VerificationInput"}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-token-function)"},children:"validChars"}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"0-9"'}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-token-function)"},children:"inputProps"}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"{{ inputMode"}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"numeric"'}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" }} />"})]})})}),"\n",(0,r.jsx)(t.h2,{id:"password-mode",children:"Password mode"}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(c(),{passwordMode:!0}),"\n",(0,r.jsxs)(t.p,{children:["Hide the input value. This will also set the input type as ",(0,r.jsx)(t.code,{children:"password"}),"."]}),"\n",(0,r.jsx)(t.pre,{"data-language":"jsx","data-theme":"default",hasCopyCode:!0,children:(0,r.jsx)(t.code,{"data-language":"jsx","data-theme":"default",children:(0,r.jsxs)(t.span,{className:"line",children:[(0,r.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-token-constant)"},children:"VerificationInput"}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-token-function)"},children:"passwordMode"}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"{"}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-token-constant)"},children:"true"}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"} />"})]})})}),"\n",(0,r.jsx)(t.h2,{id:"custom-length",children:"Custom length"}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(c(),{length:5}),"\n",(0,r.jsx)(t.p,{children:"Configure the input to accept 5 digits."}),"\n",(0,r.jsx)(t.pre,{"data-language":"jsx","data-theme":"default",hasCopyCode:!0,children:(0,r.jsx)(t.code,{"data-language":"jsx","data-theme":"default",children:(0,r.jsxs)(t.span,{className:"line",children:[(0,r.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-token-constant)"},children:"VerificationInput"}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-token-function)"},children:"length"}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"{"}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-token-constant)"},children:"5"}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"} />"})]})})}),"\n",(0,r.jsx)(t.h2,{id:"custom-placeholder",children:"Custom placeholder"}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(c(),{placeholder:"_"}),"\n",(0,r.jsx)(t.p,{children:"Use any character as placeholder (empty string for no placeholder)."}),"\n",(0,r.jsx)(t.pre,{"data-language":"jsx","data-theme":"default",hasCopyCode:!0,children:(0,r.jsx)(t.code,{"data-language":"jsx","data-theme":"default",children:(0,r.jsxs)(t.span,{className:"line",children:[(0,r.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-token-constant)"},children:"VerificationInput"}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-token-function)"},children:"placeholder"}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"_"'}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" />"})]})})}),"\n",(0,r.jsx)(t.h2,{id:"autofill-otp-ios",children:"Autofill OTP (iOS)"}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(c(),{inputProps:{autoComplete:"one-time-code"}}),"\n",(0,r.jsxs)(t.p,{children:["Let iOS read OTP codes from text message notifications (see ",(0,r.jsx)("a",{href:"https://developer.apple.com/documentation/security/password_autofill/enabling_password_autofill_on_an_html_input_element",target:"_blank",children:"docs"}),")."]}),"\n",(0,r.jsx)(i.UW,{children:(0,r.jsxs)(t.p,{children:["In order to test this, you need to send a text message containing e.g. ",(0,r.jsx)(t.code,{children:"Code: 123456"})," to your phone."]})}),"\n",(0,r.jsx)(t.pre,{"data-language":"jsx","data-theme":"default",hasCopyCode:!0,children:(0,r.jsx)(t.code,{"data-language":"jsx","data-theme":"default",children:(0,r.jsxs)(t.span,{className:"line",children:[(0,r.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-token-constant)"},children:"VerificationInput"}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-token-function)"},children:"inputProps"}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"{{ autoComplete"}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"one-time-code"'}),(0,r.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" }} />"})]})})})]})}e=n.hmd(e),(0,o.j)({pageNextRoute:"/",pageOpts:{filePath:"pages/index.mdx",route:"/",frontMatter:{title:"Demo"},pageMap:[{kind:"MdxPage",name:"API",route:"/API",frontMatter:{title:"API"}},{kind:"Meta",data:{index:"Demo",API:"API",styling:"Styling",migration:"Migration Guide"}},{kind:"MdxPage",name:"index",route:"/",frontMatter:{title:"Demo"}},{kind:"Folder",name:"migration",route:"/migration",children:[{kind:"MdxPage",name:"v2",route:"/migration/v2",frontMatter:{title:"Migrating to Version 2"}},{kind:"MdxPage",name:"v3",route:"/migration/v3",frontMatter:{title:"Migrating to Version 3"}}]},{kind:"MdxPage",name:"styling",route:"/styling",frontMatter:{title:"Styling"}}],headings:[{depth:1,value:"Demo",id:"demo"},{depth:2,value:"Default",id:"default"},{depth:2,value:"Numbers only",id:"numbers-only"},{depth:2,value:"Password mode",id:"password-mode"},{depth:2,value:"Custom length",id:"custom-length"},{depth:2,value:"Custom placeholder",id:"custom-placeholder"},{depth:2,value:"Autofill OTP (iOS)",id:"autofill-otp-ios"}],timestamp:1677807991e3,flexsearch:{codeblocks:!0},title:"Demo"},nextraLayout:i.ZP,themeConfig:a.Z,Content:function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),e.components);return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(h,{...e})}):h(e)},hot:e.hot,pageOptsChecksum:void 0,dynamicMetaModules:[]})},254:function(e,t,n){/*! For license information please see index.js.LICENSE.txt */(()=>{var e={365:(e,t,n)=>{"use strict";n.d(t,{A:()=>s});var r=n(601),o=n.n(r),i=n(314),a=n.n(i)()(o());a.push([e.id,".vi {\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n box-sizing: border-box;\n position: absolute;\n color: transparent;\n background: transparent;\n caret-color: transparent;\n outline: none;\n border: 0 none transparent;\n}\n\n.vi:-webkit-autofill {\n opacity: 0;\n}\n\n.vi::-ms-reveal,\n.vi::-ms-clear {\n display: none;\n}\n\n.vi::selection {\n background: transparent;\n}\n\n/* :where() gives the styles specificity 0, which makes them overridable */\n:where(.vi__container) {\n position: relative;\n display: flex;\n gap: 8px;\n height: 50px;\n width: 300px;\n}\n\n:where(.vi__character) {\n height: 100%;\n flex-grow: 1;\n flex-basis: 0;\n text-align: center;\n font-size: 36px;\n line-height: 50px;\n color: black;\n background-color: white;\n border: 1px solid black;\n cursor: default;\n user-select: none;\n box-sizing: border-box;\n}\n\n:where(.vi__character--inactive) {\n color: dimgray;\n background-color: lightgray;\n}\n\n:where(.vi__character--selected) {\n outline: 2px solid cornflowerblue;\n color: cornflowerblue;\n}\n",""]);let s=a},314:e=>{"use strict";e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var n="",r=void 0!==t[5];return t[4]&&(n+="@supports (".concat(t[4],") {")),t[2]&&(n+="@media ".concat(t[2]," {")),r&&(n+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),n+=e(t),r&&(n+="}"),t[2]&&(n+="}"),t[4]&&(n+="}"),n}).join("")},t.i=function(e,n,r,o,i){"string"==typeof e&&(e=[[null,e,void 0]]);var a={};if(r)for(var s=0;s0?" ".concat(d[5]):""," {").concat(d[1],"}")),d[5]=i),n&&(d[2]&&(d[1]="@media ".concat(d[2]," {").concat(d[1],"}")),d[2]=n),o&&(d[4]?(d[1]="@supports (".concat(d[4],") {").concat(d[1],"}"),d[4]=o):d[4]="".concat(o)),t.push(d))}},t}},601:e=>{"use strict";e.exports=function(e){return e[1]}},942:(e,t)=>{var n;!function(){"use strict";var r={}.hasOwnProperty;function o(){for(var e="",t=0;t{var t=e&&e.__esModule?()=>e.default:()=>e;return o.d(t,{a:t}),t},o.d=(e,t)=>{for(var n in t)o.o(t,n)&&!o.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var i={};(()=>{"use strict";o.r(i),o.d(i,{default:()=>f});let e=n(7294);var t=o.n(e),r=o(942),a=o.n(r),s=o(365),l=["className","type"],c=["className"];function d(){return(d=Object.assign?Object.assign.bind():function(e){for(var t=1;te.length)&&(t=e.length);for(var n=0,r=Array(t);ne},K=H.className,q=H.type,J=h(H,l),Q=A.className,Y=h(A,c);return t().createElement(t().Fragment,null,t().createElement("div",d({"data-testid":"container",className:a()("vi__container",S.container,Q),onClick:function(){return W.current.focus()}},Y),t().createElement("input",d({"aria-label":"verification input",spellCheck:!1,value:U(),onChange:function(e){var t=e.target.value.replace(/\s/g,"");RegExp("^[".concat(v,"]{0,").concat(x,"}$")).test(t)&&(null==O||O(t),E(t),t.length===x&&(null==N||N(t)))},ref:function(e){W.current=e,"function"==typeof r?r(e):r&&(r.current=e)},className:a()("vi",K),onKeyDown:function(e){["ArrowLeft","ArrowRight","ArrowUp","ArrowDown"].includes(e.key)&&e.preventDefault()},onFocus:function(){R(!0),null==Z||Z()},onBlur:function(){R(!1),null==F||F()},onSelect:function(e){var t=e.target.value;e.target.setSelectionRange(t.length,t.length)},type:b?"password":q},J)),((function(e){if(Array.isArray(e))return C(e)})(z=Array(x))||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(z)||p(z)||function(){throw TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()).map(function(e,n){return t().createElement("div",{className:a()("vi__character",S.character,{"vi__character--selected":X(n),"vi__character--inactive":$(n),"vi__character--filled":G(n)},X(n)&&S.characterSelected,$(n)&&S.characterInactive,G(n)&&S.characterFilled),onClick:B,id:"field-".concat(n),"data-testid":"character-".concat(n),key:n},b&&U()[n]?M:U()[n]||g)})),t().createElement("style",{dangerouslySetInnerHTML:{__html:s.A}}))});x.displayName="VerificationInput";let f=x})();var a=t;for(var s in i)a[s]=i[s];i.__esModule&&Object.defineProperty(a,"__esModule",{value:!0})})()}},function(e){e.O(0,[799,774,888,179],function(){return e(e.s=1464)}),_N_E=e.O()}]); \ No newline at end of file diff --git a/docs/_next/static/chunks/pages/styling-01ccece82b8e14e9.js b/docs/_next/static/chunks/pages/styling-0d6fd8cb44171d2d.js similarity index 73% rename from docs/_next/static/chunks/pages/styling-01ccece82b8e14e9.js rename to docs/_next/static/chunks/pages/styling-0d6fd8cb44171d2d.js index 6382168..890699a 100644 --- a/docs/_next/static/chunks/pages/styling-01ccece82b8e14e9.js +++ b/docs/_next/static/chunks/pages/styling-0d6fd8cb44171d2d.js @@ -1 +1 @@ -(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3],{9724:function(e,n,r){(window.__NEXT_P=window.__NEXT_P||[]).push(["/styling",function(){return r(1375)}])},1375:function(e,n,r){"use strict";r.r(n),r.d(n,{default:function(){return x.Z}});var s=r(5893),t=r(4526),o=r(7928),l=r(250);r(5513);var i=r(1151);r(5675);var a=r(254),c=r.n(a),h=r(202),d=r(7870),x=r(2243);function p(e){let n=Object.assign({h1:"h1",h2:"h2",pre:"pre",code:"code",span:"span"},(0,i.ah)(),e.components);return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.h1,{children:"Styling"}),"\n",(0,s.jsx)(d.Z,{markdown:h.Z,type:"h3",name:"Custom Styling",removeHeading:!0}),"\n",(0,s.jsx)(d.Z,{markdown:h.Z,type:"h4",name:"Component Structure",removeHeading:!0}),"\n",(0,s.jsx)(n.h2,{id:"example",children:"Example"}),"\n",(0,s.jsx)("br",{}),"\n",(0,s.jsx)(c(),{length:5,classNames:{character:"character"}}),"\n",(0,s.jsx)(n.pre,{"data-language":"css","data-theme":"default",children:(0,s.jsxs)(n.code,{"data-language":"css","data-theme":"default",children:[(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".character"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"border"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"none"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"font-size"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"20"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"px"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"border-radius"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"8"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"px"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsx)(n.span,{className:"line",children:" "}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:"/* light theme */"})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"color"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"#272729"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"background-color"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"#f6f5fa"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"box-shadow"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"0 2"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"px"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" 0 #e4e2f5"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsx)(n.span,{className:"line",children:" "}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:"/* dark theme */"})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"color"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"#fff"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"background-color"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"#222"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"box-shadow"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"0 2"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"px"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" 0 #444"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsx)(n.span,{className:"line",children:(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})}),"\n",(0,s.jsx)(n.h2,{id:"with-cursor-caret",children:"With Cursor (Caret)"}),"\n",(0,s.jsx)("br",{}),"\n",(0,s.jsx)(c(),{classNames:{character:"cursor_character",characterSelected:"cursor_character--selected",characterFilled:"cursor_character--filled"}}),"\n",(0,s.jsx)(n.pre,{"data-language":"css","data-theme":"default",children:(0,s.jsxs)(n.code,{"data-language":"css","data-theme":"default",children:[(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".character--selected"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"position"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"relative"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsx)(n.span,{className:"line",children:(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:"}"})}),"\n",(0,s.jsx)(n.span,{className:"line",children:" "}),"\n",(0,s.jsx)(n.span,{className:"line",children:(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:"/* optionally hide placeholder (in case it overlaps the cursor) */"})}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".character--selected:not"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".character--filled"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:") {"})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"color"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"transparent"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsx)(n.span,{className:"line",children:(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:"}"})}),"\n",(0,s.jsx)(n.span,{className:"line",children:" "}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".character--selected:not"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".character--filled"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:")"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"::after"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"content"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:'""'}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"width"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"px"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"height"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"25"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"px"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"background-color"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"#333"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"display"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"block"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"position"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"absolute"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"top"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"50"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"%"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"left"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"50"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"%"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"transform"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"translate"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"(-50"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"%"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" -50"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"%"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:")"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"animation"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"blink 1"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"s"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" infinite step-end"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsx)(n.span,{className:"line",children:(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:"}"})}),"\n",(0,s.jsx)(n.span,{className:"line",children:" "}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"@keyframes"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" blink {"})]}),"\n",(0,s.jsx)(n.span,{className:"line",children:(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" 0% {"})}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"opacity"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsx)(n.span,{className:"line",children:(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" }"})}),"\n",(0,s.jsx)(n.span,{className:"line",children:(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" 50% {"})}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"opacity"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"0"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsx)(n.span,{className:"line",children:(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" }"})}),"\n",(0,s.jsx)(n.span,{className:"line",children:(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})})]})}e=r.hmd(e),(0,t.j)({pageNextRoute:"/styling",pageOpts:{filePath:"pages/styling.mdx",route:"/styling",frontMatter:{title:"Styling"},pageMap:[{kind:"MdxPage",name:"API",route:"/API",frontMatter:{title:"API"}},{kind:"Meta",data:{index:"Demo",API:"API",styling:"Styling",migration:"Migration Guide"}},{kind:"MdxPage",name:"index",route:"/",frontMatter:{title:"Demo"}},{kind:"Folder",name:"migration",route:"/migration",children:[{kind:"Meta",data:{v4:"Migrating to Version 4",v3:"Migrating to Version 3",v2:"Migrating to Version 2"}},{kind:"MdxPage",name:"v2",route:"/migration/v2",frontMatter:{title:"Migrating to Version 2"}},{kind:"MdxPage",name:"v3",route:"/migration/v3",frontMatter:{title:"Migrating to Version 3"}},{kind:"MdxPage",name:"v4",route:"/migration/v4",frontMatter:{title:"Migrating to Version 4"}}]},{kind:"MdxPage",name:"styling",route:"/styling",frontMatter:{title:"Styling"}}],headings:[{depth:1,value:"Styling",id:"styling"},{depth:2,value:"Example",id:"example"},{depth:2,value:"With Cursor (Caret)",id:"with-cursor-caret"}],timestamp:1674338328e3,flexsearch:{codeblocks:!0},title:"Styling"},nextraLayout:o.ZP,themeConfig:l.Z,Content:function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:n}=Object.assign({},(0,i.ah)(),e.components);return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(p,{...e})}):p(e)},hot:e.hot,pageOptsChecksum:void 0,dynamicMetaModules:[]})},254:function(e,n,r){/*! For license information please see index.js.LICENSE.txt */(()=>{var e={365:(e,n,r)=>{"use strict";r.d(n,{A:()=>i});var s=r(601),t=r.n(s),o=r(314),l=r.n(o)()(t());l.push([e.id,".vi {\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n box-sizing: border-box;\n position: absolute;\n color: transparent;\n background: transparent;\n caret-color: transparent;\n outline: none;\n border: 0 none transparent;\n opacity: 0;\n}\n\n.vi::-ms-reveal,\n.vi::-ms-clear {\n display: none;\n}\n\n.vi::selection {\n background: transparent;\n}\n\n/* :where() gives the styles specificity 0, which makes them overridable */\n:where(.vi__container) {\n position: relative;\n display: flex;\n gap: 8px;\n height: 50px;\n width: 300px;\n}\n\n:where(.vi__character) {\n height: 100%;\n flex-grow: 1;\n flex-basis: 0;\n text-align: center;\n font-size: 36px;\n line-height: 50px;\n color: black;\n background-color: white;\n border: 1px solid black;\n cursor: default;\n user-select: none;\n box-sizing: border-box;\n}\n\n:where(.vi__character--inactive) {\n color: dimgray;\n background-color: lightgray;\n}\n\n:where(.vi__character--selected) {\n outline: 2px solid cornflowerblue;\n color: cornflowerblue;\n}\n",""]);let i=l},314:e=>{"use strict";e.exports=function(e){var n=[];return n.toString=function(){return this.map(function(n){var r="",s=void 0!==n[5];return n[4]&&(r+="@supports (".concat(n[4],") {")),n[2]&&(r+="@media ".concat(n[2]," {")),s&&(r+="@layer".concat(n[5].length>0?" ".concat(n[5]):""," {")),r+=e(n),s&&(r+="}"),n[2]&&(r+="}"),n[4]&&(r+="}"),r}).join("")},n.i=function(e,r,s,t,o){"string"==typeof e&&(e=[[null,e,void 0]]);var l={};if(s)for(var i=0;i0?" ".concat(h[5]):""," {").concat(h[1],"}")),h[5]=o),r&&(h[2]&&(h[1]="@media ".concat(h[2]," {").concat(h[1],"}")),h[2]=r),t&&(h[4]?(h[1]="@supports (".concat(h[4],") {").concat(h[1],"}"),h[4]=t):h[4]="".concat(t)),n.push(h))}},n}},601:e=>{"use strict";e.exports=function(e){return e[1]}},942:(e,n)=>{var r;!function(){"use strict";var s={}.hasOwnProperty;function t(){for(var e="",n=0;n{var n=e&&e.__esModule?()=>e.default:()=>e;return t.d(n,{a:n}),n},t.d=(e,n)=>{for(var r in n)t.o(n,r)&&!t.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:n[r]})},t.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n),t.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var o={};(()=>{"use strict";t.r(o),t.d(o,{default:()=>v});let e=r(7294);var n=t.n(e),s=t(942),l=t.n(s),i=t(365),a=["className","type"],c=["className"];function h(){return(h=Object.assign?Object.assign.bind():function(e){for(var n=1;ne.length)&&(n=e.length);for(var r=0,s=Array(n);re},K=M.className,q=M.type,J=d(M,a),Q=O.className,Y=d(O,c);return n().createElement(n().Fragment,null,n().createElement("div",h({"data-testid":"container",className:l()("vi__container",C.container,Q),onClick:function(){return L.current.focus()}},Y),n().createElement("input",h({"aria-label":"verification input",spellCheck:!1,value:W(),onChange:function(e){var n=e.target.value.replace(/\s/g,"");RegExp("^[".concat(j,"]{0,").concat(y,"}$")).test(n)&&(null==E||E(n),R(n),n.length===y&&(null==Z||Z(n)))},ref:function(e){L.current=e,"function"==typeof s?s(e):s&&(s.current=e)},className:l()("vi",K),onKeyDown:function(e){["ArrowLeft","ArrowRight","ArrowUp","ArrowDown"].includes(e.key)&&e.preventDefault()},onFocus:function(){H(!0),null==I||I()},onBlur:function(){H(!1),null==F||F()},onSelect:function(e){var n=e.target.value;e.target.setSelectionRange(n.length,n.length)},type:w?"password":q},J)),((function(e){if(Array.isArray(e))return k(e)})(B=Array(y))||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(B)||p(B)||function(){throw TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()).map(function(e,r){return n().createElement("div",{className:l()("vi__character",C.character,{"vi__character--selected":X(r),"vi__character--inactive":$(r),"vi__character--filled":G(r)},X(r)&&C.characterSelected,$(r)&&C.characterInactive,G(r)&&C.characterFilled),onClick:U,id:"field-".concat(r),"data-testid":"character-".concat(r),key:r},w&&W()[r]?_:W()[r]||f)})),n().createElement("style",{dangerouslySetInnerHTML:{__html:i.A}}))});y.displayName="VerificationInput";let v=y})();var l=n;for(var i in o)l[i]=o[i];o.__esModule&&Object.defineProperty(l,"__esModule",{value:!0})})()}},function(e){e.O(0,[799,781,774,888,179],function(){return e(e.s=9724)}),_N_E=e.O()}]); \ No newline at end of file +(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3],{9724:function(e,n,r){(window.__NEXT_P=window.__NEXT_P||[]).push(["/styling",function(){return r(1375)}])},1375:function(e,n,r){"use strict";r.r(n),r.d(n,{default:function(){return x.Z}});var s=r(5893),t=r(4526),o=r(7928),l=r(250);r(5513);var i=r(1151);r(5675);var a=r(254),c=r.n(a),h=r(202),d=r(7870),x=r(2243);function p(e){let n=Object.assign({h1:"h1",h2:"h2",pre:"pre",code:"code",span:"span"},(0,i.ah)(),e.components);return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.h1,{children:"Styling"}),"\n",(0,s.jsx)(d.Z,{markdown:h.Z,type:"h3",name:"Custom Styling",removeHeading:!0}),"\n",(0,s.jsx)(d.Z,{markdown:h.Z,type:"h4",name:"Component Structure",removeHeading:!0}),"\n",(0,s.jsx)(n.h2,{id:"example",children:"Example"}),"\n",(0,s.jsx)("br",{}),"\n",(0,s.jsx)(c(),{length:5,classNames:{character:"character"}}),"\n",(0,s.jsx)(n.pre,{"data-language":"css","data-theme":"default",children:(0,s.jsxs)(n.code,{"data-language":"css","data-theme":"default",children:[(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".character"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"border"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"none"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"font-size"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"20"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"px"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"border-radius"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"8"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"px"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsx)(n.span,{className:"line",children:" "}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:"/* light theme */"})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"color"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"#272729"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"background-color"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"#f6f5fa"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"box-shadow"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"0 2"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"px"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" 0 #e4e2f5"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsx)(n.span,{className:"line",children:" "}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:"/* dark theme */"})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"color"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"#fff"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"background-color"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"#222"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"box-shadow"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"0 2"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"px"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" 0 #444"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsx)(n.span,{className:"line",children:(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})}),"\n",(0,s.jsx)(n.h2,{id:"with-cursor-caret",children:"With Cursor (Caret)"}),"\n",(0,s.jsx)("br",{}),"\n",(0,s.jsx)(c(),{classNames:{character:"cursor_character",characterSelected:"cursor_character--selected",characterFilled:"cursor_character--filled"}}),"\n",(0,s.jsx)(n.pre,{"data-language":"css","data-theme":"default",children:(0,s.jsxs)(n.code,{"data-language":"css","data-theme":"default",children:[(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".character--selected"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"position"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"relative"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsx)(n.span,{className:"line",children:(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:"}"})}),"\n",(0,s.jsx)(n.span,{className:"line",children:" "}),"\n",(0,s.jsx)(n.span,{className:"line",children:(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:"/* optionally hide placeholder (in case it overlaps the cursor) */"})}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".character--selected:not"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".character--filled"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:") {"})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"color"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"transparent"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsx)(n.span,{className:"line",children:(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:"}"})}),"\n",(0,s.jsx)(n.span,{className:"line",children:" "}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".character--selected:not"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".character--filled"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:")"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"::after"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"content"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:'""'}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"width"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"px"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"height"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"25"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"px"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"background-color"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"#333"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"display"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"block"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"position"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"absolute"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"top"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"50"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"%"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"left"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"50"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"%"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"transform"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"translate"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"(-50"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"%"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" -50"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"%"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:")"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"animation"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"blink 1"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"s"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" infinite step-end"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsx)(n.span,{className:"line",children:(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:"}"})}),"\n",(0,s.jsx)(n.span,{className:"line",children:" "}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"@keyframes"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" blink {"})]}),"\n",(0,s.jsx)(n.span,{className:"line",children:(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" 0% {"})}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"opacity"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsx)(n.span,{className:"line",children:(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" }"})}),"\n",(0,s.jsx)(n.span,{className:"line",children:(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" 50% {"})}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"opacity"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"0"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsx)(n.span,{className:"line",children:(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" }"})}),"\n",(0,s.jsx)(n.span,{className:"line",children:(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})})]})}e=r.hmd(e),(0,t.j)({pageNextRoute:"/styling",pageOpts:{filePath:"pages/styling.mdx",route:"/styling",frontMatter:{title:"Styling"},pageMap:[{kind:"MdxPage",name:"API",route:"/API",frontMatter:{title:"API"}},{kind:"Meta",data:{index:"Demo",API:"API",styling:"Styling",migration:"Migration Guide"}},{kind:"MdxPage",name:"index",route:"/",frontMatter:{title:"Demo"}},{kind:"Folder",name:"migration",route:"/migration",children:[{kind:"Meta",data:{v4:"Migrating to Version 4",v3:"Migrating to Version 3",v2:"Migrating to Version 2"}},{kind:"MdxPage",name:"v2",route:"/migration/v2",frontMatter:{title:"Migrating to Version 2"}},{kind:"MdxPage",name:"v3",route:"/migration/v3",frontMatter:{title:"Migrating to Version 3"}},{kind:"MdxPage",name:"v4",route:"/migration/v4",frontMatter:{title:"Migrating to Version 4"}}]},{kind:"MdxPage",name:"styling",route:"/styling",frontMatter:{title:"Styling"}}],headings:[{depth:1,value:"Styling",id:"styling"},{depth:2,value:"Example",id:"example"},{depth:2,value:"With Cursor (Caret)",id:"with-cursor-caret"}],timestamp:1674338328e3,flexsearch:{codeblocks:!0},title:"Styling"},nextraLayout:o.ZP,themeConfig:l.Z,Content:function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:n}=Object.assign({},(0,i.ah)(),e.components);return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(p,{...e})}):p(e)},hot:e.hot,pageOptsChecksum:void 0,dynamicMetaModules:[]})},254:function(e,n,r){/*! For license information please see index.js.LICENSE.txt */(()=>{var e={365:(e,n,r)=>{"use strict";r.d(n,{A:()=>i});var s=r(601),t=r.n(s),o=r(314),l=r.n(o)()(t());l.push([e.id,".vi {\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n box-sizing: border-box;\n position: absolute;\n color: transparent;\n background: transparent;\n caret-color: transparent;\n outline: none;\n border: 0 none transparent;\n}\n\n.vi:-webkit-autofill {\n opacity: 0;\n}\n\n.vi::-ms-reveal,\n.vi::-ms-clear {\n display: none;\n}\n\n.vi::selection {\n background: transparent;\n}\n\n/* :where() gives the styles specificity 0, which makes them overridable */\n:where(.vi__container) {\n position: relative;\n display: flex;\n gap: 8px;\n height: 50px;\n width: 300px;\n}\n\n:where(.vi__character) {\n height: 100%;\n flex-grow: 1;\n flex-basis: 0;\n text-align: center;\n font-size: 36px;\n line-height: 50px;\n color: black;\n background-color: white;\n border: 1px solid black;\n cursor: default;\n user-select: none;\n box-sizing: border-box;\n}\n\n:where(.vi__character--inactive) {\n color: dimgray;\n background-color: lightgray;\n}\n\n:where(.vi__character--selected) {\n outline: 2px solid cornflowerblue;\n color: cornflowerblue;\n}\n",""]);let i=l},314:e=>{"use strict";e.exports=function(e){var n=[];return n.toString=function(){return this.map(function(n){var r="",s=void 0!==n[5];return n[4]&&(r+="@supports (".concat(n[4],") {")),n[2]&&(r+="@media ".concat(n[2]," {")),s&&(r+="@layer".concat(n[5].length>0?" ".concat(n[5]):""," {")),r+=e(n),s&&(r+="}"),n[2]&&(r+="}"),n[4]&&(r+="}"),r}).join("")},n.i=function(e,r,s,t,o){"string"==typeof e&&(e=[[null,e,void 0]]);var l={};if(s)for(var i=0;i0?" ".concat(h[5]):""," {").concat(h[1],"}")),h[5]=o),r&&(h[2]&&(h[1]="@media ".concat(h[2]," {").concat(h[1],"}")),h[2]=r),t&&(h[4]?(h[1]="@supports (".concat(h[4],") {").concat(h[1],"}"),h[4]=t):h[4]="".concat(t)),n.push(h))}},n}},601:e=>{"use strict";e.exports=function(e){return e[1]}},942:(e,n)=>{var r;!function(){"use strict";var s={}.hasOwnProperty;function t(){for(var e="",n=0;n{var n=e&&e.__esModule?()=>e.default:()=>e;return t.d(n,{a:n}),n},t.d=(e,n)=>{for(var r in n)t.o(n,r)&&!t.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:n[r]})},t.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n),t.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var o={};(()=>{"use strict";t.r(o),t.d(o,{default:()=>v});let e=r(7294);var n=t.n(e),s=t(942),l=t.n(s),i=t(365),a=["className","type"],c=["className"];function h(){return(h=Object.assign?Object.assign.bind():function(e){for(var n=1;ne.length)&&(n=e.length);for(var r=0,s=Array(n);re},K=M.className,q=M.type,J=d(M,a),Q=O.className,Y=d(O,c);return n().createElement(n().Fragment,null,n().createElement("div",h({"data-testid":"container",className:l()("vi__container",C.container,Q),onClick:function(){return L.current.focus()}},Y),n().createElement("input",h({"aria-label":"verification input",spellCheck:!1,value:W(),onChange:function(e){var n=e.target.value.replace(/\s/g,"");RegExp("^[".concat(j,"]{0,").concat(y,"}$")).test(n)&&(null==E||E(n),R(n),n.length===y&&(null==Z||Z(n)))},ref:function(e){L.current=e,"function"==typeof s?s(e):s&&(s.current=e)},className:l()("vi",K),onKeyDown:function(e){["ArrowLeft","ArrowRight","ArrowUp","ArrowDown"].includes(e.key)&&e.preventDefault()},onFocus:function(){H(!0),null==I||I()},onBlur:function(){H(!1),null==F||F()},onSelect:function(e){var n=e.target.value;e.target.setSelectionRange(n.length,n.length)},type:w?"password":q},J)),((function(e){if(Array.isArray(e))return k(e)})(B=Array(y))||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(B)||p(B)||function(){throw TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()).map(function(e,r){return n().createElement("div",{className:l()("vi__character",C.character,{"vi__character--selected":X(r),"vi__character--inactive":$(r),"vi__character--filled":G(r)},X(r)&&C.characterSelected,$(r)&&C.characterInactive,G(r)&&C.characterFilled),onClick:U,id:"field-".concat(r),"data-testid":"character-".concat(r),key:r},w&&W()[r]?_:W()[r]||f)})),n().createElement("style",{dangerouslySetInnerHTML:{__html:i.A}}))});y.displayName="VerificationInput";let v=y})();var l=n;for(var i in o)l[i]=o[i];o.__esModule&&Object.defineProperty(l,"__esModule",{value:!0})})()}},function(e){e.O(0,[799,781,774,888,179],function(){return e(e.s=9724)}),_N_E=e.O()}]); \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index b444365..09a48c2 100644 --- a/docs/index.html +++ b/docs/index.html @@ -9,7 +9,7 @@ .dark { --nextra-primary-hue: 204deg; } -
Demo

Demo

+
Demo

Demo

Default


·
·
·
·
·
·

Let iOS read OTP codes from text message notifications (see docs).

💡

In order to test this, you need to send a text message containing e.g. Code: 123456 to your phone.

-
<VerificationInput inputProps={{ autoComplete: "one-time-code" }} />
API
MIT 2025 © Nextra.
\ No newline at end of file +
<VerificationInput inputProps={{ autoComplete: "one-time-code" }} />
API
MIT 2025 © Nextra.
\ No newline at end of file diff --git a/docs/migration/v2.html b/docs/migration/v2.html index 19f0626..b7461be 100644 --- a/docs/migration/v2.html +++ b/docs/migration/v2.html @@ -9,7 +9,7 @@ .dark { --nextra-primary-hue: 204deg; } -
Migration Guide
v2

Migrating to Version 2

+
Migration Guide
v2

Migrating to Version 2

This guide is aimed at developers wanting to update from v0.1.x to v2.x.x.

Check the following steps one by one and execute the ones that apply to your situation.

@@ -74,4 +74,4 @@

// v2 <VerificationInput ref={myRef} -/>

Stylingv3
MIT 2025 © Nextra.
\ No newline at end of file +/>
Stylingv3
MIT 2025 © Nextra.
\ No newline at end of file diff --git a/docs/migration/v3.html b/docs/migration/v3.html index 1e6fbf1..6e24dbc 100644 --- a/docs/migration/v3.html +++ b/docs/migration/v3.html @@ -9,7 +9,7 @@ .dark { --nextra-primary-hue: 204deg; } -
Migration Guide
v3

Migrating to Version 3

+
Migration Guide
v3

Migrating to Version 3

This guide is aimed at developers wanting to update from v2.x.x to v3.x.x.

Check the following steps one by one and execute the ones that apply to your situation.

@@ -44,4 +44,4 @@

classNames={{ character: "character" }} -/>

v2
MIT 2025 © Nextra.
\ No newline at end of file +/>
v2
MIT 2025 © Nextra.
\ No newline at end of file diff --git a/docs/migration/v4.html b/docs/migration/v4.html index ba95ee4..e11656f 100644 --- a/docs/migration/v4.html +++ b/docs/migration/v4.html @@ -9,7 +9,7 @@ .dark { --nextra-primary-hue: 204deg; } -
Migration Guide
Migrating to Version 4

Migrating to Version 4

+
Migration Guide
Migrating to Version 4

Migrating to Version 4

This guide is aimed at developers wanting to update from v3.x.x to v4.x.x.

Check the following steps one by one and execute the ones that apply to your situation.

@@ -26,4 +26,4 @@

<VerificationInput /> // v4 -<VerificationInput classNames={{ container: "custom-class-names" }} />

StylingMigrating to Version 3
MIT 2025 © Nextra.
\ No newline at end of file +<VerificationInput classNames={{ container: "custom-class-names" }} />
StylingMigrating to Version 3
MIT 2025 © Nextra.
\ No newline at end of file diff --git a/docs/styling.html b/docs/styling.html index 50a04b9..9d42aba 100644 --- a/docs/styling.html +++ b/docs/styling.html @@ -9,7 +9,7 @@ .dark { --nextra-primary-hue: 204deg; } -
Styling

Styling

+
\ No newline at end of file +}
APIMigrating to Version 4
MIT 2025 © Nextra.
\ No newline at end of file diff --git a/src/styles.css b/src/styles.css index 6733951..0274acb 100644 --- a/src/styles.css +++ b/src/styles.css @@ -10,6 +10,9 @@ caret-color: transparent; outline: none; border: 0 none transparent; +} + +.vi:-webkit-autofill { opacity: 0; }