@lightsparkdev/ui 0.0.8 → 0.0.11

package/dist/styles/fields.cjs

@@ -1289,36 +1289,50 @@ var import_react4 = require("@emotion/react");
 var import_styled = __toESM(require("@emotion/styled"), 1);
 var rootFontSizePx = 12;
 var rootFontSizeRems = rootFontSizePx / 16;
-var standardContentInsetPx = 32;
-var standardContentInsetMdPx = 24;
-var standardContentInsetSmPx = 16;
+function buildStandardContentInset(smPx, minSmMaxLgPx, lgPx) {
+  const smCSS = import_react4.css`
+    ${bp.sm(`
+      margin-left: auto;
+      margin-right: auto;
+      width: calc(100% - ${smPx * 2}px);
+    `)}
+  `;
+  const minSmMaxLgCSS = import_react4.css`
+    ${bp.minSmMaxLg(`
+      margin-left: auto;
+      margin-right: auto;
+      width: calc(100% - ${minSmMaxLgPx * 2}px);
+    `)}
+  `;
+  const lgCSS = import_react4.css`
+    ${bp.lg(`
+      margin-left: auto;
+      margin-right: auto;
+      width: calc(100% - ${lgPx * 2}px);
+      max-width: 1280px;
+    `)}
+  `;
+  return {
+    smPx,
+    minSmMaxLgPx,
+    lgPx,
+    smCSS,
+    minSmMaxLgCSS,
+    lgCSS,
+    css: import_react4.css`
+      ${lgCSS}
+      ${smCSS}
+      ${minSmMaxLgCSS}
+    `
+  };
+}
+var standardContentInset = buildStandardContentInset(16, 24, 32);
 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;
-    margin-right: auto;
-    width: calc(100% - ${standardContentInsetSmPx * 2}px);
-  `)}
-`;
-var minSmMaxLgContentInset = import_react4.css`
-  ${bp.minSmMaxLg(`
-    width: calc(100% - ${standardContentInsetMdPx * 2}px);
-  `)}
-`;
-var standardContentInset = import_react4.css`
-  margin-left: auto;
-  margin-right: auto;
-  width: calc(100% - ${standardContentInsetPx * 2}px);
-  max-width: 1280px;
-
-  ${smContentInset}
-  ${minSmMaxLgContentInset}
-`;
 var standardCardShadow = import_react4.css`
   box-shadow:
     0px 4px 10px 0px rgba(0, 0, 0, 0.08),
@@ -1404,8 +1418,21 @@ var textInputPaddingPx = 12;
 var textInputPadding = `${textInputPaddingPx}px`;
 var textInputBorderColor = ({ theme }) => themeOr(theme.c1Neutral, theme.c3Neutral)({ theme });
 var textInputBorderColorFocused = ({ theme }) => themeOr(theme.hcNeutral, theme.hcNeutral)({ theme });
+var textInputActiveStyles = ({
+  theme,
+  paddingLeftPx,
+  paddingRightPx
+}) => import_react5.css`
+  border-color: ${textInputBorderColorFocused({ theme })};
+  border-width: 2px;
+  color: ${textInputColor({ theme })};
+  padding: ${textInputPaddingPx - 1}px;
+  ${paddingLeftPx ? `padding-left: ${paddingLeftPx - 1}px;` : ""}
+  ${paddingRightPx ? `padding-right: ${paddingRightPx - 1}px;` : ""}
+`;
 var textInputStyle = ({
   theme,
+  active,
   disabled,
   hasError,
   paddingLeftPx,
@@ -1439,15 +1466,13 @@ var textInputStyle = ({
   max-width: ${maxFieldWidth};
   text-overflow: ellipsis;
   &:focus,
-  &:active {
-    border-color: ${textInputBorderColorFocused({ theme })};
-    border-width: 2px;
-    color: ${textInputColor({ theme })};
-    padding: ${textInputPaddingPx - 1}px;
-    ${paddingLeftPx ? `padding-left: ${paddingLeftPx - 1}px;` : ""}
-    ${paddingRightPx ? `padding-right: ${paddingRightPx - 1}px;` : ""}
+  &:active,
+  &:has(:focus) {
+    ${textInputActiveStyles({ theme, paddingLeftPx, paddingRightPx })}
   }
 
+  ${active && textInputActiveStyles({ theme, paddingLeftPx, paddingRightPx })}
+
   &::placeholder {
     color: ${textInputPlaceholderColor({ theme })};
   }

package/dist/styles/fields.d.cts

@@ -24,9 +24,10 @@ 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, }: WithTheme<{
-    disabled: boolean;
-    hasError: boolean;
+declare const textInputStyle: ({ theme, active, disabled, hasError, paddingLeftPx, paddingRightPx, }: WithTheme<{
+    active?: boolean | undefined;
+    disabled?: boolean | undefined;
+    hasError?: boolean | undefined;
     paddingLeftPx?: number | undefined;
     paddingRightPx?: number | undefined;
 }>) => _emotion_react.SerializedStyles;

package/dist/styles/fields.d.ts

@@ -24,9 +24,10 @@ 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, }: WithTheme<{
-    disabled: boolean;
-    hasError: boolean;
+declare const textInputStyle: ({ theme, active, disabled, hasError, paddingLeftPx, paddingRightPx, }: WithTheme<{
+    active?: boolean | undefined;
+    disabled?: boolean | undefined;
+    hasError?: boolean | undefined;
     paddingLeftPx?: number | undefined;
     paddingRightPx?: number | undefined;
 }>) => _emotion_react.SerializedStyles;

package/dist/styles/fields.js

@@ -22,9 +22,9 @@ import {
   textInputPaddingPx,
   textInputPlaceholderColor,
   textInputStyle
-} from "../chunk-SZVMKB4E.js";
+} from "../chunk-ATUH6SXK.js";
 import "../chunk-55OQPFLF.js";
-import "../chunk-HNVQIY5U.js";
+import "../chunk-JK4BP73A.js";
 import "../chunk-2VBDEO6M.js";
 import "../chunk-E4EXM4SY.js";
 import "../chunk-JSGRNWSB.js";

package/dist/styles/fonts/typography/Article.cjs

@@ -1279,36 +1279,50 @@ function hexToRGB(hex) {
 // src/styles/common.tsx
 var rootFontSizePx = 12;
 var rootFontSizeRems = rootFontSizePx / 16;
-var standardContentInsetPx = 32;
-var standardContentInsetMdPx = 24;
-var standardContentInsetSmPx = 16;
+function buildStandardContentInset(smPx, minSmMaxLgPx, lgPx) {
+  const smCSS = import_react4.css`
+    ${bp.sm(`
+      margin-left: auto;
+      margin-right: auto;
+      width: calc(100% - ${smPx * 2}px);
+    `)}
+  `;
+  const minSmMaxLgCSS = import_react4.css`
+    ${bp.minSmMaxLg(`
+      margin-left: auto;
+      margin-right: auto;
+      width: calc(100% - ${minSmMaxLgPx * 2}px);
+    `)}
+  `;
+  const lgCSS = import_react4.css`
+    ${bp.lg(`
+      margin-left: auto;
+      margin-right: auto;
+      width: calc(100% - ${lgPx * 2}px);
+      max-width: 1280px;
+    `)}
+  `;
+  return {
+    smPx,
+    minSmMaxLgPx,
+    lgPx,
+    smCSS,
+    minSmMaxLgCSS,
+    lgCSS,
+    css: import_react4.css`
+      ${lgCSS}
+      ${smCSS}
+      ${minSmMaxLgCSS}
+    `
+  };
+}
+var standardContentInset = buildStandardContentInset(16, 24, 32);
 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;
-    margin-right: auto;
-    width: calc(100% - ${standardContentInsetSmPx * 2}px);
-  `)}
-`;
-var minSmMaxLgContentInset = import_react4.css`
-  ${bp.minSmMaxLg(`
-    width: calc(100% - ${standardContentInsetMdPx * 2}px);
-  `)}
-`;
-var standardContentInset = import_react4.css`
-  margin-left: auto;
-  margin-right: auto;
-  width: calc(100% - ${standardContentInsetPx * 2}px);
-  max-width: 1280px;
-
-  ${smContentInset}
-  ${minSmMaxLgContentInset}
-`;
 var standardCardShadow = import_react4.css`
   box-shadow:
     0px 4px 10px 0px rgba(0, 0, 0, 0.08),

package/dist/styles/fonts/typography/Article.js

@@ -1,19 +1,19 @@
 "use client";
 import {
   Article
-} from "../../../chunk-FN5PM3HQ.js";
+} from "../../../chunk-Y37DCY7Y.js";
 import "../../../chunk-FHNYQLMF.js";
+import "../../../chunk-LD5LZXUP.js";
 import "../../../chunk-BCFRW7CV.js";
 import "../../../chunk-QGGOMPHZ.js";
-import "../../../chunk-LD5LZXUP.js";
 import "../../../chunk-4TFRLWCC.js";
 import "../../../chunk-YMNSXZ5D.js";
 import "../../../chunk-3XSQV5U4.js";
-import "../../../chunk-2YB7653N.js";
-import "../../../chunk-744FBGRP.js";
-import "../../../chunk-VHW2KROZ.js";
+import "../../../chunk-FCZJILMW.js";
+import "../../../chunk-XP2MX2AA.js";
+import "../../../chunk-RWIZ7Q74.js";
 import "../../../chunk-LAMQKQU3.js";
-import "../../../chunk-HNVQIY5U.js";
+import "../../../chunk-JK4BP73A.js";
 import "../../../chunk-2VBDEO6M.js";
 import "../../../chunk-E4EXM4SY.js";
 import "../../../chunk-JSGRNWSB.js";

package/dist/styles/fonts/typography/index.cjs

@@ -1290,36 +1290,50 @@ function hexToRGB(hex) {
 // src/styles/common.tsx
 var rootFontSizePx = 12;
 var rootFontSizeRems = rootFontSizePx / 16;
-var standardContentInsetPx = 32;
-var standardContentInsetMdPx = 24;
-var standardContentInsetSmPx = 16;
+function buildStandardContentInset(smPx, minSmMaxLgPx, lgPx) {
+  const smCSS = import_react4.css`
+    ${bp.sm(`
+      margin-left: auto;
+      margin-right: auto;
+      width: calc(100% - ${smPx * 2}px);
+    `)}
+  `;
+  const minSmMaxLgCSS = import_react4.css`
+    ${bp.minSmMaxLg(`
+      margin-left: auto;
+      margin-right: auto;
+      width: calc(100% - ${minSmMaxLgPx * 2}px);
+    `)}
+  `;
+  const lgCSS = import_react4.css`
+    ${bp.lg(`
+      margin-left: auto;
+      margin-right: auto;
+      width: calc(100% - ${lgPx * 2}px);
+      max-width: 1280px;
+    `)}
+  `;
+  return {
+    smPx,
+    minSmMaxLgPx,
+    lgPx,
+    smCSS,
+    minSmMaxLgCSS,
+    lgCSS,
+    css: import_react4.css`
+      ${lgCSS}
+      ${smCSS}
+      ${minSmMaxLgCSS}
+    `
+  };
+}
+var standardContentInset = buildStandardContentInset(16, 24, 32);
 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;
-    margin-right: auto;
-    width: calc(100% - ${standardContentInsetSmPx * 2}px);
-  `)}
-`;
-var minSmMaxLgContentInset = import_react4.css`
-  ${bp.minSmMaxLg(`
-    width: calc(100% - ${standardContentInsetMdPx * 2}px);
-  `)}
-`;
-var standardContentInset = import_react4.css`
-  margin-left: auto;
-  margin-right: auto;
-  width: calc(100% - ${standardContentInsetPx * 2}px);
-  max-width: 1280px;
-
-  ${smContentInset}
-  ${minSmMaxLgContentInset}
-`;
 var standardCardShadow = import_react4.css`
   box-shadow:
     0px 4px 10px 0px rgba(0, 0, 0, 0.08),

package/dist/styles/fonts/typography/index.js

@@ -1,6 +1,3 @@
-import {
-  BodyStrong
-} from "../../../chunk-LN7MMOXE.js";
 import {
   Label
 } from "../../../chunk-OO5UJRAW.js";
@@ -15,29 +12,32 @@ import {
 } from "../../../chunk-RBYRXBPI.js";
 import {
   Article
-} from "../../../chunk-FN5PM3HQ.js";
+} from "../../../chunk-Y37DCY7Y.js";
 import {
   Title
 } from "../../../chunk-FHNYQLMF.js";
+import {
+  Body
+} from "../../../chunk-LD5LZXUP.js";
+import {
+  BodyStrong
+} from "../../../chunk-LN7MMOXE.js";
 import {
   Code
 } from "../../../chunk-BCFRW7CV.js";
 import {
   Display
 } from "../../../chunk-QGGOMPHZ.js";
-import {
-  Body
-} from "../../../chunk-LD5LZXUP.js";
 import {
   Headline
 } from "../../../chunk-4TFRLWCC.js";
 import "../../../chunk-YMNSXZ5D.js";
 import "../../../chunk-3XSQV5U4.js";
-import "../../../chunk-2YB7653N.js";
-import "../../../chunk-744FBGRP.js";
-import "../../../chunk-VHW2KROZ.js";
+import "../../../chunk-FCZJILMW.js";
+import "../../../chunk-XP2MX2AA.js";
+import "../../../chunk-RWIZ7Q74.js";
 import "../../../chunk-LAMQKQU3.js";
-import "../../../chunk-HNVQIY5U.js";
+import "../../../chunk-JK4BP73A.js";
 import "../../../chunk-2VBDEO6M.js";
 import "../../../chunk-E4EXM4SY.js";
 import "../../../chunk-JSGRNWSB.js";

package/dist/styles/fonts/typographyTokens.d.cts

@@ -23,10 +23,7 @@ declare enum TokenSize {
     Small = "Small"
 }
 declare const getTypography: (customFontFamilies?: FontFamilies) => {
-    fontFamilies: {
-        main: string;
-        code: string;
-    };
+    fontFamilies: FontFamilies;
     lineHeights: {
         UmaDocs: {
             "5xl": string;

package/dist/styles/fonts/typographyTokens.d.ts

@@ -23,10 +23,7 @@ declare enum TokenSize {
     Small = "Small"
 }
 declare const getTypography: (customFontFamilies?: FontFamilies) => {
-    fontFamilies: {
-        main: string;
-        code: string;
-    };
+    fontFamilies: FontFamilies;
     lineHeights: {
         UmaDocs: {
             "5xl": string;

package/dist/styles/global.cjs

@@ -1295,30 +1295,44 @@ var import_styled = __toESM(require("@emotion/styled"), 1);
 var rootFontSizePx = 12;
 var rootFontSizeRems = rootFontSizePx / 16;
 var standardLineHeightEms = 1.21;
-var standardContentInsetPx = 32;
-var standardContentInsetMdPx = 24;
-var standardContentInsetSmPx = 16;
-var smContentInset = import_react4.css`
-  ${bp.sm(`
-    margin-left: auto;
-    margin-right: auto;
-    width: calc(100% - ${standardContentInsetSmPx * 2}px);
-  `)}
-`;
-var minSmMaxLgContentInset = import_react4.css`
-  ${bp.minSmMaxLg(`
-    width: calc(100% - ${standardContentInsetMdPx * 2}px);
-  `)}
-`;
-var standardContentInset = import_react4.css`
-  margin-left: auto;
-  margin-right: auto;
-  width: calc(100% - ${standardContentInsetPx * 2}px);
-  max-width: 1280px;
-
-  ${smContentInset}
-  ${minSmMaxLgContentInset}
-`;
+function buildStandardContentInset(smPx, minSmMaxLgPx, lgPx) {
+  const smCSS = import_react4.css`
+    ${bp.sm(`
+      margin-left: auto;
+      margin-right: auto;
+      width: calc(100% - ${smPx * 2}px);
+    `)}
+  `;
+  const minSmMaxLgCSS = import_react4.css`
+    ${bp.minSmMaxLg(`
+      margin-left: auto;
+      margin-right: auto;
+      width: calc(100% - ${minSmMaxLgPx * 2}px);
+    `)}
+  `;
+  const lgCSS = import_react4.css`
+    ${bp.lg(`
+      margin-left: auto;
+      margin-right: auto;
+      width: calc(100% - ${lgPx * 2}px);
+      max-width: 1280px;
+    `)}
+  `;
+  return {
+    smPx,
+    minSmMaxLgPx,
+    lgPx,
+    smCSS,
+    minSmMaxLgCSS,
+    lgCSS,
+    css: import_react4.css`
+      ${lgCSS}
+      ${smCSS}
+      ${minSmMaxLgCSS}
+    `
+  };
+}
+var standardContentInset = buildStandardContentInset(16, 24, 32);
 var standardCardShadow = import_react4.css`
   box-shadow:
     0px 4px 10px 0px rgba(0, 0, 0, 0.08),

package/dist/styles/global.js

@@ -1,9 +1,9 @@
 import {
   GlobalStyles,
   globalComponentStyles
-} from "../chunk-ZSUX6RLD.js";
+} from "../chunk-KMR5C25B.js";
 import "../chunk-IJVWYT5G.js";
-import "../chunk-HNVQIY5U.js";
+import "../chunk-JK4BP73A.js";
 import "../chunk-2VBDEO6M.js";
 import "../chunk-E4EXM4SY.js";
 import "../chunk-JSGRNWSB.js";

package/dist/styles/type.cjs

@@ -1270,30 +1270,44 @@ function hexToRGB(hex) {
 // src/styles/common.tsx
 var rootFontSizePx = 12;
 var rootFontSizeRems = rootFontSizePx / 16;
-var standardContentInsetPx = 32;
-var standardContentInsetMdPx = 24;
-var standardContentInsetSmPx = 16;
-var smContentInset = import_react4.css`
-  ${bp.sm(`
-    margin-left: auto;
-    margin-right: auto;
-    width: calc(100% - ${standardContentInsetSmPx * 2}px);
-  `)}
-`;
-var minSmMaxLgContentInset = import_react4.css`
-  ${bp.minSmMaxLg(`
-    width: calc(100% - ${standardContentInsetMdPx * 2}px);
-  `)}
-`;
-var standardContentInset = import_react4.css`
-  margin-left: auto;
-  margin-right: auto;
-  width: calc(100% - ${standardContentInsetPx * 2}px);
-  max-width: 1280px;
-
-  ${smContentInset}
-  ${minSmMaxLgContentInset}
-`;
+function buildStandardContentInset(smPx, minSmMaxLgPx, lgPx) {
+  const smCSS = import_react4.css`
+    ${bp.sm(`
+      margin-left: auto;
+      margin-right: auto;
+      width: calc(100% - ${smPx * 2}px);
+    `)}
+  `;
+  const minSmMaxLgCSS = import_react4.css`
+    ${bp.minSmMaxLg(`
+      margin-left: auto;
+      margin-right: auto;
+      width: calc(100% - ${minSmMaxLgPx * 2}px);
+    `)}
+  `;
+  const lgCSS = import_react4.css`
+    ${bp.lg(`
+      margin-left: auto;
+      margin-right: auto;
+      width: calc(100% - ${lgPx * 2}px);
+      max-width: 1280px;
+    `)}
+  `;
+  return {
+    smPx,
+    minSmMaxLgPx,
+    lgPx,
+    smCSS,
+    minSmMaxLgCSS,
+    lgCSS,
+    css: import_react4.css`
+      ${lgCSS}
+      ${smCSS}
+      ${minSmMaxLgCSS}
+    `
+  };
+}
+var standardContentInset = buildStandardContentInset(16, 24, 32);
 var standardCardShadow = import_react4.css`
   box-shadow:
     0px 4px 10px 0px rgba(0, 0, 0, 0.08),