torch-glare 1.5.0 → 1.5.2

package/apps/lib/components/Button.tsx

@@ -207,7 +207,7 @@ export const buttonVariants = cva(
         // Col variants: filled solid color base, hover deepens to -secondary
         PrimeColStyle: [
           "bg-background-presentation-button-primary",
-          "text-content-presentation-global-primary-inverse",
+          "text-content-presentation-global-hover",
           "hover:bg-background-presentation-button-hover",
           "hover:text-content-presentation-global-primary-inverse",
           "focus:lg:border focus:lg:border-border-presentation-state-focus",

package/apps/lib/components/FormStepper.tsx

@@ -0,0 +1,302 @@
+"use client";
+
+import React, {
+  forwardRef,
+  HTMLAttributes,
+  ReactNode,
+  createContext,
+  useContext,
+} from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../utils/cn";
+import { Themes } from "../utils/types";
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+type FormStepperType = "default" | "success" | "negative";
+
+// ─── Context ─────────────────────────────────────────────────────────────────
+
+interface FormStepperContextValue {
+  activeStep: number;
+}
+
+const FormStepperContext = createContext<FormStepperContextValue>({
+  activeStep: 0,
+});
+
+const useFormStepperContext = () => useContext(FormStepperContext);
+
+// ─── FormStepper Root ────────────────────────────────────────────────────────
+
+interface FormStepperProps extends HTMLAttributes<HTMLDivElement> {
+  theme?: Themes;
+  activeStep?: number;
+}
+
+const FormStepper = forwardRef<HTMLDivElement, FormStepperProps>(
+  ({ className, theme, activeStep = 0, ...props }, ref) => (
+    <FormStepperContext.Provider value={{ activeStep }}>
+      <div
+        ref={ref}
+        data-theme={theme}
+        className={cn("flex items-center gap-3", className)}
+        {...props}
+      />
+    </FormStepperContext.Provider>
+  ),
+);
+FormStepper.displayName = "FormStepper";
+
+// ─── FormStep (the pill wrapper) ─────────────────────────────────────────────
+
+const formStepStyles = cva(
+  [
+    "group/form-step inline-flex items-center shrink-0",
+    "h-[28px] rounded-full p-[2px]",
+    "transition-all duration-200 ease-in-out",
+    "cursor-pointer select-none outline-none",
+  ],
+  {
+    variants: {
+      // Selection drives the pill background. Hover drives a white bg + soft
+      // shadow for non-selected pills, and a stronger shadow for selected pills.
+      selected: {
+        true: [
+          "bg-[#000000]",
+          "shadow-[0_0_32px_2px_rgba(0,0,0,0.05)]",
+          "hover:shadow-[0_0_32px_2px_rgba(0,0,0,0.2)]",
+        ],
+        false: [
+          "bg-transparent",
+          "hover:bg-[#FFFFFF]",
+          "hover:shadow-[0_0_32px_2px_rgba(0,0,0,0.05)]",
+        ],
+      },
+    },
+    defaultVariants: {
+      selected: false,
+    },
+  },
+);
+
+interface FormStepProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, "type"> {
+  index?: number;
+  type?: FormStepperType;
+  selected?: boolean;
+}
+
+const FormStep = forwardRef<HTMLDivElement, FormStepProps>(
+  (
+    { className, index = 0, type = "default", selected, children, ...props },
+    ref,
+  ) => {
+    const { activeStep } = useFormStepperContext();
+    const isSelected = selected ?? index === activeStep;
+
+    return (
+      <div
+        ref={ref}
+        data-selected={isSelected || undefined}
+        data-type={type}
+        className={cn(formStepStyles({ selected: isSelected }), className)}
+        {...props}
+      >
+        {React.Children.map(children, (child) => {
+          if (!React.isValidElement(child)) return child;
+          return React.cloneElement(child as React.ReactElement<any>, {
+            _selected: isSelected,
+            _type: type,
+            _index: index,
+          });
+        })}
+      </div>
+    );
+  },
+);
+FormStep.displayName = "FormStep";
+
+// ─── FormStepIndicator (circle badge) ───────────────────────────────────────
+
+const formStepIndicatorStyles = cva(
+  [
+    "relative inline-flex items-center justify-center shrink-0",
+    "w-[24px] h-[24px] text-[14px]",
+    "rounded-full",
+    "transition-colors duration-200 ease-in-out",
+    "typography-body-medium-medium",
+  ],
+  {
+    variants: {
+      type: {
+        default: ["border-[3px]"],
+        success: ["bg-[#047854] text-[#FFFFFF]", "border border-transparent"],
+        negative: ["bg-[#E30C30] text-[#FFFFFF]", "border border-transparent"],
+      },
+      // Only meaningful for type=default. Selected = filled blue, otherwise
+      // ring color comes from the resting/hover compound variants below.
+      selected: {
+        true: "",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      type: "default",
+      selected: false,
+    },
+    compoundVariants: [
+      // Default type, not selected: gray ring + gray number at rest;
+      // hover (driven by parent .group/form-step) flips ring blue, number black.
+      {
+        type: "default",
+        selected: false,
+        className: [
+          "bg-transparent border-[#A0A0A0] text-[#626467]",
+          "group-hover/form-step:border-[#004699]",
+          "group-hover/form-step:text-[#000000]",
+        ],
+      },
+      // Default type, selected: solid blue fill, white number, no ring color.
+      {
+        type: "default",
+        selected: true,
+        className: ["bg-[#005ECC] border-transparent text-[#FFFFFF]"],
+      },
+    ],
+  },
+);
+
+const formStepIndicatorBadgeStyles = cva(
+  [
+    "absolute -top-[7px]",
+    "w-[15px] h-[15px]",
+    "rounded-full",
+    "inline-flex items-center justify-center",
+    "border border-[#F0F0F0]",
+    "[&_i]:leading-none [&_i]:flex [&_i]:text-[11px]",
+    // LTR: badge top-right; RTL: badge top-left
+    "ltr:right-[-4px] rtl:left-[-4px]",
+  ],
+  {
+    variants: {
+      type: {
+        success: "bg-[#047854] text-[#FFFFFF]",
+        negative: "bg-[#E30C30] text-[#FFFFFF]",
+      },
+    },
+  },
+);
+
+interface FormStepIndicatorProps extends HTMLAttributes<HTMLDivElement> {
+  badgeIcon?: ReactNode;
+  _selected?: boolean;
+  _type?: FormStepperType;
+  _index?: number;
+}
+
+const FormStepIndicator = forwardRef<HTMLDivElement, FormStepIndicatorProps>(
+  (
+    {
+      className,
+      badgeIcon,
+      _selected,
+      _type = "default",
+      _index = 0,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const showBadge = _type === "success" || _type === "negative";
+    const defaultBadgeIcon =
+      _type === "success" ? (
+        <i className="ri-check-line" />
+      ) : (
+        <i className="ri-information-fill" />
+      );
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          formStepIndicatorStyles({ type: _type, selected: !!_selected }),
+          className,
+        )}
+        {...props}
+      >
+        {children ?? _index + 1}
+        {showBadge && (
+          <span
+            className={cn(
+              formStepIndicatorBadgeStyles({
+                type: _type as "success" | "negative",
+              }),
+            )}
+            aria-hidden
+          >
+            {badgeIcon ?? defaultBadgeIcon}
+          </span>
+        )}
+      </div>
+    );
+  },
+);
+FormStepIndicator.displayName = "FormStepIndicator";
+
+// ─── FormStepLabel ──────────────────────────────────────────────────────────
+
+const formStepLabelStyles = cva(
+  [
+    "typography-body-small-medium whitespace-nowrap",
+    "transition-[padding,color] duration-200 ease-in-out",
+    // At rest the label sits 6px from the circle. On hover (parent pill
+    // hovered) the gap grows to 9px — matches figma onHover/onSelect-Hoverd.
+    // The outer edge keeps a constant 12px.
+    "ltr:pl-[6px] ltr:pr-[12px] rtl:pr-[6px] rtl:pl-[12px]",
+    "group-hover/form-step:ltr:pl-[9px] group-hover/form-step:rtl:pr-[9px]",
+  ],
+  {
+    variants: {
+      selected: {
+        true: "text-[#FFFFFF]",
+        false: "text-[#000000]",
+      },
+    },
+    defaultVariants: {
+      selected: false,
+    },
+  },
+);
+
+interface FormStepLabelProps extends HTMLAttributes<HTMLDivElement> {
+  _selected?: boolean;
+  _type?: FormStepperType;
+  _index?: number;
+}
+
+const FormStepLabel = forwardRef<HTMLDivElement, FormStepLabelProps>(
+  ({ className, _selected, _type: _t, _index: _i, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        formStepLabelStyles({ selected: !!_selected }),
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+FormStepLabel.displayName = "FormStepLabel";
+
+// ─── Exports ─────────────────────────────────────────────────────────────────
+
+export {
+  FormStepper,
+  FormStep,
+  FormStepIndicator,
+  FormStepLabel,
+  formStepStyles,
+  formStepIndicatorStyles,
+  formStepLabelStyles,
+};

package/apps/lib/components/LinkButton.tsx

@@ -11,8 +11,8 @@ export const linkButtonStyles = cva(
     "flex items-center justify-center",
     "rounded-[6px]",
     "p-[2px]",
-    "text-content-presentation-action-link",
-    "hover:bg-background-presentation-action-link-hover hover:px-[2px]",
+    "text-content-presentation-global-link",
+    "hover:bg-background-presentation-button-link-hover hover:px-[2px]",
     "transition-all duration-250 ease-in-out",
     "group", // Add group class here
   ],
@@ -26,17 +26,23 @@ export const linkButtonStyles = cva(
     defaultVariants: {
       size: "S",
     },
-  }
+  },
 );
 
 interface Props extends HTMLAttributes<HTMLAnchorElement | HTMLSpanElement> {
   size?: "S" | "M"; // this props will change the button style size see on figma design file
-  theme?: Themes
-  asChild?: boolean
-  href?: string
+  theme?: Themes;
+  asChild?: boolean;
+  href?: string;
 }
 
-export const LinkButton: React.FC<Props> = ({ theme, className, size = "S", asChild, ...props }) => {
+export const LinkButton: React.FC<Props> = ({
+  theme,
+  className,
+  size = "S",
+  asChild,
+  ...props
+}) => {
   const Component = asChild ? Slot : props.href ? "a" : "span";
   return (
     <Component
@@ -46,25 +52,27 @@ export const LinkButton: React.FC<Props> = ({ theme, className, size = "S", asCh
         linkButtonStyles({
           size: size,
         }),
-        className
+        className,
       )}
     >
-      <div className="px-[3px] whitespace-nowrap break-keep">{props.children}</div>
+      <div className="px-[3px] whitespace-nowrap break-keep">
+        {props.children}
+      </div>
       <div
         className={cn(
-          "rounded-[4px]",
+          "rounded-[4px] overflow-hidden",
           "bg-background-presentation-state-information-primary",
           "transition-all duration-[100] ease-in-out",
-          "h-0 w-0  p-0",
+          "h-0 w-0 p-0",
           "opacity-0 group-hover:opacity-100 group-hover:p-[3px]",
           {
             "group-hover:w-[20px] group-hover:h-[20px]": size === "S",
             "group-hover:w-[22px] group-hover:h-[22px]": size === "M",
-          }
+          },
         )}
       >
         <Arrow
-          className={cn("rtl:rotate-[260deg]", {
+          className={cn("w-0 h-0 rtl:rotate-[260deg]", {
             "group-hover:w-[14px] group-hover:h-[14px]": size === "S",
             "group-hover:w-[16px] group-hover:h-[16px]": size === "M",
           })}

package/apps/lib/components/SectionBlock.tsx

@@ -21,11 +21,17 @@ const titleBadge = cva(
   },
 );
 
-export type SectionColor = NonNullable<VariantProps<typeof titleBadge>["color"]>;
+export type SectionColor = NonNullable<
+  VariantProps<typeof titleBadge>["color"]
+>;
 
-export interface SectionBlockProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+export interface SectionBlockProps extends Omit<
+  HTMLAttributes<HTMLDivElement>,
+  "title"
+> {
   color?: SectionColor;
   title?: ReactNode;
+  icon?: ReactNode;
   containerClassName?: string;
   headerClassName?: string;
   bodyClassName?: string;
@@ -41,6 +47,7 @@ export const SectionBlock = forwardRef<HTMLDivElement, SectionBlockProps>(
       containerClassName,
       headerClassName,
       bodyClassName,
+      icon,
       ...props
     },
     ref,
@@ -49,19 +56,33 @@ export const SectionBlock = forwardRef<HTMLDivElement, SectionBlockProps>(
       <div
         ref={ref}
         className={cn(
-          "flex w-[1100px] pt-[6px] pb-[24px] px-0 flex-col rounded-[16px] bg-background-presentation-form-base shadow-[0_0_32px_2px_rgba(0,0,0,0.05)]",
+          "flex  w-full pt-[6px] pb-[24px] px-0 flex-col rounded-[16px] bg-background-presentation-form-base shadow-[0_0_32px_2px_rgba(0,0,0,0.05)]",
           className,
           containerClassName,
         )}
         {...props}
       >
         {title && (
-          <div className={cn("flex px-[6px] flex-col gap-[10px]", headerClassName)}>
-            <div className={cn(titleBadge({ color }))}>{title}</div>
+          <div
+            className={cn("flex px-[6px] flex-col gap-[10px]", headerClassName)}
+          >
+            <div className={cn(titleBadge({ color }))}>
+              <span className="flex items-center gap-1.5">
+                {icon}
+                {title}
+              </span>
+            </div>
           </div>
         )}
-        <div className={cn("flex px-[42px] flex-col gap-[2px]", bodyClassName)}>
-          {children}
+        <div
+          className={cn(
+            "flex px-[42px] flex-col gap-[2px] px-[42px]",
+            bodyClassName,
+          )}
+        >
+          <div className="flex w-full divide-y divide-gray-300 min-w-[300px]  flex-col items-start ">
+            {children}
+          </div>
         </div>
       </div>
     );

package/apps/lib/components/Table.tsx

@@ -1,4 +1,4 @@
-'use client'
+"use client";
 import * as React from "react";
 import { cn } from "../utils/cn";
 import { cva, VariantProps } from "class-variance-authority";
@@ -7,8 +7,6 @@ import { Button } from "./Button";
 import { Checkbox } from "./Checkbox";
 import { useResize } from "../hooks/useResize";
 
-
-
 type TableHeadVariantsProps = VariantProps<typeof tableHeadVariants>;
 
 const Table = React.forwardRef<
@@ -20,9 +18,11 @@ const Table = React.forwardRef<
   <table
     data-theme={theme}
     ref={ref}
-    className={cn("overflow-hidden w-auto [border-collapse:separate] border-spacing-0", className)}
+    className={cn(
+      "overflow-hidden w-auto [border-collapse:separate] border-spacing-0",
+      className,
+    )}
     {...props}
-
   >
     {props.children}
   </table>
@@ -35,10 +35,7 @@ const TableHeader = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <thead
     ref={ref}
-    className={cn(
-      "shadow-[0px_4px_8px_0px_rgba(0,0,0,0.15)]",
-      className
-    )}
+    className={cn("shadow-[0px_4px_8px_0px_rgba(0,0,0,0.15)]", className)}
     {...props}
   />
 ));
@@ -70,29 +67,32 @@ const TableRow = React.forwardRef<
 >(({ className, state = "", ...props }, ref) => (
   <tr
     ref={ref}
-    className={cn([
-      "[&_button]:hover:opacity-100 hover:bg-background-presentation-table-row-hover transition-colors",
-      {
-        "bg-background-presentation-table-row-negative border-border-presentation-badge-red":
-          state === "delete",
-      },
-      {
-        "bg-background-presentation-table-row-information border-border-presentation-badge-navy":
-          state === "update",
-      },
-      {
-        "bg-background-presentation-table-row-success border-border-presentation-badge-green":
-          state === "add",
-      },
-      {
-        "bg-background-presentation-table-row-selected border-t border-[2px] border-border-presentation-table-selected":
-          state === "selected",
-      },
-      {
-        "bg-background-presentation-table-row-hover border-t border-[2px] border-border-presentation-table-dropdown":
-          state === "open",
-      },
-    ], className)}
+    className={cn(
+      [
+        "[&_button]:hover:opacity-100 hover:bg-background-presentation-table-row-hover transition-colors",
+        {
+          "bg-background-presentation-table-row-negative border-border-presentation-badge-red":
+            state === "delete",
+        },
+        {
+          "bg-background-presentation-table-row-information border-border-presentation-badge-navy":
+            state === "update",
+        },
+        {
+          "bg-background-presentation-table-row-success border-border-presentation-badge-green":
+            state === "add",
+        },
+        {
+          "bg-background-presentation-table-row-selected border-t border-[2px] border-border-presentation-table-selected":
+            state === "selected",
+        },
+        {
+          "bg-background-presentation-table-row-hover border-t border-[2px] border-border-presentation-table-dropdown":
+            state === "open",
+        },
+      ],
+      className,
+    )}
     {...props}
   >
     {props.children}
@@ -103,16 +103,16 @@ TableRow.displayName = "TableRow";
 const TableHead = React.forwardRef<
   HTMLTableCellElement,
   React.ThHTMLAttributes<HTMLTableCellElement> &
-  TableHeadVariantsProps &
-  React.ButtonHTMLAttributes<HTMLButtonElement> & {
-    sortType?: "asc" | "desc" | undefined;
-    onSort?: () => void;
-    isDummy?: boolean;
-  }
+    TableHeadVariantsProps &
+    React.ButtonHTMLAttributes<HTMLButtonElement> & {
+      sortType?: "asc" | "desc" | undefined;
+      onSort?: () => void;
+      isDummy?: boolean;
+    }
 >(
   (
     { className, size = "M", disabled, sortType, onSort, isDummy, ...props },
-    forwardedRef
+    forwardedRef,
   ) => {
     const headRef = useRef<any>(null);
     const { width, handleStartResize } = useResize(headRef);
@@ -136,7 +136,7 @@ const TableHead = React.forwardRef<
           className={cn(
             tableHeadVariants({ size, disabled, isDummy }),
             { "min-w-[100px]": !isDummy },
-            className
+            className,
           )}
         >
           <div
@@ -146,10 +146,15 @@ const TableHead = React.forwardRef<
             })}
           >
             {props.children}
-            {isDummy || !onSort ? null : <SortButton onSort={onSort} sortType={sortType} />}
+            {isDummy || !onSort ? null : (
+              <SortButton onSort={onSort} sortType={sortType} />
+            )}
           </div>
         </div>
-        <button disabled={isDummy} className="absolute top-[50%] translate-y-[-50%] right-[-1px] rtl:left-[-1px] rtl:right-[unset] h-[20px] w-[2px] rounded-full bg-border-presentation-action-primary">
+        <button
+          disabled={isDummy}
+          className="absolute top-[50%] translate-y-[-50%] right-[-1px] rtl:left-[-1px] rtl:right-[unset] h-[20px] w-[2px] rounded-full bg-border-presentation-action-primary"
+        >
           <ResizeIcon
             className={cn({ "!opacity-0 cursor-default": isDummy })}
             onMouseDown={handleStartResize}
@@ -158,7 +163,7 @@ const TableHead = React.forwardRef<
         </button>
       </th>
     );
-  }
+  },
 );
 TableHead.displayName = "TableHead";
 
@@ -179,7 +184,7 @@ const TableCell = React.forwardRef<
         "border-r  border-b border-border-presentation-table-header px-1 rtl:border-l rtl:border-r-0",
         "break-all",
       ],
-      className
+      className,
     )}
     {...props}
   >
@@ -189,7 +194,9 @@ const TableCell = React.forwardRef<
         "[mask-image:linear-gradient(to_right,black_0%,black_0%,black_75%,transparent_100%)]",
         "rtl:[mask-image:linear-gradient(to_left,black_0%,black_0%,black_75%,transparent_100%)]",
         "[&:has(input)]:[mask-image:none]",
-        { "min-w-fit justify-center": isDummy }, childrenClassName)}
+        { "min-w-fit justify-center": isDummy },
+        childrenClassName,
+      )}
     >
       {props.children}
     </div>
@@ -230,15 +237,11 @@ const TableFooterButton = React.forwardRef<
   }>
 >(({ children, className, ...props }, ref) => {
   return (
-    <TableRow
-      className={cn(
-        "h-[40px] overflow-hidden",
-        className
-      )}
-    >
+    <TableRow className={cn("h-[40px] overflow-hidden", className)}>
       <TableCell
         className={
-          "border-t-2 border-b-2 border-transparent hover:border-border-presentation-table-action-hover  hover:bg-background-presentation-table-acton-hover"}
+          "border-t-2 border-b-2 border-transparent hover:border-border-presentation-table-action-hover  hover:bg-background-presentation-table-acton-hover"
+        }
         colSpan={100}
       >
         <button
@@ -246,16 +249,17 @@ const TableFooterButton = React.forwardRef<
           {...props}
           className={cn(
             "overflow-hidden w-full flex items-center justify-start gap-2 typography-body-medium-semibold [&_i]:text-[20px]",
-            className
+            className,
           )}
-        >{children}</button>
+        >
+          {children}
+        </button>
       </TableCell>
     </TableRow>
   );
 });
 TableFooterButton.displayName = "TableFooterButton";
 
-
 const SubTableButton = ({
   isActive,
   className,
@@ -273,7 +277,7 @@ const SubTableButton = ({
           "hover:bg-transparent hover:text-black focus:bg-transparent focus:text-black active:bg-transparent active:text-black":
             dummy,
         },
-        className
+        className,
       )}
       variant={"PrimeStyle"}
       buttonType={"icon"}
@@ -283,7 +287,7 @@ const SubTableButton = ({
           "ri-arrow-right-s-line",
           "rtl:rotate-180",
           "transition-transform duration-200",
-          { "rotate-90": isActive }
+          { "rotate-90": isActive },
         )}
       ></i>
     </Button>
@@ -308,7 +312,10 @@ const ResizeIcon = (props: any) => {
   return (
     <svg
       {...props}
-      className={cn("z-50 cursor-col-resize absolute top-[50%] right-[50%] translate-x-[50%] translate-y-[-50%] opacity-0 hover:opacity-100 transition-opacity duration-200", props.className)}
+      className={cn(
+        "z-50 cursor-col-resize absolute top-[50%] right-[50%] translate-x-[50%] translate-y-[-50%] opacity-0 hover:opacity-100 transition-opacity duration-200",
+        props.className,
+      )}
       width="8"
       height="32"
       viewBox="0 0 8 40"
@@ -351,9 +358,6 @@ const SortButton = ({
   );
 };
 
-
-
-
 const tableHeadVariants = cva(
   [
     "text-content-presentation-global-primary",
@@ -365,7 +369,7 @@ const tableHeadVariants = cva(
     "text-start",
     "bg-transparent",
     "hover:bg-background-presentation-action-hover",
-    "hover:text-content-presentation-action-hover",
+    "hover:text-content-presentation-global-hover",
     "transition-[background-color,color]",
     "duration-200",
     "rounded-[3px]",
@@ -394,5 +398,5 @@ const tableHeadVariants = cva(
         size: "M",
       },
     },
-  }
-);
+  },
+);

package/apps/lib/layouts/FieldSection.tsx

@@ -32,12 +32,12 @@ export function FieldSection({
       {...props}
       data-theme={theme}
       className={cn(
-        "grid  border-t border-border-presentation-global-primary py-[16px] px-[12px] w-full max-w-[1200px] min-w-[0px] ",
+        "grid py-[16px] px-[12px] w-full max-w-[1200px] min-w-[0px] ",
         direction === "vertical" && "grid-rows-[auto_1fr] gap-[12px]",
         direction === "horizontal" && "grid-cols-[350px_1fr] gap-[24px]",
         direction === "flexible" &&
-        "grid-rows-[auto_1fr] gap-[12px] lg:grid-cols-[350px_1fr] lg:grid-rows-[1fr] lg:gap-[24px]",
-        className
+          "grid-rows-[auto_1fr] gap-[12px] lg:grid-cols-[350px_1fr] lg:grid-rows-[1fr] lg:gap-[24px]",
+        className,
       )}
     >
       {/* Fixed width section for labels */}
@@ -58,7 +58,9 @@ export function FieldSection({
       </div>
 
       {/* Flexible section that takes up the remaining space */}
-      <div className="grid grid-cols-1 place-items-end gap-[12px]">{children}</div>
+      <div className="grid grid-cols-1 place-items-end gap-[12px]">
+        {children}
+      </div>
     </section>
   );
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "torch-glare",
-  "version": "1.5.0",
+  "version": "1.5.2",
   "type": "module",
   "license": "MIT",
   "files": [