@boxyhq/react-ui - npm Package Compare versions

Comparing version 0.0.16 to 0.0.17

dist/@boxyhq/react-ui.js

@@ -1,2 +0,2 @@
-(function(){"use strict";try{if(typeof document!="undefined"){var e=document.createElement("style");e.appendChild(document.createTextNode("._form_1p3jn_1{display:flex;flex-direction:column;max-width:28rem}._label_1p3jn_7{margin-bottom:.375rem}._input_1p3jn_11{font-family:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-radius:.375rem;border-width:1px;border-color:#ebedf0;border-style:solid;line-height:1.5rem;padding:.5rem .75rem;font-size:1rem;margin-top:1px;outline:none;margin-bottom:1rem}._input_1p3jn_11:focus{--bc: 0 0% 20%;outline:2px solid hsla(var(--bc) / .2);outline-offset:2px}._button_1p3jn_33{cursor:pointer;font-family:inherit;background-image:none;border-radius:.25rem;padding:.5rem 1rem;background-color:#25c2a0;color:#fff;border:none}._button_1p3jn_33:focus-visible{--p: 167deg 68% 45%;outline:2px solid hsl(var(--p));outline-offset:2px}._button_1p3jn_33:active:hover,._button_1p3jn_33:active:focus{transform:scale(.95)}")),document.head.appendChild(e)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})();
+(function(){"use strict";try{if(typeof document!="undefined"){var o=document.createElement("style");o.appendChild(document.createTextNode("._container_1b6sp_1{--input-outline-color: hsl(0 0% 20%/ .2);--btn-hover-bg-color: hsl(0 0% 20%);--btn-outline-color: hsl(219 14% 22%);display:flex;flex-direction:column;max-width:28rem}._label_1b6sp_10{margin-bottom:.375rem}._input_1b6sp_14{font-family:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-radius:.375rem;border-width:1px;border-color:#ebedf0;border-style:solid;padding:.5rem .75rem;font-size:1rem;margin-top:1px;outline:none;margin-bottom:1rem}._input_1b6sp_14:focus{outline:2px solid var(--input-outline-color);outline-offset:2px}._button_1b6sp_34{cursor:pointer;font-family:inherit;background-image:none;border-radius:.25rem;padding:.5rem 1rem;background-color:transparent;border:1px solid rgb(51,51,51);color:currentColor}._button_1b6sp_34:hover{background-color:var(--btn-hover-bg-color);color:#fff}._button_1b6sp_34:focus-visible{outline:2px solid var(--btn-outline-color);outline-offset:2px}._button_1b6sp_34:active:hover,._button_1b6sp_34:active:focus{transform:scale(.95)}")),document.head.appendChild(o)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
 import Ye, { useState as H, useEffect as vr } from "react";
@@ -7,4 +7,4 @@ var M = {}, pr = {
   },
-  set exports(l) {
-    M = l;
+  set exports(c) {
+    M = c;
   }
@@ -26,14 +26,14 @@ }, W = {};
   De = 1;
-  var l = Ye, b = Symbol.for("react.element"), _ = Symbol.for("react.fragment"), y = Object.prototype.hasOwnProperty, x = l.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, h = { key: !0, ref: !0, __self: !0, __source: !0 };
-  function c(E, d, S) {
-    var p, m = {}, T = null, w = null;
+  var c = Ye, g = Symbol.for("react.element"), _ = Symbol.for("react.fragment"), y = Object.prototype.hasOwnProperty, j = c.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, p = { key: !0, ref: !0, __self: !0, __source: !0 };
+  function s(E, d, S) {
+    var b, m = {}, T = null, w = null;
     S !== void 0 && (T = "" + S), d.key !== void 0 && (T = "" + d.key), d.ref !== void 0 && (w = d.ref);
-    for (p in d)
-      y.call(d, p) && !h.hasOwnProperty(p) && (m[p] = d[p]);
+    for (b in d)
+      y.call(d, b) && !p.hasOwnProperty(b) && (m[b] = d[b]);
     if (E && E.defaultProps)
-      for (p in d = E.defaultProps, d)
-        m[p] === void 0 && (m[p] = d[p]);
-    return { $$typeof: b, type: E, key: T, ref: w, props: m, _owner: x.current };
+      for (b in d = E.defaultProps, d)
+        m[b] === void 0 && (m[b] = d[b]);
+    return { $$typeof: g, type: E, key: T, ref: w, props: m, _owner: j.current };
   }
-  return W.Fragment = _, W.jsx = c, W.jsxs = c, W;
+  return W.Fragment = _, W.jsx = s, W.jsxs = s, W;
 }
@@ -53,3 +53,3 @@ var Y = {};
   return Ie || (Ie = 1, process.env.NODE_ENV !== "production" && function() {
-    var l = Ye, b = Symbol.for("react.element"), _ = Symbol.for("react.portal"), y = Symbol.for("react.fragment"), x = Symbol.for("react.strict_mode"), h = Symbol.for("react.profiler"), c = Symbol.for("react.provider"), E = Symbol.for("react.context"), d = Symbol.for("react.forward_ref"), S = Symbol.for("react.suspense"), p = Symbol.for("react.suspense_list"), m = Symbol.for("react.memo"), T = Symbol.for("react.lazy"), w = Symbol.for("react.offscreen"), L = Symbol.iterator, X = "@@iterator";
+    var c = Ye, g = Symbol.for("react.element"), _ = Symbol.for("react.portal"), y = Symbol.for("react.fragment"), j = Symbol.for("react.strict_mode"), p = Symbol.for("react.profiler"), s = Symbol.for("react.provider"), E = Symbol.for("react.context"), d = Symbol.for("react.forward_ref"), S = Symbol.for("react.suspense"), b = Symbol.for("react.suspense_list"), m = Symbol.for("react.memo"), T = Symbol.for("react.lazy"), w = Symbol.for("react.offscreen"), L = Symbol.iterator, X = "@@iterator";
     function U(e) {
@@ -61,3 +61,3 @@ if (e === null || typeof e != "object")
     }
-    var P = l.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+    var P = c.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
     function v(e) {
@@ -80,6 +80,6 @@ {
     }
-    var Z = !1, Q = !1, D = !1, I = !1, Me = !1, le;
-    le = Symbol.for("react.module.reference");
+    var Z = !1, Q = !1, D = !1, I = !1, Me = !1, ce;
+    ce = Symbol.for("react.module.reference");
     function Le(e) {
-      return !!(typeof e == "string" || typeof e == "function" || e === y || e === h || Me || e === x || e === S || e === p || I || e === w || Z || Q || D || typeof e == "object" && e !== null && (e.$$typeof === T || e.$$typeof === m || e.$$typeof === c || e.$$typeof === E || e.$$typeof === d || e.$$typeof === le || e.getModuleId !== void 0));
+      return !!(typeof e == "string" || typeof e == "function" || e === y || e === p || Me || e === j || e === S || e === b || I || e === w || Z || Q || D || typeof e == "object" && e !== null && (e.$$typeof === T || e.$$typeof === m || e.$$typeof === s || e.$$typeof === E || e.$$typeof === d || e.$$typeof === ce || e.getModuleId !== void 0));
     }
@@ -93,3 +93,3 @@ function Ue(e, r, t) {
     }
-    function se(e) {
+    function le(e) {
       return e.displayName || "Context";
@@ -109,9 +109,9 @@ }
           return "Portal";
-        case h:
+        case p:
           return "Profiler";
-        case x:
+        case j:
           return "StrictMode";
         case S:
           return "Suspense";
-        case p:
+        case b:
           return "SuspenseList";
@@ -123,6 +123,6 @@ }
             var r = e;
-            return se(r) + ".Consumer";
-          case c:
+            return le(r) + ".Consumer";
+          case s:
             var t = e;
-            return se(t._context) + ".Provider";
+            return le(t._context) + ".Provider";
           case d:
@@ -144,3 +144,3 @@ return Ue(e, e.render, "ForwardRef");
     }
-    var j = Object.assign, A = 0, ce, de, ve, pe, be, ge, he;
+    var x = Object.assign, A = 0, se, de, ve, pe, be, ge, he;
     function _e() {
@@ -152,3 +152,3 @@ }
         if (A === 0) {
-          ce = console.log, de = console.info, ve = console.warn, pe = console.error, be = console.group, ge = console.groupCollapsed, he = console.groupEnd;
+          se = console.log, de = console.info, ve = console.warn, pe = console.error, be = console.group, ge = console.groupCollapsed, he = console.groupEnd;
           var e = {
@@ -182,21 +182,21 @@ configurable: !0,
           Object.defineProperties(console, {
-            log: j({}, e, {
-              value: ce
+            log: x({}, e, {
+              value: se
             }),
-            info: j({}, e, {
+            info: x({}, e, {
               value: de
             }),
-            warn: j({}, e, {
+            warn: x({}, e, {
               value: ve
             }),
-            error: j({}, e, {
+            error: x({}, e, {
               value: pe
             }),
-            group: j({}, e, {
+            group: x({}, e, {
               value: be
             }),
-            groupCollapsed: j({}, e, {
+            groupCollapsed: x({}, e, {
               value: ge
             }),
-            groupEnd: j({}, e, {
+            groupEnd: x({}, e, {
               value: he
@@ -277,10 +277,10 @@ })
           for (var a = C.stack.split(`
-`), g = n.stack.split(`
-`), f = a.length - 1, s = g.length - 1; f >= 1 && s >= 0 && a[f] !== g[s]; )
-            s--;
-          for (; f >= 1 && s >= 0; f--, s--)
-            if (a[f] !== g[s]) {
-              if (f !== 1 || s !== 1)
+`), h = n.stack.split(`
+`), f = a.length - 1, l = h.length - 1; f >= 1 && l >= 0 && a[f] !== h[l]; )
+            l--;
+          for (; f >= 1 && l >= 0; f--, l--)
+            if (a[f] !== h[l]) {
+              if (f !== 1 || l !== 1)
                 do
-                  if (f--, s--, s < 0 || a[f] !== g[s]) {
+                  if (f--, l--, l < 0 || a[f] !== h[l]) {
                     var R = `
@@ -290,3 +290,3 @@ ` + a[f].replace(" at new ", " at ");
                   }
-                while (f >= 1 && s >= 0);
+                while (f >= 1 && l >= 0);
               break;
@@ -318,3 +318,3 @@ }
           return V("Suspense");
-        case p:
+        case b:
           return V("SuspenseList");
@@ -354,4 +354,4 @@ }
               if (typeof e[o] != "function") {
-                var g = Error((n || "React class") + ": " + t + " type `" + o + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof e[o] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
-                throw g.name = "Invariant Violation", g;
+                var h = Error((n || "React class") + ": " + t + " type `" + o + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof e[o] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
+                throw h.name = "Invariant Violation", h;
               }
@@ -443,3 +443,3 @@ a = e[o](r, o, n, t, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
       var a = {
-        $$typeof: b,
+        $$typeof: g,
         type: e,
@@ -470,4 +470,4 @@ key: r,
       {
-        var u, o = {}, a = null, g = null;
-        t !== void 0 && (Te(t), a = "" + t), Qe(r) && (Te(r.key), a = "" + r.key), Ze(r) && (g = r.ref, er(r, i));
+        var u, o = {}, a = null, h = null;
+        t !== void 0 && (Te(t), a = "" + t), Qe(r) && (Te(r.key), a = "" + r.key), Ze(r) && (h = r.ref, er(r, i));
         for (u in r)
@@ -480,7 +480,7 @@ G.call(r, u) && !Xe.hasOwnProperty(u) && (o[u] = r[u]);
         }
-        if (a || g) {
-          var s = typeof e == "function" ? e.displayName || e.name || "Unknown" : e;
-          a && rr(o, s), g && tr(o, s);
+        if (a || h) {
+          var l = typeof e == "function" ? e.displayName || e.name || "Unknown" : e;
+          a && rr(o, l), h && tr(o, l);
         }
-        return nr(e, a, g, i, n, $.current, o);
+        return nr(e, a, h, i, n, $.current, o);
       }
@@ -499,3 +499,3 @@ }
     function ue(e) {
-      return typeof e == "object" && e !== null && e.$$typeof === b;
+      return typeof e == "object" && e !== null && e.$$typeof === g;
     }
@@ -538,3 +538,3 @@ function Pe() {
     }
-    function je(e, r) {
+    function xe(e, r) {
       {
@@ -552,3 +552,3 @@ if (!e._store || e._store.validated || e.key != null)
     }
-    function xe(e, r) {
+    function je(e, r) {
       {
@@ -560,3 +560,3 @@ if (typeof e != "object")
             var n = e[t];
-            ue(n) && je(n, r);
+            ue(n) && xe(n, r);
           }
@@ -569,3 +569,3 @@ else if (ue(e))
             for (var u = i.call(e), o; !(o = u.next()).done; )
-              ue(o.value) && je(o.value, r);
+              ue(o.value) && xe(o.value, r);
         }
@@ -615,10 +615,10 @@ }
           (e === void 0 || typeof e == "object" && e !== null && Object.keys(e).length === 0) && (a += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");
-          var g = or(i);
-          g ? a += g : a += Pe();
+          var h = or(i);
+          h ? a += h : a += Pe();
           var f;
-          e === null ? f = "null" : ne(e) ? f = "array" : e !== void 0 && e.$$typeof === b ? (f = "<" + (O(e.type) || "Unknown") + " />", a = " Did you accidentally export a JSX literal instead of a component?") : f = typeof e, v("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", f, a);
+          e === null ? f = "null" : ne(e) ? f = "array" : e !== void 0 && e.$$typeof === g ? (f = "<" + (O(e.type) || "Unknown") + " />", a = " Did you accidentally export a JSX literal instead of a component?") : f = typeof e, v("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", f, a);
         }
-        var s = ar(e, r, t, i, u);
-        if (s == null)
-          return s;
+        var l = ar(e, r, t, i, u);
+        if (l == null)
+          return l;
         if (o) {
@@ -630,3 +630,3 @@ var R = r.children;
                 for (var F = 0; F < R.length; F++)
-                  xe(R[F], e);
+                  je(R[F], e);
                 Object.freeze && Object.freeze(R);
@@ -636,30 +636,30 @@ } else
             else
-              xe(R, e);
+              je(R, e);
         }
-        return e === y ? fr(s) : ur(s), s;
+        return e === y ? fr(l) : ur(l), l;
       }
     }
-    function lr(e, r, t) {
+    function cr(e, r, t) {
       return ke(e, r, t, !0);
     }
-    function sr(e, r, t) {
+    function lr(e, r, t) {
       return ke(e, r, t, !1);
     }
-    var cr = sr, dr = lr;
-    Y.Fragment = y, Y.jsx = cr, Y.jsxs = dr;
+    var sr = lr, dr = cr;
+    Y.Fragment = y, Y.jsx = sr, Y.jsxs = dr;
   }()), Y;
 }
-(function(l) {
-  process.env.NODE_ENV === "production" ? l.exports = br() : l.exports = gr();
+(function(c) {
+  process.env.NODE_ENV === "production" ? c.exports = br() : c.exports = gr();
 })(pr);
-const hr = M.Fragment, z = M.jsx, Ae = M.jsxs, _r = (l, b) => {
+const hr = M.Fragment, z = M.jsx, Ae = M.jsxs, _r = (c, g) => {
   const _ = Math.floor(1e6 + Math.random() * 1e6).toString();
-  return b ? `boxyhq-${l}-${b}-${_}` : `boxyhq-${l}-${_}`;
-}, $e = (l, b) => {
+  return g ? `boxyhq-${c}-${g}-${_}` : `boxyhq-${c}-${_}`;
+}, $e = (c, g) => {
   const [_, y] = H("");
   return vr(() => {
-    y(_r(l, b));
-  }, [l, b]), _;
-}, N = (l = !1, b = "", _) => l ? b : `${_} ${b}`, Er = "_form_1p3jn_1", Rr = "_label_1p3jn_7", mr = "_input_1p3jn_11", yr = "_button_1p3jn_33", K = {
-  form: Er,
+    y(_r(c, g));
+  }, [c, g]), _;
+}, N = (c = !1, g = "", _) => c ? g : `${_} ${g}`, Er = "_container_1b6sp_1", Rr = "_label_1b6sp_10", mr = "_input_1b6sp_14", yr = "_button_1b6sp_34", K = {
+  container: Er,
   label: Rr,
@@ -669,12 +669,12 @@ input: mr,
 }, We = "sso", Sr = ({
-  ssoIdentifier: l = "",
-  onSubmit: b,
+  ssoIdentifier: c = "",
+  onSubmit: g,
   inputLabel: _ = "Tenant",
   placeholder: y = "",
-  buttonText: x = "Sign-in with SSO",
-  styles: h,
-  classNames: c,
+  buttonText: j = "Sign-in with SSO",
+  styles: p,
+  classNames: s,
   unstyled: E = !1
 }) => {
-  const d = $e(We, "input"), S = $e(We, "span"), [p, m] = H(""), [T, w] = H(""), L = (D) => {
+  const d = $e(We, "input"), S = $e(We, "span"), [b, m] = H(""), [T, w] = H(""), L = (D) => {
     w(""), m(D.currentTarget.value);
@@ -685,5 +685,5 @@ }, [X, U] = H(!1), P = async (D) => {
       error: { message: I }
-    } = await b(p || l) || { error: {} };
+    } = await g(b || c) || { error: {} };
     U(!1), typeof I == "string" && I && w(I);
-  }, v = !!T, Z = !l ? /* @__PURE__ */ Ae(hr, { children: [
+  }, v = !!T, Z = !c ? /* @__PURE__ */ Ae(hr, { children: [
     /* @__PURE__ */ z(
@@ -693,4 +693,4 @@ "label",
         htmlFor: d,
-        style: h == null ? void 0 : h.label,
-        className: N(E, c == null ? void 0 : c.label, K.label),
+        style: p == null ? void 0 : p.label,
+        className: N(E, s == null ? void 0 : s.label, K.label),
         children: _
@@ -703,7 +703,7 @@ }
         id: d,
-        value: p,
+        value: b,
         placeholder: y,
         onChange: L,
-        style: h == null ? void 0 : h.input,
-        className: N(E, c == null ? void 0 : c.input, K.input),
+        style: p == null ? void 0 : p.input,
+        className: N(E, s == null ? void 0 : s.input, K.input),
         "aria-invalid": v,
@@ -714,17 +714,24 @@ "aria-describedby": S
     v && /* @__PURE__ */ z("span", { id: S, children: T })
-  ] }) : null, Q = !(p || l) || X;
-  return /* @__PURE__ */ Ae("div", { className: N(E, c == null ? void 0 : c.container, K.form), children: [
-    Z,
-    /* @__PURE__ */ z(
-      "button",
-      {
-        disabled: Q,
-        type: "button",
-        onClick: P,
-        style: h == null ? void 0 : h.button,
-        className: N(E, c == null ? void 0 : c.button, K.button),
-        children: x
-      }
-    )
-  ] });
+  ] }) : null, Q = !(b || c) || X;
+  return /* @__PURE__ */ Ae(
+    "div",
+    {
+      className: N(E, s == null ? void 0 : s.container, K.container),
+      style: p == null ? void 0 : p.container,
+      children: [
+        Z,
+        /* @__PURE__ */ z(
+          "button",
+          {
+            disabled: Q,
+            type: "button",
+            onClick: P,
+            style: p == null ? void 0 : p.button,
+            className: N(E, s == null ? void 0 : s.button, K.button),
+            children: j
+          }
+        )
+      ]
+    }
+  );
 };
@@ -731,0 +738,0 @@ export {

dist/dist/types/Login/types.d.ts

 import type { CSSProperties } from 'react';
+interface ContainerCSSProperties extends CSSProperties {
+    '--input-outline-color'?: string;
+    '--btn-hover-bg-color'?: string;
+    '--btn-outline-color'?: string;
+}
 export interface LoginProps {
@@ -33,5 +38,6 @@ /**
     /**
-     * Styles for each inner components that Login is made up of.
+     * Styles for each inner component that Login is made up of.
      */
     styles?: {
+        container?: ContainerCSSProperties;
         button?: CSSProperties;
@@ -55,1 +61,2 @@ input?: CSSProperties;
 }
+export {};

package.json

 {
   "name": "@boxyhq/react-ui",
   "description": "React UI components from BoxyHQ",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "type": "module",
@@ -6,0 +6,0 @@ "keywords": [

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

46916

increased by1.74%

Lines of code

860

increased by1.78%

Worsened metrics

Number of low supply chain risk alerts

6

increased by50%

No dependency changes