react-science 19.2.0 → 19.3.0

package/src/components/svg/styled/svg_styled_line.tsx

@@ -0,0 +1,27 @@
+import type { SVGProps } from 'react';
+
+import type { SVGStyledLineUserConfig } from './svg_styled_types.js';
+import { computeStrokeDasharray } from './svg_styled_utils.js';
+
+export interface SVGStyledLineProps
+  extends Omit<SVGProps<SVGLineElement>, keyof SVGStyledLineUserConfig>,
+    SVGStyledLineUserConfig {}
+
+export function SVGStyledLine(props: SVGStyledLineProps) {
+  const {
+    stroke = '#000000',
+    strokeOpacity = 1,
+    strokeWidth = 1,
+    strokeDasharray = 'solid',
+    ...otherProps
+  } = props;
+  return (
+    <line
+      {...otherProps}
+      stroke={stroke}
+      strokeOpacity={strokeOpacity}
+      strokeWidth={strokeWidth}
+      strokeDasharray={computeStrokeDasharray(strokeDasharray, strokeWidth)}
+    />
+  );
+}

package/src/components/svg/styled/svg_styled_path.tsx

@@ -0,0 +1,29 @@
+import type { SVGProps } from 'react';
+
+import type { SVGStyledLineUserConfig } from './svg_styled_types.js';
+import { computeStrokeDasharray } from './svg_styled_utils.js';
+
+export interface SVGStyledPathProps
+  extends Omit<SVGProps<SVGPathElement>, keyof SVGStyledLineUserConfig>,
+    SVGStyledLineUserConfig {}
+
+export function SVGStyledPath(props: SVGStyledPathProps) {
+  const {
+    fillOpacity = 0,
+    stroke = '#000000',
+    strokeOpacity = 1,
+    strokeWidth = 1,
+    strokeDasharray = 'solid',
+    ...otherProps
+  } = props;
+  return (
+    <path
+      {...otherProps}
+      fillOpacity={fillOpacity}
+      stroke={stroke}
+      strokeOpacity={strokeOpacity}
+      strokeWidth={strokeWidth}
+      strokeDasharray={computeStrokeDasharray(strokeDasharray, strokeWidth)}
+    />
+  );
+}

package/src/components/svg/styled/svg_styled_text.tsx

@@ -0,0 +1,12 @@
+import type { SVGProps } from 'react';
+
+import type { SVGStyledTextUserConfig } from './svg_styled_types.js';
+
+export interface SVGStyledTextProps
+  extends Omit<SVGProps<SVGTextElement>, keyof SVGStyledTextUserConfig>,
+    SVGStyledTextUserConfig {}
+
+export function SVGStyledText(props: SVGStyledTextProps) {
+  const { fontWeight = 'normal', fontStyle = 'normal', ...otherProps } = props;
+  return <text {...otherProps} fontWeight={fontWeight} fontStyle={fontStyle} />;
+}

package/src/components/svg/styled/svg_styled_types.ts

@@ -0,0 +1,67 @@
+export type SVGStyledLineStrokePattern =
+  | 'solid'
+  | 'dashed'
+  | 'dotted'
+  | 'dashed-dot';
+
+/**
+ * SVG line styles that can be controlled by the user.
+ */
+export interface SVGStyledLineUserConfig {
+  /**
+   * Line color.
+   * @default '#000000'
+   */
+  stroke?: string;
+
+  /**
+   * Line opacity.
+   * Range: [0, 1]
+   * @default 1
+   */
+  strokeOpacity?: number;
+
+  /**
+   * Line width.
+   * Range: [0, ∞)
+   * @default 1
+   */
+  strokeWidth?: number;
+
+  /**
+   * Line stroke pattern.
+   * The `stroke-dasharray` attribute is computed from it and `strokeWidth`
+   * @default 'solid'
+   */
+  strokeDasharray?: SVGStyledLineStrokePattern;
+}
+
+/**
+ * SVG text styles that can be controlled by the user.
+ */
+export interface SVGStyledTextUserConfig {
+  /**
+   * Font color.
+   * @default inherit
+   */
+  fill?: string;
+
+  /**
+   * Font size.
+   * Range: [0, ∞)
+   * @default inherit
+   */
+  fontSize?: number;
+
+  /**
+   * Font weight.
+   * @default 'normal'
+   */
+  fontWeight?: 'normal' | 'bold';
+
+  /**
+   * Font style.
+   * @default 'normal'
+   */
+  fontStyle?: 'normal' | 'italic';
+}

package/src/components/svg/styled/svg_styled_utils.ts

@@ -0,0 +1,15 @@
+import { match } from 'ts-pattern';
+
+import type { SVGStyledLineStrokePattern } from './svg_styled_types.js';
+
+export function computeStrokeDasharray(
+  pattern: SVGStyledLineStrokePattern,
+  width: number,
+): string {
+  return match(pattern)
+    .with('solid', () => '')
+    .with('dashed', () => `${4 * width} ${4 * width}`)
+    .with('dotted', () => `${width} ${width}`)
+    .with('dashed-dot', () => `${4 * width} ${width} ${width} ${width}`)
+    .exhaustive();
+}

package/src/components/table/reorder_rows/use_drop_monitor.ts

@@ -27,50 +27,53 @@ export function useDropMonitor(
   const { reorderItem, items } = useItemOrder();
   const [, setFlashedRow] = useFlashedRowContext();
   useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+
     const scrollContainer = scrollElementRef.current;
     assert(scrollContainer, 'Missing scroll container ref');
 
-    if (enabled) {
-      function canRespond({ source }: { source: ElementDragPayload }) {
-        return isItemData(source.data);
-      }
-      return combine(
-        monitorForElements({
-          canMonitor: canRespond,
-          onDrop({ location, source }) {
-            const target = location.current.dropTargets[0];
-            if (!target) {
-              return;
-            }
+    function canRespond({ source }: { source: ElementDragPayload }) {
+      return isItemData(source.data);
+    }
 
-            const sourceData = source.data;
-            const targetData = target.data;
-            if (!isItemData(sourceData) || !isItemData(targetData)) {
-              return;
-            }
+    return combine(
+      monitorForElements({
+        canMonitor: canRespond,
+        onDrop({ location, source }) {
+          const target = location.current.dropTargets[0];
+          if (!target) {
+            return;
+          }
 
-            const indexOfTarget = items.findIndex(
-              (item) => item.id === targetData.id,
-            );
-            if (indexOfTarget === -1) {
-              return;
-            }
+          const sourceData = source.data;
+          const targetData = target.data;
+          if (!isItemData(sourceData) || !isItemData(targetData)) {
+            return;
+          }
 
-            const closestEdgeOfTarget = extractClosestEdge(targetData);
+          const indexOfTarget = items.findIndex(
+            (item) => item.id === targetData.id,
+          );
+          if (indexOfTarget === -1) {
+            return;
+          }
 
-            reorderItem({
-              startIndex: sourceData.index,
-              indexOfTarget,
-              closestEdgeOfTarget,
-            });
-            setFlashedRow(sourceData.id);
-          },
-        }),
-        autoScrollForElements({
-          canScroll: canRespond,
-          element: scrollContainer,
-        }),
-      );
-    }
+          const closestEdgeOfTarget = extractClosestEdge(targetData);
+
+          reorderItem({
+            startIndex: sourceData.index,
+            indexOfTarget,
+            closestEdgeOfTarget,
+          });
+          setFlashedRow(sourceData.id);
+        },
+      }),
+      autoScrollForElements({
+        canScroll: canRespond,
+        element: scrollContainer,
+      }),
+    );
   }, [items, reorderItem, scrollElementRef, setFlashedRow, enabled]);
 }

package/src/components/toolbar/PanelPreferencesToolbar.tsx

@@ -27,7 +27,7 @@ const PanelPreferencesToolbarContent = styled.div`
   display: flex;
   flex-direction: row-reverse;
 
-  & > button {
+  > button {
     padding: 0 0 0 9px;
     min-width: auto;
   }

package/src/components/toolbar/Toolbar.tsx

@@ -98,6 +98,7 @@ export function Toolbar(props: ToolbarProps) {
     if (!vertical) {
       return;
     }
+
     function update() {
       const lastElement = ref.current?.lastElementChild;
       if (!lastElement) {
@@ -113,11 +114,13 @@ export function Toolbar(props: ToolbarProps) {
     }
 
     const element = ref.current;
-    if (element) {
-      const observer = new ResizeObserver(update);
-      observer.observe(element);
-      return () => observer.unobserve(element);
+    if (!element) {
+      return;
     }
+
+    const observer = new ResizeObserver(update);
+    observer.observe(element);
+    return () => observer.unobserve(element);
   }, [vertical]);
 
   return (

package/src/components/toolbar/TooltipHelpContent.tsx

@@ -45,7 +45,7 @@ const SubTitleItem = styled.div`
   padding-left: 15px;
   box-sizing: border-box;
 
-  &::before {
+  ::before {
     position: absolute;
     top: ${shortcutBoxSize / 2}rem;
     left: 0;
@@ -56,7 +56,7 @@ const SubTitleItem = styled.div`
     border-bottom: 1px solid;
   }
 
-  &::after {
+  ::after {
     position: absolute;
     top: 0;
     bottom: 0;
@@ -67,7 +67,7 @@ const SubTitleItem = styled.div`
     border-left: 1px solid;
   }
 
-  &:last-child::after {
+  :last-child::after {
     height: ${shortcutBoxSize / 2}rem;
   }
 `;

package/lib/components/doi/Logo.d.ts

@@ -1,6 +0,0 @@
-interface LogoProps {
-    size: string;
-}
-export declare function Logo(props: LogoProps): import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=Logo.d.ts.map

package/lib/components/doi/Logo.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Logo.d.ts","sourceRoot":"","sources":["../../../src/components/doi/Logo.tsx"],"names":[],"mappings":"AAYA,UAAU,SAAS;IACjB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,2CAgBpC"}

package/lib/components/doi/Logo.js

@@ -1,16 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styled from '@emotion/styled';
-const Svg = styled.svg `
-  display: inline-flex;
-  ${(props) => {
-    return `
-      height: ${props.size};
-      width: ${props.size};
-    `;
-}}
-`;
-export function Logo(props) {
-    const { size } = props;
-    return (_jsxs(Svg, { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 130 130", size: size, children: [_jsx("circle", { fill: "#fcb425", cx: "65", cy: "65", r: "64" }), _jsx("path", { fill: "##231f20", d: "m 49.819127,84.559148 -11.854304,0 0,-4.825665 c -1.203594,1.510894 -4.035515,3.051053 -5.264716,3.742483 -2.151101,1.203585 -5.072066,1.987225 -7.812161,1.987225 -4.430246,0 -8.373925,-1.399539 -11.831057,-4.446924 -4.1229464,-3.636389 -6.0602455,-9.19576 -6.0602455,-15.188113 0,-6.094791 2.1126913,-10.960381 6.3380645,-14.59676 3.354695,-2.893745 7.457089,-5.209795 11.810505,-5.209795 2.535231,0 5.661807,0.227363 7.889738,1.302913 1.280414,0.614601 3.572628,2.060721 4.929872,3.469179 l 0,-25.420177 11.854304,0 z m -12.1199,-18.692584 c 0,-2.253538 -0.618258,-4.951555 -2.205973,-6.513663 -1.587724,-1.587724 -4.474153,-2.996182 -6.727691,-2.996182 -2.509615,0 -4.834476,1.825511 -6.447807,3.720535 -1.306031,1.536501 -1.959041,3.905269 -1.959041,5.877114 0,1.971835 0.740815,4.165004 2.046836,5.701505 1.587714,1.895025 3.297985,3.193739 5.833216,3.193739 2.279145,0 4.989965,-0.956662 6.552083,-2.51877 1.587714,-1.562108 2.908377,-4.185134 2.908377,-6.464278 z" }), _jsx("path", { fill: "#fff", d: "m 105.42764,25.617918 c -1.97184,0 -3.64919,0.69142 -5.03204,2.074271 -1.357247,1.357245 -2.035864,3.021779 -2.035864,4.993633 0,1.971835 0.678617,3.649193 2.035864,5.032034 1.38285,1.382861 3.0602,2.074281 5.03204,2.074281 1.99744,0 3.67479,-0.678627 5.03203,-2.035861 1.38285,-1.382861 2.07428,-3.073012 2.07428,-5.070454 0,-1.971854 -0.69143,-3.636388 -2.07428,-4.993633 -1.38285,-1.382851 -3.0602,-2.074271 -5.03203,-2.074271 z M 74.219383,45.507921 c -7.323992,0 -12.970625,2.283009 -16.939921,6.848949 -3.277876,3.782438 -4.916803,8.118252 -4.916803,13.008406 0,5.430481 1.626124,10.009834 4.878383,13.738236 3.943689,4.538918 9.475093,6.808622 16.59421,6.808622 7.093512,0 12.612122,-2.269704 16.555801,-6.808622 3.252259,-3.728402 4.878393,-8.1993 4.878393,-13.413648 0,-5.160323 -1.638938,-9.604602 -4.916803,-13.332994 -4.020509,-4.56594 -9.398263,-6.848949 -16.13326,-6.848949 z m 24.908603,1.386686 0,37.634676 12.599304,0 0,-37.634676 -12.599304,0 z M 73.835252,56.975981 c 2.304752,0 4.263793,0.852337 5.877124,2.554426 1.638928,1.675076 2.458402,3.727881 2.458402,6.159457 0,2.458578 -0.806671,4.538022 -2.419992,6.240111 -1.613331,1.675086 -3.585175,2.514099 -5.915534,2.514099 -2.612051,0 -4.737546,-1.027366 -6.376474,-3.080682 -1.331637,-1.648053 -1.997451,-3.539154 -1.997451,-5.673528 0,-2.107362 0.665814,-3.985138 1.997451,-5.633201 1.638928,-2.053316 3.764423,-3.080682 6.376474,-3.080682 z" })] }));
-}
-//# sourceMappingURL=Logo.js.map

package/lib/components/doi/Logo.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Logo.js","sourceRoot":"","sources":["../../../src/components/doi/Logo.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,GAAG,GAAG,MAAM,CAAC,GAAG,CAAkB;;IAEpC,CAAC,KAAK,EAAE,EAAE;IACV,OAAO;gBACK,KAAK,CAAC,IAAI;eACX,KAAK,CAAC,IAAI;KACpB,CAAC;AACJ,CAAC;CACF,CAAC;AAMF,MAAM,UAAU,IAAI,CAAC,KAAgB;IACnC,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IAEvB,OAAO,CACL,MAAC,GAAG,IAAC,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,aAAa,EAAC,IAAI,EAAE,IAAI,aACtE,iBAAQ,IAAI,EAAC,SAAS,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,GAAG,EAChD,eACE,IAAI,EAAC,UAAU,EACf,CAAC,EAAC,48BAA48B,GAC98B,EACF,eACE,IAAI,EAAC,MAAM,EACX,CAAC,EAAC,w4CAAw4C,GAC14C,IACE,CACP,CAAC;AACJ,CAAC"}

package/lib/components/form/components/hooks/use_input_id.d.ts

@@ -1,8 +0,0 @@
-/**
- * Generate an automatic id if needed, joined with name if truthy
- *
- * @param id
- * @param name
- */
-export declare function useInputId(id: string | null | undefined, name: string | null | undefined): string;
-//# sourceMappingURL=use_input_id.d.ts.map

package/lib/components/form/components/hooks/use_input_id.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"use_input_id.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/components/hooks/use_input_id.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,wBAAgB,UAAU,CACxB,EAAE,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAC7B,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,UAQhC"}

package/lib/components/form/components/hooks/use_input_id.js

@@ -1,15 +0,0 @@
-import { useId } from 'react';
-/**
- * Generate an automatic id if needed, joined with name if truthy
- *
- * @param id
- * @param name
- */
-export function useInputId(id, name) {
-    const reactId = useId();
-    // If id is defined, keep id as finalId for predictable behavior.
-    // If name is defined, join name with reactId to simplify debug in devtools.
-    // Else use reactId.
-    return id ?? (name ? `${name}_${reactId}` : reactId);
-}
-//# sourceMappingURL=use_input_id.js.map

package/lib/components/form/components/hooks/use_input_id.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"use_input_id.js","sourceRoot":"","sources":["../../../../../src/components/form/components/hooks/use_input_id.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAE9B;;;;;GAKG;AACH,MAAM,UAAU,UAAU,CACxB,EAA6B,EAC7B,IAA+B;IAE/B,MAAM,OAAO,GAAG,KAAK,EAAE,CAAC;IAExB,iEAAiE;IACjE,4EAA4E;IAC5E,oBAAoB;IACpB,OAAO,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,IAAI,IAAI,OAAO,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;AACvD,CAAC"}

package/lib/components/form/components/input_groups/input.d.ts

@@ -1,20 +0,0 @@
-import type { ChangeEvent } from 'react';
-interface InputProps {
-    error?: string;
-    required?: boolean;
-    id?: string;
-    name: string;
-    type?: string;
-    onChange: (event: ChangeEvent<HTMLInputElement>) => void;
-    onBlur: () => void;
-    value: string;
-    placeholder?: string;
-    formGroupProps: {
-        label?: string;
-        className?: string;
-        inline?: boolean;
-    };
-}
-export declare function Input(props: InputProps): import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=input.d.ts.map

package/lib/components/form/components/input_groups/input.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/components/input_groups/input.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAIzC,UAAU,UAAU;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACzD,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE;QACd,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,MAAM,CAAC,EAAE,OAAO,CAAC;KAClB,CAAC;CACH;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,2CAwCtC"}

package/lib/components/form/components/input_groups/input.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { FormGroup, InputGroup } from '@blueprintjs/core';
-import { useInputId } from '../hooks/use_input_id.js';
-export function Input(props) {
-    const { id, required = false, error, formGroupProps: { className, inline = false, label }, name, onBlur, onChange, type = 'text', value, placeholder, } = props;
-    const finalId = useInputId(id, name);
-    return (_jsx(FormGroup, { helperText: error ?? undefined, label: label, labelFor: finalId, intent: "danger", style: { margin: 0, position: 'relative' }, className: className, inline: inline, labelInfo: required && _jsx("span", { style: { color: 'red' }, children: "*" }), children: _jsx(InputGroup, { id: finalId, name: name, required: required, type: type, onChange: onChange, onBlur: onBlur, intent: error ? 'danger' : 'none', value: value, placeholder: placeholder }) }));
-}
-//# sourceMappingURL=input.js.map

package/lib/components/form/components/input_groups/input.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../../../src/components/form/components/input_groups/input.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAG1D,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAmBtD,MAAM,UAAU,KAAK,CAAC,KAAiB;IACrC,MAAM,EACJ,EAAE,EACF,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,cAAc,EAAE,EAAE,SAAS,EAAE,MAAM,GAAG,KAAK,EAAE,KAAK,EAAE,EACpD,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,IAAI,GAAG,MAAM,EACb,KAAK,EACL,WAAW,GACZ,GAAG,KAAK,CAAC;IAEV,MAAM,OAAO,GAAG,UAAU,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC;IAErC,OAAO,CACL,KAAC,SAAS,IACR,UAAU,EAAE,KAAK,IAAI,SAAS,EAC9B,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,OAAO,EACjB,MAAM,EAAC,QAAQ,EACf,KAAK,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,EAC1C,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,QAAQ,IAAI,eAAM,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,kBAAU,YAE9D,KAAC,UAAU,IACT,EAAE,EAAE,OAAO,EACX,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,EACjC,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,GACxB,GACQ,CACb,CAAC;AACJ,CAAC"}

package/src/components/form/components/hooks/use_input_id.ts

@@ -1,19 +0,0 @@
-import { useId } from 'react';
-
-/**
- * Generate an automatic id if needed, joined with name if truthy
- *
- * @param id
- * @param name
- */
-export function useInputId(
-  id: string | null | undefined,
-  name: string | null | undefined,
-) {
-  const reactId = useId();
-
-  // If id is defined, keep id as finalId for predictable behavior.
-  // If name is defined, join name with reactId to simplify debug in devtools.
-  // Else use reactId.
-  return id ?? (name ? `${name}_${reactId}` : reactId);
-}

package/src/components/form/components/input_groups/input.tsx

@@ -1,63 +0,0 @@
-import { FormGroup, InputGroup } from '@blueprintjs/core';
-import type { ChangeEvent } from 'react';
-
-import { useInputId } from '../hooks/use_input_id.js';
-
-interface InputProps {
-  error?: string;
-  required?: boolean;
-  id?: string;
-  name: string;
-  type?: string;
-  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
-  onBlur: () => void;
-  value: string;
-  placeholder?: string;
-  formGroupProps: {
-    label?: string;
-    className?: string;
-    inline?: boolean;
-  };
-}
-
-export function Input(props: InputProps) {
-  const {
-    id,
-    required = false,
-    error,
-    formGroupProps: { className, inline = false, label },
-    name,
-    onBlur,
-    onChange,
-    type = 'text',
-    value,
-    placeholder,
-  } = props;
-
-  const finalId = useInputId(id, name);
-
-  return (
-    <FormGroup
-      helperText={error ?? undefined}
-      label={label}
-      labelFor={finalId}
-      intent="danger"
-      style={{ margin: 0, position: 'relative' }}
-      className={className}
-      inline={inline}
-      labelInfo={required && <span style={{ color: 'red' }}>*</span>}
-    >
-      <InputGroup
-        id={finalId}
-        name={name}
-        required={required}
-        type={type}
-        onChange={onChange}
-        onBlur={onBlur}
-        intent={error ? 'danger' : 'none'}
-        value={value}
-        placeholder={placeholder}
-      />
-    </FormGroup>
-  );
-}