feat: initial Pezkuwi Apps rebrand from polkadot-apps

Rebranded terminology:
- Polkadot → Pezkuwi
- Kusama → Dicle
- Westend → Zagros
- Rococo → PezkuwiChain
- Substrate → Bizinikiwi
- parachain → teyrchain

Custom logos with Kurdistan brand colors (#e6007a → #86e62a):
- bizinikiwi-hexagon.svg
- sora-bizinikiwi.svg
- hezscanner.svg
- heztreasury.svg
- pezkuwiscan.svg
- pezkuwistats.svg
- pezkuwiassembly.svg
- pezkuwiholic.svg

packages/react-components/src/TextArea.tsx

@@ -0,0 +1,99 @@
+// Copyright 2017-2025 @pezkuwi/react-components authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import React, { useCallback } from 'react';
+
+import Labelled from './Labelled.js';
+import { styled } from './styled.js';
+
+interface Props {
+  children?: React.ReactNode;
+  className?: string;
+  isError?: boolean;
+  isReadOnly?: boolean;
+  label?: React.ReactNode;
+  onChange?: (arg: string) => void;
+  seed?: string;
+  withLabel?: boolean;
+}
+
+function TextArea ({ children, className, isError, isReadOnly, label, onChange, seed, withLabel }: Props): React.ReactElement<Props> {
+  const _onChange = useCallback(
+    ({ target: { value } }: React.ChangeEvent<HTMLTextAreaElement>): void => {
+      onChange && onChange(value);
+    },
+    [onChange]
+  );
+
+  return (
+    <StyledLabelled
+      className={className}
+      label={label}
+      withLabel={withLabel}
+    >
+      <div className='TextAreaWithDropdown'>
+        <textarea
+          autoCapitalize='off'
+          autoCorrect='off'
+          autoFocus={false}
+          className={isError ? 'ui-textArea-withError' : ''}
+          onChange={_onChange}
+          readOnly={isReadOnly}
+          rows={2}
+          spellCheck={false}
+          value={seed}
+        />
+        {children}
+      </div>
+    </StyledLabelled>
+  );
+}
+
+const StyledLabelled = styled(Labelled)`
+  .TextAreaWithDropdown {
+    display: flex;
+    textarea {
+      border-radius: 0.25rem 0 0 0.25rem;
+      border: 1px solid #DDE1EB;
+      border-right: none;
+      background: var(--bg-input);
+      box-sizing: border-box;
+      color: var(--color-text);
+      display: block;
+      outline: none;
+      padding: 1.75rem 3rem 0.75rem 1.5rem;
+      resize: none;
+      width: 100%;
+
+      &:read-only {
+        background: var(--bg-inverse);
+        box-shadow: none;
+        outline: none;
+
+        ~ .ui.buttons > .ui.selection.dropdown {
+          background: var(--bg-inverse);
+        }
+      }
+
+      &.ui-textArea-withError {
+        background: var(--bg-input-error);
+        color: var(--color-error);
+      }
+    }
+
+    & > .ui.buttons > .ui.button.floating.selection.dropdown {
+      border: 1px solid #DDE1EB;
+      border-left: none;
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      & > .dropdown.icon {
+        top: 2rem;
+      }
+    }
+  }
+`;
+
+export default React.memo(TextArea);