@stackframe/stack 2.4.28 → 2.5.0

package/dist/esm/components/form-warning.js

@@ -1,16 +0,0 @@
-"use client";
-"use client";
-
-// src/components/form-warning.tsx
-import { Text } from "../components-core";
-import { jsx } from "react/jsx-runtime";
-function FormWarningText({ text }) {
-  if (!text) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(Text, { size: "sm", variant: "warning", children: text });
-}
-export {
-  FormWarningText as default
-};
-//# sourceMappingURL=form-warning.js.map

package/dist/esm/components/form-warning.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/form-warning.tsx"],"sourcesContent":["'use client';\n\nimport { Text } from \"../components-core\";\n\nexport default function FormWarningText({ text }: { text?: string }) {\n  if (!text) {\n    return null;\n  }\n  return (\n    <Text size=\"sm\" variant=\"warning\">\n      {text}\n    </Text>\n  );\n}\n"],"mappings":";;;AAEA,SAAS,YAAY;AAOjB;AALW,SAAR,gBAAiC,EAAE,KAAK,GAAsB;AACnE,MAAI,CAAC,MAAM;AACT,WAAO;AAAA,EACT;AACA,SACE,oBAAC,QAAK,MAAK,MAAK,SAAQ,WACrB,gBACH;AAEJ;","names":[]}

package/dist/esm/components/magic-link-sign-in.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/magic-link-sign-in.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport { yupResolver } from \"@hookform/resolvers/yup\";\nimport * as yup from \"yup\";\nimport FormWarningText from \"./form-warning\";\nimport { useStackApp } from \"..\";\nimport { Button, Input, Label } from \"../components-core\";\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\n\nconst schema = yup.object().shape({\n  email: yup.string().email('Please enter a valid email').required('Please enter your email')\n});\n\nexport default function MagicLinkSignIn() {\n  const { register, handleSubmit, setError, formState: { errors }, clearErrors } = useForm({\n    resolver: yupResolver(schema)\n  });\n  const [sent, setSent] = useState(false);\n  const app = useStackApp();\n\n  const onSubmit = async (data: yup.InferType<typeof schema>) => {\n    const { email } = data;\n\n    const error = await app.sendMagicLinkEmail(email);\n    if (error) {\n      setError('email', { type: 'manual', message: error.message });\n      return;\n    }\n    setSent(true);\n  };\n\n  return (\n    <form \n      style={{ display: 'flex', flexDirection: 'column', alignItems: 'stretch' }} \n      onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}\n      noValidate\n    >\n      <Label htmlFor=\"email\">Email</Label>\n      <Input\n        id=\"email\"\n        type=\"email\"\n        {...register('email')}\n        disabled={sent}\n      />\n      <FormWarningText text={errors.email?.message?.toString()} />\n\n      <Button disabled={sent} style={{ marginTop: '1.5rem' }} type=\"submit\">\n        {sent ? 'Email sent!' : 'Send magic link'}\n      </Button>\n    </form>\n  );\n}\n"],"mappings":";;;AAEA,SAAS,gBAAgB;AACzB,SAAS,eAAe;AACxB,SAAS,mBAAmB;AAC5B,YAAY,SAAS;AACrB,OAAO,qBAAqB;AAC5B,SAAS,mBAAmB;AAC5B,SAAS,QAAQ,OAAO,aAAa;AACrC,SAAS,kCAAkC;AAyBvC,SAKE,KALF;AAvBJ,IAAM,SAAa,WAAO,EAAE,MAAM;AAAA,EAChC,OAAW,WAAO,EAAE,MAAM,4BAA4B,EAAE,SAAS,yBAAyB;AAC5F,CAAC;AAEc,SAAR,kBAAmC;AACxC,QAAM,EAAE,UAAU,cAAc,UAAU,WAAW,EAAE,OAAO,GAAG,YAAY,IAAI,QAAQ;AAAA,IACvF,UAAU,YAAY,MAAM;AAAA,EAC9B,CAAC;AACD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,MAAM,YAAY;AAExB,QAAM,WAAW,OAAO,SAAuC;AAC7D,UAAM,EAAE,MAAM,IAAI;AAElB,UAAM,QAAQ,MAAM,IAAI,mBAAmB,KAAK;AAChD,QAAI,OAAO;AACT,eAAS,SAAS,EAAE,MAAM,UAAU,SAAS,MAAM,QAAQ,CAAC;AAC5D;AAAA,IACF;AACA,YAAQ,IAAI;AAAA,EACd;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,YAAY,UAAU;AAAA,MACzE,UAAU,OAAK,2BAA2B,aAAa,QAAQ,EAAE,CAAC,CAAC;AAAA,MACnE,YAAU;AAAA,MAEV;AAAA,4BAAC,SAAM,SAAQ,SAAQ,mBAAK;AAAA,QAC5B;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,MAAK;AAAA,YACJ,GAAG,SAAS,OAAO;AAAA,YACpB,UAAU;AAAA;AAAA,QACZ;AAAA,QACA,oBAAC,mBAAgB,MAAM,OAAO,OAAO,SAAS,SAAS,GAAG;AAAA,QAE1D,oBAAC,UAAO,UAAU,MAAM,OAAO,EAAE,WAAW,SAAS,GAAG,MAAK,UAC1D,iBAAO,gBAAgB,mBAC1B;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/esm/components/maybe-full-page.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/maybe-full-page.tsx"],"sourcesContent":["\"use client\";\n\nimport { Container } from \"../components-core\";\nimport React, { useEffect, useId } from \"react\";\n\nexport default function MaybeFullPage({ \n  children, \n  fullPage=true\n}: { \n  children: React.ReactNode, \n  fullPage?: boolean, \n}) {\n  const uniqueId = useId();\n  const id = `stack-card-frame-${uniqueId}`;\n\n  const scriptString = `(([id]) => {\n    const el = document.getElementById(id);\n    if (!el) {\n      // component is not full page\n      return;\n    }\n    const offset = el.getBoundingClientRect().top + document.documentElement.scrollTop;\n    el.style.minHeight = \\`calc(100vh - \\${offset}px)\\`;\n  })(${JSON.stringify([id])})`;\n\n  useEffect(() => {\n    // TODO fix workaround: React has a bug where it doesn't run the script on the first CSR render if SSR has been skipped due to suspense\n    // As a workaround, we run the script in the <script> tag again after the first render\n    // Note that we do an indirect eval as described here: https://esbuild.github.io/content-types/#direct-eval\n    (0, eval)(scriptString);\n  }, []);\n\n  if (fullPage) {\n    return (\n      <>\n        <div \n          id={id}\n          suppressHydrationWarning\n          style={{ \n            minHeight: '100vh',\n            alignSelf: 'stretch',\n            display: 'flex', \n            alignItems: 'center', \n            justifyContent: 'center',\n          }}\n        >\n          <Container size={380} style={{ padding: '1rem 1rem' }}>\n            {children}\n          </Container>\n        </div>\n        <script dangerouslySetInnerHTML={{\n          __html: scriptString,\n        }} />\n      </>\n    );\n  } else {\n    return <>\n      {children}\n    </>;\n  }\n  \n}\n"],"mappings":";;;AAEA,SAAS,iBAAiB;AAC1B,SAAgB,WAAW,aAAa;AA+BlC,mBAYI,KAZJ;AA7BS,SAAR,cAA+B;AAAA,EACpC;AAAA,EACA,WAAS;AACX,GAGG;AACD,QAAM,WAAW,MAAM;AACvB,QAAM,KAAK,oBAAoB,QAAQ;AAEvC,QAAM,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAQhB,KAAK,UAAU,CAAC,EAAE,CAAC,CAAC;AAEzB,YAAU,MAAM;AAId,KAAC,GAAG,MAAM,YAAY;AAAA,EACxB,GAAG,CAAC,CAAC;AAEL,MAAI,UAAU;AACZ,WACE,iCACE;AAAA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,0BAAwB;AAAA,UACxB,OAAO;AAAA,YACL,WAAW;AAAA,YACX,WAAW;AAAA,YACX,SAAS;AAAA,YACT,YAAY;AAAA,YACZ,gBAAgB;AAAA,UAClB;AAAA,UAEA,8BAAC,aAAU,MAAM,KAAK,OAAO,EAAE,SAAS,YAAY,GACjD,UACH;AAAA;AAAA,MACF;AAAA,MACA,oBAAC,YAAO,yBAAyB;AAAA,QAC/B,QAAQ;AAAA,MACV,GAAG;AAAA,OACL;AAAA,EAEJ,OAAO;AACL,WAAO,gCACJ,UACH;AAAA,EACF;AAEF;","names":[]}

package/dist/esm/components/oauth-group.js

@@ -1,19 +0,0 @@
-"use client";
-"use client";
-
-// src/components/oauth-group.tsx
-import { useStackApp } from "../lib/hooks";
-import OAuthButton from "./oauth-button";
-import { jsx } from "react/jsx-runtime";
-function OAuthGroup({
-  type,
-  mockProject
-}) {
-  const stackApp = useStackApp();
-  const project = mockProject || stackApp.useProject();
-  return /* @__PURE__ */ jsx("div", { style: { gap: "16px", display: "flex", flexDirection: "column", alignItems: "stretch" }, children: project.oauthProviders.filter((p) => p.enabled).map((p) => /* @__PURE__ */ jsx(OAuthButton, { provider: p.id, type }, p.id)) });
-}
-export {
-  OAuthGroup as default
-};
-//# sourceMappingURL=oauth-group.js.map

package/dist/esm/components/oauth-group.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/oauth-group.tsx"],"sourcesContent":["'use client';\n\nimport { ClientProjectJson } from \"@stackframe/stack-shared\";\nimport { useStackApp } from \"../lib/hooks\";\nimport OAuthButton from \"./oauth-button\";\n\nexport default function OAuthGroup({\n  type,\n  mockProject,\n}: {\n  type: 'sign-in' | 'sign-up',\n  mockProject?: ClientProjectJson,\n}) {\n  const stackApp = useStackApp();\n  const project = mockProject || stackApp.useProject();\n\n  return (\n    <div style={{ gap: '16px', display: 'flex', flexDirection: 'column', alignItems: 'stretch' }}>\n      {project.oauthProviders.filter(p => p.enabled).map(p => (\n        <OAuthButton key={p.id} provider={p.id} type={type}/>\n      ))}\n    </div>\n  );\n}\n"],"mappings":";;;AAGA,SAAS,mBAAmB;AAC5B,OAAO,iBAAiB;AAehB;AAbO,SAAR,WAA4B;AAAA,EACjC;AAAA,EACA;AACF,GAGG;AACD,QAAM,WAAW,YAAY;AAC7B,QAAM,UAAU,eAAe,SAAS,WAAW;AAEnD,SACE,oBAAC,SAAI,OAAO,EAAE,KAAK,QAAQ,SAAS,QAAQ,eAAe,UAAU,YAAY,UAAU,GACxF,kBAAQ,eAAe,OAAO,OAAK,EAAE,OAAO,EAAE,IAAI,OACjD,oBAAC,eAAuB,UAAU,EAAE,IAAI,QAAtB,EAAE,EAA+B,CACpD,GACH;AAEJ;","names":[]}

package/dist/esm/components/password-field.js

@@ -1,81 +0,0 @@
-"use client";
-"use client";
-
-// src/components/password-field.tsx
-import { Input } from "../components-core";
-import { forwardRef, useRef, useState } from "react";
-import { useDesign } from "..";
-import styled from "styled-components";
-import { Eye, EyeOff } from "lucide-react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var getIconStyle = (colors) => `
-  height: 1rem;
-  width: 1rem;
-  color: #808080
-`;
-var StyledEyeOff = styled(EyeOff)`${(props) => getIconStyle(props.colors)}`;
-var StyledEye = styled(Eye)`${(props) => getIconStyle(props.colors)}`;
-var PasswordField = forwardRef(({ id, name, ...props }, ref) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const { colors } = useDesign();
-  const inputRef = useRef(null);
-  const mergeRef = (node) => {
-    if (ref) {
-      if (typeof ref === "function") {
-        ref(node);
-      } else {
-        ref.current = node;
-      }
-    }
-    inputRef.current = node;
-  };
-  const onClickReveal = () => {
-    setIsOpen(!isOpen);
-    const currentInput = inputRef.current;
-    if (currentInput) {
-      currentInput.focus({ preventScroll: true });
-    }
-  };
-  return /* @__PURE__ */ jsxs("div", { style: { position: "relative", display: "flex" }, children: [
-    /* @__PURE__ */ jsx(
-      Input,
-      {
-        id,
-        ref: mergeRef,
-        name,
-        type: isOpen ? "text" : "password",
-        autoComplete: "current-password",
-        required: true,
-        style: { flex: 1 },
-        ...props
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        tabIndex: -1,
-        type: "button",
-        style: {
-          position: "absolute",
-          backgroundColor: "transparent",
-          border: "none",
-          top: 0,
-          right: 0,
-          bottom: 0,
-          display: "flex",
-          alignItems: "center",
-          paddingRight: "12px"
-        },
-        onClick: onClickReveal,
-        "aria-label": isOpen ? "Mask password" : "Reveal password",
-        children: isOpen ? /* @__PURE__ */ jsx(StyledEyeOff, { colors }) : /* @__PURE__ */ jsx(StyledEye, { colors })
-      }
-    )
-  ] });
-});
-PasswordField.displayName = "PasswordField";
-var password_field_default = PasswordField;
-export {
-  password_field_default as default
-};
-//# sourceMappingURL=password-field.js.map

package/dist/esm/components/password-field.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/password-field.tsx"],"sourcesContent":["'use client';\n\nimport { Input } from \"../components-core\";\nimport { forwardRef, useRef, useState } from 'react';\nimport { useDesign } from \"..\";\nimport styled from \"styled-components\";\nimport { ColorPalette } from \"../providers/design-provider\";\nimport { Eye, EyeOff } from 'lucide-react';\n\nconst getIconStyle = (colors: ColorPalette) => `\n  height: 1rem;\n  width: 1rem;\n  color: #808080\n`;\nconst StyledEyeOff = styled(EyeOff)<{ colors: ColorPalette }>`${props => getIconStyle(props.colors)}`;\nconst StyledEye = styled(Eye)<{ colors: ColorPalette }>`${props => getIconStyle(props.colors)}`;\n\nconst PasswordField = forwardRef<\n  HTMLInputElement, \n  React.InputHTMLAttributes<HTMLInputElement>\n>(({ id, name, ...props }, ref) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const { colors } = useDesign();\n  const inputRef = useRef<HTMLInputElement | null>(null);\n\n  const mergeRef = (node: HTMLInputElement) => {\n    if (ref) {\n      if (typeof ref === 'function') {\n        ref(node);\n      } else {\n        ref.current = node;\n      }\n    }\n    inputRef.current = node;\n  };\n\n  const onClickReveal = () => {\n    setIsOpen(!isOpen);\n    const currentInput = inputRef.current;\n    if (currentInput) {\n      currentInput.focus({ preventScroll: true });\n    }\n  };\n\n  return (\n    <div style={{ position: 'relative', display: 'flex' }}>\n      <Input\n        id={id}\n        ref={mergeRef}\n        name={name}\n        type={isOpen ? 'text' : 'password'}\n        autoComplete=\"current-password\"\n        required\n        style={{ flex: 1 }}\n        {...props}\n      />\n      <button\n        tabIndex={-1}\n        type=\"button\"\n        style={{ \n          position: 'absolute', \n          backgroundColor: 'transparent',\n          border: 'none',\n          top: 0, \n          right: 0, \n          bottom: 0, \n          display: 'flex', \n          alignItems: 'center', \n          paddingRight: '12px' \n        }}\n        onClick={onClickReveal}\n        aria-label={isOpen ? 'Mask password' : 'Reveal password'}\n      >\n        {isOpen ? <StyledEyeOff colors={colors} /> : <StyledEye colors={colors} />}\n      </button>\n    </div>\n  );\n});\n\nPasswordField.displayName = 'PasswordField';\n\nexport default PasswordField;\n"],"mappings":";;;AAEA,SAAS,aAAa;AACtB,SAAS,YAAY,QAAQ,gBAAgB;AAC7C,SAAS,iBAAiB;AAC1B,OAAO,YAAY;AAEnB,SAAS,KAAK,cAAc;AAsCxB,SACE,KADF;AApCJ,IAAM,eAAe,CAAC,WAAyB;AAAA;AAAA;AAAA;AAAA;AAK/C,IAAM,eAAe,OAAO,MAAM,IAA8B,WAAS,aAAa,MAAM,MAAM,CAAC;AACnG,IAAM,YAAY,OAAO,GAAG,IAA8B,WAAS,aAAa,MAAM,MAAM,CAAC;AAE7F,IAAM,gBAAgB,WAGpB,CAAC,EAAE,IAAI,MAAM,GAAG,MAAM,GAAG,QAAQ;AACjC,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,QAAM,EAAE,OAAO,IAAI,UAAU;AAC7B,QAAM,WAAW,OAAgC,IAAI;AAErD,QAAM,WAAW,CAAC,SAA2B;AAC3C,QAAI,KAAK;AACP,UAAI,OAAO,QAAQ,YAAY;AAC7B,YAAI,IAAI;AAAA,MACV,OAAO;AACL,YAAI,UAAU;AAAA,MAChB;AAAA,IACF;AACA,aAAS,UAAU;AAAA,EACrB;AAEA,QAAM,gBAAgB,MAAM;AAC1B,cAAU,CAAC,MAAM;AACjB,UAAM,eAAe,SAAS;AAC9B,QAAI,cAAc;AAChB,mBAAa,MAAM,EAAE,eAAe,KAAK,CAAC;AAAA,IAC5C;AAAA,EACF;AAEA,SACE,qBAAC,SAAI,OAAO,EAAE,UAAU,YAAY,SAAS,OAAO,GAClD;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,KAAK;AAAA,QACL;AAAA,QACA,MAAM,SAAS,SAAS;AAAA,QACxB,cAAa;AAAA,QACb,UAAQ;AAAA,QACR,OAAO,EAAE,MAAM,EAAE;AAAA,QAChB,GAAG;AAAA;AAAA,IACN;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,MAAK;AAAA,QACL,OAAO;AAAA,UACL,UAAU;AAAA,UACV,iBAAiB;AAAA,UACjB,QAAQ;AAAA,UACR,KAAK;AAAA,UACL,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,cAAc;AAAA,QAChB;AAAA,QACA,SAAS;AAAA,QACT,cAAY,SAAS,kBAAkB;AAAA,QAEtC,mBAAS,oBAAC,gBAAa,QAAgB,IAAK,oBAAC,aAAU,QAAgB;AAAA;AAAA,IAC1E;AAAA,KACF;AAEJ,CAAC;AAED,cAAc,cAAc;AAE5B,IAAO,yBAAQ;","names":[]}

package/dist/esm/components/password-reset-inner.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/password-reset-inner.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport { yupResolver } from \"@hookform/resolvers/yup\";\nimport * as yup from \"yup\";\nimport { getPasswordError } from \"@stackframe/stack-shared/dist/helpers/password\";\nimport { useStackApp } from \"..\";\nimport PasswordField from \"./password-field\";\nimport FormWarningText from \"./form-warning\";\nimport PredefinedMessageCard from \"./message-cards/predefined-message-card\";\nimport MessageCard from \"./message-cards/message-card\";\nimport MaybeFullPage from \"./maybe-full-page\";\nimport { Button, Label, Text } from \"../components-core\";\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\n\nconst schema = yup.object().shape({\n  password: yup.string().required('Please enter your password').test({\n    name: 'is-valid-password',\n    test: (value, ctx) => {\n      const error = getPasswordError(value);\n      if (error) {\n        return ctx.createError({ message: error.message });\n      } else {\n        return true;\n      }\n    }\n  }),\n  passwordRepeat: yup.string().nullable().oneOf([yup.ref('password'), null], 'Passwords do not match').required('Please repeat your password')\n});\n\nexport default function PasswordResetInner(\n  { code, fullPage = false }:\n  { code: string, fullPage?: boolean }\n) {\n  const { register, handleSubmit, formState: { errors }, clearErrors } = useForm({\n    resolver: yupResolver(schema)\n  });\n  const stackApp = useStackApp();\n  const [finished, setFinished] = useState(false);\n  const [resetError, setResetError] = useState(false);\n\n  const onSubmit = async (data: yup.InferType<typeof schema>) => {\n    const { password } = data;\n    const errorCode = await stackApp.resetPassword({ password, code });\n    if (errorCode) {\n      setResetError(true);\n      return;\n    }\n\n    setFinished(true);\n  };\n\n  if (finished) {\n    return <PredefinedMessageCard type='passwordReset' fullPage={fullPage} />;\n  }\n\n  if (resetError) {\n    return (\n      <MessageCard title=\"Failed to reset password\" fullPage={fullPage}>\n        <Text>Failed to reset password. Please request a new password reset link</Text>\n      </MessageCard>\n    );\n  }\n\n  return (\n    <MaybeFullPage fullPage={fullPage}>\n      <div style={{ textAlign: 'center', marginBottom: '1.5rem' }}>\n        <Text size=\"xl\" as='h2'>Reset Your Password</Text>\n      </div>\n\n      <form \n        style={{ display: 'flex', flexDirection: 'column', alignItems: 'stretch' }} \n        onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}\n        noValidate\n      >\n        <Label htmlFor=\"password\">New Password</Label>\n        <PasswordField\n          id=\"password\"\n          {...register('password')}\n          onChange={() => {\n            clearErrors('password');\n            clearErrors('passwordRepeat');\n          }}\n        />\n        <FormWarningText text={errors.password?.message?.toString()} />\n\n        <Label htmlFor=\"repeat-password\" style={{ marginTop: \"1rem\" }}>Repeat New Password</Label>\n        <PasswordField\n          id=\"repeat-password\"\n          {...register('passwordRepeat')}\n          onChange={() => {\n            clearErrors('password');\n            clearErrors('passwordRepeat');\n          }}\n        />\n        <FormWarningText text={errors.passwordRepeat?.message?.toString()} />\n\n        <Button style={{ marginTop: '1.5rem' }} type=\"submit\">\n          Reset Password\n        </Button>\n      </form>\n    </MaybeFullPage>\n  ); \n}\n"],"mappings":"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","names":[]}

package/dist/esm/components/separator-with-text.js

@@ -1,17 +0,0 @@
-"use client";
-"use client";
-
-// src/components/separator-with-text.tsx
-import { Separator, Text } from "../components-core";
-import { jsx, jsxs } from "react/jsx-runtime";
-function SeparatorWithText({ text }) {
-  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", marginTop: "1.5rem", marginBottom: "1.5rem" }, children: [
-    /* @__PURE__ */ jsx("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsx(Separator, {}) }),
-    /* @__PURE__ */ jsx(Text, { style: { padding: "0 16px" }, variant: "secondary", size: "sm", children: text }),
-    /* @__PURE__ */ jsx("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsx(Separator, {}) })
-  ] });
-}
-export {
-  SeparatorWithText as default
-};
-//# sourceMappingURL=separator-with-text.js.map

package/dist/esm/components/separator-with-text.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/separator-with-text.tsx"],"sourcesContent":["'use client';\n\nimport { Separator, Text } from \"../components-core\";\n\nexport default function SeparatorWithText({ text }: { text: string }) {\n  return (\n    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', marginTop: '1.5rem', marginBottom: '1.5rem' }}>\n      <div style={{ flex: 1 }}>\n        <Separator />\n      </div>\n      <Text style={{ padding: '0 16px' }} variant=\"secondary\" size='sm'>{text}</Text>\n      <div style={{ flex: 1 }}>\n        <Separator />\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;AAEA,SAAS,WAAW,YAAY;AAI5B,SAEI,KAFJ;AAFW,SAAR,kBAAmC,EAAE,KAAK,GAAqB;AACpE,SACE,qBAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,UAAU,gBAAgB,UAAU,WAAW,UAAU,cAAc,SAAS,GACzH;AAAA,wBAAC,SAAI,OAAO,EAAE,MAAM,EAAE,GACpB,8BAAC,aAAU,GACb;AAAA,IACA,oBAAC,QAAK,OAAO,EAAE,SAAS,SAAS,GAAG,SAAQ,aAAY,MAAK,MAAM,gBAAK;AAAA,IACxE,oBAAC,SAAI,OAAO,EAAE,MAAM,EAAE,GACpB,8BAAC,aAAU,GACb;AAAA,KACF;AAEJ;","names":[]}

package/dist/esm/components/user-avatar.js

@@ -1,25 +0,0 @@
-// src/components/user-avatar.tsx
-import { UserRound } from "lucide-react";
-import { Avatar, AvatarFallback, AvatarImage, Text } from "..";
-import styled from "styled-components";
-import { jsx, jsxs } from "react/jsx-runtime";
-var StyledIcon = styled(UserRound)`
-  height: 1.25rem;
-  width: 1.25rem;
-  color: #666666;
-
-  html[data-stack-theme='dark'] & {
-    color: #999999;
-  }
-`;
-function UserAvatar(props) {
-  const user = props.user;
-  return /* @__PURE__ */ jsxs(Avatar, { style: { height: props.size, width: props.size }, children: [
-    /* @__PURE__ */ jsx(AvatarImage, { src: user?.profileImageUrl || "" }),
-    /* @__PURE__ */ jsx(AvatarFallback, { children: user ? /* @__PURE__ */ jsx(Text, { style: { fontWeight: 500 }, children: (user.displayName || user.primaryEmail)?.slice(0, 2).toUpperCase() }) : /* @__PURE__ */ jsx(StyledIcon, { size: props.size }) })
-  ] });
-}
-export {
-  UserAvatar as default
-};
-//# sourceMappingURL=user-avatar.js.map

package/dist/esm/components/user-avatar.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/user-avatar.tsx"],"sourcesContent":["import { UserRound } from \"lucide-react\";\nimport { Avatar, AvatarFallback, AvatarImage, Text } from \"..\";\nimport { User } from \"../lib/stack-app\";\nimport styled from \"styled-components\";\n\nconst StyledIcon = styled(UserRound)`\n  height: 1.25rem;\n  width: 1.25rem;\n  color: #666666;\n\n  html[data-stack-theme='dark'] & {\n    color: #999999;\n  }\n`;\n\nexport default function UserAvatar(props: { size?: number, user: User | null }) {\n  const user = props.user;\n  return (\n    <Avatar style={{ height: props.size, width: props.size }}>\n      <AvatarImage src={user?.profileImageUrl || ''} />\n      <AvatarFallback>\n        {user ? \n          <Text style={{ fontWeight: 500 }}>\n            {(user.displayName || user.primaryEmail)?.slice(0, 2).toUpperCase()}\n          </Text> :\n          <StyledIcon size={props.size} />}\n      </AvatarFallback>\n    </Avatar>\n  );\n}\n"],"mappings":";AAAA,SAAS,iBAAiB;AAC1B,SAAS,QAAQ,gBAAgB,aAAa,YAAY;AAE1D,OAAO,YAAY;AAef,SACE,KADF;AAbJ,IAAM,aAAa,OAAO,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUpB,SAAR,WAA4B,OAA6C;AAC9E,QAAM,OAAO,MAAM;AACnB,SACE,qBAAC,UAAO,OAAO,EAAE,QAAQ,MAAM,MAAM,OAAO,MAAM,KAAK,GACrD;AAAA,wBAAC,eAAY,KAAK,MAAM,mBAAmB,IAAI;AAAA,IAC/C,oBAAC,kBACE,iBACC,oBAAC,QAAK,OAAO,EAAE,YAAY,IAAI,GAC3B,gBAAK,eAAe,KAAK,eAAe,MAAM,GAAG,CAAC,EAAE,YAAY,GACpE,IACA,oBAAC,cAAW,MAAM,MAAM,MAAM,GAClC;AAAA,KACF;AAEJ;","names":[]}

package/dist/esm/components-core/avatar.js

@@ -1,57 +0,0 @@
-// src/components-core/avatar.tsx
-import * as React from "react";
-import * as AvatarPrimitive from "@radix-ui/react-avatar";
-import styled from "styled-components";
-import { useDesign } from "..";
-import { jsx } from "react/jsx-runtime";
-var StyledAvatar = styled(AvatarPrimitive.Root)`
-  position: relative;
-  display: flex;
-  height: 2rem;
-  width: 2rem;
-  flex-shrink: 0;
-  overflow: hidden;
-  border-radius: 9999px;
-`;
-var Avatar = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(StyledAvatar, { ref, className, ...props }));
-Avatar.displayName = "Avatar";
-var StyledAvatarImage = styled(AvatarPrimitive.Image)`
-  aspect-ratio: 1 / 1;
-  height: 100%;
-  width: 100%;
-`;
-var AvatarImage = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(StyledAvatarImage, { ref, className, ...props }));
-AvatarImage.displayName = "AvatarImage";
-var StyledAvatarFallback = styled(AvatarPrimitive.Fallback)`
-  display: flex;
-  height: 100%;
-  width: 100%;
-  align-items: center;
-  justify-content: center;
-  border-radius: 9999px;
-  
-  background-color: ${({ $colors }) => $colors.light.secondaryColor};
-
-  html[data-stack-theme='dark'] & {
-    background-color: ${({ $colors }) => $colors.dark.secondaryColor};
-  }
-`;
-var AvatarFallback = React.forwardRef(({ className, ...props }, ref) => {
-  const { colors } = useDesign();
-  return /* @__PURE__ */ jsx(
-    StyledAvatarFallback,
-    {
-      ref,
-      className,
-      $colors: colors,
-      ...props
-    }
-  );
-});
-AvatarFallback.displayName = "AvatarFallback";
-export {
-  Avatar,
-  AvatarFallback,
-  AvatarImage
-};
-//# sourceMappingURL=avatar.js.map

package/dist/esm/components-core/avatar.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components-core/avatar.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as AvatarPrimitive from '@radix-ui/react-avatar';\nimport styled from 'styled-components';\nimport { useDesign } from '..';\nimport { ColorPalette } from '../providers/design-provider';\n\nconst StyledAvatar = styled(AvatarPrimitive.Root)`\n  position: relative;\n  display: flex;\n  height: 2rem;\n  width: 2rem;\n  flex-shrink: 0;\n  overflow: hidden;\n  border-radius: 9999px;\n`;\n\nconst Avatar = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <StyledAvatar ref={ref} className={className} {...props} />\n));\nAvatar.displayName = 'Avatar';\n\nconst StyledAvatarImage = styled(AvatarPrimitive.Image)`\n  aspect-ratio: 1 / 1;\n  height: 100%;\n  width: 100%;\n`;\n\nconst AvatarImage = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Image>,\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>\n>(({ className, ...props }, ref) => (\n  <StyledAvatarImage ref={ref} className={className} {...props} />\n));\nAvatarImage.displayName = 'AvatarImage';\n\nconst StyledAvatarFallback = styled(AvatarPrimitive.Fallback)<{\n  $colors: ColorPalette,\n}>`\n  display: flex;\n  height: 100%;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n  border-radius: 9999px;\n  \n  background-color: ${({ $colors }) => $colors.light.secondaryColor};\n\n  html[data-stack-theme='dark'] & {\n    background-color: ${({ $colors }) => $colors.dark.secondaryColor};\n  }\n`;\n\nconst AvatarFallback = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Fallback>,\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>\n>(({ className, ...props }, ref) => {\n  const { colors } = useDesign();\n  return <StyledAvatarFallback \n    ref={ref} \n    className={className} \n    $colors={colors}\n    {...props} \n  />;\n});\nAvatarFallback.displayName = 'AvatarFallback';\n\nexport { Avatar, AvatarImage, AvatarFallback };\n"],"mappings":";AAAA,YAAY,WAAW;AACvB,YAAY,qBAAqB;AACjC,OAAO,YAAY;AACnB,SAAS,iBAAiB;AAiBxB;AAdF,IAAM,eAAe,OAAuB,oBAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUhD,IAAM,SAAe,iBAGnB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B,oBAAC,gBAAa,KAAU,WAAuB,GAAG,OAAO,CAC1D;AACD,OAAO,cAAc;AAErB,IAAM,oBAAoB,OAAuB,qBAAK;AAAA;AAAA;AAAA;AAAA;AAMtD,IAAM,cAAoB,iBAGxB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B,oBAAC,qBAAkB,KAAU,WAAuB,GAAG,OAAO,CAC/D;AACD,YAAY,cAAc;AAE1B,IAAM,uBAAuB,OAAuB,wBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAUtC,CAAC,EAAE,QAAQ,MAAM,QAAQ,MAAM,cAAc;AAAA;AAAA;AAAA,wBAG3C,CAAC,EAAE,QAAQ,MAAM,QAAQ,KAAK,cAAc;AAAA;AAAA;AAIpE,IAAM,iBAAuB,iBAG3B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAClC,QAAM,EAAE,OAAO,IAAI,UAAU;AAC7B,SAAO;AAAA,IAAC;AAAA;AAAA,MACN;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACR,GAAG;AAAA;AAAA,EACN;AACF,CAAC;AACD,eAAe,cAAc;","names":[]}

package/dist/esm/components-core/button.js

@@ -1,183 +0,0 @@
-"use client";
-"use client";
-
-// src/components-core/button.tsx
-import React, { useMemo } from "react";
-import { useDesign } from "../providers/design-provider";
-import Color from "color";
-import styled, { keyframes } from "styled-components";
-import { FONT_FAMILY, FONT_SIZES, LINE_HEIGHTS } from "../utils/constants";
-import { ReloadIcon } from "@radix-ui/react-icons";
-import { jsx, jsxs } from "react/jsx-runtime";
-function getColors({
-  propsColor,
-  colors,
-  variant
-}) {
-  let bgColor;
-  switch (variant) {
-    case "primary": {
-      bgColor = colors.primaryColor;
-      break;
-    }
-    case "secondary": {
-      bgColor = colors.secondaryColor;
-      break;
-    }
-    case "warning": {
-      bgColor = "#ff4500";
-      break;
-    }
-  }
-  if (propsColor) {
-    bgColor = propsColor;
-  }
-  const c = Color(bgColor);
-  const pc = Color(colors.primaryColor);
-  const changeColor = (value) => {
-    return c.hsl(c.hue(), c.saturationl(), c.lightness() + value).toString();
-  };
-  const getAlpha = (alpha) => {
-    return Color(
-      pc.isDark() ? "white" : "black"
-    ).alpha(alpha).toString();
-  };
-  if (c.alpha() === 0) {
-    return {
-      bgColor: "transparent",
-      hoverBgColor: getAlpha(0.1),
-      activeBgColor: getAlpha(0.2),
-      textColor: colors.primaryColor
-    };
-  } else if (c.isLight()) {
-    return {
-      bgColor,
-      hoverBgColor: changeColor(-10),
-      activeBgColor: changeColor(-20),
-      textColor: "black"
-    };
-  } else {
-    return {
-      bgColor,
-      hoverBgColor: changeColor(10),
-      activeBgColor: changeColor(20),
-      textColor: "white"
-    };
-  }
-}
-var StyledButton = styled.button`
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  border: 0;
-  border-radius: 0.375rem;
-  font-family: ${FONT_FAMILY};
-  font-size: ${FONT_SIZES.sm};
-  font-weight: 500;
-  line-height: ${LINE_HEIGHTS.sm};
-  cursor: pointer;
-  padding: ${(props) => {
-  switch (props.$size) {
-    case "sm": {
-      return "0rem 0.75rem";
-    }
-    case "md": {
-      return "0.5rem 1rem";
-    }
-    case "lg": {
-      return "0.5rem 2rem";
-    }
-  }
-}};
-  height: ${(props) => {
-  switch (props.$size) {
-    case "sm": {
-      return "2rem";
-    }
-    case "md": {
-      return "2.25rem;";
-    }
-    case "lg": {
-      return "2.5rem;";
-    }
-  }
-}};
-  &:disabled {
-    cursor: auto;
-    opacity: 0.5;
-  }
-
-  background-color: ${(props) => props.$colors.light.bgColor};
-  color: ${(props) => props.$colors.light.textColor};
-  &:not([disabled]) {
-    &:active,&:hover:active {
-      background-color: ${(props) => props.$colors.light.activeBgColor};
-    }
-    &:hover {
-      background-color: ${(props) => props.$colors.light.hoverBgColor};
-    }
-  }
-
-  html[data-stack-theme='dark'] & {
-    background-color: ${(props) => props.$colors.dark.bgColor};
-    color: ${(props) => props.$colors.dark.textColor};
-    &:not([disabled]) {
-      &:active,&:hover:active {
-        background-color: ${(props) => props.$colors.dark.activeBgColor};
-      }
-      &:hover {
-        background-color: ${(props) => props.$colors.dark.hoverBgColor};
-      }
-    }
-  }
-`;
-var spin = keyframes`
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-`;
-var StyledReloadIcon = styled(ReloadIcon)`
-  margin-right: 0.5rem; /* mr-2 */
-  height: 1rem; /* h-4 */
-  width: 1rem; /* w-4 */
-  animation: ${spin} 1s linear infinite; /* animate-spin */
-`;
-var Button = React.forwardRef(
-  ({
-    variant = "primary",
-    size = "md",
-    loading = false,
-    ...props
-  }, ref) => {
-    const { colors } = useDesign();
-    const { dark, light } = useMemo(() => {
-      return {
-        dark: getColors({ propsColor: props.color, colors: colors.dark, variant }),
-        light: getColors({ propsColor: props.color, colors: colors.light, variant })
-      };
-    }, [props.color, colors, variant]);
-    return /* @__PURE__ */ jsxs(
-      StyledButton,
-      {
-        ref,
-        $size: size,
-        $loading: loading,
-        $colors: { dark, light },
-        ...props,
-        disabled: props.disabled || loading,
-        children: [
-          loading && /* @__PURE__ */ jsx(StyledReloadIcon, {}),
-          props.children
-        ]
-      }
-    );
-  }
-);
-Button.displayName = "Button";
-export {
-  Button
-};
-//# sourceMappingURL=button.js.map

package/dist/esm/components-core/button.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components-core/button.tsx"],"sourcesContent":["'use client';\n\nimport React, { useMemo } from \"react\";\nimport { useDesign } from \"../providers/design-provider\";\nimport Color from 'color';\nimport styled, { keyframes } from 'styled-components';\nimport { FONT_FAMILY, FONT_SIZES, LINE_HEIGHTS } from \"../utils/constants\";\nimport { ReloadIcon } from \"@radix-ui/react-icons\";\n\nfunction getColors({\n  propsColor, \n  colors, \n  variant,\n}: {\n  propsColor?: string, \n  colors: { primaryColor: string, secondaryColor: string, backgroundColor: string },\n  variant: 'primary' | 'secondary' | 'warning',\n}): {\n  bgColor: string, \n  hoverBgColor: string,\n  activeBgColor: string,\n  textColor: string,\n} {\n  let bgColor;\n  switch (variant) {\n    case 'primary': {\n      bgColor = colors.primaryColor;\n      break;\n    }\n    case 'secondary': {\n      bgColor = colors.secondaryColor;\n      break;\n    }\n    case 'warning': {\n      bgColor = '#ff4500';\n      break;\n    }\n  }\n  if (propsColor) {\n    bgColor = propsColor;\n  }\n\n  const c = Color(bgColor);\n  const pc = Color(colors.primaryColor);\n\n  const changeColor = (value: number) => {\n    return c.hsl(c.hue(), c.saturationl(), c.lightness() + value).toString();\n  };\n  \n  const getAlpha = (alpha: number) => {\n    return Color(\n      pc.isDark() ? 'white' : 'black'\n    ).alpha(alpha).toString();\n  };\n\n  if (c.alpha() === 0) {\n    return {\n      bgColor: 'transparent',\n      hoverBgColor: getAlpha(0.1),\n      activeBgColor: getAlpha(0.2),\n      textColor: colors.primaryColor,\n    };\n  } else if (c.isLight()) {\n    return {\n      bgColor,\n      hoverBgColor: changeColor(-10),\n      activeBgColor: changeColor(-20),\n      textColor: 'black',\n    };\n  } else {\n    return {\n      bgColor,\n      hoverBgColor: changeColor(10),\n      activeBgColor: changeColor(20),\n      textColor: 'white',\n    };\n  }\n}\n\nexport type ButtonProps = {\n  variant?: 'primary' | 'secondary' | 'warning',\n  color?: string,\n  size?: 'sm' | 'md' | 'lg',\n  type?: 'button' | 'submit' | 'reset',\n  loading?: boolean,\n  onClick?: (() => void) | (() => Promise<void>),\n} & Omit<React.HTMLProps<HTMLButtonElement>, 'size' | 'type' | 'onClick'>\n\ntype ButtonColors = {\n  bgColor: string, \n  hoverBgColor: string,\n  activeBgColor: string,\n  textColor: string,\n}\n\nconst StyledButton = styled.button<{\n  $size: 'sm' | 'md' | 'lg',\n  $loading: boolean,\n  $colors: {\n    dark: ButtonColors,\n    light: ButtonColors,\n  },\n}>`\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  border: 0;\n  border-radius: 0.375rem;\n  font-family: ${FONT_FAMILY};\n  font-size: ${FONT_SIZES.sm};\n  font-weight: 500;\n  line-height: ${LINE_HEIGHTS.sm};\n  cursor: pointer;\n  padding: ${props => {\n    switch (props.$size) {\n      case 'sm': { return '0rem 0.75rem'; }\n      case 'md': { return '0.5rem 1rem'; }\n      case 'lg': { return '0.5rem 2rem'; }\n    }\n  }};\n  height: ${props => {\n    switch (props.$size) {\n      case 'sm': { return '2rem'; }\n      case 'md': { return '2.25rem;'; }\n      case 'lg': { return '2.5rem;'; }\n    }\n  }};\n  &:disabled {\n    cursor: auto;\n    opacity: 0.5;\n  }\n\n  background-color: ${props => props.$colors.light.bgColor};\n  color: ${props => props.$colors.light.textColor};\n  &:not([disabled]) {\n    &:active,&:hover:active {\n      background-color: ${props => props.$colors.light.activeBgColor};\n    }\n    &:hover {\n      background-color: ${props => props.$colors.light.hoverBgColor};\n    }\n  }\n\n  html[data-stack-theme='dark'] & {\n    background-color: ${props => props.$colors.dark.bgColor};\n    color: ${props => props.$colors.dark.textColor};\n    &:not([disabled]) {\n      &:active,&:hover:active {\n        background-color: ${props => props.$colors.dark.activeBgColor};\n      }\n      &:hover {\n        background-color: ${props => props.$colors.dark.hoverBgColor};\n      }\n    }\n  }\n`;\n\nconst spin = keyframes`\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n`;\n\nconst StyledReloadIcon = styled(ReloadIcon)`\n  margin-right: 0.5rem; /* mr-2 */\n  height: 1rem; /* h-4 */\n  width: 1rem; /* w-4 */\n  animation: ${spin} 1s linear infinite; /* animate-spin */\n`;\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({\n    variant='primary',\n    size='md',\n    loading=false,\n    ...props\n  }, ref) => {\n    const { colors } = useDesign();\n\n    const { dark, light } = useMemo(() => {\n      return {\n        dark: getColors({ propsColor: props.color, colors: colors.dark, variant }),\n        light: getColors({ propsColor: props.color, colors: colors.light, variant }),\n      };\n    }, [props.color, colors, variant]);\n\n    return (\n      <StyledButton\n        ref={ref}\n        $size={size}\n        $loading={loading}\n        $colors={{ dark, light }}\n        {...props}\n        disabled={props.disabled || loading}\n      >\n        {loading && <StyledReloadIcon />}\n        {props.children}\n      </StyledButton>\n    );\n  }\n);\n\nButton.displayName = 'Button';\n\nexport {\n  Button,\n};\n"],"mappings":"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","names":[]}

package/dist/esm/components-core/card.js

@@ -1,52 +0,0 @@
-"use client";
-"use client";
-
-// src/components-core/card.tsx
-import * as React from "react";
-import styled from "styled-components";
-import { useDesign } from "..";
-import { SHADOW } from "../utils/constants";
-import { jsx } from "react/jsx-runtime";
-var StyledCard = styled.div`
-  border-radius: 0.75rem;
-  box-shadow: ${SHADOW};
-  padding: 1.5rem;
-
-  border: 1px solid ${(props) => props.$colors.light.neutralColor};
-  background-color: ${(props) => props.$colors.light.backgroundColor};
-
-  html[data-stack-theme='dark'] & {
-    border-color: ${(props) => props.$colors.dark.neutralColor};
-    background-color: ${(props) => props.$colors.dark.backgroundColor};
-  }
-`;
-var StyledCardHeader = styled.div`
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 1.5rem;
-`;
-var StyledCardContent = styled.div`
-`;
-var StyledCardFooter = styled.div`
-  display: flex;
-  align-items: center;
-  margin-top: 1.5rem;
-`;
-var Card = React.forwardRef((props, ref) => {
-  const { colors } = useDesign();
-  return /* @__PURE__ */ jsx(StyledCard, { ref, ...props, $colors: colors });
-});
-Card.displayName = "Card";
-var CardHeader = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(StyledCardHeader, { ref, ...props }));
-CardHeader.displayName = "CardHeader";
-var CardContent = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(StyledCardContent, { ref, ...props }));
-CardContent.displayName = "CardContent";
-var CardFooter = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(StyledCardFooter, { ref, ...props }));
-CardFooter.displayName = "CardFooter";
-export {
-  Card,
-  CardContent,
-  CardFooter,
-  CardHeader
-};
-//# sourceMappingURL=card.js.map

package/dist/esm/components-core/card.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components-core/card.tsx"],"sourcesContent":["'use client';\n\nimport * as React from \"react\";\nimport styled from \"styled-components\";\nimport { useDesign } from \"..\";\nimport { ColorPalette } from \"../providers/design-provider\";\nimport { SHADOW } from \"../utils/constants\";\n\nconst StyledCard = styled.div<{ \n  $colors: ColorPalette,\n}>`\n  border-radius: 0.75rem;\n  box-shadow: ${SHADOW};\n  padding: 1.5rem;\n\n  border: 1px solid ${props => props.$colors.light.neutralColor};\n  background-color: ${props => props.$colors.light.backgroundColor};\n\n  html[data-stack-theme='dark'] & {\n    border-color: ${props => props.$colors.dark.neutralColor};\n    background-color: ${props => props.$colors.dark.backgroundColor};\n  }\n`;\n\nconst StyledCardHeader = styled.div`\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 1.5rem;\n`;\n\nconst StyledCardContent = styled.div`\n`;\n\nconst StyledCardFooter = styled.div`\n  display: flex;\n  align-items: center;\n  margin-top: 1.5rem;\n`;\n\nconst Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>((props, ref) => {\n  const { colors } = useDesign();\n  return <StyledCard ref={ref} {...props} $colors={colors} />;\n});\nCard.displayName = \"Card\";\n\nconst CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>((props, ref) => (\n  <StyledCardHeader ref={ref} {...props} />\n));\nCardHeader.displayName = \"CardHeader\";\n\nconst CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>((props, ref) => (\n  <StyledCardContent ref={ref} {...props} />\n));\nCardContent.displayName = \"CardContent\";\n\nconst CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>((props, ref) => (\n  <StyledCardFooter ref={ref} {...props} />\n));\nCardFooter.displayName = \"CardFooter\";\n\nexport { \n  Card, \n  CardHeader, \n  CardFooter, \n  CardContent,\n};\n"],"mappings":";;;AAEA,YAAY,WAAW;AACvB,OAAO,YAAY;AACnB,SAAS,iBAAiB;AAE1B,SAAS,cAAc;AAmCd;AAjCT,IAAM,aAAa,OAAO;AAAA;AAAA,gBAIV,MAAM;AAAA;AAAA;AAAA,sBAGA,WAAS,MAAM,QAAQ,MAAM,YAAY;AAAA,sBACzC,WAAS,MAAM,QAAQ,MAAM,eAAe;AAAA;AAAA;AAAA,oBAG9C,WAAS,MAAM,QAAQ,KAAK,YAAY;AAAA,wBACpC,WAAS,MAAM,QAAQ,KAAK,eAAe;AAAA;AAAA;AAInE,IAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA;AAAA;AAMhC,IAAM,oBAAoB,OAAO;AAAA;AAGjC,IAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA;AAAA;AAMhC,IAAM,OAAa,iBAAiE,CAAC,OAAO,QAAQ;AAClG,QAAM,EAAE,OAAO,IAAI,UAAU;AAC7B,SAAO,oBAAC,cAAW,KAAW,GAAG,OAAO,SAAS,QAAQ;AAC3D,CAAC;AACD,KAAK,cAAc;AAEnB,IAAM,aAAmB,iBAAiE,CAAC,OAAO,QAChG,oBAAC,oBAAiB,KAAW,GAAG,OAAO,CACxC;AACD,WAAW,cAAc;AAEzB,IAAM,cAAoB,iBAAiE,CAAC,OAAO,QACjG,oBAAC,qBAAkB,KAAW,GAAG,OAAO,CACzC;AACD,YAAY,cAAc;AAE1B,IAAM,aAAmB,iBAAiE,CAAC,OAAO,QAChG,oBAAC,oBAAiB,KAAW,GAAG,OAAO,CACxC;AACD,WAAW,cAAc;","names":[]}

package/dist/esm/components-core/collapsible.js

@@ -1,14 +0,0 @@
-"use client";
-"use client";
-
-// src/components-core/collapsible.tsx
-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
-var Collapsible = CollapsiblePrimitive.Root;
-var CollapsibleTrigger2 = CollapsiblePrimitive.CollapsibleTrigger;
-var CollapsibleContent2 = CollapsiblePrimitive.CollapsibleContent;
-export {
-  Collapsible,
-  CollapsibleContent2 as CollapsibleContent,
-  CollapsibleTrigger2 as CollapsibleTrigger
-};
-//# sourceMappingURL=collapsible.js.map

package/dist/esm/components-core/collapsible.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components-core/collapsible.tsx"],"sourcesContent":["\"use client\";\n\nimport * as CollapsiblePrimitive from \"@radix-ui/react-collapsible\";\n\nconst Collapsible = CollapsiblePrimitive.Root;\nconst CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;\nconst CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent };\n"],"mappings":";;;AAEA,YAAY,0BAA0B;AAEtC,IAAM,cAAmC;AACzC,IAAMA,sBAA0C;AAChD,IAAMC,sBAA0C;","names":["CollapsibleTrigger","CollapsibleContent"]}

package/dist/esm/components-core/container.js

@@ -1,36 +0,0 @@
-"use client";
-"use client";
-
-// src/components-core/container.tsx
-import { useDesign } from "../providers/design-provider";
-import styled from "styled-components";
-import { jsx } from "react/jsx-runtime";
-var OuterContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  width: 100%;
-`;
-var InnerContainer = styled.div`
-  width: 100%;
-  @media (min-width: ${(props) => props.$breakpoint}px) {
-    width: ${(props) => props.$breakpoint}px;
-  }
-`;
-function Container({
-  size = "md",
-  ...props
-}) {
-  const { breakpoints } = useDesign();
-  return /* @__PURE__ */ jsx(OuterContainer, { children: /* @__PURE__ */ jsx(
-    InnerContainer,
-    {
-      $breakpoint: typeof size === "number" ? size : breakpoints[size],
-      ...props,
-      children: props.children
-    }
-  ) });
-}
-export {
-  Container
-};
-//# sourceMappingURL=container.js.map

package/dist/esm/components-core/container.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components-core/container.tsx"],"sourcesContent":["'use client';\n\nimport { useDesign } from \"../providers/design-provider\";\nimport styled from 'styled-components';\n\ntype ContainerProps = {\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number,\n} & Omit<React.HTMLProps<HTMLDivElement>, 'size'>\n\nconst OuterContainer = styled.div`\n  display: flex;\n  justify-content: center;\n  width: 100%;\n`;\n\nconst InnerContainer = styled.div<{ $breakpoint: number }>`\n  width: 100%;\n  @media (min-width: ${props => props.$breakpoint}px) {\n    width: ${props => props.$breakpoint}px;\n  }\n`;\n\nexport function Container({\n  size='md',\n  ...props\n} : ContainerProps) {\n  const { breakpoints } = useDesign();\n  return (\n    <OuterContainer>\n      <InnerContainer\n        $breakpoint={typeof size === 'number' ? size : breakpoints[size]}\n        {...props}\n      >\n        {props.children}\n      </InnerContainer>\n    </OuterContainer>\n  );\n}"],"mappings":";;;AAEA,SAAS,iBAAiB;AAC1B,OAAO,YAAY;AA0Bb;AApBN,IAAM,iBAAiB,OAAO;AAAA;AAAA;AAAA;AAAA;AAM9B,IAAM,iBAAiB,OAAO;AAAA;AAAA,uBAEP,WAAS,MAAM,WAAW;AAAA,aACpC,WAAS,MAAM,WAAW;AAAA;AAAA;AAIhC,SAAS,UAAU;AAAA,EACxB,OAAK;AAAA,EACL,GAAG;AACL,GAAoB;AAClB,QAAM,EAAE,YAAY,IAAI,UAAU;AAClC,SACE,oBAAC,kBACC;AAAA,IAAC;AAAA;AAAA,MACC,aAAa,OAAO,SAAS,WAAW,OAAO,YAAY,IAAI;AAAA,MAC9D,GAAG;AAAA,MAEH,gBAAM;AAAA;AAAA,EACT,GACF;AAEJ;","names":[]}