@vuer-ai/vuer-uikit 0.0.106 → 0.0.109

package/src/dial/wrapped-inputs/DialInputs.tsx

@@ -1,14 +1,16 @@
-import React from "react";
+import React, { PropsWithChildren } from "react";
 
 import {
   CmInput,
   DegInput,
   EulerDegInput,
   EulerInput,
+  EulerRadInput,
   FormLayout,
   InchInput,
   IntInput,
   Label,
+  type LayoutType,
   QuaternionInput,
   RadInput,
   TextInput,
@@ -16,7 +18,6 @@ import {
   Vec3Input,
   VectorInput,
 } from "../../index";
-import { EulerRadInput } from "../../ui/inputs/number-inputs/EulerRadInput";
 import { LabelPositionT, useDialSchema } from "../DialProvider";
 
 // Base props for all dial-wrapped inputs
@@ -29,19 +30,19 @@ interface DialWrapperProps {
 }
 
 // Helper component for wrapping inputs with labels
-const DialInputWrapper: React.FC<{
-  label?: string;
-  children: React.ReactElement;
-}> = ({ label, children }) => {
+const DialInputWrapper: React.FC<PropsWithChildren<DialWrapperProps>> = ({
+  label,
+  labelPosition = "top",
+  children,
+}) => {
   if (!label) {
     return <>{children}</>;
   }
 
-  // Always use horizontal layout (label on left)
   return (
-    <FormLayout orientation="label-top">
+    <FormLayout orientation={`label-${labelPosition}` as LayoutType}>
       <Label size="sm">{label}</Label>
-      {children}
+      <>{children}</>
     </FormLayout>
   );
 };
@@ -69,7 +70,7 @@ export const DialVec3Input: React.FC<DialWrapperProps> = ({
     );
   } else {
     return (
-      <DialInputWrapper label={label}>
+      <DialInputWrapper name={name} label={label}>
         <Vec3Input
           value={value}
           onValuesChange={(val) => setValue(name, val)}
@@ -104,7 +105,7 @@ export const DialEulerInput: React.FC<DialWrapperProps> = ({
     );
   } else {
     return (
-      <DialInputWrapper label={label}>
+      <DialInputWrapper name={name} label={label}>
         <EulerInput
           value={value}
           onValuesChange={(val) => setValue(name, val)}
@@ -139,7 +140,7 @@ export const DialEulerDegInput: React.FC<DialWrapperProps> = ({
     );
   } else {
     return (
-      <DialInputWrapper label={label}>
+      <DialInputWrapper name={name} label={label}>
         <EulerDegInput
           value={value}
           onValuesChange={(val) => setValue(name, val)}
@@ -174,7 +175,7 @@ export const DialQuaternionInput: React.FC<DialWrapperProps> = ({
     );
   } else {
     return (
-      <DialInputWrapper label={label}>
+      <DialInputWrapper name={name} label={label}>
         <QuaternionInput
           value={value}
           onValuesChange={(val) => setValue(name, val)}
@@ -210,7 +211,7 @@ export const DialVectorInput: React.FC<DialWrapperProps & { dimensions?: number
     );
   } else {
     return (
-      <DialInputWrapper label={label}>
+      <DialInputWrapper name={name} label={label}>
         <VectorInput
           value={value}
           onValuesChange={(val) => setValue(name, val)}
@@ -245,7 +246,7 @@ export const DialIntInput: React.FC<DialWrapperProps> = ({
     );
   } else {
     return (
-      <DialInputWrapper label={label}>
+      <DialInputWrapper name={name} label={label}>
         <IntInput value={value} onChange={(val) => setValue(name, val)} size={size} step={step} />
       </DialInputWrapper>
     );
@@ -275,7 +276,7 @@ export const DialDegInput: React.FC<DialWrapperProps> = ({
     );
   } else {
     return (
-      <DialInputWrapper label={label}>
+      <DialInputWrapper name={name} label={label}>
         <DegInput value={value} onChange={(val) => setValue(name, val)} size={size} step={step} />
       </DialInputWrapper>
     );
@@ -305,7 +306,7 @@ export const DialRadInput: React.FC<DialWrapperProps> = ({
     );
   } else {
     return (
-      <DialInputWrapper label={label}>
+      <DialInputWrapper name={name} label={label}>
         <RadInput value={value} onChange={(val) => setValue(name, val)} size={size} step={step} />
       </DialInputWrapper>
     );
@@ -335,7 +336,7 @@ export const DialCmInput: React.FC<DialWrapperProps> = ({
     );
   } else {
     return (
-      <DialInputWrapper label={label}>
+      <DialInputWrapper name={name} label={label}>
         <CmInput value={value} onChange={(val) => setValue(name, val)} size={size} step={step} />
       </DialInputWrapper>
     );
@@ -365,7 +366,7 @@ export const DialInchInput: React.FC<DialWrapperProps> = ({
     );
   } else {
     return (
-      <DialInputWrapper label={label}>
+      <DialInputWrapper name={name} label={label}>
         <InchInput value={value} onChange={(val) => setValue(name, val)} size={size} step={step} />
       </DialInputWrapper>
     );
@@ -395,7 +396,7 @@ export const DialTimeInput: React.FC<DialWrapperProps> = ({
     );
   } else {
     return (
-      <DialInputWrapper label={label}>
+      <DialInputWrapper name={name} label={label}>
         <TimeInput value={value} onChange={(val) => setValue(name, val)} size={size} step={step} />
       </DialInputWrapper>
     );
@@ -425,11 +426,11 @@ export const DialTextInput: React.FC<DialWrapperProps & { placeholder?: string }
     );
   } else {
     return (
-      <DialInputWrapper label={label}>
-        <TextInput 
-          value={value} 
-          onChange={(val) => setValue(name, val)} 
-          size={size} 
+      <DialInputWrapper name={name} label={label}>
+        <TextInput
+          value={value}
+          onChange={(val) => setValue(name, val)}
+          size={size}
           placeholder={placeholder}
         />
       </DialInputWrapper>
@@ -461,7 +462,7 @@ export const DialEulerRadInput: React.FC<DialWrapperProps> = ({
     );
   } else {
     return (
-      <DialInputWrapper label={label}>
+      <DialInputWrapper name={name} label={label}>
         <EulerRadInput
           value={value}
           onValuesChange={(val) => setValue(name, val)}
@@ -487,7 +488,7 @@ export const DialNumberRadInput: React.FC<DialWrapperProps> = ({
 
   // Convert radians to degrees for display
   const degValue = (value * 180) / Math.PI;
-  
+
   // Handler to convert degrees back to radians
   const handleChange = (deg: number) => {
     const rad = (deg * Math.PI) / 180;
@@ -506,7 +507,7 @@ export const DialNumberRadInput: React.FC<DialWrapperProps> = ({
     );
   } else {
     return (
-      <DialInputWrapper label={label}>
+      <DialInputWrapper name={name} label={label}>
         <DegInput value={degValue} onChange={handleChange} size={size} step={step} />
       </DialInputWrapper>
     );

package/src/styles/theme.css

@@ -178,6 +178,7 @@
   --spacing-xl: calc(var(--spacing) + 12px); /* 16px */
   /* font-size */
   --text-uk-hint: 10px; /* hint text */
+  --text-uk-xxs: 10px; /* primary text, input title */
   --text-uk-xs: 11px; /* primary text, input title */
   --text-uk-sm: 12px; /* tab, highlight text, numbers */
   --text-uk-subtitle: 13px; /* subtitle */
@@ -188,6 +189,7 @@
   --text-uk-h1: 30px; /* heading 1 */
   /* line-height */
   --leading-uk-hint: 12px; /* hint text */
+  --leading-uk-xxs: 12px; /* primary text, input title */
   --leading-uk-xs: 14px; /* primary text, input title */
   --leading-uk-sm: 16px; /* tab, highlight text, numbers */
   --leading-uk-subtitle: 18px; /* subtitle */

package/src/ui/label.tsx

@@ -12,6 +12,7 @@ const labelVariants = cva(
         xs: "text-xxs",
         sm: "text-xs",
         lg: "text-md",
+        hint: "text-hint text-muted-foreground",
       },
     },
     defaultVariants: {
@@ -22,7 +23,7 @@ const labelVariants = cva(
 
 type LabelProps = React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
   VariantProps<typeof labelVariants> & {
-    size?: "xs" | "sm" | "lg";
+    size?: "xs" | "sm" | "lg" | "hint";
   };
 
 const Label = React.forwardRef<React.ComponentRef<typeof LabelPrimitive.Root>, LabelProps>(

package/src/ui/layout.tsx

@@ -3,11 +3,12 @@ import { PropsWithChildren, ReactElement } from "react";
 
 import { cn } from "../hooks";
 
+export type LayoutType = "label-left" | "label-top";
 export interface FormLayoutProps extends PropsWithChildren {
   align?: "start" | "center" | "end" | "baseline";
   asChild?: boolean;
   className?: string;
-  orientation?: "label-left" | "label-top";
+  orientation?: LayoutType;
   children: [ReactElement, ReactElement];
 }
 

package/src/ui/layouts/liquid-layout/LayoutSlots.tsx

@@ -8,7 +8,20 @@ export function LiquidLayout({ className, ...props }: Readonly<ComponentProps<"d
     <div
       {...props}
       className={cn(
-        "pointer-events-none relative z-1 grid h-full w-full grid-cols-3 grid-rows-[1fr_auto] flex-col justify-between overflow-hidden p-4",
+        [
+          "pointer-events-none",
+          "relative",
+          "z-1",
+          "grid",
+          "h-full",
+          "w-full",
+          "grid-cols-3",
+          "grid-rows-[1fr_auto]",
+          "flex-col",
+          "justify-between",
+          "overflow-hidden",
+          "p-4",
+        ],
         className,
       )}
     />
@@ -20,7 +33,15 @@ interface LiquidLayoutChildProps extends ComponentProps<"div"> {
 }
 
 export function LiquidLayoutContent({ className, ...props }: Readonly<ComponentProps<"div">>) {
-  return <div {...props} className={cn("pointer-events-auto absolute inset-0 -z-1", className)} />;
+  return (
+    <div
+      {...props}
+      className={cn(
+        ["pointer-events-auto", "absolute", "inset-0", "-z-1"],
+        className,
+      )}
+    />
+  );
 }
 
 export function LiquidLayoutLeft({ className, ...props }: Readonly<ComponentProps<"div">>) {
@@ -28,7 +49,16 @@ export function LiquidLayoutLeft({ className, ...props }: Readonly<ComponentProp
     <div
       {...props}
       className={cn(
-        "order-2 col-start-1 flex flex-col items-start gap-4 overflow-y-auto [&>*]:pointer-events-auto",
+        [
+          "order-2",
+          "col-start-1",
+          "flex",
+          "flex-col",
+          "items-start",
+          "gap-4",
+          "overflow-y-auto",
+          "[&>*]:pointer-events-auto",
+        ],
         className,
       )}
     />
@@ -40,7 +70,14 @@ export function LiquidLayoutTop({ className, ...props }: Readonly<ComponentProps
     <div
       {...props}
       className={cn(
-        "order-3 col-start-2 flex items-start justify-center [&>*]:pointer-events-auto",
+        [
+          "order-3",
+          "col-start-2",
+          "flex",
+          "items-start",
+          "justify-center",
+          "[&>*]:pointer-events-auto",
+        ],
         className,
       )}
     />
@@ -57,7 +94,17 @@ export function LiquidLayoutRight({
     <Comp
       {...props}
       className={cn(
-        "order-4 col-start-3 flex flex-col items-end gap-4 overflow-y-auto [&>*]:pointer-events-auto",
+        [
+          "order-4",
+          "col-start-3",
+          "flex",
+          "flex-col",
+          "items-end",
+          "gap-4",
+          "justify-self-end",
+          "overflow-y-auto",
+          "[&>*]:pointer-events-auto",
+        ],
         className,
       )}
     />
@@ -74,7 +121,14 @@ export function LiquidLayoutBottom({
     <Comp
       {...props}
       className={cn(
-        "order-5 col-span-3 col-start-1 flex justify-center [&>*]:pointer-events-auto",
+        [
+          "order-5",
+          "col-span-3",
+          "col-start-1",
+          "flex",
+          "justify-center",
+          "[&>*]:pointer-events-auto",
+        ],
         className,
       )}
     />

package/src/ui/layouts/liquid-layout/LiquidLayoutView.tsx

@@ -8,7 +8,6 @@ import {
   LiquidLayoutRight,
   LiquidLayoutTop,
 } from "./LayoutSlots";
-import { cn } from "../../../hooks";
 
 /**
  * Props for the LiquidLayoutView component
@@ -26,16 +25,6 @@ interface LiquidLayoutViewProps {
   children?: ReactNode;
   /** Additional CSS classes to apply to the root element */
   className?: string;
-  /** CSS classes to apply to the left slot */
-  leftClassName?: string;
-  /** CSS classes to apply to the right slot */
-  rightClassName?: string;
-  /** CSS classes to apply to the top slot */
-  topClassName?: string;
-  /** CSS classes to apply to the bottom slot */
-  bottomClassName?: string;
-  /** CSS classes to apply to the content slot */
-  contentClassName?: string;
 }
 
 /**
@@ -52,25 +41,16 @@ export const LiquidLayoutView = ({
   bottom,
   children,
   className,
-  leftClassName,
-  rightClassName,
-  topClassName,
-  bottomClassName,
-  contentClassName,
 }: LiquidLayoutViewProps) => {
   return (
     <LiquidLayout className={className}>
-      <LiquidLayoutContent
-        className={cn("absolute flex flex-col items-center justify-center", contentClassName)}
-      >
+      <LiquidLayoutContent className="absolute flex flex-col items-center justify-center">
         {children}
       </LiquidLayoutContent>
-      {bottom && (
-        <LiquidLayoutBottom className={cn("mt-4", bottomClassName)}>{bottom}</LiquidLayoutBottom>
-      )}
-      {right && <LiquidLayoutRight className={rightClassName}>{right}</LiquidLayoutRight>}
-      {left && <LiquidLayoutLeft className={leftClassName}>{left}</LiquidLayoutLeft>}
-      {top && <LiquidLayoutTop className={topClassName}>{top}</LiquidLayoutTop>}
+      {bottom && <LiquidLayoutBottom className="mt-4">{bottom}</LiquidLayoutBottom>}
+      {right && <LiquidLayoutRight className="max-w-75">{right}</LiquidLayoutRight>}
+      {top && <LiquidLayoutTop>{top}</LiquidLayoutTop>}
+      {left && <LiquidLayoutLeft className="max-w-75">{left}</LiquidLayoutLeft>}
     </LiquidLayout>
   );
 };

package/dist/chunk-H6MFBIRB.cjs

@@ -1,35 +0,0 @@
-'use strict';
-
-var chunkSPRBKXGP_cjs = require('./chunk-SPRBKXGP.cjs');
-var chunkOHIB3TEN_cjs = require('./chunk-OHIB3TEN.cjs');
-var jsxRuntime = require('react/jsx-runtime');
-
-var LiquidLayoutView = ({
-  left,
-  right,
-  top,
-  bottom,
-  children,
-  className,
-  leftClassName,
-  rightClassName,
-  topClassName,
-  bottomClassName,
-  contentClassName
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(chunkSPRBKXGP_cjs.LiquidLayout, { className, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      chunkSPRBKXGP_cjs.LiquidLayoutContent,
-      {
-        className: chunkOHIB3TEN_cjs.cn("absolute flex flex-col items-center justify-center", contentClassName),
-        children
-      }
-    ),
-    bottom && /* @__PURE__ */ jsxRuntime.jsx(chunkSPRBKXGP_cjs.LiquidLayoutBottom, { className: chunkOHIB3TEN_cjs.cn("mt-4", bottomClassName), children: bottom }),
-    right && /* @__PURE__ */ jsxRuntime.jsx(chunkSPRBKXGP_cjs.LiquidLayoutRight, { className: rightClassName, children: right }),
-    left && /* @__PURE__ */ jsxRuntime.jsx(chunkSPRBKXGP_cjs.LiquidLayoutLeft, { className: leftClassName, children: left }),
-    top && /* @__PURE__ */ jsxRuntime.jsx(chunkSPRBKXGP_cjs.LiquidLayoutTop, { className: topClassName, children: top })
-  ] });
-};
-
-exports.LiquidLayoutView = LiquidLayoutView;

package/dist/chunk-PIC2EJWA.mjs

@@ -1,79 +0,0 @@
-import { cn } from './chunk-HMN4IKTG.mjs';
-import { Slot } from '@radix-ui/react-slot';
-import { jsx } from 'react/jsx-runtime';
-
-function LiquidLayout({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...props,
-      className: cn(
-        "pointer-events-none relative z-1 grid h-full w-full grid-cols-3 grid-rows-[1fr_auto] flex-col justify-between overflow-hidden p-4",
-        className
-      )
-    }
-  );
-}
-function LiquidLayoutContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { ...props, className: cn("pointer-events-auto absolute inset-0 -z-1", className) });
-}
-function LiquidLayoutLeft({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...props,
-      className: cn(
-        "order-2 col-start-1 flex flex-col items-start gap-4 overflow-y-auto [&>*]:pointer-events-auto",
-        className
-      )
-    }
-  );
-}
-function LiquidLayoutTop({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...props,
-      className: cn(
-        "order-3 col-start-2 flex items-start justify-center [&>*]:pointer-events-auto",
-        className
-      )
-    }
-  );
-}
-function LiquidLayoutRight({
-  className,
-  asChild,
-  ...props
-}) {
-  const Comp = asChild ? Slot : "div";
-  return /* @__PURE__ */ jsx(
-    Comp,
-    {
-      ...props,
-      className: cn(
-        "order-4 col-start-3 flex flex-col items-end gap-4 overflow-y-auto [&>*]:pointer-events-auto",
-        className
-      )
-    }
-  );
-}
-function LiquidLayoutBottom({
-  className,
-  asChild,
-  ...props
-}) {
-  const Comp = asChild ? Slot : "div";
-  return /* @__PURE__ */ jsx(
-    Comp,
-    {
-      ...props,
-      className: cn(
-        "order-5 col-span-3 col-start-1 flex justify-center [&>*]:pointer-events-auto",
-        className
-      )
-    }
-  );
-}
-
-export { LiquidLayout, LiquidLayoutBottom, LiquidLayoutContent, LiquidLayoutLeft, LiquidLayoutRight, LiquidLayoutTop };

package/dist/chunk-THMYDDZF.mjs

@@ -1,33 +0,0 @@
-import { LiquidLayout, LiquidLayoutContent, LiquidLayoutBottom, LiquidLayoutRight, LiquidLayoutLeft, LiquidLayoutTop } from './chunk-PIC2EJWA.mjs';
-import { cn } from './chunk-HMN4IKTG.mjs';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-var LiquidLayoutView = ({
-  left,
-  right,
-  top,
-  bottom,
-  children,
-  className,
-  leftClassName,
-  rightClassName,
-  topClassName,
-  bottomClassName,
-  contentClassName
-}) => {
-  return /* @__PURE__ */ jsxs(LiquidLayout, { className, children: [
-    /* @__PURE__ */ jsx(
-      LiquidLayoutContent,
-      {
-        className: cn("absolute flex flex-col items-center justify-center", contentClassName),
-        children
-      }
-    ),
-    bottom && /* @__PURE__ */ jsx(LiquidLayoutBottom, { className: cn("mt-4", bottomClassName), children: bottom }),
-    right && /* @__PURE__ */ jsx(LiquidLayoutRight, { className: rightClassName, children: right }),
-    left && /* @__PURE__ */ jsx(LiquidLayoutLeft, { className: leftClassName, children: left }),
-    top && /* @__PURE__ */ jsx(LiquidLayoutTop, { className: topClassName, children: top })
-  ] });
-};
-
-export { LiquidLayoutView };

package/dist/{chunk-THNR4QYH.mjs → chunk-5HS4PMUR.mjs}

@@ -1,5 +1,5 @@
-import { AuthContext } from './chunk-TC3W4VRO.mjs';
 import { getSession } from './chunk-T57VFBIC.mjs';
+import { AuthContext } from './chunk-TC3W4VRO.mjs';
 import { bearerToken } from './chunk-276VJZCV.mjs';
 import { useState, useCallback, useEffect, useMemo } from 'react';
 import { jsx } from 'react/jsx-runtime';

package/dist/{chunk-A5LCX2UQ.cjs → chunk-5PDZWPUI.cjs}

@@ -1,7 +1,7 @@
 'use strict';
 
-var chunkOHIB3TEN_cjs = require('./chunk-OHIB3TEN.cjs');
 var chunkP6DICGAV_cjs = require('./chunk-P6DICGAV.cjs');
+var chunkOHIB3TEN_cjs = require('./chunk-OHIB3TEN.cjs');
 var react = require('react');
 var reactDom = require('react-dom');
 var jsxRuntime = require('react/jsx-runtime');

package/dist/{chunk-T7XGQO7C.mjs → chunk-AKVHFPXH.mjs}

@@ -1,6 +1,6 @@
-import { useVuerAuth } from './chunk-3IVDCAFM.mjs';
 import { signInHandler } from './chunk-XGM57WPN.mjs';
 import { signOutHandler } from './chunk-CGODCUQ5.mjs';
+import { useVuerAuth } from './chunk-3IVDCAFM.mjs';
 import { useCallback, useMemo } from 'react';
 
 var useVuerMethod = () => {

package/dist/{chunk-WWGF6TBZ.mjs → chunk-AUENXQXS.mjs}

@@ -1,5 +1,5 @@
-import { cn } from './chunk-HMN4IKTG.mjs';
 import { CursorContext } from './chunk-3FR3WKI4.mjs';
+import { cn } from './chunk-HMN4IKTG.mjs';
 import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
 import { createPortal } from 'react-dom';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';

package/dist/{chunk-VBBJSIY7.cjs → chunk-G5JZGNKY.cjs}

@@ -1,7 +1,7 @@
 'use strict';
 
-var chunkG4FJGNY5_cjs = require('./chunk-G4FJGNY5.cjs');
 var chunkOHIB3TEN_cjs = require('./chunk-OHIB3TEN.cjs');
+var chunkG4FJGNY5_cjs = require('./chunk-G4FJGNY5.cjs');
 var reactSlot = require('@radix-ui/react-slot');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');

package/dist/{chunk-BEJIZ56L.mjs → chunk-PDOFOJ4P.mjs}

@@ -1,5 +1,5 @@
-import { useSyncScroll, useScrollSlave, useSyncDrag } from './chunk-SAGQV2YZ.mjs';
 import { cn } from './chunk-HMN4IKTG.mjs';
+import { useSyncScroll, useScrollSlave, useSyncDrag } from './chunk-SAGQV2YZ.mjs';
 import { Slot } from '@radix-ui/react-slot';
 import { useState, useRef, useEffect } from 'react';
 import { jsx } from 'react/jsx-runtime';

package/dist/{chunk-ESNLTYQD.cjs → chunk-T2D6PSA6.cjs}

@@ -1,7 +1,7 @@
 'use strict';
 
-var chunkZULCZ5L6_cjs = require('./chunk-ZULCZ5L6.cjs');
 var chunkWTYBTOLO_cjs = require('./chunk-WTYBTOLO.cjs');
+var chunkZULCZ5L6_cjs = require('./chunk-ZULCZ5L6.cjs');
 var chunkSVWS4AL6_cjs = require('./chunk-SVWS4AL6.cjs');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');

package/dist/{chunk-3OISKBWF.cjs → chunk-XFTKHT2M.cjs}

@@ -1,8 +1,8 @@
 'use strict';
 
-var chunk4B44SRRP_cjs = require('./chunk-4B44SRRP.cjs');
 var chunkPB4UO2NR_cjs = require('./chunk-PB4UO2NR.cjs');
 var chunk4CPB3XHE_cjs = require('./chunk-4CPB3XHE.cjs');
+var chunk4B44SRRP_cjs = require('./chunk-4B44SRRP.cjs');
 var react = require('react');
 
 var useVuerMethod = () => {