Added black as the new default TextColor for the input shape

src/common/components/mock-components/front-components/input-shape.tsx

@@ -83,7 +83,7 @@ export const InputShape = forwardRef<any, ShapeProps>((props, ref) => {
           disabled
             ? DISABLED_COLOR_VALUES.DEFAULT_TEXT_COLOR
             : isPlaceholder
-              ? INPUT_SHAPE.DEFAULT_FILL_TEXT
+              ? '#8c8c8c'
               : textColor
         }
         align="left"

src/common/components/mock-components/front-components/shape.const.ts

@@ -8,7 +8,7 @@ const DEFAULT_FONT_SIZE = 16;
 const DEFAULT_FILL_TEXT = '#000000';
 const DEFAULT_PADDING = 10;
 const DEFAULT_LINE_HEIGHT = 1.25;
-const DEFAULT_FILL_TEXT_INPUT = '#8c8c8c';
+const DEFAULT_FILL_TEXT_INPUT = '#000000';
 const DEFAULT_FONT_SIZE_INPUT = 15;
 const DEFAULT_TEXT_WIDTH = 165;
 const DEFAULT_TEXT_HEIGHT = 38;

src/pods/properties/components/password/index.ts

@@ -0,0 +1 @@
+export * from './password.component';

src/pods/properties/components/password/password.component.module.css

@@ -0,0 +1,17 @@
+.container {
+  display: flex;
+  gap: 0.5em;
+  align-items: center;
+  padding: var(--space-xs) var(--space-md);
+  border-bottom: 1px solid var(--primary-300);
+}
+
+.container :first-child {
+  flex: 1;
+}
+
+.checkbox {
+  width: var(--space-md);
+  height: var(--space-md);
+  cursor: pointer;
+}

src/pods/properties/components/password/password.component.tsx

@@ -0,0 +1,23 @@
+import classes from './password.component.module.css';
+
+interface Props {
+  label: string;
+  isPassword: boolean;
+  onChange: (isPassword: boolean) => void;
+}
+
+export const Password: React.FC<Props> = props => {
+  const { label, isPassword, onChange } = props;
+
+  return (
+    <div className={classes.container}>
+      <p>{label}</p>
+      <input
+        type="checkbox"
+        checked={isPassword}
+        onChange={() => onChange(!isPassword)}
+        className={classes.checkbox}
+      />
+    </div>
+  );
+};