chore: bundling tsup

packages/elements-react/package.json

@@ -39,6 +39,7 @@
     "react-dom": "18.3.1"
   },
   "devDependencies": {
+    "@svgr/plugin-jsx": "^8.1.0",
     "esbuild-plugin-svgr": "2.1.0",
     "eslint-plugin-react": "7.35.0",
     "tsup": "8.2.3"

packages/elements-react/src/components/card/card-two-step.tsx

@@ -3,8 +3,8 @@ import { OryForm } from "../form/form"
 import { OryCardValidationMessages } from "../form/messages"
 import { Node } from "../form/nodes/node"
 import { OryFormSocialButtons } from "../form/social"
-import { useComponents, useNodeSorter } from "../../context/component"
-import { useOryFlow } from "../../context/flow-context"
+import { useComponents, useNodeSorter } from "../../context"
+import { useOryFlow } from "../../context"
 import {
   isUiNodeInputAttributes,
   UiNode,

packages/elements-react/src/components/card/header.tsx

@@ -1,4 +1,4 @@
-import { useComponents } from "../../context/component"
+import { useComponents } from "../../context"
 
 export type OryCardHeaderProps = Record<string, never>
 

packages/elements-react/src/components/card/index.tsx

@@ -2,7 +2,7 @@ import { OryForm } from "../form/form"
 import { OryFormGroups } from "../form/groups"
 import { OryCardValidationMessages } from "../form/messages"
 import { OryFormSocialButtons } from "../form/social"
-import { useComponents } from "../../context/component"
+import { useComponents } from "../../context"
 import { ComponentType, PropsWithChildren } from "react"
 import { OryCardHeader, OryCardHeaderProps } from "./header"
 

packages/elements-react/src/components/form/form.tsx

@@ -8,8 +8,7 @@ import {
 import { ComponentType, PropsWithChildren } from "react"
 import { FormProvider, SubmitHandler, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
-import { useComponents } from "../../context/component"
-import { useOryFlow } from "../../context/flow-context"
+import { useOryFlow, useComponents } from "../../context"
 import {
   FormValues,
   HeadlessAuthMethodListItemProps,

packages/elements-react/src/components/form/groups.tsx

@@ -1,5 +1,5 @@
-import { useComponents, useNodeSorter } from "../../context/component"
-import { useOryFlow } from "../../context/flow-context"
+import { useComponents, useNodeSorter } from "../../context"
+import { useOryFlow } from "../../context"
 import { UiNodeGroupEnum } from "@ory/client-fetch"
 import { PropsWithChildren } from "react"
 import { Node } from "./nodes/node"

packages/elements-react/src/components/form/messages.tsx

@@ -1,5 +1,4 @@
-import { useComponents } from "../../context/component"
-import { useOryFlow } from "../../context/flow-context"
+import { useOryFlow, useComponents } from "../../context"
 import { UiText } from "@ory/client-fetch"
 import { DetailedHTMLProps, HTMLAttributes } from "react"
 

packages/elements-react/src/components/form/nodes/input.tsx

@@ -1,5 +1,5 @@
 import { NodeProps } from "./node"
-import { useComponents } from "../../../context/component"
+import { useComponents } from "../../../context"
 import { triggerToWindowCall } from "../../../util/ui"
 import {
   UiNodeInputAttributes,

packages/elements-react/src/components/form/nodes/node.tsx

@@ -8,7 +8,7 @@ import {
   isUiNodeTextAttributes,
 } from "@ory/client-fetch"
 import { MouseEventHandler, ReactNode } from "react"
-import { useComponents } from "../../../context/component"
+import { useComponents } from "../../../context"
 
 export type NodeProps = {
   node: UiNode

packages/elements-react/src/components/form/social.tsx

@@ -1,5 +1,5 @@
-import { useComponents } from "../../context/component"
-import { useOryFlow } from "../../context/flow-context"
+import { useComponents } from "../../context"
+import { useOryFlow } from "../../context"
 import { UiNode, UiNodeInputAttributes } from "@ory/client-fetch"
 import { PropsWithChildren } from "react"
 import { Node } from "./nodes/node"

packages/elements-react/src/components/generic/divider.tsx

@@ -1,5 +1,5 @@
-import { useComponents } from "../../context/component"
-import { useOryFlow } from "../../context/flow-context"
+import { useComponents } from "../../context"
+import { useOryFlow } from "../../context"
 
 export type HorizontalDividerProps = Record<string, never>
 

packages/elements-react/src/context/intl-context.tsx

@@ -192,6 +192,7 @@ export const IntlProvider = <
   let translation = locales.en
 
   if (props.locale && props.locale in locales) {
+    // @ts-expect-error asdasd
     translation = locales[props.locale as Locale]
   }
 

packages/elements-react/src/theme/default/components/card/auth-methods.tsx

@@ -1,4 +1,4 @@
-import { HeadlessAuthMethodListItemProps } from "../../../../types"
+import { HeadlessAuthMethodListItemProps } from "@ory/elements-react"
 
 import { FunctionComponent, SVGAttributes } from "react"
 import code from "../../assets/icons/code.svg"

packages/elements-react/src/theme/default/components/card/content.tsx

@@ -1,4 +1,4 @@
-import { OryCardContentProps } from "../../../../components"
+import { OryCardContentProps } from "@ory/elements-react"
 
 export function DefaultCardContent({ children }: OryCardContentProps) {
   return children

packages/elements-react/src/theme/default/components/card/current-identifier-button.tsx

@@ -1,4 +1,4 @@
-import { HeadlessButtonProps } from "../../../../types"
+import { HeadlessButtonProps } from "@ory/elements-react"
 import { DefaultInput } from "../form/input"
 
 export function DefaultCurrentIdentifierButton({

packages/elements-react/src/theme/default/components/card/footer.tsx

@@ -1,6 +1,6 @@
 import { FlowType } from "@ory/client-fetch"
 import { useIntl } from "react-intl"
-import { useOryFlow } from "../../../../context"
+import { useOryFlow } from "@ory/elements-react"
 
 export function DefaultCardFooter() {
   const { flowType } = useOryFlow()

packages/elements-react/src/theme/default/components/card/header.tsx

@@ -1,6 +1,5 @@
 import { FlowType, isUiNodeInputAttributes } from "@ory/client-fetch"
-import { useComponents, useOryFlow } from "../../../../context"
-import { FlowContainer } from "../../../../util/flowContainer"
+import { FlowContainer, useComponents, useOryFlow } from "@ory/elements-react"
 
 function joinWithCommaOr(list: string[]): string {
   if (list.length === 0) {

packages/elements-react/src/theme/default/components/card/index.tsx

@@ -1,4 +1,4 @@
-import { OryCardProps } from "../../../../components"
+import { OryCardProps } from "@ory/elements-react"
 import { Badge } from "./badge"
 import { DefaultCardContent } from "./content"
 import { DefaultCardFooter } from "./footer"

packages/elements-react/src/theme/default/components/card/logo.tsx

@@ -1,4 +1,4 @@
-import { useOryFlow } from "../../../../context"
+import { useOryFlow } from "@ory/elements-react"
 
 export function DefaultCardLogo() {
   const flow = useOryFlow()

packages/elements-react/src/theme/default/components/default-components.tsx

@@ -26,7 +26,7 @@ import {
 } from "./form/social"
 import { DefaultText } from "./form/text"
 import { DefaultCurrentIdentifierButton } from "./card/current-identifier-button"
-import { OryFlowComponents } from "../../../types"
+import { OryFlowComponents } from "@ory/elements-react"
 
 export const OryDefaultComponents: OryFlowComponents = {
   Card: DefaultCard,

packages/elements-react/src/theme/default/components/form/button.tsx

@@ -2,8 +2,7 @@ import { useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 import { Spinner } from "./spinner"
 import { cn } from "../../utils/cn"
-import { HeadlessButtonProps } from "../../../../types"
-import { formatMessage } from "../../../../util"
+import { formatMessage, HeadlessButtonProps } from "@ory/elements-react"
 import { getNodeLabel } from "@ory/client-fetch"
 
 export const DefaultButton = ({

packages/elements-react/src/theme/default/components/form/checkbox.tsx

@@ -3,8 +3,8 @@ import { useState } from "react"
 import { useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 import { cn } from "../../utils/cn"
-import { HeadlessInputProps } from "../../../../types"
-import { formatMessage, messageTestId } from "../../../../util"
+import { HeadlessInputProps } from "@ory/elements-react"
+import { formatMessage, messageTestId } from "@ory/elements-react"
 import { getNodeLabel } from "@ory/client-fetch"
 
 function CheckboxSVG() {

packages/elements-react/src/theme/default/components/form/group-container.tsx

@@ -1,4 +1,4 @@
-import { HeadlessGroupContainerProps } from "../../../../components"
+import { HeadlessGroupContainerProps } from "@ory/elements-react"
 
 export function DefaultGroupContainer({
   children,

packages/elements-react/src/theme/default/components/form/image.tsx

@@ -1,4 +1,4 @@
-import { HeadlessImageProps } from "../../../../types"
+import { HeadlessImageProps } from "@ory/elements-react"
 
 export function DefaultImage({ attributes }: HeadlessImageProps) {
   // const intl = useIntl()

packages/elements-react/src/theme/default/components/form/index.tsx

@@ -1,7 +1,7 @@
 import { PropsWithChildren } from "react"
 import { cn } from "../../utils/cn"
-import { HeadlessFormProps } from "../../../../types"
-import { HeadlessMessageProps } from "../../../../components"
+import { HeadlessFormProps } from "@ory/elements-react"
+import { HeadlessMessageProps } from "@ory/elements-react"
 
 export function DefaultFormContainer({
   children,

packages/elements-react/src/theme/default/components/form/input.tsx

@@ -1,5 +1,5 @@
 import { useFormContext } from "react-hook-form"
-import { HeadlessInputProps } from "../../../../types"
+import { HeadlessInputProps } from "@ory/elements-react"
 import { getNodeLabel } from "@ory/client-fetch"
 
 export const DefaultInput = ({

packages/elements-react/src/theme/default/components/form/label.tsx

@@ -1,8 +1,8 @@
 import { FlowType, getNodeLabel } from "@ory/client-fetch"
 import { useIntl } from "react-intl"
-import { useOryFlow } from "../../../../context"
-import { HeadlessLabelProps } from "../../../../types"
-import { formatMessage, messageTestId } from "../../../../util"
+import { useOryFlow } from "@ory/elements-react"
+import { HeadlessLabelProps } from "@ory/elements-react"
+import { formatMessage, messageTestId } from "@ory/elements-react"
 import { cn } from "../../utils/cn"
 
 export function DefaultLabel({

packages/elements-react/src/theme/default/components/form/link-button.tsx

@@ -1,8 +1,8 @@
 import { forwardRef } from "react"
 import { useIntl } from "react-intl"
 import { cn } from "../../utils/cn"
-import { HeadlessLinkButtonProps } from "../../../../types"
-import { formatMessage } from "../../../../util"
+import { HeadlessLinkButtonProps } from "@ory/elements-react"
+import { formatMessage } from "@ory/elements-react"
 import { getNodeLabel } from "@ory/client-fetch"
 
 export const DefaultLinkButton = forwardRef<

packages/elements-react/src/theme/default/components/form/pin-code-input.tsx

@@ -1,7 +1,7 @@
 "use client"
 import { useFormContext } from "react-hook-form"
 import { InputOTP, InputOTPGroup, InputOTPSlot } from "./shadcn/otp-input"
-import { HeadlessInputProps } from "../../../../types"
+import { HeadlessInputProps } from "@ory/elements-react"
 
 export const DefaultPinCodeInput = ({ attributes }: HeadlessInputProps) => {
   const { setValue, watch } = useFormContext()

packages/elements-react/src/theme/default/components/form/social.tsx

@@ -1,8 +1,8 @@
 import {
   HeadlessSocialButtonContainerProps,
   HeadlessSocialButtonProps,
-} from "../../../../components"
-import { useOryFlow } from "../../../../context"
+} from "@ory/elements-react"
+import { useOryFlow } from "@ory/elements-react"
 import logos from "../../provider-logos"
 import { cn } from "../../utils/cn"
 

packages/elements-react/src/theme/default/components/form/text.tsx

@@ -1,7 +1,7 @@
 import { UiText } from "@ory/client-fetch"
 import { useIntl } from "react-intl"
-import { HeadlessTextProps } from "../../../../types"
-import { formatMessage } from "../../../../util"
+import { HeadlessTextProps } from "@ory/elements-react"
+import { formatMessage } from "@ory/elements-react"
 
 export function DefaultText({ node, attributes }: HeadlessTextProps) {
   const intl = useIntl()

packages/elements-react/src/theme/default/flows/error.tsx

@@ -1,8 +1,7 @@
 "use client"
 import { FlowError } from "@ory/client-fetch"
 import { PropsWithChildren } from "react"
-import { OryFlowComponents } from "../../../types"
-import { OryClientConfiguration } from "../../../util/clientConfiguration"
+import { OryClientConfiguration, OryFlowComponents } from "@ory/elements-react"
 
 export type ErrorFlowContextProps = {
   error: FlowError

packages/elements-react/src/theme/default/flows/login.tsx

@@ -2,10 +2,12 @@
 import { FlowType, LoginFlow } from "@ory/client-fetch"
 import { PropsWithChildren } from "react"
 import { OryDefaultComponents } from "../components"
-import { OryFlowComponents } from "../../../types"
-import { OryProvider } from "../../../context"
-import { OryCard } from "../../../components"
-import { OryClientConfiguration } from "../../../util/clientConfiguration"
+import {
+  OryFlowComponents,
+  OryCard,
+  OryClientConfiguration,
+  OryProvider,
+} from "@ory/elements-react"
 
 export type LoginFlowContextProps = {
   flow: LoginFlow

packages/elements-react/src/theme/default/flows/recovery.tsx

@@ -2,10 +2,12 @@
 import { FlowType, RecoveryFlow } from "@ory/client-fetch"
 import { PropsWithChildren } from "react"
 import { OryDefaultComponents } from "../components"
-import { OryFlowComponents } from "../../../types"
-import { OryProvider } from "../../../context"
-import { OryCard } from "../../../components"
-import { OryClientConfiguration } from "../../../util/clientConfiguration"
+import {
+  OryCard,
+  OryFlowComponents,
+  OryProvider,
+  OryClientConfiguration,
+} from "@ory/elements-react"
 
 export type RecoveryFlowContextProps = {
   flow: RecoveryFlow

packages/elements-react/src/theme/default/flows/registration.tsx

@@ -2,10 +2,12 @@
 import { FlowType, RegistrationFlow } from "@ory/client-fetch"
 import { PropsWithChildren } from "react"
 import { OryDefaultComponents } from "../components"
-import { OryFlowComponents } from "../../../types"
-import { OryProvider } from "../../../context"
-import { OryCard } from "../../../components"
-import { OryClientConfiguration } from "../../../util/clientConfiguration"
+import {
+  OryClientConfiguration,
+  OryFlowComponents,
+  OryCard,
+  OryProvider,
+} from "@ory/elements-react"
 
 type RegistrationFlowContextProps = {
   flow: RegistrationFlow

packages/elements-react/src/theme/default/flows/settings.tsx

@@ -2,10 +2,12 @@
 import { FlowType, SettingsFlow } from "@ory/client-fetch"
 import { PropsWithChildren } from "react"
 import { OryDefaultComponents } from "../components"
-import { OryFlowComponents } from "../../../types"
-import { OryProvider } from "../../../context"
-import { OryCard } from "../../../components"
-import { OryClientConfiguration } from "../../../util/clientConfiguration"
+import {
+  OryFlowComponents,
+  OryClientConfiguration,
+  OryProvider,
+  OryCard,
+} from "@ory/elements-react"
 
 export type SettingsFlowContextProps = {
   flow: SettingsFlow

packages/elements-react/src/theme/default/flows/verification.tsx

@@ -2,10 +2,12 @@
 import { FlowType, VerificationFlow } from "@ory/client-fetch"
 import { PropsWithChildren } from "react"
 import { OryDefaultComponents } from "../components"
-import { OryFlowComponents } from "../../../types"
-import { OryProvider } from "../../../context"
-import { OryCard } from "../../../components"
-import { OryClientConfiguration } from "../../../util/clientConfiguration"
+import {
+  OryCard,
+  OryProvider,
+  OryClientConfiguration,
+  OryFlowComponents,
+} from "@ory/elements-react"
 
 export type VerificationFlowContextProps = {
   flow: VerificationFlow

packages/elements-react/src/util/onSubmitLogin.ts

@@ -54,7 +54,6 @@ export async function onSubmitLogin(
           setFlowContainer({
             flow: body,
             flowType: FlowType.Login,
-            config,
           })
         },
         onRedirect,

packages/elements-react/tsconfig.json

@@ -17,7 +17,10 @@
     "declarationDir": "dist/types",
     "jsx": "react-jsx",
     "lib": ["ES6", "DOM", "WebWorker"],
-    "rootDir": "src"
+    "rootDir": "src",
+    "paths": {
+      "@ory/elements-react": ["./src/index.ts"]
+    }
   },
   "exclude": ["node_modules"],
   "include": [