@theroutingcompany/components 0.0.32-alpha.7 → 0.0.32

package/dist/trc-components.es.js

@@ -2,7 +2,7 @@ import * as Z from "react";
 import K, { useCallback as oe, forwardRef as B, Children as Jt, isValidElement as Yr, createElement as S, cloneElement as rn, Fragment as Cr, useEffect as X, createContext as qr, useMemo as re, useContext as Ke, useLayoutEffect as Ph, useRef as z, useState as J, useReducer as gD, PureComponent as vD, useId as $D } from "react";
 import * as Th from "react-dom";
 import Br, { flushSync as kh, createPortal as ji } from "react-dom";
-import A, { keyframes as Ve, css as Pe } from "styled-components";
+import A, { keyframes as Ve, css as De } from "styled-components";
 import Dd, { isFragment as yD, Memo as _D, ForwardRef as xD } from "react-is";
 import { ExpandMore as wD, Help as DD, KeyboardArrowUp as Eh, KeyboardArrowDown as Ch, Error as Ui, Check as Wi, ChevronLeft as Rh, ChevronRight as SD, NavigateBefore as PD, NavigateNext as TD, Close as Ih, Delete as kD, CloudUpload as ED, Loop as CD, Edit as RD, ArrowDropDown as Ah, Warning as ID } from "@material-ui/icons";
 function Hi(e) {
@@ -87,8 +87,8 @@ function MD() {
     }
     function _(T, te, ce) {
       {
-        var ge = $.ReactDebugCurrentFrame, Se = ge.getStackAddendum();
-        Se !== "" && (te += "%s", ce = ce.concat([Se]));
+        var ge = $.ReactDebugCurrentFrame, Pe = ge.getStackAddendum();
+        Pe !== "" && (te += "%s", ce = ce.concat([Pe]));
         var Te = ce.map(function(we) {
           return String(we);
         });
@@ -108,8 +108,8 @@ function MD() {
       var ge = T.displayName;
       if (ge)
         return ge;
-      var Se = te.displayName || te.name || "";
-      return Se !== "" ? ce + "(" + Se + ")" : ce;
+      var Pe = te.displayName || te.name || "";
+      return Pe !== "" ? ce + "(" + Pe + ")" : ce;
     }
     function j(T) {
       return T.displayName || "Context";
@@ -149,7 +149,7 @@ function MD() {
             var ge = T.displayName || null;
             return ge !== null ? ge : O(T.type) || "Memo";
           case p: {
-            var Se = T, Te = Se._payload, we = Se._init;
+            var Pe = T, Te = Pe._payload, we = Pe._init;
             try {
               return O(we(Te));
             } catch {
@@ -227,8 +227,8 @@ function MD() {
         if (Q === void 0)
           try {
             throw Error();
-          } catch (Se) {
-            var ge = Se.stack.trim().match(/\n( *(at )?)/);
+          } catch (Pe) {
+            var ge = Pe.stack.trim().match(/\n( *(at )?)/);
             Q = ge && ge[1] || "";
           }
         return `
@@ -250,7 +250,7 @@ function MD() {
       }
       var ge;
       de = !0;
-      var Se = Error.prepareStackTrace;
+      var Pe = Error.prepareStackTrace;
       Error.prepareStackTrace = void 0;
       var Te;
       Te = pe.current, pe.current = null, Y();
@@ -306,7 +306,7 @@ function MD() {
             }
         }
       } finally {
-        de = !1, pe.current = Te, fe(), Error.prepareStackTrace = Se;
+        de = !1, pe.current = Te, fe(), Error.prepareStackTrace = Pe;
       }
       var $n = T ? T.displayName || T.name : "", Sf = $n ? ie($n) : "";
       return typeof T == "function" && le.set(T, Sf), Sf;
@@ -338,9 +338,9 @@ function MD() {
           case u:
             return pt(T.type, te, ce);
           case p: {
-            var ge = T, Se = ge._payload, Te = ge._init;
+            var ge = T, Pe = ge._payload, Te = ge._init;
             try {
-              return pt(Te(Se), te, ce);
+              return pt(Te(Pe), te, ce);
             } catch {
             }
           }
@@ -355,7 +355,7 @@ function MD() {
       } else
         bn.setExtraStackFrame(null);
     }
-    function It(T, te, ce, ge, Se) {
+    function It(T, te, ce, ge, Pe) {
       {
         var Te = Function.call.bind(mt);
         for (var we in T)
@@ -370,7 +370,7 @@ function MD() {
             } catch (Me) {
               xe = Me;
             }
-            xe && !(xe instanceof Error) && (Vt(Se), v("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", ge || "React class", ce, we, typeof xe), Vt(null)), xe instanceof Error && !(xe.message in Rt) && (Rt[xe.message] = !0, Vt(Se), v("Failed %s type: %s", ce, xe.message), Vt(null));
+            xe && !(xe instanceof Error) && (Vt(Pe), v("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", ge || "React class", ce, we, typeof xe), Vt(null)), xe instanceof Error && !(xe.message in Rt) && (Rt[xe.message] = !0, Vt(Pe), v("Failed %s type: %s", ce, xe.message), Vt(null));
           }
       }
     }
@@ -449,7 +449,7 @@ function MD() {
         });
       }
     }
-    var sD = function(T, te, ce, ge, Se, Te, we) {
+    var sD = function(T, te, ce, ge, Pe, Te, we) {
       var xe = {
         // This tag allows us to uniquely identify this as a React Element
         $$typeof: t,
@@ -475,13 +475,13 @@ function MD() {
         configurable: !1,
         enumerable: !1,
         writable: !1,
-        value: Se
+        value: Pe
       }), Object.freeze && (Object.freeze(xe.props), Object.freeze(xe)), xe;
     };
-    function lD(T, te, ce, ge, Se) {
+    function lD(T, te, ce, ge, Pe) {
       {
         var Te, we = {}, xe = null, Je = null;
-        ce !== void 0 && (lt(ce), xe = "" + ce), nD(te) && (lt(te.key), xe = "" + te.key), rD(te) && (Je = te.ref, oD(te, Se));
+        ce !== void 0 && (lt(ce), xe = "" + ce), nD(te) && (lt(te.key), xe = "" + te.key), rD(te) && (Je = te.ref, oD(te, Pe));
         for (Te in te)
           mt.call(te, Te) && !tD.hasOwnProperty(Te) && (we[Te] = te[Te]);
         if (T && T.defaultProps) {
@@ -493,7 +493,7 @@ function MD() {
           var ze = typeof T == "function" ? T.displayName || T.name || "Unknown" : T;
           xe && aD(we, ze), Je && iD(we, ze);
         }
-        return sD(T, xe, Je, Se, ge, go.current, we);
+        return sD(T, xe, Je, Pe, ge, go.current, we);
       }
     }
     var Hs = $.ReactCurrentOwner, $f = $.ReactDebugCurrentFrame;
@@ -570,9 +570,9 @@ Check the top-level render call using <` + ce + ">.");
         else if (Ys(T))
           T._store && (T._store.validated = !0);
         else if (T) {
-          var Se = g(T);
-          if (typeof Se == "function" && Se !== T.entries)
-            for (var Te = Se.call(T), we; !(we = Te.next()).done; )
+          var Pe = g(T);
+          if (typeof Pe == "function" && Pe !== T.entries)
+            for (var Te = Pe.call(T), we; !(we = Te.next()).done; )
               Ys(we.value) && xf(we.value, te);
         }
       }
@@ -596,8 +596,8 @@ Check the top-level render call using <` + ce + ">.");
           It(ce, T.props, "prop", ge, T);
         } else if (te.PropTypes !== void 0 && !Gs) {
           Gs = !0;
-          var Se = O(te);
-          v("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", Se || "Unknown");
+          var Pe = O(te);
+          v("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", Pe || "Unknown");
         }
         typeof te.getDefaultProps == "function" && !te.getDefaultProps.isReactClassApproved && v("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
       }
@@ -614,18 +614,18 @@ Check the top-level render call using <` + ce + ">.");
         T.ref !== null && (vn(T), v("Invalid attribute `ref` supplied to `React.Fragment`."), vn(null));
       }
     }
-    function Df(T, te, ce, ge, Se, Te) {
+    function Df(T, te, ce, ge, Pe, Te) {
       {
         var we = F(T);
         if (!we) {
           var xe = "";
           (T === void 0 || typeof T == "object" && T !== null && Object.keys(T).length === 0) && (xe += " 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 Je = cD(Se);
+          var Je = cD(Pe);
           Je ? xe += Je : xe += yf();
           var Me;
           T === null ? Me = "null" : gn(T) ? Me = "array" : T !== void 0 && T.$$typeof === t ? (Me = "<" + (O(T.type) || "Unknown") + " />", xe = " Did you accidentally export a JSX literal instead of a component?") : Me = typeof T, v("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", Me, xe);
         }
-        var ze = lD(T, te, ce, Se, Te);
+        var ze = lD(T, te, ce, Pe, Te);
         if (ze == null)
           return ze;
         if (we) {
@@ -2661,7 +2661,7 @@ const oP = "DialogTitleWarning", [aP, PV] = BD(oP, {
     opacity: 1;
     transform: translate(-50%, -50%) scale(1);
   }
-`, pb = Pe`
+`, pb = De`
   background-color: ${f.color_deprecated_background_black_strong};
   opacity: 0.6;
   position: fixed;
@@ -2674,7 +2674,7 @@ const oP = "DialogTitleWarning", [aP, PV] = BD(oP, {
   small: "360px",
   medium: "540px",
   large: "960px"
-}, hb = Pe`
+}, hb = De`
   box-sizing: border-box;
   background: ${f.color_white};
   padding: ${f.sizing_500};
@@ -2720,7 +2720,7 @@ const bb = `
   color: ${f.color_deprecated_text_strong};
 `, EV = A(cb)`
   ${bb}
-`, gb = Pe`
+`, gb = De`
   font-family: ${f.font_family_pingo};
   font-style: normal;
   font-weight: 400;
@@ -2736,7 +2736,7 @@ const bb = `
   display: flex;
   justify-content: end;
   gap: ${f.sizing_200};
-`, vb = Pe`
+`, vb = De`
   all: unset;
   font-family: inherit;
   height: 25px;
@@ -3706,8 +3706,8 @@ var aa = ut(nr), Ia = {
     return wr(r, t, t);
   var n = t < 0, o = Math.abs(t), a = wr(r, o, o);
   return jf(a) ? a * (n ? -1 : 1) : n ? "-" + a : a;
-}, De = {};
-De.margin = {
+}, Se = {};
+Se.margin = {
   margin: {
     property: "margin",
     scale: "space",
@@ -3751,14 +3751,14 @@ De.margin = {
     defaultScale: nt.space
   }
 };
-De.margin.m = De.margin.margin;
-De.margin.mt = De.margin.marginTop;
-De.margin.mr = De.margin.marginRight;
-De.margin.mb = De.margin.marginBottom;
-De.margin.ml = De.margin.marginLeft;
-De.margin.mx = De.margin.marginX;
-De.margin.my = De.margin.marginY;
-De.padding = {
+Se.margin.m = Se.margin.margin;
+Se.margin.mt = Se.margin.marginTop;
+Se.margin.mr = Se.margin.marginRight;
+Se.margin.mb = Se.margin.marginBottom;
+Se.margin.ml = Se.margin.marginLeft;
+Se.margin.mx = Se.margin.marginX;
+Se.margin.my = Se.margin.marginY;
+Se.padding = {
   padding: {
     property: "padding",
     scale: "space",
@@ -3795,14 +3795,14 @@ De.padding = {
     defaultScale: nt.space
   }
 };
-De.padding.p = De.padding.padding;
-De.padding.pt = De.padding.paddingTop;
-De.padding.pr = De.padding.paddingRight;
-De.padding.pb = De.padding.paddingBottom;
-De.padding.pl = De.padding.paddingLeft;
-De.padding.px = De.padding.paddingX;
-De.padding.py = De.padding.paddingY;
-var Cb = ut(De.margin), Rb = ut(De.padding), Fd = os(Cb, Rb), Ib = ut({
+Se.padding.p = Se.padding.padding;
+Se.padding.pt = Se.padding.paddingTop;
+Se.padding.pr = Se.padding.paddingRight;
+Se.padding.pb = Se.padding.paddingBottom;
+Se.padding.pl = Se.padding.paddingLeft;
+Se.padding.px = Se.padding.paddingX;
+Se.padding.py = Se.padding.paddingY;
+var Cb = ut(Se.margin), Rb = ut(Se.padding), Fd = os(Cb, Rb), Ib = ut({
   boxShadow: {
     property: "boxShadow",
     scale: "shadows"
@@ -11620,7 +11620,7 @@ const xl = A(qe)`
   ] });
 });
 Vv.displayName = "Connect";
-const du = Vv, _E = Pe`
+const du = Vv, _E = De`
   position: absolute;
   width: 1px;
   height: 1px;
@@ -13086,9 +13086,8 @@ const B6 = k6, j6 = E6, U6 = K6, W6 = A(a$)`
     color: ${f.color_deprecated_fill_primary_pressed};
   }
 
-  /* TODO check these colors with designers */
   &:not([data-state~='closed']) > svg {
-    color: steelblue;
+    color: ${f.color_brand_lilac};
   }
 `;
 function dn({
@@ -14767,7 +14766,8 @@ const x4 = A.div`
   border: none;
   padding: 6px 8px;
   outline: none;
-  font-size: 16px;
+  color: ${f.color_black};
+  font-size: ${f.font_size_175};
   border: 1px solid;
   border-right: none;
   border-color: ${(e) => e.isFocused ? f.color_gray_6 : f.color_gray_84};
@@ -15881,8 +15881,8 @@ const vC = `
         cursor: not-allowed;
       }
     `;
-}, A1 = Pe`
-`, xC = Pe`
+}, A1 = De`
+`, xC = De`
   ${A1};
   background: ${f.color_gray_6};
   color: ${f.color_white};
@@ -15908,7 +15908,7 @@ const vC = `
   }
 
   &:disabled {}
-`, wC = Pe`
+`, wC = De`
   ${A1};
   background: ${f.color_white};
   color: ${f.color_gray_6};
@@ -15931,9 +15931,9 @@ const vC = `
   }
 
   &:disabled {}
-`, O1 = Pe`
+`, O1 = De`
   background: transparent;
-`, DC = Pe`
+`, DC = De`
   ${O1}
   color: ${f.color_gray_6};
   border: 1px solid rgba(0, 0, 0, 0.16); // TODO: token
@@ -15960,7 +15960,7 @@ const vC = `
   }
 
   &:disabled {}
-`, SC = Pe`
+`, SC = De`
   ${O1}
   color: ${f.color_white};
   border: 1px solid rgba(255, 255, 255, 0.2); // TODO: token
@@ -15984,9 +15984,9 @@ const vC = `
   }
 
   &:disabled {}
-`, M1 = Pe`
+`, M1 = De`
   background: transparent;
-`, PC = Pe`
+`, PC = De`
   ${M1}
   color: ${f.color_gray_6};
 
@@ -16011,7 +16011,7 @@ const vC = `
   }
 
   &:disabled {}
-`, TC = Pe`
+`, TC = De`
   ${M1}
   color: ${f.color_white};
 
@@ -16033,10 +16033,10 @@ const vC = `
   }
 
   &:disabled {}
-`, N1 = Pe`
+`, N1 = De`
   background: ${f.color_brand_red};
   color: ${f.color_white};
-`, kC = Pe`
+`, kC = De`
   ${N1};
 
   &.simulate-hover,
@@ -16060,7 +16060,7 @@ const vC = `
   }
 
   &:disabled {}
-`, EC = Pe`
+`, EC = De`
   ${N1};
 
   &.simulate-hover,
@@ -16092,9 +16092,9 @@ const vC = `
     case "danger":
       return t ? EC : kC;
   }
-}, RC = Pe`
+}, RC = De`
   padding: ${f.spacing_200} ${f.spacing_300};
-`, IC = Pe`
+`, IC = De`
   padding: ${f.spacing_300} ${f.spacing_400};
 `, AC = (e) => {
   switch (e) {
@@ -20661,29 +20661,41 @@ function Ha(e, t = ln(qd())) {
 }
 const po = A.p`
   font-family: ${f.font_family_pingo};
-  font-style: var(--text-style, normal);
-  font-weight: var(--text-font-weight, 300);
-  color: var(--text-color, ${f.color_deprecated_text_strong});
+  
+  ${(e) => e.fontStyle && De`
+      font-style: ${e.fontStyle};
+    `}
+
+    ${(e) => e.textColor && De`
+      color: ${e.textColor};
+    `}
+
+    ${(e) => e.fontWeight && De`
+      font-style: ${e.fontWeight};
+    `}
+
   margin-block: 0;
   overflow-wrap: break-word;
   hyphens: auto;
   ${Fd}
-`, ux = Pe`
+`, ux = De`
   font-size: ${f.font_size_125};
   line-height: ${f.font_size_150};
-`, fx = Pe`
+`, fx = De`
   font-size: ${f.font_size_150};
   line-height: ${f.font_size_175};
-`, px = Pe`
+`, px = De`
   font-size: ${f.font_size_175};
   line-height: ${f.font_size_200};
-`, mx = Pe`
+`, mx = De`
   font-size: ${f.font_size_200};
   line-height: ${f.font_size_225};
-`, hx = Pe`
+`, hx = De`
   font-size: ${f.font_size_225};
   line-height: ${f.font_size_250};
-`, ba = A(po)``, p8 = A(ba)`
+`, ba = A(po)`
+
+`, p8 = A(ba)`
   ${ux}
 `, m8 = A(ba)`
   ${fx}
@@ -20743,7 +20755,7 @@ const T8 = {
     negative: a = !1,
     italic: i,
     bold: s,
-    style: l,
+    style: l = {},
     ...c
   } = e, d = T8[r], u = s ? 500 : 300;
   let p;
@@ -20751,14 +20763,11 @@ const T8 = {
     d,
     {
       ...c,
+      fontStyle: i ? "italic" : "normal",
+      fontWeight: u,
+      textColor: p,
       ref: t,
-      style: {
-        "--text-font-weight": u,
-        "--text-color": p,
-        "--text-style": i ? "italic" : "normal",
-        // Allow style passthrough
-        ...l
-      }
+      style: l
     }
   );
 });
@@ -24200,7 +24209,7 @@ const qA = yA, ZA = a2, XA = xA, JA = DA, QA = l2, eO = TA, tO = qu, rO = kA, nO
 `, qO = Ve`
   0% { opacity: 0; transform: translateX(2px); }
   100% { opacity: 1; transform: translateX(0); }
-`, v2 = Pe`
+`, v2 = De`
   font-family: ${f.font_family_pingo};
   border-radius: 6px; // not in tokens (yet)
   padding: ${f.sizing_100};
@@ -24240,7 +24249,7 @@ const qA = yA, ZA = a2, XA = xA, JA = DA, QA = l2, eO = TA, tO = qu, rO = kA, nO
   ) });
 });
 XO.displayName = "DropdownMenuContent";
-const oB = RO, aB = g2, zs = Pe`
+const oB = RO, aB = g2, zs = De`
   all: unset;
   font-size: ${f.font_size_deprecated_100};
   line-height: ${f.line_height_deprecated_129};
@@ -26863,7 +26872,7 @@ const yB = Object.assign(ho, {
   display: grid;
   grid-template-columns: repeat(12, minmax(var(--min-col-width, 0), 150px));
   column-gap: ${f.sizing_600};
-`, BM = Pe`
+`, BM = De`
   width: clamp(
     var(--page-min-width, 750px),
     var(--page-ideal-width, 90%),
@@ -31139,8 +31148,12 @@ const RK = A(L5)`
     background-color: ${f.color_deprecated_overlay_secondary_hover};
   }
 
-  &[data-state~='active'], &[data-state~='active'] > span {
-    outline: 1px solid ${f.color_deprecated_outline_secondary_enabled} 1px;
+  &[data-state~='active'] {
+    border-bottom: 2px solid ${f.color_black};
+  }
+
+  &[data-state~='active'],
+  &[data-state~='active'] > span {
     color: ${f.color_black};
   }
 
@@ -31200,8 +31213,7 @@ const V5 = A(F5)`
 `;
 V5.displayName = "List";
 wa.List = V5;
-const B5 = Pe`
-  /* position: relative !important; */
+const B5 = De`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -31219,21 +31231,29 @@ const B5 = Pe`
   display: flex;
   ${B5}
 
-  ${(e) => e.variant === "secondary" && Pe`
+  ${(e) => e.variant === "secondary" && De`
       &[data-state~='active'] {
-        /* color: ${f.color_black}; */
         background-color: ${f.color_gray_opacity_6};
         border-radius: ${f.border_radius_400};
       }
-    `}
 
-  ${(e) => e.variant === "primary" && Pe`
+      &[data-state~='active'],
+      &[data-state~='active'] > span {
         color: ${f.color_black};
+      }
+    `}
+
+  ${(e) => e.variant === "primary" && De`
       border-bottom: 2px solid ${f.color_gray_opacity_6};
 
       &[data-state~='active'] {
         border-bottom: 2px solid ${f.color_black};
       }
+
+      &[data-state~='active'],
+      &[data-state~='active'] > span {
+        color: ${f.color_black};
+      }
     `}
 `;
 j5.displayName = "Trigger";