@lightsparkdev/ui 1.0.7 → 1.0.8

package/dist/{chunk-6W3IBNGW.js → chunk-TPL3YXOG.js}

@@ -1,9 +1,9 @@
 import {
   toReactNodes
-} from "./chunk-XCEI3WIL.js";
+} from "./chunk-JZJQOZEN.js";
 import {
   UnstyledButton
-} from "./chunk-H47HIU2F.js";
+} from "./chunk-E7RKIBJY.js";
 import {
   z
 } from "./chunk-55OQPFLF.js";
@@ -11,16 +11,16 @@ import {
   extend,
   flexCenter,
   pxToRems
-} from "./chunk-JQV6H76U.js";
+} from "./chunk-DNRHVCOE.js";
 import {
   Icon
-} from "./chunk-UACBVBBE.js";
+} from "./chunk-QQTZ6DZL.js";
 import {
   standardContentInset
-} from "./chunk-GMM3LRXY.js";
+} from "./chunk-APUV4UN4.js";
 import {
   themeOr
-} from "./chunk-I4NIA4SD.js";
+} from "./chunk-W5I53DTZ.js";
 import {
   colors
 } from "./chunk-REL56P3K.js";

package/dist/chunk-TRIJJTMX.cjs

@@ -0,0 +1,49 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunkAZRC3MXCcjs = require('./chunk-AZRC3MXC.cjs');
+
+
+var _chunkG5HBO2FIcjs = require('./chunk-G5HBO2FI.cjs');
+
+
+var _chunkZBBVZQKJcjs = require('./chunk-ZBBVZQKJ.cjs');
+
+// src/components/typography/Code.tsx
+var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+var Code = ({
+  block = false,
+  children,
+  color,
+  content,
+  display,
+  hideOverflow = false,
+  id,
+  size = "Medium"
+}) => {
+  let reactNodes = children || null;
+  if (content) {
+    reactNodes = _chunkAZRC3MXCcjs.toNonTypographicReactNodes.call(void 0, content);
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    StyledCode,
+    {
+      block,
+      colorProp: color,
+      displayProp: display,
+      hideOverflow,
+      id,
+      size,
+      children: reactNodes
+    }
+  );
+};
+var StyledCode = _styled2.default.span`
+  ${({ theme, size, colorProp }) => _chunkZBBVZQKJcjs.applyTypography.call(void 0, theme, "Code", size, colorProp)}
+  ${_chunkG5HBO2FIcjs.typographyStyles}
+`;
+
+
+
+
+exports.Code = Code; exports.StyledCode = StyledCode;

package/dist/{chunk-VI4JM4DQ.js → chunk-TSO4WRU4.js}

@@ -1,9 +1,9 @@
 import {
   standardBorderRadius
-} from "./chunk-GMM3LRXY.js";
+} from "./chunk-APUV4UN4.js";
 import {
   themeOr
-} from "./chunk-I4NIA4SD.js";
+} from "./chunk-W5I53DTZ.js";
 
 // src/components/ProgressBar.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-OHMAC2V5.js → chunk-TZN3OW2Q.js}

@@ -3,10 +3,10 @@ import {
 } from "./chunk-IL6J7EBZ.js";
 import {
   Icon
-} from "./chunk-UACBVBBE.js";
+} from "./chunk-QQTZ6DZL.js";
 import {
   getColor
-} from "./chunk-I4NIA4SD.js";
+} from "./chunk-W5I53DTZ.js";
 
 // src/components/IconWithCircleBackground.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-J2NLRI2M.js → chunk-UC6SP4KJ.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-34MTU3ER.js";
 import {
   Icon
-} from "./chunk-UACBVBBE.js";
+} from "./chunk-QQTZ6DZL.js";
 
 // src/utils/toNonTypographicReactNodes.tsx
 import { isObject } from "lodash-es";

package/dist/{chunk-EZMYYBFH.js → chunk-UUQZW2LJ.js}

@@ -3,30 +3,50 @@ import {
 } from "./chunk-YMNSXZ5D.js";
 import {
   toNonTypographicReactNodes
-} from "./chunk-J2NLRI2M.js";
+} from "./chunk-UC6SP4KJ.js";
+import {
+  typographyStyles
+} from "./chunk-EGOOSBGG.js";
 import {
   applyTypography
-} from "./chunk-L3BNIBK3.js";
+} from "./chunk-GHXNMLAB.js";
 
 // src/components/typography/Display.tsx
 import styled from "@emotion/styled";
 import { jsx } from "@emotion/react/jsx-runtime";
 var displayElements = ["h1", "h2", "h3", "h4", "h5", "h6"];
 var Display = ({
-  content,
+  block = false,
   children,
   color,
+  content,
+  display,
+  hideOverflow = false,
+  id,
   size = "Medium",
-  element = "h1"
+  tag = "h1"
 }) => {
   let reactNodes = children || null;
   if (content) {
     reactNodes = toNonTypographicReactNodes(content);
   }
-  return /* @__PURE__ */ jsx(StyledDisplay, { as: element, size, colorProp: color, children: reactNodes });
+  return /* @__PURE__ */ jsx(
+    StyledDisplay,
+    {
+      as: tag,
+      block,
+      colorProp: color,
+      displayProp: display,
+      hideOverflow,
+      id,
+      size,
+      children: reactNodes
+    }
+  );
 };
 var StyledDisplay = styled.span`
   ${({ theme, size, colorProp }) => applyTypography(theme, "Display", size, colorProp)}
+  ${typographyStyles}
 `;
 function displaySelector(element) {
   return `${element}${select(StyledDisplay)}`;

package/dist/{chunk-MJ63JHE3.cjs → chunk-V5DGRLV7.cjs}

@@ -3,7 +3,7 @@
 var _chunkAGIM6BKCcjs = require('./chunk-AGIM6BKC.cjs');
 
 
-var _chunk7OBPNS6Wcjs = require('./chunk-7OBPNS6W.cjs');
+var _chunkLLVW7HU4cjs = require('./chunk-LLVW7HU4.cjs');
 
 // src/components/documentation/DocsHeadline.tsx
 var _react = require('react'); var _react2 = _interopRequireDefault(_react);
@@ -51,13 +51,15 @@ var DocsHeadline = ({
 }) => {
   const id = toKebabCase(getHeaderId(children));
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunk7OBPNS6Wcjs.StyledHeadline,
+    _chunkLLVW7HU4cjs.StyledHeadline,
     {
       as: heading,
       id,
       size,
       colorProp: color,
       displayProp: "block",
+      hideOverflow: false,
+      block: true,
       children
     }
   );

package/dist/{chunk-AJ6OTIB2.js → chunk-VCHMPHHC.js}

@@ -1,6 +1,6 @@
 import {
   standardLineHeightEms
-} from "./chunk-GMM3LRXY.js";
+} from "./chunk-APUV4UN4.js";
 
 // src/components/Checkbox.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-FSVHUION.js → chunk-VD3UNL3N.js}

@@ -1,28 +1,46 @@
 import {
   toNonTypographicReactNodes
-} from "./chunk-J2NLRI2M.js";
+} from "./chunk-UC6SP4KJ.js";
+import {
+  typographyStyles
+} from "./chunk-EGOOSBGG.js";
 import {
   applyTypography
-} from "./chunk-L3BNIBK3.js";
+} from "./chunk-GHXNMLAB.js";
 
 // src/components/typography/Overline.tsx
 import styled from "@emotion/styled";
 import { jsx } from "@emotion/react/jsx-runtime";
 var Overline = ({
-  content,
+  block = false,
+  children,
   color,
-  size = "Medium",
-  children
+  content,
+  display,
+  hideOverflow = false,
+  id,
+  size = "Medium"
 }) => {
   let reactNodes = children || null;
   if (content) {
     reactNodes = toNonTypographicReactNodes(content);
   }
-  return /* @__PURE__ */ jsx(StyledOverline, { size, colorProp: color, children: reactNodes });
+  return /* @__PURE__ */ jsx(
+    StyledOverline,
+    {
+      size,
+      colorProp: color,
+      block,
+      id,
+      hideOverflow,
+      displayProp: display,
+      children: reactNodes
+    }
+  );
 };
 var StyledOverline = styled.span`
   ${({ theme, size, colorProp }) => applyTypography(theme, "Overline", size, colorProp)}
-  cursor: inherit;
+  ${typographyStyles}
 `;
 
 export {

package/dist/{chunk-JCNYE37S.cjs → chunk-VMYRYEML.cjs}

@@ -1,15 +1,15 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkHVSAHGD7cjs = require('./chunk-HVSAHGD7.cjs');
+var _chunk2WREDS5Bcjs = require('./chunk-2WREDS5B.cjs');
 
 
-var _chunkSODYHHOBcjs = require('./chunk-SODYHHOB.cjs');
+var _chunk4P7RPU32cjs = require('./chunk-4P7RPU32.cjs');
 
 
-var _chunkMNAZ4BDQcjs = require('./chunk-MNAZ4BDQ.cjs');
+var _chunkPYL3O7AFcjs = require('./chunk-PYL3O7AF.cjs');
 
 
-var _chunkPDZ23BEDcjs = require('./chunk-PDZ23BED.cjs');
+var _chunkWTHHP7G2cjs = require('./chunk-WTHHP7G2.cjs');
 
 
 var _chunkKSKKC6C2cjs = require('./chunk-KSKKC6C2.cjs');
@@ -55,7 +55,7 @@ var backgroundColor = "#2d2d2d";
 var InlineCode = _styled2.default.span`
   font-family: "Roboto Mono", monospace;
   background-color: #2d2d2d;
-  border: 1px solid ${_chunkPDZ23BEDcjs.themeOr.call(void 0, _chunkKSKKC6C2cjs.colors.gray90, _chunkKSKKC6C2cjs.colors.gray20)};
+  border: 1px solid ${_chunkWTHHP7G2cjs.themeOr.call(void 0, _chunkKSKKC6C2cjs.colors.gray90, _chunkKSKKC6C2cjs.colors.gray20)};
   border-radius: 3px;
   line-height: 24px;
   padding: 0 4px;
@@ -152,7 +152,7 @@ var CodeBlock = ({
               styles: codeSelectStyles
             }
           ) }) : null,
-          withCopyButton ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHVSAHGD7cjs.CopyToClipboardButton, { value: children }) : null
+          withCopyButton ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2WREDS5Bcjs.CopyToClipboardButton, { value: children }) : null
         ]
       }
     )
@@ -176,11 +176,11 @@ var CodeBlockHeader = _styled2.default.div`
   padding: 16px 20px;
 `;
 var CodeBlockContainer = _styled2.default.pre`
-  ${_chunkSODYHHOBcjs.overflowAutoWithoutScrollbars}
+  ${_chunk4P7RPU32cjs.overflowAutoWithoutScrollbars}
   &[class*="language-"] {
     padding: 20px;
     font-weight: 500;
-    ${_chunkMNAZ4BDQcjs.standardBorderRadius.call(void 0, 8)}
+    ${_chunkPYL3O7AFcjs.standardBorderRadius.call(void 0, 8)}
     ${(props) => props.hasHeader ? `border-top-left-radius: 0;
             border-top-right-radius: 0;
             margin-top: 0;` : ""}

package/dist/{chunk-EKTDBUWD.cjs → chunk-VNFSKZW2.cjs}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkMNAZ4BDQcjs = require('./chunk-MNAZ4BDQ.cjs');
+var _chunkPYL3O7AFcjs = require('./chunk-PYL3O7AF.cjs');
 
 // src/components/Checkbox.tsx
 var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
@@ -68,7 +68,7 @@ var CheckboxContainer = _styled2.default.span`
 var CheckboxLabel = _styled2.default.label`
   margin-left: 12px;
   cursor: pointer;
-  height: ${_chunkMNAZ4BDQcjs.standardLineHeightEms}em;
+  height: ${_chunkPYL3O7AFcjs.standardLineHeightEms}em;
 `;
 
 

package/dist/{chunk-LHPOQVJO.js → chunk-VW2IB7XD.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-5KSG5D3I.js";
 import {
   TextInput
-} from "./chunk-DWGNUG6W.js";
+} from "./chunk-DPSSQNBK.js";
 import {
   __spreadProps,
   __spreadValues

package/dist/{chunk-ZFRMFHCU.cjs → chunk-VYKXX3SH.cjs}

@@ -1,29 +1,46 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkHKSBGUB7cjs = require('./chunk-HKSBGUB7.cjs');
+var _chunkAZRC3MXCcjs = require('./chunk-AZRC3MXC.cjs');
 
 
-var _chunkIXV57HL7cjs = require('./chunk-IXV57HL7.cjs');
+var _chunkG5HBO2FIcjs = require('./chunk-G5HBO2FI.cjs');
+
+
+var _chunkZBBVZQKJcjs = require('./chunk-ZBBVZQKJ.cjs');
 
 // src/components/typography/Title.tsx
 var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
 var _jsxruntime = require('@emotion/react/jsx-runtime');
 var Title = ({
-  content,
-  color,
-  size = "Medium",
+  block = false,
   children,
-  block = false
+  color,
+  content,
+  display,
+  hideOverflow = false,
+  id,
+  size = "Medium"
 }) => {
   let reactNodes = children || null;
   if (content) {
-    reactNodes = _chunkHKSBGUB7cjs.toNonTypographicReactNodes.call(void 0, content);
+    reactNodes = _chunkAZRC3MXCcjs.toNonTypographicReactNodes.call(void 0, content);
   }
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledTitle, { size, colorProp: color, block, children: reactNodes });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    StyledTitle,
+    {
+      size,
+      colorProp: color,
+      block,
+      id,
+      hideOverflow,
+      displayProp: display,
+      children: reactNodes
+    }
+  );
 };
 var StyledTitle = _styled2.default.span`
-  ${({ block }) => block ? "display: block;" : ""}
-  ${({ theme, size, colorProp }) => _chunkIXV57HL7cjs.applyTypography.call(void 0, theme, "Title", size, colorProp)}
+  ${({ theme, size, colorProp }) => _chunkZBBVZQKJcjs.applyTypography.call(void 0, theme, "Title", size, colorProp)}
+  ${_chunkG5HBO2FIcjs.typographyStyles}
 `;
 
 

package/dist/{chunk-I4NIA4SD.js → chunk-W5I53DTZ.js}

@@ -1,14 +1,14 @@
+import {
+  buttonsThemeBase,
+  defaultButtonsTheme
+} from "./chunk-3Z7RPOMO.js";
 import {
   defaultLoadingTheme,
   loadingThemeBase
 } from "./chunk-O4MKC7U2.js";
 import {
   getTypography
-} from "./chunk-ENBUKLVT.js";
-import {
-  buttonsThemeBase,
-  defaultButtonsTheme
-} from "./chunk-SOMDPWUX.js";
+} from "./chunk-24PXYMSU.js";
 import {
   useBreakpoints
 } from "./chunk-JSGRNWSB.js";
@@ -31,6 +31,8 @@ var Themes = /* @__PURE__ */ ((Themes2) => {
   Themes2["Dark"] = "dark";
   Themes2["LightsparkDocsLight"] = "lightsparkDocsLight";
   Themes2["LightsparkDocsDark"] = "lightsparkDocsDark";
+  Themes2["UmaAuthSdkLight"] = "umaAuthSdkLight";
+  Themes2["UmaAuthSdkDark"] = "umaAuthSdkDark";
   Themes2["UmameDocsLight"] = "umameDocsLight";
   Themes2["UmameDocsDark"] = "umameDocsDark";
   Themes2["BridgeLight"] = "bridgeLight";
@@ -62,6 +64,7 @@ var baseThemeColors = {
   onSuccessText: colors.white,
   primary: colors.primary,
   secondary: colors.secondary,
+  tertiary: colors.black,
   success: colors.success,
   text: colors.black,
   vlcNeutral: colors.gray95,
@@ -111,6 +114,7 @@ var darkBaseTheme = {
   onSuccessText: colors.white,
   primary: colors.primary,
   secondary: colors.secondary,
+  tertiary: colors.white,
   success: colors.success,
   text: colors.white,
   typography: getTypography("Lightspark" /* Lightspark */),
@@ -153,6 +157,130 @@ var darkTheme = extend(darkBaseTheme, {
     secondary: colors.secondary
   })
 });
+var umaAuthSdkLightTheme = extend(lightTheme, {
+  type: "umaAuthSdkLight" /* UmaAuthSdkLight */,
+  bg: colors.gray98,
+  smBg: colors.gray98,
+  secondary: colors.grayBlue43,
+  tertiary: colors.grayBlue9,
+  text: colors.grayBlue9,
+  link: colors.blue39,
+  inputBackground: colors.white,
+  typography: getTypography("UmaAuthSdk" /* UmaAuthSdk */, {
+    main: "Manrope",
+    code: "Monaco"
+  }),
+  content: extendBase(lightBaseTheme, {
+    bg: colors.gray98,
+    smBg: colors.gray98,
+    text: colors.grayBlue9,
+    secondary: colors.grayBlue43
+  }),
+  controls: extendBase(lightBaseTheme, {
+    text: colors.grayBlue9,
+    secondary: colors.grayBlue43,
+    bg: colors.grayBlue94
+  }),
+  buttons: merge(buttonsThemeBase, {
+    defaultTypographyType: "Title",
+    defaultSize: "Medium",
+    defaultBorderRadius: 999,
+    defaultBorderWidth: 0,
+    defaultPaddingsY: {
+      ExtraSmall: 16,
+      Small: 16,
+      Schmedium: 16,
+      Medium: 16,
+      Mlarge: 16,
+      Large: 16
+    },
+    kinds: {
+      primary: {
+        defaultColor: "bg",
+        defaultBackgroundColor: "blue39",
+        defaultHoverBackgroundColor: "blue37"
+      },
+      ghost: {
+        defaultColor: "secondary",
+        defaultBackgroundColor: "transparent",
+        defaultBorderWidth: 0,
+        defaultHoverBackgroundColor: "transparent",
+        defaultHoverBorderColor: "transparent"
+      },
+      secondary: {
+        defaultBackgroundColor: "grayBlue94",
+        defaultHoverBackgroundColor: "grayBlue80",
+        defaultBorderColor: "grayBlue80"
+      },
+      tertiary: {
+        defaultColor: "bg",
+        defaultHoverBackgroundColor: "grayBlue18"
+      }
+    }
+  })
+});
+var umaAuthSdkDarkTheme = extend(darkTheme, {
+  type: "umaAuthSdkDark" /* UmaAuthSdkDark */,
+  bg: colors.gray5,
+  smBg: colors.gray5,
+  secondary: colors.grayBlue57,
+  tertiary: colors.gray98,
+  text: colors.gray98,
+  link: colors.blue39,
+  inputBackground: colors.gray5,
+  typography: getTypography("UmaAuthSdk" /* UmaAuthSdk */, {
+    main: "Manrope",
+    code: "Monaco"
+  }),
+  content: extendBase(lightBaseTheme, {
+    bg: colors.gray5,
+    smBg: colors.gray5,
+    text: colors.grayBlue94,
+    secondary: colors.grayBlue43
+  }),
+  controls: extendBase(lightBaseTheme, {
+    text: colors.grayBlue94,
+    secondary: colors.grayBlue43,
+    bg: colors.grayBlue9
+  }),
+  buttons: merge(buttonsThemeBase, {
+    defaultTypographyType: "Title",
+    defaultSize: "Medium",
+    defaultBorderRadius: 999,
+    defaultBorderWidth: 0,
+    defaultPaddingsY: {
+      ExtraSmall: 16,
+      Small: 16,
+      Schmedium: 16,
+      Medium: 16,
+      Mlarge: 16,
+      Large: 16
+    },
+    kinds: {
+      primary: {
+        defaultColor: "bg",
+        defaultBackgroundColor: "blue39",
+        defaultHoverBackgroundColor: "blue37"
+      },
+      ghost: {
+        defaultColor: "secondary",
+        defaultBackgroundColor: "transparent",
+        defaultBorderWidth: 0,
+        defaultHoverBackgroundColor: "transparent",
+        defaultHoverBorderColor: "transparent"
+      },
+      secondary: {
+        defaultBackgroundColor: "grayBlue80",
+        defaultHoverBackgroundColor: "grayBlue94",
+        defaultBorderColor: "grayBlue80"
+      },
+      tertiary: {
+        defaultColor: "bg",
+        defaultHoverBackgroundColor: "grayBlue80"
+      }
+    }
+  })
+});
 var umameDocsLightTheme = extend(lightTheme, {
   type: "umameDocsLight" /* UmameDocsLight */,
   bg: colors.gray98,
@@ -269,6 +397,8 @@ var themes = {
   ["dark" /* Dark */]: darkTheme,
   ["lightsparkDocsLight" /* LightsparkDocsLight */]: lightsparkDocsLightTheme,
   ["lightsparkDocsDark" /* LightsparkDocsDark */]: lightsparkDocsDarkTheme,
+  ["umaAuthSdkLight" /* UmaAuthSdkLight */]: umaAuthSdkLightTheme,
+  ["umaAuthSdkDark" /* UmaAuthSdkDark */]: umaAuthSdkDarkTheme,
   ["umameDocsLight" /* UmameDocsLight */]: umameDocsLightTheme,
   ["umameDocsDark" /* UmameDocsDark */]: umameDocsDarkTheme,
   ["bridgeLight" /* BridgeLight */]: bridgeLightTheme,