@lightsparkdev/ui 0.0.4 → 0.0.6

package/dist/icons/Home.js

@@ -0,0 +1,29 @@
+import "../chunk-CIGAQ47A.js";
+
+// src/icons/Home.tsx
+import { jsx } from "@emotion/react/jsx-runtime";
+function Home() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "100%",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M3.75 9.2582C3.75 8.97962 3.75 8.84033 3.78504 8.71146C3.81609 8.59729 3.86716 8.48953 3.93586 8.39321C4.0134 8.28448 4.12121 8.19628 4.33682 8.01987L10.9868 2.57896C11.3478 2.28362 11.5283 2.13596 11.7291 2.07944C11.9063 2.02959 12.0937 2.02959 12.2709 2.07944C12.4717 2.13596 12.6522 2.28362 13.0132 2.57896L19.6632 8.01987C19.8788 8.19628 19.9866 8.28448 20.0641 8.39321C20.1328 8.48953 20.1839 8.59729 20.215 8.71146C20.25 8.84033 20.25 8.97962 20.25 9.2582V18.65C20.25 19.21 20.25 19.4901 20.141 19.704C20.0451 19.8921 19.8922 20.0451 19.704 20.141C19.4901 20.25 19.2101 20.25 18.65 20.25H5.35C4.78995 20.25 4.50992 20.25 4.29601 20.141C4.10785 20.0451 3.95487 19.8921 3.85899 19.704C3.75 19.4901 3.75 19.21 3.75 18.65V9.2582Z",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+var Home_default = Home;
+export {
+  Home,
+  Home_default as default
+};

package/dist/icons/Person.cjs

@@ -25,23 +25,33 @@ __export(Person_exports, {
 module.exports = __toCommonJS(Person_exports);
 var import_jsx_runtime = require("@emotion/react/jsx-runtime");
 var Person = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "svg",
     {
       width: "100%",
-      viewBox: "0 0 13 14",
+      viewBox: "0 0 24 24",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "path",
-        {
-          d: "M1 13.25V11.5C1 10.0503 2.17525 8.875 3.625 8.875H8.875C10.3247 8.875 11.5 10.0503 11.5 11.5V13.25M6.25 1C4.91293 1 3.625 2.04153 3.625 3.625C3.625 4.96207 4.66653 6.25 6.25 6.25C7.83347 6.25 8.875 4.96207 8.875 3.625C8.875 2.04153 7.58707 1 6.25 1Z",
-          stroke: "currentColor",
-          strokeWidth: "1.5",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }
-      )
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "path",
+          {
+            d: "M15.7485 6.5C15.7485 8.57107 14.0696 10.25 11.9985 10.25C9.92747 10.25 8.24854 8.57107 8.24854 6.5C8.24854 4.42893 9.92747 2.75 11.9985 2.75C14.0696 2.75 15.7485 4.42893 15.7485 6.5Z",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "path",
+          {
+            d: "M11.9985 13.25C8.20293 13.25 5.43245 15.7735 4.67009 19.1657C4.54089 19.7406 5.0077 20.25 5.59696 20.25H18.4001C18.9894 20.25 19.4562 19.7406 19.327 19.1657C18.5646 15.7735 15.7941 13.25 11.9985 13.25Z",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
     }
   );
 };

package/dist/icons/Person.js

@@ -1,25 +1,35 @@
 import "../chunk-CIGAQ47A.js";
 
 // src/icons/Person.tsx
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 var Person = () => {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     "svg",
     {
       width: "100%",
-      viewBox: "0 0 13 14",
+      viewBox: "0 0 24 24",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
-      children: /* @__PURE__ */ jsx(
-        "path",
-        {
-          d: "M1 13.25V11.5C1 10.0503 2.17525 8.875 3.625 8.875H8.875C10.3247 8.875 11.5 10.0503 11.5 11.5V13.25M6.25 1C4.91293 1 3.625 2.04153 3.625 3.625C3.625 4.96207 4.66653 6.25 6.25 6.25C7.83347 6.25 8.875 4.96207 8.875 3.625C8.875 2.04153 7.58707 1 6.25 1Z",
-          stroke: "currentColor",
-          strokeWidth: "1.5",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }
-      )
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M15.7485 6.5C15.7485 8.57107 14.0696 10.25 11.9985 10.25C9.92747 10.25 8.24854 8.57107 8.24854 6.5C8.24854 4.42893 9.92747 2.75 11.9985 2.75C14.0696 2.75 15.7485 4.42893 15.7485 6.5Z",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M11.9985 13.25C8.20293 13.25 5.43245 15.7735 4.67009 19.1657C4.54089 19.7406 5.0077 20.25 5.59696 20.25H18.4001C18.9894 20.25 19.4562 19.7406 19.327 19.1657C18.5646 15.7735 15.7941 13.25 11.9985 13.25Z",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
     }
   );
 };

package/dist/icons/Team.cjs

@@ -28,15 +28,15 @@ var Team = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
   "svg",
   {
     width: "100%",
-    viewBox: "0 0 12 13",
+    viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "path",
       {
-        d: "M0.5625 11.9375V8.83036C0.5625 7.97234 1.25806 7.27679 2.11607 7.27679H4.44643C5.30444 7.27679 6 7.97234 6 8.83036V11.9375M8.33036 8.83036H9.88393C10.7419 8.83036 11.4375 9.52591 11.4375 10.3839V11.9375M3.28125 1.0625C4.29498 1.0625 5.22321 1.83929 5.22321 3.00446C5.22321 4.16964 4.29498 4.94643 3.28125 4.94643C2.26752 4.94643 1.33929 4.16964 1.33929 3.00446C1.33929 1.83929 2.26752 1.0625 3.28125 1.0625ZM9.10714 2.61607C8.31985 2.61607 7.55357 3.23591 7.55357 4.16964C7.55357 5.10337 8.31985 5.72321 9.10714 5.72321C9.89444 5.72321 10.6607 5.10337 10.6607 4.16964C10.6607 3.23591 9.89444 2.61607 9.10714 2.61607Z",
+        d: "M17.7498 19.25H21.4228C22.0042 19.25 22.468 18.754 22.3704 18.1808C21.8389 15.0624 20.0189 12.75 16.9998 12.75C16.5537 12.75 16.1338 12.8005 15.7404 12.8966M11.2497 7C11.2497 8.79493 9.79461 10.25 7.99969 10.25C6.20476 10.25 4.74969 8.79493 4.74969 7C4.74969 5.20507 6.20476 3.75 7.99969 3.75C9.79461 3.75 11.2497 5.20507 11.2497 7ZM19.7497 7.5C19.7497 9.01878 18.5185 10.25 16.9997 10.25C15.4809 10.25 14.2497 9.01878 14.2497 7.5C14.2497 5.98122 15.4809 4.75 16.9997 4.75C18.5185 4.75 19.7497 5.98122 19.7497 7.5ZM1.87029 19.1808C2.4382 15.4997 4.51686 12.75 7.99969 12.75C11.4825 12.75 13.5612 15.4997 14.1291 19.1808C14.2177 19.755 13.7549 20.25 13.1739 20.25H2.82547C2.24447 20.25 1.7817 19.755 1.87029 19.1808Z",
         stroke: "currentColor",
-        strokeWidth: "1.125",
+        strokeWidth: "1.5",
         strokeLinecap: "round",
         strokeLinejoin: "round"
       }

package/dist/icons/Team.js

@@ -6,15 +6,15 @@ var Team = () => /* @__PURE__ */ jsx(
   "svg",
   {
     width: "100%",
-    viewBox: "0 0 12 13",
+    viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     children: /* @__PURE__ */ jsx(
       "path",
       {
-        d: "M0.5625 11.9375V8.83036C0.5625 7.97234 1.25806 7.27679 2.11607 7.27679H4.44643C5.30444 7.27679 6 7.97234 6 8.83036V11.9375M8.33036 8.83036H9.88393C10.7419 8.83036 11.4375 9.52591 11.4375 10.3839V11.9375M3.28125 1.0625C4.29498 1.0625 5.22321 1.83929 5.22321 3.00446C5.22321 4.16964 4.29498 4.94643 3.28125 4.94643C2.26752 4.94643 1.33929 4.16964 1.33929 3.00446C1.33929 1.83929 2.26752 1.0625 3.28125 1.0625ZM9.10714 2.61607C8.31985 2.61607 7.55357 3.23591 7.55357 4.16964C7.55357 5.10337 8.31985 5.72321 9.10714 5.72321C9.89444 5.72321 10.6607 5.10337 10.6607 4.16964C10.6607 3.23591 9.89444 2.61607 9.10714 2.61607Z",
+        d: "M17.7498 19.25H21.4228C22.0042 19.25 22.468 18.754 22.3704 18.1808C21.8389 15.0624 20.0189 12.75 16.9998 12.75C16.5537 12.75 16.1338 12.8005 15.7404 12.8966M11.2497 7C11.2497 8.79493 9.79461 10.25 7.99969 10.25C6.20476 10.25 4.74969 8.79493 4.74969 7C4.74969 5.20507 6.20476 3.75 7.99969 3.75C9.79461 3.75 11.2497 5.20507 11.2497 7ZM19.7497 7.5C19.7497 9.01878 18.5185 10.25 16.9997 10.25C15.4809 10.25 14.2497 9.01878 14.2497 7.5C14.2497 5.98122 15.4809 4.75 16.9997 4.75C18.5185 4.75 19.7497 5.98122 19.7497 7.5ZM1.87029 19.1808C2.4382 15.4997 4.51686 12.75 7.99969 12.75C11.4825 12.75 13.5612 15.4997 14.1291 19.1808C14.2177 19.755 13.7549 20.25 13.1739 20.25H2.82547C2.24447 20.25 1.7817 19.755 1.87029 19.1808Z",
         stroke: "currentColor",
-        strokeWidth: "1.125",
+        strokeWidth: "1.5",
         strokeLinecap: "round",
         strokeLinejoin: "round"
       }

package/dist/icons/index.js

@@ -1,13 +1,13 @@
 import {
   Icon,
   IconContainer
-} from "../chunk-MYG24ZWT.js";
+} from "../chunk-NZJCJJH5.js";
 import "../chunk-LAMQKQU3.js";
-import "../chunk-XUGLVWSH.js";
-import "../chunk-CLU2FRJZ.js";
+import "../chunk-RFGKH3R6.js";
 import "../chunk-2VBDEO6M.js";
 import "../chunk-E4EXM4SY.js";
 import "../chunk-JSGRNWSB.js";
+import "../chunk-CLU2FRJZ.js";
 import "../chunk-CIGAQ47A.js";
 export {
   Icon,

package/dist/router.cjs

@@ -39,6 +39,7 @@ var router_exports = {};
 __export(router_exports, {
   Link: () => Link,
   Navigate: () => Navigate,
+  getRouteName: () => getRouteName,
   replaceParams: () => replaceParams,
   useCurrentRoute: () => useCurrentRoute,
   useFindMatchingRoute: () => useFindMatchingRoute,
@@ -1269,10 +1270,19 @@ function useCurrentRoute() {
   const location = (0, import_react_router_dom.useLocation)();
   return location.pathname;
 }
+function getRouteName(path, routes) {
+  for (const routeName of Object.keys(routes)) {
+    if ((0, import_react_router_dom.matchPath)(routes[routeName], path)) {
+      return routeName;
+    }
+  }
+  return null;
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Link,
   Navigate,
+  getRouteName,
   replaceParams,
   useCurrentRoute,
   useFindMatchingRoute,

package/dist/router.d.cts

@@ -37,6 +37,9 @@ declare function useNavigate<RoutesType extends string>(): (to: RoutesType | num
 declare function useMatchRoutes<RoutesType extends string>(routes: RoutesType[]): boolean;
 declare function useFindMatchingRoute<RoutesType extends string>(routes: RoutesType[]): RoutesType | undefined;
 declare function useMatchRoute<RoutesType extends string>(route: RoutesType): PathMatch<string> | null;
-declare function useCurrentRoute<RoutesType>(): RoutesType;
+declare function useCurrentRoute<RoutesType extends string>(): RoutesType;
+declare function getRouteName<RoutesType extends string>(path: RoutesType, routes: {
+    [key: string]: string;
+}): string | null;
 
-export { ExternalLink, Link, LinkProps, Navigate, QueryParams, RouteHash, RouteParams, replaceParams, useCurrentRoute, useFindMatchingRoute, useMatchRoute, useMatchRoutes, useNavigate };
+export { ExternalLink, Link, LinkProps, Navigate, QueryParams, RouteHash, RouteParams, getRouteName, replaceParams, useCurrentRoute, useFindMatchingRoute, useMatchRoute, useMatchRoutes, useNavigate };

package/dist/router.d.ts

@@ -37,6 +37,9 @@ declare function useNavigate<RoutesType extends string>(): (to: RoutesType | num
 declare function useMatchRoutes<RoutesType extends string>(routes: RoutesType[]): boolean;
 declare function useFindMatchingRoute<RoutesType extends string>(routes: RoutesType[]): RoutesType | undefined;
 declare function useMatchRoute<RoutesType extends string>(route: RoutesType): PathMatch<string> | null;
-declare function useCurrentRoute<RoutesType>(): RoutesType;
+declare function useCurrentRoute<RoutesType extends string>(): RoutesType;
+declare function getRouteName<RoutesType extends string>(path: RoutesType, routes: {
+    [key: string]: string;
+}): string | null;
 
-export { ExternalLink, Link, LinkProps, Navigate, QueryParams, RouteHash, RouteParams, replaceParams, useCurrentRoute, useFindMatchingRoute, useMatchRoute, useMatchRoutes, useNavigate };
+export { ExternalLink, Link, LinkProps, Navigate, QueryParams, RouteHash, RouteParams, getRouteName, replaceParams, useCurrentRoute, useFindMatchingRoute, useMatchRoute, useMatchRoutes, useNavigate };

package/dist/router.js

@@ -1,13 +1,14 @@
 import {
   Link,
   Navigate,
+  getRouteName,
   replaceParams,
   useCurrentRoute,
   useFindMatchingRoute,
   useMatchRoute,
   useMatchRoutes,
   useNavigate
-} from "./chunk-6RXFA73Z.js";
+} from "./chunk-M56R3RJ7.js";
 import "./chunk-LAMQKQU3.js";
 import "./chunk-2VBDEO6M.js";
 import "./chunk-E4EXM4SY.js";
@@ -16,6 +17,7 @@ import "./chunk-CIGAQ47A.js";
 export {
   Link,
   Navigate,
+  getRouteName,
   replaceParams,
   useCurrentRoute,
   useFindMatchingRoute,

package/dist/styles/colors.d.cts

@@ -131,5 +131,6 @@ declare function useThemeBg(): string;
 type ThemeProp = {
     theme: Theme;
 };
+type WithTheme<T extends Record<string, unknown>> = T & ThemeProp;
 
-export { LightsparkTheme, ThemeProp, Themes, colors, componentToHex, contrast, darkGradient, hexToRGB, hexToRGBAStr, ifDark, ifLight, isDark, isLight, luminance, rgbToHex, themeOr, themeWithTypography, themes, useThemeBg };
+export { LightsparkTheme, ThemeProp, Themes, WithTheme, colors, componentToHex, contrast, darkGradient, hexToRGB, hexToRGBAStr, ifDark, ifLight, isDark, isLight, luminance, rgbToHex, themeOr, themeWithTypography, themes, useThemeBg };

package/dist/styles/colors.d.ts

@@ -131,5 +131,6 @@ declare function useThemeBg(): string;
 type ThemeProp = {
     theme: Theme;
 };
+type WithTheme<T extends Record<string, unknown>> = T & ThemeProp;
 
-export { LightsparkTheme, ThemeProp, Themes, colors, componentToHex, contrast, darkGradient, hexToRGB, hexToRGBAStr, ifDark, ifLight, isDark, isLight, luminance, rgbToHex, themeOr, themeWithTypography, themes, useThemeBg };
+export { LightsparkTheme, ThemeProp, Themes, WithTheme, colors, componentToHex, contrast, darkGradient, hexToRGB, hexToRGBAStr, ifDark, ifLight, isDark, isLight, luminance, rgbToHex, themeOr, themeWithTypography, themes, useThemeBg };

package/dist/styles/common.cjs

@@ -59,11 +59,13 @@ __export(common_exports, {
   minSmMaxLgContentInset: () => minSmMaxLgContentInset,
   outlineOffset: () => outlineOffset,
   overlaySurface: () => overlaySurface,
+  overlaySurfaceBorderColor: () => overlaySurfaceBorderColor,
   pageBorderRadius: () => pageBorderRadius,
   pageBorderRadiusPx: () => pageBorderRadiusPx,
   rootFontSizePx: () => rootFontSizePx,
   rootFontSizeRems: () => rootFontSizeRems,
   smContentInset: () => smContentInset,
+  standardBorderRadius: () => standardBorderRadius,
   standardCardShadow: () => standardCardShadow,
   standardContentInset: () => standardContentInset,
   standardContentInsetMdPx: () => standardContentInsetMdPx,
@@ -1321,6 +1323,12 @@ var standardContentInsetPx = 32;
 var standardContentInsetMdPx = 24;
 var standardContentInsetSmPx = 16;
 var cardBorderRadiusPx = 16;
+var standardBorderRadius = (radius) => {
+  const borderRadiusPx = Array.isArray(radius) ? radius.map((r) => `${r}px`).join(" ") : `${radius}px`;
+  return `
+    border-radius: ${borderRadiusPx};
+  `;
+};
 var smContentInset = import_react4.css`
   ${bp.sm(`
     margin-left: auto;
@@ -1387,11 +1395,23 @@ var darkGradientBg = import_react4.css`
 var StyledTooltip = (0, import_styled.default)(import_react_tooltip.Tooltip)`
   z-index: ${z.modalOverlay};
 `;
-var overlaySurface = ({ theme }) => import_react4.css`
-  background-color: ${themeOr(colors.white, theme.c1Neutral)({ theme })};
-  border: 0.5px solid ${themeOr(theme.c1Neutral, theme.c3Neutral)({ theme })};
+var overlaySurfaceBorderColor = ({
+  theme,
+  important = false
+}) => import_react4.css`
+  border-color: ${themeOr(theme.c1Neutral, theme.c3Neutral)({ theme })}
+    ${important ? "!important" : ""};
+`;
+var overlaySurface = ({
+  theme,
+  important = false
+}) => import_react4.css`
+  background-color: ${themeOr(colors.white, theme.c1Neutral)({ theme })}
+    ${important ? "!important" : ""};
+  border: 0.5px solid ${important ? "!important" : ""};
+  ${overlaySurfaceBorderColor({ theme, important })};
   ${themeOr(
-  "box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08), 0px 1px 4px rgba(0, 0, 0, 0.1);",
+  `box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08), 0px 1px 4px rgba(0, 0, 0, 0.1) ${important ? "!important" : ""};`,
   ""
 )({ theme })}
 `;
@@ -1414,11 +1434,13 @@ var mcBoldStyled = ({ theme }) => mcBold(theme);
   minSmMaxLgContentInset,
   outlineOffset,
   overlaySurface,
+  overlaySurfaceBorderColor,
   pageBorderRadius,
   pageBorderRadiusPx,
   rootFontSizePx,
   rootFontSizeRems,
   smContentInset,
+  standardBorderRadius,
   standardCardShadow,
   standardContentInset,
   standardContentInsetMdPx,

package/dist/styles/common.d.cts

@@ -3,7 +3,7 @@ import * as _emotion_styled from '@emotion/styled';
 import * as react from 'react';
 import * as _emotion_react from '@emotion/react';
 import { Theme } from '@emotion/react';
-import { ThemeProp } from './colors.cjs';
+import { WithTheme, ThemeProp } from './colors.cjs';
 import '@emotion/css';
 import './fonts/typographyTokens.cjs';
 
@@ -14,24 +14,26 @@ declare const headingContentMarginPx = 30;
 declare const standardContentInsetPx = 32;
 declare const standardContentInsetMdPx = 24;
 declare const standardContentInsetSmPx = 16;
+declare const standardBorderRadiusPx: readonly [0, 4, 8, 12, 16];
+type StandardBorderRadius = (typeof standardBorderRadiusPx)[number];
 declare const cardBorderRadiusPx = 16;
+type BorderRadiusArg = StandardBorderRadius | StandardBorderRadius[];
+declare const standardBorderRadius: (radius: BorderRadiusArg) => string;
 declare const smContentInset: _emotion_react.SerializedStyles;
 declare const minSmMaxLgContentInset: _emotion_react.SerializedStyles;
 declare const standardContentInset: _emotion_react.SerializedStyles;
 declare const standardCardShadow: _emotion_react.SerializedStyles;
 declare const pageBorderRadiusPx = 16;
 declare const pageBorderRadius = "\n  border-radius: 16px;\n";
-declare const getFocusOutline: ({ theme, onBgHex, }: {
-    theme: Theme;
+declare const getFocusOutline: ({ theme, onBgHex, }: WithTheme<{
     onBgHex?: string;
-}) => string;
+}>) => string;
 declare const outlineOffset = "-2px";
 declare const standardFocusOutline: ({ theme }: ThemeProp) => _emotion_react.SerializedStyles;
-declare const delta: ({ theme, delta, invertSuccessColor, }: {
-    theme: Theme;
+declare const delta: ({ theme, delta, invertSuccessColor, }: WithTheme<{
     delta?: number;
     invertSuccessColor?: boolean;
-}) => _emotion_react.SerializedStyles;
+}>) => _emotion_react.SerializedStyles;
 declare const subtext: ({ theme }: ThemeProp) => _emotion_react.SerializedStyles;
 declare const Subtext: _emotion_styled.StyledComponent<{
     theme?: Theme;
@@ -41,8 +43,13 @@ declare const darkGradientBg: _emotion_react.SerializedStyles;
 declare const StyledTooltip: _emotion_styled.StyledComponent<react_tooltip.ITooltip & react.RefAttributes<react_tooltip.TooltipRefProps> & {
     theme?: Theme;
 }, {}, {}>;
-declare const overlaySurface: ({ theme }: ThemeProp) => _emotion_react.SerializedStyles;
+declare const overlaySurfaceBorderColor: ({ theme, important, }: WithTheme<{
+    important?: boolean;
+}>) => _emotion_react.SerializedStyles;
+declare const overlaySurface: ({ theme, important, }: WithTheme<{
+    important?: boolean;
+}>) => _emotion_react.SerializedStyles;
 declare const mcBold: (theme: Theme) => _emotion_react.SerializedStyles;
 declare const mcBoldStyled: ({ theme }: ThemeProp) => _emotion_react.SerializedStyles;
 
-export { StyledTooltip, Subtext, cardBorderRadiusPx, darkGradientBg, delta, getFocusOutline, headingContentMarginPx, mcBold, mcBoldStyled, minSmMaxLgContentInset, outlineOffset, overlaySurface, pageBorderRadius, pageBorderRadiusPx, rootFontSizePx, rootFontSizeRems, smContentInset, standardCardShadow, standardContentInset, standardContentInsetMdPx, standardContentInsetPx, standardContentInsetSmPx, standardFocusOutline, standardLineHeightEms, subtext };
+export { StyledTooltip, Subtext, cardBorderRadiusPx, darkGradientBg, delta, getFocusOutline, headingContentMarginPx, mcBold, mcBoldStyled, minSmMaxLgContentInset, outlineOffset, overlaySurface, overlaySurfaceBorderColor, pageBorderRadius, pageBorderRadiusPx, rootFontSizePx, rootFontSizeRems, smContentInset, standardBorderRadius, standardCardShadow, standardContentInset, standardContentInsetMdPx, standardContentInsetPx, standardContentInsetSmPx, standardFocusOutline, standardLineHeightEms, subtext };

package/dist/styles/common.d.ts

@@ -3,7 +3,7 @@ import * as _emotion_styled from '@emotion/styled';
 import * as react from 'react';
 import * as _emotion_react from '@emotion/react';
 import { Theme } from '@emotion/react';
-import { ThemeProp } from './colors.js';
+import { WithTheme, ThemeProp } from './colors.js';
 import '@emotion/css';
 import './fonts/typographyTokens.js';
 
@@ -14,24 +14,26 @@ declare const headingContentMarginPx = 30;
 declare const standardContentInsetPx = 32;
 declare const standardContentInsetMdPx = 24;
 declare const standardContentInsetSmPx = 16;
+declare const standardBorderRadiusPx: readonly [0, 4, 8, 12, 16];
+type StandardBorderRadius = (typeof standardBorderRadiusPx)[number];
 declare const cardBorderRadiusPx = 16;
+type BorderRadiusArg = StandardBorderRadius | StandardBorderRadius[];
+declare const standardBorderRadius: (radius: BorderRadiusArg) => string;
 declare const smContentInset: _emotion_react.SerializedStyles;
 declare const minSmMaxLgContentInset: _emotion_react.SerializedStyles;
 declare const standardContentInset: _emotion_react.SerializedStyles;
 declare const standardCardShadow: _emotion_react.SerializedStyles;
 declare const pageBorderRadiusPx = 16;
 declare const pageBorderRadius = "\n  border-radius: 16px;\n";
-declare const getFocusOutline: ({ theme, onBgHex, }: {
-    theme: Theme;
+declare const getFocusOutline: ({ theme, onBgHex, }: WithTheme<{
     onBgHex?: string;
-}) => string;
+}>) => string;
 declare const outlineOffset = "-2px";
 declare const standardFocusOutline: ({ theme }: ThemeProp) => _emotion_react.SerializedStyles;
-declare const delta: ({ theme, delta, invertSuccessColor, }: {
-    theme: Theme;
+declare const delta: ({ theme, delta, invertSuccessColor, }: WithTheme<{
     delta?: number;
     invertSuccessColor?: boolean;
-}) => _emotion_react.SerializedStyles;
+}>) => _emotion_react.SerializedStyles;
 declare const subtext: ({ theme }: ThemeProp) => _emotion_react.SerializedStyles;
 declare const Subtext: _emotion_styled.StyledComponent<{
     theme?: Theme;
@@ -41,8 +43,13 @@ declare const darkGradientBg: _emotion_react.SerializedStyles;
 declare const StyledTooltip: _emotion_styled.StyledComponent<react_tooltip.ITooltip & react.RefAttributes<react_tooltip.TooltipRefProps> & {
     theme?: Theme;
 }, {}, {}>;
-declare const overlaySurface: ({ theme }: ThemeProp) => _emotion_react.SerializedStyles;
+declare const overlaySurfaceBorderColor: ({ theme, important, }: WithTheme<{
+    important?: boolean;
+}>) => _emotion_react.SerializedStyles;
+declare const overlaySurface: ({ theme, important, }: WithTheme<{
+    important?: boolean;
+}>) => _emotion_react.SerializedStyles;
 declare const mcBold: (theme: Theme) => _emotion_react.SerializedStyles;
 declare const mcBoldStyled: ({ theme }: ThemeProp) => _emotion_react.SerializedStyles;
 
-export { StyledTooltip, Subtext, cardBorderRadiusPx, darkGradientBg, delta, getFocusOutline, headingContentMarginPx, mcBold, mcBoldStyled, minSmMaxLgContentInset, outlineOffset, overlaySurface, pageBorderRadius, pageBorderRadiusPx, rootFontSizePx, rootFontSizeRems, smContentInset, standardCardShadow, standardContentInset, standardContentInsetMdPx, standardContentInsetPx, standardContentInsetSmPx, standardFocusOutline, standardLineHeightEms, subtext };
+export { StyledTooltip, Subtext, cardBorderRadiusPx, darkGradientBg, delta, getFocusOutline, headingContentMarginPx, mcBold, mcBoldStyled, minSmMaxLgContentInset, outlineOffset, overlaySurface, overlaySurfaceBorderColor, pageBorderRadius, pageBorderRadiusPx, rootFontSizePx, rootFontSizeRems, smContentInset, standardBorderRadius, standardCardShadow, standardContentInset, standardContentInsetMdPx, standardContentInsetPx, standardContentInsetSmPx, standardFocusOutline, standardLineHeightEms, subtext };

package/dist/styles/common.js

@@ -11,11 +11,13 @@ import {
   minSmMaxLgContentInset,
   outlineOffset,
   overlaySurface,
+  overlaySurfaceBorderColor,
   pageBorderRadius,
   pageBorderRadiusPx,
   rootFontSizePx,
   rootFontSizeRems,
   smContentInset,
+  standardBorderRadius,
   standardCardShadow,
   standardContentInset,
   standardContentInsetMdPx,
@@ -24,11 +26,11 @@ import {
   standardFocusOutline,
   standardLineHeightEms,
   subtext
-} from "../chunk-XUGLVWSH.js";
-import "../chunk-CLU2FRJZ.js";
+} from "../chunk-RFGKH3R6.js";
 import "../chunk-2VBDEO6M.js";
 import "../chunk-E4EXM4SY.js";
 import "../chunk-JSGRNWSB.js";
+import "../chunk-CLU2FRJZ.js";
 import "../chunk-CIGAQ47A.js";
 export {
   StyledTooltip,
@@ -43,11 +45,13 @@ export {
   minSmMaxLgContentInset,
   outlineOffset,
   overlaySurface,
+  overlaySurfaceBorderColor,
   pageBorderRadius,
   pageBorderRadiusPx,
   rootFontSizePx,
   rootFontSizeRems,
   smContentInset,
+  standardBorderRadius,
   standardCardShadow,
   standardContentInset,
   standardContentInsetMdPx,

package/dist/styles/fields.cjs

@@ -1395,7 +1395,7 @@ var textInputStyle = ({
   return import_react5.css`
   border-radius: ${textInputBorderRadiusPx}px;
   background-color: ${disabled ? theme.vlcNeutral : theme.bg};
-  pointer-events: ${disabled ? "none" : "auto"};
+  cursor: ${disabled ? "not-allowed" : "auto"};
   box-sizing: border-box;
   font-weight: ${textInputFontWeight};
 

package/dist/styles/fields.d.cts

@@ -2,8 +2,7 @@ import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import * as _emotion_styled from '@emotion/styled';
 import * as react from 'react';
 import * as _emotion_react from '@emotion/react';
-import { Theme } from '@emotion/react';
-import { ThemeProp } from './colors.cjs';
+import { ThemeProp, WithTheme } from './colors.cjs';
 import '@emotion/css';
 import './fonts/typographyTokens.cjs';
 
@@ -21,44 +20,41 @@ declare const textInputPaddingPx = 12;
 declare const textInputPadding = "12px";
 declare const textInputBorderColor: ({ theme }: ThemeProp) => string;
 declare const textInputBorderColorFocused: ({ theme }: ThemeProp) => string;
-declare const textInputStyle: ({ theme, disabled, hasError, paddingLeftPx, paddingRightPx, }: {
-    theme: Theme;
+declare const textInputStyle: ({ theme, disabled, hasError, paddingLeftPx, paddingRightPx, }: WithTheme<{
     disabled: boolean;
     hasError: boolean;
     paddingLeftPx?: number | undefined;
     paddingRightPx?: number | undefined;
-}) => _emotion_react.SerializedStyles;
+}>) => _emotion_react.SerializedStyles;
 declare const FieldError: _emotion_styled.StyledComponent<{
-    theme?: Theme;
+    theme?: _emotion_react.Theme;
     as?: react.ElementType<any>;
 }, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-declare const aboveFieldError: ({ theme, hasError, }: {
-    theme: Theme;
+declare const aboveFieldError: ({ theme, hasError, }: WithTheme<{
     hasError: boolean;
-}) => _emotion_react.SerializedStyles;
+}>) => _emotion_react.SerializedStyles;
 declare function InputSubtext({ text, hasError, }: {
     text?: string | undefined;
     hasError?: boolean;
 }): _emotion_react_jsx_runtime.JSX.Element;
 declare const StyledInputSubtext: _emotion_styled.StyledComponent<{
-    theme?: Theme;
+    theme?: _emotion_react.Theme;
     as?: react.ElementType<any>;
 } & {
     hasError: boolean;
     visible: boolean;
 }, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-declare const labelStyle: ({ theme, hasError, }: {
-    theme: Theme;
+declare const labelStyle: ({ theme, hasError, }: WithTheme<{
     hasError?: boolean;
-}) => _emotion_react.SerializedStyles;
+}>) => _emotion_react.SerializedStyles;
 declare const Label: _emotion_styled.StyledComponent<{
-    theme?: Theme;
+    theme?: _emotion_react.Theme;
     as?: react.ElementType<any>;
 } & {
     hasError?: boolean;
 }, react.DetailedHTMLProps<react.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {}>;
 declare const LabelDiv: _emotion_styled.StyledComponent<{
-    theme?: Theme;
+    theme?: _emotion_react.Theme;
     as?: react.ElementType<any>;
 } & {
     hasError?: boolean;