@fernir2/saas-kit 0.0.190 → 0.0.199

package/packages/level2/fd-component-toolbox/datepicker/DatePicker.js

@@ -10,7 +10,7 @@ import { Button } from '../button/Button.js';
 import { Calendar } from '../calendar/Calendar.js';
 import { Icon, iconSizes, iconNames } from '../icon/Icon.js';
 import { cn } from '../../../fd-toolbox/lib/utils.js';
-import { localizedFormat, updateHours, updateMinutes, syncDateState, processLabelState, updateDateValue, onDatePickerOpenChange, onDateResetHandler, onDateChangeHandler, onTimeValueChange } from './DatePicker.funcs.js';
+import { syncDateState, processLabelState, updateDateValue, onDatePickerOpenChange, onDateResetHandler, onDateChangeHandler, onTimeValueChange, localizedFormat, updateHours, updateMinutes } from './DatePicker.funcs.js';
 import { LabelAnimation } from '../animation/LabelAnimation.js';
 import { useAsyncEffect } from '../../../fd-toolbox/hooks/use-async-effect.js';
 import { calendarCaptionLayout } from '../calendar/calendar-constants.js';
@@ -20,115 +20,6 @@ var __name = (target, value) => __defProp(target, "name", {
   value,
   configurable: true
 });
-function DatePickerTrigger({
-  label,
-  skipAnimationOnce,
-  dateValue,
-  shouldLabelAnimate,
-  disabled,
-  readOnly,
-  hovered,
-  setIsHovered,
-  onReset,
-  variant,
-  labelProp,
-  showFullLabel
-}) {
-  return /* @__PURE__ */jsxs("div", {
-    className: "w-full",
-    children: [label && /* @__PURE__ */jsx("div", {
-      className: cn("relative z-10 transition-opacity duration-300", dateValue ? "opacity-100" : "opacity-0"),
-      children: /* @__PURE__ */jsx(LabelAnimation, {
-        variant: "float",
-        label,
-        shouldAnimate: shouldLabelAnimate ?? true,
-        skipAnimationOnce
-      })
-    }, Number(skipAnimationOnce)), /* @__PURE__ */jsx(Tooltip.Provider, {
-      children: /* @__PURE__ */jsxs(Tooltip.Root, {
-        children: [/* @__PURE__ */jsx(Tooltip.Trigger, {
-          className: "w-full",
-          render: props => /* @__PURE__ */jsxs("div", {
-            ...props,
-            className: "border-input hover:bg-background relative w-full",
-            onMouseEnter: () => setIsHovered(true),
-            onMouseLeave: () => setIsHovered(false),
-            style: {
-              cursor: disabled ? "not-allowed" : "default"
-            },
-            children: [/* @__PURE__ */jsx(Button, {
-              onClick: onReset,
-              variant: "icon",
-              className: cn("peer absolute top-1/2 right-2.5 size-4 -translate-y-1/2 p-0", !!dateValue && hovered && !disabled && !readOnly ? "animate-fade-in" : "animate-fade-out"),
-              onMouseEnter: () => setIsHovered(true),
-              children: /* @__PURE__ */jsx(Icon, {
-                name: iconNames.cross,
-                size: iconSizes.small
-              })
-            }), /* @__PURE__ */jsxs(Button, {
-              variant: variant ?? "float",
-              className: "peer-hover:bg-accent peer-hover:text-accent-foreground w-full justify-start gap-2 hover:disabled:cursor-not-allowed",
-              disabled,
-              children: [/* @__PURE__ */jsx(Icon, {
-                name: iconNames.calendar,
-                className: "mr-2"
-              }), /* @__PURE__ */jsx("span", {
-                className: "text-muted-foreground mr-1",
-                children: localizedFormat(label, dateValue ?? void 0)
-              })]
-            })]
-          })
-        }), /* @__PURE__ */jsx(Tooltip.Portal, {
-          hidden: showFullLabel,
-          children: /* @__PURE__ */jsx(Tooltip.Positioner, {
-            children: /* @__PURE__ */jsx("p", {
-              className: "bg-popover mb-1.5 rounded-md border px-3 py-1.5 text-sm shadow-md",
-              children: labelProp ?? ""
-            })
-          })
-        })]
-      })
-    })]
-  });
-}
-__name(DatePickerTrigger, "DatePickerTrigger");
-function DatePickerTimeInputs({
-  timeValue,
-  onTimeUpdate,
-  onDateValueChange,
-  dateValue,
-  disabled,
-  readOnly
-}) {
-  return /* @__PURE__ */jsxs("div", {
-    className: "text-primary flex",
-    children: [/* @__PURE__ */jsx(Input, {
-      showClearIcon: false,
-      min: "0",
-      max: "23",
-      type: "number",
-      className: "w-14",
-      value: timeValue.hours.toString() ?? "",
-      onChange: hoursValue => updateHours(parseInt(hoursValue), timeValue, onTimeUpdate, onDateValueChange, dateValue),
-      disabled,
-      readOnly
-    }), /* @__PURE__ */jsx("span", {
-      className: "text-lg",
-      children: ":"
-    }), /* @__PURE__ */jsx(Input, {
-      showClearIcon: false,
-      min: "0",
-      max: "59",
-      type: "number",
-      className: "w-14",
-      value: timeValue.minutes.toString() ?? "",
-      onChange: minutesValue => updateMinutes(parseInt(minutesValue), timeValue, onTimeUpdate, onDateValueChange, dateValue),
-      disabled,
-      readOnly
-    })]
-  });
-}
-__name(DatePickerTimeInputs, "DatePickerTimeInputs");
 function DatePicker(t0) {
   const $ = c(18);
   const {
@@ -289,5 +180,114 @@ function DatePicker(t0) {
   });
 }
 __name(DatePicker, "DatePicker");
+function DatePickerTrigger({
+  label,
+  skipAnimationOnce,
+  dateValue,
+  shouldLabelAnimate,
+  disabled,
+  readOnly,
+  hovered,
+  setIsHovered,
+  onReset,
+  variant,
+  labelProp,
+  showFullLabel
+}) {
+  return /* @__PURE__ */jsxs("div", {
+    className: "w-full",
+    children: [label && /* @__PURE__ */jsx("div", {
+      className: cn("relative z-10 transition-opacity duration-300", dateValue ? "opacity-100" : "opacity-0"),
+      children: /* @__PURE__ */jsx(LabelAnimation, {
+        variant: "float",
+        label,
+        shouldAnimate: shouldLabelAnimate ?? true,
+        skipAnimationOnce
+      })
+    }, Number(skipAnimationOnce)), /* @__PURE__ */jsx(Tooltip.Provider, {
+      children: /* @__PURE__ */jsxs(Tooltip.Root, {
+        children: [/* @__PURE__ */jsx(Tooltip.Trigger, {
+          className: "w-full",
+          render: props => /* @__PURE__ */jsxs("div", {
+            ...props,
+            className: "border-input hover:bg-background relative w-full",
+            onMouseEnter: () => setIsHovered(true),
+            onMouseLeave: () => setIsHovered(false),
+            style: {
+              cursor: disabled ? "not-allowed" : "default"
+            },
+            children: [/* @__PURE__ */jsx(Button, {
+              onClick: onReset,
+              variant: "icon",
+              className: cn("peer absolute top-1/2 right-2.5 size-4 -translate-y-1/2 p-0", !!dateValue && hovered && !disabled && !readOnly ? "animate-fade-in" : "animate-fade-out"),
+              onMouseEnter: () => setIsHovered(true),
+              children: /* @__PURE__ */jsx(Icon, {
+                name: iconNames.cross,
+                size: iconSizes.small
+              })
+            }), /* @__PURE__ */jsxs(Button, {
+              variant: variant ?? "float",
+              className: "peer-hover:bg-accent peer-hover:text-accent-foreground w-full justify-start gap-2 hover:disabled:cursor-not-allowed",
+              disabled,
+              children: [/* @__PURE__ */jsx(Icon, {
+                name: iconNames.calendar,
+                className: "mr-2"
+              }), /* @__PURE__ */jsx("span", {
+                className: "text-muted-foreground mr-1",
+                children: localizedFormat(label, dateValue ?? void 0)
+              })]
+            })]
+          })
+        }), /* @__PURE__ */jsx(Tooltip.Portal, {
+          hidden: showFullLabel,
+          children: /* @__PURE__ */jsx(Tooltip.Positioner, {
+            children: /* @__PURE__ */jsx("p", {
+              className: "bg-popover mb-1.5 rounded-md border px-3 py-1.5 text-sm shadow-md",
+              children: labelProp ?? ""
+            })
+          })
+        })]
+      })
+    })]
+  });
+}
+__name(DatePickerTrigger, "DatePickerTrigger");
+function DatePickerTimeInputs({
+  timeValue,
+  onTimeUpdate,
+  onDateValueChange,
+  dateValue,
+  disabled,
+  readOnly
+}) {
+  return /* @__PURE__ */jsxs("div", {
+    className: "text-primary flex",
+    children: [/* @__PURE__ */jsx(Input, {
+      showClearIcon: false,
+      min: "0",
+      max: "23",
+      type: "number",
+      className: "w-14",
+      value: timeValue.hours.toString() ?? "",
+      onChange: hoursValue => updateHours(parseInt(hoursValue), timeValue, onTimeUpdate, onDateValueChange, dateValue),
+      disabled,
+      readOnly
+    }), /* @__PURE__ */jsx("span", {
+      className: "text-lg",
+      children: ":"
+    }), /* @__PURE__ */jsx(Input, {
+      showClearIcon: false,
+      min: "0",
+      max: "59",
+      type: "number",
+      className: "w-14",
+      value: timeValue.minutes.toString() ?? "",
+      onChange: minutesValue => updateMinutes(parseInt(minutesValue), timeValue, onTimeUpdate, onDateValueChange, dateValue),
+      disabled,
+      readOnly
+    })]
+  });
+}
+__name(DatePickerTimeInputs, "DatePickerTimeInputs");
 
 export { DatePicker };

package/packages/level2/fd-component-toolbox/dialog/YesOrNoDialog.funcs.js

@@ -1,4 +1,4 @@
 'use strict';
-var __defProp=Object['defineProperty'],__name=(_0x406dae,_0x252f47)=>__defProp(_0x406dae,'name',{'value':_0x252f47,'configurable':!![]});function onYesClick(_0x5d01ec,_0x2c3b32){_0x5d01ec?.(!![]),_0x2c3b32?.(![]);}__name(onYesClick,'onYesClick');
+var __defProp=Object['defineProperty'],__name=(_0x3488d1,_0x4d6424)=>__defProp(_0x3488d1,'name',{'value':_0x4d6424,'configurable':!![]});function onYesClick(_0x22ae4f,_0x580570){_0x22ae4f?.(!![]),_0x580570?.(![]);}__name(onYesClick,'onYesClick');
 
 export { onYesClick };

package/packages/level2/fd-component-toolbox/dynamic-layout/Dynamic.d.ts

@@ -22,4 +22,4 @@ import { DynamicProps } from "./dynamic-component-props";
         ...
  *  </Dynamic>
  */
-export declare function Dynamic({ children }: DynamicProps): import("../../../../lib").ElementNode;
+export declare function Dynamic({ children }: DynamicProps): import("../../../../lib/package").ElementNode;

package/packages/level2/fd-component-toolbox/dynamic-layout/DynamicLayoutDragAndDrop.funcs.js

@@ -1,6 +1,6 @@
 'use strict';
 import { isObject } from '../../../fd-toolbox/types/ensure-type.js';
 
-var __defProp=Object['defineProperty'],__name=(_0x4e2693,_0x328954)=>__defProp(_0x4e2693,'name',{'value':_0x328954,'configurable':!![]});const resizeEvent='resize';function generateLayout(_0x557e04,_0x3dd64d,_0x496fbf){if(!_0x496fbf)return;let _0x2c7b6f=Array['isArray'](_0x496fbf)?_0x496fbf:[_0x496fbf];_0x3dd64d(_0x2c7b6f['map']((_0x2bf00d,_0xaded17)=>createLayoutElement(_0x2bf00d,_0xaded17,_0x557e04)));}__name(generateLayout,'generateLayout');const childrenProperty='children',propsProperty='props';function getProps(_0x2acedd){let _0x4da48d={};if(!_0x2acedd)return _0x4da48d;if(isObject(_0x2acedd)&&propsProperty in _0x2acedd&&isObject(_0x2acedd['props'])){const _0x591234=_0x2acedd['props'];if(childrenProperty in _0x591234&&isObject(_0x591234['children'])){const _0x5453c3=_0x591234['children'];if(propsProperty in _0x5453c3&&isObject(_0x5453c3['props']))return _0x4da48d=_0x5453c3['props'],_0x4da48d;}}return _0x4da48d;}__name(getProps,'getProps');function onLayoutChange(_0x4536c3,_0x5b5e8a){const _0x1687b2=_0x4536c3['xxs'];_0x5b5e8a(_0x34d11f=>_0x34d11f['map']((_0x146d44,_0x5aeca4)=>({..._0x1687b2[_0x5aeca4],'element':_0x146d44['element']})));}__name(onLayoutChange,'onLayoutChange');function setupRowHeightListener(_0x172e5d,_0x95f083,_0x2765d2){function _0x329c08(){const _0x376555=document['querySelector']('.react-grid-layout')?.['clientWidth'];if(_0x376555){const _0x3e0019=(_0x376555-(_0x172e5d-(0xe66+0x3b7*0x3+-0x198a))*_0x2765d2[0x158b+0x7*-0x3a9+-0x3a*-0x12])/_0x172e5d;_0x95f083(_0x3e0019);}}return __name(_0x329c08,'calculateRowHeight'),_0x329c08(),window['addEventListener'](resizeEvent,_0x329c08),()=>{window['removeEventListener'](resizeEvent,_0x329c08);};}__name(setupRowHeightListener,'setupRowHeightListener');function createLayoutElement(_0x54173e,_0x53195c,_0x1df222){const _0x275173=getProps(_0x54173e),_0x456746={'x':_0x275173['defaultX']??_0x53195c%(-0x797*0x1+-0x1*-0xdbd+0x1*-0x621),'y':_0x275173['defaultY']??-0xd59+0x9ff+0x21*0x1a,'w':_0x275173['defaultWidth']??_0x275173['minWidth']??-0x1095*0x1+-0x1*0x7ff+-0xcb*-0x1f,'h':_0x275173['defaultHeight']??_0x275173['minHeight']??0x1*-0x2702+-0x11d*0x17+-0x6*-0xac5,'i':_0x275173['id']??_0x53195c['toString'](),'maxH':_0x275173['maxHeight']??Math['round'](_0x1df222*(-0x796+0x502+0x296*0x1)/(0x1*-0x3fe+-0x11b2+-0x37*-0x65)),'minH':_0x275173['minHeight'],..._0x275173,'element':_0x54173e};return _0x456746;}__name(createLayoutElement,'createLayoutElement');
+var __defProp=Object['defineProperty'],__name=(_0x143c47,_0x5828a1)=>__defProp(_0x143c47,'name',{'value':_0x5828a1,'configurable':!![]});const resizeEvent='resize';function generateLayout(_0x832a1,_0x2448a6,_0x5563eb){if(!_0x5563eb)return;let _0x4f738c=Array['isArray'](_0x5563eb)?_0x5563eb:[_0x5563eb];_0x2448a6(_0x4f738c['map']((_0x24fddc,_0x4f6996)=>createLayoutElement(_0x24fddc,_0x4f6996,_0x832a1)));}__name(generateLayout,'generateLayout');function onLayoutChange(_0x51bc00,_0x273fb7){const _0x2755a3=_0x51bc00['xxs'];_0x273fb7(_0x178bfa=>_0x178bfa['map']((_0x91b47f,_0x35295d)=>({..._0x2755a3[_0x35295d],'element':_0x91b47f['element']})));}__name(onLayoutChange,'onLayoutChange');function setupRowHeightListener(_0x4a8285,_0x4c4dba,_0x157c79){function _0xac4676(){const _0xd1282=document['querySelector']('.react-grid-layout')?.['clientWidth'];if(_0xd1282){const _0xd99f0=(_0xd1282-(_0x4a8285-(-0xd7d*-0x2+-0x59*-0xf+-0x2030))*_0x157c79[-0x1312*0x1+0x25d+0x10b5])/_0x4a8285;_0x4c4dba(_0xd99f0);}}return __name(_0xac4676,'calculateRowHeight'),_0xac4676(),window['addEventListener'](resizeEvent,_0xac4676),()=>{window['removeEventListener'](resizeEvent,_0xac4676);};}__name(setupRowHeightListener,'setupRowHeightListener');const childrenProperty='children',propsProperty='props';function getProps(_0x28fbdc){let _0x1e7ca1={};if(!_0x28fbdc)return _0x1e7ca1;if(isObject(_0x28fbdc)&&propsProperty in _0x28fbdc&&isObject(_0x28fbdc['props'])){const _0x5ae491=_0x28fbdc['props'];if(childrenProperty in _0x5ae491&&isObject(_0x5ae491['children'])){const _0x59e9bc=_0x5ae491['children'];if(propsProperty in _0x59e9bc&&isObject(_0x59e9bc['props']))return _0x1e7ca1=_0x59e9bc['props'],_0x1e7ca1;}}return _0x1e7ca1;}__name(getProps,'getProps');function createLayoutElement(_0x2ed53d,_0x14edb7,_0x1a3bfc){const _0x582060=getProps(_0x2ed53d),_0x25ff60={'x':_0x582060['defaultX']??_0x14edb7%(-0x15f+0x26fc+-0x1*0x2598),'y':_0x582060['defaultY']??0xd2*-0x2c+-0x24+-0x90f*-0x4,'w':_0x582060['defaultWidth']??_0x582060['minWidth']??0x2069+-0x1943*0x1+-0x725*0x1,'h':_0x582060['defaultHeight']??_0x582060['minHeight']??0x2315+-0xf55+-0x3*0x695,'i':_0x582060['id']??_0x14edb7['toString'](),'maxH':_0x582060['maxHeight']??Math['round'](_0x1a3bfc*(-0x61f*-0x1+-0x4*-0x89b+0x9*-0x481)/(-0x1*-0xc6b+0x1*0x1285+-0x3*0xa4f)),'minH':_0x582060['minHeight'],..._0x582060,'element':_0x2ed53d};return _0x25ff60;}__name(createLayoutElement,'createLayoutElement');
 
 export { generateLayout, onLayoutChange, resizeEvent, setupRowHeightListener };

package/packages/level2/fd-component-toolbox/dynamic-layout/DynamicLayoutDragAndDrop.js

@@ -12,9 +12,10 @@ var __name = (target, value) => __defProp(target, "name", {
   value,
   configurable: true
 });
+const defaultLayoutMargin = [14, 14];
 const ResponsiveReactGridLayout = WidthProvider(Responsive);
 function DynamicLayoutDragAndDrop(t0) {
-  const $ = c(8);
+  const $ = c(20);
   const {
     className,
     componentClassName,
@@ -32,7 +33,7 @@ function DynamicLayoutDragAndDrop(t0) {
   }
   const [layout, setLayout] = useState(t1);
   const [rowHeight, setRowHeight] = useState(60);
-  const margin = containerMargin ?? [14, 14];
+  const margin = containerMargin ?? defaultLayoutMargin;
   const effectiveColumns = columns ?? 6;
   let t2;
   let t3;
@@ -50,53 +51,80 @@ function DynamicLayoutDragAndDrop(t0) {
     t3 = $[4];
   }
   useEffect(t2, t3);
-  useEffect(() => {
-    setupRowHeightListener(effectiveColumns, setRowHeight, margin);
-  }, [effectiveColumns, margin]);
   let t4;
-  if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-    t4 = (_, newLayouts) => onLayoutChange(newLayouts, setLayout);
-    $[5] = t4;
-  } else {
-    t4 = $[5];
-  }
   let t5;
-  if ($[6] !== componentClassName) {
-    t5 = item => jsx("div", {
-      className: cn("cursor-grab overflow-hidden", componentClassName ?? "bg-background shadow"),
-      children: item.element
-    }, item.i);
-    $[6] = componentClassName;
-    $[7] = t5;
+  if ($[5] !== effectiveColumns || $[6] !== margin) {
+    t4 = () => {
+      setupRowHeightListener(effectiveColumns, setRowHeight, margin);
+    };
+    t5 = [effectiveColumns, margin];
+    $[5] = effectiveColumns;
+    $[6] = margin;
+    $[7] = t4;
+    $[8] = t5;
   } else {
-    t5 = $[7];
+    t4 = $[7];
+    t5 = $[8];
   }
-  return jsx("div", {
-    className: "select-none",
-    style: {
-      paddingBottom: rowHeight
-    },
-    children: jsx(ResponsiveReactGridLayout, {
-      rowHeight,
-      className: cn("relative [&_.react-grid-item]:transition-all[&_.cssTransforms]:transition-[transform,_width,_height][&_img]:pointer-events-none[&_img]:select-none[&_.resizing]:transition-none[&_.resizing]:z-[1][&_.resizing]:will-change-[width,_height][&_.react-grid-item.react-draggable-dragging]:transition-none[&_.react-grid-item.react-draggable-dragging]:z-[3][&_.react-grid-item.react-draggable-dragging]:will-change-transform[&_.dropping]:invisible[&_.react-grid-placeholder]:border-fd-accent[&_.react-grid-placeholder]:border[&_.react-grid-placeholder]:border-dashed[&_.react-grid-placeholder]:border-2[&_.react-grid-placeholder]:rounded[&_.react-grid-placeholder]:z-[2][&_.react-grid-placeholder]:select-none[&_.placeholder-resizing]:transition-none[&_.react-grid-item_>_.react-resizable-handle]:absolute[&_.react-grid-item_>_.react-resizable-handle]:size-0.9[&_.react-grid-item_>_.react-resizable-handle]:bottom-0[&_.react-grid-item_>_.react-resizable-handle]:right-0[&_.react-grid-item_>_.react-resizable-handle]:cursor-se-resize[&_.react-grid-item_>_.react-resizable-handle]:after:content-[url(/handle.svg)][&_.react-grid-item_>_.react-resizable-handle]:after:absolute[&_.react-grid-item_>_.react-resizable-handle]:after:size-0.9[&_.react-grid-item_>_.react-resizable-handle]:after:right-2[&_.react-grid-item_>_.react-resizable-handle]:after:bottom-0[&_.react-resizable-hide_>_.react-resizable-handle]:hidden", className),
-      margin,
-      cols: {
-        xxs: effectiveColumns
-      },
-      breakpoints: {
-        xxs: 0
+  useEffect(t4, t5);
+  let t6;
+  if ($[9] !== className || $[10] !== componentClassName || $[11] !== containerPadding || $[12] !== effectiveColumns || $[13] !== layout || $[14] !== margin || $[15] !== rowHeight) {
+    let t7;
+    if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+      t7 = (_, newLayouts) => onLayoutChange(newLayouts, setLayout);
+      $[17] = t7;
+    } else {
+      t7 = $[17];
+    }
+    let t8;
+    if ($[18] !== componentClassName) {
+      t8 = item => jsx("div", {
+        className: cn("cursor-grab overflow-hidden", componentClassName ?? "bg-background shadow"),
+        children: item.element
+      }, item.i);
+      $[18] = componentClassName;
+      $[19] = t8;
+    } else {
+      t8 = $[19];
+    }
+    t6 = jsx("div", {
+      className: "select-none",
+      style: {
+        paddingBottom: rowHeight
       },
-      containerPadding: containerPadding ?? [0, 0],
-      layouts: {
-        xxs: layout
-      },
-      measureBeforeMount: false,
-      useCSSTransforms: true,
-      preventCollision: false,
-      onLayoutChange: t4,
-      children: layout.map(t5)
-    })
-  });
+      children: jsx(ResponsiveReactGridLayout, {
+        rowHeight,
+        className: cn("relative [&_.react-grid-item]:transition-all[&_.cssTransforms]:transition-[transform,_width,_height][&_img]:pointer-events-none[&_img]:select-none[&_.resizing]:transition-none[&_.resizing]:z-[1][&_.resizing]:will-change-[width,_height][&_.react-grid-item.react-draggable-dragging]:transition-none[&_.react-grid-item.react-draggable-dragging]:z-[3][&_.react-grid-item.react-draggable-dragging]:will-change-transform[&_.dropping]:invisible[&_.react-grid-placeholder]:border-fd-accent[&_.react-grid-placeholder]:border[&_.react-grid-placeholder]:border-dashed[&_.react-grid-placeholder]:border-2[&_.react-grid-placeholder]:rounded[&_.react-grid-placeholder]:z-[2][&_.react-grid-placeholder]:select-none[&_.placeholder-resizing]:transition-none[&_.react-grid-item_>_.react-resizable-handle]:absolute[&_.react-grid-item_>_.react-resizable-handle]:size-0.9[&_.react-grid-item_>_.react-resizable-handle]:bottom-0[&_.react-grid-item_>_.react-resizable-handle]:right-0[&_.react-grid-item_>_.react-resizable-handle]:cursor-se-resize[&_.react-grid-item_>_.react-resizable-handle]:after:content-[url(/handle.svg)][&_.react-grid-item_>_.react-resizable-handle]:after:absolute[&_.react-grid-item_>_.react-resizable-handle]:after:size-0.9[&_.react-grid-item_>_.react-resizable-handle]:after:right-2[&_.react-grid-item_>_.react-resizable-handle]:after:bottom-0[&_.react-resizable-hide_>_.react-resizable-handle]:hidden", className),
+        margin,
+        cols: {
+          xxs: effectiveColumns
+        },
+        breakpoints: {
+          xxs: 0
+        },
+        containerPadding: containerPadding ?? [0, 0],
+        layouts: {
+          xxs: layout
+        },
+        measureBeforeMount: false,
+        useCSSTransforms: true,
+        preventCollision: false,
+        onLayoutChange: t7,
+        children: layout.map(t8)
+      })
+    });
+    $[9] = className;
+    $[10] = componentClassName;
+    $[11] = containerPadding;
+    $[12] = effectiveColumns;
+    $[13] = layout;
+    $[14] = margin;
+    $[15] = rowHeight;
+    $[16] = t6;
+  } else {
+    t6 = $[16];
+  }
+  return t6;
 }
 __name(DynamicLayoutDragAndDrop, "DynamicLayoutDragAndDrop");
 

package/packages/level2/fd-component-toolbox/fade-out-text/FadeOutText.funcs.js

@@ -1,4 +1,4 @@
 'use strict';
-var __defProp=Object['defineProperty'],__name=(_0x10bf82,_0x124a5c)=>__defProp(_0x10bf82,'name',{'value':_0x124a5c,'configurable':!![]});function checkFadeoutVisibility(_0x4a6fe1,_0xad557f){if(document['body']['getAttribute']('data-scroll-locked')==='2')return;_0x4a6fe1(_0xad557f?_0xad557f['offsetWidth']<_0xad557f['scrollWidth']:![]);}__name(checkFadeoutVisibility,'checkFadeoutVisibility');
+var __defProp=Object['defineProperty'],__name=(_0x477973,_0x220f36)=>__defProp(_0x477973,'name',{'value':_0x220f36,'configurable':!![]});function checkFadeoutVisibility(_0x2129c6,_0x523017){if(document['body']['getAttribute']('data-scroll-locked')==='2')return;_0x2129c6(_0x523017?_0x523017['offsetWidth']<_0x523017['scrollWidth']:![]);}__name(checkFadeoutVisibility,'checkFadeoutVisibility');
 
 export { checkFadeoutVisibility };

package/packages/level2/fd-component-toolbox/fade-out-text/FadeOutText.js

@@ -1,9 +1,10 @@
 'use strict';
 import { jsx } from 'react/jsx-runtime';
-import { useRef, useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { cn } from '../../../fd-toolbox/lib/utils.js';
 import { Tooltip } from '../tooltip/Tooltip.js';
 import { checkFadeoutVisibility } from './FadeOutText.funcs.js';
+import { useEmptyRef } from '../../../fd-toolbox/hooks/use-empty-ref.js';
 
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", {
@@ -20,11 +21,11 @@ function FadeOutText({
   tooltipContent,
   ref
 }) {
-  const valueBlockRef = useRef(null);
+  const valueBlockRef = useEmptyRef();
   const [fadeoutVisible, setFadeoutVisible] = useState();
   useEffect(() => {
     checkFadeoutVisibility(setFadeoutVisible, valueBlockRef?.current ?? void 0);
-  }, [children]);
+  }, [children, valueBlockRef]);
   const textAlignmentClass = rightAlign ? "flex-row-reverse" : "";
   return /* @__PURE__ */jsx("div", {
     ref,

package/packages/level2/fd-component-toolbox/form/Form.d.ts

@@ -41,7 +41,7 @@ declare function FormField<TFieldValues extends FieldValues = FieldValues, TName
 /**
  * Based on {@link https:/ui.shadcn.com/docs/components/form Form}
  */
-declare const useFormField: () => {
+declare function useFormField(): {
     invalid: boolean;
     isDirty: boolean;
     isTouched: boolean;

package/packages/level2/fd-component-toolbox/form/Form.js

@@ -1,5 +1,6 @@
 'use strict';
 'use client';
+import { c } from 'react/compiler-runtime';
 import { jsx } from 'react/jsx-runtime';
 import React from 'react';
 import { Field } from '@base-ui/react/field';
@@ -14,7 +15,7 @@ var __name = (target, value) => __defProp(target, "name", {
   configurable: true
 });
 const Form = FormProvider;
-const FormFieldContext = React.createContext(null);
+const FormFieldContext = React.createContext(void 0);
 function FormField({
   name,
   render,
@@ -41,7 +42,8 @@ function FormField({
   });
 }
 __name(FormField, "FormField");
-const useFormField = /* @__PURE__ */__name(() => {
+function useFormField() {
+  const $ = c(11);
   const fieldContext = React.useContext(FormFieldContext);
   const itemContext = React.useContext(FormItemContext);
   const {
@@ -54,20 +56,47 @@ const useFormField = /* @__PURE__ */__name(() => {
   if (!itemContext) {
     throw createError("useFormField should be used within <FormItem>");
   }
-  const fieldState = getFieldState(fieldContext.name, formState);
+  let t0;
+  if ($[0] !== fieldContext.name || $[1] !== formState || $[2] !== getFieldState) {
+    t0 = getFieldState(fieldContext.name, formState);
+    $[0] = fieldContext.name;
+    $[1] = formState;
+    $[2] = getFieldState;
+    $[3] = t0;
+  } else {
+    t0 = $[3];
+  }
+  const fieldState = t0;
   const {
     id
   } = itemContext;
-  return {
-    id,
-    name: fieldContext.name,
-    formItemId: `${id}-form-item`,
-    formDescriptionId: `${id}-form-item-description`,
-    formMessageId: `${id}-form-item-message`,
-    ...fieldState
-  };
-}, "useFormField");
-const FormItemContext = React.createContext(null);
+  const t1 = `${id}-form-item`;
+  const t2 = `${id}-form-item-description`;
+  const t3 = `${id}-form-item-message`;
+  let t4;
+  if ($[4] !== fieldContext.name || $[5] !== fieldState || $[6] !== id || $[7] !== t1 || $[8] !== t2 || $[9] !== t3) {
+    t4 = {
+      id,
+      name: fieldContext.name,
+      formItemId: t1,
+      formDescriptionId: t2,
+      formMessageId: t3,
+      ...fieldState
+    };
+    $[4] = fieldContext.name;
+    $[5] = fieldState;
+    $[6] = id;
+    $[7] = t1;
+    $[8] = t2;
+    $[9] = t3;
+    $[10] = t4;
+  } else {
+    t4 = $[10];
+  }
+  return t4;
+}
+__name(useFormField, "useFormField");
+const FormItemContext = React.createContext(void 0);
 function FormItem({
   className,
   children,
@@ -121,18 +150,12 @@ function FormControl({
     ref,
     "aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
     "aria-invalid": !!error,
-    render: props => {
-      if (children && React.isValidElement(children)) {
-        const controlProps = Object.fromEntries(Object.entries(props).filter(([key]) => !["onChange", "onBlur", "onFocus"].includes(key)));
-        return React.cloneElement(children, {
-          ...controlProps,
-          ...children.props
-        });
-      }
-      return /* @__PURE__ */jsx("input", {
-        ...props
-      });
-    }
+    render: props => children && React.isValidElement(children) ? React.cloneElement(children, {
+      ...props,
+      ...children.props
+    }) : /* @__PURE__ */jsx("input", {
+      ...props
+    })
   });
 }
 __name(FormControl, "FormControl");
@@ -165,7 +188,7 @@ function FormMessage({
   } = useFormField();
   const body = error?.message ?? children;
   if (!body) {
-    return null;
+    return void 0;
   }
   return /* @__PURE__ */jsx("p", {
     ref,

package/packages/level2/fd-component-toolbox/icon/Icon.d.ts

@@ -83,7 +83,7 @@ export declare const iconNames: {
 /**
  * Props of {@link Icon}
  */
-export interface FdIconProps {
+export interface IconProps {
     /** Unique identifier for the icon element. */
     id?: string;
     /** The name of the icon to display. */
@@ -101,11 +101,11 @@ export declare const defaultSidebarIconName: "mixerHorizontal";
 /**
  * Icon component that provides access to Radix UI icons with standardized sizing and styling options
  *
- * @param FdIconProps {@link FdIconProps}
+ * @param IconProps {@link IconProps}
  *
  * @example
  * ```tsx
     <Icon name="chevronDown" size="size-5" color="text-primary" onClick={...}/>
  * ```
  */
-export declare function Icon({ name, size, color, className, id, onClick }: FdIconProps): import("react").JSX.Element;
+export declare function Icon({ name, size, color, className, id, onClick }: IconProps): import("react").JSX.Element;

package/packages/level2/fd-component-toolbox/icon/Icon.js

@@ -162,16 +162,15 @@ function Icon({
   id,
   onClick
 }) {
-  if (name in iconMap) {
-    const IconComponent = iconMap[name];
-    return /* @__PURE__ */jsx(IconComponent, {
-      id: id ?? "",
-      className: cn("stroke-[1.6]", size ?? iconSizes.small, color ?? "text-muted-foreground", className ?? ""),
-      onClick
-    });
-  } else {
-    return null;
+  if (!(name in iconMap)) {
+    return void 0;
   }
+  const IconComponent = iconMap[name];
+  return /* @__PURE__ */jsx(IconComponent, {
+    id: id ?? "",
+    className: cn("stroke-[1.6]", size ?? iconSizes.small, color ?? "text-muted-foreground", className ?? ""),
+    onClick
+  });
 }
 __name(Icon, "Icon");
 

package/packages/level2/fd-component-toolbox/icon/custom-icons/FilterIcon.d.ts

@@ -1,5 +1,4 @@
-import React from "react";
-import { SVGProps } from "react";
+import React, { SVGProps } from "react";
 /**
  * {@link FilterIcon} component that provides a custom filter icon
  *

package/packages/level2/fd-component-toolbox/input/Input.d.ts

@@ -2,7 +2,7 @@ import { ReactNode, FormEventHandler } from "react";
 import { VoidFunc, VoidFuncNoParam } from "../../../fd-toolbox/functions/getter-setter-functions";
 import { VariantProps } from "class-variance-authority";
 import { FocusEventType } from "../../../fd-toolbox/types/react-types";
-export type InputVariants = "bordered" | "float" | null;
+export type InputVariants = "bordered" | "float" | undefined;
 /**
  * Using {@link https:/cva.style/docs/getting-started/variants class-variance-authority}
  */