@greghowe79/the-lib 2.14.8 → 2.14.9

package/lib/components/input/input.qwik.cjs

@@ -181,7 +181,30 @@ const Input = qwik.component$(({ id, type, placeholder, value, error, onValidate
                   class: "input-clear-btn",
                   onClick$: onPrefixClear$,
                   "aria-label": prefixClearLabel || "Clear phone number",
-                  children: "×"
+                  children: /* @__PURE__ */ jsxRuntime.jsxs("svg", {
+                    width: "18",
+                    height: "18",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    "stroke-width": "2",
+                    "stroke-linecap": "round",
+                    "stroke-linejoin": "round",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("line", {
+                        x1: "18",
+                        y1: "6",
+                        x2: "6",
+                        y2: "18"
+                      }),
+                      /* @__PURE__ */ jsxRuntime.jsx("line", {
+                        x1: "6",
+                        y1: "6",
+                        x2: "18",
+                        y2: "18"
+                      })
+                    ]
+                  })
                 })
               ]
             })

package/lib/components/input/input.qwik.mjs

@@ -179,7 +179,30 @@ const Input = component$(({ id, type, placeholder, value, error, onValidate$, on
                   class: "input-clear-btn",
                   onClick$: onPrefixClear$,
                   "aria-label": prefixClearLabel || "Clear phone number",
-                  children: "×"
+                  children: /* @__PURE__ */ jsxs("svg", {
+                    width: "18",
+                    height: "18",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    "stroke-width": "2",
+                    "stroke-linecap": "round",
+                    "stroke-linejoin": "round",
+                    children: [
+                      /* @__PURE__ */ jsx("line", {
+                        x1: "18",
+                        y1: "6",
+                        x2: "6",
+                        y2: "18"
+                      }),
+                      /* @__PURE__ */ jsx("line", {
+                        x1: "6",
+                        y1: "6",
+                        x2: "18",
+                        y2: "18"
+                      })
+                    ]
+                  })
                 })
               ]
             })

package/lib/components/input/styles.css.qwik.cjs

@@ -1,3 +1,3 @@
 "use strict";
-const styles = "/* .input-container {\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.input-label:not([type='checkbox']) {\r\n  font-size: 0.8125rem;\r\n  line-height: 1.85;\r\n  letter-spacing: 0.0625rem;\r\n  color: #333;\r\n  position: relative;\r\n  height: 3.29412rem;\r\n  display: flex;\r\n  min-width: 0;\r\n  background: rgba(0, 0, 0, 0.04);\r\n  transition:\r\n    color 0.15s ease,\r\n    box-shadow 0.15s ease,\r\n    background 0.15s ease;\r\n}\r\n\r\n.input-label.bg_light:not([type='checkbox']) {\r\n  background: white;\r\n  box-shadow: inset 0 0 0 1px #86868b;\r\n}\r\n\r\n.input-label.bg_light:not([type='checkbox']):focus-within {\r\n  box-shadow: inset 0 0 0 1.5px #007aff;\r\n}\r\n\r\n.input {\r\n  background: transparent;\r\n  padding: 0 0.9375rem;\r\n  flex: 1;\r\n  font-size: 1rem;\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n  font-weight: 100;\r\n  letter-spacing: inherit;\r\n  color: inherit;\r\n  height: 100%;\r\n  border: none;\r\n  -webkit-appearance: none;\r\n  -moz-appearance: none;\r\n  appearance: none;\r\n  white-space: nowrap;\r\n  text-overflow: ellipsis;\r\n  overflow: hidden;\r\n  width: calc(100% - 0.9375rem * 2);\r\n}\r\n\r\n.input::placeholder {\r\n  color: #6e6e73;\r\n}\r\n\r\n.input:focus {\r\n  outline: none;\r\n  opacity: 1;\r\n}\r\n\r\n.input-label {\r\n  border-radius: 0.75rem;\r\n  transition: box-shadow 0.15s ease;\r\n}\r\n\r\n.input-label:focus-within {\r\n  box-shadow: inset 0 0 0 1.5px #007aff;\r\n}\r\n\r\n.error-message {\r\n  color: #e74c3c;\r\n  font-size: 0.875rem;\r\n  margin-top: 0.25rem;\r\n  font-size: 1rem;\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.flex_wrapper {\r\n  display: flex;\r\n  justify-content: flex-start;\r\n  align-items: center;\r\n}\r\n\r\n.label_wrapper {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  border-radius: 0.75rem 0 0 0.75rem;\r\n  height: 3.29412rem;\r\n  background-color: #00758a;\r\n}\r\n\r\n.preview_container {\r\n  height: 3.29412rem;\r\n  display: flex;\r\n  align-items: center;\r\n  background: rgba(0, 0, 0, 0.04);\r\n  border-radius: 0 0.75rem 0.75rem 0;\r\n  color: #333;\r\n  letter-spacing: 0.0625rem;\r\n  font-size: 0.875rem;\r\n  width: calc(100% - 3.4375rem);\r\n}\r\n\r\n.prev_wrap {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: calc(100% - 6.25rem);\r\n}\r\n\r\n@media (max-width: 480px) {\r\n  .prev_wrap {\r\n    width: 100%;\r\n  }\r\n}\r\n\r\n.preview {\r\n  margin: 0;\r\n  border: none;\r\n}\r\n\r\n.input[type='file'] {\r\n  position: absolute;\r\n  width: 0.0625rem;\r\n  height: 0.0625rem;\r\n  padding: 0;\r\n  margin: -0.0625rem;\r\n  overflow: hidden;\r\n  clip: rect(0, 0, 0, 0);\r\n  border: 0;\r\n}\r\n\r\n.input-label {\r\n  cursor: pointer;\r\n}\r\n\r\n.input-label-upload {\r\n  cursor: pointer;\r\n  width: 6.25rem;\r\n  color: #fff;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  height: 3.4375rem;\r\n}\r\n\r\n.input-label:hover {\r\n  background-color: rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.input-wrapper {\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  width: 100%;\r\n  padding: 0 0.9375rem;\r\n}\r\n\r\n.input-icon {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  pointer-events: none;\r\n}\r\n\r\n.input.with-icon {\r\n  padding-left: 2.5rem;\r\n}\r\n.no_icon {\r\n  width: 100%;\r\n}\r\n\r\n.sr-only {\r\n  position: absolute;\r\n  width: 1px;\r\n  height: 1px;\r\n  padding: 0;\r\n  margin: -1px;\r\n  overflow: hidden;\r\n  clip: rect(0, 0, 0, 0);\r\n  white-space: nowrap;\r\n  border: 0;\r\n}\r\n\r\ninput[type='number']::-webkit-outer-spin-button,\r\ninput[type='number']::-webkit-inner-spin-button {\r\n  -webkit-appearance: none;\r\n  margin: 0;\r\n}\r\n\r\ninput[type='number'] {\r\n  -moz-appearance: textfield;\r\n  appearance: textfield;\r\n}\r\n\r\n.password-toggle-btn {\r\n  position: absolute;\r\n  right: 12px;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n  background: none;\r\n  border: none;\r\n  cursor: pointer;\r\n  padding: 4px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  color: inherit;\r\n  opacity: 0.6;\r\n  transition: opacity 0.2s;\r\n}\r\n\r\n.password-toggle-btn:focus {\r\n  outline: none;\r\n}\r\n\r\n.input-wrapper {\r\n  position: relative;\r\n}\r\n\r\ninput:-webkit-autofill,\r\ninput:-webkit-autofill:hover,\r\ninput:-webkit-autofill:focus,\r\ninput:-webkit-autofill:active {\r\n  -webkit-text-fill-color: #333 !important;\r\n  font-family: 'Roboto Condensed', sans-serif !important;\r\n  font-size: 1rem !important;\r\n  font-weight: 100 !important;\r\n  letter-spacing: inherit !important;\r\n  color: #333 !important;\r\n\r\n  transition:\r\n    background-color 600000s 0s,\r\n    color 600000s 0s !important;\r\n}\r\n\r\n.input-label.bg_light input:-webkit-autofill,\r\n.input-label.bg_light .input-wrapper input:-webkit-autofill {\r\n  background-color: #ffffff !important;\r\n}\r\n\r\n.input-label:not(.bg_light) input:-webkit-autofill,\r\n.input-label:not(.bg_light) .input-wrapper input:-webkit-autofill {\r\n  background-color: #f5f5f5 !important;\r\n} */\r\n\r\n.input-container {\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.input-label:not([type='checkbox']) {\r\n  font-size: 0.8125rem;\r\n  line-height: 1.85;\r\n  letter-spacing: 0.0625rem;\r\n  color: #333;\r\n  position: relative;\r\n  height: 3.29412rem;\r\n  display: flex;\r\n  min-width: 0;\r\n  background: rgba(0, 0, 0, 0.04);\r\n  transition:\r\n    color 0.15s ease,\r\n    box-shadow 0.15s ease,\r\n    background 0.15s ease;\r\n}\r\n\r\n.input-label.bg_light:not([type='checkbox']) {\r\n  background: white;\r\n  box-shadow: inset 0 0 0 1px #86868b;\r\n}\r\n\r\n.input-label.bg_light:not([type='checkbox']):focus-within {\r\n  box-shadow: inset 0 0 0 1.5px #007aff;\r\n}\r\n\r\n.input-label.has-visible-label:not([type='checkbox']) {\r\n  height: auto;\r\n  flex-direction: column;\r\n  padding-top: 0.25rem;\r\n}\r\n\r\n.input-label.has-visible-label .no_icon,\r\n.input-label.has-visible-label .input-wrapper {\r\n  height: 2.75rem;\r\n}\r\n\r\n.input {\r\n  background: transparent;\r\n  padding: 0 0.9375rem;\r\n  flex: 1;\r\n  font-size: 1rem;\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n  font-weight: 100;\r\n  letter-spacing: inherit;\r\n  color: inherit;\r\n  height: 100%;\r\n  border: none;\r\n  -webkit-appearance: none;\r\n  -moz-appearance: none;\r\n  appearance: none;\r\n  white-space: nowrap;\r\n  text-overflow: ellipsis;\r\n  overflow: hidden;\r\n  width: calc(100% - 0.9375rem * 2);\r\n}\r\n\r\n.input::placeholder {\r\n  color: #6e6e73;\r\n}\r\n\r\n.input:focus {\r\n  outline: none;\r\n  opacity: 1;\r\n}\r\n\r\n.input-label {\r\n  border-radius: 0.75rem;\r\n  transition: box-shadow 0.15s ease;\r\n}\r\n\r\n.input-label:focus-within {\r\n  box-shadow: inset 0 0 0 1.5px #007aff;\r\n}\r\n\r\n.input-visible-label {\r\n  display: block;\r\n  font-size: 0.75rem;\r\n  font-weight: 600;\r\n  color: #6e6e73;\r\n  padding: 0.25rem 0.9375rem 0;\r\n  line-height: 1.2;\r\n}\r\n\r\n.error-message {\r\n  color: #e74c3c;\r\n  font-size: 0.875rem;\r\n  margin-top: 0.25rem;\r\n  font-size: 1rem;\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.flex_wrapper {\r\n  display: flex;\r\n  justify-content: flex-start;\r\n  align-items: center;\r\n}\r\n\r\n.label_wrapper {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  border-radius: 0.75rem 0 0 0.75rem;\r\n  height: 3.29412rem;\r\n  background-color: #00758a;\r\n}\r\n\r\n.preview_container {\r\n  height: 3.29412rem;\r\n  display: flex;\r\n  align-items: center;\r\n  background: rgba(0, 0, 0, 0.04);\r\n  border-radius: 0 0.75rem 0.75rem 0;\r\n  color: #333;\r\n  letter-spacing: 0.0625rem;\r\n  font-size: 0.875rem;\r\n  width: calc(100% - 3.4375rem);\r\n}\r\n\r\n.prev_wrap {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: calc(100% - 6.25rem);\r\n}\r\n\r\n@media (max-width: 480px) {\r\n  .prev_wrap {\r\n    width: 100%;\r\n  }\r\n}\r\n\r\n.preview {\r\n  margin: 0;\r\n  border: none;\r\n}\r\n\r\n.input[type='file'] {\r\n  position: absolute;\r\n  width: 0.0625rem;\r\n  height: 0.0625rem;\r\n  padding: 0;\r\n  margin: -0.0625rem;\r\n  overflow: hidden;\r\n  clip: rect(0, 0, 0, 0);\r\n  border: 0;\r\n}\r\n\r\n.input-label {\r\n  cursor: pointer;\r\n}\r\n\r\n.input-label-upload {\r\n  cursor: pointer;\r\n  width: 6.25rem;\r\n  color: #fff;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  height: 3.4375rem;\r\n}\r\n\r\n.input-label:hover {\r\n  background-color: rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.input-wrapper {\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  width: 100%;\r\n  padding: 0 0.9375rem;\r\n}\r\n\r\n.input-icon {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  pointer-events: none;\r\n}\r\n\r\n.input.with-icon {\r\n  padding-left: 2.5rem;\r\n}\r\n.no_icon {\r\n  width: 100%;\r\n}\r\n\r\n.sr-only {\r\n  position: absolute;\r\n  width: 1px;\r\n  height: 1px;\r\n  padding: 0;\r\n  margin: -1px;\r\n  overflow: hidden;\r\n  clip: rect(0, 0, 0, 0);\r\n  white-space: nowrap;\r\n  border: 0;\r\n}\r\n\r\ninput[type='number']::-webkit-outer-spin-button,\r\ninput[type='number']::-webkit-inner-spin-button {\r\n  -webkit-appearance: none;\r\n  margin: 0;\r\n}\r\n\r\ninput[type='number'] {\r\n  -moz-appearance: textfield;\r\n  appearance: textfield;\r\n}\r\n\r\n.password-toggle-btn {\r\n  position: absolute;\r\n  right: 12px;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n  background: none;\r\n  border: none;\r\n  cursor: pointer;\r\n  padding: 4px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  color: inherit;\r\n  opacity: 0.6;\r\n  transition: opacity 0.2s;\r\n}\r\n\r\n.password-toggle-btn:focus {\r\n  outline: none;\r\n}\r\n\r\n.input-wrapper {\r\n  position: relative;\r\n}\r\n\r\ninput:-webkit-autofill,\r\ninput:-webkit-autofill:hover,\r\ninput:-webkit-autofill:focus,\r\ninput:-webkit-autofill:active {\r\n  -webkit-text-fill-color: #333 !important;\r\n  font-family: 'Roboto Condensed', sans-serif !important;\r\n  font-size: 1rem !important;\r\n  font-weight: 100 !important;\r\n  letter-spacing: inherit !important;\r\n  color: #333 !important;\r\n  transition:\r\n    background-color 600000s 0s,\r\n    color 600000s 0s !important;\r\n}\r\n\r\n.input-label.bg_light input:-webkit-autofill,\r\n.input-label.bg_light .input-wrapper input:-webkit-autofill {\r\n  background-color: #ffffff !important;\r\n}\r\n\r\n.input-label:not(.bg_light) input:-webkit-autofill,\r\n.input-label:not(.bg_light) .input-wrapper input:-webkit-autofill {\r\n  background-color: #f5f5f5 !important;\r\n}\r\n\r\n.input-clear-btn {\r\n  background: none;\r\n  border: none;\r\n  cursor: pointer;\r\n  padding: 0 0.75rem;\r\n  font-size: 1.125rem;\r\n  color: #6e6e73;\r\n  line-height: 1;\r\n  flex-shrink: 0;\r\n}\r\n\r\n.input-clear-btn:hover {\r\n  color: #333;\r\n}\r\n";
+const styles = "/* .input-container {\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.input-label:not([type='checkbox']) {\r\n  font-size: 0.8125rem;\r\n  line-height: 1.85;\r\n  letter-spacing: 0.0625rem;\r\n  color: #333;\r\n  position: relative;\r\n  height: 3.29412rem;\r\n  display: flex;\r\n  min-width: 0;\r\n  background: rgba(0, 0, 0, 0.04);\r\n  transition:\r\n    color 0.15s ease,\r\n    box-shadow 0.15s ease,\r\n    background 0.15s ease;\r\n}\r\n\r\n.input-label.bg_light:not([type='checkbox']) {\r\n  background: white;\r\n  box-shadow: inset 0 0 0 1px #86868b;\r\n}\r\n\r\n.input-label.bg_light:not([type='checkbox']):focus-within {\r\n  box-shadow: inset 0 0 0 1.5px #007aff;\r\n}\r\n\r\n.input {\r\n  background: transparent;\r\n  padding: 0 0.9375rem;\r\n  flex: 1;\r\n  font-size: 1rem;\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n  font-weight: 100;\r\n  letter-spacing: inherit;\r\n  color: inherit;\r\n  height: 100%;\r\n  border: none;\r\n  -webkit-appearance: none;\r\n  -moz-appearance: none;\r\n  appearance: none;\r\n  white-space: nowrap;\r\n  text-overflow: ellipsis;\r\n  overflow: hidden;\r\n  width: calc(100% - 0.9375rem * 2);\r\n}\r\n\r\n.input::placeholder {\r\n  color: #6e6e73;\r\n}\r\n\r\n.input:focus {\r\n  outline: none;\r\n  opacity: 1;\r\n}\r\n\r\n.input-label {\r\n  border-radius: 0.75rem;\r\n  transition: box-shadow 0.15s ease;\r\n}\r\n\r\n.input-label:focus-within {\r\n  box-shadow: inset 0 0 0 1.5px #007aff;\r\n}\r\n\r\n.error-message {\r\n  color: #e74c3c;\r\n  font-size: 0.875rem;\r\n  margin-top: 0.25rem;\r\n  font-size: 1rem;\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.flex_wrapper {\r\n  display: flex;\r\n  justify-content: flex-start;\r\n  align-items: center;\r\n}\r\n\r\n.label_wrapper {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  border-radius: 0.75rem 0 0 0.75rem;\r\n  height: 3.29412rem;\r\n  background-color: #00758a;\r\n}\r\n\r\n.preview_container {\r\n  height: 3.29412rem;\r\n  display: flex;\r\n  align-items: center;\r\n  background: rgba(0, 0, 0, 0.04);\r\n  border-radius: 0 0.75rem 0.75rem 0;\r\n  color: #333;\r\n  letter-spacing: 0.0625rem;\r\n  font-size: 0.875rem;\r\n  width: calc(100% - 3.4375rem);\r\n}\r\n\r\n.prev_wrap {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: calc(100% - 6.25rem);\r\n}\r\n\r\n@media (max-width: 480px) {\r\n  .prev_wrap {\r\n    width: 100%;\r\n  }\r\n}\r\n\r\n.preview {\r\n  margin: 0;\r\n  border: none;\r\n}\r\n\r\n.input[type='file'] {\r\n  position: absolute;\r\n  width: 0.0625rem;\r\n  height: 0.0625rem;\r\n  padding: 0;\r\n  margin: -0.0625rem;\r\n  overflow: hidden;\r\n  clip: rect(0, 0, 0, 0);\r\n  border: 0;\r\n}\r\n\r\n.input-label {\r\n  cursor: pointer;\r\n}\r\n\r\n.input-label-upload {\r\n  cursor: pointer;\r\n  width: 6.25rem;\r\n  color: #fff;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  height: 3.4375rem;\r\n}\r\n\r\n.input-label:hover {\r\n  background-color: rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.input-wrapper {\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  width: 100%;\r\n  padding: 0 0.9375rem;\r\n}\r\n\r\n.input-icon {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  pointer-events: none;\r\n}\r\n\r\n.input.with-icon {\r\n  padding-left: 2.5rem;\r\n}\r\n.no_icon {\r\n  width: 100%;\r\n}\r\n\r\n.sr-only {\r\n  position: absolute;\r\n  width: 1px;\r\n  height: 1px;\r\n  padding: 0;\r\n  margin: -1px;\r\n  overflow: hidden;\r\n  clip: rect(0, 0, 0, 0);\r\n  white-space: nowrap;\r\n  border: 0;\r\n}\r\n\r\ninput[type='number']::-webkit-outer-spin-button,\r\ninput[type='number']::-webkit-inner-spin-button {\r\n  -webkit-appearance: none;\r\n  margin: 0;\r\n}\r\n\r\ninput[type='number'] {\r\n  -moz-appearance: textfield;\r\n  appearance: textfield;\r\n}\r\n\r\n.password-toggle-btn {\r\n  position: absolute;\r\n  right: 12px;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n  background: none;\r\n  border: none;\r\n  cursor: pointer;\r\n  padding: 4px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  color: inherit;\r\n  opacity: 0.6;\r\n  transition: opacity 0.2s;\r\n}\r\n\r\n.password-toggle-btn:focus {\r\n  outline: none;\r\n}\r\n\r\n.input-wrapper {\r\n  position: relative;\r\n}\r\n\r\ninput:-webkit-autofill,\r\ninput:-webkit-autofill:hover,\r\ninput:-webkit-autofill:focus,\r\ninput:-webkit-autofill:active {\r\n  -webkit-text-fill-color: #333 !important;\r\n  font-family: 'Roboto Condensed', sans-serif !important;\r\n  font-size: 1rem !important;\r\n  font-weight: 100 !important;\r\n  letter-spacing: inherit !important;\r\n  color: #333 !important;\r\n\r\n  transition:\r\n    background-color 600000s 0s,\r\n    color 600000s 0s !important;\r\n}\r\n\r\n.input-label.bg_light input:-webkit-autofill,\r\n.input-label.bg_light .input-wrapper input:-webkit-autofill {\r\n  background-color: #ffffff !important;\r\n}\r\n\r\n.input-label:not(.bg_light) input:-webkit-autofill,\r\n.input-label:not(.bg_light) .input-wrapper input:-webkit-autofill {\r\n  background-color: #f5f5f5 !important;\r\n} */\r\n\r\n.input-container {\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.input-label:not([type='checkbox']) {\r\n  font-size: 0.8125rem;\r\n  line-height: 1.85;\r\n  letter-spacing: 0.0625rem;\r\n  color: #333;\r\n  position: relative;\r\n  height: 3.29412rem;\r\n  display: flex;\r\n  min-width: 0;\r\n  background: rgba(0, 0, 0, 0.04);\r\n  transition:\r\n    color 0.15s ease,\r\n    box-shadow 0.15s ease,\r\n    background 0.15s ease;\r\n}\r\n\r\n.input-label.bg_light:not([type='checkbox']) {\r\n  background: white;\r\n  box-shadow: inset 0 0 0 1px #86868b;\r\n}\r\n\r\n.input-label.bg_light:not([type='checkbox']):focus-within {\r\n  box-shadow: inset 0 0 0 1.5px #007aff;\r\n}\r\n\r\n.input-label.has-visible-label:not([type='checkbox']) {\r\n  height: auto;\r\n  flex-direction: column;\r\n  padding-top: 0.25rem;\r\n}\r\n\r\n.input-label.has-visible-label .no_icon,\r\n.input-label.has-visible-label .input-wrapper {\r\n  height: 2.75rem;\r\n}\r\n\r\n.input {\r\n  background: transparent;\r\n  padding: 0 0.9375rem;\r\n  flex: 1;\r\n  font-size: 1rem;\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n  font-weight: 100;\r\n  letter-spacing: inherit;\r\n  color: inherit;\r\n  height: 100%;\r\n  border: none;\r\n  -webkit-appearance: none;\r\n  -moz-appearance: none;\r\n  appearance: none;\r\n  white-space: nowrap;\r\n  text-overflow: ellipsis;\r\n  overflow: hidden;\r\n  width: calc(100% - 0.9375rem * 2);\r\n}\r\n\r\n.input::placeholder {\r\n  color: #6e6e73;\r\n}\r\n\r\n.input:focus {\r\n  outline: none;\r\n  opacity: 1;\r\n}\r\n\r\n.input-label {\r\n  border-radius: 0.75rem;\r\n  transition: box-shadow 0.15s ease;\r\n}\r\n\r\n.input-label:focus-within {\r\n  box-shadow: inset 0 0 0 1.5px #007aff;\r\n}\r\n\r\n.input-visible-label {\r\n  display: block;\r\n  font-size: 0.75rem;\r\n  font-weight: 600;\r\n  color: #6e6e73;\r\n  padding: 0.25rem 0.9375rem 0;\r\n  line-height: 1.2;\r\n}\r\n\r\n.error-message {\r\n  color: #e74c3c;\r\n  font-size: 0.875rem;\r\n  margin-top: 0.25rem;\r\n  font-size: 1rem;\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.flex_wrapper {\r\n  display: flex;\r\n  justify-content: flex-start;\r\n  align-items: center;\r\n}\r\n\r\n.label_wrapper {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  border-radius: 0.75rem 0 0 0.75rem;\r\n  height: 3.29412rem;\r\n  background-color: #00758a;\r\n}\r\n\r\n.preview_container {\r\n  height: 3.29412rem;\r\n  display: flex;\r\n  align-items: center;\r\n  background: rgba(0, 0, 0, 0.04);\r\n  border-radius: 0 0.75rem 0.75rem 0;\r\n  color: #333;\r\n  letter-spacing: 0.0625rem;\r\n  font-size: 0.875rem;\r\n  width: calc(100% - 3.4375rem);\r\n}\r\n\r\n.prev_wrap {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: calc(100% - 6.25rem);\r\n}\r\n\r\n@media (max-width: 480px) {\r\n  .prev_wrap {\r\n    width: 100%;\r\n  }\r\n}\r\n\r\n.preview {\r\n  margin: 0;\r\n  border: none;\r\n}\r\n\r\n.input[type='file'] {\r\n  position: absolute;\r\n  width: 0.0625rem;\r\n  height: 0.0625rem;\r\n  padding: 0;\r\n  margin: -0.0625rem;\r\n  overflow: hidden;\r\n  clip: rect(0, 0, 0, 0);\r\n  border: 0;\r\n}\r\n\r\n.input-label {\r\n  cursor: pointer;\r\n}\r\n\r\n.input-label-upload {\r\n  cursor: pointer;\r\n  width: 6.25rem;\r\n  color: #fff;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  height: 3.4375rem;\r\n}\r\n\r\n.input-label:hover {\r\n  background-color: rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.input-wrapper {\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  width: 100%;\r\n  padding: 0 0.9375rem;\r\n}\r\n\r\n.input-icon {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  pointer-events: none;\r\n}\r\n\r\n.input.with-icon {\r\n  padding-left: 2.5rem;\r\n}\r\n.no_icon {\r\n  width: 100%;\r\n}\r\n\r\n.sr-only {\r\n  position: absolute;\r\n  width: 1px;\r\n  height: 1px;\r\n  padding: 0;\r\n  margin: -1px;\r\n  overflow: hidden;\r\n  clip: rect(0, 0, 0, 0);\r\n  white-space: nowrap;\r\n  border: 0;\r\n}\r\n\r\ninput[type='number']::-webkit-outer-spin-button,\r\ninput[type='number']::-webkit-inner-spin-button {\r\n  -webkit-appearance: none;\r\n  margin: 0;\r\n}\r\n\r\ninput[type='number'] {\r\n  -moz-appearance: textfield;\r\n  appearance: textfield;\r\n}\r\n\r\n.password-toggle-btn {\r\n  position: absolute;\r\n  right: 12px;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n  background: none;\r\n  border: none;\r\n  cursor: pointer;\r\n  padding: 4px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  color: inherit;\r\n  opacity: 0.6;\r\n  transition: opacity 0.2s;\r\n}\r\n\r\n.password-toggle-btn:focus {\r\n  outline: none;\r\n}\r\n\r\n.input-wrapper {\r\n  position: relative;\r\n}\r\n\r\ninput:-webkit-autofill,\r\ninput:-webkit-autofill:hover,\r\ninput:-webkit-autofill:focus,\r\ninput:-webkit-autofill:active {\r\n  -webkit-text-fill-color: #333 !important;\r\n  font-family: 'Roboto Condensed', sans-serif !important;\r\n  font-size: 1rem !important;\r\n  font-weight: 100 !important;\r\n  letter-spacing: inherit !important;\r\n  color: #333 !important;\r\n  transition:\r\n    background-color 600000s 0s,\r\n    color 600000s 0s !important;\r\n}\r\n\r\n.input-label.bg_light input:-webkit-autofill,\r\n.input-label.bg_light .input-wrapper input:-webkit-autofill {\r\n  background-color: #ffffff !important;\r\n}\r\n\r\n.input-label:not(.bg_light) input:-webkit-autofill,\r\n.input-label:not(.bg_light) .input-wrapper input:-webkit-autofill {\r\n  background-color: #f5f5f5 !important;\r\n}\r\n\r\n.input-clear-btn {\r\n  background: none;\r\n  border: none;\r\n  cursor: pointer;\r\n  padding: 0 0.75rem;\r\n  color: #6e6e73;\r\n  line-height: 1;\r\n  flex-shrink: 0;\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n.input-clear-btn:hover {\r\n  color: #333;\r\n}\r\n";
 module.exports = styles;

package/lib/components/input/styles.css.qwik.mjs

@@ -1,4 +1,4 @@
-const styles = "/* .input-container {\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.input-label:not([type='checkbox']) {\r\n  font-size: 0.8125rem;\r\n  line-height: 1.85;\r\n  letter-spacing: 0.0625rem;\r\n  color: #333;\r\n  position: relative;\r\n  height: 3.29412rem;\r\n  display: flex;\r\n  min-width: 0;\r\n  background: rgba(0, 0, 0, 0.04);\r\n  transition:\r\n    color 0.15s ease,\r\n    box-shadow 0.15s ease,\r\n    background 0.15s ease;\r\n}\r\n\r\n.input-label.bg_light:not([type='checkbox']) {\r\n  background: white;\r\n  box-shadow: inset 0 0 0 1px #86868b;\r\n}\r\n\r\n.input-label.bg_light:not([type='checkbox']):focus-within {\r\n  box-shadow: inset 0 0 0 1.5px #007aff;\r\n}\r\n\r\n.input {\r\n  background: transparent;\r\n  padding: 0 0.9375rem;\r\n  flex: 1;\r\n  font-size: 1rem;\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n  font-weight: 100;\r\n  letter-spacing: inherit;\r\n  color: inherit;\r\n  height: 100%;\r\n  border: none;\r\n  -webkit-appearance: none;\r\n  -moz-appearance: none;\r\n  appearance: none;\r\n  white-space: nowrap;\r\n  text-overflow: ellipsis;\r\n  overflow: hidden;\r\n  width: calc(100% - 0.9375rem * 2);\r\n}\r\n\r\n.input::placeholder {\r\n  color: #6e6e73;\r\n}\r\n\r\n.input:focus {\r\n  outline: none;\r\n  opacity: 1;\r\n}\r\n\r\n.input-label {\r\n  border-radius: 0.75rem;\r\n  transition: box-shadow 0.15s ease;\r\n}\r\n\r\n.input-label:focus-within {\r\n  box-shadow: inset 0 0 0 1.5px #007aff;\r\n}\r\n\r\n.error-message {\r\n  color: #e74c3c;\r\n  font-size: 0.875rem;\r\n  margin-top: 0.25rem;\r\n  font-size: 1rem;\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.flex_wrapper {\r\n  display: flex;\r\n  justify-content: flex-start;\r\n  align-items: center;\r\n}\r\n\r\n.label_wrapper {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  border-radius: 0.75rem 0 0 0.75rem;\r\n  height: 3.29412rem;\r\n  background-color: #00758a;\r\n}\r\n\r\n.preview_container {\r\n  height: 3.29412rem;\r\n  display: flex;\r\n  align-items: center;\r\n  background: rgba(0, 0, 0, 0.04);\r\n  border-radius: 0 0.75rem 0.75rem 0;\r\n  color: #333;\r\n  letter-spacing: 0.0625rem;\r\n  font-size: 0.875rem;\r\n  width: calc(100% - 3.4375rem);\r\n}\r\n\r\n.prev_wrap {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: calc(100% - 6.25rem);\r\n}\r\n\r\n@media (max-width: 480px) {\r\n  .prev_wrap {\r\n    width: 100%;\r\n  }\r\n}\r\n\r\n.preview {\r\n  margin: 0;\r\n  border: none;\r\n}\r\n\r\n.input[type='file'] {\r\n  position: absolute;\r\n  width: 0.0625rem;\r\n  height: 0.0625rem;\r\n  padding: 0;\r\n  margin: -0.0625rem;\r\n  overflow: hidden;\r\n  clip: rect(0, 0, 0, 0);\r\n  border: 0;\r\n}\r\n\r\n.input-label {\r\n  cursor: pointer;\r\n}\r\n\r\n.input-label-upload {\r\n  cursor: pointer;\r\n  width: 6.25rem;\r\n  color: #fff;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  height: 3.4375rem;\r\n}\r\n\r\n.input-label:hover {\r\n  background-color: rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.input-wrapper {\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  width: 100%;\r\n  padding: 0 0.9375rem;\r\n}\r\n\r\n.input-icon {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  pointer-events: none;\r\n}\r\n\r\n.input.with-icon {\r\n  padding-left: 2.5rem;\r\n}\r\n.no_icon {\r\n  width: 100%;\r\n}\r\n\r\n.sr-only {\r\n  position: absolute;\r\n  width: 1px;\r\n  height: 1px;\r\n  padding: 0;\r\n  margin: -1px;\r\n  overflow: hidden;\r\n  clip: rect(0, 0, 0, 0);\r\n  white-space: nowrap;\r\n  border: 0;\r\n}\r\n\r\ninput[type='number']::-webkit-outer-spin-button,\r\ninput[type='number']::-webkit-inner-spin-button {\r\n  -webkit-appearance: none;\r\n  margin: 0;\r\n}\r\n\r\ninput[type='number'] {\r\n  -moz-appearance: textfield;\r\n  appearance: textfield;\r\n}\r\n\r\n.password-toggle-btn {\r\n  position: absolute;\r\n  right: 12px;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n  background: none;\r\n  border: none;\r\n  cursor: pointer;\r\n  padding: 4px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  color: inherit;\r\n  opacity: 0.6;\r\n  transition: opacity 0.2s;\r\n}\r\n\r\n.password-toggle-btn:focus {\r\n  outline: none;\r\n}\r\n\r\n.input-wrapper {\r\n  position: relative;\r\n}\r\n\r\ninput:-webkit-autofill,\r\ninput:-webkit-autofill:hover,\r\ninput:-webkit-autofill:focus,\r\ninput:-webkit-autofill:active {\r\n  -webkit-text-fill-color: #333 !important;\r\n  font-family: 'Roboto Condensed', sans-serif !important;\r\n  font-size: 1rem !important;\r\n  font-weight: 100 !important;\r\n  letter-spacing: inherit !important;\r\n  color: #333 !important;\r\n\r\n  transition:\r\n    background-color 600000s 0s,\r\n    color 600000s 0s !important;\r\n}\r\n\r\n.input-label.bg_light input:-webkit-autofill,\r\n.input-label.bg_light .input-wrapper input:-webkit-autofill {\r\n  background-color: #ffffff !important;\r\n}\r\n\r\n.input-label:not(.bg_light) input:-webkit-autofill,\r\n.input-label:not(.bg_light) .input-wrapper input:-webkit-autofill {\r\n  background-color: #f5f5f5 !important;\r\n} */\r\n\r\n.input-container {\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.input-label:not([type='checkbox']) {\r\n  font-size: 0.8125rem;\r\n  line-height: 1.85;\r\n  letter-spacing: 0.0625rem;\r\n  color: #333;\r\n  position: relative;\r\n  height: 3.29412rem;\r\n  display: flex;\r\n  min-width: 0;\r\n  background: rgba(0, 0, 0, 0.04);\r\n  transition:\r\n    color 0.15s ease,\r\n    box-shadow 0.15s ease,\r\n    background 0.15s ease;\r\n}\r\n\r\n.input-label.bg_light:not([type='checkbox']) {\r\n  background: white;\r\n  box-shadow: inset 0 0 0 1px #86868b;\r\n}\r\n\r\n.input-label.bg_light:not([type='checkbox']):focus-within {\r\n  box-shadow: inset 0 0 0 1.5px #007aff;\r\n}\r\n\r\n.input-label.has-visible-label:not([type='checkbox']) {\r\n  height: auto;\r\n  flex-direction: column;\r\n  padding-top: 0.25rem;\r\n}\r\n\r\n.input-label.has-visible-label .no_icon,\r\n.input-label.has-visible-label .input-wrapper {\r\n  height: 2.75rem;\r\n}\r\n\r\n.input {\r\n  background: transparent;\r\n  padding: 0 0.9375rem;\r\n  flex: 1;\r\n  font-size: 1rem;\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n  font-weight: 100;\r\n  letter-spacing: inherit;\r\n  color: inherit;\r\n  height: 100%;\r\n  border: none;\r\n  -webkit-appearance: none;\r\n  -moz-appearance: none;\r\n  appearance: none;\r\n  white-space: nowrap;\r\n  text-overflow: ellipsis;\r\n  overflow: hidden;\r\n  width: calc(100% - 0.9375rem * 2);\r\n}\r\n\r\n.input::placeholder {\r\n  color: #6e6e73;\r\n}\r\n\r\n.input:focus {\r\n  outline: none;\r\n  opacity: 1;\r\n}\r\n\r\n.input-label {\r\n  border-radius: 0.75rem;\r\n  transition: box-shadow 0.15s ease;\r\n}\r\n\r\n.input-label:focus-within {\r\n  box-shadow: inset 0 0 0 1.5px #007aff;\r\n}\r\n\r\n.input-visible-label {\r\n  display: block;\r\n  font-size: 0.75rem;\r\n  font-weight: 600;\r\n  color: #6e6e73;\r\n  padding: 0.25rem 0.9375rem 0;\r\n  line-height: 1.2;\r\n}\r\n\r\n.error-message {\r\n  color: #e74c3c;\r\n  font-size: 0.875rem;\r\n  margin-top: 0.25rem;\r\n  font-size: 1rem;\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.flex_wrapper {\r\n  display: flex;\r\n  justify-content: flex-start;\r\n  align-items: center;\r\n}\r\n\r\n.label_wrapper {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  border-radius: 0.75rem 0 0 0.75rem;\r\n  height: 3.29412rem;\r\n  background-color: #00758a;\r\n}\r\n\r\n.preview_container {\r\n  height: 3.29412rem;\r\n  display: flex;\r\n  align-items: center;\r\n  background: rgba(0, 0, 0, 0.04);\r\n  border-radius: 0 0.75rem 0.75rem 0;\r\n  color: #333;\r\n  letter-spacing: 0.0625rem;\r\n  font-size: 0.875rem;\r\n  width: calc(100% - 3.4375rem);\r\n}\r\n\r\n.prev_wrap {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: calc(100% - 6.25rem);\r\n}\r\n\r\n@media (max-width: 480px) {\r\n  .prev_wrap {\r\n    width: 100%;\r\n  }\r\n}\r\n\r\n.preview {\r\n  margin: 0;\r\n  border: none;\r\n}\r\n\r\n.input[type='file'] {\r\n  position: absolute;\r\n  width: 0.0625rem;\r\n  height: 0.0625rem;\r\n  padding: 0;\r\n  margin: -0.0625rem;\r\n  overflow: hidden;\r\n  clip: rect(0, 0, 0, 0);\r\n  border: 0;\r\n}\r\n\r\n.input-label {\r\n  cursor: pointer;\r\n}\r\n\r\n.input-label-upload {\r\n  cursor: pointer;\r\n  width: 6.25rem;\r\n  color: #fff;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  height: 3.4375rem;\r\n}\r\n\r\n.input-label:hover {\r\n  background-color: rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.input-wrapper {\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  width: 100%;\r\n  padding: 0 0.9375rem;\r\n}\r\n\r\n.input-icon {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  pointer-events: none;\r\n}\r\n\r\n.input.with-icon {\r\n  padding-left: 2.5rem;\r\n}\r\n.no_icon {\r\n  width: 100%;\r\n}\r\n\r\n.sr-only {\r\n  position: absolute;\r\n  width: 1px;\r\n  height: 1px;\r\n  padding: 0;\r\n  margin: -1px;\r\n  overflow: hidden;\r\n  clip: rect(0, 0, 0, 0);\r\n  white-space: nowrap;\r\n  border: 0;\r\n}\r\n\r\ninput[type='number']::-webkit-outer-spin-button,\r\ninput[type='number']::-webkit-inner-spin-button {\r\n  -webkit-appearance: none;\r\n  margin: 0;\r\n}\r\n\r\ninput[type='number'] {\r\n  -moz-appearance: textfield;\r\n  appearance: textfield;\r\n}\r\n\r\n.password-toggle-btn {\r\n  position: absolute;\r\n  right: 12px;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n  background: none;\r\n  border: none;\r\n  cursor: pointer;\r\n  padding: 4px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  color: inherit;\r\n  opacity: 0.6;\r\n  transition: opacity 0.2s;\r\n}\r\n\r\n.password-toggle-btn:focus {\r\n  outline: none;\r\n}\r\n\r\n.input-wrapper {\r\n  position: relative;\r\n}\r\n\r\ninput:-webkit-autofill,\r\ninput:-webkit-autofill:hover,\r\ninput:-webkit-autofill:focus,\r\ninput:-webkit-autofill:active {\r\n  -webkit-text-fill-color: #333 !important;\r\n  font-family: 'Roboto Condensed', sans-serif !important;\r\n  font-size: 1rem !important;\r\n  font-weight: 100 !important;\r\n  letter-spacing: inherit !important;\r\n  color: #333 !important;\r\n  transition:\r\n    background-color 600000s 0s,\r\n    color 600000s 0s !important;\r\n}\r\n\r\n.input-label.bg_light input:-webkit-autofill,\r\n.input-label.bg_light .input-wrapper input:-webkit-autofill {\r\n  background-color: #ffffff !important;\r\n}\r\n\r\n.input-label:not(.bg_light) input:-webkit-autofill,\r\n.input-label:not(.bg_light) .input-wrapper input:-webkit-autofill {\r\n  background-color: #f5f5f5 !important;\r\n}\r\n\r\n.input-clear-btn {\r\n  background: none;\r\n  border: none;\r\n  cursor: pointer;\r\n  padding: 0 0.75rem;\r\n  font-size: 1.125rem;\r\n  color: #6e6e73;\r\n  line-height: 1;\r\n  flex-shrink: 0;\r\n}\r\n\r\n.input-clear-btn:hover {\r\n  color: #333;\r\n}\r\n";
+const styles = "/* .input-container {\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.input-label:not([type='checkbox']) {\r\n  font-size: 0.8125rem;\r\n  line-height: 1.85;\r\n  letter-spacing: 0.0625rem;\r\n  color: #333;\r\n  position: relative;\r\n  height: 3.29412rem;\r\n  display: flex;\r\n  min-width: 0;\r\n  background: rgba(0, 0, 0, 0.04);\r\n  transition:\r\n    color 0.15s ease,\r\n    box-shadow 0.15s ease,\r\n    background 0.15s ease;\r\n}\r\n\r\n.input-label.bg_light:not([type='checkbox']) {\r\n  background: white;\r\n  box-shadow: inset 0 0 0 1px #86868b;\r\n}\r\n\r\n.input-label.bg_light:not([type='checkbox']):focus-within {\r\n  box-shadow: inset 0 0 0 1.5px #007aff;\r\n}\r\n\r\n.input {\r\n  background: transparent;\r\n  padding: 0 0.9375rem;\r\n  flex: 1;\r\n  font-size: 1rem;\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n  font-weight: 100;\r\n  letter-spacing: inherit;\r\n  color: inherit;\r\n  height: 100%;\r\n  border: none;\r\n  -webkit-appearance: none;\r\n  -moz-appearance: none;\r\n  appearance: none;\r\n  white-space: nowrap;\r\n  text-overflow: ellipsis;\r\n  overflow: hidden;\r\n  width: calc(100% - 0.9375rem * 2);\r\n}\r\n\r\n.input::placeholder {\r\n  color: #6e6e73;\r\n}\r\n\r\n.input:focus {\r\n  outline: none;\r\n  opacity: 1;\r\n}\r\n\r\n.input-label {\r\n  border-radius: 0.75rem;\r\n  transition: box-shadow 0.15s ease;\r\n}\r\n\r\n.input-label:focus-within {\r\n  box-shadow: inset 0 0 0 1.5px #007aff;\r\n}\r\n\r\n.error-message {\r\n  color: #e74c3c;\r\n  font-size: 0.875rem;\r\n  margin-top: 0.25rem;\r\n  font-size: 1rem;\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.flex_wrapper {\r\n  display: flex;\r\n  justify-content: flex-start;\r\n  align-items: center;\r\n}\r\n\r\n.label_wrapper {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  border-radius: 0.75rem 0 0 0.75rem;\r\n  height: 3.29412rem;\r\n  background-color: #00758a;\r\n}\r\n\r\n.preview_container {\r\n  height: 3.29412rem;\r\n  display: flex;\r\n  align-items: center;\r\n  background: rgba(0, 0, 0, 0.04);\r\n  border-radius: 0 0.75rem 0.75rem 0;\r\n  color: #333;\r\n  letter-spacing: 0.0625rem;\r\n  font-size: 0.875rem;\r\n  width: calc(100% - 3.4375rem);\r\n}\r\n\r\n.prev_wrap {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: calc(100% - 6.25rem);\r\n}\r\n\r\n@media (max-width: 480px) {\r\n  .prev_wrap {\r\n    width: 100%;\r\n  }\r\n}\r\n\r\n.preview {\r\n  margin: 0;\r\n  border: none;\r\n}\r\n\r\n.input[type='file'] {\r\n  position: absolute;\r\n  width: 0.0625rem;\r\n  height: 0.0625rem;\r\n  padding: 0;\r\n  margin: -0.0625rem;\r\n  overflow: hidden;\r\n  clip: rect(0, 0, 0, 0);\r\n  border: 0;\r\n}\r\n\r\n.input-label {\r\n  cursor: pointer;\r\n}\r\n\r\n.input-label-upload {\r\n  cursor: pointer;\r\n  width: 6.25rem;\r\n  color: #fff;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  height: 3.4375rem;\r\n}\r\n\r\n.input-label:hover {\r\n  background-color: rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.input-wrapper {\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  width: 100%;\r\n  padding: 0 0.9375rem;\r\n}\r\n\r\n.input-icon {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  pointer-events: none;\r\n}\r\n\r\n.input.with-icon {\r\n  padding-left: 2.5rem;\r\n}\r\n.no_icon {\r\n  width: 100%;\r\n}\r\n\r\n.sr-only {\r\n  position: absolute;\r\n  width: 1px;\r\n  height: 1px;\r\n  padding: 0;\r\n  margin: -1px;\r\n  overflow: hidden;\r\n  clip: rect(0, 0, 0, 0);\r\n  white-space: nowrap;\r\n  border: 0;\r\n}\r\n\r\ninput[type='number']::-webkit-outer-spin-button,\r\ninput[type='number']::-webkit-inner-spin-button {\r\n  -webkit-appearance: none;\r\n  margin: 0;\r\n}\r\n\r\ninput[type='number'] {\r\n  -moz-appearance: textfield;\r\n  appearance: textfield;\r\n}\r\n\r\n.password-toggle-btn {\r\n  position: absolute;\r\n  right: 12px;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n  background: none;\r\n  border: none;\r\n  cursor: pointer;\r\n  padding: 4px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  color: inherit;\r\n  opacity: 0.6;\r\n  transition: opacity 0.2s;\r\n}\r\n\r\n.password-toggle-btn:focus {\r\n  outline: none;\r\n}\r\n\r\n.input-wrapper {\r\n  position: relative;\r\n}\r\n\r\ninput:-webkit-autofill,\r\ninput:-webkit-autofill:hover,\r\ninput:-webkit-autofill:focus,\r\ninput:-webkit-autofill:active {\r\n  -webkit-text-fill-color: #333 !important;\r\n  font-family: 'Roboto Condensed', sans-serif !important;\r\n  font-size: 1rem !important;\r\n  font-weight: 100 !important;\r\n  letter-spacing: inherit !important;\r\n  color: #333 !important;\r\n\r\n  transition:\r\n    background-color 600000s 0s,\r\n    color 600000s 0s !important;\r\n}\r\n\r\n.input-label.bg_light input:-webkit-autofill,\r\n.input-label.bg_light .input-wrapper input:-webkit-autofill {\r\n  background-color: #ffffff !important;\r\n}\r\n\r\n.input-label:not(.bg_light) input:-webkit-autofill,\r\n.input-label:not(.bg_light) .input-wrapper input:-webkit-autofill {\r\n  background-color: #f5f5f5 !important;\r\n} */\r\n\r\n.input-container {\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.input-label:not([type='checkbox']) {\r\n  font-size: 0.8125rem;\r\n  line-height: 1.85;\r\n  letter-spacing: 0.0625rem;\r\n  color: #333;\r\n  position: relative;\r\n  height: 3.29412rem;\r\n  display: flex;\r\n  min-width: 0;\r\n  background: rgba(0, 0, 0, 0.04);\r\n  transition:\r\n    color 0.15s ease,\r\n    box-shadow 0.15s ease,\r\n    background 0.15s ease;\r\n}\r\n\r\n.input-label.bg_light:not([type='checkbox']) {\r\n  background: white;\r\n  box-shadow: inset 0 0 0 1px #86868b;\r\n}\r\n\r\n.input-label.bg_light:not([type='checkbox']):focus-within {\r\n  box-shadow: inset 0 0 0 1.5px #007aff;\r\n}\r\n\r\n.input-label.has-visible-label:not([type='checkbox']) {\r\n  height: auto;\r\n  flex-direction: column;\r\n  padding-top: 0.25rem;\r\n}\r\n\r\n.input-label.has-visible-label .no_icon,\r\n.input-label.has-visible-label .input-wrapper {\r\n  height: 2.75rem;\r\n}\r\n\r\n.input {\r\n  background: transparent;\r\n  padding: 0 0.9375rem;\r\n  flex: 1;\r\n  font-size: 1rem;\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n  font-weight: 100;\r\n  letter-spacing: inherit;\r\n  color: inherit;\r\n  height: 100%;\r\n  border: none;\r\n  -webkit-appearance: none;\r\n  -moz-appearance: none;\r\n  appearance: none;\r\n  white-space: nowrap;\r\n  text-overflow: ellipsis;\r\n  overflow: hidden;\r\n  width: calc(100% - 0.9375rem * 2);\r\n}\r\n\r\n.input::placeholder {\r\n  color: #6e6e73;\r\n}\r\n\r\n.input:focus {\r\n  outline: none;\r\n  opacity: 1;\r\n}\r\n\r\n.input-label {\r\n  border-radius: 0.75rem;\r\n  transition: box-shadow 0.15s ease;\r\n}\r\n\r\n.input-label:focus-within {\r\n  box-shadow: inset 0 0 0 1.5px #007aff;\r\n}\r\n\r\n.input-visible-label {\r\n  display: block;\r\n  font-size: 0.75rem;\r\n  font-weight: 600;\r\n  color: #6e6e73;\r\n  padding: 0.25rem 0.9375rem 0;\r\n  line-height: 1.2;\r\n}\r\n\r\n.error-message {\r\n  color: #e74c3c;\r\n  font-size: 0.875rem;\r\n  margin-top: 0.25rem;\r\n  font-size: 1rem;\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.flex_wrapper {\r\n  display: flex;\r\n  justify-content: flex-start;\r\n  align-items: center;\r\n}\r\n\r\n.label_wrapper {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  border-radius: 0.75rem 0 0 0.75rem;\r\n  height: 3.29412rem;\r\n  background-color: #00758a;\r\n}\r\n\r\n.preview_container {\r\n  height: 3.29412rem;\r\n  display: flex;\r\n  align-items: center;\r\n  background: rgba(0, 0, 0, 0.04);\r\n  border-radius: 0 0.75rem 0.75rem 0;\r\n  color: #333;\r\n  letter-spacing: 0.0625rem;\r\n  font-size: 0.875rem;\r\n  width: calc(100% - 3.4375rem);\r\n}\r\n\r\n.prev_wrap {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: calc(100% - 6.25rem);\r\n}\r\n\r\n@media (max-width: 480px) {\r\n  .prev_wrap {\r\n    width: 100%;\r\n  }\r\n}\r\n\r\n.preview {\r\n  margin: 0;\r\n  border: none;\r\n}\r\n\r\n.input[type='file'] {\r\n  position: absolute;\r\n  width: 0.0625rem;\r\n  height: 0.0625rem;\r\n  padding: 0;\r\n  margin: -0.0625rem;\r\n  overflow: hidden;\r\n  clip: rect(0, 0, 0, 0);\r\n  border: 0;\r\n}\r\n\r\n.input-label {\r\n  cursor: pointer;\r\n}\r\n\r\n.input-label-upload {\r\n  cursor: pointer;\r\n  width: 6.25rem;\r\n  color: #fff;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  height: 3.4375rem;\r\n}\r\n\r\n.input-label:hover {\r\n  background-color: rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.input-wrapper {\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  width: 100%;\r\n  padding: 0 0.9375rem;\r\n}\r\n\r\n.input-icon {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  pointer-events: none;\r\n}\r\n\r\n.input.with-icon {\r\n  padding-left: 2.5rem;\r\n}\r\n.no_icon {\r\n  width: 100%;\r\n}\r\n\r\n.sr-only {\r\n  position: absolute;\r\n  width: 1px;\r\n  height: 1px;\r\n  padding: 0;\r\n  margin: -1px;\r\n  overflow: hidden;\r\n  clip: rect(0, 0, 0, 0);\r\n  white-space: nowrap;\r\n  border: 0;\r\n}\r\n\r\ninput[type='number']::-webkit-outer-spin-button,\r\ninput[type='number']::-webkit-inner-spin-button {\r\n  -webkit-appearance: none;\r\n  margin: 0;\r\n}\r\n\r\ninput[type='number'] {\r\n  -moz-appearance: textfield;\r\n  appearance: textfield;\r\n}\r\n\r\n.password-toggle-btn {\r\n  position: absolute;\r\n  right: 12px;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n  background: none;\r\n  border: none;\r\n  cursor: pointer;\r\n  padding: 4px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  color: inherit;\r\n  opacity: 0.6;\r\n  transition: opacity 0.2s;\r\n}\r\n\r\n.password-toggle-btn:focus {\r\n  outline: none;\r\n}\r\n\r\n.input-wrapper {\r\n  position: relative;\r\n}\r\n\r\ninput:-webkit-autofill,\r\ninput:-webkit-autofill:hover,\r\ninput:-webkit-autofill:focus,\r\ninput:-webkit-autofill:active {\r\n  -webkit-text-fill-color: #333 !important;\r\n  font-family: 'Roboto Condensed', sans-serif !important;\r\n  font-size: 1rem !important;\r\n  font-weight: 100 !important;\r\n  letter-spacing: inherit !important;\r\n  color: #333 !important;\r\n  transition:\r\n    background-color 600000s 0s,\r\n    color 600000s 0s !important;\r\n}\r\n\r\n.input-label.bg_light input:-webkit-autofill,\r\n.input-label.bg_light .input-wrapper input:-webkit-autofill {\r\n  background-color: #ffffff !important;\r\n}\r\n\r\n.input-label:not(.bg_light) input:-webkit-autofill,\r\n.input-label:not(.bg_light) .input-wrapper input:-webkit-autofill {\r\n  background-color: #f5f5f5 !important;\r\n}\r\n\r\n.input-clear-btn {\r\n  background: none;\r\n  border: none;\r\n  cursor: pointer;\r\n  padding: 0 0.75rem;\r\n  color: #6e6e73;\r\n  line-height: 1;\r\n  flex-shrink: 0;\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n.input-clear-btn:hover {\r\n  color: #333;\r\n}\r\n";
 export {
   styles as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@greghowe79/the-lib",
-  "version": "2.14.8",
+  "version": "2.14.9",
   "description": "Collection of fast components for Qwik",
   "main": "./lib/index.qwik.mjs",
   "qwik": "./lib/index.qwik.mjs",