react-input-pin-code - npm Package Compare versions

Comparing version 1.0.2 to 1.1.0

dist/components/PinInput.d.ts

 import React from 'react';
 import { PinInputProps } from '../types/PinInput';
+export declare const defaultProps: Partial<PinInputProps>;
 declare const PinInput: React.FC<PinInputProps>;
 export default PinInput;

dist/index.esm.js

@@ -74,19 +74,29 @@ import React, { useRef, useMemo, useEffect, useState } from 'react';
 };
-var hexToRgb = function (hex) {
-    if (hex === undefined)
+var colorParser = function (color) {
+    if (color === undefined)
         return null;
-    var shorthand = /^#?[a-fA-Z\d]{3}$/i.test(hex);
-    var result = shorthand
-        ? /^#?([a-f\d])([a-f\d])([a-f\d])$/i.exec(hex)
-        : /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-    return result
-        ? {
-            r: parseInt(shorthand ? result[1] + result[1] : result[1], 16),
-            g: parseInt(shorthand ? result[2] + result[2] : result[2], 16),
-            b: parseInt(shorthand ? result[3] + result[3] : result[3], 16),
-        }
-        : null;
+    var match = color.match(/^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/);
+    if (match) {
+        return {
+            r: Number(match[1]),
+            g: Number(match[2]),
+            b: Number(match[3]),
+        };
+    }
+    else {
+        var shorthand = /^#?[a-fA-Z\d]{3}$/i.test(color);
+        var result = shorthand
+            ? /^#?([a-f\d])([a-f\d])([a-f\d])$/i.exec(color)
+            : /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color);
+        return result
+            ? {
+                r: parseInt(shorthand ? result[1] + result[1] : result[1], 16),
+                g: parseInt(shorthand ? result[2] + result[2] : result[2], 16),
+                b: parseInt(shorthand ? result[3] + result[3] : result[3], 16),
+            }
+            : null;
+    }
 };
 
-var Input = styled.input(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  margin-right: 0.375rem;\n  outline: transparent solid 2px;\n  outline-offset: 2px;\n  font-size: ", ";\n  text-align: center;\n  border-radius: 0.375rem;\n  border-width: 1px;\n  border-style: solid;\n  border-color: #cccccc;\n  background-color: inherit;\n  box-sizing: border-box;\n  &:focus {\n    border-color: ", ";\n    box-shadow: ", " 0px\n      0px 0px 1px;\n  }\n  &:last-child {\n    margin-right: 0;\n  }\n  ", "\n  ", "\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n"], ["\n  width: ", ";\n  height: ", ";\n  margin-right: 0.375rem;\n  outline: transparent solid 2px;\n  outline-offset: 2px;\n  font-size: ", ";\n  text-align: center;\n  border-radius: 0.375rem;\n  border-width: 1px;\n  border-style: solid;\n  border-color: #cccccc;\n  background-color: inherit;\n  box-sizing: border-box;\n  &:focus {\n    border-color: ", ";\n    box-shadow: ", " 0px\n      0px 0px 1px;\n  }\n  &:last-child {\n    margin-right: 0;\n  }\n  ", "\n  ", "\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n"])), function (_a) {
+var Input = styled.input(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  margin-right: 0.375rem;\n  outline: transparent solid 2px;\n  outline-offset: 2px;\n  font-size: ", ";\n  text-align: center;\n  border-radius: 0.375rem;\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  background-color: inherit;\n  box-sizing: border-box;\n  &:focus {\n    border-color: ", ";\n    box-shadow: ", " 0px 0px 0px 1px;\n  }\n  &:last-child {\n    margin-right: 0;\n  }\n  ", "\n  ", "\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n"], ["\n  width: ", ";\n  height: ", ";\n  margin-right: 0.375rem;\n  outline: transparent solid 2px;\n  outline-offset: 2px;\n  font-size: ", ";\n  text-align: center;\n  border-radius: 0.375rem;\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  background-color: inherit;\n  box-sizing: border-box;\n  &:focus {\n    border-color: ", ";\n    box-shadow: ", " 0px 0px 0px 1px;\n  }\n  &:last-child {\n    margin-right: 0;\n  }\n  ", "\n  ", "\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n"])), function (_a) {
     var sizing = _a.sizing;
@@ -128,18 +138,33 @@ switch (sizing) {
 }, function (_a) {
+    var borderColor = _a.borderColor;
+    var rgb = colorParser(borderColor);
+    return rgb ? "rgb(".concat(rgb.r, ",").concat(rgb.g, ",").concat(rgb.b, ")") : defaultProps.borderColor;
+}, function (_a) {
     var focusBorderColor = _a.focusBorderColor;
-    return focusBorderColor || '#0d6efd';
+    var rgb = colorParser(focusBorderColor);
+    return rgb
+        ? "rgb(".concat(rgb.r, ",").concat(rgb.g, ",").concat(rgb.b, ")")
+        : defaultProps.focusBorderColor;
 }, function (_a) {
     var focusBorderColor = _a.focusBorderColor;
-    return focusBorderColor || '#0d6efd';
+    return focusBorderColor;
 }, function (_a) {
     var completed = _a.completed, showState = _a.showState, validBorderColor = _a.validBorderColor;
-    var rgb = hexToRgb(validBorderColor);
+    var rgb = colorParser(validBorderColor);
     return completed && showState
-        ? "&:valid {\n    border-color: ".concat(rgb ? "rgb(".concat(rgb.r, ", ").concat(rgb.g, ", ").concat(rgb.b, ")") : 'rgb(25, 135, 84)', ";\n    box-shadow: ").concat(rgb ? "rgb(".concat(rgb.r, ", ").concat(rgb.g, ", ").concat(rgb.b, ")") : 'rgb(25, 135, 84)', " 0px 0px 0px 1px;\n    background-color: ").concat(rgb ? "rgba(".concat(rgb.r, ", ").concat(rgb.g, ", ").concat(rgb.b, ", 0.1)") : 'rgba(25, 135, 84, 0.1)', ";\n  }")
+        ? "&:valid {\n    border-color: ".concat(rgb ? "rgb(".concat(rgb.r, ",").concat(rgb.g, ",").concat(rgb.b, ")") : defaultProps.validBorderColor, ";\n    box-shadow: ").concat(rgb ? "rgb(".concat(rgb.r, ",").concat(rgb.g, ",").concat(rgb.b, ")") : defaultProps.validBorderColor, " 0px 0px 0px 1px;\n    background-color: ").concat(rgb
+            ? "rgba(".concat(rgb.r, ",").concat(rgb.g, ",").concat(rgb.b, ",0.1)")
+            : defaultProps.validBorderColor
+                .replace('rgb', 'rgba')
+                .replace(')', ',0.1)'), ";\n  }")
         : '';
 }, function (_a) {
     var showState = _a.showState, errorBorderColor = _a.errorBorderColor;
-    var rgb = hexToRgb(errorBorderColor);
+    var rgb = colorParser(errorBorderColor);
     return showState
-        ? "&:invalid {\n    border-color: ".concat(rgb ? "rgb(".concat(rgb.r, ", ").concat(rgb.g, ", ").concat(rgb.b, ")") : 'rgb(220, 53, 69)', ";\n    box-shadow: ").concat(rgb ? "rgb(".concat(rgb.r, ", ").concat(rgb.g, ", ").concat(rgb.b, ")") : 'rgb(220, 53, 69)', " 0px 0px 0px 1px;\n    background-color: ").concat(rgb ? "rgba(".concat(rgb.r, ", ").concat(rgb.g, ", ").concat(rgb.b, ", 0.1)") : 'rgb(220, 53, 69, 0.1)', ";\n  }")
+        ? "&:invalid {\n    border-color: ".concat(rgb ? "rgb(".concat(rgb.r, ",").concat(rgb.g, ",").concat(rgb.b, ")") : defaultProps.errorBorderColor, ";\n    box-shadow: ").concat(rgb ? "rgb(".concat(rgb.r, ",").concat(rgb.g, ",").concat(rgb.b, ")") : defaultProps.errorBorderColor, " 0px 0px 0px 1px;\n    background-color: ").concat(rgb
+            ? "rgba(".concat(rgb.r, ",").concat(rgb.g, ",").concat(rgb.b, ",0.1)")
+            : defaultProps.errorBorderColor
+                .replace('rgb', 'rgba')
+                .replace(')', ',0.1)'), ";\n  }")
         : '';
@@ -155,3 +180,3 @@ });
 var PinInputField = function (_a) {
-    var index = _a.index, value = _a.value, values = _a.values, completed = _a.completed, type = _a.type, mask = _a.mask, size = _a.size, validate = _a.validate, format = _a.format, showState = _a.showState, autoFocus = _a.autoFocus, autoTab = _a.autoTab, ariaDescribedby = _a["aria-describedby"], ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], autoComplete = _a.autoComplete, disabled = _a.disabled, inputMode = _a.inputMode, id = _a.id, name = _a.name, placeholder = _a.placeholder, required = _a.required, inputStyle = _a.inputStyle, errorBorderColor = _a.errorBorderColor, focusBorderColor = _a.focusBorderColor, validBorderColor = _a.validBorderColor, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown;
+    var index = _a.index, value = _a.value, values = _a.values, completed = _a.completed, type = _a.type, mask = _a.mask, size = _a.size, validate = _a.validate, format = _a.format, showState = _a.showState, autoFocus = _a.autoFocus, autoTab = _a.autoTab, ariaDescribedby = _a["aria-describedby"], ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], autoComplete = _a.autoComplete, disabled = _a.disabled, inputMode = _a.inputMode, id = _a.id, name = _a.name, placeholder = _a.placeholder, required = _a.required, inputStyle = _a.inputStyle, borderColor = _a.borderColor, errorBorderColor = _a.errorBorderColor, focusBorderColor = _a.focusBorderColor, validBorderColor = _a.validBorderColor, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown;
     var inputRef = useRef();
@@ -254,3 +279,3 @@ var handleInputChange = function (e) {
     }, [autoFocus, index]);
-    return (React.createElement(Input, { ref: inputRef, type: mask ? 'password' : 'text', "aira-describedby": ariaDescribedby, "aria-disabled": disabled, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-required": required, autoComplete: autoComplete, disabled: disabled, name: name, id: id && "".concat(id, "-").concat(index), inputMode: inputMode || (type === 'number' ? 'numeric' : 'text'), required: required, placeholder: placeholder, pattern: pattern, value: value, onChange: handleInputChange, onKeyDown: handleKeyDown, onFocus: handleInputFocus, onBlur: handleInputBlur, completed: completed, showState: showState, sizing: size, style: inputStyle, errorBorderColor: errorBorderColor, focusBorderColor: focusBorderColor, validBorderColor: validBorderColor, "data-index": index }));
+    return (React.createElement(Input, { ref: inputRef, type: mask ? 'password' : 'text', "aira-describedby": ariaDescribedby, "aria-disabled": disabled, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-required": required, autoComplete: autoComplete, disabled: disabled, name: name, id: id && "".concat(id, "-").concat(index), inputMode: inputMode || (type === 'number' ? 'numeric' : 'text'), required: required, placeholder: placeholder, pattern: pattern, value: value, onChange: handleInputChange, onKeyDown: handleKeyDown, onFocus: handleInputFocus, onBlur: handleInputBlur, completed: completed, showState: showState, sizing: size, style: inputStyle, borderColor: borderColor, errorBorderColor: errorBorderColor, focusBorderColor: focusBorderColor, validBorderColor: validBorderColor, "data-index": index }));
 };
@@ -278,2 +303,19 @@ PinInputField.displayName = 'PinInputField';
 };
+var defaultProps = {
+    type: 'number',
+    mask: false,
+    showState: true,
+    size: 'md',
+    autoFocus: false,
+    autoTab: true,
+    borderColor: 'rgb(204,204,204)',
+    errorBorderColor: 'rgb(220,53,69)',
+    focusBorderColor: 'rgb(13,110,253)',
+    validBorderColor: 'rgb(25,135,84)',
+    containerStyle: {},
+    inputStyle: {},
+    autoComplete: 'off',
+    placeholder: 'o',
+    'aria-label': 'Please enter pin code',
+};
 var PinInput = function (props) {
@@ -297,15 +339,3 @@ var completed = useMemo(function () { return props.values.every(function (val) { return val; }); }, [props.values]);
 PinInput.propTypes = propTypes$1;
-PinInput.defaultProps = {
-    type: 'number',
-    mask: false,
-    showState: true,
-    size: 'md',
-    autoFocus: false,
-    autoTab: true,
-    containerStyle: {},
-    inputStyle: {},
-    autoComplete: 'off',
-    placeholder: 'o',
-    'aria-label': 'Please enter pin code',
-};
+PinInput.defaultProps = defaultProps;
 
@@ -312,0 +342,0 @@ var propTypes = {

dist/index.esm.min.js

@@ -1,2 +0,2 @@
-import e,{useRef as n,useMemo as r,useEffect as t,useState as o}from"react";import a from"prop-types";import i from"styled-components";
+import e,{useRef as r,useMemo as n,useEffect as o,useState as t}from"react";import a from"prop-types";import i from"styled-components";
 /*! *****************************************************************************
@@ -15,2 +15,2 @@ Copyright (c) Microsoft Corporation.
 PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */var c=function(){return c=Object.assign||function(e){for(var n,r=1,t=arguments.length;r<t;r++)for(var o in n=arguments[r])Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o]);return e},c.apply(this,arguments)};function l(e,n){return Object.defineProperty?Object.defineProperty(e,"raw",{value:n}):e.raw=n,e}var u,s,d=i.div(u||(u=l(["\n  display: flex;\n  align-items: center;\n"],["\n  display: flex;\n  align-items: center;\n"]))),p=function(e){var n;return Array.isArray(e)?(n=new RegExp(e.join("|")).toString()).slice(1,n.length-1):"string"==typeof e?(n=new RegExp(e.split("").join("|")).toString()).slice(1,n.length-1):e instanceof RegExp?(n=e.toString()).slice(1,n.length-1):void 0},f=function(e){if(void 0===e)return null;var n=/^#?[a-fA-Z\d]{3}$/i.test(e),r=n?/^#?([a-f\d])([a-f\d])([a-f\d])$/i.exec(e):/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return r?{r:parseInt(n?r[1]+r[1]:r[1],16),g:parseInt(n?r[2]+r[2]:r[2],16),b:parseInt(n?r[3]+r[3]:r[3],16)}:null},b=i.input(s||(s=l(["\n  width: ",";\n  height: ",";\n  margin-right: 0.375rem;\n  outline: transparent solid 2px;\n  outline-offset: 2px;\n  font-size: ",";\n  text-align: center;\n  border-radius: 0.375rem;\n  border-width: 1px;\n  border-style: solid;\n  border-color: #cccccc;\n  background-color: inherit;\n  box-sizing: border-box;\n  &:focus {\n    border-color: ",";\n    box-shadow: "," 0px\n      0px 0px 1px;\n  }\n  &:last-child {\n    margin-right: 0;\n  }\n  ","\n  ","\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n"],["\n  width: ",";\n  height: ",";\n  margin-right: 0.375rem;\n  outline: transparent solid 2px;\n  outline-offset: 2px;\n  font-size: ",";\n  text-align: center;\n  border-radius: 0.375rem;\n  border-width: 1px;\n  border-style: solid;\n  border-color: #cccccc;\n  background-color: inherit;\n  box-sizing: border-box;\n  &:focus {\n    border-color: ",";\n    box-shadow: "," 0px\n      0px 0px 1px;\n  }\n  &:last-child {\n    margin-right: 0;\n  }\n  ","\n  ","\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n"])),(function(e){switch(e.sizing){case"xs":return"1.5rem";case"sm":return"2rem";case"md":return"2.5rem";case"lg":return"3rem"}}),(function(e){switch(e.sizing){case"xs":return"1.5rem";case"sm":return"2rem";case"md":return"2.5rem";case"lg":return"3rem"}}),(function(e){switch(e.sizing){case"xs":return"0.75rem";case"sm":return"0.875rem";case"md":return"1rem";case"lg":return"1.125rem"}}),(function(e){return e.focusBorderColor||"#0d6efd"}),(function(e){return e.focusBorderColor||"#0d6efd"}),(function(e){var n=e.completed,r=e.showState,t=e.validBorderColor,o=f(t);return n&&r?"&:valid {\n    border-color: ".concat(o?"rgb(".concat(o.r,", ").concat(o.g,", ").concat(o.b,")"):"rgb(25, 135, 84)",";\n    box-shadow: ").concat(o?"rgb(".concat(o.r,", ").concat(o.g,", ").concat(o.b,")"):"rgb(25, 135, 84)"," 0px 0px 0px 1px;\n    background-color: ").concat(o?"rgba(".concat(o.r,", ").concat(o.g,", ").concat(o.b,", 0.1)"):"rgba(25, 135, 84, 0.1)",";\n  }"):""}),(function(e){var n=e.showState,r=e.errorBorderColor,t=f(r);return n?"&:invalid {\n    border-color: ".concat(t?"rgb(".concat(t.r,", ").concat(t.g,", ").concat(t.b,")"):"rgb(220, 53, 69)",";\n    box-shadow: ").concat(t?"rgb(".concat(t.r,", ").concat(t.g,", ").concat(t.b,")"):"rgb(220, 53, 69)"," 0px 0px 0px 1px;\n    background-color: ").concat(t?"rgba(".concat(t.r,", ").concat(t.g,", ").concat(t.b,", 0.1)"):"rgb(220, 53, 69, 0.1)",";\n  }"):""})),g={index:a.number,values:a.arrayOf(a.string),onChange:a.func},m=function(o){var a=o.index,i=o.value,c=o.values,l=o.completed,u=o.type,s=o.mask,d=o.size,f=o.validate,g=o.format,m=o.showState,y=o.autoFocus,h=o.autoTab,x=o["aria-describedby"],v=o["aria-label"],w=o["aria-labelledby"],O=o.autoComplete,S=o.disabled,C=o.inputMode,E=o.id,j=o.name,z=o.placeholder,B=o.required,P=o.inputStyle,T=o.errorBorderColor,k=o.focusBorderColor,I=o.validBorderColor,A=o.onChange,F=o.onBlur,R=o.onFocus,q=o.onKeyDown,M=n(),V=r((function(){return p(f)}),[f]);return t((function(){y&&0===a&&M.current.focus()}),[y,a]),e.createElement(b,{ref:M,type:s?"password":"text","aira-describedby":x,"aria-disabled":S,"aria-label":v,"aria-labelledby":w,"aria-required":B,autoComplete:O,disabled:S,name:j,id:E&&"".concat(E,"-").concat(a),inputMode:C||("number"===u?"numeric":"text"),required:B,placeholder:z,pattern:V,value:i,onChange:function(e){var n,r=c[a],t=e.target.value,o=function(e,n){for(var r=0,t=n.length,o=e.length;r<t;r++,o++)e[o]=n[r];return e}([],c);if(r?t.length>2?n=t.split(""):""===t?n="":r[0]===t[0]?n=t[1]:r[0]===t[1]&&(n=t[0]):n=t.length>1?t.split(""):t,A){var i="number"===u?/(^$)|(\d+)/:/.*/,l=void 0;if(g&&(n=Array.isArray(n)?n.map((function(e){return g(e)})):g(n)),Array.isArray(n)?(n.forEach((function(e,n){return o[a+n]=e})),l=n.every((function(e){return i.test(e)}))):(o[a]=n,l=i.test(n)),l){A(n,a,o);for(var s=M.current,d=0;d<n.length;d++)s=s.nextElementSibling;n&&h&&s instanceof HTMLInputElement&&s.focus()}}},onKeyDown:function(e){if("Backspace"===e.key&&h&&""===c[a]&&a>0){var n=M.current.previousElementSibling;n instanceof HTMLInputElement&&n.focus()}q&&q(e)},onFocus:function(e){e.target.placeholder="",R&&R(e)},onBlur:function(e){e.target.placeholder=z,F&&F(e)},completed:l,showState:m,sizing:d,style:P,errorBorderColor:T,focusBorderColor:k,validBorderColor:I,"data-index":a})};m.displayName="PinInputField",m.propTypes=g;var y={values:a.arrayOf(a.string).isRequired,type:a.oneOf(["number","text"]),mask:a.bool,validate:a.oneOfType([a.string,a.arrayOf(a.string),a.instanceOf(RegExp)]),format:a.func,showState:a.bool,size:a.oneOf(["xs","sm","md","lg"]),autoFocus:a.bool,autoTab:a.bool,containerStyle:a.object,inputStyle:a.object,onChange:a.func},h=function(n){var t=r((function(){return n.values.every((function(e){return e}))}),[n.values]);return t&&n.onComplete&&(n.validate?n.values.every((function(e){return new RegExp(p(n.validate)).test(e)}))&&n.onComplete(n.values):n.onComplete(n.values)),e.createElement(d,{style:n.containerStyle},n.values.map((function(r,o){return e.createElement(m,c({key:n.id?"".concat(n.id,"-").concat(o):o,index:o,value:r,completed:t},n))})))};h.displayName="PinInput",h.propTypes=y,h.defaultProps={type:"number",mask:!1,showState:!0,size:"md",autoFocus:!1,autoTab:!0,containerStyle:{},inputStyle:{},autoComplete:"off",placeholder:"o","aria-label":"Please enter pin code"};var x={length:a.number,initialValue:a.oneOfType([a.string,a.arrayOf(a.string)]),type:a.oneOf(["number","text"]),mask:a.bool,validate:a.oneOfType([a.string,a.arrayOf(a.string),a.instanceOf(RegExp)]),format:a.func,showState:a.bool,size:a.oneOf(["xs","sm","md","lg"]),autoFocus:a.bool,autoTab:a.bool,containerStyle:a.object,inputStyle:a.object,onChange:a.func},v=function(n){var r=n.length,t=n.initialValue,a=n.onChange,i=function(e,n){var r={};for(var t in e)Object.prototype.hasOwnProperty.call(e,t)&&n.indexOf(t)<0&&(r[t]=e[t]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(t=Object.getOwnPropertySymbols(e);o<t.length;o++)n.indexOf(t[o])<0&&Object.prototype.propertyIsEnumerable.call(e,t[o])&&(r[t[o]]=e[t[o]])}return r}(n,["length","initialValue","onChange"]),l=o(Array.from({length:r},(function(e,n){return t[n]||""}))),u=l[0],s=l[1];return e.createElement(h,c({values:u,onChange:function(e,n,r){s(r),a&&a(e,n,r)}},i))};v.displayName="StatefulPinInput",v.propTypes=x,v.defaultProps={length:4,initialValue:"",type:"number",mask:!1,showState:!0,size:"md",autoFocus:!1,autoTab:!0,containerStyle:{},inputStyle:{},autoComplete:"off",placeholder:"o","aria-label":"Please enter pin code"};export{h as PinInput,v as StatefulPinInput};
+***************************************************************************** */var l=function(){return l=Object.assign||function(e){for(var r,n=1,o=arguments.length;n<o;n++)for(var t in r=arguments[n])Object.prototype.hasOwnProperty.call(r,t)&&(e[t]=r[t]);return e},l.apply(this,arguments)};function c(e,r){return Object.defineProperty?Object.defineProperty(e,"raw",{value:r}):e.raw=r,e}var u,s,d=i.div(u||(u=c(["\n  display: flex;\n  align-items: center;\n"],["\n  display: flex;\n  align-items: center;\n"]))),p=function(e){var r;return Array.isArray(e)?(r=new RegExp(e.join("|")).toString()).slice(1,r.length-1):"string"==typeof e?(r=new RegExp(e.split("").join("|")).toString()).slice(1,r.length-1):e instanceof RegExp?(r=e.toString()).slice(1,r.length-1):void 0},b=function(e){if(void 0===e)return null;var r=e.match(/^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/);if(r)return{r:Number(r[1]),g:Number(r[2]),b:Number(r[3])};var n=/^#?[a-fA-Z\d]{3}$/i.test(e),o=n?/^#?([a-f\d])([a-f\d])([a-f\d])$/i.exec(e):/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return o?{r:parseInt(n?o[1]+o[1]:o[1],16),g:parseInt(n?o[2]+o[2]:o[2],16),b:parseInt(n?o[3]+o[3]:o[3],16)}:null},f=i.input(s||(s=c(["\n  width: ",";\n  height: ",";\n  margin-right: 0.375rem;\n  outline: transparent solid 2px;\n  outline-offset: 2px;\n  font-size: ",";\n  text-align: center;\n  border-radius: 0.375rem;\n  border-width: 1px;\n  border-style: solid;\n  border-color: ",";\n  background-color: inherit;\n  box-sizing: border-box;\n  &:focus {\n    border-color: ",";\n    box-shadow: "," 0px 0px 0px 1px;\n  }\n  &:last-child {\n    margin-right: 0;\n  }\n  ","\n  ","\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n"],["\n  width: ",";\n  height: ",";\n  margin-right: 0.375rem;\n  outline: transparent solid 2px;\n  outline-offset: 2px;\n  font-size: ",";\n  text-align: center;\n  border-radius: 0.375rem;\n  border-width: 1px;\n  border-style: solid;\n  border-color: ",";\n  background-color: inherit;\n  box-sizing: border-box;\n  &:focus {\n    border-color: ",";\n    box-shadow: "," 0px 0px 0px 1px;\n  }\n  &:last-child {\n    margin-right: 0;\n  }\n  ","\n  ","\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n"])),(function(e){switch(e.sizing){case"xs":return"1.5rem";case"sm":return"2rem";case"md":return"2.5rem";case"lg":return"3rem"}}),(function(e){switch(e.sizing){case"xs":return"1.5rem";case"sm":return"2rem";case"md":return"2.5rem";case"lg":return"3rem"}}),(function(e){switch(e.sizing){case"xs":return"0.75rem";case"sm":return"0.875rem";case"md":return"1rem";case"lg":return"1.125rem"}}),(function(e){var r=e.borderColor,n=b(r);return n?"rgb(".concat(n.r,",").concat(n.g,",").concat(n.b,")"):h.borderColor}),(function(e){var r=e.focusBorderColor,n=b(r);return n?"rgb(".concat(n.r,",").concat(n.g,",").concat(n.b,")"):h.focusBorderColor}),(function(e){return e.focusBorderColor}),(function(e){var r=e.completed,n=e.showState,o=e.validBorderColor,t=b(o);return r&&n?"&:valid {\n    border-color: ".concat(t?"rgb(".concat(t.r,",").concat(t.g,",").concat(t.b,")"):h.validBorderColor,";\n    box-shadow: ").concat(t?"rgb(".concat(t.r,",").concat(t.g,",").concat(t.b,")"):h.validBorderColor," 0px 0px 0px 1px;\n    background-color: ").concat(t?"rgba(".concat(t.r,",").concat(t.g,",").concat(t.b,",0.1)"):h.validBorderColor.replace("rgb","rgba").replace(")",",0.1)"),";\n  }"):""}),(function(e){var r=e.showState,n=e.errorBorderColor,o=b(n);return r?"&:invalid {\n    border-color: ".concat(o?"rgb(".concat(o.r,",").concat(o.g,",").concat(o.b,")"):h.errorBorderColor,";\n    box-shadow: ").concat(o?"rgb(".concat(o.r,",").concat(o.g,",").concat(o.b,")"):h.errorBorderColor," 0px 0px 0px 1px;\n    background-color: ").concat(o?"rgba(".concat(o.r,",").concat(o.g,",").concat(o.b,",0.1)"):h.errorBorderColor.replace("rgb","rgba").replace(")",",0.1)"),";\n  }"):""})),g={index:a.number,values:a.arrayOf(a.string),onChange:a.func},m=function(t){var a=t.index,i=t.value,l=t.values,c=t.completed,u=t.type,s=t.mask,d=t.size,b=t.validate,g=t.format,m=t.showState,y=t.autoFocus,h=t.autoTab,v=t["aria-describedby"],x=t["aria-label"],C=t["aria-labelledby"],w=t.autoComplete,O=t.disabled,S=t.inputMode,B=t.id,E=t.name,j=t.placeholder,z=t.required,P=t.inputStyle,T=t.borderColor,k=t.errorBorderColor,I=t.focusBorderColor,A=t.validBorderColor,F=t.onChange,R=t.onBlur,N=t.onFocus,$=t.onKeyDown,q=r(),M=n((function(){return p(b)}),[b]);return o((function(){y&&0===a&&q.current.focus()}),[y,a]),e.createElement(f,{ref:q,type:s?"password":"text","aira-describedby":v,"aria-disabled":O,"aria-label":x,"aria-labelledby":C,"aria-required":z,autoComplete:w,disabled:O,name:E,id:B&&"".concat(B,"-").concat(a),inputMode:S||("number"===u?"numeric":"text"),required:z,placeholder:j,pattern:M,value:i,onChange:function(e){var r,n=l[a],o=e.target.value,t=function(e,r){for(var n=0,o=r.length,t=e.length;n<o;n++,t++)e[t]=r[n];return e}([],l);if(n?o.length>2?r=o.split(""):""===o?r="":n[0]===o[0]?r=o[1]:n[0]===o[1]&&(r=o[0]):r=o.length>1?o.split(""):o,F){var i="number"===u?/(^$)|(\d+)/:/.*/,c=void 0;if(g&&(r=Array.isArray(r)?r.map((function(e){return g(e)})):g(r)),Array.isArray(r)?(r.forEach((function(e,r){return t[a+r]=e})),c=r.every((function(e){return i.test(e)}))):(t[a]=r,c=i.test(r)),c){F(r,a,t);for(var s=q.current,d=0;d<r.length;d++)s=s.nextElementSibling;r&&h&&s instanceof HTMLInputElement&&s.focus()}}},onKeyDown:function(e){if("Backspace"===e.key&&h&&""===l[a]&&a>0){var r=q.current.previousElementSibling;r instanceof HTMLInputElement&&r.focus()}$&&$(e)},onFocus:function(e){e.target.placeholder="",N&&N(e)},onBlur:function(e){e.target.placeholder=j,R&&R(e)},completed:c,showState:m,sizing:d,style:P,borderColor:T,errorBorderColor:k,focusBorderColor:I,validBorderColor:A,"data-index":a})};m.displayName="PinInputField",m.propTypes=g;var y={values:a.arrayOf(a.string).isRequired,type:a.oneOf(["number","text"]),mask:a.bool,validate:a.oneOfType([a.string,a.arrayOf(a.string),a.instanceOf(RegExp)]),format:a.func,showState:a.bool,size:a.oneOf(["xs","sm","md","lg"]),autoFocus:a.bool,autoTab:a.bool,containerStyle:a.object,inputStyle:a.object,onChange:a.func},h={type:"number",mask:!1,showState:!0,size:"md",autoFocus:!1,autoTab:!0,borderColor:"rgb(204,204,204)",errorBorderColor:"rgb(220,53,69)",focusBorderColor:"rgb(13,110,253)",validBorderColor:"rgb(25,135,84)",containerStyle:{},inputStyle:{},autoComplete:"off",placeholder:"o","aria-label":"Please enter pin code"},v=function(r){var o=n((function(){return r.values.every((function(e){return e}))}),[r.values]);return o&&r.onComplete&&(r.validate?r.values.every((function(e){return new RegExp(p(r.validate)).test(e)}))&&r.onComplete(r.values):r.onComplete(r.values)),e.createElement(d,{style:r.containerStyle},r.values.map((function(n,t){return e.createElement(m,l({key:r.id?"".concat(r.id,"-").concat(t):t,index:t,value:n,completed:o},r))})))};v.displayName="PinInput",v.propTypes=y,v.defaultProps=h;var x={length:a.number,initialValue:a.oneOfType([a.string,a.arrayOf(a.string)]),type:a.oneOf(["number","text"]),mask:a.bool,validate:a.oneOfType([a.string,a.arrayOf(a.string),a.instanceOf(RegExp)]),format:a.func,showState:a.bool,size:a.oneOf(["xs","sm","md","lg"]),autoFocus:a.bool,autoTab:a.bool,containerStyle:a.object,inputStyle:a.object,onChange:a.func},C=function(r){var n=r.length,o=r.initialValue,a=r.onChange,i=function(e,r){var n={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&r.indexOf(o)<0&&(n[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var t=0;for(o=Object.getOwnPropertySymbols(e);t<o.length;t++)r.indexOf(o[t])<0&&Object.prototype.propertyIsEnumerable.call(e,o[t])&&(n[o[t]]=e[o[t]])}return n}(r,["length","initialValue","onChange"]),c=t(Array.from({length:n},(function(e,r){return o[r]||""}))),u=c[0],s=c[1];return e.createElement(v,l({values:u,onChange:function(e,r,n){s(n),a&&a(e,r,n)}},i))};C.displayName="StatefulPinInput",C.propTypes=x,C.defaultProps={length:4,initialValue:"",type:"number",mask:!1,showState:!0,size:"md",autoFocus:!1,autoTab:!0,containerStyle:{},inputStyle:{},autoComplete:"off",placeholder:"o","aria-label":"Please enter pin code"};export{v as PinInput,C as StatefulPinInput};

dist/index.js

@@ -84,19 +84,29 @@ 'use strict';
 };
-var hexToRgb = function (hex) {
-    if (hex === undefined)
+var colorParser = function (color) {
+    if (color === undefined)
         return null;
-    var shorthand = /^#?[a-fA-Z\d]{3}$/i.test(hex);
-    var result = shorthand
-        ? /^#?([a-f\d])([a-f\d])([a-f\d])$/i.exec(hex)
-        : /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-    return result
-        ? {
-            r: parseInt(shorthand ? result[1] + result[1] : result[1], 16),
-            g: parseInt(shorthand ? result[2] + result[2] : result[2], 16),
-            b: parseInt(shorthand ? result[3] + result[3] : result[3], 16),
-        }
-        : null;
+    var match = color.match(/^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/);
+    if (match) {
+        return {
+            r: Number(match[1]),
+            g: Number(match[2]),
+            b: Number(match[3]),
+        };
+    }
+    else {
+        var shorthand = /^#?[a-fA-Z\d]{3}$/i.test(color);
+        var result = shorthand
+            ? /^#?([a-f\d])([a-f\d])([a-f\d])$/i.exec(color)
+            : /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color);
+        return result
+            ? {
+                r: parseInt(shorthand ? result[1] + result[1] : result[1], 16),
+                g: parseInt(shorthand ? result[2] + result[2] : result[2], 16),
+                b: parseInt(shorthand ? result[3] + result[3] : result[3], 16),
+            }
+            : null;
+    }
 };
 
-var Input = styled__default["default"].input(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  margin-right: 0.375rem;\n  outline: transparent solid 2px;\n  outline-offset: 2px;\n  font-size: ", ";\n  text-align: center;\n  border-radius: 0.375rem;\n  border-width: 1px;\n  border-style: solid;\n  border-color: #cccccc;\n  background-color: inherit;\n  box-sizing: border-box;\n  &:focus {\n    border-color: ", ";\n    box-shadow: ", " 0px\n      0px 0px 1px;\n  }\n  &:last-child {\n    margin-right: 0;\n  }\n  ", "\n  ", "\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n"], ["\n  width: ", ";\n  height: ", ";\n  margin-right: 0.375rem;\n  outline: transparent solid 2px;\n  outline-offset: 2px;\n  font-size: ", ";\n  text-align: center;\n  border-radius: 0.375rem;\n  border-width: 1px;\n  border-style: solid;\n  border-color: #cccccc;\n  background-color: inherit;\n  box-sizing: border-box;\n  &:focus {\n    border-color: ", ";\n    box-shadow: ", " 0px\n      0px 0px 1px;\n  }\n  &:last-child {\n    margin-right: 0;\n  }\n  ", "\n  ", "\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n"])), function (_a) {
+var Input = styled__default["default"].input(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  margin-right: 0.375rem;\n  outline: transparent solid 2px;\n  outline-offset: 2px;\n  font-size: ", ";\n  text-align: center;\n  border-radius: 0.375rem;\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  background-color: inherit;\n  box-sizing: border-box;\n  &:focus {\n    border-color: ", ";\n    box-shadow: ", " 0px 0px 0px 1px;\n  }\n  &:last-child {\n    margin-right: 0;\n  }\n  ", "\n  ", "\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n"], ["\n  width: ", ";\n  height: ", ";\n  margin-right: 0.375rem;\n  outline: transparent solid 2px;\n  outline-offset: 2px;\n  font-size: ", ";\n  text-align: center;\n  border-radius: 0.375rem;\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  background-color: inherit;\n  box-sizing: border-box;\n  &:focus {\n    border-color: ", ";\n    box-shadow: ", " 0px 0px 0px 1px;\n  }\n  &:last-child {\n    margin-right: 0;\n  }\n  ", "\n  ", "\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n"])), function (_a) {
     var sizing = _a.sizing;
@@ -138,18 +148,33 @@ switch (sizing) {
 }, function (_a) {
+    var borderColor = _a.borderColor;
+    var rgb = colorParser(borderColor);
+    return rgb ? "rgb(".concat(rgb.r, ",").concat(rgb.g, ",").concat(rgb.b, ")") : defaultProps.borderColor;
+}, function (_a) {
     var focusBorderColor = _a.focusBorderColor;
-    return focusBorderColor || '#0d6efd';
+    var rgb = colorParser(focusBorderColor);
+    return rgb
+        ? "rgb(".concat(rgb.r, ",").concat(rgb.g, ",").concat(rgb.b, ")")
+        : defaultProps.focusBorderColor;
 }, function (_a) {
     var focusBorderColor = _a.focusBorderColor;
-    return focusBorderColor || '#0d6efd';
+    return focusBorderColor;
 }, function (_a) {
     var completed = _a.completed, showState = _a.showState, validBorderColor = _a.validBorderColor;
-    var rgb = hexToRgb(validBorderColor);
+    var rgb = colorParser(validBorderColor);
     return completed && showState
-        ? "&:valid {\n    border-color: ".concat(rgb ? "rgb(".concat(rgb.r, ", ").concat(rgb.g, ", ").concat(rgb.b, ")") : 'rgb(25, 135, 84)', ";\n    box-shadow: ").concat(rgb ? "rgb(".concat(rgb.r, ", ").concat(rgb.g, ", ").concat(rgb.b, ")") : 'rgb(25, 135, 84)', " 0px 0px 0px 1px;\n    background-color: ").concat(rgb ? "rgba(".concat(rgb.r, ", ").concat(rgb.g, ", ").concat(rgb.b, ", 0.1)") : 'rgba(25, 135, 84, 0.1)', ";\n  }")
+        ? "&:valid {\n    border-color: ".concat(rgb ? "rgb(".concat(rgb.r, ",").concat(rgb.g, ",").concat(rgb.b, ")") : defaultProps.validBorderColor, ";\n    box-shadow: ").concat(rgb ? "rgb(".concat(rgb.r, ",").concat(rgb.g, ",").concat(rgb.b, ")") : defaultProps.validBorderColor, " 0px 0px 0px 1px;\n    background-color: ").concat(rgb
+            ? "rgba(".concat(rgb.r, ",").concat(rgb.g, ",").concat(rgb.b, ",0.1)")
+            : defaultProps.validBorderColor
+                .replace('rgb', 'rgba')
+                .replace(')', ',0.1)'), ";\n  }")
         : '';
 }, function (_a) {
     var showState = _a.showState, errorBorderColor = _a.errorBorderColor;
-    var rgb = hexToRgb(errorBorderColor);
+    var rgb = colorParser(errorBorderColor);
     return showState
-        ? "&:invalid {\n    border-color: ".concat(rgb ? "rgb(".concat(rgb.r, ", ").concat(rgb.g, ", ").concat(rgb.b, ")") : 'rgb(220, 53, 69)', ";\n    box-shadow: ").concat(rgb ? "rgb(".concat(rgb.r, ", ").concat(rgb.g, ", ").concat(rgb.b, ")") : 'rgb(220, 53, 69)', " 0px 0px 0px 1px;\n    background-color: ").concat(rgb ? "rgba(".concat(rgb.r, ", ").concat(rgb.g, ", ").concat(rgb.b, ", 0.1)") : 'rgb(220, 53, 69, 0.1)', ";\n  }")
+        ? "&:invalid {\n    border-color: ".concat(rgb ? "rgb(".concat(rgb.r, ",").concat(rgb.g, ",").concat(rgb.b, ")") : defaultProps.errorBorderColor, ";\n    box-shadow: ").concat(rgb ? "rgb(".concat(rgb.r, ",").concat(rgb.g, ",").concat(rgb.b, ")") : defaultProps.errorBorderColor, " 0px 0px 0px 1px;\n    background-color: ").concat(rgb
+            ? "rgba(".concat(rgb.r, ",").concat(rgb.g, ",").concat(rgb.b, ",0.1)")
+            : defaultProps.errorBorderColor
+                .replace('rgb', 'rgba')
+                .replace(')', ',0.1)'), ";\n  }")
         : '';
@@ -165,3 +190,3 @@ });
 var PinInputField = function (_a) {
-    var index = _a.index, value = _a.value, values = _a.values, completed = _a.completed, type = _a.type, mask = _a.mask, size = _a.size, validate = _a.validate, format = _a.format, showState = _a.showState, autoFocus = _a.autoFocus, autoTab = _a.autoTab, ariaDescribedby = _a["aria-describedby"], ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], autoComplete = _a.autoComplete, disabled = _a.disabled, inputMode = _a.inputMode, id = _a.id, name = _a.name, placeholder = _a.placeholder, required = _a.required, inputStyle = _a.inputStyle, errorBorderColor = _a.errorBorderColor, focusBorderColor = _a.focusBorderColor, validBorderColor = _a.validBorderColor, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown;
+    var index = _a.index, value = _a.value, values = _a.values, completed = _a.completed, type = _a.type, mask = _a.mask, size = _a.size, validate = _a.validate, format = _a.format, showState = _a.showState, autoFocus = _a.autoFocus, autoTab = _a.autoTab, ariaDescribedby = _a["aria-describedby"], ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], autoComplete = _a.autoComplete, disabled = _a.disabled, inputMode = _a.inputMode, id = _a.id, name = _a.name, placeholder = _a.placeholder, required = _a.required, inputStyle = _a.inputStyle, borderColor = _a.borderColor, errorBorderColor = _a.errorBorderColor, focusBorderColor = _a.focusBorderColor, validBorderColor = _a.validBorderColor, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown;
     var inputRef = React.useRef();
@@ -264,3 +289,3 @@ var handleInputChange = function (e) {
     }, [autoFocus, index]);
-    return (React__default["default"].createElement(Input, { ref: inputRef, type: mask ? 'password' : 'text', "aira-describedby": ariaDescribedby, "aria-disabled": disabled, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-required": required, autoComplete: autoComplete, disabled: disabled, name: name, id: id && "".concat(id, "-").concat(index), inputMode: inputMode || (type === 'number' ? 'numeric' : 'text'), required: required, placeholder: placeholder, pattern: pattern, value: value, onChange: handleInputChange, onKeyDown: handleKeyDown, onFocus: handleInputFocus, onBlur: handleInputBlur, completed: completed, showState: showState, sizing: size, style: inputStyle, errorBorderColor: errorBorderColor, focusBorderColor: focusBorderColor, validBorderColor: validBorderColor, "data-index": index }));
+    return (React__default["default"].createElement(Input, { ref: inputRef, type: mask ? 'password' : 'text', "aira-describedby": ariaDescribedby, "aria-disabled": disabled, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-required": required, autoComplete: autoComplete, disabled: disabled, name: name, id: id && "".concat(id, "-").concat(index), inputMode: inputMode || (type === 'number' ? 'numeric' : 'text'), required: required, placeholder: placeholder, pattern: pattern, value: value, onChange: handleInputChange, onKeyDown: handleKeyDown, onFocus: handleInputFocus, onBlur: handleInputBlur, completed: completed, showState: showState, sizing: size, style: inputStyle, borderColor: borderColor, errorBorderColor: errorBorderColor, focusBorderColor: focusBorderColor, validBorderColor: validBorderColor, "data-index": index }));
 };
@@ -288,2 +313,19 @@ PinInputField.displayName = 'PinInputField';
 };
+var defaultProps = {
+    type: 'number',
+    mask: false,
+    showState: true,
+    size: 'md',
+    autoFocus: false,
+    autoTab: true,
+    borderColor: 'rgb(204,204,204)',
+    errorBorderColor: 'rgb(220,53,69)',
+    focusBorderColor: 'rgb(13,110,253)',
+    validBorderColor: 'rgb(25,135,84)',
+    containerStyle: {},
+    inputStyle: {},
+    autoComplete: 'off',
+    placeholder: 'o',
+    'aria-label': 'Please enter pin code',
+};
 var PinInput = function (props) {
@@ -307,15 +349,3 @@ var completed = React.useMemo(function () { return props.values.every(function (val) { return val; }); }, [props.values]);
 PinInput.propTypes = propTypes$1;
-PinInput.defaultProps = {
-    type: 'number',
-    mask: false,
-    showState: true,
-    size: 'md',
-    autoFocus: false,
-    autoTab: true,
-    containerStyle: {},
-    inputStyle: {},
-    autoComplete: 'off',
-    placeholder: 'o',
-    'aria-label': 'Please enter pin code',
-};
+PinInput.defaultProps = defaultProps;
 
@@ -322,0 +352,0 @@ var propTypes = {

dist/index.min.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("prop-types"),n=require("styled-components");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=r(e),o=r(t),l=r(n),u=function(){return u=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var a in t=arguments[n])Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a]);return e},u.apply(this,arguments)};function i(e,t){return Object.defineProperty?Object.defineProperty(e,"raw",{value:t}):e.raw=t,e}var c,d,s=l.default.div(c||(c=i(["\n  display: flex;\n  align-items: center;\n"],["\n  display: flex;\n  align-items: center;\n"]))),f=function(e){var t;return Array.isArray(e)?(t=new RegExp(e.join("|")).toString()).slice(1,t.length-1):"string"==typeof e?(t=new RegExp(e.split("").join("|")).toString()).slice(1,t.length-1):e instanceof RegExp?(t=e.toString()).slice(1,t.length-1):void 0},p=function(e){if(void 0===e)return null;var t=/^#?[a-fA-Z\d]{3}$/i.test(e),n=t?/^#?([a-f\d])([a-f\d])([a-f\d])$/i.exec(e):/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return n?{r:parseInt(t?n[1]+n[1]:n[1],16),g:parseInt(t?n[2]+n[2]:n[2],16),b:parseInt(t?n[3]+n[3]:n[3],16)}:null},b=l.default.input(d||(d=i(["\n  width: ",";\n  height: ",";\n  margin-right: 0.375rem;\n  outline: transparent solid 2px;\n  outline-offset: 2px;\n  font-size: ",";\n  text-align: center;\n  border-radius: 0.375rem;\n  border-width: 1px;\n  border-style: solid;\n  border-color: #cccccc;\n  background-color: inherit;\n  box-sizing: border-box;\n  &:focus {\n    border-color: ",";\n    box-shadow: "," 0px\n      0px 0px 1px;\n  }\n  &:last-child {\n    margin-right: 0;\n  }\n  ","\n  ","\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n"],["\n  width: ",";\n  height: ",";\n  margin-right: 0.375rem;\n  outline: transparent solid 2px;\n  outline-offset: 2px;\n  font-size: ",";\n  text-align: center;\n  border-radius: 0.375rem;\n  border-width: 1px;\n  border-style: solid;\n  border-color: #cccccc;\n  background-color: inherit;\n  box-sizing: border-box;\n  &:focus {\n    border-color: ",";\n    box-shadow: "," 0px\n      0px 0px 1px;\n  }\n  &:last-child {\n    margin-right: 0;\n  }\n  ","\n  ","\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n"])),(function(e){switch(e.sizing){case"xs":return"1.5rem";case"sm":return"2rem";case"md":return"2.5rem";case"lg":return"3rem"}}),(function(e){switch(e.sizing){case"xs":return"1.5rem";case"sm":return"2rem";case"md":return"2.5rem";case"lg":return"3rem"}}),(function(e){switch(e.sizing){case"xs":return"0.75rem";case"sm":return"0.875rem";case"md":return"1rem";case"lg":return"1.125rem"}}),(function(e){return e.focusBorderColor||"#0d6efd"}),(function(e){return e.focusBorderColor||"#0d6efd"}),(function(e){var t=e.completed,n=e.showState,r=e.validBorderColor,a=p(r);return t&&n?"&:valid {\n    border-color: ".concat(a?"rgb(".concat(a.r,", ").concat(a.g,", ").concat(a.b,")"):"rgb(25, 135, 84)",";\n    box-shadow: ").concat(a?"rgb(".concat(a.r,", ").concat(a.g,", ").concat(a.b,")"):"rgb(25, 135, 84)"," 0px 0px 0px 1px;\n    background-color: ").concat(a?"rgba(".concat(a.r,", ").concat(a.g,", ").concat(a.b,", 0.1)"):"rgba(25, 135, 84, 0.1)",";\n  }"):""}),(function(e){var t=e.showState,n=e.errorBorderColor,r=p(n);return t?"&:invalid {\n    border-color: ".concat(r?"rgb(".concat(r.r,", ").concat(r.g,", ").concat(r.b,")"):"rgb(220, 53, 69)",";\n    box-shadow: ").concat(r?"rgb(".concat(r.r,", ").concat(r.g,", ").concat(r.b,")"):"rgb(220, 53, 69)"," 0px 0px 0px 1px;\n    background-color: ").concat(r?"rgba(".concat(r.r,", ").concat(r.g,", ").concat(r.b,", 0.1)"):"rgb(220, 53, 69, 0.1)",";\n  }"):""})),g={index:o.default.number,values:o.default.arrayOf(o.default.string),onChange:o.default.func},m=function(t){var n=t.index,r=t.value,o=t.values,l=t.completed,u=t.type,i=t.mask,c=t.size,d=t.validate,s=t.format,p=t.showState,g=t.autoFocus,m=t.autoTab,y=t["aria-describedby"],h=t["aria-label"],x=t["aria-labelledby"],v=t.autoComplete,w=t.disabled,O=t.inputMode,S=t.id,C=t.name,E=t.placeholder,j=t.required,P=t.inputStyle,z=t.errorBorderColor,B=t.focusBorderColor,T=t.validBorderColor,k=t.onChange,I=t.onBlur,A=t.onFocus,F=t.onKeyDown,R=e.useRef(),q=e.useMemo((function(){return f(d)}),[d]);return e.useEffect((function(){g&&0===n&&R.current.focus()}),[g,n]),a.default.createElement(b,{ref:R,type:i?"password":"text","aira-describedby":y,"aria-disabled":w,"aria-label":h,"aria-labelledby":x,"aria-required":j,autoComplete:v,disabled:w,name:C,id:S&&"".concat(S,"-").concat(n),inputMode:O||("number"===u?"numeric":"text"),required:j,placeholder:E,pattern:q,value:r,onChange:function(e){var t,r=o[n],a=e.target.value,l=function(e,t){for(var n=0,r=t.length,a=e.length;n<r;n++,a++)e[a]=t[n];return e}([],o);if(r?a.length>2?t=a.split(""):""===a?t="":r[0]===a[0]?t=a[1]:r[0]===a[1]&&(t=a[0]):t=a.length>1?a.split(""):a,k){var i="number"===u?/(^$)|(\d+)/:/.*/,c=void 0;if(s&&(t=Array.isArray(t)?t.map((function(e){return s(e)})):s(t)),Array.isArray(t)?(t.forEach((function(e,t){return l[n+t]=e})),c=t.every((function(e){return i.test(e)}))):(l[n]=t,c=i.test(t)),c){k(t,n,l);for(var d=R.current,f=0;f<t.length;f++)d=d.nextElementSibling;t&&m&&d instanceof HTMLInputElement&&d.focus()}}},onKeyDown:function(e){if("Backspace"===e.key&&m&&""===o[n]&&n>0){var t=R.current.previousElementSibling;t instanceof HTMLInputElement&&t.focus()}F&&F(e)},onFocus:function(e){e.target.placeholder="",A&&A(e)},onBlur:function(e){e.target.placeholder=E,I&&I(e)},completed:l,showState:p,sizing:c,style:P,errorBorderColor:z,focusBorderColor:B,validBorderColor:T,"data-index":n})};m.displayName="PinInputField",m.propTypes=g;var y={values:o.default.arrayOf(o.default.string).isRequired,type:o.default.oneOf(["number","text"]),mask:o.default.bool,validate:o.default.oneOfType([o.default.string,o.default.arrayOf(o.default.string),o.default.instanceOf(RegExp)]),format:o.default.func,showState:o.default.bool,size:o.default.oneOf(["xs","sm","md","lg"]),autoFocus:o.default.bool,autoTab:o.default.bool,containerStyle:o.default.object,inputStyle:o.default.object,onChange:o.default.func},h=function(t){var n=e.useMemo((function(){return t.values.every((function(e){return e}))}),[t.values]);return n&&t.onComplete&&(t.validate?t.values.every((function(e){return new RegExp(f(t.validate)).test(e)}))&&t.onComplete(t.values):t.onComplete(t.values)),a.default.createElement(s,{style:t.containerStyle},t.values.map((function(e,r){return a.default.createElement(m,u({key:t.id?"".concat(t.id,"-").concat(r):r,index:r,value:e,completed:n},t))})))};h.displayName="PinInput",h.propTypes=y,h.defaultProps={type:"number",mask:!1,showState:!0,size:"md",autoFocus:!1,autoTab:!0,containerStyle:{},inputStyle:{},autoComplete:"off",placeholder:"o","aria-label":"Please enter pin code"};var x={length:o.default.number,initialValue:o.default.oneOfType([o.default.string,o.default.arrayOf(o.default.string)]),type:o.default.oneOf(["number","text"]),mask:o.default.bool,validate:o.default.oneOfType([o.default.string,o.default.arrayOf(o.default.string),o.default.instanceOf(RegExp)]),format:o.default.func,showState:o.default.bool,size:o.default.oneOf(["xs","sm","md","lg"]),autoFocus:o.default.bool,autoTab:o.default.bool,containerStyle:o.default.object,inputStyle:o.default.object,onChange:o.default.func},v=function(t){var n=t.length,r=t.initialValue,o=t.onChange,l=function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(r=Object.getOwnPropertySymbols(e);a<r.length;a++)t.indexOf(r[a])<0&&Object.prototype.propertyIsEnumerable.call(e,r[a])&&(n[r[a]]=e[r[a]])}return n}(t,["length","initialValue","onChange"]),i=e.useState(Array.from({length:n},(function(e,t){return r[t]||""}))),c=i[0],d=i[1];return a.default.createElement(h,u({values:c,onChange:function(e,t,n){d(n),o&&o(e,t,n)}},l))};v.displayName="StatefulPinInput",v.propTypes=x,v.defaultProps={length:4,initialValue:"",type:"number",mask:!1,showState:!0,size:"md",autoFocus:!1,autoTab:!0,containerStyle:{},inputStyle:{},autoComplete:"off",placeholder:"o","aria-label":"Please enter pin code"},exports.PinInput=h,exports.StatefulPinInput=v;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("prop-types"),t=require("styled-components");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=n(e),a=n(r),l=n(t),u=function(){return u=Object.assign||function(e){for(var r,t=1,n=arguments.length;t<n;t++)for(var o in r=arguments[t])Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o]);return e},u.apply(this,arguments)};function i(e,r){return Object.defineProperty?Object.defineProperty(e,"raw",{value:r}):e.raw=r,e}var c,d,s=l.default.div(c||(c=i(["\n  display: flex;\n  align-items: center;\n"],["\n  display: flex;\n  align-items: center;\n"]))),f=function(e){var r;return Array.isArray(e)?(r=new RegExp(e.join("|")).toString()).slice(1,r.length-1):"string"==typeof e?(r=new RegExp(e.split("").join("|")).toString()).slice(1,r.length-1):e instanceof RegExp?(r=e.toString()).slice(1,r.length-1):void 0},p=function(e){if(void 0===e)return null;var r=e.match(/^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/);if(r)return{r:Number(r[1]),g:Number(r[2]),b:Number(r[3])};var t=/^#?[a-fA-Z\d]{3}$/i.test(e),n=t?/^#?([a-f\d])([a-f\d])([a-f\d])$/i.exec(e):/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return n?{r:parseInt(t?n[1]+n[1]:n[1],16),g:parseInt(t?n[2]+n[2]:n[2],16),b:parseInt(t?n[3]+n[3]:n[3],16)}:null},b=l.default.input(d||(d=i(["\n  width: ",";\n  height: ",";\n  margin-right: 0.375rem;\n  outline: transparent solid 2px;\n  outline-offset: 2px;\n  font-size: ",";\n  text-align: center;\n  border-radius: 0.375rem;\n  border-width: 1px;\n  border-style: solid;\n  border-color: ",";\n  background-color: inherit;\n  box-sizing: border-box;\n  &:focus {\n    border-color: ",";\n    box-shadow: "," 0px 0px 0px 1px;\n  }\n  &:last-child {\n    margin-right: 0;\n  }\n  ","\n  ","\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n"],["\n  width: ",";\n  height: ",";\n  margin-right: 0.375rem;\n  outline: transparent solid 2px;\n  outline-offset: 2px;\n  font-size: ",";\n  text-align: center;\n  border-radius: 0.375rem;\n  border-width: 1px;\n  border-style: solid;\n  border-color: ",";\n  background-color: inherit;\n  box-sizing: border-box;\n  &:focus {\n    border-color: ",";\n    box-shadow: "," 0px 0px 0px 1px;\n  }\n  &:last-child {\n    margin-right: 0;\n  }\n  ","\n  ","\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n"])),(function(e){switch(e.sizing){case"xs":return"1.5rem";case"sm":return"2rem";case"md":return"2.5rem";case"lg":return"3rem"}}),(function(e){switch(e.sizing){case"xs":return"1.5rem";case"sm":return"2rem";case"md":return"2.5rem";case"lg":return"3rem"}}),(function(e){switch(e.sizing){case"xs":return"0.75rem";case"sm":return"0.875rem";case"md":return"1rem";case"lg":return"1.125rem"}}),(function(e){var r=e.borderColor,t=p(r);return t?"rgb(".concat(t.r,",").concat(t.g,",").concat(t.b,")"):h.borderColor}),(function(e){var r=e.focusBorderColor,t=p(r);return t?"rgb(".concat(t.r,",").concat(t.g,",").concat(t.b,")"):h.focusBorderColor}),(function(e){return e.focusBorderColor}),(function(e){var r=e.completed,t=e.showState,n=e.validBorderColor,o=p(n);return r&&t?"&:valid {\n    border-color: ".concat(o?"rgb(".concat(o.r,",").concat(o.g,",").concat(o.b,")"):h.validBorderColor,";\n    box-shadow: ").concat(o?"rgb(".concat(o.r,",").concat(o.g,",").concat(o.b,")"):h.validBorderColor," 0px 0px 0px 1px;\n    background-color: ").concat(o?"rgba(".concat(o.r,",").concat(o.g,",").concat(o.b,",0.1)"):h.validBorderColor.replace("rgb","rgba").replace(")",",0.1)"),";\n  }"):""}),(function(e){var r=e.showState,t=e.errorBorderColor,n=p(t);return r?"&:invalid {\n    border-color: ".concat(n?"rgb(".concat(n.r,",").concat(n.g,",").concat(n.b,")"):h.errorBorderColor,";\n    box-shadow: ").concat(n?"rgb(".concat(n.r,",").concat(n.g,",").concat(n.b,")"):h.errorBorderColor," 0px 0px 0px 1px;\n    background-color: ").concat(n?"rgba(".concat(n.r,",").concat(n.g,",").concat(n.b,",0.1)"):h.errorBorderColor.replace("rgb","rgba").replace(")",",0.1)"),";\n  }"):""})),g={index:a.default.number,values:a.default.arrayOf(a.default.string),onChange:a.default.func},m=function(r){var t=r.index,n=r.value,a=r.values,l=r.completed,u=r.type,i=r.mask,c=r.size,d=r.validate,s=r.format,p=r.showState,g=r.autoFocus,m=r.autoTab,y=r["aria-describedby"],h=r["aria-label"],v=r["aria-labelledby"],x=r.autoComplete,C=r.disabled,w=r.inputMode,O=r.id,S=r.name,B=r.placeholder,E=r.required,j=r.inputStyle,P=r.borderColor,z=r.errorBorderColor,T=r.focusBorderColor,k=r.validBorderColor,I=r.onChange,A=r.onBlur,F=r.onFocus,R=r.onKeyDown,q=e.useRef(),M=e.useMemo((function(){return f(d)}),[d]);return e.useEffect((function(){g&&0===t&&q.current.focus()}),[g,t]),o.default.createElement(b,{ref:q,type:i?"password":"text","aira-describedby":y,"aria-disabled":C,"aria-label":h,"aria-labelledby":v,"aria-required":E,autoComplete:x,disabled:C,name:S,id:O&&"".concat(O,"-").concat(t),inputMode:w||("number"===u?"numeric":"text"),required:E,placeholder:B,pattern:M,value:n,onChange:function(e){var r,n=a[t],o=e.target.value,l=function(e,r){for(var t=0,n=r.length,o=e.length;t<n;t++,o++)e[o]=r[t];return e}([],a);if(n?o.length>2?r=o.split(""):""===o?r="":n[0]===o[0]?r=o[1]:n[0]===o[1]&&(r=o[0]):r=o.length>1?o.split(""):o,I){var i="number"===u?/(^$)|(\d+)/:/.*/,c=void 0;if(s&&(r=Array.isArray(r)?r.map((function(e){return s(e)})):s(r)),Array.isArray(r)?(r.forEach((function(e,r){return l[t+r]=e})),c=r.every((function(e){return i.test(e)}))):(l[t]=r,c=i.test(r)),c){I(r,t,l);for(var d=q.current,f=0;f<r.length;f++)d=d.nextElementSibling;r&&m&&d instanceof HTMLInputElement&&d.focus()}}},onKeyDown:function(e){if("Backspace"===e.key&&m&&""===a[t]&&t>0){var r=q.current.previousElementSibling;r instanceof HTMLInputElement&&r.focus()}R&&R(e)},onFocus:function(e){e.target.placeholder="",F&&F(e)},onBlur:function(e){e.target.placeholder=B,A&&A(e)},completed:l,showState:p,sizing:c,style:j,borderColor:P,errorBorderColor:z,focusBorderColor:T,validBorderColor:k,"data-index":t})};m.displayName="PinInputField",m.propTypes=g;var y={values:a.default.arrayOf(a.default.string).isRequired,type:a.default.oneOf(["number","text"]),mask:a.default.bool,validate:a.default.oneOfType([a.default.string,a.default.arrayOf(a.default.string),a.default.instanceOf(RegExp)]),format:a.default.func,showState:a.default.bool,size:a.default.oneOf(["xs","sm","md","lg"]),autoFocus:a.default.bool,autoTab:a.default.bool,containerStyle:a.default.object,inputStyle:a.default.object,onChange:a.default.func},h={type:"number",mask:!1,showState:!0,size:"md",autoFocus:!1,autoTab:!0,borderColor:"rgb(204,204,204)",errorBorderColor:"rgb(220,53,69)",focusBorderColor:"rgb(13,110,253)",validBorderColor:"rgb(25,135,84)",containerStyle:{},inputStyle:{},autoComplete:"off",placeholder:"o","aria-label":"Please enter pin code"},v=function(r){var t=e.useMemo((function(){return r.values.every((function(e){return e}))}),[r.values]);return t&&r.onComplete&&(r.validate?r.values.every((function(e){return new RegExp(f(r.validate)).test(e)}))&&r.onComplete(r.values):r.onComplete(r.values)),o.default.createElement(s,{style:r.containerStyle},r.values.map((function(e,n){return o.default.createElement(m,u({key:r.id?"".concat(r.id,"-").concat(n):n,index:n,value:e,completed:t},r))})))};v.displayName="PinInput",v.propTypes=y,v.defaultProps=h;var x={length:a.default.number,initialValue:a.default.oneOfType([a.default.string,a.default.arrayOf(a.default.string)]),type:a.default.oneOf(["number","text"]),mask:a.default.bool,validate:a.default.oneOfType([a.default.string,a.default.arrayOf(a.default.string),a.default.instanceOf(RegExp)]),format:a.default.func,showState:a.default.bool,size:a.default.oneOf(["xs","sm","md","lg"]),autoFocus:a.default.bool,autoTab:a.default.bool,containerStyle:a.default.object,inputStyle:a.default.object,onChange:a.default.func},C=function(r){var t=r.length,n=r.initialValue,a=r.onChange,l=function(e,r){var t={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&r.indexOf(n)<0&&(t[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(e);o<n.length;o++)r.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(e,n[o])&&(t[n[o]]=e[n[o]])}return t}(r,["length","initialValue","onChange"]),i=e.useState(Array.from({length:t},(function(e,r){return n[r]||""}))),c=i[0],d=i[1];return o.default.createElement(v,u({values:c,onChange:function(e,r,t){d(t),a&&a(e,r,t)}},l))};C.displayName="StatefulPinInput",C.propTypes=x,C.defaultProps={length:4,initialValue:"",type:"number",mask:!1,showState:!0,size:"md",autoFocus:!1,autoTab:!0,containerStyle:{},inputStyle:{},autoComplete:"off",placeholder:"o","aria-label":"Please enter pin code"},exports.PinInput=v,exports.StatefulPinInput=C;

dist/styles/PinInputField.d.ts

@@ -5,2 +5,3 @@ export declare const Input: import("styled-components").StyledComponent<"input", any, {
     sizing: 'xs' | 'sm' | 'md' | 'lg';
+    borderColor: string;
     errorBorderColor: string;
@@ -7,0 +8,0 @@ focusBorderColor: string;

dist/types/PinInput.d.ts

@@ -14,2 +14,3 @@ import React from 'react';
     inputStyle?: React.CSSProperties;
+    borderColor?: string;
     errorBorderColor?: string;
@@ -16,0 +17,0 @@ focusBorderColor?: string;

dist/utils.d.ts

 export declare const validateToPattern: (validate: string | string[] | RegExp) => string;
-export declare const hexToRgb: (hex: string) => {
+export declare const colorParser: (color: string) => {
     r: number;
@@ -4,0 +4,0 @@ g: number;

package.json

 {
   "name": "react-input-pin-code",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "Pin input built with React component and styled-components",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

 # React Input Pin Code
 
 [![Validate](https://github.com/luffy84217/react-input-pin-code/actions/workflows/validate.yml/badge.svg)](https://github.com/luffy84217/react-input-pin-code/actions/workflows/validate.yml)
+[![CircleCI](https://circleci.com/gh/luffy84217/react-input-pin-code/tree/main.svg?style=shield)](https://circleci.com/gh/luffy84217/react-input-pin-code/tree/main)
+[![Build Status](https://app.travis-ci.com/luffy84217/react-input-pin-code.svg?branch=main)](https://app.travis-ci.com/luffy84217/react-input-pin-code)
 [![codecov](https://codecov.io/gh/luffy84217/react-input-pin-code/branch/main/graph/badge.svg?token=QSHM2A3C5V)](https://codecov.io/gh/luffy84217/react-input-pin-code)
@@ -23,2 +25,4 @@ ![npm](https://img.shields.io/npm/v/react-input-pin-code)
 npm install react-input-pin-code styled-components
+or
+yarn add react-input-pin-code styled-components
 ```
@@ -158,5 +162,5 @@
 | autoTab | boolean | true | If true focus will move automatically to the next/previous input once filled or deleted |
-| errorBorderColor | string |  | Let you customize border color when the input is invalid. (string **MUST** be hex code.)
-| focusBorderColor | string |  | Let you customize border color when the input is focused. (string **MUST** be hex code.)
-| validBorderColor | string |  | Let you customize border color when the input is valid. (string **MUST** be hex code.)
+| errorBorderColor | string |  | Let you customize border color when the input is invalid.
+| focusBorderColor | string |  | Let you customize border color when the input is focused.
+| validBorderColor | string |  | Let you customize border color when the input is valid.
 | disabled | boolean |  | Renders component in disabled state. |
@@ -163,0 +167,0 @@ | format | (char: string) => string |  | Pure function to transform raw input. |

No alert changes

Improved metrics

Lines of code

917

increased by8.01%

Number of lines in readme file

195

increased by2.09%

Worsened metrics

Total package byte prevSize

70541

decreased by-0.34%

Number of package files

20

decreased by-4.76%

No dependency changes