UNPKG

@elsikora/x-captcha-react

Version:

React components for X-Captcha service

1 lines 12.3 kB
{"version":3,"sources":["captcha-widget.module.css","captcha-form.module.css","index.css"],"names":[],"mappings":"AAGA,gCACC,GACC,sBACD,CAEA,GACC,uBACD,CACD,CAGA,wBAWC,sCAAuC,CACvC,wCAAyC,CACzC,kCAAmC,CAHnC,wCAAyC,CAJzC,WAAY,CACZ,aAAc,CAEd,eAAgB,CADhB,gCAAiC,CAPjC,iBAAkB,CAalB,sCACD,CAGA,iDAfC,kBAAmB,CADnB,YAAa,CAEb,sBAAuB,CACvB,UAqBD,CARA,yBAMC,8BAA+B,CAC/B,eAAgB,CAFhB,WAGD,CAEA,iCAOC,iDAA4C,CAH5C,gBAAiB,CACjB,4CAA6C,CAC7C,iBAAkB,CAJlB,WAAY,CACZ,iBAAkB,CAFlB,UAOD,CAGA,uBAQC,4BAA6B,CAN7B,qBAAsB,CACtB,QAAS,CAIT,WAAY,CAEZ,iBAAkB,CAHlB,UAID,CAEA,qDARC,kBAAmB,CAHnB,YAAa,CAIb,sBAqBD,CAdA,8BAQC,wCAAyC,CACzC,8CAA+C,CAC/C,qCAAsC,CACtC,qCAAsC,CANtC,+BAAgC,CAOhC,cAAe,CALf,kCAAmC,CADnC,eAAgB,CAFhB,+DAAgE,CAShE,2CACD,CAEA,wEAEC,wDACD,CAEA,mCAEC,kBAAmB,CADnB,YAAa,CAEb,gBACD,CAGA,0BAMC,8BAA+B,CAC/B,eACD,CAGA,qDATC,kBAAmB,CADnB,YAAa,CAIb,WAAY,CAFZ,sBAAuB,CACvB,UAiBD,CAVA,2BAOC,wCAAyC,CACzC,cAAe,CAFf,cAAe,CAGf,2CACD,CAGA,0BAGC,kBAAmB,CAKnB,4BAA6B,CAC7B,yCAA0C,CAC1C,wCAAyC,CACzC,qCAAsC,CATtC,YAAa,CAIb,WAAY,CAFZ,sBAAuB,CAGvB,iBAAkB,CANlB,iBAAkB,CAWlB,0CAAiD,CAPjD,UAQD,CAEA,uEAEC,yCAA0C,CAC1C,qCACD,CAEA,gCACC,uCAAwC,CACxC,mCACD,CAEA,2BACC,gCAAiC,CAEjC,SAAU,CADV,kBAAmB,CAEnB,0CACD,CAEA,mCAEC,SAAU,CADV,kBAED,CAEA,uBAMC,yCAA0C,CAC1C,iBAAkB,CAFlB,QAAS,CAFT,QAAS,CAMT,UAAY,CARZ,iBAAkB,CAClB,OAAQ,CAMR,8BAAgC,CAEhC,0CAAiD,CANjD,OAOD,CAEA,8BAEC,WAAY,CACZ,SAAU,CAFV,UAGD,CAEA,sBACC,8BAA+B,CAE/B,kCAAmC,CADnC,eAED,CAEA,uBAGC,UAAW,CACX,iCAAkC,CAElC,kCAAmC,CADnC,eAAgB,CAJhB,iBAAkB,CAClB,SAKD,CAGA,mCAKC,kBAAmB,CAEnB,4CAA6C,CAC7C,iBAAkB,CAJlB,YAAa,CAFb,OAAQ,CAIR,sBAAuB,CAIvB,SAAU,CATV,iBAAkB,CAUlB,+CAEqB,CAJrB,iBAAkB,CANlB,UAWD,CAIA,2CAEC,SAAU,CADV,kBAED,CChNA,sBACC,YAAa,CACb,qBAAsB,CAGtB,wCAAyC,CAFzC,UAAW,CACX,UAED,CAGA,oCACC,YAAa,CACb,qBAAsB,CACtB,QAAS,CACT,UACD,CAGA,mCAEC,aAAc,CADd,UAED,CAGA,uBAEC,kBAAmB,CAKnB,kCAAqC,CACrC,wCAAyC,CAHzC,4BAA6B,CAJ7B,YAAa,CAKb,kCAAmC,CAHnC,iBAAmB,CACnB,eAKD,CAEA,4BAEC,kBAAmB,CADnB,YAAa,CAEb,gBACD,CAGA,+BAIC,WAAY,CACZ,qCAAsC,CAGtC,eAAgB,CALhB,kCAAmC,CADnC,eAAgB,CAIhB,YAAa,CACb,kBAAmB,CANnB,oBAAsB,CAQtB,uBAAwB,CACxB,2CACD,CAGA,sCAEC,+CAAgD,CAChD,kCAAmC,CAFnC,sCAAuC,CAGvC,cACD,CAEA,wCAEC,6CAA8C,CAD9C,+BAAgC,CAEhC,kBACD,CAGA,qCACC,qCAAsC,CACtC,0BACD,CAEA,qCACC,qDACD,CC5EA,qCAAqC,CACrC,mCAAmC,CACnC,0FAA0F,CAG1F,kDAMC,2BAA4B,CAC5B,yBAA0B,CAC1B,qBAAsB,CACtB,2BAA4B,CAC5B,2BAA4B,CAC5B,gCAAiC,CACjC,4BAA6B,CAC7B,+BAAgC,CAGhC,0BAA2B,CAC3B,0BAA2B,CAC3B,0CAA2C,CAC3C,gCAAiC,CACjC,kDAAmD,CACnD,gCAAiC,CACjC,mDAAqD,CACrD,iHAAkH,CAGlH,6CAAgD,CAChD,mEAAyE,CACzE,yEAA8E,CAG9E,0BAA2B,CAC3B,0BAA2B,CAC3B,wBAAyB,CACzB,2BAA4B,CAC5B,2BAA4B,CAG5B,wBAAyB,CACzB,wBAAyB,CACzB,wBAAyB,CAGzB,kJAA6J,CAG7J,yBAA0B,CAC1B,sBAAuB,CACvB,yBAA0B,CAG1B,yCAA0C,CAC1C,oCAAqC,CAGrC,4DACD,CAGA,0BACC,GACC,sBACD,CAEA,GACC,uBACD,CACD,CAEA,2BACC,GAEC,UAAY,CADZ,uCAED,CAEA,IAEC,SAAU,CADV,uCAED,CAEA,GAEC,SAAU,CADV,yCAED,CACD,CAEA,4BACC,kBAKC,uBACD,CAEA,IACC,0BACD,CAEA,IACC,0BACD,CACD","file":"styles.css","sourcesContent":["/* Widget styles */\n\n/* Define spinner animation directly in the module */\n@keyframes x-captcha-spin {\n\t0% {\n\t\ttransform: rotate(0deg);\n\t}\n\n\t100% {\n\t\ttransform: rotate(360deg);\n\t}\n}\n\n/* Widget container */\n.x-captcha-widget {\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 100%;\n\theight: 74px;\n\tmargin: 0 auto;\n\tpadding: var(--x-captcha-spacing);\n\toverflow: hidden;\n\tfont-family: var(--x-captcha-font-family);\n\tbackground: var(--x-captcha-background);\n\tborder-radius: var(--x-captcha-radius-lg);\n\tbox-shadow: var(--x-captcha-shadow);\n\ttransition: var(--x-captcha-transition);\n}\n\n/* Loading state */\n.x-captcha-loading {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 100%;\n\theight: 100%;\n\tcolor: var(--x-captcha-primary);\n\tfont-weight: 500;\n}\n\n.x-captcha-loading-spinner {\n\twidth: 20px;\n\theight: 20px;\n\tmargin-right: 10px;\n\tborder: 2px solid;\n\tborder-color: var(--x-captcha-spinner-border);\n\tborder-radius: 50%;\n\tanimation: x-captcha-spin 1s linear infinite;\n}\n\n/* Error state */\n.x-captcha-error {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 10px;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 100%;\n\theight: 100%;\n\tcolor: var(--x-captcha-error);\n\ttext-align: center;\n}\n\n.x-captcha-error-button {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tpadding: var(--x-captcha-spacing-sm) var(--x-captcha-spacing-md);\n\tcolor: var(--x-captcha-btn-text);\n\tfont-weight: 500;\n\tfont-size: var(--x-captcha-font-sm);\n\tbackground-color: var(--x-captcha-btn-bg);\n\tborder: 1px solid var(--x-captcha-border-light);\n\tborder-radius: var(--x-captcha-radius);\n\tbox-shadow: var(--x-captcha-shadow-sm);\n\tcursor: pointer;\n\ttransition: var(--x-captcha-transition-fast);\n}\n\n.x-captcha-error-button:hover,\n.x-captcha-error-button:focus {\n\tbackground-color: var(--x-captcha-btn-hover-bg) !important;\n}\n\n.x-captcha-error-button-icon {\n\tdisplay: flex;\n\talign-items: center;\n\tmargin-right: 6px;\n}\n\n/* Verified state */\n.x-captcha-verified {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 100%;\n\theight: 100%;\n\tcolor: var(--x-captcha-primary);\n\tfont-weight: 500;\n}\n\n/* Container for click captcha */\n.x-captcha-container {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 100%;\n\theight: 100%;\n\tpadding: 0 16px;\n\tborder-radius: var(--x-captcha-radius-sm);\n\tcursor: pointer;\n\ttransition: var(--x-captcha-transition-fast);\n}\n\n/* Checkbox styles */\n.x-captcha-checkbox {\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 24px;\n\theight: 24px;\n\tmargin-right: 10px;\n\tbackground-color: transparent;\n\tborder: 2px solid var(--x-captcha-primary);\n\tborder-radius: var(--x-captcha-radius-sm);\n\tbox-shadow: var(--x-captcha-shadow-sm);\n\ttransition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.x-captcha-checkbox-verifying,\n.x-captcha-checkbox-verified {\n\tbackground-color: var(--x-captcha-primary);\n\tborder-color: var(--x-captcha-primary);\n}\n\n.x-captcha-checkbox-error {\n\tbackground-color: var(--x-captcha-error);\n\tborder-color: var(--x-captcha-error);\n}\n\n.x-captcha-checkmark {\n\tcolor: var(--x-captcha-checkmark);\n\ttransform: scale(0);\n\topacity: 0;\n\ttransition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.x-captcha-checkmark-visible {\n\ttransform: scale(1);\n\topacity: 1;\n}\n\n.x-captcha-pulse {\n\tposition: absolute;\n\ttop: 50%;\n\tleft: 50%;\n\twidth: 0;\n\theight: 0;\n\tbackground-color: var(--x-captcha-primary);\n\tborder-radius: 50%;\n\ttransform: translate(-50%, -50%);\n\topacity: 0.2;\n\ttransition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.x-captcha-pulse-active {\n\twidth: 40px;\n\theight: 40px;\n\topacity: 0;\n}\n\n.x-captcha-text {\n\tcolor: var(--x-captcha-primary);\n\tfont-weight: 500;\n\tfont-size: var(--x-captcha-font-md);\n}\n\n.x-captcha-brand {\n\tposition: absolute;\n\tright: 8px;\n\tbottom: 5px;\n\tcolor: var(--x-captcha-text-light);\n\tfont-weight: 500;\n\tfont-size: var(--x-captcha-font-xs);\n}\n\n/* Verifying overlay */\n.x-captcha-verifying-overlay {\n\tposition: absolute;\n\tinset: 0;\n\tz-index: 10;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tbackground-color: var(--x-captcha-background);\n\tborder-radius: 4px;\n\tvisibility: hidden;\n\topacity: 0;\n\ttransition:\n\t\topacity 0.3s ease,\n\t\tvisibility 0.3s ease;\n}\n\n/* Styling for the verifying state is now redundant since we changed the base color */\n\n.x-captcha-verifying-overlay-visible {\n\tvisibility: visible;\n\topacity: 1;\n}\n","/* Form styles */\n\n/* Form container */\n.x-captcha-form {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 1.2rem;\n\twidth: 100%;\n\tfont-family: var(--x-captcha-font-family);\n}\n\n/* Container for child elements */\n.x-captcha-children-container {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 1rem;\n\twidth: 100%;\n}\n\n/* Container for the captcha widget */\n.x-captcha-captcha-container {\n\twidth: 100%;\n\tmargin: 1rem 0;\n}\n\n/* Error message styling */\n.x-captcha-error {\n\tdisplay: flex;\n\talign-items: center;\n\tmargin-top: -0.8rem;\n\tpadding: 4px 8px;\n\tcolor: var(--x-captcha-error);\n\tfont-size: var(--x-captcha-font-sm);\n\tbackground-color: rgb(211 47 47 / 8%);\n\tborder-radius: var(--x-captcha-radius-sm);\n}\n\n.x-captcha-error-icon {\n\tdisplay: flex;\n\talign-items: center;\n\tmargin-right: 8px;\n}\n\n/* Submit button styles */\n.x-captcha-submit-button {\n\tpadding: 0.8rem 1.5rem;\n\tfont-weight: 500;\n\tfont-size: var(--x-captcha-font-md);\n\tborder: none;\n\tborder-radius: var(--x-captcha-radius);\n\toutline: none;\n\toutline-offset: 2px;\n\tbox-shadow: none;\n\ttransform: translateY(0);\n\ttransition: var(--x-captcha-transition-fast);\n}\n\n/* Button states */\n.x-captcha-submit-button-active {\n\tcolor: var(--x-captcha-submit-btn-text);\n\tbackground-color: var(--x-captcha-submit-btn-bg);\n\tbox-shadow: var(--x-captcha-shadow);\n\tcursor: pointer;\n}\n\n.x-captcha-submit-button-disabled {\n\tcolor: var(--x-captcha-disabled);\n\tbackground-color: var(--x-captcha-disabled-bg);\n\tcursor: not-allowed;\n}\n\n/* Button interactive states */\n.x-captcha-submit-button-hover {\n\tbox-shadow: var(--x-captcha-shadow-lg);\n\ttransform: translateY(-2px);\n}\n\n.x-captcha-submit-button-focus {\n\toutline: 2px solid var(--x-captcha-submit-btn-outline);\n}\n","/* Main stylesheet for X-Captcha React SDK */\n\n/* Import local style modules */\n@import \"./captcha-widget.module.css\";\n@import \"./captcha-form.module.css\";\n@import \"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\";\n\n/* Global variables */\n:root,\nbody,\nhtml,\n.x-captcha-widget,\n.x-captcha-form {\n\t/* Colors */\n\t--x-captcha-primary: #4285f4;\n\t--x-captcha-error: #d32f2f;\n\t--x-captcha-text: #555;\n\t--x-captcha-text-light: #aaa;\n\t--x-captcha-background: #fff;\n\t--x-captcha-border-light: #e0e0e0;\n\t--x-captcha-disabled: #9e9e9e;\n\t--x-captcha-disabled-bg: #e0e0e0;\n\n\t/* Additional theme color variables */\n\t--x-captcha-checkmark: #fff;\n\t--x-captcha-btn-bg: #f8f8f8;\n\t--x-captcha-btn-text: var(--x-captcha-text);\n\t--x-captcha-btn-hover-bg: #f0f0f0;\n\t--x-captcha-submit-btn-bg: var(--x-captcha-primary);\n\t--x-captcha-submit-btn-text: #fff;\n\t--x-captcha-submit-btn-outline: rgb(66 133 244 / 25%);\n\t--x-captcha-spinner-border: var(--x-captcha-primary) transparent var(--x-captcha-primary) var(--x-captcha-primary);\n\n\t/* Shadows */\n\t--x-captcha-shadow-sm: 0 1px 3px rgb(0 0 0 / 8%);\n\t--x-captcha-shadow: 0 4px 6px rgb(0 0 0 / 5%), 0 1px 3px rgb(0 0 0 / 10%);\n\t--x-captcha-shadow-lg: 0 6px 12px rgb(0 0 0 / 18%), 0 4px 6px rgb(0 0 0 / 10%);\n\n\t/* Spacing */\n\t--x-captcha-spacing-xs: 4px;\n\t--x-captcha-spacing-sm: 8px;\n\t--x-captcha-spacing: 10px;\n\t--x-captcha-spacing-md: 16px;\n\t--x-captcha-spacing-lg: 24px;\n\n\t/* Font sizes */\n\t--x-captcha-font-xs: 10px;\n\t--x-captcha-font-sm: 14px;\n\t--x-captcha-font-md: 15px;\n\n\t/* Font family */\n\t--x-captcha-font-family: \"Inter\", -apple-system, blinkmacsystemfont, \"Segoe UI\", roboto, oxygen, ubuntu, cantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif;\n\n\t/* Border radius */\n\t--x-captcha-radius-sm: 4px;\n\t--x-captcha-radius: 6px;\n\t--x-captcha-radius-lg: 8px;\n\n\t/* Transitions */\n\t--x-captcha-transition-fast: all 0.2s ease;\n\t--x-captcha-transition: all 0.3s ease;\n\n\t/* Animations */\n\t--x-captcha-spin-animation: x-captcha-spin 1s linear infinite;\n}\n\n/* Animations */\n@keyframes x-captcha-spin {\n\t0% {\n\t\ttransform: rotate(0deg);\n\t}\n\n\t100% {\n\t\ttransform: rotate(360deg);\n\t}\n}\n\n@keyframes x-captcha-pulse {\n\t0% {\n\t\ttransform: translate(-50%, -50%) scale(0);\n\t\topacity: 0.2;\n\t}\n\n\t70% {\n\t\ttransform: translate(-50%, -50%) scale(2);\n\t\topacity: 0;\n\t}\n\n\t100% {\n\t\ttransform: translate(-50%, -50%) scale(2.5);\n\t\topacity: 0;\n\t}\n}\n\n@keyframes x-captcha-bounce {\n\t0%,\n\t20%,\n\t50%,\n\t80%,\n\t100% {\n\t\ttransform: translateY(0);\n\t}\n\n\t40% {\n\t\ttransform: translateY(-5px);\n\t}\n\n\t60% {\n\t\ttransform: translateY(-2px);\n\t}\n}\n"]}