fix: work around csp and treeshaking issue by adding copy of component

components/TextInput/package.json

@@ -30,8 +30,8 @@
     "watch:components": "chokidar --silent --follow-symlinks \"src/**/*\" -c \"pnpm run build\""
   },
   "dependencies": {
-    "@persoonlijke-regelingen-assistent/components-react": "1.0.0-alpha.152",
-    "@utrecht/component-library-react": "6.1.0"
+    "@utrecht/component-library-react": "7.2.0",
+    "@utrecht/components": "7.4.0"
   },
   "peerDependencies": {
     "react": "^18.0.0"

components/TextInput/src/index.scss

@@ -1,4 +1,5 @@
 @import "~@utrecht/components/dist/textbox/css";
+@import "./pra-textbox";
 
 .pra-textbox {
   .utrecht-textbox {

components/TextInput/src/index.tsx

@@ -1,24 +1,26 @@
-import React, { forwardRef } from 'react';
-import { Textbox } from '@persoonlijke-regelingen-assistent/components-react';
-import { TextboxProps as UtrechtTextboxProps } from '@utrecht/component-library-react';
+import React, { ForwardedRef, forwardRef } from 'react';
+import { Textbox, TextboxProps } from '@utrecht/component-library-react';
 import './index.scss';
 
-//PRA doesn't export the props yet, so for now i made a copy.
-interface TextInputProps extends UtrechtTextboxProps {
+interface TextInputProps extends TextboxProps {
   iconStart?: JSX.Element;
   iconEnd?: JSX.Element;
 }
 
-const TextInput = forwardRef<HTMLLabelElement, TextInputProps>(function TextInput(
-  { children, invalid = false, ...props },
-  ref,
-) {
-  return (
-    <Textbox ref={ref} invalid={invalid} {...props}>
-      {children}
-    </Textbox>
-  );
-});
+const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLLabelElement>> = forwardRef(
+  ({ ...props }: TextInputProps, ref: ForwardedRef<HTMLLabelElement>) => {
+    const { iconStart, iconEnd, placeholder, id, ...otherProps } = props;
+    return (
+      <label className="pra-textbox" ref={ref} htmlFor={id}>
+        {iconStart && <span className="pra-icon pra-icon-start">{iconStart}</span>}
+        <Textbox {...otherProps} placeholder={placeholder} type="text" id={id} />
+        {iconEnd && <span className="pra-icon pra-icon-end">{iconEnd}</span>}
+      </label>
+    );
+  },
+);
+
+TextInput.displayName = 'Textbox';
 
 export { TextInput, TextInputProps };
 export default TextInput;

components/TextInput/src/pra-textbox.scss

@@ -0,0 +1,171 @@
+.pra-textbox {
+  align-items: center;
+  background-color: var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color));
+  border-block-end-width: var(
+    --utrecht-textbox-border-bottom-width,
+    var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))
+  );
+  border-color: var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color));
+  border-radius: var(--utrecht-textbox-border-radius, var(--utrecht-form-control-border-radius, 0));
+  border-style: solid;
+  border-width: var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width));
+  display: flex;
+  inline-size: 100%;
+
+  .pra-icon {
+    align-items: center;
+    background-color: transparent;
+    block-size: calc(var(--utrecht-textbox-font-size) * 1.5);
+    display: flex;
+    inline-size: calc(var(--utrecht-textbox-font-size) * 1.5);
+    justify-content: center;
+    svg {
+      path {
+        fill: var(--utrecht-textbox-color);
+      }
+    }
+    &-start {
+      padding-inline-start: calc(var(--utrecht-textbox-padding-inline-start) / 2);
+    }
+    &-end {
+      margin-inline-start: auto;
+      padding-inline-end: calc(var(--utrecht-textbox-padding-inline-end) / 2);
+    }
+  }
+
+  .utrecht-textbox {
+    --utrecht-textbox-border-width: 0;
+    --utrecht-textbox-border-block-end-width: 0;
+
+    &:focus {
+      --utrecht-focus-outline-width: 0;
+      --utrecht-focus-outline-block-end-width: 0;
+    }
+  }
+
+  &:has(.pra-icon-start) .utrecht-textbox {
+    border-end-start-radius: 0;
+    border-start-start-radius: 0;
+    padding-inline-start: calc(var(--utrecht-textbox-padding-inline-start) / 2);
+  }
+
+  &:has(.pra-icon-end) .utrecht-textbox {
+    border-end-end-radius: 0;
+    border-start-end-radius: 0;
+    padding-inline-end: calc(var(--utrecht-textbox-padding-inline-end) / 2);
+  }
+
+  &:focus-within {
+    background-color: var(
+      --utrecht-textbox-focus-background-color,
+      var(
+        --utrecht-form-control-focus-background-color,
+        var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))
+      )
+    );
+    box-shadow: var(--utrecht-focus-ring-box-shadow);
+    outline-color: var(--utrecht-focus-outline-color, revert);
+    outline-offset: var(--utrecht-focus-outline-offset, revert);
+    outline-style: var(--utrecht-focus-outline-style, revert);
+    outline-width: var(--utrecht-focus-outline-width, revert);
+    .pra-icon {
+      svg {
+        path {
+          fill: var(--utrecht-textbox-focus-color);
+        }
+      }
+    }
+  }
+
+  &:has(.utrecht-textbox--disabled) {
+    background-color: var(
+      --utrecht-textbox-disabled-background-color,
+      var(
+        --utrecht-form-control-disabled-background-color,
+        var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))
+      )
+    );
+    border-color: var(
+      --utrecht-textbox-disabled-border-color,
+      var(
+        --utrecht-form-control-disabled-border-color,
+        var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))
+      )
+    );
+    .utrecht-textbox {
+      --_utrecht-textbox-border-width: 0;
+      --_utrecht-textbox-border-block-end-width: 0;
+    }
+    .pra-icon {
+      cursor: var(--utrecht-action-disabled-cursor, not-allowed);
+      svg {
+        path {
+          fill: var(
+            --utrecht-textbox-disabled-color,
+            var(--utrecht-form-control-disabled-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color)))
+          );
+        }
+      }
+    }
+  }
+  &:has(.utrecht-textbox--invalid) {
+    background-color: var(
+      --utrecht-textbox-invalid-background-color,
+      var(
+        --utrecht-form-control-invalid-background-color,
+        var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))
+      )
+    );
+    border-color: var(
+      --utrecht-textbox-invalid-border-color,
+      var(
+        --utrecht-form-control-invalid-border-color,
+        var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))
+      )
+    );
+    .utrecht-textbox {
+      --_utrecht-textbox-border-width: 0;
+      --_utrecht-textbox-border-block-end-width: 0;
+    }
+    .pra-icon {
+      svg {
+        path {
+          fill: var(
+            --utrecht-textbox-invalid-color,
+            var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color)))
+          );
+        }
+      }
+    }
+  }
+  &:has(.utrecht-textbox--readonly) {
+    background-color: var(
+      --utrecht-textbox-read-only-background-color,
+      var(
+        --utrecht-form-control-read-only-background-color,
+        var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))
+      )
+    );
+    border-color: var(
+      --utrecht-textbox-read-only-border-color,
+      var(
+        --utrecht-form-control-read-only-border-color,
+        var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))
+      )
+    );
+    .utrecht-textbox {
+      --_utrecht-textbox-border-width: 0;
+      --_utrecht-textbox-border-block-end-width: 0;
+    }
+    .pra-icon {
+      svg {
+        path {
+          fill: var(
+            --utrecht-textbox-read-only-color,
+            var(--utrecht-form-control-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color)))
+          );
+        }
+      }
+    }
+  }
+}